Skip to content

Clean up the plugin page and make previews legible (#162) - #165

Merged
jherforth merged 2 commits into
mainfrom
feature/plugin-page-cleanup
Sep 10, 2026
Merged

Clean up the plugin page and make previews legible (#162)#165
jherforth merged 2 commits into
mainfrom
feature/plugin-page-cleanup

Conversation

@jherforth

Copy link
Copy Markdown
Owner

Closes #162.

Removing the Uploaded Widgets list is safe

Verified rather than assumed: both sections map the same uploadedWidgets array (:2314 and :2418). Plugin Settings already lists every uploaded widget — including legacy ones with no manifest — and already carries the delete button, plus the description and live preview the old list never had. Nothing is lost.

With it gone the repository spans the width it needs, and is renamed GitHub Plugin Repository. Upload Custom Widget keeps its place in the flow, now directly above the settings it feeds.

The previews were there but not much use

Browse thumbnails are 96×60 with objectFit: cover, so a plugin screenshot was cropped to an unreadable sliver. Clicking one now opens it at full size.

Three decisions inside that:

  • The trigger is a button, not a bare <img>, so the enlarged view is reachable from a keyboard, with a :focus-visible ring and a labelled action.
  • Dialog gives Escape-to-close alongside the X — and I checked Escape closes only the preview, leaving the Admin Panel (itself a Dialog) open underneath.
  • The image is capped at natural width. width: 100% displayed a 624px screenshot at 852px — upscaled and soft, the opposite of why an enlarged view exists. Now 1:1.

Two things the issue didn't mention

  • Empty state. Plugin Settings only renders when something is installed, so on a fresh install the page would have stopped at the upload button with nothing explaining the gap. Added a line.
  • Orphaned strings. Removing the list orphaned widgets.uploaded and widgets.fileName. They're dropped from both locales — parity is enforced, so removing from one alone fails check:i18n. Four new keys cover the enlarged view and empty state, English and Spanish.

Verification

Driven in a browser against a running instance, with the browse list fed real preview PNGs from the plugins repo:

1. "Uploaded Widgets" section gone: true
   repo heading: GitHub Plugin Repository
   upload button present: true
2. repo list width: 1032px of 1280 viewport   (was ~half)
3. thumbnail is a labelled button: true
   dialog title: BucketList
   image loaded: true | natural: 624x460 | displayed: 624x460
4. closed via X: preview gone, admin panel still open
   closed via Escape: preview gone, admin panel still open

Client 176/176, translation parity passes, production build clean.

One thing I left alone

The browse list keeps its maxHeight: 400 internal scroll. At full width with 23 plugins that cap is starting to feel tight, but raising it wasn't asked for — easy follow-up if you want it.

🤖 Generated with Claude Code

The Uploaded Widgets list was a second view of the same uploadedWidgets array
the Plugin Settings section below already renders — and that one carries the
delete button, the description and the live preview, so nothing is lost by
removing it, including for legacy widgets with no manifest.

With it gone the repository spans the width it needs, and is renamed to GitHub
Plugin Repository since everything in it is a plugin. Upload Custom Widget
keeps its place in the flow, now directly above the settings it feeds.

Browse thumbnails are 96x60 with objectFit: cover, so a plugin screenshot is
cropped to an unreadable sliver — the previews were there but not much use.
Clicking one now opens it at full size. The trigger is a button rather than a
bare image so it is reachable from a keyboard, and Dialog gives Escape-to-close
alongside the X. The image is capped at its natural width: these screenshots are
around 620px, and stretching one to fill the dialog only makes it blurrier.

Removing the list orphaned widgets.uploaded and widgets.fileName, so they are
dropped from both locales — parity is enforced, so removing from one alone
would fail check:i18n. Four new keys cover the enlarged view and the empty
state, in English and Spanish.

Added an empty state: Plugin Settings only renders when something is installed,
so on a fresh install the page would otherwise stop at the upload button with
nothing explaining the gap.

Verified in a browser against a running instance: the old section is gone, the
repository heading and full width are right, the thumbnail is a labelled
button, the dialog shows the real screenshot at 624x460 rather than upscaled,
and both the X and Escape close the preview while leaving the Admin Panel open.
Client 176/176, translation parity passes, build clean.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The 400px cap was sized for the old half-width column: it cut off mid-row and
showed under five of the 23 plugins, which felt tight once the list spanned the
page.

Relative to the viewport rather than a taller fixed value. A fixed 680px looked
right on a large screen but on a 950px-high laptop it ran the list past the fold,
leaving a scrolling list inside a scrolling dialog. 50vh gives 475px there and
700px on a tall wall display, and 360px on phones where the panel is full screen.

Still capped rather than unbounded: the full list is 1994px, which would push
the upload button and every plugin setting off the page.

Verified at two viewport heights with all 23 plugins loaded: 950px -> 475px
list, 1400px -> 700px, both scrolling internally with every row present.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@jherforth

Copy link
Copy Markdown
Owner Author

Raised the browse list cap (9287d5b).

The 400px was sized for the old half-width column — it cut off mid-row and showed under five of the 23 plugins.

I first tried a taller fixed value (680px) and it was wrong: on a 950px-high laptop it ran the list past the fold, leaving a scrolling list inside a scrolling dialog. It's now relative to the viewport, so it adapts instead:

viewport height list height before
950px (laptop) 475px 400px
1400px (wall display) 700px 400px
phone 360px 400px

Still capped rather than unbounded — the full list is 1994px, which would push the upload button and every plugin setting off the page.

Verified at both heights with all 23 plugins loaded: every row present, scrolling internally, nothing clipped. Client 176/176, translation parity passes, build clean.

@jherforth jherforth self-assigned this Sep 10, 2026
@jherforth jherforth added the enhancement New feature or request label Sep 10, 2026
@jherforth jherforth added this to the 1.9 milestone Sep 10, 2026
@jherforth
jherforth merged commit a150f69 into main Sep 10, 2026
4 checks passed
@github-project-automation github-project-automation Bot moved this from Backlog to Done in HomeGlow Kanban Sep 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

feat: Update plugin install page

1 participant