Redesign writing assistant UI: right-side panel, diff view, proofread, floating inline assist

- sectionParser.ts: add parseFallbackSections() — splits heading-less notes
  by paragraph boundaries; single-line ≤120 char paragraphs become pseudo-headings
  so Q&A-style notes get individual selectable sections in the assist panel

- useAssist.ts: add DiffLine type + computeDiff() (LCS line diff), isProofreading
  ref, diff computed, proofread() method (full-document one-click), reset
  isProofreading in accept() and reject()

- NoteEditorView + TaskEditorView: complete layout redesign
  - Assist panel moves from bottom 33% to right-side 320px column (flex-row)
  -  Assist toggle button in toolbar, state persisted to localStorage
  - Floating  pill button (teleported to <body>) above text selections;
    click opens panel with selection pre-loaded and instruction textarea focused
  - Proofread button in panel header: sends entire document, labels streaming
    as "Proofreading document..." and review as "Document proofread"
  - Review state shows LCS line-level diff (red removed, green added);
    "Show full text" toggle switches to rendered proposal
  - Mobile (≤768px): panel drops to bottom 45% height

- theme.css: add global .inline-assist-btn styles for teleported floating button

- Site-wide max-width increase: list/chat/settings views 960px→1200px;
  viewer layout 1200px→1400px (content area 960px→1100px);
  editor pages already at 1400px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-19 16:43:41 -05:00
parent 32e4ee12f2
commit 0c4e7fe5cb
15 changed files with 892 additions and 320 deletions
+19
View File
@@ -128,3 +128,22 @@ button:focus-visible {
display: none !important;
}
}
/* Floating inline assist button (teleported to body, cannot be scoped) */
.inline-assist-btn {
position: fixed;
z-index: 150;
transform: translateX(-50%);
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 999px;
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
cursor: pointer;
box-shadow: 0 2px 8px var(--color-shadow);
white-space: nowrap;
}
.inline-assist-btn:hover {
filter: brightness(1.1);
}