julien
3371fbd613
## Summary - Replace the flat header+main+footer layout with a real app-shell: fixed header on top, collapsable sidebar + scrollable main below. Sidebar state (collapsed / expanded) persists across reloads via `localStorage`. - Introduce the APF brand palette as Tailwind v4 `@theme` tokens (primary teal `#12546c`, accent orange `#f7a919`) so every utility (`bg-brand-primary-500`, `text-brand-accent-400`, `ring-brand-primary-200`, …) is available from now on. - Add an `<app-icon>` façade backed by `lucide-angular` for v1. Logical kebab-case names already match the icomoon-sprite convention, so the future migration is a single-file change in `icon.ts` and consumers stay untouched. - Migrate the accessibility-statement links from the (now-deleted) footer to the bottom of the sidebar. ## Decisions worth flagging - **Static menu, permission-shaped data.** Items point to `#` placeholders in v1, except *Dashboard* which is `routerLink="/"` so the active-state styling is visible on the home page. The `MenuItem` shape already carries an optional `requiredPermissions: string[]` so the permission-aware filter (PR 2, alongside ADR-0009 auth) plugs in without restructuring. - **`<app-icon>` over direct lucide imports.** Consumers write `<app-icon name="bell">` rather than importing the lucide pascal-case symbol. When the icomoon sprite lands, only the registry in `icon.ts` changes — templates do not. - **Sidebar persistence via `localStorage`, not backend.** Zero round-trip, survives reloads, falls back gracefully when storage is blocked (private mode). Eventually mirrored server-side if the user-preferences feature lands. - **Footer removed entirely.** With the sidebar carrying the FR + EN accessibility-statement links and the role badge, the bottom rail no longer earned its vertical real estate. The version badge moved out for now; it will return as part of a debug/help menu when there's a real release to surface. ## Accessibility (ADR-0016) - Skip-link preserved (WCAG 2.4.1 *Bypass Blocks*) and restyled in the brand palette. - Sidebar exposes named landmarks (`<nav aria-label="Sections">`, `<nav aria-label="Accessibility">`) and the collapse button uses `aria-expanded` + a descriptive `aria-label`. - Active links carry `ariaCurrentWhenActive="page"`. - All interactive controls (header action buttons, sidebar links/toggle) meet the 44×44 px minimum hit-target. - Sidebar width transition is skipped under `prefers-reduced-motion: reduce`. - Lucide SVGs are marked `aria-hidden` (decorative); accessible names live on the parent control. ## Perf (ADR-0017) - Production build: **100 kB gzip** initial transfer (budget: 300 kB). Lucide imports are tree-shaken — only the ~18 icons actually used ship. ## What this PR explicitly does NOT do - Wire icon-set migration to icomoon (kept as a deferred swap behind `<app-icon>`). - Filter the menu by permission (deferred to PR 2 once the auth flow lands). - Replace the avatar placeholder with a real user menu (waits on ADR-0009). - Implement the search input behavior (placeholder only; needs a search backend). ## Test plan - [x] `pnpm exec nx run-many -t lint test build --projects=portal-shell` — green (19 / 19 specs). - [x] Production build under bundle budgets (100 kB gzip initial). - [ ] Manual: load `/`, confirm Dashboard appears active in the sidebar, collapse → reload → still collapsed, focus the address bar then Tab → skip-link visible, keyboard-traverse the sidebar. - [ ] Manual: `prefers-reduced-motion: reduce` → no width animation when toggling. - [ ] Manual: zoom to 200 % → no horizontal scroll, header search hides at narrow widths (`md:` breakpoint). --------- Co-authored-by: Julien Gautier <julien.gautier@apf.asso.fr> Reviewed-on: #83
154 lines
4.9 KiB
JSON
154 lines
4.9 KiB
JSON
{
|
|
"name": "apf-portal",
|
|
"version": "0.0.0",
|
|
"license": "MIT",
|
|
"packageManager": "pnpm@10.33.4",
|
|
"scripts": {
|
|
"prepare": "husky",
|
|
"ci:check": "pnpm exec nx affected -t format:check lint test build",
|
|
"ci:audit": "pnpm audit --audit-level=moderate",
|
|
"ci:commits": "pnpm exec commitlint --from ${COMMIT_LINT_FROM:-origin/main} --to HEAD --verbose",
|
|
"ci:perf": "pnpm exec nx build portal-shell --configuration=production && pnpm exec lhci autorun --config=./lighthouserc.js"
|
|
},
|
|
"private": true,
|
|
"lint-staged": {
|
|
"!(pnpm-lock).{ts,tsx,js,jsx,html,scss,css,md,json,yml,yaml}": [
|
|
"prettier --write"
|
|
]
|
|
},
|
|
"pnpm": {
|
|
"onlyBuiltDependencies": [
|
|
"@nestjs/core",
|
|
"@parcel/watcher",
|
|
"@prisma/client",
|
|
"@prisma/engines",
|
|
"@swc/core",
|
|
"esbuild",
|
|
"less",
|
|
"lmdb",
|
|
"msgpackr-extract",
|
|
"nx",
|
|
"prisma",
|
|
"unrs-resolver"
|
|
],
|
|
"overrides": {
|
|
"axios@<1.15.2": ">=1.15.2",
|
|
"@angular-devkit/core>ajv@<8.18.0": ">=8.18.0",
|
|
"brace-expansion@<5.0.5": ">=5.0.5",
|
|
"follow-redirects@<1.16.0": ">=1.16.0",
|
|
"ip-address@<10.1.1": ">=10.1.1",
|
|
"tmp@<0.2.4": ">=0.2.4",
|
|
"yaml@<2.8.3": ">=2.8.3"
|
|
}
|
|
},
|
|
"prisma": {
|
|
"schema": "apps/portal-bff/prisma/schema.prisma"
|
|
},
|
|
"devDependencies": {
|
|
"@analogjs/vite-plugin-angular": "~2.5.0",
|
|
"@analogjs/vitest-angular": "~2.5.0",
|
|
"@angular-devkit/core": "~21.2.0",
|
|
"@angular-devkit/schematics": "~21.2.0",
|
|
"@angular/build": "~21.2.0",
|
|
"@angular/cli": "~21.2.0",
|
|
"@angular/compiler-cli": "~21.2.0",
|
|
"@angular/language-service": "~21.2.0",
|
|
"@commitlint/cli": "^20.5.3",
|
|
"@commitlint/config-conventional": "^20.5.3",
|
|
"@eslint/js": "^9.8.0",
|
|
"@lhci/cli": "^0.15.1",
|
|
"@nestjs/schematics": "^11.0.0",
|
|
"@nestjs/testing": "^11.0.0",
|
|
"@nx/angular": "^22.7.1",
|
|
"@nx/devkit": "22.7.1",
|
|
"@nx/eslint": "^22.7.1",
|
|
"@nx/eslint-plugin": "22.7.1",
|
|
"@nx/jest": "22.7.1",
|
|
"@nx/js": "22.7.1",
|
|
"@nx/nest": "^22.7.1",
|
|
"@nx/node": "22.7.1",
|
|
"@nx/playwright": "22.7.1",
|
|
"@nx/vite": "^22.7.1",
|
|
"@nx/vitest": "22.7.1",
|
|
"@nx/web": "22.7.1",
|
|
"@nx/webpack": "22.7.1",
|
|
"@oxc-project/runtime": "^0.129.0",
|
|
"@playwright/test": "^1.36.0",
|
|
"@schematics/angular": "~21.2.0",
|
|
"@swc-node/register": "1.11.1",
|
|
"@swc/core": "1.15.33",
|
|
"@swc/helpers": "0.5.21",
|
|
"@tailwindcss/postcss": "^4.2.4",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/node": "24.12.3",
|
|
"@typescript-eslint/utils": "^8.40.0",
|
|
"@vitest/coverage-v8": "~4.1.0",
|
|
"@vitest/ui": "~4.1.0",
|
|
"angular-eslint": "^21.2.0",
|
|
"eslint": "^9.8.0",
|
|
"eslint-config-prettier": "^10.0.0",
|
|
"eslint-plugin-playwright": "^1.6.2",
|
|
"husky": "^9.1.7",
|
|
"jest": "^30.0.2",
|
|
"jest-environment-node": "^30.0.2",
|
|
"jest-util": "^30.0.2",
|
|
"jsdom": "^29.0.0",
|
|
"jsonc-eslint-parser": "^2.1.0",
|
|
"lint-staged": "^17.0.0",
|
|
"nx": "22.7.1",
|
|
"pino-pretty": "^13.1.3",
|
|
"postcss": "^8.5.12",
|
|
"prettier": "^3.8.1",
|
|
"prisma": "^6.19.3",
|
|
"tailwindcss": "^4.2.4",
|
|
"ts-jest": "^29.4.0",
|
|
"ts-node": "10.9.2",
|
|
"tslib": "^2.3.0",
|
|
"typescript": "~5.9.2",
|
|
"typescript-eslint": "^8.40.0",
|
|
"vite": "^8.0.0",
|
|
"vitest": "^4.0.8",
|
|
"webpack-cli": "^5.1.4"
|
|
},
|
|
"dependencies": {
|
|
"@angular/common": "~21.2.0",
|
|
"@angular/compiler": "~21.2.0",
|
|
"@angular/core": "~21.2.0",
|
|
"@angular/forms": "~21.2.0",
|
|
"@angular/platform-browser": "~21.2.0",
|
|
"@angular/router": "~21.2.0",
|
|
"@nestjs/common": "^11.0.0",
|
|
"@nestjs/core": "^11.0.0",
|
|
"@nestjs/platform-express": "^11.0.0",
|
|
"@opentelemetry/api": "^1.9.1",
|
|
"@opentelemetry/exporter-trace-otlp-http": "^0.217.0",
|
|
"@opentelemetry/exporter-trace-otlp-proto": "^0.217.0",
|
|
"@opentelemetry/instrumentation": "^0.217.0",
|
|
"@opentelemetry/instrumentation-document-load": "^0.62.0",
|
|
"@opentelemetry/instrumentation-express": "^0.65.0",
|
|
"@opentelemetry/instrumentation-fetch": "^0.217.0",
|
|
"@opentelemetry/instrumentation-http": "^0.217.0",
|
|
"@opentelemetry/instrumentation-ioredis": "^0.65.0",
|
|
"@opentelemetry/instrumentation-nestjs-core": "^0.63.0",
|
|
"@opentelemetry/instrumentation-pg": "^0.69.0",
|
|
"@opentelemetry/instrumentation-pino": "^0.63.0",
|
|
"@opentelemetry/instrumentation-user-interaction": "^0.61.0",
|
|
"@opentelemetry/resources": "^2.7.1",
|
|
"@opentelemetry/sdk-node": "^0.217.0",
|
|
"@opentelemetry/sdk-trace-web": "^2.7.1",
|
|
"@opentelemetry/semantic-conventions": "^1.40.0",
|
|
"@prisma/client": "^6.19.3",
|
|
"axios": "^1.6.0",
|
|
"class-transformer": "^0.5.1",
|
|
"class-validator": "^0.15.1",
|
|
"lucide-angular": "^1.0.0",
|
|
"nestjs-cls": "^6.2.0",
|
|
"nestjs-pino": "^4.6.1",
|
|
"nestjs-prisma": "^0.27.0",
|
|
"pino": "^10.3.1",
|
|
"pino-http": "^11.0.0",
|
|
"reflect-metadata": "^0.2.0",
|
|
"rxjs": "~7.8.0"
|
|
}
|
|
}
|