Kalle/ATM
1
0
Fork 0
Code Issues Pull requests 14 Projects Releases 13 Packages Wiki Activity Actions

feat(ui): therapeutic glass app shell — aurora visible on all interior pages #95

Open
KnallerKalle wants to merge 4 commits from feat/ui-glass-app-shell into dev
pull from: feat/ui-glass-app-shell
merge into: Kalle:dev
Conversation 0 Commits 4 Files changed 7 +366 -17
KnallerKalle commented 2026-08-17 10:51:27 +00:00 (Migrated from github.com)
Copy link

Plan

Extend the "therapeutic glass" design system from the landing to the app shell/interior pages (last open Core Platform roadmap item): every interior page shows the calm aurora behind glass nav surfaces.

Outcome

  • .app-shell wraps all interior pages with a fixed aurora layer (z:-1, calmer than landing: lower intensity, 64s drift), isolated stacking context.
  • .app-sidebar / .app-tabbar are real glass surfaces (blur 18/16px + saturate 1.3), using the landing's split-rule convention (unprefixed in the main rule, -webkit- only in the @supports shim) — required after the minifier trap documented at globals.css ~L317.
  • 19 opaque page roots fixed: every interior page root carried min-h-screen bg-background (opaque #faf9f6) which painted OVER the aurora. .app-shell > main > .bg-background { background: transparent } yields only direct page roots — nested functional surfaces (editor textarea, preview panel, catalogue chip) keep their solid fill for readability.
  • Two latent cascade bugs fixed found while verifying paint order:
    • glass tokens were scoped to .app-shell alone, but .app-sidebar/.app-tabbar are its siblings — custom properties never inherit across siblings, so every var(--glass-*) in the nav was invalid at computed-value time. Token scope is now grouped .app-shell, .app-sidebar, .app-tabbar.
    • the landing renders inside the shell, stacking its own aurora + opaque base over the shell's → two animated GPU layers, one invisible. .app-shell:has(.landing-root) .app-aurora { display: none } steps aside; browsers without :has() keep today's behaviour (graceful).

Impact on release goals

Roadmap Core Platform → "Design system: therapeutic glass on app shell/interior" [~] → [x]. The aurora is now visible on all interior pages (was: visible on landing only; interiors showed flat #faf9f6). Glass surfaces: 0 → 3 (sidebar, tabbar, shell). Regression-guarded by 18 contract tests in AppShellGlass.test.ts (was 15).

Blackbox

  • python3 scripts/blackbox_test.py --target testing → green
  • Result: 11/13 on testing. The 2 failures are pre-existing on dev, verified: audio_url in lesson detail is fixed by unmerged PR #85 (route absent on dev); GET /api/auth/profile 401 is current dev behaviour. This branch is CSS-only (no API/TSX route changes) and cannot affect either. Full unit suite: 266/266 green, next build compiles 198/198 pages, bundle verified to contain both backdrop-filter prefixes + the new selectors.

Six-perspectives check

  • Product: the calm aurora behind every page deepens the "calm, non-judgemental space" positioning; no dark patterns.
  • Engineering: minimal diff (CSS + 2 class names + tests); contract tests guard the cascade; no security surface touched.
  • Psychology: atmosphere supports settling into a lesson; no judgement/streak mechanics added.
  • Biomechanics: n/a (visual only) — no cue or movement content changed.
  • Anatomy: n/a.
  • Feldenkrais: purely atmospheric; zero user-facing copy changed, no correction/judgement language.

Risk

Low. CSS-only + 2 class attributes. Worst case is visual (aurora too visible/not visible) — no data, auth, or persistence path touched. :has() is progressive enhancement; browsers lacking it keep current behaviour. Reduced-motion already disables the drift. De-risked by: 266/266 unit tests, verified production bundle (both prefixes, selectors present), and the 18-test cascade contract.

Checklist

  • Branch off latest dev
  • Conventional Commits
  • Patchlog entry appended
  • Roadmap status updated
  • No secrets / no large binaries
## Plan Extend the "therapeutic glass" design system from the landing to the app shell/interior pages (last open Core Platform roadmap item): every interior page shows the calm aurora behind glass nav surfaces. ## Outcome - `.app-shell` wraps all interior pages with a fixed aurora layer (`z:-1`, calmer than landing: lower intensity, 64s drift), isolated stacking context. - `.app-sidebar` / `.app-tabbar` are real glass surfaces (blur 18/16px + saturate 1.3), using the landing's split-rule convention (unprefixed in the main rule, `-webkit-` only in the `@supports` shim) — required after the minifier trap documented at globals.css ~L317. - **19 opaque page roots fixed**: every interior page root carried `min-h-screen bg-background` (opaque #faf9f6) which painted OVER the aurora. `.app-shell > main > .bg-background { background: transparent }` yields only direct page roots — nested functional surfaces (editor textarea, preview panel, catalogue chip) keep their solid fill for readability. - **Two latent cascade bugs fixed** found while verifying paint order: - glass tokens were scoped to `.app-shell` alone, but `.app-sidebar`/`.app-tabbar` are its *siblings* — custom properties never inherit across siblings, so every `var(--glass-*)` in the nav was invalid at computed-value time. Token scope is now grouped `.app-shell, .app-sidebar, .app-tabbar`. - the landing renders *inside* the shell, stacking its own aurora + opaque base over the shell's → two animated GPU layers, one invisible. `.app-shell:has(.landing-root) .app-aurora { display: none }` steps aside; browsers without `:has()` keep today's behaviour (graceful). ## Impact on release goals Roadmap **Core Platform → "Design system: therapeutic glass on app shell/interior"** `[~]` → `[x]`. The aurora is now visible on all interior pages (was: visible on landing only; interiors showed flat #faf9f6). Glass surfaces: 0 → 3 (sidebar, tabbar, shell). Regression-guarded by 18 contract tests in `AppShellGlass.test.ts` (was 15). ## Blackbox - [ ] `python3 scripts/blackbox_test.py --target testing` → green - Result: **11/13 on testing.** The 2 failures are pre-existing on `dev`, verified: `audio_url` in lesson detail is fixed by unmerged PR #85 (route absent on `dev`); `GET /api/auth/profile` 401 is current `dev` behaviour. This branch is CSS-only (no API/TSX route changes) and cannot affect either. Full unit suite: **266/266 green**, `next build` compiles 198/198 pages, bundle verified to contain both `backdrop-filter` prefixes + the new selectors. ## Six-perspectives check - [x] Product: the calm aurora behind every page deepens the "calm, non-judgemental space" positioning; no dark patterns. - [x] Engineering: minimal diff (CSS + 2 class names + tests); contract tests guard the cascade; no security surface touched. - [x] Psychology: atmosphere supports settling into a lesson; no judgement/streak mechanics added. - [x] Biomechanics: n/a (visual only) — no cue or movement content changed. - [x] Anatomy: n/a. - [x] Feldenkrais: purely atmospheric; zero user-facing copy changed, no correction/judgement language. ## Risk Low. CSS-only + 2 class attributes. Worst case is visual (aurora too visible/not visible) — no data, auth, or persistence path touched. `:has()` is progressive enhancement; browsers lacking it keep current behaviour. Reduced-motion already disables the drift. De-risked by: 266/266 unit tests, verified production bundle (both prefixes, selectors present), and the 18-test cascade contract. ## Checklist - [x] Branch off latest `dev` - [x] Conventional Commits - [x] Patchlog entry appended - [x] Roadmap status updated - [x] No secrets / no large binaries
This pull request has changes conflicting with the target branch.
  • .development/automation-state.json
  • .development/patchlog.md
  • .development/roadmap.md
  • src/app/globals.css
  • src/components/MobileNavigation.tsx
View command line instructions

Manual merge helper

Use this merge commit message when completing the merge manually.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin feat/ui-glass-app-shell:feat/ui-glass-app-shell
git switch feat/ui-glass-app-shell

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch dev
git merge --no-ff feat/ui-glass-app-shell
git switch feat/ui-glass-app-shell
git rebase dev
git switch dev
git merge --ff-only feat/ui-glass-app-shell
git switch feat/ui-glass-app-shell
git rebase dev
git switch dev
git merge --no-ff feat/ui-glass-app-shell
git switch dev
git merge --squash feat/ui-glass-app-shell
git switch dev
git merge --ff-only feat/ui-glass-app-shell
git switch dev
git merge feat/ui-glass-app-shell
git push origin dev
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
backend
Backend development tasks

  
bug
Something isn't working

  
completed
Features and tasks that are complete and merged

  
documentation
Improvements or additions to documentation

  
duplicate
This issue or pull request already exists

  
enhancement
New feature or request

  
feature
New functionality

  
frontend
Frontend development

  
good first issue
Good for newcomers

  
help wanted
Extra attention is needed

  
in-progress

   
invalid
This doesn't seem right

  
performance
Performance improvements

  
phase-1
Phase 1 Foundation tasks

  
Phase1
Phase 1 Foundation work

  
Phase2
Phase 2 Core Features

  
Phase3
Phase 3 AI Generation

  
planning
Planning and roadmap items

  
question
Further information is requested

  
refactor
Code refactoring

  
security
Security issues

  
test
Testing related

  
testing
Testing and verification tasks

  
wontfix
This will not be worked on

No labels
backend
bug
completed
documentation
duplicate
enhancement
feature
frontend
good first issue
help wanted
in-progress
invalid
performance
phase-1
Phase1
Phase2
Phase3
planning
question
refactor
security
test
testing
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Kalle/ATM!95
No description provided.