Polish layer panel: collapse, reorder, palette-index colors

src/config/layers.ts

@@ -5,8 +5,8 @@ export const MAX_LAYERS_PER_GLYPH = 5;
 // distinct hues so additional layers stand out from each other and the base.
 export const DEFAULT_LAYER_PALETTE = [
   'rgb(255,255,255)',
-  'oklch(0.78 0.17 30)',
-  'oklch(0.80 0.16 200)',
-  'oklch(0.83 0.18 120)',
-  'oklch(0.75 0.18 270)',
+  'oklch(0.80 0.17 50)',
+  'oklch(0.78 0.13 230)',
+  'oklch(0.88 0.16 95)',
+  'oklch(0.72 0.20 330)',
 ] as const;

src/core/project/layers.ts

@@ -2,13 +2,13 @@ import { DEFAULT_LAYER_PALETTE, MAX_LAYERS_PER_GLYPH } from '@/config';
 
 import type { Glyph, Layer } from './types';
 
-export function defaultLayerColor(index: number): string {
-  return DEFAULT_LAYER_PALETTE[index % DEFAULT_LAYER_PALETTE.length];
+export function layerColor(layer: Layer): string {
+  return DEFAULT_LAYER_PALETTE[layer.colorIndex % DEFAULT_LAYER_PALETTE.length];
 }
 
 interface MakeBlankLayerOptions {
   name?: string;
-  color?: string;
+  colorIndex?: number;
   index?: number;
 }
 
@@ -25,7 +25,7 @@ export function makeBlankLayer(options: MakeBlankLayerOptions = {}): Layer {
     yoffset: 0,
     visible: true,
     preview: true,
-    color: options.color ?? defaultLayerColor(index),
+    colorIndex: options.colorIndex ?? index,
     locked: false,
   };
 }
@@ -49,7 +49,7 @@ export function makeBaseLayerFromBitmap(input: MakeBaseLayerFromBitmapInput): La
     yoffset: input.yoffset,
     visible: true,
     preview: true,
-    color: defaultLayerColor(0),
+    colorIndex: 0,
     locked: false,
   };
 }
@@ -413,7 +413,7 @@ interface LayerPatch {
   name?: string;
   visible?: boolean;
   preview?: boolean;
-  color?: string;
+  colorIndex?: number;
   locked?: boolean;
   xoffset?: number;
   yoffset?: number;

src/core/project/types.ts

@@ -40,8 +40,8 @@ export interface Layer {
   visible: boolean;
   // When true the editor renders the layer in its tint colour; when false it renders white (final look).
   preview: boolean;
-  // Editor-only tint colour (e.g. CSS oklch string). Ignored at export time.
-  color: string;
+  // Editor-only tint slot — resolved through DEFAULT_LAYER_PALETTE at render time. Preserved across reorder.
+  colorIndex: number;
   locked: boolean;
 }
 

src/db/db.ts

@@ -1,6 +1,6 @@
 import Dexie, { type EntityTable } from 'dexie';
 
-import type { Glyph, Project } from '@/core/project';
+import type { Glyph, Layer, Project } from '@/core/project';
 import { makeBaseLayerFromBitmap } from '@/core/project/layers';
 
 interface FontFile {
@@ -29,6 +29,21 @@ export function upgradeGlyphV1ToV2(record: Glyph & { id: string }): void {
   ];
 }
 
+/**
+ * v2→v3 per-record upgrade: drop the stored `color` string from each layer and
+ * replace it with `colorIndex` derived from the layer's position. Old defaults
+ * always tracked the creation index, so position is an exact equivalent.
+ */
+export function upgradeGlyphV2ToV3(record: Glyph & { id: string }): void {
+  record.layers = record.layers.map((layer, index) => {
+    const next = { ...layer, colorIndex: index };
+
+    delete (next as Layer & { color?: string }).color;
+
+    return next;
+  });
+}
+
 class BmfDatabase extends Dexie {
   projects!: EntityTable<Project, 'id'>;
   glyphs!: EntityTable<Glyph & { id: string }, 'id'>;
@@ -56,6 +71,19 @@ class BmfDatabase extends Dexie {
           .toCollection()
           .modify((record) => upgradeGlyphV1ToV2(record)),
       );
+
+    this.version(3)
+      .stores({
+        projects: 'id, updatedAt',
+        glyphs: '[projectId+codePoint], projectId, id',
+        fontFiles: 'id',
+      })
+      .upgrade((transaction) =>
+        transaction
+          .table<Glyph & { id: string }>('glyphs')
+          .toCollection()
+          .modify((record) => upgradeGlyphV2ToV3(record)),
+      );
   }
 }
 

src/features/editor/EditorScreen.tsx

@@ -35,6 +35,7 @@ export const EditorScreen = (): React.JSX.Element => {
   const [atlasOpen, setAtlasOpen] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [glyphListCollapsed, setGlyphListCollapsed] = useState(false);
+  const [layerPanelCollapsed, setLayerPanelCollapsed] = useState(false);
   const [glyphListWidth, setGlyphListWidth] = useState(GLYPH_LIST_INITIAL_WIDTH_PX);
   const draggingRef = useRef<{ startX: number; startWidth: number } | null>(null);
   const rafRef = useRef<number | null>(null);
@@ -197,14 +198,17 @@ export const EditorScreen = (): React.JSX.Element => {
       // Cmd+' — toggle all non-editor elements
       if (ctrl && e.key === "'") {
         e.preventDefault();
-        const anyVisible = !glyphListCollapsed || atlasOpen || previewOpen;
+        const anyVisible =
+          !glyphListCollapsed || !layerPanelCollapsed || atlasOpen || previewOpen;
 
         if (anyVisible) {
           setGlyphListCollapsed(true);
+          setLayerPanelCollapsed(true);
           setAtlasOpen(false);
           setPreviewOpen(false);
         } else {
           setGlyphListCollapsed(false);
+          setLayerPanelCollapsed(false);
           setAtlasOpen(true);
           setPreviewOpen(true);
         }
@@ -351,6 +355,7 @@ export const EditorScreen = (): React.JSX.Element => {
     selectedCodePoint,
     glyphs,
     glyphListCollapsed,
+    layerPanelCollapsed,
     atlasOpen,
     previewOpen,
     currentProject,
@@ -440,7 +445,10 @@ export const EditorScreen = (): React.JSX.Element => {
               <AtlasFloat open={atlasOpen} onClose={() => setAtlasOpen(false)} />
               <PreviewFloat open={previewOpen} onClose={() => setPreviewOpen(false)} />
             </div>
-            <LayerPanel />
+            <LayerPanel
+              collapsed={layerPanelCollapsed}
+              onCollapse={() => setLayerPanelCollapsed(!layerPanelCollapsed)}
+            />
           </div>
         </div>
       </div>

src/features/editor/glyph-list/GlyphList.tsx

@@ -1,4 +1,12 @@
-import { ChevronLeft, ChevronRight, Eraser, Loader2, Plus, RotateCcw, Trash2 } from 'lucide-react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Grid2x2X,
+  Loader2,
+  Plus,
+  RotateCcw,
+  Trash2,
+} from 'lucide-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import {
@@ -234,7 +242,6 @@ export const GlyphList = ({
             className="h-6 w-6"
             title="Expand glyph list"
             aria-label="Expand glyph list"
-            aria-expanded={false}
             onClick={onCollapse}
           >
             <ChevronRight className="h-3.5 w-3.5" />
@@ -255,7 +262,7 @@ export const GlyphList = ({
                 aria-label={label}
                 className={cn(
                   'flex w-full cursor-pointer items-center px-2 py-1.5 transition-colors',
-                  isSelected ? 'bg-accent text-accent-foreground' : 'hover:bg-white/10',
+                  isSelected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/40',
                 )}
               >
                 <div className="bg-background/30 border-border/40 relative flex h-8 w-8 shrink-0 items-center justify-center rounded border">
@@ -300,7 +307,6 @@ export const GlyphList = ({
           className="h-6 w-6 shrink-0"
           title="Collapse glyph list"
           aria-label="Collapse glyph list"
-          aria-expanded={true}
           onClick={onCollapse}
         >
           <ChevronLeft className="h-3.5 w-3.5" />
@@ -333,7 +339,7 @@ export const GlyphList = ({
                 aria-selected={isSelected}
                 className={cn(
                   'flex w-full items-center gap-2 px-2 py-1.5 transition-colors',
-                  isSelected ? 'bg-accent text-accent-foreground' : 'hover:bg-white/10',
+                  isSelected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/40',
                 )}
               >
                 <button
@@ -378,7 +384,7 @@ export const GlyphList = ({
                         void handleClearGlyph();
                       }}
                     >
-                      <Eraser className="h-3 w-3" />
+                      <Grid2x2X className="h-3 w-3" />
                     </Button>
                     <Button
                       variant="ghost"