feat(ui): Improve the look of the public bookmarks page

1 files changed, 59 insertions, 5 deletions

diff --git a/apps/web/components/public/lists/PublicListHeader.tsx b/apps/web/components/public/lists/PublicListHeader.tsx
index 1f016351..acdb845a 100644
--- a/apps/web/components/public/lists/PublicListHeader.tsx
+++ b/apps/web/components/public/lists/PublicListHeader.tsx
@@ -1,17 +1,71 @@
+import Link from "next/link";
+import KarakeepLogo from "@/components/KarakeepIcon";
+import { buttonVariants } from "@/components/ui/button";
+import { BookmarkIcon, RssIcon } from "lucide-react";
+
 export default function PublicListHeader({
   list,
 }: {
   list: {
     id: string;
+    name: string;
+    description: string | null | undefined;
+    icon: string;
+    ownerName: string;
     numItems: number;
   };
 }) {
+  const rssLink = `/api/v1/rss/lists/${list.id}`;
   return (
-    <div className="flex w-full justify-between">
-      <span />
-      <p className="text-xs font-light uppercase text-gray-500">
-        {list.numItems} bookmarks
-      </p>
+    <div className="rounded-lg border bg-gradient-to-br from-purple-50/50 via-purple-100/30 to-purple-200/40 p-6 transition-all duration-300  dark:from-purple-950/20 dark:via-purple-900/15 dark:to-purple-800/20">
+      <div className="space-y-4">
+        <KarakeepLogo height={38} />
+        <div className="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
+          {/* Header */}
+          <div className="flex min-w-0 flex-1 items-start gap-3">
+            <span className="text-3xl transition-transform duration-200 hover:scale-110">
+              {list.icon}
+            </span>
+            <div className="min-w-0 flex-1">
+              <h1 className="text-3xl font-bold leading-tight text-foreground">
+                {list.name}
+              </h1>
+              {list.description && list.description.length > 0 && (
+                <p className="mt-2 text-lg leading-relaxed text-muted-foreground">
+                  {list.description}
+                </p>
+              )}
+            </div>
+          </div>
+          {/* Created by */}
+          <div className="flex gap-3 md:justify-end">
+            <div className="flex aspect-square size-10 flex-col items-center justify-center rounded-full bg-primary font-medium text-primary-foreground transition-all duration-200 hover:scale-105 hover:shadow-md">
+              {list.ownerName[0]?.toUpperCase()}
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">Created by</p>
+              <p className="font-medium text-foreground">{list.ownerName}</p>
+            </div>
+          </div>
+        </div>
+        {/* Options */}
+        <div className="flex items-center justify-start gap-1 md:justify-end">
+          <div className="flex items-center gap-1 text-xs font-light uppercase text-gray-500 transition-colors duration-200 hover:text-gray-700 dark:hover:text-gray-300">
+            <BookmarkIcon
+              size={12}
+              className="transition-transform duration-200 hover:scale-110"
+            />
+            <span>{list.numItems} bookmarks</span>
+          </div>
+          <Link
+            href={rssLink}
+            target="_blank"
+            className={buttonVariants({ variant: "none", size: "icon" })}
+          >
+            <RssIcon className="size-3 text-gray-500" />
+          </Link>
+        </div>
+      </div>
     </div>
   );
 }