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

libertas-frontend/src/routes/media/index.tsx

@@ -0,0 +1,72 @@
+import { useGetMediaList } from "@/features/media/use-media";
+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 { MediaViewer } from "@/components/media/media-viewer";
+
+export const Route = createFileRoute("/media/")({
+  component: MediaPage,
+});
+
+function MediaPage() {
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useGetMediaList();
+
+  const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">All Photos</h1>
+      </div>
+
+      {isLoading && <p>Loading photos...</p>}
+      {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>
+            ))
+          )}
+        </div>
+      )}
+
+      {hasNextPage && (
+        <div className="flex justify-center mt-6">
+          <Button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
+            {isFetchingNextPage ? "Loading more..." : "Load More"}
+          </Button>
+        </div>
+      )}
+
+      <MediaViewer
+        media={selectedMedia}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedMedia(null);
+          }
+        }}
+      />
+    </div>
+  );
+}