João Salavisa
85 lines
3.7 KiB
Markdown
85 lines
3.7 KiB
Markdown
---
|
|
created: 2026-09-24
|
|
status: done
|
|
requirements:
|
|
- REQ-UI-CONTROL-SIZING-001
|
|
system_design:
|
|
- ../../specs/ui/system-design/control-sizing.md
|
|
legacy_specs: []
|
|
---
|
|
|
|
# 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](../../specs/ui/requirements/control-sizing.md).
|
|
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.
|
|
|
|
```text
|
|
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
|
|
|
|
- [x] [Task 01: Flatten plugin settings](task-01-flatten-settings.md)
|
|
|
|
## 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](task-01-flatten-settings.md#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.
|