UI polish#1
Merged
Merged
Conversation
Across-the-board polish pass to remove the "mushy / blurry" feel:
Typography
- Promote sub-11px text (badges, labels, kbd, palette-foot, version,
pill counts, citation card meta) to a 11px floor; sub-12px hinting
was rendering as a fuzzy stripe.
- Cap letter-spacing at 0.04em on small uppercase labels.
- New --font-serif token cascading through resident faces (Charter on
macOS, Cambria on Windows, Liberation Serif on Linux, Times last)
for editor body, ref-card titles, palette titles, cover preview, and
cover-dialog logo. Replaces unbundled Newsreader/Source Serif which
silently fell through to Times for most users.
Icons
- Global .lucide { stroke-width: 1.5 } so 11–14px icons stop reading as
heavy/double-stroke smudges in chrome that uses tertiary-grey tones.
- Replace ✎ unicode pencil glyph in EmptyState with Lucide PencilLine
(Unicode dingbat rendered as colored emoji on macOS / monochrome on
Windows — looked broken either way).
Color tokens
- Use --accent-dark for text on --accent-light backgrounds (activity
bar, status pill, update notice, citation chip, citation-card key,
outline hover) so dark-mode contrast stays AA.
- Lift dark-mode --scrollbar-thumb from #3D3833 to #5A544D so it stops
being identical to --border-hover; thumbs were invisible against
panel borders.
- Bump editor-toolbar-divider from --border to --border-hover so
groups actually delineate.
Rendering
- Reduce PDF zoom debounce 200→80ms and add will-change: transform on
the scaled wrapper so the bilinear-interpolation period is short and
GPU-accelerated.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Two changes that together restore the double-click-to-jump feature: 1. Pointer-drag bookkeeping was capturing the pointer (and toggling isDragging) on every pointerdown. On the second mousedown of a dblclick pair, this race could swallow the dblclick event in some webview configurations. Capture is now deferred until movement crosses a 4 px threshold (same pattern FileTreeItem already uses), so plain click/dblclick sequences never enter capture/drag state. 2. handleDoubleClick now logs which step it bailed at (no jump fn registered, no [data-page-number] ancestor, empty source map, no on-page entry) instead of silently returning. Useful for diagnosing when the source map hasn't populated yet because the post-compile query_source_map call is still in flight. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Collapse chrome to 3 surfaces with clear roles instead of 4 near-identical greys separated by invisible 1px lines. Sidebar - Activity bar shares the panel content surface (--bg-secondary) and uses a real --border separator instead of a near-invisible border-light. - Activity bar is now 44 px wide in both collapsed and expanded states, so toggling no longer snaps the column from 36 → 48 px. Resize handles (App.tsx) - New .pane-resize-handle class: 8 px hit-target, transparent body, 1 px center divider in --border that thickens to --accent on hover/active. Replaces the soft 6 px border-light stripes that read as bugs. PDF preview - Toolbar surface bg-elevated → bg-secondary, matching the editor toolbar and sidebar header. The three 44 px chrome rows now read as one continuous chrome layer instead of three different shades. Status bar - Border bumped border-light → border (one shade darker) and bg shifted to --bg-tertiary so the strip visually anchors the bottom of the chrome instead of fading into the panels above. Cover page block - max-width 640 → 100 % so the cover page fills the editor column (was floating un-centered against the body text below). Inputs - Standardise on 32 px height: ref-search 30 → 32, cover-form-input 34 → 32, cover-wordcount-fields 34 → 32, cover-auto-chip 30 → 32. Five distinct heights collapsed to one, plus 28 px for the in-toolbar .compact-control variant. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Button system
- .icon-btn now ships in two sizes (28 px default + 24 px .icon-btn-sm)
with a canonical .is-active variant. Disabled state is opacity 0.4 with
not-allowed cursor, matching .btn.
- Migrate every ad-hoc Tailwind icon button to the system:
* Sidebar header New/Close/Collapse (was `icon-btn w-6 h-6 hover:…`)
* Sidebar ActivityBarButton (was bespoke Tailwind w-[28px] h-[28px])
* PDF toolbar zoom in/out + collapse (was `w-6 h-6 flex items-center
justify-center rounded hover:bg-…`)
* PDF collapsed-pane and simple-toolbar collapse buttons
- Drop the ad-hoc `hover:bg-… hover:text-…` overrides; the .icon-btn
hover state is the single source of truth now.
Editor toolbar
- Drop the dedicated Pilcrow (paragraph) button. setHeading already
demotes an active heading back to paragraph on second click, so the
button was redundant and added a third unfamiliar glyph (most users
don't recognise the pilcrow mark).
- Move the citation chip/footnote display toggle (formerly an Eye /
EyeOff button) into the StyleChip dropdown as a "Display" radio
group above the existing Style picker. The two settings are
conceptually one menu — "how citations render" — and consolidating
them removes another button from the toolbar.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…, refs) Status bar - Drop the rotating-tips carousel. It competed with status, word count, update notice, and version on a 32 px bar for a tutorial benefit that wears off after the first session. Sidebar - Header drops the gradient Sparkles logo and the dedicated X (close-workspace) button. The workspace name itself is now a click target opening a small Workspace menu that houses Switch / Close. - Header height 44 → 36 px to match the editor and PDF toolbars. - Drop the bottom footer entirely. Switch-workspace lives in the new Workspace menu; the empty-state already has its own Open button. Editor toolbar - Toolbar height 44 → 36 px; toolbar buttons 28 → 26 px; style chip 26 → 24 px so it stays inside the slimmer row. PDF preview - Toolbar height h-11 → h-9. Both the main and simple-state toolbars now share bg-secondary + border-light to match the rest of the chrome. References panel (folds in C1: single citation-style picker) - Drop the dominant ref-style-card and its dropdown — that picker now lives only in the editor toolbar's StyleChip. The active style is shown read-only inline with the count above the cards. - Sidebar no longer threads styleDropdownOpen / setStyleDropdownOpen / styleDropdownRef / setCitationStyle through to the panel. - Remove the now-dead .ref-style-* CSS rules. Cover-page dialog - Drop the gradient L logo + COVER PAGE tag stripe in the header. The modal context already says what it is; the title alone is enough. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The app had five "nothing here yet" prompts (App empty, Sidebar no-workspace, PdfPreview empty, PdfPreview compiling, References need-document, References no-refs) each rolling its own dashed-border box at different sizes, fonts, paddings, and button treatments. Extract a shared <EmptyState> shell and route every site through it. - New components/EmptyState.tsx — 56 px tertiary-bg icon container, 13 px primary title, 12 px tertiary description, optional CTA slot. No dashed borders, no second-grey panels. - App.tsx no-document state uses EmptyState (Sparkles "Open example" CTA preserved). - Sidebar no-workspace state uses EmptyState; the previous loud btn-primary btn-lg drops to btn-soft to match the editor empty state's CTA weight. - PdfPreview compiling and waiting states both use EmptyState. The decorative dashed PDF stub box is gone. - ReferencesPanel needDocument and noRefs states both use EmptyState. Picker-and-empty-state dedup work (originally split between phase 4 and phase 5) is now complete. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Status bar - Restore the rotating-tips carousel dropped in fb7b9cd. The bar still reads cleanly with the tip beside the compile-status pill, and new users were losing the only in-app discovery surface for slash menu / outline / dark-mode / .bib import / Ctrl+B etc. - Update tip.citationStyle (en + zh) to point at the editor toolbar — the StyleChip moved out of the status bar in fb7b9cd. PDF → editor jump highlight - The flash overlay was landing on the wrong row. flashCurrentLine appends an absolutely-positioned .lextyp-line-highlight to the editor's scroll container with coordinates computed against that container's scroll origin (scrollTop + contentRect.top - containerRect.top + …), but the container had no `position` set, so the overlay resolved against a higher ancestor and ended up ~chrome-height off. Add `relative` to the scroll div so the math resolves correctly. - Drop the four diagnostic console.warn calls in handleDoubleClick from c1e6e03 — they served their purpose; early-return logic stays. Icon contrast - .icon-btn resting color: --text-tertiary → --text-secondary. Toolbar / sidebar / panel buttons jump from Stone-400 (~2.5:1 against panel surfaces) to Stone-600 (~7:1) without touching the hover state. - --text-tertiary itself: Stone-400 → Stone-500 in light, mirrored one-step lift (#6B6560 → #7A736D) in dark, so captions, hints, placeholders, and decoration-tier icons all step one shade more legible while keeping a real gap below secondary so the tier hierarchy doesn't collapse. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.