FE people management

libertas-frontend/src/components/media/face-overlay.tsx

@@ -0,0 +1,56 @@
+import type { FaceRegion } from "@/domain/types";
+import { cn } from "@/lib/utils";
+
+type FaceOverlayProps = {
+    faces: FaceRegion[];
+    hoveredFaceId: string | null;
+    imageWidth: number;
+    imageHeight: number;
+    className?: string;
+    onFaceClick?: (face: FaceRegion) => void;
+};
+
+export function FaceOverlay({
+    faces,
+    hoveredFaceId,
+    imageWidth,
+    imageHeight,
+    className,
+    onFaceClick,
+}: FaceOverlayProps) {
+    if (!imageWidth || !imageHeight) return null;
+
+    return (
+        <div className={cn("absolute inset-0 pointer-events-none", className)}>
+            {faces.map((face) => {
+                const isHovered = face.id === hoveredFaceId;
+
+                // Calculate percentages
+                const left = (face.x_min / imageWidth) * 100;
+                const top = (face.y_min / imageHeight) * 100;
+                const width = ((face.x_max - face.x_min) / imageWidth) * 100;
+                const height = ((face.y_max - face.y_min) / imageHeight) * 100;
+
+                return (
+                    <div
+                        key={face.id}
+                        className={cn(
+                            "absolute border-2 transition-colors duration-200 pointer-events-auto cursor-pointer",
+                            isHovered
+                                ? "border-yellow-400 bg-yellow-400/20 z-10"
+                                : "border-white/50 hover:border-white/80"
+                        )}
+                        style={{
+                            left: `${left}%`,
+                            top: `${top}%`,
+                            width: `${width}%`,
+                            height: `${height}%`,
+                        }}
+                        onClick={() => onFaceClick?.(face)}
+                        title={face.person_id ? "Assigned Person" : "Unknown Person"}
+                    />
+                );
+            })}
+        </div>
+    );
+}

libertas-frontend/src/components/media/media-details-sidebar.tsx

@@ -1,6 +1,5 @@
-import type { Media, MediaMetadata } from "@/domain/types";
+import type { FaceRegion, Media, MediaMetadata } from "@/domain/types";
 import { useGetMediaDetails } from "@/features/media/use-media";
-import { useListMediaFaces } from "@/features/faces/use-faces";
 import { useListMediaTags } from "@/features/tags/use-tags";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -17,6 +16,10 @@ import { Separator } from "../ui/separator";
 
 type MediaDetailsSidebarProps = {
   media: Media;
+  faces: FaceRegion[] | undefined;
+  isLoadingFaces: boolean;
+  onHoverFace: (faceId: string | null) => void;
+  onFaceClick: (face: FaceRegion) => void;
 };
 
 function findMeta(
@@ -28,14 +31,17 @@ function findMeta(
 
 const manualTags = new Set(["DateTimeOriginal", "Make", "Model"]);
 
-export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
+export function MediaDetailsSidebar({
+  media,
+  faces,
+  isLoadingFaces,
+  onHoverFace,
+  onFaceClick
+}: MediaDetailsSidebarProps) {
   const { data: details, isLoading: isLoadingDetails } = useGetMediaDetails(
     media.id
   );
   const { data: tags, isLoading: isLoadingTags } = useListMediaTags(media.id);
-  const { data: faces, isLoading: isLoadingFaces } = useListMediaFaces(
-    media.id
-  );
 
   const displayDate = media.date_taken
     ? format(parseISO(media.date_taken), "MMMM d, yyyy 'at' h:mm a")
@@ -53,8 +59,6 @@ export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
     )
     .sort((a, b) => a.tag_name.localeCompare(b.tag_name));
 
-  console.log("Other Metadata:", details);
-
   return (
     <ScrollArea className="h-full w-full">
       <div className="p-4 space-y-6">
@@ -70,7 +74,7 @@ export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
           defaultValue={["details", "tags", "people"]}
           className="w-full"
         >
-          {/* --- People Section (Unchanged) --- */}
+          {/* --- People Section --- */}
           <AccordionItem value="people">
             <AccordionTrigger>People</AccordionTrigger>
             <AccordionContent>
@@ -78,7 +82,13 @@ export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
               {faces && faces.length > 0 && (
                 <div className="flex flex-wrap gap-2">
                   {faces.map((face) => (
-                    <PersonFaceBadge key={face.id} personId={face.person_id} />
+                    <PersonFaceBadge
+                      key={face.id}
+                      face={face}
+                      onMouseEnter={() => onHoverFace(face.id)}
+                      onMouseLeave={() => onHoverFace(null)}
+                      onClick={() => onFaceClick(face)}
+                    />
                   ))}
                 </div>
               )}

libertas-frontend/src/components/media/media-viewer.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { type Media } from "@/domain/types";
+import { type Media, type FaceRegion } from "@/domain/types";
 import { AuthenticatedImage } from "./authenticated-image";
 import { Skeleton } from "../ui/skeleton";
 import {
@@ -8,6 +8,10 @@ import {
   ResizableHandle,
 } from "@/components/ui/resizable";
 import { MediaDetailsSidebar } from "./media-details-sidebar";
+import { useListMediaFaces } from "@/features/faces/use-faces";
+import { useState, useRef } from "react";
+import { FaceOverlay } from "./face-overlay";
+import { PersonAssignmentDialog } from "@/components/people/person-assignment-dialog";
 
 type MediaViewerProps = {
   media: Media | null;
@@ -16,21 +20,51 @@ type MediaViewerProps = {
 
 export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
   const isOpen = media !== null;
+  const { data: faces, isLoading: isLoadingFaces } = useListMediaFaces(media?.id ?? "");
+  const [hoveredFaceId, setHoveredFaceId] = useState<string | null>(null);
+  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Assignment dialog state
+  const [assignmentDialogOpen, setAssignmentDialogOpen] = useState(false);
+  const [selectedFace, setSelectedFace] = useState<FaceRegion | null>(null);
+
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+  };
+
+  const handleFaceClick = (face: FaceRegion) => {
+    setSelectedFace(face);
+    setAssignmentDialogOpen(true);
+  };
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent className="min-w-[90vw] max-w-full h-[90vh] p-0 border-0">
-        {/* We use a resizable panel group to show the image and sidebar */}
         <ResizablePanelGroup direction="horizontal" className="h-full">
           {/* --- Panel 1: The Image --- */}
           <ResizablePanel defaultSize={75} className="bg-gray-100">
             <div className="flex h-full items-center justify-center overflow-hidden relative p-4">
               {media ? (
-                <AuthenticatedImage
-                  src={media.file_url}
-                  alt={media.original_filename}
-                  className="max-w-full max-h-full object-contain"
-                />
+                <div className="relative inline-block max-w-full max-h-full">
+                  <AuthenticatedImage
+                    src={media.file_url}
+                    alt={media.original_filename}
+                    className="max-w-full max-h-full object-contain"
+                    onLoad={handleImageLoad}
+                    ref={imageRef}
+                  />
+                  {faces && imageDimensions && (
+                    <FaceOverlay
+                      faces={faces}
+                      hoveredFaceId={hoveredFaceId}
+                      imageWidth={imageDimensions.width}
+                      imageHeight={imageDimensions.height}
+                      onFaceClick={handleFaceClick}
+                    />
+                  )}
+                </div>
               ) : (
                 <Skeleton className="w-full h-full" />
               )}
@@ -43,12 +77,31 @@ export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
           {/* --- Panel 2: The Details Sidebar --- */}
           <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
             {media ? (
-              <MediaDetailsSidebar media={media} />
+              <MediaDetailsSidebar
+                media={media}
+                faces={faces}
+                isLoadingFaces={isLoadingFaces}
+                onHoverFace={setHoveredFaceId}
+                onFaceClick={handleFaceClick}
+              />
             ) : (
               <Skeleton className="w-full h-full" />
             )}
           </ResizablePanel>
         </ResizablePanelGroup>
+
+        {selectedFace && media && (
+          <PersonAssignmentDialog
+            isOpen={assignmentDialogOpen}
+            onOpenChange={(open) => {
+              setAssignmentDialogOpen(open);
+              if (!open) setSelectedFace(null);
+            }}
+            faceId={selectedFace.id}
+            mediaId={media.id}
+            currentPersonId={selectedFace.person_id}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );