feat: persist note list sort preference in type file frontmatter

Sort preferences for each type's note list are now stored in the type
file's frontmatter (e.g. `sort: modified:desc` in `type/person.md`)
instead of localStorage. This makes preferences portable with the vault
and versionable in git.

- Add `sort` field to Rust Frontmatter/VaultEntry and TS VaultEntry
- NoteList reads sort from type entry's frontmatter when viewing a type
- Sort changes write to type file via update_frontmatter
- Silent migration from localStorage on first access per type
- Relationship group sorts still use localStorage (no type file)
- Fallback to `modified:desc` when no sort preference exists

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src-tauri/src/lib.rs

@@ -448,9 +448,9 @@ fn save_vault_settings(vault_path: String, settings: VaultSettings) -> Result<()
 }
 
 #[tauri::command]
-fn set_active_theme(vault_path: String, theme_id: String) -> Result<(), String> {
+fn set_active_theme(vault_path: String, theme_id: Option<String>) -> Result<(), String> {
     let vault_path = expand_tilde(&vault_path);
-    theme::set_active_theme(&vault_path, &theme_id)
+    theme::set_active_theme(&vault_path, theme_id.as_deref())
 }
 
 #[tauri::command]

src-tauri/src/theme.rs

@@ -98,10 +98,10 @@ pub fn save_vault_settings(vault_path: &str, settings: VaultSettings) -> Result<
         .map_err(|e| format!("Failed to write vault settings: {e}"))
 }
 
-/// Set the active theme in vault settings.
-pub fn set_active_theme(vault_path: &str, theme_id: &str) -> Result<(), String> {
+/// Set the active theme in vault settings. Pass `None` to clear.
+pub fn set_active_theme(vault_path: &str, theme_id: Option<&str>) -> Result<(), String> {
     let mut settings = get_vault_settings(vault_path)?;
-    settings.theme = Some(theme_id.to_string());
+    settings.theme = theme_id.map(|s| s.to_string());
     save_vault_settings(vault_path, settings)
 }
 
@@ -684,9 +684,14 @@ mod tests {
         assert!(settings.theme.is_none());
 
         // Set and read back
-        set_active_theme(vp, "dark").unwrap();
+        set_active_theme(vp, Some("dark")).unwrap();
         let settings = get_vault_settings(vp).unwrap();
         assert_eq!(settings.theme.as_deref(), Some("dark"));
+
+        // Clear theme
+        set_active_theme(vp, None).unwrap();
+        let settings = get_vault_settings(vp).unwrap();
+        assert_eq!(settings.theme, None);
     }
 
     #[test]

src-tauri/src/vault/mod.rs

@@ -68,6 +68,9 @@ pub struct VaultEntry {
     /// Markdown template for notes of this Type. When a new note is created
     /// with this type, the template body is pre-filled after the frontmatter.
     pub template: Option<String>,
+    /// Default sort preference for the note list when viewing instances of this Type.
+    /// Stored as "option:direction" (e.g. "modified:desc", "title:asc", "property:Priority:asc").
+    pub sort: Option<String>,
     /// Word count of the note body (excludes frontmatter and H1 title).
     #[serde(rename = "wordCount")]
     pub word_count: u32,
@@ -118,6 +121,8 @@ struct Frontmatter {
     sidebar_label: Option<String>,
     #[serde(default)]
     template: Option<String>,
+    #[serde(default)]
+    sort: Option<String>,
 }
 
 /// Handles YAML fields that can be either a single string or a list of strings.
@@ -163,6 +168,7 @@ const SKIP_KEYS: &[&str] = &[
     "order",
     "sidebar label",
     "template",
+    "sort",
 ];
 
 /// Extract all wikilink-containing fields from raw YAML frontmatter.
@@ -387,6 +393,7 @@ pub fn parse_md_file(path: &Path) -> Result<VaultEntry, String> {
         order: frontmatter.order,
         sidebar_label: frontmatter.sidebar_label,
         template: frontmatter.template,
+        sort: frontmatter.sort,
         word_count,
         outgoing_links,
         properties,
@@ -1183,6 +1190,40 @@ References:
         assert!(entry.relationships.get("template").is_none());
     }
 
+    // --- sort field tests ---
+
+    #[test]
+    fn test_parse_sort_from_type_entry() {
+        let dir = TempDir::new().unwrap();
+        let content = "---\ntype: Type\nsort: \"modified:desc\"\n---\n# Project\n";
+        let entry = parse_test_entry(&dir, "type/project.md", content);
+        assert_eq!(entry.sort, Some("modified:desc".to_string()));
+    }
+
+    #[test]
+    fn test_parse_sort_missing_defaults_to_none() {
+        let dir = TempDir::new().unwrap();
+        let content = "---\ntype: Type\n---\n# Project\n";
+        let entry = parse_test_entry(&dir, "type/project.md", content);
+        assert_eq!(entry.sort, None);
+    }
+
+    #[test]
+    fn test_sort_not_in_relationships() {
+        let dir = TempDir::new().unwrap();
+        let content = "---\ntype: Type\nsort: \"title:asc\"\n---\n# Project\n";
+        let entry = parse_test_entry(&dir, "type/project.md", content);
+        assert!(entry.relationships.get("sort").is_none());
+    }
+
+    #[test]
+    fn test_sort_not_in_properties() {
+        let dir = TempDir::new().unwrap();
+        let content = "---\ntype: Type\nsort: \"title:asc\"\n---\n# Project\n";
+        let entry = parse_test_entry(&dir, "type/project.md", content);
+        assert!(entry.properties.get("sort").is_none());
+    }
+
     // --- custom properties tests ---
 
     #[test]

src/App.test.tsx

@@ -34,7 +34,7 @@ const mockEntries = [
     modifiedAt: 1700000000,
     createdAt: null,
     fileSize: 1024,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
   },
   {
@@ -51,7 +51,7 @@ const mockEntries = [
     modifiedAt: 1700000000,
     createdAt: null,
     fileSize: 256,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
   },
 ]

src/App.tsx

@@ -17,7 +17,6 @@ import { useMcpRegistration } from './hooks/useMcpRegistration'
 import { useVaultLoader } from './hooks/useVaultLoader'
 import { useSettings } from './hooks/useSettings'
 import { useNoteActions } from './hooks/useNoteActions'
-import { useEditorSave } from './hooks/useEditorSave'
 import { useCommitFlow } from './hooks/useCommitFlow'
 import { useViewMode } from './hooks/useViewMode'
 import { useEntryActions } from './hooks/useEntryActions'
@@ -34,11 +33,12 @@ import { useZoom } from './hooks/useZoom'
 import { useBuildNumber } from './hooks/useBuildNumber'
 import { useOnboarding } from './hooks/useOnboarding'
 import { useThemeManager } from './hooks/useThemeManager'
+import { useEditorSaveWithLinks } from './hooks/useEditorSaveWithLinks'
+import { useNavigationGestures } from './hooks/useNavigationGestures'
 import { ConflictResolverModal } from './components/ConflictResolverModal'
 import { UpdateBanner } from './components/UpdateBanner'
 import { invoke } from '@tauri-apps/api/core'
 import { isTauri, mockInvoke } from './mock-tauri'
-import { extractOutgoingLinks } from './utils/wikilinks'
 import type { SidebarSelection } from './types'
 import './App.css'
 
@@ -80,34 +80,6 @@ function useLayoutPanels() {
 }
 
 /** Wraps useEditorSave to also keep outgoingLinks in sync on save and on content change. */
-function useEditorSaveWithLinks(config: {
-  updateContent: (path: string, content: string) => void
-  updateEntry: (path: string, patch: Partial<import('./types').VaultEntry>) => void
-  setTabs: Parameters<typeof useEditorSave>[0]['setTabs']
-  setToastMessage: (msg: string | null) => void
-  onAfterSave: () => void
-  onNotePersisted?: (path: string) => void
-}) {
-  const { updateContent, updateEntry } = config
-  const saveContent = useCallback((path: string, content: string) => {
-    updateContent(path, content)
-    updateEntry(path, { outgoingLinks: extractOutgoingLinks(content) })
-  }, [updateContent, updateEntry])
-  const editor = useEditorSave({ updateVaultContent: saveContent, setTabs: config.setTabs, setToastMessage: config.setToastMessage, onAfterSave: config.onAfterSave, onNotePersisted: config.onNotePersisted })
-  const { handleContentChange: rawOnChange } = editor
-  const prevLinksKeyRef = useRef('')
-  const handleContentChange = useCallback((path: string, content: string) => {
-    rawOnChange(path, content)
-    const links = extractOutgoingLinks(content)
-    const key = links.join('\0')
-    if (key !== prevLinksKeyRef.current) {
-      prevLinksKeyRef.current = key
-      updateEntry(path, { outgoingLinks: links })
-    }
-  }, [rawOnChange, updateEntry])
-  return { ...editor, handleContentChange }
-}
-
 function App() {
   const [selection, setSelection] = useState<SidebarSelection>(DEFAULT_SELECTION)
   const layout = useLayoutPanels()
@@ -217,45 +189,7 @@ function App() {
     }
   }, [navHistory, isEntryExists, vault.entries, notes])
 
-  // Mouse button 3/4 (back/forward) and macOS trackpad two-finger swipe
-  useEffect(() => {
-    const handleMouseBack = (e: MouseEvent) => {
-      if (e.button === 3) { e.preventDefault(); handleGoBack() }
-      if (e.button === 4) { e.preventDefault(); handleGoForward() }
-    }
-    window.addEventListener('mouseup', handleMouseBack)
-
-    // Trackpad swipe: accumulate horizontal wheel delta and trigger on threshold
-    let accumulatedDeltaX = 0
-    let resetTimer: ReturnType<typeof setTimeout> | null = null
-    const SWIPE_THRESHOLD = 120
-
-    const handleWheel = (e: WheelEvent) => {
-      // Only handle horizontal-dominant gestures (trackpad swipe)
-      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return
-      if (e.ctrlKey || e.metaKey) return // ignore pinch-zoom
-
-      accumulatedDeltaX += e.deltaX
-
-      if (resetTimer) clearTimeout(resetTimer)
-      resetTimer = setTimeout(() => { accumulatedDeltaX = 0 }, 300)
-
-      if (accumulatedDeltaX > SWIPE_THRESHOLD) {
-        accumulatedDeltaX = 0
-        handleGoForward()
-      } else if (accumulatedDeltaX < -SWIPE_THRESHOLD) {
-        accumulatedDeltaX = 0
-        handleGoBack()
-      }
-    }
-    window.addEventListener('wheel', handleWheel, { passive: true })
-
-    return () => {
-      window.removeEventListener('mouseup', handleMouseBack)
-      window.removeEventListener('wheel', handleWheel)
-      if (resetTimer) clearTimeout(resetTimer)
-    }
-  }, [handleGoBack, handleGoForward])
+  useNavigationGestures({ onGoBack: handleGoBack, onGoForward: handleGoForward })
 
   const { triggerIncrementalIndex } = indexing
   const onAfterSave = useCallback(() => {
@@ -452,7 +386,7 @@ function App() {
         {noteListVisible && (
           <>
             <div className="app__note-list" style={{ width: layout.noteListWidth }}>
-              <NoteList entries={vault.entries} selection={selection} selectedNote={activeTab?.entry ?? null} allContent={vault.allContent} modifiedFiles={vault.modifiedFiles} modifiedFilesError={vault.modifiedFilesError} getNoteStatus={vault.getNoteStatus} sidebarCollapsed={!sidebarVisible} onSelectNote={notes.handleSelectNote} onReplaceActiveTab={notes.handleReplaceActiveTab} onCreateNote={notes.handleCreateNoteImmediate} onBulkArchive={bulkActions.handleBulkArchive} onBulkTrash={bulkActions.handleBulkTrash} />
+              <NoteList entries={vault.entries} selection={selection} selectedNote={activeTab?.entry ?? null} allContent={vault.allContent} modifiedFiles={vault.modifiedFiles} modifiedFilesError={vault.modifiedFilesError} getNoteStatus={vault.getNoteStatus} sidebarCollapsed={!sidebarVisible} onSelectNote={notes.handleSelectNote} onReplaceActiveTab={notes.handleReplaceActiveTab} onCreateNote={notes.handleCreateNoteImmediate} onBulkArchive={bulkActions.handleBulkArchive} onBulkTrash={bulkActions.handleBulkTrash} onUpdateTypeSort={notes.handleUpdateFrontmatter} updateEntry={vault.updateEntry} />
             </div>
             <ResizeHandle onResize={layout.handleNoteListResize} />
           </>

src/components/DynamicPropertiesPanel.test.tsx

@@ -51,7 +51,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   ...overrides,
 })

src/components/Editor.test.tsx

@@ -75,7 +75,7 @@ const mockEntry: VaultEntry = {
   icon: null,
   color: null,
     order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
 }
 

src/components/Inspector.test.tsx

@@ -26,7 +26,7 @@ const mockEntry: VaultEntry = {
   icon: null,
   color: null,
     order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
 }
 
@@ -71,7 +71,7 @@ const referrerEntry: VaultEntry = {
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: ['Test Project'],
 }
 
@@ -376,7 +376,7 @@ This is a test note with some words to count.
       icon: null,
       color: null,
       order: null,
-      template: null,
+      template: null, sort: null,
       outgoingLinks: [],
     }
 
@@ -403,7 +403,7 @@ This is a test note with some words to count.
       icon: null,
       color: null,
       order: null,
-      template: null,
+      template: null, sort: null,
       outgoingLinks: [],
     }
 
@@ -430,7 +430,7 @@ This is a test note with some words to count.
       icon: null,
       color: null,
       order: null,
-      template: null,
+      template: null, sort: null,
       outgoingLinks: [],
     }
 
@@ -457,7 +457,7 @@ This is a test note with some words to count.
       icon: null,
       color: null,
       order: null,
-      template: null,
+      template: null, sort: null,
       outgoingLinks: [],
     }
 
@@ -600,7 +600,7 @@ Status: Active
         icon: null,
         color: null,
         order: null,
-        template: null,
+        template: null, sort: null,
         // Body text also links to grow-newsletter
         outgoingLinks: ['responsibility/grow-newsletter'],
       }

src/components/InspectorPanels.test.tsx

@@ -30,7 +30,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   ...overrides,
 })

src/components/NoteList.test.tsx

@@ -34,7 +34,7 @@ const mockEntries: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -64,7 +64,7 @@ const mockEntries: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -91,7 +91,7 @@ const mockEntries: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -118,7 +118,7 @@ const mockEntries: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -145,7 +145,7 @@ const mockEntries: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -367,7 +367,7 @@ describe('getSortComparator', () => {
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
     ...overrides,
@@ -481,7 +481,7 @@ describe('NoteList sort controls', () => {
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
     ...overrides,
@@ -739,7 +739,7 @@ const trashedEntry: VaultEntry = {
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   properties: {},
 }
@@ -767,7 +767,7 @@ const expiredTrashedEntry: VaultEntry = {
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   properties: {},
 }
@@ -924,7 +924,7 @@ describe('NoteList — virtual list with large datasets', () => {
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
     ...overrides,
@@ -1254,7 +1254,7 @@ const typeEntry: VaultEntry = {
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   properties: {},
 }

src/components/NoteList.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect, memo } from 'react'
+import { useState, useMemo, useCallback, useEffect, useRef, memo } from 'react'
 import { useDragRegion } from '../hooks/useDragRegion'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
 import type { VaultEntry, SidebarSelection, ModifiedFile, NoteStatus } from '../types'
@@ -18,6 +18,7 @@ import {
   buildRelationshipGroups, filterEntries,
   relativeDate, getDisplayDate,
   loadSortPreferences, saveSortPreferences,
+  parseSortConfig, serializeSortConfig, clearListSortFromLocalStorage,
 } from '../utils/noteListHelpers'
 
 interface NoteListProps {
@@ -34,6 +35,8 @@ interface NoteListProps {
   onCreateNote: () => void
   onBulkArchive?: (paths: string[]) => void
   onBulkTrash?: (paths: string[]) => void
+  onUpdateTypeSort?: (path: string, key: string, value: string | number | boolean | string[] | null) => void
+  updateEntry?: (path: string, patch: Partial<VaultEntry>) => void
 }
 
 function PinnedCard({ entry, typeEntryMap, onClickNote, showDate }: {
@@ -256,11 +259,6 @@ function useNoteListData({ entries, selection, allContent, query, listSort, list
   const isEntityView = selection.kind === 'entity'
   const isTrashView = selection.kind === 'filter' && selection.filter === 'trash'
 
-  const typeDocument = useMemo(() => {
-    if (selection.kind !== 'sectionGroup') return null
-    return entries.find((e) => e.isA === 'Type' && e.title === selection.type) ?? null
-  }, [selection, entries])
-
   const filteredEntries = useFilteredEntries(entries, selection, modifiedPathSet, modifiedSuffixes)
 
   const searched = useMemo(() => {
@@ -279,14 +277,26 @@ function useNoteListData({ entries, selection, allContent, query, listSort, list
     [isTrashView, searched],
   )
 
-  return { isEntityView, isTrashView, typeDocument, searched, searchedGroups, expiredTrashCount }
+  return { isEntityView, isTrashView, searched, searchedGroups, expiredTrashCount }
+}
+
+// --- Pure helpers ---
+
+const DEFAULT_LIST_CONFIG: SortConfig = { option: 'modified', direction: 'desc' }
+
+function resolveListSortConfig(typeDocument: VaultEntry | null, sortPrefs: Record<string, SortConfig>): SortConfig {
+  if (typeDocument?.sort) {
+    const parsed = parseSortConfig(typeDocument.sort)
+    if (parsed) return parsed
+  }
+  return sortPrefs['__list__'] ?? DEFAULT_LIST_CONFIG
 }
 
 // --- Main component ---
 
 const defaultGetNoteStatus = (): NoteStatus => 'clean'
 
-function NoteListInner({ entries, selection, selectedNote, allContent, modifiedFiles, modifiedFilesError, getNoteStatus, sidebarCollapsed, onSelectNote, onReplaceActiveTab, onCreateNote, onBulkArchive, onBulkTrash }: NoteListProps) {
+function NoteListInner({ entries, selection, selectedNote, allContent, modifiedFiles, modifiedFilesError, getNoteStatus, sidebarCollapsed, onSelectNote, onReplaceActiveTab, onCreateNote, onBulkArchive, onBulkTrash, onUpdateTypeSort, updateEntry }: NoteListProps) {
   const [search, setSearch] = useState('')
   const [searchVisible, setSearchVisible] = useState(false)
   const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
@@ -311,9 +321,43 @@ function NoteListInner({ entries, selection, selectedNote, allContent, modifiedF
     [getNoteStatus, modifiedFiles, modifiedPathSet],
   )
 
+  // Resolve the type document for sectionGroup selections (needs to be above sort logic)
+  const typeDocument = useMemo(() => {
+    if (selection.kind !== 'sectionGroup') return null
+    return entries.find((e) => e.isA === 'Type' && e.title === selection.type) ?? null
+  }, [selection, entries])
+
+  // Resolve list sort config: read from type frontmatter for sectionGroup, else localStorage
+  const listConfig = resolveListSortConfig(typeDocument, sortPrefs)
+
+  // Silent migration: if type has no sort in frontmatter but localStorage has __list__, migrate it
+  const migrationDoneRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
+    if (!typeDocument || typeDocument.sort || !onUpdateTypeSort || !updateEntry) return
+    if (migrationDoneRef.current.has(typeDocument.path)) return
+    const lsConfig = sortPrefs['__list__']
+    if (!lsConfig) return
+    migrationDoneRef.current.add(typeDocument.path)
+    const serialized = serializeSortConfig(lsConfig)
+    onUpdateTypeSort(typeDocument.path, 'sort', serialized)
+    updateEntry(typeDocument.path, { sort: serialized })
+    clearListSortFromLocalStorage()
+  }, [typeDocument, sortPrefs, onUpdateTypeSort, updateEntry])
+
   const handleSortChange = useCallback((groupLabel: string, option: SortOption, direction: SortDirection) => {
-    setSortPrefs((prev) => { const next = { ...prev, [groupLabel]: { option, direction } }; saveSortPreferences(next); return next })
-  }, [])
+    if (groupLabel === '__list__' && typeDocument && onUpdateTypeSort && updateEntry) {
+      // Persist sort to type file frontmatter
+      const config: SortConfig = { option, direction }
+      const serialized = serializeSortConfig(config)
+      onUpdateTypeSort(typeDocument.path, 'sort', serialized)
+      updateEntry(typeDocument.path, { sort: serialized })
+      // Clear old localStorage __list__ entry if present (migration cleanup)
+      clearListSortFromLocalStorage()
+    } else {
+      // Relationship group sorts still use localStorage
+      setSortPrefs((prev) => { const next = { ...prev, [groupLabel]: { option, direction } }; saveSortPreferences(next); return next })
+    }
+  }, [typeDocument, onUpdateTypeSort, updateEntry])
 
   const toggleGroup = useCallback((label: string) => {
     setCollapsedGroups((prev) => toggleSetMember(prev, label))
@@ -321,7 +365,6 @@ function NoteListInner({ entries, selection, selectedNote, allContent, modifiedF
 
   const typeEntryMap = useTypeEntryMap(entries)
   const query = search.trim().toLowerCase()
-  const listConfig = sortPrefs['__list__'] ?? { option: 'modified' as SortOption, direction: 'desc' as SortDirection }
 
   // Compute custom properties and derive effective sort before sorting entries
   const filteredEntries = useFilteredEntries(entries, selection, modifiedPathSet, modifiedSuffixes)
@@ -332,7 +375,7 @@ function NoteListInner({ entries, selection, selectedNote, allContent, modifiedF
     return customProperties.includes(opt.slice('property:'.length)) ? opt : 'modified'
   }, [listConfig.option, customProperties])
   const listDirection = listSort === listConfig.option ? listConfig.direction : 'desc'
-  const { isEntityView, isTrashView, typeDocument, searched, searchedGroups, expiredTrashCount } = useNoteListData({ entries, selection, allContent, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes })
+  const { isEntityView, isTrashView, searched, searchedGroups, expiredTrashCount } = useNoteListData({ entries, selection, allContent, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes })
   const isChangesView = selection.kind === 'filter' && selection.filter === 'changes'
 
   const noteListKeyboard = useNoteListKeyboard({

src/components/QuickOpenPalette.test.tsx

@@ -26,7 +26,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   ...overrides,
 })

src/components/RawEditorView.test.tsx

@@ -11,7 +11,7 @@ function entry(title: string, path = `/vault/note/${title}.md`) {
     cadence: null, archived: false, trashed: false, trashedAt: null,
     modifiedAt: null, createdAt: null, fileSize: 0, snippet: '', wordCount: 0,
     relationships: {}, icon: null, color: null, order: null,
-    sidebarLabel: null, template: null, outgoingLinks: [],
+    sidebarLabel: null, template: null, sort: null, outgoingLinks: [],
     properties: {},
   }
 }

src/components/SearchPanel.test.tsx

@@ -38,7 +38,7 @@ const MOCK_ENTRIES: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['topic/ai', 'topic/api-design', 'person/luca'],
     properties: {},
   },
@@ -65,7 +65,7 @@ const MOCK_ENTRIES: VaultEntry[] = [
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['person/bob'],
     properties: {},
   },

src/components/SettingsPanel.tsx

@@ -349,7 +349,7 @@ function AppearanceSection({ themeManager }: { themeManager: ThemeManager }) {
       <button
         className="border border-border bg-transparent text-muted-foreground rounded cursor-pointer hover:text-foreground hover:border-foreground"
         style={{ fontSize: 12, padding: '6px 12px', display: 'flex', alignItems: 'center', gap: 4, alignSelf: 'flex-start' }}
-        onClick={() => createTheme(activeThemeId ?? undefined)}
+        onClick={() => createTheme()}
         type="button"
         data-testid="create-theme"
       >

src/components/Sidebar.test.tsx

@@ -40,7 +40,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -68,7 +68,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -96,7 +96,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -124,7 +124,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -152,7 +152,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -180,7 +180,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -208,7 +208,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -236,7 +236,7 @@ const mockEntries: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -457,7 +457,7 @@ describe('Sidebar', () => {
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
       },
@@ -485,7 +485,7 @@ describe('Sidebar', () => {
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
       },
@@ -512,7 +512,7 @@ describe('Sidebar', () => {
         icon: null,
         color: null,
         order: null,
-        template: null,
+        template: null, sort: null,
         outgoingLinks: [],
         properties: {},
       },
@@ -539,7 +539,7 @@ describe('Sidebar', () => {
         icon: null,
         color: null,
         order: null,
-        template: null,
+        template: null, sort: null,
         outgoingLinks: [],
         properties: {},
       },
@@ -627,7 +627,7 @@ describe('Sidebar', () => {
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
       }

src/components/TabBar.test.tsx

@@ -11,7 +11,7 @@ function makeEntry(path: string, title: string): VaultEntry {
     status: null, owner: null, cadence: null, archived: false,
     trashed: false, trashedAt: null,
     modifiedAt: null, createdAt: null, fileSize: 0,
-    snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, template: null, outgoingLinks: [],
+    snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, template: null, sort: null, outgoingLinks: [],
   }
 }
 

src/hooks/useCommandRegistry.test.ts

@@ -26,7 +26,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   ...overrides,
 })

src/hooks/useEditorSaveWithLinks.ts

@@ -0,0 +1,32 @@
+import { useCallback, useRef } from 'react'
+import { useEditorSave } from './useEditorSave'
+import { extractOutgoingLinks } from '../utils/wikilinks'
+import type { VaultEntry } from '../types'
+
+export function useEditorSaveWithLinks(config: {
+  updateContent: (path: string, content: string) => void
+  updateEntry: (path: string, patch: Partial<VaultEntry>) => void
+  setTabs: Parameters<typeof useEditorSave>[0]['setTabs']
+  setToastMessage: (msg: string | null) => void
+  onAfterSave: () => void
+  onNotePersisted?: (path: string) => void
+}) {
+  const { updateContent, updateEntry } = config
+  const saveContent = useCallback((path: string, content: string) => {
+    updateContent(path, content)
+    updateEntry(path, { outgoingLinks: extractOutgoingLinks(content) })
+  }, [updateContent, updateEntry])
+  const editor = useEditorSave({ updateVaultContent: saveContent, setTabs: config.setTabs, setToastMessage: config.setToastMessage, onAfterSave: config.onAfterSave, onNotePersisted: config.onNotePersisted })
+  const { handleContentChange: rawOnChange } = editor
+  const prevLinksKeyRef = useRef('')
+  const handleContentChange = useCallback((path: string, content: string) => {
+    rawOnChange(path, content)
+    const links = extractOutgoingLinks(content)
+    const key = links.join('\0')
+    if (key !== prevLinksKeyRef.current) {
+      prevLinksKeyRef.current = key
+      updateEntry(path, { outgoingLinks: links })
+    }
+  }, [rawOnChange, updateEntry])
+  return { ...editor, handleContentChange }
+}

src/hooks/useEntryActions.test.ts

@@ -26,7 +26,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   properties: {},
   ...overrides,

src/hooks/useKeyboardNavigation.test.ts

@@ -30,7 +30,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   properties: {},
   ...overrides,

src/hooks/useNavigationGestures.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react'
+
+/**
+ * Registers mouse button 3/4 (back/forward) and macOS trackpad two-finger
+ * horizontal swipe gestures for navigation.
+ */
+export function useNavigationGestures({
+  onGoBack,
+  onGoForward,
+}: {
+  onGoBack: () => void
+  onGoForward: () => void
+}) {
+  useEffect(() => {
+    const handleMouseBack = (e: MouseEvent) => {
+      if (e.button === 3) { e.preventDefault(); onGoBack() }
+      if (e.button === 4) { e.preventDefault(); onGoForward() }
+    }
+    window.addEventListener('mouseup', handleMouseBack)
+
+    // Trackpad swipe: accumulate horizontal wheel delta and trigger on threshold
+    let accumulatedDeltaX = 0
+    let resetTimer: ReturnType<typeof setTimeout> | null = null
+    const SWIPE_THRESHOLD = 120
+
+    const handleWheel = (e: WheelEvent) => {
+      // Only handle horizontal-dominant gestures (trackpad swipe)
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return
+      if (e.ctrlKey || e.metaKey) return // ignore pinch-zoom
+
+      accumulatedDeltaX += e.deltaX
+
+      if (resetTimer) clearTimeout(resetTimer)
+      resetTimer = setTimeout(() => { accumulatedDeltaX = 0 }, 300)
+
+      if (accumulatedDeltaX > SWIPE_THRESHOLD) {
+        accumulatedDeltaX = 0
+        onGoForward()
+      } else if (accumulatedDeltaX < -SWIPE_THRESHOLD) {
+        accumulatedDeltaX = 0
+        onGoBack()
+      }
+    }
+    window.addEventListener('wheel', handleWheel, { passive: true })
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseBack)
+      window.removeEventListener('wheel', handleWheel)
+      if (resetTimer) clearTimeout(resetTimer)
+    }
+  }, [onGoBack, onGoForward])
+}

src/hooks/useNoteActions.test.ts

@@ -59,7 +59,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   color: null,
   order: null,
   outgoingLinks: [],
-  template: null,
+  template: null, sort: null,
   ...overrides,
 })
 

src/hooks/useNoteActions.ts

@@ -72,7 +72,7 @@ export function buildNewEntry({ path, slug, title, type, status }: NewEntryParam
     aliases: [], belongsTo: [], relatedTo: [],
     status, owner: null, cadence: null, archived: false, trashed: false, trashedAt: null,
     modifiedAt: now, createdAt: now, fileSize: 0,
-    snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, outgoingLinks: [], sidebarLabel: null, template: null, properties: {},
+    snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, outgoingLinks: [], sidebarLabel: null, template: null, sort: null, properties: {},
   }
 }
 
@@ -148,7 +148,7 @@ const ENTRY_DELETE_MAP: Record<string, Partial<VaultEntry>> = {
   icon: { icon: null }, owner: { owner: null }, cadence: { cadence: null },
   aliases: { aliases: [] }, belongs_to: { belongsTo: [] }, related_to: { relatedTo: [] },
   archived: { archived: false }, trashed: { trashed: false }, order: { order: null },
-  template: { template: null },
+  template: { template: null }, sort: { sort: null },
 }
 
 /** Map a frontmatter key+value to the corresponding VaultEntry field(s). */
@@ -166,6 +166,7 @@ export function frontmatterToEntryPatch(
     archived: { archived: Boolean(value) }, trashed: { trashed: Boolean(value) },
     order: { order: typeof value === 'number' ? value : null },
     template: { template: str },
+    sort: { sort: str },
   }
   return updates[k] ?? {}
 }

src/hooks/useNoteListKeyboard.test.ts

@@ -22,7 +22,7 @@ function makeEntry(path: string, title: string): VaultEntry {
     fileSize: 100,
     color: null,
     icon: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     relationships: {},
   }

src/hooks/useTabManagement.test.ts

@@ -32,7 +32,7 @@ const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
   icon: null,
   color: null,
   order: null,
-  template: null,
+  template: null, sort: null,
   outgoingLinks: [],
   ...overrides,
 })

src/hooks/useThemeManager.test.ts

@@ -56,7 +56,7 @@ function makeThemeEntry(path: string, title: string): VaultEntry {
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   }
@@ -84,7 +84,7 @@ vi.mock('../mock-tauri', () => ({
   mockInvoke: (cmd: string, args?: Record<string, unknown>) => mockInvokeFn(cmd, args),
 }))
 
-const { useThemeManager, extractCssVars } = await import('./useThemeManager')
+const { useThemeManager, extractCssVars, isColorDark } = await import('./useThemeManager')
 
 describe('extractCssVars', () => {
   it('extracts color variables from frontmatter', () => {
@@ -101,6 +101,26 @@ describe('extractCssVars', () => {
   })
 })
 
+describe('isColorDark', () => {
+  it('identifies dark colors', () => {
+    expect(isColorDark('#000000')).toBe(true)
+    expect(isColorDark('#0f0f1a')).toBe(true)
+    expect(isColorDark('#1a1a2e')).toBe(true)
+  })
+
+  it('identifies light colors', () => {
+    expect(isColorDark('#FFFFFF')).toBe(false)
+    expect(isColorDark('#F7F6F3')).toBe(false)
+    expect(isColorDark('#E0E0E0')).toBe(false)
+  })
+
+  it('returns false for invalid hex', () => {
+    expect(isColorDark('')).toBe(false)
+    expect(isColorDark('#abc')).toBe(false)
+    expect(isColorDark('red')).toBe(false)
+  })
+})
+
 describe('useThemeManager', () => {
   const entries = [defaultEntry, darkEntry]
   const allContent: Record<string, string> = {}
@@ -346,4 +366,116 @@ describe('useThemeManager', () => {
     const afterCalls = mockInvokeFn.mock.calls.filter(c => c[0] === 'get_vault_settings').length
     expect(afterCalls).toBe(initialCalls + 1)
   })
+
+  it('clears stale theme ID that does not match any known theme', async () => {
+    mockInvokeFn.mockImplementation(async (cmd: string) => {
+      if (cmd === 'get_vault_settings') return { theme: 'untitled-2' }
+      if (cmd === 'set_active_theme') return null
+      return null
+    })
+
+    const { result } = renderHook(() =>
+      useThemeManager('/vault', entries, allContent)
+    )
+    await waitFor(() => {
+      expect(result.current.themes).toHaveLength(2)
+    })
+
+    // Stale ID "untitled-2" doesn't match any theme path — should be cleared
+    await waitFor(() => {
+      expect(result.current.activeThemeId).toBeNull()
+    })
+    expect(mockInvokeFn).toHaveBeenCalledWith('set_active_theme', {
+      vaultPath: '/vault', themeId: null,
+    })
+  })
+
+  it('sets color-scheme to light for light theme', async () => {
+    const { result } = renderHook(() =>
+      useThemeManager('/vault', entries, allContent)
+    )
+    await waitFor(() => {
+      expect(result.current.activeTheme).not.toBeNull()
+    })
+
+    const root = document.documentElement
+    expect(root.style.getPropertyValue('color-scheme')).toBe('light')
+    expect(root.dataset.themeMode).toBe('light')
+  })
+
+  it('sets color-scheme to dark for dark theme', async () => {
+    const { result } = renderHook(() =>
+      useThemeManager('/vault', entries, allContent)
+    )
+    await waitFor(() => {
+      expect(result.current.themes).toHaveLength(2)
+    })
+
+    await act(async () => {
+      await result.current.switchTheme(THEME_PATH_DARK)
+    })
+
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue('color-scheme')).toBe('dark')
+    })
+    expect(document.documentElement.dataset.themeMode).toBe('dark')
+  })
+
+  it('populates theme colors from allContent when available', async () => {
+    const contentWithColors = {
+      [THEME_PATH_DEFAULT]: DEFAULT_THEME_CONTENT,
+      [THEME_PATH_DARK]: DARK_THEME_CONTENT,
+    }
+    const { result } = renderHook(() =>
+      useThemeManager('/vault', entries, contentWithColors)
+    )
+    await waitFor(() => {
+      expect(result.current.themes).toHaveLength(2)
+    })
+
+    const defaultTheme = result.current.themes.find(t => t.id === THEME_PATH_DEFAULT)
+    expect(defaultTheme?.colors.background).toBe('#FFFFFF')
+    expect(defaultTheme?.colors.primary).toBe('#155DFF')
+
+    const darkTheme = result.current.themes.find(t => t.id === THEME_PATH_DARK)
+    expect(darkTheme?.colors.background).toBe('#0f0f1a')
+  })
+
+  it('isDark detects dark theme from cached content', async () => {
+    const contentWithColors = {
+      [THEME_PATH_DEFAULT]: DEFAULT_THEME_CONTENT,
+      [THEME_PATH_DARK]: DARK_THEME_CONTENT,
+    }
+    mockInvokeFn.mockImplementation(async (cmd: string) => {
+      if (cmd === 'get_vault_settings') return { theme: THEME_PATH_DARK }
+      if (cmd === 'set_active_theme') return null
+      if (cmd === 'get_note_content') return DARK_THEME_CONTENT
+      return null
+    })
+
+    const { result } = renderHook(() =>
+      useThemeManager('/vault', entries, contentWithColors)
+    )
+    await waitFor(() => {
+      expect(result.current.activeThemeId).toBe(THEME_PATH_DARK)
+    })
+    await waitFor(() => {
+      expect(result.current.isDark).toBe(true)
+    })
+  })
+
+  it('isDark is false for light theme', async () => {
+    const contentWithColors = {
+      [THEME_PATH_DEFAULT]: DEFAULT_THEME_CONTENT,
+    }
+
+    const { result } = renderHook(() =>
+      useThemeManager('/vault', entries, contentWithColors)
+    )
+    await waitFor(() => {
+      expect(result.current.activeThemeId).toBe(THEME_PATH_DEFAULT)
+    })
+    // Light theme isDark should be false (default state is false, so this is stable)
+    expect(result.current.isDark).toBe(false)
+  })
 })

src/hooks/useThemeManager.ts

@@ -41,11 +41,50 @@ export function extractCssVars(content: string): Record<string, string> {
   return vars
 }
 
+/** Extract bare colors (without -- prefix) for ThemeFile.colors from content. */
+function extractColorsFromContent(content: string): Record<string, string> {
+  const fm = parseFrontmatter(content)
+  const colors: Record<string, string> = {}
+  for (const [key, value] of Object.entries(fm)) {
+    if (NON_THEME_KEYS.has(key)) continue
+    if (typeof value === 'string' && value.startsWith('#')) {
+      colors[key] = value
+    }
+  }
+  return colors
+}
+
+/** Check if a hex color is perceptually dark (luminance < 0.5). */
+export function isColorDark(hex: string): boolean {
+  if (!hex.startsWith('#') || hex.length < 7) return false
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5
+}
+
+/** Update color-scheme and data-theme-mode on document root based on --background. */
+function updateColorScheme(vars: Record<string, string>): void {
+  const bg = vars['--background']
+  if (!bg) return
+  const dark = isColorDark(bg)
+  const root = document.documentElement
+  root.style.setProperty('color-scheme', dark ? 'dark' : 'light')
+  root.dataset.themeMode = dark ? 'dark' : 'light'
+}
+
+function clearColorScheme(): void {
+  const root = document.documentElement
+  root.style.removeProperty('color-scheme')
+  delete root.dataset.themeMode
+}
+
 function applyVarsToDom(vars: Record<string, string>): void {
   const root = document.documentElement
   for (const [key, value] of Object.entries(vars)) {
     root.style.setProperty(key, value)
   }
+  updateColorScheme(vars)
 }
 
 function clearVarsFromDom(vars: Record<string, string>): void {
@@ -53,16 +92,17 @@ function clearVarsFromDom(vars: Record<string, string>): void {
   for (const key of Object.keys(vars)) {
     root.style.removeProperty(key)
   }
+  clearColorScheme()
 }
 
-/** Build a ThemeFile descriptor from a vault entry (metadata only). */
-function entryToThemeFile(entry: VaultEntry): ThemeFile {
+/** Build a ThemeFile descriptor from a vault entry, enriched with content colors. */
+function entryToThemeFile(entry: VaultEntry, content: string | undefined): ThemeFile {
   return {
     id: entry.path,
     name: entry.title,
     description: '',
     path: entry.path,
-    colors: {},
+    colors: content ? extractColorsFromContent(content) : {},
     typography: {},
     spacing: {},
   }
@@ -112,15 +152,17 @@ function useThemeApplier(
   cachedContent: string | undefined,
 ) {
   const appliedVarsRef = useRef<Record<string, string>>({})
+  const [isDark, setIsDark] = useState(false)
 
-  const apply = useCallback((content: string) => {
+  const applyDom = useCallback((content: string) => {
     const newVars = extractCssVars(content)
     clearVarsFromDom(appliedVarsRef.current)
     applyVarsToDom(newVars)
     appliedVarsRef.current = newVars
+    return newVars
   }, [])
 
-  const clear = useCallback(() => {
+  const clearDom = useCallback(() => {
     clearVarsFromDom(appliedVarsRef.current)
     appliedVarsRef.current = {}
   }, [])
@@ -128,14 +170,25 @@ function useThemeApplier(
   // Apply theme when activeThemeId or cached content changes.
   // Also serves as live-preview: re-applies when the user saves the theme note.
   useEffect(() => {
-    if (!activeThemeId) { clear(); return }
-    if (cachedContent) { apply(cachedContent); return }
+    if (!activeThemeId) {
+      clearDom()
+      setIsDark(false) // eslint-disable-line react-hooks/set-state-in-effect -- sync dark mode with cleared theme
+      return
+    }
+    if (cachedContent) {
+      const vars = applyDom(cachedContent)
+      setIsDark(isColorDark(vars['--background'] ?? ''))
+      return
+    }
     tauriCall<string>('get_note_content', { path: activeThemeId })
-      .then(apply)
-      .catch(clear)
-  }, [activeThemeId, cachedContent, apply, clear])
+      .then(content => {
+        const vars = applyDom(content)
+        setIsDark(isColorDark(vars['--background'] ?? ''))
+      })
+      .catch(() => { clearDom(); setIsDark(false) })
+  }, [activeThemeId, cachedContent, applyDom, clearDom])
 
-  return { clear }
+  return { clearDom, isDark }
 }
 
 export function useThemeManager(
@@ -145,11 +198,17 @@ export function useThemeManager(
 ): ThemeManager {
   const { activeThemeId, setActiveThemeId, reload } = useThemeSetting(vaultPath)
   const cachedThemeContent = activeThemeId ? allContent[activeThemeId] : undefined
-  const { clear: clearTheme } = useThemeApplier(activeThemeId, cachedThemeContent)
+  const { clearDom: clearTheme, isDark } = useThemeApplier(activeThemeId, cachedThemeContent)
+
+  // Track IDs set by user actions (switchTheme/createTheme) so the stale-ID
+  // cleanup doesn't clear a newly-created theme that isn't in entries yet.
+  const userSetIdRef = useRef<string | null>(null)
 
   const themes = useMemo(
-    () => entries.filter(e => e.isA === 'Theme' && !e.trashed && !e.archived).map(entryToThemeFile),
-    [entries],
+    () => entries
+      .filter(e => e.isA === 'Theme' && !e.trashed && !e.archived)
+      .map(e => entryToThemeFile(e, allContent[e.path])),
+    [entries, allContent],
   )
 
   const activeTheme = useMemo(
@@ -157,6 +216,21 @@ export function useThemeManager(
     [themes, activeThemeId],
   )
 
+  // If active theme ID doesn't match any known theme (e.g. stale ID from old
+  // JSON-based theme system), clear it so the app doesn't try to load a
+  // non-existent path. Skip IDs just set by switchTheme/createTheme — the
+  // entry may not have appeared in `entries` yet.
+  useEffect(() => {
+    if (!activeThemeId || themes.length === 0) return
+    if (activeThemeId === userSetIdRef.current) return
+    const isKnown = themes.some(t => t.id === activeThemeId)
+    if (!isKnown) {
+      clearTheme()
+      setActiveThemeId(null)
+      if (vaultPath) tauriCall('set_active_theme', { vaultPath, themeId: null }).catch(() => {})
+    }
+  }, [activeThemeId, themes, clearTheme, vaultPath, setActiveThemeId])
+
   // If active theme is trashed or archived: clear CSS vars and fall back to no theme
   useEffect(() => {
     if (!activeThemeId) return
@@ -171,6 +245,7 @@ export function useThemeManager(
     if (!vaultPath) return
     try {
       await tauriCall<null>('set_active_theme', { vaultPath, themeId })
+      userSetIdRef.current = themeId
       setActiveThemeId(themeId)
     } catch (err) { console.error('Failed to switch theme:', err) }
   }, [vaultPath, setActiveThemeId])
@@ -180,6 +255,7 @@ export function useThemeManager(
     try {
       const path = await tauriCall<string>('create_vault_theme', { vaultPath, name: name ?? null })
       await tauriCall<null>('set_active_theme', { vaultPath, themeId: path })
+      userSetIdRef.current = path
       setActiveThemeId(path)
       return path
     } catch (err) { console.error('Failed to create theme:', err); return '' }
@@ -187,17 +263,5 @@ export function useThemeManager(
 
   const reloadThemes = useCallback(async () => { await reload() }, [reload])
 
-  // Determine if the active theme is dark by checking --background CSS variable
-  const isDark = useMemo(() => {
-    if (!activeThemeId || !cachedThemeContent) return false
-    const vars = extractCssVars(cachedThemeContent)
-    const bg = vars['--background'] ?? ''
-    if (!bg.startsWith('#') || bg.length < 7) return false
-    const r = parseInt(bg.slice(1, 3), 16)
-    const g = parseInt(bg.slice(3, 5), 16)
-    const b = parseInt(bg.slice(5, 7), 16)
-    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5
-  }, [activeThemeId, cachedThemeContent])
-
   return { themes, activeThemeId, activeTheme, isDark, switchTheme, createTheme, reloadThemes }
 }

src/hooks/useVaultLoader.test.ts

@@ -10,7 +10,7 @@ const mockEntries: VaultEntry[] = [
     status: 'Active', owner: null, cadence: null,
     archived: false, trashed: false, trashedAt: null,
     modifiedAt: 1700000000, createdAt: 1700000000, fileSize: 100,
-    snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, template: null, outgoingLinks: [],
+    snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, template: null, sort: null, outgoingLinks: [],
   },
 ]
 

src/mock-tauri/mock-entries.ts

@@ -36,7 +36,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['quarter/q1-2026', 'topic/software-development', 'person/matteo-cellini', 'person/maria-bianchi', 'person/marco-verdi'],
     properties: { Priority: 'High', 'Due date': '2026-06-15' },
   },
@@ -73,7 +73,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['essay/on-writing-well', 'essay/engineering-leadership-101', 'essay/ai-agents-primer', 'topic/growth', 'topic/writing'],
     properties: { Priority: 'High', Rating: 5, Cadence: 'Weekly' },
   },
@@ -104,7 +104,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['person/matteo-cellini'],
     properties: {},
   },
@@ -135,7 +135,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['responsibility/grow-newsletter'],
     properties: {},
   },
@@ -166,7 +166,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['responsibility/manage-sponsorships'],
     properties: {},
   },
@@ -198,7 +198,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['topic/trading', 'topic/algorithmic-trading', 'data/ema200-backtest-results'],
     properties: { Priority: 'Low', 'Due date': '2026-03-01' },
   },
@@ -230,7 +230,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['project/26q1-laputa-app', 'topic/growth', 'topic/ads'],
     properties: { Priority: 'Medium', Rating: 4 },
   },
@@ -261,7 +261,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['project/26q1-laputa-app'],
     properties: {},
   },
@@ -291,7 +291,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: { Company: 'Acme Corp', Role: 'Engineering Lead' },
   },
@@ -321,7 +321,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: { Company: 'TechStart', Role: 'Product Manager' },
   },
@@ -351,7 +351,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -381,7 +381,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -412,7 +412,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['project/26q1-laputa-app', 'person/matteo-cellini'],
     properties: {},
   },
@@ -443,7 +443,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -474,7 +474,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -505,7 +505,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['responsibility/grow-newsletter'],
     properties: {},
   },
@@ -537,7 +537,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['responsibility/grow-newsletter', 'topic/software-development'],
     properties: {},
   },
@@ -568,7 +568,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: ['responsibility/grow-newsletter'],
     properties: {},
   },
@@ -597,7 +597,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 0,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -625,7 +625,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 1,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -653,7 +653,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 2,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -681,7 +681,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 3,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -709,7 +709,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 4,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -737,7 +737,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 5,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -765,7 +765,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 6,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -793,7 +793,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 7,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -821,7 +821,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: 8,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -850,7 +850,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: 'orange',
     order: 9,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -878,7 +878,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: 'green',
     order: 10,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -909,7 +909,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: { Difficulty: 'Easy', 'Prep time': '30 min', Servings: 4 },
   },
@@ -939,7 +939,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: { Author: 'Martin Kleppmann', Rating: 5, 'Year published': 2017 },
   },
@@ -971,7 +971,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -1001,7 +1001,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -1032,7 +1032,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -1055,7 +1055,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
     modifiedAt: now - 86400 * 120,
@@ -1086,7 +1086,7 @@ export const MOCK_ENTRIES: VaultEntry[] = [
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
     modifiedAt: now - 86400 * 90,
@@ -1151,7 +1151,7 @@ function generateBulkEntries(count: number): VaultEntry[] {
       order: null,
       outgoingLinks: Array.from({ length: i % 8 }, (_j, j) => `note/link-target-${(i + j) % 50}`),
       sidebarLabel: null,
-      template: null,
+      template: null, sort: null,
       properties: {},
     })
   }
@@ -1184,7 +1184,7 @@ MOCK_ENTRIES.push(
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -1212,7 +1212,7 @@ MOCK_ENTRIES.push(
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },
@@ -1240,7 +1240,7 @@ MOCK_ENTRIES.push(
     color: null,
     order: null,
     sidebarLabel: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     properties: {},
   },

src/types.ts

@@ -29,6 +29,8 @@ export interface VaultEntry {
   sidebarLabel: string | null
   /** Markdown template for Type entries. Pre-fills new notes created with this type. */
   template: string | null
+  /** Default sort preference for the note list of this Type. Format: "option:direction". */
+  sort: string | null
   /** All wikilink targets found in the note content. Extracted from [[target]] patterns. */
   outgoingLinks: string[]
   /** Custom scalar frontmatter properties (non-relationship, non-structural). */

src/utils/noteListHelpers.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { formatSubtitle, formatSearchSubtitle, relativeDate, buildRelationshipGroups, getSortComparator, extractSortableProperties, getSortOptionLabel, getDefaultDirection } from './noteListHelpers'
+import { formatSubtitle, formatSearchSubtitle, relativeDate, buildRelationshipGroups, getSortComparator, extractSortableProperties, getSortOptionLabel, getDefaultDirection, parseSortConfig, serializeSortConfig } from './noteListHelpers'
 import type { VaultEntry } from '../types'
 
 function makeEntry(overrides: Partial<VaultEntry> = {}): VaultEntry {
@@ -10,7 +10,7 @@ function makeEntry(overrides: Partial<VaultEntry> = {}): VaultEntry {
     trashed: false, trashedAt: null,
     modifiedAt: null, createdAt: null, fileSize: 0,
     snippet: '', wordCount: 0, relationships: {},
-    icon: null, color: null, order: null, template: null, outgoingLinks: [],
+    icon: null, color: null, order: null, template: null, sort: null, outgoingLinks: [],
     ...overrides,
   }
 }
@@ -435,3 +435,53 @@ describe('getDefaultDirection', () => {
     expect(getDefaultDirection('property:Priority')).toBe('asc')
   })
 })
+
+describe('serializeSortConfig', () => {
+  it('serializes a built-in sort config', () => {
+    expect(serializeSortConfig({ option: 'modified', direction: 'desc' })).toBe('modified:desc')
+    expect(serializeSortConfig({ option: 'title', direction: 'asc' })).toBe('title:asc')
+  })
+
+  it('serializes a custom property sort config', () => {
+    expect(serializeSortConfig({ option: 'property:Priority', direction: 'asc' })).toBe('property:Priority:asc')
+  })
+})
+
+describe('parseSortConfig', () => {
+  it('parses a built-in sort config', () => {
+    expect(parseSortConfig('modified:desc')).toEqual({ option: 'modified', direction: 'desc' })
+    expect(parseSortConfig('title:asc')).toEqual({ option: 'title', direction: 'asc' })
+  })
+
+  it('parses a custom property sort config with colon in option', () => {
+    expect(parseSortConfig('property:Priority:asc')).toEqual({ option: 'property:Priority', direction: 'asc' })
+  })
+
+  it('returns null for null/undefined input', () => {
+    expect(parseSortConfig(null)).toBeNull()
+    expect(parseSortConfig(undefined)).toBeNull()
+  })
+
+  it('returns null for empty string', () => {
+    expect(parseSortConfig('')).toBeNull()
+  })
+
+  it('returns null for invalid direction', () => {
+    expect(parseSortConfig('modified:up')).toBeNull()
+  })
+
+  it('returns null for string without colon', () => {
+    expect(parseSortConfig('modified')).toBeNull()
+  })
+
+  it('roundtrips correctly', () => {
+    const configs = [
+      { option: 'modified' as const, direction: 'desc' as const },
+      { option: 'title' as const, direction: 'asc' as const },
+      { option: 'property:Due date' as const, direction: 'desc' as const },
+    ]
+    for (const config of configs) {
+      expect(parseSortConfig(serializeSortConfig(config))).toEqual(config)
+    }
+  })
+})

src/utils/noteListHelpers.ts

@@ -183,6 +183,23 @@ export function getSortComparator(option: SortOption, direction?: SortDirection)
 
 const SORT_STORAGE_KEY = 'laputa-sort-preferences'
 
+/** Serialize a SortConfig to the string format stored in type frontmatter: "option:direction". */
+export function serializeSortConfig(config: SortConfig): string {
+  return `${config.option}:${config.direction}`
+}
+
+/** Parse a frontmatter sort string ("option:direction") back to SortConfig. */
+export function parseSortConfig(raw: string | null | undefined): SortConfig | null {
+  if (!raw) return null
+  // Format: "option:direction" where option itself can contain ":" (e.g. "property:Priority:asc")
+  const lastColon = raw.lastIndexOf(':')
+  if (lastColon <= 0) return null
+  const dir = raw.slice(lastColon + 1)
+  if (dir !== 'asc' && dir !== 'desc') return null
+  const option = raw.slice(0, lastColon) as SortOption
+  return { option, direction: dir }
+}
+
 export function loadSortPreferences(): Record<string, SortConfig> {
   try {
     const raw = localStorage.getItem(SORT_STORAGE_KEY)
@@ -210,6 +227,21 @@ export function saveSortPreferences(prefs: Record<string, SortConfig>) {
   } catch { /* ignore */ }
 }
 
+/** Remove the `__list__` key from localStorage sort preferences (used during migration). */
+export function clearListSortFromLocalStorage(): void {
+  try {
+    const raw = localStorage.getItem(SORT_STORAGE_KEY)
+    if (!raw) return
+    const parsed = JSON.parse(raw)
+    delete parsed['__list__']
+    if (Object.keys(parsed).length === 0) {
+      localStorage.removeItem(SORT_STORAGE_KEY)
+    } else {
+      localStorage.setItem(SORT_STORAGE_KEY, JSON.stringify(parsed))
+    }
+  } catch { /* ignore */ }
+}
+
 function findBacklinks(entity: VaultEntry, allEntries: VaultEntry[], allContent: Record<string, string>): VaultEntry[] {
   const stem = entity.filename.replace(/\.md$/, '')
   const pathStem = entity.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')

src/utils/suggestionEnrichment.test.ts

@@ -13,7 +13,7 @@ function makeEntry(overrides: Partial<VaultEntry> = {}): VaultEntry {
     aliases: [], belongsTo: [], relatedTo: [], status: null, owner: null, cadence: null,
     archived: false, trashed: false, trashedAt: null, modifiedAt: null, createdAt: null,
     fileSize: 0, snippet: '', wordCount: 0, relationships: {}, icon: null, color: null,
-    order: null, template: null, outgoingLinks: [],
+    order: null, template: null, sort: null, outgoingLinks: [],
     ...overrides,
   }
 }

src/utils/typeColors.test.ts

@@ -54,7 +54,7 @@ const baseEntry: VaultEntry = {
   status: null, owner: null, cadence: null, archived: false, trashed: false, trashedAt: null,
   modifiedAt: null, createdAt: null, fileSize: 0, snippet: '', relationships: {},
   wordCount: 0,
-  icon: null, color: null, order: null, template: null, outgoingLinks: [],
+  icon: null, color: null, order: null, template: null, sort: null, outgoingLinks: [],
 }
 
 describe('buildTypeEntryMap', () => {

src/utils/wikilinkColors.test.ts

@@ -26,7 +26,7 @@ function makeEntry(overrides: Partial<VaultEntry>): VaultEntry {
     icon: null,
     color: null,
     order: null,
-    template: null,
+    template: null, sort: null,
     outgoingLinks: [],
     ...overrides,
   }