Refactor UI into embeddable Quantosaurus class and floating taskbar#10
Open
Modjular wants to merge 2 commits into
Open
Refactor UI into embeddable Quantosaurus class and floating taskbar#10Modjular wants to merge 2 commits into
Modjular wants to merge 2 commits into
Conversation
Introduce js/quantosaurus.js: an EventTarget-based app core that owns the shared state object (images, forest, tools, camera) and attaches to a board element. Every state change now flows out as a CustomEvent (imageadded, labelschanged, trainingstart/complete, statscomputed, dirtychange, etc.), so chrome subscribes instead of being hard-wired — the groundwork for embedding the board without the sidebar. - images.js/training.js stop importing ui.js and reach into document by id; they read state.board/state.brushSize and dispatch via state.events (optional-chained so the CPU unit tests stay Node-importable). - Brush size becomes real instance state instead of being read off the slider DOM inside the paint handlers. - ui.js gains bindChrome(q), a pure event subscriber reproducing today's sidebar rows, status line, save indicator, and count badges unchanged. - index.html's inline script becomes a consumer of the class; the File System Access .ilp save stays in the shell and calls q.markSaved(). - Consolidate the two duplicate class-rename onblur handlers into one path through q.setClassName (the old second copy dropped saveSettings). - config.js: add BRUSH_SIZE_* constants + pure clampBrushSize, covered by config.test.mjs. No visual or behavioral change; verified in a headless browser (load, paint, train, counts, brush hotkeys, recolor, rename+persist, contrast, delete) with zero console errors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VobFMvLSfYoBDLD1tAANma
Condense all chrome into one bottom-center floating taskbar (Figma-style) for a mobile-first, embeddable posture. The taskbar is a pure consumer of the Quantosaurus class API introduced in the previous commit. - Remove the sidebar and top bar. Tools, a numeric brush-size input, a class dropdown (color + editable name + selection), the sigma slider, and an overflow menu (Add images / Export / Cheatsheet / Theme / Feedback) all live in the taskbar. - Per-class object counts move to a floating chip in the upper right, each with a marker-visibility toggle dot; the "unsaved changes" indicator moves to a chip in the upper left. A load toast covers the gap left by the old per-row loading bar. - Import: drag-and-drop plus a centered empty-state "Select Files" shown only when no images are loaded (an "Add images…" overflow item covers the non-empty case, notably on touch). - Export options move into a modal opened from the overflow menu; Cmd/Ctrl+S still saves the .ilp. - Per-image controls (reorder / contrast / delete) move to a hover (always-on for coarse pointers) overlay on each board tile; the contrast popover re-anchors to the tile button. - New chrome is fixed-position outside #viewport so taps aren't swallowed by its touch-action:none, uses env(safe-area-inset-*) for mobile, and themes via the existing surface/border tokens. Added a global [hidden] reset so the menus' display rules don't override the attribute. CLAUDE.md's data-flow section updated for the class + event architecture. Verified in a headless browser end to end (empty state, load, paint→train→ counts, brush clamp, class dropdown recolor/rename/select, marker toggle, overflow menu, export modal, tile contrast, theme toggle, delete) with zero console errors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VobFMvLSfYoBDLD1tAANma
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This refactors the app architecture to separate the core logic from the UI chrome, making Quantosaurus embeddable while modernizing the interface. The sidebar and top bar are replaced with a floating bottom taskbar, and all app state/methods are now exposed through a
Quantosaurusclass that emits events for state changes.Key Changes
New
Quantosaurusclass (js/quantosaurus.js): Encapsulates the shared app state and exposes it through methods and CustomEvents, enabling embedders to swap out or customize the UI layer without touching core logic.Floating taskbar UI: Replaces the sidebar + top bar with a single bottom-center floating toolbar containing:
Event-driven architecture: Every state mutation now emits a CustomEvent (
imageadded,dirtychange,toolchanged,brushsizechanged,sigmachanged,classchanged,trainingstart,trainingcomplete,statscomputed, etc.), allowing the UI to be a pure subscriber rather than tightly coupled to the core.Simplified HTML structure: Removed sidebar/top-bar markup; the viewport now fills the screen with floating chrome (taskbar, corner chips, empty state) positioned via
position: fixed.Corner chips: Moved status indicators to fixed corners:
Empty state: Centered drop target with file picker button, shown only when no images are loaded.
Export modal: Moved export controls from sidebar into a modal opened from the taskbar overflow menu.
Refactored
ui.js:bindChrome(q)wires the floating chrome onto a Quantosaurus instance's events; the chrome is now a pure consumer that calls methods onqrather than mutating state directly.Module event dispatch:
images.jsandtraining.jsnow emit CustomEvents onstate.events(the Quantosaurus instance) instead of calling UI functions directly, decoupling them from the presentation layer.Implementation Details
The
Quantosaurusclass ownsstateand exposes it for backward compatibility with existing modules, but provides typed getter/setter methods (setTool,setBrushSize,setClass,setSigma, etc.) as the preferred API.Brush size is now a first-class state property (
state.brushSize) with bounds checking viaclampBrushSize()inconfig.js.The taskbar uses CSS Grid/Flexbox with
position: fixedandbottom: calc(env(safe-area-inset-bottom) + 16px)for mobile-safe positioning.Dropdowns (class selector, overflow menu) open upward from the taskbar using
position: absolute; bottom: calc(100% + 8px).The
[hidden]attribute now has!importantto ensure it overrides display values set on menus/popups.Settings (class colors/names) are still persisted via
loadSettings/saveSettings, called duringQuantosaurusconstruction.The
.ilpfile handle is now owned by the shell script (index.html's inline module) rather than the app core, making it a host concern rather than an app concern — embedders can persist differently.https://claude.ai/code/session_01VobFMvLSfYoBDLD1tAANma