From 30c8bc394100f2348a1f9c193036f95e045d4d6d Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 29 Mar 2024 21:33:15 +0000
Subject: fix(web): Consistent spacing in the content container in all pages.
 Fixes #40

---
 apps/web/app/dashboard/admin/page.tsx              |  2 +-
 apps/web/app/dashboard/archive/page.tsx            | 12 +++++-------
 apps/web/app/dashboard/bookmarks/layout.tsx        | 22 ----------------------
 apps/web/app/dashboard/bookmarks/loading.tsx       | 11 -----------
 apps/web/app/dashboard/bookmarks/page.tsx          | 22 +++++++++++++++++-----
 apps/web/app/dashboard/favourites/page.tsx         | 12 +++++-------
 apps/web/app/dashboard/layout.tsx                  |  2 +-
 apps/web/app/dashboard/lists/[listId]/page.tsx     |  2 +-
 apps/web/app/dashboard/lists/page.tsx              |  2 +-
 .../app/dashboard/preview/[bookmarkId]/page.tsx    |  2 +-
 apps/web/app/dashboard/search/page.tsx             | 11 +++++++----
 apps/web/app/dashboard/settings/page.tsx           |  2 +-
 apps/web/app/dashboard/tags/[tagName]/page.tsx     | 10 ++++------
 apps/web/app/dashboard/tags/page.tsx               |  2 +-
 apps/web/components/dashboard/UploadDropzone.tsx   |  2 +-
 .../components/dashboard/bookmarks/Bookmarks.tsx   |  2 +-
 apps/web/components/dashboard/bookmarks/TopNav.tsx |  6 +-----
 apps/web/components/ui/full-page-spinner.tsx       | 11 +++++++++++
 apps/web/tsconfig.json                             |  2 +-
 19 files changed, 60 insertions(+), 77 deletions(-)
 delete mode 100644 apps/web/app/dashboard/bookmarks/layout.tsx
 delete mode 100644 apps/web/app/dashboard/bookmarks/loading.tsx
 create mode 100644 apps/web/components/ui/full-page-spinner.tsx

diff --git a/apps/web/app/dashboard/admin/page.tsx b/apps/web/app/dashboard/admin/page.tsx
index c44d3142..eb80cb03 100644
--- a/apps/web/app/dashboard/admin/page.tsx
+++ b/apps/web/app/dashboard/admin/page.tsx
@@ -191,7 +191,7 @@ export default function AdminPage() {
   }
 
   return (
-    <div className="m-4 flex flex-col gap-5 rounded-md border bg-background p-4">
+    <div className="flex flex-col gap-5 rounded-md border bg-background p-4">
       <p className="text-2xl">Admin</p>
       <Separator />
       <ServerStatsSection />
diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index bc6971db..3c3520cc 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -2,12 +2,10 @@ import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 
 export default async function ArchivedBookmarkPage() {
   return (
-    <div className="continer mt-4">
-      <Bookmarks
-        header={<p className="text-2xl">🗄️ Archive</p>}
-        query={{ archived: true }}
-        showDivider={true}
-      />
-    </div>
+    <Bookmarks
+      header={<p className="text-2xl">🗄️ Archive</p>}
+      query={{ archived: true }}
+      showDivider={true}
+    />
   );
 }
diff --git a/apps/web/app/dashboard/bookmarks/layout.tsx b/apps/web/app/dashboard/bookmarks/layout.tsx
deleted file mode 100644
index a2356d23..00000000
--- a/apps/web/app/dashboard/bookmarks/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import TopNav from "@/components/dashboard/bookmarks/TopNav";
-import UploadDropzone from "@/components/dashboard/UploadDropzone";
-import { Separator } from "@/components/ui/separator";
-
-export default function BookmarksLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <UploadDropzone>
-      <div className="flex h-full flex-col">
-        <div>
-          <TopNav />
-        </div>
-        <Separator />
-        <div className="my-4 flex-1 pb-4">{children}</div>
-      </div>
-    </UploadDropzone>
-  );
-}
diff --git a/apps/web/app/dashboard/bookmarks/loading.tsx b/apps/web/app/dashboard/bookmarks/loading.tsx
deleted file mode 100644
index 4e56c3c4..00000000
--- a/apps/web/app/dashboard/bookmarks/loading.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Spinner from "@/components/ui/spinner";
-
-export default function Loading() {
-  return (
-    <div className="flex size-full">
-      <div className="m-auto">
-        <Spinner />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index 02964482..9907df4d 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,11 +1,23 @@
+import React from "react";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import TopNav from "@/components/dashboard/bookmarks/TopNav";
+import UploadDropzone from "@/components/dashboard/UploadDropzone";
+import { Separator } from "@/components/ui/separator";
 
 export default async function BookmarksPage() {
   return (
-    <Bookmarks
-      header={<p className="text-2xl">Bookmarks</p>}
-      query={{ archived: false }}
-      showEditorCard={true}
-    />
+    <div>
+      <UploadDropzone>
+        <TopNav />
+        <Separator />
+        <div className="my-4 flex-1">
+          <Bookmarks
+            header={<p className="text-2xl">Bookmarks</p>}
+            query={{ archived: false }}
+            showEditorCard={true}
+          />
+        </div>
+      </UploadDropzone>
+    </div>
   );
 }
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index 310117b1..8df601c4 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -2,12 +2,10 @@ import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 
 export default async function FavouritesBookmarkPage() {
   return (
-    <div className="continer mt-4">
-      <Bookmarks
-        header={<p className="text-2xl">⭐️ Favourites</p>}
-        query={{ favourited: true, archived: false }}
-        showDivider={true}
-      />
-    </div>
+    <Bookmarks
+      header={<p className="text-2xl">⭐️ Favourites</p>}
+      query={{ favourited: true, archived: false }}
+      showDivider={true}
+    />
   );
 }
diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index 68c0bfbd..628c3a34 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -21,7 +21,7 @@ export default async function Dashboard({
           <MobileSidebar />
           <Separator />
         </div>
-        {children}
+        <div className="container p-4">{children}</div>
       </main>
     </div>
   );
diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index bac2b5c7..e27e1841 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -35,7 +35,7 @@ export default async function ListPage({
         showDivider={true}
         header={
           <div className="flex justify-between">
-            <span className="pt-4 text-2xl">
+            <span className="text-2xl">
               {list.icon} {list.name}
             </span>
             <DeleteListButton list={list} />
diff --git a/apps/web/app/dashboard/lists/page.tsx b/apps/web/app/dashboard/lists/page.tsx
index d379b1bb..f839ca80 100644
--- a/apps/web/app/dashboard/lists/page.tsx
+++ b/apps/web/app/dashboard/lists/page.tsx
@@ -6,7 +6,7 @@ export default async function ListsPage() {
   const lists = await api.lists.list();
 
   return (
-    <div className="container mt-4 flex flex-col gap-3">
+    <div className="flex flex-col gap-3">
       <p className="text-2xl">📋 All Lists</p>
       <Separator />
       <AllListsView initialData={lists.lists} />
diff --git a/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx b/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx
index c9f27eac..201cbcaf 100644
--- a/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx
+++ b/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx
@@ -11,7 +11,7 @@ export default async function BookmarkPreviewPage({
   });
 
   return (
-    <div className="max-h-screen p-4">
+    <div className="max-h-screen">
       <BookmarkPreview initialData={bookmark} />
     </div>
   );
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index f09041f3..8454acc5 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -3,11 +3,10 @@
 import { Suspense, useRef } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
 import { SearchInput } from "@/components/dashboard/search/SearchInput";
+import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { Separator } from "@/components/ui/separator";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
-import Loading from "../bookmarks/loading";
-
 function SearchComp() {
   const { data } = useBookmarkSearch();
 
@@ -15,10 +14,14 @@ function SearchComp() {
     useRef<HTMLInputElement | null>(null);
 
   return (
-    <div className="container flex flex-col gap-3 p-4">
+    <div className="flex flex-col gap-3">
       <SearchInput ref={inputRef} autoFocus={true} />
       <Separator />
-      {data ? <BookmarksGrid bookmarks={data.bookmarks} /> : <Loading />}
+      {data ? (
+        <BookmarksGrid bookmarks={data.bookmarks} />
+      ) : (
+        <FullPageSpinner />
+      )}
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/settings/page.tsx b/apps/web/app/dashboard/settings/page.tsx
index f75bc298..059660b7 100644
--- a/apps/web/app/dashboard/settings/page.tsx
+++ b/apps/web/app/dashboard/settings/page.tsx
@@ -3,7 +3,7 @@ import { ChangePassword } from "@/components/dashboard/settings/ChangePassword";
 
 export default async function Settings() {
   return (
-    <div className="m-4 flex flex-col space-y-2 rounded-md border bg-background p-4">
+    <div className="flex flex-col space-y-2 rounded-md border bg-background p-4">
       <p className="text-2xl">Settings</p>
       <ChangePassword />
       <ApiKeySettings />
diff --git a/apps/web/app/dashboard/tags/[tagName]/page.tsx b/apps/web/app/dashboard/tags/[tagName]/page.tsx
index 4785cebc..0e9e722e 100644
--- a/apps/web/app/dashboard/tags/[tagName]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagName]/page.tsx
@@ -28,11 +28,9 @@ export default async function TagPage({
   }
 
   return (
-    <div className="continer mt-4">
-      <Bookmarks
-        header={<p className="text-2xl">{tagName}</p>}
-        query={{ archived: false, tagId: tag.id }}
-      />
-    </div>
+    <Bookmarks
+      header={<p className="text-2xl">{tagName}</p>}
+      query={{ archived: false, tagId: tag.id }}
+    />
   );
 }
diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx
index ec09e34e..f87b0fcc 100644
--- a/apps/web/app/dashboard/tags/page.tsx
+++ b/apps/web/app/dashboard/tags/page.tsx
@@ -36,7 +36,7 @@ export default async function TagsPage() {
   }
 
   return (
-    <div className="container mt-2 space-y-3">
+    <div className="space-y-3">
       <span className="text-2xl">All Tags</span>
       <Separator />
       <div className="flex flex-wrap gap-3">{tagPill}</div>
diff --git a/apps/web/components/dashboard/UploadDropzone.tsx b/apps/web/components/dashboard/UploadDropzone.tsx
index d1a423ce..b08ac0a6 100644
--- a/apps/web/components/dashboard/UploadDropzone.tsx
+++ b/apps/web/components/dashboard/UploadDropzone.tsx
@@ -76,7 +76,7 @@ export default function UploadDropzone({
           <input {...getInputProps()} hidden />
           <div
             className={cn(
-              "fixed inset-0 flex h-full w-full items-center justify-center bg-gray-200 opacity-90",
+              "fixed inset-0 z-50 flex h-full w-full items-center justify-center bg-gray-200 opacity-90",
               isDragging || isUploading || isCreating ? undefined : "hidden",
             )}
           >
diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index 81dd9361..8aa723e9 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -26,7 +26,7 @@ export default async function Bookmarks({
   const bookmarks = await api.bookmarks.getBookmarks(query);
 
   return (
-    <div className="container flex flex-col gap-3">
+    <div className="flex flex-col gap-3">
       {header}
       {showDivider && <Separator />}
       <UpdatableBookmarksGrid
diff --git a/apps/web/components/dashboard/bookmarks/TopNav.tsx b/apps/web/components/dashboard/bookmarks/TopNav.tsx
index 568af15d..189c9d5c 100644
--- a/apps/web/components/dashboard/bookmarks/TopNav.tsx
+++ b/apps/web/components/dashboard/bookmarks/TopNav.tsx
@@ -1,9 +1,5 @@
 import { SearchInput } from "../search/SearchInput";
 
 export default function TopNav() {
-  return (
-    <div className="container py-4">
-      <SearchInput />
-    </div>
-  );
+  return <SearchInput />;
 }
diff --git a/apps/web/components/ui/full-page-spinner.tsx b/apps/web/components/ui/full-page-spinner.tsx
new file mode 100644
index 00000000..3817a04f
--- /dev/null
+++ b/apps/web/components/ui/full-page-spinner.tsx
@@ -0,0 +1,11 @@
+import Spinner from "./spinner";
+
+export function FullPageSpinner() {
+  return (
+    <div className="flex size-full">
+      <div className="m-auto">
+        <Spinner />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index db90cf17..f7a25fc6 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -13,5 +13,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".next"]
 }
-- 
cgit v1.2.3-70-g09d2