← Back to the review board · Superseded panel brief

# Jellyfin Enhanced settings panel redesign: designer brief

You are one of five designers each producing ONE design direction for the user-facing
settings panel of Jellyfin Enhanced (JE), a plugin for the Jellyfin media server. The
five designs are reviewed side by side on a web page (https://uitests.whatevenwasthatum.com)
by Jake (the user) and n00bcodr (the plugin's maintainer), who thumbs-up / thumbs-down each
design and leaves notes. Later rounds revise the designs from that feedback. Your job in
this round: make your direction as strong, distinct and complete as you can.

## What the panel is today

- JE injects a settings panel into the Jellyfin web client (Jellyfin 12, "Modern Layout",
  dark theme by default). It opens from the user menu, the player OSD, or the `?` key.
- Today it is a centred modal, `min(1040px, 94vw)` x `min(720px, 90vh)`, dark grey
  (`panelBg` from Jellyfin's theme), header with the jellyfish logo + "Jellyfin Enhanced" +
  version, a 230px left nav with a search box and one button per section, one pane shown at a
  time on the right. Below 760px the nav becomes the first screen and the pane slides over it
  with a back button. Some panes have their own sub-tabs (Media Tags: Layout / Groups /
  Status badges / Rules & locks / Colours / Server) and a live poster preview column.
- Screenshots of the current panel (open them with your image-reading tool):
  - `/home/jake/je-uitests/brief/current-desktop.png` (1400x900, Media Tags pane open)
  - `/home/jake/je-uitests/brief/current-mobile-nav.png` and `current-mobile-pane.png`
    (420 wide) if present.
- Source for reference (read-only, do not edit): template
  `/home/jake/Downloads/Jellyfin-Enhanced852/Jellyfin.Plugin.JellyfinEnhanced/js/enhanced/settingspanel/ui-panel-template.js`,
  panel shell `ui-panel.js` in the same folder, Spoiler Guard pane
  `js/enhanced/spoilerguard/settings-tab.js`, English strings `js/locales/en.json`.
- Jellyfin's own look, for context only: page background `#101010`, surfaces `#181818` /
  `#202020`, accent blue `#00a4dc`, Noto Sans, Material Icons. **You are NOT bound to any of
  it.** Jake's instruction: no need to stick to Jellyfin defaults, make whatever you think is
  best. Your own palette, type, icon style, panel shape, motion and interaction model are all
  on the table, as long as the result still sits believably inside a dark Jellyfin page.

## The settings inventory (use these real labels; no lorem ipsum)

Sections, in nav order, with their controls. Toggle rows have a bold label and a one-line
description under it.

### Shortcuts
Global and Player keyboard shortcut lists: each row is an action name + the key badge (kbd).
Click a key to change it. Backspace resets, Delete disables. Some rows disabled.
### Playback Settings
- Auto-pause: Pause when switching tabs (toggle)
- Auto-resume: Resume when returning to tab (toggle)
- Auto Picture-in-Picture: Automatically enter PiP when switching tabs (toggle)
- Long Press for 2x Speed (beta): Press and hold on the video to play at 2x speed (toggle)
- Custom Pause Screen: Show a stylized screen when videos are paused (toggle) with
  "Delay before showing (seconds)" number input
### Auto-Skip Settings
- Info note: Depends on Intro-Skipper plugin being available
- Automatically Skip Intro (toggle), Automatically Skip Outro (toggle)
### Subtitle Settings
- Disable Custom Styles: Use Jellyfin's default subtitle styles (toggle)
- Sub-tabs: Style (preset swatches: colour/background combos), Size (preset boxes),
  Font (preset boxes showing the font), Position (slider with reset button, live preview text)
- Note: Requires Jellyfin subtitle style set to Custom
### Random Button Settings
- Enable Random Button: Show random button in header (toggle)
- Unwatched Only: Only select from unwatched items (toggle)
- Item Types: Movies / Shows (checkboxes)
### UI Settings
- Show Watch Progress (toggle, with display mode choice)
- Show File Sizes, Show Audio Languages (toggles)
- Show Quality Tags (toggle) + "Choose what to show": reorderable category list with
  move up / move down and per-category sub-toggles (4K, HDR, Dolby Vision, Atmos, codec...)
- Show Genre Tags, Show Language Tags, Show Rating Tags, Show People Tags (toggles)
- Hide Tags on Hover (toggle)
- Add "Remove from Continue Watching & Next Up" buttons (toggle)
### Media Tags (from the redesign in PR #992; see the desktop screenshot)
- Sub-tabs: Layout, Groups, Status badges, Rules & locks, Colours, Server (admin only).
- Layout: five layout tiles (Corners, Bands, Caption, Summary, Minimal) with tiny poster
  thumbnails; segmented controls for Label density (Full/Compact), Tag size (85/100/115/130%),
  Gap (Tight/Default/Roomy), Edge spacing (Default/Tight/Flush); "Episode thumbnails: use a
  different look" checkbox with its own layout/density/size.
- A live preview column: Sample Movie / Sample Series posters with the tags drawn on them,
  Resting / Hover toggle, episode thumbnail and episode list row previews.
### Hidden Content
- Enable Content Hiding (toggle), Show Hide Buttons, Show Confirmation Dialog
- Group "Hide Button Visibility": Show on Seerr Items, Show in Library Views, Show on Detail
  Pages, Show on Cast/Actors
- Group "Filters": Filter Library, Discovery, Search, Calendar, Upcoming, Recommendations,
  Requests, Next Up, Continue Watching (toggles)
- Group "Experimental": Hide Collections & Libraries
- Button: Manage Hidden Content (View and manage all hidden items)
### Spoiler Guard
- Heading "Show me this even with Spoiler Guard on": checkboxes for TV show descriptions,
  Episode descriptions, Episode titles, Chapter names, Cast list, Ratings, Air date,
  Taglines, Tags, Reviews, Advanced per-category reveals; each with a one-line description
- Don't ask me to confirm when turning Spoiler Guard off (toggle)
### Language Settings
- Display Language (select), Clear Translation Cache (button)
### About
- Version, Release Notes button, Contribute (GitHub) button, "Press ? or Esc to close"
### Panel chrome
- Header: logo, "Jellyfin Enhanced", version, size switch (Default / Large / Fill), close.
- Search box that filters settings across sections.
- Footer hint: Press ? or Esc to close.
- Settings save instantly (no Save button today). Admin-only items get an ADMIN badge.

## Hard requirements for your deliverable

1. Output ONE folder: `/home/jake/je-uitests/site/designs/r1/<your-slug>/` (the slug is
   given in your task). Entry file `index.html`. Keep everything self-contained: inline CSS
   and JS, or separate files in the same folder referenced by relative paths. External
   loads allowed ONLY from Google Fonts (`fonts.googleapis.com`, including Material Icons /
   Material Symbols). No frameworks, no CDN scripts, no build step, no images you cannot
   generate (use CSS/SVG for poster placeholders; a gradient box with a title is fine).
2. It is a high-fidelity, clickable HTML mockup, not a product: the nav must switch
   sections, sub-tabs must switch, toggles must flip, search can filter (nice to have),
   the size switch may work. No network calls. State lives in page JS only.
3. Content: every section above exists with its real labels and descriptions. Fill in the
   repetitive ones (Hidden Content filters, Spoiler Guard checkboxes) completely; the
   reviewers judge density and scanability on real content.
4. Show the panel in context: render a plausible dark Jellyfin page behind or around it
   (a header bar and a row of blurred/simple poster cards is enough) so the reviewers see
   how the panel sits in the client. Keep the context subdued; the panel is the subject.
5. Responsive: works at 1280 wide (desktop) and at 390 wide (phone) without horizontal
   scrolling. The review page shows your design in an iframe at both widths, so test both
   mentally and keep layout rules simple. Touch targets >= 40px on phone.
6. Dark theme first, because the host page is dark; the palette itself is yours. A light
   variant is optional. Text contrast >= 4.5:1 for body text. Visible keyboard focus.
7. Write `README.md` in your folder: 3 to 6 sentences on the idea, what it fixes about the
   current panel, and the trade-offs. The review page shows this text next to your design.
8. Write `meta.json` in your folder: `{"title": "<short name, 2-4 words>", "tagline":
   "<one sentence>"}`.
9. Keep the file sizes sane (under ~400 KB total). No console errors when opened in a
   browser. Close every tag; quote every attribute.
10. Do not touch anything outside your folder. Do not commit, push, or edit the JE repo.

## What good looks like

Make a real design decision and commit to it; the five directions must look like five
different answers, not five themes of one layout. Think about: how a user finds a setting
they half-remember (search, grouping, icons); how dense a toggle list can be before it
becomes a wall; how to show what a setting does (previews, inline examples); how the panel
behaves on a phone; what happens with 11 sections and growing; how admin-only items read;
where "danger" or experimental items live; how the Media Tags hub (sub-tabs plus live
preview) fits your structure, since it is the heaviest section.

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 design and implementation choices yourself with the option you recommend;
state notable assumptions in your 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. When finished, reply with: the folder path, the files
you wrote, a 3-line summary of the design, and anything you could not do.