feat: add album and media management features, including album creation, media upload, and routing

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

@@ -0,0 +1,41 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { type Media } from "@/domain/types";
+import { AuthenticatedImage } from "./authenticated-image";
+import { Skeleton } from "../ui/skeleton";
+
+type MediaViewerProps = {
+  media: Media | null;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
+  const isOpen = media !== null;
+
+  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>
+    </Dialog>
+  );
+}