feat(frontend): UI / UX Notifications (#2826)

# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
QuivrHQ · Jul 10, 2024 · 6056450 · 6056450
1 parent f496e01
commit 6056450
Show file tree

Hide file tree

Showing 20 changed files with 500 additions and 334 deletions.
diff --git a/frontend/app/App.tsx b/frontend/app/App.tsx
@@ -17,6 +17,7 @@ import {
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { ChatsProvider } from "@/lib/context/ChatsProvider";
 import { MenuProvider } from "@/lib/context/MenuProvider/Menu-provider";
+import { NotificationsProvider } from "@/lib/context/NotificationsProvider/notifications-provider";
 import { OnboardingProvider } from "@/lib/context/OnboardingProvider/Onboarding-provider";
 import { SearchModalProvider } from "@/lib/context/SearchModalProvider/search-modal-provider";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
@@ -90,17 +91,19 @@ const AppWithQueryClient = ({ children }: PropsWithChildren): JSX.Element => {
         <BrainProvider>
           <KnowledgeToFeedProvider>
             <BrainCreationProvider>
-              <MenuProvider>
-                <OnboardingProvider>
-                  <FromConnectionsProvider>
-                    <ChatsProvider>
-                      <ChatProvider>
-                        <App>{children}</App>
-                      </ChatProvider>
-                    </ChatsProvider>
-                  </FromConnectionsProvider>
-                </OnboardingProvider>
-              </MenuProvider>
+              <NotificationsProvider>
+                <MenuProvider>
+                  <OnboardingProvider>
+                    <FromConnectionsProvider>
+                      <ChatsProvider>
+                        <ChatProvider>
+                          <App>{children}</App>
+                        </ChatProvider>
+                      </ChatsProvider>
+                    </FromConnectionsProvider>
+                  </OnboardingProvider>
+                </MenuProvider>
+              </NotificationsProvider>
             </BrainCreationProvider>
           </KnowledgeToFeedProvider>
         </BrainProvider>

diff --git a/frontend/lib/components/Menu/Menu.module.scss b/frontend/lib/components/Menu/Menu.module.scss
@@ -1,9 +1,18 @@
+@use "styles/BoxShadow.module.scss";
+@use "styles/ScreenSizes.module.scss";
 @use "styles/Spacings.module.scss";
+@use "styles/Variables.module.scss";
 @use "styles/ZIndexes.module.scss";
 
 .menu_container {
   background-color: var(--background-1);
   border-right: 1px solid var(--border-1);
+  width: Variables.$menuWidth;
+  transition: width 0.2s ease-in-out;
+
+  &.hidden {
+    width: 0;
+  }
 
   .menu_wrapper {
     padding-top: Spacings.$spacing05;
@@ -52,4 +61,26 @@
   &.shifted {
     margin-left: 180px;
   }
-}
+}
+
+.notifications_panel {
+  width: 400px;
+  position: absolute;
+  top: Variables.$pageHeaderHeight;
+  min-height: calc(100% - Variables.$pageHeaderHeight);
+  max-height: calc(100% - Variables.$pageHeaderHeight);
+  overflow: scroll;
+  left: calc(Variables.$menuWidth + 1px);
+  z-index: ZIndexes.$overlay;
+  border-right: 1px solid var(--border-1);
+  box-shadow: BoxShadow.$small;
+  background-color: var(--background-0);
+
+  @media (max-width: ScreenSizes.$small) {
+    width: 100%;
+    left: 0;
+    min-height: 100vh;
+    max-height: 100vh;
+    top: 0;
+  }
+}
diff --git a/frontend/lib/components/Menu/Menu.tsx b/frontend/lib/components/Menu/Menu.tsx
@@ -7,12 +7,15 @@ import { useChatsList } from "@/app/chat/[chatId]/hooks/useChatsList";
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { nonProtectedPaths } from "@/lib/config/routesConfig";
 import { useMenuContext } from "@/lib/context/MenuProvider/hooks/useMenuContext";
+import { useNotificationsContext } from "@/lib/context/NotificationsProvider/hooks/useNotificationsContext";
 import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 
 import styles from "./Menu.module.scss";
 import { AnimatedDiv } from "./components/AnimationDiv";
 import { DiscussionButton } from "./components/DiscussionButton/DiscussionButton";
 import { HomeButton } from "./components/HomeButton/HomeButton";
+import { Notifications } from "./components/Notifications/Notifications";
+import { NotificationsButton } from "./components/NotificationsButton/NotificationsButton";
 import { ProfileButton } from "./components/ProfileButton/ProfileButton";
 import { SocialsButtons } from "./components/SocialsButtons/SocialsButtons";
 import { StudioButton } from "./components/StudioButton/StudioButton";
@@ -21,6 +24,7 @@ import { UpgradeToPlusButton } from "./components/UpgradeToPlusButton/UpgradeToP
 
 export const Menu = (): JSX.Element => {
   const { isOpened } = useMenuContext();
+  const { isVisible } = useNotificationsContext();
   const router = useRouter();
   const pathname = usePathname() ?? "";
   const [isLogoHovered, setIsLogoHovered] = useState<boolean>(false);
@@ -50,50 +54,62 @@ export const Menu = (): JSX.Element => {
   }
 
   return (
-    <MotionConfig transition={{ mass: 1, damping: 10, duration: 0.1 }}>
-      <div className={styles.menu_container}>
-        <AnimatedDiv>
-          <div className={styles.menu_wrapper}>
-            <div
-              className={styles.quivr_logo_wrapper}
-              onClick={() => router.push("/search")}
-              onMouseEnter={() => setIsLogoHovered(true)}
-              onMouseLeave={() => setIsLogoHovered(false)}
-            >
-              <QuivrLogo
-                size={50}
-                color={
-                  isLogoHovered ? "primary" : isDarkMode ? "white" : "black"
-                }
-              />
-            </div>
+    <div>
+      <MotionConfig transition={{ mass: 1, damping: 10, duration: 0.1 }}>
+        <div
+          className={`${styles.menu_container} ${
+            !isOpened ? styles.hidden : ""
+          }`}
+        >
+          <AnimatedDiv>
+            <div className={styles.menu_wrapper}>
+              <div
+                className={styles.quivr_logo_wrapper}
+                onClick={() => router.push("/search")}
+                onMouseEnter={() => setIsLogoHovered(true)}
+                onMouseLeave={() => setIsLogoHovered(false)}
+              >
+                <QuivrLogo
+                  size={50}
+                  color={
+                    isLogoHovered ? "primary" : isDarkMode ? "white" : "black"
+                  }
+                />
+              </div>
 
-            <div className={styles.buttons_wrapper}>
-              <div className={styles.block}>
-                <DiscussionButton />
-                <HomeButton />
-                <StudioButton />
-                <ThreadsButton />
+              <div className={styles.buttons_wrapper}>
+                <div className={styles.block}>
+                  <DiscussionButton />
+                  <HomeButton />
+                  <StudioButton />
+                  <NotificationsButton />
+                  <ThreadsButton />
+                </div>
+                <div className={styles.block}>
+                  <UpgradeToPlusButton />
+                  <ProfileButton />
+                </div>
               </div>
-              <div className={styles.block}>
-                <UpgradeToPlusButton />
-                <ProfileButton />
+              <div className={styles.social_buttons_wrapper}>
+                <SocialsButtons />
               </div>
             </div>
-            <div className={styles.social_buttons_wrapper}>
-              <SocialsButtons />
-            </div>
-          </div>
-        </AnimatedDiv>
-      </div>
-      <div
-        className={`
+          </AnimatedDiv>
+        </div>
+        <div
+          className={`
         ${styles.menu_control_button_wrapper} 
         ${isOpened ? styles.shifted : ""}
         `}
-      >
-        <MenuControlButton />
-      </div>
-    </MotionConfig>
+        >
+          <MenuControlButton />
+        </div>
+      </MotionConfig>
+      {isVisible && (
+        <div className={styles.notifications_panel}>
+          <Notifications />
+        </div>
+      )}
+    </div>
   );
 };
diff --git a/...ons/Notification/Notification.module.scss → ...ons/Notification/Notification.module.scss b/...ons/Notification/Notification.module.scss → ...ons/Notification/Notification.module.scss
@@ -3,7 +3,8 @@
 @use "styles/Typography.module.scss";
 
 .notification_wrapper {
-  padding: Spacings.$spacing03;
+  padding-block: Spacings.$spacing04;
+  padding-inline: Spacings.$spacing06;
   display: flex;
   flex-direction: column;
   gap: Spacings.$spacing02;
@@ -18,25 +19,27 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: Typography.$small;
     overflow: hidden;
     gap: Spacings.$spacing06;
 
     .left {
       display: flex;
       align-items: center;
-      gap: Spacings.$spacing02;
+      gap: Spacings.$spacing03;
       overflow: hidden;
 
       .badge {
         min-width: 6px;
+        max-width: 6px;
         min-height: 6px;
+        max-height: 6px;
         border-radius: Radius.$circle;
         background-color: var(--primary-0);
       }
 
       .title {
         @include Typography.EllipsisOverflow;
+        font-size: Typography.$tiny;
       }
     }
 
@@ -69,7 +72,7 @@
   }
 
   .date {
-    font-size: Typography.$tiny;
+    font-size: Typography.$very-tiny;
     color: var(--text-2);
   }
 }
diff --git a/...tifications/Notification/Notification.tsx → ...tifications/Notification/Notification.tsx b/...tifications/Notification/Notification.tsx → ...tifications/Notification/Notification.tsx
@@ -5,7 +5,7 @@ import { useSupabase } from "@/lib/context/SupabaseProvider";
 
 import styles from "./Notification.module.scss";
 
-import { NotificationType } from "../types/types";
+import { NotificationType } from "../../../types/types";
 
 interface NotificationProps {
   notification: NotificationType;
@@ -50,14 +50,14 @@ export const Notification = ({
             name={notification.read ? "unread" : "read"}
             color="black"
             handleHover={true}
-            size="normal"
+            size="small"
             onClick={() => readNotif()}
           />
           <Icon
             name="delete"
             color="black"
             handleHover={true}
-            size="normal"
+            size="small"
             onClick={() => deleteNotif()}
           />
         </div>

diff --git a/frontend/lib/components/Menu/components/Notifications/Notifications.module.scss b/frontend/lib/components/Menu/components/Notifications/Notifications.module.scss
@@ -0,0 +1,43 @@
+@use "styles/BoxShadow.module.scss";
+@use "styles/Radius.module.scss";
+@use "styles/Spacings.module.scss";
+@use "styles/Typography.module.scss";
+@use "styles/ZIndexes.module.scss";
+
+.notifications_wrapper {
+  position: relative;
+  z-index: ZIndexes.$overlay;
+
+  .notifications_panel_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: Typography.$small;
+    padding-inline: Spacings.$spacing05;
+    padding-top: Spacings.$spacing03;
+    padding-bottom: Spacings.$spacing05;
+
+    .left {
+      display: flex;
+      align-items: center;
+      gap: Spacings.$spacing03;
+
+      .title {
+        color: var(--text-2);
+        font-size: Typography.$small;
+        font-weight: 500;
+      }
+    }
+
+    .buttons {
+      display: flex;
+      gap: Spacings.$spacing02;
+    }
+  }
+
+  .no_notifications {
+    padding: Spacings.$spacing05;
+    font-size: Typography.$tiny;
+    color: var(--text-2);
+  }
+}