Function StatusBar

packages/app-core/src/components/StatusBar.tsx:16–51

({ note }: { note: NoteContent })

 * at render time.
 */
export function StatusBar({ note }: { note: NoteContent }): JSX.Element {
  const notes = useStore((s) => s.notes)

  const { words, characters, minutes } = useMemo(() => {
    const body = note.body
    const w = countWords(body)
    const c = body.length
    const m = Math.max(1, Math.round(w / 200))
    return { words: w, characters: c, minutes: m }
  }, [note.body])

  // Backlinks depend only on the active note's *path* and the vault's
  // wikilink metadata — never on the note body. Keying the memo on
  // `note.path` (instead of the whole `note` object, which changes on every
  // keystroke) keeps this O(n) scan off the typing hot path while producing
  // an identical count.
  const backlinks = useMemo(() => {
    return backlinksForNote(notes as NoteMeta[], note).length
  }, [note.path, notes])

  return (
    <div
      className="flex h-8 shrink-0 items-center justify-end gap-5 px-6 text-xs text-ink-500"
      style={{ borderTop: '1px solid var(--glass-stroke)' }}
    >
      <Stat>
        {backlinks} {backlinks === 1 ? 'backlink' : 'backlinks'}
      </Stat>
      <Stat>
        {words.toLocaleString()} {words === 1 ? 'word' : 'words'}
      </Stat>
      <Stat>{characters.toLocaleString()} characters</Stat>
      <Stat>{minutes} min read</Stat>
    </div>
  )
}

function Stat({ children }: { children: React.ReactNode }): JSX.Element {
  return <span className="tabular-nums">{children}</span>