FE people management

libertas-frontend/src/components/people/person-assignment-dialog.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useListPeople, useCreatePerson } from "@/features/people/use-people";
+import { useAssignFace } from "@/features/faces/use-faces";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { UserSquare, Plus } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+type PersonAssignmentDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    faceId: string;
+    mediaId: string;
+    currentPersonId: string | null;
+};
+
+export function PersonAssignmentDialog({
+    isOpen,
+    onOpenChange,
+    faceId,
+    mediaId,
+    currentPersonId,
+}: PersonAssignmentDialogProps) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [isCreating, setIsCreating] = useState(false);
+    const [newPersonName, setNewPersonName] = useState("");
+
+    const { data: people } = useListPeople();
+    const assignFace = useAssignFace(faceId, mediaId);
+    const createPerson = useCreatePerson();
+
+    const filteredPeople = people?.filter((person) =>
+        person.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const handleAssign = (personId: string) => {
+        assignFace.mutate(
+            { person_id: personId },
+            {
+                onSuccess: () => {
+                    onOpenChange(false);
+                },
+            }
+        );
+    };
+
+    const handleCreateAndAssign = () => {
+        if (!newPersonName.trim()) return;
+
+        createPerson.mutate(
+            { name: newPersonName },
+            {
+                onSuccess: (newPerson) => {
+                    handleAssign(newPerson.id);
+                },
+            }
+        );
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Assign Person</DialogTitle>
+                </DialogHeader>
+
+                {isCreating ? (
+                    <div className="space-y-4 py-4">
+                        <Input
+                            placeholder="Enter person name"
+                            value={newPersonName}
+                            onChange={(e) => setNewPersonName(e.target.value)}
+                            autoFocus
+                        />
+                        <div className="flex justify-end gap-2">
+                            <Button variant="outline" onClick={() => setIsCreating(false)}>
+                                Cancel
+                            </Button>
+                            <Button onClick={handleCreateAndAssign} disabled={!newPersonName.trim()}>
+                                Create & Assign
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="space-y-4">
+                        <Input
+                            placeholder="Search people..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+
+                        <ScrollArea className="h-[300px] pr-4">
+                            <div className="space-y-2">
+                                <Button
+                                    variant="ghost"
+                                    className="w-full justify-start gap-2"
+                                    onClick={() => setIsCreating(true)}
+                                >
+                                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                                        <Plus size={16} />
+                                    </div>
+                                    <span>Create "{searchQuery || "New Person"}"</span>
+                                </Button>
+
+                                {filteredPeople?.map((person) => (
+                                    <Button
+                                        key={person.id}
+                                        variant={currentPersonId === person.id ? "secondary" : "ghost"}
+                                        className="w-full justify-start gap-2"
+                                        onClick={() => handleAssign(person.id)}
+                                    >
+                                        <Avatar className="h-8 w-8">
+                                            {/* TODO: Add thumbnail URL if available */}
+                                            <AvatarFallback>
+                                                <UserSquare size={16} />
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        <span>{person.name}</span>
+                                    </Button>
+                                ))}
+                            </div>
+                        </ScrollArea>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

libertas-frontend/src/components/people/person-face-badge.tsx

@@ -2,26 +2,52 @@ import { useGetPerson } from "@/features/people/use-people";
 import { Link } from "@tanstack/react-router";
 import { Badge } from "@/components/ui/badge";
 import { UserSquare } from "lucide-react";
+import type { FaceRegion } from "@/domain/types";
+import { cn } from "@/lib/utils";
 
 type PersonFaceBadgeProps = {
-  personId: string | null;
+  face: FaceRegion;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onClick?: () => void;
 };
 
-export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
-  const { data: person } = useGetPerson(personId ?? "");
+export function PersonFaceBadge({
+  face,
+  onMouseEnter,
+  onMouseLeave,
+  onClick
+}: PersonFaceBadgeProps) {
+  const { data: person } = useGetPerson(face.person_id ?? "");
 
   const content = (
     <Badge
       variant="secondary"
-      className="inline-flex items-center gap-2 text-sm"
+      className={cn(
+        "inline-flex items-center gap-2 text-sm cursor-pointer transition-colors",
+        !face.person_id && "hover:bg-yellow-100"
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={(e) => {
+        // Prevent navigation if we're just assigning
+        if (!face.person_id) {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
     >
       <UserSquare size={16} />
-      {person ? person.name : personId ? "Loading..." : "Unknown"}
+      {person ? person.name : face.person_id ? "Loading..." : "Unknown"}
     </Badge>
   );
 
-  if (!personId || !person) {
-    return content;
+  if (!face.person_id || !person) {
+    return (
+      <div onClick={onClick}>
+        {content}
+      </div>
+    );
   }
 
   return (
@@ -29,6 +55,8 @@ export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
       to="/people/$personId"
       params={{ personId: person.id }}
       className="hover:opacity-80"
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       {content}
     </Link>