Function FloatingNoteApp

packages/app-core/src/components/FloatingNoteApp.tsx:194–494

({ notePath }: { notePath: string })

}

export function FloatingNoteApp({ notePath }: { notePath: string }): JSX.Element {
  const prefs = useMemo(() => loadFloatingPrefs(), [])
  const [content, setContent] = useState<NoteContent | null>(null)
  const [dirty, setDirty] = useState(false)
  const [mode, setMode] = useState<'edit' | 'preview'>('edit')
  const viewRef = useRef<EditorView | null>(null)
  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const dirtyBodyRef = useRef<string | null>(null)
  /** The body we most recently wrote. Used to suppress watcher echoes
   *  of our own saves — comparing to disk is more robust than a
   *  single-shot ignore flag, since a save can echo more than once
   *  and additional edits can land in between. */
  const lastWrittenBodyRef = useRef<string | null>(null)

  // Apply theme + font vars before paint.
  useEffect(() => {
    applyTheme(prefs)
    const html = document.documentElement
    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)
    }
    void html
    return undefined
  }, [prefs])

  // Initial load.
  useEffect(() => {
    let alive = true
    void window.zen.readNote(notePath).then((c) => {
      if (!alive) return
      dirtyBodyRef.current = c.body
      setContent(c)
    })
    return () => {
      alive = false
    }
  }, [notePath])

  // Sync to external changes (file watcher broadcasts to all windows).
  useEffect(() => {
    const off = window.zen.onVaultChange((ev: VaultChangeEvent) => {
      if (ev.path !== notePath) return
      if (ev.kind === 'unlink') {
        // Note deleted — close the window.
        window.zen.windowClose()
        return
      }
      // Only refresh when the disk content differs from what we last
      // wrote ourselves. Skipping the echo prevents the editor from
      // rolling back to an older body when the save echo arrives
      // after the user has typed more characters.
      void window.zen.readNote(notePath).then((c) => {
        if (lastWrittenBodyRef.current === c.body) return
        dirtyBodyRef.current = c.body
        setContent(c)