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

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