style: reduce padding, adopt crisp square tabs/cards, keep round buttons and single accent

frontend/src/features/triage/TasksView.tsx

@@ -92,27 +92,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
   const doneTasks = tasks.filter((t) => t.isCompleted);
 
   return (
-    <div className="max-w-3xl mx-auto space-y-4">
-      {/* Filter Pills */}
-      <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
-        <div className="flex items-center gap-1.5">
+    <div className="w-full space-y-2">
+      {/* Filter Tabs */}
+      <div className="flex flex-wrap items-center justify-between gap-2 mb-1">
+        <div className="flex items-center border border-white/[0.08] bg-[#16171a]">
           <button
             onClick={() => setFilter('open')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
+            className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
               filter === 'open'
-                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
+                ? 'bg-[#222428] text-white'
+                : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
-            Alle Offenen ({openTasks.length})
+            Offen ({openTasks.length})
           </button>
 
           <button
             onClick={() => setFilter('done')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
+            className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
               filter === 'done'
-                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
+                ? 'bg-[#222428] text-white'
+                : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
             Erledigt ({doneTasks.length})
@@ -120,20 +120,20 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
           <button
             onClick={() => setFilter('discarded')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
+            className={`h-8 px-3.5 text-xs font-medium transition-colors ${
               filter === 'discarded'
-                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
+                ? 'bg-[#222428] text-white'
+                : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
-            Verworfen ({discarded.length})
+            Papierkorb ({discarded.length})
           </button>
         </div>
 
         {filter === 'discarded' && discarded.length > 0 && (
           <button
             onClick={handlePurgeAllDiscarded}
-            className="h-8 px-3.5 rounded-full bg-[#ef4444]/15 hover:bg-[#ef4444]/25 text-[#ef4444] text-xs font-medium flex items-center gap-1.5 transition-colors"
+            className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white text-xs font-medium flex items-center gap-1.5 transition-colors"
           >
             <Trash2 className="w-3.5 h-3.5" />
             Papierkorb leeren
@@ -142,37 +142,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
       </div>
 
       {loading ? (
-        <div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
+        <div className="p-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
       ) : filter === 'discarded' ? (
-        <div className="space-y-2.5">
+        <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
           {discarded.length === 0 ? (
-            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
+            <div className="px-4 py-6 text-center text-zinc-400 text-sm">
               Keine verworfenen Gedanken im Papierkorb.
             </div>
           ) : (
             discarded.map((item) => (
               <div
                 key={item.id}
-                className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
+                className="px-3 py-2 flex items-center justify-between gap-3 hover:bg-white/[0.02]"
               >
-                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <div className="w-9 h-9 rounded-xl bg-zinc-700 text-zinc-300 flex items-center justify-center flex-shrink-0">
-                    <Trash2 className="w-4 h-4" />
-                  </div>
+                <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                  <Trash2 className="w-4 h-4 text-zinc-500 flex-shrink-0" />
                   <p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
                   <button
                     onClick={() => handleRestore(item)}
-                    className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
+                    className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
                   >
-                    <RotateCcw className="w-3.5 h-3.5" /> Zurück
+                    <RotateCcw className="w-3 h-3" /> Zurück
                   </button>
                   <button
                     onClick={() => handleDeletePermanent(item.id)}
-                    className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
+                    className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
                   >
-                    <Trash2 className="w-3.5 h-3.5" />
+                    <Trash2 className="w-3 h-3" />
                   </button>
                 </div>
               </div>
@@ -180,121 +178,98 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
           )}
         </div>
       ) : (
-        <div className="space-y-2.5">
+        <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
           {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
-            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
+            <div className="px-4 py-6 text-center text-zinc-400 text-sm">
               {filter === 'open'
                 ? 'Keine offenen Aufgaben vorhanden.'
                 : 'Noch keine erledigten Aufgaben.'}
             </div>
           ) : (
-            (filter === 'open' ? openTasks : doneTasks).map((task, idx) => {
-              // Alternate squircle colors matching template: blue, green, purple, orange, violet
-              const squircleColors = [
-                'bg-[#1d8cf8]', // electric blue
-                'bg-[#22c55e]', // vibrant green
-                'bg-[#a855f7]', // purple
-                'bg-[#f97316]', // orange
-                'bg-[#8b5cf6]', // violet
-              ];
-              const squircleBg = task.priority === 'urgent'
-                ? 'bg-[#ef4444]'
-                : task.isCompleted
-                ? 'bg-[#a855f7]'
-                : squircleColors[idx % squircleColors.length];
+            (filter === 'open' ? openTasks : doneTasks).map((task) => (
+              <div
+                key={task.id}
+                className={`px-3 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-2 transition-colors hover:bg-white/[0.02] ${
+                  task.isCompleted ? 'opacity-65' : ''
+                }`}
+              >
+                <div className="flex items-center gap-3 min-w-0 flex-1">
+                  {/* Square minimalist checkbox */}
+                  <button
+                    onClick={() => handleToggleDone(task)}
+                    className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
+                      task.isCompleted
+                        ? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
+                        : 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
+                    }`}
+                    title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
+                  >
+                    <Check className="w-3 h-3 stroke-[3]" />
+                  </button>
 
-              // In template: active/top items have a thin bright green outline
-              const isHighlightGreen = !task.isCompleted && idx < 3;
-
-              return (
-                <div
-                  key={task.id}
-                  className={`p-3.5 sm:p-4 rounded-2xl bg-[#222428] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors ${
-                    isHighlightGreen
-                      ? 'border border-[#22c55e]/80 shadow-[0_0_12px_-4px_rgba(34,197,94,0.3)]'
-                      : 'border border-white/[0.06]'
-                  } ${task.isCompleted ? 'opacity-75' : ''}`}
-                >
-                  <div className="flex items-center gap-3.5 min-w-0 flex-1">
-                    {/* Template Squircle Icon */}
-                    <button
-                      onClick={() => handleToggleDone(task)}
-                      className={`w-10 h-10 rounded-xl ${squircleBg} text-white flex items-center justify-center flex-shrink-0 shadow-sm transition-transform active:scale-95`}
-                      title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`text-sm break-words leading-tight ${
+                        task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
+                      }`}
                     >
-                      {task.isCompleted ? (
-                        <Check className="w-5 h-5 stroke-[2.5]" />
-                      ) : task.priority === 'urgent' ? (
-                        <AlertCircle className="w-5 h-5" />
-                      ) : (
-                        <CheckCircle2 className="w-5 h-5" />
+                      {task.content}
+                    </p>
+
+                    <div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
+                      {task.priority === 'urgent' && (
+                        <span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
+                          Dringend
+                        </span>
                       )}
-                    </button>
-
-                    <div className="min-w-0 flex-1">
-                      <p
-                        className={`text-sm sm:text-base font-medium break-words leading-snug ${
-                          task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
-                        }`}
-                      >
-                        {task.content}
-                      </p>
-
-                      <div className="flex flex-wrap items-center gap-2 mt-1">
-                        {task.priority === 'urgent' && (
-                          <span className="px-2 py-0.5 rounded-full bg-[#ef4444]/20 text-[#ef4444] text-[11px] font-semibold">
-                            Dringend
-                          </span>
-                        )}
-                        {task.priority === 'high' && (
-                          <span className="px-2 py-0.5 rounded-full bg-[#f97316]/20 text-[#f97316] text-[11px] font-semibold">
-                            Wichtig
-                          </span>
-                        )}
-                        {task.tags?.map((tag) => (
-                          <span
-                            key={tag}
-                            className="px-2 py-0.5 rounded-full bg-[#16171a] text-zinc-400 text-[11px] flex items-center gap-1"
-                          >
-                            #{tag}
-                          </span>
-                        ))}
-                      </div>
+                      {task.priority === 'high' && (
+                        <span className="px-1.5 py-0.2 border border-white/20 text-zinc-300 text-[10px] font-medium">
+                          Wichtig
+                        </span>
+                      )}
+                      {task.tags?.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
+                        >
+                          #{tag}
+                        </span>
+                      ))}
                     </div>
                   </div>
-
-                  {/* Action Controls */}
-                  <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
-                    <div className="relative flex items-center">
-                      <Calendar className="w-3.5 h-3.5 text-zinc-400 absolute left-3 pointer-events-none" />
-                      <input
-                        type="date"
-                        value={task.dueDate || ''}
-                        onChange={(e) => handleDueDateChange(task, e.target.value)}
-                        className="pl-8 pr-3 py-1 rounded-full bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
-                      />
-                    </div>
-
-                    <button
-                      onClick={() => handleConvertToDoc(task)}
-                      title="Als Notiz / Projekt vertiefen"
-                      className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
-                    >
-                      <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
-                      <span className="hidden md:inline">Vertiefen</span>
-                    </button>
-
-                    <button
-                      onClick={() => handleDeletePermanent(task.id)}
-                      title="Löschen"
-                      className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
                 </div>
-              );
-            })
+
+                {/* Action Controls */}
+                <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
+                  <div className="relative flex items-center">
+                    <Calendar className="w-3 h-3 text-zinc-400 absolute left-2 pointer-events-none" />
+                    <input
+                      type="date"
+                      value={task.dueDate || ''}
+                      onChange={(e) => handleDueDateChange(task, e.target.value)}
+                      className="h-7 pl-6 pr-2 bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                    />
+                  </div>
+
+                  <button
+                    onClick={() => handleConvertToDoc(task)}
+                    title="Als Notiz / Projekt vertiefen"
+                    className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                  >
+                    <FileText className="w-3 h-3 text-[#1d8cf8]" />
+                    <span className="hidden md:inline">Vertiefen</span>
+                  </button>
+
+                  <button
+                    onClick={() => handleDeletePermanent(task.id)}
+                    title="Löschen"
+                    className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              </div>
+            ))
           )}
         </div>
       )}