Client UI Polish Design

Goal

Fix the client-side account, favorites, review, sync, and shell UI issues reported during QA without changing backend contracts in this pass.

Scope

This pass is client-only. It can change Vue components, renderer state, Electron window chrome, tests, and docs. It must not invent successful backend behavior for review likes, replies, or deletes until backend endpoints exist.

User-Visible Requirements

Long account names must not overflow the sidebar account entry or account quick menu.
Account quick-menu actions must close the menu immediately after selection.
User management must open as a global modal/popup overlay instead of replacing only the right content frame.
User management should render a profile-cover hero when a user has a background/cover URL, with a safe fallback when absent.
Favorites should not show duplicate default-folder entries.
The favorite selector must expose a visible new-folder action.
Clicking a favorite item row should open app detail; the checkbox should remain only for bulk selection.
The detail favorite button should show favorited state as 已收藏, and opening it should allow switching folder or cancelling the favorite when client data can identify the existing item.
Review rating input should use clickable/star UI instead of a native select.
Reviews should expose architecture and OS/distro filters.
Review cards should expose user detail entry points from avatar/name and show client-side action affordances for like/reply/delete. Delete must be visibly limited to the author/admin; persistence is deferred until backend APIs exist.
The system title bar should be replaced by a frameless Electron window with an app-rendered title bar and window controls.
Selected category capsule color must remain #2B7FFF.
Manual sync must show visible feedback where the user clicked it.
Restore-from-account should resolve cloud items by same origin first, then fall back to same package across Spark/APM when the exact origin is not loaded.

Architecture

Keep existing component boundaries and make small additions:

App.vue remains the state coordinator for account modals, favorites, sync, and restore.
Add a small reusable UserManagementModal.vue wrapper around existing UserManagementView.vue instead of restructuring the view.
Add a WindowTitleBar.vue component and Electron IPC handlers for minimize/maximize/close, preserving the existing close-to-tray guard.
Keep review API calls in backendApi.ts; client-only review actions emit UI feedback until backend endpoints are added.
Add pure helper functions for sync restore candidate resolution so cross-source matching can be unit-tested without mounting the full app.

Data Flow

Account menu emits actions to App.vue; App.vue toggles modal state and loads downloaded history before showing user management.
Favorites are loaded from existing folder/item endpoints. App.vue computes current detail favorite metadata from loaded folders/items and passes status to detail components.
Review filters are local to ReviewsPanel.vue; they filter loaded review records by package architecture and distro string.
Sync feedback is stored in existing syncStatusMessage and passed to both UserManagementView and InstalledAppsModal.
Restore resolution uses resolveCloudInstallCandidate(item, apps) with exact origin/category preference and package-name fallback.

Deferred Backend Work

The following need backend API work later:

Persistent review likes.
Review replies and reply listing.
Server-authorized review deletion.
Fetching arbitrary forum user profile details and cover images. This client pass supports cover URLs when present in SparkUser; it does not scrape forum HTML.

Testing

Add/update unit tests for account modal behavior, quick-menu closing, user cover rendering, favorites selector normalization, star rating, review filters/actions, restore candidate resolution, and titlebar IPC/config.
Run targeted Vitest files and npm run build:vite before completion.

4.0 KiB Raw Blame History