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

libertas-frontend/src/components/albums/album-card.tsx

@@ -0,0 +1,36 @@
+import { type Album } from "@/domain/types";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Link } from "@tanstack/react-router";
+import { ImageIcon } from "lucide-react";
+
+type AlbumCardProps = {
+  album: Album;
+};
+
+export function AlbumCard({ album }: AlbumCardProps) {
+  return (
+    <Link to="/albums/$albumId" params={{ albumId: album.id }}>
+      <Card className="overflow-hidden hover:shadow-lg transition-shadow">
+        <CardHeader className="p-0">
+          <div className="aspect-video bg-gray-200 flex items-center justify-center">
+            {/* TODO: Show album.thumbnail_url here */}
+            <ImageIcon className="w-12 h-12 text-gray-400" />
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <CardTitle className="text-lg truncate">{album.name}</CardTitle>
+        </CardContent>
+        <CardFooter className="p-4 pt-0">
+          {/* TODO: Show photo count */}
+          <p className="text-sm text-gray-600">0 items</p>
+        </CardFooter>
+      </Card>
+    </Link>
+  );
+}

libertas-frontend/src/components/albums/create-album-dialog.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useCreateAlbum } from "@/features/albums/use-albums";
+import { Plus } from "lucide-react";
+
+export function CreateAlbumDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { mutate: createAlbum, isPending } = useCreateAlbum();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const name = formData.get("name") as string;
+    const description = formData.get("description") as string;
+
+    if (name) {
+      createAlbum(
+        { name, description },
+        {
+          onSuccess: () => {
+            setIsOpen(false);
+            // TODO: Add toast
+          },
+        }
+      );
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus size={18} className="mr-2" />
+          New Album
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Create New Album</DialogTitle>
+            <DialogDescription>
+              Give your new album a name and description.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Name
+              </Label>
+              <Input id="name" name="name" required className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="description" className="text-right">
+                Description
+              </Label>
+              <Textarea
+                id="description"
+                name="description"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Creating..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

libertas-frontend/src/components/layout/sidebar.tsx

@@ -0,0 +1,70 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+import { Home, Images, Library, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAuthStorage } from "@/hooks/use-auth-storage";
+
+export function Sidebar() {
+  const { user, clearToken } = useAuthStorage();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    clearToken();
+    navigate({ to: "/login" });
+  };
+
+  return (
+    <nav className="w-64 h-full bg-gray-800 text-white flex flex-col">
+      <div className="p-4 border-b border-gray-700">
+        <h1 className="text-2xl font-bold">Libertas</h1>
+      </div>
+      <div className="flex-1 p-4 space-y-2">
+        <SidebarLink to="/" icon={<Home size={18} />}>
+          Home
+        </SidebarLink>
+        <SidebarLink to="/media" icon={<Images size={18} />}>
+          Photos
+        </SidebarLink>
+        <SidebarLink to="/albums" icon={<Library size={18} />}>
+          Albums
+        </SidebarLink>
+        <SidebarLink to="/people" icon={<Users size={18} />}>
+          People
+        </SidebarLink>
+      </div>
+      <div className="p-4 border-t border-gray-700">
+        <p className="text-sm text-gray-400">{user?.email}</p>
+        <button
+          onClick={handleLogout}
+          className="w-full mt-2 text-left text-red-400 hover:text-red-300"
+        >
+          Log out
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+function SidebarLink({
+  to,
+  icon,
+  children,
+}: {
+  to: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      to={to}
+      className={cn(
+        "flex items-center space-x-3 px-3 py-2 rounded-md text-gray-300 hover:bg-gray-700 hover:text-white"
+      )}
+      activeProps={{
+        className: "bg-gray-900 text-white",
+      }}
+    >
+      {icon}
+      <span>{children}</span>
+    </Link>
+  );
+}

libertas-frontend/src/components/media/authenticated-image.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react";
+import apiClient from "@/services/api-client";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ImageIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type AuthenticatedImageProps = React.ComponentProps<"img"> & {
+  src: string; // The protected URL, e.g., /media/123/thumbnail
+};
+
+export function AuthenticatedImage({ src, ...props }: AuthenticatedImageProps) {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!src) {
+      setIsLoading(false);
+      setError(true);
+      return;
+    }
+
+    let isCancelled = false;
+    let currentObjectUrl: string | null = null;
+
+    const fetchImage = async () => {
+      setIsLoading(true);
+      setError(false);
+      try {
+        const response = await apiClient.get(src, {
+          responseType: "blob",
+        });
+
+        if (isCancelled) return;
+
+        const blob = response.data;
+        currentObjectUrl = URL.createObjectURL(blob);
+        setObjectUrl(currentObjectUrl);
+      } catch (err) {
+        if (!isCancelled) {
+          console.error("Failed to fetch authenticated image:", src, err);
+          setError(true);
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    fetchImage();
+
+    return () => {
+      isCancelled = true;
+      if (currentObjectUrl) {
+        URL.revokeObjectURL(currentObjectUrl);
+      }
+      setObjectUrl(null);
+    };
+  }, [src]);
+
+  if (isLoading) {
+    return <Skeleton className={cn("h-full w-full", props.className)} />;
+  }
+
+  if (error || !objectUrl) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center bg-gray-200",
+          props.className
+        )}
+      >
+        <ImageIcon className="h-1/2 w-1/2 text-gray-400" />
+      </div>
+    );
+  }
+
+  return <img {...props} src={objectUrl} />;
+}

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

libertas-frontend/src/components/media/upload-dialog.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useUploadMedia } from "@/features/media/use-media";
+import { UploadCloud } from "lucide-react";
+
+export function UploadDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const { mutate: upload, isPending } = useUploadMedia();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (file) {
+      upload(
+        { file },
+        {
+          onSuccess: () => {
+            setIsOpen(false);
+            setFile(null);
+            // TODO: Add toast notification
+          },
+        }
+      );
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <UploadCloud size={18} className="mr-2" />
+          Upload
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Upload Photo</DialogTitle>
+          <DialogDescription>
+            Select a photo from your computer to upload.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="picture">Picture</Label>
+            <Input id="picture" type="file" onChange={handleFileChange} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            type="submit"
+            onClick={handleSubmit}
+            disabled={!file || isPending}
+          >
+            {isPending ? "Uploading..." : "Upload"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}