feat: local draft notes with a blank "new note" entry point (#28)

* feat: local draft notes with a blank "new note" entry point

Writing was tied to publishing: the Feed composer either sits empty
or fires a note straight to relays, with nowhere to keep something
you're not ready to publish yet.

The Note app now supports a draft mode when opened without an id: a
blank note kept in localStorage until you publish it or discard it,
reachable via a new "New note" button in the Feed toolbar, the Go
menu, or the command palette (all already open the Note app with no
params).

Closes #19

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

* fix: guard against double-publish and dropped relay params

Per review:
- handlePublish now also checks publish.isPending itself, not just
  the button's disabled state — a second click landing before React
  re-renders could otherwise fire mutateAsync twice.
- Publishing a draft now merges into the existing params instead of
  replacing them outright, so relay hints (or anything else already
  in params) survive the id being added.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

* docs: mark notes app's id param as optional

Per review — the draft mode added by this PR means id is no longer
required to open the Note app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

* fix: sync useLocalStorage across same-tab consumers of one key

Per review: the Notes app is explicitly non-singleton, so opening two
"New Note" windows meant two DraftNote instances writing the same
localStorage key independently — the native `storage` event only
fires in *other* tabs/documents, never the one that wrote, so the two
windows would silently diverge (discard/publish in one wouldn't
update the other).

useLocalStorage now also dispatches a same-document custom event on
every write, and every instance sharing that key listens for it —
verified live with two open draft windows staying in sync as one is
typed into.

Also dropped a redundant `{}` params argument on an openApp() call
that every other call site omits when opening with no parameters.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

---------

Co-authored-by: highperfocused <highperfocused@pm.me>
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

docs/apps.md

@@ -95,7 +95,7 @@ export default function ExampleApp({ setTitle }: AppProps) {
 |---|---|---|---|
 | Feed | `feed` | — | kind 1 timeline, Following/Global, composer (⌘↵ publishes) |
 | Profile | `profile` | `pubkey`, `relays?` | kind 0 metadata, the author's notes, follow/unfollow |
-| Note | `notes` | `id`, `relays?` | One note and its replies. **Not** a singleton |
+| Note | `notes` | `id?`, `relays?` | One note and its replies, or a blank local draft when `id` is absent. **Not** a singleton |
 | Reader | `articles` | `pubkey?`, `identifier?`, `kind?`, `relays?` | NIP-23 long-form, `react-markdown` |
 | Relays | `relays` | — | Connection state, subscription count, measured latency |
 | Settings | `settings` | — | Theme, relay list, Blossom servers, account, session |

src/apps/feed/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
-import { Globe, Loader2, Users } from 'lucide-react';
+import { FileText, Globe, Loader2, Users } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';
 import { AppBody, AppLayout, AppToolbar, EmptyState } from '@/components/os/AppChrome';
 import { NoteCard } from '@/components/nostr/NoteCard';
@@ -11,6 +11,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useMyFollows } from '@/hooks/useFollows';
 import { cn } from '@/lib/utils';
+import { useWindowManager } from '@/os/useWindowManager';
 import { isReply } from '@/lib/nostrUtils';
 import type { AppProps } from '@/os/types';
 
@@ -60,6 +61,7 @@ function useFeed(scope: Scope, authors: string[] | undefined) {
 
 export default function FeedApp({ setTitle }: AppProps) {
   const { user } = useCurrentUser();
+  const { openApp } = useWindowManager();
   const { data: follows } = useMyFollows();
   const [requestedScope, setScope] = useState<Scope>('following');
 
@@ -94,6 +96,15 @@ export default function FeedApp({ setTitle }: AppProps) {
         />
         <div className="ml-auto flex items-center gap-2">
           {query.isFetching && <Loader2 className="size-3.5 animate-spin text-muted-foreground" aria-hidden />}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1.5 px-2 text-xs"
+            onClick={() => openApp('notes')}
+          >
+            <FileText className="size-3.5" aria-hidden />
+            New note
+          </Button>
           <Button
             variant="ghost"
             size="sm"

src/apps/notes/Draft.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { Loader2, Send, Trash2 } from 'lucide-react';
+import { AppBody, AppLayout, AppToolbar } from '@/components/os/AppChrome';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useToast } from '@/hooks/useToast';
+
+const DRAFT_KEY = 'layer-os:draft-note';
+
+/**
+ * A blank note kept as a local draft — not published until you say so, and
+ * not lost between sessions or windows in the meantime. This is the "open a
+ * new note" entry point (reachable from the Go menu, the command palette,
+ * and the Feed toolbar) for writing something before deciding it is worth
+ * publishing.
+ */
+export function DraftNote({ onPublished }: { onPublished: (id: string) => void }) {
+  const { user } = useCurrentUser();
+  const [draft, setDraft] = useLocalStorage(DRAFT_KEY, '');
+  const publish = useNostrPublish();
+  const { toast } = useToast();
+  const [confirmingDiscard, setConfirmingDiscard] = useState(false);
+
+  const trimmed = draft.trim();
+
+  const handlePublish = async () => {
+    // Guarded here too, not just via the button's `disabled` — React hasn't
+    // necessarily re-rendered with publish.isPending yet when a second click
+    // lands in the same tick, and mutateAsync itself doesn't dedupe calls.
+    if (!trimmed || publish.isPending) return;
+    try {
+      const event = await publish.mutateAsync({ kind: 1, content: trimmed, tags: [] });
+      setDraft('');
+      toast({ title: 'Note published' });
+      onPublished(event.id);
+    } catch (error) {
+      toast({
+        title: 'Could not publish',
+        description: error instanceof Error ? error.message : 'No relay accepted the note.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleDiscard = () => {
+    if (!confirmingDiscard) {
+      setConfirmingDiscard(true);
+      return;
+    }
+    setDraft('');
+    setConfirmingDiscard(false);
+  };
+
+  return (
+    <AppLayout>
+      <AppToolbar>
+        <span className="text-[13px] font-medium">New Note</span>
+        <div className="ml-auto flex items-center gap-2">
+          {draft && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 px-2 text-xs text-muted-foreground"
+              onClick={handleDiscard}
+              onBlur={() => setConfirmingDiscard(false)}
+            >
+              <Trash2 className="size-3.5" aria-hidden />
+              {confirmingDiscard ? 'Click again to discard' : 'Discard draft'}
+            </Button>
+          )}
+          {user && (
+            <Button
+              size="sm"
+              className="h-7 gap-1.5 px-2.5 text-xs"
+              onClick={handlePublish}
+              disabled={!trimmed || publish.isPending}
+            >
+              {publish.isPending ? (
+                <Loader2 className="size-3.5 animate-spin" aria-hidden />
+              ) : (
+                <Send className="size-3.5" aria-hidden />
+              )}
+              Publish
+            </Button>
+          )}
+        </div>
+      </AppToolbar>
+
+      <AppBody className="flex flex-col p-4">
+        <Textarea
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          placeholder={
+            user
+              ? 'Write something… it’s kept as a local draft until you publish it.'
+              : 'Write something… it’s kept as a local draft on this device. Sign in to publish it.'
+          }
+          autoFocus
+          className="min-h-40 flex-1 resize-none border-0 bg-transparent p-0 text-[15px] leading-relaxed shadow-none focus-visible:ring-0"
+        />
+      </AppBody>
+    </AppLayout>
+  );
+}

src/apps/notes/index.tsx

@@ -8,6 +8,7 @@ import { AuthorLine } from '@/components/nostr/AuthorLine';
 import { NoteContent } from '@/components/nostr/NoteContent';
 import { NoteCard } from '@/components/nostr/NoteCard';
 import { Composer } from '@/apps/feed/Composer';
+import { DraftNote } from './Draft';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -51,7 +52,7 @@ function useReplies(id: string | undefined, relays: string[] | undefined) {
   });
 }
 
-export default function NotesApp({ params, setTitle }: AppProps) {
+export default function NotesApp({ params, setTitle, setParams }: AppProps) {
   const { user } = useCurrentUser();
   const id = params.id;
   const relays = decodeRelayHints(params.relays);
@@ -62,11 +63,11 @@ export default function NotesApp({ params, setTitle }: AppProps) {
   const name = note.data ? displayName(note.data.pubkey, author.data?.metadata) : undefined;
 
   useEffect(() => {
-    setTitle(name ? `Note by ${name}` : 'Note');
-  }, [name, setTitle]);
+    setTitle(id ? (name ? `Note by ${name}` : 'Note') : 'New Note');
+  }, [id, name, setTitle]);
 
   if (!id) {
-    return <EmptyState title="No note selected" hint="Open a note from the feed to read its thread." />;
+    return <DraftNote onPublished={(publishedId) => setParams({ ...params, id: publishedId })} />;
   }
 
   if (note.isLoading) {

src/hooks/useLocalStorage.ts

@@ -1,4 +1,19 @@
-import { useState, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+/**
+ * Fired on `window` whenever `useLocalStorage` writes a key, so every
+ * component sharing that key *within this document* stays in sync — the
+ * native `storage` event only fires in *other* tabs/documents, never the
+ * one that made the write. Without this, e.g. two "New Note" draft windows
+ * open at once would silently diverge: each holds its own React state, both
+ * write to the same localStorage entry, and neither sees the other's edits.
+ */
+const LOCAL_STORAGE_EVENT = 'app:local-storage';
+
+interface LocalStorageEventDetail {
+  key: string;
+  value: string;
+}
 
 /**
  * Generic hook for managing localStorage state
@@ -24,17 +39,30 @@ export function useLocalStorage<T>(
     }
   });
 
-  const setValue = (value: T | ((prev: T) => T)) => {
-    try {
-      const valueToStore = value instanceof Function ? value(state) : value;
-      setState(valueToStore);
-      localStorage.setItem(key, serialize(valueToStore));
-    } catch (error) {
-      console.warn(`Failed to save ${key} to localStorage:`, error);
-    }
-  };
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      setState((prev) => {
+        try {
+          const valueToStore = value instanceof Function ? value(prev) : value;
+          const serialized = serialize(valueToStore);
+          localStorage.setItem(key, serialized);
+          window.dispatchEvent(
+            new CustomEvent<LocalStorageEventDetail>(LOCAL_STORAGE_EVENT, {
+              detail: { key, value: serialized },
+            }),
+          );
+          return valueToStore;
+        } catch (error) {
+          console.warn(`Failed to save ${key} to localStorage:`, error);
+          return prev;
+        }
+      });
+    },
+    [key, serialize],
+  );
 
-  // Sync with localStorage changes from other tabs
+  // Sync with localStorage changes from other tabs, and from other
+  // components sharing this key in this tab (see LOCAL_STORAGE_EVENT above).
   useEffect(() => {
     const handleStorageChange = (e: StorageEvent) => {
       if (e.key === key && e.newValue !== null) {
@@ -45,10 +73,23 @@ export function useLocalStorage<T>(
         }
       }
     };
+    const handleLocalChange = (e: Event) => {
+      const detail = (e as CustomEvent<LocalStorageEventDetail>).detail;
+      if (detail?.key !== key) return;
+      try {
+        setState(deserialize(detail.value));
+      } catch (error) {
+        console.warn(`Failed to sync ${key} from localStorage:`, error);
+      }
+    };
 
     window.addEventListener('storage', handleStorageChange);
-    return () => window.removeEventListener('storage', handleStorageChange);
+    window.addEventListener(LOCAL_STORAGE_EVENT, handleLocalChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener(LOCAL_STORAGE_EVENT, handleLocalChange);
+    };
   }, [key, deserialize]);
 
   return [state, setValue] as const;
-}
+}