Redesign the mod menu, settings and cosmetics screens #6

2026-09-27T16:27:09Z

selimaj-dev commented

2026-09-27 16:27:09 +00:00

Redesigns Saturn's four main screens, built one reviewed step at a time and tested on 1.21.11. Part of saturnclientmc/saturnclient#23; the glass panels with per-panel blur are still to come.

Screens

Mod menu: translucent outlined panel beside a navigation rail, with a live "X of N enabled" count, a search box, category filters built from the mods' tags, and a grid of mod cards (icon, name, description, settings button, on/off switch).
Mod settings (ModSettings): header with the mod's icon, version, tags and description, a Reset and an Enabled switch, the settings as rows, and a live preview card for HUD mods.
Client settings (ClientSettings, replacing ConfigEditor): General, UI Style and Animations sections. UI Style has four theme presets and a color grid; animation settings are grouped per menu.
Cosmetics (CosmeticsMenu, replacing the cloak and hat menus and stores): the player on the left, turned by dragging, and a grid of every cloak or hat. Clicking an owned one equips it; clicking one not owned claims it for free.

Every screen shrinks to fit smaller windows (PanelScreen).

Building blocks

RenderScope draws rounded borders and a background-plus-border rectangle.
Settings controls share one field look: switches, sliders for settings with a range, number boxes, dropdowns, keybind boxes, and colour fields.
A Popup layer draws dropdown lists and the colour picker above everything, opening within the visible part of their list. Curve dropdowns show an animated preview of the hovered curve.
Properties can carry a range, unit and one-line description; every setting now has a description.
Scroll keeps a fractional position (trackpads and the wheel scroll properly), has a draggable thumb, and lists keep clear of its bar.
An adjustable "Background blur" setting (0-10) for the game behind Saturn's screens.

Fixes along the way

Property.reset() was a no-op for every type.
HUD layout settings showed in random order (Map.of).
Clicks reached cards scrolled out of view behind headers.
ConfigEditor added a new HUD preview element every frame.

Needs the saturnclient PR

The version code changes are in a follow-up saturnclient PR, which points at this one's merge commit: the player preview's EntityDrawer now takes a yaw, and the background blur works on 1.21.6+.

🤖 Generated with Claude Code

Redesigns Saturn's four main screens, built one reviewed step at a time and tested on 1.21.11. Part of saturnclientmc/saturnclient#23; the glass panels with per-panel blur are still to come. ## Screens - **Mod menu**: translucent outlined panel beside a navigation rail, with a live "X of N enabled" count, a search box, category filters built from the mods' tags, and a grid of mod cards (icon, name, description, settings button, on/off switch). - **Mod settings** (`ModSettings`): header with the mod's icon, version, tags and description, a Reset and an Enabled switch, the settings as rows, and a live preview card for HUD mods. - **Client settings** (`ClientSettings`, replacing `ConfigEditor`): General, UI Style and Animations sections. UI Style has four theme presets and a color grid; animation settings are grouped per menu. - **Cosmetics** (`CosmeticsMenu`, replacing the cloak and hat menus and stores): the player on the left, turned by dragging, and a grid of every cloak or hat. Clicking an owned one equips it; clicking one not owned claims it for free. Every screen shrinks to fit smaller windows (`PanelScreen`). ## Building blocks - `RenderScope` draws rounded borders and a background-plus-border rectangle. - Settings controls share one field look: switches, sliders for settings with a range, number boxes, dropdowns, keybind boxes, and colour fields. - A `Popup` layer draws dropdown lists and the colour picker above everything, opening within the visible part of their list. Curve dropdowns show an animated preview of the hovered curve. - Properties can carry a range, unit and one-line description; every setting now has a description. - `Scroll` keeps a fractional position (trackpads and the wheel scroll properly), has a draggable thumb, and lists keep clear of its bar. - An adjustable "Background blur" setting (0-10) for the game behind Saturn's screens. ## Fixes along the way - `Property.reset()` was a no-op for every type. - HUD layout settings showed in random order (`Map.of`). - Clicks reached cards scrolled out of view behind headers. - `ConfigEditor` added a new HUD preview element every frame. ## Needs the saturnclient PR The version code changes are in a follow-up saturnclient PR, which points at this one's merge commit: the player preview's `EntityDrawer` now takes a yaw, and the background blur works on 1.21.6+. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

selimaj-dev added 13 commits 2026-09-27 16:27:10 +00:00

Add rounded borders to RenderScope 4ac7c60d07

drawRoundedBorder draws an outline inset into the given bounds so it lines
up with a rounded rectangle of the same size and radius, and a new
drawRoundedRectangle overload draws both with separate background and border
colors. Both shapes share one SVG-to-texture helper.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Redesign the mod menu dfebd2367d

The mod menu is now a translucent panel beside a navigation rail, with a
header showing how many mods are enabled, a search box, category filters
built from the mods' tags and a three-column grid of mod cards. Each card
shows the mod's icon, name and description with a settings button and an
on/off switch. The layout shrinks to fit smaller windows.

New reusable pieces: Panel, Label, ChipGroup, SearchInput,
Toggle.drawSwitch, Theme helpers for panel, border, muted text and body
font, and Fonts.ellipsize. The sidebar and card icons are Lucide SVGs, and
seven mod icons were redrawn in the same style.

Scroll can skip its background and be cleared, and no longer passes clicks
outside its bounds to children scrolled out of view. Input checks overflow
and places the cursor at the scale its text is drawn at. Screens that are
not redesigned yet move the wider sidebar so it keeps its gap.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Redesign mod settings df09271e81

A mod's settings button now opens ModSettings: a header with the mod's
icon, name, version, tags and description, a Reset button and an on/off
switch, then its properties as rows, with nested namespaces as titled
sections and a live preview card beside them for HUD mods.

PanelScreen holds the sidebar-and-panel frame that the mod menu, mod
settings and config editor share. PropertyList lays out any config as
rows. The inputs share one field look: Toggle is a switch, Select steps
with arrows, and the number, keybinding and color inputs are boxes. The
color picker opens to the left and closes on outside clicks.

Every property type now implements reset(), which was a no-op, and
ModLayout keeps its settings in order instead of Map.of's. ConfigEditor
moves onto the same frame and rows and drops its HUD preview, which added
a new element every frame.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Redesign client settings a413648be9

ClientSettings replaces ConfigEditor: a section list on the left (General,
UI Style, Animations) and the chosen section's settings on the right, each
with a Reset for that section. UI Style shows four theme presets, the
theme colors as a two-column grid, then the radii and font.

New pieces: SectionNav, ThemePresetCard, ColorGrid and Theme.PRESETS.
Theme keeps its config like AnimationConfig does, Divider can be vertical,
and PropertyList's section titles are public.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Redesign cosmetics 7264c7b38b

CosmeticsMenu replaces the cloak and hat menus and stores: the player on
the left, turned by dragging, and on the right Cloaks and Hats tabs over a
grid of every cosmetic. Clicking an owned one equips it, and clicking one
not owned yet claims it, which is free. The equipped one is outlined and
badged, and the grid asks to connect when there's no Saturn session.

SkinPreview is now a drag-to-rotate player view, and its EntityDrawer draws
the player filling a box at a given yaw, returning false when there's no
player. CosmeticPreview and TabMenu go with the old screens.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Edit ranged settings with sliders 06a90d8e51

IntProperty and FloatProperty can take an optional range, step and unit.
PropertyList shows those settings as a Slider: a track to click or drag,
snapping to the step, with the value and unit beside it. Zoom and freelook
levels and durations, fullbright brightness, the theme radii, animation
timings and HUD scale and radius get ranges; the rest stay number boxes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Describe every setting under its name 33c09b6922

Properties can carry a one-line description, set with
NamedProperty.description for mods, a ConfigManager.property overload for
the client's config, and a helper in ModLayout. PropertyList rows show it
under the setting's name in muted text. Every mod, HUD layout, general,
UI style and animation setting now has one.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Fix scrolling and keep lists clear of the scrollbar 351507d60d

Scroll kept its position as an int, so wheel and trackpad deltas were
truncated: small ones were lost in one direction and a wheel notch moved
one unit. It now keeps a fractional position, scrolls 24 units a notch,
sizes and places its thumb consistently, and the thumb can be dragged or
the track clicked. PanelScreen's scrollWidth and scrollContentWidth keep
every scrolling list clear of the bar.

Sliders read a float step from its text, so 0.1 no longer shows 17
decimals, and show at most three; number boxes show at most three too.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Add dropdowns and a popup color picker 6bfdfc40c9

Popup draws one element above the rest of the screen and gets mouse
events first; clicking or scrolling outside closes it. ElementContext now
carries each element's position on screen so an input inside a scroll can
open a popup beside itself.

Select is a dropdown: the current value opens an OptionList with the
current option ticked, scrolling for long lists and opening upward when
there's no room below. The color picker moved out of ColorInput into a
ColorPicker popup, so scroll areas no longer clip it and later rows no
longer draw over it, and all three of its parts can be dragged.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Open dropdowns within the visible part of their list 8b58fe919d

ElementContext carries the part of the screen where an element can be
seen, passed down in a Frame and narrowed by each Scroll to its own box.
A dropdown opens below only if its list fits in that part, otherwise above
if it fits there, or else on the side with more room, so one at the
bottom of a scrolled list no longer opens past the list's edge.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Group animation settings per menu 55b78989ce

The Animations section shows each menu's duration, stagger and curve
under the menu's name instead of one flat list of 18 rows.
AnimationConfig keeps its name and lists every menu's config; it's saved
under the same keys as before, so existing settings keep loading.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Preview easing curves beside curve dropdowns 85c7057ba1

CurveProperty holds the easing curves in the order Animation.getCurve
takes them, replacing three copies of the list in zoom, freelook and the
animation config; it's saved the same way. Its dropdown opens a
CurveOptions popup: a CurvePreview graph beside the list, with a dot
running along the hovered curve, or the current one.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Make the background blur adjustable c3667f8f66

A "Background blur" setting (0-10, default 5) sets how much the game
behind Saturn's screens is blurred. Screens now only say whether to blur,
and SaturnScreen.getBackgroundBlur gives the setting's strength, faded in
over the screen's first 700 ms. The title menu still doesn't blur.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

selimaj-dev merged commit caf472da96 into master

2026-09-27 16:27:35 +00:00

selimaj-dev deleted branch ui-redesign

2026-09-27 16:27:38 +00:00

selimaj-dev referenced this pull request from saturnclientmc/saturnclient

2026-09-27 16:28:21 +00:00

Bring in the UI redesign #35

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: saturnclientmc/common#6