feat: Add media details sidebar and date handling features, including media grouping by date

libertas-frontend/src/components/people/person-face-badge.tsx

@@ -0,0 +1,36 @@
+import { useGetPerson } from "@/features/people/use-people";
+import { Link } from "@tanstack/react-router";
+import { Badge } from "@/components/ui/badge";
+import { UserSquare } from "lucide-react";
+
+type PersonFaceBadgeProps = {
+  personId: string | null;
+};
+
+export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
+  const { data: person } = useGetPerson(personId ?? "");
+
+  const content = (
+    <Badge
+      variant="secondary"
+      className="inline-flex items-center gap-2 text-sm"
+    >
+      <UserSquare size={16} />
+      {person ? person.name : personId ? "Loading..." : "Unknown"}
+    </Badge>
+  );
+
+  if (!personId || !person) {
+    return content;
+  }
+
+  return (
+    <Link
+      to="/people/$personId"
+      params={{ personId: person.id }}
+      className="hover:opacity-80"
+    >
+      {content}
+    </Link>
+  );
+}