fix: note path below title — show only on focus, remove duplicate filename

Two bugs fixed in TitleField:

1. Vault-relative path was always visible for subdirectory notes. Now
   only appears when the title input is focused, hidden on blur.

2. Both bare filename and vault-relative path rendered simultaneously.
   Now the filename hint is suppressed when the path is visible, so
   only one line shows (e.g. `docs/adr/0001-tauri-stack`). Also
   strips the .md extension from the displayed path.

Root-level notes continue to show no path (unchanged).

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

.codescene-thresholds

@@ -1,2 +1,2 @@
-HOTSPOT_THRESHOLD=9.6
-AVERAGE_THRESHOLD=9.37
+HOTSPOT_THRESHOLD=9.72
+AVERAGE_THRESHOLD=9.34

.env.example

@@ -0,0 +1,9 @@
+# Copy to .env.local and fill in real values
+# These are never committed — .env.local is gitignored
+
+# Sentry DSN (https://sentry.io → Project → Settings → Client Keys)
+VITE_SENTRY_DSN=
+
+# PostHog (https://posthog.com → Project → Settings → Project API Key)
+VITE_POSTHOG_KEY=
+VITE_POSTHOG_HOST=https://eu.i.posthog.com

.gitignore

@@ -67,3 +67,7 @@ CODE-HEALTH-REPORT.md
 # Tauri signing keys (never commit private keys)
 *.key
 *.key.pub
+
+# Local environment variables (never commit)
+.env.local
+.env.*.local

src/App.tsx

@@ -328,7 +328,7 @@ function App() {
   }, [notes])
 
   const handleCreateView = useCallback(async (definition: import('./types').ViewDefinition) => {
-    const filename = definition.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+    const filename = definition.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') + '.yml'
     const target = isTauri() ? invoke : mockInvoke
     await target('save_view_cmd', { vaultPath: resolvedPath, filename, definition })
     await vault.reloadViews()
@@ -349,13 +349,27 @@ function App() {
   const availableFields = useMemo(() => {
     const builtIn = ['type', 'status', 'title', 'favorite']
     if (!vault.entries?.length) return builtIn
-    const customProps = new Set<string>()
+    const customFields = new Set<string>()
     for (const e of vault.entries) {
       if (e.properties) {
-        for (const key of Object.keys(e.properties)) customProps.add(key)
+        for (const key of Object.keys(e.properties)) customFields.add(key)
+      }
+      if (e.relationships) {
+        for (const key of Object.keys(e.relationships)) customFields.add(key)
       }
     }
-    return [...builtIn, ...Array.from(customProps).sort()]
+    return [...builtIn, ...Array.from(customFields).sort()]
+  }, [vault.entries])
+
+  const valueSuggestionsForField = useCallback((field: string): string[] => {
+    if (!vault.entries?.length) return []
+    const values = new Set<string>()
+    for (const e of vault.entries) {
+      if (field === 'type' && e.isA) values.add(e.isA)
+      else if (field === 'status' && e.status) values.add(e.status)
+      else if (e.properties?.[field] != null) values.add(String(e.properties[field]))
+    }
+    return Array.from(values).sort()
   }, [vault.entries])
 
   const bulkActions = useBulkActions(entryActions, setToastMessage)
@@ -452,6 +466,7 @@ function App() {
     noteListFilter,
     onSetNoteListFilter: setNoteListFilter,
     onOpenInNewWindow: handleOpenInNewWindow,
+    onToggleFavorite: entryActions.handleToggleFavorite,
   })
 
   const activeTab = notes.tabs.find((t) => t.entry.path === notes.activeTabPath) ?? null
@@ -599,7 +614,7 @@ function App() {
       <CommandPalette open={dialogs.showCommandPalette} commands={commands} onClose={dialogs.closeCommandPalette} />
       <SearchPanel open={dialogs.showSearch} vaultPath={resolvedPath} entries={vault.entries} onSelectNote={notes.handleSelectNote} onClose={dialogs.closeSearch} />
       <CreateTypeDialog open={dialogs.showCreateTypeDialog} onClose={dialogs.closeCreateType} onCreate={handleCreateType} />
-      <CreateViewDialog open={dialogs.showCreateViewDialog} onClose={dialogs.closeCreateView} onCreate={handleCreateView} availableFields={availableFields} />
+      <CreateViewDialog open={dialogs.showCreateViewDialog} onClose={dialogs.closeCreateView} onCreate={handleCreateView} availableFields={availableFields} valueSuggestions={valueSuggestionsForField} />
       <CommitDialog open={commitFlow.showCommitDialog} modifiedCount={vault.modifiedFiles.length} suggestedMessage={suggestedCommitMessage} onCommit={commitFlow.handleCommitPush} onClose={commitFlow.closeCommitDialog} />
       <ConflictResolverModal
         open={dialogs.showConflictResolver}

src/components/BreadcrumbBar.test.tsx

@@ -146,6 +146,15 @@ describe('BreadcrumbBar — title in breadcrumb (always rendered, CSS-toggled)',
   })
 })
 
+describe('BreadcrumbBar — action buttons always right-aligned', () => {
+  it('actions container has ml-auto so buttons are always right-aligned', () => {
+    const { container } = render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
+    const actions = container.querySelector('.breadcrumb-bar__actions')
+    expect(actions).toBeInTheDocument()
+    expect(actions).toHaveClass('ml-auto')
+  })
+})
+
 describe('BreadcrumbBar — raw editor toggle', () => {
   it('shows Raw editor button with tooltip "Raw editor" when rawMode is off', () => {
     const onToggleRaw = vi.fn()

src/components/BreadcrumbBar.tsx

@@ -61,7 +61,7 @@ function BreadcrumbActions({ entry, showDiffToggle, diffMode, diffLoading, onTog
   onToggleFavorite, onTrash, onRestore, onArchive, onUnarchive,
 }: Omit<BreadcrumbBarProps, 'wordCount'>) {
   return (
-    <div className="flex items-center" style={{ gap: 12 }}>
+    <div className="breadcrumb-bar__actions ml-auto flex items-center" style={{ gap: 12 }}>
       <button
         className={cn(
           "flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors",

src/components/CreateViewDialog.tsx

@@ -1,30 +1,35 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { FilterBuilder } from './FilterBuilder'
-import type { FilterCondition, ViewDefinition } from '../types'
+import { EmojiPicker } from './EmojiPicker'
+import type { FilterGroup, ViewDefinition } from '../types'
 
 interface CreateViewDialogProps {
   open: boolean
   onClose: () => void
   onCreate: (definition: ViewDefinition) => void
   availableFields: string[]
+  /** Returns known values for a given field (for autocomplete). */
+  valueSuggestions?: (field: string) => string[]
 }
 
-export function CreateViewDialog({ open, onClose, onCreate, availableFields }: CreateViewDialogProps) {
+export function CreateViewDialog({ open, onClose, onCreate, availableFields, valueSuggestions }: CreateViewDialogProps) {
   const [name, setName] = useState('')
   const [icon, setIcon] = useState('')
-  const [conditions, setConditions] = useState<FilterCondition[]>([
-    { field: 'type', op: 'equals', value: '' },
-  ])
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [filters, setFilters] = useState<FilterGroup>({
+    all: [{ field: 'type', op: 'equals', value: '' }],
+  })
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (open) {
       setName('') // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
       setIcon('') // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
-      setConditions([{ field: availableFields[0] ?? 'type', op: 'equals', value: '' }]) // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
+      setShowEmojiPicker(false) // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
+      setFilters({ all: [{ field: availableFields[0] ?? 'type', op: 'equals', value: '' }] }) // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
       setTimeout(() => inputRef.current?.focus(), 50)
     }
   }, [open, availableFields])
@@ -33,18 +38,26 @@ export function CreateViewDialog({ open, onClose, onCreate, availableFields }: C
     e.preventDefault()
     const trimmed = name.trim()
     if (!trimmed) return
-    const validConditions = conditions.filter((c) => c.field)
     const definition: ViewDefinition = {
       name: trimmed,
       icon: icon || null,
       color: null,
       sort: null,
-      filters: { all: validConditions },
+      filters,
     }
     onCreate(definition)
     onClose()
   }
 
+  const handleSelectEmoji = useCallback((emoji: string) => {
+    setIcon(emoji)
+    setShowEmojiPicker(false)
+  }, [])
+
+  const handleCloseEmojiPicker = useCallback(() => {
+    setShowEmojiPicker(false)
+  }, [])
+
   return (
     <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
       <DialogContent showCloseButton={false} className="sm:max-w-[520px]">
@@ -53,15 +66,19 @@ export function CreateViewDialog({ open, onClose, onCreate, availableFields }: C
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="flex gap-2">
-            <div className="w-16 space-y-1.5">
+            <div className="w-16 space-y-1.5 relative">
               <label className="text-xs font-medium text-muted-foreground">Icon</label>
-              <Input
-                placeholder="📋"
-                value={icon}
-                onChange={(e) => setIcon(e.target.value)}
-                className="text-center"
-                maxLength={2}
-              />
+              <button
+                type="button"
+                className="flex h-9 w-full items-center justify-center rounded-md border border-input bg-background text-xl cursor-pointer hover:bg-accent transition-colors"
+                onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                title="Pick icon"
+              >
+                {icon || <span className="text-sm text-muted-foreground">📋</span>}
+              </button>
+              {showEmojiPicker && (
+                <EmojiPicker onSelect={handleSelectEmoji} onClose={handleCloseEmojiPicker} />
+              )}
             </div>
             <div className="flex-1 space-y-1.5">
               <label className="text-xs font-medium text-muted-foreground">Name</label>
@@ -76,9 +93,10 @@ export function CreateViewDialog({ open, onClose, onCreate, availableFields }: C
           <div className="space-y-1.5">
             <label className="text-xs font-medium text-muted-foreground">Filters</label>
             <FilterBuilder
-              conditions={conditions}
-              onChange={setConditions}
+              group={filters}
+              onChange={setFilters}
               availableFields={availableFields}
+              valueSuggestions={valueSuggestions}
             />
           </div>
           <DialogFooter>

src/components/FilterBuilder.tsx

@@ -1,7 +1,7 @@
+import { useId } from 'react'
 import { Plus, X } from '@phosphor-icons/react'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import type { FilterCondition, FilterOp } from '../types'
+import type { FilterCondition, FilterOp, FilterGroup, FilterNode } from '../types'
 
 const OPERATORS: { value: FilterOp; label: string }[] = [
   { value: 'equals', label: 'equals' },
@@ -10,35 +10,91 @@ const OPERATORS: { value: FilterOp; label: string }[] = [
   { value: 'not_contains', label: 'does not contain' },
   { value: 'is_empty', label: 'is empty' },
   { value: 'is_not_empty', label: 'is not empty' },
+  { value: 'before', label: 'before' },
+  { value: 'after', label: 'after' },
 ]
 
 const NO_VALUE_OPS = new Set<FilterOp>(['is_empty', 'is_not_empty'])
 
-interface FilterBuilderProps {
-  conditions: FilterCondition[]
-  onChange: (conditions: FilterCondition[]) => void
-  availableFields: string[]
+function isFilterGroup(node: FilterNode): node is FilterGroup {
+  return 'all' in node || 'any' in node
 }
 
-function FilterRow({ condition, fields, onUpdate, onRemove }: {
+function getGroupChildren(group: FilterGroup): FilterNode[] {
+  return 'all' in group ? group.all : group.any
+}
+
+function getGroupMode(group: FilterGroup): 'all' | 'any' {
+  return 'all' in group ? 'all' : 'any'
+}
+
+function setGroupChildren(mode: 'all' | 'any', children: FilterNode[]): FilterGroup {
+  return mode === 'all' ? { all: children } : { any: children }
+}
+
+/** Combobox-style field input with datalist autocomplete. */
+function FieldInput({ value, fields, onChange }: {
+  value: string
+  fields: string[]
+  onChange: (v: string) => void
+}) {
+  const id = useId()
+  return (
+    <>
+      <input
+        list={id}
+        className="h-8 rounded-md border border-input bg-background px-2 text-sm flex-1 min-w-0"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="field"
+      />
+      <datalist id={id}>
+        {fields.map((f) => <option key={f} value={f} />)}
+      </datalist>
+    </>
+  )
+}
+
+/** Combobox-style value input with autocomplete for known values. */
+function ValueInput({ value, suggestions, onChange }: {
+  value: string
+  suggestions: string[]
+  onChange: (v: string) => void
+}) {
+  const id = useId()
+  return (
+    <>
+      <input
+        list={id}
+        className="h-8 rounded-md border border-input bg-background px-2 text-sm flex-1 min-w-0"
+        placeholder="value"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <datalist id={id}>
+        {suggestions.map((s) => <option key={s} value={s} />)}
+      </datalist>
+    </>
+  )
+}
+
+function FilterRow({ condition, fields, valueSuggestions, onUpdate, onRemove }: {
   condition: FilterCondition
   fields: string[]
+  valueSuggestions: (field: string) => string[]
   onUpdate: (c: FilterCondition) => void
   onRemove: () => void
 }) {
+  const suggestions = valueSuggestions(condition.field)
   return (
     <div className="flex items-center gap-1.5">
-      <select
-        className="h-8 rounded-md border border-input bg-background px-2 text-sm flex-1 min-w-0"
+      <FieldInput
         value={condition.field}
-        onChange={(e) => onUpdate({ ...condition, field: e.target.value })}
-      >
-        {fields.map((f) => (
-          <option key={f} value={f}>{f}</option>
-        ))}
-      </select>
+        fields={fields}
+        onChange={(v) => onUpdate({ ...condition, field: v })}
+      />
       <select
-        className="h-8 rounded-md border border-input bg-background px-2 text-sm flex-1 min-w-0"
+        className="h-8 rounded-md border border-input bg-background px-2 text-sm shrink-0"
         value={condition.op}
         onChange={(e) => onUpdate({ ...condition, op: e.target.value as FilterOp })}
       >
@@ -47,11 +103,10 @@ function FilterRow({ condition, fields, onUpdate, onRemove }: {
         ))}
       </select>
       {!NO_VALUE_OPS.has(condition.op) && (
-        <Input
-          className="h-8 flex-1 min-w-0"
-          placeholder="value"
+        <ValueInput
           value={String(condition.value ?? '')}
-          onChange={(e) => onUpdate({ ...condition, value: e.target.value })}
+          suggestions={suggestions}
+          onChange={(v) => onUpdate({ ...condition, value: v })}
         />
       )}
       <button
@@ -66,40 +121,121 @@ function FilterRow({ condition, fields, onUpdate, onRemove }: {
   )
 }
 
-export function FilterBuilder({ conditions, onChange, availableFields }: FilterBuilderProps) {
-  const fields = availableFields.length > 0 ? availableFields : ['type']
+function FilterGroupView({ group, fields, valueSuggestions, depth, onChange, onRemove }: {
+  group: FilterGroup
+  fields: string[]
+  valueSuggestions: (field: string) => string[]
+  depth: number
+  onChange: (g: FilterGroup) => void
+  onRemove?: () => void
+}) {
+  const mode = getGroupMode(group)
+  const children = getGroupChildren(group)
 
-  const handleUpdate = (index: number, updated: FilterCondition) => {
-    const next = [...conditions]
-    next[index] = updated
-    onChange(next)
+  const toggleMode = () => {
+    onChange(setGroupChildren(mode === 'all' ? 'any' : 'all', children))
   }
 
-  const handleRemove = (index: number) => {
-    onChange(conditions.filter((_, i) => i !== index))
+  const updateChild = (index: number, node: FilterNode) => {
+    const next = [...children]
+    next[index] = node
+    onChange(setGroupChildren(mode, next))
   }
 
-  const handleAdd = () => {
-    onChange([...conditions, { field: fields[0], op: 'equals', value: '' }])
+  const removeChild = (index: number) => {
+    const next = children.filter((_, i) => i !== index)
+    onChange(setGroupChildren(mode, next))
+  }
+
+  const addCondition = () => {
+    onChange(setGroupChildren(mode, [...children, { field: fields[0] ?? 'type', op: 'equals' as FilterOp, value: '' }]))
+  }
+
+  const addGroup = () => {
+    const nested: FilterGroup = { all: [{ field: fields[0] ?? 'type', op: 'equals' as FilterOp, value: '' }] }
+    onChange(setGroupChildren(mode, [...children, nested]))
   }
 
   return (
-    <div className="space-y-2">
-      {conditions.length > 1 && (
-        <span className="text-[11px] font-medium text-muted-foreground">Match all of:</span>
-      )}
-      {conditions.map((c, i) => (
-        <FilterRow
-          key={i}
-          condition={c}
-          fields={fields}
-          onUpdate={(updated) => handleUpdate(i, updated)}
-          onRemove={() => handleRemove(i)}
-        />
-      ))}
-      <Button type="button" variant="ghost" size="sm" className="h-7 text-xs" onClick={handleAdd}>
-        <Plus size={12} className="mr-1" /> Add filter
-      </Button>
+    <div className={depth > 0 ? 'ml-3 border-l-2 border-border pl-3 py-1' : ''}>
+      <div className="flex items-center gap-2 mb-2">
+        <button
+          type="button"
+          className="rounded-full border border-input bg-muted px-2.5 py-0.5 text-[11px] font-medium text-foreground cursor-pointer hover:bg-accent transition-colors"
+          onClick={toggleMode}
+          title={`Switch to ${mode === 'all' ? 'OR' : 'AND'}`}
+        >
+          {mode === 'all' ? 'AND' : 'OR'}
+        </button>
+        <span className="text-[11px] text-muted-foreground">
+          {mode === 'all' ? 'Match all conditions' : 'Match any condition'}
+        </span>
+        {onRemove && (
+          <button
+            type="button"
+            className="ml-auto rounded p-0.5 text-muted-foreground hover:text-foreground"
+            onClick={onRemove}
+            title="Remove group"
+          >
+            <X size={12} />
+          </button>
+        )}
+      </div>
+      <div className="space-y-2">
+        {children.map((child, i) =>
+          isFilterGroup(child) ? (
+            <FilterGroupView
+              key={i}
+              group={child}
+              fields={fields}
+              valueSuggestions={valueSuggestions}
+              depth={depth + 1}
+              onChange={(g) => updateChild(i, g)}
+              onRemove={() => removeChild(i)}
+            />
+          ) : (
+            <FilterRow
+              key={i}
+              condition={child}
+              fields={fields}
+              valueSuggestions={valueSuggestions}
+              onUpdate={(c) => updateChild(i, c)}
+              onRemove={() => removeChild(i)}
+            />
+          )
+        )}
+      </div>
+      <div className="flex gap-2 mt-2">
+        <Button type="button" variant="ghost" size="sm" className="h-7 text-xs" onClick={addCondition}>
+          <Plus size={12} className="mr-1" /> Add filter
+        </Button>
+        <Button type="button" variant="ghost" size="sm" className="h-7 text-xs" onClick={addGroup}>
+          <Plus size={12} className="mr-1" /> Add group
+        </Button>
+      </div>
     </div>
   )
 }
+
+export interface FilterBuilderProps {
+  group: FilterGroup
+  onChange: (group: FilterGroup) => void
+  availableFields: string[]
+  /** Returns known values for a given field (for autocomplete). */
+  valueSuggestions?: (field: string) => string[]
+}
+
+const defaultSuggestions = () => [] as string[]
+
+export function FilterBuilder({ group, onChange, availableFields, valueSuggestions }: FilterBuilderProps) {
+  const fields = availableFields.length > 0 ? availableFields : ['type']
+  return (
+    <FilterGroupView
+      group={group}
+      fields={fields}
+      valueSuggestions={valueSuggestions ?? defaultSuggestions}
+      depth={0}
+      onChange={onChange}
+    />
+  )
+}

src/components/SidebarParts.tsx

@@ -1,7 +1,7 @@
 import { type ComponentType, useState, useEffect, useRef } from 'react'
 import type { SidebarSelection } from '../types'
 import { cn } from '@/lib/utils'
-import { getTypeColor } from '../utils/typeColors'
+import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
 import { type IconProps } from '@phosphor-icons/react'
 
 export interface SectionGroup {
@@ -94,11 +94,13 @@ export function SectionContent({
 }: SectionContentProps) {
   const { label, type, Icon, customColor } = group
   const sectionColor = getTypeColor(type, customColor)
+  const sectionLightColor = getTypeLightColor(type, customColor)
 
   return (
     <SectionHeader
       label={label} type={type} Icon={Icon}
       sectionColor={sectionColor}
+      sectionLightColor={sectionLightColor}
       itemCount={itemCount}
       isActive={isSelectionActive(selection, { kind: 'sectionGroup', type })}
       onSelect={() => onSelect({ kind: 'sectionGroup', type })}
@@ -142,9 +144,9 @@ function InlineRenameInput({ initialValue, onSubmit, onCancel }: {
   )
 }
 
-function SectionHeader({ label, type, Icon, sectionColor, itemCount, isActive, onSelect, onContextMenu, dragHandleProps, isRenaming, renameInitialValue, onRenameSubmit, onRenameCancel }: {
+function SectionHeader({ label, type, Icon, sectionColor, sectionLightColor, itemCount, isActive, onSelect, onContextMenu, dragHandleProps, isRenaming, renameInitialValue, onRenameSubmit, onRenameCancel }: {
   label: string; type: string; Icon: ComponentType<IconProps>
-  sectionColor: string; itemCount: number; isActive: boolean
+  sectionColor: string; sectionLightColor: string; itemCount: number; isActive: boolean
   onSelect: () => void; onContextMenu: (e: React.MouseEvent) => void
   dragHandleProps?: Record<string, unknown>
   isRenaming?: boolean; renameInitialValue?: string
@@ -152,14 +154,14 @@ function SectionHeader({ label, type, Icon, sectionColor, itemCount, isActive, o
 }) {
   return (
     <div
-      className={cn("group/section flex cursor-pointer select-none items-center justify-between rounded transition-colors", isActive ? "bg-secondary" : "hover:bg-accent")}
-      style={{ padding: '6px 8px 6px 16px', borderRadius: 4, gap: 4 }}
+      className={cn("group/section flex cursor-pointer select-none items-center justify-between rounded transition-colors", !isActive && "hover:bg-accent")}
+      style={{ padding: '6px 8px 6px 16px', borderRadius: 4, gap: 4, ...(isActive ? { background: sectionLightColor } : {}) }}
       {...dragHandleProps}
       onClick={() => { if (!isRenaming) onSelect() }}
       onContextMenu={isRenaming ? undefined : onContextMenu}
     >
       <div className="flex min-w-0 flex-1 items-center" style={{ gap: 4 }}>
-        <Icon size={16} style={{ color: sectionColor, flexShrink: 0 }} />
+        <Icon size={16} weight={isActive ? 'fill' : 'regular'} style={{ color: sectionColor, flexShrink: 0 }} />
         {isRenaming && onRenameSubmit && onRenameCancel ? (
           <InlineRenameInput
             key={`rename-${type}`}
@@ -168,11 +170,14 @@ function SectionHeader({ label, type, Icon, sectionColor, itemCount, isActive, o
             onCancel={onRenameCancel}
           />
         ) : (
-          <span className="text-[13px] font-medium text-foreground" style={{ marginLeft: 4 }}>{label}</span>
+          <span className="text-[13px] font-medium" style={{ marginLeft: 4, color: isActive ? sectionColor : undefined }}>{label}</span>
         )}
       </div>
       {itemCount > 0 && (
-        <span className="flex items-center justify-center text-muted-foreground" style={{ height: 20, borderRadius: 9999, padding: '0 6px', fontSize: 10, background: 'var(--muted)' }}>
+        <span
+          className={cn("flex items-center justify-center", !isActive && "text-muted-foreground")}
+          style={{ height: 20, borderRadius: 9999, padding: '0 6px', fontSize: 10, ...(isActive ? { background: sectionColor, color: 'white' } : { background: 'var(--muted)' }) }}
+        >
           {itemCount}
         </span>
       )}

src/components/TitleField.test.tsx

@@ -117,18 +117,35 @@ describe('TitleField', () => {
     expect(input).toHaveValue('Untitled note')
   })
 
-  it('shows vault-relative path for notes in subdirectories', () => {
+  it('shows vault-relative path (without .md) only when title is focused', () => {
     render(<TitleField title="ADR" filename="0001-tauri-stack.md" notePath="/Users/luca/Laputa/docs/adr/0001-tauri-stack.md" vaultPath="/Users/luca/Laputa" onTitleChange={() => {}} />)
-    expect(screen.getByTestId('title-field-path')).toHaveTextContent('docs/adr/0001-tauri-stack.md')
+    // Path hidden by default
+    expect(screen.queryByTestId('title-field-path')).not.toBeInTheDocument()
+    // Focus title → path appears
+    fireEvent.focus(screen.getByTestId('title-field-input'))
+    expect(screen.getByTestId('title-field-path')).toHaveTextContent('docs/adr/0001-tauri-stack')
+    // No bare filename shown when path is visible
+    expect(screen.queryByTestId('title-field-filename')).not.toBeInTheDocument()
   })
 
-  it('hides path for notes at vault root', () => {
+  it('hides path on blur', () => {
+    render(<TitleField title="ADR" filename="0001-tauri-stack.md" notePath="/Users/luca/Laputa/docs/adr/0001-tauri-stack.md" vaultPath="/Users/luca/Laputa" onTitleChange={() => {}} />)
+    const input = screen.getByTestId('title-field-input')
+    fireEvent.focus(input)
+    expect(screen.getByTestId('title-field-path')).toBeInTheDocument()
+    fireEvent.blur(input)
+    expect(screen.queryByTestId('title-field-path')).not.toBeInTheDocument()
+  })
+
+  it('hides path for notes at vault root even when focused', () => {
     render(<TitleField title="Root Note" filename="root-note.md" notePath="/Users/luca/Laputa/root-note.md" vaultPath="/Users/luca/Laputa" onTitleChange={() => {}} />)
+    fireEvent.focus(screen.getByTestId('title-field-input'))
     expect(screen.queryByTestId('title-field-path')).not.toBeInTheDocument()
   })
 
   it('hides path when vaultPath is not provided', () => {
     render(<TitleField title="Note" filename="note.md" onTitleChange={() => {}} />)
+    fireEvent.focus(screen.getByTestId('title-field-input'))
     expect(screen.queryByTestId('title-field-path')).not.toBeInTheDocument()
   })
 })

src/components/TitleField.tsx

@@ -19,13 +19,13 @@ function useOptimisticTitle(title: string, onTitleChange: (t: string) => void) {
   // [optimisticTitle, forPropTitle]: shown after commit until title prop catches up
   const [optimistic, setOptimistic] = useState<[string, string] | null>(null)
   const isFocusedRef = useRef(false)
-  const prevTitleRef = useRef(title)
+  const [prevTitle, setPrevTitle] = useState(title)
 
   // Reset local edit when the title prop changes (e.g. note switch).
   // This prevents a stale handleFocus closure from locking in the old note's title
   // when focus-editor fires before React re-renders with the new tab.
-  if (prevTitleRef.current !== title) {
-    prevTitleRef.current = title
+  if (prevTitle !== title) {
+    setPrevTitle(title)
     if (localValue !== null) setLocalValue(null)
   }
 
@@ -63,6 +63,7 @@ function useOptimisticTitle(title: string, onTitleChange: (t: string) => void) {
  */
 export function TitleField({ title, filename, editable = true, notePath, vaultPath, onTitleChange }: TitleFieldProps) {
   const inputRef = useRef<HTMLInputElement>(null)
+  const [isFocused, setIsFocused] = useState(false)
   const { value, isEditing, handleFocus, commitTitle, revert, setEdit } =
     useOptimisticTitle(title, onTitleChange)
 
@@ -91,13 +92,17 @@ export function TitleField({ title, filename, editable = true, notePath, vaultPa
 
   const expectedSlug = slugify(value.trim() || title)
   const currentStem = filename.replace(/\.md$/, '')
-  const showFilename = isEditing || currentStem !== expectedSlug
 
   // Compute vault-relative path (only for notes in subdirectories)
   const relativePath = notePath && vaultPath
-    ? notePath.replace(vaultPath + '/', '')
+    ? notePath.replace(vaultPath + '/', '').replace(/\.md$/, '')
     : null
-  const showRelativePath = relativePath && relativePath.includes('/')
+  const isSubdirectory = relativePath != null && relativePath.includes('/')
+
+  // Show path only when title is focused and note is in a subdirectory
+  const showRelativePath = isFocused && isSubdirectory
+  // Show filename hint when slug differs, but suppress when path is already visible
+  const showFilename = !showRelativePath && (isEditing || currentStem !== expectedSlug)
 
   return (
     <div className="title-field" data-testid="title-field">
@@ -106,8 +111,8 @@ export function TitleField({ title, filename, editable = true, notePath, vaultPa
         className="title-field__input"
         value={value}
         onChange={e => setEdit(e.target.value)}
-        onFocus={handleFocus}
-        onBlur={commitTitle}
+        onFocus={() => { setIsFocused(true); handleFocus() }}
+        onBlur={() => { setIsFocused(false); commitTitle() }}
         onKeyDown={handleKeyDown}
         disabled={!editable}
         placeholder="Untitled"

src/hooks/commands/noteCommands.ts

@@ -19,6 +19,8 @@ interface NoteCommandsConfig {
   onSetNoteIcon?: () => void
   onRemoveNoteIcon?: () => void
   onOpenInNewWindow?: () => void
+  onToggleFavorite?: (path: string) => void
+  isFavorite?: boolean
 }
 
 export function buildNoteCommands(config: NoteCommandsConfig): CommandAction[] {
@@ -28,7 +30,7 @@ export function buildNoteCommands(config: NoteCommandsConfig): CommandAction[] {
     onTrashNote, onRestoreNote, onArchiveNote, onUnarchiveNote,
     onEmptyTrash, trashedCount,
     onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon,
-    onOpenInNewWindow,
+    onOpenInNewWindow, onToggleFavorite, isFavorite,
   } = config
 
   return [
@@ -47,6 +49,12 @@ export function buildNoteCommands(config: NoteCommandsConfig): CommandAction[] {
       keywords: ['archive'], enabled: hasActiveNote,
       execute: () => { if (activeTabPath) (isArchived ? onUnarchiveNote : onArchiveNote)(activeTabPath) },
     },
+    {
+      id: 'toggle-favorite', label: isFavorite ? 'Remove from Favorites' : 'Add to Favorites', group: 'Note', shortcut: '⌘D',
+      keywords: ['favorite', 'star', 'bookmark', 'pin'],
+      enabled: hasActiveNote && !!onToggleFavorite,
+      execute: () => { if (activeTabPath) onToggleFavorite?.(activeTabPath) },
+    },
     {
       id: 'set-note-icon', label: 'Set Note Icon', group: 'Note',
       keywords: ['icon', 'emoji', 'set', 'add', 'change', 'picker'],

src/hooks/useAppCommands.ts

@@ -65,6 +65,7 @@ interface AppCommandsConfig {
   noteListFilter?: NoteListFilter
   onSetNoteListFilter?: (filter: NoteListFilter) => void
   onOpenInNewWindow?: () => void
+  onToggleFavorite?: (path: string) => void
 }
 
 /** Sets up keyboard shortcuts, command registry, menu events, and keyboard navigation. */
@@ -112,6 +113,7 @@ export function useAppCommands(config: AppCommandsConfig): CommandAction[] {
     onToggleAIChat: config.onToggleAIChat,
     onToggleRawEditor: config.onToggleRawEditor,
     onToggleInspector: config.onToggleInspector,
+    onToggleFavorite: config.onToggleFavorite,
     onOpenInNewWindow: config.onOpenInNewWindow,
     activeTabPathRef: config.activeTabPathRef,
   })

src/hooks/useAppKeyboard.test.ts

@@ -79,6 +79,14 @@ describe('useAppKeyboard', () => {
     expect(actions.onCreateNote).toHaveBeenCalled()
   })
 
+  it('Cmd+D triggers toggle favorite on active note', () => {
+    const actions = makeActions()
+    actions.onToggleFavorite = vi.fn()
+    renderHook(() => useAppKeyboard(actions))
+    fireKey('d', { metaKey: true })
+    expect(actions.onToggleFavorite).toHaveBeenCalledWith('/vault/test.md')
+  })
+
   it('Cmd+J triggers open daily note', () => {
     const actions = makeActions()
     renderHook(() => useAppKeyboard(actions))

src/hooks/useAppKeyboard.ts

@@ -20,6 +20,7 @@ interface KeyboardActions {
   onToggleAIChat?: () => void
   onToggleRawEditor?: () => void
   onToggleInspector?: () => void
+  onToggleFavorite?: (path: string) => void
   onOpenInNewWindow?: () => void
   activeTabPathRef: React.MutableRefObject<string | null>
 }
@@ -65,7 +66,7 @@ function handleCmdKey(e: KeyboardEvent, keyMap: Record<string, ShortcutHandler>)
 
 export function useAppKeyboard({
   onQuickOpen, onCommandPalette, onSearch, onCreateNote, onOpenDailyNote, onSave, onOpenSettings, onTrashNote, onArchiveNote,
-  onSetViewMode, onZoomIn, onZoomOut, onZoomReset, onGoBack, onGoForward, onToggleAIChat, onToggleRawEditor, onToggleInspector, onOpenInNewWindow, activeTabPathRef,
+  onSetViewMode, onZoomIn, onZoomOut, onZoomReset, onGoBack, onGoForward, onToggleAIChat, onToggleRawEditor, onToggleInspector, onToggleFavorite, onOpenInNewWindow, activeTabPathRef,
 }: KeyboardActions) {
   useEffect(() => {
     const withActiveTab = (fn: (path: string) => void): ShortcutHandler => () => {
@@ -80,6 +81,7 @@ export function useAppKeyboard({
       j: onOpenDailyNote,
       s: onSave,
       ',': onOpenSettings,
+      d: withActiveTab((path) => onToggleFavorite?.(path)),
       e: withActiveTab(onArchiveNote),
       Backspace: withActiveTab(onTrashNote),
       Delete: withActiveTab(onTrashNote),

src/hooks/useCommandRegistry.ts

@@ -30,6 +30,7 @@ interface CommandRegistryConfig {
   onSetNoteIcon?: () => void
   onRemoveNoteIcon?: () => void
   onOpenInNewWindow?: () => void
+  onToggleFavorite?: (path: string) => void
   onQuickOpen: () => void
   onCreateNote: () => void
   onCreateNoteOfType: (type: string) => void
@@ -85,7 +86,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
     mcpStatus, onInstallMcp, onEmptyTrash, trashedCount,
     onReloadVault, onRepairVault,
     onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon,
-    onOpenInNewWindow,
+    onOpenInNewWindow, onToggleFavorite,
     selection, noteListFilter, onSetNoteListFilter,
   } = config
 
@@ -97,6 +98,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
   )
   const isArchived = activeEntry?.archived ?? false
   const isTrashed = activeEntry?.trashed ?? false
+  const isFavorite = activeEntry?.favorite ?? false
   const isSectionGroup = selection?.kind === 'sectionGroup'
 
   const vaultTypes = useMemo(() => extractVaultTypes(entries), [entries])
@@ -107,7 +109,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
       hasActiveNote, activeTabPath, isArchived, isTrashed,
       onCreateNote, onCreateType, onOpenDailyNote, onSave,
       onTrashNote, onRestoreNote, onArchiveNote, onUnarchiveNote,
-      onEmptyTrash, trashedCount, onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon, onOpenInNewWindow,
+      onEmptyTrash, trashedCount, onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon, onOpenInNewWindow, onToggleFavorite, isFavorite,
     }),
     ...buildGitCommands({ modifiedCount, onCommitPush, onPull, onResolveConflicts, onSelect }),
     ...buildViewCommands({
@@ -136,6 +138,6 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
     onReloadVault, onRepairVault,
     onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon,
     isSectionGroup, noteListFilter, onSetNoteListFilter,
-    onOpenInNewWindow,
+    onOpenInNewWindow, onToggleFavorite, isFavorite,
   ])
 }

src/hooks/useNoteActions.test.ts

@@ -468,6 +468,24 @@ describe('contentToEntryPatch', () => {
     const content = '---\ntype: Note\ncustom: value\n---\n'
     expect(contentToEntryPatch(content)).toEqual({ isA: 'Note' })
   })
+
+  it('preserves _favorite_index as a number (not null)', () => {
+    const content = '---\n_favorite: true\n_favorite_index: 2\n---\nBody'
+    const patch = contentToEntryPatch(content)
+    expect(patch.favorite).toBe(true)
+    expect(patch.favoriteIndex).toBe(2)
+  })
+
+  it('preserves _favorite_index: 0 as number 0', () => {
+    const content = '---\n_favorite: true\n_favorite_index: 0\n---\nBody'
+    const patch = contentToEntryPatch(content)
+    expect(patch.favoriteIndex).toBe(0)
+  })
+
+  it('preserves order as a number', () => {
+    const content = '---\ntype: Type\norder: 3\n---\n'
+    expect(contentToEntryPatch(content)).toEqual({ isA: 'Type', order: 3 })
+  })
 })
 
 describe('todayDateString', () => {

src/utils/frontmatter.test.ts

@@ -2,6 +2,33 @@ import { describe, it, expect } from 'vitest'
 import { parseFrontmatter, detectFrontmatterState } from './frontmatter'
 
 describe('parseFrontmatter', () => {
+  describe('numeric values', () => {
+    it('parses integer values as numbers', () => {
+      const fm = parseFrontmatter('---\n_favorite_index: 2\n---\nBody')
+      expect(fm['_favorite_index']).toBe(2)
+    })
+
+    it('parses zero as number 0', () => {
+      const fm = parseFrontmatter('---\n_favorite_index: 0\n---\nBody')
+      expect(fm['_favorite_index']).toBe(0)
+    })
+
+    it('parses float values as numbers', () => {
+      const fm = parseFrontmatter('---\norder: 3.5\n---\nBody')
+      expect(fm['order']).toBe(3.5)
+    })
+
+    it('parses negative numbers', () => {
+      const fm = parseFrontmatter('---\norder: -1\n---\nBody')
+      expect(fm['order']).toBe(-1)
+    })
+
+    it('does not parse quoted numbers as numbers', () => {
+      const fm = parseFrontmatter('---\nversion: "42"\n---\nBody')
+      expect(fm['version']).toBe('42')
+    })
+  })
+
   describe('boolean-like Yes/No values', () => {
     it('parses Archived: Yes as true', () => {
       const fm = parseFrontmatter('---\nArchived: Yes\n---\nBody')

src/utils/frontmatter.ts

@@ -26,6 +26,7 @@ function parseScalar(value: string): FrontmatterValue {
   const lower = clean.toLowerCase()
   if (lower === 'true' || lower === 'yes') return true
   if (lower === 'false' || lower === 'no') return false
+  if (clean === value && /^-?\d+(\.\d+)?$/.test(clean)) return Number(clean)
   return clean
 }