Skip to content

Refined graphite interface: calmer surfaces, one accent, aligned layout - #125

Open
TargiX wants to merge 5 commits into
TechJeeper:mainfrom
TargiX:refined-graphite-ui
Open

TargiX wants to merge 5 commits into
TechJeeper:mainfrom
TargiX:refined-graphite-ui

Conversation

@TargiX

@TargiX TargiX commented Nov 1, 2026

Copy link
Copy Markdown

Hi! I really like Printventory and use it daily, so I spent some time on a visual pass. The aim: a calmer, more serious interface where the models are the loudest thing on screen and color shows up only where it means something.

Everything is in one new stylesheet, refined.css, loaded after the existing ones. Behavior and IDs are unchanged, and all existing UI tests pass. Screenshots below come from the same library (3,348 models) in a 1600×1000 window, main on the left and this branch on the right.

Before / after

Before (main) After (this PR)
Detailed before Detailed after
Preview before Preview after
List before List after
Model details before Model details after
Search before Search after
Dialog before Dialog after

What changes

Look

  • New default Graphite theme: ash-gray surfaces with a faint aubergine cast, no decorative borders, and hairlines only where they separate things.
  • One accent, used only for selection, focus, active filter pills and the "new" dot. The theme presets in Settings (Cyan, Purple, …) still work, but now pick only that accent instead of repainting every button.
  • Thumbnails sit on the card surface instead of dark blue. Settings → Model Background Color gets a Match interface (Default) option, and the old colors are still there.

Sidebar

  • One-line brand row with the model count. The large logo block took about 300px.
  • The tools (De-Dup, Tags, Filament, Printers, Roulette) become tabs with line icons and labels instead of colored round images.
  • Search is the lead control: taller, with a magnifier, a ⌘/ (Ctrl+/) hint and a submit arrow that lights up once you type.
  • Scan Directory and View Entire Library become one compact row (Scan folder, Show all), so occasional actions don't compete with search.
  • 40px controls with square helper buttons, and the same inset on both edges.
  • Active filter pills carry the accent, so "am I searching for the right thing" is the first thing you see.

Library

  • Detailed cards stretch to fill the row like the Preview wall, instead of a fixed 300px grid centered with empty gutters.
  • All three views share one inset.
  • Photo thumbnails get a small margin and rounded corners.
  • The thumbnail "…" menu is a small round button in the top-right corner. Before, it was an invisible full-width strip across the lower thumbnail.
  • List view is one table: tinted sticky header, hairline rows edge to edge, vertically centered cells, sizes right-aligned, and group rows in the same type as model rows.

Dialogs

  • One flat style for all managers and settings: a single light primary button, neutral secondary buttons, destructive actions in red text.

Decisions worth a look

I'm happy to change or drop any of these:

  1. "Not printed" badge hidden on cards. It is the state of almost every model, so it was noise on every tile. Other states (Printed, Queued, Printing, Failed, Mixed) show a small colored dot.
  2. One-time settings migration. Saving Settings used to persist the old defaults (#070147 background, modern-cyan) even when nobody picked them. On first launch, those exact values move to the new defaults once, guarded by a refinedThemeMigrated setting. Any theme picked afterwards is kept.
  3. Detailed stretches to full width (renderer.js / grid-refresh.js). Row height stays 520px, so virtualization math is unchanged.
  4. Scan folder / Show all labels. Same buttons and IDs, shorter labels, smaller weight.

Under the hood

  • refined.css is an override layer, about 1,750 lines with plenty of !important. That keeps this PR safe to review and easy to revert. If you like the direction, it could later be folded into styles.css.
  • refined.css and logo-mark.png are added to build.files, the Dockerfile and the Docker distribution script.
  • Fixed a small existing bug: the grid kept the is-list-view class after leaving List view.
  • The Server/Docker touch layout (mobile-ui) keeps its own design. I checked it at phone width for regressions, and the desktop-only brand row and tool tabs are hidden there.
  • The CHANGELOG.md Unreleased section describes the changes.

Testing

  • Playwright on macOS: features, menu-buttons, search-sort-filter, verify, metadata-tags, bundle-tags: 80 passed.
  • tests/window-scale.test.js: passed.
  • Unit suites that load better-sqlite3 from plain Node (test:print-events, test:printers) fail locally with ERR_DLOPEN_FAILED, because postinstall rebuilds the module for Electron. They fail the same way on main.
  • Checked by hand: all managers and settings dialogs, the folder rail, the touch layout at 390px, and the settings migration (old defaults move once, a later choice sticks).

Possible follow-ups, if you're interested: a first-run empty state ("Add your first folder") in place of the always-on scan button, a "Rescan library" action, and showing "Show all" only while a filter or folder is active.

…out.

Adds refined.css (loaded last) with a Graphite default theme: ash surfaces
with a faint aubergine cast, no decorative borders, and one accent reserved
for selection, focus, active filter pills and the new-model dot. Legacy
--primary-accent fills are routed to neutral chrome; theme presets now only
pick that accent.

- Sidebar: one-line brand row, tool tabs with line icons, a prominent search
  field, 40px controls with square helpers, equal insets on both edges.
- Library: Detailed cards stretch to fill the row, one inset for all views,
  list view as a single aligned table, thumbnail menu as a corner button.
- Thumbnails default to the card surface (Match interface). A one-time
  migration moves the old saved defaults (#070147, modern-cyan) once.
- Clear the stale is-list-view class when leaving list view.
- Ship refined.css and logo-mark.png in electron-builder and Docker.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants