From 4aea17124e2695b4c2e50984ee57853457614333 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Wed, 4 Mar 2026 08:32:19 +0100
Subject: [PATCH] feat(ui): allow per-disclosure emoji icons

---
 src/app/design-system/page.tsx               |  2 +-
 src/components/ui/Disclosure.tsx             | 42 +++++++++++++-------
 src/components/weather/WeatherInfoPanel.tsx  |  2 +-
 src/components/weather/WeatherTrendChart.tsx |  1 +
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 54a0950..05ca612 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -325,7 +325,7 @@ export default function DesignSystemPage() {
         <Card id="disclosure-dropdown" className="p-6">
           <h2 className="mb-4 text-xl font-semibold text-foreground">Disclosure & Dropdown</h2>
           <div className="space-y-4">
-            <Disclosure title="Panneau pliable" subtitle="Composant Disclosure">
+            <Disclosure icon="ℹ️" title="Panneau pliable" subtitle="Composant Disclosure">
               <p className="text-sm text-muted">Contenu du panneau.</p>
             </Disclosure>
             <DropdownMenu
diff --git a/src/components/ui/Disclosure.tsx b/src/components/ui/Disclosure.tsx
index f43a965..2dd2ea5 100644
--- a/src/components/ui/Disclosure.tsx
+++ b/src/components/ui/Disclosure.tsx
@@ -3,6 +3,7 @@
 import { ReactNode, useId, useState } from 'react';
 
 interface DisclosureProps {
+  icon?: ReactNode;
   title: ReactNode;
   subtitle?: ReactNode;
   defaultOpen?: boolean;
@@ -11,6 +12,7 @@ interface DisclosureProps {
 }
 
 export function Disclosure({
+  icon,
   title,
   subtitle,
   defaultOpen = false,
@@ -21,29 +23,41 @@ export function Disclosure({
   const contentId = useId();
 
   return (
-    <div className={`rounded-lg border border-border bg-card-hover ${className}`}>
+    <div className={`overflow-hidden rounded-xl border border-border bg-card ${className}`}>
       <button
         type="button"
         onClick={() => setIsOpen((prev) => !prev)}
         aria-expanded={isOpen}
         aria-controls={contentId}
-        className="flex w-full items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-card"
+        className={`
+          flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors
+          ${isOpen ? 'bg-card-hover/60' : 'hover:bg-card-hover/60'}
+        `}
       >
-        <div className="min-w-0">
-          <div className="text-sm font-semibold text-foreground">{title}</div>
-          {subtitle && <div className="text-xs text-muted">{subtitle}</div>}
+        <div className="min-w-0 flex flex-1 items-start gap-2">
+          {icon && (
+            <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center self-center text-base leading-none">
+              {icon}
+            </span>
+          )}
+          <div className="min-w-0">
+            <div className="text-sm font-medium text-foreground">{title}</div>
+            {subtitle && <div className="mt-0.5 text-xs text-muted">{subtitle}</div>}
+          </div>
         </div>
-        <svg
-          className={`h-4 w-4 shrink-0 text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
+        <span className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-card-hover text-muted">
+          <svg
+            className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </span>
       </button>
       {isOpen && (
-        <div id={contentId} className="border-t border-border px-4 py-3">
+        <div id={contentId} className="border-t border-border bg-card px-4 py-3">
           {children}
         </div>
       )}
diff --git a/src/components/weather/WeatherInfoPanel.tsx b/src/components/weather/WeatherInfoPanel.tsx
index 91874a4..e0159fa 100644
--- a/src/components/weather/WeatherInfoPanel.tsx
+++ b/src/components/weather/WeatherInfoPanel.tsx
@@ -4,7 +4,7 @@ import { Disclosure } from '@/components/ui';
 
 export function WeatherInfoPanel() {
   return (
-    <Disclosure title="Les 4 axes de la météo personnelle" className="mb-6">
+    <Disclosure icon="ℹ️" title="Les 4 axes de la météo personnelle" className="mb-6">
       <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-4">
         <div>
           <p className="mb-0.5 text-xs font-medium text-foreground">☀️ Performance</p>
diff --git a/src/components/weather/WeatherTrendChart.tsx b/src/components/weather/WeatherTrendChart.tsx
index 9cde6b4..d030223 100644
--- a/src/components/weather/WeatherTrendChart.tsx
+++ b/src/components/weather/WeatherTrendChart.tsx
@@ -72,6 +72,7 @@ export function WeatherTrendChart({ data, currentSessionId }: WeatherTrendChartP
 
   return (
     <Disclosure
+      icon="📈"
       className="mb-6"
       title={
         <>