From c7edc71a9765860d4c13ed0502f85326aaa2ca02 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 26 Apr 2026 04:41:18 +0200 Subject: [PATCH] feat: add note layout preference --- docs/ABSTRACTIONS.md | 2 +- docs/ARCHITECTURE.md | 3 +- src/App.tsx | 6 +++ src/components/BreadcrumbBar.test.tsx | 23 +++++++++ src/components/BreadcrumbBar.tsx | 32 +++++++++++- src/components/Editor.css | 24 +++++++++ src/components/Editor.tsx | 13 ++++- src/components/RawEditorView.tsx | 2 +- .../EditorContentLayout.test.tsx | 11 +++- .../editor-content/EditorContentLayout.tsx | 16 +++++- .../editor-content/useEditorContentModel.ts | 4 +- src/hooks/commands/viewCommands.ts | 24 ++++++++- src/hooks/useAppCommands.ts | 8 ++- src/hooks/useCommandRegistry.test.ts | 25 +++++++++ src/hooks/useCommandRegistry.ts | 10 ++-- src/hooks/useNoteLayout.test.ts | 51 +++++++++++++++++++ src/hooks/useNoteLayout.ts | 33 ++++++++++++ src/types.ts | 4 ++ src/utils/vaultConfigStore.ts | 2 +- 19 files changed, 277 insertions(+), 16 deletions(-) create mode 100644 src/hooks/useNoteLayout.test.ts create mode 100644 src/hooks/useNoteLayout.ts diff --git a/docs/ABSTRACTIONS.md b/docs/ABSTRACTIONS.md index 93d962a9..a4d526ed 100644 --- a/docs/ABSTRACTIONS.md +++ b/docs/ABSTRACTIONS.md @@ -607,7 +607,7 @@ No indexing step required — search runs directly against the filesystem. Per-vault settings stored locally and scoped by vault path: - Managed by `useVaultConfig` hook and `vaultConfigStore` -- Settings: zoom, view mode, tag colors, status colors, property display modes, Inbox note-list column overrides, explicit organization workflow toggle +- Settings: zoom, view mode, editor mode, note layout, tag colors, status colors, property display modes, Inbox/All Notes note-list column overrides, explicit organization workflow toggle - One-time migration from localStorage (`configMigration.ts`) ### AI Guidance Files diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index 5f18e85e..8efcf5b9 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -178,7 +178,7 @@ flowchart TD - **Sidebar** (150-400px, resizable): Top-level filters (All Notes, Changes, Pulse), collapsible type-based section groups, and a dedicated folder tree. The folder tree shows user-created folders plus default vault folders such as `attachments/` and `views/`; only the dedicated `type/` directory stays hidden because note types already have their own sidebar section. The folder tree supports inline folder creation and rename, exposes a right-click menu for rename/delete, and auto-expands ancestor folders when the current selection or rename target is nested. Type sections and folder rows also act as note drop targets: dropping a note on a type updates its `type:` frontmatter, while dropping it on a folder runs the same crash-safe move path as the command palette flow. Each type can have a custom icon, color, sort, and visibility set via its type document in `type/`. - **Note List / Pulse View** (200-500px, resizable): When a section group, filter, or saved view is selected, shows filtered notes with snippets, modified dates, status indicators, and per-context note-list controls. When `selection.kind === 'entity'`, the same pane enters **Neighborhood** mode: the source note is pinned at the top as a normal active row, outgoing relationship groups render first, inverse/backlink groups follow, empty groups stay visible with `0`, and duplicates across groups are allowed when multiple relationships are true. Plain click / `Enter` open the focused note without replacing the current Neighborhood, while Cmd/Ctrl-click and Cmd/Ctrl-`Enter` pivot the pane into the clicked note's Neighborhood. Saved views reuse the same sort and visible-column controls as the built-in lists, and those changes persist back into the view `.yml` definition (`sort`, `listPropertiesDisplay`). When Pulse filter is active, shows `PulseView` — a chronological git activity feed grouped by day. -- **Editor** (flex, fills remaining space): Single note open at a time (no tabs — see ADR-0003). Breadcrumb bar with word count, BlockNote rich text editor with wikilink support, Markdown-compatible inline/display math rendering, markdown-safe formatting controls, and schema-backed fenced code block highlighting via `@blocknote/code-block`. Can toggle to diff view (modified files) or raw CodeMirror view. Decomposed into `Editor` (orchestrator), `EditorContent`, `EditorRightPanel`, `SingleEditorView`, with hooks `useDiffMode`, `useEditorFocus`, and `useEditorSave`, plus the `useRawMode`/`RawEditorView` pair for markdown source editing. Rich BlockNote input and raw CodeMirror input both route typed `->`, `<-`, and `<->` through the shared `src/utils/arrowLigatures.ts` resolver so arrow ligatures stay consistent across mode switches while escaped ASCII sequences remain literal. Navigation history (Cmd+[/]) replaces tabs. +- **Editor** (flex, fills remaining space): Single note open at a time (no tabs — see ADR-0003). Breadcrumb bar with word count and note-layout toggle, BlockNote rich text editor with wikilink support, Markdown-compatible inline/display math rendering, markdown-safe formatting controls, and schema-backed fenced code block highlighting via `@blocknote/code-block`. Can toggle to diff view (modified files), raw CodeMirror view, or a wide-screen left-aligned note column while preserving the same readable max width. Decomposed into `Editor` (orchestrator), `EditorContent`, `EditorRightPanel`, `SingleEditorView`, with hooks `useDiffMode`, `useEditorFocus`, and `useEditorSave`, plus the `useRawMode`/`RawEditorView` pair for markdown source editing. Rich BlockNote input and raw CodeMirror input both route typed `->`, `<-`, and `<->` through the shared `src/utils/arrowLigatures.ts` resolver so arrow ligatures stay consistent across mode switches while escaped ASCII sequences remain literal. Navigation history (Cmd+[/]) replaces tabs. - **Inspector / AI Agent** (200-500px or 40px collapsed): Toggles between Inspector (frontmatter, relationships, instances, backlinks, git history) and AI Agent panel (the selected CLI agent with tool execution). The Sparkle icon in the breadcrumb bar toggles between them. Per-note `icon` is a suggested Inspector property and the command palette's "Set Note Icon" action opens that field directly. When viewing a Type note, the Inspector shows an **Instances** section listing all notes of that type (sorted by modified_at desc, capped at 50). Panels are separated by `ResizeHandle` components that support drag-to-resize. @@ -435,6 +435,7 @@ Per-vault UI settings stored locally per vault path (currently in browser/Tauri - `zoom`: Float zoom level (0.8–1.5) - `view_mode`: "all" | "editor-list" | "editor-only" - `editor_mode`: "raw" | "preview" (persists across note switches and sessions) +- `note_layout`: "centered" | "left" (wide-screen note column alignment for rich and raw editors) - `tag_colors`, `status_colors`: Custom color overrides - `property_display_modes`: Property display preferences - `inbox.noteListProperties`: Optional Inbox-only property chip override for the note list diff --git a/src/App.tsx b/src/App.tsx index febe2c0d..8043088e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -38,6 +38,7 @@ import { planNewTypeCreation } from './hooks/useNoteCreation' import { useCommitFlow } from './hooks/useCommitFlow' import { useGitRemoteStatus } from './hooks/useGitRemoteStatus' import { useViewMode, type ViewMode } from './hooks/useViewMode' +import { useNoteLayout } from './hooks/useNoteLayout' import { useEntryActions } from './hooks/useEntryActions' import { useAppCommands } from './hooks/useAppCommands' import { triggerCommitEntryAction } from './utils/commitEntryAction' @@ -1044,6 +1045,7 @@ function App() { const diffToggleRef = useRef<() => void>(() => {}) const { setViewMode, sidebarVisible, noteListVisible } = useViewMode(noteWindowParams ? 'editor-only' : undefined) + const { noteLayout, toggleNoteLayout } = useNoteLayout() const zoom = useZoom() const buildNumber = useBuildNumber() @@ -1297,6 +1299,8 @@ function App() { onToggleInspector: handleToggleInspector, onToggleDiff: toggleDiffCommand, onToggleRawEditor: toggleRawEditorCommand, + noteLayout, + onToggleNoteLayout: toggleNoteLayout, onZoomIn: zoom.zoomIn, onZoomOut: zoom.zoomOut, onZoomReset: zoom.zoomReset, zoomLevel: zoom.zoomLevel, onSelect: handleSetSelection, @@ -1502,6 +1506,8 @@ function App() { onContentChange={handleTrackedContentChange} onSave={handleTrackedSave} onRenameFilename={activeDeletedFile ? undefined : appSave.handleFilenameRename} + noteLayout={noteLayout} + onToggleNoteLayout={toggleNoteLayout} rawToggleRef={rawToggleRef} diffToggleRef={diffToggleRef} canGoBack={canGoBack} diff --git a/src/components/BreadcrumbBar.test.tsx b/src/components/BreadcrumbBar.test.tsx index cad65fb8..1d59119d 100644 --- a/src/components/BreadcrumbBar.test.tsx +++ b/src/components/BreadcrumbBar.test.tsx @@ -306,3 +306,26 @@ describe('BreadcrumbBar — raw editor toggle', () => { expect(screen.getByRole('button', { name: 'Open the raw editor' })).toBeInTheDocument() }) }) + +describe('BreadcrumbBar — note layout toggle', () => { + it('shows the left-align layout action while centered', () => { + render() + + expect(screen.getByRole('button', { name: 'Switch to left-aligned note layout' })).toBeInTheDocument() + }) + + it('shows the centered layout action while left-aligned', () => { + render() + + expect(screen.getByRole('button', { name: 'Switch to centered note layout' })).toBeInTheDocument() + }) + + it('calls onToggleNoteLayout when the layout button is clicked', () => { + const onToggleNoteLayout = vi.fn() + render() + + fireEvent.click(screen.getByRole('button', { name: 'Switch to left-aligned note layout' })) + + expect(onToggleNoteLayout).toHaveBeenCalledOnce() + }) +}) diff --git a/src/components/BreadcrumbBar.tsx b/src/components/BreadcrumbBar.tsx index 27c60716..a49f366d 100644 --- a/src/components/BreadcrumbBar.tsx +++ b/src/components/BreadcrumbBar.tsx @@ -1,5 +1,5 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react' -import type { VaultEntry } from '../types' +import type { NoteLayout, VaultEntry } from '../types' import { cn } from '@/lib/utils' import { formatShortcutDisplay } from '../hooks/appCommandCatalog' import { Button } from '@/components/ui/button' @@ -17,6 +17,8 @@ import { Star, CheckCircle, ArrowsClockwise, + TextAlignCenter, + TextAlignLeft, } from '@phosphor-icons/react' import { NoteTitleIcon } from './NoteTitleIcon' import { slugify } from '../hooks/useNoteCreation' @@ -43,6 +45,8 @@ interface BreadcrumbBarProps { onArchive?: () => void onUnarchive?: () => void onRenameFilename?: (path: string, newFilenameStem: string) => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void /** Ref for direct DOM manipulation — avoids re-render on scroll. */ barRef?: React.Ref } @@ -181,6 +185,29 @@ function RawToggleButton({ rawMode, onToggleRaw }: { rawMode?: boolean; onToggle ) } +function NoteLayoutAction({ + noteLayout = 'centered', + onToggleNoteLayout, +}: { + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void +}) { + if (!onToggleNoteLayout) return null + + const isLeftAligned = noteLayout === 'left' + return ( + + {isLeftAligned + ? + : } + + ) +} + function FavoriteAction({ favorite, onToggleFavorite }: { favorite: boolean; onToggleFavorite?: () => void }) { return ( {!forceRawMode && } + diff --git a/src/components/Editor.css b/src/components/Editor.css index f5f9d30d..e4881d1f 100644 --- a/src/components/Editor.css +++ b/src/components/Editor.css @@ -204,6 +204,22 @@ width: 100%; } +.editor-content-layout--left .editor-content-wrapper { + margin-left: clamp(16px, 6%, 96px); + margin-right: auto; +} + +.raw-editor-codemirror { + max-width: var(--editor-max-width, 760px); + width: 100%; + margin: 0 auto; +} + +.editor-content-layout--left .raw-editor-codemirror { + margin-left: clamp(16px, 6%, 96px); + margin-right: auto; +} + /* --- Note Icon Area --- */ .note-icon-area { display: flex; @@ -322,3 +338,11 @@ padding: 12px 0; } } + +@container editor (max-width: 900px) { + .editor-content-layout--left .editor-content-wrapper, + .editor-content-layout--left .raw-editor-codemirror { + margin-left: auto; + margin-right: auto; + } +} diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 034b4187..ae971652 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -5,7 +5,7 @@ import '@blocknote/mantine/style.css' import 'katex/dist/katex.min.css' import { uploadImageFile } from '../hooks/useImageDrop' import { DEFAULT_AI_AGENT, type AiAgentId } from '../lib/aiAgents' -import type { VaultEntry, GitCommit, NoteStatus } from '../types' +import type { VaultEntry, GitCommit, NoteLayout, NoteStatus } from '../types' import type { NoteListItem } from '../utils/ai-context' import type { FrontmatterValue } from './Inspector' import { ResizeHandle } from './ResizeHandle' @@ -73,6 +73,8 @@ interface EditorProps { onSave?: () => void /** Called when the user explicitly renames the filename from the breadcrumb. */ onRenameFilename?: (path: string, newFilenameStem: string) => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void canGoBack?: boolean canGoForward?: boolean onGoBack?: () => void @@ -299,6 +301,8 @@ function EditorLayout({ rawModeContent, rawLatestContentRef, onRenameFilename, + noteLayout, + onToggleNoteLayout, isConflicted, onKeepMine, onKeepTheirs, @@ -353,6 +357,8 @@ function EditorLayout({ rawModeContent: string | null rawLatestContentRef: React.MutableRefObject onRenameFilename?: (path: string, newFilenameStem: string) => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void isConflicted?: boolean onKeepMine?: (path: string) => void onKeepTheirs?: (path: string) => void @@ -412,6 +418,8 @@ function EditorLayout({ rawModeContent={rawModeContent} rawLatestContentRef={rawLatestContentRef} onRenameFilename={onRenameFilename} + noteLayout={noteLayout} + onToggleNoteLayout={onToggleNoteLayout} isConflicted={isConflicted} onKeepMine={onKeepMine} onKeepTheirs={onKeepTheirs} @@ -467,6 +475,7 @@ export const Editor = memo(function Editor(props: EditorProps) { vaultPath, noteList, noteListFilter, onToggleFavorite, onToggleOrganized, onDeleteNote, onArchiveNote, onUnarchiveNote, onContentChange, onSave, onRenameFilename, + noteLayout, onToggleNoteLayout, onFileCreated, onFileModified, onVaultChanged, isConflicted, onKeepMine, onKeepTheirs, flushPendingRawContentRef, @@ -527,6 +536,8 @@ export const Editor = memo(function Editor(props: EditorProps) { rawModeContent={rawModeContent} rawLatestContentRef={rawLatestContentRef} onRenameFilename={onRenameFilename} + noteLayout={noteLayout} + onToggleNoteLayout={onToggleNoteLayout} isConflicted={isConflicted} onKeepMine={onKeepMine} onKeepTheirs={onKeepTheirs} diff --git a/src/components/RawEditorView.tsx b/src/components/RawEditorView.tsx index 52b241a1..2c318139 100644 --- a/src/components/RawEditorView.tsx +++ b/src/components/RawEditorView.tsx @@ -373,7 +373,7 @@ export function RawEditorView({ content, path, entries, onContentChange, onSave,
diff --git a/src/components/editor-content/EditorContentLayout.test.tsx b/src/components/editor-content/EditorContentLayout.test.tsx index 130f07f8..a010c666 100644 --- a/src/components/editor-content/EditorContentLayout.test.tsx +++ b/src/components/editor-content/EditorContentLayout.test.tsx @@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest' import { EditorContentLayout } from './EditorContentLayout' vi.mock('../BreadcrumbBar', () => ({ - BreadcrumbBar: () =>
, + BreadcrumbBar: ({ noteLayout }: { noteLayout?: string }) =>
, })) vi.mock('../ArchivedNoteBanner', () => ({ @@ -63,6 +63,8 @@ function createModel(overrides: Record = {}) { onEditorChange: vi.fn(), isDeletedPreview: false, rawLatestContentRef: { current: null }, + noteLayout: 'centered', + onToggleNoteLayout: vi.fn(), forceRawMode: false, showAIChat: false, onToggleAIChat: vi.fn(), @@ -99,4 +101,11 @@ describe('EditorContentLayout', () => { expect(container.querySelector('.animate-pulse')).not.toBeNull() expect(screen.queryByTestId('title-field-input')).not.toBeInTheDocument() }) + + it('marks the editor content root and breadcrumb with the note layout preference', () => { + const { container } = render() + + expect(container.firstElementChild).toHaveClass('editor-content-layout--left') + expect(screen.getByTestId('breadcrumb-bar')).toHaveAttribute('data-note-layout', 'left') + }) }) diff --git a/src/components/editor-content/EditorContentLayout.tsx b/src/components/editor-content/EditorContentLayout.tsx index ef668a2d..6997a8ba 100644 --- a/src/components/editor-content/EditorContentLayout.tsx +++ b/src/components/editor-content/EditorContentLayout.tsx @@ -1,4 +1,5 @@ import type React from 'react' +import { cn } from '@/lib/utils' import { DiffView } from '../DiffView' import { BreadcrumbBar } from '../BreadcrumbBar' import { ArchivedNoteBanner } from '../ArchivedNoteBanner' @@ -28,6 +29,8 @@ type BreadcrumbActions = Pick< | 'onArchiveNote' | 'onUnarchiveNote' | 'onRenameFilename' + | 'noteLayout' + | 'onToggleNoteLayout' > function EditorLoadingSkeleton() { @@ -128,6 +131,8 @@ function ActiveTabBreadcrumb({ onArchive={bindPath(actions.onArchiveNote, path)} onUnarchive={bindPath(actions.onUnarchiveNote, path)} onRenameFilename={actions.onRenameFilename} + noteLayout={actions.noteLayout} + onToggleNoteLayout={actions.onToggleNoteLayout} /> ) } @@ -228,18 +233,23 @@ export function EditorContentLayout(model: EditorContentModel) { isDeletedPreview, rawLatestContentRef, rawModeContent, + noteLayout, } = model + const rootClassName = cn( + 'flex flex-1 flex-col min-w-0 min-h-0', + noteLayout === 'left' ? 'editor-content-layout--left' : 'editor-content-layout--centered', + ) if (!activeTab) { return ( -
+
{isLoadingNewTab && showEditor && }
) } return ( -
+
onRenameFilename?: (path: string, newFilenameStem: string) => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void isConflicted?: boolean onKeepMine?: (path: string) => void onKeepTheirs?: (path: string) => void diff --git a/src/hooks/commands/viewCommands.ts b/src/hooks/commands/viewCommands.ts index 8e6dbdd1..c6dcb79e 100644 --- a/src/hooks/commands/viewCommands.ts +++ b/src/hooks/commands/viewCommands.ts @@ -1,8 +1,16 @@ import { APP_COMMAND_IDS, getAppCommandShortcutDisplay } from '../appCommandCatalog' import type { CommandAction } from './types' import type { ViewMode } from '../useViewMode' +import type { NoteLayout } from '../../types' import { requestNewAiChat } from '../../utils/aiPromptBridge' +const NOTE_LAYOUT_COMMAND_LABELS: Record = { + centered: 'Use Left-Aligned Note Layout', + left: 'Use Centered Note Layout', +} + +const noop = () => {} + interface ViewCommandsConfig { hasActiveNote: boolean activeNoteModified: boolean @@ -10,6 +18,8 @@ interface ViewCommandsConfig { onToggleInspector: () => void onToggleDiff?: () => void onToggleRawEditor?: () => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void onToggleAIChat?: () => void zoomLevel: number onZoomIn: () => void @@ -20,10 +30,21 @@ interface ViewCommandsConfig { noteListColumnsLabel: string } +function buildNoteLayoutCommand(noteLayout: NoteLayout, onToggleNoteLayout?: () => void): CommandAction { + return { + id: 'toggle-note-layout', + label: NOTE_LAYOUT_COMMAND_LABELS[noteLayout], + group: 'View', + keywords: ['layout', 'note', 'column', 'wide', 'left', 'centered', 'reading'], + enabled: Boolean(onToggleNoteLayout), + execute: onToggleNoteLayout ?? noop, + } +} + export function buildViewCommands(config: ViewCommandsConfig): CommandAction[] { const { hasActiveNote, activeNoteModified, - onSetViewMode, onToggleInspector, onToggleDiff, onToggleRawEditor, onToggleAIChat, + onSetViewMode, onToggleInspector, onToggleDiff, onToggleRawEditor, noteLayout = 'centered', onToggleNoteLayout, onToggleAIChat, zoomLevel, onZoomIn, onZoomOut, onZoomReset, onCustomizeNoteListColumns, canCustomizeNoteListColumns, noteListColumnsLabel, } = config @@ -35,6 +56,7 @@ export function buildViewCommands(config: ViewCommandsConfig): CommandAction[] { { id: 'toggle-inspector', label: 'Toggle Properties Panel', group: 'View', shortcut: getAppCommandShortcutDisplay(APP_COMMAND_IDS.viewToggleProperties), keywords: ['properties', 'inspector', 'panel', 'right', 'sidebar'], enabled: true, execute: onToggleInspector }, { id: 'toggle-diff', label: 'Toggle Diff Mode', group: 'View', keywords: ['diff', 'changes', 'git', 'compare', 'version'], enabled: hasActiveNote && activeNoteModified, execute: () => onToggleDiff?.() }, { id: 'toggle-raw-editor', label: 'Toggle Raw Editor', group: 'View', keywords: ['raw', 'source', 'markdown', 'frontmatter', 'code', 'textarea'], enabled: hasActiveNote && !!onToggleRawEditor, execute: () => onToggleRawEditor?.() }, + buildNoteLayoutCommand(noteLayout, onToggleNoteLayout), { id: 'toggle-ai-panel', label: 'Toggle AI Panel', group: 'View', shortcut: getAppCommandShortcutDisplay(APP_COMMAND_IDS.viewToggleAiChat), keywords: ['ai', 'agent', 'chat', 'assistant', 'contextual'], enabled: true, execute: () => onToggleAIChat?.() }, { id: 'new-ai-chat', label: 'New AI chat', group: 'View', keywords: ['ai', 'agent', 'chat', 'assistant', 'new', 'fresh', 'conversation', 'reset'], enabled: true, execute: requestNewAiChat }, { id: 'toggle-backlinks', label: 'Toggle Backlinks', group: 'View', keywords: ['backlinks', 'references', 'links', 'mentions', 'incoming'], enabled: hasActiveNote, execute: onToggleInspector }, diff --git a/src/hooks/useAppCommands.ts b/src/hooks/useAppCommands.ts index 85d17dd0..7f8802b3 100644 --- a/src/hooks/useAppCommands.ts +++ b/src/hooks/useAppCommands.ts @@ -6,7 +6,7 @@ import { useCommandRegistry } from './useCommandRegistry' import type { CommandAction } from './useCommandRegistry' import { useKeyboardNavigation } from './useKeyboardNavigation' import { useMenuEvents } from './useMenuEvents' -import type { SidebarSelection, SidebarFilter, VaultEntry } from '../types' +import type { NoteLayout, SidebarSelection, SidebarFilter, VaultEntry } from '../types' import { requestAddRemote } from '../utils/addRemoteEvents' import type { NoteListFilter } from '../utils/noteListHelpers' import type { ViewMode } from './useViewMode' @@ -38,6 +38,8 @@ interface AppCommandsConfig { onToggleInspector: () => void onToggleDiff?: () => void onToggleRawEditor?: () => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void activeNoteModified: boolean onZoomIn: () => void onZoomOut: () => void @@ -135,6 +137,8 @@ type CommandRegistryCoreActions = Pick< | 'onToggleInspector' | 'onToggleDiff' | 'onToggleRawEditor' + | 'noteLayout' + | 'onToggleNoteLayout' | 'onToggleAIChat' > type CommandRegistryVaultActions = Pick< @@ -378,6 +382,8 @@ function createCommandRegistryCoreConfig( onToggleInspector: config.onToggleInspector, onToggleDiff: config.onToggleDiff, onToggleRawEditor: config.onToggleRawEditor, + noteLayout: config.noteLayout, + onToggleNoteLayout: config.onToggleNoteLayout, onToggleAIChat: config.onToggleAIChat, } } diff --git a/src/hooks/useCommandRegistry.test.ts b/src/hooks/useCommandRegistry.test.ts index 83604cc5..9e234510 100644 --- a/src/hooks/useCommandRegistry.test.ts +++ b/src/hooks/useCommandRegistry.test.ts @@ -25,6 +25,8 @@ function makeConfig(overrides: Record = {}) { onToggleInspector: vi.fn(), onToggleDiff: vi.fn(), onToggleRawEditor: vi.fn(), + noteLayout: 'centered', + onToggleNoteLayout: vi.fn(), onToggleAIChat: vi.fn(), onOpenVault: vi.fn(), activeNoteModified: false, @@ -260,6 +262,29 @@ describe('useCommandRegistry', () => { expect(findCommand(result.current, 'toggle-raw-editor')?.enabled).toBe(false) }) + it('exposes a command palette action for the note layout preference', () => { + const onToggleNoteLayout = vi.fn() + const config = makeConfig({ noteLayout: 'centered', onToggleNoteLayout }) + const { result } = renderHook(() => useCommandRegistry(config)) + const cmd = findCommand(result.current, 'toggle-note-layout') + + expect(cmd).toBeDefined() + expect(cmd!.group).toBe('View') + expect(cmd!.label).toBe('Use Left-Aligned Note Layout') + expect(cmd!.keywords).toContain('wide') + + cmd!.execute() + + expect(onToggleNoteLayout).toHaveBeenCalledOnce() + }) + + it('updates note layout command copy when left alignment is active', () => { + const config = makeConfig({ noteLayout: 'left' }) + const { result } = renderHook(() => useCommandRegistry(config)) + + expect(findCommand(result.current, 'toggle-note-layout')?.label).toBe('Use Centered Note Layout') + }) + it('includes a New AI chat command that opens and resets the panel session', () => { const config = makeConfig() const dispatchSpy = vi.spyOn(window, 'dispatchEvent') diff --git a/src/hooks/useCommandRegistry.ts b/src/hooks/useCommandRegistry.ts index 4aa28d8e..9a046b4d 100644 --- a/src/hooks/useCommandRegistry.ts +++ b/src/hooks/useCommandRegistry.ts @@ -1,7 +1,7 @@ import { useMemo } from 'react' import type { AiAgentId, AiAgentsStatus } from '../lib/aiAgents' import type { VaultAiGuidanceStatus } from '../lib/vaultAiGuidance' -import type { SidebarSelection, VaultEntry } from '../types' +import type { NoteLayout, SidebarSelection, VaultEntry } from '../types' import type { NoteListFilter } from '../utils/noteListHelpers' import type { ViewMode } from './useViewMode' import { buildNavigationCommands } from './commands/navigationCommands' @@ -72,6 +72,8 @@ interface CommandRegistryConfig { onToggleInspector: () => void onToggleDiff?: () => void onToggleRawEditor?: () => void + noteLayout?: NoteLayout + onToggleNoteLayout?: () => void onToggleAIChat?: () => void activeNoteModified: boolean onCheckForUpdates?: () => void @@ -101,7 +103,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com activeTabPath, entries, modifiedCount, onQuickOpen, onCreateNote, onCreateNoteOfType, onSave, onOpenSettings, onOpenFeedback, onDeleteNote, onArchiveNote, onUnarchiveNote, - onCommitPush, onPull, onResolveConflicts, onSetViewMode, onToggleInspector, onToggleDiff, onToggleRawEditor, onToggleAIChat, onOpenVault, onCreateEmptyVault, + onCommitPush, onPull, onResolveConflicts, onSetViewMode, onToggleInspector, onToggleDiff, onToggleRawEditor, noteLayout, onToggleNoteLayout, onToggleAIChat, onOpenVault, onCreateEmptyVault, activeNoteModified, onZoomIn, onZoomOut, onZoomReset, zoomLevel, onSelect, onRenameFolder, onDeleteFolder, @@ -169,7 +171,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com }), ...buildViewCommands({ hasActiveNote, activeNoteModified, onSetViewMode, onToggleInspector, - onToggleDiff, onToggleRawEditor, onToggleAIChat, zoomLevel, onZoomIn, onZoomOut, onZoomReset, + onToggleDiff, onToggleRawEditor, noteLayout, onToggleNoteLayout, onToggleAIChat, zoomLevel, onZoomIn, onZoomOut, onZoomReset, onCustomizeNoteListColumns, canCustomizeNoteListColumns, noteListColumnsLabel, }), ...buildSettingsCommands({ @@ -193,7 +195,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com hasActiveNote, activeTabPath, isArchived, modifiedCount, activeNoteModified, onQuickOpen, onCreateNote, onCreateNoteOfType, onCreateType, onSave, onOpenSettings, onOpenFeedback, onDeleteNote, onArchiveNote, onUnarchiveNote, - onCommitPush, onPull, onResolveConflicts, onSetViewMode, onToggleInspector, onToggleDiff, onToggleRawEditor, onToggleAIChat, onOpenVault, onCreateEmptyVault, config.canAddRemote, config.onAddRemote, + onCommitPush, onPull, onResolveConflicts, onSetViewMode, onToggleInspector, onToggleDiff, onToggleRawEditor, noteLayout, onToggleNoteLayout, onToggleAIChat, onOpenVault, onCreateEmptyVault, config.canAddRemote, config.onAddRemote, onCheckForUpdates, onZoomIn, onZoomOut, onZoomReset, zoomLevel, onSelect, onRenameFolder, onDeleteFolder, diff --git a/src/hooks/useNoteLayout.test.ts b/src/hooks/useNoteLayout.test.ts new file mode 100644 index 00000000..52e59132 --- /dev/null +++ b/src/hooks/useNoteLayout.test.ts @@ -0,0 +1,51 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { renderHook, act } from '@testing-library/react' +import { useNoteLayout } from './useNoteLayout' +import { bindVaultConfigStore, getVaultConfig, resetVaultConfigStore } from '../utils/vaultConfigStore' + +describe('useNoteLayout', () => { + beforeEach(() => { + resetVaultConfigStore() + bindVaultConfigStore( + { zoom: null, view_mode: null, editor_mode: null, note_layout: null, tag_colors: null, status_colors: null, property_display_modes: null }, + vi.fn(), + ) + }) + + it('defaults to centered note layout', () => { + const { result } = renderHook(() => useNoteLayout()) + + expect(result.current.noteLayout).toBe('centered') + }) + + it('loads persisted left note layout from vault config', () => { + resetVaultConfigStore() + bindVaultConfigStore( + { zoom: null, view_mode: null, editor_mode: null, note_layout: 'left', tag_colors: null, status_colors: null, property_display_modes: null }, + vi.fn(), + ) + + const { result } = renderHook(() => useNoteLayout()) + + expect(result.current.noteLayout).toBe('left') + }) + + it('sets note layout and persists it to vault config', () => { + const { result } = renderHook(() => useNoteLayout()) + + act(() => result.current.setNoteLayout('left')) + + expect(result.current.noteLayout).toBe('left') + expect(getVaultConfig().note_layout).toBe('left') + }) + + it('toggles between centered and left note layout', () => { + const { result } = renderHook(() => useNoteLayout()) + + act(() => result.current.toggleNoteLayout()) + expect(result.current.noteLayout).toBe('left') + + act(() => result.current.toggleNoteLayout()) + expect(result.current.noteLayout).toBe('centered') + }) +}) diff --git a/src/hooks/useNoteLayout.ts b/src/hooks/useNoteLayout.ts new file mode 100644 index 00000000..045eb753 --- /dev/null +++ b/src/hooks/useNoteLayout.ts @@ -0,0 +1,33 @@ +import { useCallback, useEffect, useState } from 'react' +import type { NoteLayout } from '../types' +import { getVaultConfig, subscribeVaultConfig, updateVaultConfigField } from '../utils/vaultConfigStore' + +function isNoteLayout(value: string | null | undefined): value is NoteLayout { + return value === 'centered' || value === 'left' +} + +function loadNoteLayout(): NoteLayout { + const stored = getVaultConfig().note_layout + return isNoteLayout(stored) ? stored : 'centered' +} + +export function useNoteLayout() { + const [noteLayout, setNoteLayoutState] = useState(loadNoteLayout) + + useEffect(() => { + return subscribeVaultConfig(() => { + setNoteLayoutState(loadNoteLayout()) + }) + }, []) + + const setNoteLayout = useCallback((layout: NoteLayout) => { + setNoteLayoutState(layout) + updateVaultConfigField('note_layout', layout) + }, []) + + const toggleNoteLayout = useCallback(() => { + setNoteLayout(noteLayout === 'left' ? 'centered' : 'left') + }, [noteLayout, setNoteLayout]) + + return { noteLayout, setNoteLayout, toggleNoteLayout } +} diff --git a/src/types.ts b/src/types.ts index 0c15423d..99c1b1c9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -149,11 +149,15 @@ export interface AllNotesConfig { noteListProperties: string[] | null } +/** Vault-scoped UI configuration stored locally per vault path. */ +export type NoteLayout = 'centered' | 'left' + /** Vault-scoped UI configuration stored locally per vault path. */ export interface VaultConfig { zoom: number | null view_mode: string | null editor_mode: string | null + note_layout?: NoteLayout | null tag_colors: Record | null status_colors: Record | null property_display_modes: Record | null diff --git a/src/utils/vaultConfigStore.ts b/src/utils/vaultConfigStore.ts index 5def078b..abf87879 100644 --- a/src/utils/vaultConfigStore.ts +++ b/src/utils/vaultConfigStore.ts @@ -4,7 +4,7 @@ type SaveFn = (config: VaultConfig) => void type Listener = () => void const DEFAULT_CONFIG: VaultConfig = { - zoom: null, view_mode: null, editor_mode: null, + zoom: null, view_mode: null, editor_mode: null, note_layout: null, tag_colors: null, status_colors: null, property_display_modes: null, inbox: null, }