refactor(ui): reduce visual noise and clarify action hierarchy in Sync Status panel

[ClaudiaFang]

Goal

Reduce visual noise and clarify action hierarchy in the Sync Status panel and Settings tab, without breaking compatibility with Obsidian's native theming (light/dark, custom accent colors, high-contrast themes). No behavior/logic change beyond UI structure — this is a style/UX refactor, not a new feature.

Design direction:

• Stay Obsidian-native; avoid a "SaaS dashboard" look.
• Firstsun branding stays lightweight (icon, onboarding, empty-state, README, What's New modal only).
• Consistent information hierarchy across desktop and mobile.

P0 — Primary layout restructuring

• Design tokens: introduce a shared token set (--gfs-space-1..5, --gfs-radius-control/panel/pill, --gfs-surface-subtle, --gfs-border-subtle, --gfs-status-*) scoped under .sync-status-view in styles.css, and replace ad-hoc 5px/10px/12px/20px radii/spacing with these tokens across the panel.
• Merge top toolbar: collapse the info row, search row, filter tabs, action bar, and tree-options row into a single search+refresh+overflow row plus one status/count row. Move Tree view / Show synced / Expand all / Collapse all into a ⋯ "View options" menu.
• Contextual selection toolbar: hide batch Push/Pull/Delete when nothing is selected. When files are selected, swap the toolbar for a ☑ N selected [Push] [Pull] [⋯] bar; Push/Pull enabled state depends on selected files' status; destructive actions (Delete, Revert) move into ⋯.
• Action button hierarchy: stop using solid green/blue/red for Push/Pull/Delete simultaneously. Primary = --interactive-accent, secondary = neutral background + border, destructive = transparent background with red border/text (solid red reserved for confirmation dialogs only).
• Simplify file status visuals: keep the status icon and text badge, but make the badge background neutral and drop the colored left-edge bar for normal statuses. Reserve strong color for Conflict/Error only.
• Simplify per-file actions: desktop shows one primary action by default with secondary actions revealed on hover/focus (Delete/Revert/Open remote move into ⋯); mobile shows one primary action plus an overflow menu, with all touch targets at least 44px tall.

P1 — Consistency and readability

• Apply the new design tokens to src/settings.ts's settings tab; group settings into four sections (Connection, Sync scope, Behavior, Advanced) with the connection status badge shown inline in the "Connection" section header instead of floating at the top of the page.
• Improve src/ui/DiffView.ts / src/ui/components/DiffPanel.ts: bump diff font to 0.82em–0.86em, add a +N −M change summary in the header, make the file path and action row sticky, add +/− markers alongside color for added/removed lines, mute line-number contrast without shrinking them too far, force unified diff on mobile, and add vertical padding per line on mobile.
• Improve empty/loading/error states in the Sync Status panel (e.g. "Everything is synced" with a Refresh action; "Repository is not connected" with an Open settings action; "Unable to refresh repository" with Retry/Open settings actions) instead of a single line of gray text.

P2 — Branding and cleanup

• Confirm Firstsun branding is limited to plugin icon, onboarding, empty-state illustration, README screenshots, and the What's New modal — audit styles.css for any place branding colors override Obsidian background/accent/text/surface variables and remove those overrides.
• Clean up responsive CSS in styles.css: remove unused .is-mobile .ssv-tabs rules, duplicate .ssv-tab overrides, conflicting container queries, and redundant near-duplicate breakpoints (400px/420px/450px) for the same component; consolidate onto a single container-query breakpoint (e.g. @container (max-width: 520px)) plus Obsidian's real .is-mobile class.
• Update README screenshots to reflect the refactored UI (sync-plan confirmation, tree view with folder selection, desktop Diff pane) once the above lands.

Acceptance criteria

Desktop

• Top toolbar area is at most two control rows.
• No batch action bar shown when nothing is selected.
• Each file row shows at most one primary action by default.
• Status is distinguishable without relying on color alone.
• No control is silently clipped in a narrow sidebar.

Mobile

• All primary touch targets are at least 44px.
• Filters use either a select or a single-row horizontal scroll, not both.
• Each file row shows one primary action plus an overflow menu.
• Diff view uses unified mode.
• Toolbar does not consume excessive vertical space.

Theme compatibility — verify manually in: Obsidian Default Light, Obsidian Default Dark, a high-accent-color theme, a high-contrast theme, a narrow sidebar, mobile portrait, mobile landscape.

Notes

This is a pure UI/UX refactor — no new sync behavior. All work lands on a single branch/PR (see repo convention of consolidating issue work rather than one PR per issue); commits should use refactor(ui): ... or style(ui): ..., not feat(...).

[ClaudiaFang]

Backlog priority review — 2026-08-04

Priority: P0

Reason: PR #92 already implements part of this active UX refactor, and the remaining work is primarily scope reconciliation and real Obsidian verification. Leaving the umbrella open while adding adjacent UI features will increase conflicts and make acceptance status unclear.

Scheduling note: Verify PR #92 in default light/dark, narrow sidebar, and mobile; update this checklist to distinguish completed, deferred, and still-required items before merging or opening follow-up work.