refactor(settings): overhaul settings tab UI/UX and information architecture

[ClaudiaFang]

Goal

Restructure the settings tab's information architecture and visual hierarchy so users complete setup in a clear sequence: choose storage provider → fill connection info → test connection → configure upload behavior → configure image processing → configure watermark → confirm via preview.

Priorities

• Lower cognitive load for first-time setup
• Separate required settings from advanced settings
• Strengthen connection/field validation
• Make the watermark preview the primary interaction surface
• Improve mobile / narrow-viewport layout
• Keep Obsidian's native visual language (no custom branding/SaaS look)

Scope (implementation phases)

Phase 1 — low-risk UI

• Reorder sections; move Debug into Advanced
• Consistent unit/casing (WebP, MB, URL, PDF)
• Responsive CSS, focus/hover states, fix .r2-chevron DOM
• Persistent connection test feedback (not a 3s-then-gone button label)

Phase 2 — interaction improvements

• Storage provider presets (Cloudflare R2 / AWS S3 / MinIO / Backblaze B2 / Custom S3-compatible) with sane defaults that never overwrite existing credentials
• Inline field validation (URL format, required fields, protocol-less URLs) with per-field error messages, normalized only on blur/save
• "Setup status" card at the top (credentials present, bucket connectivity verified, public URL configured, watermark valid → Ready / Needs attention / Not configured, icon + text, not color-only)
• Upload behavior regrouped into Upload triggers / Supported file types (checkbox group) / Upload destination (radio: bucket vs local vault folder w/ folder suggest)
• Image processing shown in pipeline order (resize → compress → convert → watermark → upload), WebP quality slider with semantic label (Smaller file / Balanced / Higher quality)
• Watermark Text/Logo as tabs instead of stacked sections, each tab showing On/Off status
• Visual 3×3 position picker replacing the position dropdown, with offset X/Y tucked into a collapsed "Fine tune position"
• Live preview toolbar (sample image / background / resolution), clear empty/error states (no watermark enabled, logo file not found)
• Watermark presets (Minimal corner, Blog signature, Center protected, Logo only, Custom) with confirmation before overwriting current settings

Phase 3 — architecture

• Split src/settings.ts into src/settings/ (settings-tab.ts, components/, sections/, validation.ts)
• Debounced save/preview: toggles/dropdowns/sliders save immediately; text inputs debounce 300-500ms; credentials save+rebuild S3 client on blur; canvas preview render debounced
• Track "needs retest" state when credentials change after a successful connection test

Design tokens / responsive / accessibility

• styles.css gets --r2-space-*, --r2-radius-*, --r2-control-height, --r2-content-width tokens; settings tab capped at --r2-content-width
• @media (max-width: 700px): watermark layout collapses to single column (preview above controls), full-width controls/sliders, ≥40px touch targets, ≥36×36px password-eye button, no horizontal scroll on preview canvas or at 320px viewport
• aria-label on icon-only buttons, aria-busy while loading, role="alert" on error messages, aria-live="polite" on connection status, proper tab/radio semantics for watermark tabs and position picker, full keyboard support, :focus-visible styling, success/failure never conveyed by color alone

Acceptance criteria

• New user can complete R2 setup in under 3 minutes without opening Advanced
• Connection test success/failure has persistent visible state; editing credentials marks it "needs retest"
• Text/Logo watermark quick to switch between; preview updates live as settings change
• Logo path errors show a clear message with a "choose another file" action
• No horizontal scroll at 320px width; all icon-only controls have accessible labels; primary setup flow is fully keyboard-operable
• Light/Dark theme both use Obsidian CSS variables only — no custom brand palette
• npm run build, npm run lint, npm run test all pass

See full detailed spec (all 20 sections) discussed with the maintainer; this issue tracks the umbrella effort landing in a single PR.

[ClaudiaFang]

Backlog priority review — 2026-08-04

Priority: P0

Reason: The implementation already exists in PR #20, automated checks pass, and only real-vault/manual UX verification remains. Leaving it open while starting more settings-related work increases conflict and review debt.

Scheduling note: Perform the Obsidian smoke test, fix only verified defects, and merge or explicitly close PR #20 before beginning #23 or another settings feature.