Brain sidebar layout change (#657)

Created 3-grid layout in Brain
6529-Collections · Feb 9, 2025 · 4b16153 · 4b16153
1 parent c5cdec9
commit 4b16153
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 95 deletions.
diff --git a/components/brain/BrainDesktop.tsx b/components/brain/BrainDesktop.tsx
@@ -1,6 +1,9 @@
 import React, { ReactNode, useEffect, useState } from "react";
+import { motion } from "framer-motion";
 import BrainLeftSidebar from "./left-sidebar/BrainLeftSidebar";
-import BrainRightSidebar, { SidebarTab } from "./right-sidebar/BrainRightSidebar";
+import BrainRightSidebar, {
+  SidebarTab,
+} from "./right-sidebar/BrainRightSidebar";
 import { useRouter } from "next/router";
 import BrainDesktopDrop from "./BrainDesktopDrop";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
@@ -10,14 +13,15 @@ import { commonApiFetch } from "../../services/api/common-api";
 import { ExtendedDrop } from "../../helpers/waves/drop.helpers";
 
 interface Props {
-  children: ReactNode;
+  readonly children: ReactNode;
 }
 
 export const BrainDesktop: React.FC<Props> = ({ children }) => {
   const router = useRouter();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [showRightSidebar, setShowRightSidebar] = useState(false);
   const [sidebarTab, setSidebarTab] = useState<SidebarTab>(SidebarTab.ABOUT);
+
   const { data: drop } = useQuery<ApiDrop>({
     queryKey: [QueryKey.DROP, { drop_id: router.query.drop as string }],
     queryFn: async () =>
@@ -29,7 +33,12 @@ export const BrainDesktop: React.FC<Props> = ({ children }) => {
   });
 
   useEffect(() => {
-    setShowRightSidebar(!!router.query.wave);
+    if (router.query.wave) {
+      setShowRightSidebar(true);
+    } else {
+      setShowRightSidebar(false);
+      setIsCollapsed(false);
+    }
   }, [router.query.wave]);
 
   const onDropClose = () => {
@@ -53,50 +62,61 @@ export const BrainDesktop: React.FC<Props> = ({ children }) => {
     );
   };
 
-  const contentClasses = showRightSidebar
-    ? "tailwind-scope tw-relative tw-flex tw-flex-grow tw-w-full min-[992px]:tw-px-3 min-[992px]:tw-max-w-[960px] max-[1100px]:tw-max-w-[950px] min-[1200px]:tw-max-w-[1050px] min-[1300px]:tw-max-w-[1150px] min-[1400px]:tw-max-w-[1250px] min-[1500px]:tw-max-w-[1280px] tw-mx-auto"
-    : "tw-w-full min-[992px]:tw-px-3 min-[992px]:tw-max-w-[960px] max-[1100px]:tw-max-w-[950px] min-[1200px]:tw-max-w-[1050px] min-[1300px]:tw-max-w-[1150px] min-[1400px]:tw-max-w-[1250px] min-[1500px]:tw-max-w-[1280px] tw-mx-auto";
-
   const isDropOpen =
-   drop && drop?.id?.toLowerCase() === (router.query.drop as string)?.toLowerCase();
+    drop &&
+    drop?.id?.toLowerCase() === (router.query.drop as string)?.toLowerCase();
+
+  const contentClasses = `tw-relative tw-flex tw-flex-grow tw-w-full min-[992px]:tw-px-3 min-[992px]:tw-max-w-[960px] max-[1100px]:tw-max-w-[950px] min-[1200px]:tw-max-w-[1050px] min-[1300px]:tw-max-w-[1150px] min-[1400px]:tw-max-w-[1250px] min-[1500px]:tw-max-w-[1280px] tw-mx-auto
+    ${
+      showRightSidebar && !isCollapsed && !isDropOpen
+        ? "xl:tw-mr-[21rem] xl:tw-ml-3 min-[1600px]:tw-max-w-full min-[1920px]:tw-mx-auto min-[1920px]:tw-max-w-[1280px]"
+        : ""
+    }`;
 
   return (
     <div className="tw-relative tw-min-h-screen tw-flex tw-flex-col">
-      <div className={`tailwind-scope tw-relative tw-flex tw-flex-grow ${
-        isDropOpen ? 'tw-w-full xl:tw-pl-6' : contentClasses
-      }`}>
-        <div className={`tw-h-screen lg:tw-h-[calc(100vh-5.5rem)] min-[1200px]:tw-h-[calc(100vh-6.25rem)] tw-flex-grow tw-flex tw-flex-col lg:tw-flex-row tw-justify-between tw-gap-x-6 tw-gap-y-4 tw-transition-all tw-duration-300`}>
-          <BrainLeftSidebar 
-            activeWaveId={router.query.wave as string}
-          />
-          <div className="tw-flex-grow xl:tw-relative">
-            {children}
-            {isDropOpen && (
-              <div className="tw-absolute tw-inset-0 tw-z-[1000]">
-                <BrainDesktopDrop
-                  drop={{
-                    ...drop,
-                    stableKey: drop.id,
-                    stableHash: drop.id,
-                  }}
-                  onClose={onDropClose}
-                />
-              </div>
-            )}
+      <div className="tw-relative tw-flex tw-flex-grow">
+        <motion.div
+          layout={!isDropOpen}
+          className={isDropOpen ? "tw-w-full xl:tw-pl-6" : contentClasses}
+          transition={{ duration: 0.3 }}
+          style={{ transition: "none" }}
+        >
+          <div className="tw-h-screen lg:tw-h-[calc(100vh-5.5rem)] min-[1200px]:tw-h-[calc(100vh-6.25rem)] tw-flex-grow tw-flex tw-flex-col lg:tw-flex-row tw-justify-between tw-gap-x-6 tw-gap-y-4">
+            <BrainLeftSidebar activeWaveId={router.query.wave as string} />
+            <div className="tw-flex-grow xl:tw-relative">
+              {children}
+              {isDropOpen && (
+                <div
+                  className="tw-absolute tw-inset-0 tw-z-[1000]"
+                  style={{ transition: "none" }}
+                >
+                  <BrainDesktopDrop
+                    drop={{
+                      ...drop,
+                      stableKey: drop.id,
+                      stableHash: drop.id,
+                    }}
+                    onClose={onDropClose}
+                  />
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-
-        {showRightSidebar && !isDropOpen && (
-          <BrainRightSidebar
-            isCollapsed={isCollapsed}
-            setIsCollapsed={setIsCollapsed}
-            waveId={router.query.wave as string}
-            onDropClick={onDropClick}
-            activeTab={sidebarTab}
-            setActiveTab={setSidebarTab}
-          />
-        )}
+        </motion.div>
       </div>
+
+      {showRightSidebar && !isDropOpen && router.query.wave && (
+        <BrainRightSidebar
+          key="right-sidebar"
+          isCollapsed={isCollapsed}
+          setIsCollapsed={setIsCollapsed}
+          waveId={router.query.wave as string}
+          onDropClick={onDropClick}
+          activeTab={sidebarTab}
+          setActiveTab={setSidebarTab}
+        />
+      )}
     </div>
   );
 };

diff --git a/components/brain/content/BrainContentPinnedWaves.tsx b/components/brain/content/BrainContentPinnedWaves.tsx
@@ -102,7 +102,7 @@ const BrainContentPinnedWaves: React.FC = () => {
   };
 
   return (
-    <div className="tw-relative tw-h-8 tw-mb-2">
+    <div className="tw-relative tw-h-8 tw-mb-2 tw-mr-2">
       {showLeftArrow && (
         <button
           ref={leftArrowRef}

diff --git a/components/brain/left-sidebar/BrainLeftSidebar.tsx b/components/brain/left-sidebar/BrainLeftSidebar.tsx
@@ -11,9 +11,7 @@ const BrainLeftSidebar: React.FC<BrainLeftSidebarProps> = ({
   activeWaveId,
 }) => {
   return (
-    <div
-      className="tw-flex-shrink-0 tw-relative tw-flex tw-flex-col h-screen lg:tw-h-[calc(100vh-5.5rem)] tw-overflow-y-auto lg:tw-w-[20.5rem] tw-w-full no-scrollbar"
-    >
+    <div className="tw-flex-shrink-0 tw-relative tw-flex tw-flex-col h-screen lg:tw-h-[calc(100vh-5.5rem)] tw-overflow-y-auto lg:tw-w-80 tw-w-full no-scrollbar">
       <div className="tw-pt-4 tw-pb-4 tw-flex-1 tw-px-4 md:tw-px-2 lg:tw-px-0 tw-gap-y-4 tw-flex-col tw-flex">
         <BrainLeftSidebarViewChange />
         <BrainLeftSidebarSearchWave />

diff --git a/components/brain/left-sidebar/BrainLeftSidebarViewChange.tsx b/components/brain/left-sidebar/BrainLeftSidebarViewChange.tsx
@@ -30,6 +30,11 @@ export const BrainLeftSidebarViewChange: React.FC<
         : "tw-text-iron-400 hover:tw-text-iron-300"
     }`;
 
+  const onNotificationsClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    router.push('/my-stream/notifications', undefined, { shallow: true });
+  };
+
   return (
     <div className="tw-flex tw-justify-center tw-items-center tw-p-1 tw-gap-1 tw-w-full tw-h-10 tw-bg-iron-950 tw-border tw-border-solid tw-border-iron-800 tw-rounded-lg tw-relative">
       <div
@@ -44,6 +49,7 @@ export const BrainLeftSidebarViewChange: React.FC<
       </Link>
       <Link
         href="/my-stream/notifications"
+        onClick={onNotificationsClick}
         className={getLinkClasses("/my-stream/notifications")}
       >
         <span className="tw-font-semibold tw-text-sm">Notifications</span>

diff --git a/components/brain/my-stream/layout/MyStreamLayout.tsx b/components/brain/my-stream/layout/MyStreamLayout.tsx
@@ -1,12 +1,10 @@
 import { ReactNode, useContext, useEffect } from "react";
 import Head from "next/head";
 import dynamic from "next/dynamic";
-import { motion, AnimatePresence } from "framer-motion";
 import HeaderPlaceholder from "../../../header/HeaderPlaceholder";
 import Breadcrumb, { Crumb } from "../../../breadcrumb/Breadcrumb";
 import Brain from "../../Brain";
 import { AuthContext } from "../../../auth/Auth";
-import { useRouter } from "next/router";
 import { createBreakpoint } from "react-use";
 import useCapacitor from "../../../../hooks/useCapacitor";
 
@@ -23,8 +21,6 @@ export default function MyStreamLayout({
   readonly children: ReactNode;
 }) {
   const { setTitle, title, showWaves } = useContext(AuthContext);
-  const router = useRouter();
-  const breakpoint = useBreakpoint();
 
   const breadcrumbs: Crumb[] = [
     { display: "Home", href: "/" },
@@ -72,27 +68,7 @@ export default function MyStreamLayout({
         {showWaves && (
           <div className="tw-flex-1" id="my-stream-content">
             <Brain>
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={router.pathname}
-                  initial={{
-                    opacity: 0,
-                    x: breakpoint === "S" ? 20 : 0,
-                  }}
-                  animate={{
-                    opacity: 1,
-                    x: 0,
-                  }}
-                  exit={{
-                    opacity: 0,
-                    x: breakpoint === "S" ? -20 : 0,
-                  }}
-                  transition={{ duration: 0.2, ease: "easeInOut" }}
-                  className={containerClassName}
-                >
-                  {children}
-                </motion.div>
-              </AnimatePresence>
+              <div className={containerClassName}>{children}</div>
             </Brain>
           </div>
         )}

diff --git a/components/brain/right-sidebar/BrainRightSidebar.tsx b/components/brain/right-sidebar/BrainRightSidebar.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
+import { motion } from "framer-motion";
 import { ApiWave } from "../../../generated/models/ApiWave";
 import { commonApiFetch } from "../../../services/api/common-api";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { QueryKey } from "../../react-query-wrapper/ReactQueryWrapper";
-import { motion } from "framer-motion";
 import { ExtendedDrop } from "../../../helpers/waves/drop.helpers";
 import { WaveContent } from "./WaveContent";
 
@@ -52,18 +52,27 @@ const BrainRightSidebar: React.FC<BrainRightSidebarProps> = ({
   return (
     <motion.div
       className="tw-fixed tw-right-0 tw-top-0 tw-h-screen tw-z-40 tw-bg-iron-950 tw-flex tw-flex-col
-        tw-w-full lg:tw-w-[20.5rem] tw-border-l-2 tw-border-iron-800 tw-border-solid tw-border-y-0 
-        tw-border-r-0 tw-shadow-2xl"
+        tw-w-[20.5rem] tw-border-l-2 tw-border-iron-800 tw-border-solid tw-border-y-0 
+        tw-border-r-0 tw-shadow-2xl
+        lg:tw-bg-opacity-95 xl:tw-bg-opacity-100
+        lg:tw-backdrop-blur xl:tw-backdrop-blur-none"
       initial={false}
       animate={{ x: isCollapsed ? "100%" : 0 }}
-      transition={{ duration: 0.3, ease: "easeInOut" }}
+      transition={{
+        duration: 0.2,
+        ease: [0.4, 0, 0.2, 1],
+        x: { duration: 0.2 },
+      }}
     >
       <button
         type="button"
         aria-label="Toggle sidebar"
-        className="tw-absolute -tw-left-[2.625rem] tw-z-50 tw-top-28 tw-bg-iron-950 tw-border tw-border-solid tw-border-r-0
-          tw-border-iron-600 tw-size-10 tw-text-iron-400 hover:tw-text-iron-50 tw-rounded-l-lg
-          focus:tw-outline-none tw-flex tw-items-center tw-justify-center"
+        className={`tw-absolute tw-z-50 tw-top-28 tw-bg-primary-500 desktop-hover:hover:tw-opacity-80 tw-border tw-border-solid
+          tw-border-primary-400 tw-size-7 tw-text-white desktop-hover:hover:tw-text-white tw-ring-1 tw-ring-white/20
+          focus:tw-outline-none tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-300 tw-ease-out
+          ${isCollapsed ? 
+            "tw-border-r-0 -tw-left-8 tw-rounded-l-lg" : 
+            "tw-border-l-0 -tw-left-5 tw-rounded-lg"}`}
         onClick={() => setIsCollapsed(!isCollapsed)}
       >
         <svg

diff --git a/components/brain/right-sidebar/WaveContent.tsx b/components/brain/right-sidebar/WaveContent.tsx
@@ -10,7 +10,6 @@ import BrainRightSidebarContent from "./BrainRightSidebarContent";
 import BrainRightSidebarFollowers from "./BrainRightSidebarFollowers";
 import { Mode, SidebarTab } from "./BrainRightSidebar";
 import { useWaveState, WaveVotingState } from "../../../hooks/useWaveState";
-import { motion } from "framer-motion";
 import { WaveSmallLeaderboard } from "../../waves/small-leaderboard/WaveSmallLeaderboard";
 import { WaveLeaderboardRightSidebarVoters } from "../../waves/leaderboard/sidebar/WaveLeaderboardRightSidebarVoters";
 import { WaveLeaderboardRightSidebarActivityLogs } from "../../waves/leaderboard/sidebar/WaveLeaderboardRightSidebarActivityLogs";
@@ -117,22 +116,14 @@ export const WaveContent: React.FC<WaveContentProps> = ({
 
   return (
     <>
-      <div className="tw-px-2 tw-mt-4">
+      <div className="tw-px-4 tw-mt-4">
         <TabToggle
           options={options}
           activeKey={activeTab}
           onSelect={(key) => setActiveTab(key as SidebarTab)}
         />
       </div>
-      <motion.div
-        key={activeTab}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 0.2 }}
-      >
-        {rankWaveComponents[activeTab]}
-      </motion.div>
+      <div>{rankWaveComponents[activeTab]}</div>
     </>
   );
 };
diff --git a/components/waves/CreateDropActions.tsx b/components/waves/CreateDropActions.tsx
@@ -69,7 +69,7 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
                       isRequiredMetadataMissing
                         ? "tw-text-yellow"
                         : "tw-text-iron-400"
-                    } tw-bg-iron-800 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0`}
+                    } tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/80 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0`}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -105,7 +105,7 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
                         isRequiredMediaMissing
                           ? "tw-text-yellow"
                           : "tw-text-iron-400"
-                      } tw-bg-iron-800 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7  focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0 tw-cursor-pointer`}
+                      } tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/70 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0 tw-cursor-pointer`}
                     >
                       <input
                         type="file"
@@ -147,7 +147,7 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
                   isRequiredMetadataMissing || isRequiredMediaMissing
                     ? "tw-text-yellow"
                     : "tw-text-iron-400"
-                } tw-bg-iron-800 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0`}
+                } tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/70 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0`}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

diff --git a/components/waves/CreateDropDropModeToggle.tsx b/components/waves/CreateDropDropModeToggle.tsx
@@ -35,7 +35,7 @@ export const CreateDropDropModeToggle: React.FC<
       return `${baseClasses} tw-bg-indigo-600 tw-text-white desktop-hover:hover:tw-bg-indigo-500 active:tw-bg-indigo-700 focus-visible:tw-outline-indigo-500 tw-ring-2 tw-ring-indigo-400/40 tw-ring-offset-1 tw-ring-offset-iron-900`;
     }
 
-    return `${baseClasses} tw-bg-iron-800 tw-backdrop-blur-sm tw-text-iron-500 desktop-hover:hover:tw-bg-iron-700 active:tw-bg-iron-700/90 focus-visible:tw-outline-iron-700 tw-ring-1 tw-ring-iron-700/50`;
+    return `${baseClasses} tw-bg-iron-700 tw-backdrop-blur-sm tw-text-iron-500 desktop-hover:hover:tw-bg-iron-700/70 active:tw-bg-iron-700/90 focus-visible:tw-outline-iron-700 tw-ring-1 tw-ring-iron-700/50`;
   }, [isDisabled, isDropMode]);
 
   const getRestrictionMessage = (

diff --git a/components/waves/StormButton.tsx b/components/waves/StormButton.tsx
@@ -33,8 +33,8 @@ const StormButton: React.FC<StormButtonProps> = ({
           type="button"
           className={`tw-flex tw-items-center tw-justify-center tw-flex-shrink-0  tw-rounded-full tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0 ${
             canAddPart && !submitting
-              ? "tw-cursor-pointer tw-text-iron-400 hover:tw-text-primary-400 hover:tw-bg-primary-300/20 tw-bg-iron-800"
-              : "tw-cursor-default tw-text-iron-600 hover:tw-text-iron-600 tw-bg-iron-900"
+              ? "tw-cursor-pointer tw-text-iron-400 desktop-hover:hover:tw-text-primary-400 desktop-hover:hover:tw-bg-primary-300/20 tw-bg-iron-700"
+              : "tw-cursor-default tw-text-iron-600 desktop-hover:hover:tw-text-iron-600 tw-bg-iron-900"
           }`}
         >
           <svg

diff --git a/components/waves/header/WaveHeader.tsx b/components/waves/header/WaveHeader.tsx
@@ -52,7 +52,7 @@ export default function WaveHeader({
           className={`${
             useRounded
               ? "tw-rounded-t-xl tw-ring-1 tw-ring-inset tw-ring-iron-800"
-              : ""
+              : "tw-rounded-t-xl"
           } tw-overflow-hidden`}
         >
           <div