feat(ui): allow per-disclosure emoji icons

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>
       )}