feat: Add media details sidebar and date handling features, including media grouping by date

2025-11-16 03:32:18 +01:00
parent 94b184d3b0
commit 2003a55ff7
16 changed files with 362 additions and 52 deletions
--- a/libertas-frontend/src/components/media/media-details-sidebar.tsx
+++ b/libertas-frontend/src/components/media/media-details-sidebar.tsx
@@ -0,0 +1,165 @@
+import type { 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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { PersonFaceBadge } from "@/components/people/person-face-badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { format, parseISO } from "date-fns";
+import { Separator } from "../ui/separator";
+
+type MediaDetailsSidebarProps = {
+  media: Media;
+};
+
+function findMeta(
+  metadata: MediaMetadata[] | undefined,
+  tagName: string
+): string | null {
+  return metadata?.find((m) => m.tag_name === tagName)?.tag_value ?? null;
+}
+
+const manualTags = new Set(["DateTimeOriginal", "Make", "Model"]);
+
+export function MediaDetailsSidebar({ media }: 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")
+    : format(parseISO(media.created_at), "MMMM d, yyyy 'at' h:mm a");
+
+  const cameraMake = findMeta(details?.metadata, "Make");
+  const cameraModel = findMeta(details?.metadata, "Model");
+
+  const otherMetadata = details?.metadata
+    .filter(
+      (meta) =>
+        !manualTags.has(meta.tag_name) &&
+        meta.tag_value &&
+        meta.tag_value.trim() !== ""
+    )
+    .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">
+        <div>
+          <h2 className="text-xl font-semibold truncate">
+            {media.original_filename}
+          </h2>
+          <p className="text-sm text-muted-foreground">{displayDate}</p>
+        </div>
+
+        <Accordion
+          type="multiple"
+          defaultValue={["details", "tags", "people"]}
+          className="w-full"
+        >
+          {/* --- People Section (Unchanged) --- */}
+          <AccordionItem value="people">
+            <AccordionTrigger>People</AccordionTrigger>
+            <AccordionContent>
+              {isLoadingFaces && <Skeleton className="h-8 w-full" />}
+              {faces && faces.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {faces.map((face) => (
+                    <PersonFaceBadge key={face.id} personId={face.person_id} />
+                  ))}
+                </div>
+              )}
+              {faces && faces.length === 0 && (
+                <p className="text-sm text-muted-foreground">
+                  No people found.
+                </p>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="tags">
+            <AccordionTrigger>Tags</AccordionTrigger>
+            <AccordionContent>
+              {/* TODO: Add input to add tags */}
+              {isLoadingTags && <Skeleton className="h-8 w-full" />}
+              {tags && tags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {tags.map((tag) => (
+                    <Badge key={tag.id} variant="secondary">
+                      {tag.name}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              {tags && tags.length === 0 && (
+                <p className="text-sm text-muted-foreground">No tags yet.</p>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="details">
+            <AccordionTrigger>Details</AccordionTrigger>
+            <AccordionContent className="space-y-2">
+              {isLoadingDetails && <Skeleton className="h-20 w-full" />}
+              {cameraMake && cameraModel && (
+                <DetailRow
+                  label="Camera"
+                  value={`${cameraMake} ${cameraModel}`}
+                />
+              )}
+              <DetailRow label="MIME Type" value={media.mime_type} />
+              <DetailRow label="File Hash" value={media.hash} isMono />
+
+              {otherMetadata && otherMetadata.length > 0 && (
+                <>
+                  <Separator className="my-2" />
+                  {otherMetadata.map((meta, index) => (
+                    <DetailRow
+                      key={`${meta.tag_name}-${index}`}
+                      label={meta.tag_name}
+                      value={meta.tag_value}
+                    />
+                  ))}
+                </>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </ScrollArea>
+  );
+}
+
+function DetailRow({
+  label,
+  value,
+  isMono = false,
+}: {
+  label: string;
+  value: string;
+  isMono?: boolean;
+}) {
+  return (
+    <div className="flex flex-col">
+      <span className="text-sm font-medium">{label}</span>
+      <span
+        className={`text-sm text-muted-foreground wrap-break-words ${isMono ? "font-mono text-xs" : ""}`}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
--- a/libertas-frontend/src/components/media/media-viewer.tsx
+++ b/libertas-frontend/src/components/media/media-viewer.tsx
@@ -1,12 +1,13 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { type Media } from "@/domain/types";
 import { AuthenticatedImage } from "./authenticated-image";
 import { Skeleton } from "../ui/skeleton";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { MediaDetailsSidebar } from "./media-details-sidebar";

 type MediaViewerProps = {
  media: Media | null;
@@ -18,23 +19,36 @@ export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="min-w-[90vw] max-w-full h-[90vh] flex flex-col p-4">
-        <DialogHeader>
-          <DialogTitle className="truncate">
-            {media?.original_filename}
-          </DialogTitle>
-        </DialogHeader>
-        <div className="flex-1 flex items-center justify-center overflow-hidden relative">
-          {media ? (
-            <AuthenticatedImage
-              src={media.file_url}
-              alt={media.original_filename}
-              className="max-w-full max-h-full object-contain"
-            />
-          ) : (
-            <Skeleton className="w-full h-full" />
-          )}
-        </div>
+      <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"
+                />
+              ) : (
+                <Skeleton className="w-full h-full" />
+              )}
+            </div>
+          </ResizablePanel>
+
+          {/* --- The Handle --- */}
+          <ResizableHandle withHandle />
+
+          {/* --- Panel 2: The Details Sidebar --- */}
+          <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
+            {media ? (
+              <MediaDetailsSidebar media={media} />
+            ) : (
+              <Skeleton className="w-full h-full" />
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
      </DialogContent>
    </Dialog>
  );
--- a/libertas-frontend/src/components/people/person-face-badge.tsx
+++ b/libertas-frontend/src/components/people/person-face-badge.tsx
@@ -0,0 +1,36 @@
+import { useGetPerson } from "@/features/people/use-people";
+import { Link } from "@tanstack/react-router";
+import { Badge } from "@/components/ui/badge";
+import { UserSquare } from "lucide-react";
+
+type PersonFaceBadgeProps = {
+  personId: string | null;
+};
+
+export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
+  const { data: person } = useGetPerson(personId ?? "");
+
+  const content = (
+    <Badge
+      variant="secondary"
+      className="inline-flex items-center gap-2 text-sm"
+    >
+      <UserSquare size={16} />
+      {person ? person.name : personId ? "Loading..." : "Unknown"}
+    </Badge>
+  );
+
+  if (!personId || !person) {
+    return content;
+  }
+
+  return (
+    <Link
+      to="/people/$personId"
+      params={{ personId: person.id }}
+      className="hover:opacity-80"
+    >
+      {content}
+    </Link>
+  );
+}
--- a/libertas-frontend/src/domain/types.ts
+++ b/libertas-frontend/src/domain/types.ts
@@ -17,6 +17,8 @@ export type Media = {
  hash: string;
  file_url: string;
  thumbnail_url: string | null;
+  created_at: string;
+  date_taken: string | null;
 };

 export type Album = {
@@ -72,7 +74,14 @@ export type PaginatedResponse<T> = {


 export type MediaDetails = {
-  media: Media;
+  id: string;
+  original_filename: string;
+    mime_type: string;
+    hash: string;
+    file_url: string;
+    thumbnail_url: string | null;
+    created_at: string;
+    date_taken: string | null;
  metadata: MediaMetadata[];
 };

--- a/libertas-frontend/src/lib/date-utils.ts
+++ b/libertas-frontend/src/lib/date-utils.ts
@@ -0,0 +1,36 @@
+import { format, parseISO, isToday, isYesterday } from "date-fns";
+import type { Media } from "@/domain/types";
+
+/**
+ * Groups a flat array of media items into a Map
+ * where keys are human-readable date strings.
+ * Assumes the media array is already sorted chronologically.
+ */
+export const groupMediaByDate = (
+  media: Media[],
+): Map<string, Media[]> => { // <-- Return a Map
+  return media.reduce(
+    (acc, m) => {
+      const dateString = m.date_taken ?? m.created_at;
+      const date = parseISO(dateString);
+
+      let groupTitle: string;
+
+      if (isToday(date)) {
+        groupTitle = "Today";
+      } else if (isYesterday(date)) {
+        groupTitle = "Yesterday";
+      } else {
+        // e.g., "November 2025"
+        groupTitle = format(date, "MMMM yyyy");
+      }
+
+      if (!acc.has(groupTitle)) { 
+        acc.set(groupTitle, []); 
+      }
+      acc.get(groupTitle)!.push(m);
+      return acc;
+    },
+    new Map<string, Media[]>(),
+  );
+};
--- a/libertas-frontend/src/routes/media/index.tsx
+++ b/libertas-frontend/src/routes/media/index.tsx
@@ -3,8 +3,10 @@ import { createFileRoute } from "@tanstack/react-router";
 import { Button } from "@/components/ui/button";
 import { AuthenticatedImage } from "@/components/media/authenticated-image";
 import type { Media } from "@/domain/types";
-import { useState } from "react";
+import { useMemo, useState } from "react"; // Import useMemo
 import { MediaViewer } from "@/components/media/media-viewer";
+import { groupMediaByDate } from "@/lib/date-utils"; // Import our new helper
+import { parseISO } from "date-fns";

 export const Route = createFileRoute("/media/")({
  component: MediaPage,
@@ -22,6 +24,26 @@ function MediaPage() {

  const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);

+  const allMedia = useMemo(
+    () =>
+      data?.pages
+        .flatMap((page) => page.data)
+        .sort((a, b) => {
+          // Sort by date (newest first)
+          const dateA = a.date_taken ?? a.created_at;
+          const dateB = b.date_taken ?? b.created_at;
+          return parseISO(dateB).getTime() - parseISO(dateA).getTime();
+        }) ?? [],
+    [data]
+  );
+
+  const groupedMedia = useMemo(() => groupMediaByDate(allMedia), [allMedia]);
+
+  const groupEntries = useMemo(
+    () => Array.from(groupedMedia.entries()),
+    [groupedMedia]
+  );
+
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
@@ -32,22 +54,28 @@ function MediaPage() {
      {error && <p>Error loading photos: {error.message}</p>}

      {data && (
-        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
-          {data.pages.map((page) =>
-            page.data.map((media) => (
-              <div
-                key={media.id}
-                className="aspect-square bg-gray-200 rounded-md overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
-                onClick={() => setSelectedMedia(media)}
-              >
-                <AuthenticatedImage
-                  src={media.thumbnail_url ?? media.file_url}
-                  alt={media.original_filename}
-                  className="w-full h-full object-cover"
-                />
+        <div className="space-y-8">
+          {groupEntries.map(([title, media]) => (
+            <section key={title}>
+              <h2 className="text-xl font-semibold mb-4">{title}</h2>
+
+              <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
+                {media.map((media) => (
+                  <div
+                    key={media.id}
+                    className="aspect-square bg-gray-200 rounded-md overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={() => setSelectedMedia(media)}
+                  >
+                    <AuthenticatedImage
+                      src={media.thumbnail_url ?? media.file_url}
+                      alt={media.original_filename}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ))}
              </div>
-            ))
-          )}
+            </section>
+          ))}
        </div>
      )}

--- a/libertas-frontend/src/services/media-service.ts
+++ b/libertas-frontend/src/services/media-service.ts
@@ -63,8 +63,14 @@ export const getMediaDetails = async (
  mediaId: string,
 ): Promise<MediaDetails> => {
  const { data } = await apiClient.get(`/media/${mediaId}`);
-  // Process the nested media object's URLs
-  data.media = processMediaUrls(data.media);
+  console.log('Data for media details: ', data);
+
+  // Process the media URLs in the details response
+  data.file_url =  `${API_PREFIX}${data.file_url}`;
+  data.thumbnail_url = data.thumbnail_url
+    ? `${API_PREFIX}${data.thumbnail_url}`
+    : null;
+
  return data;
 };