feat: implement add media to album functionality with dialog and API integration

libertas-frontend/src/routes/albums/$albumId.tsx

@@ -1,4 +1,10 @@
+import { AddMediaToAlbumDialog } from "@/components/albums/add-media-to-album-dialog";
+import { AuthenticatedImage } from "@/components/media/authenticated-image";
+import { MediaViewer } from "@/components/media/media-viewer";
+import type { Media } from "@/domain/types";
+import { useGetAlbum, useGetAlbumMedia } from "@/features/albums/use-albums";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 
 export const Route = createFileRoute("/albums/$albumId")({
   component: AlbumDetailPage,
@@ -6,14 +12,51 @@ export const Route = createFileRoute("/albums/$albumId")({
 
 function AlbumDetailPage() {
   const { albumId } = Route.useParams();
+  const { data: album, isLoading: isLoadingAlbum } = useGetAlbum(albumId);
+  const { data: media, isLoading: isLoadingMedia } = useGetAlbumMedia(albumId);
+  const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
+
+  const isLoading = isLoadingAlbum || isLoadingMedia;
 
   return (
-    <div>
-      <h1 className="text-3xl font-bold">Album: {albumId}</h1>
-      <p className="mt-4">
-        This page will show the details and photos for a single album.
-      </p>
-      {/* TODO: Fetch album details and display media grid */}
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold truncate">
+          {album?.name ?? "Loading album..."}
+        </h1>
+        <AddMediaToAlbumDialog albumId={albumId} />
+      </div>
+
+      {isLoading && <p>Loading photos...</p>}
+
+      {media && media.length > 0 && (
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
+          {media.map((m) => (
+            <div
+              key={m.id}
+              className="aspect-square bg-gray-200 rounded-md overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
+              onClick={() => setSelectedMedia(m)}
+            >
+              <AuthenticatedImage
+                src={m.thumbnail_url ?? m.file_url}
+                alt={m.original_filename}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {media && media.length === 0 && <p>This album is empty.</p>}
+
+      <MediaViewer
+        media={selectedMedia}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedMedia(null);
+          }
+        }}
+      />
     </div>
   );
 }