devlog 005
This session was almost entirely layout architecture, which went through several pivots before landing somewhere that actually makes sense.
The first attempt was free corner-drag resizing with a Canva-style harmonizer that would proportionally redistribute card widths after every drop or resize. The harmonizer worked in isolation but broke down in practice because SortableJS and flex-wrap fight each other on drop target resolution; the visual drop position and the DOM reorder disagree when cards have arbitrary widths. After two iterations trying to patch that, I scrapped it.
The replacement is a zone-based layout system. The dashboard is divided into horizontal zones, each zone being an independent row with its own column count and height. Zone 1 might have 3 columns, zone 2 might have 2, zone 3 might have 4; each is configured independently in the settings panel. Widgets drag freely within and between zones via SortableJS with cross-group drag enabled. The settings panel has a miniature zone editor with draggable column dividers to set proportional widths, height inputs per zone, and add/remove zone controls. All changes apply live to the dashboard without a save button. Zone definitions persist to localStorage, widget positions to the SQLite layout table.
The immediate open issue is that zones don’t currently enforce their column cap, so widgets can overflow past the zone boundary when dragged in. The fix is straightforward: SortableJS onAdd callback checks current child count against cols, bounces the card back to the source zone if the zone is full, and briefly flashes the target zone border to signal the rejection. Settings col count reductions that would orphan widgets push the overflow to the next zone automatically. That fix is going in next.
Photos are first-class zone items. Height snapping (200/400/500px presets) applies via right-click menu. The snap guide lines and settings inputs from the previous session carried over.