Function QuickCaptureApp

packages/app-core/src/components/QuickCaptureApp.tsx:235–727

()

}

export function QuickCaptureApp(): JSX.Element {
  const prefs = useMemo(() => loadPrefs(), [])
  // `docTitle` is the live title derived from the editor's first line —
  // pure display, the body is the single place to type. '' means the
  // buffer is empty / has no usable first line yet.
  const [docTitle, setDocTitle] = useState('')
  const [mode, setMode] = useState<EditingMode>(NEW_MODE)
  const [charCount, setCharCount] = useState(0)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [notes, setNotes] = useState<NoteMeta[]>([])
  const [overlay, setOverlay] = useState<'none' | 'search' | 'command'>('none')
  const editorRef = useRef<EditorView | null>(null)

  // Set a different title for the quick capture window.
  useEffect(() => {
    document.title = 'ZenNotes Quick Capture'
  }, [])

  // Apply theme + font CSS vars before paint.
  useEffect(() => {
    applyTheme(prefs)
    const mql = window.matchMedia('(prefers-color-scheme: dark)')
    if (prefs.themeMode === 'auto') {
      const onChange = (): void => applyTheme(prefs)
      mql.addEventListener('change', onChange)
      return () => mql.removeEventListener('change', onChange)
    }
    return undefined
  }, [prefs])

  // Initial notes fetch + live refresh from the vault watcher so the
  // picker stays current as files are created or renamed elsewhere.
  useEffect(() => {
    let alive = true
    const refresh = (): void => {
      void window.zen.listNotes().then((all) => {
        if (!alive) return
        setNotes(all.filter((n) => n.folder !== 'trash'))
      })
    }
    refresh()
    const off = window.zen.onVaultChange(() => refresh())
    return () => {
      alive = false
      off()
    }
  }, [])

  // When the OS window regains focus, drop the cursor back into the
  // editor. The renderer process stays alive between hide/show, so any
  // draft or open existing note is still here.
  useEffect(() => {
    const onFocus = (): void => {
      if (overlay !== 'none') return
      requestAnimationFrame(() => editorRef.current?.focus())
    }
    window.addEventListener('focus', onFocus)