timers should not be used on issues with multiple assignees

packages/frontend/package.json

@@ -20,6 +20,7 @@
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@sprint/shared": "workspace:*",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-query": "^5.90.19",

packages/frontend/src/components/issue-detail-pane.tsx

@@ -69,6 +69,10 @@ export function IssueDetailPane() {
     const [isSavingDescription, setIsSavingDescription] = useState(false);
     const descriptionRef = useRef<HTMLTextAreaElement>(null);
 
+    const isAssignee = assigneeIds.some((id) => user?.id === Number(id));
+    const actualAssigneeIds = assigneeIds.filter((id) => id !== "unassigned");
+    const hasMultipleAssignees = actualAssigneeIds.length > 1;
+
     useEffect(() => {
         if (!issueData) return;
         setSprintId(issueData.Issue.sprintId?.toString() ?? "unassigned");
@@ -421,12 +425,20 @@ export function IssueDetailPane() {
                     <SmallUserDisplay user={issueData.Creator} className={"text-sm"} />
                 </div>
 
-                <div className="flex items-center gap-2">
-                    {assigneeIds.some((id) => user?.id === Number(id)) && (
-                        <TimerModal issueId={issueData.Issue.id} />
-                    )}
-                    <TimerDisplay issueId={issueData.Issue.id} />
-                </div>
+                {isAssignee && (
+                    <div className={cn("flex flex-col gap-2", hasMultipleAssignees && "cursor-not-allowed")}>
+                        <div className="flex items-center gap-2">
+                            <TimerModal issueId={issueData.Issue.id} disabled={hasMultipleAssignees} />
+                            <TimerDisplay issueId={issueData.Issue.id} />
+                        </div>
+                        {hasMultipleAssignees && (
+                            <span className="text-xs text-destructive/85 font-600">
+                                Timers cannot be used on issues with multiple assignees
+                            </span>
+                        )}
+                    </div>
+                )}
+
                 <ConfirmDialog
                     open={deleteOpen}
                     onOpenChange={setDeleteOpen}

packages/frontend/src/components/timer-modal.tsx

@@ -4,13 +4,17 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import Icon from "@/components/ui/icon";
 
-export function TimerModal({ issueId }: { issueId: number }) {
+export function TimerModal({ issueId, disabled }: { issueId: number; disabled?: boolean }) {
     const [open, setOpen] = useState(false);
 
     return (
         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
+            <DialogTrigger asChild disabled={disabled}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={disabled}
+                >
                     <Icon icon="timer" className="size-4" />
                     Timer
                 </Button>