refactor(libs): graduate Icon / LayoutStateService / brand tokens to libs/shared/* (#99)

## Summary

Per ADR-0020 §"Shared-libs graduation": the three primitives that `portal-shell` (today) and `portal-admin` (next) will both share move out of `apps/portal-shell/src/` and into the workspace libs. Mechanical move — no behaviour change, prepares the ground for the admin-app PR.

## Graduated

| Primitive | Old location | New location |
|---|---|---|
| `Icon` component (+ `IconName` type) | `apps/portal-shell/src/app/components/icon/` | [`libs/shared/ui/src/lib/icon/`](libs/shared/ui/src/lib/icon/) |
| `LayoutStateService` (+ `ThemeMode` type) | `apps/portal-shell/src/app/state/` | [`libs/shared/state/src/lib/`](libs/shared/state/src/lib/) |
| Brand-palette `@theme` block | `apps/portal-shell/src/styles.css` | [`libs/shared/tokens/src/brand-tokens.css`](libs/shared/tokens/src/brand-tokens.css) |

## Notable changes

- **Icon selector renamed `app-icon` → `lib-icon`.** Required by the lib's ESLint `@angular-eslint/component-selector` rule (prefix `lib` for shared libs). All ~20 usages in `portal-shell` templates updated in one sweep.
- **New `shared-state` library** generated via `nx g @nx/angular:library libs/shared/state`. Mirrors the existing `feature-auth` / `shared-ui` shape (vite + Angular + spec setup). `tsconfig.base.json` path alias `shared-state` added by the generator.
- **Lib tags rebalanced** to satisfy the module-boundary lint rule:
  - `shared-state`: new lib → `scope:shared, type:shared`.
  - `shared-ui`: was `scope:portal-shell` (scaffold default) → `scope:shared, type:shared`.
- **`shared-tokens` is now CSS-only.** The placeholder TS function is gone; `index.ts` is an empty `export {}` with a TODO note. Vitest config flips `passWithNoTests: true` so the test target stops failing on the empty lib.
- **`portal-shell`'s `styles.css`** drops the inline `@theme {}` block and instead `@import`s `../../../libs/shared/tokens/src/brand-tokens.css`. Both apps will read the same source.
- Placeholder scaffolded files in `shared-ui/src/lib/shared-ui/` removed.

## Verification

- `nx run-many -t lint test build` across `portal-shell, shared-ui, shared-state, shared-tokens` — green.
- Tests redistributed: **portal-shell 28**, **shared-state 9**, **shared-ui 3**, **shared-tokens 0** = 40 total (same as before the move).
- Production build: **128.7 KB gzip** initial per locale (was 128.5 KB on `main` — noise-level delta).
- Brand-color CSS variables (`--color-brand-primary-500: #12546c`, …) still inlined in the produced `styles-*.css`.
- `dist/.../browser/{en,fr}/` emitted as expected.

## What this PR explicitly does NOT do

- Move other components (Header, Sidebar, Footer, ThemeSwitcher, LocaleSwitcher). Those are app-specific shell concerns; if `portal-admin` ends up needing them, they graduate in their own PR.
- Set up `portal-admin`. That's the next PR on the admin track — and now imports from `shared-ui` / `shared-state` / `shared-tokens` will Just Work.
- Refactor `feature-auth`'s tagging. It still says `scope:portal-shell`; revisit when the auth implementation actually lands and the dual-audience design (per ADR-0008) makes the right scope obvious.

## Test plan

- [x] Per-project run-many — green.
- [x] Production build emits both locales with brand tokens applied.
- [ ] Manual: `pnpm exec nx serve portal-shell` — the dev experience is unchanged.
- [ ] Manual: serve-static + locale switcher / theme switcher / sidebar collapse / navigation — all the behaviours the moved primitives drive still work in production.

---------

Co-authored-by: Julien Gautier <julien.gautier@apf.asso.fr>
Reviewed-on: #99

libs/shared/ui/project.json

@@ -4,7 +4,7 @@
   "sourceRoot": "libs/shared/ui/src",
   "prefix": "lib",
   "projectType": "library",
-  "tags": ["scope:portal-shell", "type:shared"],
+  "tags": ["scope:shared", "type:shared"],
   "targets": {
     "lint": {
       "executor": "@nx/eslint:lint"

libs/shared/ui/src/index.ts

@@ -1 +1 @@
-export * from './lib/shared-ui/shared-ui';
+export { Icon, type IconName } from './lib/icon/icon';

libs/shared/ui/src/lib/icon/icon.spec.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Icon } from './icon';
+
+@Component({
+  selector: 'lib-icon-test-host',
+  imports: [Icon],
+  template: `<lib-icon [name]="name" [size]="size" [strokeWidth]="strokeWidth" />`,
+})
+class IconTestHost {
+  name: 'home' | 'bell' = 'home';
+  size = 20;
+  strokeWidth = 1.5;
+}
+
+describe('Icon', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [IconTestHost] }).compileComponents();
+  });
+
+  it('renders a lucide <svg> for the given name', async () => {
+    const fixture = TestBed.createComponent(IconTestHost);
+    await fixture.whenStable();
+    const svg = fixture.nativeElement.querySelector('lib-icon svg') as SVGElement | null;
+    expect(svg).not.toBeNull();
+    expect(svg?.classList.contains('lucide')).toBe(true);
+  });
+
+  it('marks the lucide host as decorative (aria-hidden)', async () => {
+    const fixture = TestBed.createComponent(IconTestHost);
+    await fixture.whenStable();
+    const host = fixture.nativeElement.querySelector(
+      'lib-icon lucide-angular',
+    ) as HTMLElement | null;
+    expect(host?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('propagates size and strokeWidth to the underlying <svg>', async () => {
+    const fixture = TestBed.createComponent(IconTestHost);
+    fixture.componentInstance.size = 32;
+    fixture.componentInstance.strokeWidth = 2;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const svg = fixture.nativeElement.querySelector('lib-icon svg') as SVGElement | null;
+    expect(svg?.getAttribute('width')).toBe('32');
+    expect(svg?.getAttribute('height')).toBe('32');
+    expect(svg?.getAttribute('stroke-width')).toBe('2');
+  });
+});

libs/shared/ui/src/lib/icon/icon.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {
+  Accessibility,
+  Bell,
+  Building2,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CircleHelp,
+  FileText,
+  Folder,
+  Globe,
+  Grid2x2,
+  House,
+  LayoutDashboard,
+  type LucideIconData,
+  LucideAngularModule,
+  Mail,
+  Monitor,
+  Moon,
+  Search,
+  Settings,
+  Store,
+  Sun,
+  UsersRound,
+  Wrench,
+} from 'lucide-angular';
+
+/**
+ * Icon façade — single point of truth for the icon set across every
+ * app in the workspace (`portal-shell` today, `portal-admin` next).
+ *
+ * v1 is backed by `lucide-angular`. The migration to an in-house
+ * icomoon-generated set (sprite SVG) is a single-file change to
+ * THIS component — every consumer just writes `<lib-icon name="…">`,
+ * so swapping the implementation never touches them.
+ *
+ * Convention: `name` is the lowercase, kebab-cased "logical" name we
+ * will keep across implementations (`home`, `bar-chart`, etc.). The
+ * registry below maps each logical name to its lucide-angular icon
+ * data. When the icomoon export lands, each name will instead map to
+ * a `<symbol id="icon-…">` in the sprite — the template-side
+ * contract stays identical.
+ */
+
+// Adding an icon to the registry: import the lucide pascal-case name
+// above (Tailwind eslint sorts the import block), then add a single
+// `'kebab-name': PascalImport,` line below. Both lists are alphabetical
+// so contributors don't have to think about placement.
+const ICON_REGISTRY = {
+  accessibility: Accessibility,
+  bell: Bell,
+  'building-2': Building2,
+  calendar: Calendar,
+  check: Check,
+  'chevron-down': ChevronDown,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  'circle-help': CircleHelp,
+  'file-text': FileText,
+  folder: Folder,
+  globe: Globe,
+  'grid-2x2': Grid2x2,
+  home: House,
+  'layout-dashboard': LayoutDashboard,
+  mail: Mail,
+  monitor: Monitor,
+  moon: Moon,
+  search: Search,
+  settings: Settings,
+  store: Store,
+  sun: Sun,
+  'users-round': UsersRound,
+  wrench: Wrench,
+} satisfies Record<string, LucideIconData>;
+
+export type IconName = keyof typeof ICON_REGISTRY;
+
+@Component({
+  selector: 'lib-icon',
+  imports: [LucideAngularModule],
+  template: `<lucide-angular
+    [img]="icon()"
+    [size]="size()"
+    [strokeWidth]="strokeWidth()"
+    aria-hidden="true"
+  />`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Icon {
+  readonly name = input.required<IconName>();
+  readonly size = input<number>(20);
+  /** Lucide draws with stroke-width 2 by default; 1.5 reads slightly
+   *  lighter and matches the visual weight of most icomoon sets. */
+  readonly strokeWidth = input<number>(1.5);
+
+  protected readonly icon = computed(() => ICON_REGISTRY[this.name()]);
+}

libs/shared/ui/src/lib/shared-ui/shared-ui.html

@@ -1 +0,0 @@
-<p>SharedUi works!</p>

libs/shared/ui/src/lib/shared-ui/shared-ui.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SharedUi } from './shared-ui';
-
-describe('SharedUi', () => {
-  let component: SharedUi;
-  let fixture: ComponentFixture<SharedUi>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SharedUi],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SharedUi);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

libs/shared/ui/src/lib/shared-ui/shared-ui.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-shared-ui',
-  imports: [],
-  templateUrl: './shared-ui.html',
-  styleUrl: './shared-ui.css',
-})
-export class SharedUi {}