João Salavisa
3.7 KiB
created, status, requirements, system_design, legacy_specs
| created | status | requirements | system_design | legacy_specs | ||
|---|---|---|---|---|---|---|
| 2026-09-24 | done |
|
|
Implementation Plan: Plugin settings layout
Overview
Flatten the host plugin settings page and compact its actions while preserving the existing plugin lifecycle and permission behavior. This is a presentation refactor under the existing control sizing contract. The user authorized implementation, screenshots, and PR delivery in one session.
Scope and technical approach
Use the unframed SettingsPageTemplate variant, a compact installed-list toolbar, an inline SettingsRow for automatic updates, and divided PluginRow entries. Keep the current hooks, translated copy, direct row navigation, errors, and confirmation surfaces. No backend, persistence, plugin SDK, or release changes.
ASCII UI preview
UI-01: Settings > Plugins > Installed, populated state. Current phone layout stacks three full-width buttons and nests the list and preference in cards.
Phone Desktop
[Installed] [Browse] [Installed] [Browse]
Installed plugins [Install plugin] Installed plugins [Install plugin] Sync Check for updates
Sync Check for updates Automatic updates description [switch]
Automatic updates [switch] Last-check status
Description ---------------------------------------------------------
Last-check status Plugin name / status / version / actions
-------------------------------- Description and categories
Plugin name / status / version Auto-update [switch]
Actions ---------------------------------------------------------
Description and categories Next plugin
Auto-update [switch]
--------------------------------
Next plugin
Structural requirements: retain labels and touch targets while removing nested frames. The existing settings page owns scrolling and safe areas. Use shared SettingsRow and control-sizing primitives; retain the existing phone uninstall drawer. Spacing in the preview is illustrative. Empty/loading/error and pending actions retain their current content and behavior. Long labels may wrap the toolbar without causing horizontal scrolling.
Tests
Existing page and PluginRow unit coverage protects actions and permissions. Mobile Playwright checks aligned secondary actions, compact Install placement, 44px controls, responsive boundaries, and reachable row actions. Desktop Playwright checks 28px toolbar controls and the installation lifecycle. These cover AC-UI-CONTROL-SIZING-001.1, .3, .4, .5, .6, .7, and .8.
Work orders
Verification results
Completed on 2026-09-24. The mobile regression first failed with secondary actions separated vertically by 52px. After implementation: 2 mobile and 17 desktop Playwright scenarios passed, as did 54 unit tests, typecheck, focused ESLint, localization, public-doc and spec validators, and diff checks. See the work-order results. Four fresh PR screenshots cover Installed and Browse on phone and desktop with synthetic records; the disposable capture test passed and was removed afterward. The public plugin guide uses the new desktop Installed screenshot and no longer repeats an illustration of the previous layout.
Risks
Row overlay links must not intercept inline actions. Removing padding must not clip long plugin IDs or touch targets. All plugin controls retain their existing permission checks.