fix: Minor UI tweaks and fixing addition of first bookmark

packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx

@@ -21,16 +21,11 @@ export default async function Bookmarks({
 
   const bookmarks = await api.bookmarks.getBookmarks(query);
 
-  // TODO: This needs to be polished
   return (
     <>
       <div className="container pb-4 text-2xl">{title}</div>
       <div className="container">
-        {bookmarks.bookmarks.length == 0 ? (
-          "No bookmarks"
-        ) : (
-          <BookmarksGrid query={query} bookmarks={bookmarks.bookmarks} />
-        )}
+        <BookmarksGrid query={query} bookmarks={bookmarks.bookmarks} />
       </div>
     </>
   );

packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx

@@ -21,6 +21,9 @@ export default function BookmarksGrid({
   const { data } = api.bookmarks.getBookmarks.useQuery(query, {
     initialData: { bookmarks: initialBookmarks },
   });
+  if (data.bookmarks.length == 0) {
+    return <p>No bookmarks</p>;
+  }
   return (
     <div className="container grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       {data.bookmarks.map((b) => renderBookmark(b))}

packages/web/app/dashboard/tags/page.tsx

@@ -37,17 +37,24 @@ export default async function TagsPage() {
   });
 
   // Sort tags by usage desc
-  tags.sort((a, b) => b._count.bookmarks - a._count.bookmarks);
+  tags
+    .filter((t) => t._count.bookmarks > 0)
+    .sort((a, b) => b._count.bookmarks - a._count.bookmarks);
+
+  let tagPill;
+  if (tags.length) {
+    tagPill = tags.map((t) => (
+      <TagPill key={t.id} name={t.name} count={t._count.bookmarks} />
+    ));
+  } else {
+    tagPill = "No Tags";
+  }
 
   return (
     <div className="container mt-2 space-y-3">
       <span className="text-2xl">All Tags</span>
       <hr />
-      <div className="flex flex-wrap">
-        {tags.map((t) => (
-          <TagPill key={t.id} name={t.name} count={t._count.bookmarks} />
-        ))}
-      </div>
+      <div className="flex flex-wrap">{tagPill}</div>
     </div>
   );
 }

packages/web/app/signin/page.tsx

@@ -17,7 +17,7 @@ export default async function SignInPage() {
         </span>
         <p className="text-6xl">Hoarder</p>
       </div>
-      <div className="row-span-4 w-96">
+      <div className="row-span-4 px-3">
         <SignInForm />
       </div>
     </div>