Polish layer panel: collapse, reorder, palette-index colors#63
Merged
Conversation
- LayerPanel rows now show pointer cursor and a hover background on the whole row, matching the GlyphList affordance. Click anywhere on the row to select; icon buttons stopPropagation so their actions don't double as row selection. - Drop the inner button around the layer name (the row is the click target). - Merge isActive/isMultiSelected into a single isSelected styling check — both states are functionally interchangeable for visual selection. - Unify hover/selected backgrounds across both panels: hover bg-accent/40, selected bg-accent/60. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Replace Layer.color (CSS string) with Layer.colorIndex (number), resolved through DEFAULT_LAYER_PALETTE at render time. Reordering layers preserves colorIndex so the user's "the orange layer" mental model stays stable while global palette changes propagate to every existing glyph automatically. - Add layerColor(layer) helper; update LayerPanel and PixelEditor call sites. - DB v2→v3 per-record upgrade strips the old color string and assigns colorIndex = layer position (old defaults always tracked creation index, so this is a 1:1 mapping). - New palette (white, orange, sky blue, yellow, magenta) chosen to stay distinguishable for common color-vision deficiencies; the previous palette clustered green/cyan/blue too tightly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Whole-row HTML5 drag-and-drop wired to the existing reorderLayers core fn. Dragging shifts the source row's opacity and shows a primary-colored insertion line at the top or bottom edge of the target row depending on pointer position. Click-to-select still works (DnD only kicks in past the browser's drag threshold). The panel renders the reversed layers array (top of panel = topmost layer = last in array), so handleDrop converts panel-space "above/below" to the corresponding array indices before calling reorderLayers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LayerPanel now mirrors the GlyphList collapse pattern: a chevron pinned to the outer (right) edge of the header toggles between expanded (224px, full row controls) and collapsed (64px, eye + palette icons only). Row interactions — selection, hover background, drag-and-drop reordering — work identically in both states; only the inline name span and lock/delete cluster are hidden when collapsed. Cmd+' now toggles all chrome at once: glyph list, layer panel, atlas float, and preview float. The single render path keeps width, header layout, and row content all driven by the same `collapsed` prop, so the two states can never drift visually. Header label now shows "Layers (N/MAX)" — matches GlyphList's pattern and gives the user context for when the Add button is disabled at cap. Lock + delete moved to size="icon-xs" with h-3 w-3 icons and grouped into a gap-0.5 cluster, matching the glyph row's clear/remove pair. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Toolbar's eraser tool now uses the Eraser icon; the Grid2x2X icon moves to GlyphList's clear-glyph action where its "wipe the whole grid" meaning reads more naturally. - Drop aria-expanded from GlyphList's collapse/expand chevrons. The button variant maps aria-expanded=true to a muted background — appropriate for dropdown/menu triggers, but a sidebar collapse toggle is not a popover trigger. Removing it keeps the chevron rendering identical in both states, matching the new LayerPanel behavior. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
aurpelai
force-pushed
the
refactor/layer-ui-polish
branch
from
88d81fe to
8320add
Compare
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
1 participant
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
bg-accent/40hover +bg-accent/60selected backgrounds, icon-button clicks stop propagation so they don't double-select the row.colorIndexresolved throughDEFAULT_LAYER_PALETTEat render time. Reordering preserves a layer's color slot; global palette changes propagate to existing glyphs automatically. DB migration (v2→v3) maps oldcolorstrings to indices by layer position.reorderLayerscore fn. Whole-row HTML5 DnD; source row fades, target shows a primary-colored insertion line at top or bottom edge.icon-xsand grouped into a gap-0.5 cluster, matching the glyph row's clear/remove pair.Test plan
🤖 Generated with Claude Code