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
This commit is contained in:
2026-09-06 13:37:01 +02:00
parent 809077d054
commit fc8c3d5ad4
4 changed files with 122 additions and 6 deletions

View File

@@ -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 |

View File

@@ -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 type { AppProps } from '@/os/types';
type Scope = 'following' | 'global';
@@ -51,6 +52,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');
@@ -85,6 +87,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"

104
src/apps/notes/Draft.tsx Normal file
View File

@@ -0,0 +1,104 @@
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 () => {
if (!trimmed) 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… its kept as a local draft until you publish it.'
: 'Write something… its 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>
);
}

View File

@@ -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({ id: publishedId })} />;
}
if (note.isLoading) {