fix: eliminate scroll stutter and fix breadcrumb shadow consistency

Replace React state (useState + re-render) with direct DOM manipulation
for the breadcrumb title visibility. IntersectionObserver now toggles a
data-title-hidden attribute on the bar element, and CSS handles shadow
+ title visibility. This avoids re-rendering the heavy BlockNote editor
on every scroll intersection change.

Fixes: shadow always appears when title is hidden (CSS-driven, no race),
scroll is smooth (zero React re-renders during scroll).

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

src/components/BreadcrumbBar.test.tsx

@@ -111,14 +111,9 @@ describe('BreadcrumbBar — archive/unarchive', () => {
   })
 })
 
-describe('BreadcrumbBar — title in breadcrumb on scroll', () => {
-  it('does not show title when titleHidden is false', () => {
-    render(<BreadcrumbBar entry={baseEntry} {...defaultProps} titleHidden={false} />)
-    expect(screen.queryByText('Test Note')).not.toBeInTheDocument()
-  })
-
-  it('shows type and title when titleHidden is true', () => {
-    render(<BreadcrumbBar entry={baseEntry} {...defaultProps} titleHidden={true} />)
+describe('BreadcrumbBar — title in breadcrumb (always rendered, CSS-toggled)', () => {
+  it('always renders title elements in the DOM', () => {
+    render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
     expect(screen.getByText('Note')).toBeInTheDocument()
     expect(screen.getByText('›')).toBeInTheDocument()
     expect(screen.getByText('Test Note')).toBeInTheDocument()
@@ -126,21 +121,29 @@ describe('BreadcrumbBar — title in breadcrumb on scroll', () => {
 
   it('shows emoji icon when entry has an emoji icon', () => {
     const entryWithEmoji = { ...baseEntry, icon: '🚀' }
-    render(<BreadcrumbBar entry={entryWithEmoji} {...defaultProps} titleHidden={true} />)
+    render(<BreadcrumbBar entry={entryWithEmoji} {...defaultProps} />)
     expect(screen.getByText('🚀')).toBeInTheDocument()
   })
 
   it('does not show icon when entry has a non-emoji icon', () => {
     const entryWithPhosphor = { ...baseEntry, icon: 'cooking-pot' }
-    render(<BreadcrumbBar entry={entryWithPhosphor} {...defaultProps} titleHidden={true} />)
+    render(<BreadcrumbBar entry={entryWithPhosphor} {...defaultProps} />)
     expect(screen.queryByText('cooking-pot')).not.toBeInTheDocument()
   })
 
   it('falls back to "Note" when isA is null', () => {
     const entryNoType = { ...baseEntry, isA: null }
-    render(<BreadcrumbBar entry={entryNoType} {...defaultProps} titleHidden={true} />)
+    render(<BreadcrumbBar entry={entryNoType} {...defaultProps} />)
     expect(screen.getByText('Note')).toBeInTheDocument()
   })
+
+  it('shadow is controlled by data-title-hidden attribute via CSS', () => {
+    const { container } = render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
+    const bar = container.querySelector('.breadcrumb-bar')!
+    expect(bar).not.toHaveAttribute('data-title-hidden')
+    bar.setAttribute('data-title-hidden', '')
+    expect(bar).toHaveAttribute('data-title-hidden')
+  })
 })
 
 describe('BreadcrumbBar — raw editor toggle', () => {

src/components/BreadcrumbBar.tsx

@@ -32,8 +32,8 @@ interface BreadcrumbBarProps {
   onRestore?: () => void
   onArchive?: () => void
   onUnarchive?: () => void
-  /** When true, the note title is scrolled out of view — show it inline. */
-  titleHidden?: boolean
+  /** Ref for direct DOM manipulation — avoids re-render on scroll. */
+  barRef?: React.Ref<HTMLDivElement>
 }
 
 const DISABLED_ICON_STYLE = { opacity: 0.4, cursor: 'not-allowed' } as const
@@ -178,22 +178,21 @@ function BreadcrumbTitle({ entry }: { entry: VaultEntry }) {
 }
 
 export const BreadcrumbBar = memo(function BreadcrumbBar({
-  entry, titleHidden, ...actionProps
+  entry, barRef, ...actionProps
 }: BreadcrumbBarProps) {
   return (
     <div
+      ref={barRef}
       data-tauri-drag-region
-      className="flex shrink-0 items-center"
+      className="breadcrumb-bar flex shrink-0 items-center"
       style={{
         height: 52,
         background: 'var(--background)',
         padding: '6px 16px',
-        boxShadow: titleHidden ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
-        transition: 'box-shadow 0.2s ease',
       }}
     >
-      <div className="flex-1 min-w-0">
-        {titleHidden && <BreadcrumbTitle entry={entry} />}
+      <div className="breadcrumb-bar__title flex-1 min-w-0">
+        <BreadcrumbTitle entry={entry} />
       </div>
       <BreadcrumbActions entry={entry} {...actionProps} />
     </div>

src/components/Editor.css

@@ -23,6 +23,24 @@
   opacity: 0.55;
 }
 
+/* Breadcrumb bar: title + shadow toggled via data attribute (no React re-render) */
+.breadcrumb-bar {
+  transition: box-shadow 0.2s ease;
+  box-shadow: none;
+}
+
+.breadcrumb-bar[data-title-hidden] {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.breadcrumb-bar__title {
+  display: none;
+}
+
+.breadcrumb-bar[data-title-hidden] .breadcrumb-bar__title {
+  display: flex;
+}
+
 /* Scroll area wrapping title + editor — single scroll context for alignment */
 .editor-scroll-area {
   flex: 1;

src/components/EditorContent.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import { useCallback, useRef, useState, useEffect } from 'react'
+import { useCallback, useRef, useEffect } from 'react'
 import type { VaultEntry, NoteStatus } from '../types'
 import type { useCreateBlockNote } from '@blocknote/react'
 import { DiffView } from './DiffView'
@@ -120,9 +120,9 @@ function bindPath(cb: ((path: string) => void) | undefined, path: string) {
   return cb ? () => cb(path) : undefined
 }
 
-function ActiveTabBreadcrumb({ activeTab, titleHidden, props }: {
+function ActiveTabBreadcrumb({ activeTab, barRef, props }: {
   activeTab: Tab
-  titleHidden: boolean
+  barRef: React.RefObject<HTMLDivElement | null>
   props: Omit<EditorContentProps, 'activeTab' | 'isLoadingNewTab' | 'entries' | 'editor' | 'onNavigateWikilink' | 'onEditorChange' | 'onRawContentChange' | 'onSave' | 'onDeleteNote'>
 }) {
   const wordCount = countWords(activeTab.content)
@@ -131,7 +131,7 @@ function ActiveTabBreadcrumb({ activeTab, titleHidden, props }: {
     <BreadcrumbBar
       entry={activeTab.entry}
       wordCount={wordCount}
-      titleHidden={titleHidden}
+      barRef={barRef}
       showDiffToggle={props.showDiffToggle}
       diffMode={props.diffMode}
       diffLoading={props.diffLoading}
@@ -171,18 +171,21 @@ export function EditorContent({
   const emojiIcon = entryIcon && isEmoji(entryIcon) ? entryIcon : null
 
   const titleSectionRef = useRef<HTMLDivElement | null>(null)
-  const [titleScrolledAway, setTitleScrolledAway] = useState(false)
-  const titleHidden = showEditor && titleScrolledAway
+  const breadcrumbBarRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     const el = titleSectionRef.current
-    if (!el) return
+    const bar = breadcrumbBarRef.current
+    if (!el || !bar) return
     const observer = new IntersectionObserver(
-      ([e]) => setTitleScrolledAway(!e.isIntersecting),
+      ([e]) => {
+        if (e.isIntersecting) bar.removeAttribute('data-title-hidden')
+        else bar.setAttribute('data-title-hidden', '')
+      },
       { threshold: 0 },
     )
     observer.observe(el)
-    return () => observer.disconnect()
+    return () => { observer.disconnect(); bar.removeAttribute('data-title-hidden') }
   }, [activeTab?.entry.path, showEditor])
 
   const handleSetIcon = useCallback((emoji: string) => {
@@ -198,7 +201,7 @@ export function EditorContent({
       {activeTab && (
         <ActiveTabBreadcrumb
           activeTab={activeTab}
-          titleHidden={titleHidden}
+          barRef={breadcrumbBarRef}
           props={{ diffMode, diffContent, onToggleDiff, rawMode, onToggleRaw, ...breadcrumbProps }}
         />
       )}

src/components/StatusBar.tsx

@@ -437,7 +437,7 @@ export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onS
 
   return (
     <footer style={{ height: 30, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'var(--sidebar)', borderTop: '1px solid var(--border)', padding: '0 8px', fontSize: 11, color: 'var(--muted-foreground)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0, overflow: 'hidden' }}>
         <VaultMenu vaults={vaults} vaultPath={vaultPath} onSwitchVault={onSwitchVault} onOpenLocalFolder={onOpenLocalFolder} onConnectGitHub={onConnectGitHub} hasGitHub={hasGitHub} onRemoveVault={onRemoveVault} />
         <span style={SEP_STYLE}>|</span>
         <span
@@ -449,15 +449,15 @@ export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onS
           onMouseEnter={onCheckForUpdates ? (e) => { e.currentTarget.style.background = 'var(--hover)' } : undefined}
           onMouseLeave={onCheckForUpdates ? (e) => { e.currentTarget.style.background = 'transparent' } : undefined}
         ><Package size={13} />{buildNumber ?? 'b?'}</span>
+        <ChangesBadge count={modifiedCount} onClick={onClickPending} onCommitPush={onCommitPush} />
         <span style={SEP_STYLE}>|</span>
         <SyncBadge status={syncStatus} lastSyncTime={lastSyncTime} remoteStatus={remoteStatus} onTriggerSync={onTriggerSync} onPullAndPush={onPullAndPush} onOpenConflictResolver={onOpenConflictResolver} />
         {lastCommitInfo && <CommitBadge info={lastCommitInfo} />}
         <ConflictBadge count={conflictCount} onClick={onOpenConflictResolver} />
-        <ChangesBadge count={modifiedCount} onClick={onClickPending} onCommitPush={onCommitPush} />
         <PulseBadge onClick={onClickPulse} disabled={!isGitVault} />
         {mcpStatus && <McpBadge status={mcpStatus} onInstall={onInstallMcp} />}
       </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
         <span style={ICON_STYLE}><FileText size={13} />{noteCount.toLocaleString()} notes</span>
         {zoomLevel !== 100 && (
           <span