← Back to the review board · Superseded panel brief
# Jellyfin Enhanced admin configuration page redesign: designer brief
You are one of five designers each producing ONE design direction for the **admin
configuration page** of Jellyfin Enhanced (JE), a plugin for the Jellyfin media server. This
is the page a server admin reaches from Dashboard › Plugins › Jellyfin Enhanced (route
`#/configurationpage?name=Jellyfin Enhanced`). It is NOT the user-facing Enhanced panel.
The five designs are reviewed side by side at https://uitests.whatevenwasthatum.com by Jake
(the user) and n00bcodr (the plugin's maintainer, who asked for this), who thumbs-up /
thumbs-down each design and leave notes. Later rounds revise from that feedback. Make your
direction as strong, distinct and complete as you can. You are NOT bound to Jellyfin's look:
n00bcodr and Jake want fresh ideas. Your own palette, type, icon style, layout, motion and
interaction model are all on the table, as long as the result sits believably inside the
Jellyfin dashboard shell (dark by default; a light theme exists).
## What the page is today
- One huge HTML page (configPage.html, ~10,000 lines, 700 KB) rendered inside Jellyfin's
dashboard: Jellyfin's dashboard drawer on the left, the plugin page as content.
- A horizontal tab bar with 11 tabs: Overview, Display, Playback, Pages, Seerr, *arr,
Elsewhere, Extras, Keyboard, Admin, Docs. Each tab is a long vertical stack of
`<fieldset>`s with a legend, Jellyfin "emby" checkboxes, selects, text and number inputs,
info banners (50 of them), note banners, and buttons (Test connection, Check, Clear cache).
- Roughly 250 settings: 208 checkboxes, 16 text inputs, 13 number inputs, ~25 selects,
textareas (Seerr URLs one per line, URL mappings), 5 image file uploads (Custom Image
Assets: icon, favicon, dark/light banner, touch icon), reorderable lists (quality tag
categories with up/down), per-user tables (Seerr Users, Permission Audit).
- 41 controls are gated by other settings (`data-gated-by`): they dim or hide until their
parent is on.
- Page header (above the tabs): title "Jellyfin Enhanced", a **Help** button, a **Descriptions
ON/OFF** toggle that shows or hides every setting description at once, and a **Search
settings…** box. The tab bar is a row of pill buttons with icons that overflows sideways.
- Saving: a floating **Save Settings** button (bottom centre) writes the whole form; a toast
confirms. Tests, uploads and cache actions run immediately. Destructive actions (Overwrite
everyone's personal settings, Clear all caches) need confirmation. You may propose a
different save model (autosave, per-section save, unsaved-changes bar) if you argue for it
in the README. CORRECTION 2026-11-01 23:10: an earlier version of this brief wrongly said
there was no Save button.
- Overview also opens with a dismissible "What's new since you last checked" banner that
lists the sections changed in recent releases (Display › Spoiler Guard, Pages › Catch Up,
*arr › Shoko …) with a link to the release notes.
- Overview tab is a read-only dashboard: Service Status (TMDB / Seerr / Sonarr / Radarr
connection health), Optional Dependencies (companion plugins installed or missing),
Features (which features are on, off or misconfigured) and three Quick Actions.
- Docs tab embeds the documentation site in an iframe.
- Screenshots of the current page (open with your image-reading tool):
`/home/jake/je-uitests/brief/cfg-overview.png`, `cfg-display.png`, `cfg-seerr.png`
(1400 wide) and `cfg-mobile.png` (420 wide). Some may be missing if the capture failed.
- Source for reference (read-only, do not edit):
`/home/jake/Downloads/Jellyfin-Enhanced852/Jellyfin.Plugin.JellyfinEnhanced/Configuration/configPage.html`
and `configPage.css` (its `--je-*` tokens show today's surface/border/text system).
A machine-extracted inventory of every tab, fieldset and labelled control is at
`/home/jake/je-uitests/brief/config-inventory.md` (526 lines). READ IT: it is your content.
`/home/jake/Downloads/Jellyfin-Enhanced852/docs/advanced/config-flag-groups.json` maps
each boolean flag to its label, group, tab and default.
## The content you must cover (tabs › fieldsets)
- **Overview**: Service Status, Optional Dependencies, Features, Quick Actions
(Re-test all service connections · Overwrite everyone's personal settings · Clear all
client tag caches).
- **Display**: UI Preferences, Media Tags (quality/genre/language/rating/people tags,
positions, priority languages, cache TTL, server-side cache), Spoiler Guard (~30
settings incl. blur mode, intensity, per-category hides, next-episode and current-season
keeps), Icons & Theme, Random Button, Default Language, Awards, MDBList Ratings.
- **Playback**: Playback & Tab Switch, Auto-Skip, Subtitles, Shortcuts Panel & Toast Timing.
- **Pages**: Bookmarks, Hidden Content, Requests Page, Calendar Page, Seerr Recommendations
Page, Activity Feed (several have "Custom Tabs" integration notes and auto-create options).
- **Seerr**: Seerr Connection Setup (URLs, API key, Test, URL mappings, Validate), Search &
Requests, Discovery & UI Extras, Automatic Requests, Recently Added Sync to Seerr,
Watchlist, Users (per-user table), Permission Audit, Debug.
- ***arr**: Sonarr, Radarr, Bazarr, Shoko (each: URL, API key, Test, instance options),
*arr UI Links, Tags Sync.
- **Elsewhere**: Elsewhere (Streaming Providers), TMDB Reviews, Release Dates, User Reviews.
- **Extras**: UI Tweaks (Active Streams widget etc.), External Links, Custom Image Assets
(5 uploads with previews).
- **Keyboard**: Keyboard Config (Disable Keyboard Shortcuts, shortcut editing).
- **Admin**: Usage Statistics, Maintenance Mode, Tag Cache, Developer Settings.
- **Docs**: embedded documentation.
Use the real labels from the inventory. You may regroup, rename tabs, merge or split
sections, and move things between tabs if your direction argues for it; say so in the
README. Fill the long fieldsets (Spoiler Guard, Media Tags, Seerr) completely: the reviewers
judge density and scanability on real content. Where the inventory has no description for a
control, write a short plausible one.
## Problems the maintainer lives with (design against these)
- 11 top tabs no longer fit; the bar wraps on narrow screens and gives no sense of scale.
- Tabs are very long scrolls; there is no in-tab navigation and no "where am I".
- Finding a setting you half-remember means guessing the tab and scrolling.
- Dependencies between settings (gating) are invisible until you flip the parent.
- Connections (Seerr, Sonarr, Radarr, Bazarr, Shoko, TMDB, MDBList) each have their own
URL + key + Test pattern, with no shared status view beyond the Overview.
- Dangerous actions sit next to harmless ones.
- Server-wide defaults vs per-user overrides: the admin sets defaults here, users can
change some in their own panel, and "Overwrite everyone's personal settings" pushes
defaults to all users. Make that model legible.
- Banners (50) carry a lot of important context but also a lot of noise.
- No visible "changed from default" state; no import/export of the configuration.
## Hard requirements for your deliverable
1. Output ONE folder: `/home/jake/je-uitests/site/designs/c1/<your-slug>/` (slug in your
task). Entry file `index.html`. Self-contained: inline CSS/JS or files in the same folder
by relative path. External loads ONLY from Google Fonts (`fonts.googleapis.com`, incl.
Material Icons / Material Symbols). No frameworks, no CDN scripts, no build step, no
bitmap images (use CSS/SVG).
2. A high-fidelity, clickable HTML mockup: navigation switches sections, sub-navigation
works, toggles flip and gating responds, search filters if you have one, test buttons
show a fake result, destructive actions show their confirmation. No network calls.
3. Show the page in context: render Jellyfin's dashboard shell around it (a dark top bar
and a left dashboard drawer with a few items: Dashboard, General, Users, Libraries,
Plugins › Jellyfin Enhanced highlighted). Keep the shell subdued; the page is the subject.
You may collapse the shell drawer to make room; you may also argue for the plugin to
take the whole content area.
4. Responsive: works at 1366 wide (desktop) and at 390 wide (phone) without horizontal
scrolling. The review page shows your design in an iframe at both widths.
5. Dark first (the dashboard is dark by default). A light variant is optional.
Text contrast >= 4.5:1. Visible keyboard focus. Touch targets >= 40px on phone.
6. `README.md` in your folder: 4 to 8 sentences on the idea, what it fixes from the list
above, the trade-offs, and any regrouping or renaming you did.
7. `meta.json`: `{"title": "<short name, 2-4 words>", "tagline": "<one sentence>"}`.
8. Sane size (under ~500 KB total). No console errors. Close every tag; quote attributes.
9. Do not touch anything outside your folder. Do not commit, push or edit the JE repo.
## What good looks like
Commit to one clear idea and carry it through every tab. The five directions must look like
five different answers. Think about: information architecture for 250 settings; a
persistent sense of place; how connection health and feature state read at a glance; how
gating and admin-vs-user defaults are shown; how to make destructive actions safe without
making everything shouty; what a first-time admin sees versus a returning one; how the
Docs can help in place rather than in a separate tab; density on a 13-inch laptop.
Avoid generic AI-design tells: no gradient-wash heroes, no emoji as icons, no purple-blue
gradients, no identical rounded cards everywhere, no left-border accent cards. Use Material
Icons or inline SVG for icons.
## Working policy
Resolve routine choices yourself with the option you recommend; note assumptions in the
README rather than asking. Do not stop to ask questions. Execute your assigned work on the
selected account; do not hand the task to another agent or account. Do not spawn
sub-agents. You may check your file in headless Chromium with Playwright from
`/home/jake/je-lab/node_modules` (run the script from a copy inside `/home/jake/je-lab/` so
the import resolves); do not install anything. When finished, reply with: the folder
path, the files you wrote, a 3-line summary of the design, and anything you could not do.