mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
My-Weekly-ToDo-List/docs/DESIGN_NOTES.md

14 KiB
Raw Permalink Blame History

Design Notes — todo.martin-bierschenk.de v2

Visual reference: Todo Calendar Redesign v2.html Aesthetic: Minimal Scandinavian / TeuxDeux-style hairline editorial Goal: a calm, airy, paper-like weekly planner. Restyle only — no logic, routing, data, sync, or component-API changes.

0 · Rules of engagement (read first)

  1. Do not change behaviour. Keep all existing hooks, server actions, NextAuth wiring, calendar sync, recurring-task logic, drag-and-drop, keyboard shortcuts, and component prop shapes exactly as they are.
  2. Touch JSX + CSS only. New CSS variables / Tailwind tokens are fine; new state, new effects, new dependencies are not.
  3. One component per commit. Visual restyles are easy to review (and revert) when scoped. Suggested order: tokens → layout shell → day grid → all-day strip → events → tasks (anyday) → left rail → right settings → header.
  4. Keep existing component file structure (WeeklyCalendarView.tsx, TaskList.tsx, CalendarEventModal.tsx, etc.). Only edit them.
  5. Where this doc and the HTML mock disagree, the mock wins for visuals. Where the mock and the existing code disagree on behaviour, the existing code wins.

1 · Design tokens

Add these as CSS custom properties (or extend tailwind.config.js theme.extend). All other colors should be derived from these.

Color

keep the colors for now

Calendar-source palette (event chips, muted on purpose — they should not compete with the today-red):

Source Background Border-left Title color Meta color
Default/work #eef2f7 #6c87a8 #2b3f57 #6c87a8
Family (.fam) #fbeef0 #b85a6a #5a2530 #99536a
Finance (.fin) #f6f0e2 #a88a3c #4a3a14 #8a6f2a
Dev/GitHub (.dev) #ecf3ed #5a7a4a #2c4527 #5a7a4a
Note (.note) transparent none var(--ink-2) var(--ink-4)

All-day chip palette (solid pills above the day headers):

Variant Background Text
Default #b8b8b0 #fff
Family (.fam) #e88a8a #fff
Special (.special, anniversaries, milestones) #f4d588 #6b4f10

Typography

  • UI / sans: Geist, fallback -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif
  • Editorial / serif: Fraunces italic — used only for the small quote in the header bar
  • Mono / numerals: Geist Mono if needed; otherwise rely on font-variant-numeric: tabular-nums for any clock/date/count

Body letter-spacing: -0.005em baseline.

Role Size Weight LH Other
Section h3 16px 600 1.2
Day name (.dn) 16px 600 1 uppercase, letter-spacing: 0.04em
Day name — today 16px 700 1 color: --accent
Day date (.dnum) 11px 400 1 uppercase, tabular-nums, color: --ink-4
Header KW (.wk) 13px 500 — letter-spacing: 0.02em
Header quote 12px 400 — Fraunces italic, --ink-4
Event title 12px 500 1.25
Event note title 11.5px 400 1.25
Event meta / time 10.5px 400 — tabular-nums
All-day chip 11px 500 1.2
List heading (h4) 12px 500 — uppercase, letter-spacing: 0.04em
List item 12px 400 1.35
Hour label 10px 400 — tabular-nums, color: --ink-5
Tasks tab 12px 500/600 — active is 600
Tab counter chip 10.5px 500 1.4 tabular-nums

Spacing & geometry

  • Left rail: 56px wide, fixed
  • Right settings drawer: 360px wide, slides in from the right (transform: translateX(100%) → translateX(0), cubic-bezier(.2,.8,.2,1) 250ms)
  • Permanent top header: 36px tall, white, hairline bottom
  • Day grid hour-row height: 56px
  • Day grid column gap: 20px
  • Day grid horizontal padding: 24px
  • Border radius: 4px (events), 6px (corner buttons, inputs), 7–8px (list cards, segmented pills), 10px (tasks tab pill container)
  • All shadows are tiny: 0 1px 2px rgba(0,0,0,.06) or 0 4px 16px rgba(0,0,0,.06). Never bigger.
  • Hover surfaces: rgba(0,0,0,.05) for icons, rgba(0,0,0,.025)–.04 for text hits

Motion

  • All transitions: 120–180ms, cubic-bezier(.2,.8,.2,1) for sliding panels, plain ease for hover
  • The right drawer is the only large transform; everything else is opacity / background swaps

2 · Layout shell

┌─────────────────────────── header (36px, always visible) ───┐
│                       KW 19 | 4–10. Mai 2026   "quote…"     │
├──────┬────────────────────────────────────────────────┬─────┤
│      │ all-day strip                                  │     │
│ left │────────────────────────────────────────────────│ rt  │
│ rail │ day-headers row                                │ drw │
│ 56px │────────────────────────────────────────────────│ 360 │
│      │ day grid (hours × columns)                     │  px │
│      │────────────────────────────────────────────────│ off │
│      │ tasks (anyday) — warm grey, 6 white list cards │ scr │
└──────┴────────────────────────────────────────────────┴─────┘
  • The toolbar is gone. Only two floating icon buttons remain: a sidebar-toggle top-left of the header, a search top-right.
  • The right drawer is hidden by default. A small 18×64px chevron tab on the right edge toggles it; the gear icon in the left rail also toggles it.

3 · Component-by-component restyle guide

3.1 Top header (header)

  • position: sticky/absolute, top: 0, height 36px, white, hairline bottom
  • Centered: KW WW | 4–10. Mai 2026 • faint Fraunces italic quote
  • Text colors: KW = --ink-2 13px/500; quote = --ink-4 12px italic; ellipsize at ~480px

3.2 Left rail (lside)

Order, top to bottom:

  1. Date nav cluster — « ‹ row, "Heute" pill (uppercase, hairline border), › » row
  2. Hairline separator
  3. View flyout — calendar icon; on hover, flyout reveals: Einfach / Kalender / Liste / Kanban / Ziel
  4. Day-count flyout — grid icon; flyout: 1 / 2 / 3 / 5 / 7
  5. Zeitfenster flyout — clock icon; flyout: 15m / 20m / 30m / 60m
  6. Hairline separator
  7. Action icons (vertical stack): plus, calendar-pick, projects, recurring, target, focus
  8. Hairline separator
  9. Undo, redo, sync, download, print
  10. Hairline separator
  11. Light/dark toggle (single sun/moon icon — toggles, not two icons)
  12. User avatar at the bottom (margin-top: auto)

Icons are 16px, currentColor, in 36×36 hit-targets, border-radius: 8px, hover background rgba(0,0,0,.05). Active state uses --accent-soft background + --accent color.

Flyouts pop right of the rail with a subtle pointer triangle.

3.3 All-day strip (allday)

  • Grid: 56px [hour gutter pad] repeat(N, 1fr), column gap 20px, padding 10px 24px 0
  • Per-day column: min-height: 56px, vertical stack of chips, gap 3px
  • Chips are solid colored pills (see palette table). No icons, no date pips inside.
  • Today's column gets background: var(--accent-soft) with extra horizontal padding
  • Small uppercase label "GANZTAGS" 9px in left gutter

3.4 Day headers (days + dayh)

  • Grid identical to all-day strip (same column gaps for alignment)
  • Each header: small MAI 6 date on top, large MITTWOCH weekday name below, both uppercase
  • 2px solid --ink underline below each header
  • Today: weekday in --accent red 700, blue-grey --accent-soft background, centered, padding 6px 8px, 1px ink underline
  • Weekend (Sat/Sun): weekday red, underline red

3.5 Day grid body (body)

  • No vertical lines between days — the column gap (20px) is the separator. This is the TeuxDeux move.
  • Horizontal hour rules only (--line color, 1px), one per hour
  • Hour labels in the left gutter, 10px, --ink-5, right-aligned, sitting on the rule (background-cut)
  • Today column gets background: var(--accent-soft) (full height)
  • Now-line: 1px --accent red across the today column, with an 8×8 dot on the left and a small time pill (HH:MM) on the right with bg: var(--bg) for clean cutout

3.6 Events (ev)

Two visual modes:

Timed event card — coloured background by source, 2px left-border accent, border-radius: 4px, padding: 8px 10px. Title row has an inline 16px source icon (.t .src) before the text. Synced events show a small sync arrow at top-right (.sync, opacity .55). Meta line: HH:MM – HH:MM · Location.

Note event (.ev.note) — for todos placed at a time but without a duration block: transparent background, no border-left, no rounding, just small inline icon + text. Used for github-source items, key/cake/car category notes, etc.

Source icon mapping (16px, currentColor SVG):

  • git — github / dev tasks
  • money — finance / banking
  • book — Legasthenie / Nachhilfe
  • home — Garde / home
  • key, cake, car — category notes
  • bolt — focus / quick task
  • pin, info — generic

3.7 Anyday tasks (tasks)

  • Section background: --tasks-bg (#f4f2ee warm light grey)
  • 6-up grid of white list cards (--paper, 1px --line, 8px radius, min-height: 200px, padding 12px 12px 8px)
  • Card heading: 6px colored dot · uppercase project name · count chip on right
  • Each item: 9×9 unchecked box (1px --ink-5) · text · hairline --line-soft underneath
  • Tabs above the grid are a segmented-pill control:
    • Container: inline-flex, padding: 4px, bg: rgba(0,0,0,.05), border-radius: 10px
    • Active tab: white pill, weight 600, shadow 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04)
    • Inactive: text --ink-3, hover white-50 background
    • Each tab has a count chip — small grey rounded-rect, tabular-nums

3.8 Right settings drawer (rside)

  • 360px white panel, slides in from right edge
  • Vertical icon-tab strip across the top (settings, globe, link, sync, box, user, palette, spark)
  • Each row: small label (11px --ink-3, weight 500) + input/checkbox/segmented control
  • Inputs: 1px --line, 6px radius, 7px 10px padding, 13px --ink-2
  • Help text under fields: 10px --ink-4
  • Sections separated by full-bleed --line <hr>
  • Close × top-right; clicking the gear icon in the left rail or the edge tab toggles it

3.9 Floating corner buttons

  • 28×28, 6px radius, top: 8px
  • Left: sidebar-toggle. Right: search.
  • These sit on top of the header bar.

4 · Iconography

All icons are 16px, currentColor, 1.4 stroke-width SVG, drawn on a 20×20 viewBox, no fill (line-art). Examples: cal, list, kanban, target, grid, clock, search, plus, proj, repeat, bolt, moon, sun, setg, sync, print, user, download, sidebar, chevL/R, eye, undo, redo, refresh, sliders, globe, link, box, palette, spark, info, money, git, book, home, car, key, cake.

Hover icons go from --ink-3 → --ink. Active state for view/filter icons goes from --ink-3 → --accent on --accent-soft background.

5 · What to keep from the existing app

  • All data shapes, server actions, API routes
  • next-auth wiring, middleware
  • Drag-and-drop calendar event editing
  • Recurring task logic
  • Calendar-sync flows (Google etc.)
  • Keyboard shortcuts
  • Print view (we can restyle it, but keep the print route)

6 · Suggested PR breakdown

  1. feat(design): add tokens — CSS variables / tailwind extend, no markup changes
  2. feat(design): app shell + header + corner buttons — top-level layout
  3. feat(design): left rail — collapse old toolbar into rail with flyouts
  4. feat(design): right settings drawer — slide-in panel
  5. feat(design): day grid — hairline rules, no verticals, today wash, day headers
  6. feat(design): all-day strip — solid chip pills
  7. feat(design): events — source-coloured cards + note variant + source icons
  8. feat(design): anyday tasks — segmented tabs + 6-up white cards on warm grey
  9. chore(design): typography pass — Geist + Fraunces, sizes from §1
  10. chore(design): icon set swap — 16px line-art set

Each PR small enough to eyeball. After step 9 the app should look like the mock; step 10 is polish.

7 · Open questions for the engineer

  • Is Geist already loaded? If not, add it via next/font (don't pull from Google Fonts at runtime).
  • Does the existing theme system support multiple accent colors per calendar source, or is that a new concept? If new, hold off on the per-source event colors and ship the today-red + neutral-event scheme first.
  • Confirm dark mode is in scope — the mock is light-only; tokens for dark would need to be derived in a follow-up.

End of notes. When in doubt, open Todo Calendar Redesign v2.html in a browser and copy what you see.