From 3a0f5fa0bbc907e81a0ddf2f8728a36761499928 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 7 Jun 2025 17:03:02 +0000
Subject: feat(ui): Improve the look of the public bookmarks page

---
 apps/web/app/public/layout.tsx              |  9 ++-------
 apps/web/app/public/lists/[listId]/page.tsx | 18 +++++-------------
 2 files changed, 7 insertions(+), 20 deletions(-)

(limited to 'apps/web/app')

diff --git a/apps/web/app/public/layout.tsx b/apps/web/app/public/layout.tsx
index 4203c44c..b4628e11 100644
--- a/apps/web/app/public/layout.tsx
+++ b/apps/web/app/public/layout.tsx
@@ -1,16 +1,11 @@
-import KarakeepLogo from "@/components/KarakeepIcon";
-
 export default function PublicLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <div className="h-screen flex-col overflow-y-auto bg-muted">
-      <header className="sticky left-0 right-0 top-0 z-50 flex h-16 items-center justify-between overflow-x-auto overflow-y-hidden bg-background p-4 shadow">
-        <KarakeepLogo height={38} />
-      </header>
-      <main className="container mx-3 mt-3 flex-1">{children}</main>
+    <div className="h-screen items-center justify-center overflow-y-auto bg-muted">
+      <main className="container mt-3">{children}</main>
     </div>
   );
 }
diff --git a/apps/web/app/public/lists/[listId]/page.tsx b/apps/web/app/public/lists/[listId]/page.tsx
index cdfc46d0..4a4ce414 100644
--- a/apps/web/app/public/lists/[listId]/page.tsx
+++ b/apps/web/app/public/lists/[listId]/page.tsx
@@ -3,7 +3,6 @@ import { notFound } from "next/navigation";
 import NoBookmarksBanner from "@/components/dashboard/bookmarks/NoBookmarksBanner";
 import PublicBookmarkGrid from "@/components/public/lists/PublicBookmarkGrid";
 import PublicListHeader from "@/components/public/lists/PublicListHeader";
-import { Separator } from "@/components/ui/separator";
 import { api } from "@/server/api/client";
 import { TRPCError } from "@trpc/server";
 
@@ -50,22 +49,15 @@ export default async function PublicListPage({
         listId: params.listId,
       });
     return (
-      <div className="flex flex-col gap-3">
-        <div className="flex items-center gap-2">
-          <span className="text-2xl">
-            {list.icon} {list.name}
-            {list.description && (
-              <span className="mx-2 text-lg text-gray-400">
-                {`(${list.description})`}
-              </span>
-            )}
-          </span>
-        </div>
-        <Separator />
+      <div className="space-y-3">
         <PublicListHeader
           list={{
             id: params.listId,
+            name: list.name,
+            description: list.description,
+            icon: list.icon,
             numItems: list.numItems,
+            ownerName: list.ownerName,
           }}
         />
         {list.numItems > 0 ? (
-- 
cgit v1.2.3-70-g09d2