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

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

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/albums/$albumId")({
+  component: AlbumDetailPage,
+});
+
+function AlbumDetailPage() {
+  const { albumId } = Route.useParams();
+
+  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>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useGetAlbums } from "@/features/albums/use-albums";
+import { AlbumCard } from "@/components/albums/album-card";
+import { CreateAlbumDialog } from "@/components/albums/create-album-dialog";
+import { Separator } from "@/components/ui/separator";
+
+export const Route = createFileRoute("/albums/")({
+  component: AlbumsPage,
+});
+
+function AlbumsPage() {
+  const { data: albums, isLoading, error } = useGetAlbums();
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Albums</h1>
+        <CreateAlbumDialog />
+      </div>
+      <Separator />
+
+      {isLoading && <p>Loading albums...</p>}
+      {error && <p>Error loading albums: {error.message}</p>}
+
+      {albums && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {albums.map((album) => (
+            <AlbumCard key={album.id} album={album} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}