style: overhaul design to authentic Google Gemini Material 3 Dark theme

frontend/src/features/triage/TriageDeck.tsx

@@ -49,13 +49,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const nextCard = cards[1];
 
   const x = useMotionValue(0);
-  const rotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
-  const keepOpacity = useTransform(x, [25, 130], [0, 1]);
-  const discardOpacity = useTransform(x, [-130, -25], [1, 0]);
+  const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]);
+  const keepOpacity = useTransform(x, [25, 120], [0, 1]);
+  const discardOpacity = useTransform(x, [-120, -25], [1, 0]);
   const cardBorderColor = useTransform(
     x,
     [-140, 0, 140],
-    ['rgba(242, 139, 130, 0.65)', 'rgba(255, 255, 255, 0.08)', 'rgba(129, 201, 149, 0.65)']
+    ['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
   );
 
   const handleAction = async (
@@ -69,7 +69,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     if (!activeCard) return;
 
     const current = activeCard;
-    triggerHaptic(action === 'keep' ? [12, 25] : 18);
+    triggerHaptic(action === 'keep' ? [10, 20] : 15);
 
     // Optimistic removal from deck
     setCards((prev) => prev.slice(1));
@@ -134,25 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     switch (priority) {
       case 'urgent':
         return (
-          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40">
-            🚨 Dringend
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
+            Dringend
           </span>
         );
       case 'high':
         return (
-          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40">
-            ⚡ Priorität Hoch
-          </span>
-        );
-      case 'low':
-        return (
-          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
-            Später / Niedrig
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#fdd663]/15 text-[#fdd663] border border-[#fdd663]/30">
+            Hoch
           </span>
         );
       default:
         return (
-          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
             Gedanke
           </span>
         );
@@ -162,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const sourceBadge = (source: string) => {
     if (source === 'voice') {
       return (
-        <span className="px-3 py-1 rounded-full text-xs bg-[#c58af9]/15 text-[#c58af9] flex items-center gap-1">
-          <Mic className="w-3 h-3" /> Sprachnotiz
+        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8c7fa] border border-white/[0.06] flex items-center gap-1">
+          <Mic className="w-3 h-3" /> Diktat
         </span>
       );
     }
     if (source === 'webhook') {
       return (
-        <span className="px-3 py-1 rounded-full text-xs bg-[#81c995]/15 text-[#81c995] flex items-center gap-1">
-          <Webhook className="w-3 h-3" /> Smarthome Webhook
+        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1">
+          <Webhook className="w-3 h-3" /> Webhook
         </span>
       );
     }
@@ -179,30 +173,30 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
   if (!activeCard) {
     return (
-      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center shadow-card-depth">
-        <div className="w-16 h-16 rounded-full bg-[#81c995]/15 border border-[#81c995]/30 flex items-center justify-center mx-auto mb-5">
-          <Sparkles className="w-8 h-8 text-[#81c995]" />
+      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] border border-[#3c4043] text-center shadow-card">
+        <div className="w-12 h-12 rounded-full bg-[#a8dab5]/15 flex items-center justify-center mx-auto mb-4">
+          <Sparkles className="w-6 h-6 text-[#a8dab5]" />
         </div>
-        <h2 className="text-2xl font-bold text-[#e3e3e3] mb-2">Inbox Zero erreicht!</h2>
-        <p className="text-[#9aa0a6] text-sm sm:text-base max-w-md mx-auto mb-6">
-          Dein Kopf ist komplett frei. Alle eingefrorenen Gedanken wurden gesichtet, verworfen oder in echte Projekte und Aufgaben verwandelt.
+        <h2 className="text-xl font-medium text-[#e3e3e3] mb-1.5">Inbox Zero</h2>
+        <p className="text-[#8e918f] text-sm max-w-sm mx-auto mb-6">
+          Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
         </p>
 
-        <div className="flex flex-wrap items-center justify-center gap-3">
+        <div className="flex flex-wrap items-center justify-center gap-2.5">
           <button
             onClick={onFocusCapture}
-            className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
+            className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
           >
-            + Neuen Gedanken einfrieren
+            + Neuer Gedanke
           </button>
 
           {lastTriaged && (
             <button
               onClick={handleUndo}
-              className="h-11 px-5 rounded-full bg-[#282a2c] text-[#e3e3e3] hover:bg-[#333639] text-sm flex items-center gap-2 transition-colors"
+              className="h-9 px-4 rounded-full bg-[#282a2c] text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#333537] border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
             >
-              <RotateCcw className="w-4 h-4 text-[#8ab4f8]" />
-              Letzten Swipe rückgängig machen
+              <RotateCcw className="w-3.5 h-3.5" />
+              Rückgängig
             </button>
           )}
         </div>
@@ -213,38 +207,39 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   return (
     <div className="max-w-xl mx-auto select-none">
       {/* Top Deck Status & Undo Bar */}
-      <div className="flex items-center justify-between mb-4 px-2">
+      <div className="flex items-center justify-between mb-3 px-1">
         <div className="flex items-center gap-2">
-          <span className="px-3.5 py-1 rounded-full bg-[#1e1f20] gemini-border text-xs font-medium text-[#8ab4f8]">
-            🃏 Noch {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} im Deck
+          <span className="text-xs text-[#8e918f]">
+            {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
           </span>
-          <span className="hidden sm:flex items-center gap-1 text-xs text-[#5f6368]">
-            <Keyboard className="w-3.5 h-3.5" /> Pfeiltasten ← / → oder H / L
+          <span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
+          <span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
+            <Keyboard className="w-3 h-3" /> H / L oder ← / →
           </span>
         </div>
 
         {lastTriaged && (
           <button
             onClick={handleUndo}
-            className="px-3.5 py-1 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#9aa0a6] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+            className="h-7 px-2.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
           >
-            <RotateCcw className="w-3.5 h-3.5 text-[#8ab4f8]" />
+            <RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
             Rückgängig
           </button>
         )}
       </div>
 
       {/* Card Stack Container */}
-      <div className="relative h-[340px] sm:h-[360px] w-full flex items-center justify-center">
+      <div className="relative h-[320px] sm:h-[340px] w-full flex items-center justify-center">
         {/* Background Preview Card */}
         {nextCard && (
           <div
             key={nextCard.id + '-preview'}
-            className="absolute inset-x-4 top-5 bottom-0 rounded-3xl bg-[#18191b] gemini-border p-6 opacity-50 scale-[0.95] pointer-events-none flex flex-col justify-between"
+            className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#1e1f20]/60 border border-[#3c4043]/40 p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
           >
             <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
-            <p className="text-lg text-[#9aa0a6] line-clamp-3">{nextCard.content}</p>
-            <div className="text-xs text-[#5f6368]">Nächste Karte…</div>
+            <p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
+            <div className="text-xs text-[#8e918f]">Nächste Karte…</div>
           </div>
         )}
 
@@ -255,7 +250,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             style={{ x, rotate, borderColor: cardBorderColor }}
             drag="x"
             dragConstraints={{ left: 0, right: 0 }}
-            dragElastic={0.85}
+            dragElastic={0.8}
             transition={{ type: 'spring', stiffness: 350, damping: 25 }}
             onDragEnd={(_, info) => {
               if (info.offset.x > 110 || info.velocity.x > 550) {
@@ -264,22 +259,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                 handleAction('discard');
               }
             }}
-            initial={{ scale: 0.94, opacity: 0, y: 16 }}
+            initial={{ scale: 0.96, opacity: 0, y: 12 }}
             animate={{ scale: 1, opacity: 1, y: 0 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-8 shadow-card-depth cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+            exit={{ scale: 0.92, opacity: 0 }}
+            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
           >
             {/* Dynamic Swipe Overlays */}
             <motion.div
               style={{ opacity: keepOpacity }}
-              className="pointer-events-none absolute top-6 right-6 px-4 py-1.5 rounded-full bg-[#81c995]/20 border-2 border-[#81c995] text-[#81c995] font-bold text-xs tracking-wider uppercase"
+              className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#a8dab5]/15 border border-[#a8dab5]/50 text-[#a8dab5] font-medium text-xs tracking-wide uppercase"
             >
               Behalten 👉
             </motion.div>
 
             <motion.div
               style={{ opacity: discardOpacity }}
-              className="pointer-events-none absolute top-6 left-6 px-4 py-1.5 rounded-full bg-[#f28b82]/20 border-2 border-[#f28b82] text-[#f28b82] font-bold text-xs tracking-wider uppercase"
+              className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#f28b82]/15 border border-[#f28b82]/50 text-[#f28b82] font-medium text-xs tracking-wide uppercase"
             >
               👈 Weg damit
             </motion.div>
@@ -290,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                 {priorityBadge(activeCard.priority)}
                 {sourceBadge(activeCard.source)}
               </div>
-              <span className="text-xs text-[#5f6368] flex items-center gap-1">
+              <span className="text-xs text-[#8e918f] flex items-center gap-1">
                 <Clock className="w-3.5 h-3.5" />
                 {new Date(activeCard.createdAt).toLocaleString('de-DE', {
                   day: '2-digit',
@@ -301,9 +296,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
               </span>
             </div>
 
-            {/* Card Body: The Thought */}
-            <div className="my-auto py-4">
-              <p className="text-xl sm:text-2xl font-medium text-[#e3e3e3] leading-relaxed break-words">
+            {/* Card Body */}
+            <div className="my-auto py-3">
+              <p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
                 {activeCard.content}
               </p>
             </div>
@@ -315,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   activeCard.tags.map((tag) => (
                     <span
                       key={tag}
-                      className="px-3 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                      className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#a8c7fa] border border-white/[0.06] text-xs flex items-center gap-1"
                     >
-                      <Tag className="w-3 h-3" />#{tag}
+                      <Tag className="w-2.5 h-2.5" />#{tag}
                     </span>
                   ))
                 ) : (
-                  <span className="text-xs text-[#5f6368]">Wische links zum Verwerfen, rechts zum Behalten</span>
+                  <span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
                 )}
               </div>
 
               {activeCard.dueDate && (
-                <span className="px-3 py-0.5 rounded-full bg-[#8ab4f8]/15 text-[#8ab4f8] text-xs">
+                <span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
                   📅 {activeCard.dueDate}
                 </span>
               )}
@@ -337,23 +332,23 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Task Date Picker Popover */}
       {showDateModal && (
-        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2 text-sm text-[#e3e3e3]">
-            <Calendar className="w-4 h-4 text-[#8ab4f8]" />
-            <span>Als To-Do mit Fälligkeitsdatum anlegen:</span>
+        <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-xs text-[#c4c7c5]">
+            <Calendar className="w-4 h-4 text-[#a8c7fa]" />
+            <span>Fälligkeitsdatum für Aufgabe:</span>
           </div>
           <div className="flex items-center gap-2">
             <input
               type="date"
               value={taskDueDate}
               onChange={(e) => setTaskDueDate(e.target.value)}
-              className="bg-[#1e1f20] text-[#e3e3e3] px-3.5 py-1.5 rounded-full gemini-border text-xs focus:outline-none"
+              className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
             />
             <button
               onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
-              className="px-4 py-1.5 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs hover:opacity-90"
+              className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
             >
-              Aufgabe speichern
+              Speichern
             </button>
           </div>
         </div>
@@ -361,11 +356,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Shopping List Item Popover */}
       {showListSelector && (
-        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border">
-          <p className="text-xs text-[#9aa0a6] mb-2.5">
-            In welche geteilte Liste soll dieser Gedanke verschoben werden?
+        <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
+          <p className="text-xs text-[#8e918f] mb-2">
+            In welche Liste verschieben?
           </p>
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-1.5">
             {lists.length > 0 ? (
               lists.map((lst) => (
                 <button
@@ -373,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   onClick={() =>
                     handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
                   }
-                  className="px-4 py-2 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                  className="px-3 py-1.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.06] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
                 >
                   <span>{lst.icon}</span>
                   <span>{lst.title}</span>
                 </button>
               ))
             ) : (
-              <span className="text-xs text-[#5f6368]">Noch keine Listen vorhanden.</span>
+              <span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
             )}
           </div>
         </div>
       )}
 
-      {/* Primary Triage Action Pills */}
-      <div className="mt-6 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
+      {/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
+      <div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
         {/* Swipe Left: Discard */}
         <button
           onClick={() => handleAction('discard')}
           title="Verwerfen (Taste H oder Pfeil links)"
-          className="h-12 px-5 rounded-full bg-[#1e1f20] hover:bg-[#f28b82]/20 border border-[#f28b82]/30 text-[#f28b82] font-medium text-sm flex items-center gap-2 transition-all active:scale-95"
+          className="h-10 px-4 rounded-full border border-[#f28b82]/30 text-[#f28b82] hover:bg-[#f28b82]/10 font-normal text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
         >
           <X className="w-4 h-4" />
           <span>Weg damit</span>
@@ -405,24 +400,24 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal((prev) => !prev);
           }}
           title="Als Aufgabe mit Datum (Taste T)"
-          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
             showDateModal
-              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
-              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+              ? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
+              : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
           }`}
         >
-          <Calendar className="w-4 h-4 text-[#8ab4f8]" />
+          <Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
           <span>Termin-To-Do</span>
         </button>
 
         {/* Convert to Workspace Document */}
         <button
           onClick={() => handleAction('keep', { convertTo: 'document' })}
-          title="In ein Workspace-Dokument verwandeln (Taste D)"
-          className="h-12 px-4 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-all"
+          title="In Workspace-Notiz umwandeln (Taste D)"
+          className="h-10 px-3.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
         >
-          <FileText className="w-4 h-4 text-[#c58af9]" />
-          <span>Als Projekt-Notiz</span>
+          <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
+          <span>Als Notiz</span>
         </button>
 
         {/* Convert to Shared Shopping List Item */}
@@ -431,22 +426,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal(false);
             setShowListSelector((prev) => !prev);
           }}
-          title="Auf eine geteilte Einkaufsliste setzen"
-          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+          title="Auf eine geteilte Liste setzen"
+          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
             showListSelector
-              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
-              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+              ? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
+              : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
           }`}
         >
-          <ShoppingCart className="w-4 h-4 text-[#81c995]" />
+          <ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
           <span>Auf Liste</span>
         </button>
 
         {/* Swipe Right: Keep */}
         <button
           onClick={() => handleAction('keep')}
-          title="Behalten & als Aufgabe sichern (Taste L oder Pfeil rechts)"
-          className="h-12 px-5 rounded-full bg-[#81c995]/20 hover:bg-[#81c995]/30 border border-[#81c995]/40 text-[#81c995] font-semibold text-sm flex items-center gap-2 transition-all active:scale-95"
+          title="Behalten & sichern (Taste L oder Pfeil rechts)"
+          className="h-10 px-4 rounded-full bg-[#a8dab5] hover:bg-[#b8e3c3] text-[#072711] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
         >
           <Check className="w-4 h-4" />
           <span>Behalten</span>