feature(web): Introduce a new sticky navbar. Fixes 520 (#515)

* ui: add global header

* fix: design fixes

* fix: tests

* fix navbar background, hide y scrollbar and change sidebar footer to show version

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

5 files changed, 24 insertions, 45 deletions

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index 5c25d8cc..becb6a58 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -1,19 +1,13 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import GlobalActions from "@/components/dashboard/GlobalActions";
 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>
-        <GlobalActions />
-      </div>
+    <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>
   );
 }
diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index c02e6b85..a7b22fef 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,18 +1,10 @@
 import React from "react";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import GlobalActions from "@/components/dashboard/GlobalActions";
-import { SearchInput } from "@/components/dashboard/search/SearchInput";
 
 export default async function BookmarksPage() {
   return (
     <div>
-      <div className="flex gap-2">
-        <SearchInput />
-        <GlobalActions />
-      </div>
-      <div className="my-4">
-        <Bookmarks query={{ archived: false }} showEditorCard={true} />
-      </div>
+      <Bookmarks query={{ archived: false }} showEditorCard={true} />
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index e5959af3..be20bd2f 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -1,5 +1,4 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import GlobalActions from "@/components/dashboard/GlobalActions";
 
 export default async function FavouritesBookmarkPage() {
   return (
@@ -7,7 +6,6 @@ export default async function FavouritesBookmarkPage() {
       header={
         <div className="flex items-center justify-between">
           <p className="text-2xl">⭐️ Favourites</p>
-          <GlobalActions />
         </div>
       }
       query={{ favourited: true }}
diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index b0ac1f7d..cbd51245 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -1,3 +1,4 @@
+import Header from "@/components/dashboard/header/Header";
 import MobileSidebar from "@/components/dashboard/sidebar/ModileSidebar";
 import Sidebar from "@/components/dashboard/sidebar/Sidebar";
 import DemoModeBanner from "@/components/DemoModeBanner";
@@ -14,20 +15,23 @@ export default async function Dashboard({
   modal: React.ReactNode;
 }>) {
   return (
-    <div className="flex min-h-screen w-screen flex-col sm:h-screen sm:flex-row">
-      <ValidAccountCheck />
-      <div className="hidden flex-none sm:flex">
-        <Sidebar />
-      </div>
-      <main className="flex-1 bg-muted sm:overflow-y-auto">
-        {serverConfig.demoMode && <DemoModeBanner />}
-        <div className="block w-full sm:hidden">
-          <MobileSidebar />
-          <Separator />
+    <div>
+      <Header />
+      <div className="flex min-h-[calc(100vh-64px)] w-screen flex-col sm:h-[calc(100vh-64px)] sm:flex-row">
+        <ValidAccountCheck />
+        <div className="hidden flex-none sm:flex">
+          <Sidebar />
         </div>
-        {modal}
-        <div className="container min-h-screen p-4">{children}</div>
-      </main>
+        <main className="flex-1 bg-muted sm:overflow-y-auto">
+          {serverConfig.demoMode && <DemoModeBanner />}
+          <div className="block w-full sm:hidden">
+            <MobileSidebar />
+            <Separator />
+          </div>
+          {modal}
+          <div className="min-h-30 container p-4">{children}</div>
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index e7405c85..a239550c 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -1,24 +1,15 @@
 "use client";
 
-import { Suspense, useRef } from "react";
+import { Suspense } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
-import GlobalActions from "@/components/dashboard/GlobalActions";
-import { SearchInput } from "@/components/dashboard/search/SearchInput";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
 function SearchComp() {
   const { data } = useBookmarkSearch();
 
-  const inputRef: React.MutableRefObject<HTMLInputElement | null> =
-    useRef<HTMLInputElement | null>(null);
-
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex gap-2">
-        <SearchInput ref={inputRef} autoFocus={true} />
-        <GlobalActions />
-      </div>
       {data ? (
         <BookmarksGrid bookmarks={data.bookmarks} />
       ) : (