ui(web): move layout selector to main screen (#252)

4 files changed, 37 insertions, 21 deletions

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index 26ec45e9..a5326205 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -1,17 +1,27 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 import InfoTooltip from "@/components/ui/info-tooltip";
 
+function header() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex gap-2">
+        <p className="text-2xl">🗄️ Archive</p>
+        <InfoTooltip size={17} className="my-auto" variant="explain">
+          <p>Archived bookmarks won&apos;t appear in the homepage</p>
+        </InfoTooltip>
+      </div>
+      <div>
+        <ChangeLayout />
+      </div>
+    </div>
+  );
+}
+
 export default async function ArchivedBookmarkPage() {
   return (
     <Bookmarks
-      header={
-        <span className="flex gap-2">
-          <p className="text-2xl">🗄️ Archive</p>
-          <InfoTooltip size={17} className="my-auto" variant="explain">
-            <p>Archived bookmarks won&apos;t appear in the homepage</p>
-          </InfoTooltip>
-        </span>
-      }
+      header={header()}
       query={{ archived: true }}
       showDivider={true}
       showEditorCard={true}
diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index 90f4f2cb..47392ad5 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,19 +1,17 @@
 import React from "react";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import TopNav from "@/components/dashboard/bookmarks/TopNav";
-import { Separator } from "@/components/ui/separator";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import { SearchInput } from "@/components/dashboard/search/SearchInput";
 
 export default async function BookmarksPage() {
   return (
     <div>
-      <TopNav />
-      <Separator />
+      <div className="flex gap-2">
+        <SearchInput />
+        <ChangeLayout />
+      </div>
       <div className="my-4 flex-1">
-        <Bookmarks
-          header={<p className="text-2xl">Bookmarks</p>}
-          query={{ archived: false }}
-          showEditorCard={true}
-        />
+        <Bookmarks query={{ archived: false }} showEditorCard={true} />
       </div>
     </div>
   );
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index 423a8e69..fd39b90a 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -1,9 +1,15 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 
 export default async function FavouritesBookmarkPage() {
   return (
     <Bookmarks
-      header={<p className="text-2xl">⭐️ Favourites</p>}
+      header={
+        <div className="flex items-center justify-between">
+          <p className="text-2xl">⭐️ Favourites</p>
+          <ChangeLayout />
+        </div>
+      }
       query={{ favourited: true }}
       showDivider={true}
       showEditorCard={true}
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 8454acc5..11febca6 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -2,9 +2,9 @@
 
 import { Suspense, useRef } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 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";
 
 function SearchComp() {
@@ -15,8 +15,10 @@ function SearchComp() {
 
   return (
     <div className="flex flex-col gap-3">
-      <SearchInput ref={inputRef} autoFocus={true} />
-      <Separator />
+      <div className="flex gap-2">
+        <SearchInput ref={inputRef} autoFocus={true} />
+        <ChangeLayout />
+      </div>
       {data ? (
         <BookmarksGrid bookmarks={data.bookmarks} />
       ) : (