From 7433391c304d486dd14343792236ff12f4c9fb16 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:02:30 +0200
Subject: [PATCH 01/37] Aggiunge la skill apple-design per il lavoro
 sull'interfaccia

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .claude/skills/apple-design/SKILL.md | 282 +++++++++++++++++++++++++++
 1 file changed, 282 insertions(+)
 create mode 100644 .claude/skills/apple-design/SKILL.md

diff --git a/.claude/skills/apple-design/SKILL.md b/.claude/skills/apple-design/SKILL.md
new file mode 100644
index 0000000..66f5680
--- /dev/null
+++ b/.claude/skills/apple-design/SKILL.md
@@ -0,0 +1,282 @@
+---
+name: apple-design
+description: Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
+---
+
+# Apple Design
+
+How Apple builds interfaces that stop feeling like a computer and start feeling like an extension of you. This knowledge comes from Apple's WWDC design talks — chiefly *Designing Fluid Interfaces* (WWDC 2018) — distilled and translated into the web platform (CSS, Pointer Events, `requestAnimationFrame`, spring libraries like Motion/Framer Motion).
+
+The through-line: **an interface feels alive when motion starts from the current on-screen value, inherits the user's velocity, projects momentum forward, and can be grabbed and reversed at any instant.** Springs are the tool that makes all of this natural, because they are inherently interruptible and velocity-aware.
+
+## The Core Idea
+
+> "When we align the interface to the way we think and move, something magical happens — it stops feeling like a computer and starts feeling like a seamless extension of us."
+
+An interface is fluid when it behaves like the physical world: things respond instantly, move continuously, carry momentum, resist at boundaries, and can be redirected mid-motion. Everything below is a way to get closer to that.
+
+Apple frames design as serving four human needs: **safety/predictability, understanding, achievement, and joy.** Every rule here serves one of them.
+
+## 1. Response — kill latency
+
+The moment lag appears, the feeling of directness "falls off a cliff." Response is the foundation everything else is built on.
+
+- **Respond on pointer-down, not on release.** Highlight a button the instant it's pressed. Waiting for `click`/touch-up to show feedback feels dead.
+- **Be vigilant about every latency.** Audit debounces, artificial timers, transition waits, and the ~300ms tap delay. Anything on the input path that isn't essential is a regression.
+- **Feedback must be continuous *during* the interaction, not just at the end.** For a drag, slider, or drawer, update the UI 1:1 with the pointer the whole way through — never animate only when the gesture completes.
+
+```css
+/* Feedback lives on the press, and it's instant */
+.button:active {
+  transform: scale(0.97);
+  transition: transform 100ms ease-out;
+}
+```
+
+## 2. Direct manipulation — 1:1 tracking
+
+> "Touch and content should move together."
+
+When the user drags something, it must stay glued to the finger — and respect the offset from *where they grabbed it*. Snapping to the element's center on grab breaks the illusion immediately.
+
+- Use Pointer Events with `setPointerCapture` so tracking continues even when the pointer leaves the element's bounds.
+- Track a short **velocity/position history** (last few `pointermove` events), not just the current point — you'll need velocity at release.
+
+```js
+el.addEventListener('pointerdown', (e) => {
+  el.setPointerCapture(e.pointerId);
+  const grabOffset = e.clientY - el.getBoundingClientRect().top; // respect where they grabbed
+  // ...track position + timestamp history for velocity
+});
+```
+
+## 3. Interruptibility — the single most important principle
+
+> "The thought and the gesture happen in parallel."
+
+Every animation must be interruptible and redirectable at any moment. A user must be able to grab a moving element mid-flight and reverse it without waiting for the animation to finish. A closing modal the user grabs again should follow the finger — not finish closing first, then reopen.
+
+- **Never lock out input during a transition.**
+- **Always animate from the *presentation* (current) value, never the target value.** On interrupt, read the element's live on-screen transform and start the new animation from there. Starting from the logical/target value causes a visible jump.
+- **Avoid CSS transitions and `@keyframes` for anything gesture-driven** — they can't be smoothly grabbed and reversed mid-flight. Springs animate from the current value by default, which is exactly what interruption needs.
+- **When a gesture reverses, blend velocity — don't hard-cut it.** Replacing one animation with another at a reversal creates a velocity discontinuity, a "brick wall." Spring libraries that carry velocity through a re-target avoid it. (This is what iOS's *additive animations* do natively; on the web, choose a spring library that re-targets from the current velocity.)
+- **Decompose 2D motion into independent X and Y springs.** A single spring on a 2D distance desyncs when X and Y have different velocities.
+
+## 4. Behavior over animation — use springs
+
+> "Think of animation as a conversation between you and the object, not something prescribed by the interface."
+
+A pre-scripted, fixed-duration animation can't respond to new input. A spring can — new input just changes the target, and the motion stays continuous. Reach for springs for anything a user can touch.
+
+Apple deliberately replaced the physics triplet (mass/stiffness/damping) with two designer-friendly parameters. Think in these:
+
+- **Damping ratio** — controls overshoot. `1.0` = critically damped, no bounce, smooth settle. `< 1.0` = overshoots and oscillates. Lower = bouncier.
+- **Response** — how quickly the value reaches the target, in seconds. Lower = snappier. **This is not "duration"** — a spring has no fixed duration; its settle time emerges from the parameters.
+
+**Defaults:**
+- Start most UI at **damping `1.0`** (critically damped) — graceful and non-distracting.
+- Add bounce (**damping ~`0.8`**) **only when the gesture itself carried momentum** (a flick, a throw, a drag release). Overshoot on a menu that just faded in feels wrong; overshoot on a card you flicked feels right.
+
+**Concrete values Apple ships:**
+
+| Interaction | Damping | Response |
+| --- | --- | --- |
+| Move / reposition (e.g. PiP) | `1.0` | `0.4` |
+| Rotation | `0.8` | `0.4` |
+| Drawer / sheet | `0.8` | `0.3` |
+
+**Web mapping (Motion / Framer Motion):** the `bounce` + `duration` spring API maps closely to Apple's damping + response. A safe house style is `damping: 1.0` springs everywhere by default; reserve bounce for momentum-driven, physical interactions.
+
+```js
+import { animate } from 'motion';
+
+// Critically damped default (no overshoot)
+animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });
+
+// Momentum interaction — a little bounce, only because a flick preceded it
+animate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });
+```
+
+## 5. Velocity handoff — the seam between drag and animation
+
+When a gesture ends, the animation must **continue at the finger's exact velocity**, so there's no visible seam between dragging and animating. This is the detail that most separates "fluid" from "fine."
+
+Pass the pointer's release velocity as the spring's initial velocity. Some spring APIs want **relative** velocity — normalize it by the remaining distance to the target:
+
+```
+relativeVelocity = gestureVelocity / (targetValue − currentValue)
+```
+
+Example: element at `y=50`, target `y=150` (100px to go), finger moving 50px/s → initial spring velocity = `50 / 100 = 0.5`. Framer Motion / Motion take absolute px/s velocity directly (`velocity` option), so you usually hand it the raw value.
+
+## 6. Momentum projection — animate to where the gesture is *going*
+
+> "Take a small input and make a big output."
+
+Don't snap to the nearest boundary from the *release point*. Use velocity to **project the resting position** — exactly like scroll deceleration — then snap to the target nearest that projected point. This is what makes a flick feel like it throws the element.
+
+Apple's exact projection function (from the *Designing Fluid Interfaces* sample code):
+
+```js
+// decelerationRate ≈ 0.998 for normal scroll feel; 0.99 for snappier
+function project(initialVelocity /* px/s */, decelerationRate = 0.998) {
+  return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);
+}
+
+const projectedEndpoint = currentPosition + project(releaseVelocity);
+const target = nearestSnapPoint(projectedEndpoint);   // choose target from the projection
+animateSpringTo(target, { velocity: releaseVelocity }); // then hand off velocity (§5)
+```
+
+Note: the physics-textbook `v²/(2·decel)` is *not* what Apple ships — use the exponential-decay form above. This is the standard behavior in good bottom-sheets and carousels (Vaul, Embla).
+
+## 7. Spatial consistency — symmetric paths, anchored origins
+
+> "If something disappears one way, we expect it to emerge from where it came."
+
+- **Enter and exit along the same path.** A panel that slides in from the right must dismiss to the right. In-from-right / out-the-bottom feels disconnected and confusing.
+- **Anchor interactions to their source.** A menu, popover, or sheet should originate from the element that triggered it — set `transform-origin` to the trigger, so the spatial relationship between button and content is obvious. (This is the same origin-awareness point as popovers scaling from their trigger, not their center.)
+- **Mirror the easing on reversible transitions** so the outbound path matches the return path (use inverse cubic-bézier control points for the two directions).
+
+## 8. Hint in the direction of the gesture
+
+Humans predict a final state from a trajectory. Intermediate motion should telegraph where things are going — Control Center modules "grow up and out toward your finger." Make the in-between frames point at the outcome, not just interpolate blindly to it.
+
+## 9. Rubber-banding — soft boundaries
+
+At an edge, resist progressively instead of stopping hard. A hard stop reads as "frozen"; continuous resistance reads as "responsive, but there's nothing more here." Apply damping that increases the further past the boundary the user drags.
+
+```js
+// The further past the bound, the less the element follows — real things slow before they stop
+function rubberband(overshoot, dimension, constant = 0.55) {
+  return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
+}
+```
+
+## 10. Gesture design details (the "feel" checklist)
+
+- **Tap:** highlight on touch-*down* (instant), commit on touch-*up*. Add ~10px of hysteresis/hit padding around the target, and allow cancel-by-dragging-away and back.
+- **Drag/swipe:** require a small movement threshold (hysteresis, ~10px) before committing to a direction, then track 1:1.
+- **Detect all plausible gestures in parallel from the first move**, then confidently cancel the losers once intent is clear. Avoid recognizers that only report a *final* state (`swipeleft`-type events) — they throw away the continuous tracking you need for feedback.
+- **Minimize disambiguation delays.** Double-tap detection unavoidably delays single taps; only pay that cost where double-tap truly exists.
+
+## 11. Frame-level smoothness
+
+Smoothness is about *what's in the frames*, not just the frame rate.
+
+- Keep the per-frame positional change below the perception threshold to avoid strobing.
+- For very fast motion, a subtle **motion blur / stretch** encodes speed and reads better than a hard sharp streak.
+- `requestAnimationFrame` is the web's display-synced clock (Apple uses `CADisplayLink`). Animate only compositor-friendly properties — `transform` and `opacity` — and hint with `will-change` where motion is imminent.
+
+## 12. Materials & depth — translucency conveys hierarchy
+
+Apple uses translucent materials as a floating functional layer that brings structure without stealing focus. On the web, approximate with `backdrop-filter`.
+
+- **Build nav/toolbars/sheets as translucent layers** (`backdrop-filter: blur()` + a semi-transparent background) with content scrolling underneath — not opaque bars that consume a fixed strip.
+- **Material weight encodes hierarchy:** darker/heavier materials separate structural regions (sidebars); lighter materials draw attention to interactive elements (buttons). **Never stack a light translucent surface on another** — legibility collapses.
+- **Bigger surfaces should read as thicker:** stronger blur + a deeper shadow than small chips. Consider context-aware shadow — heavier over busy/text content for separation, lighter over plain backgrounds.
+- **Dim to focus, separate to keep flow.** A modal task pairs the surface with a dimming scrim and pushes the background back/down. A parallel, non-blocking panel uses translucency and offset *without* a scrim so the flow isn't broken. For stacked sheets, progressively dim and push back each parent layer.
+- **Vibrancy keeps text legible over changing backgrounds.** Over blurred/translucent surfaces, don't use flat gray text — use higher-contrast, slightly heavier weight, and a small letter-spacing bump. Put color on a solid layer, not the translucent foreground.
+- **Scroll edge effects, not hard dividers.** Instead of a 1px border under a sticky header, fade a small blur/gradient mask where content meets floating chrome — only where floating UI actually overlaps content.
+- **Materialize, don't just fade.** For glass/blur surfaces, animate blur radius and scale together on enter/exit, so the surface reads as a real material arriving rather than a plain opacity fade.
+
+```css
+.toolbar {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-top: 1px solid rgba(255, 255, 255, 0.4); /* bright top edge = light catching the material */
+}
+```
+
+## 13. Multimodal feedback — motion + sound + haptics
+
+Three rules for combining senses (from *Designing Audio-Haptic Experiences*):
+
+1. **Causality** — it must be obvious what caused the feedback. Trigger it on the actual causal event (the toggle flipping, the item snapping home), and match its character to the action's physicality.
+2. **Harmony** — the visual, the sound, and the haptic must fire on the **same frame**. Latency between them destroys the illusion. Don't let a CSS transition lag the audio/haptic (Vibration API).
+3. **Utility** — add feedback only where it earns its place. Reserve haptics/sound for meaningful moments (success, error, commit, snap). Over-feedback trains users to ignore all of it.
+
+## 14. Reduced motion & accessibility
+
+Reduced motion doesn't mean *no* feedback — it means a gentler, non-vestibular equivalent. Respond to three independent signals and bake them into your components:
+
+- **`prefers-reduced-motion: reduce`** — replace slides/springs/parallax with short opacity **cross-fades or static transitions**. Drop elastic/overshoot. Keep opacity/color changes that aid comprehension.
+- **`prefers-reduced-transparency: reduce`** — make translucent surfaces frostier/solid: raise background opacity, drop the blur.
+- **`prefers-contrast: more`** — near-solid backgrounds with a defined, contrasting border.
+
+Also: avoid full-viewport moving backgrounds, slow looping oscillations (near 0.2 Hz / one cycle per 5s), and abrupt brightness jumps (ease dark↔light theme changes). Make large moving objects semi-transparent while they travel, and fade big surfaces out during a large reposition and back in once settled.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .sheet { transition: opacity 200ms ease; transform: none !important; }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .toolbar { background: white; backdrop-filter: none; }
+}
+```
+
+## 15. Typography — optical sizing, tracking, leading
+
+Apple designs type to change shape with size; the same discipline applies on the web. (From *The Details of UI Typography*, WWDC 2020.)
+
+- **Tracking (letter-spacing) is size-specific — never one value for all sizes.** Large display text wants *negative* tracking (letters read too far apart as they grow); small text wants slightly *positive* tracking for legibility. A fixed `letter-spacing` is wrong somewhere. Tighten headings, leave body near `0`.
+- **Leading (line-height) tracks size inversely.** Tight on large headings, looser on body copy. Increase it for scripts with tall ascenders/descenders; tighten it for dense, information-heavy UI.
+- **Build hierarchy from weight + size + leading as a set,** not size alone. Emphasize with weight — it adds presence without taking more space.
+- **Respect the user's text-size setting** (Dynamic Type). Scale layout *with* the text — spacing in `rem`/`em`, not fixed px — so a larger font doesn't break the layout.
+- **Default to the platform's system font** before a custom face; it already ships optical sizing, tracking tables, and legibility tuning. Override only with a reason.
+
+```css
+:root { font: 100%/1.5 system-ui, sans-serif; } /* body: system font, comfortable leading */
+
+.display {
+  font-size: clamp(2rem, 5vw, 4rem);
+  line-height: 1.05;        /* tight leading for large text */
+  letter-spacing: -0.02em;  /* negative tracking as it grows */
+  font-optical-sizing: auto;
+}
+```
+
+## 16. Design foundations — the eight principles
+
+The motion and craft above serve Apple's eight design principles (*Principles of Great Design*, WWDC 2026). Use these as the names you reason with:
+
+1. **Purpose.** Make with intention; decide what *not* to build. Every feature asks for the user's time, attention, and trust — spend that budget only where it pays off.
+2. **Agency.** Keep people in control: offer choices, don't force a single path. Back it with forgiveness — easy undo for slips, a confirmation dialog only for genuinely destructive, irreversible actions (use sparingly; overusing it trains people to click through).
+3. **Responsibility.** Act in the user's interest. Privacy: ask at the right moment, only for what's needed, transparently. Safety: anticipate misuse and harm — especially with AI (an allergy-aware recipe app must not suggest a harmful ingredient). Add previews, confirmations, disclaimers; cut a feature whose risk outweighs its value.
+4. **Familiarity.** Build on what people already know. Use metaphors that are neither too literal nor too abstract (a trash can means delete), and honor their physics. Be consistent: things that look the same must behave the same and live in the same place (close is always top-left on macOS) so people can predict what happens next. Only break a familiar pattern if you can prove it's better — then test it, don't assume.
+5. **Flexibility.** Design for different contexts, devices, and the full range of abilities. Adapt to the platform (iPhone = quick touch; desktop = deep workflows with precise pointer control) and to the situation. Design inclusively (age, language, expertise, accessibility). When no single layout fits everyone, let people personalize — rearrange controls, hide what they don't use.
+6. **Simplicity — not minimalism.** Strip the unnecessary so the core purpose shines; burying everything in one place looks minimal but isn't simple. Be concise (plain language, no jargon, fewer steps) and clear (use hierarchy — order, spacing, contrast — so the most important thing is the most obvious). Every element earns its place; sometimes *adding* context simplifies (a video scrubber that shows time remaining). Show the common path first, advanced options one level deeper.
+7. **Craft.** Uncompromising attention to detail builds trust. Beautiful typography, colors that adapt to light/dark, clear iconography, and responsive animations that give immediate, natural feedback. Nothing is random — every spacing, timing, and alignment value is a deliberate choice you can defend. Jittery scroll, misaligned icons, and layouts that break on rotation read as carelessness. Craft needs iteration and longevity — keep evolving the design as features and hardware change.
+8. **Delight.** The result of getting the other seven right, not confetti tacked on top. Decide the emotion you want people to feel (calm, confident, excited) and reinforce it in every decision.
+
+Tactical rules that serve these:
+
+- **Feedback comes in four kinds:** status, completion, warning, error. Confirm meaningful actions, expose ongoing status, warn before problems, validate inline (not on submit).
+- **Wayfinding.** Every screen should answer: Where am I? Where can I go? What's there? How do I get out? Never trap the user.
+- **Grouping & mapping.** Proximity implies relationship; place a control near what it affects and arrange controls to mirror what they change. If you need a label to explain a control, the mapping is weak.
+- **Direct, specific labels beat safe generic ones.** Name nav items for their contents ("Progress", "Library"), not vague umbrellas ("Home"). Specificity creates predictability.
+
+## 17. Process
+
+- **Prototype interactively — an interactive demo is worth "a million static designs."** You discover the interface by building and playing with it; a working prototype also sets a concrete bar that prevents a mediocre final implementation.
+- **Design interaction and visuals together.** "You shouldn't be able to tell where one ends and the other begins." Motion is not a layer added after the pixels.
+- **Test with real people in real context**, and review motion with fresh eyes — play it in slow motion / frame-by-frame to catch what's invisible at full speed.
+
+## Quick Reference
+
+| Need | Technique | Concrete value |
+| --- | --- | --- |
+| Default UI spring | Critically damped, no overshoot | `damping 1.0`, `response 0.3–0.4` |
+| Momentum / flick spring | Under-damped, slight bounce | `damping ~0.8`, `response 0.3–0.4` |
+| Gesture → spring velocity | Hand off release velocity | `gestureVelocity / (target − current)` if normalized |
+| Flick landing point | Project momentum | `current + (v/1000)·d/(1−d)`, `d ≈ 0.998` |
+| Interrupt cleanly | Start from presentation (live) value | read the on-screen transform |
+| Avoid reversal "brick wall" | Carry velocity through re-target | spring that blends velocity |
+| Reversible transition | Mirror the easing curve | inverse cubic-bézier |
+| Decide reverse vs. commit | Use velocity **sign**, not position | at release |
+| 1:1 drag | Pointer Events + capture | respect the grab offset |
+| Feedback | On pointer-down, continuous | never only at the end |
+| Boundary | Rubber-band, don't hard-stop | progressive resistance |
+| Translucent chrome | `backdrop-filter` layer | content scrolls under |
+| Type tracking | Size-specific, never fixed | tighten large text (`-0.02em`), body near `0` |
+| Reduced motion | Cross-fade, not slide/spring | `@media (prefers-reduced-motion)` |

From 38e0185325b2e1262826ec61cd9eec75ddefba97 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:41:25 +0200
Subject: [PATCH 02/37] Corregge i contrasti della palette e toglie il tema
 scuro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I colori di stato non passavano WCAG AA con il testo bianco sopra: success
3.39:1, training 3.49:1, info ~3.7:1 (chip «Presente», «Allenamento», celle
del calendario). Le luminosità sono abbassate fino a superare 4.5:1.

I gradi dei badge erano il caso peggiore: `text-oro` su bianco sta a 1.9:1 e
`text-argento` a 2.5:1, cioè illeggibili. Nascono i token `--oro-testo`,
`--argento-testo` e `--bronzo-testo` per il testo, mentre le varianti chiare
restano dove servono davvero, su sfondi e bordi.

Il blocco `.dark` non veniva mai applicato — nessun interruttore, nessun
`prefers-color-scheme` — ed era anche incoerente: l'accento diventava
grigio-blu e mancavano success, warning, info, training, i metalli, i due
gradienti e le due ombre. Un tema mai attivato non si accorge di rompersi,
quindi via, con `color-scheme: light` dichiarato esplicitamente.

Nello stesso file:
- `:focus-visible` globale, prima non c'era nessuna regola di focus;
- tracking del display specifico per taglia (`font-display-sm/lg`): un solo
  valore per tutte le dimensioni è sbagliato da qualche parte;
- utility `materiale` e `bordo-sfumato` per la chrome traslucida, con
  `prefers-reduced-transparency` e `prefers-contrast`;
- movimento ridotto: dissolvenza breve invece dell'azzeramento di ogni
  transizione, così resta un feedback che spiega cosa è cambiato;
- rimossi i token di chart e sidebar (i componenti che li usavano non ci sono
  più) e l'import di tw-animate-css, che non era usato da nessuna classe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/lib/badges.ts |  21 ++++-
 src/styles.css    | 215 +++++++++++++++++++++++++++++-----------------
 2 files changed, 153 insertions(+), 83 deletions(-)

diff --git a/src/lib/badges.ts b/src/lib/badges.ts
index dfac5c7..719e2c3 100644
--- a/src/lib/badges.ts
+++ b/src/lib/badges.ts
@@ -19,10 +19,25 @@ export type Grado = "bronzo" | "argento" | "oro";
 
 export const gradiOrdine: Grado[] = ["bronzo", "argento", "oro"];
 
+/**
+ * `text` usa i token `-testo` (varianti scurite): l'oro e l'argento chiari
+ * stanno sotto 2.5:1 su bianco e come colore di testo sono illeggibili.
+ * Le versioni chiare restano su sfondi e bordi, dove il contrasto non conta.
+ */
 export const gradoMeta: Record<Grado, { label: string; text: string; bg: string; ring: string }> = {
-  bronzo: { label: "Bronzo", text: "text-bronzo", bg: "bg-bronzo/15", ring: "ring-bronzo/40" },
-  argento: { label: "Argento", text: "text-argento", bg: "bg-argento/20", ring: "ring-argento/50" },
-  oro: { label: "Oro", text: "text-oro", bg: "bg-oro/20", ring: "ring-oro/50" },
+  bronzo: {
+    label: "Bronzo",
+    text: "text-bronzo-testo",
+    bg: "bg-bronzo/15",
+    ring: "ring-bronzo/40",
+  },
+  argento: {
+    label: "Argento",
+    text: "text-argento-testo",
+    bg: "bg-argento/20",
+    ring: "ring-argento/50",
+  },
+  oro: { label: "Oro", text: "text-oro-testo", bg: "bg-oro/20", ring: "ring-oro/50" },
 };
 
 export type BadgeDef = {
diff --git a/src/styles.css b/src/styles.css
index 12eac5f..9130243 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,8 +1,5 @@
 @import "tailwindcss" source(none);
 @source "../src";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
 
 @theme {
   --font-display: "Bebas Neue", ui-sans-serif, sans-serif;
@@ -10,17 +7,26 @@
 }
 
 /*
- * Design system definition.
+ * Definizione del design system.
  *
- * The @theme inline block maps CSS custom properties to Tailwind utility
- * classes (e.g. --color-primary -> bg-primary, text-primary).
+ * Il blocco @theme inline mappa le custom property sulle utility Tailwind
+ * (es. --color-primary -> bg-primary, text-primary).
  *
- * The :root and .dark blocks define the actual color values using oklch.
- * All colors MUST use oklch format.
+ * Il blocco :root definisce i valori reali in oklch. Tutti i colori DEVONO
+ * essere in oklch.
  *
- * To add a new semantic color:
- * 1. Add the variable to :root (light value) and .dark (dark value)
- * 2. Register it in @theme inline as --color-<name>: var(--<name>)
+ * L'app è solo chiara (DD: niente tema scuro finché non è completo per tutti
+ * i token, gradienti e ombre comprese): `color-scheme: light` lo dichiara al
+ * browser così form e scrollbar native restano coerenti.
+ *
+ * Per aggiungere un colore semantico:
+ * 1. Aggiungi la variabile in :root
+ * 2. Registrala in @theme inline come --color-<nome>: var(--<nome>)
+ *
+ * Contrasto: i token con suffisso `-testo` sono le varianti scurite da usare
+ * come colore del testo; quelli senza suffisso servono per sfondi e bordi.
+ * Non usare `text-oro`/`text-argento`/`text-bronzo`: hanno meno di 3:1 su
+ * bianco. Vedi `gradoMeta` in lib/badges.ts.
  */
 
 @theme inline {
@@ -51,22 +57,10 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
   --color-ring-offset-background: var(--background);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 :root {
+  color-scheme: light;
   --radius: 1rem;
   --background: oklch(0.985 0.002 240);
   --foreground: oklch(0.16 0.01 260);
@@ -87,17 +81,23 @@
   --border: oklch(0.915 0.006 255);
   --input: oklch(0.915 0.006 255);
   --ring: oklch(0.58 0.22 27);
-  --success: oklch(0.62 0.16 152);
+  /* Luminosità scelte perché il testo bianco sopra superi 4.5:1 (WCAG AA). */
+  --success: oklch(0.53 0.16 152);
   --success-foreground: oklch(0.99 0 0);
   --warning: oklch(0.78 0.15 78);
   --warning-foreground: oklch(0.18 0.02 60);
-  --info: oklch(0.6 0.13 245);
+  --info: oklch(0.54 0.13 245);
   --info-foreground: oklch(0.99 0 0);
-  --training: oklch(0.62 0.2 245);
+  --training: oklch(0.53 0.2 245);
   --training-foreground: oklch(0.99 0 0);
+  /* Metalli: la variante chiara va su sfondi e bordi, la `-testo` sul testo
+     (la chiara sta sotto 2.5:1 su bianco ed è illeggibile). */
   --bronzo: oklch(0.62 0.11 55);
   --argento: oklch(0.72 0.02 260);
   --oro: oklch(0.8 0.15 85);
+  --bronzo-testo: oklch(0.55 0.11 55);
+  --argento-testo: oklch(0.54 0.02 260);
+  --oro-testo: oklch(0.55 0.15 85);
   --gradient-hero: linear-gradient(
     140deg,
     oklch(0.18 0.012 265),
@@ -107,19 +107,6 @@
   --gradient-accent: linear-gradient(120deg, oklch(0.58 0.22 27), oklch(0.68 0.19 40));
   --shadow-card: 0 1px 2px oklch(0.16 0.01 260 / 6%), 0 12px 28px -18px oklch(0.16 0.01 260 / 35%);
   --shadow-pop: 0 18px 40px -20px oklch(0.58 0.22 27 / 55%);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
 }
 
 @theme inline {
@@ -137,6 +124,9 @@
   --color-bronzo: var(--bronzo);
   --color-argento: var(--argento);
   --color-oro: var(--oro);
+  --color-bronzo-testo: var(--bronzo-testo);
+  --color-argento-testo: var(--argento-testo);
+  --color-oro-testo: var(--oro-testo);
 }
 
 @utility bg-hero {
@@ -155,9 +145,25 @@
   box-shadow: var(--shadow-pop);
 }
 
+/*
+ * Il tracking del display è specifico per taglia: Bebas Neue a corpo grande
+ * legge troppo spaziato (serve tracking negativo), a corpo piccolo troppo
+ * stretto (serve positivo). Un solo valore sarebbe sbagliato da qualche parte.
+ * `font-display-lg` da text-3xl in su, `font-display-sm` sotto text-xl.
+ */
 @utility font-display {
   font-family: var(--font-display);
-  letter-spacing: 0.02em;
+  letter-spacing: 0.01em;
+}
+
+@utility font-display-lg {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+}
+
+@utility font-display-sm {
+  font-family: var(--font-display);
+  letter-spacing: 0.04em;
 }
 
 /* --- Micro-animazioni (solo CSS standard, nessuna dipendenza esterna) --- */
@@ -258,10 +264,6 @@
   border-radius: 0.5rem;
 }
 
-@utility anim-barra {
-  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
 /* Feedback al tocco sulle card interattive (+ hover leggero su desktop). */
 @utility premi {
   transition:
@@ -280,49 +282,98 @@
   }
 }
 
+/*
+ * Meno movimento non vuol dire nessun feedback: si tolgono spostamenti,
+ * rimbalzi e ripetizioni, si tiene una dissolvenza breve che continua a
+ * spiegare cosa è cambiato.
+ */
+@keyframes crapp-dissolvenza {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
-    animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .anim-reveal,
+  .anim-pop,
+  .anim-riga {
+    animation: crapp-dissolvenza 200ms ease-out both !important;
+  }
+
+  .premi {
+    transition: opacity 120ms ease-out !important;
+  }
+
+  .premi:active {
+    transform: none;
+    opacity: 0.72;
+  }
+
+  .premi:hover {
+    transform: none;
   }
 }
 
-.dark {
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.984 0.003 247.858);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+/* Superfici traslucide: se l'utente chiede meno trasparenza diventano piene. */
+@media (prefers-reduced-transparency: reduce) {
+  .materiale {
+    background-color: var(--color-card);
+    backdrop-filter: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  .materiale {
+    background-color: var(--color-card);
+    backdrop-filter: none;
+    border-color: var(--color-foreground);
+  }
+}
+
+/*
+ * Chrome flottante in stile Apple: la barra è un materiale traslucido sotto
+ * cui il contenuto scorre, con una sfumatura al bordo al posto della linea
+ * netta (scroll edge effect).
+ */
+@utility materiale {
+  background-color: color-mix(in oklab, var(--color-card) 72%, transparent);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+@utility bordo-sfumato {
+  &::before {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 100%;
+    height: 1.25rem;
+    pointer-events: none;
+    background: linear-gradient(
+      to top,
+      color-mix(in oklab, var(--color-background) 85%, transparent),
+      transparent
+    );
+  }
+}
+
+/* Focus da tastiera sempre visibile: nessun controllo custom lo definiva. */
+@layer base {
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+    border-radius: 0.25rem;
+  }
 }
 
 @layer base {
@@ -334,6 +385,10 @@
     background-color: var(--color-background);
     color: var(--color-foreground);
     font-family: var(--font-sans);
+    line-height: 1.5;
+    font-optical-sizing: auto;
     -webkit-font-smoothing: antialiased;
+    /* Niente pull-to-refresh accidentale né rimbalzo che scopre il fondo. */
+    overscroll-behavior-y: contain;
   }
 }

From 230ea1d156a56f06d1fa5d79730dde47a86f5f65 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:41:36 +0200
Subject: [PATCH 03/37] Sistema i meta della PWA e traduce le schermate di
 sistema
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`viewport-fit=cover` mancava, quindi `env(safe-area-inset-bottom)` valeva
sempre 0: il codice safe-area della BottomNav c'era già ma era inerte, e su
iPhone in standalone la barra finiva sotto la home bar.

`theme-color` e `background_color` erano `#111111` su un'app con fondo quasi
bianco: barra di stato nera e splash nero prima di una UI chiara.

`lang="en"` su un'app interamente in italiano: gli screen reader leggevano
tutto con fonetica inglese. Con esso 404 e schermata d'errore, che erano
rimaste in inglese.

L'anteprima social puntava a un'immagine di preview Lovable su R2 ormai
scaduta e dichiarava `twitter:site @Lovable`: ora usa l'icona della squadra,
con `summary` al posto di `summary_large_image` visto che l'unica immagine
disponibile è quadrata.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public/manifest.webmanifest |  5 ++--
 src/routes/__root.tsx       | 53 +++++++++++++++++++------------------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index b9a820c..c1658b8 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -2,10 +2,11 @@
   "name": "CrAPP — CRAP Volley",
   "short_name": "CrAPP",
   "description": "L'app della squadra CRAP Volley: presenze, calendario, statistiche, classifica e scout live.",
+  "lang": "it",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#111111",
-  "theme_color": "#111111",
+  "background_color": "#fafafb",
+  "theme_color": "#fafafb",
   "orientation": "portrait",
   "icons": [
     {
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 6b88bdb..05ce366 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -24,17 +24,17 @@ function NotFoundComponent() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
-        <h1 className="text-7xl font-bold text-foreground">404</h1>
-        <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
+        <h1 className="font-display-lg text-7xl text-foreground">404</h1>
+        <h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2>
         <p className="mt-2 text-sm text-muted-foreground">
-          The page you're looking for doesn't exist or has been moved.
+          La pagina che cerchi non esiste o è stata spostata.
         </p>
         <div className="mt-6">
           <Link
             to="/"
-            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
           >
-            Go home
+            Torna alla home
           </Link>
         </div>
       </div>
@@ -53,26 +53,27 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
         <h1 className="text-xl font-semibold tracking-tight text-foreground">
-          This page didn't load
+          Questa pagina non si è caricata
         </h1>
         <p className="mt-2 text-sm text-muted-foreground">
-          Something went wrong on our end. You can try refreshing or head back home.
+          Qualcosa è andato storto da parte nostra. Puoi riprovare o tornare alla home.
         </p>
         <div className="mt-6 flex flex-wrap justify-center gap-2">
           <button
+            type="button"
             onClick={() => {
               router.invalidate();
               reset();
             }}
-            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
           >
-            Try again
+            Riprova
           </button>
           <a
             href="/"
-            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
+            className="premi inline-flex min-h-11 items-center justify-center rounded-2xl border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground"
           >
-            Go home
+            Torna alla home
           </a>
         </div>
       </div>
@@ -84,7 +85,12 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
   head: () => ({
     meta: [
       { charSet: "utf-8" },
-      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      // `viewport-fit=cover` è obbligatorio perché env(safe-area-inset-*) sia
+      // diverso da 0 su iOS: senza, la BottomNav finisce sotto la home bar.
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1, viewport-fit=cover",
+      },
       { title: "CrAPP — L'app del CRAP Volley" },
       {
         name: "description",
@@ -92,7 +98,9 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
           "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
       },
       { name: "author", content: "CRAP Volley" },
-      { name: "theme-color", content: "#111111" },
+      // Deve combaciare con --background, altrimenti la barra di stato resta
+      // nera sopra un'interfaccia chiara.
+      { name: "theme-color", content: "#fafafb" },
       { property: "og:title", content: "CrAPP — L'app del CRAP Volley" },
       {
         property: "og:description",
@@ -100,24 +108,17 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
           "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
       },
       { property: "og:type", content: "website" },
-      { name: "twitter:card", content: "summary_large_image" },
-      { name: "twitter:site", content: "@Lovable" },
+      // `summary` e non `summary_large_image`: l'unica immagine è l'icona
+      // quadrata della squadra, non una copertina 2:1.
+      { name: "twitter:card", content: "summary" },
       { name: "twitter:title", content: "CrAPP — L'app del CRAP Volley" },
       {
         name: "twitter:description",
         content:
           "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
       },
-      {
-        property: "og:image",
-        content:
-          "https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/fd5ebd0b-6661-43fa-936c-35856d1068c4/id-preview-2942946e--8d07b0e4-6bd2-4a17-9dd2-bb2cf13f9f7c.lovable.app-1785491191791.png",
-      },
-      {
-        name: "twitter:image",
-        content:
-          "https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/fd5ebd0b-6661-43fa-936c-35856d1068c4/id-preview-2942946e--8d07b0e4-6bd2-4a17-9dd2-bb2cf13f9f7c.lovable.app-1785491191791.png",
-      },
+      { property: "og:image", content: "/icon-512.png" },
+      { name: "twitter:image", content: "/icon-512.png" },
     ],
     links: [
       {
@@ -143,7 +144,7 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
 
 function RootShell({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="it">
       <head>
         <HeadContent />
       </head>

From 18c6205e069c529e7e7e790a199f1da80f413b25 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:41:49 +0200
Subject: [PATCH 04/37] Rimuove 43 componenti shadcn inutilizzati e installa
 motion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dei 45 componenti in `src/components/ui/` solo `drawer` e `sonner` erano
importati da qualche parte. Gli altri 43 — e con loro ~45 dipendenze: tutti i
`@radix-ui/*`, recharts, react-hook-form, date-fns, embla, cmdk, input-otp,
react-day-picker, react-resizable-panels, class-variance-authority,
tw-animate-css — erano superficie di aggiornamento e di sicurezza pagata a
vuoto. Stessa sorte per `src/hooks/use-mobile.tsx`, mai importato. `zod`
resta: lo usano tre route API.

Le dipendenze dirette passano da 50 a 21. Il bundle client NON cala per
questo: quel codice non era importato e il tree-shaking già lo escludeva.

Nella direzione opposta entra `motion`, l'unica aggiunta: serve per le molle
interrompibili che nessuna `@keyframes` CSS può dare (vedi DD-021). Costa ~42
KB gzip, che le rimozioni non compensano — il bundle client passa da 267 a
308 KB gzip.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 bun.lock                              | 236 +-------
 package.json                          |  38 +-
 src/components/ui/accordion.tsx       |  51 --
 src/components/ui/alert-dialog.tsx    | 115 ----
 src/components/ui/alert.tsx           |  49 --
 src/components/ui/aspect-ratio.tsx    |   5 -
 src/components/ui/avatar.tsx          |  47 --
 src/components/ui/badge.tsx           |  32 --
 src/components/ui/breadcrumb.tsx      | 101 ----
 src/components/ui/button.tsx          |  49 --
 src/components/ui/calendar.tsx        | 177 ------
 src/components/ui/card.tsx            |  55 --
 src/components/ui/carousel.tsx        | 240 ---------
 src/components/ui/chart.tsx           | 331 ------------
 src/components/ui/checkbox.tsx        |  26 -
 src/components/ui/collapsible.tsx     |  11 -
 src/components/ui/command.tsx         | 143 -----
 src/components/ui/context-menu.tsx    | 186 -------
 src/components/ui/dialog.tsx          | 104 ----
 src/components/ui/dropdown-menu.tsx   | 187 -------
 src/components/ui/form.tsx            | 171 ------
 src/components/ui/hover-card.tsx      |  27 -
 src/components/ui/input-otp.tsx       |  73 ---
 src/components/ui/input.tsx           |  22 -
 src/components/ui/label.tsx           |  21 -
 src/components/ui/menubar.tsx         | 228 --------
 src/components/ui/navigation-menu.tsx | 120 -----
 src/components/ui/pagination.tsx      |  98 ----
 src/components/ui/popover.tsx         |  31 --
 src/components/ui/progress.tsx        |  25 -
 src/components/ui/radio-group.tsx     |  36 --
 src/components/ui/resizable.tsx       |  37 --
 src/components/ui/scroll-area.tsx     |  44 --
 src/components/ui/select.tsx          | 152 ------
 src/components/ui/separator.tsx       |  24 -
 src/components/ui/sheet.tsx           | 122 -----
 src/components/ui/sidebar.tsx         | 744 --------------------------
 src/components/ui/skeleton.tsx        |   7 -
 src/components/ui/slider.tsx          |  23 -
 src/components/ui/switch.tsx          |  27 -
 src/components/ui/table.tsx           |  94 ----
 src/components/ui/tabs.tsx            |  53 --
 src/components/ui/textarea.tsx        |  21 -
 src/components/ui/toggle-group.tsx    |  57 --
 src/components/ui/toggle.tsx          |  42 --
 src/components/ui/tooltip.tsx         |  32 --
 src/hooks/use-mobile.tsx              |  19 -
 47 files changed, 10 insertions(+), 4523 deletions(-)
 delete mode 100644 src/components/ui/accordion.tsx
 delete mode 100644 src/components/ui/alert-dialog.tsx
 delete mode 100644 src/components/ui/alert.tsx
 delete mode 100644 src/components/ui/aspect-ratio.tsx
 delete mode 100644 src/components/ui/avatar.tsx
 delete mode 100644 src/components/ui/badge.tsx
 delete mode 100644 src/components/ui/breadcrumb.tsx
 delete mode 100644 src/components/ui/button.tsx
 delete mode 100644 src/components/ui/calendar.tsx
 delete mode 100644 src/components/ui/card.tsx
 delete mode 100644 src/components/ui/carousel.tsx
 delete mode 100644 src/components/ui/chart.tsx
 delete mode 100644 src/components/ui/checkbox.tsx
 delete mode 100644 src/components/ui/collapsible.tsx
 delete mode 100644 src/components/ui/command.tsx
 delete mode 100644 src/components/ui/context-menu.tsx
 delete mode 100644 src/components/ui/dialog.tsx
 delete mode 100644 src/components/ui/dropdown-menu.tsx
 delete mode 100644 src/components/ui/form.tsx
 delete mode 100644 src/components/ui/hover-card.tsx
 delete mode 100644 src/components/ui/input-otp.tsx
 delete mode 100644 src/components/ui/input.tsx
 delete mode 100644 src/components/ui/label.tsx
 delete mode 100644 src/components/ui/menubar.tsx
 delete mode 100644 src/components/ui/navigation-menu.tsx
 delete mode 100644 src/components/ui/pagination.tsx
 delete mode 100644 src/components/ui/popover.tsx
 delete mode 100644 src/components/ui/progress.tsx
 delete mode 100644 src/components/ui/radio-group.tsx
 delete mode 100644 src/components/ui/resizable.tsx
 delete mode 100644 src/components/ui/scroll-area.tsx
 delete mode 100644 src/components/ui/select.tsx
 delete mode 100644 src/components/ui/separator.tsx
 delete mode 100644 src/components/ui/sheet.tsx
 delete mode 100644 src/components/ui/sidebar.tsx
 delete mode 100644 src/components/ui/skeleton.tsx
 delete mode 100644 src/components/ui/slider.tsx
 delete mode 100644 src/components/ui/switch.tsx
 delete mode 100644 src/components/ui/table.tsx
 delete mode 100644 src/components/ui/tabs.tsx
 delete mode 100644 src/components/ui/textarea.tsx
 delete mode 100644 src/components/ui/toggle-group.tsx
 delete mode 100644 src/components/ui/toggle.tsx
 delete mode 100644 src/components/ui/tooltip.tsx
 delete mode 100644 src/hooks/use-mobile.tsx

diff --git a/bun.lock b/bun.lock
index 56a4290..8df30d6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,34 +5,7 @@
     "": {
       "name": "tanstack_start_ts",
       "dependencies": {
-        "@hookform/resolvers": "^5.2.2",
         "@lovable.dev/cloud-auth-js": "^1.1.2",
-        "@radix-ui/react-accordion": "^1.2.12",
-        "@radix-ui/react-alert-dialog": "^1.1.15",
-        "@radix-ui/react-aspect-ratio": "^1.1.8",
-        "@radix-ui/react-avatar": "^1.1.11",
-        "@radix-ui/react-checkbox": "^1.3.3",
-        "@radix-ui/react-collapsible": "^1.1.12",
-        "@radix-ui/react-context-menu": "^2.2.16",
-        "@radix-ui/react-dialog": "^1.1.15",
-        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-hover-card": "^1.1.15",
-        "@radix-ui/react-label": "^2.1.8",
-        "@radix-ui/react-menubar": "^1.1.16",
-        "@radix-ui/react-navigation-menu": "^1.2.14",
-        "@radix-ui/react-popover": "^1.1.15",
-        "@radix-ui/react-progress": "^1.1.8",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-scroll-area": "^1.2.10",
-        "@radix-ui/react-select": "^2.2.6",
-        "@radix-ui/react-separator": "^1.1.8",
-        "@radix-ui/react-slider": "^1.3.6",
-        "@radix-ui/react-slot": "^1.2.4",
-        "@radix-ui/react-switch": "^1.2.6",
-        "@radix-ui/react-tabs": "^1.1.13",
-        "@radix-ui/react-toggle": "^1.1.10",
-        "@radix-ui/react-toggle-group": "^1.1.11",
-        "@radix-ui/react-tooltip": "^1.2.8",
         "@supabase/supabase-js": "^2.111.0",
         "@tailwindcss/vite": "^4.2.1",
         "@tanstack/react-query": "^5.101.1",
@@ -40,23 +13,14 @@
         "@tanstack/react-start": "^1.168.32",
         "@tanstack/router-plugin": "^1.168.23",
         "canvas-confetti": "^1.9.4",
-        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "cmdk": "^1.1.1",
-        "date-fns": "^4.1.0",
-        "embla-carousel-react": "^8.6.0",
-        "input-otp": "^1.4.2",
         "lucide-react": "^0.575.0",
+        "motion": "^13.2.0",
         "react": "^19.2.0",
-        "react-day-picker": "^9.14.0",
         "react-dom": "^19.2.0",
-        "react-hook-form": "^7.71.2",
-        "react-resizable-panels": "^4.6.5",
-        "recharts": "^2.15.4",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.1",
-        "tw-animate-css": "^1.3.4",
         "vaul": "^1.1.2",
         "vite-tsconfig-paths": "^6.0.2",
         "zod": "^3.24.2",
@@ -116,16 +80,12 @@
 
     "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q=="],
 
-    "@babel/runtime": ["@babel/runtime@7.29.7", "", {}, "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw=="],
-
     "@babel/template": ["@babel/template@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg=="],
 
     "@babel/traverse": ["@babel/traverse@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/types": "^7.29.7", "debug": "^4.3.1" } }, "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw=="],
 
     "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
 
-    "@date-fns/tz": ["@date-fns/tz@1.5.0", "", {}, "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg=="],
-
     "@emnapi/core": ["@emnapi/core@1.11.2", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.11.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA=="],
@@ -150,16 +110,6 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
-    "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
-
-    "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
-
-    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.9", "", { "dependencies": { "@floating-ui/dom": "^1.8.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg=="],
-
-    "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="],
-
-    "@hookform/resolvers": ["@hookform/resolvers@5.5.7", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "@sinclair/typebox": ">=0.25.24", "@standard-schema/spec": "^1.0.0", "@typeschema/main": ">=0.13.7", "@vinejs/vine": "^2.0.0 || ^3.0.0", "ajv": "^8.12.0", "ajv-errors": "^3.0.0", "ajv-formats": "^2.1.1", "arktype": "^2.0.0", "ata-validator": "^0.7.0", "class-transformer": ">=0.4.0", "class-validator": ">=0.12.0", "computed-types": "^1.0.0", "effect": "^3.10.3", "fluentvalidation-ts": "^3.0.0", "fp-ts": "^2.7.0", "io-ts": "^2.0.0", "joi": "^17.0.0", "nope-validator": ">=0.12.0", "react-hook-form": "^7.55.0", "superstruct": ">=0.12.0", "typanion": "^3.3.2", "valibot": ">=0.31.0 || ^1.0.0-beta.4 || ^1.0.0-rc", "vest": ">=3.0.0", "yup": "^1.0.0", "zod": "^3.25.0 || ^4.0.0" }, "optionalPeers": ["@sinclair/typebox", "@standard-schema/spec", "@typeschema/main", "@vinejs/vine", "ajv", "ajv-errors", "ajv-formats", "arktype", "ata-validator", "class-transformer", "class-validator", "computed-types", "effect", "fluentvalidation-ts", "fp-ts", "io-ts", "joi", "nope-validator", "superstruct", "typanion", "valibot", "vest", "yup", "zod"] }, "sha512-CyPCYV8/KlXfEXLWj8HHHhVsR/IZ6Ckm3b/a4fWtO/lRnRK1huqncb8LlAWrmpPRsse5glF5aVuDRMHEr3UGag=="],
-
     "@humanfs/core": ["@humanfs/core@0.19.2", "", { "dependencies": { "@humanfs/types": "^0.15.0" } }, "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.8", "", { "dependencies": { "@humanfs/core": "^0.19.2", "@humanfs/types": "^0.15.0", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ=="],
@@ -242,112 +192,38 @@
 
     "@pkgr/core": ["@pkgr/core@0.3.6", "", {}, "sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA=="],
 
-    "@radix-ui/number": ["@radix-ui/number@1.1.3", "", {}, "sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA=="],
-
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.7", "", {}, "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q=="],
 
-    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.20", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collapsible": "1.1.20", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg=="],
-
-    "@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.23", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dialog": "1.1.23", "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA=="],
-
-    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA=="],
-
-    "@radix-ui/react-aspect-ratio": ["@radix-ui/react-aspect-ratio@1.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-fy+dyVR+90nelK8rqIznFlxzx7uPcGbhxH8Nfr2bHb4UfSe+e3hklOC0luK0hDwVwnRX7xTRySpsrQVeW+/oNQ=="],
-
-    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-is-hydrated": "0.1.3", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA=="],
-
-    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-size": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ=="],
-
-    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.20", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q=="],
-
-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.15", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA=="],
-
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.5", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.2.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA=="],
 
-    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.3.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-menu": "2.1.24", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew=="],
-
     "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.23", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-focus-guards": "1.1.6", "@radix-ui/react-focus-scope": "1.1.16", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.7.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA=="],
 
-    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg=="],
-
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.19", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-effect-event": "0.0.5" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w=="],
 
-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.24", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-menu": "2.1.24", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g=="],
-
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.6", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.16", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ=="],
 
-    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.23", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ=="],
-
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA=="],
 
-    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g=="],
-
-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.24", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-focus-guards": "1.1.6", "@radix-ui/react-focus-scope": "1.1.16", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-callback-ref": "1.1.4", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.7.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA=="],
-
-    "@radix-ui/react-menubar": ["@radix-ui/react-menubar@1.1.24", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-menu": "2.1.24", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA=="],
-
-    "@radix-ui/react-navigation-menu": ["@radix-ui/react-navigation-menu@1.2.22", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-use-previous": "1.1.4", "@radix-ui/react-visually-hidden": "1.2.11" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg=="],
-
-    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.23", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-focus-guards": "1.1.6", "@radix-ui/react-focus-scope": "1.1.16", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-controllable-state": "1.2.6", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.7.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ=="],
-
-    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.3.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-use-rect": "1.1.4", "@radix-ui/react-use-size": "1.1.4", "@radix-ui/rect": "1.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg=="],
-
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.17", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ=="],
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.10", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw=="],
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.10", "", { "dependencies": { "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg=="],
 
-    "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.16", "", { "dependencies": { "@radix-ui/react-context": "1.2.2", "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg=="],
-
-    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.4.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-size": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ=="],
-
-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.19", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-is-hydrated": "0.1.3", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ=="],
-
-    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.18", "", { "dependencies": { "@radix-ui/number": "1.1.3", "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA=="],
-
-    "@radix-ui/react-select": ["@radix-ui/react-select@2.3.7", "", { "dependencies": { "@radix-ui/number": "1.1.3", "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-focus-guards": "1.1.6", "@radix-ui/react-focus-scope": "1.1.16", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-use-previous": "1.1.4", "@radix-ui/react-visually-hidden": "1.2.11", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.7.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg=="],
-
-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw=="],
-
-    "@radix-ui/react-slider": ["@radix-ui/react-slider@1.4.7", "", { "dependencies": { "@radix-ui/number": "1.1.3", "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-use-previous": "1.1.4", "@radix-ui/react-use-size": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg=="],
-
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="],
 
-    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.3.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-size": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw=="],
-
-    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.21", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog=="],
-
-    "@radix-ui/react-toggle": ["@radix-ui/react-toggle@1.1.18", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug=="],
-
-    "@radix-ui/react-toggle-group": ["@radix-ui/react-toggle-group@1.1.19", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-toggle": "1.1.18", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA=="],
-
-    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-visually-hidden": "1.2.11" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg=="],
-
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-use-effect-event": "0.0.5", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ=="],
 
     "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.5", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg=="],
 
-    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw=="],
-
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
 
-    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg=="],
-
-    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.4", "", { "dependencies": { "@radix-ui/rect": "1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ=="],
-
-    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw=="],
-
-    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.11", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ=="],
-
-    "@radix-ui/rect": ["@radix-ui/rect@1.1.3", "", {}, "sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw=="],
-
     "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.2.0", "", { "os": "android", "cpu": "arm64" }, "sha512-9yB1l95IrJuNGDFdOYe79vdApdz6WWBCObE+rQ2LUliYUlcyFwSYIb2xb5/Ifw7dAtMy2ZqNyd8QTSOc7duAKw=="],
 
     "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.2.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-pexNaW9ACLUOaBITOpU6qVu4VrsOFIjTv6bzgu0YUATo4eUJx0V605PxwZfndpPOn0ilqGqvGQ0M8UW0IE24jg=="],
@@ -380,8 +256,6 @@
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.3", "", {}, "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q=="],
 
-    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
-
     "@supabase/auth-js": ["@supabase/auth-js@2.111.0", "https://europe-west1-npm.pkg.dev/lovable-core-prod/sandbox-npm-cache/@supabase/auth-js/-/auth-js-2.111.0.tgz", { "dependencies": { "tslib": "2.8.1" } }, "sha512-hbRLgyQZEX0SDyF4LYXpv94qOIQyFATfpT5SIs2V0SisHnisVRkYgiPQWzv80l4S2mO3qof78rmoH9j5zoFsYQ=="],
 
     "@supabase/functions-js": ["@supabase/functions-js@2.111.0", "https://europe-west1-npm.pkg.dev/lovable-core-prod/sandbox-npm-cache/@supabase/functions-js/-/functions-js-2.111.0.tgz", { "dependencies": { "tslib": "2.8.1" } }, "sha512-RW/OCsd6MO592zU8ifzP8/f8XzxxIdpb+Up5XaOtE26Fw+3zTp475WX7+GuuktiD1WF8pFUDe6khUPbMp77RCw=="],
@@ -396,8 +270,6 @@
 
     "@supabase/supabase-js": ["@supabase/supabase-js@2.111.0", "https://europe-west1-npm.pkg.dev/lovable-core-prod/sandbox-npm-cache/@supabase/supabase-js/-/supabase-js-2.111.0.tgz", { "dependencies": { "@supabase/auth-js": "2.111.0", "@supabase/functions-js": "2.111.0", "@supabase/postgrest-js": "2.111.0", "@supabase/realtime-js": "2.111.0", "@supabase/storage-js": "2.111.0" } }, "sha512-9q0/AULthQnWeiDh1vGyjoJZbSY04bu6qHcWit70pqEYn5Kv/dkCPY62Ja1123jEnJbB9Vd2pjY7Kvk/lK3peA=="],
 
-    "@tabby_ai/hijri-converter": ["@tabby_ai/hijri-converter@1.0.5", "", {}, "sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ=="],
-
     "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
@@ -490,24 +362,6 @@
 
     "@types/canvas-confetti": ["@types/canvas-confetti@1.9.0", "https://europe-west1-npm.pkg.dev/lovable-core-prod/sandbox-npm-cache/@types/canvas-confetti/-/canvas-confetti-1.9.0.tgz", {}, "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg=="],
 
-    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
-
-    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
-
-    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
-
-    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
-
-    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
-
-    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
-
-    "@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
-
-    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
-
-    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
-
     "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@@ -574,12 +428,8 @@
 
     "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
 
-    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
-
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],
-
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
@@ -598,38 +448,10 @@
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
-    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
-
-    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
-
-    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
-
-    "d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
-
-    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
-
-    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
-
-    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
-
-    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
-
-    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
-
-    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
-
-    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
-
-    "date-fns": ["date-fns@4.4.0", "", {}, "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w=="],
-
-    "date-fns-jalali": ["date-fns-jalali@4.1.0-0", "", {}, "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="],
-
     "db0": ["db0@0.3.4", "", { "peerDependencies": { "@electric-sql/pglite": "*", "@libsql/client": "*", "better-sqlite3": "*", "drizzle-orm": "*", "mysql2": "*", "sqlite3": "*" }, "optionalPeers": ["@electric-sql/pglite", "@libsql/client", "better-sqlite3", "drizzle-orm", "mysql2", "sqlite3"] }, "sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
-
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -638,16 +460,8 @@
 
     "diff": ["diff@8.0.4", "", {}, "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw=="],
 
-    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
-
     "electron-to-chromium": ["electron-to-chromium@1.5.398", "", {}, "sha512-AsvhAxopJGh6museTDMIjn6JpDYOfgu4RLlygomt87MUwBUqTfd/1EiPtx10/LZE8xpTvkP2E9Gafq7lkLtodQ=="],
 
-    "embla-carousel": ["embla-carousel@8.6.0", "", {}, "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="],
-
-    "embla-carousel-react": ["embla-carousel-react@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA=="],
-
-    "embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.6.0", "", { "peerDependencies": { "embla-carousel": "8.6.0" } }, "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A=="],
-
     "enhanced-resolve": ["enhanced-resolve@5.24.4", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-GVoi+ICHocoOIU7qVVM48wOJziRsqrsyqlI0Ce0LdowRn6v3bcH2zUa9kp85ncx0nwIb9/HOCOLS3fdThDG/XQ=="],
 
     "env-runner": ["env-runner@0.1.16", "", { "dependencies": { "crossws": "^0.4.8", "exsolve": "^1.1.0", "httpxy": "^0.5.4", "srvx": "^0.11.19" }, "peerDependencies": { "@netlify/runtime": "^4.1.23", "@vercel/queue": ">=0.2.0", "miniflare": "^4.20260515.0", "wrangler": "^4.0.0" }, "optionalPeers": ["@netlify/runtime", "@vercel/queue", "miniflare", "wrangler"], "bin": { "env-runner": "dist/cli.mjs" } }, "sha512-2LRJM4P2KLX6J83QZZrMqvgCDt/D5ea7wPcI3yYiy5cG/9rX5QwdwZFx0D7ktWnjdRyZxYjttGGorb5nFqb1CA=="],
@@ -680,16 +494,12 @@
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
 
-    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
-
     "exsolve": ["exsolve@1.1.1", "", {}, "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g=="],
 
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-diff": ["fast-diff@1.3.0", "", {}, "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="],
 
-    "fast-equals": ["fast-equals@5.4.1", "", {}, "sha512-DjlFSM5Pk9cGcL0q5QXl66eGzx0N6szNgaswwc5ZphlBohjTVJSnGgI+rJVOgOi65qUoQnDZN4nDqi33udtydQ=="],
-
     "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
 
     "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
@@ -706,6 +516,8 @@
 
     "flatted": ["flatted@3.4.3", "", {}, "sha512-/zipXxyO6rGvuNGDiULY9MvEGSkb2gaG4GGH4ygMi0ZZzyMHdUZBmntJmx5x1G2VuPytCwGN4xsJP6cw+sK+vQ=="],
 
+    "framer-motion": ["framer-motion@13.2.0", "", { "dependencies": { "motion-dom": "^13.2.0", "motion-utils": "^13.0.0", "tslib": "^2.4.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-9E33ebgMaO33w1nN/jEdW8z3/GO483fMi4rqbMG9rt83XgW9QLKRe4NcmJ8s+fQ3O34++UHrIQwlIWGIWTITjA=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
@@ -738,10 +550,6 @@
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
 
-    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
-
-    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
-
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -798,12 +606,8 @@
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
-    "lodash": ["lodash@4.18.1", "", {}, "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="],
-
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
-    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
-
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.575.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg=="],
@@ -812,6 +616,12 @@
 
     "minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
 
+    "motion": ["motion@13.2.0", "", { "dependencies": { "framer-motion": "^13.2.0", "tslib": "^2.4.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-4Hrb5vD6HhjFstLUiCmWvtpsw+WTpP4R+QXfSDYZBz7+uxE/LrRg3aV0ReJxHrTRffHhbIE6svEqnotngXvesQ=="],
+
+    "motion-dom": ["motion-dom@13.2.0", "", { "dependencies": { "motion-utils": "^13.0.0" } }, "sha512-N6gdSoWRDk0Rh/fVtlqUtLs+fEN3ELFZI3cn3IQE9Mnf3E+Mh8wjO6MstzCOPFh4Yf0L1as5m2eUyYWj8ylVSQ=="],
+
+    "motion-utils": ["motion-utils@13.0.0", "", {}, "sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.16", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q=="],
@@ -824,8 +634,6 @@
 
     "node-releases": ["node-releases@2.0.51", "", {}, "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ=="],
 
-    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
-
     "ocache": ["ocache@0.1.5", "", { "dependencies": { "ohash": "^2.0.11" } }, "sha512-kNNnkkVQup/QDvmTz8Q84wc2ntiyoVHDxa6eHWKt5qdGAmFRBIxy83rxgCYEjW0x06UJ9E3P6VgM2yY4rOBH4w=="],
 
     "ofetch": ["ofetch@2.0.0-alpha.3", "", {}, "sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA=="],
@@ -860,40 +668,22 @@
 
     "prettier-linter-helpers": ["prettier-linter-helpers@1.0.1", "", { "dependencies": { "fast-diff": "^1.1.2" } }, "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg=="],
 
-    "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
     "react": ["react@19.2.8", "", {}, "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw=="],
 
-    "react-day-picker": ["react-day-picker@9.14.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "@tabby_ai/hijri-converter": "1.0.5", "date-fns": "^4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA=="],
-
     "react-dom": ["react-dom@19.2.8", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.8" } }, "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ=="],
 
-    "react-hook-form": ["react-hook-form@7.83.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-AXt8cMCmx5a7u4uvpb2uRFVrWQhllI4pV+LSykxIac/hjt44TnQkmX9BKuQi2i+LDC62esmiLpilkav+kjVf/A=="],
-
-    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
-
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
-    "react-resizable-panels": ["react-resizable-panels@4.12.2", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-NwY5LCo4WrxVvDh0xoMML6EMLPONP/8ckKcIdpnojxexoatZdjLiRqLJQjQK5CPkd4SYiB/2M5BVrjZBQtOO7Q=="],
-
-    "react-smooth": ["react-smooth@4.0.4", "", { "dependencies": { "fast-equals": "^5.0.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q=="],
-
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
-    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
-
     "readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
 
-    "recharts": ["recharts@2.15.4", "", { "dependencies": { "clsx": "^2.0.0", "eventemitter3": "^4.0.1", "lodash": "^4.17.21", "react-is": "^18.3.1", "react-smooth": "^4.0.4", "recharts-scale": "^0.4.4", "tiny-invariant": "^1.3.1", "victory-vendor": "^36.6.8" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw=="],
-
-    "recharts-scale": ["recharts-scale@0.4.5", "", { "dependencies": { "decimal.js-light": "^2.4.1" } }, "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w=="],
-
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
     "rolldown": ["rolldown@1.2.0", "", { "dependencies": { "@oxc-project/types": "=0.140.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.2.0", "@rolldown/binding-darwin-arm64": "1.2.0", "@rolldown/binding-darwin-x64": "1.2.0", "@rolldown/binding-freebsd-x64": "1.2.0", "@rolldown/binding-linux-arm-gnueabihf": "1.2.0", "@rolldown/binding-linux-arm64-gnu": "1.2.0", "@rolldown/binding-linux-arm64-musl": "1.2.0", "@rolldown/binding-linux-ppc64-gnu": "1.2.0", "@rolldown/binding-linux-s390x-gnu": "1.2.0", "@rolldown/binding-linux-x64-gnu": "1.2.0", "@rolldown/binding-linux-x64-musl": "1.2.0", "@rolldown/binding-openharmony-arm64": "1.2.0", "@rolldown/binding-wasm32-wasi": "1.2.0", "@rolldown/binding-win32-arm64-msvc": "1.2.0", "@rolldown/binding-win32-x64-msvc": "1.2.0" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-u7tgm5l4Yw1iTqUL4EcYOAt7fFvCgQMLeidrnD4GALlC6aOznCjezYajgxeyKw27u0Q5N7fwgCzjVyPIWzwuBA=="],
@@ -934,8 +724,6 @@
 
     "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
 
-    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
-
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
     "ts-api-utils": ["ts-api-utils@2.5.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA=="],
@@ -944,8 +732,6 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
-
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
@@ -974,8 +760,6 @@
 
     "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
 
-    "victory-vendor": ["victory-vendor@36.9.2", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ=="],
-
     "vite": ["vite@8.1.5", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.5", "postcss": "^8.5.17", "rolldown": "~1.1.5", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.3.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw=="],
 
     "vite-tsconfig-paths": ["vite-tsconfig-paths@6.1.1", "", { "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", "tsconfck": "^3.0.3" }, "peerDependencies": { "vite": "*" } }, "sha512-2cihq7zliibCCZ8P9cKJrQBkfgdvcFkOOc3Y02o3GWUDLgqjWsZudaoiuOwO/gzTzy17cS5F7ZPo4bsnS4DGkg=="],
@@ -1042,8 +826,6 @@
 
     "oxc-parser/@oxc-project/types": ["@oxc-project/types@0.120.0", "", {}, "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="],
 
-    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
     "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
 
     "vite/rolldown": ["rolldown@1.1.5", "", { "dependencies": { "@oxc-project/types": "=0.139.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.1.5", "@rolldown/binding-darwin-arm64": "1.1.5", "@rolldown/binding-darwin-x64": "1.1.5", "@rolldown/binding-freebsd-x64": "1.1.5", "@rolldown/binding-linux-arm-gnueabihf": "1.1.5", "@rolldown/binding-linux-arm64-gnu": "1.1.5", "@rolldown/binding-linux-arm64-musl": "1.1.5", "@rolldown/binding-linux-ppc64-gnu": "1.1.5", "@rolldown/binding-linux-s390x-gnu": "1.1.5", "@rolldown/binding-linux-x64-gnu": "1.1.5", "@rolldown/binding-linux-x64-musl": "1.1.5", "@rolldown/binding-openharmony-arm64": "1.1.5", "@rolldown/binding-wasm32-wasi": "1.1.5", "@rolldown/binding-win32-arm64-msvc": "1.1.5", "@rolldown/binding-win32-x64-msvc": "1.1.5" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA=="],
diff --git a/package.json b/package.json
index 3853f77..d166f91 100644
--- a/package.json
+++ b/package.json
@@ -16,34 +16,7 @@
     "test:all": "bun test/run.ts all"
   },
   "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
     "@lovable.dev/cloud-auth-js": "^1.1.2",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@supabase/supabase-js": "^2.111.0",
     "@tailwindcss/vite": "^4.2.1",
     "@tanstack/react-query": "^5.101.1",
@@ -51,23 +24,14 @@
     "@tanstack/react-start": "^1.168.32",
     "@tanstack/router-plugin": "^1.168.23",
     "canvas-confetti": "^1.9.4",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.4.2",
     "lucide-react": "^0.575.0",
+    "motion": "^13.2.0",
     "react": "^19.2.0",
-    "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.0",
-    "react-hook-form": "^7.71.2",
-    "react-resizable-panels": "^4.6.5",
-    "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
-    "tw-animate-css": "^1.3.4",
     "vaul": "^1.1.2",
     "vite-tsconfig-paths": "^6.0.2",
     "zod": "^3.24.2"
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
deleted file mode 100644
index 16ee900..0000000
--- a/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium cursor-pointer transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
deleted file mode 100644
index 072a665..0000000
--- a/src/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
deleted file mode 100644
index cd0a062..0000000
--- a/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5
-      ref={ref}
-      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-      {...props}
-    />
-  ),
-);
-AlertTitle.displayName = "AlertTitle";
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-));
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
deleted file mode 100644
index c9e6f4b..0000000
--- a/src/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
deleted file mode 100644
index 7904926..0000000
--- a/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils";
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
deleted file mode 100644
index 3aabd17..0000000
--- a/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
deleted file mode 100644
index 94eb629..0000000
--- a/src/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
-  ({ className, ...props }, ref) => (
-    <ol
-      ref={ref}
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
-  ),
-);
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
-  ({ className, ...props }, ref) => (
-    <span
-      ref={ref}
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("font-normal text-foreground", className)}
-      {...props}
-    />
-  ),
-);
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index bc3bc9f..0000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
deleted file mode 100644
index 94d60d8..0000000
--- a/src/components/ui/calendar.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}) {
-  const defaultClassNames = getDefaultClassNames();
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav,
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous,
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next,
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns,
-        ),
-        dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root,
-        ),
-        dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label,
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday,
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number,
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day,
-        ),
-        range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today,
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside,
-        ),
-        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
-          }
-
-          if (orientation === "right") {
-            return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
-          }
-
-          return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  );
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
-
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
-    if (modifiers["focused"]) ref.current?.focus();
-  }, [modifiers]);
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers["selected"] &&
-        !modifiers["range_start"] &&
-        !modifiers["range_end"] &&
-        !modifiers["range_middle"]
-      }
-      data-range-start={modifiers["range_start"]}
-      data-range-end={modifiers["range_end"]}
-      data-range-middle={modifiers["range_middle"]}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Calendar, CalendarDayButton };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
deleted file mode 100644
index d886b02..0000000
--- a/src/components/ui/card.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
-      {...props}
-    />
-  ),
-);
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  ),
-);
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("font-semibold leading-none tracking-tight", className)}
-      {...props}
-    />
-  ),
-);
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-  ),
-);
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-  ),
-);
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-  ),
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
deleted file mode 100644
index 5dd7455..0000000
--- a/src/components/ui/carousel.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import * as React from "react";
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) {
-      return;
-    }
-
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext],
-  );
-
-  React.useEffect(() => {
-    if (!api || !setApi) {
-      return;
-    }
-
-    setApi(api);
-  }, [api, setApi]);
-
-  React.useEffect(() => {
-    if (!api) {
-      return;
-    }
-
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        ref={ref}
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-});
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel();
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className,
-          )}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel();
-
-    return (
-      <div
-        ref={ref}
-        role="group"
-        aria-roledescription="slide"
-        className={cn(
-          "min-w-0 shrink-0 grow-0 basis-full",
-          orientation === "horizontal" ? "pl-4" : "pt-4",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute  h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeft className="h-4 w-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    );
-  },
-);
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRight className="h-4 w-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    );
-  },
-);
-CarouselNext.displayName = "CarouselNext";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
deleted file mode 100644
index f27e7ca..0000000
--- a/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "@/lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-});
-ChartContainer.displayName = "Chart";
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string;
-      labelKey?: string;
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref,
-  ) => {
-    const { config } = useChart();
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null;
-      }
-
-      const [item] = payload;
-      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
-        );
-      }
-
-      if (!value) {
-        return null;
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
-
-    if (!active || !payload?.length) {
-      return null;
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className,
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload
-            .filter((item) => item.type !== "none")
-            .map((item, index) => {
-              const key = `${nameKey || item.name || item.dataKey || "value"}`;
-              const itemConfig = getPayloadConfigFromPayload(config, item, key);
-              const indicatorColor = color || item.payload.fill || item.color;
-
-              return (
-                <div
-                  key={item.dataKey}
-                  className={cn(
-                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                    indicator === "dot" && "items-center",
-                  )}
-                >
-                  {formatter && item?.value !== undefined && item.name ? (
-                    formatter(item.value, item.name, item, index, item.payload)
-                  ) : (
-                    <>
-                      {itemConfig?.icon ? (
-                        <itemConfig.icon />
-                      ) : (
-                        !hideIndicator && (
-                          <div
-                            className={cn(
-                              "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                              {
-                                "h-2.5 w-2.5": indicator === "dot",
-                                "w-1": indicator === "line",
-                                "w-0 border-[1.5px] border-dashed bg-transparent":
-                                  indicator === "dashed",
-                                "my-0.5": nestLabel && indicator === "dashed",
-                              },
-                            )}
-                            style={
-                              {
-                                "--color-bg": indicatorColor,
-                                "--color-border": indicatorColor,
-                              } as React.CSSProperties
-                            }
-                          />
-                        )
-                      )}
-                      <div
-                        className={cn(
-                          "flex flex-1 justify-between leading-none",
-                          nestLabel ? "items-end" : "items-center",
-                        )}
-                      >
-                        <div className="grid gap-1.5">
-                          {nestLabel ? tooltipLabel : null}
-                          <span className="text-muted-foreground">
-                            {itemConfig?.label || item.name}
-                          </span>
-                        </div>
-                        {item.value && (
-                          <span className="font-mono font-medium tabular-nums text-foreground">
-                            {item.value.toLocaleString()}
-                          </span>
-                        )}
-                      </div>
-                    </>
-                  )}
-                </div>
-              );
-            })}
-        </div>
-      </div>
-    );
-  },
-);
-ChartTooltipContent.displayName = "ChartTooltip";
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
->(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-    </div>
-  );
-});
-ChartLegendContent.displayName = "ChartLegend";
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
deleted file mode 100644
index f01d47c..0000000
--- a/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
deleted file mode 100644
index cb003d1..0000000
--- a/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-const Collapsible = CollapsiblePrimitive.Root;
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
deleted file mode 100644
index dc859d7..0000000
--- a/src/components/ui/command.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
deleted file mode 100644
index e4e71c1..0000000
--- a/src/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ContextMenu = ContextMenuPrimitive.Root;
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
-    {...props}
-  />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
deleted file mode 100644
index 8ed559e..0000000
--- a/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index 211a4e5..0000000
--- a/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
deleted file mode 100644
index 4d15828..0000000
--- a/src/components/ui/form.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form";
-
-import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  if (!itemContext) {
-    throw new Error("useFormField should be used within <FormItem>");
-  }
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue | null>(null);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
deleted file mode 100644
index 36f3b79..0000000
--- a/src/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-
-import { cn } from "@/lib/utils";
-
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
deleted file mode 100644
index 7eabf26..0000000
--- a/src/components/ui/input-otp.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName,
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-));
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {
-    char: null,
-    hasFakeCaret: false,
-    isActive: false,
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Minus />
-  </div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
deleted file mode 100644
index 7db5241..0000000
--- a/src/components/ui/input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
deleted file mode 100644
index 392197c..0000000
--- a/src/components/ui/label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
deleted file mode 100644
index b660823..0000000
--- a/src/components/ui/menubar.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import * as React from "react";
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />;
-}
-
-function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />;
-}
-
-function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />;
-}
-
-function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />;
-}
-
-function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
-}
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  <MenubarPrimitive.Portal>
-    <MenubarPrimitive.Content
-      ref={ref}
-      align={align}
-      alignOffset={alignOffset}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </MenubarPrimitive.Portal>
-));
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-
-const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-MenubarShortcut.displayname = "MenubarShortcut";
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-};
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
deleted file mode 100644
index 94b2ecc..0000000
--- a/src/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as React from "react";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
-);
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className,
-    )}
-    {...props}
-  />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className,
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-};
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
deleted file mode 100644
index f8cd41f..0000000
--- a/src/components/ui/pagination.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from "react";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-);
-Pagination.displayName = "Pagination";
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
-  ),
-);
-PaginationContent.displayName = "PaginationContent";
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
-);
-PaginationItem.displayName = "PaginationItem";
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
-
-const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = "PaginationLink";
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = "PaginationNext";
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
deleted file mode 100644
index dc78a20..0000000
--- a/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
deleted file mode 100644
index 1741cd2..0000000
--- a/src/components/ui/progress.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "@/lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
deleted file mode 100644
index 38a1a66..0000000
--- a/src/components/ui/radio-group.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-3.5 w-3.5 fill-primary" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
deleted file mode 100644
index 02e9460..0000000
--- a/src/components/ui/resizable.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { GripVertical } from "lucide-react";
-import { Group, Panel, Separator } from "react-resizable-panels";
-
-import { cn } from "@/lib/utils";
-
-const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof Group>) => (
-  <Group
-    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
-    {...props}
-  />
-);
-
-const ResizablePanel = Panel;
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator> & {
-  withHandle?: boolean;
-}) => (
-  <Separator
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className,
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </Separator>
-);
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
deleted file mode 100644
index 69febe5..0000000
--- a/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "@/lib/utils";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
deleted file mode 100644
index 3fdfc92..0000000
--- a/src/components/ui/select.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
deleted file mode 100644
index 5f5966c..0000000
--- a/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-
-import { cn } from "@/lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      "shrink-0 bg-border",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className,
-    )}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
deleted file mode 100644
index 0aedeb7..0000000
--- a/src/components/ui/sheet.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-);
-
-interface SheetContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
deleted file mode 100644
index 3922680..0000000
--- a/src/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,744 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
-
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-
-  return context;
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          _setOpen(openState);
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-      },
-      [setOpenProp, open],
-    );
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed";
-
-    const contextValue = React.useMemo<SidebarContextProps>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-    );
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className,
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    );
-  },
-);
-SidebarProvider.displayName = "SidebarProvider";
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-            className,
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-            </SheetHeader>
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden text-sidebar-foreground md:block"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
-          )}
-        />
-        <div
-          className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className,
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-Sidebar.displayName = "Sidebar";
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-
-const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
-  ({ className, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
-
-    return (
-      <button
-        ref={ref}
-        data-sidebar="rail"
-        aria-label="Toggle Sidebar"
-        tabIndex={-1}
-        onClick={toggleSidebar}
-        title="Toggle Sidebar"
-        className={cn(
-          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarRail.displayName = "SidebarRail";
-
-const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <main
-        ref={ref}
-        className={cn(
-          "relative flex w-full flex-1 flex-col bg-background",
-          "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarInset.displayName = "SidebarInset";
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInput.displayName = "SidebarInput";
-
-const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="header"
-        className={cn("flex flex-col gap-2 p-2", className)}
-        {...props}
-      />
-    );
-  },
-);
-SidebarHeader.displayName = "SidebarHeader";
-
-const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="footer"
-        className={cn("flex flex-col gap-2 p-2", className)}
-        {...props}
-      />
-    );
-  },
-);
-SidebarFooter.displayName = "SidebarFooter";
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  );
-});
-SidebarSeparator.displayName = "SidebarSeparator";
-
-const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="content"
-        className={cn(
-          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarContent.displayName = "SidebarContent";
-
-const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="group"
-        className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-        {...props}
-      />
-    );
-  },
-);
-SidebarGroup.displayName = "SidebarGroup";
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupAction.displayName = "SidebarGroupAction";
-
-const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  ),
-);
-SidebarGroupContent.displayName = "SidebarGroupContent";
-
-const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul
-      ref={ref}
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  ),
-);
-SidebarMenu.displayName = "SidebarMenu";
-
-const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  ({ className, ...props }, ref) => (
-    <li
-      ref={ref}
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  ),
-);
-SidebarMenuItem.displayName = "SidebarMenuItem";
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring cursor-pointer transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-    const { isMobile, state } = useSidebar();
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    );
-
-    if (!tooltip) {
-      return button;
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    );
-  },
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-
-const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-sidebar="menu-badge"
-      className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-
-const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul
-      ref={ref}
-      data-sidebar="menu-sub"
-      className={cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-SidebarMenuSub.displayName = "SidebarMenuSub";
-
-const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  ({ ...props }, ref) => <li ref={ref} {...props} />,
-);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
-    isActive?: boolean;
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-};
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
deleted file mode 100644
index 6d9a616..0000000
--- a/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
-}
-
-export { Skeleton };
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
deleted file mode 100644
index e56622a..0000000
--- a/src/components/ui/slider.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-
-import { cn } from "@/lib/utils";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
deleted file mode 100644
index 6338184..0000000
--- a/src/components/ui/switch.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-
-import { cn } from "@/lib/utils";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
deleted file mode 100644
index 49d2d5c..0000000
--- a/src/components/ui/table.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  ),
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-));
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-));
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-    {...props}
-  />
-));
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
-    )}
-    {...props}
-  />
-));
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-));
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
deleted file mode 100644
index 6047b50..0000000
--- a/src/components/ui/tabs.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "@/lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
deleted file mode 100644
index 29330b6..0000000
--- a/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
deleted file mode 100644
index d2c9f8e..0000000
--- a/src/components/ui/toggle-group.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle";
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: "default",
-  variant: "default",
-});
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
deleted file mode 100644
index 9d146b6..0000000
--- a/src/components/ui/toggle.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium cursor-pointer transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
deleted file mode 100644
index 07e55fa..0000000
--- a/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
deleted file mode 100644
index 502fd32..0000000
--- a/src/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

From e7863ab950360d40a1bdd0104827c60ca68f75fb Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:42:01 +0200
Subject: [PATCH 05/37] Passa le animazioni a molle interrompibili
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il movimento era fatto con `@keyframes` e transizioni a durata fissa: nessuna
di quelle animazioni può essere afferrata a metà. Se l'utente scorre o tocca
mentre una è in corso, quella va avanti per conto suo e per ripartire deve
prima finire.

`lib/molla.ts` raccoglie i parametri, che sono i due di Apple in «Designing
Fluid Interfaces» — rimbalzo e durata, non massa/rigidità/smorzamento.
`molla.ui` (nessun sorpasso) è il default; `molla.slancio` si usa solo dopo un
gesto che portava già inerzia. `proietta()` calcola dove finirebbe un elemento
lanciato, con la stessa decelerazione esponenziale dello scroll iOS.

Nei tre componenti:
- `Reveal` compare quando entra davvero nel viewport. Prima partiva al mount,
  quindi gli elementi sotto la piega consumavano l'animazione a vuoto e
  l'utente li trovava già fermi. Il ritardo massimo scende da 480 a 200 ms.
- `Barra` anima `scaleX` invece di `width`: la larghezza rifà il layout a ogni
  frame, la trasformazione la gestisce il compositore.
- `Numero` usa una molla al posto dell'interpolazione a durata fissa: se il
  dato cambia a metà conteggio il numero cambia rotta da dov'è invece di
  ripartire da capo. Sparisce la prop `durata`, che nessuno passava.

`lib/motion.ts` resta solo per il rilevamento del movimento ridotto (che qui
guarda anche `deviceMemory`, cosa che `useReducedMotion` non fa) e per i
coriandoli.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/motion/Barra.tsx  | 31 +++++++++++----
 src/components/motion/Numero.tsx | 44 +++++++++++++--------
 src/components/motion/Reveal.tsx | 33 ++++++++++++----
 src/lib/molla.ts                 | 31 +++++++++++++++
 src/lib/motion.ts                | 66 ++++----------------------------
 5 files changed, 115 insertions(+), 90 deletions(-)
 create mode 100644 src/lib/molla.ts

diff --git a/src/components/motion/Barra.tsx b/src/components/motion/Barra.tsx
index 291f2fc..e4e23ef 100644
--- a/src/components/motion/Barra.tsx
+++ b/src/components/motion/Barra.tsx
@@ -1,7 +1,14 @@
+import { motion, useReducedMotion } from "motion/react";
 import { cn } from "@/lib/utils";
-import { useRiempimento } from "@/lib/motion";
+import { molla } from "@/lib/molla";
 
-/** Barra di avanzamento che si riempie in ~700 ms all'apertura. */
+/**
+ * Barra di avanzamento a molla.
+ *
+ * Anima `scaleX` e non `width`: la larghezza rifà il layout a ogni frame,
+ * la trasformazione la gestisce il compositore. La molla riparte dal valore
+ * a schermo, quindi se il dato cambia a metà riempimento non c'è scatto.
+ */
 export function Barra({
   percentuale,
   className,
@@ -13,12 +20,22 @@ export function Barra({
   trackClassName?: string;
   altezza?: string;
 }) {
-  const larghezza = useRiempimento(Math.max(0, Math.min(100, Math.round(percentuale))));
+  const ridotto = useReducedMotion();
+  const valore = Math.max(0, Math.min(100, Math.round(percentuale)));
+
   return (
-    <div className={cn("overflow-hidden rounded-full bg-secondary", altezza, trackClassName)}>
-      <div
-        className={cn("anim-barra h-full rounded-full bg-accent-grad", className)}
-        style={{ width: `${larghezza}%` }}
+    <div
+      className={cn("overflow-hidden rounded-full bg-secondary", altezza, trackClassName)}
+      role="progressbar"
+      aria-valuenow={valore}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <motion.div
+        className={cn("h-full w-full origin-left rounded-full bg-accent-grad", className)}
+        initial={{ scaleX: 0 }}
+        animate={{ scaleX: valore / 100 }}
+        transition={ridotto ? { duration: 0.2 } : molla.ui}
       />
     </div>
   );
diff --git a/src/components/motion/Numero.tsx b/src/components/motion/Numero.tsx
index b64b489..ff5f143 100644
--- a/src/components/motion/Numero.tsx
+++ b/src/components/motion/Numero.tsx
@@ -1,20 +1,32 @@
-import { useConteggio } from "@/lib/motion";
+import { useEffect } from "react";
+import { motion, useMotionValue, useSpring, useTransform, useReducedMotion } from "motion/react";
+import { molla } from "@/lib/molla";
+
+/**
+ * Contatore animato per statistiche e percentuali.
+ *
+ * Usa una molla invece di un'interpolazione a durata fissa: se il valore
+ * cambia mentre il conteggio è in corso, il numero cambia rotta dal punto in
+ * cui si trova invece di ripartire da capo.
+ */
+export function Numero({ valore, suffisso = "" }: { valore: number; suffisso?: string }) {
+  const ridotto = useReducedMotion();
+  const grezzo = useMotionValue(0);
+  const morbido = useSpring(grezzo, molla.ui);
+  const testo = useTransform(morbido, (n) => `${Math.round(n)}${suffisso}`);
+
+  useEffect(() => {
+    if (ridotto) {
+      grezzo.jump(valore);
+      morbido.jump(valore);
+      return;
+    }
+    grezzo.set(valore);
+  }, [valore, ridotto, grezzo, morbido]);
 
-/** Contatore animato per statistiche e percentuali. */
-export function Numero({
-  valore,
-  durata = 700,
-  suffisso = "",
-}: {
-  valore: number;
-  durata?: number;
-  suffisso?: string;
-}) {
-  const n = useConteggio(valore, durata);
   return (
-    <span className="tabular-nums">
-      {n}
-      {suffisso}
-    </span>
+    <motion.span className="tabular-nums" aria-label={`${valore}${suffisso}`}>
+      {testo}
+    </motion.span>
   );
 }
diff --git a/src/components/motion/Reveal.tsx b/src/components/motion/Reveal.tsx
index 34ce949..ca40e83 100644
--- a/src/components/motion/Reveal.tsx
+++ b/src/components/motion/Reveal.tsx
@@ -1,9 +1,18 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
+import { motion, useReducedMotion, type MotionStyle } from "motion/react";
 import { cn } from "@/lib/utils";
+import { molla } from "@/lib/molla";
 
 /**
- * Comparsa graduale con leggero slide dal basso (~300 ms).
- * `indice` sfalsa l'animazione tra elementi vicini.
+ * Comparsa graduale quando l'elemento entra davvero nel viewport.
+ *
+ * Prima partiva al mount: gli elementi sotto la piega consumavano
+ * l'animazione a vuoto e l'utente li trovava già fermi. Ora la molla è
+ * interrompibile e riparte dal valore corrente, quindi uno scroll a metà
+ * animazione non produce salti.
+ *
+ * `indice` sfalsa elementi vicini, con un tetto basso: oltre ~200 ms
+ * l'ultimo elemento di una lista sembra in ritardo rispetto al tocco.
  */
 export function Reveal({
   children,
@@ -15,15 +24,23 @@ export function Reveal({
   children: ReactNode;
   indice?: number;
   className?: string;
-  style?: CSSProperties;
+  style?: MotionStyle;
   as?: "div" | "section" | "li" | "article";
 }) {
+  const ridotto = useReducedMotion();
+  const Componente = motion[Tag];
+  const ritardo = Math.min(indice, 5) * 0.04;
+
   return (
-    <Tag
-      className={cn("anim-reveal", className)}
-      style={{ animationDelay: `${Math.min(indice, 8) * 60}ms`, ...style }}
+    <Componente
+      className={cn(className)}
+      {...(style ? { style } : {})}
+      initial={ridotto ? { opacity: 0 } : { opacity: 0, y: 10 }}
+      whileInView={ridotto ? { opacity: 1 } : { opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.15, margin: "0px 0px -10% 0px" }}
+      transition={ridotto ? { duration: 0.2, delay: ritardo } : { ...molla.ui, delay: ritardo }}
     >
       {children}
-    </Tag>
+    </Componente>
   );
 }
diff --git a/src/lib/molla.ts b/src/lib/molla.ts
new file mode 100644
index 0000000..4d3dab4
--- /dev/null
+++ b/src/lib/molla.ts
@@ -0,0 +1,31 @@
+/**
+ * Parametri di molla condivisi, tarati sui valori che Apple usa in
+ * "Designing Fluid Interfaces": damping (rimbalzo) e response (durata) invece
+ * di massa/rigidità/smorzamento.
+ *
+ * L'API `bounce` + `duration` di `motion` mappa esattamente su quella coppia:
+ * `bounce: 0` è criticamente smorzata (nessun sorpasso), `bounce: 0.2` è la
+ * `damping 0.8` di Apple.
+ *
+ * Regola: `ui` ovunque; `slancio` SOLO dopo un gesto che portava già inerzia
+ * (un lancio, un trascinamento rilasciato). Un menu che compare da fermo non
+ * deve rimbalzare.
+ */
+export const molla = {
+  /** Default: sposta/riposiziona. damping 1.0, response 0.4. */
+  ui: { type: "spring", bounce: 0, duration: 0.4 },
+  /** Dopo un gesto con inerzia. damping ~0.8, response 0.4. */
+  slancio: { type: "spring", bounce: 0.2, duration: 0.4 },
+  /** Fogli e drawer. damping ~0.8, response 0.3. */
+  foglio: { type: "spring", bounce: 0.2, duration: 0.3 },
+} as const;
+
+/**
+ * Proietta dove si fermerebbe un oggetto lanciato a `velocita` px/s, con la
+ * stessa decelerazione esponenziale dello scroll iOS. Serve a scegliere il
+ * punto di arrivo a partire da dove il gesto *stava andando*, non da dove il
+ * dito si è staccato.
+ */
+export function proietta(velocita: number, decelerazione = 0.998) {
+  return ((velocita / 1000) * decelerazione) / (1 - decelerazione);
+}
diff --git a/src/lib/motion.ts b/src/lib/motion.ts
index bd3b716..2561723 100644
--- a/src/lib/motion.ts
+++ b/src/lib/motion.ts
@@ -1,8 +1,12 @@
 /**
- * Sistema di micro-animazioni: solo API standard del browser (nessuna
- * dipendenza da Lovable). Funziona in qualsiasi progetto React + Vite.
+ * Quel che resta del motion "fatto a mano": il rilevamento del movimento
+ * ridotto (che qui tiene conto anche dei device deboli, cosa che
+ * `useReducedMotion` di motion non fa) e i coriandoli.
+ *
+ * Le animazioni di valore — conteggi, barre, comparse — sono passate a molle
+ * interrompibili: vedi `lib/molla.ts` e `components/motion/`.
  */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 /** True se l'utente ha chiesto meno movimento o il device è poco performante. */
 export function useMotoRidotto() {
@@ -21,62 +25,6 @@ export function useMotoRidotto() {
   return ridotto;
 }
 
-function easeOut(t: number) {
-  return 1 - Math.pow(1 - t, 3);
-}
-
-/**
- * Anima un numero da 0 (o dal valore precedente) fino a `valore`.
- * Usa requestAnimationFrame: mai bloccante, zero chiamate di rete.
- */
-export function useConteggio(valore: number, durata = 700) {
-  const ridotto = useMotoRidotto();
-  const [corrente, setCorrente] = useState(valore);
-  const daRef = useRef(0);
-
-  useEffect(() => {
-    if (ridotto) {
-      setCorrente(valore);
-      daRef.current = valore;
-      return;
-    }
-    const da = daRef.current;
-    if (da === valore) return;
-    const inizio = performance.now();
-    let raf = 0;
-    const step = (ora: number) => {
-      const t = Math.min(1, (ora - inizio) / durata);
-      setCorrente(Math.round(da + (valore - da) * easeOut(t)));
-      if (t < 1) raf = requestAnimationFrame(step);
-      else daRef.current = valore;
-    };
-    raf = requestAnimationFrame(step);
-    return () => cancelAnimationFrame(raf);
-  }, [valore, durata, ridotto]);
-
-  return corrente;
-}
-
-/**
- * Restituisce la larghezza da applicare a una barra: parte da 0 al mount e
- * raggiunge il target al frame successivo, lasciando animare la transizione CSS.
- */
-export function useRiempimento(percentuale: number) {
-  const ridotto = useMotoRidotto();
-  const [larghezza, setLarghezza] = useState(0);
-
-  useEffect(() => {
-    if (ridotto) {
-      setLarghezza(percentuale);
-      return;
-    }
-    const raf = requestAnimationFrame(() => setLarghezza(percentuale));
-    return () => cancelAnimationFrame(raf);
-  }, [percentuale, ridotto]);
-
-  return larghezza;
-}
-
 /** Coriandoli leggeri, caricati solo al momento del bisogno. */
 export async function coriandoli(ridotto = false) {
   if (ridotto || typeof window === "undefined") return;

From 1ff650ecd590746bfab569640fad94b5a620bca2 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:42:11 +0200
Subject: [PATCH 06/37] Aggiunge i test della proiezione del momento
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`proietta()` decide dove atterra uno swipe, quindi è la funzione che rompe il
gesto se sbaglia: il test copre segno, simmetria, linearità nella velocità e
il valore atteso della decelerazione esponenziale (1000 px/s -> ~499 px).
Copre anche i preset di `molla`, per evitare che un rimbalzo finisca per
sbaglio sul default o che una durata esca dalla scala utile.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 test/unit/molla.test.ts | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 test/unit/molla.test.ts

diff --git a/test/unit/molla.test.ts b/test/unit/molla.test.ts
new file mode 100644
index 0000000..68096b7
--- /dev/null
+++ b/test/unit/molla.test.ts
@@ -0,0 +1,36 @@
+/** Check della proiezione del momento: `bun test/unit/molla.test.ts`. */
+import assert from "node:assert/strict";
+import { molla, proietta } from "@/lib/molla";
+
+// --- proietta: da fermo non si va da nessuna parte ----------------------------
+assert.equal(proietta(0), 0, "velocità zero non proietta nulla");
+
+// --- proietta: il segno segue la direzione del gesto --------------------------
+assert.ok(proietta(500) > 0, "un gesto verso destra proietta a destra");
+assert.ok(proietta(-500) < 0, "un gesto verso sinistra proietta a sinistra");
+assert.equal(proietta(-500), -proietta(500), "la proiezione è simmetrica");
+
+// --- proietta: più veloce vai, più lontano arrivi (proporzionale) -------------
+assert.ok(proietta(1000) > proietta(500), "più velocità, più distanza");
+assert.equal(proietta(1000), 2 * proietta(500), "la distanza è lineare nella velocità");
+
+// --- proietta: i valori sono quelli della decelerazione esponenziale di iOS ----
+// v/1000 * d / (1 - d) con d = 0.998 → 1000 px/s proietta 499 px.
+assert.ok(
+  Math.abs(proietta(1000) - 499) < 0.5,
+  `1000 px/s deve proiettare ~499 px, non ${proietta(1000)}`,
+);
+
+// Una decelerazione più bassa frena prima: serve per gesti più "corti".
+assert.ok(proietta(1000, 0.99) < proietta(1000, 0.998), "meno decelerazione, meno corsa");
+
+// --- molla: i preset restano nel dominio utile di bounce/duration -------------
+for (const [nome, preset] of Object.entries(molla)) {
+  assert.equal(preset.type, "spring", `${nome} deve essere una molla`);
+  assert.ok(preset.bounce >= 0 && preset.bounce < 1, `${nome}: bounce fuori scala`);
+  assert.ok(preset.duration > 0 && preset.duration <= 1, `${nome}: duration fuori scala`);
+}
+assert.equal(molla.ui.bounce, 0, "il default non deve sorpassare il target");
+assert.ok(molla.slancio.bounce > 0, "il preset da gesto ha un rimbalzo");
+
+console.log("molla: ok");

From 5c49294ad15c4473f065917f93e21252785ebcf0 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:42:24 +0200
Subject: [PATCH 07/37] =?UTF-8?q?Introduce=20la=20primitiva=20Card=20e=20s?=
 =?UTF-8?q?istema=20tocco=20e=20accessibilit=C3=A0=20dei=20componenti?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte: cambiare
raggio od ombra voleva dire toccare venti file. `Card` in `ui-bits.tsx` è ora
l'unica definizione delle superfici, con la gerarchia dei raggi scritta invece
che implicita (contenitore 3xl, elemento interno 2xl, controllo full).

Tocco e tastiera:
- i chip presenza di `EventoCard` erano alti ~28 px ed è il controllo più
  toccato dell'app: ora `min-h-11`, con 8 px di spazio fra l'uno e l'altro;
- stessa cura per il link «Apri partita», la chiusura di `CelebrazioneBadge` e
  il titolo di `SezioneTendina`;
- `aria-pressed` sui controlli a stato, `aria-controls` sulle tendine (che
  avevano `aria-expanded` senza il pannello a cui si riferisce), `aria-busy`
  sui caricamenti;
- `BottomNav`: lo stato attivo era comunicato solo dal colore. Ora cambia
  anche il peso del testo, compare una barretta sopra l'icona e c'è
  `aria-current="page"`. La voce «Home» diventa «Oggi», che dice cosa
  contiene. La barra è un materiale traslucido con bordo sfumato al posto
  della riga netta.
- `Barra` espone `role="progressbar"` con i valori.

Il testo sotto i 12 px è sparito (108 occorrenze fra `text-[9px]`,
`text-[10px]` e `text-[11px]`): sotto quella soglia la leggibilità cala e su
iOS non scala con Dynamic Type. La gerarchia la fanno peso e maiuscolo.

`Avatar` aveva `alt="Foto di 12"` quando il fallback è il numero di maglia —
non descrive niente e il nome è già scritto accanto, quindi alt vuoto. Aggiunti
`width`/`height` per non far saltare il layout al caricamento.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/Avatar.tsx               | 13 +++++-
 src/components/crapp/BadgeDrawer.tsx          | 14 +++----
 src/components/crapp/BottomNav.tsx            | 26 +++++++++---
 src/components/crapp/CelebrazioneBadge.tsx    |  4 +-
 src/components/crapp/CollezioneBadge.tsx      | 32 +++++++--------
 src/components/crapp/EventoCard.tsx           | 24 ++++++-----
 src/components/crapp/Pagelle.tsx              | 23 ++++++-----
 .../crapp/ProfiloAmministrativo.tsx           |  2 +-
 src/components/crapp/RosaPresenze.tsx         | 17 ++++----
 src/components/crapp/ScoutEntry.tsx           |  2 +-
 src/components/crapp/SerieCard.tsx            | 13 +++---
 src/components/crapp/SondaggioCacche.tsx      | 13 +++---
 src/components/crapp/TurnoPalloni.tsx         |  4 +-
 src/components/crapp/VotazioneMvp.tsx         |  8 ++--
 src/components/crapp/VotoSocial.tsx           | 10 ++---
 src/components/crapp/ui-bits.tsx              | 40 ++++++++++++++-----
 16 files changed, 149 insertions(+), 96 deletions(-)

diff --git a/src/components/crapp/Avatar.tsx b/src/components/crapp/Avatar.tsx
index 6e9f81d..1ab7039 100644
--- a/src/components/crapp/Avatar.tsx
+++ b/src/components/crapp/Avatar.tsx
@@ -24,9 +24,18 @@ export function Avatar({
     return (
       <img
         src={src}
-        alt={alt ?? `Foto di ${fallback}`}
+        // `fallback` è spesso il numero di maglia: "Foto di 12" non descrive
+        // niente. Senza un nome vero l'immagine è decorativa e il nome sta già
+        // scritto accanto, quindi alt vuoto.
+        alt={alt ?? ""}
+        // Le dimensioni reali le dà la classe; width/height servono solo a
+        // riservare il rapporto e non far saltare il layout al caricamento.
+        width={96}
+        height={96}
+        loading="lazy"
+        decoding="async"
         onError={() => setErrore(true)}
-        className={cn("shrink-0 rounded-2xl object-cover", className)}
+        className={cn("aspect-square shrink-0 rounded-2xl object-cover", className)}
       />
     );
   }
diff --git a/src/components/crapp/BadgeDrawer.tsx b/src/components/crapp/BadgeDrawer.tsx
index a6417b1..f923156 100644
--- a/src/components/crapp/BadgeDrawer.tsx
+++ b/src/components/crapp/BadgeDrawer.tsx
@@ -42,15 +42,13 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
       {stato ? (
         <div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
           <div className="flex items-center justify-between">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
               Stato attuale
             </p>
             {grado ? (
-              <span className={cn("text-[11px] font-bold uppercase", meta?.text)}>
-                {meta?.label}
-              </span>
+              <span className={cn("text-xs font-bold uppercase", meta?.text)}>{meta?.label}</span>
             ) : (
-              <span className="text-[11px] font-bold uppercase text-muted-foreground">
+              <span className="text-xs font-bold uppercase text-muted-foreground">
                 In progresso
               </span>
             )}
@@ -73,7 +71,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
       ) : null}
 
       <div>
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           Soglie
         </p>
         <div className="grid grid-cols-3 gap-2">
@@ -90,7 +88,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
               >
                 <p
                   className={cn(
-                    "text-[10px] font-bold uppercase",
+                    "text-xs font-bold uppercase",
                     raggiunto ? gm.text : "text-muted-foreground",
                   )}
                 >
@@ -104,7 +102,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
                 >
                   {def.soglie[g]}
                 </p>
-                <p className="text-[10px] text-muted-foreground">{def.unita}</p>
+                <p className="text-xs text-muted-foreground">{def.unita}</p>
               </div>
             );
           })}
diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index 9db2121..8e7913a 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -2,7 +2,7 @@ import { Link } from "@tanstack/react-router";
 import { CalendarDays, Home, Trophy, User, Users } from "lucide-react";
 
 const items = [
-  { to: "/", label: "Home", icon: Home },
+  { to: "/", label: "Oggi", icon: Home },
   { to: "/calendario", label: "Calendario", icon: CalendarDays },
   { to: "/squadra", label: "Squadra", icon: Users },
   { to: "/classifica", label: "Classifica", icon: Trophy },
@@ -11,17 +11,33 @@ const items = [
 
 export function BottomNav() {
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 backdrop-blur-md">
+    <nav
+      aria-label="Navigazione principale"
+      // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
+      // contenuto scorre, con una sfumatura al posto della riga netta.
+      className="materiale bordo-sfumato fixed inset-x-0 bottom-0 z-40"
+    >
       <div className="mx-auto grid max-w-md grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
             to={to}
             activeOptions={{ exact: to === "/" }}
-            className="group flex flex-col items-center gap-1 py-2.5 text-[10px] font-semibold text-muted-foreground transition-colors data-[status=active]:text-accent"
+            activeProps={{ "aria-current": "page" }}
+            // Lo stato attivo non è solo colore: cambia anche il peso del
+            // testo e compare la barretta sopra l'icona.
+            className="group relative flex min-h-11 flex-col items-center gap-1 py-2.5 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
           >
-            <Icon className="h-5 w-5" strokeWidth={2.2} />
-            {label}
+            {({ isActive }) => (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="absolute inset-x-4 top-0 h-0.5 rounded-full bg-accent opacity-0 transition-opacity group-data-[status=active]:opacity-100"
+                />
+                <Icon className="h-5 w-5" strokeWidth={isActive ? 2.6 : 2.2} />
+                {label}
+              </>
+            )}
           </Link>
         ))}
       </div>
diff --git a/src/components/crapp/CelebrazioneBadge.tsx b/src/components/crapp/CelebrazioneBadge.tsx
index 92632e3..10907af 100644
--- a/src/components/crapp/CelebrazioneBadge.tsx
+++ b/src/components/crapp/CelebrazioneBadge.tsx
@@ -51,7 +51,7 @@ export function CelebrazioneBadge() {
             {notifica.emoji}
           </span>
           <div className="min-w-0 flex-1">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-accent">
+            <p className="text-xs font-bold uppercase tracking-wide text-accent">
               {notifica.tono === "segreto" ? "Badge segreto sbloccato" : "Traguardo raggiunto"}
             </p>
             <p className="mt-0.5 font-display text-2xl leading-none">{notifica.titolo}</p>
@@ -61,7 +61,7 @@ export function CelebrazioneBadge() {
             type="button"
             onClick={chiudi}
             aria-label="Chiudi"
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
+            className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
           >
             <X className="h-4 w-4" />
           </button>
diff --git a/src/components/crapp/CollezioneBadge.tsx b/src/components/crapp/CollezioneBadge.tsx
index 27ab58d..32bbdf1 100644
--- a/src/components/crapp/CollezioneBadge.tsx
+++ b/src/components/crapp/CollezioneBadge.tsx
@@ -45,21 +45,21 @@ function CardBadge({ b, opaco, indice = 0 }: { b: BadgeStato; opaco?: boolean; i
       <div className="flex items-center justify-between">
         <Icon className={cn("h-6 w-6", meta ? meta.text : "text-muted-foreground/50")} />
         {meta ? (
-          <span className={cn("text-[10px] font-bold uppercase", meta.text)}>{meta.label}</span>
+          <span className={cn("text-xs font-bold uppercase", meta.text)}>{meta.label}</span>
         ) : null}
       </div>
       <p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
-      <p className="text-[11px] text-muted-foreground">
+      <p className="text-xs text-muted-foreground">
         {b.valore} {b.def.unita}
       </p>
       {b.prossimaSoglia ? (
         <>
           <Barra percentuale={b.progresso} altezza="h-1.5" trackClassName="mt-2" />
-          <p className="mt-1 text-[10px] font-semibold text-accent">{mancanoPer(b)}</p>
-          <p className="text-[10px] text-muted-foreground">{microcopyBadge(b)}</p>
+          <p className="mt-1 text-xs font-semibold text-accent">{mancanoPer(b)}</p>
+          <p className="text-xs text-muted-foreground">{microcopyBadge(b)}</p>
         </>
       ) : (
-        <p className="mt-2 text-[10px] text-muted-foreground">{microcopyBadge(b)}</p>
+        <p className="mt-2 text-xs text-muted-foreground">{microcopyBadge(b)}</p>
       )}
     </Reveal>
   );
@@ -96,9 +96,7 @@ function SocialDrawer({
             </div>
           </div>
           <div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
-              Vinto
-            </p>
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">Vinto</p>
             <p className="mt-1 font-display text-3xl leading-none">
               {conteggio}{" "}
               <span className="text-lg text-muted-foreground">
@@ -141,7 +139,7 @@ export function CollezioneBadge({
       <div className="rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
         <div className="flex items-end justify-between gap-3">
           <div className="min-w-0">
-            <p className="text-[11px] font-semibold uppercase tracking-wide text-primary-foreground/60">
+            <p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
               Collezione badge
             </p>
             <p className="font-display text-4xl leading-none">
@@ -158,7 +156,7 @@ export function CollezioneBadge({
 
       {vicino ? (
         <div className="rounded-3xl bg-card p-4 shadow-card ring-1 ring-accent/30">
-          <p className="text-[11px] font-bold uppercase tracking-wide text-accent">
+          <p className="text-xs font-bold uppercase tracking-wide text-accent">
             Prossimo traguardo
           </p>
           <p className="mt-1 text-sm font-bold leading-tight">{vicino.def.nome}</p>
@@ -171,7 +169,7 @@ export function CollezioneBadge({
 
       {c.sbloccati.length > 0 ? (
         <div>
-          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Sbloccati ({c.sbloccati.length})
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -186,7 +184,7 @@ export function CollezioneBadge({
 
       {c.inProgresso.length > 0 ? (
         <div>
-          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
             In progresso ({c.inProgresso.length})
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -201,7 +199,7 @@ export function CollezioneBadge({
 
       {socialVinti.length > 0 ? (
         <div>
-          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Votati dai compagni
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -210,7 +208,7 @@ export function CollezioneBadge({
                 <div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-accent/25">
                   <p className="text-lg leading-none">{cat.emoji}</p>
                   <p className="mt-1 text-sm font-bold leading-tight">{cat.nome}</p>
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"}
                   </p>
                 </div>
@@ -221,7 +219,7 @@ export function CollezioneBadge({
       ) : null}
 
       <div>
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           Badge segreti
         </p>
         <div className="grid grid-cols-2 gap-2">
@@ -232,7 +230,7 @@ export function CollezioneBadge({
                 <div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-oro/40">
                   <Icon className="h-6 w-6 text-oro" />
                   <p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     {b.def.celebrazione ?? "Badge segreto sbloccato."}
                   </p>
                 </div>
@@ -246,7 +244,7 @@ export function CollezioneBadge({
             >
               <Lucchetto className="h-6 w-6 text-muted-foreground/50" />
               <p className="mt-1.5 text-sm font-bold leading-tight text-muted-foreground">???</p>
-              <p className="text-[11px] text-muted-foreground/70">Badge segreto da scoprire</p>
+              <p className="text-xs text-muted-foreground/70">Badge segreto da scoprire</p>
             </div>
           ))}
         </div>
diff --git a/src/components/crapp/EventoCard.tsx b/src/components/crapp/EventoCard.tsx
index 51fabc4..f485a57 100644
--- a/src/components/crapp/EventoCard.tsx
+++ b/src/components/crapp/EventoCard.tsx
@@ -1,6 +1,7 @@
 import { MapPin, Clock, Users, Cake, ArrowRight } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { formatData, statoMeta, type Stato } from "@/lib/crapp-data";
 import type { Evento } from "@/lib/eventi";
 import { Barra } from "@/components/motion/Barra";
@@ -53,7 +54,7 @@ export function EventoCard({
 
   if (isCompleanno) {
     return (
-      <article className="premi flex items-center gap-3 rounded-3xl bg-card p-4 shadow-card">
+      <Card as="article" className="flex items-center gap-3">
         <div className="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-success/15 text-success">
           <Cake className="h-5 w-5" />
         </div>
@@ -63,21 +64,21 @@ export function EventoCard({
         </div>
         <div className="shrink-0 rounded-2xl bg-secondary px-3 py-2 text-center">
           <p className="font-display text-xl leading-none">{evento.data.slice(8, 10)}</p>
-          <p className="text-[10px] font-semibold uppercase text-muted-foreground">
+          <p className="text-xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
-      </article>
+      </Card>
     );
   }
 
   return (
-    <article className="premi rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <span
             className={cn(
-              "inline-block rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide",
+              "inline-block rounded-full px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide",
               tipo.className,
             )}
           >
@@ -87,7 +88,7 @@ export function EventoCard({
         </div>
         <div className="shrink-0 rounded-2xl bg-secondary px-3 py-2 text-center">
           <p className="font-display text-xl leading-none">{evento.data.slice(8, 10)}</p>
-          <p className="text-[10px] font-semibold uppercase text-muted-foreground">
+          <p className="text-xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
@@ -98,7 +99,7 @@ export function EventoCard({
           <Link
             to={linkTo.to}
             params={linkTo.params}
-            className="inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-[10px] font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
+            className="inline-flex min-h-11 items-center gap-1 rounded-full bg-primary px-4 text-xs font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
           >
             {linkTo.label} <ArrowRight className="h-3 w-3" />
           </Link>
@@ -121,7 +122,7 @@ export function EventoCard({
       <Barra percentuale={perc} altezza="h-1.5" trackClassName="mt-3" />
 
       {io ? (
-        <div className="mt-4 flex flex-wrap gap-1.5">
+        <div className="mt-4 flex flex-wrap gap-2">
           {stati.map((s) => {
             const meta = statoMeta[s];
             const attivo = stato === s;
@@ -137,8 +138,11 @@ export function EventoCard({
                     stato: attivo ? null : s,
                   })
                 }
+                aria-pressed={attivo}
                 className={cn(
-                  "rounded-full border border-border px-2.5 py-1.5 text-[11px] font-semibold transition-all active:scale-95",
+                  // min-h-11: sono i controlli più toccati dell'app, sotto i
+                  // 44px si sbaglia bersaglio.
+                  "min-h-11 rounded-full border border-border px-3 text-xs font-semibold transition-all active:scale-95",
                   attivo
                     ? cn(meta.className, "border-transparent shadow-card")
                     : "bg-background text-muted-foreground",
@@ -150,6 +154,6 @@ export function EventoCard({
           })}
         </div>
       ) : null}
-    </article>
+    </Card>
   );
 }
diff --git a/src/components/crapp/Pagelle.tsx b/src/components/crapp/Pagelle.tsx
index cb23062..f36c266 100644
--- a/src/components/crapp/Pagelle.tsx
+++ b/src/components/crapp/Pagelle.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ClipboardCheck, Lock } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import type { Giocatore } from "@/lib/crapp-data";
 import { useGiocatoreCorrente } from "@/lib/user-store";
@@ -41,21 +42,23 @@ export function Pagelle({
   }
 
   return (
-    <div className="rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-center justify-between gap-2">
-        <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           <ClipboardCheck className="h-3.5 w-3.5" /> Pagelle anonime
         </p>
-        <span className="rounded-full bg-secondary px-2.5 py-1 text-[10px] font-bold uppercase text-muted-foreground">
+        <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
           {chiuse ? "Votazioni chiuse" : `${fatti}/${daVotare.length} votati`}
         </span>
       </div>
-      <p className="mt-1 text-[11px] text-muted-foreground">
+      <p className="mt-1 text-xs text-muted-foreground">
         Dai un voto da 1 a 10 ai compagni: nessuno vedrà chi ha votato cosa, solo la media.
       </p>
 
       {isPending ? (
-        <p className="mt-3 text-xs text-muted-foreground">Carico le pagelle…</p>
+        <p aria-busy="true" className="mt-3 text-xs text-muted-foreground">
+          Carico le pagelle…
+        </p>
       ) : (
         <div className="mt-3 space-y-1.5">
           {convocati.map((g) => {
@@ -69,12 +72,12 @@ export function Pagelle({
                   <Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-xs" />
                   <span className="min-w-0 flex-1">
                     <span className="block truncate text-sm font-bold leading-tight">{g.nome}</span>
-                    <span className="text-[11px] text-muted-foreground">
+                    <span className="text-xs text-muted-foreground">
                       {media ? `Media ${media.media} · ${media.voti} voti` : "Nessun voto"}
                     </span>
                   </span>
                   {sonoIo ? (
-                    <span className="shrink-0 text-[10px] font-semibold uppercase text-muted-foreground">
+                    <span className="shrink-0 text-xs font-semibold uppercase text-muted-foreground">
                       Sei tu
                     </span>
                   ) : chiuse ? (
@@ -85,7 +88,7 @@ export function Pagelle({
                       disabled={!io || vota.isPending}
                       onClick={() => setApertoPer(aperto ? null : g.id)}
                       className={cn(
-                        "shrink-0 rounded-full px-3 py-1 text-[10px] font-bold uppercase transition-colors disabled:opacity-50",
+                        "shrink-0 rounded-full px-3 py-1 text-xs font-bold uppercase transition-colors disabled:opacity-50",
                         mio !== undefined
                           ? "bg-accent text-accent-foreground"
                           : "bg-card text-foreground",
@@ -103,7 +106,7 @@ export function Pagelle({
                         type="button"
                         onClick={() => invia(g.id, v)}
                         className={cn(
-                          "rounded-lg py-1.5 text-[11px] font-bold tabular-nums transition-transform active:scale-90",
+                          "rounded-lg py-1.5 text-xs font-bold tabular-nums transition-transform active:scale-90",
                           mio === v
                             ? "bg-accent text-accent-foreground"
                             : "bg-card text-foreground",
@@ -119,6 +122,6 @@ export function Pagelle({
           })}
         </div>
       )}
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index f4f97c0..3ef62a7 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -27,7 +27,7 @@ const classiInput = "w-full rounded-xl border border-border bg-background px-3 p
 function Campo({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
       <span className="mt-1 block">{children}</span>
diff --git a/src/components/crapp/RosaPresenze.tsx b/src/components/crapp/RosaPresenze.tsx
index 8cafd8d..5123a52 100644
--- a/src/components/crapp/RosaPresenze.tsx
+++ b/src/components/crapp/RosaPresenze.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { BellRing, HelpCircle, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import { Barra } from "@/components/motion/Barra";
 import { statoMeta, type Giocatore, type Stato } from "@/lib/crapp-data";
@@ -49,7 +50,7 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
 
   return (
     <div className="space-y-3">
-      <div className="rounded-3xl bg-card p-4 shadow-card">
+      <Card>
         <div className="flex items-baseline justify-between">
           <p className="text-sm font-bold">
             Hanno risposto {risposteN}/{rosa.length}
@@ -65,7 +66,7 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
               <span
                 key={s}
                 className={cn(
-                  "rounded-full px-2.5 py-1 text-[11px] font-bold",
+                  "rounded-full px-2.5 py-1 text-xs font-bold",
                   n > 0 ? statoMeta[s].className : "bg-secondary text-muted-foreground",
                 )}
               >
@@ -73,14 +74,14 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
               </span>
             );
           })}
-          <span className="rounded-full bg-secondary px-2.5 py-1 text-[11px] font-bold text-muted-foreground">
+          <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold text-muted-foreground">
             ❔ {mancanti.length} da rispondere
           </span>
         </div>
 
         {io ? (
           <div className="mt-4 border-t border-border pt-3">
-            <p className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
               La tua risposta
             </p>
             <div className="mt-2 flex flex-wrap gap-1.5">
@@ -95,7 +96,7 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
                       salva.mutate({ eventoId, giocatoreId: io.id, stato: attivo ? null : s })
                     }
                     className={cn(
-                      "rounded-full border border-border px-2.5 py-1.5 text-[11px] font-semibold transition-all active:scale-95",
+                      "rounded-full border border-border px-2.5 py-1.5 text-xs font-semibold transition-all active:scale-95",
                       attivo
                         ? cn(statoMeta[s].className, "border-transparent shadow-card")
                         : "bg-background text-muted-foreground",
@@ -124,10 +125,12 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
             Sollecita {daSollecitare} giocatori
           </button>
         ) : null}
-      </div>
+      </Card>
 
       {isPending ? (
-        <p className="text-center text-xs text-muted-foreground">Carico le risposte…</p>
+        <p aria-busy="true" className="text-center text-xs text-muted-foreground">
+          Carico le risposte…
+        </p>
       ) : null}
 
       {ordine.map((s) => {
diff --git a/src/components/crapp/ScoutEntry.tsx b/src/components/crapp/ScoutEntry.tsx
index d9fccb7..8becdd1 100644
--- a/src/components/crapp/ScoutEntry.tsx
+++ b/src/components/crapp/ScoutEntry.tsx
@@ -39,7 +39,7 @@ export function ScoutEntry({ variante = "grande" }: { variante?: "grande" | "com
       {occupato ? <Lock className="h-5 w-5 shrink-0" /> : <Radio className="h-5 w-5 shrink-0" />}
       <span className="min-w-0 flex-1">
         <span className="block font-display text-lg uppercase leading-none">{titolo}</span>
-        <span className="block text-[11px] opacity-80">{sottotitolo}</span>
+        <span className="block text-xs opacity-80">{sottotitolo}</span>
       </span>
       {disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null}
     </>
diff --git a/src/components/crapp/SerieCard.tsx b/src/components/crapp/SerieCard.tsx
index 4e1bcfd..474e841 100644
--- a/src/components/crapp/SerieCard.tsx
+++ b/src/components/crapp/SerieCard.tsx
@@ -1,5 +1,6 @@
 import { Flame } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import type { Giocatore } from "@/lib/crapp-data";
 import { serieGiocatore, serieMigliore } from "@/lib/serie";
 import { Barra } from "@/components/motion/Barra";
@@ -28,7 +29,7 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
               </span>
               <div className="min-w-0 flex-1">
                 <p className="text-sm font-bold leading-tight">{s.def.label}</p>
-                <p className="text-[11px] text-muted-foreground">{s.def.descrizione}</p>
+                <p className="text-xs text-muted-foreground">{s.def.descrizione}</p>
               </div>
               <span className="inline-flex items-center gap-1 font-display text-2xl leading-none">
                 <Flame
@@ -38,7 +39,7 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
               </span>
             </div>
             <Barra percentuale={s.progresso} trackClassName="mt-3" />
-            <p className="mt-2 text-[11px] text-muted-foreground">
+            <p className="mt-2 text-xs text-muted-foreground">
               {s.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
               {s.messaggio}
             </p>
@@ -54,7 +55,7 @@ export function SerieHome({ g }: { g: Giocatore }) {
   const top = serieMigliore(g);
   const Icon = top.def.icon;
   return (
-    <div className="rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-center gap-3">
         <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-accent-grad text-accent-foreground">
           <Icon className="h-5 w-5" />
@@ -63,19 +64,19 @@ export function SerieHome({ g }: { g: Giocatore }) {
           <p className="text-sm font-bold leading-tight">
             Serie {top.def.label.toLowerCase()}: {top.valore}
           </p>
-          <p className="text-[11px] text-muted-foreground">{top.messaggio}</p>
+          <p className="text-xs text-muted-foreground">{top.messaggio}</p>
         </div>
       </div>
       <div className="mt-3 grid grid-cols-3 gap-2">
         {serieGiocatore(g).map((s) => (
           <div key={s.def.tipo} className="rounded-2xl bg-secondary p-2 text-center">
             <p className="font-display text-xl leading-none">{s.valore}</p>
-            <p className="mt-1 text-[10px] font-semibold uppercase text-muted-foreground">
+            <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
               {s.def.label}
             </p>
           </div>
         ))}
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/crapp/SondaggioCacche.tsx b/src/components/crapp/SondaggioCacche.tsx
index 46a78b0..8cd4ca5 100644
--- a/src/components/crapp/SondaggioCacche.tsx
+++ b/src/components/crapp/SondaggioCacche.tsx
@@ -1,5 +1,6 @@
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { nomeCompleto, useGiocatoriSquadra } from "@/lib/giocatori-squadra";
 import { useGiocatoreCorrente } from "@/lib/user-store";
 import { mediaPartita, useCacche, useSalvaCacche } from "@/lib/cacche";
@@ -35,16 +36,16 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
   }
 
   return (
-    <div className="rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-center justify-between gap-2">
-        <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
           💩 Sondaggio pre-partita
         </p>
-        <span className="rounded-full bg-secondary px-2.5 py-1 text-[10px] font-bold uppercase text-muted-foreground">
+        <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
           {dellaPartita.length} risposte
         </span>
       </div>
-      <p className="mt-1 text-[11px] text-muted-foreground">
+      <p className="mt-1 text-xs text-muted-foreground">
         Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
       </p>
 
@@ -67,7 +68,7 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
         ))}
       </div>
 
-      <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
         <span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
           Media squadra {media}
         </span>
@@ -80,6 +81,6 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
           </span>
         ))}
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/crapp/TurnoPalloni.tsx b/src/components/crapp/TurnoPalloni.tsx
index 8428344..ab73c7d 100644
--- a/src/components/crapp/TurnoPalloni.tsx
+++ b/src/components/crapp/TurnoPalloni.tsx
@@ -41,7 +41,7 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
           <CircleDot className="h-4 w-4" />
         </span>
         <span className="min-w-0 flex-1">
-          <span className="block text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Palloni
           </span>
           <span className="flex items-center gap-1.5 text-sm font-bold leading-tight">
@@ -50,7 +50,7 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
             ) : null}
             <span className="truncate">{giocatore ? nomeCompleto(giocatore) : "Da assegnare"}</span>
             {proposto && giocatore ? (
-              <span className="shrink-0 rounded-full bg-card px-1.5 py-0.5 text-[9px] font-bold uppercase text-muted-foreground">
+              <span className="shrink-0 rounded-full bg-card px-1.5 py-0.5 text-xs font-bold uppercase text-muted-foreground">
                 proposto
               </span>
             ) : null}
diff --git a/src/components/crapp/VotazioneMvp.tsx b/src/components/crapp/VotazioneMvp.tsx
index d678964..ea8b0de 100644
--- a/src/components/crapp/VotazioneMvp.tsx
+++ b/src/components/crapp/VotazioneMvp.tsx
@@ -41,14 +41,14 @@ export function VotazioneMvp({ matchId }: { matchId: string }) {
   return (
     <div className="mt-3 rounded-2xl bg-secondary/60 p-3">
       <div className="flex items-center justify-between gap-2">
-        <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           <Vote className="h-3.5 w-3.5" /> Voto MVP · {totale} {totale === 1 ? "voto" : "voti"}
         </p>
         <button
           type="button"
           onClick={() => setAperto((v) => !v)}
           disabled={!io}
-          className="rounded-full bg-accent px-3 py-1 text-[10px] font-bold uppercase text-accent-foreground disabled:opacity-50"
+          className="rounded-full bg-accent px-3 py-1 text-xs font-bold uppercase text-accent-foreground disabled:opacity-50"
         >
           {mio ? "Cambia voto" : "Vota"}
         </button>
@@ -66,7 +66,7 @@ export function VotazioneMvp({ matchId }: { matchId: string }) {
         )}
       </p>
       {mio ? (
-        <p className="mt-1 text-[11px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
+        <p className="mt-1 text-xs text-muted-foreground">Hai votato {mio.votato_nome}</p>
       ) : null}
 
       {aperto ? (
@@ -91,7 +91,7 @@ export function VotazioneMvp({ matchId }: { matchId: string }) {
       ) : conteggio.length > 0 ? (
         <div className="mt-2 flex flex-wrap gap-1.5">
           {conteggio.map((c) => (
-            <span key={c.id} className="rounded-lg bg-card px-2 py-1 text-[11px] font-semibold">
+            <span key={c.id} className="rounded-lg bg-card px-2 py-1 text-xs font-semibold">
               {c.nome} · {c.voti}
             </span>
           ))}
diff --git a/src/components/crapp/VotoSocial.tsx b/src/components/crapp/VotoSocial.tsx
index 881b248..1431dee 100644
--- a/src/components/crapp/VotoSocial.tsx
+++ b/src/components/crapp/VotoSocial.tsx
@@ -50,7 +50,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
 
   return (
     <div className="space-y-2">
-      <div className="rounded-2xl bg-secondary/60 px-3 py-2 text-[11px] font-semibold text-muted-foreground">
+      <div className="rounded-2xl bg-secondary/60 px-3 py-2 text-xs font-semibold text-muted-foreground">
         <span className="inline-flex items-center gap-1.5">
           <Sparkles className="h-3.5 w-3.5 text-accent" />
           Hai votato {fatti}/{categorieSocial.length} categorie · un solo voto per categoria
@@ -79,13 +79,13 @@ export function VotoSocial({ matchId }: { matchId: string }) {
               </span>
               <span className="min-w-0 flex-1">
                 <span className="block truncate text-sm font-bold leading-tight">{cat.nome}</span>
-                <span className="block truncate text-[11px] text-muted-foreground">
+                <span className="block truncate text-xs text-muted-foreground">
                   {mio ? `Hai votato ${mio.votato_nome}` : cat.descrizione}
                 </span>
               </span>
               <span
                 className={cn(
-                  "shrink-0 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase",
+                  "shrink-0 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
                   mio ? "bg-success text-success-foreground" : "bg-accent text-accent-foreground",
                 )}
               >
@@ -117,7 +117,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
             ) : (
               <div className="border-t border-border px-3 py-2">
                 {totale === 0 ? (
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     Nessun voto ancora: apri e scegli un compagno.
                   </p>
                 ) : vincitore ? (
@@ -127,7 +127,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
                     {vincitore.nome} · {vincitore.voti} {vincitore.voti === 1 ? "voto" : "voti"}
                   </p>
                 ) : (
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     Parità con {totale} voti: servono altri voti per assegnare il badge.
                   </p>
                 )}
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index bc884a4..abbad88 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useId, useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { statoMeta, type Stato } from "@/lib/crapp-data";
@@ -10,19 +10,37 @@ export function TeamLogo({ className }: { className?: string }) {
     <img
       src="/icon-192.png"
       alt="CRAP Volley"
+      width={192}
+      height={192}
       className={cn("shrink-0 rounded-2xl object-cover shadow-pop", className)}
     />
   );
 }
 
+/**
+ * Superficie standard dell'app: era ripetuta a mano una ventina di volte come
+ * `rounded-3xl bg-card p-4 shadow-card`, quindi cambiare raggio od ombra
+ * voleva dire toccare venti file.
+ *
+ * Gerarchia dei raggi: contenitore `3xl` → elemento interno `2xl` →
+ * controllo `full`.
+ */
+export function Card({
+  className,
+  as: Tag = "div",
+  ...props
+}: ComponentPropsWithoutRef<"div"> & { as?: "div" | "article" | "section" }) {
+  return <Tag className={cn("premi rounded-3xl bg-card p-4 shadow-card", className)} {...props} />;
+}
+
 export function PageHeader({ titolo, sottotitolo }: { titolo: string; sottotitolo?: string }) {
   return (
     <header className="bg-hero px-5 pb-8 pt-7 text-primary-foreground">
       <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
         <div className="min-w-0">
-          <h1 className="truncate font-display text-3xl uppercase">{titolo}</h1>
+          <h1 className="truncate font-display-lg text-3xl uppercase">{titolo}</h1>
           {sottotitolo ? (
-            <p className="mt-1 truncate text-sm text-primary-foreground/70">{sottotitolo}</p>
+            <p className="mt-1 truncate text-sm text-primary-foreground/80">{sottotitolo}</p>
           ) : null}
         </div>
         <TeamLogo className="h-11 w-11" />
@@ -45,7 +63,7 @@ export function Section({
   return (
     <Reveal as="section" indice={indice} className="px-5 py-4">
       <div className="mb-3 flex items-center justify-between gap-3">
-        <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
+        <h2 className="font-display-sm text-lg uppercase">{titolo}</h2>
         {azione}
       </div>
       {children}
@@ -70,15 +88,17 @@ export function SezioneTendina({
   indice?: number;
 }) {
   const [aperta, setAperta] = useState(defaultAperta);
+  const id = useId();
   return (
     <Reveal as="section" indice={indice} className="px-5 py-4">
       <button
         type="button"
         onClick={() => setAperta((v) => !v)}
-        className="mb-3 flex w-full items-center justify-between gap-3 text-left active:scale-[0.99]"
+        className="mb-3 flex min-h-11 w-full items-center justify-between gap-3 text-left active:scale-[0.99]"
         aria-expanded={aperta}
+        aria-controls={id}
       >
-        <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
+        <h2 className="font-display-sm text-lg uppercase">{titolo}</h2>
         <span className="flex shrink-0 items-center gap-2">
           {azione}
           <ChevronDown
@@ -90,7 +110,7 @@ export function SezioneTendina({
         </span>
       </button>
       {anteprima}
-      {aperta ? children : null}
+      <div id={id}>{aperta ? children : null}</div>
     </Reveal>
   );
 }
@@ -100,7 +120,7 @@ export function StatoBadge({ stato, className }: { stato: Stato; className?: str
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase",
+        "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
         meta.className,
         className,
       )}
@@ -124,10 +144,10 @@ export function StatTile({
       <p className="font-display text-2xl leading-none">
         {typeof valore === "number" ? <Numero valore={valore} /> : valore}
       </p>
-      <p className="mt-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+      <p className="mt-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
         {label}
       </p>
-      {hint ? <p className="mt-0.5 text-[11px] text-accent">{hint}</p> : null}
+      {hint ? <p className="mt-0.5 text-xs text-accent">{hint}</p> : null}
     </div>
   );
 }

From 9b28a86f7cebe7303c53945b3488883140bf8e65 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:42:45 +0200
Subject: [PATCH 08/37] Aggiunge lo swipe al calendario e ripulisce le
 schermate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Calendario: il mese si cambiava solo con due frecce da 36 px. Ora si scorre,
e il punto d'arrivo si sceglie proiettando la velocità di rilascio invece che
dalla posizione del dito, così un colpo secco «lancia» il mese. La griglia
entra ed esce dallo stesso lato del gesto, `dragElastic` dà resistenza
progressiva al bordo al posto di uno stop netto.

Le celle con più tipi di evento generavano un gradiente a fette e ci mettevano
sopra un'ombra bianca sul numero per tenerlo leggibile: un cerotto su un
problema di contrasto. Ora fondo neutro e un puntino per tipo, con il numero
sempre su superficie piena. L'etichetta accessibile dice quanti eventi ci
sono, non solo che ce ne sono.

Profilo: le quattro switch «Notifiche convocazioni», «Promemoria allenamenti»,
«Cambi orario» e «Bacheca squadra» erano `defaultChecked` e non facevano
niente — promettevano una funzione che non esiste. Via anche la conferma
nativa prima di *cambiare* la foto: non è un'azione distruttiva, e chiedere
conferma per tutto insegna a rispondere sì senza leggere. Resta su quella che
la rimuove, che è irreversibile.

Home: la sezione «Da confermare» mostrava titolo e contenitore vuoto quando
non c'era altro da confermare, mentre tutte le altre sezioni hanno un empty
state.

Squadra: i badge in riga avevano solo `title=`, che su touch non appare mai —
aggiunto il testo per gli screen reader. I filtri per criterio erano alti
~26 px.

Più, in tutte le schermate: la primitiva `Card` al posto delle classi
ripetute, i bersagli sotto i 44 px portati in misura e il floor tipografico a
12 px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/routes/admin.tsx       |   6 +-
 src/routes/calendario.tsx  | 189 ++++++++++++++++++++++---------------
 src/routes/classifica.tsx  |   8 +-
 src/routes/eventi.tsx      |  16 ++--
 src/routes/index.tsx       |  37 +++++---
 src/routes/partita.$id.tsx |  10 +-
 src/routes/profilo.tsx     |  40 +++-----
 src/routes/scout.tsx       |  27 +++---
 src/routes/squadra.tsx     |  62 ++++++------
 9 files changed, 217 insertions(+), 178 deletions(-)

diff --git a/src/routes/admin.tsx b/src/routes/admin.tsx
index dcbd4c3..6d56519 100644
--- a/src/routes/admin.tsx
+++ b/src/routes/admin.tsx
@@ -90,7 +90,7 @@ function messaggioErrore(e: unknown, fallback: string): string {
 function Campo({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
       <span className="mt-1 block">{children}</span>
@@ -375,7 +375,7 @@ function Documento({
       onClick={scarica}
       disabled={!path || inCorso}
       className={cn(
-        "premi flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase disabled:opacity-60",
+        "premi flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold uppercase disabled:opacity-60",
         statoClasse[stato],
       )}
     >
@@ -464,7 +464,7 @@ function SchedaGiocatore({
         />
         <span
           className={cn(
-            "flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase",
+            "flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
             statoClasse[g.numeroTessera ? "presente" : "assente"],
           )}
         >
diff --git a/src/routes/calendario.tsx b/src/routes/calendario.tsx
index 623cd4d..6239451 100644
--- a/src/routes/calendario.tsx
+++ b/src/routes/calendario.tsx
@@ -2,9 +2,11 @@ import { useEffect, useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { CalendarPlus, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { Link } from "@tanstack/react-router";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { cn } from "@/lib/utils";
+import { molla, proietta } from "@/lib/molla";
 import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
-import { PageHeader, Section } from "@/components/crapp/ui-bits";
+import { Card, PageHeader, Section } from "@/components/crapp/ui-bits";
 import { compleanniEventi, useEventi, type Evento } from "@/lib/eventi";
 import { useRosa } from "@/lib/rosa";
 import { useGiocatoreCorrente } from "@/lib/user-store";
@@ -55,8 +57,12 @@ function useMeseNav(initial?: { anno: number; mese: number }) {
   const oggi = new Date();
   const [anno, setAnno] = useState(initial?.anno ?? oggi.getFullYear());
   const [mese, setMese] = useState(initial?.mese ?? oggi.getMonth());
+  // Serve a far entrare e uscire la griglia dallo stesso lato del gesto:
+  // se un mese esce a sinistra, il precedente deve rientrare da sinistra.
+  const [direzione, setDirezione] = useState(0);
 
   const precedente = () => {
+    setDirezione(-1);
     if (mese === 0) {
       setMese(11);
       setAnno((a) => a - 1);
@@ -66,6 +72,7 @@ function useMeseNav(initial?: { anno: number; mese: number }) {
   };
 
   const successivo = () => {
+    setDirezione(1);
     if (mese === 11) {
       setMese(0);
       setAnno((a) => a + 1);
@@ -74,7 +81,7 @@ function useMeseNav(initial?: { anno: number; mese: number }) {
     }
   };
 
-  return { anno, mese, precedente, successivo };
+  return { anno, mese, direzione, precedente, successivo };
 }
 
 function giorniDelMese(anno: number, mese: number) {
@@ -102,7 +109,8 @@ function Calendario() {
   const admin = useIsAdmin();
   const { eventi } = useEventi();
   const rosa = useRosa();
-  const { anno, mese, precedente, successivo } = useMeseNav();
+  const ridotto = useReducedMotion();
+  const { anno, mese, direzione, precedente, successivo } = useMeseNav();
   const { giorni, offsetLunedi } = giorniDelMese(anno, mese);
   const mesePrefix = `${anno}-${pad2(mese + 1)}`;
 
@@ -129,12 +137,8 @@ function Calendario() {
     : [];
 
   // Prossimi 4 eventi da oggi in avanti (indipendenti dal mese selezionato nella griglia).
-  const oggiIso = oggi
-    ? `${oggi.anno}-${pad2(oggi.mese + 1)}-${pad2(oggi.giorno)}`
-    : null;
-  const prossimiEventi = oggiIso
-    ? eventi.filter((e) => e.data >= oggiIso).slice(0, 4)
-    : [];
+  const oggiIso = oggi ? `${oggi.anno}-${pad2(oggi.mese + 1)}-${pad2(oggi.giorno)}` : null;
+  const prossimiEventi = oggiIso ? eventi.filter((e) => e.data >= oggiIso).slice(0, 4) : [];
 
   return (
     <>
@@ -147,8 +151,9 @@ function Calendario() {
               key={v}
               type="button"
               onClick={() => setVista(v)}
+              aria-pressed={vista === v}
               className={cn(
-                "flex-1 rounded-full py-2 text-xs font-bold uppercase tracking-wide transition-colors",
+                "min-h-11 flex-1 rounded-full text-xs font-bold uppercase tracking-wide transition-colors",
                 vista === v ? "bg-card shadow-card text-foreground" : "text-muted-foreground",
               )}
             >
@@ -160,91 +165,127 @@ function Calendario() {
 
       {vista === "mese" ? (
         <Section titolo={mesiIT[mese]!}>
-          <div className="rounded-3xl bg-card p-4 shadow-card">
+          <Card>
             <div className="mb-3 flex items-center justify-between">
               <button
                 type="button"
                 onClick={precedente}
-                className="grid h-9 w-9 place-items-center rounded-full bg-secondary text-foreground active:scale-95"
+                className="grid h-11 w-11 place-items-center rounded-full bg-secondary text-foreground active:scale-95"
                 aria-label="Mese precedente"
               >
                 <ChevronLeft className="h-5 w-5" />
               </button>
-              <span className="font-display text-xl uppercase tracking-wide">
+              <span className="font-display-sm text-xl uppercase">
                 {mesiIT[mese]} {anno}
               </span>
               <button
                 type="button"
                 onClick={successivo}
-                className="grid h-9 w-9 place-items-center rounded-full bg-secondary text-foreground active:scale-95"
+                className="grid h-11 w-11 place-items-center rounded-full bg-secondary text-foreground active:scale-95"
                 aria-label="Mese successivo"
               >
                 <ChevronRight className="h-5 w-5" />
               </button>
             </div>
 
-            <div className="grid grid-cols-7 gap-1 text-center text-[11px] font-bold text-muted-foreground">
+            <div className="grid grid-cols-7 gap-1 text-center text-xs font-bold text-muted-foreground">
               {giorniIT.map((g, i) => (
                 <span key={i}>{g}</span>
               ))}
             </div>
-            <div className="mt-2 grid grid-cols-7 gap-1">
-              {Array.from({ length: offsetLunedi }).map((_, i) => (
-                <span key={`v${i}`} />
-              ))}
-              {Array.from({ length: giorni }).map((_, i) => {
-                const giorno = i + 1;
-                const eventiGiorno = eventiPerGiorno.get(giorno) ?? [];
-                const haEventi = eventiGiorno.length > 0;
-                const tipiGiorno = Array.from(new Set(eventiGiorno.map((e) => e.tipo)));
-                const coloreTipo: Record<Evento["tipo"], string> = {
-                  partita: "var(--accent)",
-                  allenamento: "var(--training)",
-                  evento: "var(--warning)",
-                  compleanno: "var(--success)",
-                };
-                const sfondo =
-                  tipiGiorno.length > 1
-                    ? `linear-gradient(135deg, ${tipiGiorno
-                        .map((t, idx) => {
-                          const da = (idx / tipiGiorno.length) * 100;
-                          const a = ((idx + 1) / tipiGiorno.length) * 100;
-                          return `${coloreTipo[t]} ${da}%, ${coloreTipo[t]} ${a}%`;
-                        })
-                        .join(", ")})`
-                    : undefined;
-                const tipo = tipiGiorno.length === 1 ? tipiGiorno[0] : undefined;
-                const isOggi =
-                  !!oggi && oggi.anno === anno && oggi.mese === mese && oggi.giorno === giorno;
-                const Cella = haEventi ? "button" : "div";
-                return (
-                  <Cella
-                    key={giorno}
-                    type={haEventi ? "button" : undefined}
-                    onClick={haEventi ? () => apriGiorno(giorno) : undefined}
-                    style={sfondo ? { backgroundImage: sfondo } : undefined}
-                    className={cn(
-                      "relative grid aspect-square place-items-center rounded-xl text-sm font-semibold",
-                      tipo === "partita" && "bg-accent text-accent-foreground",
-                      tipo === "allenamento" && "bg-training text-training-foreground",
-                      tipo === "evento" && "bg-warning text-warning-foreground",
-                      tipo === "compleanno" && "bg-success text-success-foreground",
-                      !tipo && !haEventi && "text-muted-foreground",
-                      !tipo && haEventi && "text-foreground",
-                      haEventi && "cursor-pointer transition-transform active:scale-90",
-                      isOggi && "ring-2 ring-foreground ring-offset-1 ring-offset-card",
-                    )}
-                    aria-label={haEventi ? `Eventi del ${giorno}` : undefined}
-                    aria-current={isOggi ? "date" : undefined}
-                  >
-                    <span className="relative drop-shadow-[0_1px_1px_rgba(255,255,255,0.5)]">
-                      {giorno}
-                    </span>
-                  </Cella>
-                );
-              })}
+            {/*
+              Il mese si cambia anche con lo swipe: il punto d'arrivo si
+              decide proiettando la velocità di rilascio (come la
+              decelerazione dello scroll iOS), non dalla posizione del dito.
+              `dragElastic` dà la resistenza progressiva al bordo invece di
+              uno stop netto.
+            */}
+            <div className="relative mt-2 overflow-hidden">
+              <AnimatePresence initial={false} mode="popLayout" custom={direzione}>
+                <motion.div
+                  key={mesePrefix}
+                  custom={direzione}
+                  drag="x"
+                  dragConstraints={{ left: 0, right: 0 }}
+                  dragElastic={0.18}
+                  dragMomentum={false}
+                  onDragEnd={(_, info) => {
+                    const arrivo = info.offset.x + proietta(info.velocity.x);
+                    if (arrivo < -60) successivo();
+                    else if (arrivo > 60) precedente();
+                  }}
+                  initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione * 48 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione * -48 }}
+                  transition={ridotto ? { duration: 0.2 } : molla.foglio}
+                  className="grid touch-pan-y grid-cols-7 gap-1"
+                >
+                  {Array.from({ length: offsetLunedi }).map((_, i) => (
+                    <span key={`v${i}`} />
+                  ))}
+                  {Array.from({ length: giorni }).map((_, i) => {
+                    const giorno = i + 1;
+                    const eventiGiorno = eventiPerGiorno.get(giorno) ?? [];
+                    const haEventi = eventiGiorno.length > 0;
+                    const tipiGiorno = Array.from(new Set(eventiGiorno.map((e) => e.tipo)));
+                    // Un solo tipo: cella piena, il colore è l'informazione.
+                    // Più tipi: fondo neutro e un puntino per tipo. Prima si
+                    // generava un gradiente a fette, che rendeva il numero
+                    // illeggibile e costringeva a un'ombra bianca di ripiego.
+                    const tipo = tipiGiorno.length === 1 ? tipiGiorno[0] : undefined;
+                    const isOggi =
+                      !!oggi && oggi.anno === anno && oggi.mese === mese && oggi.giorno === giorno;
+                    const Cella = haEventi ? "button" : "div";
+                    return (
+                      <Cella
+                        key={giorno}
+                        type={haEventi ? "button" : undefined}
+                        onClick={haEventi ? () => apriGiorno(giorno) : undefined}
+                        className={cn(
+                          "relative grid aspect-square place-items-center rounded-xl text-sm font-semibold",
+                          tipo === "partita" && "bg-accent text-accent-foreground",
+                          tipo === "allenamento" && "bg-training text-training-foreground",
+                          tipo === "evento" && "bg-warning text-warning-foreground",
+                          tipo === "compleanno" && "bg-success text-success-foreground",
+                          !tipo && !haEventi && "text-muted-foreground",
+                          !tipo && haEventi && "bg-secondary text-foreground",
+                          haEventi && "cursor-pointer transition-transform active:scale-90",
+                          isOggi && "ring-2 ring-foreground ring-offset-1 ring-offset-card",
+                        )}
+                        aria-label={
+                          haEventi
+                            ? `${giorno} ${mesiIT[mese]}: ${eventiGiorno.length} ${eventiGiorno.length === 1 ? "evento" : "eventi"}`
+                            : undefined
+                        }
+                        aria-current={isOggi ? "date" : undefined}
+                      >
+                        <span>{giorno}</span>
+                        {tipiGiorno.length > 1 ? (
+                          <span aria-hidden="true" className="absolute bottom-1 flex gap-0.5">
+                            {tipiGiorno.slice(0, 3).map((t) => (
+                              <i
+                                key={t}
+                                className={cn(
+                                  "h-1 w-1 rounded-full",
+                                  t === "partita" && "bg-accent",
+                                  t === "allenamento" && "bg-training",
+                                  t === "evento" && "bg-warning",
+                                  t === "compleanno" && "bg-success",
+                                )}
+                              />
+                            ))}
+                          </span>
+                        ) : null}
+                      </Cella>
+                    );
+                  })}
+                </motion.div>
+              </AnimatePresence>
             </div>
-            <div className="mt-4 flex flex-wrap gap-3 text-[11px] font-semibold text-muted-foreground">
+            <p className="mt-3 text-xs text-muted-foreground">
+              Scorri a destra o sinistra per cambiare mese.
+            </p>
+            <div className="mt-3 flex flex-wrap gap-3 text-xs font-semibold text-muted-foreground">
               <span className="inline-flex items-center gap-1">
                 <i className="h-2.5 w-2.5 rounded-full bg-accent" /> Partita
               </span>
@@ -258,7 +299,7 @@ function Calendario() {
                 <i className="h-2.5 w-2.5 rounded-full bg-success" /> Compleanni
               </span>
             </div>
-          </div>
+          </Card>
         </Section>
       ) : null}
 
@@ -303,10 +344,10 @@ function Calendario() {
       <Drawer open={drawerAperto} onOpenChange={setDrawerAperto}>
         <DrawerContent className="rounded-t-[24px] border-border bg-background px-4 pb-6 pt-2">
           <DrawerHeader className="relative px-0 pb-2 text-left">
-            <DrawerTitle className="font-display text-2xl uppercase tracking-wide">
+            <DrawerTitle className="font-display-lg text-2xl uppercase">
               {giornoSelezionato ? `${giornoSelezionato} ${mesiIT[mese]}` : "Eventi"}
             </DrawerTitle>
-            <DrawerClose className="absolute right-0 top-1 grid h-8 w-8 place-items-center rounded-full bg-secondary text-foreground transition-transform active:scale-90">
+            <DrawerClose className="absolute right-0 top-0 grid h-11 w-11 place-items-center rounded-full bg-secondary text-foreground transition-transform active:scale-90">
               <X className="h-4 w-4" />
               <span className="sr-only">Chiudi</span>
             </DrawerClose>
diff --git a/src/routes/classifica.tsx b/src/routes/classifica.tsx
index 7733784..9c1c823 100644
--- a/src/routes/classifica.tsx
+++ b/src/routes/classifica.tsx
@@ -83,7 +83,7 @@ function Classifica() {
 
       <Section titolo="Classifica">
         <div className="overflow-hidden rounded-3xl bg-card shadow-card">
-          <div className="grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] gap-2 border-b border-border px-3 py-2 text-[10px] font-bold uppercase text-muted-foreground">
+          <div className="grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] gap-2 border-b border-border px-3 py-2 text-xs font-bold uppercase text-muted-foreground">
             <span>#</span>
             <span>Squadra</span>
             <span className="text-center">G</span>
@@ -141,7 +141,7 @@ function Classifica() {
                         {m.casa ? "CRAP Volley" : m.avversario} vs{" "}
                         {m.casa ? m.avversario : "CRAP Volley"}
                       </p>
-                      <p className="text-[11px] text-muted-foreground">
+                      <p className="text-xs text-muted-foreground">
                         {formatData(m.data)} · MVP {m.mvp || "da votare"}
                         {m.scout ? " · scoutata" : ""}
                       </p>
@@ -162,7 +162,7 @@ function Classifica() {
                       <span
                         key={i}
                         className={cn(
-                          "rounded-lg px-2 py-1 text-[11px] font-semibold tabular-nums",
+                          "rounded-lg px-2 py-1 text-xs font-semibold tabular-nums",
                           p[0] > p[1] ? "bg-secondary" : "bg-muted text-muted-foreground",
                         )}
                       >
@@ -170,7 +170,7 @@ function Classifica() {
                       </span>
                     ))}
                     {eventoId && !m.mvp ? (
-                      <span className="ml-auto inline-flex items-center gap-0.5 text-[11px] font-bold uppercase text-accent">
+                      <span className="ml-auto inline-flex items-center gap-0.5 text-xs font-bold uppercase text-accent">
                         Vota MVP <ChevronRight className="h-3.5 w-3.5" />
                       </span>
                     ) : null}
diff --git a/src/routes/eventi.tsx b/src/routes/eventi.tsx
index 39803ac..df9d04c 100644
--- a/src/routes/eventi.tsx
+++ b/src/routes/eventi.tsx
@@ -134,7 +134,7 @@ function GestioneEventi() {
                   type="button"
                   onClick={() => aggiorna(daCategoria(t.id))}
                   className={cn(
-                    "rounded-full py-2 text-[11px] font-bold uppercase transition-colors",
+                    "rounded-full py-2 text-xs font-bold uppercase transition-colors",
                     categoriaEvento(bozza) === t.id
                       ? "bg-card shadow-card text-foreground"
                       : "text-muted-foreground",
@@ -281,7 +281,9 @@ function GestioneEventi() {
 
       <Section titolo="Eventi in calendario">
         {isPending ? (
-          <p className="text-center text-xs text-muted-foreground">Carico gli eventi…</p>
+          <p aria-busy="true" className="text-center text-xs text-muted-foreground">
+            Carico gli eventi…
+          </p>
         ) : (
           <div className="space-y-2">
             {eventi.map((e) => (
@@ -291,14 +293,14 @@ function GestioneEventi() {
               >
                 <div className="min-w-0 flex-1">
                   <p className="truncate text-sm font-bold leading-tight">{e.titolo}</p>
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     {formatData(e.data)} · {e.ora} · {e.luogo || "luogo da definire"}
                   </p>
                 </div>
                 <button
                   type="button"
                   onClick={() => setBozza(e)}
-                  className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-secondary text-foreground active:scale-95"
+                  className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-secondary text-foreground active:scale-95"
                   aria-label={`Modifica ${e.titolo}`}
                 >
                   <Pencil className="h-4 w-4" />
@@ -306,7 +308,7 @@ function GestioneEventi() {
                 <button
                   type="button"
                   onClick={() => rimuovi(e.id)}
-                  className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-destructive/10 text-destructive active:scale-95"
+                  className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-destructive/10 text-destructive active:scale-95"
                   aria-label={`Elimina ${e.titolo}`}
                 >
                   <Trash2 className="h-4 w-4" />
@@ -323,7 +325,7 @@ function GestioneEventi() {
 function Campo({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
       <span className="mt-1 block">{children}</span>
@@ -345,7 +347,7 @@ function Interruttore({
       type="button"
       onClick={onClick}
       className={cn(
-        "rounded-full px-3 py-1.5 text-[11px] font-bold uppercase transition-colors",
+        "rounded-full px-3 py-1.5 text-xs font-bold uppercase transition-colors",
         attivo ? "bg-accent text-accent-foreground" : "bg-secondary text-muted-foreground",
       )}
     >
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 05947dd..ae67153 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Flame, ChevronRight } from "lucide-react";
 import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
 import { PromemoriaPalloni } from "@/components/crapp/PromemoriaPalloni";
-import { Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
+import { Card, Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
 import { CompletaProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import { Reveal } from "@/components/motion/Reveal";
 import { Barra } from "@/components/motion/Barra";
@@ -41,6 +41,7 @@ function Index() {
   const oggi = new Date().toISOString().slice(0, 10);
   const prossimi: Evento[] = eventi.filter((e) => e.data >= oggi).slice(0, 3);
   const prossimo = prossimi[0] ?? null;
+  const daConfermare = prossimi.slice(1);
   const linkProssimo = prossimo ? linkPerEvento(prossimo) : null;
   const { data: csi } = useCsi();
   const noi = csi?.classifica.find((r) => isNostraSquadra(r.squadra));
@@ -66,10 +67,10 @@ function Index() {
       <Reveal as="section" className="bg-hero px-5 pb-10 pt-7 text-primary-foreground">
         <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
           <div className="min-w-0">
-            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/60">
+            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/80">
               Ciao {giocatore.nome.split(" ")[0]}
             </p>
-            <h1 className="font-display text-4xl uppercase leading-none">CrAPP</h1>
+            <h1 className="font-display-lg text-4xl uppercase leading-none">CrAPP</h1>
           </div>
           <TeamLogo className="h-12 w-12" />
         </div>
@@ -77,20 +78,20 @@ function Index() {
         <div className="mt-6 grid grid-cols-3 gap-2 text-center">
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="font-display text-2xl leading-none">{noi ? `${noi.pos}º` : "—"}</p>
-            <p className="text-[10px] uppercase text-primary-foreground/60">In classifica</p>
+            <p className="text-xs uppercase text-primary-foreground/80">In classifica</p>
           </div>
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="font-display text-2xl leading-none">
               {noi ? `${noi.vinte}-${noi.perse}` : "—"}
             </p>
-            <p className="text-[10px] uppercase text-primary-foreground/60">Bilancio</p>
+            <p className="text-xs uppercase text-primary-foreground/80">Bilancio</p>
           </div>
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="inline-flex items-center gap-1 font-display text-2xl leading-none">
               <Flame className="h-4 w-4 text-accent" />
               {giocatore.streak}
             </p>
-            <p className="text-[10px] uppercase text-primary-foreground/60">Streak</p>
+            <p className="text-xs uppercase text-primary-foreground/80">Streak</p>
           </div>
         </div>
       </Reveal>
@@ -122,10 +123,16 @@ function Index() {
 
       <Section titolo="Da confermare" indice={3}>
         <div className="space-y-3">
-          {prossimi.slice(1).map((e) => {
-            const link = linkPerEvento(e);
-            return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />;
-          })}
+          {daConfermare.length > 0 ? (
+            daConfermare.map((e) => {
+              const link = linkPerEvento(e);
+              return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />;
+            })
+          ) : (
+            <p className="rounded-3xl bg-card p-4 text-xs text-muted-foreground shadow-card">
+              Nient'altro da confermare: sei in pari.
+            </p>
+          )}
         </div>
       </Section>
 
@@ -161,7 +168,7 @@ function Index() {
                   {ultima.parziali.map((p, i) => (
                     <span
                       key={i}
-                      className="rounded-lg bg-secondary px-2 py-1 text-[11px] font-semibold tabular-nums"
+                      className="rounded-lg bg-secondary px-2 py-1 text-xs font-semibold tabular-nums"
                     >
                       {p[0]}-{p[1]}
                     </span>
@@ -178,7 +185,7 @@ function Index() {
                 {corpo}
               </Link>
             ) : (
-              <div className="premi rounded-3xl bg-card p-4 shadow-card">{corpo}</div>
+              <Card>{corpo}</Card>
             );
           })()
         ) : (
@@ -201,7 +208,7 @@ function Index() {
         }
       >
         {obiettivo ? (
-          <div className="premi rounded-3xl bg-card p-4 shadow-card">
+          <Card>
             <div className="flex items-center gap-2 text-sm font-bold">
               <span className="text-base leading-none">{obiettivo.emoji}</span> {obiettivo.titolo}
             </div>
@@ -213,8 +220,8 @@ function Index() {
             <p className="mt-1 text-xs font-semibold text-accent">
               {microcopyObiettivo(obiettivo)}
             </p>
-            <p className="mt-1 text-[11px] text-muted-foreground">{obiettivo.impatto}</p>
-          </div>
+            <p className="mt-1 text-xs text-muted-foreground">{obiettivo.impatto}</p>
+          </Card>
         ) : null}
       </Section>
 
diff --git a/src/routes/partita.$id.tsx b/src/routes/partita.$id.tsx
index f324424..822af11 100644
--- a/src/routes/partita.$id.tsx
+++ b/src/routes/partita.$id.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { ArrowLeft, MapPin, Clock, Users, Trophy, Swords, Download } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { PageHeader, Section } from "@/components/crapp/ui-bits";
+import { Card, PageHeader, Section } from "@/components/crapp/ui-bits";
 import { formatData } from "@/lib/crapp-data";
 import { convocatiEvento, useEvento } from "@/lib/eventi";
 import { useRosa } from "@/lib/rosa";
@@ -210,7 +210,7 @@ function PartitaDetail() {
 
       {scout && totaliTeam ? (
         <Section titolo="Report tecnico">
-          <div className="rounded-3xl bg-card p-4 shadow-card">
+          <Card>
             <div className="grid grid-cols-4 gap-2 text-center">
               {[
                 { l: "Punti", v: totaliTeam.punti },
@@ -220,13 +220,13 @@ function PartitaDetail() {
               ].map((t) => (
                 <div key={t.l} className="rounded-2xl bg-secondary p-2.5">
                   <p className="font-display text-xl leading-none">{t.v}</p>
-                  <p className="mt-1 text-[10px] font-semibold uppercase text-muted-foreground">
+                  <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
                     {t.l}
                   </p>
                 </div>
               ))}
             </div>
-            <p className="mt-4 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            <p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground">
               Dettaglio giocatori (uso interno allenatori)
             </p>
             <div className="mt-2 space-y-1">
@@ -262,7 +262,7 @@ function PartitaDetail() {
                 <Download className="h-4 w-4" /> Esporta CSV
               </button>
             ) : null}
-          </div>
+          </Card>
         </Section>
       ) : null}
 
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index eef38bb..c7900a3 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Flame, Camera, Trash2, Bell, LogOut, ShieldCheck, Bug, Lightbulb } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { PageHeader, Section, SezioneTendina, StatTile } from "@/components/crapp/ui-bits";
+import { Card, PageHeader, Section, SezioneTendina, StatTile } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import {
   caricaAvatar,
@@ -97,15 +97,12 @@ function Profilo() {
     }
   }
 
-  const percPresenze = g.totaliEventi
-    ? Math.round((g.presenze / g.totaliEventi) * 100)
-    : 0;
+  const percPresenze = g.totaliEventi ? Math.round((g.presenze / g.totaliEventi) * 100) : 0;
 
   async function onFile(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
     e.target.value = "";
     if (!file || !g) return;
-    if (!confirm("Aggiornare l'immagine profilo?")) return;
     try {
       await caricaAvatar(g.id, file);
       setBust(Date.now());
@@ -121,7 +118,7 @@ function Profilo() {
       <PageHeader titolo={g.nome} sottotitolo={`#${g.numero} · ${g.ruolo}`} />
 
       <Reveal className="-mt-6 px-5">
-        <div className="premi rounded-3xl bg-card p-4 shadow-card">
+        <Card>
           <div className="flex flex-col items-center gap-4">
             <div className="relative">
               <Avatar id={g.id} fallback={g.iniziali} className="h-20 w-20 text-2xl" bust={bust} />
@@ -135,7 +132,7 @@ function Profilo() {
               <button
                 type="button"
                 onClick={() => inputRef.current?.click()}
-                className="absolute -bottom-1 -right-1 grid h-8 w-8 place-items-center rounded-full bg-accent-grad text-accent-foreground shadow-pop"
+                className="absolute -bottom-1 -right-1 grid h-11 w-11 place-items-center rounded-full bg-accent-grad text-accent-foreground shadow-pop"
                 aria-label="Cambia foto"
               >
                 <Camera className="h-4 w-4" />
@@ -146,7 +143,7 @@ function Profilo() {
             <button
               type="button"
               onClick={() => inputRef.current?.click()}
-              className="flex-1 rounded-xl bg-secondary px-3 py-2 text-xs font-bold uppercase tracking-wide"
+              className="premi min-h-11 flex-1 rounded-xl bg-secondary px-3 text-xs font-bold uppercase tracking-wide"
             >
               Cambia immagine profilo
             </button>
@@ -164,14 +161,14 @@ function Profilo() {
                     toast.error("Non sono riuscito a rimuovere l'immagine");
                   }
                 }}
-                className="grid h-9 w-9 place-items-center rounded-xl bg-secondary text-muted-foreground"
+                className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
                 aria-label="Rimuovi immagine"
               >
                 <Trash2 className="h-4 w-4" />
               </button>
             ) : null}
           </div>
-        </div>
+        </Card>
       </Reveal>
 
       <Section titolo="Stagione" indice={1}>
@@ -213,11 +210,11 @@ function Profilo() {
             type="button"
             onClick={cambiaNotifiche}
             disabled={!supportate || inCorso}
-            className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60"
+            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60"
           >
             <span className="min-w-0">
               <span className="block truncate">Notifiche turno palloni</span>
-              <span className="block text-[11px] text-muted-foreground">
+              <span className="block text-xs text-muted-foreground">
                 {supportate
                   ? notifiche
                     ? "Attive su questo dispositivo"
@@ -236,21 +233,10 @@ function Profilo() {
               <Bell className="h-4 w-4" />
             </span>
           </button>
-          {[
-            "Notifiche convocazioni",
-            "Promemoria allenamenti",
-            "Cambi orario",
-            "Bacheca squadra",
-          ].map((v) => (
-            <label key={v} className="flex items-center justify-between gap-3 px-4 py-3 text-sm">
-              <span className="min-w-0 truncate">{v}</span>
-              <input type="checkbox" defaultChecked className="h-5 w-9 accent-[var(--accent)]" />
-            </label>
-          ))}
           {admin ? (
             <Link
               to="/admin"
-              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+              className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
             >
               <span className="min-w-0 truncate">Dashboard amministratore</span>
               <ShieldCheck className="h-4 w-4 text-muted-foreground" />
@@ -260,7 +246,7 @@ function Profilo() {
             href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
           >
             <span className="min-w-0 truncate">Segnala un bug</span>
             <Bug className="h-4 w-4 text-muted-foreground" />
@@ -269,7 +255,7 @@ function Profilo() {
             href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
           >
             <span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span>
             <Lightbulb className="h-4 w-4 text-muted-foreground" />
@@ -277,7 +263,7 @@ function Profilo() {
           <button
             type="button"
             onClick={logout}
-            className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
           >
             <span className="min-w-0 truncate">Esci</span>
             <LogOut className="h-4 w-4 text-muted-foreground" />
diff --git a/src/routes/scout.tsx b/src/routes/scout.tsx
index b7f2815..f65a3f4 100644
--- a/src/routes/scout.tsx
+++ b/src/routes/scout.tsx
@@ -3,6 +3,7 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { Undo2, Save, CheckCircle2, Radio, Lock, CalendarX2, LogOut } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { formatData } from "@/lib/crapp-data";
 import type { Evento } from "@/lib/eventi";
 import { useRosa } from "@/lib/rosa";
@@ -322,7 +323,7 @@ function ScoutBoard({
     <>
       <header className="sticky top-0 z-30 bg-hero px-5 pb-4 pt-6 text-primary-foreground">
         <div className="flex items-center justify-between gap-3">
-          <span className="inline-flex items-center gap-1.5 rounded-full bg-primary-foreground/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide">
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-primary-foreground/10 px-2.5 py-1 text-xs font-bold uppercase tracking-wide">
             <Radio className="h-3 w-3 text-accent" /> Scout live · Set {setCorrente}
           </span>
           <div className="flex items-center gap-2">
@@ -346,14 +347,14 @@ function ScoutBoard({
 
         <div className="mt-3 grid grid-cols-[1fr_auto_1fr] items-center gap-2 text-center">
           <div className="min-w-0">
-            <p className="truncate text-[11px] uppercase text-primary-foreground/60">CRAP Volley</p>
+            <p className="truncate text-xs uppercase text-primary-foreground/60">CRAP Volley</p>
             <p className="font-display text-5xl leading-none text-accent">{puntiNoi}</p>
           </div>
           <p className="font-display text-2xl leading-none text-primary-foreground/50">
             {setNostri}-{setLoro}
           </p>
           <div className="min-w-0">
-            <p className="truncate text-[11px] uppercase text-primary-foreground/60">
+            <p className="truncate text-xs uppercase text-primary-foreground/60">
               {avversario || "Avversario"}
             </p>
             <p className="font-display text-5xl leading-none">{puntiLoro}</p>
@@ -365,7 +366,7 @@ function ScoutBoard({
             {setChiusi.map((p, i) => (
               <span
                 key={i}
-                className="rounded-lg bg-primary-foreground/10 px-2 py-0.5 text-[11px] font-semibold tabular-nums"
+                className="rounded-lg bg-primary-foreground/10 px-2 py-0.5 text-xs font-semibold tabular-nums"
               >
                 {p[0]}-{p[1]}
               </span>
@@ -375,7 +376,7 @@ function ScoutBoard({
       </header>
 
       <section className="px-5 pt-4">
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           1. Tocca il giocatore
         </p>
         <div className="grid grid-cols-4 gap-2">
@@ -393,10 +394,10 @@ function ScoutBoard({
                 )}
               >
                 <p className="font-display text-2xl leading-none">{g.numero}</p>
-                <p className="mt-1 text-[10px] font-bold leading-tight">{g.nome}</p>
+                <p className="mt-1 text-xs font-bold leading-tight">{g.nome}</p>
                 <p
                   className={cn(
-                    "text-[10px] tabular-nums",
+                    "text-xs tabular-nums",
                     attivo ? "text-accent-foreground/70" : "text-muted-foreground",
                   )}
                 >
@@ -409,7 +410,7 @@ function ScoutBoard({
       </section>
 
       <section className="px-5 pt-4">
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           2. Tocca l'azione
         </p>
         <div className="grid grid-cols-2 gap-2">
@@ -447,7 +448,7 @@ function ScoutBoard({
 
       <section className="px-5 pt-4">
         <div className="rounded-3xl bg-card p-3 shadow-card">
-          <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Ultime azioni
           </p>
           {ultime.length === 0 ? (
@@ -467,7 +468,7 @@ function ScoutBoard({
                     <span className="truncate">{g ? `#${g.numero} ${g.nome}` : "Avversario"}</span>
                     <span
                       className={cn(
-                        "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase",
+                        "shrink-0 rounded-full px-2 py-0.5 text-xs font-bold uppercase",
                         azioniMeta[a.tipo].className,
                       )}
                     >
@@ -482,8 +483,8 @@ function ScoutBoard({
       </section>
 
       <section className="px-5 pt-4">
-        <div className="rounded-3xl bg-card p-4 shadow-card">
-          <label className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <Card>
+          <label className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Avversario
           </label>
           <input
@@ -507,7 +508,7 @@ function ScoutBoard({
               </button>
             ))}
           </div>
-        </div>
+        </Card>
       </section>
 
       <section className="grid grid-cols-2 gap-2 px-5 pb-4 pt-4">
diff --git a/src/routes/squadra.tsx b/src/routes/squadra.tsx
index 8f2f395..a73ac88 100644
--- a/src/routes/squadra.tsx
+++ b/src/routes/squadra.tsx
@@ -30,7 +30,7 @@ import {
 
 function RuoloBadge({ ruolo }: { ruolo: string }) {
   return (
-    <span className="inline-flex items-center rounded-full bg-accent px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-accent-foreground">
+    <span className="inline-flex items-center rounded-full bg-accent px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-accent-foreground">
       {ruolo}
     </span>
   );
@@ -113,7 +113,7 @@ function Squadra() {
                 <button
                   type="button"
                   onClick={() => setAperto(isOpen ? null : g.id)}
-                  className="flex w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
+                  className="flex min-h-11 w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
                   aria-expanded={isOpen}
                 >
                   <Avatar
@@ -125,7 +125,7 @@ function Squadra() {
                     <span className="block truncate text-sm font-bold leading-tight">{g.nome}</span>
                     <span className="mt-1 flex items-center gap-2">
                       <RuoloBadge ruolo={g.ruolo} />
-                      <span className="text-[11px] text-muted-foreground">
+                      <span className="text-xs text-muted-foreground">
                         {g.numero ? `#${g.numero}` : "n° da definire"}
                       </span>
                     </span>
@@ -135,8 +135,17 @@ function Squadra() {
                       {sbloccati.map((b) => {
                         const Icon = b.def.icon;
                         return (
-                          <span key={b.def.id} className="cursor-help" title={b.def.nome}>
-                            <Icon className={cn("h-3 w-3", gradoMeta[b.grado!].text)} />
+                          <span
+                            key={b.def.id}
+                            title={`${b.def.nome} — ${gradoMeta[b.grado!].label}`}
+                          >
+                            <Icon
+                              className={cn("h-3.5 w-3.5", gradoMeta[b.grado!].text)}
+                              aria-hidden="true"
+                            />
+                            <span className="sr-only">
+                              {b.def.nome}: {gradoMeta[b.grado!].label}
+                            </span>
                           </span>
                         );
                       })}
@@ -170,14 +179,14 @@ function Squadra() {
                       ].map((s) => (
                         <div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center">
                           <p className="font-display text-xl leading-none">{s.v}</p>
-                          <p className="mt-1 text-[10px] font-semibold uppercase text-muted-foreground">
+                          <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
                             {s.l}
                           </p>
                         </div>
                       ))}
                     </div>
 
-                    <p className="mt-4 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                    <p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground">
                       Badge sbloccati · {collezioneBadge(g).ottenuti}/{collezioneBadge(g).totali}
                     </p>
                     {sbloccati.length === 0 ? (
@@ -194,18 +203,13 @@ function Squadra() {
                               <div className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}>
                                 <Icon className={cn("h-4 w-4", meta.text)} />
                                 <p className="mt-1 text-xs font-bold leading-tight">{b.def.nome}</p>
-                                <p className="text-[10px] text-muted-foreground">
+                                <p className="text-xs text-muted-foreground">
                                   {b.valore} {b.def.unita}
                                   {b.prossimaSoglia
                                     ? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}`
                                     : ""}
                                 </p>
-                                <p
-                                  className={cn(
-                                    "mt-1.5 text-[10px] font-bold uppercase",
-                                    meta.text,
-                                  )}
-                                >
+                                <p className={cn("mt-1.5 text-xs font-bold uppercase", meta.text)}>
                                   {meta.label}
                                 </p>
                               </div>
@@ -240,8 +244,9 @@ function Squadra() {
               key={c.id}
               type="button"
               onClick={() => setCriterio(c.id)}
+              aria-pressed={criterio === c.id}
               className={cn(
-                "min-w-0 flex-1 truncate rounded-full px-1.5 py-1.5 text-center text-[10px] font-bold uppercase transition-colors",
+                "min-h-11 min-w-0 flex-1 truncate rounded-full px-1.5 text-center text-xs font-bold uppercase transition-colors",
                 criterio === c.id
                   ? "bg-accent text-accent-foreground shadow-pop"
                   : "bg-secondary text-muted-foreground",
@@ -264,7 +269,7 @@ function Squadra() {
                       {g.nome}
                       {i === 0 ? <Crown className="ml-1 inline h-3.5 w-3.5 text-warning" /> : null}
                     </p>
-                    <p className="truncate text-[11px] text-muted-foreground">
+                    <p className="truncate text-xs text-muted-foreground">
                       #{g.numero} · {g.ruolo} · {g.streak} presenze consecutive
                     </p>
                   </div>
@@ -273,12 +278,11 @@ function Squadra() {
                   {valore(g, criterio) || "—"}
                 </span>
               </div>
-              <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-secondary">
-                <div
-                  className="h-full rounded-full bg-accent-grad"
-                  style={{ width: `${Math.max(6, (valore(g, criterio) / max) * 100)}%` }}
-                />
-              </div>
+              <Barra
+                percentuale={Math.max(6, (valore(g, criterio) / max) * 100)}
+                altezza="h-1.5"
+                trackClassName="mt-2"
+              />
             </div>
           ))}
         </div>
@@ -290,7 +294,7 @@ function Squadra() {
           <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
             <div className="flex items-end justify-between gap-3">
               <div>
-                <p className="text-[11px] font-semibold uppercase tracking-wide text-primary-foreground/60">
+                <p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
                   Progresso collettivo
                 </p>
                 <p className="font-display text-4xl leading-none">
@@ -326,7 +330,7 @@ function Squadra() {
                   </div>
                   <span
                     className={cn(
-                      "rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide",
+                      "rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-wide",
                       fatto
                         ? "bg-success text-success-foreground"
                         : "bg-secondary text-muted-foreground",
@@ -341,7 +345,7 @@ function Squadra() {
                   {o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
                 </p>
                 <p className="mt-1 text-xs font-semibold text-accent">{microcopyObiettivo(o)}</p>
-                <p className="mt-0.5 text-[11px] text-muted-foreground">{o.impatto}</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">{o.impatto}</p>
               </Reveal>
             );
           })}
@@ -358,9 +362,7 @@ function Squadra() {
                   <div className="flex items-center gap-2">
                     <Icon className="h-5 w-5 text-accent" />
                     <p className="text-sm font-bold leading-tight">{b.nome}</p>
-                    <p className="ml-auto text-[10px] text-muted-foreground">
-                      {descrizioneSoglie(b)}
-                    </p>
+                    <p className="ml-auto text-xs text-muted-foreground">{descrizioneSoglie(b)}</p>
                   </div>
                   <div className="mt-2 grid grid-cols-3 gap-1.5">
                     {gradiOrdine.map((grado) => {
@@ -376,11 +378,11 @@ function Squadra() {
                           key={grado}
                           className={cn("rounded-2xl p-2 text-center ring-1", meta.bg, meta.ring)}
                         >
-                          <p className={cn("text-[10px] font-bold uppercase", meta.text)}>
+                          <p className={cn("text-xs font-bold uppercase", meta.text)}>
                             {meta.label}
                           </p>
                           <p className="font-display text-lg leading-none">{b.soglie[grado]}</p>
-                          <p className="text-[10px] text-muted-foreground">
+                          <p className="text-xs text-muted-foreground">
                             {quanti}/{rosa.length}
                           </p>
                         </div>

From 26bacbf700d4bebc1836a656bf90d55308f6dac7 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:42:55 +0200
Subject: [PATCH 09/37] Registra DD-021 e DD-022 e allinea la documentazione
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DD-021 (molle interrompibili con motion) e DD-022 (l'app è solo chiara)
motivano le due scelte che un domani sembreranno arbitrarie: perché è entrata
una libreria di animazione dopo averne tolte 45, e perché il tema scuro è
stato cancellato invece che completato.

DD-021 riporta il numero misurato e scomodo: il bundle client cresce da 267 a
308 KB gzip. Togliere dipendenze mai importate non lo riduce, perché il
tree-shaking già le escludeva; il guadagno è sulle 50 dipendenze dirette che
diventano 21.

ARCHITECTURE e README non descrivevano più lo stack reale (Radix/shadcn) e la
sezione UI ignorava la primitiva Card e il sistema di molle. Tolto anche
`hooks/` dall'albero del progetto: la cartella non esiste più.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 README.md                |  2 +-
 docs/ARCHITECTURE.md     | 33 ++++++++++-----
 docs/CHANGELOG.md        | 37 +++++++++++++++++
 docs/DESIGN_DECISIONS.md | 86 ++++++++++++++++++++++++++++++++++++++--
 4 files changed, 144 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 3b76514..0eb56e9 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ CrAPP è una Progressive Web App sviluppata per digitalizzare completamente la g
 
 ## Stack tecnologico
 
-React 19, TypeScript, TanStack Start (SSR), Vite 8, Tailwind CSS 4, Radix UI / shadcn,
+React 19, TypeScript, TanStack Start (SSR), Vite 8, Tailwind CSS 4, motion, vaul,
 Supabase (PostgreSQL, Auth, Storage), Vercel, GitHub. Dettagli in
 [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md).
 
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 47d5f15..3fc424c 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -5,12 +5,12 @@ riferimento tecnico — `CLAUDE.md` non ripete questi contenuti, li richiama.
 
 ## Stack
 
-| Livello       | Tecnologie                                                                            |
-| ------------- | ------------------------------------------------------------------------------------- |
-| Frontend      | React 19, TypeScript, TanStack Start (SSR), Vite 8, Tailwind CSS 4, Radix UI / shadcn |
-| Backend       | Supabase (PostgreSQL, Auth, Storage)                                                  |
-| Hosting       | Vercel                                                                                |
-| Versionamento | Git, GitHub                                                                           |
+| Livello       | Tecnologie                                                                       |
+| ------------- | -------------------------------------------------------------------------------- |
+| Frontend      | React 19, TypeScript, TanStack Start (SSR), Vite 8, Tailwind CSS 4, motion, vaul |
+| Backend       | Supabase (PostgreSQL, Auth, Storage)                                             |
+| Hosting       | Vercel                                                                           |
+| Versionamento | Git, GitHub                                                                      |
 
 Le dipendenze sono installate con **bun** (`bun.lock`, `bunfig.toml`). `bunfig.toml` impone
 `minimumReleaseAge = 24h` come guardia supply-chain: aggiungere un pacchetto a
@@ -24,7 +24,6 @@ src/
   routes/       routing file-based
   lib/          logica di dominio, un file per modulo
   integrations/ client Supabase e integrazioni esterne
-  hooks/
   assets/
 supabase/       migration SQL
 test/           suite di test (unit, integration, end-to-end)
@@ -84,9 +83,23 @@ quando il database non risponde.
 
 ## UI
 
-Componenti condivisi in `src/components/crapp/` (`ui-bits.tsx` per `PageHeader`, `Section`,
-`StatTile`), primitive shadcn in `src/components/ui/`, animazioni in
-`src/components/motion/`. Mobile-first (DD-005): poche schermate, pochi click.
+Componenti condivisi in `src/components/crapp/` (`ui-bits.tsx` per `Card`, `PageHeader`,
+`Section`, `StatTile`), animazioni in `src/components/motion/`. Mobile-first (DD-005): poche
+schermate, pochi click.
+
+In `src/components/ui/` restano solo le due primitive shadcn davvero usate, `drawer` (vaul) e
+`sonner`: le altre 43 non erano importate da nessuna parte (DD-021). Il resto dell'interfaccia
+è composto con Tailwind e la primitiva `Card`, che è l'unica definizione di raggio, sfondo e
+ombra delle superfici.
+
+L'app è **solo chiara** (DD-022): non esiste un tema scuro e `:root` dichiara
+`color-scheme: light`.
+
+Il movimento usa molle interrompibili di `motion` con i preset in `src/lib/molla.ts`
+(DD-021): `molla.ui` di default, `molla.slancio` solo dopo un gesto con inerzia,
+`molla.foglio` per drawer e cambi di vista. `proietta()` calcola dove finirebbe un elemento
+lanciato, così swipe come quello del calendario atterrano dove il gesto stava andando.
+`src/lib/motion.ts` conserva solo il rilevamento del movimento ridotto e i coriandoli.
 
 ## Comandi
 
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 416f238..9767e12 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,43 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Revisione dell'interfaccia: accessibilità, movimento, peso
+
+- **Contrasto**: `--success`, `--info` e `--training` erano tra 3.3:1 e 3.5:1 con il testo
+  bianco sopra (chip «Presente», «Allenamento», celle del calendario): ora sono sotto la
+  soglia di luminosità che garantisce 4.5:1. I gradi dei badge usavano `text-oro` e
+  `text-argento` su bianco, cioè 1.9:1 e 2.5:1 — praticamente invisibili: nascono i token
+  `--oro-testo`, `--argento-testo`, `--bronzo-testo` per il testo, mentre le versioni chiare
+  restano su sfondi e bordi.
+- **PWA**: mancava `viewport-fit=cover`, quindi `env(safe-area-inset-bottom)` valeva sempre 0
+  e su iPhone la BottomNav finiva sotto la home bar. `theme-color` e `background_color` erano
+  `#111111` su un'app chiara: barra di stato nera e splash nero prima di una UI bianca.
+- **`lang="it"`** al posto di `lang="en"`, su un'app interamente in italiano; 404 e schermata
+  d'errore tradotte; anteprima social ripulita dall'immagine Lovable scaduta e da
+  `twitter:site` che puntava a `@Lovable`.
+- **Tocco e tastiera**: nessun `:focus-visible` era definito (ora c'è una regola globale);
+  chip presenza, filtri e bottoni icona portati a 44px; `aria-current` sulla navigazione,
+  `aria-pressed` sui controlli a stato, `aria-controls` sulle sezioni a tendina, `aria-busy`
+  sui caricamenti. Il testo sotto i 12px è sparito (108 occorrenze).
+- **Movimento** (DD-021): molle interrompibili di `motion` al posto delle `@keyframes` a
+  durata fissa. `Reveal` compare quando entra davvero nel viewport (prima consumava
+  l'animazione a vuoto sotto la piega); `Barra` anima `scaleX` invece di `width`; `Numero`
+  cambia rotta se il dato cambia a metà conteggio. Il calendario si cambia mese anche con lo
+  swipe, con il punto d'arrivo scelto proiettando la velocità di rilascio.
+- **Meno dipendenze** (DD-021): rimossi 43 componenti `src/components/ui/` non importati da
+  nessuna parte e ~45 dipendenze (tutti i `@radix-ui/*`, `recharts`, `react-hook-form`,
+  `date-fns`, `embla`, `cmdk`; `zod` resta perché lo usano le route API). Restano `drawer` e
+  `sonner`. Il bundle **non** cala per questo — quel codice era già escluso dal
+  tree-shaking — ma cala la superficie da aggiornare e da controllare: 50 dipendenze dirette
+  diventano 21. Il bundle client cresce di ~42 KB gzip per `motion` (267 → 308 KB).
+- **Primitiva `Card`**: `rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte.
+- **Tema scuro rimosso** (DD-022): esisteva un blocco `.dark` mai applicato e incoerente.
+- Tolte le quattro switch di notifica in `/profilo` che erano `defaultChecked` e non facevano
+  niente, e la conferma nativa prima di _cambiare_ la foto profilo (resta su quella che la
+  rimuove, che è irreversibile).
+- Le celle del calendario con più tipi di evento non usano più un gradiente a fette con
+  un'ombra bianca sul numero per restare leggibili: fondo neutro e un puntino per tipo.
+
 ### Serie di presenze calcolate sui dati reali
 
 - `serieConsecutiva()` (`src/lib/presenze.ts`) deriva le serie da eventi passati e
diff --git a/docs/DESIGN_DECISIONS.md b/docs/DESIGN_DECISIONS.md
index 60d6909..fce01f8 100644
--- a/docs/DESIGN_DECISIONS.md
+++ b/docs/DESIGN_DECISIONS.md
@@ -36,12 +36,14 @@ Serve a rispondere a domande del tipo:
 | [DD-018](#dd-018--collegamento-automatico-giocatoreaccount-per-email)             | Collegamento automatico per email     |
 | [DD-019](#dd-019--il-branch-dei-commit-lo-decide-lutente)                         | Il branch lo decide l'utente          |
 | [DD-020](#dd-020--una-funzione-modificata-senza-test-non-è-finita)                | Test obbligatori e verdi              |
+| [DD-021](#dd-021--molle-interrompibili-al-posto-delle-animazioni-a-durata-fissa)  | Molle interrompibili con motion       |
+| [DD-022](#dd-022--lapp-è-solo-chiara)                                             | App solo chiara                       |
 
 **In valutazione**
 
-| ID                                                                | Titolo                 |
-| ----------------------------------------------------------------- | ---------------------- |
-| [DD-014](#dd-014--convergenza-schema-database-eventi-e-presenze)  | Convergenza schema DB  |
+| ID                                                               | Titolo                |
+| ---------------------------------------------------------------- | --------------------- |
+| [DD-014](#dd-014--convergenza-schema-database-eventi-e-presenze) | Convergenza schema DB |
 
 **Sostituite**
 
@@ -668,3 +670,81 @@ dicendo perché.
 
 **Riesame**  
 Se comparisse un ambiente di staging stabile che rende superflua parte della copertura.
+
+---
+
+### DD-021 — Molle interrompibili al posto delle animazioni a durata fissa
+
+**Data:** 5 settembre 2026  
+**Stato:** Accettata
+
+**Contesto**  
+Il movimento era fatto con `@keyframes` CSS e transizioni a durata fissa. Funzionava, ma
+nessuna di quelle animazioni può essere interrotta: se l'utente tocca o scorre a metà, la
+sequenza va avanti per conto suo, e per ripartire deve prima finire. Mancava del tutto
+qualsiasi gesto: il calendario si cambiava solo con due frecce.
+
+Contemporaneamente 43 componenti su 45 in `src/components/ui/` non erano importati da nessuna
+parte, e con loro ~45 dipendenze (tutti i `@radix-ui/*`, `recharts`, `react-hook-form`,
+`date-fns`, `embla`, `cmdk`, …): superficie di aggiornamento e di sicurezza pagata a vuoto.
+
+**Decisione**  
+Aggiungere **una** libreria di animazione — `motion` — e toglierne ~45 inutilizzate. I
+parametri stanno in `src/lib/molla.ts` e sono i due di Apple (_Designing Fluid Interfaces_):
+rimbalzo e durata, non massa/rigidità/smorzamento. `molla.ui` (nessun sorpasso) è il default;
+`molla.slancio` si usa **solo** dopo un gesto che portava già inerzia.
+
+**Alternative scartate**
+
+- Tenere solo CSS con easing `linear()` e View Transitions → copre le comparse, non i gesti:
+  niente handoff di velocità, niente ripartenza dal valore corrente.
+- GSAP → più grande e orientato alla timeline, cioè al modello prescritto che stiamo lasciando.
+
+**Conseguenze**
+
+- Le animazioni partono dal valore _a schermo_: un dato che cambia a metà transizione non
+  produce salti.
+- Il movimento è ora codice JavaScript: senza JS non c'è comparsa (l'app già non funziona
+  senza, per auth e dati).
+- `src/lib/motion.ts` resta solo per il movimento ridotto e i coriandoli.
+- `src/components/ui/` non è più una libreria: aggiungere una primitiva shadcn significa
+  installarla, non pescarla da lì.
+
+**Riesame**  
+Se il peso del bundle client diventasse un problema misurato, o se il web recuperasse
+nativamente l'interrompibilità (`ScrollTimeline` e `linear()` sono un primo passo).
+
+---
+
+### DD-022 — L'app è solo chiara
+
+**Data:** 5 settembre 2026  
+**Stato:** Accettata
+
+**Contesto**  
+`styles.css` conteneva un blocco `.dark` completo che non veniva mai applicato: nessun
+interruttore, nessun `prefers-color-scheme`. Peggio, era incoerente. In `.dark` l'accento
+diventava grigio-blu — il rosso del brand spariva — e mancavano del tutto `--success`,
+`--warning`, `--info`, `--training`, i metalli dei badge, i due gradienti e le due ombre. Un
+terzo stato: presente, sbagliato, morto.
+
+**Decisione**  
+CrAPP è un'app solo chiara. Il blocco `.dark` è rimosso e `:root` dichiara
+`color-scheme: light`, così anche i controlli nativi restano coerenti.
+
+**Alternative scartate**
+
+- Completare il tema scuro → è lavoro vero (gradienti, ombre, i due colori dei metalli, le
+  superfici traslucide) per una richiesta che nessuno ha fatto.
+- Lasciare il blocco lì «per dopo» → un tema mai attivato non si accorge di rompersi.
+
+**Conseguenze**
+
+- Chi riaprirà il tema scuro parte da zero, ma da zero onesto: la palette chiara ha ora
+  contrasti verificati e i token con suffisso `-testo` per i colori che come testo non
+  reggono.
+- La barra di stato (`theme-color`) e lo splash del manifest sono allineati al fondo chiaro.
+
+**Riesame**  
+Se arriva una richiesta reale dalla squadra, o se si gioca in palestre al buio abbastanza
+spesso da rendere il tema scuro una funzione e non un vezzo.

From 5a534547ae72c6c5c12c2812495fa43d96cd4ce2 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:43:02 +0200
Subject: [PATCH 10/37] Riformatta i file che prettier segnalava da prima
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`npm run format` ha toccato anche tre file estranei a questo lavoro:
`presenze.ts` aveva un errore prettier che `npm run lint` già segnalava, gli
altri due erano solo a capo nelle tabelle markdown. Stanno qui da soli per non
sporcare i commit di merito.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/DATABASE.md                  | 36 +++++++++++++++----------------
 docs/modules/obiettivi-squadra.md | 20 ++++++++---------
 src/lib/presenze.ts               |  4 +---
 3 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/docs/DATABASE.md b/docs/DATABASE.md
index 48d0493..9fa40a5 100644
--- a/docs/DATABASE.md
+++ b/docs/DATABASE.md
@@ -7,37 +7,37 @@ non in questo file.
 
 ## Anagrafica e utenti
 
-| Tabella             | Scopo                                                                                                                                                                                              | Note                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Tabella             | Scopo                                                                                                                                                                                              | Note                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `giocatori_squadra` | Anagrafica operativa della squadra, con ID testuali (`g1`…`gN`), dati gestiti dagli admin (nome, cognome, numero, ruolo), collegamento all'account (`auth_user_id`) ed email registrata (`email`). | Introdotta dalla migration `m1_giocatori_squadra`, source of truth della rosa (DD-015): `useRosa()` e gli altri punti che elencano i giocatori la leggono tramite `useGiocatoriSquadra()` (client) o `leggiGiocatoriSquadra()` (server), filtrando `attivo`. `src/lib/crapp-data.ts` resta solo come seed storico e fallback (`rosaFallback()`) quando il database non risponde, e come sorgente della data di nascita (non ancora una colonna di questa tabella). Vedi DD-015 e DD-016. La colonna `email` (migration `m5_email_giocatori_squadra`, impostabile anche da `/admin`) è la chiave del collegamento automatico account↔giocatore al primo accesso (DD-018): NULL finché non nota, oggi impostata per tutta la rosa attiva. Le colonne `numero_tessera`/`data_tessera` (migration `m8_tesseramento_csi`) tracciano chi è già tesserato al CSI; come `numero`/`ruolo` le scrive solo un admin, il trigger di M1/M5 le include tra i campi bloccati per chi reclama il proprio slot. |
-| `giocatori`         | Anagrafica giocatori con UUID.                                                                                                                                                                     | Presente ma **non usata** dal codice attuale: la convergenza è rinviata (DD-012, DD-014).                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `profili_giocatore` | Dati personali, metadati del documento d'identità, certificato medico e path dei file, in relazione 1:1 con `giocatori_squadra`.                                                                   | Creata dalla migration `m2_profili_giocatore` (DD-016). Letta da `src/lib/profili.ts`; le policy mostrano al giocatore solo il proprio profilo e all'admin tutti. I file non stanno qui: la tabella conserva i path nel bucket.                                                                                                                                                                                                                                                                         |
-| `user_roles`        | Ruoli applicativi (es. amministratore, giocatore).                                                                                                                                                 | Fonte dei permessi di amministrazione, letta da `src/lib/ruoli.ts` (DD-011). Il primo admin va inserito a mano; vedi [PROJECT_STATE.md](../PROJECT_STATE.md).                                                                                                                                                                                                                                                                                                                                           |
+| `giocatori`         | Anagrafica giocatori con UUID.                                                                                                                                                                     | Presente ma **non usata** dal codice attuale: la convergenza è rinviata (DD-012, DD-014).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `profili_giocatore` | Dati personali, metadati del documento d'identità, certificato medico e path dei file, in relazione 1:1 con `giocatori_squadra`.                                                                   | Creata dalla migration `m2_profili_giocatore` (DD-016). Letta da `src/lib/profili.ts`; le policy mostrano al giocatore solo il proprio profilo e all'admin tutti. I file non stanno qui: la tabella conserva i path nel bucket.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `user_roles`        | Ruoli applicativi (es. amministratore, giocatore).                                                                                                                                                 | Fonte dei permessi di amministrazione, letta da `src/lib/ruoli.ts` (DD-011). Il primo admin va inserito a mano; vedi [PROJECT_STATE.md](../PROJECT_STATE.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
 `giocatori_squadra` / `giocatori` sono usate da: Squadra, Profili, Presenze, Scout, Badge, Pagelle.
 
 ## Storage
 
-| Bucket              | Scopo                                                                                                                  | Note                                                                                                                                                                                                                                                                                              |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `profili-giocatore` | Documento d'identità, certificato medico e foto tessera, in cartelle per giocatore (`<giocatore_id>/<sezione>.<est>`). | **Privato** e destinato a restare tale: contiene documenti e dati sanitari, che non devono mai avere URL pubblici (DD-016 regola 4). Il giocatore gestisce solo la propria cartella, l'admin può scaricare tutto tramite signed URL a scadenza breve. Creato dalla migration `m2_profili_giocatore`. |
-| `avatar-giocatori` | Foto profilo mostrate nel cerchio avatar (Squadra, Profilo), un file per giocatore (`<giocatore_id>/avatar.jpg`). | **Pubblico**: foto informali, non documenti sensibili. Qualsiasi autenticato può caricare/sostituire/eliminare un file (nessun controllo per-proprietario, la maggior parte dei giocatori non ha ancora `auth_user_id` collegato, DD-018). Letto da `src/lib/avatar-store.ts`. Creato dalla migration `m6_avatar_giocatori`. |
+| Bucket              | Scopo                                                                                                                  | Note                                                                                                                                                                                                                                                                                                                         |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `profili-giocatore` | Documento d'identità, certificato medico e foto tessera, in cartelle per giocatore (`<giocatore_id>/<sezione>.<est>`). | **Privato** e destinato a restare tale: contiene documenti e dati sanitari, che non devono mai avere URL pubblici (DD-016 regola 4). Il giocatore gestisce solo la propria cartella, l'admin può scaricare tutto tramite signed URL a scadenza breve. Creato dalla migration `m2_profili_giocatore`.                         |
+| `avatar-giocatori`  | Foto profilo mostrate nel cerchio avatar (Squadra, Profilo), un file per giocatore (`<giocatore_id>/avatar.jpg`).      | **Pubblico**: foto informali, non documenti sensibili. Qualsiasi autenticato può caricare/sostituire/eliminare un file (nessun controllo per-proprietario, la maggior parte dei giocatori non ha ancora `auth_user_id` collegato, DD-018). Letto da `src/lib/avatar-store.ts`. Creato dalla migration `m6_avatar_giocatori`. |
 
 ## Eventi e presenze
 
-| Tabella             | Scopo                                                            | Note                                                                        |
-| ------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `eventi_app`        | Eventi gestionali utilizzati dall'app.                           | Modello in uso dal codice attuale.                                          |
+| Tabella             | Scopo                                                            | Note                                                                                                                                                                                                                                                                                                                                                |
+| ------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `eventi_app`        | Eventi gestionali utilizzati dall'app.                           | Modello in uso dal codice attuale.                                                                                                                                                                                                                                                                                                                  |
 | `risposte_presenze` | Risposte dei giocatori agli eventi.                              | Modello in uso dal codice attuale. `risposto_il` è l'istante della **prima** risposta (migration `m9_risposte_presenze_risposto_il`): confrontato con `eventi_app.creato_il` dà la serie "Conferme 24h". Un trigger lo rende immutabile, così un ripensamento non fa risultare rapida una risposta lenta — `aggiornato_il` resta l'ultima modifica. |
-| `eventi`            | Calendario generale: allenamenti, partite, eventi della squadra. | Modello "nuovo" con autenticazione e vincoli, non ancora adottato (DD-014). |
-| `presenze`          | Presenze agli eventi.                                            | Come sopra (DD-014).                                                        |
+| `eventi`            | Calendario generale: allenamenti, partite, eventi della squadra. | Modello "nuovo" con autenticazione e vincoli, non ancora adottato (DD-014).                                                                                                                                                                                                                                                                         |
+| `presenze`          | Presenze agli eventi.                                            | Come sopra (DD-014).                                                                                                                                                                                                                                                                                                                                |
 
 ## Scout
 
-| Tabella          | Scopo                                                           | Note                                                                                                                                                                                      |
-| ---------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `scout_sessioni` | Chi ha il controllo dello Scout Live per una partita (blocco condiviso), una riga per evento. | Letta/scritta da `src/lib/scout-live.ts`. Prima viveva solo in `localStorage`: "Scout occupato da X" non funzionava mai tra dispositivi diversi (fix M7). |
-| `scout_live`     | Stato in corso (azioni non ancora concluse) di una sessione di Scout Live.                    | Serve esclusivamente per statistiche di squadra, mai per classifiche individuali (DD-008). Letta/scritta da `src/lib/scout-stato.ts`.                     |
+| Tabella          | Scopo                                                                                         | Note                                                                                                                                                                                        |
+| ---------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `scout_sessioni` | Chi ha il controllo dello Scout Live per una partita (blocco condiviso), una riga per evento. | Letta/scritta da `src/lib/scout-live.ts`. Prima viveva solo in `localStorage`: "Scout occupato da X" non funzionava mai tra dispositivi diversi (fix M7).                                   |
+| `scout_live`     | Stato in corso (azioni non ancora concluse) di una sessione di Scout Live.                    | Serve esclusivamente per statistiche di squadra, mai per classifiche individuali (DD-008). Letta/scritta da `src/lib/scout-stato.ts`.                                                       |
 | `scout_partite`  | Archivio delle partite scoutate concluse (risultato, parziali, azioni).                       | Letta/scritta da `src/lib/scout-store.ts`. Prima il risultato finale finiva solo in `localStorage`: invisibile a chiunque non fosse il dispositivo di chi aveva chiuso la partita (fix M7). |
 
 ## Votazioni
diff --git a/docs/modules/obiettivi-squadra.md b/docs/modules/obiettivi-squadra.md
index 10d4e31..417191a 100644
--- a/docs/modules/obiettivi-squadra.md
+++ b/docs/modules/obiettivi-squadra.md
@@ -23,16 +23,16 @@ serie).
 
 ## Obiettivi definiti
 
-| Obiettivo                          | Calcolo                                          | Target | Fonte                                       |
-| ----------------------------------- | ------------------------------------------------- | ------ | -------------------------------------------- |
-| 90% presenze ad agosto              | risposte presente/ritardo sugli eventi del mese    | 90%    | `risposte_presenze`                          |
-| Tutti rispondono alle convocazioni  | risposte totali / eventi possibili                 | 90%    | `risposte_presenze`                          |
-| 250 presenze complessive            | somma presenze di tutta la rosa                    | 250    | aggregato da `useRosa()`                     |
-| Media pagelle da 7.5                | media di squadra                                   | 7.5    | `pagelle_voti`                               |
-| 200 pagelle compilate               | conteggio voti                                     | 200    | `pagelle_voti`                               |
-| Continuità di squadra               | giocatori con ≥3 allenamenti consecutivi           | 12     | `serieAllenamenti`                           |
-| 1 / 5 / 10 vittorie in campionato   | partite vinte da dati CSI ufficiali                | 1/5/10 | modulo [Collegamento CSI](collegamento-csi.md) |
-| 1 evento di squadra al mese         | eventi di tipo "evento" nel mese                   | 1      | `eventi_app`                                 |
+| Obiettivo                          | Calcolo                                         | Target | Fonte                                          |
+| ---------------------------------- | ----------------------------------------------- | ------ | ---------------------------------------------- |
+| 90% presenze ad agosto             | risposte presente/ritardo sugli eventi del mese | 90%    | `risposte_presenze`                            |
+| Tutti rispondono alle convocazioni | risposte totali / eventi possibili              | 90%    | `risposte_presenze`                            |
+| 250 presenze complessive           | somma presenze di tutta la rosa                 | 250    | aggregato da `useRosa()`                       |
+| Media pagelle da 7.5               | media di squadra                                | 7.5    | `pagelle_voti`                                 |
+| 200 pagelle compilate              | conteggio voti                                  | 200    | `pagelle_voti`                                 |
+| Continuità di squadra              | giocatori con ≥3 allenamenti consecutivi        | 12     | `serieAllenamenti`                             |
+| 1 / 5 / 10 vittorie in campionato  | partite vinte da dati CSI ufficiali             | 1/5/10 | modulo [Collegamento CSI](collegamento-csi.md) |
+| 1 evento di squadra al mese        | eventi di tipo "evento" nel mese                | 1      | `eventi_app`                                   |
 
 Mostrati in `squadra.tsx` (elenco completo con barra di progresso) e in `index.tsx` (home: il
 primo obiettivo non completato). Un obiettivo che supera il 90% genera anche una notifica
diff --git a/src/lib/presenze.ts b/src/lib/presenze.ts
index 6a51d3c..75d0db0 100644
--- a/src/lib/presenze.ts
+++ b/src/lib/presenze.ts
@@ -17,9 +17,7 @@ function eventiContanoPresenze(eventi: Evento[], giocatoreId?: string) {
   return eventi.filter(
     (e) =>
       (e.tipo === "partita" || e.tipo === "allenamento") &&
-      (giocatoreId === undefined ||
-        e.convocati.length === 0 ||
-        e.convocati.includes(giocatoreId)),
+      (giocatoreId === undefined || e.convocati.length === 0 || e.convocati.includes(giocatoreId)),
   );
 }
 

From 78ae3fbbd76db735496de38a61c47cba884e0022 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 14:50:32 +0200
Subject: [PATCH 11/37] Allinea la barra di navigazione fra iOS e Android
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a
occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella
celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più
34 px di safe area contro 96 px riservati — quindi bastava un inset diverso
(orizzontale, o un modello con home indicator più alta) perché l'ultimo
elemento della pagina finisse sotto la barra. Solo su iOS: su Android
avanzavano 36 px.

Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e
le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia
toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia
solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un
respiro minimo dove iOS mette la home indicator. Identiche al pixel non
possono essere — quell'inset esiste per un motivo fisico che Android non ha —
ma la differenza è ora un margine in più, non un allineamento diverso.

`100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la
toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta
altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar.

Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter`
senza accelerazione hardware: senza, su quei device la barra restava
semitrasparente e il contenuto si leggeva attraverso.

Resta fuori portata una differenza sola: in Safari non installata la toolbar
di sistema sta in basso e collassa allo scroll, quindi la barra si muove con
essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .claude/skills/apple-design/SKILL.md       | 117 +++++++++++----------
 src/components/crapp/BottomNav.tsx         |  12 ++-
 src/components/crapp/CelebrazioneBadge.tsx |   2 +-
 src/routes/__root.tsx                      |   8 +-
 src/routes/benvenuto.tsx                   |   2 +-
 src/styles.css                             |  34 ++++++
 6 files changed, 113 insertions(+), 62 deletions(-)

diff --git a/.claude/skills/apple-design/SKILL.md b/.claude/skills/apple-design/SKILL.md
index 66f5680..ee910bf 100644
--- a/.claude/skills/apple-design/SKILL.md
+++ b/.claude/skills/apple-design/SKILL.md
@@ -5,7 +5,7 @@ description: Apple's approach to interface design and fluid, physical motion, tr
 
 # Apple Design
 
-How Apple builds interfaces that stop feeling like a computer and start feeling like an extension of you. This knowledge comes from Apple's WWDC design talks — chiefly *Designing Fluid Interfaces* (WWDC 2018) — distilled and translated into the web platform (CSS, Pointer Events, `requestAnimationFrame`, spring libraries like Motion/Framer Motion).
+How Apple builds interfaces that stop feeling like a computer and start feeling like an extension of you. This knowledge comes from Apple's WWDC design talks — chiefly _Designing Fluid Interfaces_ (WWDC 2018) — distilled and translated into the web platform (CSS, Pointer Events, `requestAnimationFrame`, spring libraries like Motion/Framer Motion).
 
 The through-line: **an interface feels alive when motion starts from the current on-screen value, inherits the user's velocity, projects momentum forward, and can be grabbed and reversed at any instant.** Springs are the tool that makes all of this natural, because they are inherently interruptible and velocity-aware.
 
@@ -23,7 +23,7 @@ The moment lag appears, the feeling of directness "falls off a cliff." Response
 
 - **Respond on pointer-down, not on release.** Highlight a button the instant it's pressed. Waiting for `click`/touch-up to show feedback feels dead.
 - **Be vigilant about every latency.** Audit debounces, artificial timers, transition waits, and the ~300ms tap delay. Anything on the input path that isn't essential is a regression.
-- **Feedback must be continuous *during* the interaction, not just at the end.** For a drag, slider, or drawer, update the UI 1:1 with the pointer the whole way through — never animate only when the gesture completes.
+- **Feedback must be continuous _during_ the interaction, not just at the end.** For a drag, slider, or drawer, update the UI 1:1 with the pointer the whole way through — never animate only when the gesture completes.
 
 ```css
 /* Feedback lives on the press, and it's instant */
@@ -37,13 +37,13 @@ The moment lag appears, the feeling of directness "falls off a cliff." Response
 
 > "Touch and content should move together."
 
-When the user drags something, it must stay glued to the finger — and respect the offset from *where they grabbed it*. Snapping to the element's center on grab breaks the illusion immediately.
+When the user drags something, it must stay glued to the finger — and respect the offset from _where they grabbed it_. Snapping to the element's center on grab breaks the illusion immediately.
 
 - Use Pointer Events with `setPointerCapture` so tracking continues even when the pointer leaves the element's bounds.
 - Track a short **velocity/position history** (last few `pointermove` events), not just the current point — you'll need velocity at release.
 
 ```js
-el.addEventListener('pointerdown', (e) => {
+el.addEventListener("pointerdown", (e) => {
   el.setPointerCapture(e.pointerId);
   const grabOffset = e.clientY - el.getBoundingClientRect().top; // respect where they grabbed
   // ...track position + timestamp history for velocity
@@ -57,9 +57,9 @@ el.addEventListener('pointerdown', (e) => {
 Every animation must be interruptible and redirectable at any moment. A user must be able to grab a moving element mid-flight and reverse it without waiting for the animation to finish. A closing modal the user grabs again should follow the finger — not finish closing first, then reopen.
 
 - **Never lock out input during a transition.**
-- **Always animate from the *presentation* (current) value, never the target value.** On interrupt, read the element's live on-screen transform and start the new animation from there. Starting from the logical/target value causes a visible jump.
+- **Always animate from the _presentation_ (current) value, never the target value.** On interrupt, read the element's live on-screen transform and start the new animation from there. Starting from the logical/target value causes a visible jump.
 - **Avoid CSS transitions and `@keyframes` for anything gesture-driven** — they can't be smoothly grabbed and reversed mid-flight. Springs animate from the current value by default, which is exactly what interruption needs.
-- **When a gesture reverses, blend velocity — don't hard-cut it.** Replacing one animation with another at a reversal creates a velocity discontinuity, a "brick wall." Spring libraries that carry velocity through a re-target avoid it. (This is what iOS's *additive animations* do natively; on the web, choose a spring library that re-targets from the current velocity.)
+- **When a gesture reverses, blend velocity — don't hard-cut it.** Replacing one animation with another at a reversal creates a velocity discontinuity, a "brick wall." Spring libraries that carry velocity through a re-target avoid it. (This is what iOS's _additive animations_ do natively; on the web, choose a spring library that re-targets from the current velocity.)
 - **Decompose 2D motion into independent X and Y springs.** A single spring on a 2D distance desyncs when X and Y have different velocities.
 
 ## 4. Behavior over animation — use springs
@@ -74,27 +74,28 @@ Apple deliberately replaced the physics triplet (mass/stiffness/damping) with tw
 - **Response** — how quickly the value reaches the target, in seconds. Lower = snappier. **This is not "duration"** — a spring has no fixed duration; its settle time emerges from the parameters.
 
 **Defaults:**
+
 - Start most UI at **damping `1.0`** (critically damped) — graceful and non-distracting.
 - Add bounce (**damping ~`0.8`**) **only when the gesture itself carried momentum** (a flick, a throw, a drag release). Overshoot on a menu that just faded in feels wrong; overshoot on a card you flicked feels right.
 
 **Concrete values Apple ships:**
 
-| Interaction | Damping | Response |
-| --- | --- | --- |
-| Move / reposition (e.g. PiP) | `1.0` | `0.4` |
-| Rotation | `0.8` | `0.4` |
-| Drawer / sheet | `0.8` | `0.3` |
+| Interaction                  | Damping | Response |
+| ---------------------------- | ------- | -------- |
+| Move / reposition (e.g. PiP) | `1.0`   | `0.4`    |
+| Rotation                     | `0.8`   | `0.4`    |
+| Drawer / sheet               | `0.8`   | `0.3`    |
 
 **Web mapping (Motion / Framer Motion):** the `bounce` + `duration` spring API maps closely to Apple's damping + response. A safe house style is `damping: 1.0` springs everywhere by default; reserve bounce for momentum-driven, physical interactions.
 
 ```js
-import { animate } from 'motion';
+import { animate } from "motion";
 
 // Critically damped default (no overshoot)
-animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });
+animate(el, { y: 0 }, { type: "spring", bounce: 0, duration: 0.4 });
 
 // Momentum interaction — a little bounce, only because a flick preceded it
-animate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });
+animate(el, { y: target }, { type: "spring", bounce: 0.2, duration: 0.4 });
 ```
 
 ## 5. Velocity handoff — the seam between drag and animation
@@ -109,26 +110,26 @@ relativeVelocity = gestureVelocity / (targetValue − currentValue)
 
 Example: element at `y=50`, target `y=150` (100px to go), finger moving 50px/s → initial spring velocity = `50 / 100 = 0.5`. Framer Motion / Motion take absolute px/s velocity directly (`velocity` option), so you usually hand it the raw value.
 
-## 6. Momentum projection — animate to where the gesture is *going*
+## 6. Momentum projection — animate to where the gesture is _going_
 
 > "Take a small input and make a big output."
 
-Don't snap to the nearest boundary from the *release point*. Use velocity to **project the resting position** — exactly like scroll deceleration — then snap to the target nearest that projected point. This is what makes a flick feel like it throws the element.
+Don't snap to the nearest boundary from the _release point_. Use velocity to **project the resting position** — exactly like scroll deceleration — then snap to the target nearest that projected point. This is what makes a flick feel like it throws the element.
 
-Apple's exact projection function (from the *Designing Fluid Interfaces* sample code):
+Apple's exact projection function (from the _Designing Fluid Interfaces_ sample code):
 
 ```js
 // decelerationRate ≈ 0.998 for normal scroll feel; 0.99 for snappier
 function project(initialVelocity /* px/s */, decelerationRate = 0.998) {
-  return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);
+  return ((initialVelocity / 1000) * decelerationRate) / (1 - decelerationRate);
 }
 
 const projectedEndpoint = currentPosition + project(releaseVelocity);
-const target = nearestSnapPoint(projectedEndpoint);   // choose target from the projection
+const target = nearestSnapPoint(projectedEndpoint); // choose target from the projection
 animateSpringTo(target, { velocity: releaseVelocity }); // then hand off velocity (§5)
 ```
 
-Note: the physics-textbook `v²/(2·decel)` is *not* what Apple ships — use the exponential-decay form above. This is the standard behavior in good bottom-sheets and carousels (Vaul, Embla).
+Note: the physics-textbook `v²/(2·decel)` is _not_ what Apple ships — use the exponential-decay form above. This is the standard behavior in good bottom-sheets and carousels (Vaul, Embla).
 
 ## 7. Spatial consistency — symmetric paths, anchored origins
 
@@ -155,14 +156,14 @@ function rubberband(overshoot, dimension, constant = 0.55) {
 
 ## 10. Gesture design details (the "feel" checklist)
 
-- **Tap:** highlight on touch-*down* (instant), commit on touch-*up*. Add ~10px of hysteresis/hit padding around the target, and allow cancel-by-dragging-away and back.
+- **Tap:** highlight on touch-_down_ (instant), commit on touch-_up_. Add ~10px of hysteresis/hit padding around the target, and allow cancel-by-dragging-away and back.
 - **Drag/swipe:** require a small movement threshold (hysteresis, ~10px) before committing to a direction, then track 1:1.
-- **Detect all plausible gestures in parallel from the first move**, then confidently cancel the losers once intent is clear. Avoid recognizers that only report a *final* state (`swipeleft`-type events) — they throw away the continuous tracking you need for feedback.
+- **Detect all plausible gestures in parallel from the first move**, then confidently cancel the losers once intent is clear. Avoid recognizers that only report a _final_ state (`swipeleft`-type events) — they throw away the continuous tracking you need for feedback.
 - **Minimize disambiguation delays.** Double-tap detection unavoidably delays single taps; only pay that cost where double-tap truly exists.
 
 ## 11. Frame-level smoothness
 
-Smoothness is about *what's in the frames*, not just the frame rate.
+Smoothness is about _what's in the frames_, not just the frame rate.
 
 - Keep the per-frame positional change below the perception threshold to avoid strobing.
 - For very fast motion, a subtle **motion blur / stretch** encodes speed and reads better than a hard sharp streak.
@@ -175,7 +176,7 @@ Apple uses translucent materials as a floating functional layer that brings stru
 - **Build nav/toolbars/sheets as translucent layers** (`backdrop-filter: blur()` + a semi-transparent background) with content scrolling underneath — not opaque bars that consume a fixed strip.
 - **Material weight encodes hierarchy:** darker/heavier materials separate structural regions (sidebars); lighter materials draw attention to interactive elements (buttons). **Never stack a light translucent surface on another** — legibility collapses.
 - **Bigger surfaces should read as thicker:** stronger blur + a deeper shadow than small chips. Consider context-aware shadow — heavier over busy/text content for separation, lighter over plain backgrounds.
-- **Dim to focus, separate to keep flow.** A modal task pairs the surface with a dimming scrim and pushes the background back/down. A parallel, non-blocking panel uses translucency and offset *without* a scrim so the flow isn't broken. For stacked sheets, progressively dim and push back each parent layer.
+- **Dim to focus, separate to keep flow.** A modal task pairs the surface with a dimming scrim and pushes the background back/down. A parallel, non-blocking panel uses translucency and offset _without_ a scrim so the flow isn't broken. For stacked sheets, progressively dim and push back each parent layer.
 - **Vibrancy keeps text legible over changing backgrounds.** Over blurred/translucent surfaces, don't use flat gray text — use higher-contrast, slightly heavier weight, and a small letter-spacing bump. Put color on a solid layer, not the translucent foreground.
 - **Scroll edge effects, not hard dividers.** Instead of a 1px border under a sticky header, fade a small blur/gradient mask where content meets floating chrome — only where floating UI actually overlaps content.
 - **Materialize, don't just fade.** For glass/blur surfaces, animate blur radius and scale together on enter/exit, so the surface reads as a real material arriving rather than a plain opacity fade.
@@ -190,7 +191,7 @@ Apple uses translucent materials as a floating functional layer that brings stru
 
 ## 13. Multimodal feedback — motion + sound + haptics
 
-Three rules for combining senses (from *Designing Audio-Haptic Experiences*):
+Three rules for combining senses (from _Designing Audio-Haptic Experiences_):
 
 1. **Causality** — it must be obvious what caused the feedback. Trigger it on the actual causal event (the toggle flipping, the item snapping home), and match its character to the action's physicality.
 2. **Harmony** — the visual, the sound, and the haptic must fire on the **same frame**. Latency between them destroys the illusion. Don't let a CSS transition lag the audio/haptic (Vibration API).
@@ -198,7 +199,7 @@ Three rules for combining senses (from *Designing Audio-Haptic Experiences*):
 
 ## 14. Reduced motion & accessibility
 
-Reduced motion doesn't mean *no* feedback — it means a gentler, non-vestibular equivalent. Respond to three independent signals and bake them into your components:
+Reduced motion doesn't mean _no_ feedback — it means a gentler, non-vestibular equivalent. Respond to three independent signals and bake them into your components:
 
 - **`prefers-reduced-motion: reduce`** — replace slides/springs/parallax with short opacity **cross-fades or static transitions**. Drop elastic/overshoot. Keep opacity/color changes that aid comprehension.
 - **`prefers-reduced-transparency: reduce`** — make translucent surfaces frostier/solid: raise background opacity, drop the blur.
@@ -208,44 +209,54 @@ Also: avoid full-viewport moving backgrounds, slow looping oscillations (near 0.
 
 ```css
 @media (prefers-reduced-motion: reduce) {
-  .sheet { transition: opacity 200ms ease; transform: none !important; }
+  .sheet {
+    transition: opacity 200ms ease;
+    transform: none !important;
+  }
 }
 @media (prefers-reduced-transparency: reduce) {
-  .toolbar { background: white; backdrop-filter: none; }
+  .toolbar {
+    background: white;
+    backdrop-filter: none;
+  }
 }
 ```
 
 ## 15. Typography — optical sizing, tracking, leading
 
-Apple designs type to change shape with size; the same discipline applies on the web. (From *The Details of UI Typography*, WWDC 2020.)
+Apple designs type to change shape with size; the same discipline applies on the web. (From _The Details of UI Typography_, WWDC 2020.)
 
-- **Tracking (letter-spacing) is size-specific — never one value for all sizes.** Large display text wants *negative* tracking (letters read too far apart as they grow); small text wants slightly *positive* tracking for legibility. A fixed `letter-spacing` is wrong somewhere. Tighten headings, leave body near `0`.
+- **Tracking (letter-spacing) is size-specific — never one value for all sizes.** Large display text wants _negative_ tracking (letters read too far apart as they grow); small text wants slightly _positive_ tracking for legibility. A fixed `letter-spacing` is wrong somewhere. Tighten headings, leave body near `0`.
 - **Leading (line-height) tracks size inversely.** Tight on large headings, looser on body copy. Increase it for scripts with tall ascenders/descenders; tighten it for dense, information-heavy UI.
 - **Build hierarchy from weight + size + leading as a set,** not size alone. Emphasize with weight — it adds presence without taking more space.
-- **Respect the user's text-size setting** (Dynamic Type). Scale layout *with* the text — spacing in `rem`/`em`, not fixed px — so a larger font doesn't break the layout.
+- **Respect the user's text-size setting** (Dynamic Type). Scale layout _with_ the text — spacing in `rem`/`em`, not fixed px — so a larger font doesn't break the layout.
 - **Default to the platform's system font** before a custom face; it already ships optical sizing, tracking tables, and legibility tuning. Override only with a reason.
 
 ```css
-:root { font: 100%/1.5 system-ui, sans-serif; } /* body: system font, comfortable leading */
+:root {
+  font:
+    100%/1.5 system-ui,
+    sans-serif;
+} /* body: system font, comfortable leading */
 
 .display {
   font-size: clamp(2rem, 5vw, 4rem);
-  line-height: 1.05;        /* tight leading for large text */
-  letter-spacing: -0.02em;  /* negative tracking as it grows */
+  line-height: 1.05; /* tight leading for large text */
+  letter-spacing: -0.02em; /* negative tracking as it grows */
   font-optical-sizing: auto;
 }
 ```
 
 ## 16. Design foundations — the eight principles
 
-The motion and craft above serve Apple's eight design principles (*Principles of Great Design*, WWDC 2026). Use these as the names you reason with:
+The motion and craft above serve Apple's eight design principles (_Principles of Great Design_, WWDC 2026). Use these as the names you reason with:
 
-1. **Purpose.** Make with intention; decide what *not* to build. Every feature asks for the user's time, attention, and trust — spend that budget only where it pays off.
+1. **Purpose.** Make with intention; decide what _not_ to build. Every feature asks for the user's time, attention, and trust — spend that budget only where it pays off.
 2. **Agency.** Keep people in control: offer choices, don't force a single path. Back it with forgiveness — easy undo for slips, a confirmation dialog only for genuinely destructive, irreversible actions (use sparingly; overusing it trains people to click through).
 3. **Responsibility.** Act in the user's interest. Privacy: ask at the right moment, only for what's needed, transparently. Safety: anticipate misuse and harm — especially with AI (an allergy-aware recipe app must not suggest a harmful ingredient). Add previews, confirmations, disclaimers; cut a feature whose risk outweighs its value.
 4. **Familiarity.** Build on what people already know. Use metaphors that are neither too literal nor too abstract (a trash can means delete), and honor their physics. Be consistent: things that look the same must behave the same and live in the same place (close is always top-left on macOS) so people can predict what happens next. Only break a familiar pattern if you can prove it's better — then test it, don't assume.
 5. **Flexibility.** Design for different contexts, devices, and the full range of abilities. Adapt to the platform (iPhone = quick touch; desktop = deep workflows with precise pointer control) and to the situation. Design inclusively (age, language, expertise, accessibility). When no single layout fits everyone, let people personalize — rearrange controls, hide what they don't use.
-6. **Simplicity — not minimalism.** Strip the unnecessary so the core purpose shines; burying everything in one place looks minimal but isn't simple. Be concise (plain language, no jargon, fewer steps) and clear (use hierarchy — order, spacing, contrast — so the most important thing is the most obvious). Every element earns its place; sometimes *adding* context simplifies (a video scrubber that shows time remaining). Show the common path first, advanced options one level deeper.
+6. **Simplicity — not minimalism.** Strip the unnecessary so the core purpose shines; burying everything in one place looks minimal but isn't simple. Be concise (plain language, no jargon, fewer steps) and clear (use hierarchy — order, spacing, contrast — so the most important thing is the most obvious). Every element earns its place; sometimes _adding_ context simplifies (a video scrubber that shows time remaining). Show the common path first, advanced options one level deeper.
 7. **Craft.** Uncompromising attention to detail builds trust. Beautiful typography, colors that adapt to light/dark, clear iconography, and responsive animations that give immediate, natural feedback. Nothing is random — every spacing, timing, and alignment value is a deliberate choice you can defend. Jittery scroll, misaligned icons, and layouts that break on rotation read as carelessness. Craft needs iteration and longevity — keep evolving the design as features and hardware change.
 8. **Delight.** The result of getting the other seven right, not confetti tacked on top. Decide the emotion you want people to feel (calm, confident, excited) and reinforce it in every decision.
 
@@ -264,19 +275,19 @@ Tactical rules that serve these:
 
 ## Quick Reference
 
-| Need | Technique | Concrete value |
-| --- | --- | --- |
-| Default UI spring | Critically damped, no overshoot | `damping 1.0`, `response 0.3–0.4` |
-| Momentum / flick spring | Under-damped, slight bounce | `damping ~0.8`, `response 0.3–0.4` |
-| Gesture → spring velocity | Hand off release velocity | `gestureVelocity / (target − current)` if normalized |
-| Flick landing point | Project momentum | `current + (v/1000)·d/(1−d)`, `d ≈ 0.998` |
-| Interrupt cleanly | Start from presentation (live) value | read the on-screen transform |
-| Avoid reversal "brick wall" | Carry velocity through re-target | spring that blends velocity |
-| Reversible transition | Mirror the easing curve | inverse cubic-bézier |
-| Decide reverse vs. commit | Use velocity **sign**, not position | at release |
-| 1:1 drag | Pointer Events + capture | respect the grab offset |
-| Feedback | On pointer-down, continuous | never only at the end |
-| Boundary | Rubber-band, don't hard-stop | progressive resistance |
-| Translucent chrome | `backdrop-filter` layer | content scrolls under |
-| Type tracking | Size-specific, never fixed | tighten large text (`-0.02em`), body near `0` |
-| Reduced motion | Cross-fade, not slide/spring | `@media (prefers-reduced-motion)` |
+| Need                        | Technique                            | Concrete value                                       |
+| --------------------------- | ------------------------------------ | ---------------------------------------------------- |
+| Default UI spring           | Critically damped, no overshoot      | `damping 1.0`, `response 0.3–0.4`                    |
+| Momentum / flick spring     | Under-damped, slight bounce          | `damping ~0.8`, `response 0.3–0.4`                   |
+| Gesture → spring velocity   | Hand off release velocity            | `gestureVelocity / (target − current)` if normalized |
+| Flick landing point         | Project momentum                     | `current + (v/1000)·d/(1−d)`, `d ≈ 0.998`            |
+| Interrupt cleanly           | Start from presentation (live) value | read the on-screen transform                         |
+| Avoid reversal "brick wall" | Carry velocity through re-target     | spring that blends velocity                          |
+| Reversible transition       | Mirror the easing curve              | inverse cubic-bézier                                 |
+| Decide reverse vs. commit   | Use velocity **sign**, not position  | at release                                           |
+| 1:1 drag                    | Pointer Events + capture             | respect the grab offset                              |
+| Feedback                    | On pointer-down, continuous          | never only at the end                                |
+| Boundary                    | Rubber-band, don't hard-stop         | progressive resistance                               |
+| Translucent chrome          | `backdrop-filter` layer              | content scrolls under                                |
+| Type tracking               | Size-specific, never fixed           | tighten large text (`-0.02em`), body near `0`        |
+| Reduced motion              | Cross-fade, not slide/spring         | `@media (prefers-reduced-motion)`                    |
diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index 8e7913a..6eb7bfb 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -15,9 +15,15 @@ export function BottomNav() {
       aria-label="Navigazione principale"
       // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
       // contenuto scorre, con una sfumatura al posto della riga netta.
-      className="materiale bordo-sfumato fixed inset-x-0 bottom-0 z-40"
+      className="materiale bordo-sfumato pad-sicura-fondo fixed inset-x-0 bottom-0 z-40"
     >
-      <div className="mx-auto grid max-w-md grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
+      {/*
+        Altezza fissa dal token, non dedotta dal contenuto: la striscia
+        toccabile misura uguale su iOS e Android, e sotto varia solo l'inset
+        di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
+        poteva saperla da fuori.
+      */}
+      <div className="mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 px-1">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
@@ -26,7 +32,7 @@ export function BottomNav() {
             activeProps={{ "aria-current": "page" }}
             // Lo stato attivo non è solo colore: cambia anche il peso del
             // testo e compare la barretta sopra l'icona.
-            className="group relative flex min-h-11 flex-col items-center gap-1 py-2.5 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
+            className="group relative flex h-full flex-col items-center justify-center gap-1 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
           >
             {({ isActive }) => (
               <>
diff --git a/src/components/crapp/CelebrazioneBadge.tsx b/src/components/crapp/CelebrazioneBadge.tsx
index 10907af..e6df35d 100644
--- a/src/components/crapp/CelebrazioneBadge.tsx
+++ b/src/components/crapp/CelebrazioneBadge.tsx
@@ -32,7 +32,7 @@ export function CelebrazioneBadge() {
   if (!notifica) return null;
 
   return (
-    <div className="anim-reveal fixed inset-0 z-50 grid place-items-end bg-foreground/40 p-4 pb-28 backdrop-blur-sm">
+    <div className="anim-reveal spazio-nav fixed inset-0 z-50 grid place-items-end bg-foreground/40 px-4 pt-4 backdrop-blur-sm">
       <div
         className={cn(
           "anim-pop w-full max-w-md rounded-3xl bg-card p-5 shadow-pop ring-2",
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 05ce366..cf97081 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -22,7 +22,7 @@ import { useSessione } from "../lib/auth";
 
 function NotFoundComponent() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex min-h-dvh items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
         <h1 className="font-display-lg text-7xl text-foreground">404</h1>
         <h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2>
@@ -50,7 +50,7 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
   }, [error]);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex min-h-dvh items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
         <h1 className="text-xl font-semibold tracking-tight text-foreground">
           Questa pagina non si è caricata
@@ -187,7 +187,7 @@ function AppShell() {
 
   if (!mounted || !pronta) {
     return (
-      <div className="grid min-h-screen place-items-center bg-background">
+      <div className="grid min-h-dvh place-items-center bg-background">
         <TeamLogo className="h-16 w-16 animate-pulse" />
       </div>
     );
@@ -195,7 +195,7 @@ function AppShell() {
 
   return (
     <>
-      <div className="mx-auto min-h-screen max-w-md bg-background pb-24">
+      <div className="spazio-nav mx-auto min-h-dvh max-w-md bg-background">
         {/* Required: nested routes render here. Removing <Outlet /> breaks all child routes. */}
         <Outlet />
       </div>
diff --git a/src/routes/benvenuto.tsx b/src/routes/benvenuto.tsx
index f6bd902..24f3760 100644
--- a/src/routes/benvenuto.tsx
+++ b/src/routes/benvenuto.tsx
@@ -92,7 +92,7 @@ function Benvenuto() {
   const inAttesaCollegamento = !!utenteId && !mioSlot && !erroreCollegamento;
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center px-6 py-12">
+    <div className="flex min-h-dvh flex-col items-center justify-center px-6 py-12">
       <TeamLogo className="h-20 w-20" />
       <h1 className="mt-6 text-center font-display text-4xl uppercase leading-none">
         Benvenuto in CrAPP
diff --git a/src/styles.css b/src/styles.css
index 9130243..b90f690 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -62,6 +62,19 @@
 :root {
   color-scheme: light;
   --radius: 1rem;
+  /*
+   * Geometria della barra di navigazione, unica sorgente di verità: prima
+   * l'altezza era ricopiata a occhio come `pb-24` nel contenuto e `pb-28`
+   * nella celebrazione badge, e su iPhone i conti tornavano per 2 px.
+   *
+   * `--pad-sicura-fondo` è il motivo per cui la barra su iPhone e su Android
+   * non può essere alta uguale: `env(safe-area-inset-bottom)` vale ~34 px
+   * sopra la home indicator e 0 su Android, dove la barra di sistema sta
+   * fuori dal viewport. Il `max()` dà comunque ad Android un respiro minimo,
+   * così la differenza è un margine in più, non un allineamento diverso.
+   */
+  --altezza-nav: 3.75rem;
+  --pad-sicura-fondo: max(env(safe-area-inset-bottom), 0.5rem);
   --background: oklch(0.985 0.002 240);
   --foreground: oklch(0.16 0.01 260);
   --card: oklch(1 0 0);
@@ -351,6 +364,27 @@
   -webkit-backdrop-filter: blur(20px) saturate(180%);
 }
 
+/*
+ * Chrome su Android disattiva `backdrop-filter` quando l'accelerazione
+ * hardware non è disponibile: senza questo, su quei device la barra resta
+ * solo semitrasparente e il contenuto si legge attraverso.
+ */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .materiale {
+    background-color: var(--color-card);
+  }
+}
+
+/** Padding inferiore della chrome flottante. */
+@utility pad-sicura-fondo {
+  padding-bottom: var(--pad-sicura-fondo);
+}
+
+/** Spazio che il contenuto deve lasciare sotto di sé per non finire dietro la barra. */
+@utility spazio-nav {
+  padding-bottom: calc(var(--altezza-nav) + var(--pad-sicura-fondo) + 1rem);
+}
+
 @utility bordo-sfumato {
   &::before {
     content: "";

From 608f2eda2f03dc22715da806055b8b86eda60e79 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 14:52:51 +0200
Subject: [PATCH 12/37] Rende il materiale della barra coerente fra WebKit e
 Blink
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A parità di CSS la barra sembrava piena su Safari e trasparente su Chrome
Android. Il colore di fondo era lo stesso sui due: la differenza veniva tutta
dal blur. WebKit rende `backdrop-filter: blur()` molto più denso e "latteo"
di Blink, e `saturate(180%)` amplificava lo scarto — con un fondo al 72%
l'aspetto dipendeva quasi solo dal filtro, cioè dalla parte su cui i due
motori non sono d'accordo.

Il materiale ora si regge sul colore (85%) e usa il blur come rifinitura: la
profondità resta, la differenza fra i due motori quasi sparisce perché pesa
molto meno. `saturate` scende a 150% per la stessa ragione.

`color-mix` passa da `in oklab` a `in srgb`: mescolare con `transparent`, che
è nero con alpha 0, dipende da come il motore premoltiplica, e in srgb è
implementato in modo molto più uniforme.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/styles.css | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index b90f690..c0b523d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -358,10 +358,24 @@
  * cui il contenuto scorre, con una sfumatura al bordo al posto della linea
  * netta (scroll edge effect).
  */
+/*
+ * Il materiale deve reggersi sul colore, non sul blur.
+ *
+ * Con un fondo poco denso (era 72%) l'aspetto dipendeva quasi tutto da
+ * `backdrop-filter`, ed è lì che i due motori divergono: WebKit sfoca in modo
+ * molto più denso e "latteo" di Blink, e `saturate` amplifica lo scarto. Il
+ * risultato era una barra che su Safari sembrava piena e su Chrome Android
+ * trasparente, a parità di CSS. A 85% il colore fa il lavoro e il blur è la
+ * rifinitura: resta la profondità, sparisce quasi tutta la differenza.
+ *
+ * `in srgb` e non `in oklab`: mescolare con `transparent` — che è nero con
+ * alpha 0 — dipende da come il motore premoltiplica, e in srgb è implementato
+ * in modo molto più uniforme.
+ */
 @utility materiale {
-  background-color: color-mix(in oklab, var(--color-card) 72%, transparent);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  background-color: color-mix(in srgb, var(--color-card) 85%, transparent);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
 }
 
 /*

From 1685d0b57a7cff6a2ac0b72f34c9c3bffb29740f Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 15:15:11 +0200
Subject: [PATCH 13/37] =?UTF-8?q?Ripristina=20il=20fondo=20diviso=20sui=20?=
 =?UTF-8?q?giorni=20con=20pi=C3=B9=20tipi=20di=20evento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avevo sostituito la cella divisa con fondo neutro e puntini colorati. Si
perdeva l'informazione a colpo d'occhio: il colore dice subito che tipo di
impegno c'è, i puntini vanno cercati.

Torna la resa di main: `linear-gradient(135deg, …)` con gli stop duplicati,
che non è una sfumatura ma bande a taglio netto in diagonale, una per tipo. Il
conteggio resta per **tipo** e non per numero di eventi: due partite nello
stesso giorno restano una cella rossa piena, si divide solo se i tipi sono
diversi.

`coloreTipo` sale a livello di modulo: era ricostruito per ogni cella, cioè
una trentina di volte per mese a ogni render.

Nota sul contrasto, per chi tornerà qui. Il numero sta direttamente sulle
bande con un alone bianco in `drop-shadow`, ed è una scelta di resa esplicita:
il colore deve restare pieno fino al bordo. Ha un costo, però, perché nel
frattempo success e training sono stati scuriti da 0.62 a 0.53 per far passare
il testo bianco dei chip: il numero scuro sulle bande scende da 5.6:1 a 3.9:1
sul blu e da 5.7:1 a 4.0:1 sul verde. Se un giorno la leggibilità dà fastidio,
la leva è una parola — `text-foreground` -> testo bianco sulle sole celle
divise, che risale a ~4.9:1.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/routes/calendario.tsx | 58 ++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/routes/calendario.tsx b/src/routes/calendario.tsx
index 6239451..b558334 100644
--- a/src/routes/calendario.tsx
+++ b/src/routes/calendario.tsx
@@ -38,6 +38,15 @@ export const Route = createFileRoute("/calendario")({
 });
 
 const giorniIT = ["L", "M", "M", "G", "V", "S", "D"];
+
+/** Colore per tipo di evento, usato per dividere le celle con più tipi. */
+const coloreTipo: Record<Evento["tipo"], string> = {
+  partita: "var(--accent)",
+  allenamento: "var(--training)",
+  evento: "var(--warning)",
+  compleanno: "var(--success)",
+};
+
 const mesiIT = [
   "Gennaio",
   "Febbraio",
@@ -227,11 +236,23 @@ function Calendario() {
                     const giorno = i + 1;
                     const eventiGiorno = eventiPerGiorno.get(giorno) ?? [];
                     const haEventi = eventiGiorno.length > 0;
+                    // Attenzione: si conta per **tipo**, non per numero di
+                    // eventi. Due partite nello stesso giorno restano una cella
+                    // rossa piena; si divide solo se i tipi sono diversi.
                     const tipiGiorno = Array.from(new Set(eventiGiorno.map((e) => e.tipo)));
-                    // Un solo tipo: cella piena, il colore è l'informazione.
-                    // Più tipi: fondo neutro e un puntino per tipo. Prima si
-                    // generava un gradiente a fette, che rendeva il numero
-                    // illeggibile e costringeva a un'ombra bianca di ripiego.
+                    // Più tipi: la cella si divide in bande a taglio netto (gli
+                    // stop sono duplicati apposta, non è una sfumatura), una per
+                    // tipo, in diagonale.
+                    const sfondo =
+                      tipiGiorno.length > 1
+                        ? `linear-gradient(135deg, ${tipiGiorno
+                            .map((t, idx) => {
+                              const da = (idx / tipiGiorno.length) * 100;
+                              const a = ((idx + 1) / tipiGiorno.length) * 100;
+                              return `${coloreTipo[t]} ${da}%, ${coloreTipo[t]} ${a}%`;
+                            })
+                            .join(", ")})`
+                        : undefined;
                     const tipo = tipiGiorno.length === 1 ? tipiGiorno[0] : undefined;
                     const isOggi =
                       !!oggi && oggi.anno === anno && oggi.mese === mese && oggi.giorno === giorno;
@@ -241,6 +262,7 @@ function Calendario() {
                         key={giorno}
                         type={haEventi ? "button" : undefined}
                         onClick={haEventi ? () => apriGiorno(giorno) : undefined}
+                        style={sfondo ? { backgroundImage: sfondo } : undefined}
                         className={cn(
                           "relative grid aspect-square place-items-center rounded-xl text-sm font-semibold",
                           tipo === "partita" && "bg-accent text-accent-foreground",
@@ -248,7 +270,7 @@ function Calendario() {
                           tipo === "evento" && "bg-warning text-warning-foreground",
                           tipo === "compleanno" && "bg-success text-success-foreground",
                           !tipo && !haEventi && "text-muted-foreground",
-                          !tipo && haEventi && "bg-secondary text-foreground",
+                          !tipo && haEventi && "text-foreground",
                           haEventi && "cursor-pointer transition-transform active:scale-90",
                           isOggi && "ring-2 ring-foreground ring-offset-1 ring-offset-card",
                         )}
@@ -259,23 +281,15 @@ function Calendario() {
                         }
                         aria-current={isOggi ? "date" : undefined}
                       >
-                        <span>{giorno}</span>
-                        {tipiGiorno.length > 1 ? (
-                          <span aria-hidden="true" className="absolute bottom-1 flex gap-0.5">
-                            {tipiGiorno.slice(0, 3).map((t) => (
-                              <i
-                                key={t}
-                                className={cn(
-                                  "h-1 w-1 rounded-full",
-                                  t === "partita" && "bg-accent",
-                                  t === "allenamento" && "bg-training",
-                                  t === "evento" && "bg-warning",
-                                  t === "compleanno" && "bg-success",
-                                )}
-                              />
-                            ))}
-                          </span>
-                        ) : null}
+                        {/*
+                          Sulle celle divise il numero sta direttamente sulle
+                          bande, staccato dal fondo da un alone bianco: è la
+                          resa scelta, il colore deve restare pieno e visibile
+                          fino al bordo.
+                        */}
+                        <span className="relative drop-shadow-[0_1px_1px_rgba(255,255,255,0.5)]">
+                          {giorno}
+                        </span>
                       </Cella>
                     );
                   })}

From 6e05f5134f8237de35108e17323448d24253338a Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 15:15:36 +0200
Subject: [PATCH 14/37] =?UTF-8?q?Non=20taglia=20pi=C3=B9=20l'anello=20del?=
 =?UTF-8?q?=20giorno=20corrente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Regressione mia, introdotta con lo swipe in 9b28a86: la griglia è avvolta in
un `overflow-hidden` che serve a nascondere il mese che entra ed esce di lato.
L'anello del giorno corrente però è `ring-2 ring-offset-1`, quindi disegna 3 px
FUORI dai bordi della cella: sulla prima riga quei 3 px cadono oltre il bordo
del riquadro di ritaglio e vengono tagliati. Sarebbe successo lo stesso
sull'ultima riga e sulle colonne di bordo, se oggi fosse caduto di lunedì o di
domenica.

`p-1` sul contenitore che ritaglia dà all'anello i suoi 4 px di aria dentro il
riquadro; `-mx-1` e `mt-1` al posto di `mt-2` rimettono la griglia esattamente
dov'era, quindi le celle non si spostano di un pixel: cambia solo dove passa il
bordo di ritaglio.

Non si può usare `overflow-x: hidden` da solo: in CSS, se un asse è `hidden` e
l'altro `visible`, quello visibile diventa `auto` e ritaglia comunque, per
giunta creando uno scroll container.

Scartato anche `ring-inset`, che non può essere tagliato per costruzione: nei
giorni in cui oggi coincide con un evento l'anello scuro finirebbe appiccicato
al colore pieno, senza lo stacco bianco che ha adesso.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/routes/calendario.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/routes/calendario.tsx b/src/routes/calendario.tsx
index b558334..723119e 100644
--- a/src/routes/calendario.tsx
+++ b/src/routes/calendario.tsx
@@ -208,8 +208,14 @@ function Calendario() {
               decelerazione dello scroll iOS), non dalla posizione del dito.
               `dragElastic` dà la resistenza progressiva al bordo invece di
               uno stop netto.
+
+              `p-1` con `-mx-1` compensato: l'anello del giorno corrente
+              (`ring-2 ring-offset-1`) sporge 3 px fuori dalla cella, e senza
+              questo margine interno `overflow-hidden` lo taglia sulla prima
+              riga e sulle colonne di bordo. Il padding sta dentro il riquadro
+              di ritaglio, i margini negativi rimettono la griglia dov'era.
             */}
-            <div className="relative mt-2 overflow-hidden">
+            <div className="relative -mx-1 mt-1 overflow-hidden p-1">
               <AnimatePresence initial={false} mode="popLayout" custom={direzione}>
                 <motion.div
                   key={mesePrefix}
@@ -296,7 +302,7 @@ function Calendario() {
                 </motion.div>
               </AnimatePresence>
             </div>
-            <p className="mt-3 text-xs text-muted-foreground">
+            <p className="mt-2 text-xs text-muted-foreground">
               Scorri a destra o sinistra per cambiare mese.
             </p>
             <div className="mt-3 flex flex-wrap gap-3 text-xs font-semibold text-muted-foreground">

From c8cd8c9720c1fa78a1b24b861b1d3815f6c54cb7 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 15:20:59 +0200
Subject: [PATCH 15/37] Rinomina il titolo della home in CRAP Volley

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/routes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index ae67153..81fc230 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -70,7 +70,7 @@ function Index() {
             <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/80">
               Ciao {giocatore.nome.split(" ")[0]}
             </p>
-            <h1 className="font-display-lg text-4xl uppercase leading-none">CrAPP</h1>
+            <h1 className="font-display-lg text-4xl uppercase leading-none">CRAP Volley</h1>
           </div>
           <TeamLogo className="h-12 w-12" />
         </div>

From fabee4df1de1eb8498ac169f14f4d5e782ee7130 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 19:17:36 +0200
Subject: [PATCH 16/37] Stacca la barra di navigazione dal fondo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La barra era una striscia a filo schermo con la sfumatura al bordo superiore
(scroll edge effect). Ora è una pillola staccata: il `<nav>` esterno tiene solo
posizione, safe area e margine laterale, mentre il materiale, il raggio, il bordo
e l'ombra passano al contenitore interno.

`pointer-events-none` sul wrapper e `pointer-events-auto` sulla pillola: ai lati
della barra i tocchi devono raggiungere il contenuto sotto, non una striscia
trasparente larga quanto lo schermo.

Via `bordo-sfumato`: la sfumatura serve a mascherare il taglio netto di una barra
attaccata al bordo, e su una che galleggia non ha più niente da mascherare.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BottomNav.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index 6eb7bfb..01b5815 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -13,9 +13,11 @@ export function BottomNav() {
   return (
     <nav
       aria-label="Navigazione principale"
-      // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
-      // contenuto scorre, con una sfumatura al posto della riga netta.
-      className="materiale bordo-sfumato pad-sicura-fondo fixed inset-x-0 bottom-0 z-40"
+      // Barra flottante: il contenitore esterno tiene solo la posizione e
+      // l'inset di sistema, il materiale sta sulla pillola dentro.
+      // `pointer-events-none` perché ai lati della pillola i tocchi devono
+      // arrivare al contenuto sotto.
+      className="pad-sicura-fondo pointer-events-none fixed inset-x-0 bottom-0 z-40 px-3"
     >
       {/*
         Altezza fissa dal token, non dedotta dal contenuto: la striscia
@@ -23,7 +25,7 @@ export function BottomNav() {
         di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
         poteva saperla da fuori.
       */}
-      <div className="mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 px-1">
+      <div className="materiale pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 overflow-hidden rounded-full border border-border/60 px-1 shadow-lg">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}

From 383643392afd924cf64d6f881ffb98e15c72f344 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 19:22:08 +0200
Subject: [PATCH 17/37] Porta il profilo in alto a destra e lascia quattro voci
 nella barra
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La barra aveva cinque voci e la quinta era il profilo, che non è una
destinazione di pari livello con Oggi, Calendario, Squadra e Classifica: è la
propria scheda, e su iOS si cerca in alto a destra. Toglierla dalla barra
restituisce anche un quinto di larghezza alle altre quattro.

`LinkProfilo` mostra l'avatar del giocatore e porta a `/profilo`. Sta in
`PageHeader`, quindi compare su calendario, squadra, classifica e profilo, più
l'hero della home che ha un'intestazione propria. Se l'avatar non è stato
caricato `Avatar` ricade sulle iniziali; se il giocatore non c'è ancora (primo
render) resta il logo, così il posto non resta vuoto.

Sulla pagina del profilo l'avatar sarebbe un link a sé stessa: `PageHeader`
prende una prop `azione` e lì si passa il logo della squadra.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BottomNav.tsx |  7 +++---
 src/components/crapp/ui-bits.tsx   | 35 ++++++++++++++++++++++++++++--
 src/routes/index.tsx               |  4 ++--
 src/routes/profilo.tsx             | 16 ++++++++++++--
 4 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index 01b5815..ad5a15b 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -1,12 +1,13 @@
 import { Link } from "@tanstack/react-router";
-import { CalendarDays, Home, Trophy, User, Users } from "lucide-react";
+import { CalendarDays, Home, Trophy, Users } from "lucide-react";
 
+// Quattro voci e non cinque: il profilo sta in alto a destra
+// nell'intestazione di ogni pagina, dove lo cerca chi arriva da iOS.
 const items = [
   { to: "/", label: "Oggi", icon: Home },
   { to: "/calendario", label: "Calendario", icon: CalendarDays },
   { to: "/squadra", label: "Squadra", icon: Users },
   { to: "/classifica", label: "Classifica", icon: Trophy },
-  { to: "/profilo", label: "Profilo", icon: User },
 ] as const;
 
 export function BottomNav() {
@@ -25,7 +26,7 @@ export function BottomNav() {
         di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
         poteva saperla da fuori.
       */}
-      <div className="materiale pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 overflow-hidden rounded-full border border-border/60 px-1 shadow-lg">
+      <div className="materiale pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-4 overflow-hidden rounded-full border border-border/60 px-1 shadow-lg">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index abbad88..73f1126 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -1,7 +1,10 @@
 import { useId, useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { Link } from "@tanstack/react-router";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { statoMeta, type Stato } from "@/lib/crapp-data";
+import { useIo } from "@/lib/rosa";
+import { Avatar } from "@/components/crapp/Avatar";
 import { Reveal } from "@/components/motion/Reveal";
 import { Numero } from "@/components/motion/Numero";
 
@@ -33,7 +36,35 @@ export function Card({
   return <Tag className={cn("premi rounded-3xl bg-card p-4 shadow-card", className)} {...props} />;
 }
 
-export function PageHeader({ titolo, sottotitolo }: { titolo: string; sottotitolo?: string }) {
+/**
+ * Accesso al profilo in alto a destra: la BottomNav ha quattro voci e questa è
+ * l'unica porta verso `/profilo`. Sulla pagina del profilo si passa `azione` a
+ * `PageHeader` per rimetterci il logo — sarebbe un link a sé stessa.
+ */
+export function LinkProfilo() {
+  const g = useIo();
+  if (!g) return <TeamLogo className="h-11 w-11" />;
+  return (
+    <Link
+      to="/profilo"
+      aria-label="Il tuo profilo"
+      className="premi shrink-0 rounded-2xl ring-2 ring-primary-foreground/30"
+    >
+      <Avatar id={g.id} fallback={g.iniziali} className="h-11 w-11 text-lg" />
+    </Link>
+  );
+}
+
+export function PageHeader({
+  titolo,
+  sottotitolo,
+  azione,
+}: {
+  titolo: string;
+  sottotitolo?: string;
+  /** Sostituisce il link al profilo in alto a destra. */
+  azione?: ReactNode;
+}) {
   return (
     <header className="bg-hero px-5 pb-8 pt-7 text-primary-foreground">
       <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
@@ -43,7 +74,7 @@ export function PageHeader({ titolo, sottotitolo }: { titolo: string; sottotitol
             <p className="mt-1 truncate text-sm text-primary-foreground/80">{sottotitolo}</p>
           ) : null}
         </div>
-        <TeamLogo className="h-11 w-11" />
+        {azione ?? <LinkProfilo />}
       </div>
     </header>
   );
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 81fc230..82467c1 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Flame, ChevronRight } from "lucide-react";
 import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
 import { PromemoriaPalloni } from "@/components/crapp/PromemoriaPalloni";
-import { Card, Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
+import { Card, LinkProfilo, Section, StatTile } from "@/components/crapp/ui-bits";
 import { CompletaProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import { Reveal } from "@/components/motion/Reveal";
 import { Barra } from "@/components/motion/Barra";
@@ -72,7 +72,7 @@ function Index() {
             </p>
             <h1 className="font-display-lg text-4xl uppercase leading-none">CRAP Volley</h1>
           </div>
-          <TeamLogo className="h-12 w-12" />
+          <LinkProfilo />
         </div>
 
         <div className="mt-6 grid grid-cols-3 gap-2 text-center">
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index c7900a3..9103f7c 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -3,7 +3,14 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Flame, Camera, Trash2, Bell, LogOut, ShieldCheck, Bug, Lightbulb } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { Card, PageHeader, Section, SezioneTendina, StatTile } from "@/components/crapp/ui-bits";
+import {
+  Card,
+  PageHeader,
+  Section,
+  SezioneTendina,
+  StatTile,
+  TeamLogo,
+} from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import {
   caricaAvatar,
@@ -115,7 +122,12 @@ function Profilo() {
 
   return (
     <>
-      <PageHeader titolo={g.nome} sottotitolo={`#${g.numero} · ${g.ruolo}`} />
+      {/* Qui il link al profilo sarebbe un link a sé stessa: torna il logo. */}
+      <PageHeader
+        titolo={g.nome}
+        sottotitolo={`#${g.numero} · ${g.ruolo}`}
+        azione={<TeamLogo className="h-11 w-11" />}
+      />
 
       <Reveal className="-mt-6 px-5">
         <Card>

From 37a04e5103f714cc12fe3e63c796242cba128aec Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 19:24:42 +0200
Subject: [PATCH 18/37] =?UTF-8?q?Rimette=20=C2=ABHome=C2=BB=20come=20etich?=
 =?UTF-8?q?etta=20della=20prima=20voce?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`5c49294` aveva rinominato la voce in «Oggi» per dire cosa contiene la
schermata, ma il nome che la squadra usa è «Home».

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BottomNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index ad5a15b..bb52fd3 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -4,7 +4,7 @@ import { CalendarDays, Home, Trophy, Users } from "lucide-react";
 // Quattro voci e non cinque: il profilo sta in alto a destra
 // nell'intestazione di ogni pagina, dove lo cerca chi arriva da iOS.
 const items = [
-  { to: "/", label: "Oggi", icon: Home },
+  { to: "/", label: "Home", icon: Home },
   { to: "/calendario", label: "Calendario", icon: CalendarDays },
   { to: "/squadra", label: "Squadra", icon: Users },
   { to: "/classifica", label: "Classifica", icon: Trophy },

From bb4fb624f583114a044c007c153ad308fd4cd01e Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 19:35:44 +0200
Subject: [PATCH 19/37] Mette lo stemma della squadra nell'intestazione del
 profilo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In alto a destra sul profilo c'era `/icon-192.png`, cioè l'icona della PWA: ha
dentro il nome dell'app, e come marchio in una schermata dell'app stessa non
dice niente. Lì serve lo stemma della squadra.

`TeamLogo` prende una prop `src` con l'icona come default, così cambia solo la
chiamata del profilo. L'icona della PWA resta quella dappertutto altrove
(ripiego di `LinkProfilo`, schermata di caricamento, manifest, apple-touch-icon):
sulla home dello schermo è giusto che l'app si presenti come «CrAPP».

Il file arrivava come `logo_nerorosso.jpg` ma è un SVG: rinominato con
l'estensione giusta, altrimenti verrebbe servito come JPEG e non si vedrebbe.
Sta in `public/`, che è la cartella servita così com'è.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public/logo-nerorosso.svg        | 63 ++++++++++++++++++++++++++++++++
 src/components/crapp/ui-bits.tsx | 14 ++++++-
 src/routes/profilo.tsx           |  2 +-
 3 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 public/logo-nerorosso.svg

diff --git a/public/logo-nerorosso.svg b/public/logo-nerorosso.svg
new file mode 100644
index 0000000..d663d9b
--- /dev/null
+++ b/public/logo-nerorosso.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Livello_2" data-name="Livello 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 251.68 251.68">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-3 {
+        fill: #c71b1e;
+      }
+
+      .cls-4 {
+        fill: #fffefe;
+      }
+
+      .cls-5 {
+        fill: #2b2b2b;
+      }
+
+      .cls-6 {
+        fill: #fefefe;
+      }
+
+      .cls-7 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <circle class="cls-2" cx="125.84" cy="125.84" r="125.84"/>
+    </clipPath>
+  </defs>
+  <g id="Livello_2-2" data-name="Livello 2">
+    <g id="Livello_1-2" data-name="Livello 1-2">
+      <g class="cls-7">
+        <g>
+          <path class="cls-6" d="M125.84-62.89c62.44,0,124.88,0,187.33-.03,1.25,0,1.53.28,1.53,1.53-.03,124.82-.03,249.65,0,374.47,0,1.25-.28,1.53-1.53,1.53-124.88-.03-249.77-.03-374.65,0-1.25,0-1.53-.28-1.53-1.53.03-124.82.03-249.65,0-374.47,0-1.25.28-1.53,1.53-1.53,62.44.04,124.88.03,187.33.03h0Z"/>
+          <path class="cls-5" d="M124.21-.02c67.02-.38,122.8,50.54,126.88,118.01,4.38,72.38-50.94,129.74-118.26,133.28C60.32,255.08,3.59,199.62.27,132.23-3.24,61.01,51.92,1.56,124.21-.02Z"/>
+          <path class="cls-1" d="M5.74,124.8C6.8,54.79,63.91,4.74,126.89,5.72c69.9,1.09,119.98,58.16,118.83,121.5-1.28,70.45-58.7,120.16-122.19,118.63-69.64-1.67-118.46-58.45-117.79-121.05Z"/>
+          <path class="cls-5" d="M63.98,159.08c-19.79-37.26.63-84.13,29.27-96.85-2.72,2.9-4.95,5.88-6.76,9.11-3.62,6.43-6.55,13.15-7.55,20.57-.4,2.95-.2,5.88.29,8.79.1.62.16,1.52,1.21,1.38,1.08-.14.58-.92.57-1.51-.07-2.78.79-5.42,1.4-8.08,1.17-5.16,3.08-10.08,5.28-14.88,1.87-4.08,4.23-7.92,7.14-11.32,1.98-2.31,5.06-3,7.89-3.9,6.38-2.03,12.99-2.97,19.59-3.88.58-.08,1.15-.19,1.9-.31-.42,1.39-1.56,2.11-2.37,2.92-5.22,5.24-9.19,11.34-12.61,17.83-3.46,6.59-5.77,13.59-7.31,20.87-.78,3.7-1.15,7.38-.15,11.09.07.26.09.58.25.76.26.3-.03,1.09.86.89.78-.18.72-.68.73-1.24.05-3.13.65-6.16,1.58-9.16,1.81-5.8,4.31-11.29,7.22-16.6,3.49-6.37,7.38-12.47,11.89-18.19,1.95-2.48,3.87-4.99,5.94-7.36,1.61-1.84,3.79-1.83,5.99-1.52,5.38.75,10.69,1.86,15.78,3.8,1.83.7,3.53,1.72,5.24,2.72,1.31.77.97,1.56.22,2.19-2.61,2.19-4.91,4.68-7.18,7.2-2.92,3.25-5.69,6.63-7.99,10.37-2.14,3.48-4.23,6.99-6.03,10.68-2.44,5.01-4.33,10.2-5.77,15.56-.49,1.83-1,3.65-1.43,5.49-.1.43-.5,1.17.35,1.35.62.14.92-.33,1.17-.87,1.98-4.31,3.91-8.64,6.29-12.75,3.07-5.29,6.17-10.55,9.7-15.58,2.9-4.13,6-8.05,9.5-11.67,2.22-2.3,4.65-4.38,7.19-6.33,1.04-.79,2.96-.15,4.65,1.32,2.97,2.58,5.61,5.48,8.17,8.46.66.78,1.47,1.4,2.08,2.27.62.88.47,1.36-.21,1.85-2.92,2.07-5.82,4.18-8.49,6.57-8.35,7.46-15.05,15.83-15.01,27.83,0,.39-.03.78,0,1.16.04.46.19.89.76.91.55.01.77-.36.85-.83.75-4.12,2.39-7.91,4.28-11.62,4.48-8.78,10.56-15.99,19.67-20.26.97-.45,2.02-.73,2.96-1.24,1.53-.83,2.28.01,2.98,1.19,4.76,8,7.18,16.73,8.44,25.9,1.2,8.79,1.19,17.52-.46,26.23-1.79,9.44-5.54,18.01-11.7,25.45-.1.12-.28.15-.45.24-.35-.68.11-1.19.37-1.67,4.87-8.8,7.84-18.18,8.92-28.19.94-8.68.13-17.2-2.29-25.52-1.52-5.23-3.97-10.08-7.82-14.09-.38-.4-.66-.79-1.21-.42-.59.41-.2.78.08,1.23,5.31,8.66,7.51,18.13,7.65,28.22.09,6.79-.79,13.42-2.44,19.96-2.59,10.21-7.2,19.45-13.37,27.99-2.84,3.93-6.01,7.27-10.61,9.53.28-1.68,1.15-2.94,1.89-4.19,2.41-4.04,3.96-8.45,5.54-12.83,2.14-5.92,3.77-11.97,4.39-18.26.8-8.13.42-16.12-3.17-23.65-2.11-4.42-5.32-7.92-9.21-10.84-.48-.36-.76-.35-1.11.06-.34.41-.25.59.16,1.03,5.35,5.65,8.57,12.31,9.53,20.09.97,7.86-.35,15.43-2.57,22.9-2.72,9.14-6.79,17.68-11.54,25.92-.68,1.18-1.55,2.29-2.03,3.55-1.05,2.76-2.91,4.31-5.76,5.07-6.72,1.79-13.45,3.47-20.47,3.18-4.78-.2-9.44-1.18-14.04-2.39-5.92-1.56-11.71-3.58-17.15-6.4-5.42-2.81-10.51-6.14-14.25-11.26,1.46.78,2.92,1.55,4.37,2.36,5.73,3.2,11.76,5.58,18.17,7.11,8.19,1.96,16.43,2.01,24.71,1.19,5.71-.56,11.34-1.64,16.87-3.18,2.36-.66,4.72-1.31,7.07-2,.36-.1,1.06-.03.86-.71-.15-.51-.64-.42-1.12-.33-3.76.68-7.49,1.56-11.29,2.08-5.98.82-11.97,1.09-17.99.77-5.37-.29-10.7-1.02-15.93-2.28-5.18-1.24-10.21-2.93-15.16-4.92-6.11-2.46-11.83-5.64-17.55-8.85-2.51-1.41-3.5-3.97-4.47-6.39-2.13-5.35-3-10.93-2.2-16.7.28-1.98.5-2.16,2.13-1.08,4.64,3.06,9.15,6.32,14.24,8.63,3.71,1.68,7.47,3.2,11.33,4.54,5.65,1.96,11.45,3.2,17.34,4.06,8.08,1.17,16.2,1.22,24.34.58,9.34-.73,18.4-2.82,27.42-5.21.48-.13,1.09-.27.91-.93-.16-.55-.62-.46-1.19-.39-5.52.72-11.02,1.54-16.57,2.02-9.92.85-19.84,1.04-29.75.05-7.67-.76-15.2-2.31-22.51-4.86-7.33-2.56-14.1-6.05-20.08-11.09-1.84-1.55-3.49-3.26-5.23-4.89-1.23-1.15-1.46-2.76-1.11-4.53,1.32-6.78,4.63-12.49,9.05-17.65.77-.9,1.63-.43,2.33.08,4.6,3.35,9.94,5.21,15.14,7.28,7.31,2.91,14.92,4.89,22.69,6.02,8.76,1.28,17.59,1.83,26.43.76,5.54-.67,10.91-2.03,16.05-4.25.53-.23.96-.41.76-1-.2-.6-.67-.46-1.19-.29-6.58,2.15-13.35,3-20.26,3-5.32,0-10.59-.46-15.84-1.38-6.07-1.06-12.05-2.5-17.87-4.44-6.34-2.11-12.44-4.8-18.11-8.47-2.48-1.61-4.8-3.4-7.18-5.12-.95-.68-1.72-.53-2.48.08-5.2,4.18-8.4,9.68-10.74,15.85-1.55,4.1-2.7,8.29-3.52,12.55-1.14,5.88-1.43,11.85-1.02,17.86.19,2.7.74,5.35.82,8.04h.03Z"/>
+          <path class="cls-3" d="M10.31,131.81c3.35-3.02,6.64-5.86,9.76-8.86,6.19-5.94,11.66-12.47,15.84-20,5.9-10.62,8.25-22,7.34-34.11-.48-6.43-2.09-12.6-3.69-18.93,1.57-.02,3.04.55,4.51.91,7.31,1.75,14.62,2.24,22.03.71,5.53-1.14,10.6-3.38,15.34-6.36,4.25-2.67,8.12-5.86,11.65-9.43,4.24-4.29,8.17-8.84,11.6-13.81.17-.25.24-.66.88-.61-.59,2.11-1.8,3.88-2.77,5.74-2.61,5-5.88,9.58-9.5,13.87-3.39,4.01-7.23,7.59-11.61,10.54-4.29,2.89-8.89,5.2-13.87,6.63-5.12,1.47-10.35,2.16-15.68,1.77-1.18-.09-1.78-.03-1.44,1.55,1.35,6.27,1.67,12.63,1.18,19.02-.36,4.59-1.24,9.1-2.59,13.49-1.62,5.25-3.97,10.21-6.79,14.94-2.38,4-5.19,7.67-8.3,11.11-2.22,2.46-4.48,4.91-7.04,7.03-.91.75-.91,1.02.22,1.46,6.48,2.53,11.72,6.67,15.47,12.54,2.86,4.48,4.34,9.45,4.98,14.76.86,7.16-.04,14.13-1.52,21.08-.07.34-.28.64-.57,1.3.07-4.47.23-8.56-.11-12.64-.46-5.6-1.47-11.08-3.96-16.19-3.2-6.59-8.2-11.17-15.07-13.76-4.79-1.81-9.76-2.68-14.8-3.31-.45-.06-.89-.24-1.46-.41l-.03-.03Z"/>
+          <path class="cls-3" d="M208.99,79.14c.38,3.01.24,6.01.5,9,.58,6.65,2.03,13.02,6.08,18.48,3,4.04,7.03,6.59,11.89,8.08,4.52,1.39,9.19,1.79,13.97,2.54-3.6,3.42-7.17,6.62-10.5,10.06-3.84,3.95-7.27,8.26-10.14,12.99-3,4.94-5.11,10.26-6.37,15.89-1.95,8.76-1.47,17.47.81,26.12.51,1.92.81,3.92,1.52,5.76.61,1.58-.38,1.16-1.03,1.02-2.9-.64-5.79-1.28-8.73-1.66-6.46-.82-12.72-.2-18.82,2.22-5.97,2.37-11.1,5.99-15.73,10.34-4.36,4.09-8.18,8.66-11.66,13.52-.13.18-.25.36-.5.45,1.24-3.45,2.83-6.7,4.76-9.77,1.58-2.52,3.18-5.03,5.1-7.35,3.09-3.72,6.46-7.12,10.43-9.86,4.03-2.77,8.41-4.85,13.19-6.07,3.51-.9,7.05-1.5,10.66-1.35,1.55.06,1.65-.41,1.36-1.77-1.95-9.13-1.62-18.25.96-27.17,2.17-7.53,5.79-14.39,10.92-20.43,2.25-2.65,4.36-5.4,7.07-7.62.31-.26.47-.71.73-1.13-2.79-1.21-5.38-2.63-7.77-4.52-3.88-3.07-6.64-6.87-8.38-11.42-1.85-4.81-2.41-9.8-2.17-14.97.18-3.89.83-7.65,1.86-11.39h-.01Z"/>
+          <path class="cls-3" d="M157.93,36.41c2.73,2.41,1.56,5,.85,7.52-.91,3.27-1.89,6.53-2.83,9.77.62.36.73-.11.93-.41,4.31-6.35,8.68-12.65,12.88-19.07,1.75-2.68,3.75-5.2,5.34-7.99.36-.64.73-.49,1.14-.26,3.13,1.73,6.24,3.5,9.39,5.19.56.3.53.58.32,1.01-2.45,5.12-4.43,10.45-6.71,15.64-2.16,4.92-4.24,9.88-6.32,14.83-.45,1.06-.87,1.38-1.82.62-.12-.1-.3-.13-.43-.21-1.36-.8-3.28-1.3-3.91-2.48-.6-1.13.88-2.71,1.41-4.11.31-.82.2-1.2-.54-1.53-.24-.11-.48-.25-.69-.42-1.31-1.04-2.13-.97-3.09.66-1.97,3.35-2.14,3.34-5.38,1.23-2.24-1.46-4.77-1.92-7.25-2.56-2.25-.57-2.41-.74-1.78-2.92,1.12-3.9,2.28-7.79,3.38-11.69.35-1.25-.62-1.78-1.52-2.06-.98-.31-.74.66-.88,1.16-1.28,4.42-2.67,8.81-3.69,13.3-.12.51-.43.71-.96.56-1.89-.5-3.77-1.02-5.67-1.47-.74-.18-.65-.63-.51-1.11,2.21-7.7,4.43-15.39,6.63-23.1.82-2.87,1.53-5.76,2.35-8.62.25-.87.43-1.6,1.86-1.05,2.55.98,5.26,1.58,7.92,2.26,4.2,1.08,6.17,2.57,5.5,7.84-.34,2.68-1.06,5.3-2.59,7.64-.73,1.11-1.68,1.7-3.32,1.82h0Z"/>
+          <path class="cls-3" d="M141.72,214.39c.26-3.09.53-6.1.74-9.1.06-.92.14-1.44,1.34-1.41,1.61.05,3.23-.21,4.83-.4.82-.09.97.13.83.95-.49,2.83-.92,5.68-1.32,8.53-.72,5.21-2.06,10.36-2.13,15.64-.04,3.06.45,6.13.73,9.2.08.85-.04,1.37-1.09,1.34-.95-.03-1.9.18-2.85.23-2.77.14-2.92.13-2.93-2.62,0-6.06-1.37-11.81-3.43-17.46-1.25-3.45-2.29-6.97-3.45-10.54-.23.15-.44.22-.46.32-.25,1.71-1.26,2.44-3.03,2.2-.95-.13-1.91,0-2.88-.24-.68-.16-1.43.12-1.39,1.29.05,1.35-.22,2.72-.36,4.07-.1.97.1,1.51,1.31,1.49,1.52-.03,3.05.23,4.57.31.54.03.76.11.69.74-.2,1.66-.28,3.33-.47,5-.09.79-.35,1.39-1.38.93-.37-.16-.87-.04-1.32-.05-1.34-.02-3.03-.94-3.88-.09-.71.72-.34,2.47-.48,3.77-.3,2.69.91,4.11,3.64,4.25,2.39.13,3.45,1.38,3.19,3.77-.03.27-.12.53-.16.8-.36,2.57-.36,2.62-2.82,2.43-3.61-.28-7.21-.67-10.82-.91-.99-.07-1.15-.42-1.08-1.31.9-10.22,1.76-20.45,2.64-30.68.28-3.23.28-3.2,3.47-3.01,5.32.32,10.61,1.31,15.96.5.63-.1.79.24.93.83.59,2.51,1.24,5.01,1.93,7.5.16.57,0,1.34.9,1.74h.03Z"/>
+          <path class="cls-3" d="M79.75,188.79c3.86-.23,9.76,3.99,9.55,8.25-.13,2.65-1.18,4.87-2.57,7.06-2.77,4.36-5.34,8.85-8.17,13.17-1.87,2.86-4.17,5.45-8.05,5.17-5.56-.4-10.87-5.43-7.89-11.94,2.06-4.51,4.88-8.6,7.48-12.8,1.03-1.67,2.11-3.31,3.15-4.97,1.51-2.41,3.6-3.85,6.51-3.94h-.01Z"/>
+          <path class="cls-3" d="M139.49,38.8c-.13,1.75-.11,3.17-.37,4.54-.9,4.72-3.6,6.92-8.55,6.81-5.35-.11-8.74-3.21-8.66-8.72.07-4.91.55-9.81.76-14.71.11-2.56.16-5.08,1.1-7.54.95-2.48,2.57-4.13,5.13-4.68,3.54-.75,6.84-.18,9.49,2.47.87.87,1.46,2,1.61,3.27.31,2.6.13,5.2-.11,7.8-.08.89-.29,1.09-1.19.95-1.54-.25-3.14-.28-4.67-.24-1.48.03-1.25-.55-1.18-1.42.11-1.46.22-2.92.28-4.38.05-1.17-.28-2.03-1.69-2.1-1.51-.07-1.48,1.25-1.54,2.01-.31,3.71-.43,7.44-.61,11.16-.11,2.2-.21,4.39-.32,6.59-.02.42-.22.89-.09,1.25.26.76.28,1.8,1.55,1.74,1.12-.05,1.55-.76,1.63-1.7.17-1.98.38-3.98.36-5.97,0-1.24.57-1.4,1.49-1.24,1.42.26,2.85.15,4.27.23.85.05,1.69.06,1.35,1.42-.21.88-.04,1.86-.04,2.45h0Z"/>
+          <path class="cls-3" d="M57.24,196.9c1.51-1.4,3.03-2.79,4.54-4.19,3.02-2.81,5.97-5.69,9.06-8.41,2.41-2.12,2.8-2.01,5.08.43.19.2.36.41.56.6,1.57,1.57,1.57,1.59-.22,3.13-4.54,3.92-9.11,7.79-13.59,11.78-3.53,3.15-7.04,6.32-10.65,9.38-.56.48-.66.47-1.22,0-2-1.68-3.97-3.39-5.88-5.18-.7-.66-.51-.97-.13-1.52,4.74-6.85,9.55-13.65,14.17-20.58,1.6-2.39,3.48-4.59,4.88-7.11.33-.59.47-.86,1.11-.19,1.13,1.18,2.46,2.15,3.64,3.29.72.7.59,1.07.15,1.67-2.13,2.95-4.28,5.88-6.38,8.85-1.82,2.56-3.6,5.15-5.39,7.73.09.1.18.21.27.31h0Z"/>
+          <path class="cls-3" d="M193.76,62.34c-2.55,0-4.15-1.51-5.69-3.03-.75-.74-1.06-.85-1.8.03-2.5,3.01-5.11,5.93-7.68,8.88-.34.39-.63.56-1.21.18-1.56-1.03-2.77-2.45-4.26-3.54-.42-.31-.57-.6-.14-1.07,2.49-2.81,4.97-5.63,7.44-8.46,3.05-3.5,6.09-7,9.15-10.5,1.83-2.09,3.66-4.19,5.53-6.25.35-.39.64-1.07,1.43-.32,2.21,2.09,4.56,4.04,6.76,6.14,3.25,3.11,2.89,5.98,1.19,8.84-2.2,3.72-4.87,7.14-9.14,8.79-.35.14-.71.29-1.08.37-.2.04-.42-.05-.49-.06h0Z"/>
+          <path class="cls-3" d="M98.75,198.07c-.7,1.86-1.32,3.69-2.07,5.47-1.61,3.83-3.21,7.66-4.68,11.55-1.12,2.97-2.39,5.88-3.66,8.79-.34.79-.31,1.18.59,1.47,1.44.47,2.82,1.12,4.25,1.59,1.08.36,1.66.82,1.01,2.01-.24.43-.34.96-.63,1.33-.65.83-.17,2.52-1.49,2.64-.99.09-2.13-.44-3.06-.95-2.81-1.56-5.95-2.31-8.84-3.66-.83-.39-1.1-.58-.69-1.56,2.32-5.47,4.55-10.97,6.78-16.47,1.75-4.32,3.51-8.64,5.18-12.99.56-1.45.97-2.52,2.82-1.3,1.1.73,2.49,1.01,3.76,1.47.35.13.76.13.72.61h.01Z"/>
+          <path class="cls-3" d="M111.04,237.95c-4.26-.98-8.55-1.95-12.83-2.96-.66-.16-1.25-.32-.96-1.43,1.48-5.73,2.84-11.49,4.22-17.24,1.2-5.03,2.39-10.06,3.52-15.1.19-.83.62-.77,1.18-.66,1.63.33,3.2.88,4.87,1.06.87.1,1.14.57.88,1.57-1.66,6.54-3.3,13.1-4.79,19.68-.48,2.13-.96,4.26-1.51,6.37-.26,1.02.09,1.28.98,1.5,1.59.4,3.21.68,4.8,1.15,1.17.34.92.87.79,1.5-.33,1.53-.75,3.03-1.14,4.56h-.01Z"/>
+          <path class="cls-4" d="M177.6,34.32c.36.39.02.81-.11,1.05-2.37,4.48-3.97,9.31-6.19,13.85-.16.33-.28,1.57-1.13.57-.51-.59-2.46-.2-1.44-1.83,2.83-4.53,5.74-9.01,8.63-13.51.04-.07.16-.09.25-.13h0Z"/>
+          <path class="cls-4" d="M152.67,30.25c.48-1.66.96-3.31,1.42-4.98.17-.61.61-.41.89-.27.71.37,1.93.32,1.74,1.56-.23,1.48-.41,2.99-1.3,4.29-.55.81-1.2.61-1.99.45-.69-.15-.77-.48-.77-1.06h.01Z"/>
+          <path class="cls-1" d="M82.03,197.11c.05.64-.23,1.19-.54,1.69-3.14,5.09-6.31,10.17-9.46,15.25-.54.86-1.06,1.96-2.3,1.43-1.58-.67-1.05-1.99-.47-3,1.29-2.26,2.66-4.49,4.14-6.62,1.82-2.64,3.19-5.53,4.92-8.22.48-.75,1.04-1.42,1.86-1.78,1-.44,1.85.15,1.87,1.25h-.02Z"/>
+          <path class="cls-4" d="M196.83,47.3c1.91,1.83,1.86,2.87-.33,5.25-.52.56-1.08,1.09-1.66,1.59-.7.61-1.55.76-2.39.38-.88-.4-1.46-.87-.45-1.9,1.68-1.7,3.23-3.54,4.83-5.32Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index 73f1126..fe80e8e 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -8,10 +8,20 @@ import { Avatar } from "@/components/crapp/Avatar";
 import { Reveal } from "@/components/motion/Reveal";
 import { Numero } from "@/components/motion/Numero";
 
-export function TeamLogo({ className }: { className?: string }) {
+export function TeamLogo({
+  className,
+  /**
+   * Di default l'icona della PWA, che ha dentro il nome dell'app. Dove serve lo
+   * stemma della squadra e basta si passa `/logo-nerorosso.svg`.
+   */
+  src = "/icon-192.png",
+}: {
+  className?: string;
+  src?: string;
+}) {
   return (
     <img
-      src="/icon-192.png"
+      src={src}
       alt="CRAP Volley"
       width={192}
       height={192}
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index 9103f7c..f474c63 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -126,7 +126,7 @@ function Profilo() {
       <PageHeader
         titolo={g.nome}
         sottotitolo={`#${g.numero} · ${g.ruolo}`}
-        azione={<TeamLogo className="h-11 w-11" />}
+        azione={<TeamLogo src="/logo-nerorosso.svg" className="h-11 w-11" />}
       />
 
       <Reveal className="-mt-6 px-5">

From c089d9e8babec5f377125895d0412c524f6a1784 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 20:02:13 +0200
Subject: [PATCH 20/37] =?UTF-8?q?D=C3=A0=20profondit=C3=A0=20alle=20superf?=
 =?UTF-8?q?ici=20e=20trasforma=20la=20barra=20in=20vetro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fondo pagina, carte e `secondary` stavano dentro tre punti di luminosità:
carta e fondo avevano un rapporto di contrasto di 1.04, cioè erano lo stesso
bianco. Le carte non si leggevano come carte, e l'unica cosa che le staccava
era `shadow-card` — 6% di nero, che su un telefono al sole non esiste. Da qui
l'impressione che fondo, barra ed elementi fossero «tre bianchi».

La rampa dei neutri è ridistanziata: fondo 0.93, carta 1.0, `secondary` 0.90.
Carta e fondo passano a 1.23, un elemento dentro una carta sta a 1.35 dalla
carta ed è più scuro di essa, come nelle liste raggruppate di iOS. 0.93 è il
fondo più scuro possibile senza toccare altro: il limite lo impone
`text-accent` appoggiato sul fondo, che a 0.92 scenderebbe sotto 4.5.

Due colori vanno corretti di conseguenza, altrimenti la modifica peggiora la
leggibilità: l'accento scende a 0.54 (a 0.58 come testo faceva 4.07 sul nuovo
fondo; ora fa 4.62, e migliora anche il bianco che ci sta sopra, da 4.65 a
5.51) e `muted-foreground` a 0.48. Verificati convertendo le oklch in sRGB e
calcolando i rapporti, non a occhio.

`--destructive` e `--ring` erano *lo stesso identico colore* dell'accento:
«elimina», «selezionato» e «ho il focus qui» davano il medesimo segnale. Il
distruttivo resta rosso ma più scuro e cupo, il focus viene dal neutro.

Le ombre passano da una a tre quote: `shadow-card` per il contenuto,
`shadow-chrome` per barra, drawer e toast (più profonda, più il filo chiaro sul
bordo alto), `shadow-alza` neutra per l'hover — `premi` metteva un alone rosso
sotto ogni riga di classifica.

La barra ora usa `vetro`: fondo al 62% invece dell'85%, così ci si vede
attraverso, più tre ombre interne che sono il bordo illuminato. L'85% di
`materiale` esiste per tenere allineati WebKit e Blink (608f2ed) su una fascia
larga quanto lo schermo; su una pillola di 60 px lo scarto non si legge.

Dietro `@supports`, un `feDisplacementMap` distorce davvero il fondale: solo
Blink accetta un filtro SVG in `backdrop-filter`, e WebKit ignorando l'url
scarterebbe anche il blur. Miglioria progressiva, non l'effetto principale.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public/manifest.webmanifest        |   4 +-
 src/components/crapp/BottomNav.tsx |  68 ++++++++++++---
 src/components/ui/drawer.tsx       |   2 +-
 src/components/ui/sonner.tsx       |   2 +-
 src/routes/__root.tsx              |   2 +-
 src/styles.css                     | 134 ++++++++++++++++++++++++++---
 6 files changed, 185 insertions(+), 27 deletions(-)

diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index c1658b8..493f190 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -5,8 +5,8 @@
   "lang": "it",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#fafafb",
-  "theme_color": "#fafafb",
+  "background_color": "#e4e8ed",
+  "theme_color": "#e4e8ed",
   "orientation": "portrait",
   "icons": [
     {
diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index bb52fd3..37b0331 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -1,5 +1,7 @@
 import { Link } from "@tanstack/react-router";
 import { CalendarDays, Home, Trophy, Users } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { molla } from "@/lib/molla";
 
 // Quattro voci e non cinque: il profilo sta in alto a destra
 // nell'intestazione di ogni pagina, dove lo cerca chi arriva da iOS.
@@ -11,6 +13,8 @@ const items = [
 ] as const;
 
 export function BottomNav() {
+  const ridotto = useReducedMotion();
+
   return (
     <nav
       aria-label="Navigazione principale"
@@ -20,31 +24,75 @@ export function BottomNav() {
       // arrivare al contenuto sotto.
       className="pad-sicura-fondo pointer-events-none fixed inset-x-0 bottom-0 z-40 px-3"
     >
+      {/*
+        La mappa di spostamento del vetro. `feTurbulence` a bassa frequenza dà
+        una deformazione lenta e irregolare — la stessa cosa che fa un vetro non
+        perfettamente piano — e la sfocatura che segue toglie il granuloso del
+        rumore, altrimenti il fondale si sgranerebbe invece di piegarsi.
+
+        Nessuna dimensione e nessun colore: è solo la definizione del filtro che
+        il CSS richiama per id. La usa solo Blink (vedi `@supports` in
+        styles.css); su WebKit questo SVG resta lì senza fare niente.
+      */}
+      <svg aria-hidden="true" className="absolute h-0 w-0" focusable="false">
+        <filter id="vetro-rifrazione" colorInterpolationFilters="sRGB">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.008 0.016"
+            numOctaves={2}
+            seed={7}
+            result="rumore"
+          />
+          <feGaussianBlur in="rumore" stdDeviation={3} result="mappa" />
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="mappa"
+            scale={16}
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+        </filter>
+      </svg>
+
       {/*
         Altezza fissa dal token, non dedotta dal contenuto: la striscia
         toccabile misura uguale su iOS e Android, e sotto varia solo l'inset
         di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
         poteva saperla da fuori.
       */}
-      <div className="materiale pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-4 overflow-hidden rounded-full border border-border/60 px-1 shadow-lg">
+      {/* `vetro` porta con sé le proprie ombre, quindi niente `shadow-chrome`:
+          sarebbero due `box-shadow` sullo stesso elemento e una vincerebbe. */}
+      <div className="vetro pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-4 rounded-full border border-white/40 p-1.5">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
             to={to}
             activeOptions={{ exact: to === "/" }}
             activeProps={{ "aria-current": "page" }}
-            // Lo stato attivo non è solo colore: cambia anche il peso del
-            // testo e compare la barretta sopra l'icona.
-            className="group relative flex h-full flex-col items-center justify-center gap-1 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
+            // Lo stato attivo non è solo colore: è la capsula piena sotto la
+            // voce, più il peso del testo. Chi non distingue i colori vede
+            // comunque quale voce è quella corrente.
+            className="group relative flex h-full flex-col items-center justify-center gap-0.5 rounded-full text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent-foreground"
           >
             {({ isActive }) => (
               <>
-                <span
-                  aria-hidden="true"
-                  className="absolute inset-x-4 top-0 h-0.5 rounded-full bg-accent opacity-0 transition-opacity group-data-[status=active]:opacity-100"
-                />
-                <Icon className="h-5 w-5" strokeWidth={isActive ? 2.6 : 2.2} />
-                {label}
+                {isActive ? (
+                  <motion.span
+                    // `layoutId`: la capsula è un solo elemento che scivola da
+                    // una voce all'altra invece di sparire e ricomparire. La
+                    // molla è interrompibile, quindi due tocchi rapidi non
+                    // fanno saltare la posizione.
+                    layoutId="capsula-nav"
+                    aria-hidden="true"
+                    className="bg-accent-grad absolute inset-0 rounded-full shadow-pop"
+                    transition={ridotto ? { duration: 0 } : molla.ui}
+                  />
+                ) : null}
+                {/* Sopra la capsula, che è in flusso normale sotto di loro. */}
+                <span className="relative flex flex-col items-center gap-0.5">
+                  <Icon className="h-5 w-5" strokeWidth={isActive ? 2.6 : 2.2} />
+                  {label}
+                </span>
               </>
             )}
           </Link>
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 33533cc..fc12725 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -38,7 +38,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background shadow-chrome",
         className,
       )}
       {...props}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 7a21469..08e399f 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -9,7 +9,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-chrome",
           description: "group-[.toast]:text-muted-foreground",
           actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index cf97081..fe38389 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -100,7 +100,7 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
       { name: "author", content: "CRAP Volley" },
       // Deve combaciare con --background, altrimenti la barra di stato resta
       // nera sopra un'interfaccia chiara.
-      { name: "theme-color", content: "#fafafb" },
+      { name: "theme-color", content: "#e4e8ed" },
       { property: "og:title", content: "CrAPP — L'app del CRAP Volley" },
       {
         property: "og:description",
diff --git a/src/styles.css b/src/styles.css
index c0b523d..f3141e0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -75,7 +75,25 @@
    */
   --altezza-nav: 3.75rem;
   --pad-sicura-fondo: max(env(safe-area-inset-bottom), 0.5rem);
-  --background: oklch(0.985 0.002 240);
+  /*
+   * Rampa dei neutri, distanziata per essere vista.
+   *
+   * Prima fondo (0.985), carta (1.0) e `secondary` (0.955) stavano dentro tre
+   * punti di luminosità: carta e fondo avevano un rapporto di contrasto di
+   * 1.04, cioè erano lo stesso bianco. Le carte non si leggevano come carte e
+   * l'unica cosa che le staccava era `shadow-card`, che su un telefono al sole
+   * sparisce.
+   *
+   * Ora fondo 0.93 e carta 1.0 stanno a 1.23, e `secondary` (0.90) sta a 1.35
+   * dalla carta: un elemento dentro una carta è più scuro della carta, come
+   * nelle liste raggruppate di iOS.
+   *
+   * 0.93 è il fondo più scuro possibile senza toccare altro: il limite lo
+   * impone `text-accent` appoggiato sul fondo, che qui vale 4.62 e a 0.92
+   * scenderebbe a 4.48, sotto AA. Per andare più giù va scurito anche
+   * l'accento.
+   */
+  --background: oklch(0.93 0.008 255);
   --foreground: oklch(0.16 0.01 260);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0.01 260);
@@ -83,17 +101,29 @@
   --popover-foreground: oklch(0.16 0.01 260);
   --primary: oklch(0.16 0.012 265);
   --primary-foreground: oklch(0.99 0 0);
-  --secondary: oklch(0.955 0.004 250);
+  --secondary: oklch(0.9 0.01 255);
   --secondary-foreground: oklch(0.2 0.012 265);
-  --muted: oklch(0.955 0.004 250);
-  --muted-foreground: oklch(0.52 0.015 260);
-  --accent: oklch(0.58 0.22 27);
+  --muted: oklch(0.925 0.008 255);
+  /* 0.48 e non 0.52: sul nuovo `secondary` il vecchio valore scendeva a 4.2. */
+  --muted-foreground: oklch(0.48 0.015 260);
+  /*
+   * Accento più scuro (era 0.58): su un fondo più scuro il rosso di prima
+   * scendeva a 4.07 come testo. A 0.54 migliora in tutte e tre le direzioni —
+   * 4.62 sul fondo, 5.67 sulla carta, 5.51 per il bianco che ci sta sopra.
+   */
+  --accent: oklch(0.54 0.22 27);
   --accent-foreground: oklch(0.99 0 0);
-  --destructive: oklch(0.58 0.22 27);
+  /*
+   * Distruttivo e accento erano lo stesso identico colore: «elimina» e
+   * «selezionato» davano lo stesso segnale. Resta rosso — è la convenzione —
+   * ma più scuro e più cupo dell'accento del brand.
+   */
+  --destructive: oklch(0.47 0.19 18);
   --destructive-foreground: oklch(0.99 0 0);
-  --border: oklch(0.915 0.006 255);
-  --input: oklch(0.915 0.006 255);
-  --ring: oklch(0.58 0.22 27);
+  --border: oklch(0.875 0.01 255);
+  --input: oklch(0.875 0.01 255);
+  /* Il focus non è una selezione: viene dal neutro, non dall'accento. */
+  --ring: oklch(0.35 0.03 265);
   /* Luminosità scelte perché il testo bianco sopra superi 4.5:1 (WCAG AA). */
   --success: oklch(0.53 0.16 152);
   --success-foreground: oklch(0.99 0 0);
@@ -117,9 +147,26 @@
     oklch(0.24 0.03 20) 55%,
     oklch(0.45 0.19 27)
   );
-  --gradient-accent: linear-gradient(120deg, oklch(0.58 0.22 27), oklch(0.68 0.19 40));
+  /* Parte dall'accento nuovo: era rimasto sul vecchio 0.58 e il gradiente
+     risultava più chiaro del colore pieno che gli sta accanto. */
+  --gradient-accent: linear-gradient(120deg, oklch(0.54 0.22 27), oklch(0.64 0.19 40));
+  /*
+   * Tre quote, non una. Prima `shadow-card` valeva sia per una tessera 3x3 sia
+   * per la barra di navigazione: superfici grandi e piccole sullo stesso piano.
+   * Una superficie più grande deve leggersi più spessa.
+   */
   --shadow-card: 0 1px 2px oklch(0.16 0.01 260 / 6%), 0 12px 28px -18px oklch(0.16 0.01 260 / 35%);
-  --shadow-pop: 0 18px 40px -20px oklch(0.58 0.22 27 / 55%);
+  /*
+   * Chrome flottante: barra, drawer. Ombra più profonda e più diffusa, più il
+   * filo chiaro sul bordo alto — la luce che prende il materiale, ed è quello
+   * che lo fa leggere come un oggetto sopra il contenuto invece che un buco.
+   */
+  --shadow-chrome:
+    inset 0 1px 0 oklch(1 0 0 / 60%), 0 1px 3px oklch(0.16 0.01 260 / 10%),
+    0 24px 48px -24px oklch(0.16 0.01 260 / 45%);
+  /* Sollevamento al passaggio del mouse: neutro, non tinto di accento. */
+  --shadow-alza: 0 12px 28px -14px oklch(0.16 0.01 260 / 40%);
+  --shadow-pop: 0 18px 40px -20px oklch(0.54 0.22 27 / 55%);
 }
 
 @theme inline {
@@ -158,6 +205,10 @@
   box-shadow: var(--shadow-pop);
 }
 
+@utility shadow-chrome {
+  box-shadow: var(--shadow-chrome);
+}
+
 /*
  * Il tracking del display è specifico per taglia: Bebas Neue a corpo grande
  * legge troppo spaziato (serve tracking negativo), a corpo piccolo troppo
@@ -290,7 +341,9 @@
   @media (hover: hover) {
     &:hover {
       transform: translateY(-2px);
-      box-shadow: var(--shadow-pop);
+      /* Neutra: `shadow-pop` è un alone di accento, e sotto una riga di
+         classifica era colore senza significato. */
+      box-shadow: var(--shadow-alza);
     }
   }
 }
@@ -378,6 +431,63 @@
   -webkit-backdrop-filter: blur(20px) saturate(150%);
 }
 
+/*
+ * Vetro della barra flottante. È `materiale` spinto: si vede attraverso.
+ *
+ * `materiale` sta all'85% di card perché è una superficie larga quanto lo
+ * schermo, dove il divario di blur fra WebKit e Blink si nota (608f2ed). Qui
+ * la superficie è una pillola piccola: si può scendere al 62% e lasciare che
+ * sia il blur a fare il lavoro, che è la condizione perché si legga come vetro
+ * invece che come plastica bianca.
+ *
+ * Le tre ombre interne sono la luce sul bordo, non decorazione: filo chiaro in
+ * alto (la luce che entra), filo scuro in basso (lo spessore del vetro), alone
+ * chiaro diffuso appena dentro il bordo (il riflesso sulla curva). Senza queste
+ * un rettangolo sfocato resta un rettangolo sfocato.
+ */
+@utility vetro {
+  background-color: color-mix(in srgb, var(--color-card) 62%, transparent);
+  backdrop-filter: blur(18px) saturate(180%) brightness(1.04);
+  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.04);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 85%),
+    inset 0 -1px 0 oklch(0.16 0.01 260 / 8%),
+    inset 0 0 12px oklch(1 0 0 / 35%),
+    0 1px 3px oklch(0.16 0.01 260 / 10%),
+    0 24px 48px -24px oklch(0.16 0.01 260 / 45%);
+}
+
+/*
+ * La distorsione vera: `feDisplacementMap` sposta i pixel del fondale, quindi
+ * quello che sta sotto si deforma davvero invece di sfocarsi soltanto.
+ *
+ * Sta dietro `@supports` perché solo Blink accetta un filtro SVG dentro
+ * `backdrop-filter`: WebKit lo ignora — e ignorandolo scarterebbe tutta la
+ * dichiarazione, blur compreso — quindi su iPhone resta la regola sopra. È una
+ * miglioria progressiva, non l'effetto principale: se sparisse domani la barra
+ * resterebbe quella giusta.
+ */
+@supports (backdrop-filter: url("#vetro-rifrazione")) {
+  .vetro {
+    backdrop-filter: url("#vetro-rifrazione") blur(18px) saturate(180%) brightness(1.04);
+  }
+}
+
+/* Il vetro traslucido è un vezzo: se l'utente chiede meno trasparenza sparisce. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .vetro {
+    background-color: var(--color-card);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .vetro {
+    background-color: var(--color-card);
+  }
+}
+
 /*
  * Chrome su Android disattiva `backdrop-filter` quando l'accelerazione
  * hardware non è disponibile: senza questo, su quei device la barra resta

From ede02b7575ac707080daee7d30f2d6691b942abc Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 21:18:19 +0200
Subject: [PATCH 21/37] Aggiunge sottosezioni a swipe su Squadra e Classifica.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/crapp/BarraSottosezioni.tsx | 119 ++++
 src/routes/classifica.tsx                  | 259 +++++----
 src/routes/squadra.tsx                     | 627 +++++++++++----------
 3 files changed, 593 insertions(+), 412 deletions(-)
 create mode 100644 src/components/crapp/BarraSottosezioni.tsx

diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
new file mode 100644
index 0000000..5ae5a22
--- /dev/null
+++ b/src/components/crapp/BarraSottosezioni.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { cn } from "@/lib/utils";
+import { molla, proietta } from "@/lib/molla";
+
+export type VoceSottosezione = {
+  id: string;
+  label: string;
+  contenuto: ReactNode;
+};
+
+/**
+ * Barra di sottosezioni in un'unica fila scorrevole (swipe orizzontale) e
+ * pannello che mostra una sola sezione alla volta, cambiabile anche con
+ * swipe sul contenuto.
+ */
+export function BarraSottosezioni({
+  voci,
+  defaultId,
+}: {
+  voci: VoceSottosezione[];
+  defaultId?: string;
+}) {
+  const [attiva, setAttiva] = useState(defaultId ?? voci[0]?.id ?? "");
+  const direzione = useRef(0);
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const ridotto = useReducedMotion();
+  const indice = Math.max(
+    0,
+    voci.findIndex((v) => v.id === attiva),
+  );
+  const voce = voci[indice] ?? voci[0];
+
+  useEffect(() => {
+    tabRefs.current[attiva]?.scrollIntoView({
+      behavior: ridotto ? "auto" : "smooth",
+      inline: "center",
+      block: "nearest",
+    });
+  }, [attiva, ridotto]);
+
+  function vaiA(nuovo: number) {
+    if (nuovo < 0 || nuovo >= voci.length) return;
+    const target = voci[nuovo];
+    if (!target || target.id === attiva) return;
+    direzione.current = nuovo > indice ? 1 : -1;
+    setAttiva(target.id);
+  }
+
+  if (!voce) return null;
+
+  return (
+    <div>
+      <div className="border-b border-border bg-background/80 pt-3 backdrop-blur-md">
+        <div
+          role="tablist"
+          aria-label="Sottosezioni"
+          className="-mx-0 flex snap-x snap-mandatory gap-1.5 overflow-x-auto px-5 pb-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+          {voci.map((v) => {
+            const selezionata = v.id === attiva;
+            return (
+              <button
+                key={v.id}
+                ref={(el) => {
+                  tabRefs.current[v.id] = el;
+                }}
+                type="button"
+                role="tab"
+                aria-selected={selezionata}
+                onClick={() => {
+                  const i = voci.findIndex((x) => x.id === v.id);
+                  vaiA(i);
+                }}
+                className={cn(
+                  "snap-center shrink-0 rounded-full px-3.5 py-2 text-xs font-bold uppercase tracking-wide transition-colors",
+                  "min-h-11 touch-manipulation whitespace-nowrap",
+                  selezionata
+                    ? "bg-accent text-accent-foreground shadow-pop"
+                    : "bg-secondary text-muted-foreground",
+                )}
+              >
+                {v.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="relative overflow-hidden">
+        <AnimatePresence initial={false} mode="popLayout" custom={direzione.current}>
+          <motion.div
+            key={voce.id}
+            role="tabpanel"
+            aria-label={voce.label}
+            custom={direzione.current}
+            drag="x"
+            dragConstraints={{ left: 0, right: 0 }}
+            dragElastic={0.18}
+            dragMomentum={false}
+            onDragEnd={(_, info) => {
+              const arrivo = info.offset.x + proietta(info.velocity.x);
+              if (arrivo < -60) vaiA(indice + 1);
+              else if (arrivo > 60) vaiA(indice - 1);
+            }}
+            initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 40 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * -40 }}
+            transition={ridotto ? { duration: 0.15 } : molla.foglio}
+            className="touch-pan-y px-5 py-4"
+          >
+            <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>
+            {voce.contenuto}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/src/routes/classifica.tsx b/src/routes/classifica.tsx
index 9c1c823..c26e407 100644
--- a/src/routes/classifica.tsx
+++ b/src/routes/classifica.tsx
@@ -2,11 +2,11 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { ChevronRight, RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { formatData } from "@/lib/crapp-data";
-import { PageHeader, Section, SezioneTendina } from "@/components/crapp/ui-bits";
+import { PageHeader } from "@/components/crapp/ui-bits";
+import { BarraSottosezioni } from "@/components/crapp/BarraSottosezioni";
 import { useScoutMatches } from "@/lib/scout-store";
 import { useCsi } from "@/lib/csi";
 import { isNostraSquadra, matchDaPartitaCsi, partiteGiocate } from "@/lib/csi-core";
-import { ScoutEntry } from "@/components/crapp/ScoutEntry";
 import { useVotiMvp, vincitoriMvp } from "@/lib/mvp-voti";
 import { useEventi } from "@/lib/eventi";
 
@@ -69,132 +69,141 @@ function Classifica() {
         sottotitolo={csi ? `${csi.girone} · CSI Bologna` : "CSI Bologna"}
       />
 
-      <div className="px-5 pt-4">
-        <div className="flex items-center gap-2 rounded-2xl bg-secondary px-3 py-2 text-xs text-muted-foreground">
-          <RefreshCw className="h-3.5 w-3.5 text-accent" />
-          {csi
-            ? `Dati CSI aggiornati ${formatAggiornamento(csi.aggiornato)}`
-            : "Dati CSI in arrivo"}
-        </div>
-        <div className="mt-2">
-          <ScoutEntry variante="compatto" />
-        </div>
-      </div>
-
-      <Section titolo="Classifica">
-        <div className="overflow-hidden rounded-3xl bg-card shadow-card">
-          <div className="grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] gap-2 border-b border-border px-3 py-2 text-xs font-bold uppercase text-muted-foreground">
-            <span>#</span>
-            <span>Squadra</span>
-            <span className="text-center">G</span>
-            <span className="text-center">Set</span>
-            <span className="text-center">Pt</span>
-          </div>
-          {classifica.length === 0 ? (
-            <p className="px-3 py-4 text-center text-xs text-muted-foreground">
-              Classifica non ancora disponibile.
-            </p>
-          ) : (
-            classifica.map((r) => {
-              const noi = isNostraSquadra(r.squadra) || r.squadra === "CRAP Volley";
-              return (
-                <div
-                  key={r.pos}
-                  className={cn(
-                    "grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] items-center gap-2 border-b border-border px-3 py-2.5 text-sm last:border-0",
-                    noi && "bg-accent/10",
-                  )}
-                >
-                  <span className={cn("font-display text-base", noi && "text-accent")}>
-                    {r.pos}
-                  </span>
-                  <span className={cn("truncate", noi ? "font-bold" : "font-medium")}>
-                    {r.squadra}
-                  </span>
-                  <span className="text-center text-xs text-muted-foreground">{r.giocate}</span>
-                  <span className="text-center text-xs tabular-nums text-muted-foreground">
-                    {r.setFatti}:{r.setSubiti}
-                  </span>
-                  <span className="text-center font-bold tabular-nums">{r.punti}</span>
+      <BarraSottosezioni
+        defaultId="classifica"
+        voci={[
+          {
+            id: "classifica",
+            label: "Classifica",
+            contenuto: (
+              <>
+                <div className="mb-3 flex items-center gap-2 rounded-2xl bg-secondary px-3 py-2 text-xs text-muted-foreground">
+                  <RefreshCw className="h-3.5 w-3.5 text-accent" />
+                  {csi
+                    ? `Dati CSI aggiornati ${formatAggiornamento(csi.aggiornato)}`
+                    : "Dati CSI in arrivo"}
                 </div>
-              );
-            })
-          )}
-        </div>
-      </Section>
-
-      <SezioneTendina titolo="Storico match">
-        {tuttiMatch.length === 0 ? (
-          <p className="rounded-3xl bg-card p-4 text-center text-xs text-muted-foreground shadow-card">
-            Nessun match disponibile.
-          </p>
-        ) : (
-          <div className="space-y-3">
-            {tuttiMatch.map((m) => {
-              const vinta = m.setNostri > m.setLoro;
-              const eventoId = eventoIdPerData.get(m.data);
-              const contenuto = (
-                <>
-                  <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
-                    <div className="min-w-0">
-                      <p className="truncate text-sm font-bold">
-                        {m.casa ? "CRAP Volley" : m.avversario} vs{" "}
-                        {m.casa ? m.avversario : "CRAP Volley"}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        {formatData(m.data)} · MVP {m.mvp || "da votare"}
-                        {m.scout ? " · scoutata" : ""}
-                      </p>
-                    </div>
-                    <span
-                      className={cn(
-                        "rounded-xl px-2.5 py-1 font-display text-lg",
-                        vinta
-                          ? "bg-success text-success-foreground"
-                          : "bg-destructive text-destructive-foreground",
-                      )}
-                    >
-                      {m.setNostri}-{m.setLoro}
-                    </span>
+                <div className="overflow-hidden rounded-3xl bg-card shadow-card">
+                  <div className="grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] gap-2 border-b border-border px-3 py-2 text-xs font-bold uppercase text-muted-foreground">
+                    <span>#</span>
+                    <span>Squadra</span>
+                    <span className="text-center">G</span>
+                    <span className="text-center">Set</span>
+                    <span className="text-center">Pt</span>
                   </div>
-                  <div className="mt-3 flex flex-wrap items-center gap-1.5">
-                    {m.parziali.map((p, i) => (
-                      <span
-                        key={i}
-                        className={cn(
-                          "rounded-lg px-2 py-1 text-xs font-semibold tabular-nums",
-                          p[0] > p[1] ? "bg-secondary" : "bg-muted text-muted-foreground",
-                        )}
-                      >
-                        {p[0]}-{p[1]}
-                      </span>
-                    ))}
-                    {eventoId && !m.mvp ? (
-                      <span className="ml-auto inline-flex items-center gap-0.5 text-xs font-bold uppercase text-accent">
-                        Vota MVP <ChevronRight className="h-3.5 w-3.5" />
-                      </span>
-                    ) : null}
-                  </div>
-                </>
-              );
-              return eventoId ? (
-                <Link
-                  key={m.id}
-                  to="/partita/$id"
-                  params={{ id: eventoId }}
-                  className="premi block rounded-3xl bg-card p-4 shadow-card active:scale-[0.99]"
-                >
-                  {contenuto}
-                </Link>
+                  {classifica.length === 0 ? (
+                    <p className="px-3 py-4 text-center text-xs text-muted-foreground">
+                      Classifica non ancora disponibile.
+                    </p>
+                  ) : (
+                    classifica.map((r) => {
+                      const noi = isNostraSquadra(r.squadra) || r.squadra === "CRAP Volley";
+                      return (
+                        <div
+                          key={r.pos}
+                          className={cn(
+                            "grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] items-center gap-2 border-b border-border px-3 py-2.5 text-sm last:border-0",
+                            noi && "bg-accent/10",
+                          )}
+                        >
+                          <span className={cn("font-display text-base", noi && "text-accent")}>
+                            {r.pos}
+                          </span>
+                          <span className={cn("truncate", noi ? "font-bold" : "font-medium")}>
+                            {r.squadra}
+                          </span>
+                          <span className="text-center text-xs text-muted-foreground">
+                            {r.giocate}
+                          </span>
+                          <span className="text-center text-xs tabular-nums text-muted-foreground">
+                            {r.setFatti}:{r.setSubiti}
+                          </span>
+                          <span className="text-center font-bold tabular-nums">{r.punti}</span>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+              </>
+            ),
+          },
+          {
+            id: "storico",
+            label: "Storico partite",
+            contenuto:
+              tuttiMatch.length === 0 ? (
+                <p className="rounded-3xl bg-card p-4 text-center text-xs text-muted-foreground shadow-card">
+                  Nessuna partita disponibile.
+                </p>
               ) : (
-                <article key={m.id} className="rounded-3xl bg-card p-4 shadow-card">
-                  {contenuto}
-                </article>
-              );
-            })}
-          </div>
-        )}
-      </SezioneTendina>
+                <div className="space-y-3">
+                  {tuttiMatch.map((m) => {
+                    const vinta = m.setNostri > m.setLoro;
+                    const eventoId = eventoIdPerData.get(m.data);
+                    const contenuto = (
+                      <>
+                        <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
+                          <div className="min-w-0">
+                            <p className="truncate text-sm font-bold">
+                              {m.casa ? "CRAP Volley" : m.avversario} vs{" "}
+                              {m.casa ? m.avversario : "CRAP Volley"}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {formatData(m.data)} · MVP {m.mvp || "da votare"}
+                              {m.scout ? " · scoutata" : ""}
+                            </p>
+                          </div>
+                          <span
+                            className={cn(
+                              "rounded-xl px-2.5 py-1 font-display text-lg",
+                              vinta
+                                ? "bg-success text-success-foreground"
+                                : "bg-destructive text-destructive-foreground",
+                            )}
+                          >
+                            {m.setNostri}-{m.setLoro}
+                          </span>
+                        </div>
+                        <div className="mt-3 flex flex-wrap items-center gap-1.5">
+                          {m.parziali.map((p, i) => (
+                            <span
+                              key={i}
+                              className={cn(
+                                "rounded-lg px-2 py-1 text-xs font-semibold tabular-nums",
+                                p[0] > p[1] ? "bg-secondary" : "bg-muted text-muted-foreground",
+                              )}
+                            >
+                              {p[0]}-{p[1]}
+                            </span>
+                          ))}
+                          {eventoId && !m.mvp ? (
+                            <span className="ml-auto inline-flex items-center gap-0.5 text-xs font-bold uppercase text-accent">
+                              Vota MVP <ChevronRight className="h-3.5 w-3.5" />
+                            </span>
+                          ) : null}
+                        </div>
+                      </>
+                    );
+                    return eventoId ? (
+                      <Link
+                        key={m.id}
+                        to="/partita/$id"
+                        params={{ id: eventoId }}
+                        className="premi block rounded-3xl bg-card p-4 shadow-card active:scale-[0.99]"
+                      >
+                        {contenuto}
+                      </Link>
+                    ) : (
+                      <article key={m.id} className="rounded-3xl bg-card p-4 shadow-card">
+                        {contenuto}
+                      </article>
+                    );
+                  })}
+                </div>
+              ),
+          },
+        ]}
+      />
     </>
   );
 }
diff --git a/src/routes/squadra.tsx b/src/routes/squadra.tsx
index a73ac88..8d36294 100644
--- a/src/routes/squadra.tsx
+++ b/src/routes/squadra.tsx
@@ -2,7 +2,8 @@ import { useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { Cake, ChevronDown, Crown } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { PageHeader, Section, SezioneTendina } from "@/components/crapp/ui-bits";
+import { PageHeader } from "@/components/crapp/ui-bits";
+import { BarraSottosezioni } from "@/components/crapp/BarraSottosezioni";
 import { Avatar } from "@/components/crapp/Avatar";
 import { formatData } from "@/lib/crapp-data";
 import { microcopyObiettivo, progressoObiettivo } from "@/lib/obiettivi";
@@ -99,302 +100,354 @@ function Squadra() {
     <>
       <PageHeader titolo="Squadra" sottotitolo={`${rosa.length} giocatori · Stagione 2026/27`} />
 
-      <Section titolo="Rosa">
-        <div className="space-y-2">
-          {rosa.map((g) => {
-            const stati = badgeGiocatore(g);
-            const sbloccati = [
-              ...stati.filter((b) => b.grado !== null),
-              ...badgeSegretiSbloccati(g),
-            ];
-            const isOpen = aperto === g.id;
-            return (
-              <article key={g.id} className="overflow-hidden rounded-3xl bg-card shadow-card">
-                <button
-                  type="button"
-                  onClick={() => setAperto(isOpen ? null : g.id)}
-                  className="flex min-h-11 w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
-                  aria-expanded={isOpen}
-                >
-                  <Avatar
-                    id={g.id}
-                    fallback={g.numero ? String(g.numero) : g.iniziali}
-                    className="h-11 w-11 text-lg"
-                  />
-                  <span className="min-w-0 flex-1">
-                    <span className="block truncate text-sm font-bold leading-tight">{g.nome}</span>
-                    <span className="mt-1 flex items-center gap-2">
-                      <RuoloBadge ruolo={g.ruolo} />
-                      <span className="text-xs text-muted-foreground">
-                        {g.numero ? `#${g.numero}` : "n° da definire"}
-                      </span>
-                    </span>
-                  </span>
-                  {sbloccati.length > 0 ? (
-                    <span className="flex max-w-[74px] shrink-0 flex-wrap items-center justify-end gap-0.5">
-                      {sbloccati.map((b) => {
-                        const Icon = b.def.icon;
-                        return (
-                          <span
-                            key={b.def.id}
-                            title={`${b.def.nome} — ${gradoMeta[b.grado!].label}`}
-                          >
-                            <Icon
-                              className={cn("h-3.5 w-3.5", gradoMeta[b.grado!].text)}
-                              aria-hidden="true"
-                            />
-                            <span className="sr-only">
-                              {b.def.nome}: {gradoMeta[b.grado!].label}
+      <BarraSottosezioni
+        defaultId="rosa"
+        voci={[
+          {
+            id: "rosa",
+            label: "Rosa",
+            contenuto: (
+              <div className="space-y-2">
+                {rosa.map((g) => {
+                  const stati = badgeGiocatore(g);
+                  const sbloccati = [
+                    ...stati.filter((b) => b.grado !== null),
+                    ...badgeSegretiSbloccati(g),
+                  ];
+                  const isOpen = aperto === g.id;
+                  return (
+                    <article key={g.id} className="overflow-hidden rounded-3xl bg-card shadow-card">
+                      <button
+                        type="button"
+                        onClick={() => setAperto(isOpen ? null : g.id)}
+                        className="flex min-h-11 w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
+                        aria-expanded={isOpen}
+                      >
+                        <Avatar
+                          id={g.id}
+                          fallback={g.numero ? String(g.numero) : g.iniziali}
+                          className="h-11 w-11 text-lg"
+                        />
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate text-sm font-bold leading-tight">
+                            {g.nome}
+                          </span>
+                          <span className="mt-1 flex items-center gap-2">
+                            <RuoloBadge ruolo={g.ruolo} />
+                            <span className="text-xs text-muted-foreground">
+                              {g.numero ? `#${g.numero}` : "n° da definire"}
                             </span>
                           </span>
-                        );
-                      })}
-                    </span>
-                  ) : null}
-                  <ChevronDown
-                    className={cn(
-                      "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
-                      isOpen && "rotate-180",
-                    )}
-                  />
-                </button>
+                        </span>
+                        {sbloccati.length > 0 ? (
+                          <span className="flex max-w-[74px] shrink-0 flex-wrap items-center justify-end gap-0.5">
+                            {sbloccati.map((b) => {
+                              const Icon = b.def.icon;
+                              return (
+                                <span
+                                  key={b.def.id}
+                                  title={`${b.def.nome} — ${gradoMeta[b.grado!].label}`}
+                                >
+                                  <Icon
+                                    className={cn("h-3.5 w-3.5", gradoMeta[b.grado!].text)}
+                                    aria-hidden="true"
+                                  />
+                                  <span className="sr-only">
+                                    {b.def.nome}: {gradoMeta[b.grado!].label}
+                                  </span>
+                                </span>
+                              );
+                            })}
+                          </span>
+                        ) : null}
+                        <ChevronDown
+                          className={cn(
+                            "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+                            isOpen && "rotate-180",
+                          )}
+                        />
+                      </button>
 
-                {isOpen ? (
-                  <div className="border-t border-border px-4 pb-4 pt-3">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <Cake className="h-3.5 w-3.5" /> {formatData(g.nascita)}{" "}
-                        {g.nascita.slice(0, 4)}
-                      </p>
-                    </div>
+                      {isOpen ? (
+                        <div className="border-t border-border px-4 pb-4 pt-3">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                              <Cake className="h-3.5 w-3.5" /> {formatData(g.nascita)}{" "}
+                              {g.nascita.slice(0, 4)}
+                            </p>
+                          </div>
 
-                    <div className="mt-3 grid grid-cols-3 gap-2">
-                      {[
-                        { l: "Presenze", v: `${g.presenze}/${g.totaliEventi}` },
-                        { l: "Presenze 30gg", v: `${mese[g.id]?.percentuale ?? 0}%` },
-                        { l: "Presenze di fila", v: g.streak },
-                        { l: "Media voto", v: g.mediaVoto || "—" },
-                        { l: "MVP", v: g.mvp },
-                        { l: "Cacche/partita 💩", v: g.cacchePartita || "—" },
-                      ].map((s) => (
-                        <div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center">
-                          <p className="font-display text-xl leading-none">{s.v}</p>
-                          <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
-                            {s.l}
-                          </p>
-                        </div>
-                      ))}
-                    </div>
-
-                    <p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground">
-                      Badge sbloccati · {collezioneBadge(g).ottenuti}/{collezioneBadge(g).totali}
-                    </p>
-                    {sbloccati.length === 0 ? (
-                      <p className="mt-2 rounded-2xl bg-secondary/50 p-3 text-xs text-muted-foreground">
-                        Nessun badge sbloccato per ora.
-                      </p>
-                    ) : (
-                      <div className="mt-2 grid grid-cols-2 gap-2">
-                        {sbloccati.map((b) => {
-                          const Icon = b.def.icon;
-                          const meta = gradoMeta[b.grado!];
-                          return (
-                            <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
-                              <div className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}>
-                                <Icon className={cn("h-4 w-4", meta.text)} />
-                                <p className="mt-1 text-xs font-bold leading-tight">{b.def.nome}</p>
-                                <p className="text-xs text-muted-foreground">
-                                  {b.valore} {b.def.unita}
-                                  {b.prossimaSoglia
-                                    ? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}`
-                                    : ""}
-                                </p>
-                                <p className={cn("mt-1.5 text-xs font-bold uppercase", meta.text)}>
-                                  {meta.label}
+                          <div className="mt-3 grid grid-cols-3 gap-2">
+                            {[
+                              { l: "Presenze", v: `${g.presenze}/${g.totaliEventi}` },
+                              { l: "Presenze 30gg", v: `${mese[g.id]?.percentuale ?? 0}%` },
+                              { l: "Presenze di fila", v: g.streak },
+                              { l: "Media voto", v: g.mediaVoto || "—" },
+                              { l: "MVP", v: g.mvp },
+                              { l: "Cacche/partita 💩", v: g.cacchePartita || "—" },
+                            ].map((s) => (
+                              <div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center">
+                                <p className="font-display text-xl leading-none">{s.v}</p>
+                                <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
+                                  {s.l}
                                 </p>
                               </div>
-                            </BadgeDrawer>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                ) : null}
-              </article>
-            );
-          })}
-        </div>
-      </Section>
+                            ))}
+                          </div>
 
-      <Section titolo="Statistiche di squadra">
-        <div className="grid grid-cols-3 gap-2">
-          <StatTile valore={`${mediaPresenze}%`} label="Media presenze" />
-          <StatTile valore={matchGiocati} label="Match giocati" />
-          <StatTile valore={mediaSquadra(pagelle) || "—"} label="Media pagelle" />
-          <StatTile valore={team.punti} label="Punti squadra" />
-          <StatTile valore={team.ace} label="Ace squadra" />
-          <StatTile valore={team.muri} label="Muri squadra" />
-        </div>
-      </Section>
-
-      <SezioneTendina titolo="Classifica giocatori">
-        <div className="mb-3 flex flex-nowrap gap-1.5">
-          {criteri.map((c) => (
-            <button
-              key={c.id}
-              type="button"
-              onClick={() => setCriterio(c.id)}
-              aria-pressed={criterio === c.id}
-              className={cn(
-                "min-h-11 min-w-0 flex-1 truncate rounded-full px-1.5 text-center text-xs font-bold uppercase transition-colors",
-                criterio === c.id
-                  ? "bg-accent text-accent-foreground shadow-pop"
-                  : "bg-secondary text-muted-foreground",
-              )}
-            >
-              {c.label}
-            </button>
-          ))}
-        </div>
-        <div className="space-y-2">
-          {ordinati.map((g, i) => (
-            <div key={g.id} className="rounded-2xl bg-card p-3 shadow-card">
-              <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
-                <div className="flex min-w-0 items-center gap-3">
-                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-secondary font-display text-base">
-                    {i + 1}
-                  </span>
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-bold">
-                      {g.nome}
-                      {i === 0 ? <Crown className="ml-1 inline h-3.5 w-3.5 text-warning" /> : null}
-                    </p>
-                    <p className="truncate text-xs text-muted-foreground">
-                      #{g.numero} · {g.ruolo} · {g.streak} presenze consecutive
-                    </p>
-                  </div>
-                </div>
-                <span className="font-display text-xl tabular-nums">
-                  {valore(g, criterio) || "—"}
-                </span>
-              </div>
-              <Barra
-                percentuale={Math.max(6, (valore(g, criterio) / max) * 100)}
-                altezza="h-1.5"
-                trackClassName="mt-2"
-              />
-            </div>
-          ))}
-        </div>
-      </SezioneTendina>
-
-      <SezioneTendina
-        titolo="Obiettivi di squadra"
-        anteprima={
-          <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
-            <div className="flex items-end justify-between gap-3">
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
-                  Progresso collettivo
-                </p>
-                <p className="font-display text-4xl leading-none">
-                  <Numero valore={mediaObiettivi} suffisso="%" />
-                </p>
-              </div>
-              <p className="text-xs text-primary-foreground/70">
-                {completati}/{obiettivi.length} completati
-              </p>
-            </div>
-            <Barra percentuale={mediaObiettivi} trackClassName="mt-3 bg-primary-foreground/15" />
-          </div>
-        }
-      >
-        <div className="space-y-2">
-          {obiettivi.map((o, i) => {
-            const pct = progressoObiettivo(o);
-            const fatto = pct >= 100;
-            return (
-              <Reveal
-                key={o.id}
-                indice={i}
-                className={cn(
-                  "premi rounded-3xl bg-card p-4 shadow-card ring-1",
-                  fatto ? "ring-success/40" : pct >= 90 ? "ring-accent/40" : "ring-transparent",
-                )}
-              >
-                <div className="flex items-start gap-2">
-                  <span className="text-lg leading-none">{o.emoji}</span>
-                  <div className="min-w-0 flex-1">
-                    <p className="text-sm font-bold leading-tight">{o.titolo}</p>
-                    <p className="text-xs text-muted-foreground">{o.descrizione}</p>
-                  </div>
-                  <span
-                    className={cn(
-                      "rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-wide",
-                      fatto
-                        ? "bg-success text-success-foreground"
-                        : "bg-secondary text-muted-foreground",
-                    )}
-                  >
-                    {fatto ? "Completato" : `${pct}%`}
-                  </span>
-                </div>
-                <Barra percentuale={pct} trackClassName="mt-3" />
-                <p className="mt-2 text-xs text-muted-foreground">
-                  {o.valore}/{o.target} {o.unita} · {pct}%
-                  {o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
-                </p>
-                <p className="mt-1 text-xs font-semibold text-accent">{microcopyObiettivo(o)}</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">{o.impatto}</p>
-              </Reveal>
-            );
-          })}
-        </div>
-      </SezioneTendina>
-
-      <SezioneTendina titolo="Badge sbloccabili">
-        <div className="space-y-2">
-          {badgeDefs.map((b) => {
-            const Icon = b.icon;
-            return (
-              <BadgeDrawer key={b.id} def={b}>
-                <div className="rounded-3xl bg-card p-3 shadow-card">
-                  <div className="flex items-center gap-2">
-                    <Icon className="h-5 w-5 text-accent" />
-                    <p className="text-sm font-bold leading-tight">{b.nome}</p>
-                    <p className="ml-auto text-xs text-muted-foreground">{descrizioneSoglie(b)}</p>
-                  </div>
-                  <div className="mt-2 grid grid-cols-3 gap-1.5">
-                    {gradiOrdine.map((grado) => {
-                      const meta = gradoMeta[grado];
-                      const quanti = rosa.filter((g) => {
-                        const raggiunto = gradoRaggiunto(b, b.valore(g));
-                        return raggiunto
-                          ? gradiOrdine.indexOf(raggiunto) >= gradiOrdine.indexOf(grado)
-                          : false;
-                      }).length;
-                      return (
-                        <div
-                          key={grado}
-                          className={cn("rounded-2xl p-2 text-center ring-1", meta.bg, meta.ring)}
-                        >
-                          <p className={cn("text-xs font-bold uppercase", meta.text)}>
-                            {meta.label}
+                          <p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground">
+                            Badge sbloccati · {collezioneBadge(g).ottenuti}/
+                            {collezioneBadge(g).totali}
                           </p>
-                          <p className="font-display text-lg leading-none">{b.soglie[grado]}</p>
-                          <p className="text-xs text-muted-foreground">
-                            {quanti}/{rosa.length}
+                          {sbloccati.length === 0 ? (
+                            <p className="mt-2 rounded-2xl bg-secondary/50 p-3 text-xs text-muted-foreground">
+                              Nessun badge sbloccato per ora.
+                            </p>
+                          ) : (
+                            <div className="mt-2 grid grid-cols-2 gap-2">
+                              {sbloccati.map((b) => {
+                                const Icon = b.def.icon;
+                                const meta = gradoMeta[b.grado!];
+                                return (
+                                  <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
+                                    <div
+                                      className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}
+                                    >
+                                      <Icon className={cn("h-4 w-4", meta.text)} />
+                                      <p className="mt-1 text-xs font-bold leading-tight">
+                                        {b.def.nome}
+                                      </p>
+                                      <p className="text-xs text-muted-foreground">
+                                        {b.valore} {b.def.unita}
+                                        {b.prossimaSoglia
+                                          ? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}`
+                                          : ""}
+                                      </p>
+                                      <p
+                                        className={cn(
+                                          "mt-1.5 text-xs font-bold uppercase",
+                                          meta.text,
+                                        )}
+                                      >
+                                        {meta.label}
+                                      </p>
+                                    </div>
+                                  </BadgeDrawer>
+                                );
+                              })}
+                            </div>
+                          )}
+                        </div>
+                      ) : null}
+                    </article>
+                  );
+                })}
+              </div>
+            ),
+          },
+          {
+            id: "stats",
+            label: "Statistiche",
+            contenuto: (
+              <div className="grid grid-cols-3 gap-2">
+                <StatTile valore={`${mediaPresenze}%`} label="Media presenze" />
+                <StatTile valore={matchGiocati} label="Match giocati" />
+                <StatTile valore={mediaSquadra(pagelle) || "—"} label="Media pagelle" />
+                <StatTile valore={team.punti} label="Punti squadra" />
+                <StatTile valore={team.ace} label="Ace squadra" />
+                <StatTile valore={team.muri} label="Muri squadra" />
+              </div>
+            ),
+          },
+          {
+            id: "classifica-giocatori",
+            label: "Classifica",
+            contenuto: (
+              <>
+                <div className="mb-3 flex flex-nowrap gap-1.5">
+                  {criteri.map((c) => (
+                    <button
+                      key={c.id}
+                      type="button"
+                      onClick={() => setCriterio(c.id)}
+                      aria-pressed={criterio === c.id}
+                      className={cn(
+                        "min-h-11 min-w-0 flex-1 truncate rounded-full px-1.5 text-center text-xs font-bold uppercase transition-colors",
+                        criterio === c.id
+                          ? "bg-accent text-accent-foreground shadow-pop"
+                          : "bg-secondary text-muted-foreground",
+                      )}
+                    >
+                      {c.label}
+                    </button>
+                  ))}
+                </div>
+                <div className="space-y-2">
+                  {ordinati.map((g, i) => (
+                    <div key={g.id} className="rounded-2xl bg-card p-3 shadow-card">
+                      <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
+                        <div className="flex min-w-0 items-center gap-3">
+                          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-secondary font-display text-base">
+                            {i + 1}
+                          </span>
+                          <div className="min-w-0">
+                            <p className="truncate text-sm font-bold">
+                              {g.nome}
+                              {i === 0 ? (
+                                <Crown className="ml-1 inline h-3.5 w-3.5 text-warning" />
+                              ) : null}
+                            </p>
+                            <p className="truncate text-xs text-muted-foreground">
+                              #{g.numero} · {g.ruolo} · {g.streak} presenze consecutive
+                            </p>
+                          </div>
+                        </div>
+                        <span className="font-display text-xl tabular-nums">
+                          {valore(g, criterio) || "—"}
+                        </span>
+                      </div>
+                      <Barra
+                        percentuale={Math.max(6, (valore(g, criterio) / max) * 100)}
+                        altezza="h-1.5"
+                        trackClassName="mt-2"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </>
+            ),
+          },
+          {
+            id: "obiettivi",
+            label: "Obiettivi",
+            contenuto: (
+              <>
+                <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
+                  <div className="flex items-end justify-between gap-3">
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
+                        Progresso collettivo
+                      </p>
+                      <p className="font-display text-4xl leading-none">
+                        <Numero valore={mediaObiettivi} suffisso="%" />
+                      </p>
+                    </div>
+                    <p className="text-xs text-primary-foreground/70">
+                      {completati}/{obiettivi.length} completati
+                    </p>
+                  </div>
+                  <Barra
+                    percentuale={mediaObiettivi}
+                    trackClassName="mt-3 bg-primary-foreground/15"
+                  />
+                </div>
+                <div className="space-y-2">
+                  {obiettivi.map((o, i) => {
+                    const pct = progressoObiettivo(o);
+                    const fatto = pct >= 100;
+                    return (
+                      <Reveal
+                        key={o.id}
+                        indice={i}
+                        className={cn(
+                          "premi rounded-3xl bg-card p-4 shadow-card ring-1",
+                          fatto
+                            ? "ring-success/40"
+                            : pct >= 90
+                              ? "ring-accent/40"
+                              : "ring-transparent",
+                        )}
+                      >
+                        <div className="flex items-start gap-2">
+                          <span className="text-lg leading-none">{o.emoji}</span>
+                          <div className="min-w-0 flex-1">
+                            <p className="text-sm font-bold leading-tight">{o.titolo}</p>
+                            <p className="text-xs text-muted-foreground">{o.descrizione}</p>
+                          </div>
+                          <span
+                            className={cn(
+                              "rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-wide",
+                              fatto
+                                ? "bg-success text-success-foreground"
+                                : "bg-secondary text-muted-foreground",
+                            )}
+                          >
+                            {fatto ? "Completato" : `${pct}%`}
+                          </span>
+                        </div>
+                        <Barra percentuale={pct} trackClassName="mt-3" />
+                        <p className="mt-2 text-xs text-muted-foreground">
+                          {o.valore}/{o.target} {o.unita} · {pct}%
+                          {o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
+                        </p>
+                        <p className="mt-1 text-xs font-semibold text-accent">
+                          {microcopyObiettivo(o)}
+                        </p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">{o.impatto}</p>
+                      </Reveal>
+                    );
+                  })}
+                </div>
+              </>
+            ),
+          },
+          {
+            id: "badge",
+            label: "Badge",
+            contenuto: (
+              <div className="space-y-2">
+                {badgeDefs.map((b) => {
+                  const Icon = b.icon;
+                  return (
+                    <BadgeDrawer key={b.id} def={b}>
+                      <div className="rounded-3xl bg-card p-3 shadow-card">
+                        <div className="flex items-center gap-2">
+                          <Icon className="h-5 w-5 text-accent" />
+                          <p className="text-sm font-bold leading-tight">{b.nome}</p>
+                          <p className="ml-auto text-xs text-muted-foreground">
+                            {descrizioneSoglie(b)}
                           </p>
                         </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              </BadgeDrawer>
-            );
-          })}
-        </div>
-      </SezioneTendina>
+                        <div className="mt-2 grid grid-cols-3 gap-1.5">
+                          {gradiOrdine.map((grado) => {
+                            const meta = gradoMeta[grado];
+                            const quanti = rosa.filter((g) => {
+                              const raggiunto = gradoRaggiunto(b, b.valore(g));
+                              return raggiunto
+                                ? gradiOrdine.indexOf(raggiunto) >= gradiOrdine.indexOf(grado)
+                                : false;
+                            }).length;
+                            return (
+                              <div
+                                key={grado}
+                                className={cn(
+                                  "rounded-2xl p-2 text-center ring-1",
+                                  meta.bg,
+                                  meta.ring,
+                                )}
+                              >
+                                <p className={cn("text-xs font-bold uppercase", meta.text)}>
+                                  {meta.label}
+                                </p>
+                                <p className="font-display text-lg leading-none">
+                                  {b.soglie[grado]}
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                  {quanti}/{rosa.length}
+                                </p>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </BadgeDrawer>
+                  );
+                })}
+              </div>
+            ),
+          },
+        ]}
+      />
     </>
   );
 }

From f4398fce252dbae5ee075c8c8a5e544108e46adf Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 21:31:41 +0200
Subject: [PATCH 22/37] Aggiunge lo stemma in home e ravviva blu allenamenti e
 verde compleanni.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/routes/index.tsx | 18 ++++++++++++------
 src/styles.css       |  6 ++++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 82467c1..638cf9a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Flame, ChevronRight } from "lucide-react";
 import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
 import { PromemoriaPalloni } from "@/components/crapp/PromemoriaPalloni";
-import { Card, LinkProfilo, Section, StatTile } from "@/components/crapp/ui-bits";
+import { Card, LinkProfilo, Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
 import { CompletaProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import { Reveal } from "@/components/motion/Reveal";
 import { Barra } from "@/components/motion/Barra";
@@ -66,11 +66,17 @@ function Index() {
     <>
       <Reveal as="section" className="bg-hero px-5 pb-10 pt-7 text-primary-foreground">
         <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
-          <div className="min-w-0">
-            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/80">
-              Ciao {giocatore.nome.split(" ")[0]}
-            </p>
-            <h1 className="font-display-lg text-4xl uppercase leading-none">CRAP Volley</h1>
+          <div className="flex min-w-0 items-center gap-3">
+            <TeamLogo
+              src="/logo-nerorosso.svg"
+              className="h-14 w-14 rounded-full shadow-pop ring-2 ring-primary-foreground/25"
+            />
+            <div className="min-w-0">
+              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/80">
+                Ciao {giocatore.nome.split(" ")[0]}
+              </p>
+              <h1 className="font-display-lg text-4xl uppercase leading-none">CRAP Volley</h1>
+            </div>
           </div>
           <LinkProfilo />
         </div>
diff --git a/src/styles.css b/src/styles.css
index f3141e0..ce096c6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -125,13 +125,15 @@
   /* Il focus non è una selezione: viene dal neutro, non dall'accento. */
   --ring: oklch(0.35 0.03 265);
   /* Luminosità scelte perché il testo bianco sopra superi 4.5:1 (WCAG AA). */
-  --success: oklch(0.53 0.16 152);
+  /* Compleanni / successi: verde un po' più chiaro e saturo. */
+  --success: oklch(0.60 0.17 152);
   --success-foreground: oklch(0.99 0 0);
   --warning: oklch(0.78 0.15 78);
   --warning-foreground: oklch(0.18 0.02 60);
   --info: oklch(0.54 0.13 245);
   --info-foreground: oklch(0.99 0 0);
-  --training: oklch(0.53 0.2 245);
+  /* Allenamenti: blu acceso (più chiaro del blu navy, più saturo dell'azzurro). */
+  --training: oklch(0.62 0.18 250);
   --training-foreground: oklch(0.99 0 0);
   /* Metalli: la variante chiara va su sfondi e bordi, la `-testo` sul testo
      (la chiara sta sotto 2.5:1 su bianco ed è illeggibile). */

From e9755d364c10ec975c03884b9bc2532d4b4a0348 Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:07:58 +0200
Subject: [PATCH 23/37] Aggiunge sottosezioni a swipe nel profilo, con stagione
 e serie unite.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../crapp/ProfiloAmministrativo.tsx           | 148 ++++++-----
 src/routes/profilo.tsx                        | 229 +++++++++---------
 2 files changed, 202 insertions(+), 175 deletions(-)

diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index 3ef62a7..ab17b0d 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -265,9 +265,12 @@ export function CampiProfilo({
 export function ProfiloAmministrativo({
   giocatoreId,
   indice = 0,
+  /** Se false, mostra solo il contenuto (es. dentro `BarraSottosezioni`). */
+  conTendina = true,
 }: {
   giocatoreId: string;
   indice?: number;
+  conTendina?: boolean;
 }) {
   const { profili } = useProfili();
   const salva = useSalvaProfilo();
@@ -301,79 +304,90 @@ export function ProfiloAmministrativo({
   const caricato = (campo: keyof Profilo) => async (path: string) =>
     scrivi({ ...corrente, [campo]: path });
 
+  const corpo = (
+    <div className="space-y-3 rounded-3xl bg-card p-4 shadow-card">
+      <div className="flex items-center justify-between gap-2">
+        <div className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-secondary">
+          <div
+            className="h-full rounded-full bg-accent-grad transition-all"
+            style={{ width: `${perc}%` }}
+          />
+        </div>
+        <span className="shrink-0 text-xs font-bold tabular-nums text-muted-foreground">
+          {perc}%
+        </span>
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        Servono agli amministratori per il tesseramento CSI. Li vedi solo tu e loro.
+      </p>
+
+      <CampiProfilo
+        corrente={corrente}
+        aggiorna={aggiorna}
+        sezioni={sezioni}
+        fileDocumento={
+          <div className="divide-y divide-border">
+            <CampoFile
+              label="Foto fronte"
+              path={corrente.documentoFrontePath}
+              sezione="documento-fronte"
+              giocatoreId={giocatoreId}
+              onCaricato={caricato("documentoFrontePath")}
+            />
+            <CampoFile
+              label="Foto retro"
+              path={corrente.documentoRetroPath}
+              sezione="documento-retro"
+              giocatoreId={giocatoreId}
+              onCaricato={caricato("documentoRetroPath")}
+            />
+          </div>
+        }
+        fileCertificato={
+          <CampoFile
+            label="Certificato medico"
+            path={corrente.certificatoPath}
+            sezione="certificato"
+            giocatoreId={giocatoreId}
+            onCaricato={caricato("certificatoPath")}
+          />
+        }
+        fileFoto={
+          <>
+            <Intestazione titolo="Foto tessera" completa={sezioni.foto} />
+            <CampoFile
+              label="Foto tessera"
+              path={corrente.fotoPath}
+              sezione="foto"
+              giocatoreId={giocatoreId}
+              onCaricato={caricato("fotoPath")}
+            />
+          </>
+        }
+      />
+
+      <button
+        type="button"
+        onClick={salvaBozza}
+        disabled={!sporco || salva.isPending}
+        className="premi flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
+      >
+        {salva.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+        {sporco ? "Salva" : "Salvato"}
+      </button>
+    </div>
+  );
+
+  if (!conTendina) return corpo;
+
   return (
     <SezioneTendina
       titolo="Dati per il tesseramento"
       indice={indice}
       azione={<span className="text-xs font-bold tabular-nums text-muted-foreground">{perc}%</span>}
     >
-      <div className="space-y-3 rounded-3xl bg-card p-4 shadow-card">
-        <div className="h-1.5 overflow-hidden rounded-full bg-secondary">
-          <div
-            className="h-full rounded-full bg-accent-grad transition-all"
-            style={{ width: `${perc}%` }}
-          />
-        </div>
-
-        <p className="text-xs text-muted-foreground">
-          Servono agli amministratori per il tesseramento CSI. Li vedi solo tu e loro.
-        </p>
-
-        <CampiProfilo
-          corrente={corrente}
-          aggiorna={aggiorna}
-          sezioni={sezioni}
-          fileDocumento={
-            <div className="divide-y divide-border">
-              <CampoFile
-                label="Foto fronte"
-                path={corrente.documentoFrontePath}
-                sezione="documento-fronte"
-                giocatoreId={giocatoreId}
-                onCaricato={caricato("documentoFrontePath")}
-              />
-              <CampoFile
-                label="Foto retro"
-                path={corrente.documentoRetroPath}
-                sezione="documento-retro"
-                giocatoreId={giocatoreId}
-                onCaricato={caricato("documentoRetroPath")}
-              />
-            </div>
-          }
-          fileCertificato={
-            <CampoFile
-              label="Certificato medico"
-              path={corrente.certificatoPath}
-              sezione="certificato"
-              giocatoreId={giocatoreId}
-              onCaricato={caricato("certificatoPath")}
-            />
-          }
-          fileFoto={
-            <>
-              <Intestazione titolo="Foto tessera" completa={sezioni.foto} />
-              <CampoFile
-                label="Foto tessera"
-                path={corrente.fotoPath}
-                sezione="foto"
-                giocatoreId={giocatoreId}
-                onCaricato={caricato("fotoPath")}
-              />
-            </>
-          }
-        />
-
-        <button
-          type="button"
-          onClick={salvaBozza}
-          disabled={!sporco || salva.isPending}
-          className="premi flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
-        >
-          {salva.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-          {sporco ? "Salva" : "Salvato"}
-        </button>
-      </div>
+      {corpo}
     </SezioneTendina>
   );
 }
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index f474c63..40cedb2 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -3,14 +3,8 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Flame, Camera, Trash2, Bell, LogOut, ShieldCheck, Bug, Lightbulb } from "lucide-react";
 import { cn } from "@/lib/utils";
-import {
-  Card,
-  PageHeader,
-  Section,
-  SezioneTendina,
-  StatTile,
-  TeamLogo,
-} from "@/components/crapp/ui-bits";
+import { Card, PageHeader, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
+import { BarraSottosezioni } from "@/components/crapp/BarraSottosezioni";
 import { Avatar } from "@/components/crapp/Avatar";
 import {
   caricaAvatar,
@@ -126,7 +120,7 @@ function Profilo() {
       <PageHeader
         titolo={g.nome}
         sottotitolo={`#${g.numero} · ${g.ruolo}`}
-        azione={<TeamLogo src="/logo-nerorosso.svg" className="h-11 w-11" />}
+        azione={<TeamLogo src="/logo-nerorosso.svg" className="h-14 w-14" />}
       />
 
       <Reveal className="-mt-6 px-5">
@@ -183,105 +177,124 @@ function Profilo() {
         </Card>
       </Reveal>
 
-      <Section titolo="Stagione" indice={1}>
-        <div className="grid grid-cols-3 gap-2">
-          <StatTile valore={g.presenze} label="Presenze" hint={`${percPresenze}% del totale`} />
-          <StatTile
-            valore={`${ultimoMese.percentuale}%`}
-            label="Presenze 30gg"
-            hint={`${ultimoMese.presenti}/${ultimoMese.totali} eventi`}
-          />
-          <StatTile
-            valore={
-              <span className="inline-flex items-center gap-1">
-                <Flame className="h-5 w-5 text-accent" />
-                {g.streak}
-              </span>
-            }
-            label="Presenze di fila"
-          />
-          <StatTile valore={g.mediaVoto || "—"} label="Media voto" />
-          <StatTile valore={g.mvp} label="MVP" />
-          <StatTile valore={g.palloni} label="Turni palloni" />
-        </div>
-      </Section>
-
-      <Section titolo="Serie di presenze" indice={2}>
-        <SerieGriglia g={g} />
-      </Section>
-
-      <SezioneTendina titolo="Collezione badge" indice={3}>
-        <CollezioneBadge g={g} votiSocial={votiSocial.data ?? []} />
-      </SezioneTendina>
-
-      <ProfiloAmministrativo giocatoreId={g.id} indice={4} />
-
-      <Section titolo="Impostazioni">
-        <div className="divide-y divide-border overflow-hidden rounded-3xl bg-card shadow-card">
-          <button
-            type="button"
-            onClick={cambiaNotifiche}
-            disabled={!supportate || inCorso}
-            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60"
-          >
-            <span className="min-w-0">
-              <span className="block truncate">Notifiche turno palloni</span>
-              <span className="block text-xs text-muted-foreground">
-                {supportate
-                  ? notifiche
-                    ? "Attive su questo dispositivo"
-                    : "Ricevi l'avviso il giorno stesso e la volta dopo"
-                  : "Non supportate su questo dispositivo"}
-              </span>
-            </span>
-            <span
-              className={cn(
-                "grid h-8 w-8 shrink-0 place-items-center rounded-xl",
-                notifiche
-                  ? "bg-accent-grad text-accent-foreground"
-                  : "bg-secondary text-muted-foreground",
-              )}
-            >
-              <Bell className="h-4 w-4" />
-            </span>
-          </button>
-          {admin ? (
-            <Link
-              to="/admin"
-              className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
-            >
-              <span className="min-w-0 truncate">Dashboard amministratore</span>
-              <ShieldCheck className="h-4 w-4 text-muted-foreground" />
-            </Link>
-          ) : null}
-          <a
-            href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
-          >
-            <span className="min-w-0 truncate">Segnala un bug</span>
-            <Bug className="h-4 w-4 text-muted-foreground" />
-          </a>
-          <a
-            href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
-          >
-            <span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span>
-            <Lightbulb className="h-4 w-4 text-muted-foreground" />
-          </a>
-          <button
-            type="button"
-            onClick={logout}
-            className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
-          >
-            <span className="min-w-0 truncate">Esci</span>
-            <LogOut className="h-4 w-4 text-muted-foreground" />
-          </button>
-        </div>
-      </Section>
+      <BarraSottosezioni
+        defaultId="stagione"
+        voci={[
+          {
+            id: "stagione",
+            label: "Stagione",
+            contenuto: (
+              <div className="space-y-4">
+                <div className="grid grid-cols-3 gap-2">
+                  <StatTile
+                    valore={g.presenze}
+                    label="Presenze"
+                    hint={`${percPresenze}% del totale`}
+                  />
+                  <StatTile
+                    valore={`${ultimoMese.percentuale}%`}
+                    label="Presenze 30gg"
+                    hint={`${ultimoMese.presenti}/${ultimoMese.totali} eventi`}
+                  />
+                  <StatTile
+                    valore={
+                      <span className="inline-flex items-center gap-1">
+                        <Flame className="h-5 w-5 text-accent" />
+                        {g.streak}
+                      </span>
+                    }
+                    label="Presenze di fila"
+                  />
+                  <StatTile valore={g.mediaVoto || "—"} label="Media voto" />
+                  <StatTile valore={g.mvp} label="MVP" />
+                  <StatTile valore={g.palloni} label="Turni palloni" />
+                </div>
+                <SerieGriglia g={g} />
+              </div>
+            ),
+          },
+          {
+            id: "badge",
+            label: "Badge",
+            contenuto: <CollezioneBadge g={g} votiSocial={votiSocial.data ?? []} />,
+          },
+          {
+            id: "tesseramento",
+            label: "Tesseramento",
+            contenuto: <ProfiloAmministrativo giocatoreId={g.id} conTendina={false} />,
+          },
+          {
+            id: "impostazioni",
+            label: "Impostazioni",
+            contenuto: (
+              <div className="divide-y divide-border overflow-hidden rounded-3xl bg-card shadow-card">
+                <button
+                  type="button"
+                  onClick={cambiaNotifiche}
+                  disabled={!supportate || inCorso}
+                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60"
+                >
+                  <span className="min-w-0">
+                    <span className="block truncate">Notifiche turno palloni</span>
+                    <span className="block text-xs text-muted-foreground">
+                      {supportate
+                        ? notifiche
+                          ? "Attive su questo dispositivo"
+                          : "Ricevi l'avviso il giorno stesso e la volta dopo"
+                        : "Non supportate su questo dispositivo"}
+                    </span>
+                  </span>
+                  <span
+                    className={cn(
+                      "grid h-8 w-8 shrink-0 place-items-center rounded-xl",
+                      notifiche
+                        ? "bg-accent-grad text-accent-foreground"
+                        : "bg-secondary text-muted-foreground",
+                    )}
+                  >
+                    <Bell className="h-4 w-4" />
+                  </span>
+                </button>
+                {admin ? (
+                  <Link
+                    to="/admin"
+                    className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                  >
+                    <span className="min-w-0 truncate">Dashboard amministratore</span>
+                    <ShieldCheck className="h-4 w-4 text-muted-foreground" />
+                  </Link>
+                ) : null}
+                <a
+                  href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                >
+                  <span className="min-w-0 truncate">Segnala un bug</span>
+                  <Bug className="h-4 w-4 text-muted-foreground" />
+                </a>
+                <a
+                  href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                >
+                  <span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span>
+                  <Lightbulb className="h-4 w-4 text-muted-foreground" />
+                </a>
+                <button
+                  type="button"
+                  onClick={logout}
+                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                >
+                  <span className="min-w-0 truncate">Esci</span>
+                  <LogOut className="h-4 w-4 text-muted-foreground" />
+                </button>
+              </div>
+            ),
+          },
+        ]}
+      />
     </>
   );
 }

From ce1c7cfd4bf6cc3288921bbf2c94a23b8b1451b0 Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:24:57 +0200
Subject: [PATCH 24/37] Alleggerisce il cambio tab delle sottosezioni togliendo
 exit e molle.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/crapp/BarraSottosezioni.tsx | 61 ++++++++++++----------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
index 5ae5a22..9135ef0 100644
--- a/src/components/crapp/BarraSottosezioni.tsx
+++ b/src/components/crapp/BarraSottosezioni.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { cn } from "@/lib/utils";
-import { molla, proietta } from "@/lib/molla";
+import { proietta } from "@/lib/molla";
 
 export type VoceSottosezione = {
   id: string;
@@ -9,10 +9,16 @@ export type VoceSottosezione = {
   contenuto: ReactNode;
 };
 
+/** Tween breve: evita molle + exit che tengono due pannelli in DOM insieme. */
+const transizioneTab = { type: "tween" as const, duration: 0.16, ease: [0.25, 0.1, 0.25, 1] };
+
 /**
  * Barra di sottosezioni in un'unica fila scorrevole (swipe orizzontale) e
  * pannello che mostra una sola sezione alla volta, cambiabile anche con
  * swipe sul contenuto.
+ *
+ * Il pannello precedente si smonta subito (niente AnimatePresence/exit):
+ * al cambio tab resta un solo albero da animare in ingresso.
  */
 export function BarraSottosezioni({
   voci,
@@ -32,12 +38,13 @@ export function BarraSottosezioni({
   const voce = voci[indice] ?? voci[0];
 
   useEffect(() => {
+    // `auto`: lo smooth competerebbe col tween del pannello sul main thread.
     tabRefs.current[attiva]?.scrollIntoView({
-      behavior: ridotto ? "auto" : "smooth",
+      behavior: "auto",
       inline: "center",
       block: "nearest",
     });
-  }, [attiva, ridotto]);
+  }, [attiva]);
 
   function vaiA(nuovo: number) {
     if (nuovo < 0 || nuovo >= voci.length) return;
@@ -88,31 +95,27 @@ export function BarraSottosezioni({
       </div>
 
       <div className="relative overflow-hidden">
-        <AnimatePresence initial={false} mode="popLayout" custom={direzione.current}>
-          <motion.div
-            key={voce.id}
-            role="tabpanel"
-            aria-label={voce.label}
-            custom={direzione.current}
-            drag="x"
-            dragConstraints={{ left: 0, right: 0 }}
-            dragElastic={0.18}
-            dragMomentum={false}
-            onDragEnd={(_, info) => {
-              const arrivo = info.offset.x + proietta(info.velocity.x);
-              if (arrivo < -60) vaiA(indice + 1);
-              else if (arrivo > 60) vaiA(indice - 1);
-            }}
-            initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 40 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * -40 }}
-            transition={ridotto ? { duration: 0.15 } : molla.foglio}
-            className="touch-pan-y px-5 py-4"
-          >
-            <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>
-            {voce.contenuto}
-          </motion.div>
-        </AnimatePresence>
+        <motion.div
+          key={voce.id}
+          role="tabpanel"
+          aria-label={voce.label}
+          drag="x"
+          dragConstraints={{ left: 0, right: 0 }}
+          dragElastic={0.12}
+          dragMomentum={false}
+          onDragEnd={(_, info) => {
+            const arrivo = info.offset.x + proietta(info.velocity.x);
+            if (arrivo < -60) vaiA(indice + 1);
+            else if (arrivo > 60) vaiA(indice - 1);
+          }}
+          initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={ridotto ? { duration: 0.1 } : transizioneTab}
+          className="touch-pan-y px-5 py-4"
+        >
+          <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>
+          {voce.contenuto}
+        </motion.div>
       </div>
     </div>
   );

From 2345a45f14c11871bb49c8091358e3fe1939cd2a Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:31:56 +0200
Subject: [PATCH 25/37] Allinea le notifiche del profilo al canale intero e
 stacca Esci in rosso chiaro.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/CHANGELOG.md                 |   5 ++
 docs/modules/notifiche.md         |  19 ++---
 docs/modules/profilo-giocatore.md |   4 +-
 src/routes/profilo.tsx            | 114 +++++++++++++++---------------
 4 files changed, 76 insertions(+), 66 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 9767e12..d278178 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,11 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Profilo: etichetta notifiche allineata al comportamento
+
+- L’interruttore in Impostazioni non è più «Notifiche turno palloni»: iscrive il dispositivo
+  a tutte le push (palloni, solleciti) e alle smart in app. Testo e docs aggiornati.
+
 ### Revisione dell'interfaccia: accessibilità, movimento, peso
 
 - **Contrasto**: `--success`, `--info` e `--training` erano tra 3.3:1 e 3.5:1 con il testo
diff --git a/docs/modules/notifiche.md b/docs/modules/notifiche.md
index 5f1f936..5f7e822 100644
--- a/docs/modules/notifiche.md
+++ b/docs/modules/notifiche.md
@@ -1,7 +1,6 @@
 # Modulo — Notifiche
 
-**Stato:** implementato parzialmente — solo il canale "turno palloni" è realmente collegato
-(vedi Limiti noti)
+**Stato:** implementato — un unico opt-in dispositivo abilita tutto il canale push
 **File principali:** `src/lib/notifiche-smart.ts`, `src/lib/push-client.ts`,
 `src/lib/webpush.server.ts`, `src/routes/api/public/push-config.ts`,
 `src/routes/api/public/push-messaggio.ts`, `src/routes/api/public/push-subscribe.ts`,
@@ -30,7 +29,12 @@ persistente: la riga viene eliminata non appena letta dal service worker).
 
 ## Iscrizione alle notifiche push
 
-1. Il giocatore attiva "Notifiche turno palloni" in `/profilo` → richiesta permesso browser.
+In Profilo → Impostazioni c’è **un solo interruttore** («Notifiche»). Non esistono preferenze
+separate per tipo di messaggio: l’iscrizione registra il dispositivo e lo rende destinatario
+di **tutte** le push (promemoria palloni, solleciti presenze) e abilita anche le notifiche
+smart in app, che usano lo stesso service worker.
+
+1. Il giocatore attiva «Notifiche» in `/profilo` → richiesta permesso browser.
 2. `GET /api/public/push-config` restituisce solo la chiave pubblica VAPID.
 3. Registrazione del service worker `public/push-sw.js` e `pushManager.subscribe()`.
 4. `POST /api/public/push-subscribe` registra endpoint e chiavi in `push_subscriptions`
@@ -66,11 +70,8 @@ ripetersi — deduplica puramente locale al dispositivo, non sincronizzata.
 
 ## Limiti noti
 
-- **Le 4 voci "Notifiche convocazioni", "Promemoria allenamenti", "Cambi orario", "Bacheca
-  squadra" in `/profilo` sono placeholder statici**: checkbox non controllati
-  (`defaultChecked`, nessun `onChange`), non collegati a nessuno stato, nessuna colonna DB
-  per queste preferenze. L'unica preferenza realmente funzionante è "Notifiche turno
-  palloni".
+- Non ci sono preferenze granulari (solo palloni / solo presenze / solo smart): un dispositivo
+  è iscritto o no. Separare i canali richiederebbe schema e UI dedicati.
 - `promemoria_push` è descritta altrove come "storico" ma nel codice è una coda che si
   autocancella alla lettura: non conserva nulla.
 - Nessuna verifica di autenticazione su `push-messaggio` (chiunque conosca un endpoint push
@@ -88,6 +89,6 @@ ripetersi — deduplica puramente locale al dispositivo, non sincronizzata.
 
 ## Evoluzioni possibili
 
-- Collegare (o rimuovere) le 4 preferenze placeholder in `/profilo`.
+- Preferenze per canale (palloni, solleciti, smart), se servono davvero alla squadra.
 - Aggiungere autenticazione alle route pubbliche coinvolte.
 - Gestire esplicitamente il caso iOS (messaggio se l'app non è installata da Home).
diff --git a/docs/modules/profilo-giocatore.md b/docs/modules/profilo-giocatore.md
index 7f6893b..aa8f38e 100644
--- a/docs/modules/profilo-giocatore.md
+++ b/docs/modules/profilo-giocatore.md
@@ -144,7 +144,9 @@ Contiene tutti i badge ottenuti e quelli ancora da sbloccare.
 Contiene.
 
 - Logout
-- Preferenze notifiche
+- Preferenze notifiche: un solo interruttore che iscrive il dispositivo a **tutte** le push
+  (turno palloni, solleciti presenze) e abilita le notifiche smart in app — non è limitato
+  ai soli palloni (vedi [Notifiche](notifiche.md))
 - Impostazioni applicazione
 - Segnala un bug e Suggerisci una nuova funzionalità: due link che aprono una issue GitHub
   già impostata sul template giusto (`.github/ISSUE_TEMPLATE/bug_report.yml` e
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index 40cedb2..b0a1e88 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -80,7 +80,7 @@ function Profilo() {
       } else {
         await attivaNotifiche(g.id);
         setNotifiche(true);
-        toast.success("Notifiche palloni attive");
+        toast.success("Notifiche attive");
       }
     } catch (error) {
       toast.error(error instanceof Error ? error.message : "Notifiche non disponibili");
@@ -227,68 +227,70 @@ function Profilo() {
             id: "impostazioni",
             label: "Impostazioni",
             contenuto: (
-              <div className="divide-y divide-border overflow-hidden rounded-3xl bg-card shadow-card">
-                <button
-                  type="button"
-                  onClick={cambiaNotifiche}
-                  disabled={!supportate || inCorso}
-                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60"
-                >
-                  <span className="min-w-0">
-                    <span className="block truncate">Notifiche turno palloni</span>
-                    <span className="block text-xs text-muted-foreground">
-                      {supportate
-                        ? notifiche
-                          ? "Attive su questo dispositivo"
-                          : "Ricevi l'avviso il giorno stesso e la volta dopo"
-                        : "Non supportate su questo dispositivo"}
-                    </span>
-                  </span>
-                  <span
-                    className={cn(
-                      "grid h-8 w-8 shrink-0 place-items-center rounded-xl",
-                      notifiche
-                        ? "bg-accent-grad text-accent-foreground"
-                        : "bg-secondary text-muted-foreground",
-                    )}
+              <div className="space-y-3">
+                <div className="divide-y divide-border overflow-hidden rounded-3xl bg-card shadow-card">
+                  <button
+                    type="button"
+                    onClick={cambiaNotifiche}
+                    disabled={!supportate || inCorso}
+                    className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60"
                   >
-                    <Bell className="h-4 w-4" />
-                  </span>
-                </button>
-                {admin ? (
-                  <Link
-                    to="/admin"
+                    <span className="min-w-0">
+                      <span className="block truncate">Notifiche</span>
+                      <span className="block text-xs text-muted-foreground">
+                        {supportate
+                          ? notifiche
+                            ? "Attive su questo dispositivo"
+                            : "Palloni, solleciti presenze e avvisi in app"
+                          : "Non supportate su questo dispositivo"}
+                      </span>
+                    </span>
+                    <span
+                      className={cn(
+                        "grid h-8 w-8 shrink-0 place-items-center rounded-xl",
+                        notifiche
+                          ? "bg-accent-grad text-accent-foreground"
+                          : "bg-secondary text-muted-foreground",
+                      )}
+                    >
+                      <Bell className="h-4 w-4" />
+                    </span>
+                  </button>
+                  {admin ? (
+                    <Link
+                      to="/admin"
+                      className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                    >
+                      <span className="min-w-0 truncate">Dashboard amministratore</span>
+                      <ShieldCheck className="h-4 w-4 text-muted-foreground" />
+                    </Link>
+                  ) : null}
+                  <a
+                    href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml"
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
                   >
-                    <span className="min-w-0 truncate">Dashboard amministratore</span>
-                    <ShieldCheck className="h-4 w-4 text-muted-foreground" />
-                  </Link>
-                ) : null}
-                <a
-                  href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
-                >
-                  <span className="min-w-0 truncate">Segnala un bug</span>
-                  <Bug className="h-4 w-4 text-muted-foreground" />
-                </a>
-                <a
-                  href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
-                >
-                  <span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span>
-                  <Lightbulb className="h-4 w-4 text-muted-foreground" />
-                </a>
+                    <span className="min-w-0 truncate">Segnala un bug</span>
+                    <Bug className="h-4 w-4 text-muted-foreground" />
+                  </a>
+                  <a
+                    href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                  >
+                    <span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span>
+                    <Lightbulb className="h-4 w-4 text-muted-foreground" />
+                  </a>
+                </div>
                 <button
                   type="button"
                   onClick={logout}
-                  className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+                  className="premi flex min-h-11 w-full items-center justify-center gap-2 rounded-3xl bg-destructive/15 px-4 py-3 text-sm font-bold text-destructive shadow-card"
                 >
-                  <span className="min-w-0 truncate">Esci</span>
-                  <LogOut className="h-4 w-4 text-muted-foreground" />
+                  <LogOut className="h-4 w-4" />
+                  Esci
                 </button>
               </div>
             ),

From 033c45df4d286fd9e40a7791cd8d710fccf9300f Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:38:48 +0200
Subject: [PATCH 26/37] Apre Tesseramento dal widget Completa profilo in home.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/CHANGELOG.md                              |  2 ++
 docs/modules/profilo-giocatore.md              |  3 +++
 src/components/crapp/ProfiloAmministrativo.tsx |  6 +++++-
 src/routes/profilo.tsx                         | 16 +++++++++++++++-
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index d278178..90babd9 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -10,6 +10,8 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 - L’interruttore in Impostazioni non è più «Notifiche turno palloni»: iscrive il dispositivo
   a tutte le push (palloni, solleciti) e alle smart in app. Testo e docs aggiornati.
+- Il widget Home «Completa il tuo profilo» apre direttamente la tab Tesseramento
+  (`/profilo?tab=tesseramento`).
 
 ### Revisione dell'interfaccia: accessibilità, movimento, peso
 
diff --git a/docs/modules/profilo-giocatore.md b/docs/modules/profilo-giocatore.md
index aa8f38e..06a9c4b 100644
--- a/docs/modules/profilo-giocatore.md
+++ b/docs/modules/profilo-giocatore.md
@@ -67,6 +67,9 @@ Viene mostrata una barra di avanzamento (esempio: _Profilo completato — 85%_),
 
 Quando tutte le sezioni sono complete il widget scompare automaticamente.
 
+Il tap apre Profilo sulla sottosezione **Tesseramento** (`/profilo?tab=tesseramento`), non
+sulla tab Stagione.
+
 ## Profilo
 
 Il profilo viene suddiviso in sette aree.
diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index ab17b0d..5dc1cb4 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -409,7 +409,11 @@ export function CompletaProfilo({
 
   return (
     <Reveal indice={indice} className="px-5 pt-4">
-      <Link to="/profilo" className="premi block rounded-3xl bg-card p-4 shadow-card">
+      <Link
+        to="/profilo"
+        search={{ tab: "tesseramento" }}
+        className="premi block rounded-3xl bg-card p-4 shadow-card"
+      >
         <div className="flex items-center justify-between gap-3">
           <span className="font-display text-sm uppercase tracking-wide">
             Completa il tuo profilo
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index b0a1e88..85e16cd 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -29,7 +29,18 @@ import { esci } from "@/lib/auth";
 import { useIsAdmin } from "@/lib/ruoli";
 import { Reveal } from "@/components/motion/Reveal";
 
+const TAB_PROFILO = ["stagione", "badge", "tesseramento", "impostazioni"] as const;
+type TabProfilo = (typeof TAB_PROFILO)[number];
+
+function isTabProfilo(v: unknown): v is TabProfilo {
+  return typeof v === "string" && (TAB_PROFILO as readonly string[]).includes(v);
+}
+
 export const Route = createFileRoute("/profilo")({
+  validateSearch: (search: Record<string, unknown>): { tab?: TabProfilo } => {
+    const tab = isTabProfilo(search["tab"]) ? search["tab"] : undefined;
+    return tab ? { tab } : {};
+  },
   head: () => ({
     meta: [
       { title: "Profilo giocatore — CrAPP" },
@@ -48,6 +59,8 @@ export const Route = createFileRoute("/profilo")({
 });
 
 function Profilo() {
+  const { tab } = Route.useSearch();
+  const tabIniziale = tab ?? "stagione";
   const votiSocial = useVotiSocial();
   const g = useIo();
   const admin = useIsAdmin();
@@ -178,7 +191,8 @@ function Profilo() {
       </Reveal>
 
       <BarraSottosezioni
-        defaultId="stagione"
+        key={tabIniziale}
+        defaultId={tabIniziale}
         voci={[
           {
             id: "stagione",

From 61c6aaaaed13f67c0b36a10814fcaed45c9542bd Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:44:25 +0200
Subject: [PATCH 27/37] Toglie la proposta automatica dei palloni sugli
 allenamenti.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/CHANGELOG.md                             |  6 ++++
 docs/DATABASE.md                              |  2 +-
 docs/modules/palloni.md                       | 10 +++---
 src/lib/palloni-core.ts                       |  5 +++
 src/lib/palloni.ts                            |  2 +-
 ...0_m10_azzera_turni_palloni_allenamenti.sql |  9 ++++++
 test/unit/palloni-core.test.ts                | 31 +++++++++++++------
 7 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 supabase/migrations/20260905220000_m10_azzera_turni_palloni_allenamenti.sql

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 90babd9..b3c1544 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,12 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Palloni: allenamenti senza proposta automatica
+
+- `completaTurni` non assegna più gli allenamenti: restano «da assegnare» finché non si
+  sceglie a mano. Le partite tengono la rotazione. Migration M10 cancella eventuali turni
+  salvati su allenamenti da oggi in poi.
+
 ### Profilo: etichetta notifiche allineata al comportamento
 
 - L’interruttore in Impostazioni non è più «Notifiche turno palloni»: iscrive il dispositivo
diff --git a/docs/DATABASE.md b/docs/DATABASE.md
index 9fa40a5..92647cb 100644
--- a/docs/DATABASE.md
+++ b/docs/DATABASE.md
@@ -52,7 +52,7 @@ non in questo file.
 
 | Tabella              | Scopo                                         | Note |
 | -------------------- | --------------------------------------------- | ---- |
-| `turni_palloni`      | Gestione dei turni palloni.                   |      |
+| `turni_palloni`      | Gestione dei turni palloni.                   | Solo turni **confermati**. Gli allenamenti non ricevono proposta automatica (vedi [palloni.md](modules/palloni.md)); M10 azzera i turni salvati su allenamenti da oggi in poi. |
 | `push_subscriptions` | Dispositivi registrati per le notifiche Push. |      |
 | `promemoria_push`    | Storico dei promemoria inviati.               |      |
 
diff --git a/docs/modules/palloni.md b/docs/modules/palloni.md
index 4b3673e..af674b0 100644
--- a/docs/modules/palloni.md
+++ b/docs/modules/palloni.md
@@ -25,14 +25,16 @@ compaiono.
 
 ## Implementazione
 
-- `completaTurni()` (`palloni-core.ts`) propone, per ogni evento senza turno già salvato, il
-  candidato con meno turni fatti, poi quello che non lo fa da più tempo, poi per ordine
-  alfabetico — un algoritmo greedy, non un ordine fisso né solo per data.
+- `completaTurni()` (`palloni-core.ts`) propone, per ogni **partita** o evento extra senza
+  turno già salvato, il candidato con meno turni fatti, poi quello che non lo fa da più
+  tempo, poi per ordine alfabetico — un algoritmo greedy, non un ordine fisso né solo per
+  data. Gli **allenamenti** non ricevono proposta automatica: restano «da assegnare» finché
+  qualcuno non sceglie un incaricato in `TurnoPalloni` (scelta della squadra).
 - `useAssegnaTurno()` (`palloni.ts`) conferma una proposta o riassegna manualmente, con
   upsert su `evento_id`.
 - Il conteggio "quante volte hai portato i palloni" mostrato nel profilo e nei badge è
   ricalcolato a runtime da `conteggioTurni()` su turni salvati **più proposte non ancora
-  confermate** — non è uno storico in tabella dedicata.
+  confermate** (partite/eventi) — non è uno storico in tabella dedicata.
 - `TurnoPalloni.tsx` mostra/assegna il turno sulla card di un evento; `PromemoriaPalloni.tsx`
   è il banner in Home per il giocatore di turno.
 
diff --git a/src/lib/palloni-core.ts b/src/lib/palloni-core.ts
index 1522d63..92c5ff8 100644
--- a/src/lib/palloni-core.ts
+++ b/src/lib/palloni-core.ts
@@ -17,6 +17,9 @@ export function eventiPalloni(eventi: Evento[]): Evento[] {
 /**
  * Completa i turni mancanti proponendo, a rotazione, chi ha portato i palloni
  * meno volte (a parità, chi non lo fa da più tempo).
+ *
+ * Gli **allenamenti** non vengono proposti: restano «da assegnare» finché qualcuno
+ * non conferma un incaricato a mano. Su partite ed eventi extra la rotazione resta.
  */
 export function completaTurni(
   turni: Record<string, string>,
@@ -35,6 +38,8 @@ export function completaTurni(
       return;
     }
     if (assegnato) return;
+    // Allenamenti: niente proposta automatica — li assegna la squadra a mano.
+    if (evento.tipo === "allenamento") return;
 
     const scelto = rosa.slice().sort((a, b) => {
       const ca = conteggio.get(a.id) ?? 0;
diff --git a/src/lib/palloni.ts b/src/lib/palloni.ts
index 33a2627..9b49067 100644
--- a/src/lib/palloni.ts
+++ b/src/lib/palloni.ts
@@ -22,7 +22,7 @@ async function fetchTurni(): Promise<Record<string, string>> {
   return mappa;
 }
 
-/** Turni salvati + proposta automatica a rotazione per gli eventi non ancora assegnati. */
+/** Turni salvati + proposta automatica (solo partite/eventi) per i mancanti. */
 export function useTurniPalloni() {
   // Cambia raramente: una lettura per sessione è sufficiente.
   const query = useQuery({ queryKey: TURNI_KEY, queryFn: fetchTurni, staleTime: 30 * 60_000 });
diff --git a/supabase/migrations/20260905220000_m10_azzera_turni_palloni_allenamenti.sql b/supabase/migrations/20260905220000_m10_azzera_turni_palloni_allenamenti.sql
new file mode 100644
index 0000000..0eb247f
--- /dev/null
+++ b/supabase/migrations/20260905220000_m10_azzera_turni_palloni_allenamenti.sql
@@ -0,0 +1,9 @@
+-- M10: gli allenamenti non devono più avere turni palloni pre-assegnati.
+-- La proposta automatica lato app non li riempie più; qui si azzerano eventuali
+-- eventuali già salvati su allenamenti da oggi in poi, così restano «da assegnare».
+
+DELETE FROM public.turni_palloni AS t
+USING public.eventi_app AS e
+WHERE t.evento_id = e.id
+  AND e.tipo = 'allenamento'
+  AND e.data >= (CURRENT_DATE AT TIME ZONE 'Europe/Rome')::date;
diff --git a/test/unit/palloni-core.test.ts b/test/unit/palloni-core.test.ts
index d6217c8..4b44448 100644
--- a/test/unit/palloni-core.test.ts
+++ b/test/unit/palloni-core.test.ts
@@ -60,25 +60,26 @@ assert.deepEqual(
   "il compleanno dello stesso giorno non richiede palloni",
 );
 
-// --- completaTurni: assegna i mancanti, rispetta quelli già decisi -----------
+// --- completaTurni: niente proposta sugli allenamenti; partite sì ------------
 const turni = completaTurni({ e2: "g5" }, eventi, rosa);
 assert.equal(turni["e2"], "g5", "il turno già assegnato non viene toccato");
-assert.equal(Object.keys(turni).length, 3, "tutti gli eventi hanno un incaricato");
-assert.ok(
-  giocatori.some((g) => g.id === turni["e1"]),
-  "assegna a un giocatore reale",
-);
-assert.notEqual(turni["e1"], turni["e3"], "non tocca due volte di fila alla stessa persona");
+assert.equal(turni["e1"], undefined, "allenamento senza salvataggio resta da assegnare");
+assert.equal(turni["e3"], undefined, "allenamento futuro resta da assegnare");
+assert.equal(Object.keys(turni).length, 1, "solo i turni salvati / partite proposte");
+
+const conAllenamentoSalvato = completaTurni({ e1: "g3", e2: "g5" }, eventi, rosa);
+assert.equal(conAllenamentoSalvato["e1"], "g3", "un allenamento salvato resta");
+assert.equal(conAllenamentoSalvato["e2"], "g5");
 
 const molti = Array.from({ length: giocatori.length + 2 }, (_, i) =>
-  evento(`x${i}`, `2026-10-${String(i + 1).padStart(2, "0")}`),
+  evento(`x${i}`, `2026-10-${String(i + 1).padStart(2, "0")}`, "partita"),
 );
 const rotazione = conteggioTurni(completaTurni({}, molti, rosa));
 const carichi = Object.values(rotazione);
 assert.equal(
   Math.max(...carichi) - Math.min(...carichi),
   1,
-  "su un giro completo il carico resta bilanciato",
+  "su un giro completo di partite il carico resta bilanciato",
 );
 assert.equal(
   Object.keys(rotazione).length,
@@ -86,10 +87,20 @@ assert.equal(
   "nessuno viene saltato prima che tutti abbiano fatto un turno",
 );
 
+const soloAllenamenti = Array.from({ length: 5 }, (_, i) =>
+  evento(`a${i}`, `2026-11-${String(i + 1).padStart(2, "0")}`),
+);
+assert.deepEqual(
+  completaTurni({}, soloAllenamenti, rosa),
+  {},
+  "solo allenamenti: nessuna proposta automatica",
+);
+
 // Un turno salvato per un giocatore non più in rosa non deve rompere il conteggio.
 const conFantasma = completaTurni({ e1: "gXX" }, eventi, rosa);
 assert.equal(conFantasma["e1"], "gXX", "il turno storico resta com'è");
-assert.equal(Object.keys(conFantasma).length, 3);
+assert.ok(conFantasma["e2"], "la partita riceve comunque una proposta");
+assert.equal(conFantasma["e3"], undefined, "l'allenamento senza salvataggio resta vuoto");
 
 // --- conteggioTurni ----------------------------------------------------------
 assert.deepEqual(conteggioTurni({ a: "g1", b: "g1", c: "g2" }), { g1: 2, g2: 1 });

From 1e8168d413fd9455acc56bc761b15a32d95c5251 Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:52:52 +0200
Subject: [PATCH 28/37] Rinomina il bilancio home in Bilancio vittorie.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/routes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 638cf9a..aa17efa 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -90,7 +90,7 @@ function Index() {
             <p className="font-display text-2xl leading-none">
               {noi ? `${noi.vinte}-${noi.perse}` : "—"}
             </p>
-            <p className="text-xs uppercase text-primary-foreground/80">Bilancio</p>
+            <p className="text-xs uppercase text-primary-foreground/80">Bilancio vittorie</p>
           </div>
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="inline-flex items-center gap-1 font-display text-2xl leading-none">

From 46f5c282378e0079ef102040e9e1613e6a60ee65 Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Sat, 5 Sep 2026 22:57:17 +0200
Subject: [PATCH 29/37] Rinomina il bilancio home in Bilancio W-L.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/routes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index aa17efa..2259fa4 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -90,7 +90,7 @@ function Index() {
             <p className="font-display text-2xl leading-none">
               {noi ? `${noi.vinte}-${noi.perse}` : "—"}
             </p>
-            <p className="text-xs uppercase text-primary-foreground/80">Bilancio vittorie</p>
+            <p className="text-xs uppercase text-primary-foreground/80">Bilancio W-L</p>
           </div>
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="inline-flex items-center gap-1 font-display text-2xl leading-none">

From a5e627a57bd7744bf6949fc78d1c0292bb553721 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:12:20 +0200
Subject: [PATCH 30/37] Corregge il rendering sfasato del tesseramento su iOS.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il pannello delle sottosezioni è trascinabile: Motion gli lasciava
`will-change: transform` in permanenza e su iOS il sottoalbero finiva in un
layer composito. Sul tab Tesseramento, il più alto, il layer supera il tile di
WebKit e il contenuto veniva ridipinto a fasce sfalsate.

Disattiva la gestione automatica del will-change e toglie il backdrop-blur
dalla barra tab: non è sticky, quindi non sfocava nulla, ma il backdrop root
forzava il rendering a layer degli antenati.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BarraSottosezioni.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
index 9135ef0..b8172dc 100644
--- a/src/components/crapp/BarraSottosezioni.tsx
+++ b/src/components/crapp/BarraSottosezioni.tsx
@@ -58,7 +58,10 @@ export function BarraSottosezioni({
 
   return (
     <div>
-      <div className="border-b border-border bg-background/80 pt-3 backdrop-blur-md">
+      {/* Niente backdrop-blur: la barra non è sticky, quindi non sfoca nulla, ma su
+          iOS il backdrop root forza il rendering a layer degli antenati e sporca il
+          pannello alto qui sotto. */}
+      <div className="border-b border-border bg-background pt-3">
         <div
           role="tablist"
           aria-label="Sottosezioni"
@@ -111,6 +114,10 @@ export function BarraSottosezioni({
           initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={ridotto ? { duration: 0.1 } : transizioneTab}
+          // iOS: il will-change automatico di Motion promuove il pannello a layer
+          // composito. Sui tab lunghi (Tesseramento) supera il tile di WebKit e il
+          // contenuto viene ridisegnato a fasce sfalsate. "auto" disattiva la gestione.
+          style={{ willChange: "auto" }}
           className="touch-pan-y px-5 py-4"
         >
           <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>

From 84c4c0fc25e8dd9a5f0a8b0be37841106e461aef Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:22:39 +0200
Subject: [PATCH 31/37] Revert "Corregge il rendering sfasato del tesseramento
 su iOS."
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Annulla a5e627a: la diagnosi era sbagliata. I bordi sfalsati nella foto erano
distorsione prospettica dello scatto, non un artefatto di composizione, e il
sintomo vero era un altro (le card escono dallo spazio). Né il will-change del
pannello né il backdrop-blur della barra tab c'entravano.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BarraSottosezioni.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
index b8172dc..9135ef0 100644
--- a/src/components/crapp/BarraSottosezioni.tsx
+++ b/src/components/crapp/BarraSottosezioni.tsx
@@ -58,10 +58,7 @@ export function BarraSottosezioni({
 
   return (
     <div>
-      {/* Niente backdrop-blur: la barra non è sticky, quindi non sfoca nulla, ma su
-          iOS il backdrop root forza il rendering a layer degli antenati e sporca il
-          pannello alto qui sotto. */}
-      <div className="border-b border-border bg-background pt-3">
+      <div className="border-b border-border bg-background/80 pt-3 backdrop-blur-md">
         <div
           role="tablist"
           aria-label="Sottosezioni"
@@ -114,10 +111,6 @@ export function BarraSottosezioni({
           initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={ridotto ? { duration: 0.1 } : transizioneTab}
-          // iOS: il will-change automatico di Motion promuove il pannello a layer
-          // composito. Sui tab lunghi (Tesseramento) supera il tile di WebKit e il
-          // contenuto viene ridisegnato a fasce sfalsate. "auto" disattiva la gestione.
-          style={{ willChange: "auto" }}
           className="touch-pan-y px-5 py-4"
         >
           <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>

From 366928b61fb426803a1473b891ad9f8df1d48d10 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:22:49 +0200
Subject: [PATCH 32/37] Impedisce ai campi data di sfondare la card del
 tesseramento su iOS.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In `grid-cols-2` l'elemento di griglia è la label di `Campo`, che ha
`min-width: auto` e quindi non scende sotto la larghezza del contenuto. Su iOS
`input[type="date"]` è un controllo nativo con una larghezza intrinseca che
`width: 100%` non riduce: le due date affiancate sfondavano la card e
l'`overflow-hidden` del pannello a tab tagliava via quello che usciva.

`min-w-0` sulla label e sulla classe condivisa degli input, più `min-width: 0`
e `appearance: none` sulle sole date — è `appearance` a rendere il controllo
davvero ridimensionabile, e restando sulle date il select tiene la sua freccia.

Il fix sta in `CampiProfilo`, quindi copre anche la dashboard amministratore.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/ProfiloAmministrativo.tsx | 11 +++++++++--
 src/styles.css                                 | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index 5dc1cb4..42f29bf 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -22,11 +22,18 @@ import {
 
 const TIPI_DOCUMENTO = ["Carta d'identità", "Patente", "Passaporto"];
 
-const classiInput = "w-full rounded-xl border border-border bg-background px-3 py-2 text-sm";
+const classiInput =
+  "w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-sm";
 
+/**
+ * `min-w-0`: dentro `grid-cols-2` questa label è l'elemento di griglia e ha
+ * `min-width: auto`, quindi si allarga fino al contenuto invece di stare nella
+ * colonna. Con un controllo nativo largo dentro (una data su iOS) la coppia
+ * sfonda la card.
+ */
 function Campo({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <label className="block">
+    <label className="block min-w-0">
       <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
diff --git a/src/styles.css b/src/styles.css
index ce096c6..9fec6e1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -527,6 +527,22 @@
   }
 }
 
+/*
+ * Su iOS `input[type="date"]` è un controllo nativo con una larghezza
+ * intrinseca (lo spazio di «gg/mm/aaaa») che `width: 100%` non riesce a far
+ * scendere: dentro `grid-cols-2` due date affiancate sfondano la card, e
+ * l'`overflow-hidden` del pannello a tab taglia via quello che esce.
+ * `appearance: none` è quello che rende il campo davvero ridimensionabile;
+ * bordo, sfondo e padding li mette già la classe condivisa.
+ */
+@layer base {
+  input[type="date"] {
+    min-width: 0;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+}
+
 /* Focus da tastiera sempre visibile: nessun controllo custom lo definiva. */
 @layer base {
   :focus-visible {

From 107407b854f5783b98b8309da490c8d8872457d8 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:37:41 +0200
Subject: [PATCH 33/37] Rinomina le tab del profilo in Documenti e Opzioni.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

«Tesseramento» nominava lo scopo invece del contenuto (dati personali,
documento, certificato medico, foto tessera); cambia anche la rotta in
/profilo?tab=documenti. «Impostazioni» diventa «Opzioni» così le quattro
etichette stanno in uno schermo da telefono: le voci della barra si
dividono la riga in parti uguali (grow basis-0) e tornano a scorrere solo
se non ci stanno, quindi vale anche per Squadra e Classifica.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md                              | 10 ++++++++++
 docs/modules/notifiche.md                      |  2 +-
 docs/modules/profilo-giocatore.md              |  6 +++---
 src/components/crapp/BarraSottosezioni.tsx     |  4 +++-
 src/components/crapp/ProfiloAmministrativo.tsx |  2 +-
 src/routes/profilo.tsx                         |  8 ++++----
 6 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index b3c1544..6c02d2c 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,16 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Profilo: tab Documenti e Opzioni, barra senza scroll
+
+- L'etichetta nominava lo scopo (il tesseramento CSI) invece del contenuto: dentro ci sono
+  dati personali, documento, certificato medico e foto tessera. Cambia anche la rotta
+  (`/profilo?tab=documenti`): i vecchi link `?tab=tesseramento` aprono la tab Stagione.
+- «Impostazioni» diventa «Opzioni»: con le quattro etichette accorciate la barra delle
+  sottosezioni ci sta in uno schermo da telefono. Le voci ora si dividono la riga in parti
+  uguali (`grow basis-0`) e tornano a scorrere solo se non ci stanno, quindi vale anche per
+  le barre di Squadra e Classifica.
+
 ### Palloni: allenamenti senza proposta automatica
 
 - `completaTurni` non assegna più gli allenamenti: restano «da assegnare» finché non si
diff --git a/docs/modules/notifiche.md b/docs/modules/notifiche.md
index 5f7e822..46981db 100644
--- a/docs/modules/notifiche.md
+++ b/docs/modules/notifiche.md
@@ -29,7 +29,7 @@ persistente: la riga viene eliminata non appena letta dal service worker).
 
 ## Iscrizione alle notifiche push
 
-In Profilo → Impostazioni c’è **un solo interruttore** («Notifiche»). Non esistono preferenze
+In Profilo → Opzioni c’è **un solo interruttore** («Notifiche»). Non esistono preferenze
 separate per tipo di messaggio: l’iscrizione registra il dispositivo e lo rende destinatario
 di **tutte** le push (promemoria palloni, solleciti presenze) e abilita anche le notifiche
 smart in app, che usano lo stesso service worker.
diff --git a/docs/modules/profilo-giocatore.md b/docs/modules/profilo-giocatore.md
index 06a9c4b..12ef0bc 100644
--- a/docs/modules/profilo-giocatore.md
+++ b/docs/modules/profilo-giocatore.md
@@ -67,7 +67,7 @@ Viene mostrata una barra di avanzamento (esempio: _Profilo completato — 85%_),
 
 Quando tutte le sezioni sono complete il widget scompare automaticamente.
 
-Il tap apre Profilo sulla sottosezione **Tesseramento** (`/profilo?tab=tesseramento`), non
+Il tap apre Profilo sulla sottosezione **Documenti** (`/profilo?tab=documenti`), non
 sulla tab Stagione.
 
 ## Profilo
@@ -142,7 +142,7 @@ Sezione già presente.
 
 Contiene tutti i badge ottenuti e quelli ancora da sbloccare.
 
-### Impostazioni
+### Opzioni
 
 Contiene.
 
@@ -159,7 +159,7 @@ Contiene.
 ## Dashboard amministratore
 
 Gli amministratori dispongono di una schermata dedicata (`/admin`, raggiungibile da
-Profilo → Impostazioni).
+Profilo → Opzioni).
 
 Per ogni giocatore vengono mostrati.
 
diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
index 9135ef0..72c35e6 100644
--- a/src/components/crapp/BarraSottosezioni.tsx
+++ b/src/components/crapp/BarraSottosezioni.tsx
@@ -80,7 +80,9 @@ export function BarraSottosezioni({
                   vaiA(i);
                 }}
                 className={cn(
-                  "snap-center shrink-0 rounded-full px-3.5 py-2 text-xs font-bold uppercase tracking-wide transition-colors",
+                  // grow+basis-0: se le voci ci stanno riempiono la riga in parti uguali,
+                  // altrimenti shrink-0 le tiene leggibili e la barra torna a scorrere.
+                  "snap-center shrink-0 grow basis-0 rounded-full px-3.5 py-2 text-xs font-bold uppercase tracking-wide transition-colors",
                   "min-h-11 touch-manipulation whitespace-nowrap",
                   selezionata
                     ? "bg-accent text-accent-foreground shadow-pop"
diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index 42f29bf..3f1f0a0 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -418,7 +418,7 @@ export function CompletaProfilo({
     <Reveal indice={indice} className="px-5 pt-4">
       <Link
         to="/profilo"
-        search={{ tab: "tesseramento" }}
+        search={{ tab: "documenti" }}
         className="premi block rounded-3xl bg-card p-4 shadow-card"
       >
         <div className="flex items-center justify-between gap-3">
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index 85e16cd..b95adda 100644
--- a/src/routes/profilo.tsx
+++ b/src/routes/profilo.tsx
@@ -29,7 +29,7 @@ import { esci } from "@/lib/auth";
 import { useIsAdmin } from "@/lib/ruoli";
 import { Reveal } from "@/components/motion/Reveal";
 
-const TAB_PROFILO = ["stagione", "badge", "tesseramento", "impostazioni"] as const;
+const TAB_PROFILO = ["stagione", "badge", "documenti", "impostazioni"] as const;
 type TabProfilo = (typeof TAB_PROFILO)[number];
 
 function isTabProfilo(v: unknown): v is TabProfilo {
@@ -233,13 +233,13 @@ function Profilo() {
             contenuto: <CollezioneBadge g={g} votiSocial={votiSocial.data ?? []} />,
           },
           {
-            id: "tesseramento",
-            label: "Tesseramento",
+            id: "documenti",
+            label: "Documenti",
             contenuto: <ProfiloAmministrativo giocatoreId={g.id} conTendina={false} />,
           },
           {
             id: "impostazioni",
-            label: "Impostazioni",
+            label: "Opzioni",
             contenuto: (
               <div className="space-y-3">
                 <div className="divide-y divide-border overflow-hidden rounded-3xl bg-card shadow-card">

From 2a1a0839c05dfefd2761761f3159810602c58025 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:41:20 +0200
Subject: [PATCH 34/37] Estende alla card degli eventi il fix delle date su
 iOS.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il `min-w-0` di 366928b era finito solo in `ProfiloAmministrativo` perché
`Campo` e le classi degli input erano ricopiati identici in tre file: il
form «Nuovo evento» e la dashboard admin («Data tessera» in `grid-cols-2`)
sfondavano ancora la card. Ora `Campo` e `classiInput` stanno una volta
sola in `ui-bits` e le tre copie spariscono.

La regola CSS che rende ridimensionabili i controlli nativi copre anche
`input[type="time"]`, che nel form eventi sta affiancato alla data.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md                             |  9 ++++++++
 .../crapp/ProfiloAmministrativo.tsx           | 22 +-----------------
 src/components/crapp/ui-bits.tsx              | 21 +++++++++++++++++
 src/routes/admin.tsx                          | 15 +-----------
 src/routes/eventi.tsx                         | 23 +++++--------------
 src/styles.css                                | 17 +++++++-------
 6 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 6c02d2c..736b91f 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,15 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Form eventi: data e ora non sfondano più la card su iOS
+
+- Lo stesso difetto già corretto sul tesseramento: `Campo` e le classi degli input erano
+  ricopiati identici in tre file, quindi il `min-w-0` aggiunto in `ProfiloAmministrativo`
+  non arrivava né al form «Nuovo evento» né alla dashboard admin. Ora `Campo` e
+  `classiInput` stanno una volta sola in `ui-bits`.
+- La regola CSS che rende ridimensionabili i controlli nativi copre anche
+  `input[type="time"]`, che nel form eventi sta affiancato alla data in `grid-cols-2`.
+
 ### Profilo: tab Documenti e Opzioni, barra senza scroll
 
 - L'etichetta nominava lo scopo (il tesseramento CSI) invece del contenuto: dentro ci sono
diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index 3f1f0a0..3e7dc99 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router";
 import { Check, Eye, Loader2, Upload } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { SezioneTendina } from "@/components/crapp/ui-bits";
+import { Campo, classiInput, SezioneTendina } from "@/components/crapp/ui-bits";
 import { Reveal } from "@/components/motion/Reveal";
 import {
   caricaFile,
@@ -22,26 +22,6 @@ import {
 
 const TIPI_DOCUMENTO = ["Carta d'identità", "Patente", "Passaporto"];
 
-const classiInput =
-  "w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-sm";
-
-/**
- * `min-w-0`: dentro `grid-cols-2` questa label è l'elemento di griglia e ha
- * `min-width: auto`, quindi si allarga fino al contenuto invece di stare nella
- * colonna. Con un controllo nativo largo dentro (una data su iOS) la coppia
- * sfonda la card.
- */
-function Campo({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label className="block min-w-0">
-      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
-        {label}
-      </span>
-      <span className="mt-1 block">{children}</span>
-    </label>
-  );
-}
-
 function Intestazione({ titolo, completa }: { titolo: string; completa: boolean }) {
   return (
     <div className="flex items-center gap-2 pt-2">
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index fe80e8e..73add18 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -156,6 +156,27 @@ export function SezioneTendina({
   );
 }
 
+/** Classi condivise di input, select e textarea nei form dell'app. */
+export const classiInput =
+  "w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-sm";
+
+/**
+ * Etichetta + controllo di un form. `min-w-0`: dentro `grid-cols-2` questa label
+ * è l'elemento di griglia e ha `min-width: auto`, quindi si allarga fino al
+ * contenuto invece di stare nella colonna. Con un controllo nativo largo dentro
+ * (una data o un'ora su iOS) la coppia sfonda la card.
+ */
+export function Campo({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="block min-w-0">
+      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
+        {label}
+      </span>
+      <span className="mt-1 block">{children}</span>
+    </label>
+  );
+}
+
 export function StatoBadge({ stato, className }: { stato: Stato; className?: string }) {
   const meta = statoMeta[stato];
   return (
diff --git a/src/routes/admin.tsx b/src/routes/admin.tsx
index 6d56519..03ed346 100644
--- a/src/routes/admin.tsx
+++ b/src/routes/admin.tsx
@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { PageHeader, Section, StatTile } from "@/components/crapp/ui-bits";
+import { Campo, classiInput, PageHeader, Section, StatTile } from "@/components/crapp/ui-bits";
 import { CampiProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import {
   nomeCompleto,
@@ -76,8 +76,6 @@ const statoClasse: Record<StatoScadenza | "presente" | "assente", string> = {
   assente: "bg-secondary text-muted-foreground",
 };
 
-const classiInput = "w-full rounded-xl border border-border bg-background px-3 py-2 text-sm";
-
 /** L'unico vincolo unique lato database sulla tabella è l'email: messaggio leggibile invece
  * del codice Postgres (23505). */
 function messaggioErrore(e: unknown, fallback: string): string {
@@ -87,17 +85,6 @@ function messaggioErrore(e: unknown, fallback: string): string {
   return e instanceof Error ? e.message : fallback;
 }
 
-function Campo({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label className="block">
-      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
-        {label}
-      </span>
-      <span className="mt-1 block">{children}</span>
-    </label>
-  );
-}
-
 /**
  * Pannello di modifica dell'admin (DD-017): dati squadra, dati personali e collegamento
  * all'account. I file restano fuori: l'admin li scarica, non li carica al posto di altri.
diff --git a/src/routes/eventi.tsx b/src/routes/eventi.tsx
index df9d04c..c8c0732 100644
--- a/src/routes/eventi.tsx
+++ b/src/routes/eventi.tsx
@@ -3,7 +3,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { ArrowLeft, CalendarPlus, Loader2, Pencil, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { PageHeader, Section } from "@/components/crapp/ui-bits";
+import { Campo, classiInput, PageHeader, Section } from "@/components/crapp/ui-bits";
 import { formatData } from "@/lib/crapp-data";
 import { nomeCompleto, useGiocatoriSquadra } from "@/lib/giocatori-squadra";
 import {
@@ -151,7 +151,7 @@ function GestioneEventi() {
                 maxLength={80}
                 onChange={(e) => aggiorna({ titolo: e.target.value })}
                 placeholder="Es. CRAP Volley vs Aurora Nera"
-                className="w-full rounded-xl border border-border bg-background px-3 py-2 text-sm"
+                className={classiInput}
               />
             </Campo>
 
@@ -161,7 +161,7 @@ function GestioneEventi() {
                   type="date"
                   value={bozza.data}
                   onChange={(e) => aggiorna({ data: e.target.value })}
-                  className="w-full rounded-xl border border-border bg-background px-3 py-2 text-sm"
+                  className={classiInput}
                 />
               </Campo>
               <Campo label="Ora">
@@ -169,7 +169,7 @@ function GestioneEventi() {
                   type="time"
                   value={bozza.ora}
                   onChange={(e) => aggiorna({ ora: e.target.value })}
-                  className="w-full rounded-xl border border-border bg-background px-3 py-2 text-sm"
+                  className={classiInput}
                 />
               </Campo>
             </div>
@@ -179,7 +179,7 @@ function GestioneEventi() {
                 value={bozza.luogo}
                 maxLength={80}
                 onChange={(e) => aggiorna({ luogo: e.target.value })}
-                className="w-full rounded-xl border border-border bg-background px-3 py-2 text-sm"
+                className={classiInput}
               />
             </Campo>
 
@@ -189,7 +189,7 @@ function GestioneEventi() {
                 maxLength={300}
                 rows={2}
                 onChange={(e) => aggiorna({ note: e.target.value })}
-                className="w-full rounded-xl border border-border bg-background px-3 py-2 text-sm"
+                className={classiInput}
               />
             </Campo>
 
@@ -322,17 +322,6 @@ function GestioneEventi() {
   );
 }
 
-function Campo({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label className="block">
-      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
-        {label}
-      </span>
-      <span className="mt-1 block">{children}</span>
-    </label>
-  );
-}
-
 function Interruttore({
   attivo,
   onClick,
diff --git a/src/styles.css b/src/styles.css
index 9fec6e1..4c59dc9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -126,7 +126,7 @@
   --ring: oklch(0.35 0.03 265);
   /* Luminosità scelte perché il testo bianco sopra superi 4.5:1 (WCAG AA). */
   /* Compleanni / successi: verde un po' più chiaro e saturo. */
-  --success: oklch(0.60 0.17 152);
+  --success: oklch(0.6 0.17 152);
   --success-foreground: oklch(0.99 0 0);
   --warning: oklch(0.78 0.15 78);
   --warning-foreground: oklch(0.18 0.02 60);
@@ -528,15 +528,16 @@
 }
 
 /*
- * Su iOS `input[type="date"]` è un controllo nativo con una larghezza
- * intrinseca (lo spazio di «gg/mm/aaaa») che `width: 100%` non riesce a far
- * scendere: dentro `grid-cols-2` due date affiancate sfondano la card, e
- * l'`overflow-hidden` del pannello a tab taglia via quello che esce.
- * `appearance: none` è quello che rende il campo davvero ridimensionabile;
- * bordo, sfondo e padding li mette già la classe condivisa.
+ * Su iOS `input[type="date"]` e `input[type="time"]` sono controlli nativi con
+ * una larghezza intrinseca (lo spazio di «gg/mm/aaaa», «--:--») che
+ * `width: 100%` non riesce a far scendere: dentro `grid-cols-2` due campi
+ * affiancati sfondano la card, e l'`overflow-hidden` del pannello a tab taglia
+ * via quello che esce. `appearance: none` è quello che rende il campo davvero
+ * ridimensionabile; bordo, sfondo e padding li mette già la classe condivisa.
  */
 @layer base {
-  input[type="date"] {
+  input[type="date"],
+  input[type="time"] {
     min-width: 0;
     appearance: none;
     -webkit-appearance: none;

From a7d0f5af5bd6f56a88cac07cf8117f066dc60161 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:50:51 +0200
Subject: [PATCH 35/37] Mostra le note dell'evento nella pagina di dettaglio.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il campo Note del form eventi si poteva scrivere ma non lo leggeva
nessuno: ora compare nella scheda di /allenamento/$id e /partita/$id,
sotto orario e luogo, con gli a capo mantenuti. Se è vuoto non compare
niente.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md              | 6 ++++++
 src/routes/allenamento.$id.tsx | 6 ++++++
 src/routes/partita.$id.tsx     | 6 ++++++
 3 files changed, 18 insertions(+)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 736b91f..b1fc9d2 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,12 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Le note dell'evento si leggono aprendolo
+
+- Il campo Note del form eventi si poteva scrivere ma non lo vedeva nessuno: ora compare
+  nella scheda di `/allenamento/$id` e `/partita/$id`, sotto orario e luogo, con gli a capo
+  mantenuti. Se è vuoto non compare niente.
+
 ### Form eventi: data e ora non sfondano più la card su iOS
 
 - Lo stesso difetto già corretto sul tesseramento: `Campo` e le classi degli input erano
diff --git a/src/routes/allenamento.$id.tsx b/src/routes/allenamento.$id.tsx
index 456f8fe..2558279 100644
--- a/src/routes/allenamento.$id.tsx
+++ b/src/routes/allenamento.$id.tsx
@@ -90,6 +90,12 @@ function AllenamentoDetail() {
             </span>
           </div>
 
+          {evento.note ? (
+            <p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-sm">
+              {evento.note}
+            </p>
+          ) : null}
+
           <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-semibold">
             <Users className="h-4 w-4" />
             Conferme: {presentiVeri}/{convocatiEvento(evento, rosa).length}
diff --git a/src/routes/partita.$id.tsx b/src/routes/partita.$id.tsx
index 822af11..22d3401 100644
--- a/src/routes/partita.$id.tsx
+++ b/src/routes/partita.$id.tsx
@@ -139,6 +139,12 @@ function PartitaDetail() {
             </span>
           </div>
 
+          {evento.note ? (
+            <p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-sm">
+              {evento.note}
+            </p>
+          ) : null}
+
           <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-semibold">
             <Users className="h-4 w-4" />
             Conferme: {presentiVeri}/{convocati.length}

From 73902cc0a445a0cbdc57d65c858147abba0d669f Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sun, 6 Sep 2026 00:08:58 +0200
Subject: [PATCH 36/37] Apre il sondaggio pre-partita alle 8:00 con avviso push
 manuale.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il sondaggio cacche era votabile in qualsiasi momento, anche settimane
prima della partita. Ora `sondaggioAperto()` lo sblocca alle 8:00 del
giorno della partita e prima la card mostra solo l'avviso di apertura.

Aggiunge la route `POST /api/public/apri-sondaggio` e, per gli
amministratori, il pulsante «Avvisa tutti del sondaggio» nella card:
manda la push a tutti i dispositivi iscritti, con lo stesso meccanismo
del sollecito presenze. Nessun invio automatico.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md                        |  8 +++
 docs/modules/notifiche.md                |  3 ++
 docs/modules/scout-live.md               |  9 +++-
 src/components/crapp/SondaggioCacche.tsx | 62 +++++++++++++++++++++++-
 src/lib/cacche.ts                        | 11 +++++
 src/lib/palloni-core.ts                  |  3 +-
 src/routeTree.gen.ts                     | 21 ++++++++
 src/routes/api/public/apri-sondaggio.ts  | 52 ++++++++++++++++++++
 src/routes/partita.$id.tsx               |  2 +-
 test/unit/cacche.test.ts                 |  9 ++++
 10 files changed, 173 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/api/public/apri-sondaggio.ts

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index b1fc9d2..296226e 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,14 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Il sondaggio pre-partita apre alle 8:00 del giorno della partita
+
+- Prima era sempre votabile, anche settimane prima: ora la card resta chiusa con l'avviso di
+  apertura e si sblocca alle 8:00 del giorno stesso.
+- Quando è aperto, gli amministratori hanno nella card il pulsante «Avvisa tutti del
+  sondaggio» (`POST /api/public/apri-sondaggio`), che manda la push a tutti i dispositivi
+  iscritti — stesso meccanismo del sollecito presenze. Nessun cron: l'invio è manuale.
+
 ### Le note dell'evento si leggono aprendolo
 
 - Il campo Note del form eventi si poteva scrivere ma non lo vedeva nessuno: ora compare
diff --git a/docs/modules/notifiche.md b/docs/modules/notifiche.md
index 46981db..e89edf7 100644
--- a/docs/modules/notifiche.md
+++ b/docs/modules/notifiche.md
@@ -46,6 +46,9 @@ smart in app, che usano lo stesso service worker.
 
 - **`push-config`** — espone la sola chiave pubblica VAPID.
 - **`push-subscribe`** — registra o rimuove l'iscrizione di un dispositivo.
+- **`apri-sondaggio`** — premuto da un admin dalla pagina partita: mette in coda su
+  `promemoria_push` l'avviso di apertura del sondaggio pre-partita per **tutti** i dispositivi
+  iscritti e manda la push (vedi [Scout Live](scout-live.md)).
 - **`push-messaggio`** — non invia nulla: il service worker la interroga **al momento della
   ricezione** di una push (che arriva sempre "vuota", senza testo, per compatibilità) per
   sapere quale messaggio mostrare. Priorità: un messaggio in coda su `promemoria_push`
diff --git a/docs/modules/scout-live.md b/docs/modules/scout-live.md
index b1049c6..a77eea0 100644
--- a/docs/modules/scout-live.md
+++ b/docs/modules/scout-live.md
@@ -82,8 +82,13 @@ sezione "Report tecnico".
 ## Sondaggio cacche
 
 `SondaggioCacche.tsx` chiede "quante cacche hai fatto prima di questa partita" (0-5+), sempre
-modificabile, senza gating temporale reale (visibile sia prima sia dopo la partita nonostante
-il nome). `statisticheCacche()` (`cacche.ts`) calcola media, record e `giornateTop`
+modificabile. `sondaggioAperto()` (`cacche.ts`) lo apre alle **8:00 del giorno della partita**
+(ora locale del dispositivo) e da lì lo lascia aperto per sempre; prima la card mostra solo
+l'avviso di apertura. Quando è aperto, gli **amministratori** vedono nella card il pulsante
+«Avvisa tutti del sondaggio»: chiama `POST /api/public/apri-sondaggio` e manda la push a tutti
+i dispositivi iscritti, come il sollecito presenze (vedi [Notifiche](notifiche.md)). Nessun
+invio automatico: parte solo quando un admin lo preme.
+`statisticheCacche()` (`cacche.ts`) calcola media, record e `giornateTop`
 (giornate con ≥3), soglia usata per un [badge](badge.md) segreto — coerente con DD-007 (badge
 calcolati a runtime).
 
diff --git a/src/components/crapp/SondaggioCacche.tsx b/src/components/crapp/SondaggioCacche.tsx
index 8cd4ca5..1de6982 100644
--- a/src/components/crapp/SondaggioCacche.tsx
+++ b/src/components/crapp/SondaggioCacche.tsx
@@ -1,18 +1,29 @@
+import { useState } from "react";
+import { BellRing, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Card } from "@/components/crapp/ui-bits";
 import { nomeCompleto, useGiocatoriSquadra } from "@/lib/giocatori-squadra";
 import { useGiocatoreCorrente } from "@/lib/user-store";
-import { mediaPartita, useCacche, useSalvaCacche } from "@/lib/cacche";
+import { useIsAdmin } from "@/lib/ruoli";
+import { mediaPartita, sondaggioAperto, useCacche, useSalvaCacche } from "@/lib/cacche";
 
 const opzioni = [0, 1, 2, 3, 4, 5];
 
 /** Sondaggio goliardico pre-partita: quante cacche prima del fischio d'inizio. */
-export function SondaggioCacche({ eventoId }: { eventoId: string }) {
+export function SondaggioCacche({
+  eventoId,
+  dataEvento,
+}: {
+  eventoId: string;
+  dataEvento: string;
+}) {
   const io = useGiocatoreCorrente();
   const { righe } = useCacche();
   const salva = useSalvaCacche();
   const { righe: squadra } = useGiocatoriSquadra();
+  const admin = useIsAdmin();
+  const [avviso, setAvviso] = useState(false);
 
   const dellaPartita = righe.filter((r) => r.evento_id === eventoId);
   const mia = dellaPartita.find((r) => r.giocatore_id === io?.id);
@@ -35,6 +46,41 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
     }
   }
 
+  async function avvisaTutti() {
+    setAvviso(true);
+    try {
+      const res = await fetch("/api/public/apri-sondaggio", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ eventoId }),
+      });
+      if (!res.ok) throw new Error();
+      const dati = (await res.json()) as { inviate: number; destinatari: number };
+      toast.success(
+        dati.inviate > 0
+          ? `Notifica inviata a ${dati.inviate} dispositivi`
+          : "Nessun dispositivo con le notifiche attive",
+      );
+    } catch {
+      toast.error("Non sono riuscito a inviare la notifica");
+    } finally {
+      setAvviso(false);
+    }
+  }
+
+  if (!sondaggioAperto(dataEvento)) {
+    return (
+      <Card>
+        <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
+          💩 Sondaggio pre-partita
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Apre alle 8:00 del giorno della partita: riceverai una notifica.
+        </p>
+      </Card>
+    );
+  }
+
   return (
     <Card>
       <div className="flex items-center justify-between gap-2">
@@ -81,6 +127,18 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
           </span>
         ))}
       </div>
+
+      {admin ? (
+        <button
+          type="button"
+          onClick={avvisaTutti}
+          disabled={avviso}
+          className="premi mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-primary-foreground disabled:opacity-50"
+        >
+          {avviso ? <Loader2 className="h-4 w-4 animate-spin" /> : <BellRing className="h-4 w-4" />}
+          Avvisa tutti del sondaggio
+        </button>
+      ) : null}
     </Card>
   );
 }
diff --git a/src/lib/cacche.ts b/src/lib/cacche.ts
index bbdafd9..09ef080 100644
--- a/src/lib/cacche.ts
+++ b/src/lib/cacche.ts
@@ -1,5 +1,16 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
+import { oggiISO } from "./palloni-core";
+
+/** Ora di apertura del sondaggio, il giorno stesso della partita. */
+export const ORA_APERTURA_SONDAGGIO = 8;
+
+/** Il sondaggio apre alle 8:00 del giorno della partita e da lì resta aperto. */
+export function sondaggioAperto(dataEvento: string, adesso = new Date()): boolean {
+  const oggi = oggiISO(adesso);
+  if (dataEvento !== oggi) return dataEvento < oggi;
+  return adesso.getHours() >= ORA_APERTURA_SONDAGGIO;
+}
 
 /** Sondaggio goliardico pre-partita: quante cacche prima del match di campionato. */
 export type RigaCacche = {
diff --git a/src/lib/palloni-core.ts b/src/lib/palloni-core.ts
index 92c5ff8..45bbc5c 100644
--- a/src/lib/palloni-core.ts
+++ b/src/lib/palloni-core.ts
@@ -84,8 +84,7 @@ export function eventoSuccessivo(eventi: Evento[], eventoId: string): Evento | u
   return i >= 0 ? lista[i + 1] : undefined;
 }
 
-export function oggiISO(): string {
-  const d = new Date();
+export function oggiISO(d = new Date()): string {
   const mm = String(d.getMonth() + 1).padStart(2, "0");
   const dd = String(d.getDate()).padStart(2, "0");
   return `${d.getFullYear()}-${mm}-${dd}`;
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 3378673..dad9b15 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -20,6 +20,7 @@ import { Route as ScoutRouteImport } from './routes/scout'
 import { Route as SquadraRouteImport } from './routes/squadra'
 import { Route as AllenamentoIdRouteImport } from './routes/allenamento.$id'
 import { Route as PartitaIdRouteImport } from './routes/partita.$id'
+import { Route as ApiPublicApriSondaggioRouteImport } from './routes/api/public/apri-sondaggio'
 import { Route as ApiPublicCsiRouteImport } from './routes/api/public/csi'
 import { Route as ApiPublicPromemoriaPalloniRouteImport } from './routes/api/public/promemoria-palloni'
 import { Route as ApiPublicPushConfigRouteImport } from './routes/api/public/push-config'
@@ -82,6 +83,11 @@ const PartitaIdRoute = PartitaIdRouteImport.update({
   path: '/partita/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiPublicApriSondaggioRoute = ApiPublicApriSondaggioRouteImport.update({
+  id: '/api/public/apri-sondaggio',
+  path: '/api/public/apri-sondaggio',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiPublicCsiRoute = ApiPublicCsiRouteImport.update({
   id: '/api/public/csi',
   path: '/api/public/csi',
@@ -127,6 +133,7 @@ export interface FileRoutesByFullPath {
   '/squadra': typeof SquadraRoute
   '/allenamento/$id': typeof AllenamentoIdRoute
   '/partita/$id': typeof PartitaIdRoute
+  '/api/public/apri-sondaggio': typeof ApiPublicApriSondaggioRoute
   '/api/public/csi': typeof ApiPublicCsiRoute
   '/api/public/promemoria-palloni': typeof ApiPublicPromemoriaPalloniRoute
   '/api/public/push-config': typeof ApiPublicPushConfigRoute
@@ -146,6 +153,7 @@ export interface FileRoutesByTo {
   '/squadra': typeof SquadraRoute
   '/allenamento/$id': typeof AllenamentoIdRoute
   '/partita/$id': typeof PartitaIdRoute
+  '/api/public/apri-sondaggio': typeof ApiPublicApriSondaggioRoute
   '/api/public/csi': typeof ApiPublicCsiRoute
   '/api/public/promemoria-palloni': typeof ApiPublicPromemoriaPalloniRoute
   '/api/public/push-config': typeof ApiPublicPushConfigRoute
@@ -166,6 +174,7 @@ export interface FileRoutesById {
   '/squadra': typeof SquadraRoute
   '/allenamento/$id': typeof AllenamentoIdRoute
   '/partita/$id': typeof PartitaIdRoute
+  '/api/public/apri-sondaggio': typeof ApiPublicApriSondaggioRoute
   '/api/public/csi': typeof ApiPublicCsiRoute
   '/api/public/promemoria-palloni': typeof ApiPublicPromemoriaPalloniRoute
   '/api/public/push-config': typeof ApiPublicPushConfigRoute
@@ -187,6 +196,7 @@ export interface FileRouteTypes {
     | '/squadra'
     | '/allenamento/$id'
     | '/partita/$id'
+    | '/api/public/apri-sondaggio'
     | '/api/public/csi'
     | '/api/public/promemoria-palloni'
     | '/api/public/push-config'
@@ -206,6 +216,7 @@ export interface FileRouteTypes {
     | '/squadra'
     | '/allenamento/$id'
     | '/partita/$id'
+    | '/api/public/apri-sondaggio'
     | '/api/public/csi'
     | '/api/public/promemoria-palloni'
     | '/api/public/push-config'
@@ -225,6 +236,7 @@ export interface FileRouteTypes {
     | '/squadra'
     | '/allenamento/$id'
     | '/partita/$id'
+    | '/api/public/apri-sondaggio'
     | '/api/public/csi'
     | '/api/public/promemoria-palloni'
     | '/api/public/push-config'
@@ -245,6 +257,7 @@ export interface RootRouteChildren {
   SquadraRoute: typeof SquadraRoute
   AllenamentoIdRoute: typeof AllenamentoIdRoute
   PartitaIdRoute: typeof PartitaIdRoute
+  ApiPublicApriSondaggioRoute: typeof ApiPublicApriSondaggioRoute
   ApiPublicCsiRoute: typeof ApiPublicCsiRoute
   ApiPublicPromemoriaPalloniRoute: typeof ApiPublicPromemoriaPalloniRoute
   ApiPublicPushConfigRoute: typeof ApiPublicPushConfigRoute
@@ -332,6 +345,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PartitaIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/public/apri-sondaggio': {
+      id: '/api/public/apri-sondaggio'
+      path: '/api/public/apri-sondaggio'
+      fullPath: '/api/public/apri-sondaggio'
+      preLoaderRoute: typeof ApiPublicApriSondaggioRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/public/csi': {
       id: '/api/public/csi'
       path: '/api/public/csi'
@@ -389,6 +409,7 @@ const rootRouteChildren: RootRouteChildren = {
   SquadraRoute: SquadraRoute,
   AllenamentoIdRoute: AllenamentoIdRoute,
   PartitaIdRoute: PartitaIdRoute,
+  ApiPublicApriSondaggioRoute: ApiPublicApriSondaggioRoute,
   ApiPublicCsiRoute: ApiPublicCsiRoute,
   ApiPublicPromemoriaPalloniRoute: ApiPublicPromemoriaPalloniRoute,
   ApiPublicPushConfigRoute: ApiPublicPushConfigRoute,
diff --git a/src/routes/api/public/apri-sondaggio.ts b/src/routes/api/public/apri-sondaggio.ts
new file mode 100644
index 0000000..e614fb1
--- /dev/null
+++ b/src/routes/api/public/apri-sondaggio.ts
@@ -0,0 +1,52 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { leggiEventi } from "@/lib/eventi.server";
+import { inviaPush } from "@/lib/webpush.server";
+
+const schema = z.object({ eventoId: z.string().min(1).max(50) });
+
+/** Avviso "sondaggio pre-partita aperto": lo fa partire un admin dalla pagina partita. */
+export const Route = createFileRoute("/api/public/apri-sondaggio")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const parsed = schema.safeParse(await request.json());
+        if (!parsed.success) return new Response("Dati non validi", { status: 400 });
+
+        const eventi = await leggiEventi();
+        const partita = eventi.find((e) => e.id === parsed.data.eventoId);
+        if (!partita) return new Response("Evento non trovato", { status: 404 });
+
+        const { supabaseAdmin } = await import("@/integrations/supabase/client.server");
+        const { data: iscrizioni } = await supabaseAdmin
+          .from("push_subscriptions")
+          .select("endpoint");
+
+        const titolo = "💩 Sondaggio pre-partita aperto";
+        const testo = `${partita.titolo} · ore ${partita.ora}. Quante cacche hai fatto? Rispondi prima del fischio d'inizio.`;
+
+        let inviate = 0;
+        for (const iscrizione of iscrizioni ?? []) {
+          try {
+            await supabaseAdmin
+              .from("promemoria_push")
+              .insert({ endpoint: iscrizione.endpoint, titolo, testo });
+            const stato = await inviaPush(iscrizione.endpoint);
+            if (stato === 404 || stato === 410) {
+              await supabaseAdmin
+                .from("push_subscriptions")
+                .delete()
+                .eq("endpoint", iscrizione.endpoint);
+            } else if (stato >= 200 && stato < 300) {
+              inviate += 1;
+            }
+          } catch (error) {
+            console.error("apri-sondaggio", error);
+          }
+        }
+
+        return Response.json({ inviate, destinatari: (iscrizioni ?? []).length });
+      },
+    },
+  },
+});
diff --git a/src/routes/partita.$id.tsx b/src/routes/partita.$id.tsx
index 22d3401..47468b8 100644
--- a/src/routes/partita.$id.tsx
+++ b/src/routes/partita.$id.tsx
@@ -205,7 +205,7 @@ function PartitaDetail() {
       )}
 
       <Section titolo="Sondaggio pre-partita">
-        <SondaggioCacche eventoId={evento.id} />
+        <SondaggioCacche eventoId={evento.id} dataEvento={evento.data} />
       </Section>
 
       {match ? (
diff --git a/test/unit/cacche.test.ts b/test/unit/cacche.test.ts
index 8f8abdd..152d400 100644
--- a/test/unit/cacche.test.ts
+++ b/test/unit/cacche.test.ts
@@ -4,6 +4,7 @@ import {
   mediaPartita,
   mediaStagione,
   recordStagione,
+  sondaggioAperto,
   statisticheCacche,
   type RigaCacche,
 } from "@/lib/cacche";
@@ -52,4 +53,12 @@ assert.deepEqual(
   "a parità vince chi l'ha fatto per primo",
 );
 
+// --- sondaggioAperto ---------------------------------------------------------
+const alle = (h: number, m = 0) => new Date(2026, 8, 5, h, m); // 5 settembre 2026
+assert.equal(sondaggioAperto("2026-09-05", alle(7, 59)), false, "prima delle 8 è chiuso");
+assert.equal(sondaggioAperto("2026-09-05", alle(8)), true, "alle 8 in punto apre");
+assert.equal(sondaggioAperto("2026-09-05", alle(23)), true);
+assert.equal(sondaggioAperto("2026-09-06", alle(23)), false, "partita di domani: chiuso");
+assert.equal(sondaggioAperto("2026-09-04", alle(0, 1)), true, "partita passata: resta aperto");
+
 console.log("cacche: ok");

From 0c136f8f53507a551ce8936d65f49bb24cd90112 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sun, 6 Sep 2026 00:24:39 +0200
Subject: [PATCH 37/37] Apre lo Scout Live dalla pagina partita e a tutta la
 squadra.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tolto dalla home e poi da Squadra, `ScoutEntry` era rimasto orfano:
`/scout` si raggiungeva solo scrivendo l'URL a mano. Ora la card sta
nella sezione «Scout live» di `/partita/$id`. La prop `eventoId` la
accende solo se la partita aperta è quella di oggi: senza, da una
partita futura o passata si sarebbe finiti sullo scout di un'altra.

Cade anche la riserva agli admin, in `ScoutEntry` e nella route: può
scoutare chiunque sia autenticato, uno per volta grazie al lock di
sessione. È anche l'unico controllo che c'era, visto che le policy RLS
sono sempre state aperte a tutti gli autenticati.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md                   |  9 ++++++
 docs/modules/scout-live.md          | 23 +++++++++++----
 src/components/crapp/ScoutEntry.tsx | 43 ++++++++++++++---------------
 src/routes/partita.$id.tsx          |  5 ++++
 src/routes/scout.tsx                | 12 --------
 5 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 296226e..b1d5295 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -6,6 +6,15 @@ qui: sta in [ROADMAP.md](ROADMAP.md).
 
 ## Versione attuale — agosto 2026
 
+### Lo Scout Live si apre dalla pagina della partita
+
+- Tolto dalla home, era rimasto senza nessun link: `/scout` si raggiungeva solo scrivendo
+  l'URL. Ora la card `ScoutEntry` sta in `/partita/$id`, sezione «Scout live».
+- Si accende solo se la partita aperta è quella di oggi (nuova prop `eventoId`), altrimenti
+  resta grigia con «Si attiva il giorno della partita». Lock di sessione invariato.
+- Non è più riservato agli admin: può scoutare chiunque sia autenticato, uno per volta grazie
+  al lock. Sparisce il messaggio «Scout riservato».
+
 ### Il sondaggio pre-partita apre alle 8:00 del giorno della partita
 
 - Prima era sempre votabile, anche settimane prima: ora la card resta chiusa con l'avviso di
diff --git a/docs/modules/scout-live.md b/docs/modules/scout-live.md
index a77eea0..40ed2a4 100644
--- a/docs/modules/scout-live.md
+++ b/docs/modules/scout-live.md
@@ -30,10 +30,21 @@ aggiornato da qualunque dispositivo.
 
 ## Chi può usarlo
 
-Solo gli admin lato UI: `ScoutEntry.tsx` e `scout.tsx` bloccano i non-admin con il messaggio
-"Scout riservato". **Il controllo non è imposto a livello database**: le policy RLS di
-`scout_sessioni`/`scout_live`/`scout_partite` sono aperte a qualunque utente autenticato, non
-solo agli admin — la migration M4 toglie l'accesso solo al ruolo `anon`.
+Chiunque sia autenticato: non è più riservato agli admin. A tenere l'ordine basta il lock di
+sessione — scoutizza uno per volta, gli altri vedono "In uso da …". Questo allinea l'interfaccia
+alle policy RLS di `scout_sessioni`/`scout_live`/`scout_partite`, che sono sempre state aperte a
+qualunque utente autenticato (la migration M4 toglie l'accesso solo al ruolo `anon`).
+
+---
+
+## Da dove ci si arriva
+
+`ScoutEntry.tsx` è l'unico accesso a `/scout`: sta nella pagina della partita
+(`partita.$id.tsx`, sezione «Scout live»), visibile a tutta la squadra. Si accende solo se
+**quella** partita è quella di oggi — la prop `eventoId` confronta l'evento aperto con
+`partitaDiOggi()` — e se nessun altro ha il lock; negli altri casi resta una card grigia non
+cliccabile («Si attiva il giorno della partita» / «In uso da …»). Dalla home è stato tolto
+perché occupava spazio 6 giorni su 7.
 
 ---
 
@@ -104,7 +115,8 @@ calcolati a runtime).
 
 ## Limiti noti
 
-- Controllo "solo admin" non imposto dal database (vedi sopra).
+- Scout aperto a tutta la squadra: nessun filtro su chi può registrare le azioni, l'unica
+  garanzia è il lock di sessione (vedi sopra).
 - Possibile, per quanto improbabile, doppio "successo" applicativo nel prendere il lock:
   lettura e upsert non sono atomici.
 - `scout_partite` si inserisce ma non si corregge dall'interfaccia: solo eliminazione totale.
@@ -116,4 +128,3 @@ calcolati a runtime).
 ## Evoluzioni possibili
 
 - Realtime (Supabase Realtime) per aggiornare la sessione condivisa senza refresh manuale.
-- Restringere le policy RLS al solo ruolo admin.
diff --git a/src/components/crapp/ScoutEntry.tsx b/src/components/crapp/ScoutEntry.tsx
index 8becdd1..c892bdb 100644
--- a/src/components/crapp/ScoutEntry.tsx
+++ b/src/components/crapp/ScoutEntry.tsx
@@ -3,36 +3,33 @@ import { ChevronRight, Lock, Radio } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { sessioneScaduta, usePartitaDiOggi, useSessioneScout } from "@/lib/scout-live";
 import { useGiocatoreCorrente } from "@/lib/user-store";
-import { useIsAdmin } from "@/lib/ruoli";
 
-/** Accesso allo scout live: attivo solo il giorno della partita e se nessun altro lo sta usando. */
-export function ScoutEntry({ variante = "grande" }: { variante?: "grande" | "compatto" }) {
-  const { pronto, partita } = usePartitaDiOggi();
+/**
+ * Accesso allo scout live: attivo solo il giorno della partita e se nessun altro lo sta usando.
+ * Con `eventoId` si accende solo se quella partita è proprio quella di oggi.
+ */
+export function ScoutEntry({
+  variante = "grande",
+  eventoId,
+}: {
+  variante?: "grande" | "compatto";
+  eventoId?: string;
+}) {
+  const { pronto, partita: diOggi } = usePartitaDiOggi();
+  const partita = eventoId && diOggi?.id !== eventoId ? null : diOggi;
   const io = useGiocatoreCorrente();
-  const admin = useIsAdmin();
   const { data: sessione } = useSessioneScout(partita?.id ?? null);
 
-  // Strumento tecnico: solo i referenti/allenatori scoutizzano la partita.
-  const abilitato = admin;
-
   const attiva = sessione && !sessioneScaduta(sessione) ? sessione : null;
   const occupato = !!attiva && attiva.giocatore_id !== io?.id;
-  const disponibile = abilitato && pronto && !!partita && !occupato;
+  const disponibile = pronto && !!partita && !occupato;
 
-  const titolo = !abilitato
-    ? "Scout live"
-    : !partita
-      ? "Scout live non attivo"
-      : occupato
-        ? "Scout occupato"
-        : "Scout live";
-  const sottotitolo = !abilitato
-    ? "Riservato ad allenatori e referenti"
-    : !partita
-      ? "Si attiva il giorno della partita"
-      : occupato
-        ? `In uso da ${attiva!.giocatore_nome}`
-        : "Segna punti, ace e muri in tempo reale";
+  const titolo = !partita ? "Scout live non attivo" : occupato ? "Scout occupato" : "Scout live";
+  const sottotitolo = !partita
+    ? "Si attiva il giorno della partita"
+    : occupato
+      ? `In uso da ${attiva!.giocatore_nome}`
+      : "Segna punti, ace e muri in tempo reale";
 
   const contenuto = (
     <>
diff --git a/src/routes/partita.$id.tsx b/src/routes/partita.$id.tsx
index 47468b8..9105fc1 100644
--- a/src/routes/partita.$id.tsx
+++ b/src/routes/partita.$id.tsx
@@ -9,6 +9,7 @@ import { useCsi } from "@/lib/csi";
 import { matchDaPartitaCsi, partiteGiocate } from "@/lib/csi-core";
 import { Pagelle } from "@/components/crapp/Pagelle";
 import { SondaggioCacche } from "@/components/crapp/SondaggioCacche";
+import { ScoutEntry } from "@/components/crapp/ScoutEntry";
 import { useScoutMatches, totaliPerGiocatore, totaliSquadra } from "@/lib/scout-store";
 import { csvScoutMatch, scaricaCsv } from "@/lib/scout-export";
 import { useGiocatoreCorrente } from "@/lib/user-store";
@@ -204,6 +205,10 @@ function PartitaDetail() {
         </Section>
       )}
 
+      <Section titolo="Scout live">
+        <ScoutEntry eventoId={evento.id} />
+      </Section>
+
       <Section titolo="Sondaggio pre-partita">
         <SondaggioCacche eventoId={evento.id} dataEvento={evento.data} />
       </Section>
diff --git a/src/routes/scout.tsx b/src/routes/scout.tsx
index f65a3f4..994bb06 100644
--- a/src/routes/scout.tsx
+++ b/src/routes/scout.tsx
@@ -8,7 +8,6 @@ import { formatData } from "@/lib/crapp-data";
 import type { Evento } from "@/lib/eventi";
 import { useRosa } from "@/lib/rosa";
 import { useGiocatoreCorrente } from "@/lib/user-store";
-import { useIsAdmin } from "@/lib/ruoli";
 import { usePresenzeEvento } from "@/lib/presenze";
 import {
   statoIniziale,
@@ -83,7 +82,6 @@ function Blocco({
 function Scout() {
   const { pronto, partita } = usePartitaDiOggi();
   const io = useGiocatoreCorrente();
-  const admin = useIsAdmin();
   const sessione = useSessioneScout(partita?.id ?? null);
   const statoSalvato = useStatoScout(partita?.id ?? null);
   const apri = useApriSessioneScout();
@@ -102,16 +100,6 @@ function Scout() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controllo, partita?.id, io?.id]);
 
-  if (io && !admin) {
-    return (
-      <Blocco
-        icona={<Lock className="h-6 w-6" />}
-        titolo="Scout riservato"
-        testo="Lo scout live è uno strumento tecnico per allenatori e referenti della squadra."
-      />
-    );
-  }
-
   if (!pronto || sessione.isLoading || statoSalvato.isLoading) {
     return (
       <Blocco icona={<Radio className="h-6 w-6" />} titolo="Scout live" testo="Caricamento…" />