feat(desktop): add editor back, forward, and zen

Match the note-list header with a chrome row: pop-out,
distraction-free, and note history. Zen hides sidebar and
list so the editor can take the frame.

Author: tomymaritano

apps/desktop/src/renderer/App.tsx

@@ -39,6 +39,14 @@ import { useAppearanceSettings } from './hooks/useAppearanceSettings';
 import { useOfficialThemes } from './hooks/useOfficialThemes';
 import { useResizableLayout } from './hooks/useResizableLayout';
 import { useSyncStore } from './stores/syncStore';
+import {
+  canGoBack,
+  canGoForward,
+  emptyNoteHistory,
+  historyBack,
+  historyForward,
+  visitNote,
+} from './utils/noteHistory';
 import { useDeepLinks } from './hooks/useDeepLinks';
 import { useAutoSave } from './hooks/useAutoSave';
 import { useNoteActions } from './hooks/useNoteActions';
@@ -75,19 +83,24 @@ function NotesApp() {
     sidebarWidth,
     notelistWidth,
     sidebarCollapsed,
+    distractionFree,
     toggleSidebar,
+    toggleDistractionFree,
     startResizeSidebar,
     startResizeNotelist,
   } = useResizableLayout();
 
+  const hideSidebar = sidebarCollapsed || distractionFree;
+  const hideNoteList = distractionFree;
+
   useEffect(() => {
     const setVisibility = window.dripnex.windows.setButtonVisibility;
     if (typeof setVisibility !== 'function') return;
-    void setVisibility(!sidebarCollapsed);
+    void setVisibility(!hideSidebar);
     return () => {
       void setVisibility(true);
     };
-  }, [sidebarCollapsed]);
+  }, [hideSidebar]);
 
   // Navigation state from Zustand
   const navigation = useNavigation();
@@ -129,6 +142,11 @@ function NotesApp() {
   const [selectedNote, setSelectedNote] = useState<NoteSnapshot | null>(null);
   const selectedNoteRef = useRef<NoteSnapshot | null>(null);
   selectedNoteRef.current = selectedNote;
+  const [noteHistory, setNoteHistory] = useState(emptyNoteHistory);
+  const setSelectedNoteAndVisit = useCallback((note: NoteSnapshot | null) => {
+    setSelectedNote(note);
+    if (note) setNoteHistory(prev => visitNote(prev, note.id));
+  }, []);
   const { appAPI, dataAPI, pluginSlot } = usePluginRuntime(selectedNoteRef);
   const { searchQuery, debouncedSearch, handleSearch, clearSearch } = useDebouncedSearch(300);
   const [isGraphOpen, setIsGraphOpen] = useState(false);
@@ -250,7 +268,7 @@ function NotesApp() {
     handleStatusChange,
   } = useNoteActions({
     selectedNote,
-    setSelectedNote,
+    setSelectedNote: setSelectedNoteAndVisit,
     selectedNotebookId,
     clearSearch,
     appAPI,
@@ -292,9 +310,31 @@ function NotesApp() {
     setIsGraphOpen,
     searchQuery,
     clearSearch,
-    setSelectedNote,
+    setSelectedNote: setSelectedNoteAndVisit,
     displayedNotes,
     onSelectNote: handleSelectNote,
+    onNoteBack: () => {
+      const { state, id } = historyBack(noteHistory);
+      if (!id) return;
+      setNoteHistory(state);
+      void window.dripnex.notes.get(id).then(result => {
+        if (result.ok) setSelectedNote(result.data);
+      });
+    },
+    onNoteForward: () => {
+      const { state, id } = historyForward(noteHistory);
+      if (!id) return;
+      setNoteHistory(state);
+      void window.dripnex.notes.get(id).then(result => {
+        if (result.ok) setSelectedNote(result.data);
+      });
+    },
+    onToggleZen: toggleDistractionFree,
+    onOpenInWindow: () => {
+      const note = selectedNoteRef.current;
+      if (!note) return;
+      void window.dripnex.windows.openNote(note.id, note.title || 'Note');
+    },
   });
 
   // Determine selected quick filter for NoteList header
@@ -371,14 +411,14 @@ function NotesApp() {
           <div className="app__layout">
             <aside
               className="app__sidebar"
-              data-collapsed={sidebarCollapsed ? 'true' : 'false'}
+              data-collapsed={hideSidebar ? 'true' : 'false'}
               style={{ width: sidebarWidth }}
-              aria-hidden={sidebarCollapsed}
-              inert={sidebarCollapsed || undefined}
+              aria-hidden={hideSidebar}
+              inert={hideSidebar || undefined}
             >
               <Sidebar onOpenGraph={() => setIsGraphOpen(true)} />
             </aside>
-            {!sidebarCollapsed ? (
+            {!hideSidebar ? (
               <div
                 className="resize-handle"
                 onMouseDown={startResizeSidebar}
@@ -387,7 +427,13 @@ function NotesApp() {
               />
             ) : null}
 
-            <section className="app__notelist" style={{ width: notelistWidth }}>
+            <section
+              className="app__notelist"
+              data-collapsed={hideNoteList ? 'true' : 'false'}
+              style={{ width: notelistWidth }}
+              aria-hidden={hideNoteList}
+              inert={hideNoteList || undefined}
+            >
               <NoteList
                 notes={displayedNotes}
                 selectedId={selectedNote?.id ?? null}
@@ -415,12 +461,14 @@ function NotesApp() {
                 isLoading={isLoading}
               />
             </section>
-            <div
-              className="resize-handle"
-              onMouseDown={startResizeNotelist}
-              role="separator"
-              aria-orientation="vertical"
-            />
+            {!hideNoteList ? (
+              <div
+                className="resize-handle"
+                onMouseDown={startResizeNotelist}
+                role="separator"
+                aria-orientation="vertical"
+              />
+            ) : null}
 
             <main className="app__editor">
               {isGraphOpen ? (
@@ -462,6 +510,33 @@ function NotesApp() {
                   onWikilinkClick={handleWikilinkClick}
                   onNavigateToNote={handleSelectNote}
                   onNoteUpdate={setSelectedNote}
+                  canBack={canGoBack(noteHistory)}
+                  canForward={canGoForward(noteHistory)}
+                  distractionFree={distractionFree}
+                  onBack={() => {
+                    const { state, id } = historyBack(noteHistory);
+                    if (!id) return;
+                    setNoteHistory(state);
+                    void window.dripnex.notes.get(id).then(result => {
+                      if (result.ok) setSelectedNote(result.data);
+                    });
+                  }}
+                  onForward={() => {
+                    const { state, id } = historyForward(noteHistory);
+                    if (!id) return;
+                    setNoteHistory(state);
+                    void window.dripnex.notes.get(id).then(result => {
+                      if (result.ok) setSelectedNote(result.data);
+                    });
+                  }}
+                  onToggleZen={toggleDistractionFree}
+                  onOpenWindow={() => {
+                    if (!selectedNote) return;
+                    void window.dripnex.windows.openNote(
+                      selectedNote.id,
+                      selectedNote.title || 'Note'
+                    );
+                  }}
                 />
               )}
             </main>

apps/desktop/src/renderer/components/CommandPalette.tsx

@@ -28,6 +28,10 @@ import {
   RefreshCw,
   Hash,
   BookMarked,
+  ArrowLeft,
+  ArrowRight,
+  Maximize2,
+  SquareArrowOutUpRight,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { CommandCategory } from '@dripnex/command-registry';
@@ -95,6 +99,10 @@ const ICON_MAP: Record<string, LucideIcon> = {
   RefreshCw,
   Hash,
   BookMarked,
+  ArrowLeft,
+  ArrowRight,
+  Maximize2,
+  SquareArrowOutUpRight,
 };
 
 const CATEGORY_ORDER: { category: CommandCategory; label: string }[] = [

apps/desktop/src/renderer/components/NoteEditor.module.css

@@ -63,12 +63,28 @@
   animation: editor-spin 0.8s linear infinite;
 }
 
-.note-editor-header {
+.note-editor-chrome {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  column-gap: 12px;
-  padding: 6px 16px;
+  column-gap: 8px;
+  padding: 8px 10px;
+  min-height: 44px;
+  border-bottom: 1px solid var(--border-subtle);
+  -webkit-app-region: drag;
+}
+
+.note-editor-chrome-left {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  -webkit-app-region: no-drag;
+}
+
+.note-editor-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px 4px;
   border-bottom: none;
   -webkit-app-region: drag;
 }