From 09745b8fdd1fa3e97d79593ee358b705b4448aa0 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Thu, 11 Jun 2026 21:03:51 +0300
Subject: [PATCH] frontend: tasks dialog assignee toggle -> tabs

The Myself/Other assignee picker looked like two loose buttons; replace it
with the COSS Tabs segmented control, with the department select (now five
departments) living in the "Other" tab panel. State semantics unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/components/tasks/tasks-view.tsx | 64 +++++++++++-------------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/frontend/components/tasks/tasks-view.tsx b/frontend/components/tasks/tasks-view.tsx
index f0c464e..03f3b12 100644
--- a/frontend/components/tasks/tasks-view.tsx
+++ b/frontend/components/tasks/tasks-view.tsx
@@ -24,6 +24,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { ROLE_LABELS } from "@/lib/access";
 import { DEPARTMENTS } from "@/lib/roles";
@@ -178,42 +179,35 @@ function AddTaskDialog({
               <span className="text-muted-foreground text-xs">
                 {t("tasks.dialog.assignee")}
               </span>
-              <div className="flex gap-2">
-                <Button
-                  className="flex-1"
-                  onClick={() => setAssigneeMode("self")}
-                  size="sm"
-                  type="button"
-                  variant={assigneeMode === "self" ? "secondary" : "outline"}
-                >
-                  {t("tasks.dialog.assigneeSelf")}
-                </Button>
-                <Button
-                  className="flex-1"
-                  onClick={() => setAssigneeMode("other")}
-                  size="sm"
-                  type="button"
-                  variant={assigneeMode === "other" ? "secondary" : "outline"}
-                >
-                  {t("tasks.dialog.assigneeOther")}
-                </Button>
-              </div>
+              <Tabs
+                onValueChange={(value) =>
+                  setAssigneeMode(value as AssigneeMode)
+                }
+                value={assigneeMode}
+              >
+                <TabsList className="w-full">
+                  <TabsTab value="self">{t("tasks.dialog.assigneeSelf")}</TabsTab>
+                  <TabsTab value="other">
+                    {t("tasks.dialog.assigneeOther")}
+                  </TabsTab>
+                </TabsList>
+                <TabsPanel value="other">
+                  <Field label={t("tasks.dialog.department")}>
+                    <select
+                      className={controlClass}
+                      onChange={(e) => setDepartment(e.target.value)}
+                      value={department}
+                    >
+                      {DEPARTMENTS.map((d) => (
+                        <option key={d} value={d}>
+                          {ROLE_LABELS[d]}
+                        </option>
+                      ))}
+                    </select>
+                  </Field>
+                </TabsPanel>
+              </Tabs>
             </div>
-            {assigneeMode === "other" && (
-              <Field label={t("tasks.dialog.department")}>
-                <select
-                  className={controlClass}
-                  onChange={(e) => setDepartment(e.target.value)}
-                  value={department}
-                >
-                  {DEPARTMENTS.map((d) => (
-                    <option key={d} value={d}>
-                      {ROLE_LABELS[d]}
-                    </option>
-                  ))}
-                </select>
-              </Field>
-            )}
             <div className="grid grid-cols-2 gap-3">
               <Field label={t("tasks.dialog.due")}>
                 <Input