From c2bf3adc24a3e1b0e2f0670418e9bde63e797316 Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Thu, 26 Oct 2023 18:23:36 +0200
Subject: [PATCH] feat: remove legacy header and footer (#1509)

# Description

Also add a back to chat button in the user page to make up for the loss
of the legacy header.

## Screenshots (if appropriate):

<img width="754" alt="image"
src="https://github.com/StanGirard/quivr/assets/67386567/ad6d92a6-2f57-464f-b002-ec94f37a1ccd">
---
 frontend/app/App.tsx                          |   4 -
 .../ActionsBar/components/ChatInput/index.tsx |   2 +-
 frontend/app/user/page.tsx                    | 117 ++++++++++--------
 frontend/lib/components/Footer/index.tsx      |  60 ---------
 .../{NavBar/components => Logo}/Logo.tsx      |   0
 .../components/Header/hooks/useHeader.ts      |  34 -----
 .../NavBar/components/Header/index.tsx        |  25 ----
 .../NavBar/components/MobileMenu.tsx          |  17 ---
 .../NavItems/components/AuthButtons.tsx       |  33 -----
 .../NavItems/components/NavLink.tsx           |  24 ----
 .../NavBar/components/NavItems/index.tsx      |  45 -------
 frontend/lib/components/NavBar/index.tsx      |  32 -----
 .../Sidebar/components/SidebarHeader.tsx      |   2 +-
 frontend/public/locales/en/translation.json   |   2 -
 frontend/public/locales/es/translation.json   |   2 -
 frontend/public/locales/fr/translation.json   |   3 +-
 .../public/locales/pt-br/translation.json     |   2 -
 frontend/public/locales/ru/translation.json   |   2 -
 .../public/locales/zh-cn/translation.json     |   2 -
 19 files changed, 65 insertions(+), 343 deletions(-)
 delete mode 100644 frontend/lib/components/Footer/index.tsx
 rename frontend/lib/components/{NavBar/components => Logo}/Logo.tsx (100%)
 delete mode 100644 frontend/lib/components/NavBar/components/Header/hooks/useHeader.ts
 delete mode 100644 frontend/lib/components/NavBar/components/Header/index.tsx
 delete mode 100644 frontend/lib/components/NavBar/components/MobileMenu.tsx
 delete mode 100644 frontend/lib/components/NavBar/components/NavItems/components/AuthButtons.tsx
 delete mode 100644 frontend/lib/components/NavBar/components/NavItems/components/NavLink.tsx
 delete mode 100644 frontend/lib/components/NavBar/components/NavItems/index.tsx
 delete mode 100644 frontend/lib/components/NavBar/index.tsx

diff --git a/frontend/app/App.tsx b/frontend/app/App.tsx
index f531dc4f1..31cfd320a 100644
--- a/frontend/app/App.tsx
+++ b/frontend/app/App.tsx
@@ -3,8 +3,6 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PropsWithChildren, useEffect } from "react";
 
-import Footer from "@/lib/components/Footer";
-import { NavBar } from "@/lib/components/NavBar";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { UpdateMetadata } from "@/lib/helpers/updateMetadata";
@@ -31,9 +29,7 @@ export const App = ({ children }: PropsWithChildren): JSX.Element => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <NavBar />
       {children}
-      <Footer />
       <UpdateMetadata />
     </QueryClientProvider>
   );
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
index b5755551c..f3803391a 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -25,7 +25,7 @@ export const ChatInput = ({
 
   return (
     <>
-      {<OnboardingQuestions />}
+      <OnboardingQuestions />
       <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2">
         <form
           data-testid="chat-input-form"
diff --git a/frontend/app/user/page.tsx b/frontend/app/user/page.tsx
index 23713e719..90d60008d 100644
--- a/frontend/app/user/page.tsx
+++ b/frontend/app/user/page.tsx
@@ -20,68 +20,75 @@ const UserPage = (): JSX.Element => {
   }
 
   const { user } = session;
-  const { t } = useTranslation(["translation", "user", "config"]);
+  const { t } = useTranslation(["translation", "user", "config", "chat"]);
 
   return (
-    <main className="container lg:w-2/3 mx-auto py-10 px-5">
-      <Card className="mb-5 shadow-sm hover:shadow-none">
-        <CardHeader>
-          <h2 className="font-bold text-xl">
-            {t("accountSection", { ns: "config" })}
-          </h2>
-        </CardHeader>
+    <>
+      <main className="container lg:w-2/3 mx-auto py-10 px-5">
+        <Link href="/chat">
+          <Button className="mb-5" variant="primary">
+            {t("chat:back_to_chat")}
+          </Button>
+        </Link>
+        <Card className="mb-5 shadow-sm hover:shadow-none">
+          <CardHeader>
+            <h2 className="font-bold text-xl">
+              {t("accountSection", { ns: "config" })}
+            </h2>
+          </CardHeader>
 
-        <CardBody className="flex flex-col items-stretch max-w-max gap-2">
-          <div className="flex gap-5 items-center">
-            <p>
-              <strong>{t("email")}:</strong> <span>{user.email}</span>
-            </p>
-            <Link href={"/logout"}>
-              <Button className="px-3 py-2" variant="secondary">
-                {t("logoutButton")}
-              </Button>
-            </Link>
-          </div>
-          <StripePricingOrManageButton />
-        </CardBody>
-      </Card>
+          <CardBody className="flex flex-col items-stretch max-w-max gap-2">
+            <div className="flex gap-5 items-center">
+              <p>
+                <strong>{t("email")}:</strong> <span>{user.email}</span>
+              </p>
+              <Link href={"/logout"}>
+                <Button className="px-3 py-2" variant="secondary">
+                  {t("logoutButton")}
+                </Button>
+              </Link>
+            </div>
+            <StripePricingOrManageButton />
+          </CardBody>
+        </Card>
+        <Card className="mb-5 shadow-sm hover:shadow-none">
+          <CardHeader>
+            <h2 className="font-bold text-xl">
+              {t("settings", { ns: "config" })}
+            </h2>
+          </CardHeader>
 
-      <Card className="mb-5 shadow-sm hover:shadow-none">
-        <CardHeader>
-          <h2 className="font-bold text-xl">
-            {t("settings", { ns: "config" })}
-          </h2>
-        </CardHeader>
+          <CardBody>
+            <LanguageSelect />
 
-        <CardBody>
-          <LanguageSelect />
+            <ThemeSelect />
+          </CardBody>
+        </Card>
+        <Card className="mb-5 shadow-sm hover:shadow-none">
+          <CardHeader>
+            <h2 className="font-bold text-xl">
+              {t("brainUsage", { ns: "user" })}
+            </h2>
+          </CardHeader>
 
-          <ThemeSelect />
-        </CardBody>
-      </Card>
+          <CardBody>
+            <UserStatistics />
+          </CardBody>
+        </Card>
+        <Card className="mb-5 shadow-sm hover:shadow-none">
+          <CardHeader>
+            <h2 className="font-bold text-xl">
+              {t("apiKey", { ns: "config" })}
+            </h2>
+          </CardHeader>
 
-      <Card className="mb-5 shadow-sm hover:shadow-none">
-        <CardHeader>
-          <h2 className="font-bold text-xl">
-            {t("brainUsage", { ns: "user" })}
-          </h2>
-        </CardHeader>
-
-        <CardBody>
-          <UserStatistics />
-        </CardBody>
-      </Card>
-
-      <Card className="mb-5 shadow-sm hover:shadow-none">
-        <CardHeader>
-          <h2 className="font-bold text-xl">{t("apiKey", { ns: "config" })}</h2>
-        </CardHeader>
-
-        <CardBody className="p-3 flex flex-col">
-          <ApiKeyConfig />
-        </CardBody>
-      </Card>
-    </main>
+          <CardBody className="p-3 flex flex-col">
+            <ApiKeyConfig />
+          </CardBody>
+        </Card>
+        L
+      </main>
+    </>
   );
 };
 
diff --git a/frontend/lib/components/Footer/index.tsx b/frontend/lib/components/Footer/index.tsx
deleted file mode 100644
index 0c99da94f..000000000
--- a/frontend/lib/components/Footer/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-import { usePathname } from "next/navigation";
-
-import { DISCORD_URL, GITHUB_URL, TWITTER_URL } from "@/lib/config/CONSTANTS";
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-
-const Footer = (): JSX.Element => {
-  const { session } = useSupabase();
-
-  const path = usePathname();
-  const isHomePage = path === "/";
-  const isContactPage = path === "/contact";
-  const isLoginPage = path === "/login";
-
-  if (
-    session?.user !== undefined ||
-    isHomePage ||
-    isContactPage ||
-    isLoginPage
-  ) {
-    return <></>;
-  }
-
-  return (
-    <footer className="bg-white dark:bg-black border-t dark:border-white/10 mt-auto py-4">
-      <div className="max-w-screen-xl mx-auto flex justify-center items-center gap-4">
-        <a
-          href={GITHUB_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Quivr GitHub"
-        >
-          <img
-            className="h-8 w-auto dark:invert"
-            src="/github.svg"
-            alt="GitHub"
-          />
-        </a>
-        <a
-          href={TWITTER_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Quivr Twitter"
-        >
-          <img className="h-8 w-auto" src="/twitter.svg" alt="Twitter" />
-        </a>
-        <a
-          href={DISCORD_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Quivr Discord"
-        >
-          <img className="h-8 w-auto" src="/discord.svg" alt="Discord" />
-        </a>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;
diff --git a/frontend/lib/components/NavBar/components/Logo.tsx b/frontend/lib/components/Logo/Logo.tsx
similarity index 100%
rename from frontend/lib/components/NavBar/components/Logo.tsx
rename to frontend/lib/components/Logo/Logo.tsx
diff --git a/frontend/lib/components/NavBar/components/Header/hooks/useHeader.ts b/frontend/lib/components/NavBar/components/Header/hooks/useHeader.ts
deleted file mode 100644
index d06520fb8..000000000
--- a/frontend/lib/components/NavBar/components/Header/hooks/useHeader.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable */
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { useEffect, useRef, useState } from "react";
-
-export const useHeader = () => {
-  const [hidden, setHidden] = useState(false);
-  const scrollPos = useRef<number>(0);
-
-  const { session } = useSupabase();
-  useEffect(() => {
-    const handleScroll = (e: Event) => {
-      if (session?.user !== undefined) {
-        setHidden(false);
-        return;
-      }
-
-      const target = e.currentTarget as Window;
-      if (target.scrollY > scrollPos.current) {
-        setHidden(true);
-      } else {
-        setHidden(false);
-      }
-      scrollPos.current = target.scrollY;
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  return {
-    hidden,
-  };
-};
diff --git a/frontend/lib/components/NavBar/components/Header/index.tsx b/frontend/lib/components/NavBar/components/Header/index.tsx
deleted file mode 100644
index d49384bb9..000000000
--- a/frontend/lib/components/NavBar/components/Header/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { motion } from "framer-motion";
-
-import { useHeader } from "./hooks/useHeader";
-
-export const Header = ({
-  children,
-}: {
-  children: React.ReactNode;
-}): JSX.Element => {
-  const { hidden } = useHeader();
-
-  return (
-    <motion.header
-      animate={{
-        y: hidden ? "-100%" : "0%",
-        transition: { ease: "circOut" },
-      }}
-      className="sticky top-0 w-full border-b border-b-black/10 dark:border-b-white/25 bg-white dark:bg-black z-20"
-    >
-      <nav className="max-w-screen-xl mx-auto py-1 flex items-center justify-between gap-8">
-        {children}
-      </nav>
-    </motion.header>
-  );
-};
diff --git a/frontend/lib/components/NavBar/components/MobileMenu.tsx b/frontend/lib/components/NavBar/components/MobileMenu.tsx
deleted file mode 100644
index ed759dc87..000000000
--- a/frontend/lib/components/NavBar/components/MobileMenu.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable */
-import { useState } from "react";
-
-import { NavItems } from "./NavItems";
-
-export const MobileMenu = (): JSX.Element => {
-  const [open, setOpen] = useState(false); 
-
-  return (
-    <div className="md:hidden flex flex-row items-center justify-between  px-6 sm:hidden">
-        <NavItems
-            setOpen={setOpen}
-            className="text-3xl gap-10"
-        />
-    </div>
-);
-};
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/AuthButtons.tsx b/frontend/lib/components/NavBar/components/NavItems/components/AuthButtons.tsx
deleted file mode 100644
index da8e36420..000000000
--- a/frontend/lib/components/NavBar/components/NavItems/components/AuthButtons.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useTranslation } from "react-i18next";
-
-import Button from "@/lib/components/ui/Button";
-
-export const AuthButtons = (): JSX.Element => {
-  const pathname = usePathname();
-  const { t } = useTranslation();
-
-  if (pathname === "/login") {
-    return (
-      <Link href={"/login"}>
-        <Button variant={"secondary"}>{t("loginButton")}</Button>
-      </Link>
-    );
-  }
-  if (pathname === "/login") {
-    return (
-      <Link href={"/login"}>
-        <Button variant={"secondary"}>{t("signUpButton")}</Button>
-      </Link>
-    );
-  }
-
-  return (
-    <Link href={"/login"}>
-      <Button data-testid="login-button" variant={"secondary"}>
-        {t("loginButton")}
-      </Button>
-    </Link>
-  );
-};
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/NavLink.tsx b/frontend/lib/components/NavBar/components/NavItems/components/NavLink.tsx
deleted file mode 100644
index c13fedcbb..000000000
--- a/frontend/lib/components/NavBar/components/NavItems/components/NavLink.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable */
-import Link from "next/link";
-import { Dispatch, ReactNode, SetStateAction } from "react";
-
-interface NavLinkProps {
-  children: ReactNode;
-  to: string;
-  setOpen?: Dispatch<SetStateAction<boolean>>;
-}
-
-export const NavLink = ({
-  children,
-  to,
-  setOpen,
-}: NavLinkProps): JSX.Element => {
-  return (
-    <li className="group relative">
-      <Link onClick={() => setOpen && setOpen(false)} href={to}>
-        {children}
-      </Link>
-      <hr className="aboslute top-full border border-transparent border-b-primary dark:border-b-white scale-x-0 group-hover:scale-x-100 group-focus-within:scale-x-100 transition-transform" />
-    </li>
-  );
-};
diff --git a/frontend/lib/components/NavBar/components/NavItems/index.tsx b/frontend/lib/components/NavBar/components/NavItems/index.tsx
deleted file mode 100644
index 572b9f429..000000000
--- a/frontend/lib/components/NavBar/components/NavItems/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-import { Dispatch, HTMLAttributes, SetStateAction } from "react";
-
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { cn } from "@/lib/utils";
-
-import { AuthButtons } from "./components/AuthButtons";
-import { NavLink } from "./components/NavLink";
-
-interface NavItemsProps extends HTMLAttributes<HTMLUListElement> {
-  setOpen?: Dispatch<SetStateAction<boolean>>;
-}
-
-export const NavItems = ({
-  className,
-  setOpen,
-  ...props
-}: NavItemsProps): JSX.Element => {
-  const { session } = useSupabase();
-  const isUserLoggedIn = session?.user !== undefined;
-
-  return (
-    <ul
-      className={cn(
-        "flex flex-row items-center gap-4 text-sm flex-1",
-        className
-      )}
-      {...props}
-    >
-      {!isUserLoggedIn && (
-        <>
-          <NavLink setOpen={setOpen} to="https://github.com/StanGirard/quivr">
-            Github
-          </NavLink>
-          <NavLink setOpen={setOpen} to="https://discord.gg/HUpRgp2HG8">
-            Discord
-          </NavLink>
-        </>
-      )}
-      <div className="flex sm:flex-1 sm:justify-end flex-row items-center justify-center sm:flex-row gap-5 sm:gap-2">
-        {!isUserLoggedIn && <AuthButtons />}
-      </div>
-    </ul>
-  );
-};
diff --git a/frontend/lib/components/NavBar/index.tsx b/frontend/lib/components/NavBar/index.tsx
deleted file mode 100644
index 9f6cbda25..000000000
--- a/frontend/lib/components/NavBar/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-
-import { Header } from "./components/Header";
-import { Logo } from "./components/Logo";
-import { MobileMenu } from "./components/MobileMenu";
-import { NavItems } from "./components/NavItems";
-
-export const NavBar = (): JSX.Element => {
-  const path = usePathname();
-  const pageHasSidebar =
-    path === null ||
-    path.startsWith("/chat") ||
-    path.startsWith("/brains-management");
-
-  const isHomePage = path === "/";
-  const isContactPage = path === "/contact";
-  const isLoginPage = path === "/login";
-
-  if (pageHasSidebar || isHomePage || isContactPage || isLoginPage) {
-    return <></>;
-  }
-
-  return (
-    <Header>
-      <Logo />
-      <NavItems className="hidden sm:flex" />
-      <MobileMenu />
-    </Header>
-  );
-};
diff --git a/frontend/lib/components/Sidebar/components/SidebarHeader.tsx b/frontend/lib/components/Sidebar/components/SidebarHeader.tsx
index 1f1eb77a2..92b833aee 100644
--- a/frontend/lib/components/Sidebar/components/SidebarHeader.tsx
+++ b/frontend/lib/components/Sidebar/components/SidebarHeader.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { LuPanelLeft } from "react-icons/lu";
 
-import { Logo } from "@/lib/components/NavBar/components/Logo";
+import { Logo } from "@/lib/components/Logo/Logo";
 
 type SidebarProps = {
   setOpen: Dispatch<SetStateAction<boolean>>;
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index dde77f8fd..5f55add62 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -6,8 +6,6 @@
   "email": "Email",
   "or": "or",
   "and": "and",
-  "loginButton": "Login",
-  "signUpButton": "Sign up",
   "logoutButton": "Logout",
   "updateButton": "Update",
   "uploadButton": "Upload",
diff --git a/frontend/public/locales/es/translation.json b/frontend/public/locales/es/translation.json
index e73abf05a..1458b5bf5 100644
--- a/frontend/public/locales/es/translation.json
+++ b/frontend/public/locales/es/translation.json
@@ -12,7 +12,6 @@
   "Explore": "Explorar",
   "lang": "es-ES",
   "loading": "Cargando...",
-  "loginButton": "Iniciar sesión",
   "logoutButton": "Cerrar sesión",
   "newChatButton": "Nueva conversación",
   "or": "o",
@@ -20,7 +19,6 @@
   "Owner": "Propietario",
   "resetButton": "Restaurar",
   "shareButton": "Compartir",
-  "signUpButton": "Registrarse",
   "title": "Quivr - Tu segundo cerebro con IA generativa",
   "toastDismiss": "cerrar",
   "updateButton": "Actualizar",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 206a906e4..400b52f4f 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -6,8 +6,7 @@
   "email": "Email",
   "or": "ou",
   "and": "et",
-  "loginButton": "Connexion",
-  "signUpButton": "S'inscrire",
+
   "logoutButton": "Déconnexion",
   "updateButton": "Mettre à jour",
   "uploadButton": "Télécharger",
diff --git a/frontend/public/locales/pt-br/translation.json b/frontend/public/locales/pt-br/translation.json
index 6870538d7..0c070991b 100644
--- a/frontend/public/locales/pt-br/translation.json
+++ b/frontend/public/locales/pt-br/translation.json
@@ -6,8 +6,6 @@
   "email": "Email",
   "or": "ou",
   "and": "e",
-  "loginButton": "Entrar",
-  "signUpButton": "Cadastre-se",
   "logoutButton": "Sair",
   "updateButton": "Atualizar",
   "uploadButton": "Enviar",
diff --git a/frontend/public/locales/ru/translation.json b/frontend/public/locales/ru/translation.json
index 5ab81356c..93aecfaf4 100644
--- a/frontend/public/locales/ru/translation.json
+++ b/frontend/public/locales/ru/translation.json
@@ -6,8 +6,6 @@
   "email": "Email",
   "or": "или",
   "and": "и",
-  "loginButton": "Войти",
-  "signUpButton": "Зарегистрироваться",
   "logoutButton": "Выйти",
   "updateButton": "Обновить",
   "uploadButton": "Загрузить",
diff --git a/frontend/public/locales/zh-cn/translation.json b/frontend/public/locales/zh-cn/translation.json
index 054425f42..3b8fcc244 100644
--- a/frontend/public/locales/zh-cn/translation.json
+++ b/frontend/public/locales/zh-cn/translation.json
@@ -6,8 +6,6 @@
   "email": "Email",
   "or": "或",
   "and": "和",
-  "loginButton": "登录",
-  "signUpButton": "注册",
   "logoutButton": "注销",
   "updateButton": "更新",
   "uploadButton": "上传",