Skip to content

Rework the Library popover: usable default size, search auto-expand, drag-resizable height - #247

Open
OmarB97 wants to merge 11 commits into
lightningpixel:mainfrom
OmarB97:feat/asset-library-ux
Open

Rework the Library popover: usable default size, search auto-expand, drag-resizable height#247
OmarB97 wants to merge 11 commits into
lightningpixel:mainfrom
OmarB97:feat/asset-library-ux

Conversation

@OmarB97

@OmarB97 OmarB97 commented Jul 28, 2026

Copy link
Copy Markdown

Builds on feat/chat-context-lineage (PR #246, still open), which itself builds on feat/desktop-ergonomics (PR #245) -- same head-branch-per-PR-against-main pattern as #242/#243/#244/#246. Scoped entirely to the Library popover in the Generate area; doesn't touch anything #246 changed.

Problem

The Library popover from #243/#245 works, but the operator flagged it as unusable in real sessions:

  • The row list was capped at max-h-64 (256px) -- with the 80px thumbnail tiles from Add Library thumbnail previews and a resizable panel #243, that's only 2-3 visible rows, in a popup that itself doesn't grow past its content.
  • Only the panel's width was resizable; there was no way to make it taller.
  • Typing a search query filters correctly, but the collapsed WORKFLOWS/EXPORTS and per-capability groups stay collapsed -- a match hiding inside a collapsed group requires clicking "Show" on every ancestor group by hand before it's visible.
  • The search <input type="search"> renders as a tall box with the placeholder vertically centered in the middle of it, instead of a normal single-line field -- a Chromium input[type=search] quirk this codebase never worked around (every other input in this file is type="number"/type="text"-shaped and unaffected).

Changes

  • Search auto-expands matches. isAssetLibrarySectionExpanded(collapsedSectionKeys, sectionKey, hasActiveSearch) in assetLibraryUi.ts renders a section expanded when either the user left it expanded or a search is active. collapsedSectionKeys itself is never touched by searching, so clearing the query falls straight back to whatever was collapsed before -- no extra state to keep in sync. The per-section Show/Hide toggle is disabled while a search is active (every visible group already only contains matches, so toggling it would be a dead click that silently changes post-clear state).
  • The listing area now flexes instead of clipping. The row list is flex-1 min-h-0 overflow-y-auto overflow-x-hidden inside a popup with an explicit height (from state), rather than a fixed max-h-64 inside a content-sized popup. The three loading/empty/no-match placeholder states get the same flex-1 treatment so the popup doesn't collapse to a sliver when there's nothing to show.
  • Height is now drag-resizable and persisted, mirroring the existing width handle exactly: a second edge handle (cursor-row-resize, bottom edge) plus clampAssetLibraryPanelHeight/getStoredAssetLibraryPanelHeight/storeAssetLibraryPanelHeight in assetLibraryUi.ts, same shape as the width triple, under its own modly-library-panel-height localStorage key. Min/max/default: 280/1000/860.
  • Thumbnail tile shrunk 80px -> 40px, row padding py-2 -> py-1.5. With 80px tiles, even an 860px-tall popup (near the practical ceiling for a 1080p window before it risks running off-screen) only fits ~4 rows -- nowhere near "a dozen." Shrinking the tile is the only way to reconcile "keep thumbnail tiles" with "usable default size"; everything else about the tile (rounding, border, object-contain) is unchanged. At the new size the default popup shows 8-9 full rows before scrolling.
  • Search input fix: added appearance-none to the type="search" field, matching the plain box model every other input in this file already gets natively.
  • Incidental fix: the row's display-name span had no truncate/shrink-0 pairing with its capability badge, so a long filename could overflow the row width and force the scroll container into overflow-x: auto (a real single-row case reproduced a visible horizontal scrollbar during verification, sitting right below the intended vertical-only scrollbar). Added truncate to the name and shrink-0 to the badge, plus explicit overflow-x-hidden on the list container as a backstop.

Files changed

  • src/areas/generate/assetLibraryUi.ts -- isAssetLibrarySectionExpanded; height clamp/get/store triple + constants.
  • src/areas/generate/GeneratePage.tsx -- popup height state/effect/drag handler; search-aware expand + disabled toggle wiring; flex-based list region; smaller thumbnail/tighter row padding; appearance-none on the search input; truncate/shrink-0 on the row text row.
  • src/areas/generate/assetLibraryUi.test.ts -- tests for the new height helpers and isAssetLibrarySectionExpanded (searching forces expansion; clearing falls back to the untouched collapsed-key list).

Verification

Built, packaged (npm run package, AppImage target), and installed the same way the currently-running build was installed (asar extracted into resources/app, original parked as app.asar.orig), replacing the running app on the operator's desktop.

  • Typed "villain" (an asset that exists under both Workflows and Exports) into the search field with both groups collapsed beforehand -- WORKFLOWS > Rigged mesh and EXPORTS > Mesh expanded immediately, no clicks, and the search box rendered as a normal single-line field instead of the old tall box. Cleared the field -- both groups fell back to collapsed.
  • With a cleared localStorage (first-run state), opened the popup and expanded Workflows > Mesh: all 9 entries in that group render fully visible with no scrolling, plus the next group's header peeking in -- up from 2-3 clipped rows before this change.
  • Dragged the new bottom-edge handle down; the popup grew past its default height and revealed the next two group headers that had been below the fold.
  • Killed and relaunched the app: the popup reopened at the same dragged (non-default) height, not the 860px default.
  • Selected an entry post-search and confirmed "Open selected asset" still enables and the status line still updates, to make sure the open flow survived the surrounding JSX changes.
  • npm run lint and npm test (23 Python + 40 Node, including the 3 new assetLibraryUi tests) both pass.

Test plan

  • npm run lint
  • npm test
  • npm run build
  • npm run package (AppImage) + real install + manual verification on the desktop app

OmarB97 and others added 11 commits July 27, 2026 15:52
Rigged models (from the rigging extensions, or any GLB with clips) render
frozen in bind pose today: the viewer loads the glTF but never creates an
AnimationMixer, so the clips it just parsed never run. That reads as a
failed rig rather than a missing feature.

Create a mixer for models that carry clips, tick it from useFrame, and
dispose it with the model. When a file carries more than one clip, offer a
small picker so each motion can be reviewed without leaving the app.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Asset rows now render their pre-rendered <name>.thumb.png beside the
filename instead of showing bare text, falling back to the existing
text-only row when no thumbnail exists. The Library panel can also be
resized by dragging its edge, with the chosen width persisted across
restarts.
npm ci fails on main because the committed lockfile is stale against
package.json; npm install (what upstream CI itself falls back to) brings
it back in sync. Committing the result so ci is usable again on this
branch.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Ctrl/Cmd with +, -, or 0 now scales the whole window like a browser,
clamped to [-2, 4] and persisted to <userData>/ui-zoom.json so it survives
restarts. This extends the existing before-input-event handler (where the
macOS quit shortcut already lives) and calls webContents.setZoomLevel
directly, deliberately not CSS zoom: a CSS transform scales the rendered
pixels without telling the 3D viewport, so pointer math there (raycasting,
gizmo dragging) goes wrong as soon as the page is scaled.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The panel's resize handle was a 1px strip with no resting affordance —
easy to miss entirely. Widen it to 2px with a visible resting tint plus a
stronger hover/active highlight, mark it up as a proper separator
(role, aria-orientation, title) matching the Library panel's handle, raise
the width cap from 520 to 900 so wide parameter forms have room, and
persist the chosen width to localStorage (modly-panel-width) the same way
the Library panel already remembers its own width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Parameter labels used a truncating 5rem column that clipped anything
  longer than a couple of words; widen it to 8rem and let it wrap.
- The prompt textarea was a fixed 3-row, non-resizable box; make it 14
  rows by default and user-resizable (resize-y, 14rem min-height).
- Say plainly which Generate inputs are required vs optional: "Your
  sketch or photo -- required" and "Extra details -- optional".
- Add a text param type (a plain input, unlike the existing string type
  folder picker) so free-text fields like the exporter new name, project,
  and tags params render as usable text boxes instead of falling through
  to a numeric input.
- Render clickable tag-suggestion pills beneath any tags param: slugified
  words from that node typed name/project fields, plus a small fixed
  game-asset vocabulary, deduped and capped at 10. Clicking a pill toggles
  it in the comma-separated value; no network calls.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The clip picker was a raw select mounted via drei Html at the model
origin, recreating the whole AnimationMixer every time the clip changed
(a hard cut, not a blend) and easy to lose behind the scene. Replace it
with a proper bottom-left overlay component (MotionBar), matching the
existing ViewerToolbar/stats-overlay idiom:

- The mixer and active AnimationAction now live for as long as the model
  does; switching clips fades the old action out and the new one in over
  0.25s instead of recreating anything.
- GltfMeshModel reports its clip list up to Viewer3D (the same
  onStats/onObject callback pattern already used here), which owns the
  active index and renders MotionBar as a plain sibling of the Canvas.
- Zero clips renders nothing, exactly one clip shows its name read-only,
  more than one gets a labelled dropdown plus a Next button that cycles
  with a cross-fade. All playback loops.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The built-in exporter named every file export-<epoch-ms>.glb, so a folder
of work told you nothing. Add three optional params: model_name (used to
slug the file name, falling back to a dated model-YYYY-MM-DD-HHMM name),
project (files land under Exports/<project-slug>/ so a game groups
together instead of one long list), and tags. Output is always
<slug>-<4-char-unique>.<ext> so re-exports never collide.

Tags are the operator typed list plus what the file itself can tell:
rigged (has skins), animated plus clip-<name> per animation, textured,
and one of low-poly/mid-poly/high-poly by triangle count, plus the
project slug. Tags are written both as a <file>.tags.json sidecar and
embedded under the glTF asset extras (extras.modly), so they travel with
the file either way.

Ported from the already-working implementation at
/mnt/tank/modly/app/extracted/resources/builtin-extensions/mesh-exporter
on the operator machine.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The agent had no idea what was actually on screen beyond a mesh path and
triangle count -- it couldn't tell you which clip was playing, what the
model was named, or what game it belonged to. Extend both ends of that
pipeline:

- ChatPanel now mirrors the viewer's selected clip and full clip list
  (Viewer3D reports them into appStore alongside the existing
  meshStats/meshSelected pattern) into the /agent/chat context, so
  requests like "make the stroll slower" resolve without re-asking.
- agent.py resolves the current mesh's name/project/tags from its
  .tags.json sidecar, falling back to the GLB's own embedded
  extras.modly when no sidecar exists, and renders them into the system
  prompt in the same style as the existing scene-context lines.

Lineage: when mesh-exporter's input traces back to an existing workspace
asset, record derived_from in the sidecar -- the source's workspace-
relative path plus its name if it had one. The workflow runner threads a
sourceAssetPath through NodeOutput/ProcessInput from wherever a mesh
first resolves (the Load 3D Mesh node) down to whichever node eventually
exports, so multi-step chains still carry it. Re-deriving from an already
-derived asset keeps just the immediate parent plus the chain's root
(read from the parent's own derived_from, if any) instead of growing an
unbounded list. Surfaced in the chat context alongside name/project/tags.

Also fixes an open question: the rig-and-animate extension's "Describe
the movement" param sets multiline: true, a flag ParamField never
checked -- it fell into the plain "string" case and rendered as a single
-line input with a stray folder-browse button. ParamField now renders
any multiline-flagged param as a resizable textarea (matching the
existing "Extra details" box), independent of its base type.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Search now force-expands every section that contains a match instead of
requiring a manual Show click per group, and clearing the query falls
straight back to whatever was collapsed before (collapsedSectionKeys is
never mutated by the search itself).

The listing area now flexes to fill a resizable popup instead of being
capped at max-h-64 (roughly 3-4 rows) - a new bottom-edge drag handle
mirrors the existing width handle, with its own clamp/persist pair so
the height survives restarts the same way the width already does.

Also fixes the search input rendering as an oversized box with the
placeholder vertically centered in the middle of it - a known Chromium
input[type=search] quirk, fixed with appearance-none like the rest of
the app's inputs effectively already assume.
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.

1 participant