src/lib/components · chalky.town · Tangled

tyler.fun / chalky.town

a local-first atmospheric chalky task planner

chalky.town src lib components

30 files

tyler.fun · app: hueful replaces the hand-rolled colour math - palette.ts drops hexToRgb/relativeLuminance/contrastRatio for hueful's WCAG 2 contrast (inkFor keeps its rule: LIGHT_INK only when strictly higher than DARK_INK, anything unparseable gets DARK_INK), and a new normalizeHex turns any CSS colour hueful parses (3/4/8-digit hex, rgb(), hsl(), oklch(), names like rebeccapurple, bare hex without the #) into the lowercase 6-digit #rrggbb that stored records and --hl-<id> vars expect, rounding and clamping channels (hueful doesn't clamp, so out-of-gamut oklch lands on the gamut edge) and dropping alpha. The picker's color text field now routes through it, so typing rebeccapurple or oklch(0.7 0.15 30) works; the aria-label is Color value. hueful pinned at 0.7.0 (MIT, zero deps) and listed in THIRD_PARTY_LICENSES.md. Presets, defaults, ids and the lexicon are untouched. Verified: no test runner in the repo, so a throwaway node:test file checked inkFor (#ffa3a3 dark ink, #1a1a40 light ink, junk dark ink, every default and preset dark ink) and normalizeHex (#fa0 -> #ffaa00, rebeccapurple -> #663399, oklch(0.7 0.15 30) -> #ed7665, rgb(10 20 30 / 0.5) -> #0a141e, oklch(0.7 0.4 30) -> #ff0000, garbage and empty -> null); pnpm check 0 errors 0 warnings; pnpm build ok · 19h ago

ColorPicker.svelte

app: hueful replaces the hand-rolled colour math - palette.ts drops hexToRgb/relativeLuminance/contrastRatio for hueful's WCAG 2 contrast (inkFor keeps its rule: LIGHT_INK only when strictly higher than DARK_INK, anything unparseable gets DARK_INK), and a new normalizeHex turns any CSS colour hueful parses (3/4/8-digit hex, rgb(), hsl(), oklch(), names like rebeccapurple, bare hex without the #) into the lowercase 6-digit #rrggbb that stored records and --hl-<id> vars expect, rounding and clamping channels (hueful doesn't clamp, so out-of-gamut oklch lands on the gamut edge) and dropping alpha. The picker's color text field now routes through it, so typing rebeccapurple or oklch(0.7 0.15 30) works; the aria-label is Color value. hueful pinned at 0.7.0 (MIT, zero deps) and listed in THIRD_PARTY_LICENSES.md. Presets, defaults, ids and the lexicon are untouched. Verified: no test runner in the repo, so a throwaway node:test file checked inkFor (#ffa3a3 dark ink, #1a1a40 light ink, junk dark ink, every default and preset dark ink) and normalizeHex (#fa0 -> #ffaa00, rebeccapurple -> #663399, oklch(0.7 0.15 30) -> #ed7665, rgb(10 20 30 / 0.5) -> #0a141e, oklch(0.7 0.4 30) -> #ff0000, garbage and empty -> null); pnpm check 0 errors 0 warnings; pnpm build ok

ColorSettings.svelte

app: quick-color add, fold-into-one, and a draft-based color editor — the add line grows a palette row below its squiggle (space always reserved so focus never shifts the column; pointerdown beats the commit-on-blur) where each swatch colors the draft and submits in one tap; a marquee selection's context menu gains an origami 'Fold into one task' that turns the selected titles into subtasks, preserves each source's notes/subtasks in the new task's notes under its bolded old title, lands on the first task's day, deletes the sources as one undoable step, and opens the new-task details card; the Edit color page now edits a draft with Cancel/Save (name required, presets fill the name but stay editable, presets+custom share one section, name lives in the footer row) and 'Add color' only creates the entry on Save so cancelling can't strand a hidden ghost entry

ContextMenu.svelte

app: right-click a subtask for Copy / Delete — the details panel's checklist rows open the shared ContextMenu (above the panel, z 45 over 41) via a new ui.subContext {taskId, subId, day}. Copy writes the subtask's plain text (autolink brackets unwrapped, no checkbox prefix); Delete goes through store.setSubtaskText(…, "", day) like the row's trash button, so one undo restores it. The edit textarea keeps the native menu and Ctrl+Shift stays the fast-delete. The menu's Escape now listens in capture and stops there, so it closes only the menu, not the details panel under it. Verified in the preview with synthesized contextmenu events: Copy → "second https://example.com", Delete drops the row and ⌘Z brings it back, body Escape leaves the panel open

ControlsModal.svelte

app: color-submit hotkeys, shake to undo, and today-first 3-day view — ⌥1–⌥9 while composing in the add line commits the draft under that palette position (⌥0 uncolored, overriding a filter's tint; Alt because ⌘/Ctrl+digit is the browser's tab switcher, matched on e.code since macOS Option+digit reports '¡' as the key), same keep-composing flow as the swatch row and listed in the Controls panel; a new shake.svelte.ts gives mobile the ⌘Z it never had — three gravity-free jolts inside 800ms undo with a haptic bump and a cooldown, default-on where devicemotion is free (Android) and armed from a new Settings toggle on iOS whose tap is the gesture the native motion-permission prompt requires (silent re-arm on later loads' first pointerdown; stays quiet while a text field is focused so it never doubles iOS's own Undo Typing dialog); threeDays() now returns anchor/+1/+2 instead of centering, so jumping to today leads the window with today rather than burying it in the middle — title, arrows, URL collapse and rollover all follow from the anchor unchanged

CreditsModal.svelte

app: credit idb, write real README, add task-seeding script

DataModeModal.svelte

app: data-mode copy — plain Private/Public cards, one intro line linking the spaces alpha

DayColumn.svelte

app: empty days' drop box no longer sags mid-drag — the add-line palette keeps its row reserved in flow (order 1), and while html.dragging lifts .tail out of flow the palette stayed put; on an empty day .list.empty is order 2, so the palette sat above the drop box and shoved it down a row while populated days' boxes started flush under the header. The palette now goes display: none during a drag (nothing can be composing then), and the body's pinned rest height (restH) keeps tiles from resizing. Verified in the preview's week view with html.dragging forced: every day's list starts 3px into its body, empty or not

app: one 16px gutter on phones — header and toolbar drop from 22px to 16px a side, and the Day, 3 Day and Week grids from 18/24px to 14px (plus the rows' own 2px inset), all under max-width: 480px. Rows get ~8px more width for titles, and the title, view tabs and date badge now share one left edge instead of the badge sitting a few px left of the title. Desktop spacing is unchanged; ThreeDayView/WeekGrid's fixed 48px padding in the column-count math stays, since nothing under 480px fits two columns either way. Verified at 375px in the preview: every view lands its headers at 16px with no horizontal scroll

DemoBoard.svelte

app: add a read-only /demo/<handle> board

DemoTask.svelte

app: fix unreadable tinted chips — chip-ink fallback was a custom-property self-cycle

DetailsPanel.svelte

app: subtask rows show the pointer, not the open hand — svelte-dnd-action writes an inline cursor: grab on each row, which showed in the ~2.5px slivers above/below the 24px checkbox and the 7px gap before the label, so hovering onto the checkbox flickered through a grab hand. .sub:not(.add) now takes --cur-pointer (!important over the inline style) and .sub:active keeps --cur-grabbing; html.dragging's id-scoped rule still wins mid-drag. Verified in the preview with elementFromPoint: the row's top/bottom edges and the check→label gap all resolve to the pointer, the Add subtask row stays default

app: one 16px gutter on phones — header and toolbar drop from 22px to 16px a side, and the Day, 3 Day and Week grids from 18/24px to 14px (plus the rows' own 2px inset), all under max-width: 480px. Rows get ~8px more width for titles, and the title, view tabs and date badge now share one left edge instead of the badge sitting a few px left of the title. Desktop spacing is unchanged; ThreeDayView/WeekGrid's fixed 48px padding in the column-count math stays, since nothing under 480px fits two columns either way. Verified at 375px in the preview: every view lands its headers at 16px with no horizontal scroll

LandingModal.svelte

app: add a first-visit welcome modal with editable markdown copy

LoginScreen.svelte

app: private mode syncs direct to the PDS via atproto Spaces — HappyView retired

MarkdownNotes.svelte

app: notes toolbar puddles go edge to edge — bar padding 2px 3px and the 1px gap drop to 0, and .tb loses its border-radius, so the 24px squares tile flush against each other and the frame (whose radius clips Bold's corner). Row drops from 29px to 25px tall and ~210px to ~193px wide. Divider margin 4px 3px → 5px 0 so neighbours meet it while it stays a short rule. The coarse-pointer hit extender loses its now-pointless upward reach (inset 0 0 -8px). Verified in the preview: buttons at x 0/24/48/72 | 97/121/145/169, all flush at y 0, 24×24

markdownNotesPlugins.ts

app: WYSIWYG notes editor with markdown link typing and paste-to-link

app: cache the pfp locally so it paints on the first frame — the menu waited on session restore, then the AppView profile, then the CDN image; handle + avatar now live in localStorage (avatar as a ~5KB data URL pulled from the user's PDS via sync.getBlob, since cdn.bsky.app sends no CORS, re-downloaded only when its CID changes), shown before restore and cleared on sign-out/expiry; a cached handle no longer blocks sign-in on the profile fetch

MigrationBanner.svelte

app: fix stuck touch hover states, notes zoom, and add arrow-key day nav

MonthCell.svelte

app: integer-only order/rank on the wire — lex-data rejects floats, so halved orders and x.5 movedRanks stranded dirty edits behind a failing batch; day renumbering, scaled integer `rank` (legacy movedRank read ×1024), wire-boundary coercion, per-record push failures no longer abort the rest; recurring drag reorders the series template; patch oauth-client-browser to treat WebKit's null IDB miss as not-found (r.expiresAt crash) and stop reopening on it

MonthView.svelte

app: roll the today indicator and anchor forward at day change without a refresh

RecurrencePicker.svelte

app: someday quick-add via + and 'n' with centered details card, repeat clear button, trash icon, hide mobile scrollbars

SelectLayer.svelte

app: recurring tasks reorder within their own day (per-occurrence order, cross-day drop snaps back); perf — month cells skip no-op rebuilds and flip only mid-drag, marquee caches cell rects + rAF-coalesces moves, drag cursor off the universal selector, layout containment on day bodies/cells

SettingsModal.svelte

app: remove shake-to-undo — the gesture can't be made trustworthy on iOS, where the whole point was: the WKWebView keeps a first-responder typing-undo stack for the add line (which stays focused through the keep-composing flow), so the OS answers most shakes with its own un-suppressible 'Undo Typing' dialog and any guard loose enough to dodge it left our undo firing on the same shake — one gesture, two competing undos, no web API to arbitrate. The module, its Settings toggle, and the motion-permission plumbing all go; the empty-draft historyUndo/Redo block in DayColumn stays, since a native undo resurrecting a committed title as a ghost draft is just as reachable from ⌘Z on desktop

SignedOutNotice.svelte

app: surface silent sign-outs — wire the oauth client's onSessionDeleted, treat replayed/deleted refresh as a dead session, stop the sync loop and toast (with unsynced count) instead of running signed-out for hours; contain: paint on week tiles — one row's hover/flip was repainting the whole board in WebKit (~600x less paint area)

app: customizable drawer label and color palette with picker page

SpacesUnsupportedNotice.svelte

app: private mode syncs direct to the PDS via atproto Spaces — HappyView retired

TaskItem.svelte

app: bigger touch targets on mobile without moving anything — the small round controls (add-line color swatches at 18px, toolbar filter chips at 20px, task and subtask checkboxes at 24px, details-card swatches and icon buttons) all sat well under the ~44px a finger needs, so each grows an invisible out-of-flow ::before hit extender under @media (pointer: coarse): zero layout contribution means nothing can shift by a pixel, desktop hover/click is untouched, and where targets share a row the sideways reach stops at half the gap so neighbors meet without overlapping (the task checkbox stays modest sideways so it can't steal from the row's drag/tap surface). The one visible change is the add-line palette, whose dots go 18→22px with 10px gaps on coarse pointers only — its row is always reserved in the layout, so focusing the add line still shifts nothing. Verified at iPhone size with touch emulation: a tap 5px above a swatch's visible edge still commits the colored task through the pointerdown path, beating commit-on-blur

ThreeDayView.svelte

app: one 16px gutter on phones — header and toolbar drop from 22px to 16px a side, and the Day, 3 Day and Week grids from 18/24px to 14px (plus the rows' own 2px inset), all under max-width: 480px. Rows get ~8px more width for titles, and the title, view tabs and date badge now share one left edge instead of the badge sitting a few px left of the title. Desktop spacing is unchanged; ThreeDayView/WeekGrid's fixed 48px padding in the column-count math stays, since nothing under 480px fits two columns either way. Verified at 375px in the preview: every view lands its headers at 16px with no horizontal scroll

app: one 16px gutter on phones — header and toolbar drop from 22px to 16px a side, and the Day, 3 Day and Week grids from 18/24px to 14px (plus the rows' own 2px inset), all under max-width: 480px. Rows get ~8px more width for titles, and the title, view tabs and date badge now share one left edge instead of the badge sitting a few px left of the title. Desktop spacing is unchanged; ThreeDayView/WeekGrid's fixed 48px padding in the column-count math stays, since nothing under 480px fits two columns either way. Verified at 375px in the preview: every view lands its headers at 16px with no horizontal scroll

WeekGrid.svelte

app: one 16px gutter on phones — header and toolbar drop from 22px to 16px a side, and the Day, 3 Day and Week grids from 18/24px to 14px (plus the rows' own 2px inset), all under max-width: 480px. Rows get ~8px more width for titles, and the title, view tabs and date badge now share one left edge instead of the badge sitting a few px left of the title. Desktop spacing is unchanged; ThreeDayView/WeekGrid's fixed 48px padding in the column-count math stays, since nothing under 480px fits two columns either way. Verified at 375px in the preview: every view lands its headers at 16px with no horizontal scroll