diff --git a/.forgejo/workflows/ci.yml b/.forgejo/workflows/ci.yml index 9c0d13b..21d230e 100644 --- a/.forgejo/workflows/ci.yml +++ b/.forgejo/workflows/ci.yml @@ -8,77 +8,150 @@ on: jobs: backend: + name: Backend tests runs-on: ubuntu-latest + defaults: + run: + working-directory: backend steps: - uses: actions/checkout@v4 - name: Install uv - run: | - curl -LsSf https://astral.sh/uv/install.sh | sh - echo "$HOME/.local/bin" >> $GITHUB_PATH + uses: astral-sh/setup-uv@v4 + with: + version: latest + + - name: Set up Python + run: uv python install 3.13 - name: Sync dependencies - working-directory: backend run: uv sync - - name: Run tests - working-directory: backend + - name: Run pytest run: uv run pytest -v - frontend: + frontend-lint: + name: Frontend lint runs-on: ubuntu-latest + defaults: + run: + working-directory: frontend steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '22' - cache: 'npm' + cache: npm cache-dependency-path: frontend/package-lock.json - name: Install dependencies - working-directory: frontend run: npm ci - - name: Lint (if configured) - working-directory: frontend - run: | - if [ -f eslint.config.js ] || [ -f .eslintrc.json ] || [ -f .eslintrc.js ]; then - npm run lint - else - echo "No ESLint config found, skipping lint" - fi + - name: Run ESLint + run: npm run lint - - name: Build - working-directory: frontend - run: npm run build - - - name: Test - working-directory: frontend - run: npm test - - docker: + frontend-test: + name: Frontend unit tests runs-on: ubuntu-latest - needs: [backend, frontend] + defaults: + run: + working-directory: frontend steps: - uses: actions/checkout@v4 - - name: Build Docker image - run: docker build -t life-towers:${{ github.sha }} . + - uses: actions/setup-node@v4 + with: + node-version: '22' + cache: npm + cache-dependency-path: frontend/package-lock.json - - name: Push to registry - if: github.event_name == 'push' && github.ref == 'refs/heads/master' - env: - REGISTRY_URL: ${{ secrets.REGISTRY_URL }} - REGISTRY_USER: ${{ secrets.REGISTRY_USER }} - REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }} + - name: Install dependencies + run: npm ci + + - name: Run Vitest + run: npm test + + frontend-build: + name: Frontend build + runs-on: ubuntu-latest + defaults: + run: + working-directory: frontend + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: '22' + cache: npm + cache-dependency-path: frontend/package-lock.json + + - name: Install dependencies + run: npm ci + + - name: Build production bundle + run: npm run build + + e2e: + name: Playwright e2e + runs-on: ubuntu-latest + needs: [backend, frontend-build] + steps: + - uses: actions/checkout@v4 + + - name: Start stack + run: docker compose -p life-towers -f docker-compose.dev.yml up --build -d + + - name: Wait for /api/v1/health run: | - if [ -z "$REGISTRY_URL" ] || [ -z "$REGISTRY_USER" ] || [ -z "$REGISTRY_PASSWORD" ]; then - echo "Registry secrets not configured, skipping push" - exit 0 - fi - echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" -u "$REGISTRY_USER" --password-stdin - docker tag life-towers:${{ github.sha }} "$REGISTRY_URL/life-towers:${{ github.sha }}" - docker tag life-towers:${{ github.sha }} "$REGISTRY_URL/life-towers:latest" - docker push "$REGISTRY_URL/life-towers:${{ github.sha }}" - docker push "$REGISTRY_URL/life-towers:latest" + set -e + cid=$(docker compose -p life-towers -f docker-compose.dev.yml ps -q life-towers) + for i in $(seq 1 60); do + status=$(docker inspect -f '{{.State.Health.Status}}' "$cid" 2>/dev/null || echo starting) + if [ "$status" = healthy ]; then + echo "stack healthy after ${i} attempts" + exit 0 + fi + sleep 2 + done + echo "stack failed to become healthy" >&2 + docker compose -p life-towers -f docker-compose.dev.yml logs >&2 + exit 1 + + - name: Run Playwright + run: | + docker run --rm \ + --network life-towers_default \ + -v "$(pwd)/frontend:/work" \ + -w /work \ + -e PLAYWRIGHT_BASE_URL=http://life-towers:8000 \ + -e CI=true \ + mcr.microsoft.com/playwright:v1.60.0-noble \ + sh -c 'npm ci && npx playwright test' + + - name: Upload Playwright report + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-report + path: frontend/playwright-report + if-no-files-found: ignore + retention-days: 14 + + - name: Upload visual screenshots + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-visuals + path: frontend/visuals + if-no-files-found: ignore + retention-days: 14 + + - name: Dump container logs on failure + if: failure() + run: docker compose -p life-towers -f docker-compose.dev.yml logs + + - name: Tear down stack + if: always() + run: docker compose -p life-towers -f docker-compose.dev.yml down -v diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml deleted file mode 100644 index 598350d..0000000 --- a/.forgejo/workflows/deploy.yml +++ /dev/null @@ -1,52 +0,0 @@ -# IMPORTANT: Before this workflow will function, configure the following -# repository secrets in Forgejo (Settings → Secrets): -# DEPLOY_HOST — hostname or IP of the target server -# DEPLOY_USER — SSH user on the target server -# DEPLOY_SSH_KEY — private SSH key (PEM or OpenSSH format) -# DEPLOY_PATH — absolute path to the project directory on the server -# (must contain a docker-compose.yml + a .env file -# that sets LIFE_TOWERS_IMAGE to the registry tag, -# e.g. LIFE_TOWERS_IMAGE=registry.example.com/life-towers:latest) - -name: Deploy - -on: - workflow_dispatch: - push: - tags: - - 'v*' - -jobs: - deploy: - runs-on: ubuntu-latest - steps: - - name: Install SSH key - run: | - mkdir -p ~/.ssh - chmod 700 ~/.ssh - printf '%s\n' "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/deploy_key - chmod 600 ~/.ssh/deploy_key - ssh-keyscan -H "${{ secrets.DEPLOY_HOST }}" >> ~/.ssh/known_hosts - chmod 644 ~/.ssh/known_hosts - - - name: Deploy via SSH - run: | - set -euo pipefail - # Pulls the new image referenced by $LIFE_TOWERS_IMAGE in the - # server's .env, restarts the service, then verifies health. - ssh -i ~/.ssh/deploy_key \ - -o StrictHostKeyChecking=yes \ - "${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST }}" \ - "set -euo pipefail - cd '${{ secrets.DEPLOY_PATH }}' - docker compose pull - docker compose up -d --remove-orphans - # Wait for healthcheck (max ~60s) - for i in \$(seq 1 30); do - status=\$(docker compose ps --format json life-towers | python3 -c 'import sys,json;[print(json.loads(l).get(\"Health\",\"\")) for l in sys.stdin]' || true) - if [ \"\$status\" = healthy ]; then echo deploy_healthy; exit 0; fi - sleep 2 - done - echo deploy_unhealthy >&2 - docker compose logs --tail 50 life-towers >&2 - exit 1" diff --git a/.forgejo/workflows/docker.yml b/.forgejo/workflows/docker.yml new file mode 100644 index 0000000..8e4f6d7 --- /dev/null +++ b/.forgejo/workflows/docker.yml @@ -0,0 +1,50 @@ +name: Docker + +on: + push: + branches: [master] + workflow_dispatch: + +env: + REGISTRY: ${{ vars.REGISTRY || 'ghcr.io' }} + IMAGE_NAME: ${{ github.repository }} + +jobs: + build-and-push: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Log in to container registry + uses: docker/login-action@v3 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Extract metadata + id: meta + uses: docker/metadata-action@v5 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + tags: | + type=raw,value=latest + type=sha,prefix=sha-,format=short + + - name: Build and push + uses: docker/build-push-action@v6 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max 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 `
-

{{ 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); + }); +}); 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 }); } } 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 { diff --git a/frontend/src/app/components/shared/color-picker/color-picker.component.ts b/frontend/src/app/components/shared/color-picker/color-picker.component.ts index fe5104c..e12ee89 100644 --- a/frontend/src/app/components/shared/color-picker/color-picker.component.ts +++ b/frontend/src/app/components/shared/color-picker/color-picker.component.ts @@ -61,7 +61,10 @@ const FIXED_L = 0.55; display: block; padding: var(--medium-padding); @include card(); - box-shadow: $shadow-border; + border: 1px solid rgba($text-color, 0.14); + box-shadow: inset 0 0 0 1px rgba($light-color, 0.7); + background-color: rgba($text-color, 0.025); + box-sizing: border-box; } .picker { @@ -76,35 +79,40 @@ const FIXED_L = 0.55; grid-template-columns: repeat(12, 1fr); gap: 6px; + @media (max-width: $mobile-width) { + grid-template-columns: repeat(6, 1fr); + gap: var(--small-padding); + } + .swatch { all: unset; cursor: pointer; aspect-ratio: 1; border-radius: 4px; - box-shadow: $shadow-border; + box-shadow: 0 0 0 1px rgba($text-color, 0.18); transition: transform $short-animation-time, box-shadow $long-animation-time; &:hover, &:focus-visible { - box-shadow: $shadow; + box-shadow: 0 0 0 2px $light-color, 0 0 0 4px rgba($text-color, 0.5); transform: scale(1.1); } &.active { - box-shadow: $shadow; + box-shadow: 0 0 0 2px $light-color, 0 0 0 4px rgba($text-color, 0.5); transform: scale(1.15); - outline: 2px solid $light-color; - outline-offset: 1px; } } } .hue-slider { + padding: 8px 0; + input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; - height: 12px; + height: 16px; border-radius: 1000px; background: linear-gradient( to right, @@ -119,11 +127,15 @@ const FIXED_L = 0.55; outline: none; cursor: pointer; + &:focus-visible { + box-shadow: 0 0 0 3px rgba($text-color, 0.35); + } + &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; - height: 24px; - width: 24px; + height: 32px; + width: 32px; border-radius: 1000px; background-color: var(--thumb-color, #{$light-color}); box-shadow: 0 0 0 2px #{$light-color}, #{$shadow}; @@ -135,8 +147,8 @@ const FIXED_L = 0.55; } &::-moz-range-thumb { - height: 24px; - width: 24px; + height: 32px; + width: 32px; border-radius: 1000px; background-color: var(--thumb-color, white); border: 2px solid white; @@ -153,7 +165,7 @@ const FIXED_L = 0.55; .preview { height: 40px; border-radius: var(--border-radius); - box-shadow: $shadow-border; + box-shadow: 0 0 0 1px rgba($text-color, 0.18); } `, }) @@ -173,9 +185,8 @@ export class ColorPickerComponent { return `hsl(${h}, 70%, 55%)`; } - toCss(c: HslColor): string { - return toCss(c); - } + /** Re-exported so the template can call the utility directly. */ + readonly toCss = toCss; pickHue(h: number): void { this.colorChange.emit({ h: h / 360, s: FIXED_S, l: FIXED_L }); diff --git a/frontend/src/app/components/shared/double-slider/double-slider.component.ts b/frontend/src/app/components/shared/double-slider/double-slider.component.ts index b0f34ae..f4db1e4 100644 --- a/frontend/src/app/components/shared/double-slider/double-slider.component.ts +++ b/frontend/src/app/components/shared/double-slider/double-slider.component.ts @@ -18,7 +18,7 @@ export interface DoubleSliderRange { * Two-thumb range slider — legacy "double-slider". * Hands an indexed range over an arbitrary values array; emits the * underlying values on each change. Labels magnetically lift as a thumb - * approaches them (rotated -45°), per the legacy. + * approaches them (rotated -30°), per the legacy. */ @Component({ selector: 'lt-double-slider', @@ -32,7 +32,7 @@ export interface DoubleSliderRange { id="ds-1" type="range" min="0" - [max]="MAX - 1" + [max]="maxIndex()" [value]="oneValue()" (input)="oneValue.set(+$any($event.target).value)" /> @@ -40,7 +40,7 @@ export interface DoubleSliderRange { id="ds-2" type="range" min="0" - [max]="MAX - 1" + [max]="maxIndex()" [value]="otherValue()" (input)="otherValue.set(+$any($event.target).value)" /> @@ -65,6 +65,11 @@ export interface DoubleSliderRange { position: relative; margin: calc(#{$slider-size} / 2) auto 0 auto; + @media (max-width: $mobile-width) { + max-width: 90vw; + margin-top: calc(#{$slider-size} / 2); + } + label { display: none; } input[type='range'] { @@ -145,6 +150,12 @@ export interface DoubleSliderRange { transition: transform $long-animation-time; white-space: nowrap; } + + @media (max-width: $mobile-width) { + font-size: var(--small-font-size); + margin-top: $slider-size; + span { margin-top: 10px; } + } } } `, @@ -157,10 +168,9 @@ export class DoubleSliderComponent { readonly rangeChange = output>(); - readonly MAX = 100; - readonly oneValue = signal(0); - readonly otherValue = signal(this.MAX - 1); + readonly otherValue = signal(0); + readonly maxIndex = computed(() => Math.max(0, this.values().length - 1)); private prevValuesLength = 0; @@ -187,42 +197,44 @@ export class DoubleSliderComponent { const hi = Math.max(a, b); untracked(() => { this.rangeChange.emit({ - from: vs[this.indexFromValue(lo)], - to: vs[this.indexFromValue(hi)], + from: vs[this.clampIndex(lo)], + to: vs[this.clampIndex(hi)], }); }); }); - // Snap the higher thumb to MAX - 1 when a new entry is appended. + // Snap the higher thumb to the newest value when a new entry is appended. effect(() => { const len = this.values().length; untracked(() => { + const max = Math.max(0, len - 1); if (len > this.prevValuesLength) { const a = this.oneValue(); const b = this.otherValue(); - if (a > b) this.oneValue.set(this.MAX - 1); - else this.otherValue.set(this.MAX - 1); + if (a > b) this.oneValue.set(max); + else this.otherValue.set(max); + } else { + if (this.oneValue() > max) this.oneValue.set(max); + if (this.otherValue() > max) this.otherValue.set(max); } this.prevValuesLength = len; }); }); } - private indexFromValue(value: number): number { - return Math.min( - this.values().length - 1, - Math.floor((value / this.MAX) * this.values().length), - ); + private clampIndex(value: number): number { + return Math.max(0, Math.min(this.values().length - 1, Math.round(value))); } /** * Magnetic label position: returns a CSS `transform` that lifts the label - * upward and rotates -45° as a thumb approaches. + * upward and rotates -30° as a thumb approaches. */ getOffset(index: number): string { - const labelIndex = index / Math.max(1, this.drawnLabels().length); - const a = this.oneValue() / this.MAX - 0.1; - const b = this.otherValue() / this.MAX - 0.1; + const labelIndex = index / Math.max(1, this.drawnLabels().length - 1); + const max = Math.max(1, this.maxIndex()); + const a = this.oneValue() / max - 0.1; + const b = this.otherValue() / max - 0.1; const dist = Math.min(Math.abs(labelIndex - a), Math.abs(labelIndex - b)); const ACTIVE_ZONE = 0.2; const base = 'translateX(-50%) rotate(-30deg) translateY(100%)'; diff --git a/frontend/src/app/components/shared/select-add/select-add.component.ts b/frontend/src/app/components/shared/select-add/select-add.component.ts index 7e01d73..baac459 100644 --- a/frontend/src/app/components/shared/select-add/select-add.component.ts +++ b/frontend/src/app/components/shared/select-add/select-add.component.ts @@ -4,8 +4,9 @@ import { input, output, signal, - OnChanges, - SimpleChanges, + ElementRef, + HostListener, + inject, } from '@angular/core'; @Component({ @@ -19,7 +20,15 @@ import { [class.always-shadow]="alwaysDropShadow()" >
-
+

{{ resolvedSelected() ?? placeholder() }}

@@ -30,10 +39,13 @@ import { } @else { -

{{ item }}

+ } }
@@ -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 { 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'); + }); +}); 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 }); + }); +}); 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); + } } } `, diff --git a/frontend/src/app/models/index.ts b/frontend/src/app/models/index.ts index 1f0af8b..083f09d 100644 --- a/frontend/src/app/models/index.ts +++ b/frontend/src/app/models/index.ts @@ -9,6 +9,8 @@ export interface Block { tag: string; description: string; is_done: boolean; + /** How many squares this block draws in the tower (>= 1). */ + difficulty: number; created_at: number; } @@ -38,7 +40,7 @@ export type SaveStatus = | 'saving' | 'saved' | 'retrying' - | 'error' // generic / network — will keep trying - | 'too-large' // 413 — payload exceeds the server cap, won't retry + | 'error' // generic / network — retries exhausted until the next mutation + | 'too-large' // 413 — payload exceeds the server cap, will not retry | 'rate-limited' // 429 — will retry after Retry-After - | 'invalid'; // 400 — server rejected the body, won't retry + | 'invalid'; // 400 — server rejected the body, will not retry diff --git a/frontend/src/app/services/analytics.service.ts b/frontend/src/app/services/analytics.service.ts new file mode 100644 index 0000000..84d3e0c --- /dev/null +++ b/frontend/src/app/services/analytics.service.ts @@ -0,0 +1,65 @@ +import { Injectable, isDevMode } from '@angular/core'; +import { + init as plausibleInit, + track as plausibleTrack, + type PlausibleEventOptions, +} from '@plausible-analytics/tracker'; + +const ANALYTICS_AUTO_CAPTURE_PAGEVIEWS = true; +const ANALYTICS_DOMAIN = 'schmelczer.dev/towers'; +const ANALYTICS_ENDPOINT = 'https://stats.schmelczer.dev/status'; + +@Injectable({ providedIn: 'root' }) +export class AnalyticsService { + private isInitialized = false; + private hasTrackedStart = false; + + init(): void { + if (this.isInitialized) return; + try { + plausibleInit({ + domain: ANALYTICS_DOMAIN, + endpoint: ANALYTICS_ENDPOINT, + autoCapturePageviews: ANALYTICS_AUTO_CAPTURE_PAGEVIEWS, + logging: isDevMode(), + }); + this.isInitialized = true; + } catch (error) { + console.warn('Could not initialize analytics.', error); + } + } + + private track(eventName: string, options: PlausibleEventOptions = {}): void { + try { + plausibleTrack(eventName, options); + } catch (error) { + console.warn(`Could not track analytics event "${eventName}".`, error); + } + } + + trackStart(): void { + if (this.hasTrackedStart) return; + this.hasTrackedStart = true; + this.track('Start'); + } + + trackExampleLoaded(): void { + this.track('Example Loaded'); + } + + trackPageCreated(): void { + this.track('Page Created'); + } + + trackTowerCreated(): void { + this.track('Tower Created'); + } + + trackBlockCreated({ isDone }: { isDone: boolean }): void { + this.track('Block Created', { props: { isDone: String(isDone) } }); + } + + trackBlockCompleted(): void { + this.track('Block Completed'); + } +} diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 2e9b8e8..58bf117 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -23,9 +23,9 @@ export class ApiService { ); } - putData(token: string, tree: TreeDto): Promise { - return firstValueFrom( - this.http.put('/api/v1/data', tree, { headers: this.authHeaders(token) }), + async putData(token: string, tree: TreeDto): Promise { + await firstValueFrom( + this.http.put('/api/v1/data', tree, { headers: this.authHeaders(token) }), ); } diff --git a/frontend/src/app/services/api.service.vitest.ts b/frontend/src/app/services/api.service.vitest.ts index d8a681f..4b9b4e3 100644 --- a/frontend/src/app/services/api.service.vitest.ts +++ b/frontend/src/app/services/api.service.vitest.ts @@ -1,28 +1,44 @@ -import { describe, it, expect, vi } from 'vitest'; +import { describe, it, expect, beforeEach, afterEach } from 'vitest'; +import { TestBed } from '@angular/core/testing'; +import { provideHttpClient } from '@angular/common/http'; +import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; +import { ApiService } from './api.service'; +import type { TreeDto } from '../models'; -// Mock environment -vi.mock('../../environments/environment', () => ({ - environment: { apiBase: 'http://test-api', production: false }, -})); +describe('ApiService', () => { + let service: ApiService; + let http: HttpTestingController; -describe('ApiService URL patterns', () => { - const baseUrl = 'http://test-api'; - - it('constructs correct health URL', () => { - expect(`${baseUrl}/api/v1/health`).toBe('http://test-api/api/v1/health'); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [provideHttpClient(), provideHttpClientTesting(), ApiService], + }); + service = TestBed.inject(ApiService); + http = TestBed.inject(HttpTestingController); }); - it('constructs correct register URL', () => { - expect(`${baseUrl}/api/v1/register`).toBe('http://test-api/api/v1/register'); + afterEach(() => { + http.verify(); }); - it('constructs correct data URL', () => { - expect(`${baseUrl}/api/v1/data`).toBe('http://test-api/api/v1/data'); + it('gets data with a bearer token', async () => { + const tree: TreeDto = { pages: [] }; + const promise = service.getData('token-1'); + const req = http.expectOne('/api/v1/data'); + expect(req.request.method).toBe('GET'); + expect(req.request.headers.get('Authorization')).toBe('Bearer token-1'); + req.flush(tree); + await expect(promise).resolves.toEqual(tree); }); - it('formats Authorization header correctly', () => { - const token = 'abc-def-123'; - const header = `Bearer ${token}`; - expect(header).toBe('Bearer abc-def-123'); + it('puts data with a bearer token', async () => { + const tree: TreeDto = { pages: [] }; + const promise = service.putData('token-1', tree); + const req = http.expectOne('/api/v1/data'); + expect(req.request.method).toBe('PUT'); + expect(req.request.headers.get('Authorization')).toBe('Bearer token-1'); + expect(req.request.body).toBe(tree); + req.flush(null); + await expect(promise).resolves.toBeUndefined(); }); }); diff --git a/frontend/src/app/services/modal-state.service.ts b/frontend/src/app/services/modal-state.service.ts index c1565ed..eb78a78 100644 --- a/frontend/src/app/services/modal-state.service.ts +++ b/frontend/src/app/services/modal-state.service.ts @@ -5,7 +5,7 @@ import { Injectable, computed, signal } from '@angular/core'; * mount and decrements on destroy. Consumers read `anyOpen` to react. * * Used by `page.component` to disable tower drag-and-drop while any modal - * (block-edit carousel, page-settings, tower-settings, confirm-delete, + * (block-edit carousel, settings, tower-settings, confirm-delete, * settings) is on screen — otherwise the user can drag towers from behind * the open card. */ diff --git a/frontend/src/app/services/store.service.ts b/frontend/src/app/services/store.service.ts index a1e3e5b..71589bc 100644 --- a/frontend/src/app/services/store.service.ts +++ b/frontend/src/app/services/store.service.ts @@ -1,9 +1,11 @@ -import { Injectable, inject, signal, computed, OnDestroy } from '@angular/core'; +import { Injectable, inject, signal, OnDestroy } from '@angular/core'; import { ApiService } from './api.service'; +import { AnalyticsService } from './analytics.service'; import { Page, Tower, Block, TreeDto, SaveStatus, HslColor } from '../models'; const TOKEN_KEY = 'life-towers.token.v4'; -const CACHE_KEY = 'life-towers.cache.v4'; +const CACHE_KEY_PREFIX = 'life-towers.cache.v4'; +const PENDING_CACHE_KEY_PREFIX = 'life-towers.cache-pending.v4'; const DEBOUNCE_MS = 750; const MAX_RETRIES = 5; @@ -28,7 +30,7 @@ function uuidV4(): string { function isUuidV4(value: string): boolean { return /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/.test( - value, + value.toLowerCase(), ); } @@ -49,15 +51,47 @@ function safeSet(key: string, value: string): void { /* ignore */ } } +function safeRemove(key: string): void { + try { + localStorage.removeItem(key); + } catch { + /* ignore */ + } +} + +function cacheKeyForToken(token: string): string { + return `${CACHE_KEY_PREFIX}.${token}`; +} + +function pendingCacheKeyForToken(token: string): string { + return `${PENDING_CACHE_KEY_PREFIX}.${token}`; +} interface PendingPut { token: string; tree: TreeDto; + revision: number; } +interface ExampleBlockSeed { + tag: string; + desc: string; + done: boolean; + difficulty?: number; + ageHrs: number; +} + +interface ExampleDonePattern { + tag: string; + desc: (sequence: number) => string; +} + +const EXAMPLE_DONE_BLOCKS_PER_TOWER = 12; + @Injectable({ providedIn: 'root' }) export class StoreService implements OnDestroy { private readonly api = inject(ApiService); + private readonly analytics = inject(AnalyticsService); // ── State ────────────────────────────────────────────────────────────────── private readonly _pages = signal([]); @@ -70,26 +104,22 @@ export class StoreService implements OnDestroy { readonly loading = this._loading.asReadonly(); readonly token = this._token.asReadonly(); - readonly pageCount = computed(() => this._pages().length); - // ── Debounce / retry ─────────────────────────────────────────────────────── private debounceTimer: ReturnType | null = null; private retryTimer: ReturnType | null = null; + private retryResolver: (() => void) | null = null; private flushInFlight = false; // True while in-flight if a new mutation arrived; we'll re-flush after. private dirtyDuringFlush = false; + // Monotonic local mutation version. Prevents an older in-flight PUT from + // clearing a newer pending cache entry when it completes. + private localMutationRevision = 0; // ── Cross-tab sync ───────────────────────────────────────────────────────── private readonly storageListener = (e: StorageEvent) => { if (e.key === TOKEN_KEY && e.newValue && e.newValue !== this._token()) { - // Another tab switched accounts. Re-init with the new token instead of - // continuing to sync the old account's state to the new one. - this._token.set(e.newValue); - this._pages.set([]); - this._loading.set(true); - this.cancelPendingWrites(); - void this.init(); - } else if (e.key === CACHE_KEY && e.newValue && !this.flushInFlight) { + this.switchToken(e.newValue); + } else if (e.key === cacheKeyForToken(this._token()) && e.newValue && !this.flushInFlight) { // Another tab just wrote a fresh cache; adopt it if we're not mid-save // (to avoid clobbering our own state with the other tab's older view). try { @@ -103,17 +133,21 @@ export class StoreService implements OnDestroy { // ── Single-flight init ───────────────────────────────────────────────────── private initPromise: Promise | null = null; + private initGeneration = 0; // ── Init ─────────────────────────────────────────────────────────────────── async init(): Promise { if (this.initPromise) return this.initPromise; - this.initPromise = this.doInit().finally(() => { - this.initPromise = null; + const generation = ++this.initGeneration; + this.initPromise = this.doInit(generation).finally(() => { + if (this.initGeneration === generation) { + this.initPromise = null; + } }); return this.initPromise; } - private async doInit(): Promise { + private async doInit(generation: number): Promise { if (typeof window !== 'undefined') { // (idempotent — adding the same listener twice is a no-op) window.addEventListener('storage', this.storageListener); @@ -123,6 +157,9 @@ export class StoreService implements OnDestroy { if (stored && !isUuidV4(stored)) { // Garbage in localStorage from a buggy past version — refuse it. stored = null; + } else if (stored) { + stored = stored.toLowerCase(); + safeSet(TOKEN_KEY, stored); } const token = stored ?? uuidV4(); if (!stored) { @@ -140,7 +177,7 @@ export class StoreService implements OnDestroy { try { const tree = await this.api.getData(token); - this.adoptServerTree(tree); + if (this.isCurrentInit(generation, token)) this.adoptServerTree(tree, token); } catch (err: unknown) { const status = (err as { status?: number })?.status; if (status === 401) { @@ -148,57 +185,73 @@ export class StoreService implements OnDestroy { try { await this.api.register(token); const tree = await this.api.getData(token); - this.adoptServerTree(tree); + if (this.isCurrentInit(generation, token)) this.adoptServerTree(tree, token); } catch { - this.loadFromCache(); + if (this.isCurrentInit(generation, token)) this.loadFromCache(token); } } else { - this.loadFromCache(); + if (this.isCurrentInit(generation, token)) this.loadFromCache(token); } } finally { - this._loading.set(false); + if (this.initGeneration === generation) { + this._loading.set(false); + } } } + private isCurrentInit(generation: number, token: string): boolean { + return this.initGeneration === generation && this._token() === token; + } + /** * Apply a freshly-fetched server tree. If the server is empty but our local * cache holds data, the cache wins and we schedule a push — otherwise the * "server forgot me" recovery would silently wipe offline edits. */ - private adoptServerTree(tree: TreeDto): void { + private adoptServerTree(tree: TreeDto, token: string): void { + if (safeGet(pendingCacheKeyForToken(token))) { + const cachedTree = this.readCachedTree(token); + if (cachedTree?.pages && cachedTree.pages.length > 0) { + this._pages.set(cachedTree.pages); + this.scheduleSave(); + return; + } + } + if (tree.pages.length === 0) { - const cached = safeGet(CACHE_KEY); - if (cached) { - try { - const cachedTree: TreeDto = JSON.parse(cached); - if (cachedTree.pages && cachedTree.pages.length > 0) { - this._pages.set(cachedTree.pages); - this.scheduleSave(); - return; - } - } catch { - /* fall through to server-empty */ - } + const cachedTree = this.readCachedTree(token); + if (cachedTree?.pages && cachedTree.pages.length > 0) { + this._pages.set(cachedTree.pages); + this.scheduleSave(); + return; } } this._pages.set(tree.pages); - this.updateCache(tree); + this.updateCache(token, tree); } - private loadFromCache(): void { - const raw = safeGet(CACHE_KEY); - if (raw) { - try { - const tree: TreeDto = JSON.parse(raw); - this._pages.set(tree.pages); - } catch { - /* ignore */ - } + private loadFromCache(token: string): void { + const tree = this.readCachedTree(token); + if (tree) this._pages.set(tree.pages); + } + + private readCachedTree(token: string): TreeDto | null { + const raw = safeGet(cacheKeyForToken(token)); + if (!raw) return null; + try { + return JSON.parse(raw) as TreeDto; + } catch { + return null; } } - private updateCache(tree: TreeDto): void { - safeSet(CACHE_KEY, JSON.stringify(tree)); + private updateCache(token: string, tree: TreeDto, pending = false): void { + safeSet(cacheKeyForToken(token), JSON.stringify(tree)); + if (pending) { + safeSet(pendingCacheKeyForToken(token), '1'); + } else { + safeRemove(pendingCacheKeyForToken(token)); + } } private cancelPendingWrites(): void { @@ -210,6 +263,11 @@ export class StoreService implements OnDestroy { clearTimeout(this.retryTimer); this.retryTimer = null; } + if (this.retryResolver !== null) { + const resolve = this.retryResolver; + this.retryResolver = null; + resolve(); + } this.dirtyDuringFlush = false; } @@ -226,6 +284,8 @@ export class StoreService implements OnDestroy { towers: [], }; this._pages.update((pages) => [...pages, page]); + this.analytics.trackStart(); + this.analytics.trackPageCreated(); this.scheduleSave(); } @@ -242,13 +302,13 @@ export class StoreService implements OnDestroy { } reorderPages(fromIndex: number, toIndex: number): void { + let changed = false; this._pages.update((pages) => { - const arr = [...pages]; - const [item] = arr.splice(fromIndex, 1); - arr.splice(toIndex, 0, item); - return arr; + const reordered = reorder(pages, fromIndex, toIndex); + changed = reordered !== null; + return reordered ?? pages; }); - this.scheduleSave(); + if (changed) this.scheduleSave(); } addTower(pageId: string, name: string, base_color: HslColor): void { @@ -256,6 +316,8 @@ export class StoreService implements OnDestroy { this._pages.update((pages) => pages.map((p) => (p.id === pageId ? { ...p, towers: [...p.towers, tower] } : p)), ); + this.analytics.trackStart(); + this.analytics.trackTowerCreated(); this.scheduleSave(); } @@ -280,16 +342,17 @@ export class StoreService implements OnDestroy { } reorderTowers(pageId: string, fromIndex: number, toIndex: number): void { + let changed = false; this._pages.update((pages) => pages.map((p) => { if (p.id !== pageId) return p; - const towers = [...p.towers]; - const [item] = towers.splice(fromIndex, 1); - towers.splice(toIndex, 0, item); + const towers = reorder(p.towers, fromIndex, toIndex); + if (towers === null) return p; + changed = true; return { ...p, towers }; }), ); - this.scheduleSave(); + if (changed) this.scheduleSave(); } addBlock( @@ -298,26 +361,30 @@ export class StoreService implements OnDestroy { tag: string, description: string, is_done = false, + difficulty = 1, ): void { const block: Block = { id: uuidV4(), tag, description, is_done, + difficulty, created_at: Math.floor(Date.now() / 1000), }; this._pages.update((pages) => pages.map((p) => p.id === pageId ? { - ...p, - towers: p.towers.map((t) => - t.id === towerId ? { ...t, blocks: [...t.blocks, block] } : t, - ), - } + ...p, + towers: p.towers.map((t) => + t.id === towerId ? { ...t, blocks: [...t.blocks, block] } : t, + ), + } : p, ), ); + this.analytics.trackStart(); + this.analytics.trackBlockCreated({ isDone: is_done }); this.scheduleSave(); } @@ -327,23 +394,29 @@ export class StoreService implements OnDestroy { blockId: string, patch: Partial>, ): void { + let becameDone = false; this._pages.update((pages) => pages.map((p) => p.id === pageId ? { - ...p, - towers: p.towers.map((t) => - t.id === towerId - ? { - ...t, - blocks: t.blocks.map((b) => (b.id === blockId ? { ...b, ...patch } : b)), - } - : t, - ), - } + ...p, + towers: p.towers.map((t) => + t.id === towerId + ? (() => { + const result = this.patchBlockList(t.blocks, blockId, patch); + becameDone = result.becameDone; + return { ...t, blocks: result.blocks }; + })() + : t, + ), + } : p, ), ); + if (becameDone) { + this.analytics.trackStart(); + this.analytics.trackBlockCompleted(); + } this.scheduleSave(); } @@ -352,40 +425,49 @@ export class StoreService implements OnDestroy { pages.map((p) => p.id === pageId ? { - ...p, - towers: p.towers.map((t) => - t.id === towerId - ? { ...t, blocks: t.blocks.filter((b) => b.id !== blockId) } - : t, - ), - } + ...p, + towers: p.towers.map((t) => + t.id === towerId + ? { ...t, blocks: t.blocks.filter((b) => b.id !== blockId) } + : t, + ), + } : p, ), ); this.scheduleSave(); } - toggleBlock(pageId: string, towerId: string, blockId: string): void { - this._pages.update((pages) => - pages.map((p) => - p.id === pageId - ? { - ...p, - towers: p.towers.map((t) => - t.id === towerId - ? { - ...t, - blocks: t.blocks.map((b) => - b.id === blockId ? { ...b, is_done: !b.is_done } : b, - ), - } - : t, - ), - } - : p, - ), - ); - this.scheduleSave(); + private patchBlockList( + blocks: Block[], + blockId: string, + patch: Partial>, + ): { blocks: Block[]; becameDone: boolean } { + const nextBlocks: Block[] = []; + let completedBlock: Block | null = null; + let becameDone = false; + + for (const block of blocks) { + if (block.id !== blockId) { + nextBlocks.push(block); + continue; + } + + const updated: Block = { ...block, ...patch }; + becameDone = !block.is_done && updated.is_done; + if (becameDone) { + // Display newly completed todos as the newest square, without changing + // created_at because the date slider still filters on creation time. + completedBlock = updated; + } else { + nextBlocks.push(updated); + } + } + + return { + blocks: completedBlock ? [...nextBlocks, completedBlock] : nextBlocks, + becameDone, + }; } /** @@ -395,19 +477,27 @@ export class StoreService implements OnDestroy { * if the timing flipped). */ switchToken(newToken: string): void { - if (!isUuidV4(newToken)) return; + const token = newToken.toLowerCase(); + if (!isUuidV4(token)) return; this.cancelPendingWrites(); - safeSet(TOKEN_KEY, newToken); - this._token.set(newToken); + this.initGeneration++; + this.initPromise = null; + safeSet(TOKEN_KEY, token); + this._token.set(token); this._pages.set([]); this._loading.set(true); this._saveStatus.set('idle'); + this.localMutationRevision = 0; void this.init(); } // ── Save / sync ──────────────────────────────────────────────────────────── private scheduleSave(): void { + this.localMutationRevision += 1; + const token = this._token(); + if (token) this.updateCache(token, { pages: this._pages() }, true); + if (this.flushInFlight) { // A save is already happening. Mark dirty so we re-flush when it finishes. this.dirtyDuringFlush = true; @@ -435,6 +525,7 @@ export class StoreService implements OnDestroy { this.flushInFlight = true; this.dirtyDuringFlush = false; + const revision = this.localMutationRevision; // Cancel any pending retry — runFlush() supersedes it. if (this.retryTimer !== null) { @@ -443,7 +534,7 @@ export class StoreService implements OnDestroy { } try { - await this.attempt({ token, tree: { pages: this._pages() } }, 0); + await this.attempt({ token, tree: { pages: this._pages() }, revision }, 0); } finally { this.flushInFlight = false; // Coalesce mutations that arrived during the flush into a fresh save. @@ -459,7 +550,13 @@ export class StoreService implements OnDestroy { try { await this.api.putData(put.token, put.tree); this._saveStatus.set('saved'); - this.updateCache(put.tree); + if ( + this._token() === put.token && + put.revision === this.localMutationRevision && + !this.dirtyDuringFlush + ) { + this.updateCache(put.token, put.tree); + } return; } catch (err: unknown) { const status = (err as { status?: number })?.status; @@ -503,8 +600,10 @@ export class StoreService implements OnDestroy { } await new Promise((resolve) => { + this.retryResolver = resolve; this.retryTimer = setTimeout(() => { this.retryTimer = null; + this.retryResolver = null; resolve(); }, delayMs); }); @@ -512,13 +611,16 @@ export class StoreService implements OnDestroy { // The token may have changed during the wait — re-check before retrying. if (this._token() !== put.token) return; // Re-snapshot the latest pages so the retry pushes current state. - await this.attempt({ token: put.token, tree: { pages: this._pages() } }, attempt + 1); + await this.attempt( + { token: put.token, tree: { pages: this._pages() }, revision: put.revision }, + attempt + 1, + ); } } // ── Example data ────────────────────────────────────────────────────────── - loadExample(): void { + loadExample(): string { const now = Math.floor(Date.now() / 1000); const page: Page = { @@ -529,38 +631,83 @@ export class StoreService implements OnDestroy { default_date_from: null, default_date_to: null, towers: [ + // Done blocks are listed oldest-first so they fill the falling stack + // oldest → newest (left → right), matching the slider's old → new + // labels; pending tasks stay on top for the accordion. this.makeExampleTower('Reading', { h: 0.05, s: 0.7, l: 0.55 }, now, [ - { tag: 'novel', desc: 'Finish The Brothers Karamazov', done: false, ageHrs: 0 }, - { tag: 'novel', desc: "Read Dostoyevsky's notes", done: true, ageHrs: 2 }, - { tag: 'article', desc: 'How does WebAssembly GC work?', done: true, ageHrs: 6 }, - { tag: 'paper', desc: 'Re-read "Out of the Tar Pit"', done: true, ageHrs: 30 }, - { tag: 'novel', desc: 'Submit a short story', done: true, ageHrs: 72 }, + { + tag: 'novel', + desc: 'Finish The Brothers Karamazov', + done: false, + difficulty: 4, + ageHrs: 0, + }, + ...this.makeExampleDoneBlocks( + [ + { tag: 'novel', desc: (n) => `Read chapter ${n}` }, + { tag: 'paper', desc: (n) => `Annotated paper ${n}` }, + { tag: 'article', desc: (n) => `Saved article notes ${n}` }, + { tag: 'essay', desc: (n) => `Drafted reading response ${n}` }, + ], + 2, + 8, + ), ]), this.makeExampleTower('Side projects', { h: 0.58, s: 0.65, l: 0.5 }, now, [ - { tag: 'angular', desc: 'Modernise the towers app', done: false, ageHrs: 0 }, - { tag: 'rust', desc: 'Port the sync layer to Tauri', done: false, ageHrs: 1 }, - { tag: 'angular', desc: 'Wire CDK drag-drop', done: true, ageHrs: 24 }, - { tag: 'rust', desc: 'Spike SQLite vs LMDB', done: true, ageHrs: 96 }, + { + tag: 'angular', + desc: 'Modernise the towers app', + done: false, + difficulty: 3, + ageHrs: 0, + }, + { + tag: 'rust', + desc: 'Port the sync layer to Tauri', + done: false, + difficulty: 5, + ageHrs: 1, + }, + ...this.makeExampleDoneBlocks( + [ + { tag: 'angular', desc: (n) => `Refined UI pass ${n}` }, + { tag: 'rust', desc: (n) => `Completed systems spike ${n}` }, + { tag: 'infra', desc: (n) => `Tuned deploy workflow ${n}` }, + { tag: 'docs', desc: (n) => `Captured project note ${n}` }, + ], + 4, + 9, + ), ]), this.makeExampleTower('Exercise', { h: 0.36, s: 0.6, l: 0.5 }, now, [ - { tag: 'run', desc: '10k Sunday', done: false, ageHrs: 0 }, - { tag: 'climb', desc: 'Lead 6a outdoors', done: false, ageHrs: 4 }, - { tag: 'climb', desc: 'Bouldering session', done: true, ageHrs: 12 }, - { tag: 'run', desc: 'Easy 5k loop', done: true, ageHrs: 48 }, - { tag: 'climb', desc: 'Top-roped 5c', done: true, ageHrs: 96 }, + { tag: 'run', desc: '10k Sunday', done: false, difficulty: 2, ageHrs: 0 }, + { tag: 'climb', desc: 'Lead 6a outdoors', done: false, difficulty: 4, ageHrs: 4 }, + ...this.makeExampleDoneBlocks( + [ + { tag: 'run', desc: (n) => `Easy run ${n}` }, + { tag: 'climb', desc: (n) => `Bouldering session ${n}` }, + { tag: 'mobility', desc: (n) => `Mobility circuit ${n}` }, + { tag: 'strength', desc: (n) => `Strength session ${n}` }, + ], + 6, + 11, + ), ]), ], }; this._pages.update((pages) => [...pages, page]); + this.analytics.trackStart(); + this.analytics.trackExampleLoaded(); this.scheduleSave(); + return page.id; } private makeExampleTower( name: string, base_color: HslColor, nowSec: number, - blocks: Array<{ tag: string; desc: string; done: boolean; ageHrs: number }>, + blocks: ExampleBlockSeed[], ): Tower { return { id: uuidV4(), @@ -571,11 +718,30 @@ export class StoreService implements OnDestroy { tag: b.tag, description: b.desc, is_done: b.done, + difficulty: b.difficulty ?? 1, created_at: nowSec - Math.floor(b.ageHrs * 3600), })), }; } + private makeExampleDoneBlocks( + patterns: ExampleDonePattern[], + newestAgeHrs: number, + spacingHrs: number, + ): ExampleBlockSeed[] { + return Array.from({ length: EXAMPLE_DONE_BLOCKS_PER_TOWER }, (_, i) => { + const pattern = patterns[i % patterns.length]; + const sequence = Math.floor(i / patterns.length) + 1; + return { + tag: pattern.tag, + desc: pattern.desc(sequence), + done: true, + difficulty: 1 + ((i + (i % patterns.length) * 2) % 5), + ageHrs: newestAgeHrs + (EXAMPLE_DONE_BLOCKS_PER_TOWER - 1 - i) * spacingHrs, + }; + }); + } + ngOnDestroy(): void { this.cancelPendingWrites(); if (typeof window !== 'undefined') { @@ -583,3 +749,22 @@ export class StoreService implements OnDestroy { } } } + +function reorder(items: readonly T[], fromIndex: number, toIndex: number): T[] | null { + if ( + fromIndex === toIndex || + !Number.isInteger(fromIndex) || + !Number.isInteger(toIndex) || + fromIndex < 0 || + toIndex < 0 || + fromIndex >= items.length || + toIndex >= items.length + ) { + return null; + } + + const next = [...items]; + const [item] = next.splice(fromIndex, 1); + next.splice(toIndex, 0, item); + return next; +} diff --git a/frontend/src/app/services/store.service.vitest.ts b/frontend/src/app/services/store.service.vitest.ts index 0836e9b..2ecbe76 100644 --- a/frontend/src/app/services/store.service.vitest.ts +++ b/frontend/src/app/services/store.service.vitest.ts @@ -3,6 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { provideZonelessChangeDetection } from '@angular/core'; import { StoreService } from './store.service'; import { ApiService } from './api.service'; +import { AnalyticsService } from './analytics.service'; import type { TreeDto } from '../models'; // ── localStorage stub ──────────────────────────────────────────────────────── @@ -63,7 +64,10 @@ function makeMockApi(): MockApi { const FIXED_UUID = '11111111-2222-4333-8444-555555555555'; const TOKEN_KEY = 'life-towers.token.v4'; -const CACHE_KEY = 'life-towers.cache.v4'; +const CACHE_KEY = `life-towers.cache.v4.${FIXED_UUID}`; +const PENDING_CACHE_KEY = `life-towers.cache-pending.v4.${FIXED_UUID}`; +const OTHER_TOKEN = 'aaaabbbb-cccc-4ddd-8eee-ffffffffffff'; +const OTHER_CACHE_KEY = `life-towers.cache.v4.${OTHER_TOKEN}`; // ── Helpers ────────────────────────────────────────────────────────────────── function configure(api: MockApi): StoreService { @@ -72,6 +76,18 @@ function configure(api: MockApi): StoreService { providers: [ provideZonelessChangeDetection(), { provide: ApiService, useValue: api }, + { + provide: AnalyticsService, + useValue: { + init: vi.fn(), + trackStart: vi.fn(), + trackExampleLoaded: vi.fn(), + trackPageCreated: vi.fn(), + trackTowerCreated: vi.fn(), + trackBlockCreated: vi.fn(), + trackBlockCompleted: vi.fn(), + }, + }, StoreService, ], }); @@ -137,6 +153,18 @@ describe('StoreService', () => { expect(store.token()).toBe(FIXED_UUID); }); + it('canonicalizes a stored uppercase token', async () => { + storage[TOKEN_KEY] = FIXED_UUID.toUpperCase(); + const api = makeMockApi(); + const store = configure(api); + + await store.init(); + + expect(storage[TOKEN_KEY]).toBe(FIXED_UUID); + expect(api.getData).toHaveBeenCalledWith(FIXED_UUID); + expect(store.token()).toBe(FIXED_UUID); + }); + it('rejects a non-UUIDv4 stored token and mints a fresh one', async () => { storage[TOKEN_KEY] = 'not-a-uuid'; const api = makeMockApi(); @@ -218,6 +246,98 @@ describe('StoreService', () => { expect(api.getData).toHaveBeenCalledTimes(1); }); + it('moves a pending block to the end when it becomes done', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + api.getData.mockResolvedValue({ + pages: [ + { + id: 'page-1', + name: 'Page', + hide_create_tower_button: false, + keep_tasks_open: false, + default_date_from: null, + default_date_to: null, + towers: [ + { + id: 'tower-1', + name: 'Tower', + base_color: { h: 0.5, s: 0.5, l: 0.5 }, + blocks: [ + { + id: 'old-pending', + tag: 'a', + description: 'Created first, completed last', + is_done: false, + difficulty: 1, + created_at: 100, + }, + { + id: 'newer-pending', + tag: 'b', + description: 'Still pending', + is_done: false, + difficulty: 1, + created_at: 300, + }, + { + id: 'existing-done', + tag: 'c', + description: 'Already done', + is_done: true, + difficulty: 1, + created_at: 200, + }, + ], + }, + ], + }, + ], + } satisfies TreeDto); + const store = configure(api); + await store.init(); + + store.updateBlock('page-1', 'tower-1', 'old-pending', { is_done: true }); + + const blocks = store.pages()[0].towers[0].blocks; + expect(blocks.map((b) => b.id)).toEqual([ + 'newer-pending', + 'existing-done', + 'old-pending', + ]); + expect(blocks[2].created_at).toBe(100); + }); + + it('loads welcome example data with a stack of completed squares per tower', () => { + const api = makeMockApi(); + const store = configure(api); + + const pageId = store.loadExample(); + + const [page] = store.pages(); + expect(page.id).toBe(pageId); + expect(page.name).toBe('Hobbies'); + expect(page.towers).toHaveLength(3); + + const doneBlocks = page.towers.flatMap((tower) => tower.blocks.filter((b) => b.is_done)); + const doneSquares = doneBlocks.reduce((sum, block) => sum + block.difficulty, 0); + expect(doneSquares).toBeGreaterThanOrEqual(90); + expect(new Set(page.towers.flatMap((tower) => tower.blocks.map((b) => b.difficulty))).size) + .toBeGreaterThan(1); + + for (const tower of page.towers) { + const doneDates = tower.blocks.filter((b) => b.is_done).map((b) => b.created_at); + const doneSquareCount = tower.blocks + .filter((b) => b.is_done) + .reduce((sum, block) => sum + block.difficulty, 0); + expect(doneSquareCount).toBeGreaterThanOrEqual(30); + expect(doneDates).toEqual([...doneDates].sort((a, b) => a - b)); + expect(new Set(tower.blocks.map((b) => b.difficulty)).size).toBeGreaterThan(1); + } + + store.ngOnDestroy(); + }); + // ── Debounced save ───────────────────────────────────────────────────────── it('debounces saves: multiple mutations within 750ms → one PUT', async () => { @@ -233,6 +353,7 @@ describe('StoreService', () => { expect(api.putData).not.toHaveBeenCalled(); await vi.advanceTimersByTimeAsync(750); expect(api.putData).toHaveBeenCalledTimes(1); + expect(storage[PENDING_CACHE_KEY]).toBeUndefined(); const [, tree] = api.putData.mock.calls[0]; expect((tree as TreeDto).pages).toHaveLength(3); }); @@ -263,6 +384,97 @@ describe('StoreService', () => { expect(lastTree.pages).toHaveLength(2); }); + it('does not let an older in-flight save clear a newer pending cache entry', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + let resolveFirstPut: (() => void) | null = null; + api.putData + .mockReturnValueOnce(new Promise((res) => (resolveFirstPut = () => res()))) + .mockResolvedValueOnce(undefined); + const store = configure(api); + await store.init(); + + store.addPage('first'); + await vi.advanceTimersByTimeAsync(750); + expect(api.putData).toHaveBeenCalledTimes(1); + + store.addPage('second'); + expect(JSON.parse(storage[CACHE_KEY]).pages.map((p: TreeDto['pages'][number]) => p.name)) + .toEqual(['first', 'second']); + expect(storage[PENDING_CACHE_KEY]).toBe('1'); + + resolveFirstPut!(); + await vi.advanceTimersByTimeAsync(0); + + expect(JSON.parse(storage[CACHE_KEY]).pages.map((p: TreeDto['pages'][number]) => p.name)) + .toEqual(['first', 'second']); + expect(storage[PENDING_CACHE_KEY]).toBe('1'); + + await vi.advanceTimersByTimeAsync(750); + expect(api.putData).toHaveBeenCalledTimes(2); + expect(storage[PENDING_CACHE_KEY]).toBeUndefined(); + }); + + it('keeps a pending local mutation across reload before the debounce saves', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + const serverPage = mkPage('server'); + api.getData.mockResolvedValue({ pages: [serverPage] }); + const store = configure(api); + await store.init(); + + store.updatePage(FIXED_UUID, { keep_tasks_open: true }); + + expect(JSON.parse(storage[CACHE_KEY]).pages[0].keep_tasks_open).toBe(true); + expect(storage[PENDING_CACHE_KEY]).toBe('1'); + store.ngOnDestroy(); + + const reloadedApi = makeMockApi(); + reloadedApi.getData.mockResolvedValue({ pages: [serverPage] }); + const reloadedStore = configure(reloadedApi); + await reloadedStore.init(); + + expect(reloadedStore.pages()[0].keep_tasks_open).toBe(true); + + await vi.advanceTimersByTimeAsync(750); + expect(reloadedApi.putData).toHaveBeenCalledTimes(1); + const [, tree] = reloadedApi.putData.mock.calls[0]; + expect((tree as TreeDto).pages[0].keep_tasks_open).toBe(true); + }); + + it('does not let a stale in-flight save clear a newer pending settings cache', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + const serverPage = mkPage('server'); + let resolveFirstPut: (() => void) | null = null; + api.getData.mockResolvedValue({ pages: [serverPage] }); + api.putData + .mockReturnValueOnce(new Promise((res) => (resolveFirstPut = () => res()))) + .mockResolvedValueOnce(undefined); + const store = configure(api); + await store.init(); + + store.updatePage(FIXED_UUID, { name: 'renamed' }); + await vi.advanceTimersByTimeAsync(750); + expect(api.putData).toHaveBeenCalledTimes(1); + expect((api.putData.mock.calls[0][1] as TreeDto).pages[0].keep_tasks_open).toBe(false); + + store.updatePage(FIXED_UUID, { keep_tasks_open: true }); + expect(JSON.parse(storage[CACHE_KEY]).pages[0].keep_tasks_open).toBe(true); + expect(storage[PENDING_CACHE_KEY]).toBe('1'); + + resolveFirstPut!(); + await vi.advanceTimersByTimeAsync(0); + expect(JSON.parse(storage[CACHE_KEY]).pages[0].keep_tasks_open).toBe(true); + expect(storage[PENDING_CACHE_KEY]).toBe('1'); + + await vi.advanceTimersByTimeAsync(750); + expect(api.putData).toHaveBeenCalledTimes(2); + expect((api.putData.mock.calls[1][1] as TreeDto).pages[0].keep_tasks_open).toBe(true); + expect(JSON.parse(storage[CACHE_KEY]).pages[0].keep_tasks_open).toBe(true); + expect(storage[PENDING_CACHE_KEY]).toBeUndefined(); + }); + // ── Error handling ──────────────────────────────────────────────────────── it('marks status "too-large" on 413 and does NOT retry', async () => { @@ -350,15 +562,73 @@ describe('StoreService', () => { // Mutate, then switch BEFORE the debounce fires. store.addPage('old-account'); - const newToken = 'aaaabbbb-cccc-4ddd-8eee-ffffffffffff'; api.getData.mockResolvedValue({ pages: [] }); - store.switchToken(newToken); + store.switchToken(OTHER_TOKEN); // Run all timers — the OLD debounce must have been cancelled, // so no PUT should have happened. await vi.advanceTimersByTimeAsync(2000); expect(api.putData).not.toHaveBeenCalled(); - expect(store.token()).toBe(newToken); + expect(store.token()).toBe(OTHER_TOKEN); + }); + + it('switchToken invalidates an init already in flight', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + let resolveFirstGet: ((v: TreeDto) => void) | null = null; + api.getData + .mockReturnValueOnce(new Promise((res) => (resolveFirstGet = res))) + .mockResolvedValueOnce({ pages: [mkPage('new-account')] }); + const store = configure(api); + + const firstInit = store.init(); + store.switchToken(OTHER_TOKEN); + resolveFirstGet!({ pages: [mkPage('old-account')] }); + await firstInit; + + expect(api.getData).toHaveBeenCalledWith(OTHER_TOKEN); + expect(store.token()).toBe(OTHER_TOKEN); + expect(store.pages()[0].name).toBe('new-account'); + }); + + it('switchToken cancels a pending retry without wedging future saves', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + api.putData + .mockRejectedValueOnce(httpError(429, { 'Retry-After': '30' })) + .mockResolvedValue(undefined); + const store = configure(api); + await store.init(); + + store.addPage('old-account'); + await vi.advanceTimersByTimeAsync(750); + expect(api.putData).toHaveBeenCalledTimes(1); + + api.getData.mockResolvedValue({ pages: [] }); + store.switchToken(OTHER_TOKEN); + await vi.advanceTimersByTimeAsync(0); + + store.addPage('new-account'); + await vi.advanceTimersByTimeAsync(750); + + expect(api.putData).toHaveBeenCalledTimes(2); + expect(api.putData.mock.calls[1][0]).toBe(OTHER_TOKEN); + expect((api.putData.mock.calls[1][1] as TreeDto).pages[0].name).toBe('new-account'); + }); + + it('does not load another account cache after switching tokens', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + storage[CACHE_KEY] = JSON.stringify({ pages: [mkPage('old-cache')] } satisfies TreeDto); + const api = makeMockApi(); + const store = configure(api); + await store.init(); + + api.getData.mockRejectedValue(httpError(0)); + store.switchToken(OTHER_TOKEN); + await vi.advanceTimersByTimeAsync(0); + + expect(storage[OTHER_CACHE_KEY]).toBeUndefined(); + expect(store.pages()).toHaveLength(0); }); it('switchToken rejects a non-UUIDv4 input', () => { @@ -370,6 +640,19 @@ describe('StoreService', () => { expect(store.token()).toBe(''); // never initialized }); + it('switchToken canonicalizes uppercase UUID input', async () => { + storage[TOKEN_KEY] = FIXED_UUID; + const api = makeMockApi(); + const store = configure(api); + await store.init(); + + store.switchToken(OTHER_TOKEN.toUpperCase()); + await vi.advanceTimersByTimeAsync(0); + + expect(store.token()).toBe(OTHER_TOKEN); + expect(storage[TOKEN_KEY]).toBe(OTHER_TOKEN); + }); + // ── Cross-tab sync ──────────────────────────────────────────────────────── it('adopts a fresh cache written by another tab via the storage event', async () => { diff --git a/frontend/src/app/styles/_form-shared.scss b/frontend/src/app/styles/_form-shared.scss deleted file mode 100644 index 54c4044..0000000 --- a/frontend/src/app/styles/_form-shared.scss +++ /dev/null @@ -1,106 +0,0 @@ -.form { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.field { - display: flex; - flex-direction: column; - gap: 0.35rem; - - label { - font-size: 0.85rem; - font-weight: 500; - color: var(--text-muted); - font-family: var(--font-ui); - } - - input[type='text'], - input[type='email'], - textarea { - width: 100%; - padding: 0.5rem 0.75rem; - border-radius: 0.5rem; - border: 1px solid var(--border); - background: var(--bg); - color: var(--text); - font-family: var(--font-ui); - font-size: 0.95rem; - resize: vertical; - - &:focus { - outline: 2px solid var(--accent); - outline-offset: 1px; - } - } - - &--checkbox { - flex-direction: row; - align-items: center; - - label { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - color: var(--text); - } - } -} - -.actions { - display: flex; - gap: 0.75rem; - justify-content: flex-end; - padding-top: 0.5rem; -} - -.btn { - padding: 0.5rem 1.25rem; - border-radius: 0.5rem; - border: none; - cursor: pointer; - font-size: 0.95rem; - font-family: var(--font-ui); - transition: background 0.15s; - - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } - - &:disabled { - opacity: 0.45; - cursor: not-allowed; - } - - &--primary { - background: var(--accent); - color: #fff; - - &:hover:not(:disabled) { - background: var(--accent-dark); - } - } - - &--secondary { - background: var(--surface-hover); - color: var(--text); - - &:hover:not(:disabled) { - background: var(--border); - } - } - - &--danger { - background: transparent; - color: #e53e3e; - border: 1px solid #e53e3e; - margin-right: auto; - - &:hover:not(:disabled) { - background: rgba(229, 62, 62, 0.1); - } - } -} diff --git a/frontend/src/app/utils/hash.ts b/frontend/src/app/utils/hash.ts index fffe090..d95c6da 100644 --- a/frontend/src/app/utils/hash.ts +++ b/frontend/src/app/utils/hash.ts @@ -16,5 +16,5 @@ export function hash(s: string): number { h = ((h << 5) - h + s.charCodeAt(i)) | 0; } // Map the signed int32 to [0, 1) — same formula as legacy - return h / (Math.pow(2, 32) - 2) + 0.5; + return h / (2 ** 32 - 2) + 0.5; } diff --git a/frontend/src/assets/arrow.svg b/frontend/src/assets/arrow.svg deleted file mode 100644 index bf07063..0000000 --- a/frontend/src/assets/arrow.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/assets/fonts/material-icons.woff2 b/frontend/src/assets/fonts/material-icons.woff2 deleted file mode 100644 index 5492a6e..0000000 Binary files a/frontend/src/assets/fonts/material-icons.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/roboto-300.woff2 b/frontend/src/assets/fonts/roboto-300.woff2 deleted file mode 100644 index 9b0f141..0000000 Binary files a/frontend/src/assets/fonts/roboto-300.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/roboto-400.woff2 b/frontend/src/assets/fonts/roboto-400.woff2 deleted file mode 100644 index 9b0f141..0000000 Binary files a/frontend/src/assets/fonts/roboto-400.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/roboto-500.woff2 b/frontend/src/assets/fonts/roboto-500.woff2 deleted file mode 100644 index 9b0f141..0000000 Binary files a/frontend/src/assets/fonts/roboto-500.woff2 and /dev/null differ diff --git a/frontend/src/assets/pen.svg b/frontend/src/assets/pen.svg deleted file mode 100644 index d798204..0000000 --- a/frontend/src/assets/pen.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/assets/plus-sign.svg b/frontend/src/assets/plus-sign.svg deleted file mode 100644 index 928fbee..0000000 --- a/frontend/src/assets/plus-sign.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/frontend/src/assets/trash.svg b/frontend/src/assets/trash.svg deleted file mode 100644 index 73e0a95..0000000 --- a/frontend/src/assets/trash.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/frontend/src/assets/x-sign.svg b/frontend/src/assets/x-sign.svg deleted file mode 100644 index 6f353d8..0000000 --- a/frontend/src/assets/x-sign.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/index.html b/frontend/src/index.html index bcbfecc..147335a 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -4,10 +4,33 @@ Life Towers - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/library/forms.scss b/frontend/src/library/forms.scss index 43df3cf..086af81 100644 --- a/frontend/src/library/forms.scss +++ b/frontend/src/library/forms.scss @@ -38,6 +38,10 @@ input[type='text'] { &:focus { box-shadow: 0 1px $text-color; } + + &:focus-visible { + box-shadow: 0 2px $text-color; + } } button { @@ -56,6 +60,19 @@ button { border-bottom: solid $height #5d576b55; position: relative; + // Mobile: grow buttons to a ~42px tap target, but pin the label to the bottom + // so the bottom-border underline keeps hugging it (as on desktop). A bare + // min-height vertically centres the text and strands the underline well below + // it. Using flex (not a hit-area pseudo-element) means buttons that `all: unset` + // their styling — .tickbox, .swatch, .edit-tower — reset these props and opt out + // automatically, instead of inheriting a stray absolute overlay. + @media (max-width: $mobile-width) { + min-height: 42px; + display: inline-flex; + align-items: flex-end; + justify-content: center; + } + &:disabled { color: #5d576b55; border-bottom: solid $height #5d576b33; diff --git a/frontend/src/library/main.scss b/frontend/src/library/main.scss index 0156b7f..6c4fee6 100644 --- a/frontend/src/library/main.scss +++ b/frontend/src/library/main.scss @@ -34,12 +34,31 @@ @mixin exit { @include square(16px); - background: url('/assets/x-sign.svg') no-repeat center center; - background-size: 50% 50%; + -webkit-appearance: none; + appearance: none; + background: transparent url('/assets/x-sign.svg') no-repeat center center / 50% 50%; + border: 0 !important; + border-bottom: 0 !important; + box-shadow: none; box-sizing: content-box; + color: transparent; + display: block; + flex: 0 0 auto; + font-size: 0; + line-height: 0; + margin: 0; + min-height: 0; + overflow: hidden; padding: 8px; + text-decoration: none !important; @include jump(); + + &:before, + &:after { + content: none !important; + display: none; + } } img { diff --git a/frontend/src/library/utils.scss b/frontend/src/library/utils.scss index 6f367f3..5190f07 100644 --- a/frontend/src/library/utils.scss +++ b/frontend/src/library/utils.scss @@ -6,4 +6,22 @@ margin-bottom: $spacing; } } + + & > lt-modal { + @if $horizontal { + margin-right: 0 !important; + } @else { + margin-bottom: 0 !important; + } + } + + // Fixed modal hosts should not make the previous content child count as + // "not last" for spacing. + & > *:not(:last-child):not(lt-modal):not(:has(~ *:not(lt-modal))) { + @if $horizontal { + margin-right: 0; + } @else { + margin-bottom: 0; + } + } } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index e93bdc4..7b4c607 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -15,38 +15,6 @@ src: url('assets/fonts/raleway-400.woff2') format('woff2'); } -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url('assets/fonts/roboto-300.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('assets/fonts/roboto-400.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('assets/fonts/roboto-500.woff2') format('woff2'); -} - -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - font-display: block; - src: url('assets/fonts/material-icons.woff2') format('woff2'); -} - @import 'library/main'; $line-height: 2px; @@ -56,7 +24,7 @@ $line-height: 2px; padding: 0; &:active, - &:focus { + &:focus:not(:focus-visible) { outline: 0; } diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json index 264f459..bec29af 100644 --- a/frontend/tsconfig.app.json +++ b/frontend/tsconfig.app.json @@ -10,6 +10,6 @@ "src/**/*.ts" ], "exclude": [ - "src/**/*.spec.ts" + "src/**/*.vitest.ts" ] } diff --git a/frontend/tsconfig.spec.json b/frontend/tsconfig.spec.json index d383706..6883a29 100644 --- a/frontend/tsconfig.spec.json +++ b/frontend/tsconfig.spec.json @@ -10,6 +10,6 @@ }, "include": [ "src/**/*.d.ts", - "src/**/*.spec.ts" + "src/**/*.vitest.ts" ] } diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts index 79a3348..8dad81b 100644 --- a/frontend/vitest.config.ts +++ b/frontend/vitest.config.ts @@ -1,10 +1,18 @@ import { defineConfig } from 'vitest/config'; export default defineConfig({ + resolve: { + alias: { + // The package ships only a `module` field, which Vite's resolver + // can't always find — point it at the file directly. + '@plausible-analytics/tracker': + '@plausible-analytics/tracker/plausible.js', + }, + }, test: { globals: true, environment: 'jsdom', - include: ['src/**/*.vitest.ts', 'src/**/*.spec.vitest.ts'], + include: ['src/**/*.vitest.ts'], setupFiles: ['./vitest.setup.ts'], coverage: { provider: 'v8',