feat(desktop): round the sidebar and fix note windows

Sidebar is a padded card with a Detail control for workspace
view. Detached note windows get a drag strip and skip the
main-chrome cluster. Motion is a plugin that scales CSS tokens;
custom keyframes stay in styles.css.

Author: tomymaritano

apps/desktop/src/main/userHackFiles.ts

@@ -45,12 +45,21 @@ export const STYLES_CSS_TEMPLATE = `/* Dripnex user stylesheet
  * Accent:    --accent  --accent-muted
  * Borders:   --border  --border-subtle
  *
- * Example:
+ * Motion (no JS library). Durations:
+ *   --transition-fast  --transition-normal  --transition-slow
+ * Settings → Plugins → Motion scales those. Or override here:
  *
  * :root {
  *   --accent: #f59e0b;
+ *   --transition-normal: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  * }
  *
+ * @keyframes dripnex-fade {
+ *   from { opacity: 0; }
+ *   to { opacity: 1; }
+ * }
+ * .app__sidebar { animation: dripnex-fade 200ms ease; }
+ *
  * .note-list-item[data-selected="true"] {
  *   background: color-mix(in srgb, var(--accent) 18%, transparent);
  * }

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

@@ -78,9 +78,14 @@
   display: flex;
   align-items: center;
   gap: 2px;
+  min-width: 0;
   -webkit-app-region: no-drag;
 }
 
+.note-editor-chrome-drag {
+  display: none;
+}
+
 .note-editor-header {
   display: flex;
   align-items: center;

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

@@ -70,6 +70,7 @@ interface NoteEditorProps {
   onForward?: () => void;
   onToggleZen?: () => void;
   onOpenWindow?: () => void;
+  chromeVariant?: 'main' | 'window';
 }
 
 export function NoteEditor({
@@ -94,6 +95,7 @@ export function NoteEditor({
   onForward,
   onToggleZen,
   onOpenWindow,
+  chromeVariant = 'main',
 }: NoteEditorProps) {
   const { showToast } = useToast();
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
@@ -357,6 +359,7 @@ export function NoteEditor({
   return (
     <main className={sc('note-editor')} aria-label="Note editor">
       <EditorChrome
+        variant={chromeVariant}
         canBack={canBack}
         canForward={canForward}
         distractionFree={distractionFree}

apps/desktop/src/renderer/components/NoteWindow.css

@@ -45,10 +45,25 @@
   border: none;
 }
 
-.note-window .note-editor-header {
+.note-window .note-editor-chrome {
   -webkit-app-region: drag;
+  padding-left: 72px;
 }
 
+.note-window .note-editor-chrome-left,
+.note-window .note-editor-header-mid,
 .note-window .note-editor-header-actions {
   -webkit-app-region: no-drag;
 }
+
+.note-window .note-editor-chrome-drag {
+  display: block;
+  flex: 1;
+  min-width: 48px;
+  height: 28px;
+  -webkit-app-region: drag;
+}
+
+.note-window .note-editor-header {
+  -webkit-app-region: drag;
+}

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

@@ -151,6 +151,7 @@ function NoteWindowContent({ noteId }: NoteWindowContentProps) {
         onUpdate={handleUpdate}
         onTitleUpdate={handleTitleUpdate}
         onStatusChange={handleStatusChange}
+        chromeVariant="window"
       />
     </div>
   );

apps/desktop/src/renderer/components/editor/EditorChrome.tsx

@@ -6,6 +6,7 @@ import { sc } from '../noteEditorSc';
 import { EditorViewToggle } from './EditorViewToggle';
 
 interface EditorChromeProps {
+  variant?: 'main' | 'window';
   canBack: boolean;
   canForward: boolean;
   distractionFree: boolean;
@@ -20,6 +21,7 @@ interface EditorChromeProps {
 }
 
 export function EditorChrome({
+  variant = 'main',
   canBack,
   canForward,
   distractionFree,
@@ -33,28 +35,34 @@ export function EditorChrome({
   actions,
 }: EditorChromeProps) {
   return (
-    <div className={sc('note-editor-chrome')}>
+    <div className={sc('note-editor-chrome')} data-variant={variant}>
       <div className={sc('note-editor-chrome-left')}>
-        <IconButton label="Open in new window" onClick={onOpenWindow}>
-          <SquareArrowOutUpRight size={16} aria-hidden="true" />
-        </IconButton>
-        <IconButton
-          label={distractionFree ? 'Exit Distraction Free Mode' : 'Enter Distraction Free Mode'}
-          pressed={distractionFree}
-          onClick={onToggleZen}
-        >
-          {distractionFree ? (
-            <Minimize2 size={16} aria-hidden="true" />
-          ) : (
-            <Maximize2 size={16} aria-hidden="true" />
-          )}
-        </IconButton>
-        <IconButton label="Back" disabled={!canBack} onClick={onBack}>
-          <ArrowLeft size={16} aria-hidden="true" />
-        </IconButton>
-        <IconButton label="Forward" disabled={!canForward} onClick={onForward}>
-          <ArrowRight size={16} aria-hidden="true" />
-        </IconButton>
+        {variant === 'main' ? (
+          <>
+            <IconButton label="Open in new window" onClick={onOpenWindow}>
+              <SquareArrowOutUpRight size={16} aria-hidden="true" />
+            </IconButton>
+            <IconButton
+              label={distractionFree ? 'Exit Distraction Free Mode' : 'Enter Distraction Free Mode'}
+              pressed={distractionFree}
+              onClick={onToggleZen}
+            >
+              {distractionFree ? (
+                <Minimize2 size={16} aria-hidden="true" />
+              ) : (
+                <Maximize2 size={16} aria-hidden="true" />
+              )}
+            </IconButton>
+            <IconButton label="Back" disabled={!canBack} onClick={onBack}>
+              <ArrowLeft size={16} aria-hidden="true" />
+            </IconButton>
+            <IconButton label="Forward" disabled={!canForward} onClick={onForward}>
+              <ArrowRight size={16} aria-hidden="true" />
+            </IconButton>
+          </>
+        ) : (
+          <span className={sc('note-editor-chrome-drag')} aria-hidden="true" />
+        )}
       </div>
       <div className={sc('note-editor-header-mid')}>
         <EditorViewToggle mode={viewMode} onModeChange={onModeChange} />

apps/desktop/src/renderer/components/sidebar/NotebookItem.tsx

@@ -12,6 +12,7 @@ import {
 } from 'lucide-react';
 import type { NotebookTreeNode } from '../../../preload/index';
 import { useNotebookExpandStore } from '../../stores/notebookExpandStore';
+import { useWorkspaceRootId } from '../../hooks/useNavigation';
 import { CommitHistory } from '../git/CommitHistory';
 import { sc } from './sc';
 
@@ -26,6 +27,7 @@ interface NotebookItemProps {
   readonly ancestorIds: Set<string>;
   readonly selectedNotebookId: string | null;
   readonly onSelect: (id: string) => void;
+  readonly onEnterWorkspace?: (id: string) => void;
   readonly onRename: (id: string, name: string) => void;
   readonly onDelete: (id: string) => void;
   readonly onCreateChild: (parentId: string) => void;
@@ -56,13 +58,15 @@ export const NotebookItem = memo(function NotebookItem({
   ancestorIds,
   selectedNotebookId,
   onSelect,
+  onEnterWorkspace,
   onRename,
   onDelete,
   onCreateChild,
   onMove,
   onReorder,
   siblingIds,
 }: NotebookItemProps) {
+  const workspaceRootId = useWorkspaceRootId();
   const isExpanded = useNotebookExpandStore(s => !s.collapsedIds.includes(node.notebook.id));
   const toggleExpanded = useNotebookExpandStore(s => s.toggle);
   const expandNotebook = useNotebookExpandStore(s => s.expand);
@@ -106,6 +110,14 @@ export const NotebookItem = memo(function NotebookItem({
     [node.notebook.id, onSelect]
   );
 
+  const handleDetail = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onEnterWorkspace?.(node.notebook.id);
+    },
+    [node.notebook.id, onEnterWorkspace]
+  );
+
   const handleToggle = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -412,6 +424,17 @@ export const NotebookItem = memo(function NotebookItem({
           </span>
         )}
 
+        {onEnterWorkspace && workspaceRootId !== node.notebook.id ? (
+          <button
+            type="button"
+            className={sc('notebook-item-detail')}
+            onClick={handleDetail}
+            title="Switch to workspace view"
+          >
+            Detail
+          </button>
+        ) : null}
+
         {!isInbox && (
           <div className={sc('notebook-item-actions')}>
             <button
@@ -472,6 +495,7 @@ export const NotebookItem = memo(function NotebookItem({
               ancestorIds={ancestorIds}
               selectedNotebookId={selectedNotebookId}
               onSelect={onSelect}
+              onEnterWorkspace={onEnterWorkspace}
               onRename={onRename}
               onDelete={onDelete}
               onCreateChild={onCreateChild}

apps/desktop/src/renderer/components/sidebar/NotebookList.tsx

@@ -8,6 +8,7 @@ import { sc } from './sc';
 interface NotebookListProps {
   readonly selectedNotebookId: string | null;
   readonly onSelectNotebook: (id: string) => void;
+  readonly onEnterWorkspace?: (id: string) => void;
   readonly onDeletedNotebook?: (id: string) => void;
   readonly filterParentId?: string | null;
   /** Show this notebook and its descendants as the forest root. */
@@ -52,6 +53,7 @@ function NotebookListError({ message }: { message: string }) {
 export function NotebookList({
   selectedNotebookId,
   onSelectNotebook,
+  onEnterWorkspace,
   onDeletedNotebook,
   filterParentId,
   workspaceRootId,
@@ -172,6 +174,7 @@ export function NotebookList({
             ancestorIds={ancestorIds}
             selectedNotebookId={selectedNotebookId}
             onSelect={onSelectNotebook}
+            onEnterWorkspace={onEnterWorkspace}
             onRename={handleRename}
             onDelete={handleDelete}
             onCreateChild={onRequestCreateChild}

apps/desktop/src/renderer/components/sidebar/Sidebar.tsx

@@ -111,8 +111,8 @@ export function Sidebar({ onOpenGraph }: SidebarProps) {
       if (have.has(template.title.toLowerCase())) continue;
       await createNote.mutateAsync({ content: template.content, notebookId: 'templates' });
     }
-    enterWorkspace('templates');
-  }, [createNote, enterWorkspace, queryClient]);
+    goToNotebook('templates');
+  }, [createNote, goToNotebook, queryClient]);
 
   const handleCreateNotebook = useCallback(
     async (name: string, parentId: string | null) => {
@@ -137,13 +137,16 @@ export function Sidebar({ onOpenGraph }: SidebarProps) {
 
   const handleSelectNotebook = useCallback(
     (id: string) => {
-      if (!workspaceRootId) {
-        enterWorkspace(id);
-        return;
-      }
       goToNotebook(id);
     },
-    [workspaceRootId, enterWorkspace, goToNotebook]
+    [goToNotebook]
+  );
+
+  const handleEnterWorkspace = useCallback(
+    (id: string) => {
+      enterWorkspace(id);
+    },
+    [enterWorkspace]
   );
 
   const handleDeletedNotebook = useCallback(
@@ -233,19 +236,29 @@ export function Sidebar({ onOpenGraph }: SidebarProps) {
 
         {!isNotebookContext && (
           <div className={sc('sidebar-templates')}>
-            <button
-              type="button"
-              className={sc('sidebar-row', selectedNotebookId === 'templates' && 'selected')}
-              onClick={() => void openTemplates()}
-            >
-              <span className={sc('sidebar-row-icon')} aria-hidden="true">
-                <FileStack size={15} />
-              </span>
-              <span className={sc('sidebar-row-label')}>Note Templates</span>
-              {templateCount > 0 ? (
-                <span className={sc('sidebar-row-count')}>{templateCount}</span>
-              ) : null}
-            </button>
+            <div className={sc('sidebar-row', selectedNotebookId === 'templates' && 'selected')}>
+              <button
+                type="button"
+                className={sc('sidebar-row-main')}
+                onClick={() => void openTemplates()}
+              >
+                <span className={sc('sidebar-row-icon')} aria-hidden="true">
+                  <FileStack size={15} />
+                </span>
+                <span className={sc('sidebar-row-label')}>Note Templates</span>
+                {templateCount > 0 ? (
+                  <span className={sc('sidebar-row-count')}>{templateCount}</span>
+                ) : null}
+              </button>
+              <button
+                type="button"
+                className={sc('sidebar-row-detail')}
+                onClick={() => enterWorkspace('templates')}
+                title="Switch to workspace view"
+              >
+                Detail
+              </button>
+            </div>
           </div>
         )}
 
@@ -263,6 +276,7 @@ export function Sidebar({ onOpenGraph }: SidebarProps) {
             <NotebookList
               selectedNotebookId={selectedNotebookId}
               onSelectNotebook={handleSelectNotebook}
+              onEnterWorkspace={handleEnterWorkspace}
               onDeletedNotebook={handleDeletedNotebook}
               workspaceRootId={workspaceRootId}
               onRequestCreateChild={openCreateChild}