From afce46ccf875d1a7b7f24d7d30b6780006a16fb4 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 01/17] docs: add CLAUDE.md agent guide, drop legacy design/API specs, refresh READMEs --- CLAUDE.md | 291 +++++++++++++++++ README.md | 14 +- docs/DESIGN.md | 795 --------------------------------------------- docs/api-spec.md | 127 -------- frontend/README.md | 62 +--- 5 files changed, 307 insertions(+), 982 deletions(-) create mode 100644 CLAUDE.md delete mode 100644 docs/DESIGN.md delete mode 100644 docs/api-spec.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..091d70c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,291 @@ +# Life Towers — agent notes + +This file captures the load-bearing things to know about this codebase. Read it before making non-trivial changes. + +## What this is + +A personal-productivity TODO app where each user has multiple **pages**, each page holds several **towers** (vertical task columns), and each tower has **blocks** (atomic tasks). Pending blocks live in a **tasks accordion** at the top of the tower; completed ones fall into the tower as colored squares (the "falling animation" is the defining visual). Date-range slider filters which done blocks are visible. + +This is a port/modernisation of a legacy Angular 7 app. **Design parity with the legacy is a hard requirement** — the user cares deeply about the original aesthetic. The legacy source lives at `_legacy_reference/` (gitignored) and is the source of truth for any visual question. A detailed style guide is at `docs/DESIGN.md`. + +## Repo layout + +``` +backend/ # FastAPI + SQLite (WAL) + src/life_towers/ + main.py # ASGI app, lifespan, static mount + SPA fallback + api.py # Routes (/api/v1/{health,register,data}) + auth.py # Bearer UUIDv4 → user_id + db.py # sqlite3 factory + migration runner + limits.py # slowapi limiter + payload-size middleware + models.py # pydantic v2 schemas + logging.py # structlog JSON + migrations/ # 001_initial.sql consolidated schema + tests/test_api.py # pytest + httpx AsyncClient + pyproject.toml # uv-managed +frontend/ # Angular 21+ standalone, signals, zoneless + src/app/ + components/ + pages/ # Top-level: page selector + Settings button + page/ # Tower row + slider + trash zone + confirm-delete + tower/ # White tower card: tasks accordion + add-block + falling stack + name input + block/ # Colored square (1/6 tower width) + tasks/ # Pending-blocks accordion with tickbox + welcome/ # Zero-state intro modal + "Try an example" + modal/ # Generic backdrop shell + sub-modals (block-edit carousel, settings, tower-settings) + shared/ # select-add, toggle, double-slider, color-picker, icon + services/ + api.service.ts # HttpClient wrapper, exact API contract + store.service.ts # signal-based store, debounced PUT, retry, loadExample + modal-state.service.ts # global open-modal counter (drag locking) + models/index.ts # Page / Tower / Block / HslColor TS interfaces + utils/{color,hash}.ts + library/ # Legacy SCSS dropped in verbatim — DO NOT REFACTOR + public/assets/ # SVG icons (arrow, pen, plus-sign, trash, x-sign) + src/assets/fonts/ # Self-hosted woff2 (Open Sans Condensed, Raleway, …) + e2e/ # Playwright (smoke + visuals) +docs/ + api-spec.md # Single source of truth for the HTTP API contract + DESIGN.md # Legacy visual spec (verbatim SCSS quotes) +_legacy_reference/ # Original Angular 7 source — read-only, gitignored +Dockerfile # Multi-stage: node:22-alpine build → python:3.13-slim runtime +docker-compose.yml # Production single-container +docker-compose.dev.yml # Ephemeral volume for Playwright runs +.forgejo/workflows/ # CI + deploy +``` + +## Tech stack quickrefs + +- **Frontend**: Angular 21+, **standalone components** (no NgModule), `signal()` / `computed()` / `effect()` / `linkedSignal()`, **zoneless change detection** (`provideZonelessChangeDetection`), `@if`/`@for` control flow, **OnPush** everywhere, esbuild builder (`@angular/build:application`), Reactive Forms, Angular Service Worker (PWA), Angular CDK (drag-drop, A11yModule for focus trap) +- **Backend**: FastAPI, pydantic v2, slowapi (rate limiting), structlog, **sqlite3 with WAL + foreign_keys ON** every connection, uv-managed deps +- **Runtime topology**: single Docker container — FastAPI process serves both `/api/v1/*` JSON endpoints AND the built Angular SPA as static files with SPA fallback. Behind nginx; uvicorn launched with `--proxy-headers --forwarded-allow-ips=*` +- **Storage**: SQLite at `/data/life-towers.db` on a named Docker volume. Tree-replace semantics (PUT replaces user's full tree atomically inside `BEGIN IMMEDIATE`) + +## Build / dev / test / deploy + +```bash +# Full local stack (ephemeral data) +docker compose -f docker-compose.dev.yml up --build -d # http://localhost:8000 +docker compose -f docker-compose.dev.yml down -v # teardown + +# Frontend dev (with backend proxied via proxy.conf.json) +cd frontend && npm start # ng serve on :4200, /api → :8000 +cd frontend && npm run build # production bundle to dist/frontend/browser/ +cd frontend && npm test # vitest (--run already in the script) +cd frontend && npm run test:e2e # Playwright + +# Backend dev +cd backend && uv sync +cd backend && uv run pytest -v +cd backend && uv run uvicorn life_towers.main:app --reload # :8000 + +# E2E in the sandbox: host-to-container port forwarding is broken here. +# Run Playwright INSIDE a container on the docker network instead: +docker run --rm \ + --network life-towers_default \ + -v "$(pwd)/frontend:/work" -w /work \ + -e PLAYWRIGHT_BASE_URL=http://life-towers:8000 \ + mcr.microsoft.com/playwright:v1.60.0-noble \ + npx playwright test +``` + +## Design system — the legacy is the source of truth + +`docs/DESIGN.md` is the comprehensive spec. Key tokens: + +```scss +// _legacy_reference/frontend/src/library/common-variables.scss +$accent-color: #a2666f; // rose +$text-color: #5d576b; // muted purple-grey (also iOS theme-color) +$light-color: #ffffff; +$background-gradient: linear-gradient(90deg, #fff9e07f 0, #ffd6d67f 100%); // 50% alpha — modal backdrop +$background-gradient-opaque: linear-gradient(90deg, #fffcf0 0, #ffebeb 100%); // body background +$shadow: 0 0 1.5px 1.5px rgba(0,0,0,0.1), 0 0 3px 2px rgba(0,0,0,0.05); +$shadow-border: 0 0 0 0.75px rgba(0,0,0,0.1); // hairline +$normal-font: 'Open Sans Condensed', sans-serif; +$title-font: 'Raleway', serif; +$mobile-width: 520px; +``` + +Spacing tokens (`library/main.scss`): +```scss +:root { + --large-padding: 30px; // 20px on mobile + --medium-padding: 15px; + --small-padding: 10px; // 7.5px on mobile + --border-radius: 5px; // 3px on mobile +} +``` + +Font sizes (`library/text.scss`): `--larger/large/medium/small-font-size` = `22/18/16/11` desktop, `20/16/14/10` mobile. + +**Animation timings**: +- `$long-animation-time: 200ms` — opacity, hover transforms, modal entry +- `$short-animation-time: 100ms` — tighter transitions (red trash-highlight overlay) +- **Falling animation**: `transform 1.5s cubic-bezier(0.5, 0, 1, 0)` (gravity ease-in) +- **Modal opacity entry/exit**: `300ms` + +## Architectural conventions to follow + +### Components + +- Every component is **standalone**, **OnPush**, with `signal()`-based local state. No NgModule. +- Templates use **`@if` / `@for` / `@switch`** — never `*ngIf`/`*ngFor`. +- Inline templates + inline styles in `@Component({ template: \`...\`, styles: \`...\` })` is the norm. Larger components use templateUrl + styleUrl (only `pages.component`, `page.component`). +- SCSS inside `styles:` template literal — **`//` comments are fine inside SCSS but watch for backticks**; `// `display: contents`` inside a template literal closes it early. Use `/* */` if you need to mention CSS strings in comments. +- Library files (`library/*.scss`) are dropped from the legacy verbatim. Don't refactor them. Components `@import '../../../library/main'` (or similar relative depth). + +### State + +- `StoreService` is the single source of truth (signal-based). +- Mutations update the signal immediately (**optimistic**) and call `scheduleSave()` which debounces 750ms and PUTs the full tree. +- Failure mode: exponential backoff up to 5 attempts (1s, 2s, 4s, 8s, 16s). +- LocalStorage cache key: `life-towers.cache.v4`. Token: `life-towers.token.v4`. +- `init()` flow: stored token? Use it. No token? Mint via `uuidV4()` → register → GET data. On 401: re-register the SAME token (idempotent server-side), never silently mint a fresh one (would orphan data). + +### Reactivity caveats with zoneless + +- Plain field mutations in event handlers (`(click)="x = true"`) still trigger CD because Angular's event manager marks the view dirty — even with zoneless. But any async mutation outside an Angular event (setTimeout, raw addEventListener, MutationObserver) **will not** trigger CD; use signals there. +- `effect()` running on `signal()` reads triggers re-runs; wrap writes in `untracked()` to avoid loops. +- For input-driven derived state that the user can also override (e.g. `tasks.expanded` seeded from `initiallyOpen` but also clickable), use either `linkedSignal` or `effect()` + a flag (the codebase uses the latter for `tasks.component`). + +### Sync model + +- **Tree-replace**: `PUT /api/v1/data` sends the entire user hierarchy atomically. Backend wraps in `BEGIN IMMEDIATE`, deletes existing pages (cascading to towers + blocks via FK), inserts new rows. `position` columns track ordering. +- **No granular endpoints** for individual entity CRUD. Keep it tree-replace. +- Spec is in `docs/api-spec.md`. Backend pydantic models match it. Frontend `models/index.ts` matches it. Field names are **snake_case** on both sides. + +### Backend + +- All endpoints are inside `APIRouter(prefix="/api/v1")`. Spec drives behavior — if you change a limit, update both spec and code. +- Migrations: package data under `src/life_towers/migrations/`, loaded via `importlib.resources.files("life_towers").joinpath("migrations")`. The runner tracks applied state in a `schema_migrations(filename TEXT PRIMARY KEY, applied_at INTEGER)` table. +- All sqlite connections must do `PRAGMA journal_mode=WAL; PRAGMA foreign_keys=ON; PRAGMA busy_timeout=5000`. The `get_connection()` factory does this. +- Errors → JSON `{"error": code, "detail": str}` via a single `HTTPException` handler in `main.py`. Stack traces never leak (logged server-side). +- Rate limits via slowapi: `/register` 30/hour/IP, `GET /data` 60/min/token, `PUT /data` 30/min/token. + +## Visual + interaction details that bit me + +### Falling animation (tower.component) + +The `.block-container` has `transform: scaleY(-1)` so blocks visually fall from the TOP into the bottom of the tower. Each block default-positions at `translateY(500%)` via a `*` rule; the inline `[style.transform]="b._transform"` binding overrides per-block. + +When exactly **one** new done block is added, the `reconcile()` method: +1. Sets the new block's `_transform: 'translateY(500%)'` and `_opacity: '0'` (off-screen) +2. Calls `requestAnimationFrame` → `requestAnimationFrame` to let the browser paint the initial state +3. Sets `_anim: 'descend'`, `_transform: 'translateY(0)'`, `_opacity: '1'` — the CSS transition fires + +**Critical**: `grewByOne` detection is position-independent (set-difference). When a tickbox flips a pending block to done, the new entry inserts at its original `tower.blocks` index, not appended. Use the new ID, not `styled[length-1]`. + +The **date range** slider asymmetry: blocks below `range.from` are removed from `visibleBlocks` entirely (instant shuffle, no gap), blocks above `range.to` get `_anim: 'ascend'` and stay in the list flying up. `prevDoneIds` tracks the full `allDone` array — not the filtered styled list — so range expansions don't mis-fire as "new block". + +### Block-edit carousel (modal/block-edit.component) + +- Lives at `position: fixed; z-index: 10001` to escape the modal dialog wrapper and cover the viewport +- Two placeholder cards flank the real cards so the active card can fully center via `scroll-snap-align: center` +- `.mask` overlay on non-active cards has three tiers: `active opacity 0`, `near-active 0.55`, default `1`. Card opacity also tiered (1 / 0.85 / 0.6) mimicking the legacy `1.33*(1-t/2)` curve +- Backdrop click (anywhere not a non-placeholder card) closes the modal +- Delete on an existing card **does not** close the modal — it stays open and the card re-renders out of the list +- Auto-save on tag/toggle change; description deferred to blur + +### Select-add (shared/select-add) + +- Has a `.top` chip and a `.bottom` slide-down panel. `:has(.bottom.open) .top, .background { border-radius: var(--border-radius) var(--border-radius) 0 0 }` squares the bottom corners when open so the chip and panel read as one card +- Shadow seam between chip + panel solved with `clip-path: inset(...)`: `.background.active` clips bottom (`inset(-6px -6px 0 -6px)`), `.bottom.open` clips top (`inset(0 -6px -6px -6px)`). 6px > the total $shadow spread (5px) so neither edge bleeds across the seam +- Closing animation requires a two-transition setup: default state has `transition: ... visibility 0s $long-animation-time` (visibility delays on close), `.open` overrides with `visibility 0s 0s` (instant on open) + +### Modal shell (modal/modal.component) + +- `:host { display: contents }` — critical. Without this, the `lt-modal` host element takes a flex slot in `pages.component`'s `inner-spacing` layout, pushing the Settings button up when the modal mounts +- `section.modal` is `position: fixed; z-index: 10000` with `transition: opacity 300ms`. The component flips `active = true` in `ngAfterViewInit` via `setTimeout(0)` so the opacity 0 → 1 transition runs +- `ModalStateService.open()` / `.close()` are called in `AfterViewInit`/`OnDestroy`. `page.component` reads `modalState.anyOpen` and binds it to every tower's `[cdkDragDisabled]` so users can't drag towers behind an open modal + +### Carousel card date format + +```ts +formatDate(ts: number): string { + return new Date(ts * 1000).toLocaleString(undefined, { + year: 'numeric', month: 'short', day: 'numeric', + hour: '2-digit', minute: '2-digit', + }); // "May 28, 2026, 14:32" +} +``` + +### Double-slider relative-time labels + +`page.component.ts` formats with `Intl.RelativeTimeFormat(undefined, { numeric: 'auto', style: 'short' })`. Buckets: `<45s` second, `<45min` minute, `<22h` hour, `<26d` day, `<320d` month, else year. Labels are **deduped** by string (multiple distinct timestamps that round to the same "5 hr ago" appear once). + +When `values.length` grows (new block added), the slider snaps the **higher** of `oneValue`/`otherValue` to `MAX - 1` so the newest entry is always visible; the lower thumb (the user's left edge) stays put. + +### Color picker (shared/color-picker) + +- Row of 12 preset color swatches + a rainbow hue slider + a big preview swatch +- Saturation and lightness are FIXED at 0.7 / 0.55. Only hue varies +- Preset hues `[0, 15, 30, 45, 195, 215, 235, 255, 280, 310, 335, 355]` — skips the green/yellow zone (60°–180°) which muddies with the rose accent palette + +### Tickbox (tasks/tasks.component) + +- `✓` glyph is hidden at rest (`opacity: 0`) and only revealed on interaction: `0.85` (hover/focus-visible), `1` (active). It fades via the `opacity` transition +- The tickbox is a ` } }
@@ -41,11 +53,23 @@ import { type="text" #addInput placeholder="Add a value…" + maxlength="200" (keydown.enter)="onAdd(addInput.value); addInput.value = ''" /> - + @if (editable()) { - } @@ -58,6 +82,7 @@ import { @import '../../../../library/main'; $inner-padding: var(--medium-padding); + $dropdown-shadow: 0 4px 14px rgba($text-color, 0.16), $shadow-border; :host { display: block; @@ -80,13 +105,22 @@ import { align-items: center; position: relative; cursor: pointer; + min-height: 46px; + box-sizing: border-box; + gap: var(--small-padding); p { - display: inline-block; + display: block; @include sub-title-text(); + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: left; } img.arrow { + flex: 0 0 auto; @include square(16px); transition: transform $long-animation-time; @@ -98,81 +132,129 @@ import { .bottom-container { width: 100%; - height: 300px; position: absolute; - overflow-y: hidden; + top: 100%; + left: 0; + right: 0; + overflow: visible; pointer-events: none; + z-index: 5; .bottom { - position: absolute; + position: relative; width: 100%; - pointer-events: all; + pointer-events: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; border-radius: 0 0 var(--border-radius) var(--border-radius); padding: $inner-padding; - padding-top: 0; - @include inner-spacing($inner-padding); + padding-top: var(--small-padding); + gap: var(--small-padding); // Default (closed) state — also the target of the close transition. background-color: transparent; box-shadow: none; - transform: translateY(-100%); + transform: translateY(-8px); + opacity: 0; visibility: hidden; + // Clip the top edge so the panel's shadow can't bleed back up into + // the chip area; sides + bottom get a 10px slack for the shadow. + clip-path: inset(0 -10px -10px -10px); // Delay the visibility change until after the slide animation finishes // so the panel stays visible while it animates closed. transition: transform $long-animation-time, + opacity $long-animation-time, background-color $long-animation-time, box-shadow $long-animation-time, visibility 0s $long-animation-time; &.open { visibility: visible; + pointer-events: all; transform: none; + opacity: 1; background-color: $light-color; - box-shadow: $shadow; - // Show shadow on left/right/bottom only; clip the top edge so the - // shadow doesn't bleed over the seam where .bottom meets .top. - clip-path: inset(0 -6px -6px -6px); + box-shadow: $dropdown-shadow; // On open, visibility flips immediately (no delay); transform + // colors + shadow animate over $long-animation-time. transition: transform $long-animation-time, + opacity $long-animation-time, background-color $long-animation-time, box-shadow $long-animation-time, visibility 0s 0s; } - p { + .option { @include sub-title-text(); - display: inline-block; + display: flex; + align-items: center; + width: 100%; + min-height: 36px; + margin: 0; + padding: 0; + border: 0; + background: transparent; text-align: left; cursor: pointer; + + &:after { + display: none; + } + + @media (max-width: $mobile-width) { + min-height: 42px; + } } input[type='text'] { @include sub-title-text(); width: 100%; + min-height: 36px; + box-sizing: border-box; + text-align: left; + + &::placeholder { + color: rgba($text-color, 0.72); + opacity: 1; + } + + @media (max-width: $mobile-width) { + min-height: 42px; + } } .add-row { - height: 32px; - @media (max-width: $mobile-width) { height: 24px; } + min-height: 40px; position: relative; width: 100%; display: flex; - align-items: center; + align-items: flex-end; gap: var(--small-padding); input[type='text'] { flex: 1; + min-height: 0; + padding: 0; + border-bottom: solid 2px transparent; + + &:focus, + &:focus-visible { + box-shadow: none; + border-bottom-color: $text-color; + } } button { margin: 0; - position: static; + position: relative; + flex: 0 0 auto; + + &.add-button { + align-self: flex-end; + } &.pen { opacity: 0.25; @@ -184,6 +266,10 @@ import { background: transparent; position: relative; + // Kill the global button's hover-grow underline pseudo-element + // for the icon-only edit control. + &:after { content: none; display: none; } + img { @include square(16px); } @@ -224,16 +310,18 @@ import { width: 100%; @include card(); z-index: 3; + box-sizing: border-box; transition: box-shadow $long-animation-time, height $long-animation-time, border-radius $long-animation-time; &.active { - box-shadow: $shadow; - // Show shadow on top/left/right only; clip the bottom edge so the - // shadow doesn't bleed over the seam where .top meets .bottom. - clip-path: inset(-6px -6px 0 -6px); + // Same shadow recipe as the panel below so the two halves read as + // one continuous card. Clip the bottom edge so this shadow doesn't + // bleed across the seam where .top meets .bottom. + box-shadow: $dropdown-shadow; + clip-path: inset(-10px -10px 0 -10px); } } @@ -251,25 +339,31 @@ import { } } + // Hover lifts the chip — but only when the dropdown is closed. When + // it's open the chip is already showing $dropdown-shadow and a hover + // override would make the top heavier than the panel below. &:hover { @media (min-width: $mobile-width) { - .background { box-shadow: $shadow; } + .background:not(.active) { box-shadow: $shadow; } } } &.shadow-border { .background.active { box-shadow: $shadow-border; - clip-path: inset(-6px -6px 0 -6px); + clip-path: inset(-10px -10px 0 -10px); + } + .bottom.open { + box-shadow: $shadow-border; } } &.shadow-border:hover { - .background { box-shadow: $shadow-border; } + .background:not(.active) { box-shadow: $shadow-border; } } &.always-shadow { - .background { box-shadow: $shadow; } + .background:not(.active) { box-shadow: $shadow; } // When open, clip the bottom so the always-on shadow doesn't bleed // over the seam; restore full shadow when closed. &:has(.bottom.open) .background { @@ -279,7 +373,7 @@ import { } `, }) -export class SelectAddComponent implements OnChanges { +export class SelectAddComponent { // ── New API (spec) ───────────────────────────────────────────────────────── /** List of string options */ readonly items = input([]); @@ -309,6 +403,7 @@ export class SelectAddComponent implements OnChanges { // ── Internal state ───────────────────────────────────────────────────────── readonly open = signal(false); readonly editing = signal(false); + private readonly host = inject(ElementRef); // Resolved values that merge old + new API protected resolvedItems(): string[] { @@ -320,7 +415,7 @@ export class SelectAddComponent implements OnChanges { protected resolvedSelected(): string | null { // New API: string const s = this.selected(); - if (s != null) return s; + if (s != null && s.trim()) return s; // Legacy API: index into options const idx = this.selectedIndex(); const opts = this.resolvedItems(); @@ -328,8 +423,18 @@ export class SelectAddComponent implements OnChanges { return null; } - ngOnChanges(_changes: SimpleChanges): void { - // Nothing to do — signals handle reactivity + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + if (!this.open()) return; + if (!this.host.nativeElement.contains(event.target as Node)) { + this.open.set(false); + this.editing.set(false); + } + } + + toggleOpen(event: Event): void { + event.stopPropagation(); + this.open.update((v) => !v); } onSelectItem(item: string): void { From e3dcf75eb5bea9bf9910b575785447a29c5d131f Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 11/17] frontend(modals): consolidate settings modals and drop page-settings --- .../app/components/modal/modal.component.ts | 46 +++++- .../modal/page-settings.component.ts | 141 ------------------ .../components/modal/settings.component.ts | 104 +++++++++---- .../modal/tower-settings.component.ts | 85 ++++++++--- 4 files changed, 178 insertions(+), 198 deletions(-) delete mode 100644 frontend/src/app/components/modal/page-settings.component.ts diff --git a/frontend/src/app/components/modal/modal.component.ts b/frontend/src/app/components/modal/modal.component.ts index 4c854ce..47c9eb8 100644 --- a/frontend/src/app/components/modal/modal.component.ts +++ b/frontend/src/app/components/modal/modal.component.ts @@ -2,6 +2,7 @@ import { Component, ChangeDetectionStrategy, output, + input, signal, AfterViewInit, OnDestroy, @@ -22,8 +23,20 @@ import { ModalStateService } from '../../services/modal-state.service'; class="modal" [class.active]="active()" (click)="onBackdropClick($event)" + (keydown.enter)="onBackdropClick($any($event))" + tabindex="-1" > -
+ @@ -31,19 +44,35 @@ import { ModalStateService } from '../../services/modal-state.service'; styles: ` @import '../../../library/main'; - section.modal { + /* Keep the component host out of parent flex/grid flow. Parent containers + apply spacing to direct children, so relying on the fixed child alone can + still let become a layout item when it mounts. */ + :host { position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; z-index: 10000; + display: block; + margin: 0 !important; + } + + section.modal { + position: absolute; + inset: 0; @include center-child(); padding: var(--large-padding); box-sizing: border-box; - background: $background-gradient; + background: rgba(255, 248, 248, 0.94); transition: opacity 300ms; opacity: 1; + overflow-y: auto; + + @media (max-width: $mobile-width) { + padding: var(--medium-padding); + } + + @media (max-height: $min-height) { + align-items: flex-start; + } &:not(.active) { opacity: 0; @@ -57,6 +86,8 @@ import { ModalStateService } from '../../services/modal-state.service'; `, }) export class ModalComponent implements AfterViewInit, OnDestroy { + readonly labelledBy = input(null); + readonly describedBy = input(null); readonly close = output(); // The active signal starts false; AfterViewInit flips it true on next tick @@ -65,7 +96,6 @@ export class ModalComponent implements AfterViewInit, OnDestroy { private readonly dialogRef = viewChild>('dialog'); private previousFocus: HTMLElement | null = null; - private escListener!: (e: KeyboardEvent) => void; private readonly modalState = inject(ModalStateService); ngAfterViewInit(): void { diff --git a/frontend/src/app/components/modal/page-settings.component.ts b/frontend/src/app/components/modal/page-settings.component.ts deleted file mode 100644 index ab6ebc7..0000000 --- a/frontend/src/app/components/modal/page-settings.component.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { - Component, - ChangeDetectionStrategy, - input, - output, - OnInit, - inject, - signal, -} from '@angular/core'; -import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; -import { Page } from '../../models'; -import { ToggleComponent } from '../shared/toggle/toggle.component'; - -export interface PageSettingsResult { - name: string; - hide_create_tower_button: boolean; - keep_tasks_open: boolean; -} - -@Component({ - selector: 'lt-page-settings', - standalone: true, - imports: [ReactiveFormsModule, ToggleComponent], - changeDetection: ChangeDetectionStrategy.OnPush, - template: ` -
-
-

{{ page() ? 'Page settings' : 'New page' }}

-
- -
- - -
- -
- -
- -
- - - - @if (page()) { - - } -
- `, - styles: ` - @import '../../../library/main'; - - :host { - @include card(); - width: 66vw; - max-width: 400px; - @media (max-width: $mobile-width) { width: 300px; } - box-sizing: border-box; - padding: var(--large-padding); - position: relative; - box-shadow: $shadow; - @include inner-spacing(var(--large-padding)); - display: block; - - .header { - @include center-child(); - - .exit { - position: absolute; - left: var(--large-padding); - @include exit(); - } - } - - input[type='text'] { - text-align: center; - } - - .toggle-row { - display: flex; - justify-content: center; - } - - button { - display: block; - } - } - `, -}) -export class PageSettingsComponent implements OnInit { - readonly page = input(null); - readonly save = output(); - readonly delete = output(); - readonly close = output(); - - private readonly fb = inject(FormBuilder); - - form = this.fb.group({ - name: ['', [Validators.required, Validators.maxLength(200)]], - }); - - hideCreateTowerButton = signal(false); - readonly keepTasksOpen = signal(false); - - ngOnInit(): void { - const p = this.page(); - if (p) { - this.form.patchValue({ name: p.name }); - this.hideCreateTowerButton.set(p.hide_create_tower_button); - this.keepTasksOpen.set(p.keep_tasks_open); - } - } - - onSubmit(): void { - if (this.form.invalid) return; - const v = this.form.value; - this.save.emit({ - name: v.name ?? '', - hide_create_tower_button: this.hideCreateTowerButton(), - keep_tasks_open: this.keepTasksOpen(), - }); - } -} diff --git a/frontend/src/app/components/modal/settings.component.ts b/frontend/src/app/components/modal/settings.component.ts index c428d64..9d044ce 100644 --- a/frontend/src/app/components/modal/settings.component.ts +++ b/frontend/src/app/components/modal/settings.component.ts @@ -16,9 +16,6 @@ export interface UpdatePagePayload { keep_tasks_open: boolean; } -const UUIDV4_RE = - /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i; - @Component({ selector: 'lt-settings', standalone: true, @@ -26,7 +23,7 @@ const UUIDV4_RE = changeDetection: ChangeDetectionStrategy.OnPush, template: `
- +

Settings

@if (page()) { @@ -36,26 +33,30 @@ const UUIDV4_RE = - +
+ - + +
- - - +
+ +
@if (tower()) { + + } @else { + } `, @@ -55,30 +57,45 @@ export interface TowerSettingsResult { @include card(); width: 66vw; max-width: 400px; - @media (max-width: $mobile-width) { width: 300px; } + @media (max-width: $mobile-width) { + width: 88vw; + max-width: 88vw; + padding: var(--medium-padding); + } box-sizing: border-box; padding: var(--large-padding); + padding-top: calc(var(--large-padding) + var(--medium-padding)); position: relative; box-shadow: $shadow; - @include inner-spacing(var(--large-padding)); display: block; - .header { - @include center-child(); - - .exit { - position: absolute; - left: var(--large-padding); - @include exit(); - } + .exit { + position: absolute; + top: var(--medium-padding); + right: var(--medium-padding); + @include exit(); } - input[type='text'] { + form { + @include inner-spacing(var(--large-padding)); + } + + .title-input { + @include title-text(); text-align: center; + width: 100%; + background: transparent; + border: 0; } button { display: block; + // Stay full-width on mobile, but switch to flex so forms.scss's + // bottom-alignment keeps the underline hugging the label in the 42px + // tap target (plain block centres the text and strands the underline). + @media (max-width: $mobile-width) { + display: flex; + } } } `, @@ -90,6 +107,7 @@ export class TowerSettingsComponent implements OnInit { readonly close = output(); private readonly fb = inject(FormBuilder); + private readonly destroyRef = inject(DestroyRef); form = this.fb.group({ name: ['', [Validators.required, Validators.maxLength(200)]], @@ -102,17 +120,38 @@ export class TowerSettingsComponent implements OnInit { if (t) { this.form.patchValue({ name: t.name }); this.currentColor = { ...t.base_color }; + + // Edit mode: persist name changes as they happen. Wire this up *after* + // the initial patchValue so seeding the form doesn't fire a save. + this.form.valueChanges + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe(() => this.autoSave()); } } onColorChange(color: HslColor): void { this.currentColor = color; + // In edit mode the picker is a live control — commit each change. + if (this.tower()) this.autoSave(); } onSubmit(): void { + // Only the create flow reaches here via its Submit button; edit mode + // auto-saves (and Enter on the single field is a harmless redundant save). + this.tryEmitSave(); + } + + private autoSave(): void { + this.tryEmitSave(); + } + + private tryEmitSave(): void { if (this.form.invalid) return; - const v = this.form.value; - this.save.emit({ name: v.name ?? '', base_color: this.currentColor }); + this.emitSave(); + } + + private emitSave(): void { + this.save.emit({ name: this.form.value.name ?? '', base_color: this.currentColor }); } } From bcca7f4f2ef8ba3c069e27c048f50e83e6a98d6d Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 12/17] frontend(block-edit): rework the block edit carousel and add tests --- .../components/modal/block-edit.component.ts | 393 ++++++++++++++++-- .../modal/block-edit.component.vitest.ts | 14 + 2 files changed, 371 insertions(+), 36 deletions(-) create mode 100644 frontend/src/app/components/modal/block-edit.component.vitest.ts diff --git a/frontend/src/app/components/modal/block-edit.component.ts b/frontend/src/app/components/modal/block-edit.component.ts index a7d5d3b..58cad90 100644 --- a/frontend/src/app/components/modal/block-edit.component.ts +++ b/frontend/src/app/components/modal/block-edit.component.ts @@ -3,9 +3,7 @@ import { ChangeDetectionStrategy, input, output, - inject, signal, - computed, effect, viewChild, ElementRef, @@ -15,7 +13,6 @@ import { } from '@angular/core'; import { Block, HslColor } from '../../models'; import { SelectAddComponent } from '../shared/select-add/select-add.component'; -import { ToggleComponent } from '../shared/toggle/toggle.component'; import { getColorOfTag } from '../../utils/color'; export interface BlockEditSave { @@ -24,25 +21,41 @@ export interface BlockEditSave { tag: string; description: string; is_done: boolean; + difficulty: number; } interface EditedValue { tag: string; description: string; is_done: boolean; + difficulty: number; +} + +function clampDifficulty(value: number): number { + return Math.max(1, Math.min(100, value)); +} + +export function createDoneValue(defaultDone: boolean, currentDone: boolean, edited: boolean): boolean { + return edited ? currentDone : defaultDone; } @Component({ selector: 'lt-block-edit', standalone: true, - imports: [SelectAddComponent, ToggleComponent], + imports: [SelectAddComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` + @if (viewTitle()) { +

{{ viewTitle() }}

+ } +
@@ -51,17 +64,27 @@ interface EditedValue { class="card" [class.active]="activeIdx() === i + 1" [class.near-active]="activeIdx() === i || activeIdx() === i + 2" + role="button" + tabindex="0" + [attr.aria-label]="'Focus ' + (editedFor(b.id).tag || 'block')" (click)="onCardClick(i + 1)" + (keydown.enter)="onCardClick(i + 1)" + (keydown.space)="$event.preventDefault(); onCardClick(i + 1)" >
-
+
-

{{ formatDate(b.created_at) }}

+

{{ formatDate(b.created_at, true) }}

@@ -70,7 +93,7 @@ interface EditedValue { [selected]="editedFor(b.id).tag" [alwaysDropShadow]="true" [onlyShadowBorder]="true" - placeholder="Tag this item…" + [placeholder]="tagPlaceholder('Tag this item…')" (select)="updateTag(b.id, $event)" (add)="updateTag(b.id, $event)" /> @@ -78,18 +101,40 @@ interface EditedValue { -
- + + Already done + + +
+ Difficulty +
+ + {{ editedFor(b.id).difficulty }} + +
@@ -102,12 +147,22 @@ interface EditedValue { class="card create-card" [class.active]="activeIdx() === blocks().length + 1" [class.near-active]="activeIdx() === blocks().length" + role="button" + tabindex="0" + aria-label="Focus create card" (click)="onCardClick(blocks().length + 1)" + (keydown.enter)="onCardClick(blocks().length + 1)" + (keydown.space)="$event.preventDefault(); onCardClick(blocks().length + 1)" >
-
+
Create now
-
+
@@ -129,17 +184,39 @@ interface EditedValue { -
- + + Already done + + +
+ Difficulty +
+ + {{ newValue().difficulty }} + +
@@ -166,17 +243,51 @@ interface EditedValue { right: 0; bottom: 0; z-index: 10001; // above modal backdrop (10000) + + @media (max-height: $min-height) { + align-items: flex-start; + overflow-y: auto; + } + } + + .view-title { + position: fixed; + top: var(--large-padding); + left: var(--large-padding); + right: var(--large-padding); + z-index: 10002; + margin: 0; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + pointer-events: none; } .carousel { + --title-clearance: calc((var(--large-padding) * 2) + var(--larger-font-size)); width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box; + padding: var(--title-clearance) 0 var(--large-padding); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + @media (max-width: $mobile-width) { + padding: var(--title-clearance) var(--medium-padding) var(--medium-padding); + } + + @media (max-height: $min-height) { + min-height: max-content; + align-items: flex-start; + padding-top: var(--title-clearance); + padding-bottom: var(--medium-padding); + overflow-y: visible; + } &::-webkit-scrollbar { width: 0; @@ -192,8 +303,12 @@ interface EditedValue { flex: 0 0 auto; width: 66vw; max-width: 400px; + scroll-snap-align: center; @media (max-width: $mobile-width) { - width: 300px; + width: min(88vw, 360px); + max-width: calc(100vw - (2 * var(--medium-padding))); + padding: var(--medium-padding); + margin: 0 calc(var(--small-padding) / 2); opacity: 1 !important; } box-sizing: border-box; @@ -246,6 +361,11 @@ interface EditedValue { opacity: 0 !important; width: 60vw; max-width: 60vw; + @media (max-width: $mobile-width) { + width: var(--medium-padding); + max-width: var(--medium-padding); + min-width: var(--medium-padding); + } box-shadow: none; background: transparent; } @@ -253,10 +373,16 @@ interface EditedValue { .header { @include center-child(); position: relative; + gap: var(--small-padding); + + h1 { + min-width: 0; + overflow-wrap: anywhere; + } .exit { position: absolute; - left: 0; + right: 0; @include exit(); } @@ -276,6 +402,132 @@ interface EditedValue { } } + .done-checkbox { + @include medium-text(); + display: flex; + align-items: center; + justify-content: center; + gap: var(--small-padding); + width: max-content; + max-width: 100%; + margin: 0 auto var(--medium-padding); + cursor: pointer; + + input[type='checkbox'] { + -webkit-appearance: none; + appearance: none; + @include square(22px); + flex: 0 0 auto; + position: relative; + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 4px; + background: $light-color; + box-shadow: $shadow-border; + cursor: pointer; + transition: background-color $short-animation-time, box-shadow $long-animation-time, transform $short-animation-time; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 3px; + width: 6px; + height: 12px; + border: solid $light-color; + border-width: 0 2px 2px 0; + opacity: 0; + transform: rotate(45deg) scale(0.8); + transition: opacity $short-animation-time, transform $short-animation-time; + } + + &:checked { + background: $text-color; + + &::after { + opacity: 1; + transform: rotate(45deg) scale(1); + } + } + + &:hover, + &:focus-visible { + box-shadow: $shadow; + } + + &:active { + transform: scale(0.95); + } + } + + span { + line-height: 1.3; + } + } + + .difficulty { + @include medium-text(); + display: flex; + align-items: center; + justify-content: center; + gap: var(--small-padding); + width: max-content; + max-width: 100%; + margin: 0 auto var(--medium-padding); + + .stepper { + display: flex; + align-items: center; + gap: var(--small-padding); + + .value { + min-width: 1.5em; + text-align: center; + font-variant-numeric: tabular-nums; + } + + button.step { + all: unset; // strip native + global button styles + @include square(22px); + @include center-child(); + flex: 0 0 auto; + box-sizing: border-box; + border-radius: 4px; + background: $light-color; + box-shadow: $shadow-border; + cursor: pointer; + // all:unset drops the font to serif and the global button's hover + // underline (button::after) survives the reset — re-assert both. + font: bold 18px/1 $normal-font; + color: $text-color; + user-select: none; + transition: box-shadow $long-animation-time, transform $short-animation-time, opacity $short-animation-time; + + &::after { content: none; } + + @media (max-width: $mobile-width) { + @include square(26px); + } + + &:hover, + &:focus-visible { + box-shadow: $shadow; + } + + &:active { + transform: scale(0.95); + } + + &:disabled { + opacity: 0.4; + cursor: not-allowed; + box-shadow: $shadow-border; + } + } + } + } + .bottom { height: 32px; @media (max-width: $mobile-width) { @@ -291,10 +543,29 @@ interface EditedValue { transform: translateY(-50%) translateX(-50%); } } + + @media (max-width: $mobile-width) { + lt-select-add, + .done-checkbox { + max-width: 100%; + width: 100%; + } + + .bottom { + min-height: 42px; + + button { + width: max-content; + max-width: 100%; + min-height: 42px; + } + } + } } `, }) export class BlockEditComponent implements AfterViewInit { + readonly viewTitle = input(''); readonly blocks = input.required(); readonly activeBlockId = input(null); readonly tags = input([]); @@ -317,7 +588,9 @@ export class BlockEditComponent implements AfterViewInit { tag: '', description: '', is_done: true, + difficulty: 1, }); + private newDoneEdited = false; // 1-based index of the centered card. 0/N+2 are placeholders. readonly activeIdx = signal(1); @@ -334,6 +607,7 @@ export class BlockEditComponent implements AfterViewInit { tag: b.tag, description: b.description, is_done: b.is_done, + difficulty: b.difficulty ?? 1, }); } untracked(() => this.editedValues.set(m)); @@ -344,13 +618,24 @@ export class BlockEditComponent implements AfterViewInit { const t = this.tags(); untracked(() => { const cur = this.newValue(); - if (!cur.tag && t.length > 0) { - this.newValue.set({ ...cur, tag: t[0], is_done: this.defaultDone() }); - } else if (!cur.tag) { - this.newValue.set({ ...cur, is_done: this.defaultDone() }); + if (!cur.tag) { + this.newValue.set({ + ...cur, + tag: t.length > 0 ? t[0] : '', + }); } }); }); + + effect(() => { + const isDone = this.defaultDone(); + untracked(() => { + this.newValue.update((v) => ({ + ...v, + is_done: createDoneValue(isDone, v.is_done, this.newDoneEdited), + })); + }); + }); } ngAfterViewInit(): void { @@ -373,26 +658,44 @@ export class BlockEditComponent implements AfterViewInit { tag: '', description: '', is_done: false, + difficulty: 1, } ); } - colorOfTagForBlock(id: string): string { - const v = this.editedFor(id); - return v.tag ? getColorOfTag(v.tag, this.baseColor()) : 'transparent'; + private colorOfTag(tag: string): string { + return tag ? getColorOfTag(tag, this.baseColor()) : 'transparent'; } - colorOfNewTag = computed(() => { - const t = this.newValue().tag; - return t ? getColorOfTag(t, this.baseColor()) : 'transparent'; - }); + colorOfTagForBlock(id: string): string { + return this.colorOfTag(this.editedFor(id).tag); + } - formatDate(ts: number): string { + tagPlaceholder(fallback: string): string { + return this.tags().length === 0 ? 'No tags yet. Open to create one.' : fallback; + } + + colorOfNewTag(): string { + return this.colorOfTag(this.newValue().tag); + } + + formatDate(ts: number, compact = false): string { const d = new Date(ts * 1000); - return d.toLocaleDateString(undefined, { + if (compact) { + return d.toLocaleString(undefined, { + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); + } + // e.g. "May 28, 2026, 14:32" + return d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', + hour: '2-digit', + minute: '2-digit', }); } @@ -413,6 +716,12 @@ export class BlockEditComponent implements AfterViewInit { this.flushExisting(id); } + updateDifficulty(id: string, delta: number): void { + const next = clampDifficulty(this.editedFor(id).difficulty + delta); + this.patchEdited(id, { difficulty: next }); + this.flushExisting(id); + } + private patchEdited(id: string, patch: Partial): void { this.editedValues.update((m) => { const v = m.get(id); @@ -426,7 +735,13 @@ export class BlockEditComponent implements AfterViewInit { flushExisting(id: string): void { const v = this.editedFor(id); if (!v.tag) return; // Skip empty saves - this.save.emit({ id, tag: v.tag, description: v.description, is_done: v.is_done }); + this.save.emit({ + id, + tag: v.tag, + description: v.description, + is_done: v.is_done, + difficulty: v.difficulty, + }); } onDelete(id: string): void { @@ -444,9 +759,14 @@ export class BlockEditComponent implements AfterViewInit { } updateNewDone(is_done: boolean): void { + this.newDoneEdited = true; this.newValue.update((v) => ({ ...v, is_done })); } + updateNewDifficulty(delta: number): void { + this.newValue.update((v) => ({ ...v, difficulty: clampDifficulty(v.difficulty + delta) })); + } + submitNew(): void { const v = this.newValue(); if (!v.tag) return; @@ -455,6 +775,7 @@ export class BlockEditComponent implements AfterViewInit { tag: v.tag, description: v.description, is_done: v.is_done, + difficulty: v.difficulty, }); this.close.emit(); } diff --git a/frontend/src/app/components/modal/block-edit.component.vitest.ts b/frontend/src/app/components/modal/block-edit.component.vitest.ts new file mode 100644 index 0000000..b69ca31 --- /dev/null +++ b/frontend/src/app/components/modal/block-edit.component.vitest.ts @@ -0,0 +1,14 @@ +import { describe, expect, it } from 'vitest'; +import { createDoneValue } from './block-edit.component'; + +describe('createDoneValue', () => { + it('uses the create-card default before the user edits the checkbox', () => { + expect(createDoneValue(false, true, false)).toBe(false); + expect(createDoneValue(true, false, false)).toBe(true); + }); + + it('keeps the user-edited checkbox value', () => { + expect(createDoneValue(false, true, true)).toBe(true); + expect(createDoneValue(true, false, true)).toBe(false); + }); +}); From 108cfb9a19a4758e186b695ce96a9f49bb493525 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 13/17] frontend(welcome): revamp the zero-state intro modal --- .../components/welcome/welcome.component.ts | 343 ++++++++++++++++-- 1 file changed, 321 insertions(+), 22 deletions(-) diff --git a/frontend/src/app/components/welcome/welcome.component.ts b/frontend/src/app/components/welcome/welcome.component.ts index 5edf74b..b571af2 100644 --- a/frontend/src/app/components/welcome/welcome.component.ts +++ b/frontend/src/app/components/welcome/welcome.component.ts @@ -1,31 +1,97 @@ import { Component, ChangeDetectionStrategy, output } from '@angular/core'; +import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'lt-welcome', standalone: true, - imports: [], + imports: [A11yModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
- +

Welcome to Life Towers

-

Welcome to Life Towers

+ -

- A visual TODO with bite. Each page is a context (work, hobbies, a project). - Each tower is a stack of related tasks. As you finish a task, it falls into the - tower as a colored square — the more you do, the taller it grows. +

+ Life Towers turns completed tasks into visible stacks. Create pages for work, hobbies, + home, or any project. Add towers for task groups, then check off tasks to build them + block by block.

-

- Everything you write is saved to a small remote database, keyed to a private UUID token shown - under Settings → Account. Copy that token to recover your data on another device, or - paste a friend's token to look at theirs. +

+ Preview showing three towers with pending task bars at the top and completed task + blocks stacked below.

+ + +

How Life Towers works

+
+
+
Pages
+
Keep each area separate.
+
+
+
Towers
+
Stack related tasks together.
+
+
+
Blocks
+
Finished tasks become colored blocks.
+
+
- - + +
`, @@ -34,18 +100,49 @@ import { Component, ChangeDetectionStrategy, output } from '@angular/core'; :host { display: block; } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0 0 0 0); + clip-path: inset(50%); + white-space: nowrap; + border: 0; + } + .welcome-card { @include card(); - width: 66vw; - max-width: 480px; - @media (max-width: $mobile-width) { width: 300px; } + width: min(560px, calc(100vw - (2 * var(--large-padding)))); + max-width: 560px; + max-height: calc(100svh - (2 * var(--medium-padding))); + overflow-y: auto; + @media (max-width: $mobile-width) { + width: min(88vw, calc(100vw - (2 * var(--medium-padding)))); + max-width: 88vw; + padding: var(--medium-padding); + } box-sizing: border-box; padding: var(--large-padding); position: relative; box-shadow: $shadow; text-align: left; + font-family: $normal-font; + font-weight: 300; + font-size: var(--medium-font-size); + line-height: 1.45; @include inner-spacing(var(--medium-padding)); + h2, + h3, + p, + dl, + dd { + margin: 0; + } + .exit { position: absolute; top: var(--medium-padding); @@ -54,29 +151,231 @@ import { Component, ChangeDetectionStrategy, output } from '@angular/core'; } h2 { + font-family: $title-font; + font-weight: 400; + font-size: var(--larger-font-size); text-align: center; - margin-bottom: var(--medium-padding); + padding: 0 36px; + line-height: 1.25; + + @media (max-width: $mobile-width) { + padding: 0 28px; + } } - p.lead { color: $text-color; } + .lead { + color: $text-color; + font-family: inherit; + font-weight: inherit; + font-size: inherit; + line-height: inherit; + max-width: 46ch; + margin-inline: auto; + text-align: center; + } - p.muted { - color: rgba($text-color, 0.7); - font-size: var(--medium-font-size); - em { font-style: italic; } + .tower-preview { + box-sizing: border-box; + padding: var(--medium-padding) 0; + border-top: 1px solid rgba($text-color, 0.08); + border-bottom: 1px solid rgba($text-color, 0.08); + + @media (max-width: $mobile-width) { + padding-block: var(--small-padding); + } + } + + .preview-shell { + width: min(100%, 370px); + margin: 0 auto; + } + + .preview-page-tab { + width: 96px; + height: 14px; + margin: 0 auto var(--small-padding); + border-radius: var(--border-radius); + background: rgba($text-color, 0.08); + box-shadow: $shadow-border; + } + + .preview-towers { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + align-items: end; + gap: var(--small-padding); + } + + .preview-tower { + display: flex; + flex-direction: column; + min-height: 128px; + padding: 6px; + box-sizing: border-box; + border-radius: var(--border-radius); + background: rgba($text-color, 0.025); + box-shadow: $shadow-border; + } + + .preview-task { + display: block; + width: 74%; + height: 5px; + margin-bottom: 4px; + border-radius: var(--border-radius); + background: var(--task-color); + } + + .preview-task--short { + width: 48%; + } + + .preview-stack { + display: flex; + flex-flow: row wrap-reverse; + align-content: flex-start; + gap: 2px; + min-height: 86px; + margin-top: auto; + + span { + display: block; + flex: 0 0 calc((100% - 4px) / 3); + aspect-ratio: 1; + border-radius: 2px; + background: var(--block-color); + box-shadow: $shadow-border; + } + + span:nth-child(2n) { + filter: saturate(0.9) brightness(1.06); + } + + span:nth-child(3n) { + filter: saturate(1.08) brightness(0.96); + } + } + + @media (prefers-reduced-motion: no-preference) { + @keyframes preview-task-pulse { + 0%, 100% { + opacity: 0.42; + transform: scaleX(0.86); + } + 45%, 70% { + opacity: 1; + transform: scaleX(1); + } + } + + @keyframes preview-block-fall { + 0% { + opacity: 0; + transform: translateY(-220%); + } + 60%, 100% { + opacity: 1; + transform: translateY(0); + } + } + + .preview-task { + transform-origin: left center; + animation: preview-task-pulse 2600ms ease-in-out infinite; + } + + .preview-stack span { + opacity: 0; + animation: preview-block-fall 1200ms cubic-bezier(0.5, 0, 1, 0) forwards; + animation-delay: calc(160ms + var(--fall-index, 0) * 95ms); + } + + .preview-stack span:nth-child(1) { --fall-index: 0; } + .preview-stack span:nth-child(2) { --fall-index: 1; } + .preview-stack span:nth-child(3) { --fall-index: 2; } + .preview-stack span:nth-child(4) { --fall-index: 3; } + .preview-stack span:nth-child(5) { --fall-index: 4; } + .preview-stack span:nth-child(6) { --fall-index: 5; } + .preview-stack span:nth-child(7) { --fall-index: 6; } + .preview-stack span:nth-child(8) { --fall-index: 7; } + .preview-stack span:nth-child(9) { --fall-index: 8; } + } + + .preview-tower--reading { + --block-color: hsl(18, 70%, 58%); + --task-color: hsla(18, 70%, 58%, 0.26); + } + + .preview-tower--projects { + --block-color: hsl(209, 65%, 52%); + --task-color: hsla(209, 65%, 52%, 0.24); + } + + .preview-tower--exercise { + --block-color: hsl(130, 45%, 44%); + --task-color: hsla(130, 45%, 44%, 0.22); + } + + .basics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--small-padding); + + @media (max-width: $mobile-width) { + grid-template-columns: 1fr; + } + } + + .basic { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; + } + + .basic__label, + .basic__text { + font-family: inherit; + font-weight: inherit; + font-size: inherit; + line-height: inherit; + } + + .basic__label { + color: $text-color; + } + + .basic__text { + color: rgba($text-color, 0.82); } .actions { display: flex; justify-content: space-around; + align-items: flex-end; + flex-wrap: wrap; gap: var(--large-padding); margin-top: var(--large-padding); + button { + font-family: inherit; + font-weight: inherit; + font-size: inherit; + margin: 0; + max-width: 100%; + line-height: inherit; + text-align: center; + } + button.primary { color: $accent-color; border-bottom-color: rgba($accent-color, 0.33); &:after { background-color: $accent-color; } } + + @media (max-width: $mobile-width) { + gap: var(--small-padding); + } } } `, From 8390ece3349f691bc7a09fcdac40e28cd60c9455 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 14/17] frontend(page): update page layout, slider and page selector --- .../app/components/page/page.component.html | 18 ++++- .../app/components/page/page.component.scss | 77 +++++++++++++----- .../src/app/components/page/page.component.ts | 42 ++++++++-- .../app/components/pages/pages.component.html | 33 +++++++- .../app/components/pages/pages.component.scss | 79 ++++++++++++++++++- .../app/components/pages/pages.component.ts | 54 +++++++++++-- 6 files changed, 257 insertions(+), 46 deletions(-) diff --git a/frontend/src/app/components/page/page.component.html b/frontend/src/app/components/page/page.component.html index 34d0292..431d960 100644 --- a/frontend/src/app/components/page/page.component.html +++ b/frontend/src/app/components/page/page.component.html @@ -7,10 +7,11 @@ @for (tower of page().towers; track tower.id) { - Add tower + Add tower
}
@@ -48,7 +58,7 @@ @if (showAddTower()) { - + } @@ -56,7 +66,7 @@
-
+

Delete tower

Delete {{ confirmDeleteTowerName() || 'this tower' }} and all of its blocks? This can't be undone.

diff --git a/frontend/src/app/components/page/page.component.scss b/frontend/src/app/components/page/page.component.scss index 6aa6a0c..ed8aa0c 100644 --- a/frontend/src/app/components/page/page.component.scss +++ b/frontend/src/app/components/page/page.component.scss @@ -1,10 +1,11 @@ -@import '../../../styles'; +@import '../../../library/main'; :host { display: flex; flex-direction: column; height: 100%; + min-height: 0; position: relative; // anchor for absolute-positioned .trash @include inner-spacing(var(--large-padding)); @@ -18,14 +19,17 @@ justify-content: center; width: 100%; + box-sizing: border-box; margin-left: auto; margin-right: auto; - flex: 1 0 auto; + flex: 1 1 auto; + min-height: 0; transition: box-shadow $short-animation-time; - max-width: 800px; + max-width: 100%; + gap: var(--medium-padding); &.cdk-drop-list-dragging { *:not(.cdk-drag-placeholder) { @@ -52,28 +56,45 @@ } & > * { + width: 100%; max-width: 200px; - box-sizing: content-box; - flex: 0 0 auto; - - &:not(:nth-last-child(1)) { - margin-right: var(--medium-padding); - @media (max-width: $mobile-width) { - margin-right: var(--small-padding); - } - } + box-sizing: border-box; + flex: 1 1 0; + min-width: 0; + min-height: 0; } position: relative; - @for $i from 1 to 12 { - & > *:first-child:nth-last-child(#{$i}), - & > *:first-child:nth-last-child(#{$i}) ~ * { - width: calc((100% - (#{$i} - 1) * var(--medium-padding)) / #{$i}); + // Mobile: fixed-width towers with horizontal scroll (1.5-column rhythm). + @media (max-width: $mobile-width) { + --mobile-tower-width: calc(66vw - var(--small-padding)); + --mobile-tower-side-padding: max( + var(--medium-padding), + calc((100% - var(--mobile-tower-width)) / 2) + ); - @media (max-width: $mobile-width) { - width: calc((100% - (#{$i} - 1) * var(--small-padding)) / #{$i}); - } + overflow-x: auto; + overflow-y: visible; + -webkit-overflow-scrolling: touch; + scroll-snap-type: x mandatory; + scroll-padding-inline: var(--mobile-tower-side-padding); + flex-wrap: nowrap; + justify-content: flex-start; + padding: 0 var(--mobile-tower-side-padding); + max-width: 100%; + gap: var(--medium-padding); + + &::-webkit-scrollbar { + display: none; + } + + & > * { + width: var(--mobile-tower-width) !important; + max-width: var(--mobile-tower-width) !important; + min-width: var(--mobile-tower-width) !important; + scroll-snap-align: center; + flex: 0 0 var(--mobile-tower-width); } } } @@ -89,7 +110,11 @@ @include card(); width: 66vw; max-width: 500px; - @media (max-width: $mobile-width) { width: 300px; } + @media (max-width: $mobile-width) { + width: 88vw; + max-width: 88vw; + padding: var(--medium-padding); + } box-sizing: border-box; padding: var(--large-padding); position: relative; @@ -101,7 +126,7 @@ @include center-child(); .exit { position: absolute; - left: var(--large-padding); + right: var(--large-padding); @include exit(); } } @@ -115,11 +140,21 @@ justify-content: center; gap: var(--large-padding); + button { + max-width: 100%; + } + button.danger { color: #b53f3f; border-bottom-color: #b53f3f55; &:after { background-color: #b53f3f; } } + + @media (max-width: $mobile-width) { + flex-direction: column; + gap: var(--small-padding); + button { width: 100%; } + } } } diff --git a/frontend/src/app/components/page/page.component.ts b/frontend/src/app/components/page/page.component.ts index 8e152a1..544ed13 100644 --- a/frontend/src/app/components/page/page.component.ts +++ b/frontend/src/app/components/page/page.component.ts @@ -4,7 +4,11 @@ import { input, output, signal, + computed, inject, + HostListener, + effect, + untracked, } from '@angular/core'; import { Page } from '../../models'; import { StoreService } from '../../services/store.service'; @@ -15,7 +19,6 @@ import { DoubleSliderComponent, DoubleSliderRange, } from '../shared/double-slider/double-slider.component'; -import { computed } from '@angular/core'; import { CdkDropList, CdkDrag, CdkDragDrop } from '@angular/cdk/drag-drop'; import { ModalStateService } from '../../services/modal-state.service'; @@ -38,6 +41,7 @@ interface BlockPatch { tag: string; description: string; is_done: boolean; + difficulty: number; } /** Minimum blocks before the date-range slider becomes visible. */ @@ -60,12 +64,14 @@ const MIN_BLOCKS_FOR_SLIDER = 2; }) export class PageComponent { readonly page = input.required(); + readonly animateInitialStack = input(false); readonly dragHappening = output(); protected readonly store = inject(StoreService); private readonly modalState = inject(ModalStateService); /** True while any lt-modal is mounted — used to lock tower drag. */ readonly modalOpen = this.modalState.anyOpen; + readonly mobileDragDisabled = signal(this.isMobileViewport()); readonly showAddTower = signal(false); readonly isDragging = signal(false); @@ -112,10 +118,30 @@ export class PageComponent { /** Selected date range — `null` = show everything. */ readonly dateRange = signal<{ from: number; to: number } | null>(null); + constructor() { + effect(() => { + if (!this.showSlider()) { + untracked(() => this.dateRange.set(null)); + } + }); + } + onSliderRangeChange(range: DoubleSliderRange): void { this.dateRange.set({ from: range.from as number, to: range.to as number }); } + @HostListener('window:resize') + onResize(): void { + this.mobileDragDisabled.set(this.isMobileViewport()); + } + + private isMobileViewport(): boolean { + return ( + typeof window !== 'undefined' && + window.matchMedia('(max-width: 520px), (pointer: coarse)').matches + ); + } + // ── Tower mutations ──────────────────────────────────────────────────────── onAddTower(result: TowerSettingsResult): void { @@ -131,7 +157,7 @@ export class PageComponent { } onDeleteTower(towerId: string): void { - this.store.deleteTower(this.page().id, towerId); + this.confirmDeleteTowerId.set(towerId); } // ── Block mutations ──────────────────────────────────────────────────────── @@ -143,6 +169,7 @@ export class PageComponent { result.tag, result.description, result.is_done, + result.difficulty, ); } @@ -187,13 +214,16 @@ export class PageComponent { onTrashEnter(): void { this.nearTrashcan = true; - const preview = document.querySelector('.cdk-drag-preview'); - if (preview) preview.classList.add('trash-highlight'); + this.dragPreview()?.classList.add('trash-highlight'); } onTrashLeave(): void { this.nearTrashcan = false; - const preview = document.querySelector('.cdk-drag-preview'); - if (preview) preview.classList.remove('trash-highlight'); + this.dragPreview()?.classList.remove('trash-highlight'); + } + + /** The CDK drag preview currently in flight, if any. Matches legacy DOM-driven trash highlight. */ + private dragPreview(): Element | null { + return document.querySelector('.cdk-drag-preview'); } } diff --git a/frontend/src/app/components/pages/pages.component.html b/frontend/src/app/components/pages/pages.component.html index 44dbccf..9cbafba 100644 --- a/frontend/src/app/components/pages/pages.component.html +++ b/frontend/src/app/components/pages/pages.component.html @@ -10,7 +10,11 @@
@if (selectedPage(); as page) { - + } @else {

Add a new page to get started!

} @@ -27,14 +31,37 @@ [page]="selectedPage()" (close)="showSettings.set(false)" (updatePage)="onUpdatePage($event)" - (deletePage)="onRemovePage()" + (deletePage)="onRequestRemovePage()" (switchAccount)="onSwitchAccount($event)" /> } +@if (confirmDeletePageId()) { + +
+
+ +

Delete page

+
+

+ Delete {{ confirmDeletePageName() || 'this page' }} and all of its towers and blocks? + This can't be undone. +

+
+ + +
+
+ +} + @if (showWelcome()) { - + (null); + readonly animateInitialStackPageId = signal(null); + private exampleAnimationTimer: ReturnType | null = null; constructor() { effect(() => { - if (!this.store.loading() && this.store.pages().length === 0) { + const pages = this.store.pages(); + if (!this.store.loading() && pages.length === 0) { this.showWelcome.set(true); - } else if (this.store.pages().length > 0) { + } else if (pages.length > 0) { this.showWelcome.set(false); } }); } onLoadExample(): void { - this.store.loadExample(); + const pageId = this.store.loadExample(); + this.selectedPageId.set(pageId); + this.animateInitialStackPageId.set(pageId); + if (this.exampleAnimationTimer !== null) { + clearTimeout(this.exampleAnimationTimer); + } + this.exampleAnimationTimer = setTimeout(() => { + if (this.animateInitialStackPageId() === pageId) { + this.animateInitialStackPageId.set(null); + } + this.exampleAnimationTimer = null; + }, 2500); this.showWelcome.set(false); } + ngOnDestroy(): void { + if (this.exampleAnimationTimer !== null) { + clearTimeout(this.exampleAnimationTimer); + } + } + readonly pageNames = computed(() => this.store.pages().map((p) => p.name)); readonly selectedPage = computed(() => { @@ -61,12 +83,17 @@ export class PagesComponent { return pages[0] ?? null; }); - readonly selectedPageName = computed(() => this.selectedPage()?.name ?? null); + readonly confirmDeletePageName = computed(() => { + const id = this.confirmDeletePageId(); + if (!id) return ''; + return this.store.pages().find((p) => p.id === id)?.name ?? ''; + }); readonly selectedPageIndex = computed(() => { + const pages = this.store.pages(); const page = this.selectedPage(); if (!page) return -1; - return this.store.pages().findIndex((p) => p.id === page.id); + return pages.findIndex((p) => p.id === page.id); }); onSelectPage(index: number): void { @@ -94,12 +121,23 @@ export class PagesComponent { } } - onRemovePage(): void { + onRequestRemovePage(): void { const page = this.selectedPage(); if (!page) return; - this.store.deletePage(page.id); + this.confirmDeletePageId.set(page.id); + } + + confirmRemovePage(): void { + const pageId = this.confirmDeletePageId(); + if (!pageId) return; + this.store.deletePage(pageId); this.selectedPageId.set(null); this.showSettings.set(false); + this.confirmDeletePageId.set(null); + } + + cancelRemovePage(): void { + this.confirmDeletePageId.set(null); } onSwitchAccount(token: string): void { From c2c2598eab9ca9e8fc6e75fedca453149dd80a05 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 15/17] frontend(tower): rework falling/range reconcile and block rendering, add tests --- .../app/components/block/block.component.ts | 23 +- .../app/components/tower/tower.component.ts | 706 +++++++++++++++--- .../tower/tower.component.vitest.ts | 139 ++++ 3 files changed, 743 insertions(+), 125 deletions(-) create mode 100644 frontend/src/app/components/tower/tower.component.vitest.ts diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 81da198..07f12f1 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -13,7 +13,16 @@ import { getColorOfTag } from '../../utils/color'; imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
+
`, styles: ` @import '../../../library/main'; @@ -27,7 +36,16 @@ import { getColorOfTag } from '../../utils/color'; position: absolute; width: 100%; height: 100%; - @include gravitate(); + cursor: pointer; + + @media (hover: hover) and (pointer: fine) { + transition: transform $long-animation-time; + + &:hover, + &.hovered { + transform: translateY(4px); + } + } } } `, @@ -35,6 +53,7 @@ import { getColorOfTag } from '../../utils/color'; export class BlockComponent { readonly block = input.required(); readonly baseColor = input.required(); + readonly hovered = input(false); /** Emits when the square is clicked — parent opens the block-edit modal. */ readonly clicked = output(); diff --git a/frontend/src/app/components/tower/tower.component.ts b/frontend/src/app/components/tower/tower.component.ts index 7bcf4d1..4dc87d0 100644 --- a/frontend/src/app/components/tower/tower.component.ts +++ b/frontend/src/app/components/tower/tower.component.ts @@ -7,6 +7,10 @@ import { computed, effect, untracked, + AfterViewInit, + OnDestroy, + ElementRef, + viewChild, } from '@angular/core'; import { Tower, Block } from '../../models'; import { BlockComponent } from '../block/block.component'; @@ -17,67 +21,191 @@ import { TowerSettingsComponent, TowerSettingsResult } from '../modal/tower-sett import { toCss } from '../../utils/color'; /** Tracks which entry path the block-edit modal was opened from. */ -type EditEntry = { filter: 'done' | 'pending'; activeId: string | null }; +export interface EditEntry { + filter: 'done' | 'pending'; + activeId: string | null; +} + +export function editEntryForNewBlock(keepTasksOpen: boolean): EditEntry { + return { + filter: keepTasksOpen ? 'pending' : 'done', + activeId: null, + }; +} /** A done block augmented with per-render animation state. */ -interface StyledBlock extends Block { +export interface StyledBlock extends Block { _anim: '' | 'descend' | 'ascend'; _transform: string; _opacity: string; } +/** One rendered square. A block draws `difficulty` squares, all sharing the + * block's color + animation state. */ +interface RenderSquare { + key: string; + block: StyledBlock; +} + +const BLOCKS_PER_ROW = 6; + +/** How many squares a block draws (its difficulty, clamped to >= 1). */ +function squareCount(block: Block): number { + const n = Math.floor(block.difficulty ?? 1); + return Number.isFinite(n) && n > 0 ? n : 1; +} + +function totalSquares(blocks: Block[]): number { + return blocks.reduce((sum, block) => sum + squareCount(block), 0); +} + +/** Pick the newest blocks (array tail) whose cumulative square-count (each + * block costs `difficulty` squares) fits within `limit`, preserving order. */ +function fitNewestBySquares(blocks: StyledBlock[], limit: number): StyledBlock[] { + const chosen: StyledBlock[] = []; + let used = 0; + for (let i = blocks.length - 1; i >= 0; i--) { + const cost = squareCount(blocks[i]); + if (used + cost > limit) break; + used += cost; + chosen.unshift(blocks[i]); + } + return chosen; +} + +export function selectVisibleStyledBlocks( + styled: StyledBlock[], + visibleLimit: number, + enteringInRangeId: string | null, + prevVisibleIds: ReadonlySet = new Set(), +): { visibleStyled: StyledBlock[]; hiddenCount: number } { + // `visibleLimit` is a number of SQUARE slots. A block draws `difficulty` + // squares, so we cap by cumulative square cost, not by raw block count. + const normalizedLimit = Math.max(0, visibleLimit); + const restingBlocks = styled.filter((b) => b._opacity === '1'); + let shownRestingBlocks = fitNewestBySquares(restingBlocks, normalizedLimit); + const enteringBlock = + enteringInRangeId === null ? undefined : restingBlocks.find((b) => b.id === enteringInRangeId); + + if (enteringBlock && !shownRestingBlocks.some((b) => b.id === enteringBlock.id)) { + // Guarantee the just-completed block a slot, then fill the remaining + // square budget with the newest of the others. + const reservedBudget = Math.max(0, normalizedLimit - squareCount(enteringBlock)); + const others = restingBlocks.filter((b) => b.id !== enteringBlock.id); + shownRestingBlocks = [enteringBlock, ...fitNewestBySquares(others, reservedBudget)]; + } + + const hiddenCount = Math.max(0, totalSquares(restingBlocks) - totalSquares(shownRestingBlocks)); + + // Blocks leaving past the upper date bound (opacity 0, `_anim: 'ascend'`) must + // stay in the render list so their fly-up transition actually plays — even + // when the resting stack already fills the whole square budget. Without this, + // a capped stack (e.g. the example page) destroys the element the instant the + // slider hides it and it just vanishes. Restrict to blocks that were visible a + // moment ago: ones already off-screen have nothing to animate from, so leaving + // them out keeps the rendered set (and the phantom flex slots) bounded. + const exitingBlocks = styled.filter((b) => b._opacity !== '1' && prevVisibleIds.has(b.id)); + + const shownIds = new Set([ + ...shownRestingBlocks.map((b) => b.id), + ...exitingBlocks.map((b) => b.id), + ]); + + return { + hiddenCount, + visibleStyled: styled.filter((b) => shownIds.has(b.id)), + }; +} + @Component({ selector: 'lt-tower', standalone: true, imports: [BlockComponent, TasksComponent, ModalComponent, TowerSettingsComponent, BlockEditComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
-
+
+
+ + + +
+ +
- Add block +
+ Add block -
-
- @for (b of visibleBlocks(); track b.id) { - - } +
+
+ @for (sq of squares(); track sq.key; let i = $index) { + + } +
- + @if (hiddenBlockCount() > 0) { +

+ {{ hiddenBlockCount() }} more

+ }
@if (editEntry(); as entry) { - + } `, @@ -100,7 +233,9 @@ interface StyledBlock extends Block { @import '../../../library/main'; :host { + display: block; cursor: pointer; + min-height: 0; &.cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); @@ -135,12 +270,12 @@ interface StyledBlock extends Block { transform: scale(0.75); position: relative; - :before { + &::before { opacity: 0.5 !important; } } - input { + .tower-header { display: none; } } @@ -149,8 +284,10 @@ interface StyledBlock extends Block { display: flex; flex-direction: column; align-items: center; + position: relative; max-width: 100%; height: 100%; + min-height: 0; @include inner-spacing(var(--small-padding)); @@ -158,7 +295,15 @@ interface StyledBlock extends Block { display: flex; flex-direction: column; flex: 1 1 auto; + margin-bottom: 0; + min-height: 0; position: relative; + box-sizing: border-box; + container-type: inline-size; + --block-stack-height: 0px; + --add-block-size: 48px; + --add-block-clearance: var(--medium-padding); + --add-block-center-offset: 0px; @include card(); overflow: hidden; @@ -166,9 +311,16 @@ interface StyledBlock extends Block { @include inner-spacing(var(--medium-padding)); + @media (max-width: $mobile-width) { + @include inner-spacing(var(--small-padding)); + padding: 0; + --add-block-size: 32px; + --add-block-clearance: var(--small-padding); + } + width: 100%; - :before { + &::before { content: ''; pointer-events: none; position: absolute; @@ -184,108 +336,206 @@ interface StyledBlock extends Block { } lt-tasks { - flex: 0 0 auto; + flex: 0 1 auto; min-height: 56px; - max-height: 30vh; - overflow: hidden; + max-height: min(30vh, 45%); + overflow: auto; display: block; width: 100%; + @media (max-width: $mobile-width) { + min-height: 44px; + max-height: min(25vh, 45%); + } + .container { max-height: 100%; overflow-y: auto; } } - img.add-block { - flex: 0 0 auto; - align-self: center; - margin: var(--medium-padding) 0; - } - - img { + .stack-zone { position: relative; - z-index: 2; - height: 48px; + flex: 1 1 auto; + min-height: 0; + width: 100%; - @media (max-width: $mobile-width) { - height: 32px; + img { + position: relative; + z-index: 2; + height: 48px; + + @media (max-width: $mobile-width) { + height: 32px; + } + + opacity: 0.33; + transition: opacity $long-animation-time; + cursor: pointer; + + &:hover { + opacity: 1; + } } - opacity: 0.33; - transition: opacity $long-animation-time; - cursor: pointer; - - &:hover { - opacity: 1; - } - } - - .block-container-container { - position: relative; - flex: 1; - - .block-container { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - align-content: flex-start; - align-items: flex-end; + img.add-block { position: absolute; - bottom: 0; - width: 100%; - transform: scaleY(-1); + z-index: 3; + left: 50%; + top: max( + 0px, + min( + calc(50% - var(--add-block-size) / 2 - var(--add-block-center-offset)), + calc(100% - var(--block-stack-height) - var(--add-block-clearance) - var(--add-block-size)) + ) + ); + transform: translateX(-50%); + } - /* Default resting position for all blocks before JS sets them */ - * { - transform: translateY(500%); - } + .block-container-container { + position: absolute; + inset: 0; - .descend { - transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0), - opacity 500ms cubic-bezier(0.5, 0, 1, 0); - } + .block-container { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-content: flex-start; + align-items: flex-end; + position: absolute; + bottom: 0; + width: 100%; + transform: scaleY(-1); - .ascend { - transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0), - opacity 500ms cubic-bezier(0.5, 0, 1, 0) 1s; + /* Default resting position for all blocks before JS sets them */ + * { + transform: translateY(500%); + } + + .descend { + transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0), + opacity 500ms cubic-bezier(0.5, 0, 1, 0); + } + + .ascend { + transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0), + opacity 500ms cubic-bezier(0.5, 0, 1, 0) 1s; + } } } } } - input[type='text'] { - font-size: var(--small-font-size); + .more-blocks { + @include small-text(); + position: absolute; + top: calc(100% + var(--small-padding)); + left: 0; + right: 0; + margin: 0; + line-height: 1; + color: rgba($text-color, 0.72); text-align: center; + pointer-events: none; + user-select: none; + } - @media (min-width: $mobile-width) { - width: 50%; + .tower-header { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + + input[type='text'] { + box-sizing: border-box; + min-width: 0; + font-size: var(--small-font-size); + text-align: center; + + /* Truncate long titles with an ellipsis instead of wrapping. */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + /* Reserve a symmetric gutter on each side. The right one keeps the + title and its focus underline clear of the absolutely-positioned + pen (so the underline stops before it); the equal left one keeps + the centered title optically centered. (pen 22px + 4px gap.) */ + width: calc(100% - 52px); + + @media (max-width: $mobile-width) { + width: calc(100% - 60px); + } + } + + .edit-tower { + all: unset; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + box-sizing: border-box; + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + cursor: pointer; + opacity: 0.35; + transition: opacity $short-animation-time, box-shadow $long-animation-time, background-color $short-animation-time; + + /* Suppress the global button's animated hover underline + (button::after), which the 'all: unset' reset doesn't reach. */ + &:after { + content: none; + } + + img { + width: 13px; + height: 13px; + opacity: 1; + } + + &:hover, + &:focus-visible { + opacity: 1; + background-color: rgba($light-color, 0.86); + box-shadow: $shadow-border; + } + + @media (max-width: $mobile-width) { + width: 26px; + height: 26px; + opacity: 0.55; + } } } } } `, }) -export class TowerComponent { +export class TowerComponent implements AfterViewInit, OnDestroy { // ── Inputs ───────────────────────────────────────────────────────────────── readonly tower = input.required(); - /** Set by page component when this tower is being dragged over trash. */ - readonly trashHighlight = input(false); /** Optional date range filter — when set, blocks with `created_at` * outside [from, to] are hidden from the falling stack. */ readonly dateRange = input<{ from: number; to: number } | null>(null); /** When true, the tasks accordion starts expanded on load. */ readonly keepTasksOpen = input(false); + /** When true, completed blocks descend on this tower's first measured render. */ + readonly animateInitialStack = input(false); // ── Outputs ──────────────────────────────────────────────────────────────── readonly updateTower = output(); readonly deleteTowerRequest = output(); /** Emitted when a new block is created from the carousel's "Create now" card. */ - readonly addBlock = output<{ tag: string; description: string; is_done: boolean }>(); + readonly addBlock = output<{ tag: string; description: string; is_done: boolean; difficulty: number }>(); /** Emitted when an existing block is patched from the carousel. */ readonly saveBlock = output<{ blockId: string; - result: { tag: string; description: string; is_done: boolean }; + result: { tag: string; description: string; is_done: boolean; difficulty: number }; }>(); readonly deleteBlock = output(); @@ -294,10 +544,19 @@ export class TowerComponent { * which list of blocks to show and which one to focus initially. */ readonly editEntry = signal(null); readonly showSettings = signal(false); + readonly hiddenBlockCount = signal(0); + readonly hoveredBlockId = signal(null); + + private readonly stackZone = viewChild>('stackZone'); + private readonly towerRoot = viewChild>('towerRoot'); + private readonly maxVisibleBlocks = signal(null); + private resizeObserver: ResizeObserver | null = null; + private destroyed = false; + private readonly animationFrames = new Set(); // ── Derived ──────────────────────────────────────────────────────────────── /** Pending (not-done) blocks — fed to the tasks accordion. */ - readonly pending = computed(() => this.tower().blocks.filter(b => !b.is_done)); + readonly pending = computed(() => this.tower().blocks.filter((b) => !b.is_done)); /** CSS color string for the tower name input. */ readonly towerNameCss = computed(() => toCss(this.tower().base_color)); @@ -307,7 +566,14 @@ export class TowerComponent { const entry = this.editEntry(); if (!entry) return []; const isDone = entry.filter === 'done'; - return this.tower().blocks.filter(b => b.is_done === isDone); + return this.tower().blocks.filter((b) => b.is_done === isDone); + }); + + readonly editViewTitle = computed(() => { + const entry = this.editEntry(); + if (!entry) return ''; + const prefix = entry.filter === 'done' ? 'Completed tasks' : 'Tasks'; + return `${prefix} of ${this.tower().name}`; }); /** Unique tags from existing blocks of this tower. */ @@ -326,33 +592,130 @@ export class TowerComponent { private readonly _visibleBlocks = signal([]); readonly visibleBlocks = this._visibleBlocks.asReadonly(); + /** Flat list of squares to render: each visible block expands into + * `difficulty` adjacent squares that wrap (via the flex container) into + * the row above. All squares of a block share its animation state. */ + readonly squares = computed(() => { + const out: RenderSquare[] = []; + for (const b of this.visibleBlocks()) { + const n = squareCount(b); + for (let k = 0; k < n; k++) { + out.push({ key: `${b.id}#${k}`, block: b }); + } + } + return out; + }); + + readonly blockStackHeight = computed(() => { + const rows = Math.ceil(this.squares().length / BLOCKS_PER_ROW); + const cqw = rows * (100 / BLOCKS_PER_ROW); + return rows === 0 ? '0px' : `${Number(cqw.toFixed(4))}cqw`; + }); + private prevDoneIds: string[] = []; private isFirstRun = true; constructor() { effect(() => { const range = this.dateRange(); - // Always keep ALL done blocks in the visible list. The date filter - // only flips per-block `_anim` so the 1.5s ascend/descend transition - // can animate them in and out of the falling stack. + const maxVisibleBlocks = this.maxVisibleBlocks(); + const animateInitialStack = this.animateInitialStack(); + // Reconcile all done blocks, then cap the rendered stack to the rows + // that fit below the tasks and add button. const allDone = this.tower().blocks.filter((b) => b.is_done); - untracked(() => this.reconcile(allDone, range)); + untracked(() => this.reconcile(allDone, range, maxVisibleBlocks, animateInitialStack)); }); } - private reconcile(allDone: Block[], range: { from: number; to: number } | null): void { + ngAfterViewInit(): void { + const stackZone = this.stackZone()?.nativeElement; + if (!stackZone) return; + + this.measureBlockCapacity(); + + if (typeof ResizeObserver !== 'undefined') { + this.resizeObserver = new ResizeObserver(() => this.measureBlockCapacity()); + this.resizeObserver.observe(stackZone); + } + + if (typeof requestAnimationFrame === 'function') { + requestAnimationFrame(() => this.measureBlockCapacity()); + } + } + + ngOnDestroy(): void { + this.destroyed = true; + for (const id of this.animationFrames) cancelAnimationFrame(id); + this.animationFrames.clear(); + this.resizeObserver?.disconnect(); + } + + private measureBlockCapacity(): void { + const stackZone = this.stackZone()?.nativeElement; + if (!stackZone) return; + + const width = stackZone.clientWidth; + const height = stackZone.clientHeight; + if (width <= 0 || height <= 0) { + this.maxVisibleBlocks.set(0); + return; + } + + const styles = getComputedStyle(stackZone); + const addBlockSize = this.parseCssPixels(styles.getPropertyValue('--add-block-size'), 48); + this.measureAddBlockCenterOffset(stackZone); + const fallbackClearance = addBlockSize <= 32 ? 7.5 : 15; + const clearance = this.parseCssPixels( + styles.getPropertyValue('--add-block-clearance'), + fallbackClearance, + ); + + const rowHeight = width / BLOCKS_PER_ROW; + const availableHeight = Math.max(0, height - addBlockSize - 2 * clearance); + const rows = Math.floor((availableHeight + 0.5) / rowHeight); + this.maxVisibleBlocks.set(Math.max(0, rows) * BLOCKS_PER_ROW); + } + + private measureAddBlockCenterOffset(stackZone: HTMLElement): void { + const towerRoot = this.towerRoot()?.nativeElement; + if (!towerRoot) return; + + const stackRect = stackZone.getBoundingClientRect(); + const towerRect = towerRoot.getBoundingClientRect(); + const stackCenter = stackRect.top + stackRect.height / 2; + const towerCenter = towerRect.top + towerRect.height / 2; + const offset = Math.max(0, stackCenter - towerCenter); + stackZone.style.setProperty('--add-block-center-offset', `${offset}px`); + } + + private parseCssPixels(value: string, fallback: number): number { + const parsed = Number.parseFloat(value); + return Number.isFinite(parsed) ? parsed : fallback; + } + + private reconcile( + allDone: Block[], + range: { from: number; to: number } | null, + maxVisibleBlocks: number | null, + animateInitialStack: boolean, + ): void { + if (this.isFirstRun && animateInitialStack && maxVisibleBlocks === null) { + this._visibleBlocks.set([]); + this.hiddenBlockCount.set(0); + this.prevDoneIds = allDone.map((b) => b.id); + this.isFirstRun = false; + return; + } + const ids = allDone.map((b) => b.id); const prev = this.prevDoneIds; const prevSet = new Set(prev); - const newIds = ids.filter(id => !prevSet.has(id)); + const newIds = ids.filter((id) => !prevSet.has(id)); const grewByOne = !this.isFirstRun && ids.length === prev.length + 1 && newIds.length === 1 && - prev.every(id => ids.includes(id)); // no IDs disappeared - - const inRange = (b: Block) => - !range || (b.created_at >= range.from && b.created_at <= range.to); + prev.every((id) => ids.includes(id)); // no IDs disappeared const styled: StyledBlock[] = []; for (const b of allDone) { @@ -379,61 +742,147 @@ export class TowerComponent { }); } + const newInRangeId = grewByOne ? newIds[0] : null; + // Captured before any `_visibleBlocks.set` below — lets the cap keep + // currently-shown blocks that are now flying out so their exit animates. + const prevVisibleIds = new Set(this._visibleBlocks().map((b) => b.id)); + const visibleLimit = + maxVisibleBlocks === null ? Number.POSITIVE_INFINITY : Math.max(0, maxVisibleBlocks); + let visibleStyled = styled; + let hiddenCount = 0; + if (Number.isFinite(visibleLimit)) { + ({ visibleStyled, hiddenCount } = selectVisibleStyledBlocks( + styled, + visibleLimit, + newInRangeId, + prevVisibleIds, + )); + } + this.hiddenBlockCount.set(hiddenCount); + + if (this.isFirstRun && animateInitialStack) { + const initialBlocks = visibleStyled.filter((b) => b._opacity === '1'); + if (initialBlocks.length > 0) { + this.startDescendAnimation(visibleStyled, initialBlocks); + this.prevDoneIds = ids; + this.isFirstRun = false; + return; + } + } + if (grewByOne) { const newId = newIds[0]; - const newBlock = styled.find(b => b.id === newId); - if (newBlock && inRange(newBlock)) { + const newBlock = visibleStyled.find((b) => b.id === newId); + if (newBlock) { // Snap newly-added in-range block to start position, then on the next // paint flip it back to rest — that's what makes it visibly fall. - newBlock._anim = ''; - newBlock._transform = 'translateY(500%)'; - newBlock._opacity = '0'; - this._visibleBlocks.set(styled); - requestAnimationFrame(() => { - requestAnimationFrame(() => { - newBlock._anim = 'descend'; - newBlock._transform = 'translateY(0)'; - newBlock._opacity = '1'; - this._visibleBlocks.set([...this._visibleBlocks()]); - }); - }); + this.startDescendAnimation(visibleStyled, [newBlock]); this.prevDoneIds = ids; this.isFirstRun = false; return; } } // existing fall-through path (no growth, first run, or new block out of range): - this._visibleBlocks.set(styled); + this._visibleBlocks.set(visibleStyled); this.prevDoneIds = ids; this.isFirstRun = false; } + private startDescendAnimation(visibleStyled: StyledBlock[], blocks: StyledBlock[]): void { + for (const block of blocks) { + block._anim = ''; + block._transform = 'translateY(500%)'; + block._opacity = '0'; + } + this._visibleBlocks.set(visibleStyled); + this.requestFrame(() => { + this.requestFrame(() => { + if (this.destroyed) return; + this.finishDescendAnimation(blocks); + }); + }); + } + + private requestFrame(callback: () => void): void { + if (typeof requestAnimationFrame !== 'function') { + callback(); + return; + } + const id = requestAnimationFrame(() => { + this.animationFrames.delete(id); + if (!this.destroyed) callback(); + }); + this.animationFrames.add(id); + } + + private finishDescendAnimation(blocks: StyledBlock[]): void { + for (const block of blocks) { + block._anim = 'descend'; + block._transform = 'translateY(0)'; + block._opacity = '1'; + } + this._visibleBlocks.set([...this._visibleBlocks()]); + } + // ── Event handlers ───────────────────────────────────────────────────────── onRename(event: Event): void { const input = event.target as HTMLInputElement; const newName = input.value.trim(); - if (newName && newName !== this.tower().name) { + if (!newName) { + input.value = this.tower().name; + return; + } + if (newName !== this.tower().name) { this.updateTower.emit({ name: newName, base_color: this.tower().base_color }); + } else { + input.value = this.tower().name; } } onEditBlock(block: Block): void { + this.hoveredBlockId.set(null); this.editEntry.set({ filter: block.is_done ? 'done' : 'pending', activeId: block.id }); } + onBlockPointerEnter(blockId: string): void { + this.hoveredBlockId.set(blockId); + } + + onBlockPointerLeave(blockId: string, event: PointerEvent): void { + if (this.relatedTargetBelongsToBlock(event.relatedTarget, blockId)) return; + if (this.hoveredBlockId() === blockId) this.hoveredBlockId.set(null); + } + + private relatedTargetBelongsToBlock(target: EventTarget | null, blockId: string): boolean { + const towerRoot = this.towerRoot()?.nativeElement; + let element = target instanceof Element ? target : null; + + while (element && element !== towerRoot) { + if (element instanceof HTMLElement && element.dataset['blockId'] === blockId) return true; + element = element.parentElement; + } + + return false; + } + /** Tickbox in the tasks accordion — flip is_done to true without opening the carousel. */ onMarkTaskDone(block: Block): void { this.saveBlock.emit({ blockId: block.id, - result: { tag: block.tag, description: block.description, is_done: true }, + result: { + tag: block.tag, + description: block.description, + is_done: true, + difficulty: block.difficulty, + }, }); } /** Called by the template "Add block" plus-icon. */ openAddBlock(): void { - this.editEntry.set({ filter: 'done', activeId: null }); + this.editEntry.set(editEntryForNewBlock(this.keepTasksOpen())); } closeEdit(): void { @@ -442,11 +891,21 @@ export class TowerComponent { onBlockSave(ev: BlockEditSave): void { if (ev.id === null) { - this.addBlock.emit({ tag: ev.tag, description: ev.description, is_done: ev.is_done }); + this.addBlock.emit({ + tag: ev.tag, + description: ev.description, + is_done: ev.is_done, + difficulty: ev.difficulty, + }); } else { this.saveBlock.emit({ blockId: ev.id, - result: { tag: ev.tag, description: ev.description, is_done: ev.is_done }, + result: { + tag: ev.tag, + description: ev.description, + is_done: ev.is_done, + difficulty: ev.difficulty, + }, }); } } @@ -458,7 +917,8 @@ export class TowerComponent { } onTowerSave(result: TowerSettingsResult): void { - this.showSettings.set(false); + // Tower edits auto-save, so this fires on every change and must NOT close + // the modal — the user closes it via the exit button / backdrop. this.updateTower.emit(result); } diff --git a/frontend/src/app/components/tower/tower.component.vitest.ts b/frontend/src/app/components/tower/tower.component.vitest.ts new file mode 100644 index 0000000..495f141 --- /dev/null +++ b/frontend/src/app/components/tower/tower.component.vitest.ts @@ -0,0 +1,139 @@ +import { describe, expect, it } from 'vitest'; +import type { StyledBlock } from './tower.component'; +import { editEntryForNewBlock, selectVisibleStyledBlocks } from './tower.component'; + +function block(id: string, opacity = '1', difficulty = 1): StyledBlock { + return { + id, + tag: 'tag', + description: id, + is_done: true, + difficulty, + created_at: 1, + _anim: '', + _transform: opacity === '1' ? 'translateY(0)' : 'translateY(500%)', + _opacity: opacity, + }; +} + +describe('selectVisibleStyledBlocks', () => { + it('reserves a capped visible slot for the newly completed block', () => { + const styled = [ + block('newly-done'), + block('done-1'), + block('done-2'), + block('done-3'), + block('done-4'), + block('done-5'), + block('done-6'), + block('done-7'), + ]; + + const result = selectVisibleStyledBlocks(styled, 6, 'newly-done'); + + expect(result.hiddenCount).toBe(2); + expect(result.visibleStyled.map((b) => b.id)).toEqual([ + 'newly-done', + 'done-3', + 'done-4', + 'done-5', + 'done-6', + 'done-7', + ]); + }); + + it('uses the normal capped window when no new block is entering', () => { + const styled = [ + block('done-0'), + block('done-1'), + block('done-2'), + block('done-3'), + block('done-4'), + block('done-5'), + block('done-6'), + block('done-7'), + ]; + + const result = selectVisibleStyledBlocks(styled, 6, null); + + expect(result.hiddenCount).toBe(2); + expect(result.visibleStyled.map((b) => b.id)).toEqual([ + 'done-2', + 'done-3', + 'done-4', + 'done-5', + 'done-6', + 'done-7', + ]); + }); + + it('caps by square cost (difficulty), not by raw block count', () => { + // Each block draws 2 squares, so only 3 blocks fit in 6 square slots. + const hard = (id: string): StyledBlock => block(id, '1', 2); + const styled = [hard('a'), hard('b'), hard('c'), hard('d'), hard('e')]; + + const result = selectVisibleStyledBlocks(styled, 6, null); + + expect(result.visibleStyled.map((b) => b.id)).toEqual(['c', 'd', 'e']); + expect(result.hiddenCount).toBe(4); + }); + + it('keeps a previously-visible block that is now flying out, even on a full stack', () => { + // Budget is full with three resting blocks; a fourth block has just left the + // range (opacity 0 → ascending). It was visible a moment ago, so it must stay + // rendered so its fly-up transition can play instead of vanishing instantly. + const styled = [ + block('old-1'), + block('old-2'), + block('old-3'), + block('leaving', '0'), + ]; + const prevVisible = new Set(['old-1', 'old-2', 'old-3', 'leaving']); + + const result = selectVisibleStyledBlocks(styled, 3, null, prevVisible); + + expect(result.visibleStyled.map((b) => b.id)).toContain('leaving'); + expect(result.hiddenCount).toBe(0); + }); + + it('does not resurrect an off-screen block that leaves the range', () => { + // 'hidden-leaving' was never rendered (not in prevVisible) — nothing to + // animate from, so keep it out and avoid an unbounded phantom render set. + const styled = [ + block('old-1'), + block('old-2'), + block('old-3'), + block('hidden-leaving', '0'), + ]; + const prevVisible = new Set(['old-1', 'old-2', 'old-3']); + + const result = selectVisibleStyledBlocks(styled, 3, null, prevVisible); + + expect(result.visibleStyled.map((b) => b.id)).not.toContain('hidden-leaving'); + }); + + it('counts hidden squares when reserving the entering block', () => { + const styled = [ + block('newly-done', '1', 3), + block('done-1', '1', 2), + block('done-2', '1', 2), + block('done-3', '1', 2), + block('done-4', '1', 2), + ]; + + const result = selectVisibleStyledBlocks(styled, 6, 'newly-done'); + + expect(result.hiddenCount).toBe(6); + expect(result.visibleStyled.map((b) => b.id)).toEqual(['newly-done', 'done-4']); + }); +}); + +describe('editEntryForNewBlock', () => { + it('opens the create card in the pending task view when tasks are kept open', () => { + expect(editEntryForNewBlock(true)).toEqual({ filter: 'pending', activeId: null }); + }); + + it('keeps the existing completed-task default when tasks are collapsed', () => { + expect(editEntryForNewBlock(false)).toEqual({ filter: 'done', activeId: null }); + }); +}); From 4fd9e6f6bc65b70be5cf156c9c668c32efe47f82 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 16/17] feat(tasks): add keep-tasks-open toggle --- .../shared/toggle/toggle.component.ts | 36 +++- .../app/components/tasks/tasks.component.ts | 155 ++++++++++++++---- .../tasks/tasks.component.vitest.ts | 26 +++ 3 files changed, 179 insertions(+), 38 deletions(-) create mode 100644 frontend/src/app/components/tasks/tasks.component.vitest.ts diff --git a/frontend/src/app/components/shared/toggle/toggle.component.ts b/frontend/src/app/components/shared/toggle/toggle.component.ts index 5ec865e..945a794 100644 --- a/frontend/src/app/components/shared/toggle/toggle.component.ts +++ b/frontend/src/app/components/shared/toggle/toggle.component.ts @@ -11,7 +11,14 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, template: `
- {{ offLabel() }} + {{ offLabel() }} - {{ onLabel() }} + {{ onLabel() }}
`, styles: ` @@ -30,7 +44,12 @@ import { $size: 30px; @include center-child(); - @include inner-spacing(var(--medium-padding), $horizontal: true); + gap: var(--medium-padding); + + @media (max-width: $mobile-width) { + width: 100%; + gap: var(--small-padding); + } .toggle { display: contents; @@ -41,7 +60,7 @@ import { // Fixed width (not max-width) so multiple toggles align column-wise // — the thumb position is identical across rows regardless of label. flex: 0 0 auto; - width: 4 * $size; + width: var(--toggle-label-width, #{4 * $size}); box-sizing: border-box; padding: 0 var(--small-padding); line-height: 1.3; @@ -50,10 +69,19 @@ import { &.active { font-weight: bold; } &:first-of-type { text-align: right; } &:last-of-type { text-align: left; } + + @media (max-width: $mobile-width) { + flex: 1 1 0; + width: auto; + min-width: 0; + padding: 0; + overflow-wrap: anywhere; + } } label { display: block; + flex: 0 0 auto; input[type='checkbox'] { -webkit-appearance: none; diff --git a/frontend/src/app/components/tasks/tasks.component.ts b/frontend/src/app/components/tasks/tasks.component.ts index e30c6cb..183da91 100644 --- a/frontend/src/app/components/tasks/tasks.component.ts +++ b/frontend/src/app/components/tasks/tasks.component.ts @@ -1,10 +1,28 @@ -import { Component, ChangeDetectionStrategy, input, output, signal, effect, untracked } from '@angular/core'; +import { + Component, + ChangeDetectionStrategy, + computed, + effect, + input, + output, + signal, + untracked, +} from '@angular/core'; import { Block, HslColor } from '../../models'; import { getColorOfTag } from '../../utils/color'; +export function shouldExpandTasks(keepTasksOpen: boolean, manuallyExpanded: boolean): boolean { + return keepTasksOpen || manuallyExpanded; +} + +export function taskListMaxHeight(expanded: boolean): string { + return expanded ? 'none' : '0px'; +} + /** * Tasks accordion — shows pending (not-done) blocks inside a tower. - * Sits ABOVE the falling-blocks area. Clicking the header expands/collapses. + * Sits ABOVE the falling-blocks area. Clicking the header expands/collapses + * unless the page setting is keeping tasks open. * Clicking the colored tickbox marks the task done. * Clicking the description opens the block-edit modal via the `edit` output. */ @@ -17,16 +35,29 @@ import { getColorOfTag } from '../../utils/color';
-

- {{ pending().length === 0 ? '' : pending().length }} - {{ pending().length === 0 ? '​' : pending().length === 1 ? 'task' : 'tasks' }} -

+ @if (!initiallyOpen()) { + + }
@for (b of pending(); track b.id) {
@@ -34,13 +65,17 @@ import { getColorOfTag } from '../../utils/color'; type="button" class="tickbox" [style.background-color]="colorOf(b.tag)" + (pointerup)="$event.stopPropagation()" + (touchend)="$event.stopPropagation()" (click)="$event.stopPropagation(); markDone.emit(b)" [attr.aria-label]="'Mark ' + (b.description || b.tag) + ' done'" > -

{{ b.description || b.tag }}

+ >{{ b.description || b.tag }}
}
@@ -73,26 +108,51 @@ import { getColorOfTag } from '../../utils/color'; max-height: 30vh; overflow-y: auto; - .header { cursor: pointer; } + .header { + all: unset; + @include medium-text(); + display: block; + width: 100%; + box-sizing: border-box; + cursor: pointer; + text-align: center; - p { font-size: var(--medium-font-size); } + &::after { + content: none; + } + } .all-task { @include inner-spacing(var(--small-padding)); :first-child { margin-top: var(--small-padding); } - height: 0; box-sizing: border-box; - transition: height $long-animation-time; - overflow-y: hidden; + transition: max-height $long-animation-time; + + /* + * Clip while collapsed only. When open, let the outer .container own + * scrolling via max-height: 30vh; a nested scroller here pops a + * scrollbar the instant a tickbox grows on hover. + */ + overflow: hidden; + + // Sideways breathing room so the clip doesn't shear the tickbox's + // hover shadow; negative side margins keep rows flush with the header, + // and the bottom padding clears the last row's shadow. + margin: 0 calc(var(--small-padding) / -2); + padding: 0 calc(var(--small-padding) / 2) calc(var(--small-padding) / 2); .task-container { display: flex; align-items: center; gap: var(--small-padding); - &:hover p { + @media (max-width: $mobile-width) { + gap: calc(var(--small-padding) / 2); + } + + &:hover .task-description { @media (min-width: $mobile-width) { color: inherit !important; } @@ -102,14 +162,16 @@ import { getColorOfTag } from '../../utils/color'; // done without opening the edit carousel. Hover & focus reveal a // subtle inner check mark. .tickbox { - flex: 0 0 auto; all: unset; // strip native button styles + flex: 0 0 24px; cursor: pointer; position: relative; box-sizing: border-box; @include square(24px); + min-width: 24px; + min-height: 24px; @media (max-width: $mobile-width) { - @include square(20px); + @include square(24px); } border-radius: 4px; box-shadow: $shadow-border; @@ -119,14 +181,25 @@ import { getColorOfTag } from '../../utils/color'; content: '✓'; position: absolute; inset: 0; + /* + * Neutralise the global animated-underline bar from + * forms.scss (button:after { height: 2px; width: 0->100% on + * hover; background-color: $text-color }). The all:unset on the + * button does NOT reach the pseudo-element, so without these + * resets the bar paints a dark stripe across the top AND + * squashes this box to 2px — which centres the glyph near the + * top instead of the middle. + */ + width: 100%; + height: 100%; + background: none; @include center-child(); color: $light-color; - font-size: 18px; - font-weight: bold; - line-height: 1; - opacity: 0.5; + font: bold 18px/1 $normal-font; // re-assert font (all:unset dropped it to serif) + opacity: 0; // hidden at rest — only revealed on hover/focus/active text-shadow: 0 0 1px rgba(0, 0, 0, 0.4); - transform: translateY(2px); + // The ✓ glyph sits a touch high in its em-box; nudge to optical centre. + transform: translateY(1px); transition: opacity $short-animation-time, transform $short-animation-time; } @@ -138,23 +211,29 @@ import { getColorOfTag } from '../../utils/color'; } &:active { transform: scale(0.95); - &::after { opacity: 1; transform: translateY(2px) scale(1.05); } + &::after { opacity: 1; transform: translateY(1px) scale(1.05); } } } - p { + .task-description { + all: unset; + @include medium-text(); white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; text-align: left; flex: 1 1 auto; + min-width: 0; cursor: pointer; @media (max-width: $mobile-width) { - font-size: calc(var(--small-font-size) / 2 + var(--medium-font-size) / 2); + font-size: var(--medium-font-size); + font-weight: 500; + filter: saturate(0.85) brightness(0.82); } position: relative; + &::after { content: none; } } } } @@ -173,20 +252,28 @@ export class TasksComponent { /** Emitted when the description is clicked — parent opens the block-edit modal. */ readonly edit = output(); - readonly expanded = signal(false); + private readonly manuallyExpanded = signal(false); + readonly expanded = computed(() => + shouldExpandTasks(this.initiallyOpen(), this.manuallyExpanded()), + ); + readonly taskListMaxHeight = taskListMaxHeight; constructor() { - // Re-sync `expanded` whenever the `initiallyOpen` input changes so flipping - // the "Keep tasks open" page setting expands/collapses the accordion live. - // User clicks (which mutate `expanded` directly) are respected until the - // setting changes again. + // When the page setting switches back to collapsed, discard any older manual + // open state so the setting is reflected immediately. effect(() => { - const open = this.initiallyOpen(); - untracked(() => this.expanded.set(open)); + const keepOpen = this.initiallyOpen(); + if (!keepOpen) untracked(() => this.manuallyExpanded.set(false)); }); } colorOf(tag: string): string { return getColorOfTag(tag, this.baseColor()); } + + toggleExpanded(event: Event): void { + event.stopPropagation(); + if (this.initiallyOpen()) return; + this.manuallyExpanded.update((v) => !v); + } } diff --git a/frontend/src/app/components/tasks/tasks.component.vitest.ts b/frontend/src/app/components/tasks/tasks.component.vitest.ts new file mode 100644 index 0000000..fe12ec6 --- /dev/null +++ b/frontend/src/app/components/tasks/tasks.component.vitest.ts @@ -0,0 +1,26 @@ +import { describe, expect, it } from 'vitest'; +import { shouldExpandTasks, taskListMaxHeight } from './tasks.component'; + +describe('shouldExpandTasks', () => { + it('expands when tasks should be kept open by page setting', () => { + expect(shouldExpandTasks(true, false)).toBe(true); + }); + + it('expands when the user manually opens the accordion', () => { + expect(shouldExpandTasks(false, true)).toBe(true); + }); + + it('collapses when keep-open is disabled', () => { + expect(shouldExpandTasks(false, false)).toBe(false); + }); +}); + +describe('taskListMaxHeight', () => { + it('does not cap open task lists by a measured height', () => { + expect(taskListMaxHeight(true)).toBe('none'); + }); + + it('clips collapsed task lists', () => { + expect(taskListMaxHeight(false)).toBe('0px'); + }); +}); From 40e2c478fb1ee3aa85178917820d12a55bb10d42 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH 17/17] test(e2e): update smoke and visual specs --- frontend/e2e/smoke.spec.ts | 134 +++++++++++++++++++++++++++++++---- frontend/e2e/visuals.spec.ts | 77 ++++++++++++++++---- 2 files changed, 184 insertions(+), 27 deletions(-) diff --git a/frontend/e2e/smoke.spec.ts b/frontend/e2e/smoke.spec.ts index 4a20b30..2493014 100644 --- a/frontend/e2e/smoke.spec.ts +++ b/frontend/e2e/smoke.spec.ts @@ -1,4 +1,21 @@ -import { test, expect } from '@playwright/test'; +import { test, expect, type Page } from '@playwright/test'; + +async function expectTaskListOpen(page: Page, description: string): Promise { + const tasks = page.locator('lt-tasks', { hasText: description }).first(); + const taskBody = tasks.locator('.all-task'); + const taskRow = tasks.locator('.task-container', { hasText: description }).first(); + + await expect(tasks.locator('.header')).toHaveCount(0); + await expect + .poll(async () => + taskBody.evaluate((el) => { + const height = el.getBoundingClientRect().height; + return height / Math.max(1, el.scrollHeight); + }), + ) + .toBeGreaterThan(0.9); + await taskRow.locator('.tickbox').click({ trial: true }); +} /** * Smoke test: drives the legacy-styled UI end-to-end. @@ -11,8 +28,11 @@ test.describe('Life Towers smoke test', () => { test('create page → tower → block, mark done, reload, persists', async ({ page }) => { await page.goto('/'); - // Wait for the empty-state hint that means init() completed. - await expect(page.getByText('Add a new page to get started!')).toBeVisible({ timeout: 15000 }); + // Wait for init, then dismiss the welcome modal so the page controls are reachable. + await expect(page.getByText('Welcome to Life Towers')).toBeVisible({ timeout: 15000 }); + await page.getByRole('button', { name: 'Start empty' }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + await expect(page.getByText('Add a new page to get started!')).toBeVisible(); // Create a page via the select-add dropdown. await page.locator('lt-select-add .top').first().click(); @@ -24,7 +44,7 @@ test.describe('Life Towers smoke test', () => { // Create a tower. await page.locator('img[alt="Add tower"]').click(); - await page.locator('input[placeholder="Tower name…"]').fill('Side projects'); + await page.locator('input[placeholder="New tower"]').fill('Side projects'); await page.locator('lt-tower-settings button[type="submit"]').click(); // Tower's name input is rendered with the tower name as its value. @@ -43,27 +63,25 @@ test.describe('Life Towers smoke test', () => { await page.locator('textarea[placeholder="Write a description here…"]').fill( 'Modernise the towers app', ); - await page.getByRole('button', { name: 'Create and exit' }).click(); + await page.getByLabel('Already done').uncheck(); + await page.getByRole('button', { name: 'Create and exit', exact: true }).click(); // New block is pending → appears in the tasks accordion. // (Tasks header shows N tasks.) await expect(page.locator('lt-tasks')).toContainText('1'); // Open the tasks accordion + click the task to edit it, then flip done. - await page.locator('lt-tasks .container').click(); - await page.locator('lt-tasks .task-container').click(); + await page.locator('lt-tasks .header').click(); + await page.locator('lt-tasks .task-description').click(); - // Toggle done in the block-edit modal — the right label is "Done". + // Toggle done in the block-edit modal. const putLanded = page.waitForResponse( (r) => r.url().endsWith('/api/v1/data') && r.request().method() === 'PUT' && r.ok(), ); - // Toggle uses verbose labels — "Goal accomplished" flips it to done. - await page - .locator('lt-block-edit lt-toggle span') - .filter({ hasText: 'Goal accomplished' }) - .click(); - await page.getByRole('button', { name: 'Create and exit' }).click(); + await page.locator('lt-block-edit .card.active').getByLabel('Already done').check(); await putLanded; + await page.locator('lt-block-edit .card.active .exit').click(); + await page.waitForSelector('section.modal', { state: 'detached' }); // Done block now appears as a colored square in the tower's falling stack. await expect(page.locator('lt-tower lt-block').first()).toBeVisible(); @@ -73,7 +91,93 @@ test.describe('Life Towers smoke test', () => { await expect(page.locator('lt-select-add .top').first()).toContainText('Hobbies', { timeout: 15000, }); - await expect(page.getByDisplayValue('Side projects')).toBeVisible(); + await expect(page.locator('lt-tower input').first()).toHaveValue('Side projects'); await expect(page.locator('lt-tower lt-block').first()).toBeVisible(); }); + + test('keep tasks open shows new pending tasks and survives immediate reload', async ({ page }) => { + await page.goto('/'); + + await expect(page.getByText('Welcome to Life Towers')).toBeVisible({ timeout: 15000 }); + await page.getByRole('button', { name: 'Start empty' }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.locator('lt-select-add .top').first().click(); + await page.locator('lt-select-add input[placeholder="Add a value…"]').fill('Work'); + await page.locator('lt-select-add input[placeholder="Add a value…"]').press('Enter'); + + await page.locator('img[alt="Add tower"]').click(); + await page.locator('input[placeholder="New tower"]').fill('Today'); + await page.locator('lt-tower-settings button[type="submit"]').click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.getByRole('button', { name: 'Settings' }).click(); + await page.getByText('Keep tasks open').click(); + await page.locator('lt-settings .exit').click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.locator('img[alt="Add block"]').first().click(); + const createCard = page.locator('lt-block-edit .create-card'); + await expect(createCard.getByLabel('Already done')).not.toBeChecked(); + await createCard.locator('lt-select-add .top').click(); + await createCard.locator('lt-select-add input[placeholder="Add a value…"]').fill('ops'); + await createCard.locator('lt-select-add input[placeholder="Add a value…"]').press('Enter'); + await createCard + .locator('textarea[placeholder="Write a description here…"]') + .fill('Review deploy notes'); + await page.getByRole('button', { name: 'Create and exit', exact: true }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await expectTaskListOpen(page, 'Review deploy notes'); + + await page.reload(); + + await expect(page.locator('lt-select-add .top').first()).toContainText('Work', { + timeout: 15000, + }); + await expectTaskListOpen(page, 'Review deploy notes'); + + await page.locator('img[alt="Add block"]').first().click(); + await expect(page.locator('lt-block-edit .create-card').getByLabel('Already done')).not.toBeChecked(); + }); + + test('keep tasks open expands existing pending tasks after reload', async ({ page }) => { + await page.goto('/'); + + await expect(page.getByText('Welcome to Life Towers')).toBeVisible({ timeout: 15000 }); + await page.getByRole('button', { name: 'Start empty' }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.locator('lt-select-add .top').first().click(); + await page.locator('lt-select-add input[placeholder="Add a value…"]').fill('Ops'); + await page.locator('lt-select-add input[placeholder="Add a value…"]').press('Enter'); + + await page.locator('img[alt="Add tower"]').click(); + await page.locator('input[placeholder="New tower"]').fill('Queue'); + await page.locator('lt-tower-settings button[type="submit"]').click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.locator('img[alt="Add block"]').first().click(); + await page.locator('lt-block-edit lt-select-add .top').click(); + await page.locator('lt-block-edit lt-select-add input[placeholder="Add a value…"]').fill('triage'); + await page.locator('lt-block-edit lt-select-add input[placeholder="Add a value…"]').press('Enter'); + await page + .locator('textarea[placeholder="Write a description here…"]') + .fill('Clean up alerts'); + await page.getByLabel('Already done').uncheck(); + await page.getByRole('button', { name: 'Create and exit', exact: true }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.getByRole('button', { name: 'Settings' }).click(); + await page.getByText('Keep tasks open').click(); + await page.locator('lt-settings .exit').click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.reload(); + + await expect(page.locator('lt-select-add .top').first()).toContainText('Ops', { + timeout: 15000, + }); + await expectTaskListOpen(page, 'Clean up alerts'); + }); }); diff --git a/frontend/e2e/visuals.spec.ts b/frontend/e2e/visuals.spec.ts index 95f94ba..dc538ab 100644 --- a/frontend/e2e/visuals.spec.ts +++ b/frontend/e2e/visuals.spec.ts @@ -1,5 +1,10 @@ import { test } from '@playwright/test'; +test.skip( + process.env['CAPTURE_VISUALS'] !== '1', + 'Set CAPTURE_VISUALS=1 to run the visual screenshot capture suite.', +); + /** * Visual capture: drives the UI into key states and writes screenshots * for human review of the legacy-styled design. @@ -7,8 +12,15 @@ import { test } from '@playwright/test'; test.describe('Life Towers visuals', () => { test('capture key UI states', async ({ page }) => { await page.goto('/'); - await page.waitForSelector('text=Add a new page to get started!', { timeout: 15000 }); - await page.screenshot({ path: 'visuals/01-empty-state.png', fullPage: true }); + await page.waitForSelector('text=Welcome to Life Towers', { timeout: 15000 }); + await page.waitForTimeout(350); // let the welcome modal finish fade-in + await page.screenshot({ path: 'visuals/01-welcome-modal.png', fullPage: true }); + + // Dismiss the welcome modal with Start empty, then continue. + await page.getByRole('button', { name: 'Start empty' }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + + await page.screenshot({ path: 'visuals/01b-empty-state-after-dismiss.png', fullPage: true }); // Open the page dropdown (without creating a page yet). await page.locator('lt-select-add .top').first().click(); @@ -26,7 +38,7 @@ test.describe('Life Towers visuals', () => { await page.locator('img[alt="Add tower"]').click(); await page.waitForSelector('section.modal.active'); await page.waitForTimeout(350); - await page.locator('input[placeholder="Tower name…"]').fill('Reading'); + await page.locator('input[placeholder="New tower"]').fill('Reading'); await page.screenshot({ path: 'visuals/03-new-tower-modal.png', fullPage: true }); await page.locator('lt-tower-settings button[type="submit"]').click(); await page.waitForSelector('section.modal', { state: 'detached' }); @@ -46,20 +58,26 @@ test.describe('Life Towers visuals', () => { await createCard .locator('textarea[placeholder="Write a description here…"]') .fill('Finish The Brothers Karamazov'); - // Toggle to "Task hasn't been finished yet" so this becomes a pending task. - await createCard - .locator('lt-toggle span') - .filter({ hasText: "This task hasn't been finished yet" }) - .click(); - await page.getByRole('button', { name: 'Create and exit' }).click(); + // Uncheck "Already done" so this becomes a pending task. + await createCard.getByLabel('Already done').uncheck(); + await page.getByRole('button', { name: 'Create and exit', exact: true }).click(); await page.waitForSelector('section.modal', { state: 'detached' }); // Open the tasks accordion to show the new tickbox. await page.waitForTimeout(200); - await page.locator('lt-tasks .container').click(); + await page.locator('lt-tasks .header').click(); await page.waitForTimeout(300); await page.screenshot({ path: 'visuals/04b-tasks-accordion-with-tickbox.png', fullPage: true }); + // Hover the tickbox: must NOT pop a scrollbar in the accordion, must NOT + // paint the global button-underline bar across the top, and the ✓ must stay + // centred (regression guard — see tasks.component .tickbox::after). + await page.locator('lt-tasks .tickbox').first().hover(); + await page.waitForTimeout(350); + await page.locator('lt-tasks .container').screenshot({ + path: 'visuals/04c-tasks-tickbox-hover.png', + }); + // Add a couple more blocks. for (const desc of ['Read about WebAssembly GC', 'Re-read "Out of the Tar Pit"']) { await page.locator('img[alt="Add block"]').first().click(); @@ -70,7 +88,7 @@ test.describe('Life Towers visuals', () => { await cc.locator('lt-select-add .top').click(); await page.waitForTimeout(100); await cc.locator('textarea[placeholder="Write a description here…"]').fill(desc); - await page.getByRole('button', { name: 'Create and exit' }).click(); + await page.getByRole('button', { name: 'Create and exit', exact: true }).click(); await page.waitForSelector('section.modal', { state: 'detached' }); } @@ -100,7 +118,7 @@ test.describe('Life Towers visuals', () => { await page.locator('img[alt="Add tower"]').click(); await page.waitForSelector('section.modal.active'); await page.waitForTimeout(350); - await page.locator('input[placeholder="Tower name…"]').fill('Side projects'); + await page.locator('input[placeholder="New tower"]').fill('Side projects'); await page.locator('lt-tower-settings button[type="submit"]').click(); await page.waitForSelector('section.modal', { state: 'detached' }); await page.waitForTimeout(300); @@ -157,4 +175,39 @@ test.describe('Life Towers visuals', () => { await page.waitForTimeout(350); await page.screenshot({ path: 'visuals/11-settings-modal.png', fullPage: true }); }); + + test('"Load sample towers" populates a sample page', async ({ page }) => { + await page.goto('/'); + await page.waitForSelector('text=Welcome to Life Towers', { timeout: 15000 }); + await page.waitForTimeout(350); + await page.getByRole('button', { name: 'Load sample towers' }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + await page.waitForTimeout(1800); + await page.screenshot({ path: 'visuals/12-example-data.png', fullPage: true }); + }); + + test('Mobile viewport — welcome + example + carousel', async ({ browser }) => { + const ctx = await browser.newContext({ viewport: { width: 390, height: 844 } }); + const page = await ctx.newPage(); + + await page.goto((process.env['PLAYWRIGHT_BASE_URL'] ?? 'http://localhost:8000') + '/'); + await page.waitForSelector('text=Welcome to Life Towers', { timeout: 15000 }); + await page.waitForTimeout(350); + await page.screenshot({ path: 'visuals/13-mobile-welcome.png', fullPage: true }); + + await page.getByRole('button', { name: 'Load sample towers' }).click(); + await page.waitForSelector('section.modal', { state: 'detached' }); + await page.waitForTimeout(1800); + await page.screenshot({ path: 'visuals/14-mobile-populated.png', fullPage: true }); + + // Open the block-edit carousel for the first tower's first task. + await page.locator('lt-tasks .header').first().click(); + await page.waitForTimeout(400); + await page.locator('lt-tasks .task-description').first().click(); + await page.waitForSelector('section.modal.active'); + await page.waitForTimeout(400); + await page.screenshot({ path: 'visuals/15-mobile-carousel.png', fullPage: true }); + + await ctx.close(); + }); });