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:

Bryan Van Deusen

2026-02-19 16:43:41 -05:00

parent 32e4ee12f2

commit 0c4e7fe5cb

15 changed files with 892 additions and 320 deletions

									
										frontend/src/views/NoteViewerView.vue
									
		+2
		-2
	
												View File
												
				@@ -171,14 +171,14 @@ async function convertToTask() {

				<style scoped>

				.viewer-layout {

				  display: flex;

				  max-width: 1200px;

				  max-width: 1400px;

				  margin: 0 auto;

				  gap: 2rem;

				}

				.viewer {

				  flex: 1;

				  min-width: 0;

				  max-width: 960px;

				  max-width: 1100px;

				  margin: 2rem 0;

				  padding: 0 1rem;

				}