mirror of
https://github.com/layer-systems/website.git
synced 2026-09-14 15:26:22 +02:00
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:
@@ -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 |
|
||||
|
||||
@@ -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
104
src/apps/notes/Draft.tsx
Normal 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… 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>
|
||||
);
|
||||
}
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user