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

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>
+  );
+}

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

@@ -1,12 +1,13 @@
-import {
+import { Dialog, DialogContent } from "@/components/ui/dialog";
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} 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,13 +19,12 @@ 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">
+      <DialogContent className="min-w-[90vw] max-w-full h-[90vh] p-0 border-0">
-        <DialogHeader>
+        {/* We use a resizable panel group to show the image and sidebar */}
-          <DialogTitle className="truncate">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
-            {media?.original_filename}
+          {/* --- Panel 1: The Image --- */}
-          </DialogTitle>
+          <ResizablePanel defaultSize={75} className="bg-gray-100">
-        </DialogHeader>
+            <div className="flex h-full items-center justify-center overflow-hidden relative p-4">
-        <div className="flex-1 flex items-center justify-center overflow-hidden relative">
               {media ? (
                 <AuthenticatedImage
                   src={media.file_url}
@@ -35,6 +35,20 @@ export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
                 <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>
   );

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>
+  );
+}

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[];
 };
 

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[]>(),
+  );
+};

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,9 +54,13 @@ function MediaPage() {
       {error && <p>Error loading photos: {error.message}</p>}
 
       {data && (
+        <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">
-          {data.pages.map((page) =>
+                {media.map((media) => (
-            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"
@@ -46,8 +72,10 @@ function MediaPage() {
                       className="w-full h-full object-cover"
                     />
                   </div>
-            ))
+                ))}
-          )}
+              </div>
+            </section>
+          ))}
         </div>
       )}
 

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
+  console.log('Data for media details: ', data);
-  data.media = processMediaUrls(data.media);
+
+  // 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;
 };
 

libertas_api/migrations/20251116020048_add_date_taken_to_media.sql

@@ -0,0 +1,4 @@
+ALTER TABLE media
+ADD COLUMN date_taken TIMESTAMPTZ;
+
+CREATE INDEX IF NOT EXISTS idx_media_date_taken ON media (date_taken);

libertas_api/src/schema.rs

@@ -14,6 +14,8 @@ pub struct MediaResponse {
     pub hash: String,
     pub file_url: String,
     pub thumbnail_url: Option<String>,
+    pub created_at: chrono::DateTime<chrono::Utc>,
+    pub date_taken: Option<chrono::DateTime<chrono::Utc>>,
 }
 
 impl From<Media> for MediaResponse {
@@ -27,6 +29,8 @@ impl From<Media> for MediaResponse {
             thumbnail_url: media
                 .thumbnail_path
                 .map(|_| format!("/api/v1/media/{}/thumbnail", media.id)),
+            created_at: media.created_at,
+            date_taken: media.date_taken,
         }
     }
 }

libertas_api/src/services/media_service.rs

@@ -67,7 +67,7 @@ impl MediaService for MediaServiceImpl {
                 .await
                 .unwrap()?;
 
-        let (storage_path_buf, _date_taken) = get_storage_path_and_date(&extracted_data, &filename);
+        let (storage_path_buf, date_taken) = get_storage_path_and_date(&extracted_data, &filename);
 
         let storage_path_str = self
             .persist_media_file(&file_bytes, &storage_path_buf)
@@ -81,6 +81,7 @@ impl MediaService for MediaServiceImpl {
                 storage_path_str,
                 hash,
                 file_size,
+                date_taken,
             )
             .await?;
 
@@ -282,6 +283,7 @@ impl MediaServiceImpl {
         storage_path: String,
         hash: String,
         file_size: i64,
+        date_taken: Option<chrono::DateTime<chrono::Utc>>,
     ) -> CoreResult<Media> {
         let media_model = Media {
             id: Uuid::new_v4(),
@@ -292,6 +294,7 @@ impl MediaServiceImpl {
             hash,
             created_at: chrono::Utc::now(),
             thumbnail_path: None,
+            date_taken,
         };
 
         self.repo.create(&media_model).await?;

libertas_core/src/models.rs

@@ -59,6 +59,7 @@ pub struct Media {
     pub hash: String,
     pub created_at: chrono::DateTime<chrono::Utc>,
     pub thumbnail_path: Option<String>,
+    pub date_taken: Option<chrono::DateTime<chrono::Utc>>,
 }
 
 pub struct MediaMetadata {

libertas_importer/src/main.rs

@@ -141,7 +141,7 @@ async fn process_file(
         }
     };
 
-    let (storage_path_buf, _date_taken) = get_storage_path_and_date(&extracted_data, &filename);
+    let (storage_path_buf, date_taken) = get_storage_path_and_date(&extracted_data, &filename);
 
     let mut dest_path_buf = PathBuf::from(&state.config.media_library_path);
     dest_path_buf.push(&storage_path_buf);
@@ -169,6 +169,7 @@ async fn process_file(
         hash,
         created_at: chrono::Utc::now(),
         thumbnail_path: None,
+        date_taken: date_taken,
     };
 
     let mut metadata_models = Vec::new();

libertas_infra/src/db_models.rs

@@ -52,6 +52,7 @@ pub struct PostgresMedia {
     pub hash: String,
     pub created_at: chrono::DateTime<chrono::Utc>,
     pub thumbnail_path: Option<String>,
+    pub date_taken: Option<chrono::DateTime<chrono::Utc>>,
 }
 
 #[derive(sqlx::FromRow)]

libertas_infra/src/mappers.rs

@@ -87,6 +87,7 @@ impl From<PostgresMedia> for Media {
             hash: pg_media.hash,
             created_at: pg_media.created_at,
             thumbnail_path: pg_media.thumbnail_path,
+            date_taken: pg_media.date_taken,
         }
     }
 }

libertas_infra/src/repositories/album_repository.rs

@@ -133,7 +133,7 @@ impl AlbumRepository for PostgresAlbumRepository {
             PostgresMedia,
             r#"
             SELECT m.id, m.owner_id, m.storage_path, m.original_filename, m.mime_type,
-                   m.hash, m.created_at, m.thumbnail_path
+                   m.hash, m.created_at, m.thumbnail_path, m.date_taken
             FROM media m
             JOIN album_media am ON m.id = am.media_id
             WHERE am.album_id = $1

libertas_infra/src/repositories/media_repository.rs

@@ -38,8 +38,8 @@ impl PostgresMediaRepository {
     ) -> CoreResult<()> {
         sqlx::query!(
             r#"
-            INSERT INTO media (id, owner_id, storage_path, original_filename, mime_type, hash, created_at, thumbnail_path)
+            INSERT INTO media (id, owner_id, storage_path, original_filename, mime_type, hash, created_at, thumbnail_path, date_taken)
-            VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
             "#,
             media.id,
             media.owner_id,
@@ -48,7 +48,8 @@ impl PostgresMediaRepository {
             media.mime_type,
             media.hash,
             media.created_at,
-            media.thumbnail_path
+            media.thumbnail_path,
+            media.date_taken
         )
         .execute(exec)
         .await
@@ -68,7 +69,7 @@ impl MediaRepository for PostgresMediaRepository {
             PostgresMedia,
             r#"
             SELECT id, owner_id, storage_path, original_filename, mime_type, hash, created_at, 
-                   thumbnail_path
+                   thumbnail_path, date_taken
             FROM media 
             WHERE hash = $1
             "#,
@@ -86,7 +87,7 @@ impl MediaRepository for PostgresMediaRepository {
             PostgresMedia,
             r#"
             SELECT id, owner_id, storage_path, original_filename, mime_type, hash, created_at, 
-                   thumbnail_path
+                   thumbnail_path, date_taken
             FROM media 
             WHERE id = $1
             "#,
@@ -130,7 +131,7 @@ impl MediaRepository for PostgresMediaRepository {
             .await
             .map_err(|e| CoreError::Database(e.to_string()))?;
 
-        let data_base_sql = "SELECT media.id, media.owner_id, media.storage_path, media.original_filename, media.mime_type, media.hash, media.created_at, media.thumbnail_path FROM media";
+        let data_base_sql = "SELECT media.id, media.owner_id, media.storage_path, media.original_filename, media.mime_type, media.hash, media.created_at, media.thumbnail_path, media.date_taken FROM media";
         let mut data_query = sqlx::QueryBuilder::new(data_base_sql);
         data_query.push(" WHERE media.owner_id = ");
         data_query.push_bind(user_id);
@@ -189,7 +190,7 @@ impl MediaRepository for PostgresMediaRepository {
         let data_base_sql = "
             SELECT media.id, media.owner_id, media.storage_path,
                    media.original_filename, media.mime_type,
-                   media.hash, media.created_at, media.thumbnail_path
+                   media.hash, media.created_at, media.thumbnail_path, media.date_taken
             FROM media
             JOIN face_regions fr ON media.id = fr.media_id
         ";