adds autosave

src/components/compose-post.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useDraftsStore } from "../store/drafts-store";
 import { DraftsModal } from "./drafts-modal";
 
@@ -9,7 +9,27 @@ export function ComposePost({ onSubmit }) {
   const [isThreadMode, setIsThreadMode] = useState(false);
   const [posts, setPosts] = useState([{ text: "", image: null }]);
   const [error, setError] = useState("");
-  const { setModalOpen, saveDraft } = useDraftsStore();
+  const { setModalOpen, saveDraft, saveAutoSave, clearAutoSave, autosave } = useDraftsStore();
+
+  // Load auto-saved content on mount
+  useEffect(() => {
+    if (autosave?.posts?.length > 0) {
+      setPosts(autosave.posts);
+      setIsThreadMode(autosave.posts.length > 1);
+    }
+  }, []);
+
+  // Auto-save every 5 seconds if content has changed
+  useEffect(() => {
+    const timer = setInterval(() => {
+      saveAutoSave(posts);
+    }, 5000);
+
+    return () => {
+      clearInterval(timer);
+      saveAutoSave(posts);
+    };
+  }, [posts, saveAutoSave]);
 
   const handleTextChange = (index, value) => {
     const newPosts = [...posts];
@@ -64,6 +84,7 @@ export function ComposePost({ onSubmit }) {
       const finalPosts = isThreadMode ? nonEmptyPosts : [posts[0]];
       await onSubmit(finalPosts);
       setPosts([{ text: "", image: null }]);
+      clearAutoSave();
     } catch (err) {
       setError("Failed to send post");
       console.error("Post error:", err);

src/components/window-container.js

@@ -32,10 +32,10 @@ export const WindowControls = () => {
       {signedAccountId && (
         <div className="mt-4 space-y-1 text-center sm:text-left">
           <p className="text-sm text-gray-600">
-            Connected as: {signedAccountId}
+            NEAR: {signedAccountId}
           </p>
           {isConnected && handle && (
-            <p className="text-sm text-gray-600">Twitter Account: @{handle}</p>
+            <p className="text-sm text-gray-600">Twitter: @{handle}</p>
           )}
         </div>
       )}

src/store/drafts-store.js

@@ -1,29 +1,31 @@
 import { create } from "zustand";
 
 const STORAGE_KEY = "crosspost_drafts";
+const AUTOSAVE_KEY = "crosspost_autosave";
 
-const loadDrafts = () => {
+const loadDrafts = (key = STORAGE_KEY) => {
   if (typeof window === "undefined") return [];
   try {
-    const saved = localStorage.getItem(STORAGE_KEY);
+    const saved = localStorage.getItem(key);
     return saved ? JSON.parse(saved) : [];
   } catch (err) {
     console.error("Failed to load drafts:", err);
     return [];
   }
 };
 
-const saveDrafts = (drafts) => {
+const saveDrafts = (drafts, key = STORAGE_KEY) => {
   if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts));
+    localStorage.setItem(key, JSON.stringify(drafts));
   } catch (err) {
     console.error("Failed to save drafts:", err);
   }
 };
 
 export const useDraftsStore = create((set, get) => ({
   drafts: loadDrafts(),
+  autosave: loadDrafts(AUTOSAVE_KEY),
   isModalOpen: false,
 
   setModalOpen: (isOpen) => set({ isModalOpen: isOpen }),
@@ -48,4 +50,25 @@ export const useDraftsStore = create((set, get) => ({
       return { drafts: newDrafts };
     });
   },
+
+  saveAutoSave: (posts) => {
+    if (posts.every(p => !p.text.trim())) {
+      // If all posts are empty, clear autosave
+      localStorage.removeItem(AUTOSAVE_KEY);
+      set({ autosave: null });
+      return;
+    }
+
+    const autosave = {
+      posts,
+      updatedAt: new Date().toISOString(),
+    };
+    saveDrafts(autosave, AUTOSAVE_KEY);
+    set({ autosave });
+  },
+
+  clearAutoSave: () => {
+    localStorage.removeItem(AUTOSAVE_KEY);
+    set({ autosave: null });
+  },
 }));