refactor(ui): finish Source Control UX hierarchy and responsive cleanup on current architecture #86

Context

This issue originally described a large refactor of the older Sync Status panel. The repository has since moved substantially toward the Source Control architecture (src/logic/source-control/*, src/ui/source-control/*) with newer queue/change presentation work.

Do not implement this issue by recreating the historical toolbar/layout or by treating old SyncStatusView structure as the target UI.

Goal

Finish the remaining visual hierarchy, responsiveness, and accessibility work against current main and the current Source Control / Sync Queue mental model.

P0 — current Source Control hierarchy

• Audit the current Source Control view at narrow desktop sidebar, desktop wide pane, mobile portrait, and mobile landscape.
• Keep change state and planned sync action visually distinct; do not collapse them back into one overloaded status badge/action model.
• Keep the primary working area compact: search/refresh/view controls should not consume excessive vertical space.
• Batch/queue actions should appear contextually when there is actionable selection/queue state rather than as permanent visual noise.
• Each file row should expose a clear primary action/next step; secondary/destructive actions belong in contextual/overflow UI where appropriate.
• Conflict/error states may use stronger emphasis; normal M/A/D/R/change states should remain readable without turning every row into a colored alert.

P1 — diff/readability

• Preserve +N / -M diff stats already implemented in the current sync/source-control flow; do not duplicate the stat engine.
• Verify file path, stat, state, and action remain scannable in narrow sidebars.
• Use non-color cues for additions/deletions/conflict states.
• Keep mobile diff presentation usable without horizontal UI overflow.

P1 — design tokens / responsive cleanup

• Audit current CSS for repeated spacing/radius/control-size values and consolidate only where a shared token improves consistency.
• Prefer Obsidian theme variables for text, surfaces, borders, and accent colors; Firstsun branding should not override normal Obsidian chrome.
• Consolidate obsolete/duplicate breakpoints and CSS rules left from the older Sync Status implementation after verifying they are unused.
• Primary mobile touch targets should be approximately 44px where practical.

P1 — states

Provide explicit current-architecture states for:

• repository/provider not configured;
• loading/refreshing;
• everything synchronized/no changes;
• refresh/provider failure;
• empty queue vs. no repository changes.

The UI should tell the user what state they are in and the next useful action, not display generic gray placeholder text.

Settings boundary

Settings information architecture is related but should follow the current settings implementation/API strategy (see #100) rather than assuming the historical src/settings.ts monolith. Avoid coupling this UI cleanup to a second settings rewrite unless required.

Acceptance criteria

Desktop

• Current Source Control top controls remain compact and are not silently clipped in a narrow sidebar.
• Change state and sync action are distinguishable without relying on color alone.
• A row does not show multiple equal-weight destructive/primary buttons by default.

Mobile

• No horizontal control overflow at supported narrow widths.
• Primary actions are touch-friendly.
• Diff/queue state remains understandable without desktop hover behavior.

Theme compatibility

Verify manually with Obsidian Default Light/Dark plus at least one high-accent/high-contrast theme.

Non-goals

• Do not restore the old Sync Status panel architecture.
• Do not change sync semantics/provider behavior in this issue.
• Do not duplicate work already tracked by current source-control/action issues such as refactor(sync-queue): separate change state from sync action in UX #137.

Related development (managed by Project #6 audit)

• PR git-files-sync#129 (merged)
• Active branch: claude/mobile-source-control-density