fix: inbox sidebar ordering, filter chip wrapping, and editor banner architecture

- Move Inbox to first position in sidebar (before All Notes)
- Add whitespace-nowrap to filter pills + flex-wrap on container so chips
  wrap as whole units instead of breaking text internally
- Editor now reads trashed/archived state from fresh vault entries instead
  of potentially stale tab entry, ensuring banners appear regardless of
  navigation context
- Update tests to pass correct entries prop alongside tabs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/ABSTRACTIONS.md

@@ -539,7 +539,7 @@ Managed by `useIndexing` hook:
 
 ### Vault Config
 
-Per-vault settings stored in `config/ui.config.md`:
+Per-vault settings stored in `ui.config.md` at vault root:
 - Editable as a normal note (YAML frontmatter)
 - Managed by `useVaultConfig` hook and `vaultConfigStore`
 - Settings: zoom, view mode, tag colors, status colors, property display modes

docs/ARCHITECTURE.md

@@ -466,7 +466,7 @@ Managed by `useVaultSwitcher` hook. Switching vaults closes all tabs and resets
 
 ### Vault Config
 
-Per-vault UI settings stored in `config/ui.config.md` (YAML frontmatter in a markdown note):
+Per-vault UI settings stored in `ui.config.md` at vault root (YAML frontmatter in a markdown note):
 - `zoom`: Float zoom level (0.8–1.5)
 - `view_mode`: "all" | "editor-list" | "editor-only"
 - `editor_mode`: "raw" | "preview" (persists across tab switches and sessions)

src-tauri/src/commands.rs

@@ -588,6 +588,8 @@ pub fn repair_vault(vault_path: String) -> Result<String, String> {
     // Migrate legacy theme/ directory to root, then repair themes
     theme::migrate_theme_dir_to_root(&vault_path);
     theme::restore_default_themes(&vault_path)?;
+    // Migrate legacy config/ui.config.md → root ui.config.md
+    vault_config::migrate_ui_config_to_root(&vault_path);
     // Repair config files (AGENTS.md at root, config.md type def)
     vault::repair_config_files(&vault_path)?;
     // Ensure .gitignore with sensible defaults exists

src-tauri/src/lib.rs

@@ -44,6 +44,8 @@ fn run_startup_tasks() {
         "Migrated is_a to type on startup",
         vault::migrate_is_a_to_type(vp_str),
     );
+    // Migrate legacy config/ui.config.md → root ui.config.md
+    vault_config::migrate_ui_config_to_root(vp_str);
     log_startup_result(
         "Migrated hidden_sections to visible property",
         vault_config::migrate_hidden_sections_to_visible(vp_str),

src-tauri/src/vault_config.rs

@@ -4,7 +4,7 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::path::Path;
 
-/// Vault-wide UI configuration stored in `config/ui.config.md`.
+/// Vault-wide UI configuration stored in `ui.config.md` at vault root.
 ///
 /// This file is a regular vault note with YAML frontmatter, visible in the
 /// sidebar under the "Config" section and editable like any note.
@@ -21,14 +21,13 @@ pub struct VaultConfig {
     pub property_display_modes: Option<HashMap<String, String>>,
 }
 
-const CONFIG_DIR: &str = "config";
 const CONFIG_FILENAME: &str = "ui.config.md";
 
 fn config_path(vault_path: &str) -> std::path::PathBuf {
-    Path::new(vault_path).join(CONFIG_DIR).join(CONFIG_FILENAME)
+    Path::new(vault_path).join(CONFIG_FILENAME)
 }
 
-/// Read the vault-wide UI config from `config/ui.config.md`.
+/// Read the vault-wide UI config from `ui.config.md` at vault root.
 /// Returns default values if the file doesn't exist.
 pub fn get_vault_config(vault_path: &str) -> Result<VaultConfig, String> {
     let path = config_path(vault_path);
@@ -69,19 +68,42 @@ fn parse_vault_config(content: &str) -> Result<VaultConfig, String> {
         .map_err(|e| format!("Failed to parse config: {e}"))
 }
 
-/// Save the vault-wide UI config to `config/ui.config.md`.
-/// Creates the directory and file if they don't exist.
+/// Save the vault-wide UI config to `ui.config.md` at vault root.
+/// Creates the file if it doesn't exist.
 pub fn save_vault_config(vault_path: &str, config: VaultConfig) -> Result<(), String> {
     let path = config_path(vault_path);
-    let dir = Path::new(vault_path).join(CONFIG_DIR);
-    if !dir.exists() {
-        std::fs::create_dir_all(&dir).map_err(|e| format!("Failed to create config dir: {e}"))?;
-    }
-
     let content = serialize_config(&config);
     std::fs::write(&path, content).map_err(|e| format!("Failed to write config: {e}"))
 }
 
+/// Migrate legacy `config/ui.config.md` → root `ui.config.md`.
+/// If the root file already exists, the legacy file is simply removed.
+/// Cleans up empty `config/` directory after migration.
+pub fn migrate_ui_config_to_root(vault_path: &str) {
+    let vault = Path::new(vault_path);
+    let legacy = vault.join("config").join(CONFIG_FILENAME);
+    let root = vault.join(CONFIG_FILENAME);
+
+    if legacy.exists() {
+        if !root.exists() {
+            // Move legacy content to root
+            if let Ok(content) = std::fs::read_to_string(&legacy) {
+                let _ = std::fs::write(&root, content);
+            }
+        }
+        let _ = std::fs::remove_file(&legacy);
+    }
+
+    // Clean up empty config/ directory
+    let config_dir = vault.join("config");
+    if config_dir.is_dir() {
+        let is_empty = std::fs::read_dir(&config_dir).map_or(true, |mut d| d.next().is_none());
+        if is_empty {
+            let _ = std::fs::remove_dir(&config_dir);
+        }
+    }
+}
+
 /// Serialize VaultConfig to a markdown file with YAML frontmatter.
 fn serialize_config(config: &VaultConfig) -> String {
     let mut lines = vec!["---".to_string(), "type: config".to_string()];
@@ -142,7 +164,7 @@ fn yaml_safe_value(value: &str) -> String {
     }
 }
 
-/// Migrate `hidden_sections` from `config/ui.config.md` to `visible: false`
+/// Migrate `hidden_sections` from `ui.config.md` to `visible: false`
 /// on Type notes. Returns the number of Type notes updated.
 ///
 /// For each type name in `hidden_sections`:
@@ -354,11 +376,9 @@ property_display_modes:
         let dir = tempfile::TempDir::new().unwrap();
         let vault_path = dir.path().to_str().unwrap();
 
-        // Create config with hidden_sections
-        let config_dir = dir.path().join("config");
-        std::fs::create_dir_all(&config_dir).unwrap();
+        // Create config with hidden_sections at vault root
         std::fs::write(
-            config_dir.join("ui.config.md"),
+            dir.path().join("ui.config.md"),
             "---\ntype: config\nhidden_sections:\n  - Bookmark\n  - Recipe\n---\n",
         )
         .unwrap();
@@ -375,7 +395,7 @@ property_display_modes:
         assert!(recipe.contains("visible: false"));
 
         // Config should no longer have hidden_sections
-        let config_content = std::fs::read_to_string(config_dir.join("ui.config.md")).unwrap();
+        let config_content = std::fs::read_to_string(dir.path().join("ui.config.md")).unwrap();
         assert!(!config_content.contains("hidden_sections"));
     }
 
@@ -384,11 +404,9 @@ property_display_modes:
         let dir = tempfile::TempDir::new().unwrap();
         let vault_path = dir.path().to_str().unwrap();
 
-        // Create config with hidden_sections
-        let config_dir = dir.path().join("config");
-        std::fs::create_dir_all(&config_dir).unwrap();
+        // Create config with hidden_sections at vault root
         std::fs::write(
-            config_dir.join("ui.config.md"),
+            dir.path().join("ui.config.md"),
             "---\ntype: config\nhidden_sections:\n  - Project\n---\n",
         )
         .unwrap();
@@ -416,10 +434,8 @@ property_display_modes:
         let dir = tempfile::TempDir::new().unwrap();
         let vault_path = dir.path().to_str().unwrap();
 
-        let config_dir = dir.path().join("config");
-        std::fs::create_dir_all(&config_dir).unwrap();
         std::fs::write(
-            config_dir.join("ui.config.md"),
+            dir.path().join("ui.config.md"),
             "---\ntype: config\nzoom: 1.0\n---\n",
         )
         .unwrap();
@@ -440,19 +456,15 @@ property_display_modes:
         let dir = tempfile::TempDir::new().unwrap();
         let vault_path = dir.path().to_str().unwrap();
 
-        let config_dir = dir.path().join("config");
-        std::fs::create_dir_all(&config_dir).unwrap();
         std::fs::write(
-            config_dir.join("ui.config.md"),
+            dir.path().join("ui.config.md"),
             "---\ntype: config\nhidden_sections:\n  - Note\n---\n",
         )
         .unwrap();
 
-        // Type note already has visible: false
-        let type_dir = dir.path().join("type");
-        std::fs::create_dir_all(&type_dir).unwrap();
+        // Type note already has visible: false at vault root
         std::fs::write(
-            type_dir.join("note.md"),
+            dir.path().join("note.md"),
             "---\ntype: Type\ntitle: Note\nvisible: false\n---\n",
         )
         .unwrap();
@@ -460,7 +472,7 @@ property_display_modes:
         let count = migrate_hidden_sections_to_visible(vault_path).unwrap();
         assert_eq!(count, 1);
 
-        let content = std::fs::read_to_string(type_dir.join("note.md")).unwrap();
+        let content = std::fs::read_to_string(dir.path().join("note.md")).unwrap();
         // Should have exactly one visible: false, not two
         assert_eq!(content.matches("visible:").count(), 1);
     }
@@ -478,4 +490,90 @@ property_display_modes:
         assert_eq!(yaml_safe_key("has space"), "\"has space\"");
         assert_eq!(yaml_safe_key("has:colon"), "\"has:colon\"");
     }
+
+    #[test]
+    fn migrate_ui_config_moves_legacy_to_root() {
+        let dir = tempfile::TempDir::new().unwrap();
+        let vault_path = dir.path().to_str().unwrap();
+
+        let config_dir = dir.path().join("config");
+        std::fs::create_dir_all(&config_dir).unwrap();
+        std::fs::write(
+            config_dir.join("ui.config.md"),
+            "---\ntype: config\nzoom: 1.5\n---\n",
+        )
+        .unwrap();
+
+        migrate_ui_config_to_root(vault_path);
+
+        // Root file should exist with migrated content
+        let content = std::fs::read_to_string(dir.path().join("ui.config.md")).unwrap();
+        assert!(content.contains("zoom: 1.5"));
+        // Legacy file and empty config dir should be gone
+        assert!(!config_dir.join("ui.config.md").exists());
+        assert!(!config_dir.exists());
+    }
+
+    #[test]
+    fn migrate_ui_config_preserves_existing_root() {
+        let dir = tempfile::TempDir::new().unwrap();
+        let vault_path = dir.path().to_str().unwrap();
+
+        // Root already has content
+        std::fs::write(
+            dir.path().join("ui.config.md"),
+            "---\ntype: config\nzoom: 2.0\n---\n",
+        )
+        .unwrap();
+
+        // Legacy also exists
+        let config_dir = dir.path().join("config");
+        std::fs::create_dir_all(&config_dir).unwrap();
+        std::fs::write(
+            config_dir.join("ui.config.md"),
+            "---\ntype: config\nzoom: 1.0\n---\n",
+        )
+        .unwrap();
+
+        migrate_ui_config_to_root(vault_path);
+
+        // Root should keep its original content
+        let content = std::fs::read_to_string(dir.path().join("ui.config.md")).unwrap();
+        assert!(content.contains("zoom: 2.0"));
+        // Legacy file should be removed
+        assert!(!config_dir.join("ui.config.md").exists());
+    }
+
+    #[test]
+    fn migrate_ui_config_keeps_nonempty_config_dir() {
+        let dir = tempfile::TempDir::new().unwrap();
+        let vault_path = dir.path().to_str().unwrap();
+
+        let config_dir = dir.path().join("config");
+        std::fs::create_dir_all(&config_dir).unwrap();
+        std::fs::write(config_dir.join("ui.config.md"), "---\ntype: config\n---\n").unwrap();
+        std::fs::write(config_dir.join("other.md"), "Other file").unwrap();
+
+        migrate_ui_config_to_root(vault_path);
+
+        // config/ should still exist because it has other files
+        assert!(config_dir.exists());
+        assert!(config_dir.join("other.md").exists());
+        assert!(!config_dir.join("ui.config.md").exists());
+    }
+
+    #[test]
+    fn save_config_writes_to_vault_root() {
+        let dir = tempfile::TempDir::new().unwrap();
+        let vault_path = dir.path().to_str().unwrap();
+        let config = VaultConfig {
+            zoom: Some(1.0),
+            ..Default::default()
+        };
+        save_vault_config(vault_path, config).unwrap();
+
+        // File should be at vault root, not in config/
+        assert!(dir.path().join("ui.config.md").exists());
+        assert!(!dir.path().join("config").exists());
+    }
 }

src/components/DynamicPropertiesPanel.test.tsx

@@ -664,6 +664,39 @@ describe('DynamicPropertiesPanel', () => {
     })
   })
 
+  describe('property row 50/50 layout', () => {
+    it('uses CSS grid with two equal columns on editable rows', () => {
+      render(
+        <DynamicPropertiesPanel
+          entry={makeEntry()}
+          content=""
+          frontmatter={{ url: 'https://example.com/very/long/path/that/should/be/truncated' }}
+          onUpdateProperty={onUpdateProperty}
+        />
+      )
+      const editableRows = screen.getAllByTestId('editable-property')
+      editableRows.forEach(row => {
+        expect(row.className).toContain('grid')
+        expect(row.className).toContain('grid-cols-2')
+      })
+    })
+
+    it('uses CSS grid with two equal columns on read-only rows', () => {
+      render(
+        <DynamicPropertiesPanel
+          entry={makeEntry()}
+          content=""
+          frontmatter={{}}
+        />
+      )
+      const readOnlyRows = screen.getAllByTestId('readonly-property')
+      readOnlyRows.forEach(row => {
+        expect(row.className).toContain('grid')
+        expect(row.className).toContain('grid-cols-2')
+      })
+    })
+  })
+
   describe('URL property rendering', () => {
     it('renders URL values with link styling instead of plain EditableValue', () => {
       render(

src/components/DynamicPropertiesPanel.tsx

@@ -47,15 +47,15 @@ function PropertyRow({ propKey, value, editingKey, displayMode, autoMode, vaultS
   }
 
   return (
-    <div className="group/prop flex min-w-0 items-center gap-2 rounded px-1.5 outline-none transition-colors hover:bg-muted focus:bg-muted focus:ring-1 focus:ring-primary" tabIndex={0} onKeyDown={handleKeyDown} data-testid="editable-property">
-      <span className="font-mono-overline flex w-1/2 shrink-0 min-w-0 items-center gap-1 text-muted-foreground">
+    <div className="group/prop grid min-w-0 grid-cols-2 items-center gap-2 rounded px-1.5 outline-none transition-colors hover:bg-muted focus:bg-muted focus:ring-1 focus:ring-primary" tabIndex={0} onKeyDown={handleKeyDown} data-testid="editable-property">
+      <span className="font-mono-overline flex min-w-0 items-center gap-1 text-muted-foreground">
         <span className="truncate">{propKey}</span>
         {onDelete && (
           <button className="border-none bg-transparent p-0 text-sm leading-none text-muted-foreground opacity-0 transition-all hover:text-destructive group-hover/prop:opacity-100" onClick={() => onDelete(propKey)} title="Delete property">&times;</button>
         )}
         <DisplayModeSelector propKey={propKey} currentMode={displayMode} autoMode={autoMode} onSelect={onDisplayModeChange} />
       </span>
-      <div className="w-1/2 min-w-0">
+      <div className="min-w-0">
         <SmartPropertyValueCell propKey={propKey} value={value} displayMode={displayMode} isEditing={editingKey === propKey} vaultStatuses={vaultStatuses} vaultTags={vaultTags} onStartEdit={onStartEdit} onSave={onSave} onSaveList={onSaveList} onUpdate={onUpdate} />
       </div>
     </div>
@@ -64,9 +64,9 @@ function PropertyRow({ propKey, value, editingKey, displayMode, autoMode, vaultS
 
 function InfoRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex min-w-0 items-center gap-2 px-1.5" data-testid="readonly-property">
-      <span className="font-mono-overline w-1/2 shrink-0 truncate" style={{ color: 'var(--text-muted)' }}>{label}</span>
-      <span className="w-1/2 min-w-0 truncate text-right text-[12px]" style={{ color: 'var(--text-muted)' }}>{value}</span>
+    <div className="grid min-w-0 grid-cols-2 items-center gap-2 px-1.5" data-testid="readonly-property">
+      <span className="font-mono-overline min-w-0 truncate" style={{ color: 'var(--text-muted)' }}>{label}</span>
+      <span className="min-w-0 truncate text-right text-[12px]" style={{ color: 'var(--text-muted)' }}>{value}</span>
     </div>
   )
 }

src/components/Editor.css

@@ -96,7 +96,7 @@
 .editor__blocknote-container .bn-editor {
   width: 100%;
   padding: 20px 40px;
-  max-width: 760px;
+  max-width: var(--editor-max-width, 760px);
   margin: 0 auto;
 }
 
@@ -282,11 +282,13 @@
   border: none;
   outline: none;
   background: transparent;
-  font-size: var(--editor-title-size, 28px);
-  font-weight: 700;
-  line-height: 1.2;
+  font-size: var(--headings-h1-font-size);
+  font-weight: var(--headings-h1-font-weight);
+  line-height: var(--headings-h1-line-height);
+  letter-spacing: var(--headings-h1-letter-spacing);
   color: var(--foreground);
   padding: 0;
+  margin-left: 8px;
 }
 
 .title-field__input::placeholder {

src/components/Editor.test.tsx

@@ -300,7 +300,7 @@ describe('Editor', () => {
     const trashedTab = { entry: trashedEntry, content: mockContent }
 
     function renderTrashed(overrides: Partial<Parameters<typeof Editor>[0]> = {}) {
-      return render(<Editor {...defaultProps} tabs={[trashedTab]} activeTabPath={trashedEntry.path} {...overrides} />)
+      return render(<Editor {...defaultProps} entries={[trashedEntry]} tabs={[trashedTab]} activeTabPath={trashedEntry.path} {...overrides} />)
     }
 
     it('shows banner and read-only editor when note is trashed', () => {
@@ -336,9 +336,10 @@ describe('Editor', () => {
       )
       expect(screen.queryByTestId('trashed-note-banner')).not.toBeInTheDocument()
 
-      const updatedTab = { entry: { ...mockEntry, trashed: true, trashedAt: Date.now() / 1000 }, content: mockContent }
+      const trashedEntryUpdated = { ...mockEntry, trashed: true, trashedAt: Date.now() / 1000 }
+      const updatedTab = { entry: trashedEntryUpdated, content: mockContent }
       rerender(
-        <Editor {...defaultProps} tabs={[updatedTab]} activeTabPath={mockEntry.path} onRestoreNote={vi.fn()} onDeleteNote={vi.fn()} />
+        <Editor {...defaultProps} entries={[trashedEntryUpdated]} tabs={[updatedTab]} activeTabPath={mockEntry.path} onRestoreNote={vi.fn()} onDeleteNote={vi.fn()} />
       )
       expect(screen.getByTestId('trashed-note-banner')).toBeInTheDocument()
       expect(screen.getByTestId('blocknote-view')).toHaveAttribute('data-editable', 'false')
@@ -346,13 +347,14 @@ describe('Editor', () => {
 
     it('removes trash banner immediately when entry is restored (reactive)', () => {
       const { rerender } = render(
-        <Editor {...defaultProps} tabs={[trashedTab]} activeTabPath={trashedEntry.path} onRestoreNote={vi.fn()} onDeleteNote={vi.fn()} />
+        <Editor {...defaultProps} entries={[trashedEntry]} tabs={[trashedTab]} activeTabPath={trashedEntry.path} onRestoreNote={vi.fn()} onDeleteNote={vi.fn()} />
       )
       expect(screen.getByTestId('trashed-note-banner')).toBeInTheDocument()
 
-      const restoredTab = { entry: { ...trashedEntry, trashed: false, trashedAt: null }, content: mockContent }
+      const restoredEntry = { ...trashedEntry, trashed: false, trashedAt: null }
+      const restoredTab = { entry: restoredEntry, content: mockContent }
       rerender(
-        <Editor {...defaultProps} tabs={[restoredTab]} activeTabPath={trashedEntry.path} onRestoreNote={vi.fn()} onDeleteNote={vi.fn()} />
+        <Editor {...defaultProps} entries={[restoredEntry]} tabs={[restoredTab]} activeTabPath={trashedEntry.path} onRestoreNote={vi.fn()} onDeleteNote={vi.fn()} />
       )
       expect(screen.queryByTestId('trashed-note-banner')).not.toBeInTheDocument()
       expect(screen.getByTestId('blocknote-view')).toHaveAttribute('data-editable', 'true')
@@ -408,6 +410,7 @@ describe('click empty editor space', () => {
     render(
       <Editor
         {...defaultProps}
+        entries={[trashedEntry]}
         tabs={[{ entry: trashedEntry, content: mockContent }]}
         activeTabPath={trashedEntry.path}
       />
@@ -429,9 +432,10 @@ describe('archived note behavior', () => {
     )
     expect(screen.queryByTestId('archived-note-banner')).not.toBeInTheDocument()
 
-    const archivedTab = { entry: { ...mockEntry, archived: true }, content: mockContent }
+    const archivedEntry = { ...mockEntry, archived: true }
+    const archivedTab = { entry: archivedEntry, content: mockContent }
     rerender(
-      <Editor {...defaultProps} tabs={[archivedTab]} activeTabPath={mockEntry.path} onUnarchiveNote={vi.fn()} />
+      <Editor {...defaultProps} entries={[archivedEntry]} tabs={[archivedTab]} activeTabPath={mockEntry.path} onUnarchiveNote={vi.fn()} />
     )
     expect(screen.getByTestId('archived-note-banner')).toBeInTheDocument()
   })
@@ -440,13 +444,14 @@ describe('archived note behavior', () => {
     const archivedEntry: VaultEntry = { ...mockEntry, archived: true }
     const archivedTab = { entry: archivedEntry, content: mockContent }
     const { rerender } = render(
-      <Editor {...defaultProps} tabs={[archivedTab]} activeTabPath={archivedEntry.path} onUnarchiveNote={vi.fn()} />
+      <Editor {...defaultProps} entries={[archivedEntry]} tabs={[archivedTab]} activeTabPath={archivedEntry.path} onUnarchiveNote={vi.fn()} />
     )
     expect(screen.getByTestId('archived-note-banner')).toBeInTheDocument()
 
-    const unarchivedTab = { entry: { ...archivedEntry, archived: false }, content: mockContent }
+    const unarchivedEntry = { ...archivedEntry, archived: false }
+    const unarchivedTab = { entry: unarchivedEntry, content: mockContent }
     rerender(
-      <Editor {...defaultProps} tabs={[unarchivedTab]} activeTabPath={archivedEntry.path} onUnarchiveNote={vi.fn()} />
+      <Editor {...defaultProps} entries={[unarchivedEntry]} tabs={[unarchivedTab]} activeTabPath={archivedEntry.path} onUnarchiveNote={vi.fn()} />
     )
     expect(screen.queryByTestId('archived-note-banner')).not.toBeInTheDocument()
   })

src/components/EditorContent.tsx

@@ -161,7 +161,11 @@ export function EditorContent({
   isConflicted, onKeepMine, onKeepTheirs,
   ...breadcrumbProps
 }: EditorContentProps) {
-  const isTrashed = activeTab?.entry.trashed ?? false
+  // Look up trashed/archived from the latest vault entries, not the tab snapshot,
+  // so the banner appears regardless of navigation context.
+  const freshEntry = activeTab ? entries.find(e => e.path === activeTab.entry.path) : undefined
+  const isTrashed = freshEntry?.trashed ?? activeTab?.entry.trashed ?? false
+  const isArchived = freshEntry?.archived ?? activeTab?.entry.archived ?? false
   const showEditor = !diffMode && !rawMode
   const entryIcon = activeTab?.entry.icon ?? null
   const emojiIcon = entryIcon && isEmoji(entryIcon) ? entryIcon : null
@@ -188,7 +192,7 @@ export function EditorContent({
           onDeletePermanently={() => onDeleteNote?.(activeTab.entry.path)}
         />
       )}
-      {activeTab?.entry.archived && breadcrumbProps.onUnarchiveNote && (
+      {activeTab && isArchived && breadcrumbProps.onUnarchiveNote && (
         <ArchivedNoteBanner onUnarchive={() => breadcrumbProps.onUnarchiveNote!(activeTab.entry.path)} />
       )}
       {activeTab && isConflicted && (

src/components/Sidebar.test.tsx

@@ -1038,4 +1038,24 @@ describe('Sidebar', () => {
     const mondaySections = screen.getAllByText(/Monday Ideas/i)
     expect(mondaySections).toHaveLength(1)
   })
+
+  it('renders Inbox as the first item in the top nav', () => {
+    render(<Sidebar entries={[]} selection={defaultSelection} onSelect={() => {}} inboxCount={5} />)
+    const topNav = screen.getByTestId('sidebar-top-nav')
+    const items = topNav.children
+    expect(items[0].textContent).toContain('Inbox')
+    expect(items[1].textContent).toContain('All Notes')
+  })
+
+  it('displays inbox count badge', () => {
+    render(<Sidebar entries={[]} selection={defaultSelection} onSelect={() => {}} inboxCount={12} />)
+    expect(screen.getByText('12')).toBeInTheDocument()
+  })
+
+  it('calls onSelect with inbox filter when clicking Inbox', () => {
+    const onSelect = vi.fn()
+    render(<Sidebar entries={[]} selection={defaultSelection} onSelect={onSelect} inboxCount={3} />)
+    fireEvent.click(screen.getByText('Inbox'))
+    expect(onSelect).toHaveBeenCalledWith({ kind: 'filter', filter: 'inbox' })
+  })
 })

src/components/Sidebar.tsx

@@ -306,10 +306,10 @@ export const Sidebar = memo(function Sidebar({
       <nav className="flex-1 overflow-y-auto">
         {/* Top nav */}
         <div className="border-b border-border" data-testid="sidebar-top-nav" style={{ padding: '4px 6px' }}>
+          <NavItem icon={Tray} label="Inbox" count={inboxCount} isActive={isSelectionActive(selection, { kind: 'filter', filter: 'inbox' })} badgeClassName="text-muted-foreground" badgeStyle={{ background: 'var(--muted)' }} onClick={() => onSelect({ kind: 'filter', filter: 'inbox' })} />
           <NavItem icon={FileText} label="All Notes" count={activeCount} isActive={isSelectionActive(selection, { kind: 'filter', filter: 'all' })} badgeClassName="bg-primary text-primary-foreground" onClick={() => onSelect({ kind: 'filter', filter: 'all' })} />
           <NavItem icon={Archive} label="Archive" count={archivedCount} isActive={isSelectionActive(selection, { kind: 'filter', filter: 'archived' })} badgeClassName="text-muted-foreground" badgeStyle={{ background: 'var(--muted)' }} onClick={() => onSelect({ kind: 'filter', filter: 'archived' })} />
           <NavItem icon={Trash} label="Trash" count={trashedCount} isActive={isSelectionActive(selection, { kind: 'filter', filter: 'trash' })} activeClassName="bg-destructive/10 text-destructive" badgeClassName="text-muted-foreground" badgeStyle={{ background: 'var(--muted)' }} onClick={() => onSelect({ kind: 'filter', filter: 'trash' })} />
-          <NavItem icon={Tray} label="Inbox" count={inboxCount} isActive={isSelectionActive(selection, { kind: 'filter', filter: 'inbox' })} badgeClassName="text-muted-foreground" badgeStyle={{ background: 'var(--muted)' }} onClick={() => onSelect({ kind: 'filter', filter: 'inbox' })} />
         </div>
 
         {/* Sections header + visibility popover */}

src/components/SidebarParts.tsx

@@ -1,6 +1,7 @@
 import { type ComponentType, useState, useEffect, useRef } from 'react'
 import type { VaultEntry, SidebarSelection } from '../types'
 import { cn } from '@/lib/utils'
+import { isEmoji } from '../utils/emoji'
 import { ChevronRight, ChevronDown, Plus } from 'lucide-react'
 import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
 import { type IconProps } from '@phosphor-icons/react'
@@ -148,7 +149,7 @@ function SectionChildList({ items, selection, sectionColor, sectionLightColor, o
         const active = isSelectionActive(selection, sel)
         return (
           <SectionChildItem
-            key={entry.path} title={entry.title} isActive={active}
+            key={entry.path} title={entry.title} icon={entry.icon} isActive={active}
             sectionColor={active ? sectionColor : undefined}
             sectionLightColor={active ? sectionLightColor : undefined}
             onClick={() => { onSelect(sel); onSelectNote?.(entry) }}
@@ -237,8 +238,8 @@ function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive,
   )
 }
 
-function SectionChildItem({ title, isActive, sectionColor, sectionLightColor, onClick }: {
-  title: string; isActive: boolean
+function SectionChildItem({ title, icon, isActive, sectionColor, sectionLightColor, onClick }: {
+  title: string; icon?: string | null; isActive: boolean
   sectionColor?: string; sectionLightColor?: string
   onClick: () => void
 }) {
@@ -248,7 +249,7 @@ function SectionChildItem({ title, isActive, sectionColor, sectionLightColor, on
       style={{ padding: '4px 16px 4px 28px', ...(isActive && { backgroundColor: sectionLightColor, color: sectionColor }) }}
       onClick={onClick}
     >
-      {title}
+      {icon && isEmoji(icon) && <span className="mr-1">{icon}</span>}{title}
     </div>
   )
 }

src/components/TypeSelector.tsx

@@ -22,17 +22,19 @@ function TypeSelectorItem({ type, typeColorKeys, typeIconKeys }: {
 function ReadOnlyType({ isA, customColorKey, onNavigate }: { isA?: string | null; customColorKey?: string | null; onNavigate?: (target: string) => void }) {
   if (!isA) return null
   return (
-    <div className="flex min-w-0 items-center justify-between gap-2 px-1.5">
+    <div className="grid min-w-0 grid-cols-2 items-center gap-2 px-1.5">
       <span className="font-mono-overline shrink-0 text-muted-foreground">Type</span>
-      {onNavigate ? (
-        <button
-          className="min-w-0 truncate border-none text-right cursor-pointer hover:opacity-80"
-          style={{ background: getTypeLightColor(isA, customColorKey), color: getTypeColor(isA, customColorKey), borderRadius: 6, padding: '2px 8px', fontSize: 12, fontWeight: 500 }}
-          onClick={() => onNavigate(isA.toLowerCase())} title={isA}
-        >{isA}</button>
-      ) : (
-        <span className="text-right text-[12px] text-secondary-foreground">{isA}</span>
-      )}
+      <div className="min-w-0">
+        {onNavigate ? (
+          <button
+            className="min-w-0 max-w-full truncate border-none cursor-pointer ring-inset hover:ring-1 hover:ring-current"
+            style={{ background: getTypeLightColor(isA, customColorKey), color: getTypeColor(isA, customColorKey), borderRadius: 6, padding: '2px 8px', fontSize: 12, fontWeight: 500 }}
+            onClick={() => onNavigate(isA.toLowerCase())} title={isA}
+          >{isA}</button>
+        ) : (
+          <span className="text-[12px] text-secondary-foreground">{isA}</span>
+        )}
+      </div>
     </div>
   )
 }
@@ -55,23 +57,24 @@ export function TypeSelector({ isA, customColorKey, availableTypes, typeColorKey
   const typeLightColor = isA ? getTypeLightColor(isA, typeColorKeys[isA] ?? customColorKey) : undefined
 
   return (
-    <div className="flex min-w-0 items-center justify-between gap-2 px-1.5" data-testid="type-selector">
+    <div className="grid min-w-0 grid-cols-2 items-center gap-2 px-1.5" data-testid="type-selector">
       <span className="font-mono-overline shrink-0 text-muted-foreground">Type</span>
-      <Select value={currentValue} onValueChange={v => onUpdateProperty('type', v === TYPE_NONE ? null : v)}>
-        <SelectTrigger
-          size="sm"
-          className={`h-auto shrink-0 gap-1 border-none shadow-none [&_svg]:text-current ring-inset${isA ? ' hover:ring-1 hover:ring-current' : ' bg-muted hover:opacity-80'}`}
-          style={{
-            background: typeLightColor ?? undefined,
-            color: typeColor ?? undefined,
-            borderRadius: 6,
-            padding: '4px 8px',
-            fontSize: 12,
-            fontWeight: 500,
-          }}
-        >
-          <SelectValue placeholder="None" />
-        </SelectTrigger>
+      <div className="min-w-0">
+        <Select value={currentValue} onValueChange={v => onUpdateProperty('type', v === TYPE_NONE ? null : v)}>
+          <SelectTrigger
+            size="sm"
+            className={`h-auto max-w-full gap-1 border-none shadow-none [&_svg]:text-current ring-inset${isA ? ' hover:ring-1 hover:ring-current' : ' bg-muted hover:opacity-80'}`}
+            style={{
+              background: typeLightColor ?? undefined,
+              color: typeColor ?? undefined,
+              borderRadius: 6,
+              padding: '4px 8px',
+              fontSize: 12,
+              fontWeight: 500,
+            }}
+          >
+            <SelectValue placeholder="None" />
+          </SelectTrigger>
         <SelectContent position="popper" side="left">
           <SelectItem value={TYPE_NONE}>None</SelectItem>
           <SelectSeparator />
@@ -81,7 +84,8 @@ export function TypeSelector({ isA, customColorKey, availableTypes, typeColorKey
             </SelectItem>
           ))}
         </SelectContent>
-      </Select>
+        </Select>
+      </div>
     </div>
   )
 }

src/components/note-list/FilterPills.tsx

@@ -15,14 +15,14 @@ const PILLS: { value: NoteListFilter; label: string }[] = [
 
 function FilterPillsInner({ active, counts, onChange }: FilterPillsProps) {
   return (
-    <div className="flex h-[45px] shrink-0 items-center gap-1 border-b border-border px-4" data-testid="filter-pills">
+    <div className="flex h-auto min-h-[45px] shrink-0 flex-wrap items-center gap-1 border-b border-border px-4 py-1.5" data-testid="filter-pills">
       {PILLS.map(({ value, label }) => (
         <button
           key={value}
           type="button"
           role="tab"
           aria-selected={active === value}
-          className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+          className={`inline-flex whitespace-nowrap items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
             active === value
               ? 'border-foreground/20 bg-foreground/10 text-foreground'
               : 'border-transparent text-muted-foreground hover:bg-muted hover:text-foreground'

src/components/note-list/InboxFilterPills.tsx

@@ -16,14 +16,14 @@ const PILLS: { value: InboxPeriod; label: string }[] = [
 
 function InboxFilterPillsInner({ active, counts, onChange }: InboxFilterPillsProps) {
   return (
-    <div className="flex h-[45px] shrink-0 items-center gap-1 border-b border-border px-4" data-testid="inbox-filter-pills">
+    <div className="flex h-auto min-h-[45px] shrink-0 flex-wrap items-center gap-1 border-b border-border px-4 py-1.5" data-testid="inbox-filter-pills">
       {PILLS.map(({ value, label }) => (
         <button
           key={value}
           type="button"
           role="tab"
           aria-selected={active === value}
-          className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+          className={`inline-flex whitespace-nowrap items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
             active === value
               ? 'border-foreground/20 bg-foreground/10 text-foreground'
               : 'border-transparent text-muted-foreground hover:bg-muted hover:text-foreground'

src/types.ts

@@ -155,7 +155,7 @@ export interface VaultSettings {
   theme: string | null
 }
 
-/** Vault-wide UI configuration stored in config/ui.config.md. */
+/** Vault-wide UI configuration stored in ui.config.md at vault root. */
 export interface VaultConfig {
   zoom: number | null
   view_mode: string | null

tests/smoke/title-field-alignment.spec.ts

@@ -54,4 +54,29 @@ test.describe('TitleField alignment and separator', () => {
     // Both should have the same left edge (within 2px tolerance)
     expect(Math.abs(titleBox!.x - editorBox!.x)).toBeLessThanOrEqual(2)
   })
+
+  test('title field uses H1 CSS variables for font styling', async ({ page }) => {
+    // Verify the title-field__input element references the H1 heading CSS vars
+    const usesH1Vars = await page.evaluate(() => {
+      const sheets = Array.from(document.styleSheets)
+      for (const sheet of sheets) {
+        try {
+          for (const rule of Array.from(sheet.cssRules)) {
+            if (rule instanceof CSSStyleRule && rule.selectorText === '.title-field__input') {
+              const fontSize = rule.style.getPropertyValue('font-size')
+              const fontWeight = rule.style.getPropertyValue('font-weight')
+              return {
+                fontSize: fontSize.includes('--headings-h1-font-size'),
+                fontWeight: fontWeight.includes('--headings-h1-font-weight'),
+              }
+            }
+          }
+        } catch { /* cross-origin sheet */ }
+      }
+      return { fontSize: false, fontWeight: false }
+    })
+
+    expect(usesH1Vars.fontSize).toBe(true)
+    expect(usesH1Vars.fontWeight).toBe(true)
+  })
 })