From 8abcdc8799c596775c7f3524a5a0edea55ad8906 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 20 Nov 2024 18:29:07 +0100
Subject: [PATCH 01/55] refactor(sidebar): add very basic shadcn sidebar

---
 app/components/layout/sidebar/app-sidebar.tsx |  30 +
 app/components/layout/sidebar/sidebar-old.tsx |  99 +++
 app/components/layout/sidebar/sidebar.tsx     | 836 ++++++++++++++++--
 app/components/marketing/logos.tsx            |   9 +-
 app/components/shared/separator.tsx           |  28 +
 app/components/shared/sheet.tsx               | 137 +++
 app/components/shared/skeleton.tsx            |  15 +
 app/hooks/use-mobile.ts                       |  24 +
 app/routes/_layout+/_layout.tsx               |  71 +-
 package-lock.json                             |  46 +
 package.json                                  |   2 +
 tailwind.config.ts                            |   2 +
 12 files changed, 1177 insertions(+), 122 deletions(-)
 create mode 100644 app/components/layout/sidebar/app-sidebar.tsx
 create mode 100644 app/components/layout/sidebar/sidebar-old.tsx
 create mode 100644 app/components/shared/separator.tsx
 create mode 100644 app/components/shared/sheet.tsx
 create mode 100644 app/components/shared/skeleton.tsx
 create mode 100644 app/hooks/use-mobile.ts

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
new file mode 100644
index 000000000..ea82de16e
--- /dev/null
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -0,0 +1,30 @@
+import { ShelfSidebarLogo } from "~/components/marketing/logos";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+  useSidebar,
+} from "./sidebar";
+
+type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
+
+export default function AppSidebar(props: AppSidebarProps) {
+  const { state } = useSidebar();
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader className={state === "collapsed" ? "p-0" : ""}>
+        <div className="flex items-center mt-2 mb-2">
+          <ShelfSidebarLogo minimized={state === "collapsed"} />
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>This is content of sidebar</SidebarContent>
+
+      <SidebarFooter>this is footer</SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar-old.tsx b/app/components/layout/sidebar/sidebar-old.tsx
new file mode 100644
index 000000000..b32d72635
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-old.tsx
@@ -0,0 +1,99 @@
+import { useRef } from "react";
+import { Link, NavLink, useFetcher, useLoaderData } from "@remix-run/react";
+import { useAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
+import { ScanQRIcon } from "~/components/icons/library";
+import type { loader } from "~/routes/_layout+/_layout";
+import { tw } from "~/utils/tw";
+
+import { toggleMobileNavAtom } from "./atoms";
+import SidebarBottom from "./bottom";
+import MenuButton from "./menu-button";
+import MenuItems from "./menu-items";
+import { OrganizationSelectForm } from "./organization-select-form";
+import Overlay from "./overlay";
+import { ShelfMobileLogo, ShelfSidebarLogo } from "../../marketing/logos";
+
+export default function Sidebar() {
+  const { user, minimizedSidebar, currentOrganizationId } =
+    useLoaderData<typeof loader>();
+  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
+  const mainNavigationRef = useRef<HTMLElement>(null);
+
+  /** We use optimistic UI for folding of the scanner.tsx sidebar
+   * As we are making a request to the server to store the cookie,
+   * we need to use this approach, otherwise the sidebar will close/open
+   * only once the response is received from the server
+   */
+  const sidebarFetcher = useFetcher();
+  let optimisticMinimizedSidebar = minimizedSidebar;
+  if (sidebarFetcher.formData) {
+    optimisticMinimizedSidebar =
+      sidebarFetcher.formData.get("minimizeSidebar") === "open";
+  }
+  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
+  return (
+    <>
+      {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
+      <header
+        id="header"
+        className="flex items-center justify-between border-b bg-white p-4 md:hidden"
+      >
+        <Link to="." title="Home" className="block h-[32px]">
+          <ShelfMobileLogo />
+        </Link>
+        <div className="flex items-center space-x-4">
+          <NavLink
+            to="/scanner"
+            title="Scan QR Code"
+            className={({ isActive }) =>
+              tw(
+                "relative flex items-center justify-center px-2 transition",
+                isActive ? "text-primary-600" : "text-gray-500"
+              )
+            }
+          >
+            <ScanQRIcon />
+          </NavLink>
+          <MenuButton />
+        </div>
+      </header>
+
+      <Overlay />
+      <aside
+        id="main-navigation"
+        ref={mainNavigationRef}
+        className={tw(
+          `main-navigation fixed top-0 z-30 flex h-screen max-h-screen flex-col border-r border-gray-200 bg-white p-4 shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),_0px_8px_8px_-4px_rgba(16,24,40,0.03)] transition-all duration-100 ease-linear md:sticky md:left-0 md:px-4 md:py-8 md:shadow-none md:duration-100`,
+          optimisticMinimizedSidebar
+            ? "collapsed-navigation md:w-[82px] md:overflow-hidden"
+            : "md:left-0 md:w-[312px]",
+          isMobileNavOpen ? "left-0 w-[312px] overflow-hidden " : "-left-full"
+        )}
+      >
+        <div className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden">
+          <div className="navigation-header flex items-center justify-between">
+            <Link
+              to="."
+              title="Home"
+              className="logo flex items-center"
+              onClick={toggleMobileNav}
+            >
+              <ShelfSidebarLogo minimized={optimisticMinimizedSidebar} />
+            </Link>
+          </div>
+          <div className="">
+            <OrganizationSelectForm key={currentOrganizationId} />
+          </div>
+          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
+            <MenuItems fetcher={sidebarFetcher} />
+          </div>
+        </div>
+
+        <div className={tw("", workspaceSwitching ? "opacity-50" : "")}>
+          <SidebarBottom user={user} />
+        </div>
+      </aside>
+    </>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index b32d72635..11c6f2b06 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -1,99 +1,761 @@
-import { useRef } from "react";
-import { Link, NavLink, useFetcher, useLoaderData } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import { ScanQRIcon } from "~/components/icons/library";
-import type { loader } from "~/routes/_layout+/_layout";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useIsMobile } from "~/hooks/use-mobile";
+import { ArrowLeftIcon, SwitchIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
 import { tw } from "~/utils/tw";
+import Input from "~/components/forms/input";
+import { Separator } from "~/components/shared/separator";
+import { Sheet, SheetContent } from "~/components/shared/sheet";
+import { Skeleton } from "~/components/shared/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/shared/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = createContext<SidebarContext | null>(null);
 
-import { toggleMobileNavAtom } from "./atoms";
-import SidebarBottom from "./bottom";
-import MenuButton from "./menu-button";
-import MenuItems from "./menu-items";
-import { OrganizationSelectForm } from "./organization-select-form";
-import Overlay from "./overlay";
-import { ShelfMobileLogo, ShelfSidebarLogo } from "../../marketing/logos";
-
-export default function Sidebar() {
-  const { user, minimizedSidebar, currentOrganizationId } =
-    useLoaderData<typeof loader>();
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  const mainNavigationRef = useRef<HTMLElement>(null);
-
-  /** We use optimistic UI for folding of the scanner.tsx sidebar
-   * As we are making a request to the server to store the cookie,
-   * we need to use this approach, otherwise the sidebar will close/open
-   * only once the response is received from the server
-   */
-  const sidebarFetcher = useFetcher();
-  let optimisticMinimizedSidebar = minimizedSidebar;
-  if (sidebarFetcher.formData) {
-    optimisticMinimizedSidebar =
-      sidebarFetcher.formData.get("minimizeSidebar") === "open";
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-  return (
-    <>
-      {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
-      <header
-        id="header"
-        className="flex items-center justify-between border-b bg-white p-4 md:hidden"
-      >
-        <Link to="." title="Home" className="block h-[32px]">
-          <ShelfMobileLogo />
-        </Link>
-        <div className="flex items-center space-x-4">
-          <NavLink
-            to="/scanner"
-            title="Scan QR Code"
-            className={({ isActive }) =>
-              tw(
-                "relative flex items-center justify-center px-2 transition",
-                isActive ? "text-primary-600" : "text-gray-500"
-              )
+
+  return context;
+}
+
+const SidebarProvider = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open]
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
             }
+            className={tw(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
           >
-            <ScanQRIcon />
-          </NavLink>
-          <MenuButton />
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  }
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={tw(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
         </div>
-      </header>
+      );
+    }
 
-      <Overlay />
-      <aside
-        id="main-navigation"
-        ref={mainNavigationRef}
-        className={tw(
-          `main-navigation fixed top-0 z-30 flex h-screen max-h-screen flex-col border-r border-gray-200 bg-white p-4 shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),_0px_8px_8px_-4px_rgba(16,24,40,0.03)] transition-all duration-100 ease-linear md:sticky md:left-0 md:px-4 md:py-8 md:shadow-none md:duration-100`,
-          optimisticMinimizedSidebar
-            ? "collapsed-navigation md:w-[82px] md:overflow-hidden"
-            : "md:left-0 md:w-[312px]",
-          isMobileNavOpen ? "left-0 w-[312px] overflow-hidden " : "-left-full"
-        )}
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block text-sidebar-foreground"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
       >
-        <div className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden">
-          <div className="navigation-header flex items-center justify-between">
-            <Link
-              to="."
-              title="Home"
-              className="logo flex items-center"
-              onClick={toggleMobileNav}
-            >
-              <ShelfSidebarLogo minimized={optimisticMinimizedSidebar} />
-            </Link>
-          </div>
-          <div className="">
-            <OrganizationSelectForm key={currentOrganizationId} />
-          </div>
-          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
-            <MenuItems fetcher={sidebarFetcher} />
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={tw(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={tw(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
           </div>
         </div>
+      </div>
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
 
-        <div className={tw("", workspaceSwitching ? "opacity-50" : "")}>
-          <SidebarBottom user={user} />
-        </div>
-      </aside>
-    </>
+const SidebarTrigger = forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="secondary"
+      size="sm"
+      className={tw("h-7 w-7 border-none", className)}
+      onClick={(event: any) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <SwitchIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
   );
-}
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={tw(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <main
+        ref={ref}
+        className={tw(
+          "relative flex min-h-svh flex-1 flex-col bg-background",
+          "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={tw(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={tw("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={tw("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={tw("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={tw(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group"
+        className={tw("relative flex w-full min-w-0 flex-col p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={tw(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={tw(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={tw("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu"
+      className={tw("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={tw("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const SidebarMenuButton = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={tw(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={tw(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={tw(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={tw("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={tw(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={tw(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/app/components/marketing/logos.tsx b/app/components/marketing/logos.tsx
index 362c70820..59a931d26 100644
--- a/app/components/marketing/logos.tsx
+++ b/app/components/marketing/logos.tsx
@@ -1,6 +1,7 @@
 import { ShelfTypography } from "~/components/icons/library";
 import { config } from "~/config/shelf.config";
 import { tw } from "~/utils/tw";
+import When from "../when/when";
 
 /**
  * Logo shown in the sidebar
@@ -33,9 +34,11 @@ export const ShelfSidebarLogo = ({ minimized }: { minimized: boolean }) => {
         alt="Shelf Logo"
         className="mx-1.5 inline h-[32px]"
       />
-      <span className="logo-text transition duration-150 ease-linear">
-        <ShelfTypography />
-      </span>
+      <When truthy={!minimized}>
+        <span className="logo-text transition duration-150 ease-linear">
+          <ShelfTypography />
+        </span>
+      </When>
     </>
   );
 };
diff --git a/app/components/shared/separator.tsx b/app/components/shared/separator.tsx
new file mode 100644
index 000000000..2e1417d74
--- /dev/null
+++ b/app/components/shared/separator.tsx
@@ -0,0 +1,28 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { forwardRef } from "react";
+import { tw } from "~/utils/tw";
+
+const Separator = forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={tw(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/app/components/shared/sheet.tsx b/app/components/shared/sheet.tsx
new file mode 100644
index 000000000..033a82aaa
--- /dev/null
+++ b/app/components/shared/sheet.tsx
@@ -0,0 +1,137 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef } from "react";
+import { tw } from "~/utils/tw";
+import { XIcon } from "../icons/library";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={tw(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={tw(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <XIcon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={tw(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={tw(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={tw("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={tw("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/app/components/shared/skeleton.tsx b/app/components/shared/skeleton.tsx
new file mode 100644
index 000000000..a47ef4490
--- /dev/null
+++ b/app/components/shared/skeleton.tsx
@@ -0,0 +1,15 @@
+import { tw } from "~/utils/tw";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={tw("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/app/hooks/use-mobile.ts b/app/hooks/use-mobile.ts
new file mode 100644
index 000000000..081e23da6
--- /dev/null
+++ b/app/hooks/use-mobile.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    return () => {
+      mql.removeEventListener("change", onChange);
+    };
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 89775c750..5e38a99c1 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -8,8 +8,15 @@ import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ErrorContent } from "~/components/errors";
 
 import { InstallPwaPromptModal } from "~/components/layout/install-pwa-prompt-modal";
-import Sidebar from "~/components/layout/sidebar/sidebar";
+import AppSidebar from "~/components/layout/sidebar/app-sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "~/components/layout/sidebar/sidebar";
+import Sidebar from "~/components/layout/sidebar/sidebar-old";
 import { useCrisp } from "~/components/marketing/crisp";
+import { Separator } from "~/components/shared/separator";
 import { Spinner } from "~/components/shared/spinner";
 import { Toaster } from "~/components/shared/toast";
 import { NoSubscription } from "~/components/subscription/no-subscription";
@@ -131,8 +138,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 
 export default function App() {
   useCrisp();
-  const { currentOrganizationId, disabledTeamOrg } =
-    useLoaderData<typeof loader>();
+  const { disabledTeamOrg } = useLoaderData<typeof loader>();
   const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
 
   const renderInstallPwaPromptOnMobile = () =>
@@ -143,35 +149,36 @@ export default function App() {
     ) : null;
 
   return (
-    <>
-      <div
-        id="container"
-        key={currentOrganizationId}
-        className="flex h-screen max-h-screen min-h-screen min-w-[320px] flex-col"
-      >
-        <div className="inner-container flex flex-col md:flex-row">
-          <Sidebar />
-          <main className=" flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
-            <div className="flex h-full flex-1 flex-col">
-              {disabledTeamOrg ? (
-                <NoSubscription />
-              ) : workspaceSwitching ? (
-                <div className="flex size-full flex-col items-center justify-center text-center">
-                  <Spinner />
-                  <p className="mt-2">Activating workspace...</p>
-                </div>
-              ) : (
-                <Outlet />
-              )}
-            </div>
-            <Toaster />
-            <ClientOnly fallback={null}>
-              {renderInstallPwaPromptOnMobile}
-            </ClientOnly>
-          </main>
-        </div>
-      </div>
-    </>
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="bg-gray-25 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            Breadcrumb can go here
+          </div>
+        </header>
+        <main className="flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
+          <div className="flex h-full flex-1 flex-col">
+            {disabledTeamOrg ? (
+              <NoSubscription />
+            ) : workspaceSwitching ? (
+              <div className="flex size-full flex-col items-center justify-center text-center">
+                <Spinner />
+                <p className="mt-2">Activating workspace...</p>
+              </div>
+            ) : (
+              <Outlet />
+            )}
+          </div>
+          <Toaster />
+          <ClientOnly fallback={null}>
+            {renderInstallPwaPromptOnMobile}
+          </ClientOnly>
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }
 
diff --git a/package-lock.json b/package-lock.json
index 468141cc9..b1b471d5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "2.0.0",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "1.0.4",
         "@radix-ui/react-toast": "1.1.5",
@@ -35,6 +36,7 @@
         "@zxing/library": "^0.20.0",
         "changedpi": "^1.0.4",
         "chardet": "^2.0.0",
+        "class-variance-authority": "^0.7.0",
         "cookie": "^0.7.0",
         "crisp-sdk-web": "^1.0.21",
         "csv-parse": "^5.5.3",
@@ -5000,6 +5002,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -9353,6 +9378,27 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA=="
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
diff --git a/package.json b/package.json
index 1f2037886..55f9bd8ab 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "2.0.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
@@ -66,6 +67,7 @@
     "@zxing/library": "^0.20.0",
     "changedpi": "^1.0.4",
     "chardet": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
     "cookie": "^0.7.0",
     "crisp-sdk-web": "^1.0.21",
     "csv-parse": "^5.5.3",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 86a760103..37afe7158 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
 export default {
   content: [
@@ -91,6 +92,7 @@ export default {
       colors: {
         white: "#ffffff",
         black: "#000000",
+        muted: colors.gray[200],
         gray: {
           25: "#FCFCFD",
           50: "#F9FAFB",

From 875b8c2025b40536bd0526584ed0434e267b457f Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 20 Nov 2024 18:32:16 +0100
Subject: [PATCH 02/55] refactor(sidebar): add organization-selector in sidebar

---
 .../layout/sidebar/organization-selector.tsx  | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 app/components/layout/sidebar/organization-selector.tsx

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
new file mode 100644
index 000000000..75bfa2e7b
--- /dev/null
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -0,0 +1,108 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "./sidebar";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { useIsMobile } from "~/hooks/use-mobile";
+import { useFetcher, useLoaderData } from "@remix-run/react";
+import type { loader } from "~/routes/_layout+/_layout";
+import ProfilePicture from "~/components/user/profile-picture";
+import { Image } from "~/components/shared/image";
+import { Button } from "~/components/shared/button";
+import invariant from "tiny-invariant";
+import { isFormProcessing } from "~/utils/form";
+
+export default function OrganizationSelector() {
+  const isMobile = useIsMobile();
+  const { organizations, currentOrganizationId } =
+    useLoaderData<typeof loader>();
+
+  const fetcher = useFetcher();
+  const isSwitchingOrg = isFormProcessing(fetcher.state);
+
+  const currentOrganization = organizations.find(
+    (org) => org.id === currentOrganizationId
+  );
+  invariant(
+    typeof currentOrganization !== "undefined",
+    "Something went wrong. Current organization is not in the list of organizations."
+  );
+
+  function handleSwitchOrganization(organizationId: string) {
+    const formData = new FormData();
+    formData.append("organizationId", organizationId);
+
+    fetcher.submit(formData, {
+      method: "POST",
+      action: "/api/user/change-current-organization",
+    });
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              {currentOrganization.type === "PERSONAL" ? (
+                <ProfilePicture width="w-6" height="h-6" />
+              ) : (
+                <Image
+                  imageId={currentOrganization.imageId}
+                  alt="img"
+                  className="size-6 rounded-[2px] object-cover"
+                  updatedAt={currentOrganization.updatedAt}
+                />
+              )}
+              <div className="flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {currentOrganization.name}
+                </span>
+              </div>
+              <ChevronDownIcon className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            {organizations.map((organization, index) => (
+              <DropdownMenuItem
+                key={organization.id}
+                className="gap-2 p-2"
+                onClick={() => {
+                  if (organization.id !== currentOrganizationId) {
+                    handleSwitchOrganization(organization.id);
+                  }
+                }}
+              >
+                {organization.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <Button
+              to="/account-details/workspace"
+              icon="settings"
+              variant="link"
+              className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
+            >
+              Manage workspaces
+            </Button>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

From c31510907a7ad094bcbba8d29fa28e702a8d004d Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 12:54:20 +0100
Subject: [PATCH 03/55] refactor(sidebar): fix organization-selector on mobile

---
 app/components/layout/sidebar/app-sidebar.tsx |  3 ++
 .../layout/sidebar/organization-selector.tsx  | 31 +++++++++++++------
 app/components/layout/sidebar/sidebar.tsx     |  2 +-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index ea82de16e..07f7920f1 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -7,6 +7,7 @@ import {
   SidebarRail,
   useSidebar,
 } from "./sidebar";
+import OrganizationSelector from "./organization-selector";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -19,6 +20,8 @@ export default function AppSidebar(props: AppSidebarProps) {
         <div className="flex items-center mt-2 mb-2">
           <ShelfSidebarLogo minimized={state === "collapsed"} />
         </div>
+
+        <OrganizationSelector />
       </SidebarHeader>
 
       <SidebarContent>This is content of sidebar</SidebarContent>
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 75bfa2e7b..33c122343 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -6,7 +6,12 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "./sidebar";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useIsMobile } from "~/hooks/use-mobile";
 import { useFetcher, useLoaderData } from "@remix-run/react";
@@ -16,9 +21,12 @@ import { Image } from "~/components/shared/image";
 import { Button } from "~/components/shared/button";
 import invariant from "tiny-invariant";
 import { isFormProcessing } from "~/utils/form";
+import When from "~/components/when/when";
 
 export default function OrganizationSelector() {
   const isMobile = useIsMobile();
+  const { open } = useSidebar();
+
   const { organizations, currentOrganizationId } =
     useLoaderData<typeof loader>();
 
@@ -50,7 +58,7 @@ export default function OrganizationSelector() {
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground data-[state=closed]:justify-center w-full h-full"
             >
               {currentOrganization.type === "PERSONAL" ? (
                 <ProfilePicture width="w-6" height="h-6" />
@@ -58,16 +66,21 @@ export default function OrganizationSelector() {
                 <Image
                   imageId={currentOrganization.imageId}
                   alt="img"
-                  className="size-6 rounded-[2px] object-cover"
+                  className="size-8 rounded-sm object-cover"
                   updatedAt={currentOrganization.updatedAt}
                 />
               )}
-              <div className="flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">
-                  {currentOrganization.name}
-                </span>
-              </div>
-              <ChevronDownIcon className="ml-auto" />
+
+              <When truthy={open}>
+                <>
+                  <div className="flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">
+                      {currentOrganization.name}
+                    </span>
+                  </div>
+                  <ChevronDownIcon className="ml-auto" />
+                </>
+              </When>
             </SidebarMenuButton>
           </DropdownMenuTrigger>
 
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index 11c6f2b06..be1e71048 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -511,7 +511,7 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {

From 47879a8d11e13d164afd0af5b3c6e0115cb1851c Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 13:24:53 +0100
Subject: [PATCH 04/55] refactor(sidebar): create user menu for sidebar

---
 app/components/layout/sidebar/app-sidebar.tsx |   5 +-
 .../layout/sidebar/organization-selector.tsx  |   3 +-
 .../layout/sidebar/sidebar-user-menu.tsx      | 125 ++++++++++++++++++
 3 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 app/components/layout/sidebar/sidebar-user-menu.tsx

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 07f7920f1..73aed0613 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -8,6 +8,7 @@ import {
   useSidebar,
 } from "./sidebar";
 import OrganizationSelector from "./organization-selector";
+import SidebarUserMenu from "./sidebar-user-menu";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -26,7 +27,9 @@ export default function AppSidebar(props: AppSidebarProps) {
 
       <SidebarContent>This is content of sidebar</SidebarContent>
 
-      <SidebarFooter>this is footer</SidebarFooter>
+      <SidebarFooter>
+        <SidebarUserMenu />
+      </SidebarFooter>
       <SidebarRail />
     </Sidebar>
   );
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 33c122343..e300fd923 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -24,8 +24,7 @@ import { isFormProcessing } from "~/utils/form";
 import When from "~/components/when/when";
 
 export default function OrganizationSelector() {
-  const isMobile = useIsMobile();
-  const { open } = useSidebar();
+  const { open, isMobile } = useSidebar();
 
   const { organizations, currentOrganizationId } =
     useLoaderData<typeof loader>();
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
new file mode 100644
index 000000000..9efb2ffa3
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -0,0 +1,125 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
+import { useLoaderData } from "@remix-run/react";
+import type { loader } from "~/routes/_layout+/_layout";
+import ProfilePicture from "~/components/user/profile-picture";
+import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
+import { CrispButton } from "~/components/marketing/crisp";
+import { Form } from "~/components/custom-form";
+
+export default function SidebarUserMenu() {
+  const { user } = useLoaderData<typeof loader>();
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <ProfilePicture
+                width="w-8"
+                height="h-8"
+                className="mr-3 shrink-0"
+              />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.username}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronRight className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <ProfilePicture
+                  width="w-8"
+                  height="h-8"
+                  className="mr-3 shrink-0"
+                />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">
+                    {user.username}
+                  </span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="border-b border-gray-200 p-0">
+              <Button
+                to="/account-details"
+                icon="profile"
+                role="link"
+                variant="link"
+                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
+                width="full"
+              >
+                Account Details
+              </Button>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="border-b border-gray-200 p-0"
+            >
+              <CrispButton
+                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
+                variant="link"
+                width="full"
+                title="Questions/Feedback"
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <i className="icon text-gray-700">
+                    <QuestionsIcon />
+                  </i>
+                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
+                    Questions/Feedback
+                  </span>
+                </span>
+              </CrispButton>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="p-0"
+              onSelect={(e) => e.preventDefault()}
+            >
+              <Form action="/logout" method="post" className="w-full">
+                <Button
+                  icon="logout"
+                  role="link"
+                  type="submit"
+                  variant="link"
+                  className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
+                  width="full"
+                >
+                  Log Out
+                </Button>
+              </Form>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

From 5cff467277912a1ccc5b85c67f8418ccd3ae107d Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 13:51:28 +0100
Subject: [PATCH 05/55] refactor(sidebar): create basic sidebar nav menu

---
 app/components/layout/sidebar/app-sidebar.tsx |  5 +-
 app/components/layout/sidebar/menu-items.tsx  | 21 +---
 app/components/layout/sidebar/sidebar-nav.tsx | 95 +++++++++++++++++++
 app/components/shared/collapsible.tsx         |  9 ++
 package-lock.json                             | 31 ++++++
 package.json                                  |  1 +
 6 files changed, 141 insertions(+), 21 deletions(-)
 create mode 100644 app/components/layout/sidebar/sidebar-nav.tsx
 create mode 100644 app/components/shared/collapsible.tsx

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 73aed0613..89b99a3f3 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -9,6 +9,7 @@ import {
 } from "./sidebar";
 import OrganizationSelector from "./organization-selector";
 import SidebarUserMenu from "./sidebar-user-menu";
+import SidebarNav from "./sidebar-nav";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -25,7 +26,9 @@ export default function AppSidebar(props: AppSidebarProps) {
         <OrganizationSelector />
       </SidebarHeader>
 
-      <SidebarContent>This is content of sidebar</SidebarContent>
+      <SidebarContent>
+        <SidebarNav />
+      </SidebarContent>
 
       <SidebarFooter>
         <SidebarUserMenu />
diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
index 22bea70aa..157941848 100644
--- a/app/components/layout/sidebar/menu-items.tsx
+++ b/app/components/layout/sidebar/menu-items.tsx
@@ -115,26 +115,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
               </li>
             ) : (
               <li key={item.title}>
-                <NavLink
-                  className={({ isActive }) =>
-                    tw(
-                      "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive ? "active bg-primary-50 text-primary-600" : "",
-                      workspaceSwitching ? "pointer-events-none" : ""
-                    )
-                  }
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    {item.icon}
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    {item.title}
-                  </span>
-                </NavLink>
+                
               </li>
             )
           )}
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
new file mode 100644
index 000000000..3df05e32c
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -0,0 +1,95 @@
+import { ChevronRight, HomeIcon } from "~/components/icons/library";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "./sidebar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/shared/collapsible";
+import { cloneElement } from "react";
+import { NavLink } from "@remix-run/react";
+import { tw } from "~/utils/tw";
+
+type NavItem = {
+  title: string;
+  url: string;
+  icon: React.ReactElement;
+  items: Array<{ title: string; url: string }>;
+};
+
+const NAV_ITEMS: NavItem[] = [
+  {
+    title: "Nav items",
+    url: "/",
+    icon: <HomeIcon />,
+    items: [
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Home",
+        url: "/",
+      },
+    ],
+  },
+];
+
+export default function SidebarNav() {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {NAV_ITEMS.map((item) => (
+          <Collapsible key={item.title} asChild className="group/collapsible">
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && cloneElement(item.icon)}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <NavLink
+                          className="flex items-center gap-3 rounded px-3 py-2.5 font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600"
+                          to={subItem.url}
+                          data-test-id={`${subItem.title.toLowerCase()}SidebarMenuItem`}
+                          title={subItem.title}
+                        >
+                          <span className="text whitespace-nowrap transition duration-200 ease-linear">
+                            {subItem.title}
+                          </span>
+                        </NavLink>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
diff --git a/app/components/shared/collapsible.tsx b/app/components/shared/collapsible.tsx
new file mode 100644
index 000000000..5c28cbcc3
--- /dev/null
+++ b/app/components/shared/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/package-lock.json b/package-lock.json
index b1b471d5f..1cd74ec25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@paralleldrive/cuid2": "^2.2.2",
         "@prisma/client": "^5.9.1",
         "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "2.0.6",
         "@radix-ui/react-hover-card": "^1.0.7",
         "@radix-ui/react-icons": "^1.3.0",
@@ -3326,6 +3327,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
+      "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
diff --git a/package.json b/package.json
index 55f9bd8ab..f6704277f 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^5.9.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",

From b9927071aaa165982670da606caa31763e4519e6 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 19:02:33 +0100
Subject: [PATCH 06/55] refactor(sidebar): create main and bottom navigation
 for sidebar

---
 app/components/icons/icon.tsx                 |   5 +-
 app/components/icons/iconHug.tsx              |   4 +-
 app/components/icons/library.tsx              |  16 ++-
 app/components/layout/sidebar/app-sidebar.tsx |   5 +-
 app/components/layout/sidebar/sidebar-nav.tsx | 124 ++++++++----------
 app/hooks/use-sidebar-nav-items.tsx           | 121 +++++++++++++++++
 6 files changed, 196 insertions(+), 79 deletions(-)
 create mode 100644 app/hooks/use-sidebar-nav-items.tsx

diff --git a/app/components/icons/icon.tsx b/app/components/icons/icon.tsx
index 5922f7a70..32f309438 100644
--- a/app/components/icons/icon.tsx
+++ b/app/components/icons/icon.tsx
@@ -6,9 +6,10 @@ import iconsMap from "../shared/icons-map";
 export interface IconProps {
   icon: IconType;
   disableWrap?: true;
+  size?: React.ComponentProps<typeof IconHug>["size"];
 }
 const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
-  { icon, disableWrap }: IconProps,
+  { icon, disableWrap, size = "sm" }: IconProps,
   _ref
 ) {
   return (
@@ -16,7 +17,7 @@ const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
     (disableWrap ? (
       <div>{iconsMap[icon]}</div>
     ) : (
-      <IconHug size="sm">{iconsMap[icon]}</IconHug>
+      <IconHug size={size}>{iconsMap[icon]}</IconHug>
     ))
   );
 });
diff --git a/app/components/icons/iconHug.tsx b/app/components/icons/iconHug.tsx
index b4484ac14..0602b4f61 100644
--- a/app/components/icons/iconHug.tsx
+++ b/app/components/icons/iconHug.tsx
@@ -2,7 +2,7 @@ import { tw } from "~/utils/tw";
 
 interface Props {
   /** Size of the hug. Defualt is sm */
-  size: "sm" | "md" | "lg" | "xl" | "2xl";
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
   children: JSX.Element | JSX.Element[];
 
@@ -16,6 +16,8 @@ interface Props {
 const sizeClasses: {
   [key in Props["size"]]: string;
 } = {
+  /** 16 */
+  xs: "w-4 h-4",
   /** 32px */
   sm: "w-5 h-5",
   /** 40px */
diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index 57ff9901e..a240a44df 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -436,8 +436,9 @@ export function XIcon(props: SVGProps<SVGSVGElement>) {
 
 export const AssetsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width={20}
-    height={22}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
@@ -854,8 +855,9 @@ export const WriteIcon = (props: SVGProps<SVGSVGElement>) => (
 export const TagsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={20}
-    height={23}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     {...props}
   >
@@ -923,9 +925,9 @@ export const RemoveTagsIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const LocationMarkerIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="18"
-    height="22"
-    viewBox="0 0 18 22"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 89b99a3f3..4f31afe0d 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -10,11 +10,13 @@ import {
 import OrganizationSelector from "./organization-selector";
 import SidebarUserMenu from "./sidebar-user-menu";
 import SidebarNav from "./sidebar-nav";
+import { useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
 export default function AppSidebar(props: AppSidebarProps) {
   const { state } = useSidebar();
+  const { topMenuItems, bottomMenuItems } = useSidebarNavItems();
 
   return (
     <Sidebar collapsible="icon" {...props}>
@@ -27,10 +29,11 @@ export default function AppSidebar(props: AppSidebarProps) {
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarNav />
+        <SidebarNav items={topMenuItems} />
       </SidebarContent>
 
       <SidebarFooter>
+        <SidebarNav items={bottomMenuItems} />
         <SidebarUserMenu />
       </SidebarFooter>
       <SidebarRail />
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 3df05e32c..80c61e704 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,7 +1,6 @@
 import { ChevronRight, HomeIcon } from "~/components/icons/library";
 import {
   SidebarGroup,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -14,81 +13,70 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/shared/collapsible";
-import { cloneElement } from "react";
 import { NavLink } from "@remix-run/react";
-import { tw } from "~/utils/tw";
+import { NavItem, useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
+import Icon from "~/components/icons/icon";
 
-type NavItem = {
-  title: string;
-  url: string;
-  icon: React.ReactElement;
-  items: Array<{ title: string; url: string }>;
+type SidebarNavProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  items: NavItem[];
 };
 
-const NAV_ITEMS: NavItem[] = [
-  {
-    title: "Nav items",
-    url: "/",
-    icon: <HomeIcon />,
-    items: [
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Home",
-        url: "/",
-      },
-    ],
-  },
-];
-
-export default function SidebarNav() {
+export default function SidebarNav({
+  className,
+  style,
+  items,
+}: SidebarNavProps) {
   return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarGroup className={className} style={style}>
       <SidebarMenu>
-        {NAV_ITEMS.map((item) => (
-          <Collapsible key={item.title} asChild className="group/collapsible">
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
-                  {item.icon && cloneElement(item.icon)}
+        {items.map((item) => {
+          if (item.type === "parent") {
+            return (
+              <Collapsible
+                key={item.title}
+                asChild
+                className="group/collapsible"
+              >
+                <SidebarMenuItem key={item.title}>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip={item.title}>
+                      <Icon size="xs" icon={item.icon} />
+                      <span>{item.title}</span>
+                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.children.map((child) => (
+                        <SidebarMenuSubItem key={child.title}>
+                          <SidebarMenuSubButton asChild>
+                            <NavLink to={child.to} target={child.target}>
+                              <Icon size="xs" icon={child.icon} />
+                              <span>{child.title}</span>
+                            </NavLink>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            );
+          }
+
+          return (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <NavLink to={item.to} target={item.target}>
+                  <Icon size="xs" icon={item.icon} />
                   <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton asChild>
-                        <NavLink
-                          className="flex items-center gap-3 rounded px-3 py-2.5 font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600"
-                          to={subItem.url}
-                          data-test-id={`${subItem.title.toLowerCase()}SidebarMenuItem`}
-                          title={subItem.title}
-                        >
-                          <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                            {subItem.title}
-                          </span>
-                        </NavLink>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
+                </NavLink>
+              </SidebarMenuButton>
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
+          );
+        })}
       </SidebarMenu>
     </SidebarGroup>
   );
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
new file mode 100644
index 000000000..e6200bd9f
--- /dev/null
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -0,0 +1,121 @@
+import { useUserData } from "./use-user-data";
+import { useUserRoleHelper } from "./user-user-role-helper";
+import { IconType } from "~/components/shared/icons-map";
+
+type BaseNavItem = {
+  title: string;
+  icon: IconType;
+  hidden?: boolean;
+};
+
+type ChildNavItem = BaseNavItem & {
+  type: "child";
+  to: string;
+  target?: string;
+};
+
+type ParentNavItem = BaseNavItem & {
+  type: "parent";
+  children: Omit<ChildNavItem, "type">[];
+};
+
+export type NavItem = ChildNavItem | ParentNavItem;
+
+export function useSidebarNavItems() {
+  const user = useUserData();
+  const { isBaseOrSelfService } = useUserRoleHelper();
+
+  const topMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Dashboard",
+      to: "/dashboard",
+      icon: "graph",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Assets",
+      to: "/assets",
+      icon: "asset",
+    },
+    {
+      type: "child",
+      title: "Kits",
+      to: "/kits",
+      icon: "kit",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Categories",
+      to: "/categories",
+      icon: "category",
+      hidden: isBaseOrSelfService,
+    },
+
+    {
+      type: "child",
+      title: "Tags",
+      to: "/tags",
+      icon: "tag",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Locations",
+      to: "/locations",
+      icon: "location",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Calendar",
+      to: "/calendar",
+      icon: "calendar",
+    },
+    {
+      type: "child",
+      title: "Bookings",
+      to: "/bookings",
+      icon: "bookings",
+    },
+    {
+      type: "child",
+      title: "Team",
+      to: "/settings/team",
+      icon: "user",
+      hidden: isBaseOrSelfService,
+    },
+  ];
+
+  const bottomMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Asset labels",
+      to: `https://www.shelf.nu/order-tags?email=${user?.email}${
+        user?.firstName ? `&firstName=${user.firstName}` : ""
+      }${user?.lastName ? `&lastName=${user.lastName}` : ""}`,
+      icon: "asset-label",
+      target: "_blank",
+    },
+    {
+      type: "child",
+      title: "QR Scanner",
+      to: "/scanner",
+      icon: "scanQR",
+    },
+    {
+      type: "child",
+      title: "Workspace settings",
+      to: "/settings",
+      icon: "settings",
+      hidden: isBaseOrSelfService,
+    },
+  ];
+
+  return {
+    topMenuItems: topMenuItems.filter((item) => !item.hidden),
+    bottomMenuItems: bottomMenuItems.filter((item) => !item.hidden),
+  };
+}

From 882e5ae05139bad27983f159b29d462c6366134c Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 19:11:42 +0100
Subject: [PATCH 07/55] refactor(sidebar): fix icons sized for collapsed
 sidebar issue

---
 app/components/icons/library.tsx              | 20 +++++++++----------
 app/components/layout/sidebar/app-sidebar.tsx |  2 +-
 app/components/layout/sidebar/menu-items.tsx  |  4 +---
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index a240a44df..f73604f75 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -84,8 +84,8 @@ export function ItemsIcon(props: SVGProps<SVGSVGElement>) {
 export function SettingsIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="100%"
-      height="100%"
+      width="20"
+      height="20"
       viewBox="0 0 22 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -1456,9 +1456,9 @@ export const CalendarIcon = (props: SVGProps<SVGSVGElement>) => (
 export const BookingsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 20 22"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     {...props}
   >
@@ -1493,8 +1493,8 @@ export const CustomFiedIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const KitIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="100%"
-    height="100%"
+    width="18"
+    height="20"
     viewBox="0 0 22 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1574,9 +1574,9 @@ export const AssetLabel = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="100%"
-    height="100%"
-    viewBox="0 0 24 24"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     {...props}
   >
     <path
diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 4f31afe0d..be47eaed8 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -33,7 +33,7 @@ export default function AppSidebar(props: AppSidebarProps) {
       </SidebarContent>
 
       <SidebarFooter>
-        <SidebarNav items={bottomMenuItems} />
+        <SidebarNav className="p-0" items={bottomMenuItems} />
         <SidebarUserMenu />
       </SidebarFooter>
       <SidebarRail />
diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
index 157941848..1fabe04b3 100644
--- a/app/components/layout/sidebar/menu-items.tsx
+++ b/app/components/layout/sidebar/menu-items.tsx
@@ -114,9 +114,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                 </Button>
               </li>
             ) : (
-              <li key={item.title}>
-                
-              </li>
+              <li key={item.title}></li>
             )
           )}
         </ul>

From 692bf95fdb33e2d5454c06b500e2a71e7ede0390 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 21:19:22 +0100
Subject: [PATCH 08/55] refactor(sidebar): close dropdown on click

---
 .../layout/sidebar/organization-selector.tsx           | 10 +++++++++-
 app/components/layout/sidebar/sidebar-user-menu.tsx    | 10 ++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index e300fd923..ba25f1e7f 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -22,8 +22,11 @@ import { Button } from "~/components/shared/button";
 import invariant from "tiny-invariant";
 import { isFormProcessing } from "~/utils/form";
 import When from "~/components/when/when";
+import { useState } from "react";
 
 export default function OrganizationSelector() {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
   const { open, isMobile } = useSidebar();
 
   const { organizations, currentOrganizationId } =
@@ -50,10 +53,14 @@ export default function OrganizationSelector() {
     });
   }
 
+  function closeDropdown() {
+    setIsDropdownOpen(false);
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               size="lg"
@@ -109,6 +116,7 @@ export default function OrganizationSelector() {
               icon="settings"
               variant="link"
               className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
+              onClick={closeDropdown}
             >
               Manage workspaces
             </Button>
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index 9efb2ffa3..2a73fd1a1 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -19,15 +19,21 @@ import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { CrispButton } from "~/components/marketing/crisp";
 import { Form } from "~/components/custom-form";
+import { useState } from "react";
 
 export default function SidebarUserMenu() {
   const { user } = useLoaderData<typeof loader>();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { isMobile } = useSidebar();
 
+  function closeDropdown() {
+    setIsDropdownOpen(false);
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
@@ -75,7 +81,7 @@ export default function SidebarUserMenu() {
                 role="link"
                 variant="link"
                 className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                width="full"
+                onClick={closeDropdown}
               >
                 Account Details
               </Button>

From 44a6f8c3f262557a26accd19e90d26a14808546a Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 22:17:30 +0100
Subject: [PATCH 09/55] refactor(sidebar): fix issue with organization
 switching atom

---
 app/components/layout/breadcrumbs/index.tsx   | 20 ++++++-----
 .../layout/sidebar/organization-selector.tsx  | 14 ++++++--
 app/components/layout/sidebar/sidebar.tsx     |  6 ++--
 app/routes/_layout+/_layout.tsx               | 36 +++++++------------
 4 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/app/components/layout/breadcrumbs/index.tsx b/app/components/layout/breadcrumbs/index.tsx
index 6368662e5..595a1ce1e 100644
--- a/app/components/layout/breadcrumbs/index.tsx
+++ b/app/components/layout/breadcrumbs/index.tsx
@@ -1,5 +1,6 @@
 import { useMatches } from "@remix-run/react";
 import { Breadcrumb } from "./breadcrumb";
+import { SidebarTrigger } from "../sidebar/sidebar";
 
 // Define an interface that extends RouteHandle with the 'breadcrumb' property
 interface HandleWithBreadcrumb {
@@ -15,14 +16,17 @@ export function Breadcrumbs() {
   );
 
   return (
-    <div className="breadcrumbs">
-      {breadcrumbs.map((match, index) => (
-        <Breadcrumb
-          key={index}
-          match={match}
-          isLastItem={index === breadcrumbs.length - 1}
-        />
-      ))}
+    <div className="flex items-center gap-2.5">
+      <SidebarTrigger />
+      <div className="breadcrumbs">
+        {breadcrumbs.map((match, index) => (
+          <Breadcrumb
+            key={index}
+            match={match}
+            isLastItem={index === breadcrumbs.length - 1}
+          />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index ba25f1e7f..3c295f9d8 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -13,7 +13,6 @@ import {
   useSidebar,
 } from "./sidebar";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { useIsMobile } from "~/hooks/use-mobile";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import type { loader } from "~/routes/_layout+/_layout";
 import ProfilePicture from "~/components/user/profile-picture";
@@ -22,7 +21,9 @@ import { Button } from "~/components/shared/button";
 import invariant from "tiny-invariant";
 import { isFormProcessing } from "~/utils/form";
 import When from "~/components/when/when";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useSetAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 
 export default function OrganizationSelector() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -35,6 +36,8 @@ export default function OrganizationSelector() {
   const fetcher = useFetcher();
   const isSwitchingOrg = isFormProcessing(fetcher.state);
 
+  const setWorkspaceSwitching = useSetAtom(switchingWorkspaceAtom);
+
   const currentOrganization = organizations.find(
     (org) => org.id === currentOrganizationId
   );
@@ -57,6 +60,13 @@ export default function OrganizationSelector() {
     setIsDropdownOpen(false);
   }
 
+  useEffect(
+    function setSwitchingWorkspaceAfterFetch() {
+      setWorkspaceSwitching(isSwitchingOrg);
+    },
+    [isFormProcessing, setWorkspaceSwitching]
+  );
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index be1e71048..95786d9aa 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -11,7 +11,7 @@ import {
   useState,
 } from "react";
 import { useIsMobile } from "~/hooks/use-mobile";
-import { ArrowLeftIcon, SwitchIcon } from "~/components/icons/library";
+import { SwitchIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { tw } from "~/utils/tw";
 import Input from "~/components/forms/input";
@@ -277,14 +277,14 @@ const SidebarTrigger = forwardRef<
       data-sidebar="trigger"
       variant="secondary"
       size="sm"
-      className={tw("h-7 w-7 border-none", className)}
+      className={tw("border-none p-0", className)}
       onClick={(event: any) => {
         onClick?.(event);
         toggleSidebar();
       }}
       {...props}
     >
-      <SwitchIcon />
+      <SwitchIcon className="size-[18px] mt-1 text-gray-500" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 5e38a99c1..f25e9c5d6 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -12,11 +12,8 @@ import AppSidebar from "~/components/layout/sidebar/app-sidebar";
 import {
   SidebarInset,
   SidebarProvider,
-  SidebarTrigger,
 } from "~/components/layout/sidebar/sidebar";
-import Sidebar from "~/components/layout/sidebar/sidebar-old";
 import { useCrisp } from "~/components/marketing/crisp";
-import { Separator } from "~/components/shared/separator";
 import { Spinner } from "~/components/shared/spinner";
 import { Toaster } from "~/components/shared/toast";
 import { NoSubscription } from "~/components/subscription/no-subscription";
@@ -152,31 +149,22 @@ export default function App() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-gray-25 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
-            Breadcrumb can go here
-          </div>
-        </header>
-        <main className="flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
-          <div className="flex h-full flex-1 flex-col">
-            {disabledTeamOrg ? (
-              <NoSubscription />
-            ) : workspaceSwitching ? (
-              <div className="flex size-full flex-col items-center justify-center text-center">
-                <Spinner />
-                <p className="mt-2">Activating workspace...</p>
-              </div>
-            ) : (
-              <Outlet />
-            )}
-          </div>
+        <div className="flex-1 bg-gray-25 px-4 pb-6">
+          {disabledTeamOrg ? (
+            <NoSubscription />
+          ) : workspaceSwitching ? (
+            <div className="flex size-full flex-col items-center justify-center text-center">
+              <Spinner />
+              <p className="mt-2">Activating workspace...</p>
+            </div>
+          ) : (
+            <Outlet />
+          )}
           <Toaster />
           <ClientOnly fallback={null}>
             {renderInstallPwaPromptOnMobile}
           </ClientOnly>
-        </main>
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );

From d25edff47835e7b4fc732f2c05fd5cae5514ca6f Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 22:52:39 +0100
Subject: [PATCH 10/55] refactor(sidebar): highlight active route in sidebar
 menu

---
 app/components/layout/sidebar/sidebar-nav.tsx | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 80c61e704..1fa7efbfe 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -13,9 +13,10 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/shared/collapsible";
-import { NavLink } from "@remix-run/react";
+import { matchRoutes, NavLink, useMatch, useMatches } from "@remix-run/react";
 import { NavItem, useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
 import Icon from "~/components/icons/icon";
+import { tw } from "~/utils/tw";
 
 type SidebarNavProps = {
   className?: string;
@@ -28,6 +29,13 @@ export default function SidebarNav({
   style,
   items,
 }: SidebarNavProps) {
+  const matches = useMatches();
+
+  function isRouteActive(route: string) {
+    const matchesRoutes = matches.map((match) => match.pathname);
+    return matchesRoutes.some((matchRoute) => matchRoute.includes(route));
+  }
+
   return (
     <SidebarGroup className={className} style={style}>
       <SidebarMenu>
@@ -49,16 +57,27 @@ export default function SidebarNav({
                   </CollapsibleTrigger>
                   <CollapsibleContent>
                     <SidebarMenuSub>
-                      {item.children.map((child) => (
-                        <SidebarMenuSubItem key={child.title}>
-                          <SidebarMenuSubButton asChild>
-                            <NavLink to={child.to} target={child.target}>
-                              <Icon size="xs" icon={child.icon} />
-                              <span>{child.title}</span>
-                            </NavLink>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
+                      {item.children.map((child) => {
+                        const isChildActive = isRouteActive(child.to);
+
+                        return (
+                          <SidebarMenuSubItem key={child.title}>
+                            <SidebarMenuSubButton asChild>
+                              <NavLink
+                                to={child.to}
+                                target={child.target}
+                                className={tw(
+                                  isChildActive &&
+                                    "text-primary-500 bg-primary-25"
+                                )}
+                              >
+                                <Icon size="xs" icon={child.icon} />
+                                <span>{child.title}</span>
+                              </NavLink>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        );
+                      })}
                     </SidebarMenuSub>
                   </CollapsibleContent>
                 </SidebarMenuItem>
@@ -66,10 +85,16 @@ export default function SidebarNav({
             );
           }
 
+          const isActive = isRouteActive(item.to);
+
           return (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton asChild tooltip={item.title}>
-                <NavLink to={item.to} target={item.target}>
+                <NavLink
+                  to={item.to}
+                  target={item.target}
+                  className={tw(isActive && "text-primary-500 bg-primary-25")}
+                >
                   <Icon size="xs" icon={item.icon} />
                   <span>{item.title}</span>
                 </NavLink>

From ae421ac93180c23b6fab666c791ec6cc582310f3 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 22 Nov 2024 15:32:58 +0100
Subject: [PATCH 11/55] refactor(sidebar): fix pr issues

---
 app/components/icons/icon.tsx                 |  7 +++++--
 app/components/icons/library.tsx              |  4 ++--
 app/components/layout/breadcrumbs/index.tsx   | 20 ++++++++-----------
 .../layout/sidebar/organization-selector.tsx  |  6 +++---
 app/components/layout/sidebar/sidebar-nav.tsx | 12 +++++++++--
 .../layout/sidebar/sidebar-user-menu.tsx      |  4 ++--
 app/components/layout/sidebar/sidebar.tsx     |  2 +-
 app/root.tsx                                  |  7 ++-----
 app/tailwind.css                              | 13 ++++++++++++
 tailwind.config.ts                            | 10 ++++++++++
 10 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/app/components/icons/icon.tsx b/app/components/icons/icon.tsx
index 32f309438..5ace388f6 100644
--- a/app/components/icons/icon.tsx
+++ b/app/components/icons/icon.tsx
@@ -4,12 +4,13 @@ import type { IconType } from "../shared/icons-map";
 import iconsMap from "../shared/icons-map";
 
 export interface IconProps {
+  className?: string;
   icon: IconType;
   disableWrap?: true;
   size?: React.ComponentProps<typeof IconHug>["size"];
 }
 const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
-  { icon, disableWrap, size = "sm" }: IconProps,
+  { className, icon, disableWrap, size = "sm" }: IconProps,
   _ref
 ) {
   return (
@@ -17,7 +18,9 @@ const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
     (disableWrap ? (
       <div>{iconsMap[icon]}</div>
     ) : (
-      <IconHug size={size}>{iconsMap[icon]}</IconHug>
+      <IconHug className={className} size={size}>
+        {iconsMap[icon]}
+      </IconHug>
     ))
   );
 });
diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index f73604f75..c75727890 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -1574,9 +1574,9 @@ export const AssetLabel = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="20"
+    width="18"
     height="20"
-    viewBox="0 0 20 20"
+    viewBox="0 0 22 20"
     {...props}
   >
     <path
diff --git a/app/components/layout/breadcrumbs/index.tsx b/app/components/layout/breadcrumbs/index.tsx
index 595a1ce1e..6368662e5 100644
--- a/app/components/layout/breadcrumbs/index.tsx
+++ b/app/components/layout/breadcrumbs/index.tsx
@@ -1,6 +1,5 @@
 import { useMatches } from "@remix-run/react";
 import { Breadcrumb } from "./breadcrumb";
-import { SidebarTrigger } from "../sidebar/sidebar";
 
 // Define an interface that extends RouteHandle with the 'breadcrumb' property
 interface HandleWithBreadcrumb {
@@ -16,17 +15,14 @@ export function Breadcrumbs() {
   );
 
   return (
-    <div className="flex items-center gap-2.5">
-      <SidebarTrigger />
-      <div className="breadcrumbs">
-        {breadcrumbs.map((match, index) => (
-          <Breadcrumb
-            key={index}
-            match={match}
-            isLastItem={index === breadcrumbs.length - 1}
-          />
-        ))}
-      </div>
+    <div className="breadcrumbs">
+      {breadcrumbs.map((match, index) => (
+        <Breadcrumb
+          key={index}
+          match={match}
+          isLastItem={index === breadcrumbs.length - 1}
+        />
+      ))}
     </div>
   );
 }
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 3c295f9d8..569222113 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -74,7 +74,7 @@ export default function OrganizationSelector() {
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground data-[state=closed]:justify-center w-full h-full"
+              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground justify-center w-full h-full"
             >
               {currentOrganization.type === "PERSONAL" ? (
                 <ProfilePicture width="w-6" height="h-6" />
@@ -101,7 +101,7 @@ export default function OrganizationSelector() {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
             align="start"
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
@@ -109,7 +109,7 @@ export default function OrganizationSelector() {
             {organizations.map((organization, index) => (
               <DropdownMenuItem
                 key={organization.id}
-                className="gap-2 p-2"
+                className="gap-2 p-2 rounded-sm"
                 onClick={() => {
                   if (organization.id !== currentOrganizationId) {
                     handleSwitchOrganization(organization.id);
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 1fa7efbfe..34da6f0ee 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -67,11 +67,16 @@ export default function SidebarNav({
                                 to={child.to}
                                 target={child.target}
                                 className={tw(
+                                  "font-medium",
                                   isChildActive &&
                                     "text-primary-500 bg-primary-25"
                                 )}
                               >
-                                <Icon size="xs" icon={child.icon} />
+                                <Icon
+                                  size="xs"
+                                  icon={child.icon}
+                                  className="text-gray-500"
+                                />
                                 <span>{child.title}</span>
                               </NavLink>
                             </SidebarMenuSubButton>
@@ -93,7 +98,10 @@ export default function SidebarNav({
                 <NavLink
                   to={item.to}
                   target={item.target}
-                  className={tw(isActive && "text-primary-500 bg-primary-25")}
+                  className={tw(
+                    "font-medium",
+                    isActive && "text-primary-500 bg-primary-25"
+                  )}
                 >
                   <Icon size="xs" icon={item.icon} />
                   <span>{item.title}</span>
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index 2a73fd1a1..8e7753e88 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -37,7 +37,7 @@ export default function SidebarUserMenu() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <ProfilePicture
                 width="w-8"
@@ -53,7 +53,7 @@ export default function SidebarUserMenu() {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
             side={isMobile ? "bottom" : "right"}
             align="end"
             sideOffset={4}
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index 95786d9aa..e6642cf4c 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -284,7 +284,7 @@ const SidebarTrigger = forwardRef<
       }}
       {...props}
     >
-      <SwitchIcon className="size-[18px] mt-1 text-gray-500" />
+      <SwitchIcon className="size-4 text-gray-500" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
diff --git a/app/root.tsx b/app/root.tsx
index 3afd92311..b170218ae 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -34,6 +34,7 @@ import { data } from "./utils/http.server";
 import { useNonce } from "./utils/nonce-provider";
 import { PwaManagerProvider } from "./utils/pwa-manager";
 import { splashScreenLinks } from "./utils/splash-screen-links";
+import { SidebarTrigger } from "./components/layout/sidebar/sidebar";
 
 export interface RootData {
   env: typeof getBrowserEnv;
@@ -41,11 +42,7 @@ export interface RootData {
 }
 
 export const handle = {
-  breadcrumb: () => (
-    <Link to="/" title="Home" id="homeCrumb">
-      <HomeIcon className="inline" />
-    </Link>
-  ),
+  breadcrumb: () => <SidebarTrigger />,
 };
 
 export const links: LinksFunction = () => [
diff --git a/app/tailwind.css b/app/tailwind.css
index b5c61c956..ab6af0c90 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 37afe7158..5bf0309e6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -221,6 +221,16 @@ export default {
             inverted: "#000000", // black
           },
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
 
       boxShadow: {

From e5eb1c7a515c3683f73fec629c499af9a3b6e081 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Sat, 23 Nov 2024 12:26:40 +0100
Subject: [PATCH 12/55] refactor(sidebar): fix color issues and implement
 sidebar with cookie and make it optimistic

---
 app/components/layout/sidebar/sidebar.tsx | 57 ++++++++++++++++-------
 app/routes/_layout+/_layout.tsx           |  4 +-
 app/tailwind.css                          |  1 -
 tailwind.config.ts                        |  1 -
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index e6642cf4c..fc29f7234 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -24,9 +24,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "~/components/shared/tooltip";
+import { useFetcher } from "@remix-run/react";
+import { isFormProcessing } from "~/utils/form";
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
@@ -40,6 +40,7 @@ type SidebarContext = {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  isSidebarToggling: boolean;
 };
 
 const SidebarContext = createContext<SidebarContext | null>(null);
@@ -76,6 +77,9 @@ const SidebarProvider = forwardRef<
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = useState(false);
 
+    const sidebarTogglerFetcher = useFetcher();
+    const isSidebarToggling = isFormProcessing(sidebarTogglerFetcher.state);
+
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = useState(defaultOpen);
@@ -89,8 +93,14 @@ const SidebarProvider = forwardRef<
           _setOpen(openState);
         }
 
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        /* Setting state of sidebar in cookies (userPrefs) */
+        const formData = new FormData();
+        formData.append("minimizeSidebar", openState ? "close" : "open");
+
+        sidebarTogglerFetcher.submit(formData, {
+          method: "POST",
+          action: "/api/user/prefs/minimized-sidebar",
+        });
       },
       [setOpenProp, open]
     );
@@ -131,8 +141,18 @@ const SidebarProvider = forwardRef<
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        isSidebarToggling,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        isSidebarToggling,
+      ]
     );
 
     return (
@@ -269,15 +289,19 @@ const SidebarTrigger = forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, isSidebarToggling } = useSidebar();
 
   return (
     <Button
       ref={ref}
+      disabled={isSidebarToggling}
       data-sidebar="trigger"
       variant="secondary"
-      size="sm"
-      className={tw("border-none p-0", className)}
+      className={tw(
+        "border-none p-0",
+        isSidebarToggling && "pointer-events-none cursor-not-allowed",
+        className
+      )}
       onClick={(event: any) => {
         onClick?.(event);
         toggleSidebar();
@@ -295,7 +319,7 @@ const SidebarRail = forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, isSidebarToggling } = useSidebar();
 
   return (
     <button
@@ -304,6 +328,7 @@ const SidebarRail = forwardRef<
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
+      disabled={isSidebarToggling}
       title="Toggle Sidebar"
       className={tw(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
@@ -346,7 +371,7 @@ const SidebarInput = forwardRef<
       ref={ref}
       data-sidebar="input"
       className={tw(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-primary-500",
         className
       )}
       {...props}
@@ -440,7 +465,7 @@ const SidebarGroupLabel = forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={tw(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-primary-500 transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -461,7 +486,7 @@ const SidebarGroupAction = forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={tw(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -511,11 +536,11 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding] hover:text-primary-500 hover:bg-primary-25 focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: "hover:text-primary-500 hover:bg-primary-25",
         outline:
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
@@ -605,7 +630,7 @@ const SidebarMenuAction = forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={tw(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -720,7 +745,7 @@ const SidebarMenuSubButton = forwardRef<
       data-size={size}
       data-active={isActive}
       className={tw(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-primary-500 hover:text-primary-500 hover:bg-primary-25 focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index f25e9c5d6..bec976e61 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -135,7 +135,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 
 export default function App() {
   useCrisp();
-  const { disabledTeamOrg } = useLoaderData<typeof loader>();
+  const { disabledTeamOrg, minimizedSidebar } = useLoaderData<typeof loader>();
   const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
 
   const renderInstallPwaPromptOnMobile = () =>
@@ -146,7 +146,7 @@ export default function App() {
     ) : null;
 
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={!minimizedSidebar}>
       <AppSidebar />
       <SidebarInset>
         <div className="flex-1 bg-gray-25 px-4 pb-6">
diff --git a/app/tailwind.css b/app/tailwind.css
index ab6af0c90..fd9f66f64 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -11,6 +11,5 @@
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5bf0309e6..784257a90 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -229,7 +229,6 @@ export default {
           accent: "hsl(var(--sidebar-accent))",
           "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
           border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
         },
       },
 

From a6fee1a3011fb519ebdc18a552dd41ac393d6542 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 20 Nov 2024 18:29:07 +0100
Subject: [PATCH 13/55] refactor(sidebar): add very basic shadcn sidebar

---
 app/components/layout/sidebar/app-sidebar.tsx |  30 +
 app/components/layout/sidebar/sidebar-old.tsx |  99 +++
 app/components/layout/sidebar/sidebar.tsx     | 836 ++++++++++++++++--
 app/components/marketing/logos.tsx            |   9 +-
 app/components/shared/separator.tsx           |  28 +
 app/components/shared/sheet.tsx               | 137 +++
 app/components/shared/skeleton.tsx            |  15 +
 app/hooks/use-mobile.ts                       |  24 +
 app/routes/_layout+/_layout.tsx               |  71 +-
 package-lock.json                             |  46 +
 package.json                                  |   2 +
 tailwind.config.ts                            |   2 +
 12 files changed, 1177 insertions(+), 122 deletions(-)
 create mode 100644 app/components/layout/sidebar/app-sidebar.tsx
 create mode 100644 app/components/layout/sidebar/sidebar-old.tsx
 create mode 100644 app/components/shared/separator.tsx
 create mode 100644 app/components/shared/sheet.tsx
 create mode 100644 app/components/shared/skeleton.tsx
 create mode 100644 app/hooks/use-mobile.ts

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
new file mode 100644
index 000000000..ea82de16e
--- /dev/null
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -0,0 +1,30 @@
+import { ShelfSidebarLogo } from "~/components/marketing/logos";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+  useSidebar,
+} from "./sidebar";
+
+type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
+
+export default function AppSidebar(props: AppSidebarProps) {
+  const { state } = useSidebar();
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader className={state === "collapsed" ? "p-0" : ""}>
+        <div className="flex items-center mt-2 mb-2">
+          <ShelfSidebarLogo minimized={state === "collapsed"} />
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>This is content of sidebar</SidebarContent>
+
+      <SidebarFooter>this is footer</SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar-old.tsx b/app/components/layout/sidebar/sidebar-old.tsx
new file mode 100644
index 000000000..b32d72635
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-old.tsx
@@ -0,0 +1,99 @@
+import { useRef } from "react";
+import { Link, NavLink, useFetcher, useLoaderData } from "@remix-run/react";
+import { useAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
+import { ScanQRIcon } from "~/components/icons/library";
+import type { loader } from "~/routes/_layout+/_layout";
+import { tw } from "~/utils/tw";
+
+import { toggleMobileNavAtom } from "./atoms";
+import SidebarBottom from "./bottom";
+import MenuButton from "./menu-button";
+import MenuItems from "./menu-items";
+import { OrganizationSelectForm } from "./organization-select-form";
+import Overlay from "./overlay";
+import { ShelfMobileLogo, ShelfSidebarLogo } from "../../marketing/logos";
+
+export default function Sidebar() {
+  const { user, minimizedSidebar, currentOrganizationId } =
+    useLoaderData<typeof loader>();
+  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
+  const mainNavigationRef = useRef<HTMLElement>(null);
+
+  /** We use optimistic UI for folding of the scanner.tsx sidebar
+   * As we are making a request to the server to store the cookie,
+   * we need to use this approach, otherwise the sidebar will close/open
+   * only once the response is received from the server
+   */
+  const sidebarFetcher = useFetcher();
+  let optimisticMinimizedSidebar = minimizedSidebar;
+  if (sidebarFetcher.formData) {
+    optimisticMinimizedSidebar =
+      sidebarFetcher.formData.get("minimizeSidebar") === "open";
+  }
+  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
+  return (
+    <>
+      {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
+      <header
+        id="header"
+        className="flex items-center justify-between border-b bg-white p-4 md:hidden"
+      >
+        <Link to="." title="Home" className="block h-[32px]">
+          <ShelfMobileLogo />
+        </Link>
+        <div className="flex items-center space-x-4">
+          <NavLink
+            to="/scanner"
+            title="Scan QR Code"
+            className={({ isActive }) =>
+              tw(
+                "relative flex items-center justify-center px-2 transition",
+                isActive ? "text-primary-600" : "text-gray-500"
+              )
+            }
+          >
+            <ScanQRIcon />
+          </NavLink>
+          <MenuButton />
+        </div>
+      </header>
+
+      <Overlay />
+      <aside
+        id="main-navigation"
+        ref={mainNavigationRef}
+        className={tw(
+          `main-navigation fixed top-0 z-30 flex h-screen max-h-screen flex-col border-r border-gray-200 bg-white p-4 shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),_0px_8px_8px_-4px_rgba(16,24,40,0.03)] transition-all duration-100 ease-linear md:sticky md:left-0 md:px-4 md:py-8 md:shadow-none md:duration-100`,
+          optimisticMinimizedSidebar
+            ? "collapsed-navigation md:w-[82px] md:overflow-hidden"
+            : "md:left-0 md:w-[312px]",
+          isMobileNavOpen ? "left-0 w-[312px] overflow-hidden " : "-left-full"
+        )}
+      >
+        <div className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden">
+          <div className="navigation-header flex items-center justify-between">
+            <Link
+              to="."
+              title="Home"
+              className="logo flex items-center"
+              onClick={toggleMobileNav}
+            >
+              <ShelfSidebarLogo minimized={optimisticMinimizedSidebar} />
+            </Link>
+          </div>
+          <div className="">
+            <OrganizationSelectForm key={currentOrganizationId} />
+          </div>
+          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
+            <MenuItems fetcher={sidebarFetcher} />
+          </div>
+        </div>
+
+        <div className={tw("", workspaceSwitching ? "opacity-50" : "")}>
+          <SidebarBottom user={user} />
+        </div>
+      </aside>
+    </>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index b32d72635..11c6f2b06 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -1,99 +1,761 @@
-import { useRef } from "react";
-import { Link, NavLink, useFetcher, useLoaderData } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import { ScanQRIcon } from "~/components/icons/library";
-import type { loader } from "~/routes/_layout+/_layout";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useIsMobile } from "~/hooks/use-mobile";
+import { ArrowLeftIcon, SwitchIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
 import { tw } from "~/utils/tw";
+import Input from "~/components/forms/input";
+import { Separator } from "~/components/shared/separator";
+import { Sheet, SheetContent } from "~/components/shared/sheet";
+import { Skeleton } from "~/components/shared/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/shared/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = createContext<SidebarContext | null>(null);
 
-import { toggleMobileNavAtom } from "./atoms";
-import SidebarBottom from "./bottom";
-import MenuButton from "./menu-button";
-import MenuItems from "./menu-items";
-import { OrganizationSelectForm } from "./organization-select-form";
-import Overlay from "./overlay";
-import { ShelfMobileLogo, ShelfSidebarLogo } from "../../marketing/logos";
-
-export default function Sidebar() {
-  const { user, minimizedSidebar, currentOrganizationId } =
-    useLoaderData<typeof loader>();
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  const mainNavigationRef = useRef<HTMLElement>(null);
-
-  /** We use optimistic UI for folding of the scanner.tsx sidebar
-   * As we are making a request to the server to store the cookie,
-   * we need to use this approach, otherwise the sidebar will close/open
-   * only once the response is received from the server
-   */
-  const sidebarFetcher = useFetcher();
-  let optimisticMinimizedSidebar = minimizedSidebar;
-  if (sidebarFetcher.formData) {
-    optimisticMinimizedSidebar =
-      sidebarFetcher.formData.get("minimizeSidebar") === "open";
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-  return (
-    <>
-      {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
-      <header
-        id="header"
-        className="flex items-center justify-between border-b bg-white p-4 md:hidden"
-      >
-        <Link to="." title="Home" className="block h-[32px]">
-          <ShelfMobileLogo />
-        </Link>
-        <div className="flex items-center space-x-4">
-          <NavLink
-            to="/scanner"
-            title="Scan QR Code"
-            className={({ isActive }) =>
-              tw(
-                "relative flex items-center justify-center px-2 transition",
-                isActive ? "text-primary-600" : "text-gray-500"
-              )
+
+  return context;
+}
+
+const SidebarProvider = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open]
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
             }
+            className={tw(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
           >
-            <ScanQRIcon />
-          </NavLink>
-          <MenuButton />
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  }
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={tw(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
         </div>
-      </header>
+      );
+    }
 
-      <Overlay />
-      <aside
-        id="main-navigation"
-        ref={mainNavigationRef}
-        className={tw(
-          `main-navigation fixed top-0 z-30 flex h-screen max-h-screen flex-col border-r border-gray-200 bg-white p-4 shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),_0px_8px_8px_-4px_rgba(16,24,40,0.03)] transition-all duration-100 ease-linear md:sticky md:left-0 md:px-4 md:py-8 md:shadow-none md:duration-100`,
-          optimisticMinimizedSidebar
-            ? "collapsed-navigation md:w-[82px] md:overflow-hidden"
-            : "md:left-0 md:w-[312px]",
-          isMobileNavOpen ? "left-0 w-[312px] overflow-hidden " : "-left-full"
-        )}
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block text-sidebar-foreground"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
       >
-        <div className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden">
-          <div className="navigation-header flex items-center justify-between">
-            <Link
-              to="."
-              title="Home"
-              className="logo flex items-center"
-              onClick={toggleMobileNav}
-            >
-              <ShelfSidebarLogo minimized={optimisticMinimizedSidebar} />
-            </Link>
-          </div>
-          <div className="">
-            <OrganizationSelectForm key={currentOrganizationId} />
-          </div>
-          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
-            <MenuItems fetcher={sidebarFetcher} />
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={tw(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={tw(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
           </div>
         </div>
+      </div>
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
 
-        <div className={tw("", workspaceSwitching ? "opacity-50" : "")}>
-          <SidebarBottom user={user} />
-        </div>
-      </aside>
-    </>
+const SidebarTrigger = forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="secondary"
+      size="sm"
+      className={tw("h-7 w-7 border-none", className)}
+      onClick={(event: any) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <SwitchIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
   );
-}
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={tw(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <main
+        ref={ref}
+        className={tw(
+          "relative flex min-h-svh flex-1 flex-col bg-background",
+          "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={tw(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={tw("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={tw("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={tw("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={tw(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group"
+        className={tw("relative flex w-full min-w-0 flex-col p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={tw(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={tw(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={tw("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu"
+      className={tw("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={tw("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const SidebarMenuButton = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={tw(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={tw(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={tw(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={tw("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={tw(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={tw(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/app/components/marketing/logos.tsx b/app/components/marketing/logos.tsx
index 362c70820..59a931d26 100644
--- a/app/components/marketing/logos.tsx
+++ b/app/components/marketing/logos.tsx
@@ -1,6 +1,7 @@
 import { ShelfTypography } from "~/components/icons/library";
 import { config } from "~/config/shelf.config";
 import { tw } from "~/utils/tw";
+import When from "../when/when";
 
 /**
  * Logo shown in the sidebar
@@ -33,9 +34,11 @@ export const ShelfSidebarLogo = ({ minimized }: { minimized: boolean }) => {
         alt="Shelf Logo"
         className="mx-1.5 inline h-[32px]"
       />
-      <span className="logo-text transition duration-150 ease-linear">
-        <ShelfTypography />
-      </span>
+      <When truthy={!minimized}>
+        <span className="logo-text transition duration-150 ease-linear">
+          <ShelfTypography />
+        </span>
+      </When>
     </>
   );
 };
diff --git a/app/components/shared/separator.tsx b/app/components/shared/separator.tsx
new file mode 100644
index 000000000..2e1417d74
--- /dev/null
+++ b/app/components/shared/separator.tsx
@@ -0,0 +1,28 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { forwardRef } from "react";
+import { tw } from "~/utils/tw";
+
+const Separator = forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={tw(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/app/components/shared/sheet.tsx b/app/components/shared/sheet.tsx
new file mode 100644
index 000000000..033a82aaa
--- /dev/null
+++ b/app/components/shared/sheet.tsx
@@ -0,0 +1,137 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef } from "react";
+import { tw } from "~/utils/tw";
+import { XIcon } from "../icons/library";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={tw(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={tw(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <XIcon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={tw(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={tw(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={tw("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={tw("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/app/components/shared/skeleton.tsx b/app/components/shared/skeleton.tsx
new file mode 100644
index 000000000..a47ef4490
--- /dev/null
+++ b/app/components/shared/skeleton.tsx
@@ -0,0 +1,15 @@
+import { tw } from "~/utils/tw";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={tw("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/app/hooks/use-mobile.ts b/app/hooks/use-mobile.ts
new file mode 100644
index 000000000..081e23da6
--- /dev/null
+++ b/app/hooks/use-mobile.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    return () => {
+      mql.removeEventListener("change", onChange);
+    };
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 89775c750..5e38a99c1 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -8,8 +8,15 @@ import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ErrorContent } from "~/components/errors";
 
 import { InstallPwaPromptModal } from "~/components/layout/install-pwa-prompt-modal";
-import Sidebar from "~/components/layout/sidebar/sidebar";
+import AppSidebar from "~/components/layout/sidebar/app-sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "~/components/layout/sidebar/sidebar";
+import Sidebar from "~/components/layout/sidebar/sidebar-old";
 import { useCrisp } from "~/components/marketing/crisp";
+import { Separator } from "~/components/shared/separator";
 import { Spinner } from "~/components/shared/spinner";
 import { Toaster } from "~/components/shared/toast";
 import { NoSubscription } from "~/components/subscription/no-subscription";
@@ -131,8 +138,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 
 export default function App() {
   useCrisp();
-  const { currentOrganizationId, disabledTeamOrg } =
-    useLoaderData<typeof loader>();
+  const { disabledTeamOrg } = useLoaderData<typeof loader>();
   const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
 
   const renderInstallPwaPromptOnMobile = () =>
@@ -143,35 +149,36 @@ export default function App() {
     ) : null;
 
   return (
-    <>
-      <div
-        id="container"
-        key={currentOrganizationId}
-        className="flex h-screen max-h-screen min-h-screen min-w-[320px] flex-col"
-      >
-        <div className="inner-container flex flex-col md:flex-row">
-          <Sidebar />
-          <main className=" flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
-            <div className="flex h-full flex-1 flex-col">
-              {disabledTeamOrg ? (
-                <NoSubscription />
-              ) : workspaceSwitching ? (
-                <div className="flex size-full flex-col items-center justify-center text-center">
-                  <Spinner />
-                  <p className="mt-2">Activating workspace...</p>
-                </div>
-              ) : (
-                <Outlet />
-              )}
-            </div>
-            <Toaster />
-            <ClientOnly fallback={null}>
-              {renderInstallPwaPromptOnMobile}
-            </ClientOnly>
-          </main>
-        </div>
-      </div>
-    </>
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="bg-gray-25 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            Breadcrumb can go here
+          </div>
+        </header>
+        <main className="flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
+          <div className="flex h-full flex-1 flex-col">
+            {disabledTeamOrg ? (
+              <NoSubscription />
+            ) : workspaceSwitching ? (
+              <div className="flex size-full flex-col items-center justify-center text-center">
+                <Spinner />
+                <p className="mt-2">Activating workspace...</p>
+              </div>
+            ) : (
+              <Outlet />
+            )}
+          </div>
+          <Toaster />
+          <ClientOnly fallback={null}>
+            {renderInstallPwaPromptOnMobile}
+          </ClientOnly>
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }
 
diff --git a/package-lock.json b/package-lock.json
index 362eac8a3..1b5c7b95e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "2.0.0",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "1.0.4",
         "@radix-ui/react-toast": "1.1.5",
@@ -35,6 +36,7 @@
         "@zxing/library": "^0.20.0",
         "changedpi": "^1.0.4",
         "chardet": "^2.0.0",
+        "class-variance-authority": "^0.7.0",
         "cookie": "^0.7.0",
         "crisp-sdk-web": "^1.0.21",
         "csv-parse": "^5.5.3",
@@ -5000,6 +5002,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -9353,6 +9378,27 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA=="
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
diff --git a/package.json b/package.json
index cdbc2e137..104340400 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "2.0.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
@@ -69,6 +70,7 @@
     "@zxing/library": "^0.20.0",
     "changedpi": "^1.0.4",
     "chardet": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
     "cookie": "^0.7.0",
     "crisp-sdk-web": "^1.0.21",
     "csv-parse": "^5.5.3",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 86a760103..37afe7158 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
 export default {
   content: [
@@ -91,6 +92,7 @@ export default {
       colors: {
         white: "#ffffff",
         black: "#000000",
+        muted: colors.gray[200],
         gray: {
           25: "#FCFCFD",
           50: "#F9FAFB",

From b167da23e73a6cee7aef81691c8d3d05b25f7532 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 20 Nov 2024 18:32:16 +0100
Subject: [PATCH 14/55] refactor(sidebar): add organization-selector in sidebar

---
 .../layout/sidebar/organization-selector.tsx  | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 app/components/layout/sidebar/organization-selector.tsx

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
new file mode 100644
index 000000000..75bfa2e7b
--- /dev/null
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -0,0 +1,108 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "./sidebar";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { useIsMobile } from "~/hooks/use-mobile";
+import { useFetcher, useLoaderData } from "@remix-run/react";
+import type { loader } from "~/routes/_layout+/_layout";
+import ProfilePicture from "~/components/user/profile-picture";
+import { Image } from "~/components/shared/image";
+import { Button } from "~/components/shared/button";
+import invariant from "tiny-invariant";
+import { isFormProcessing } from "~/utils/form";
+
+export default function OrganizationSelector() {
+  const isMobile = useIsMobile();
+  const { organizations, currentOrganizationId } =
+    useLoaderData<typeof loader>();
+
+  const fetcher = useFetcher();
+  const isSwitchingOrg = isFormProcessing(fetcher.state);
+
+  const currentOrganization = organizations.find(
+    (org) => org.id === currentOrganizationId
+  );
+  invariant(
+    typeof currentOrganization !== "undefined",
+    "Something went wrong. Current organization is not in the list of organizations."
+  );
+
+  function handleSwitchOrganization(organizationId: string) {
+    const formData = new FormData();
+    formData.append("organizationId", organizationId);
+
+    fetcher.submit(formData, {
+      method: "POST",
+      action: "/api/user/change-current-organization",
+    });
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              {currentOrganization.type === "PERSONAL" ? (
+                <ProfilePicture width="w-6" height="h-6" />
+              ) : (
+                <Image
+                  imageId={currentOrganization.imageId}
+                  alt="img"
+                  className="size-6 rounded-[2px] object-cover"
+                  updatedAt={currentOrganization.updatedAt}
+                />
+              )}
+              <div className="flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {currentOrganization.name}
+                </span>
+              </div>
+              <ChevronDownIcon className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            {organizations.map((organization, index) => (
+              <DropdownMenuItem
+                key={organization.id}
+                className="gap-2 p-2"
+                onClick={() => {
+                  if (organization.id !== currentOrganizationId) {
+                    handleSwitchOrganization(organization.id);
+                  }
+                }}
+              >
+                {organization.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <Button
+              to="/account-details/workspace"
+              icon="settings"
+              variant="link"
+              className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
+            >
+              Manage workspaces
+            </Button>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

From 5a115d86c0561b8f98c78cdb952c731ff5b310f1 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 12:54:20 +0100
Subject: [PATCH 15/55] refactor(sidebar): fix organization-selector on mobile

---
 app/components/layout/sidebar/app-sidebar.tsx |  3 ++
 .../layout/sidebar/organization-selector.tsx  | 31 +++++++++++++------
 app/components/layout/sidebar/sidebar.tsx     |  2 +-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index ea82de16e..07f7920f1 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -7,6 +7,7 @@ import {
   SidebarRail,
   useSidebar,
 } from "./sidebar";
+import OrganizationSelector from "./organization-selector";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -19,6 +20,8 @@ export default function AppSidebar(props: AppSidebarProps) {
         <div className="flex items-center mt-2 mb-2">
           <ShelfSidebarLogo minimized={state === "collapsed"} />
         </div>
+
+        <OrganizationSelector />
       </SidebarHeader>
 
       <SidebarContent>This is content of sidebar</SidebarContent>
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 75bfa2e7b..33c122343 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -6,7 +6,12 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "./sidebar";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useIsMobile } from "~/hooks/use-mobile";
 import { useFetcher, useLoaderData } from "@remix-run/react";
@@ -16,9 +21,12 @@ import { Image } from "~/components/shared/image";
 import { Button } from "~/components/shared/button";
 import invariant from "tiny-invariant";
 import { isFormProcessing } from "~/utils/form";
+import When from "~/components/when/when";
 
 export default function OrganizationSelector() {
   const isMobile = useIsMobile();
+  const { open } = useSidebar();
+
   const { organizations, currentOrganizationId } =
     useLoaderData<typeof loader>();
 
@@ -50,7 +58,7 @@ export default function OrganizationSelector() {
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground data-[state=closed]:justify-center w-full h-full"
             >
               {currentOrganization.type === "PERSONAL" ? (
                 <ProfilePicture width="w-6" height="h-6" />
@@ -58,16 +66,21 @@ export default function OrganizationSelector() {
                 <Image
                   imageId={currentOrganization.imageId}
                   alt="img"
-                  className="size-6 rounded-[2px] object-cover"
+                  className="size-8 rounded-sm object-cover"
                   updatedAt={currentOrganization.updatedAt}
                 />
               )}
-              <div className="flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">
-                  {currentOrganization.name}
-                </span>
-              </div>
-              <ChevronDownIcon className="ml-auto" />
+
+              <When truthy={open}>
+                <>
+                  <div className="flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">
+                      {currentOrganization.name}
+                    </span>
+                  </div>
+                  <ChevronDownIcon className="ml-auto" />
+                </>
+              </When>
             </SidebarMenuButton>
           </DropdownMenuTrigger>
 
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index 11c6f2b06..be1e71048 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -511,7 +511,7 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {

From 5bac31f2cbdbfcde9a4e134c3cd10e3334684966 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 13:24:53 +0100
Subject: [PATCH 16/55] refactor(sidebar): create user menu for sidebar

---
 app/components/layout/sidebar/app-sidebar.tsx |   5 +-
 .../layout/sidebar/organization-selector.tsx  |   3 +-
 .../layout/sidebar/sidebar-user-menu.tsx      | 125 ++++++++++++++++++
 3 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 app/components/layout/sidebar/sidebar-user-menu.tsx

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 07f7920f1..73aed0613 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -8,6 +8,7 @@ import {
   useSidebar,
 } from "./sidebar";
 import OrganizationSelector from "./organization-selector";
+import SidebarUserMenu from "./sidebar-user-menu";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -26,7 +27,9 @@ export default function AppSidebar(props: AppSidebarProps) {
 
       <SidebarContent>This is content of sidebar</SidebarContent>
 
-      <SidebarFooter>this is footer</SidebarFooter>
+      <SidebarFooter>
+        <SidebarUserMenu />
+      </SidebarFooter>
       <SidebarRail />
     </Sidebar>
   );
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 33c122343..e300fd923 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -24,8 +24,7 @@ import { isFormProcessing } from "~/utils/form";
 import When from "~/components/when/when";
 
 export default function OrganizationSelector() {
-  const isMobile = useIsMobile();
-  const { open } = useSidebar();
+  const { open, isMobile } = useSidebar();
 
   const { organizations, currentOrganizationId } =
     useLoaderData<typeof loader>();
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
new file mode 100644
index 000000000..9efb2ffa3
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -0,0 +1,125 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
+import { useLoaderData } from "@remix-run/react";
+import type { loader } from "~/routes/_layout+/_layout";
+import ProfilePicture from "~/components/user/profile-picture";
+import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
+import { CrispButton } from "~/components/marketing/crisp";
+import { Form } from "~/components/custom-form";
+
+export default function SidebarUserMenu() {
+  const { user } = useLoaderData<typeof loader>();
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <ProfilePicture
+                width="w-8"
+                height="h-8"
+                className="mr-3 shrink-0"
+              />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.username}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronRight className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <ProfilePicture
+                  width="w-8"
+                  height="h-8"
+                  className="mr-3 shrink-0"
+                />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">
+                    {user.username}
+                  </span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="border-b border-gray-200 p-0">
+              <Button
+                to="/account-details"
+                icon="profile"
+                role="link"
+                variant="link"
+                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
+                width="full"
+              >
+                Account Details
+              </Button>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="border-b border-gray-200 p-0"
+            >
+              <CrispButton
+                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
+                variant="link"
+                width="full"
+                title="Questions/Feedback"
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <i className="icon text-gray-700">
+                    <QuestionsIcon />
+                  </i>
+                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
+                    Questions/Feedback
+                  </span>
+                </span>
+              </CrispButton>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="p-0"
+              onSelect={(e) => e.preventDefault()}
+            >
+              <Form action="/logout" method="post" className="w-full">
+                <Button
+                  icon="logout"
+                  role="link"
+                  type="submit"
+                  variant="link"
+                  className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
+                  width="full"
+                >
+                  Log Out
+                </Button>
+              </Form>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

From 86ac496d12c4688896baac11da7d72143368e125 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 13:51:28 +0100
Subject: [PATCH 17/55] refactor(sidebar): create basic sidebar nav menu

---
 app/components/layout/sidebar/app-sidebar.tsx |  5 +-
 app/components/layout/sidebar/menu-items.tsx  | 21 +---
 app/components/layout/sidebar/sidebar-nav.tsx | 95 +++++++++++++++++++
 app/components/shared/collapsible.tsx         |  9 ++
 package-lock.json                             | 31 ++++++
 package.json                                  |  1 +
 6 files changed, 141 insertions(+), 21 deletions(-)
 create mode 100644 app/components/layout/sidebar/sidebar-nav.tsx
 create mode 100644 app/components/shared/collapsible.tsx

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 73aed0613..89b99a3f3 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -9,6 +9,7 @@ import {
 } from "./sidebar";
 import OrganizationSelector from "./organization-selector";
 import SidebarUserMenu from "./sidebar-user-menu";
+import SidebarNav from "./sidebar-nav";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -25,7 +26,9 @@ export default function AppSidebar(props: AppSidebarProps) {
         <OrganizationSelector />
       </SidebarHeader>
 
-      <SidebarContent>This is content of sidebar</SidebarContent>
+      <SidebarContent>
+        <SidebarNav />
+      </SidebarContent>
 
       <SidebarFooter>
         <SidebarUserMenu />
diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
index 22bea70aa..157941848 100644
--- a/app/components/layout/sidebar/menu-items.tsx
+++ b/app/components/layout/sidebar/menu-items.tsx
@@ -115,26 +115,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
               </li>
             ) : (
               <li key={item.title}>
-                <NavLink
-                  className={({ isActive }) =>
-                    tw(
-                      "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive ? "active bg-primary-50 text-primary-600" : "",
-                      workspaceSwitching ? "pointer-events-none" : ""
-                    )
-                  }
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    {item.icon}
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    {item.title}
-                  </span>
-                </NavLink>
+                
               </li>
             )
           )}
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
new file mode 100644
index 000000000..3df05e32c
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -0,0 +1,95 @@
+import { ChevronRight, HomeIcon } from "~/components/icons/library";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "./sidebar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/shared/collapsible";
+import { cloneElement } from "react";
+import { NavLink } from "@remix-run/react";
+import { tw } from "~/utils/tw";
+
+type NavItem = {
+  title: string;
+  url: string;
+  icon: React.ReactElement;
+  items: Array<{ title: string; url: string }>;
+};
+
+const NAV_ITEMS: NavItem[] = [
+  {
+    title: "Nav items",
+    url: "/",
+    icon: <HomeIcon />,
+    items: [
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Home",
+        url: "/",
+      },
+    ],
+  },
+];
+
+export default function SidebarNav() {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {NAV_ITEMS.map((item) => (
+          <Collapsible key={item.title} asChild className="group/collapsible">
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && cloneElement(item.icon)}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <NavLink
+                          className="flex items-center gap-3 rounded px-3 py-2.5 font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600"
+                          to={subItem.url}
+                          data-test-id={`${subItem.title.toLowerCase()}SidebarMenuItem`}
+                          title={subItem.title}
+                        >
+                          <span className="text whitespace-nowrap transition duration-200 ease-linear">
+                            {subItem.title}
+                          </span>
+                        </NavLink>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
diff --git a/app/components/shared/collapsible.tsx b/app/components/shared/collapsible.tsx
new file mode 100644
index 000000000..5c28cbcc3
--- /dev/null
+++ b/app/components/shared/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/package-lock.json b/package-lock.json
index 1b5c7b95e..6f35c9c78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@paralleldrive/cuid2": "^2.2.2",
         "@prisma/client": "^5.9.1",
         "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "2.0.6",
         "@radix-ui/react-hover-card": "^1.0.7",
         "@radix-ui/react-icons": "^1.3.0",
@@ -3326,6 +3327,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
+      "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
diff --git a/package.json b/package.json
index 104340400..3a79fd7aa 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^5.9.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",

From 396ade067cb56739333a4e3c715605ee98835e6a Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 19:02:33 +0100
Subject: [PATCH 18/55] refactor(sidebar): create main and bottom navigation
 for sidebar

---
 app/components/icons/icon.tsx                 |   5 +-
 app/components/icons/iconHug.tsx              |   4 +-
 app/components/icons/library.tsx              |  16 ++-
 app/components/layout/sidebar/app-sidebar.tsx |   5 +-
 app/components/layout/sidebar/sidebar-nav.tsx | 124 ++++++++----------
 app/hooks/use-sidebar-nav-items.tsx           | 121 +++++++++++++++++
 6 files changed, 196 insertions(+), 79 deletions(-)
 create mode 100644 app/hooks/use-sidebar-nav-items.tsx

diff --git a/app/components/icons/icon.tsx b/app/components/icons/icon.tsx
index 5922f7a70..32f309438 100644
--- a/app/components/icons/icon.tsx
+++ b/app/components/icons/icon.tsx
@@ -6,9 +6,10 @@ import iconsMap from "../shared/icons-map";
 export interface IconProps {
   icon: IconType;
   disableWrap?: true;
+  size?: React.ComponentProps<typeof IconHug>["size"];
 }
 const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
-  { icon, disableWrap }: IconProps,
+  { icon, disableWrap, size = "sm" }: IconProps,
   _ref
 ) {
   return (
@@ -16,7 +17,7 @@ const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
     (disableWrap ? (
       <div>{iconsMap[icon]}</div>
     ) : (
-      <IconHug size="sm">{iconsMap[icon]}</IconHug>
+      <IconHug size={size}>{iconsMap[icon]}</IconHug>
     ))
   );
 });
diff --git a/app/components/icons/iconHug.tsx b/app/components/icons/iconHug.tsx
index b4484ac14..0602b4f61 100644
--- a/app/components/icons/iconHug.tsx
+++ b/app/components/icons/iconHug.tsx
@@ -2,7 +2,7 @@ import { tw } from "~/utils/tw";
 
 interface Props {
   /** Size of the hug. Defualt is sm */
-  size: "sm" | "md" | "lg" | "xl" | "2xl";
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
   children: JSX.Element | JSX.Element[];
 
@@ -16,6 +16,8 @@ interface Props {
 const sizeClasses: {
   [key in Props["size"]]: string;
 } = {
+  /** 16 */
+  xs: "w-4 h-4",
   /** 32px */
   sm: "w-5 h-5",
   /** 40px */
diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index 57ff9901e..a240a44df 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -436,8 +436,9 @@ export function XIcon(props: SVGProps<SVGSVGElement>) {
 
 export const AssetsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width={20}
-    height={22}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
@@ -854,8 +855,9 @@ export const WriteIcon = (props: SVGProps<SVGSVGElement>) => (
 export const TagsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={20}
-    height={23}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     {...props}
   >
@@ -923,9 +925,9 @@ export const RemoveTagsIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const LocationMarkerIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="18"
-    height="22"
-    viewBox="0 0 18 22"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 89b99a3f3..4f31afe0d 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -10,11 +10,13 @@ import {
 import OrganizationSelector from "./organization-selector";
 import SidebarUserMenu from "./sidebar-user-menu";
 import SidebarNav from "./sidebar-nav";
+import { useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
 export default function AppSidebar(props: AppSidebarProps) {
   const { state } = useSidebar();
+  const { topMenuItems, bottomMenuItems } = useSidebarNavItems();
 
   return (
     <Sidebar collapsible="icon" {...props}>
@@ -27,10 +29,11 @@ export default function AppSidebar(props: AppSidebarProps) {
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarNav />
+        <SidebarNav items={topMenuItems} />
       </SidebarContent>
 
       <SidebarFooter>
+        <SidebarNav items={bottomMenuItems} />
         <SidebarUserMenu />
       </SidebarFooter>
       <SidebarRail />
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 3df05e32c..80c61e704 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,7 +1,6 @@
 import { ChevronRight, HomeIcon } from "~/components/icons/library";
 import {
   SidebarGroup,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -14,81 +13,70 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/shared/collapsible";
-import { cloneElement } from "react";
 import { NavLink } from "@remix-run/react";
-import { tw } from "~/utils/tw";
+import { NavItem, useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
+import Icon from "~/components/icons/icon";
 
-type NavItem = {
-  title: string;
-  url: string;
-  icon: React.ReactElement;
-  items: Array<{ title: string; url: string }>;
+type SidebarNavProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  items: NavItem[];
 };
 
-const NAV_ITEMS: NavItem[] = [
-  {
-    title: "Nav items",
-    url: "/",
-    icon: <HomeIcon />,
-    items: [
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Home",
-        url: "/",
-      },
-      {
-        title: "Home",
-        url: "/",
-      },
-    ],
-  },
-];
-
-export default function SidebarNav() {
+export default function SidebarNav({
+  className,
+  style,
+  items,
+}: SidebarNavProps) {
   return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarGroup className={className} style={style}>
       <SidebarMenu>
-        {NAV_ITEMS.map((item) => (
-          <Collapsible key={item.title} asChild className="group/collapsible">
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
-                  {item.icon && cloneElement(item.icon)}
+        {items.map((item) => {
+          if (item.type === "parent") {
+            return (
+              <Collapsible
+                key={item.title}
+                asChild
+                className="group/collapsible"
+              >
+                <SidebarMenuItem key={item.title}>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip={item.title}>
+                      <Icon size="xs" icon={item.icon} />
+                      <span>{item.title}</span>
+                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.children.map((child) => (
+                        <SidebarMenuSubItem key={child.title}>
+                          <SidebarMenuSubButton asChild>
+                            <NavLink to={child.to} target={child.target}>
+                              <Icon size="xs" icon={child.icon} />
+                              <span>{child.title}</span>
+                            </NavLink>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            );
+          }
+
+          return (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <NavLink to={item.to} target={item.target}>
+                  <Icon size="xs" icon={item.icon} />
                   <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton asChild>
-                        <NavLink
-                          className="flex items-center gap-3 rounded px-3 py-2.5 font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600"
-                          to={subItem.url}
-                          data-test-id={`${subItem.title.toLowerCase()}SidebarMenuItem`}
-                          title={subItem.title}
-                        >
-                          <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                            {subItem.title}
-                          </span>
-                        </NavLink>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
+                </NavLink>
+              </SidebarMenuButton>
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
+          );
+        })}
       </SidebarMenu>
     </SidebarGroup>
   );
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
new file mode 100644
index 000000000..e6200bd9f
--- /dev/null
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -0,0 +1,121 @@
+import { useUserData } from "./use-user-data";
+import { useUserRoleHelper } from "./user-user-role-helper";
+import { IconType } from "~/components/shared/icons-map";
+
+type BaseNavItem = {
+  title: string;
+  icon: IconType;
+  hidden?: boolean;
+};
+
+type ChildNavItem = BaseNavItem & {
+  type: "child";
+  to: string;
+  target?: string;
+};
+
+type ParentNavItem = BaseNavItem & {
+  type: "parent";
+  children: Omit<ChildNavItem, "type">[];
+};
+
+export type NavItem = ChildNavItem | ParentNavItem;
+
+export function useSidebarNavItems() {
+  const user = useUserData();
+  const { isBaseOrSelfService } = useUserRoleHelper();
+
+  const topMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Dashboard",
+      to: "/dashboard",
+      icon: "graph",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Assets",
+      to: "/assets",
+      icon: "asset",
+    },
+    {
+      type: "child",
+      title: "Kits",
+      to: "/kits",
+      icon: "kit",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Categories",
+      to: "/categories",
+      icon: "category",
+      hidden: isBaseOrSelfService,
+    },
+
+    {
+      type: "child",
+      title: "Tags",
+      to: "/tags",
+      icon: "tag",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Locations",
+      to: "/locations",
+      icon: "location",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Calendar",
+      to: "/calendar",
+      icon: "calendar",
+    },
+    {
+      type: "child",
+      title: "Bookings",
+      to: "/bookings",
+      icon: "bookings",
+    },
+    {
+      type: "child",
+      title: "Team",
+      to: "/settings/team",
+      icon: "user",
+      hidden: isBaseOrSelfService,
+    },
+  ];
+
+  const bottomMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Asset labels",
+      to: `https://www.shelf.nu/order-tags?email=${user?.email}${
+        user?.firstName ? `&firstName=${user.firstName}` : ""
+      }${user?.lastName ? `&lastName=${user.lastName}` : ""}`,
+      icon: "asset-label",
+      target: "_blank",
+    },
+    {
+      type: "child",
+      title: "QR Scanner",
+      to: "/scanner",
+      icon: "scanQR",
+    },
+    {
+      type: "child",
+      title: "Workspace settings",
+      to: "/settings",
+      icon: "settings",
+      hidden: isBaseOrSelfService,
+    },
+  ];
+
+  return {
+    topMenuItems: topMenuItems.filter((item) => !item.hidden),
+    bottomMenuItems: bottomMenuItems.filter((item) => !item.hidden),
+  };
+}

From 95c4d87ce187e6cd8930e6033406460802aad968 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 19:11:42 +0100
Subject: [PATCH 19/55] refactor(sidebar): fix icons sized for collapsed
 sidebar issue

---
 app/components/icons/library.tsx              | 20 +++++++++----------
 app/components/layout/sidebar/app-sidebar.tsx |  2 +-
 app/components/layout/sidebar/menu-items.tsx  |  4 +---
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index a240a44df..f73604f75 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -84,8 +84,8 @@ export function ItemsIcon(props: SVGProps<SVGSVGElement>) {
 export function SettingsIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="100%"
-      height="100%"
+      width="20"
+      height="20"
       viewBox="0 0 22 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -1456,9 +1456,9 @@ export const CalendarIcon = (props: SVGProps<SVGSVGElement>) => (
 export const BookingsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 20 22"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     {...props}
   >
@@ -1493,8 +1493,8 @@ export const CustomFiedIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const KitIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="100%"
-    height="100%"
+    width="18"
+    height="20"
     viewBox="0 0 22 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1574,9 +1574,9 @@ export const AssetLabel = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="100%"
-    height="100%"
-    viewBox="0 0 24 24"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     {...props}
   >
     <path
diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 4f31afe0d..be47eaed8 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -33,7 +33,7 @@ export default function AppSidebar(props: AppSidebarProps) {
       </SidebarContent>
 
       <SidebarFooter>
-        <SidebarNav items={bottomMenuItems} />
+        <SidebarNav className="p-0" items={bottomMenuItems} />
         <SidebarUserMenu />
       </SidebarFooter>
       <SidebarRail />
diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
index 157941848..1fabe04b3 100644
--- a/app/components/layout/sidebar/menu-items.tsx
+++ b/app/components/layout/sidebar/menu-items.tsx
@@ -114,9 +114,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                 </Button>
               </li>
             ) : (
-              <li key={item.title}>
-                
-              </li>
+              <li key={item.title}></li>
             )
           )}
         </ul>

From dd64b96c9559dd7fd12632354da081f47784121c Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 21:19:22 +0100
Subject: [PATCH 20/55] refactor(sidebar): close dropdown on click

---
 .../layout/sidebar/organization-selector.tsx           | 10 +++++++++-
 app/components/layout/sidebar/sidebar-user-menu.tsx    | 10 ++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index e300fd923..ba25f1e7f 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -22,8 +22,11 @@ import { Button } from "~/components/shared/button";
 import invariant from "tiny-invariant";
 import { isFormProcessing } from "~/utils/form";
 import When from "~/components/when/when";
+import { useState } from "react";
 
 export default function OrganizationSelector() {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
   const { open, isMobile } = useSidebar();
 
   const { organizations, currentOrganizationId } =
@@ -50,10 +53,14 @@ export default function OrganizationSelector() {
     });
   }
 
+  function closeDropdown() {
+    setIsDropdownOpen(false);
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               size="lg"
@@ -109,6 +116,7 @@ export default function OrganizationSelector() {
               icon="settings"
               variant="link"
               className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
+              onClick={closeDropdown}
             >
               Manage workspaces
             </Button>
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index 9efb2ffa3..2a73fd1a1 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -19,15 +19,21 @@ import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { CrispButton } from "~/components/marketing/crisp";
 import { Form } from "~/components/custom-form";
+import { useState } from "react";
 
 export default function SidebarUserMenu() {
   const { user } = useLoaderData<typeof loader>();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { isMobile } = useSidebar();
 
+  function closeDropdown() {
+    setIsDropdownOpen(false);
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
@@ -75,7 +81,7 @@ export default function SidebarUserMenu() {
                 role="link"
                 variant="link"
                 className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                width="full"
+                onClick={closeDropdown}
               >
                 Account Details
               </Button>

From a7f7aaae55b4447e971f3086a1cb01c1406d9623 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 22:17:30 +0100
Subject: [PATCH 21/55] refactor(sidebar): fix issue with organization
 switching atom

---
 app/components/layout/breadcrumbs/index.tsx   | 20 ++++++-----
 .../layout/sidebar/organization-selector.tsx  | 14 ++++++--
 app/components/layout/sidebar/sidebar.tsx     |  6 ++--
 app/routes/_layout+/_layout.tsx               | 36 +++++++------------
 4 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/app/components/layout/breadcrumbs/index.tsx b/app/components/layout/breadcrumbs/index.tsx
index 6368662e5..595a1ce1e 100644
--- a/app/components/layout/breadcrumbs/index.tsx
+++ b/app/components/layout/breadcrumbs/index.tsx
@@ -1,5 +1,6 @@
 import { useMatches } from "@remix-run/react";
 import { Breadcrumb } from "./breadcrumb";
+import { SidebarTrigger } from "../sidebar/sidebar";
 
 // Define an interface that extends RouteHandle with the 'breadcrumb' property
 interface HandleWithBreadcrumb {
@@ -15,14 +16,17 @@ export function Breadcrumbs() {
   );
 
   return (
-    <div className="breadcrumbs">
-      {breadcrumbs.map((match, index) => (
-        <Breadcrumb
-          key={index}
-          match={match}
-          isLastItem={index === breadcrumbs.length - 1}
-        />
-      ))}
+    <div className="flex items-center gap-2.5">
+      <SidebarTrigger />
+      <div className="breadcrumbs">
+        {breadcrumbs.map((match, index) => (
+          <Breadcrumb
+            key={index}
+            match={match}
+            isLastItem={index === breadcrumbs.length - 1}
+          />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index ba25f1e7f..3c295f9d8 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -13,7 +13,6 @@ import {
   useSidebar,
 } from "./sidebar";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { useIsMobile } from "~/hooks/use-mobile";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import type { loader } from "~/routes/_layout+/_layout";
 import ProfilePicture from "~/components/user/profile-picture";
@@ -22,7 +21,9 @@ import { Button } from "~/components/shared/button";
 import invariant from "tiny-invariant";
 import { isFormProcessing } from "~/utils/form";
 import When from "~/components/when/when";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useSetAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 
 export default function OrganizationSelector() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -35,6 +36,8 @@ export default function OrganizationSelector() {
   const fetcher = useFetcher();
   const isSwitchingOrg = isFormProcessing(fetcher.state);
 
+  const setWorkspaceSwitching = useSetAtom(switchingWorkspaceAtom);
+
   const currentOrganization = organizations.find(
     (org) => org.id === currentOrganizationId
   );
@@ -57,6 +60,13 @@ export default function OrganizationSelector() {
     setIsDropdownOpen(false);
   }
 
+  useEffect(
+    function setSwitchingWorkspaceAfterFetch() {
+      setWorkspaceSwitching(isSwitchingOrg);
+    },
+    [isFormProcessing, setWorkspaceSwitching]
+  );
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index be1e71048..95786d9aa 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -11,7 +11,7 @@ import {
   useState,
 } from "react";
 import { useIsMobile } from "~/hooks/use-mobile";
-import { ArrowLeftIcon, SwitchIcon } from "~/components/icons/library";
+import { SwitchIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { tw } from "~/utils/tw";
 import Input from "~/components/forms/input";
@@ -277,14 +277,14 @@ const SidebarTrigger = forwardRef<
       data-sidebar="trigger"
       variant="secondary"
       size="sm"
-      className={tw("h-7 w-7 border-none", className)}
+      className={tw("border-none p-0", className)}
       onClick={(event: any) => {
         onClick?.(event);
         toggleSidebar();
       }}
       {...props}
     >
-      <SwitchIcon />
+      <SwitchIcon className="size-[18px] mt-1 text-gray-500" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 5e38a99c1..f25e9c5d6 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -12,11 +12,8 @@ import AppSidebar from "~/components/layout/sidebar/app-sidebar";
 import {
   SidebarInset,
   SidebarProvider,
-  SidebarTrigger,
 } from "~/components/layout/sidebar/sidebar";
-import Sidebar from "~/components/layout/sidebar/sidebar-old";
 import { useCrisp } from "~/components/marketing/crisp";
-import { Separator } from "~/components/shared/separator";
 import { Spinner } from "~/components/shared/spinner";
 import { Toaster } from "~/components/shared/toast";
 import { NoSubscription } from "~/components/subscription/no-subscription";
@@ -152,31 +149,22 @@ export default function App() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-gray-25 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
-            Breadcrumb can go here
-          </div>
-        </header>
-        <main className="flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
-          <div className="flex h-full flex-1 flex-col">
-            {disabledTeamOrg ? (
-              <NoSubscription />
-            ) : workspaceSwitching ? (
-              <div className="flex size-full flex-col items-center justify-center text-center">
-                <Spinner />
-                <p className="mt-2">Activating workspace...</p>
-              </div>
-            ) : (
-              <Outlet />
-            )}
-          </div>
+        <div className="flex-1 bg-gray-25 px-4 pb-6">
+          {disabledTeamOrg ? (
+            <NoSubscription />
+          ) : workspaceSwitching ? (
+            <div className="flex size-full flex-col items-center justify-center text-center">
+              <Spinner />
+              <p className="mt-2">Activating workspace...</p>
+            </div>
+          ) : (
+            <Outlet />
+          )}
           <Toaster />
           <ClientOnly fallback={null}>
             {renderInstallPwaPromptOnMobile}
           </ClientOnly>
-        </main>
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );

From 198fa2c93413e4a0067a991d132c3a1c7a3b1922 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Thu, 21 Nov 2024 22:52:39 +0100
Subject: [PATCH 22/55] refactor(sidebar): highlight active route in sidebar
 menu

---
 app/components/layout/sidebar/sidebar-nav.tsx | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 80c61e704..1fa7efbfe 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -13,9 +13,10 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/shared/collapsible";
-import { NavLink } from "@remix-run/react";
+import { matchRoutes, NavLink, useMatch, useMatches } from "@remix-run/react";
 import { NavItem, useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
 import Icon from "~/components/icons/icon";
+import { tw } from "~/utils/tw";
 
 type SidebarNavProps = {
   className?: string;
@@ -28,6 +29,13 @@ export default function SidebarNav({
   style,
   items,
 }: SidebarNavProps) {
+  const matches = useMatches();
+
+  function isRouteActive(route: string) {
+    const matchesRoutes = matches.map((match) => match.pathname);
+    return matchesRoutes.some((matchRoute) => matchRoute.includes(route));
+  }
+
   return (
     <SidebarGroup className={className} style={style}>
       <SidebarMenu>
@@ -49,16 +57,27 @@ export default function SidebarNav({
                   </CollapsibleTrigger>
                   <CollapsibleContent>
                     <SidebarMenuSub>
-                      {item.children.map((child) => (
-                        <SidebarMenuSubItem key={child.title}>
-                          <SidebarMenuSubButton asChild>
-                            <NavLink to={child.to} target={child.target}>
-                              <Icon size="xs" icon={child.icon} />
-                              <span>{child.title}</span>
-                            </NavLink>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
+                      {item.children.map((child) => {
+                        const isChildActive = isRouteActive(child.to);
+
+                        return (
+                          <SidebarMenuSubItem key={child.title}>
+                            <SidebarMenuSubButton asChild>
+                              <NavLink
+                                to={child.to}
+                                target={child.target}
+                                className={tw(
+                                  isChildActive &&
+                                    "text-primary-500 bg-primary-25"
+                                )}
+                              >
+                                <Icon size="xs" icon={child.icon} />
+                                <span>{child.title}</span>
+                              </NavLink>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        );
+                      })}
                     </SidebarMenuSub>
                   </CollapsibleContent>
                 </SidebarMenuItem>
@@ -66,10 +85,16 @@ export default function SidebarNav({
             );
           }
 
+          const isActive = isRouteActive(item.to);
+
           return (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton asChild tooltip={item.title}>
-                <NavLink to={item.to} target={item.target}>
+                <NavLink
+                  to={item.to}
+                  target={item.target}
+                  className={tw(isActive && "text-primary-500 bg-primary-25")}
+                >
                   <Icon size="xs" icon={item.icon} />
                   <span>{item.title}</span>
                 </NavLink>

From 01fb3a0d74cda564946e5f32403b933aa17b950a Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 22 Nov 2024 15:32:58 +0100
Subject: [PATCH 23/55] refactor(sidebar): fix pr issues

---
 app/components/icons/icon.tsx                 |  7 +++++--
 app/components/icons/library.tsx              |  4 ++--
 app/components/layout/breadcrumbs/index.tsx   | 20 ++++++++-----------
 .../layout/sidebar/organization-selector.tsx  |  6 +++---
 app/components/layout/sidebar/sidebar-nav.tsx | 12 +++++++++--
 .../layout/sidebar/sidebar-user-menu.tsx      |  4 ++--
 app/components/layout/sidebar/sidebar.tsx     |  2 +-
 app/root.tsx                                  |  7 ++-----
 app/tailwind.css                              | 13 ++++++++++++
 tailwind.config.ts                            | 10 ++++++++++
 10 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/app/components/icons/icon.tsx b/app/components/icons/icon.tsx
index 32f309438..5ace388f6 100644
--- a/app/components/icons/icon.tsx
+++ b/app/components/icons/icon.tsx
@@ -4,12 +4,13 @@ import type { IconType } from "../shared/icons-map";
 import iconsMap from "../shared/icons-map";
 
 export interface IconProps {
+  className?: string;
   icon: IconType;
   disableWrap?: true;
   size?: React.ComponentProps<typeof IconHug>["size"];
 }
 const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
-  { icon, disableWrap, size = "sm" }: IconProps,
+  { className, icon, disableWrap, size = "sm" }: IconProps,
   _ref
 ) {
   return (
@@ -17,7 +18,9 @@ const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
     (disableWrap ? (
       <div>{iconsMap[icon]}</div>
     ) : (
-      <IconHug size={size}>{iconsMap[icon]}</IconHug>
+      <IconHug className={className} size={size}>
+        {iconsMap[icon]}
+      </IconHug>
     ))
   );
 });
diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index f73604f75..c75727890 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -1574,9 +1574,9 @@ export const AssetLabel = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="20"
+    width="18"
     height="20"
-    viewBox="0 0 20 20"
+    viewBox="0 0 22 20"
     {...props}
   >
     <path
diff --git a/app/components/layout/breadcrumbs/index.tsx b/app/components/layout/breadcrumbs/index.tsx
index 595a1ce1e..6368662e5 100644
--- a/app/components/layout/breadcrumbs/index.tsx
+++ b/app/components/layout/breadcrumbs/index.tsx
@@ -1,6 +1,5 @@
 import { useMatches } from "@remix-run/react";
 import { Breadcrumb } from "./breadcrumb";
-import { SidebarTrigger } from "../sidebar/sidebar";
 
 // Define an interface that extends RouteHandle with the 'breadcrumb' property
 interface HandleWithBreadcrumb {
@@ -16,17 +15,14 @@ export function Breadcrumbs() {
   );
 
   return (
-    <div className="flex items-center gap-2.5">
-      <SidebarTrigger />
-      <div className="breadcrumbs">
-        {breadcrumbs.map((match, index) => (
-          <Breadcrumb
-            key={index}
-            match={match}
-            isLastItem={index === breadcrumbs.length - 1}
-          />
-        ))}
-      </div>
+    <div className="breadcrumbs">
+      {breadcrumbs.map((match, index) => (
+        <Breadcrumb
+          key={index}
+          match={match}
+          isLastItem={index === breadcrumbs.length - 1}
+        />
+      ))}
     </div>
   );
 }
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 3c295f9d8..569222113 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -74,7 +74,7 @@ export default function OrganizationSelector() {
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground data-[state=closed]:justify-center w-full h-full"
+              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground justify-center w-full h-full"
             >
               {currentOrganization.type === "PERSONAL" ? (
                 <ProfilePicture width="w-6" height="h-6" />
@@ -101,7 +101,7 @@ export default function OrganizationSelector() {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
             align="start"
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
@@ -109,7 +109,7 @@ export default function OrganizationSelector() {
             {organizations.map((organization, index) => (
               <DropdownMenuItem
                 key={organization.id}
-                className="gap-2 p-2"
+                className="gap-2 p-2 rounded-sm"
                 onClick={() => {
                   if (organization.id !== currentOrganizationId) {
                     handleSwitchOrganization(organization.id);
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 1fa7efbfe..34da6f0ee 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -67,11 +67,16 @@ export default function SidebarNav({
                                 to={child.to}
                                 target={child.target}
                                 className={tw(
+                                  "font-medium",
                                   isChildActive &&
                                     "text-primary-500 bg-primary-25"
                                 )}
                               >
-                                <Icon size="xs" icon={child.icon} />
+                                <Icon
+                                  size="xs"
+                                  icon={child.icon}
+                                  className="text-gray-500"
+                                />
                                 <span>{child.title}</span>
                               </NavLink>
                             </SidebarMenuSubButton>
@@ -93,7 +98,10 @@ export default function SidebarNav({
                 <NavLink
                   to={item.to}
                   target={item.target}
-                  className={tw(isActive && "text-primary-500 bg-primary-25")}
+                  className={tw(
+                    "font-medium",
+                    isActive && "text-primary-500 bg-primary-25"
+                  )}
                 >
                   <Icon size="xs" icon={item.icon} />
                   <span>{item.title}</span>
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index 2a73fd1a1..8e7753e88 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -37,7 +37,7 @@ export default function SidebarUserMenu() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <ProfilePicture
                 width="w-8"
@@ -53,7 +53,7 @@ export default function SidebarUserMenu() {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
             side={isMobile ? "bottom" : "right"}
             align="end"
             sideOffset={4}
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index 95786d9aa..e6642cf4c 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -284,7 +284,7 @@ const SidebarTrigger = forwardRef<
       }}
       {...props}
     >
-      <SwitchIcon className="size-[18px] mt-1 text-gray-500" />
+      <SwitchIcon className="size-4 text-gray-500" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
diff --git a/app/root.tsx b/app/root.tsx
index 3afd92311..b170218ae 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -34,6 +34,7 @@ import { data } from "./utils/http.server";
 import { useNonce } from "./utils/nonce-provider";
 import { PwaManagerProvider } from "./utils/pwa-manager";
 import { splashScreenLinks } from "./utils/splash-screen-links";
+import { SidebarTrigger } from "./components/layout/sidebar/sidebar";
 
 export interface RootData {
   env: typeof getBrowserEnv;
@@ -41,11 +42,7 @@ export interface RootData {
 }
 
 export const handle = {
-  breadcrumb: () => (
-    <Link to="/" title="Home" id="homeCrumb">
-      <HomeIcon className="inline" />
-    </Link>
-  ),
+  breadcrumb: () => <SidebarTrigger />,
 };
 
 export const links: LinksFunction = () => [
diff --git a/app/tailwind.css b/app/tailwind.css
index b5c61c956..ab6af0c90 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 37afe7158..5bf0309e6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -221,6 +221,16 @@ export default {
             inverted: "#000000", // black
           },
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
 
       boxShadow: {

From 9be30ee5311beeb9634af2c94dd6afb3e62350e8 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Sat, 23 Nov 2024 12:26:40 +0100
Subject: [PATCH 24/55] refactor(sidebar): fix color issues and implement
 sidebar with cookie and make it optimistic

---
 app/components/layout/sidebar/sidebar.tsx | 57 ++++++++++++++++-------
 app/routes/_layout+/_layout.tsx           |  4 +-
 app/tailwind.css                          |  1 -
 tailwind.config.ts                        |  1 -
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index e6642cf4c..fc29f7234 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -24,9 +24,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "~/components/shared/tooltip";
+import { useFetcher } from "@remix-run/react";
+import { isFormProcessing } from "~/utils/form";
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
@@ -40,6 +40,7 @@ type SidebarContext = {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  isSidebarToggling: boolean;
 };
 
 const SidebarContext = createContext<SidebarContext | null>(null);
@@ -76,6 +77,9 @@ const SidebarProvider = forwardRef<
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = useState(false);
 
+    const sidebarTogglerFetcher = useFetcher();
+    const isSidebarToggling = isFormProcessing(sidebarTogglerFetcher.state);
+
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = useState(defaultOpen);
@@ -89,8 +93,14 @@ const SidebarProvider = forwardRef<
           _setOpen(openState);
         }
 
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        /* Setting state of sidebar in cookies (userPrefs) */
+        const formData = new FormData();
+        formData.append("minimizeSidebar", openState ? "close" : "open");
+
+        sidebarTogglerFetcher.submit(formData, {
+          method: "POST",
+          action: "/api/user/prefs/minimized-sidebar",
+        });
       },
       [setOpenProp, open]
     );
@@ -131,8 +141,18 @@ const SidebarProvider = forwardRef<
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        isSidebarToggling,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        isSidebarToggling,
+      ]
     );
 
     return (
@@ -269,15 +289,19 @@ const SidebarTrigger = forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, isSidebarToggling } = useSidebar();
 
   return (
     <Button
       ref={ref}
+      disabled={isSidebarToggling}
       data-sidebar="trigger"
       variant="secondary"
-      size="sm"
-      className={tw("border-none p-0", className)}
+      className={tw(
+        "border-none p-0",
+        isSidebarToggling && "pointer-events-none cursor-not-allowed",
+        className
+      )}
       onClick={(event: any) => {
         onClick?.(event);
         toggleSidebar();
@@ -295,7 +319,7 @@ const SidebarRail = forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, isSidebarToggling } = useSidebar();
 
   return (
     <button
@@ -304,6 +328,7 @@ const SidebarRail = forwardRef<
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
+      disabled={isSidebarToggling}
       title="Toggle Sidebar"
       className={tw(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
@@ -346,7 +371,7 @@ const SidebarInput = forwardRef<
       ref={ref}
       data-sidebar="input"
       className={tw(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-primary-500",
         className
       )}
       {...props}
@@ -440,7 +465,7 @@ const SidebarGroupLabel = forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={tw(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-primary-500 transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -461,7 +486,7 @@ const SidebarGroupAction = forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={tw(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -511,11 +536,11 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding] hover:text-primary-500 hover:bg-primary-25 focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: "hover:text-primary-500 hover:bg-primary-25",
         outline:
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
@@ -605,7 +630,7 @@ const SidebarMenuAction = forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={tw(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -720,7 +745,7 @@ const SidebarMenuSubButton = forwardRef<
       data-size={size}
       data-active={isActive}
       className={tw(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-primary-500 hover:text-primary-500 hover:bg-primary-25 focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index f25e9c5d6..bec976e61 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -135,7 +135,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 
 export default function App() {
   useCrisp();
-  const { disabledTeamOrg } = useLoaderData<typeof loader>();
+  const { disabledTeamOrg, minimizedSidebar } = useLoaderData<typeof loader>();
   const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
 
   const renderInstallPwaPromptOnMobile = () =>
@@ -146,7 +146,7 @@ export default function App() {
     ) : null;
 
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={!minimizedSidebar}>
       <AppSidebar />
       <SidebarInset>
         <div className="flex-1 bg-gray-25 px-4 pb-6">
diff --git a/app/tailwind.css b/app/tailwind.css
index ab6af0c90..fd9f66f64 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -11,6 +11,5 @@
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5bf0309e6..784257a90 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -229,7 +229,6 @@ export default {
           accent: "hsl(var(--sidebar-accent))",
           "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
           border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
         },
       },
 

From a5f52153dc7140582715eabd1c68df3523e3472f Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 27 Nov 2024 17:12:17 +0100
Subject: [PATCH 25/55] refactor(sidebar): done pr review changes

---
 .../assets-index/asset-index-pagination.tsx   |  9 ++--
 app/components/layout/sidebar/app-sidebar.tsx |  2 +-
 app/components/layout/sidebar/sidebar-nav.tsx | 15 +++---
 app/components/layout/sidebar/sidebar.tsx     | 21 ++++----
 app/hooks/use-sidebar-nav-items.tsx           | 53 ++++++++++++++-----
 app/routes/_layout+/_layout.tsx               | 32 ++++++-----
 app/routes/_layout+/assets._index.tsx         |  2 +-
 7 files changed, 77 insertions(+), 57 deletions(-)

diff --git a/app/components/assets/assets-index/asset-index-pagination.tsx b/app/components/assets/assets-index/asset-index-pagination.tsx
index 3583c096e..18c53f3c5 100644
--- a/app/components/assets/assets-index/asset-index-pagination.tsx
+++ b/app/components/assets/assets-index/asset-index-pagination.tsx
@@ -26,14 +26,13 @@ import { tw } from "~/utils/tw";
 import { Pagination } from "../../list/pagination";
 import { Button } from "../../shared/button";
 import { ButtonGroup } from "../../shared/button-group";
+import { useSidebar } from "~/components/layout/sidebar/sidebar";
 
 export function AssetIndexPagination() {
   const { roles } = useUserRoleHelper();
-  let minimizedSidebar = useRouteLoaderData<typeof layoutLoader>(
-    "routes/_layout+/_layout"
-  )?.minimizedSidebar;
   const fetcher = useFetcher({ key: "asset-index-settings-mode" });
   const { isMd } = useViewportHeight();
+  const { state } = useSidebar();
 
   const { modeIsSimple, modeIsAdvanced } = useAssetIndexViewState();
   const disabledButtonStyles =
@@ -57,9 +56,9 @@ export function AssetIndexPagination() {
   return (
     <div
       className={tw(
+        "asset-index-pagination flex flex-col items-center justify-between border-t border-gray-200 bg-white md:flex-row transition-all ease-in-out delay-75",
         isMd ? "fixed bottom-0 right-0 z-[12]" : "",
-        "asset-index-pagination  flex flex-col items-center justify-between border-t border-gray-200 bg-white md:flex-row ",
-        minimizedSidebar ? "lg:left-[82px]" : "lg:left-[312px]"
+        state === "collapsed" ? "lg:left-[48px]" : "lg:left-[256px]"
       )}
     >
       <Pagination className="px-4 py-[6px]" />
diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index be47eaed8..ecca0cf75 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -20,7 +20,7 @@ export default function AppSidebar(props: AppSidebarProps) {
 
   return (
     <Sidebar collapsible="icon" {...props}>
-      <SidebarHeader className={state === "collapsed" ? "p-0" : ""}>
+      <SidebarHeader className={state === "collapsed" ? "px-0" : ""}>
         <div className="flex items-center mt-2 mb-2">
           <ShelfSidebarLogo minimized={state === "collapsed"} />
         </div>
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 34da6f0ee..4d4ca0fde 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -50,7 +50,11 @@ export default function SidebarNav({
                 <SidebarMenuItem key={item.title}>
                   <CollapsibleTrigger asChild>
                     <SidebarMenuButton tooltip={item.title}>
-                      <Icon size="xs" icon={item.icon} />
+                      <Icon
+                        size="xs"
+                        icon={item.icon}
+                        className="text-gray-500"
+                      />
                       <span>{item.title}</span>
                       <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                     </SidebarMenuButton>
@@ -72,12 +76,7 @@ export default function SidebarNav({
                                     "text-primary-500 bg-primary-25"
                                 )}
                               >
-                                <Icon
-                                  size="xs"
-                                  icon={child.icon}
-                                  className="text-gray-500"
-                                />
-                                <span>{child.title}</span>
+                                {child.title}
                               </NavLink>
                             </SidebarMenuSubButton>
                           </SidebarMenuSubItem>
@@ -103,7 +102,7 @@ export default function SidebarNav({
                     isActive && "text-primary-500 bg-primary-25"
                   )}
                 >
-                  <Icon size="xs" icon={item.icon} />
+                  <Icon size="xs" icon={item.icon} className="text-gray-500" />
                   <span>{item.title}</span>
                 </NavLink>
               </SidebarMenuButton>
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index fc29f7234..492f3e0cb 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -289,19 +289,14 @@ const SidebarTrigger = forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar, isSidebarToggling } = useSidebar();
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
       ref={ref}
-      disabled={isSidebarToggling}
       data-sidebar="trigger"
       variant="secondary"
-      className={tw(
-        "border-none p-0",
-        isSidebarToggling && "pointer-events-none cursor-not-allowed",
-        className
-      )}
+      className={tw("border-none p-0", className)}
       onClick={(event: any) => {
         onClick?.(event);
         toggleSidebar();
@@ -319,7 +314,7 @@ const SidebarRail = forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar, isSidebarToggling } = useSidebar();
+  const { toggleSidebar } = useSidebar();
 
   return (
     <button
@@ -328,10 +323,9 @@ const SidebarRail = forwardRef<
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
-      disabled={isSidebarToggling}
       title="Toggle Sidebar"
       className={tw(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "absolute inset-y-0 z-50 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
@@ -347,12 +341,17 @@ SidebarRail.displayName = "SidebarRail";
 
 const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
   ({ className, ...props }, ref) => {
+    const { state } = useSidebar();
+
     return (
       <main
         ref={ref}
         className={tw(
-          "relative flex min-h-svh flex-1 flex-col bg-background",
+          "relative flex h-[96.5vh] flex-1 flex-col bg-background",
           "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+          state === "collapsed"
+            ? "md:max-w-[calc(100vw_-_48px)]"
+            : "md:max-w-[calc(100vw_-_274px)]",
           className
         )}
         {...props}
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index e6200bd9f..4ab66c13c 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -4,8 +4,8 @@ import { IconType } from "~/components/shared/icons-map";
 
 type BaseNavItem = {
   title: string;
-  icon: IconType;
   hidden?: boolean;
+  icon: IconType;
 };
 
 type ChildNavItem = BaseNavItem & {
@@ -16,7 +16,7 @@ type ChildNavItem = BaseNavItem & {
 
 type ParentNavItem = BaseNavItem & {
   type: "parent";
-  children: Omit<ChildNavItem, "type">[];
+  children: Omit<ChildNavItem, "type" | "icon">[];
 };
 
 export type NavItem = ChildNavItem | ParentNavItem;
@@ -69,23 +69,35 @@ export function useSidebarNavItems() {
       hidden: isBaseOrSelfService,
     },
     {
-      type: "child",
-      title: "Calendar",
-      to: "/calendar",
-      icon: "calendar",
-    },
-    {
-      type: "child",
+      type: "parent",
       title: "Bookings",
-      to: "/bookings",
       icon: "bookings",
+      children: [
+        {
+          title: "View Bookings",
+          to: "/bookings",
+        },
+        {
+          title: "Calendar",
+          to: "/calendar",
+        },
+      ],
     },
     {
-      type: "child",
+      type: "parent",
       title: "Team",
-      to: "/settings/team",
       icon: "user",
       hidden: isBaseOrSelfService,
+      children: [
+        {
+          title: "Users",
+          to: "/settings/team/users",
+        },
+        {
+          title: "Non-registered members",
+          to: "/settings/team/nrm",
+        },
+      ],
     },
   ];
 
@@ -106,11 +118,24 @@ export function useSidebarNavItems() {
       icon: "scanQR",
     },
     {
-      type: "child",
+      type: "parent",
       title: "Workspace settings",
-      to: "/settings",
       icon: "settings",
       hidden: isBaseOrSelfService,
+      children: [
+        {
+          title: "General",
+          to: "/settings/general",
+        },
+        {
+          title: "Custom fields",
+          to: "/settings/custom-fields",
+        },
+        {
+          title: "Team",
+          to: "/settings/team",
+        },
+      ],
     },
   ];
 
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index bec976e61..7c84d1e38 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -148,23 +148,21 @@ export default function App() {
   return (
     <SidebarProvider defaultOpen={!minimizedSidebar}>
       <AppSidebar />
-      <SidebarInset>
-        <div className="flex-1 bg-gray-25 px-4 pb-6">
-          {disabledTeamOrg ? (
-            <NoSubscription />
-          ) : workspaceSwitching ? (
-            <div className="flex size-full flex-col items-center justify-center text-center">
-              <Spinner />
-              <p className="mt-2">Activating workspace...</p>
-            </div>
-          ) : (
-            <Outlet />
-          )}
-          <Toaster />
-          <ClientOnly fallback={null}>
-            {renderInstallPwaPromptOnMobile}
-          </ClientOnly>
-        </div>
+      <SidebarInset className="flex-1 bg-gray-25 px-4">
+        {disabledTeamOrg ? (
+          <NoSubscription />
+        ) : workspaceSwitching ? (
+          <div className="flex size-full flex-col items-center justify-center text-center">
+            <Spinner />
+            <p className="mt-2">Activating workspace...</p>
+          </div>
+        ) : (
+          <Outlet />
+        )}
+        <Toaster />
+        <ClientOnly fallback={null}>
+          {renderInstallPwaPromptOnMobile}
+        </ClientOnly>
       </SidebarInset>
     </SidebarProvider>
   );
diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
index 3913fd0fa..0b5dec9de 100644
--- a/app/routes/_layout+/assets._index.tsx
+++ b/app/routes/_layout+/assets._index.tsx
@@ -328,7 +328,7 @@ export const AssetsList = ({
   return (
     <div
       className={tw(
-        "flex h-full flex-col",
+        "flex flex-col",
         modeIsSimple ? "gap-4 pt-4" : "gap-2 pt-2"
       )}
     >

From 8032f1cacde7b26e0d41764732bac7a23141c12c Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Tue, 19 Nov 2024 13:41:58 +0100
Subject: [PATCH 26/55] feat(404): add additionalData in getAsset for special
 case

---
 app/modules/asset/service.server.ts           | 39 ++++++++++++++++++-
 app/modules/organization/service.server.ts    |  1 +
 .../_layout+/assets.$assetId.activity.tsx     |  3 +-
 .../assets.$assetId.overview.duplicate.tsx    | 11 ++++--
 .../_layout+/assets.$assetId.overview.tsx     |  3 +-
 ...sets.$assetId.overview.update-location.tsx |  4 +-
 app/routes/_layout+/assets.$assetId.tsx       |  3 +-
 app/routes/_layout+/assets.$assetId_.edit.tsx | 14 ++++---
 app/routes/api+/asset.scan.ts                 |  3 +-
 app/utils/roles.server.ts                     |  1 +
 10 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/app/modules/asset/service.server.ts b/app/modules/asset/service.server.ts
index ae02ecfb2..2f0ff97e7 100644
--- a/app/modules/asset/service.server.ts
+++ b/app/modules/asset/service.server.ts
@@ -11,6 +11,7 @@ import type {
   Booking,
   Kit,
   AssetIndexSettings,
+  UserOrganization,
 } from "@prisma/client";
 import {
   AssetStatus,
@@ -101,17 +102,47 @@ type AssetWithInclude<T extends Prisma.AssetInclude | undefined> =
 export async function getAsset<T extends Prisma.AssetInclude | undefined>({
   id,
   organizationId,
+  userOrganizations,
   include,
 }: Pick<Asset, "id"> & {
   organizationId: Asset["organizationId"];
+  userOrganizations: Pick<UserOrganization, "organizationId">[];
   include?: T;
 }): Promise<AssetWithInclude<T>> {
   try {
+    const otherOrganizationIds = userOrganizations.map(
+      (org) => org.organizationId
+    );
+
     const asset = await db.asset.findFirstOrThrow({
-      where: { id, organizationId },
+      where: {
+        OR: [
+          { id, organizationId },
+          { id, organizationId: { in: otherOrganizationIds } },
+        ],
+      },
       include: { ...include },
     });
 
+    /* User is accessing the asset in the wrong organization. In that case we need special 404 handling. */
+    if (
+      asset.organizationId !== organizationId &&
+      otherOrganizationIds.includes(asset.organizationId)
+    ) {
+      throw new ShelfError({
+        cause: null,
+        title: "Asset not found",
+        message: "",
+        additionalData: {
+          model: "asset",
+          assetOrganization: userOrganizations.find(
+            (org) => org.organizationId === asset.organizationId
+          ),
+        },
+        label,
+      });
+    }
+
     return asset as AssetWithInclude<T>;
   } catch (cause) {
     throw new ShelfError({
@@ -119,7 +150,11 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
       title: "Asset not found",
       message:
         "The asset you are trying to access does not exist or you do not have permission to access it.",
-      additionalData: { id, organizationId },
+      additionalData: {
+        id,
+        organizationId,
+        ...(cause instanceof ShelfError ? cause.additionalData : {}),
+      },
       label,
       shouldBeCaptured: !isNotFoundError(cause),
     });
diff --git a/app/modules/organization/service.server.ts b/app/modules/organization/service.server.ts
index f59658445..780dc316f 100644
--- a/app/modules/organization/service.server.ts
+++ b/app/modules/organization/service.server.ts
@@ -270,6 +270,7 @@ export async function getUserOrganizations({ userId }: { userId: string }) {
     return await db.userOrganization.findMany({
       where: { userId },
       select: {
+        organizationId: true,
         roles: true,
         organization: {
           select: {
diff --git a/app/routes/_layout+/assets.$assetId.activity.tsx b/app/routes/_layout+/assets.$assetId.activity.tsx
index 5f9b5aba6..0be205ff5 100644
--- a/app/routes/_layout+/assets.$assetId.activity.tsx
+++ b/app/routes/_layout+/assets.$assetId.activity.tsx
@@ -28,7 +28,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -38,6 +38,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const asset = await getAsset({
       id,
       organizationId,
+      userOrganizations,
       include: {
         notes: {
           orderBy: { createdAt: "desc" },
diff --git a/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx b/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx
index ab101891a..b6ff87f53 100644
--- a/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx
@@ -33,14 +33,18 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
       action: PermissionAction.create,
     });
 
-    const asset = await getAsset({ id: assetId, organizationId });
+    const asset = await getAsset({
+      id: assetId,
+      organizationId,
+      userOrganizations,
+    });
 
     return json(
       data({
@@ -75,7 +79,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -85,6 +89,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
     const asset = await getAsset({
       id: assetId,
       organizationId,
+      userOrganizations,
       include: {
         custody: { include: { custodian: true } },
         tags: true,
diff --git a/app/routes/_layout+/assets.$assetId.overview.tsx b/app/routes/_layout+/assets.$assetId.overview.tsx
index 266c55124..9e8e224f0 100644
--- a/app/routes/_layout+/assets.$assetId.overview.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.tsx
@@ -70,7 +70,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -82,6 +82,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const asset = await getAsset({
       id,
       organizationId,
+      userOrganizations,
       include: ASSET_OVERVIEW_FIELDS,
     });
 
diff --git a/app/routes/_layout+/assets.$assetId.overview.update-location.tsx b/app/routes/_layout+/assets.$assetId.overview.update-location.tsx
index 4baea8b09..90f66d248 100644
--- a/app/routes/_layout+/assets.$assetId.overview.update-location.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.update-location.tsx
@@ -30,13 +30,13 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
       action: PermissionAction.update,
     });
-    const asset = await getAsset({ organizationId, id });
+    const asset = await getAsset({ organizationId, id, userOrganizations });
 
     const { locations } = await getAllEntriesForCreateAndEdit({
       organizationId,
diff --git a/app/routes/_layout+/assets.$assetId.tsx b/app/routes/_layout+/assets.$assetId.tsx
index 9b251b351..6167c79f4 100644
--- a/app/routes/_layout+/assets.$assetId.tsx
+++ b/app/routes/_layout+/assets.$assetId.tsx
@@ -55,7 +55,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -65,6 +65,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const asset = await getAsset({
       id,
       organizationId,
+      userOrganizations,
       include: {
         custody: { include: { custodian: true } },
         kit: true,
diff --git a/app/routes/_layout+/assets.$assetId_.edit.tsx b/app/routes/_layout+/assets.$assetId_.edit.tsx
index 273f7ae03..0c8f157ac 100644
--- a/app/routes/_layout+/assets.$assetId_.edit.tsx
+++ b/app/routes/_layout+/assets.$assetId_.edit.tsx
@@ -52,17 +52,19 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId, currentOrganization } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.asset,
-      action: PermissionAction.update,
-    });
+    const { organizationId, currentOrganization, userOrganizations } =
+      await requirePermission({
+        userId,
+        request,
+        entity: PermissionEntity.asset,
+        action: PermissionAction.update,
+      });
 
     const asset = await getAsset({
       organizationId,
       id,
       include: { tags: true, customFields: true },
+      userOrganizations,
     });
 
     const { categories, totalCategories, tags, locations, totalLocations } =
diff --git a/app/routes/api+/asset.scan.ts b/app/routes/api+/asset.scan.ts
index dbbd7b868..19d8477fe 100644
--- a/app/routes/api+/asset.scan.ts
+++ b/app/routes/api+/asset.scan.ts
@@ -19,7 +19,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
   const { userId } = authSession;
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -42,6 +42,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
     const asset = await getAsset({
       id: assetId,
       organizationId,
+      userOrganizations,
       include: { qrCodes: true },
     });
     /** WE get the first qrCode as the app only supports 1 code per asset for now */
diff --git a/app/utils/roles.server.ts b/app/utils/roles.server.ts
index c7a7d3e58..7aebed967 100644
--- a/app/utils/roles.server.ts
+++ b/app/utils/roles.server.ts
@@ -90,6 +90,7 @@ export async function requirePermission({
     isSelfServiceOrBase:
       role === OrganizationRoles.SELF_SERVICE ||
       role === OrganizationRoles.BASE,
+    userOrganizations,
   };
 }
 

From be81ec1cc7c658c6c272b54a18cf93b693101b37 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Tue, 19 Nov 2024 20:13:21 +0100
Subject: [PATCH 27/55] feat(special-error): create UI for handling special
 error cases

---
 app/components/errors/index.tsx               |  7 +++
 .../errors/special-error-handler.tsx          | 57 +++++++++++++++++++
 app/components/errors/utils.ts                | 39 +++++++++++++
 app/modules/asset/service.server.ts           |  2 +-
 4 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 app/components/errors/special-error-handler.tsx
 create mode 100644 app/components/errors/utils.ts

diff --git a/app/components/errors/index.tsx b/app/components/errors/index.tsx
index 3e221ac9c..4fb7f58f7 100644
--- a/app/components/errors/index.tsx
+++ b/app/components/errors/index.tsx
@@ -2,6 +2,8 @@ import { useLocation, useRouteError } from "@remix-run/react";
 
 import { isRouteError } from "~/utils/http";
 import { Button } from "../shared/button";
+import { parseSpecialErrorData } from "./utils";
+import SpecialErrorHandler from "./special-error-handler";
 
 export const ErrorContent = () => {
   const loc = useLocation();
@@ -18,6 +20,11 @@ export const ErrorContent = () => {
     traceId = response.data.error.traceId;
   }
 
+  const specialError = parseSpecialErrorData(response);
+  if (specialError.success) {
+    return <SpecialErrorHandler additionalData={specialError.additionalData} />;
+  }
+
   // Creating a string with <br/> tags for line breaks
   const messageHtml = { __html: message.split("\n").join("<br/>") };
 
diff --git a/app/components/errors/special-error-handler.tsx b/app/components/errors/special-error-handler.tsx
new file mode 100644
index 000000000..20c8f3ebe
--- /dev/null
+++ b/app/components/errors/special-error-handler.tsx
@@ -0,0 +1,57 @@
+import { tw } from "~/utils/tw";
+import { SpecialErrorAdditionalData } from "./utils";
+import { useMemo } from "react";
+import { ErrorIcon } from ".";
+import { Button } from "../shared/button";
+
+export type SpecialErrorHandlerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  additionalData: SpecialErrorAdditionalData;
+};
+
+export default function SpecialErrorHandler({
+  className,
+  style,
+  additionalData,
+}: SpecialErrorHandlerProps) {
+  const content = useMemo(() => {
+    switch (additionalData.type) {
+      case "asset-from-other-org": {
+        return (
+          <div className="w-full md:max-w-screen-sm">
+            <h2 className="mb-2">Asset belongs to other workspace.</h2>
+            <p className="mb-4">
+              The asset you are trying to view belongs to a different workspace
+              you are part of. Would you like to switch to workspace{" "}
+              <span className="font-bold">
+                "{additionalData.assetOrganization.organization.name}"
+              </span>{" "}
+              to view the asset?
+            </p>
+
+            <Button>Switch workspace</Button>
+          </div>
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  }, []);
+
+  return (
+    <div
+      className={tw("flex size-full items-center justify-center", className)}
+      style={style}
+    >
+      <div className="flex flex-col items-center text-center">
+        <span className="mb-5 size-[56px] text-primary">
+          <ErrorIcon />
+        </span>
+        {content}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
new file mode 100644
index 000000000..e6bb418f8
--- /dev/null
+++ b/app/components/errors/utils.ts
@@ -0,0 +1,39 @@
+import { z } from "zod";
+import { isRouteError } from "~/utils/http";
+
+export const specialErrorAdditionalData = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("asset-from-other-org"),
+    assetOrganization: z.object({
+      organization: z.object({
+        id: z.string(),
+        name: z.string(),
+      }),
+    }),
+  }),
+]);
+
+export type SpecialErrorAdditionalData = z.infer<
+  typeof specialErrorAdditionalData
+>;
+
+export function parseSpecialErrorData(response: unknown):
+  | { success: false; additionalData: null }
+  | {
+      success: true;
+      additionalData: SpecialErrorAdditionalData;
+    } {
+  if (!isRouteError(response)) {
+    return { success: false, additionalData: null };
+  }
+
+  const parsedDataResponse = specialErrorAdditionalData.safeParse(
+    response.data.error.additionalData
+  );
+
+  if (!parsedDataResponse.success) {
+    return { success: false, additionalData: null };
+  }
+
+  return { success: true, additionalData: parsedDataResponse.data };
+}
diff --git a/app/modules/asset/service.server.ts b/app/modules/asset/service.server.ts
index 2f0ff97e7..fc8439913 100644
--- a/app/modules/asset/service.server.ts
+++ b/app/modules/asset/service.server.ts
@@ -134,7 +134,7 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
         title: "Asset not found",
         message: "",
         additionalData: {
-          model: "asset",
+          type: "asset-from-other-org",
           assetOrganization: userOrganizations.find(
             (org) => org.organizationId === asset.organizationId
           ),

From 9e82e8de21857ccfb0e0d2c091d6c007d709d37e Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 20 Nov 2024 19:11:36 +0100
Subject: [PATCH 28/55] pr review changes

---
 .../errors/special-error-handler.tsx          | 62 +++++++++++--------
 app/components/errors/utils.ts                | 17 +++--
 app/modules/asset/service.server.ts           | 17 ++---
 .../api+/user.change-current-organization.ts  |  5 +-
 4 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/app/components/errors/special-error-handler.tsx b/app/components/errors/special-error-handler.tsx
index 20c8f3ebe..1ebf3914c 100644
--- a/app/components/errors/special-error-handler.tsx
+++ b/app/components/errors/special-error-handler.tsx
@@ -1,8 +1,9 @@
 import { tw } from "~/utils/tw";
 import { SpecialErrorAdditionalData } from "./utils";
-import { useMemo } from "react";
 import { ErrorIcon } from ".";
 import { Button } from "../shared/button";
+import { useFetcher } from "@remix-run/react";
+import { isFormProcessing } from "~/utils/form";
 
 export type SpecialErrorHandlerProps = {
   className?: string;
@@ -15,31 +16,8 @@ export default function SpecialErrorHandler({
   style,
   additionalData,
 }: SpecialErrorHandlerProps) {
-  const content = useMemo(() => {
-    switch (additionalData.type) {
-      case "asset-from-other-org": {
-        return (
-          <div className="w-full md:max-w-screen-sm">
-            <h2 className="mb-2">Asset belongs to other workspace.</h2>
-            <p className="mb-4">
-              The asset you are trying to view belongs to a different workspace
-              you are part of. Would you like to switch to workspace{" "}
-              <span className="font-bold">
-                "{additionalData.assetOrganization.organization.name}"
-              </span>{" "}
-              to view the asset?
-            </p>
-
-            <Button>Switch workspace</Button>
-          </div>
-        );
-      }
-
-      default: {
-        return null;
-      }
-    }
-  }, []);
+  const fetcher = useFetcher();
+  const disabled = isFormProcessing(fetcher.state);
 
   return (
     <div
@@ -50,7 +28,37 @@ export default function SpecialErrorHandler({
         <span className="mb-5 size-[56px] text-primary">
           <ErrorIcon />
         </span>
-        {content}
+        <div className="w-full md:max-w-screen-sm">
+          <h2 className="mb-2">
+            <span className="capitalize">{additionalData.model}</span> belongs
+            to other workspace.
+          </h2>
+          <p className="mb-4">
+            The {additionalData.model} you are trying to view belongs to a
+            different workspace you are part of. Would you like to switch to
+            workspace{" "}
+            <span className="font-bold">
+              "{additionalData.organization.organization.name}"
+            </span>{" "}
+            to view the {additionalData.model}?
+          </p>
+          <fetcher.Form
+            action="/api/user/change-current-organization"
+            method="POST"
+          >
+            <input
+              type="hidden"
+              name="organizationId"
+              value={additionalData.organization.organization.id}
+            />
+            <input
+              type="hidden"
+              name="redirectTo"
+              value={`/${additionalData.model}/${additionalData.id}/overview`}
+            />
+            <Button disabled={disabled}>Switch workspace</Button>
+          </fetcher.Form>
+        </div>
       </div>
     </div>
   );
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index e6bb418f8..a8e804521 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -1,17 +1,16 @@
 import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
-export const specialErrorAdditionalData = z.discriminatedUnion("type", [
-  z.object({
-    type: z.literal("asset-from-other-org"),
-    assetOrganization: z.object({
-      organization: z.object({
-        id: z.string(),
-        name: z.string(),
-      }),
+export const specialErrorAdditionalData = z.object({
+  model: z.enum(["assets"]),
+  id: z.string(),
+  organization: z.object({
+    organization: z.object({
+      id: z.string(),
+      name: z.string(),
     }),
   }),
-]);
+});
 
 export type SpecialErrorAdditionalData = z.infer<
   typeof specialErrorAdditionalData
diff --git a/app/modules/asset/service.server.ts b/app/modules/asset/service.server.ts
index fc8439913..2139004f7 100644
--- a/app/modules/asset/service.server.ts
+++ b/app/modules/asset/service.server.ts
@@ -106,11 +106,11 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
   include,
 }: Pick<Asset, "id"> & {
   organizationId: Asset["organizationId"];
-  userOrganizations: Pick<UserOrganization, "organizationId">[];
+  userOrganizations?: Pick<UserOrganization, "organizationId">[];
   include?: T;
 }): Promise<AssetWithInclude<T>> {
   try {
-    const otherOrganizationIds = userOrganizations.map(
+    const otherOrganizationIds = userOrganizations?.map(
       (org) => org.organizationId
     );
 
@@ -118,7 +118,9 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
       where: {
         OR: [
           { id, organizationId },
-          { id, organizationId: { in: otherOrganizationIds } },
+          ...(userOrganizations?.length
+            ? [{ id, organizationId: { in: otherOrganizationIds } }]
+            : []),
         ],
       },
       include: { ...include },
@@ -126,16 +128,17 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
 
     /* User is accessing the asset in the wrong organization. In that case we need special 404 handling. */
     if (
+      userOrganizations?.length &&
       asset.organizationId !== organizationId &&
-      otherOrganizationIds.includes(asset.organizationId)
+      otherOrganizationIds?.includes(asset.organizationId)
     ) {
       throw new ShelfError({
         cause: null,
         title: "Asset not found",
         message: "",
         additionalData: {
-          type: "asset-from-other-org",
-          assetOrganization: userOrganizations.find(
+          model: "assets",
+          organization: userOrganizations.find(
             (org) => org.organizationId === asset.organizationId
           ),
         },
@@ -153,7 +156,7 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
       additionalData: {
         id,
         organizationId,
-        ...(cause instanceof ShelfError ? cause.additionalData : {}),
+        ...(isLikeShelfError(cause) ? cause.additionalData : {}),
       },
       label,
       shouldBeCaptured: !isNotFoundError(cause),
diff --git a/app/routes/api+/user.change-current-organization.ts b/app/routes/api+/user.change-current-organization.ts
index b0a62c1e3..b7eca4bee 100644
--- a/app/routes/api+/user.change-current-organization.ts
+++ b/app/routes/api+/user.change-current-organization.ts
@@ -10,14 +10,15 @@ export async function action({ context, request }: ActionFunctionArgs) {
   const { userId } = authSession;
 
   try {
-    const { organizationId } = parseData(
+    const { organizationId, redirectTo } = parseData(
       await request.formData(),
       z.object({
         organizationId: z.string(),
+        redirectTo: z.string().optional(),
       })
     );
 
-    return redirect("/", {
+    return redirect(redirectTo ?? "/", {
       headers: [
         setCookie(await setSelectedOrganizationIdCookie(organizationId)),
       ],

From ad2dda3df7ff9478961f0d1bd732729d0ddec349 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 22 Nov 2024 14:25:22 +0100
Subject: [PATCH 29/55] feat(improve-404): fix pr review issues

---
 ...rror-handler.tsx => error-404-handler.tsx} | 17 ++++++-------
 app/components/errors/index.tsx               | 10 ++++----
 app/components/errors/utils.ts                | 25 +++++++++----------
 app/modules/asset/service.server.ts           | 11 +++++++-
 .../_layout+/assets.$assetId.overview.tsx     |  1 +
 app/routes/api+/asset.scan.ts                 |  3 +--
 .../api+/user.change-current-organization.ts  |  4 +--
 7 files changed, 38 insertions(+), 33 deletions(-)
 rename app/components/errors/{special-error-handler.tsx => error-404-handler.tsx} (79%)

diff --git a/app/components/errors/special-error-handler.tsx b/app/components/errors/error-404-handler.tsx
similarity index 79%
rename from app/components/errors/special-error-handler.tsx
rename to app/components/errors/error-404-handler.tsx
index 1ebf3914c..b84fc7a76 100644
--- a/app/components/errors/special-error-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -1,21 +1,21 @@
 import { tw } from "~/utils/tw";
-import { SpecialErrorAdditionalData } from "./utils";
+import { Error404AdditionalData } from "./utils";
 import { ErrorIcon } from ".";
 import { Button } from "../shared/button";
 import { useFetcher } from "@remix-run/react";
 import { isFormProcessing } from "~/utils/form";
 
-export type SpecialErrorHandlerProps = {
+export type Error404HandlerProps = {
   className?: string;
   style?: React.CSSProperties;
-  additionalData: SpecialErrorAdditionalData;
+  additionalData: Error404AdditionalData;
 };
 
-export default function SpecialErrorHandler({
+export default function Error404Handler({
   className,
   style,
   additionalData,
-}: SpecialErrorHandlerProps) {
+}: Error404HandlerProps) {
   const fetcher = useFetcher();
   const disabled = isFormProcessing(fetcher.state);
 
@@ -25,13 +25,10 @@ export default function SpecialErrorHandler({
       style={style}
     >
       <div className="flex flex-col items-center text-center">
-        <span className="mb-5 size-[56px] text-primary">
-          <ErrorIcon />
-        </span>
         <div className="w-full md:max-w-screen-sm">
           <h2 className="mb-2">
             <span className="capitalize">{additionalData.model}</span> belongs
-            to other workspace.
+            to another workspace.
           </h2>
           <p className="mb-4">
             The {additionalData.model} you are trying to view belongs to a
@@ -54,7 +51,7 @@ export default function SpecialErrorHandler({
             <input
               type="hidden"
               name="redirectTo"
-              value={`/${additionalData.model}/${additionalData.id}/overview`}
+              value={additionalData.redirectTo}
             />
             <Button disabled={disabled}>Switch workspace</Button>
           </fetcher.Form>
diff --git a/app/components/errors/index.tsx b/app/components/errors/index.tsx
index 4fb7f58f7..e45f57727 100644
--- a/app/components/errors/index.tsx
+++ b/app/components/errors/index.tsx
@@ -2,8 +2,8 @@ import { useLocation, useRouteError } from "@remix-run/react";
 
 import { isRouteError } from "~/utils/http";
 import { Button } from "../shared/button";
-import { parseSpecialErrorData } from "./utils";
-import SpecialErrorHandler from "./special-error-handler";
+import { parse404ErrorData } from "./utils";
+import Error404Handler from "./error-404-handler";
 
 export const ErrorContent = () => {
   const loc = useLocation();
@@ -20,9 +20,9 @@ export const ErrorContent = () => {
     traceId = response.data.error.traceId;
   }
 
-  const specialError = parseSpecialErrorData(response);
-  if (specialError.success) {
-    return <SpecialErrorHandler additionalData={specialError.additionalData} />;
+  const error404 = parse404ErrorData(response);
+  if (error404.isError404) {
+    return <Error404Handler additionalData={error404.additionalData} />;
   }
 
   // Creating a string with <br/> tags for line breaks
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index a8e804521..48249fdea 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -1,9 +1,10 @@
 import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
-export const specialErrorAdditionalData = z.object({
-  model: z.enum(["assets"]),
+export const error404AdditionalData = z.object({
+  model: z.enum(["asset"]),
   id: z.string(),
+  redirectTo: z.string().optional(),
   organization: z.object({
     organization: z.object({
       id: z.string(),
@@ -12,27 +13,25 @@ export const specialErrorAdditionalData = z.object({
   }),
 });
 
-export type SpecialErrorAdditionalData = z.infer<
-  typeof specialErrorAdditionalData
->;
+export type Error404AdditionalData = z.infer<typeof error404AdditionalData>;
 
-export function parseSpecialErrorData(response: unknown):
-  | { success: false; additionalData: null }
+export function parse404ErrorData(response: unknown):
+  | { isError404: false; additionalData: null }
   | {
-      success: true;
-      additionalData: SpecialErrorAdditionalData;
+      isError404: true;
+      additionalData: Error404AdditionalData;
     } {
   if (!isRouteError(response)) {
-    return { success: false, additionalData: null };
+    return { isError404: false, additionalData: null };
   }
 
-  const parsedDataResponse = specialErrorAdditionalData.safeParse(
+  const parsedDataResponse = error404AdditionalData.safeParse(
     response.data.error.additionalData
   );
 
   if (!parsedDataResponse.success) {
-    return { success: false, additionalData: null };
+    return { isError404: false, additionalData: null };
   }
 
-  return { success: true, additionalData: parsedDataResponse.data };
+  return { isError404: true, additionalData: parsedDataResponse.data };
 }
diff --git a/app/modules/asset/service.server.ts b/app/modules/asset/service.server.ts
index 2139004f7..74bcb1734 100644
--- a/app/modules/asset/service.server.ts
+++ b/app/modules/asset/service.server.ts
@@ -103,10 +103,12 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
   id,
   organizationId,
   userOrganizations,
+  request,
   include,
 }: Pick<Asset, "id"> & {
   organizationId: Asset["organizationId"];
   userOrganizations?: Pick<UserOrganization, "organizationId">[];
+  request?: Request;
   include?: T;
 }): Promise<AssetWithInclude<T>> {
   try {
@@ -132,17 +134,24 @@ export async function getAsset<T extends Prisma.AssetInclude | undefined>({
       asset.organizationId !== organizationId &&
       otherOrganizationIds?.includes(asset.organizationId)
     ) {
+      const redirectTo =
+        typeof request !== "undefined"
+          ? new URL(request.url).pathname
+          : undefined;
+
       throw new ShelfError({
         cause: null,
         title: "Asset not found",
         message: "",
         additionalData: {
-          model: "assets",
+          model: "asset",
           organization: userOrganizations.find(
             (org) => org.organizationId === asset.organizationId
           ),
+          redirectTo,
         },
         label,
+        status: 404,
       });
     }
 
diff --git a/app/routes/_layout+/assets.$assetId.overview.tsx b/app/routes/_layout+/assets.$assetId.overview.tsx
index 9e8e224f0..00bb54aa8 100644
--- a/app/routes/_layout+/assets.$assetId.overview.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.tsx
@@ -83,6 +83,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       id,
       organizationId,
       userOrganizations,
+      request,
       include: ASSET_OVERVIEW_FIELDS,
     });
 
diff --git a/app/routes/api+/asset.scan.ts b/app/routes/api+/asset.scan.ts
index 19d8477fe..dbbd7b868 100644
--- a/app/routes/api+/asset.scan.ts
+++ b/app/routes/api+/asset.scan.ts
@@ -19,7 +19,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
   const { userId } = authSession;
 
   try {
-    const { organizationId, userOrganizations } = await requirePermission({
+    const { organizationId } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -42,7 +42,6 @@ export async function action({ context, request }: ActionFunctionArgs) {
     const asset = await getAsset({
       id: assetId,
       organizationId,
-      userOrganizations,
       include: { qrCodes: true },
     });
     /** WE get the first qrCode as the app only supports 1 code per asset for now */
diff --git a/app/routes/api+/user.change-current-organization.ts b/app/routes/api+/user.change-current-organization.ts
index b7eca4bee..26463381d 100644
--- a/app/routes/api+/user.change-current-organization.ts
+++ b/app/routes/api+/user.change-current-organization.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 import { setSelectedOrganizationIdCookie } from "~/modules/organization/context.server";
 import { setCookie } from "~/utils/cookies.server";
 import { makeShelfError } from "~/utils/error";
-import { error, parseData } from "~/utils/http.server";
+import { error, parseData, safeRedirect } from "~/utils/http.server";
 
 export async function action({ context, request }: ActionFunctionArgs) {
   const authSession = context.getSession();
@@ -18,7 +18,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
       })
     );
 
-    return redirect(redirectTo ?? "/", {
+    return redirect(safeRedirect(redirectTo), {
       headers: [
         setCookie(await setSelectedOrganizationIdCookie(organizationId)),
       ],

From 64b954ae437d99af56dc1ffb8aeea07b0b100d66 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Sat, 23 Nov 2024 12:42:28 +0100
Subject: [PATCH 30/55] feat(improve-404): add request in getAsset for proper
 redirecting

---
 app/components/errors/error-404-handler.tsx                | 1 -
 app/routes/_layout+/assets.$assetId.activity.tsx           | 1 +
 app/routes/_layout+/assets.$assetId.overview.duplicate.tsx | 1 +
 .../_layout+/assets.$assetId.overview.update-location.tsx  | 7 ++++++-
 app/routes/_layout+/assets.$assetId.tsx                    | 1 +
 app/routes/_layout+/assets.$assetId_.edit.tsx              | 1 +
 6 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index b84fc7a76..4b91e4165 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -1,6 +1,5 @@
 import { tw } from "~/utils/tw";
 import { Error404AdditionalData } from "./utils";
-import { ErrorIcon } from ".";
 import { Button } from "../shared/button";
 import { useFetcher } from "@remix-run/react";
 import { isFormProcessing } from "~/utils/form";
diff --git a/app/routes/_layout+/assets.$assetId.activity.tsx b/app/routes/_layout+/assets.$assetId.activity.tsx
index 0be205ff5..20b8246f9 100644
--- a/app/routes/_layout+/assets.$assetId.activity.tsx
+++ b/app/routes/_layout+/assets.$assetId.activity.tsx
@@ -39,6 +39,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       id,
       organizationId,
       userOrganizations,
+      request,
       include: {
         notes: {
           orderBy: { createdAt: "desc" },
diff --git a/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx b/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx
index b6ff87f53..4e94fc0b1 100644
--- a/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.duplicate.tsx
@@ -44,6 +44,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       id: assetId,
       organizationId,
       userOrganizations,
+      request,
     });
 
     return json(
diff --git a/app/routes/_layout+/assets.$assetId.overview.update-location.tsx b/app/routes/_layout+/assets.$assetId.overview.update-location.tsx
index 90f66d248..d87d75f9f 100644
--- a/app/routes/_layout+/assets.$assetId.overview.update-location.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.update-location.tsx
@@ -36,7 +36,12 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       entity: PermissionEntity.asset,
       action: PermissionAction.update,
     });
-    const asset = await getAsset({ organizationId, id, userOrganizations });
+    const asset = await getAsset({
+      organizationId,
+      id,
+      userOrganizations,
+      request,
+    });
 
     const { locations } = await getAllEntriesForCreateAndEdit({
       organizationId,
diff --git a/app/routes/_layout+/assets.$assetId.tsx b/app/routes/_layout+/assets.$assetId.tsx
index 6167c79f4..20bfa1da8 100644
--- a/app/routes/_layout+/assets.$assetId.tsx
+++ b/app/routes/_layout+/assets.$assetId.tsx
@@ -66,6 +66,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       id,
       organizationId,
       userOrganizations,
+      request,
       include: {
         custody: { include: { custodian: true } },
         kit: true,
diff --git a/app/routes/_layout+/assets.$assetId_.edit.tsx b/app/routes/_layout+/assets.$assetId_.edit.tsx
index 0c8f157ac..de6d7a1af 100644
--- a/app/routes/_layout+/assets.$assetId_.edit.tsx
+++ b/app/routes/_layout+/assets.$assetId_.edit.tsx
@@ -65,6 +65,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       id,
       include: { tags: true, customFields: true },
       userOrganizations,
+      request,
     });
 
     const { categories, totalCategories, tags, locations, totalLocations } =

From 473f9f5965a3352253251e8ef44dfeba6f43f9d1 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Sat, 23 Nov 2024 19:47:12 +0100
Subject: [PATCH 31/55] feat(improve-404): update getKit function to make it
 more generic

---
 app/modules/kit/service.server.ts | 15 ++++++++++++---
 app/modules/qr/service.server.ts  |  1 +
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/modules/kit/service.server.ts b/app/modules/kit/service.server.ts
index 7a52cd756..6b66a1716 100644
--- a/app/modules/kit/service.server.ts
+++ b/app/modules/kit/service.server.ts
@@ -341,7 +341,14 @@ export async function getPaginatedAndFilterableKits<
   }
 }
 
-export async function getKit<T extends Prisma.KitInclude>({
+type KitWithInclude<T extends Prisma.KitInclude | undefined> =
+  T extends Prisma.KitInclude
+    ? Prisma.KitGetPayload<{
+        include: MergeInclude<typeof GET_KIT_STATIC_INCLUDES, T>;
+      }>
+    : Prisma.KitGetPayload<{ include: typeof GET_KIT_STATIC_INCLUDES }>;
+
+export async function getKit<T extends Prisma.KitInclude | undefined>({
   id,
   organizationId,
   extraInclude,
@@ -353,10 +360,12 @@ export async function getKit<T extends Prisma.KitInclude>({
       ...extraInclude,
     } as MergeInclude<typeof GET_KIT_STATIC_INCLUDES, T>;
 
-    return (await db.kit.findUniqueOrThrow({
+    const kit = await db.kit.findUniqueOrThrow({
       where: { id, organizationId },
       include: includes,
-    })) as Prisma.KitGetPayload<{ include: typeof includes }>;
+    });
+
+    return kit as KitWithInclude<T>;
   } catch (cause) {
     throw new ShelfError({
       cause,
diff --git a/app/modules/qr/service.server.ts b/app/modules/qr/service.server.ts
index ca01b7bd8..074ca8512 100644
--- a/app/modules/qr/service.server.ts
+++ b/app/modules/qr/service.server.ts
@@ -37,6 +37,7 @@ export async function getQrByAssetId({ assetId }: Pick<Qr, "assetId">) {
     });
   }
 }
+
 export async function getQrByKitId({ kitId }: Pick<Qr, "kitId">) {
   try {
     return await db.qr.findFirst({

From c226fcce4ce42d5859dd13faaf3d93c76478591e Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Mon, 25 Nov 2024 13:53:18 +0100
Subject: [PATCH 32/55] feat(improve-404): improve 404 handling for kit

---
 app/components/errors/utils.ts                |  2 +-
 app/modules/kit/service.server.ts             | 66 +++++++++++++++++--
 .../_layout+/kits.$kitId.assign-custody.tsx   | 16 +++--
 .../kits.$kitId.create-new-booking.tsx        | 20 ++++--
 .../_layout+/kits.$kitId.release-custody.tsx  |  9 ++-
 app/routes/_layout+/kits.$kitId.tsx           |  4 +-
 app/routes/_layout+/kits.$kitId_.edit.tsx     |  9 ++-
 7 files changed, 101 insertions(+), 25 deletions(-)

diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index 48249fdea..9fbe8abff 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -2,7 +2,7 @@ import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
 export const error404AdditionalData = z.object({
-  model: z.enum(["asset"]),
+  model: z.enum(["asset", "kit"]),
   id: z.string(),
   redirectTo: z.string().optional(),
   organization: z.object({
diff --git a/app/modules/kit/service.server.ts b/app/modules/kit/service.server.ts
index 6b66a1716..571349aea 100644
--- a/app/modules/kit/service.server.ts
+++ b/app/modules/kit/service.server.ts
@@ -6,6 +6,7 @@ import type {
   Qr,
   TeamMember,
   User,
+  UserOrganization,
 } from "@prisma/client";
 import {
   AssetStatus,
@@ -21,7 +22,12 @@ import { getDateTimeFormat } from "~/utils/client-hints";
 import { updateCookieWithPerPage } from "~/utils/cookies.server";
 import { dateTimeInUnix } from "~/utils/date-time-in-unix";
 import type { ErrorLabel } from "~/utils/error";
-import { maybeUniqueConstraintViolation, ShelfError } from "~/utils/error";
+import {
+  isLikeShelfError,
+  isNotFoundError,
+  maybeUniqueConstraintViolation,
+  ShelfError,
+} from "~/utils/error";
 import { extractImageNameFromSupabaseUrl } from "~/utils/extract-image-name-from-supabase-url";
 import { getCurrentSearchParams } from "~/utils/http.server";
 import { id } from "~/utils/id/id.server";
@@ -352,19 +358,63 @@ export async function getKit<T extends Prisma.KitInclude | undefined>({
   id,
   organizationId,
   extraInclude,
-}: Pick<Kit, "id" | "organizationId"> & { extraInclude?: T }) {
+  userOrganizations,
+  request,
+}: Pick<Kit, "id" | "organizationId"> & {
+  extraInclude?: T;
+  userOrganizations?: Pick<UserOrganization, "organizationId">[];
+  request?: Request;
+}) {
   try {
+    const otherOrganizationIds = userOrganizations?.map(
+      (org) => org.organizationId
+    );
+
     // Merge static includes with dynamic includes
     const includes = {
       ...GET_KIT_STATIC_INCLUDES,
       ...extraInclude,
     } as MergeInclude<typeof GET_KIT_STATIC_INCLUDES, T>;
 
-    const kit = await db.kit.findUniqueOrThrow({
-      where: { id, organizationId },
+    const kit = await db.kit.findFirstOrThrow({
+      where: {
+        OR: [
+          { id, organizationId },
+          ...(userOrganizations?.length
+            ? [{ id, organizationId: { in: otherOrganizationIds } }]
+            : []),
+        ],
+      },
       include: includes,
     });
 
+    /* User is accessing the asset in the wrong organizations. In that case we need special 404 handlng. */
+    if (
+      userOrganizations?.length &&
+      kit.organizationId !== organizationId &&
+      otherOrganizationIds?.includes(kit.organizationId)
+    ) {
+      const redirectTo =
+        typeof request !== "undefined"
+          ? new URL(request.url).pathname
+          : undefined;
+
+      throw new ShelfError({
+        cause: null,
+        title: "Kit not found",
+        message: "",
+        additionalData: {
+          model: "kit",
+          organization: userOrganizations.find(
+            (org) => org.organizationId === kit.organizationId
+          ),
+          redirectTo,
+        },
+        label,
+        status: 404,
+      });
+    }
+
     return kit as KitWithInclude<T>;
   } catch (cause) {
     throw new ShelfError({
@@ -372,8 +422,12 @@ export async function getKit<T extends Prisma.KitInclude | undefined>({
       title: "Kit not found",
       message:
         "The kit you are trying to access does not exist or you do not have permission to access it.",
-      additionalData: { id },
-      label, // Adjust the label as needed
+      additionalData: {
+        id,
+        ...(isLikeShelfError(cause) ? cause.additionalData : {}),
+      },
+      label,
+      shouldBeCaptured: !isNotFoundError(cause),
     });
   }
 }
diff --git a/app/routes/_layout+/kits.$kitId.assign-custody.tsx b/app/routes/_layout+/kits.$kitId.assign-custody.tsx
index c96139e46..be5d8981a 100644
--- a/app/routes/_layout+/kits.$kitId.assign-custody.tsx
+++ b/app/routes/_layout+/kits.$kitId.assign-custody.tsx
@@ -55,12 +55,14 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId, role } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.kit,
-      action: PermissionAction.custody,
-    });
+    const { organizationId, role, userOrganizations } = await requirePermission(
+      {
+        userId,
+        request,
+        entity: PermissionEntity.kit,
+        action: PermissionAction.custody,
+      }
+    );
 
     const kit = await getKit({
       id: kitId,
@@ -81,6 +83,8 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
           },
         },
       },
+      userOrganizations,
+      request,
     });
 
     if (kit.custody) {
diff --git a/app/routes/_layout+/kits.$kitId.create-new-booking.tsx b/app/routes/_layout+/kits.$kitId.create-new-booking.tsx
index c47d1c1cc..33b4631c7 100644
--- a/app/routes/_layout+/kits.$kitId.create-new-booking.tsx
+++ b/app/routes/_layout+/kits.$kitId.create-new-booking.tsx
@@ -31,13 +31,17 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId, currentOrganization, isSelfServiceOrBase } =
-      await requirePermission({
-        userId,
-        request,
-        entity: PermissionEntity.booking,
-        action: PermissionAction.create,
-      });
+    const {
+      organizationId,
+      currentOrganization,
+      isSelfServiceOrBase,
+      userOrganizations,
+    } = await requirePermission({
+      userId,
+      request,
+      entity: PermissionEntity.booking,
+      action: PermissionAction.create,
+    });
 
     if (isPersonalOrg(currentOrganization)) {
       throw new ShelfError({
@@ -54,6 +58,8 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       id: kitId,
       organizationId,
       extraInclude: { assets: true },
+      userOrganizations,
+      request,
     });
 
     /* We need to fetch the team members to be able to display them in the custodian dropdown. */
diff --git a/app/routes/_layout+/kits.$kitId.release-custody.tsx b/app/routes/_layout+/kits.$kitId.release-custody.tsx
index b7190eee1..5d266d3e7 100644
--- a/app/routes/_layout+/kits.$kitId.release-custody.tsx
+++ b/app/routes/_layout+/kits.$kitId.release-custody.tsx
@@ -31,14 +31,19 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.kit,
       action: PermissionAction.custody,
     });
 
-    const kit = await getKit({ id: kitId, organizationId });
+    const kit = await getKit({
+      id: kitId,
+      organizationId,
+      userOrganizations,
+      request,
+    });
     if (!kit.custody) {
       return redirect(`/kits/${kitId}`);
     }
diff --git a/app/routes/_layout+/kits.$kitId.tsx b/app/routes/_layout+/kits.$kitId.tsx
index e2a855199..353d45dc5 100644
--- a/app/routes/_layout+/kits.$kitId.tsx
+++ b/app/routes/_layout+/kits.$kitId.tsx
@@ -75,7 +75,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   );
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.kit,
@@ -131,6 +131,8 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
           },
           qrCodes: true,
         },
+        userOrganizations,
+        request,
       }),
       getAssetsForKits({
         request,
diff --git a/app/routes/_layout+/kits.$kitId_.edit.tsx b/app/routes/_layout+/kits.$kitId_.edit.tsx
index fec0c6ff2..fb983c209 100644
--- a/app/routes/_layout+/kits.$kitId_.edit.tsx
+++ b/app/routes/_layout+/kits.$kitId_.edit.tsx
@@ -43,14 +43,19 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.kit,
       action: PermissionAction.update,
     });
 
-    const kit = await getKit({ id: kitId, organizationId });
+    const kit = await getKit({
+      id: kitId,
+      organizationId,
+      userOrganizations,
+      request,
+    });
 
     const header: HeaderData = {
       title: `Edit | ${kit.name}`,

From 6847db211817faac246845961b5518a160d55c1f Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Tue, 26 Nov 2024 15:07:00 +0100
Subject: [PATCH 33/55] feat(improve-404): improve 404 handling for location

---
 app/components/errors/utils.ts                |  2 +-
 app/modules/location/service.server.ts        | 73 +++++++++++++++++--
 app/routes/_layout+/locations.$locationId.tsx |  6 +-
 .../_layout+/locations.$locationId_.edit.tsx  |  9 ++-
 4 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index 9fbe8abff..4b45330ca 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -2,7 +2,7 @@ import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
 export const error404AdditionalData = z.object({
-  model: z.enum(["asset", "kit"]),
+  model: z.enum(["asset", "kit", "location"]),
   id: z.string(),
   redirectTo: z.string().optional(),
   organization: z.object({
diff --git a/app/modules/location/service.server.ts b/app/modules/location/service.server.ts
index 70f43678b..bcb1eb755 100644
--- a/app/modules/location/service.server.ts
+++ b/app/modules/location/service.server.ts
@@ -1,8 +1,19 @@
-import type { Prisma, User, Location, Organization } from "@prisma/client";
+import type {
+  Prisma,
+  User,
+  Location,
+  Organization,
+  UserOrganization,
+} from "@prisma/client";
 import invariant from "tiny-invariant";
 import { db } from "~/database/db.server";
 import type { ErrorLabel } from "~/utils/error";
-import { ShelfError, maybeUniqueConstraintViolation } from "~/utils/error";
+import {
+  ShelfError,
+  isLikeShelfError,
+  isNotFoundError,
+  maybeUniqueConstraintViolation,
+} from "~/utils/error";
 import { ALL_SELECTED_KEY } from "~/utils/list";
 import type { CreateAssetFromContentImportPayload } from "../asset/types";
 
@@ -16,11 +27,25 @@ export async function getLocation(
     /** Assets to be loaded per page with the location */
     perPage?: number;
     search?: string | null;
+    userOrganizations?: Pick<UserOrganization, "organizationId">[];
+    request?: Request;
   }
 ) {
-  const { organizationId, id, page = 1, perPage = 8, search } = params;
+  const {
+    organizationId,
+    id,
+    page = 1,
+    perPage = 8,
+    search,
+    userOrganizations,
+    request,
+  } = params;
 
   try {
+    const otherOrganizationIds = userOrganizations?.map(
+      (org) => org.organizationId
+    );
+
     const skip = page > 1 ? (page - 1) * perPage : 0;
     const take = perPage >= 1 ? perPage : 8; // min 1 and max 25 per page
 
@@ -37,7 +62,14 @@ export async function getLocation(
     const [location, totalAssetsWithinLocation] = await Promise.all([
       /** Get the items */
       db.location.findFirstOrThrow({
-        where: { id, organizationId },
+        where: {
+          OR: [
+            { id, organizationId },
+            ...(userOrganizations?.length
+              ? [{ id, organizationId: { in: otherOrganizationIds } }]
+              : []),
+          ],
+        },
         include: {
           image: {
             select: {
@@ -64,13 +96,44 @@ export async function getLocation(
       }),
     ]);
 
+    /* User is accessing the asset in the wrong organization. In that case we need special 404 handling. */
+    if (
+      userOrganizations?.length &&
+      location.organizationId !== organizationId &&
+      otherOrganizationIds?.includes(location.organizationId)
+    ) {
+      const redirectTo =
+        typeof request !== "undefined"
+          ? new URL(request.url).pathname
+          : undefined;
+
+      throw new ShelfError({
+        cause: null,
+        title: "Location not found.",
+        message: "",
+        additionalData: {
+          model: "location",
+          organization: userOrganizations.find(
+            (org) => org.organizationId === location.organizationId
+          ),
+          redirectTo,
+        },
+        label,
+        status: 404,
+      });
+    }
+
     return { location, totalAssetsWithinLocation };
   } catch (cause) {
     throw new ShelfError({
       cause,
       message: "Something went wrong while fetching location",
-      additionalData: { ...params },
+      additionalData: {
+        ...params,
+        ...(isLikeShelfError(cause) ? cause.additionalData : {}),
+      },
       label,
+      shouldBeCaptured: !isNotFoundError(cause),
     });
   }
 }
diff --git a/app/routes/_layout+/locations.$locationId.tsx b/app/routes/_layout+/locations.$locationId.tsx
index 4c2fda497..fba46add2 100644
--- a/app/routes/_layout+/locations.$locationId.tsx
+++ b/app/routes/_layout+/locations.$locationId.tsx
@@ -62,7 +62,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   );
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId: authSession.userId,
       request,
       entity: PermissionEntity.location,
@@ -80,6 +80,8 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       page,
       perPage,
       search,
+      userOrganizations,
+      request,
     });
 
     const totalItems = totalAssetsWithinLocation;
@@ -358,5 +360,3 @@ const ListItemTagsColumn = ({ tags }: { tags: Tag[] | undefined }) => {
     </div>
   ) : null;
 };
-
-// export const ErrorBoundary = () => <ErrorBoundryComponent />;
diff --git a/app/routes/_layout+/locations.$locationId_.edit.tsx b/app/routes/_layout+/locations.$locationId_.edit.tsx
index c40e12387..6ab489b9d 100644
--- a/app/routes/_layout+/locations.$locationId_.edit.tsx
+++ b/app/routes/_layout+/locations.$locationId_.edit.tsx
@@ -43,14 +43,19 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   );
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId: authSession.userId,
       request,
       entity: PermissionEntity.location,
       action: PermissionAction.update,
     });
 
-    const { location } = await getLocation({ organizationId, id });
+    const { location } = await getLocation({
+      organizationId,
+      id,
+      userOrganizations,
+      request,
+    });
 
     const header: HeaderData = {
       title: `Edit | ${location.name}`,

From f36401662ac11a665476dc7d9079d348b8e6a8d4 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Tue, 26 Nov 2024 20:08:41 +0100
Subject: [PATCH 34/55] feature(workflow): create separate function for team
 with 404 handling

---
 app/components/errors/utils.ts                |   2 +-
 app/modules/user/service.server.ts            | 105 +++++++++++++++++-
 app/modules/user/types.ts                     |   6 +-
 .../_layout+/settings.team.users.$userId.tsx  |  44 ++++----
 4 files changed, 128 insertions(+), 29 deletions(-)

diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index 4b45330ca..8d3772d14 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -2,7 +2,7 @@ import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
 export const error404AdditionalData = z.object({
-  model: z.enum(["asset", "kit", "location"]),
+  model: z.enum(["asset", "kit", "location", "user"]),
   id: z.string(),
   redirectTo: z.string().optional(),
   organization: z.object({
diff --git a/app/modules/user/service.server.ts b/app/modules/user/service.server.ts
index 50cb91a1c..85f6fb213 100644
--- a/app/modules/user/service.server.ts
+++ b/app/modules/user/service.server.ts
@@ -1,4 +1,4 @@
-import type { Organization, User } from "@prisma/client";
+import type { Organization, User, UserOrganization } from "@prisma/client";
 import { Prisma, Roles, OrganizationRoles } from "@prisma/client";
 import type { ITXClientDenyList } from "@prisma/client/runtime/library";
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
@@ -20,7 +20,7 @@ import {
 
 import { dateTimeInUnix } from "~/utils/date-time-in-unix";
 import type { ErrorLabel } from "~/utils/error";
-import { ShelfError, isLikeShelfError } from "~/utils/error";
+import { ShelfError, isLikeShelfError, isNotFoundError } from "~/utils/error";
 import type { ValidationError } from "~/utils/http";
 import { getCurrentSearchParams } from "~/utils/http.server";
 import { id as generateId } from "~/utils/id/id.server";
@@ -34,11 +34,12 @@ import {
 } from "~/utils/storage.server";
 import { randomUsernameFromEmail } from "~/utils/user";
 import { INCLUDE_SSO_DETAILS_VIA_USER_ORGANIZATION } from "./fields";
-import type { UpdateUserPayload } from "./types";
+import { type UpdateUserPayload, USER_STATIC_INCLUDE } from "./types";
 import { defaultFields } from "../asset-index-settings/helpers";
 import { defaultUserCategories } from "../category/default-categories";
 import { getOrganizationsBySsoDomain } from "../organization/service.server";
 import { createTeamMember } from "../team-member/service.server";
+import { MergeInclude } from "~/utils/utils";
 
 const label: ErrorLabel = "User";
 
@@ -1238,3 +1239,101 @@ export async function transferEntitiesToNewOwner({
     },
   });
 }
+
+type UserWithExtraInclude<T extends Prisma.UserInclude | undefined> =
+  T extends Prisma.UserInclude
+    ? Prisma.UserGetPayload<{
+        include: MergeInclude<typeof USER_STATIC_INCLUDE, T>;
+      }>
+    : Prisma.UserGetPayload<{ include: typeof USER_STATIC_INCLUDE }>;
+
+export async function getUserFromOrg<T extends Prisma.UserInclude | undefined>({
+  id,
+  organizationId,
+  userOrganizations,
+  request,
+  extraInclude,
+}: Pick<User, "id"> & {
+  organizationId: Organization["id"];
+  userOrganizations?: Pick<UserOrganization, "organizationId">[];
+  request?: Request;
+  extraInclude?: T;
+}) {
+  try {
+    const otherOrganizationIds = userOrganizations?.map(
+      (org) => org.organizationId
+    );
+
+    const mergedInclude = {
+      ...USER_STATIC_INCLUDE,
+      ...extraInclude,
+    } as MergeInclude<typeof USER_STATIC_INCLUDE, T>;
+
+    const user = (await db.user.findFirstOrThrow({
+      where: {
+        OR: [
+          { id, userOrganizations: { some: { organizationId } } },
+          ...(userOrganizations?.length
+            ? [
+                {
+                  id,
+                  userOrganizations: {
+                    some: { organizationId: { in: otherOrganizationIds } },
+                  },
+                },
+              ]
+            : []),
+        ],
+      },
+      include: mergedInclude,
+    })) as UserWithExtraInclude<T>;
+
+    /* User is accessing the User in the wrong organization */
+    const isUserInCurrentOrg = !!user.userOrganizations.find(
+      (userOrg) => userOrg.organizationId === organizationId
+    );
+
+    const otherOrgOfUser = userOrganizations?.find(
+      (org) =>
+        !!user.userOrganizations.find(
+          (userOrg) => userOrg.organizationId === org.organizationId
+        )
+    );
+
+    if (userOrganizations?.length && !isUserInCurrentOrg && !!otherOrgOfUser) {
+      const redirectTo =
+        typeof request !== "undefined"
+          ? new URL(request.url).pathname
+          : undefined;
+
+      throw new ShelfError({
+        cause: null,
+        title: "User not found",
+        message: "",
+        additionalData: {
+          model: "user",
+          organization: otherOrgOfUser,
+          redirectTo,
+        },
+        label,
+        status: 404,
+      });
+    }
+
+    return user;
+  } catch (cause) {
+    throw new ShelfError({
+      cause,
+      title: "User not found.",
+      message:
+        "The user you are trying to access does not exists or you do not have permission to access it.",
+      additionalData: {
+        id,
+        organizationId,
+        ...(isLikeShelfError(cause) ? cause.additionalData : {}),
+      },
+      label,
+      shouldBeCaptured: !isNotFoundError(cause),
+    });
+  }
+}
diff --git a/app/modules/user/types.ts b/app/modules/user/types.ts
index e15dbfcdd..ad75f9488 100644
--- a/app/modules/user/types.ts
+++ b/app/modules/user/types.ts
@@ -1,4 +1,4 @@
-import type { User } from "@prisma/client";
+import type { Prisma, User } from "@prisma/client";
 
 export interface UpdateUserPayload {
   id: User["id"];
@@ -24,3 +24,7 @@ export interface UpdateUserResponse {
   /** Used when sending a pwd reset link for the user */
   passwordReset?: boolean;
 }
+
+export const USER_STATIC_INCLUDE = {
+  userOrganizations: true,
+} satisfies Prisma.UserInclude;
diff --git a/app/routes/_layout+/settings.team.users.$userId.tsx b/app/routes/_layout+/settings.team.users.$userId.tsx
index 833b08cde..394a52ee7 100644
--- a/app/routes/_layout+/settings.team.users.$userId.tsx
+++ b/app/routes/_layout+/settings.team.users.$userId.tsx
@@ -13,7 +13,7 @@ import { Badge } from "~/components/shared/badge";
 import { Button } from "~/components/shared/button";
 import When from "~/components/when/when";
 import { TeamUsersActionsDropdown } from "~/components/workspace/users-actions-dropdown";
-import { getUserByID } from "~/modules/user/service.server";
+import { getUserFromOrg } from "~/modules/user/service.server";
 import { resolveUserAction } from "~/modules/user/utils.server";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
@@ -33,12 +33,13 @@ export const loader = async ({
   const authSession = context.getSession();
   const { userId } = authSession;
   try {
-    const { currentOrganization, organizationId } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.teamMemberProfile,
-      action: PermissionAction.read,
-    });
+    const { currentOrganization, organizationId, userOrganizations } =
+      await requirePermission({
+        userId,
+        request,
+        entity: PermissionEntity.teamMemberProfile,
+        action: PermissionAction.read,
+      });
 
     const { userId: selectedUserId } = getParams(
       params,
@@ -48,28 +49,23 @@ export const loader = async ({
       }
     );
 
-    const user = await getUserByID(selectedUserId, {
-      userOrganizations: {
-        where: {
-          organizationId,
-        },
-        select: {
-          roles: true,
-        },
-      },
-      teamMembers: {
-        where: {
-          organizationId,
-        },
-        include: {
-          receivedInvites: {
-            where: {
-              organizationId,
+    const user = await getUserFromOrg({
+      id: selectedUserId,
+      organizationId,
+      userOrganizations,
+      request,
+      extraInclude: {
+        teamMembers: {
+          where: { organizationId },
+          include: {
+            receivedInvites: {
+              where: { organizationId },
             },
           },
         },
       },
     });
+
     const userName =
       (user.firstName ? user.firstName.trim() : "") +
       " " +

From 0ea567a8dae8f286b32153dde3b60f2794ac5fe6 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Tue, 26 Nov 2024 20:42:22 +0100
Subject: [PATCH 35/55] feat(improve-404): handling special case of multiple
 organization for team member

---
 app/components/errors/error-404-handler.tsx | 140 +++++++++++++++-----
 app/components/errors/utils.ts              |  31 +++--
 app/modules/user/service.server.ts          |  23 ++--
 3 files changed, 144 insertions(+), 50 deletions(-)

diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index 4b91e4165..17ca763dc 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -1,8 +1,16 @@
+import { useMemo } from "react";
 import { tw } from "~/utils/tw";
 import { Error404AdditionalData } from "./utils";
 import { Button } from "../shared/button";
 import { useFetcher } from "@remix-run/react";
 import { isFormProcessing } from "~/utils/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../forms/select";
 
 export type Error404HandlerProps = {
   className?: string;
@@ -18,44 +26,110 @@ export default function Error404Handler({
   const fetcher = useFetcher();
   const disabled = isFormProcessing(fetcher.state);
 
+  const content = useMemo(() => {
+    switch (additionalData.model) {
+      case "asset":
+      case "kit":
+      case "location": {
+        return (
+          <div className="flex flex-col items-center text-center">
+            <div className="w-full md:max-w-screen-sm">
+              <h2 className="mb-2">
+                <span className="capitalize">{additionalData.model}</span>{" "}
+                belongs to another workspace.
+              </h2>
+              <p className="mb-4">
+                The {additionalData.model} you are trying to view belongs to a
+                different workspace you are part of. Would you like to switch to
+                workspace{" "}
+                <span className="font-bold">
+                  "{additionalData.organization.organization.name}"
+                </span>{" "}
+                to view the {additionalData.model}?
+              </p>
+              <fetcher.Form
+                action="/api/user/change-current-organization"
+                method="POST"
+              >
+                <input
+                  type="hidden"
+                  name="organizationId"
+                  value={additionalData.organization.organization.id}
+                />
+                <input
+                  type="hidden"
+                  name="redirectTo"
+                  value={additionalData.redirectTo}
+                />
+                <Button disabled={disabled}>Switch workspace</Button>
+              </fetcher.Form>
+            </div>
+          </div>
+        );
+      }
+
+      case "teamMember": {
+        return (
+          <div className="flex flex-col items-center text-center">
+            <div className="w-full md:max-w-screen-sm">
+              <h2 className="mb-2">
+                <span className="capitalize">Team Member</span> belongs to
+                another workspace(s).
+              </h2>
+              <p className="mb-4">
+                The team member you are trying to view belongs to one/some of
+                your different workspace you are part of. Would you like to
+                switch to workspace to view the team member?
+              </p>
+              <fetcher.Form
+                action="/api/user/change-current-organization"
+                method="POST"
+                className="flex items-center flex-col"
+              >
+                <Select name="organizationId" disabled={disabled}>
+                  <SelectTrigger className="mb-4 px-3.5 py-2 text-left text-gray-500 max-w-80">
+                    <SelectValue placeholder="Select organization to switch" />
+                  </SelectTrigger>
+                  <SelectContent
+                    position="popper"
+                    className="w-full min-w-80 overflow-auto p-1"
+                    align="start"
+                  >
+                    {additionalData.organizations.map(({ organization }) => (
+                      <SelectItem
+                        value={organization.id}
+                        key={organization.id}
+                        className="px-4 py-2"
+                      >
+                        {organization.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <input
+                  type="hidden"
+                  name="redirectTo"
+                  value={additionalData.redirectTo}
+                />
+                <Button disabled={disabled}>Switch workspace</Button>
+              </fetcher.Form>
+            </div>
+          </div>
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  }, [additionalData]);
+
   return (
     <div
       className={tw("flex size-full items-center justify-center", className)}
       style={style}
     >
-      <div className="flex flex-col items-center text-center">
-        <div className="w-full md:max-w-screen-sm">
-          <h2 className="mb-2">
-            <span className="capitalize">{additionalData.model}</span> belongs
-            to another workspace.
-          </h2>
-          <p className="mb-4">
-            The {additionalData.model} you are trying to view belongs to a
-            different workspace you are part of. Would you like to switch to
-            workspace{" "}
-            <span className="font-bold">
-              "{additionalData.organization.organization.name}"
-            </span>{" "}
-            to view the {additionalData.model}?
-          </p>
-          <fetcher.Form
-            action="/api/user/change-current-organization"
-            method="POST"
-          >
-            <input
-              type="hidden"
-              name="organizationId"
-              value={additionalData.organization.organization.id}
-            />
-            <input
-              type="hidden"
-              name="redirectTo"
-              value={additionalData.redirectTo}
-            />
-            <Button disabled={disabled}>Switch workspace</Button>
-          </fetcher.Form>
-        </div>
-      </div>
+      {content}
     </div>
   );
 }
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index 8d3772d14..c075c9232 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -1,19 +1,34 @@
 import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
-export const error404AdditionalData = z.object({
-  model: z.enum(["asset", "kit", "location", "user"]),
+const baseAdditionalDataSchema = z.object({
   id: z.string(),
   redirectTo: z.string().optional(),
+});
+
+const organizationSchema = z.object({
   organization: z.object({
-    organization: z.object({
-      id: z.string(),
-      name: z.string(),
-    }),
+    id: z.string(),
+    name: z.string(),
   }),
 });
 
-export type Error404AdditionalData = z.infer<typeof error404AdditionalData>;
+export const error404AdditionalDataSchema = z.discriminatedUnion("model", [
+  /* For common and general use case */
+  baseAdditionalDataSchema.extend({
+    model: z.enum(["asset", "kit", "location"]),
+    organization: organizationSchema,
+  }),
+  /* A team member (user) can be in multiple organization's of user so we do this. */
+  baseAdditionalDataSchema.extend({
+    model: z.literal("teamMember"),
+    organizations: organizationSchema.array(),
+  }),
+]);
+
+export type Error404AdditionalData = z.infer<
+  typeof error404AdditionalDataSchema
+>;
 
 export function parse404ErrorData(response: unknown):
   | { isError404: false; additionalData: null }
@@ -25,7 +40,7 @@ export function parse404ErrorData(response: unknown):
     return { isError404: false, additionalData: null };
   }
 
-  const parsedDataResponse = error404AdditionalData.safeParse(
+  const parsedDataResponse = error404AdditionalDataSchema.safeParse(
     response.data.error.additionalData
   );
 
diff --git a/app/modules/user/service.server.ts b/app/modules/user/service.server.ts
index 85f6fb213..5846962f7 100644
--- a/app/modules/user/service.server.ts
+++ b/app/modules/user/service.server.ts
@@ -1293,14 +1293,19 @@ export async function getUserFromOrg<T extends Prisma.UserInclude | undefined>({
       (userOrg) => userOrg.organizationId === organizationId
     );
 
-    const otherOrgOfUser = userOrganizations?.find(
-      (org) =>
-        !!user.userOrganizations.find(
-          (userOrg) => userOrg.organizationId === org.organizationId
-        )
-    );
+    const otherOrgsForUser =
+      userOrganizations?.filter(
+        (org) =>
+          !!user.userOrganizations.find(
+            (userOrg) => userOrg.organizationId === org.organizationId
+          )
+      ) ?? [];
 
-    if (userOrganizations?.length && !isUserInCurrentOrg && !!otherOrgOfUser) {
+    if (
+      userOrganizations?.length &&
+      !isUserInCurrentOrg &&
+      otherOrgsForUser?.length
+    ) {
       const redirectTo =
         typeof request !== "undefined"
           ? new URL(request.url).pathname
@@ -1311,8 +1316,8 @@ export async function getUserFromOrg<T extends Prisma.UserInclude | undefined>({
         title: "User not found",
         message: "",
         additionalData: {
-          model: "user",
-          organization: otherOrgOfUser,
+          model: "teamMember",
+          organizations: otherOrgsForUser,
           redirectTo,
         },
         label,

From 6d63a76f8eb61990e6966e5fae4f169e3c8a646e Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 27 Nov 2024 11:45:36 +0100
Subject: [PATCH 36/55] feat(improve-404): fix style issue on ErrorBoundary for
 team settings

---
 app/components/errors/error-404-handler.tsx   |  2 +-
 app/components/errors/index.tsx               | 19 ++++++++++++++++---
 .../_layout+/settings.team.users.$userId.tsx  | 17 ++++++++++++-----
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index 17ca763dc..155331a99 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -88,7 +88,7 @@ export default function Error404Handler({
               >
                 <Select name="organizationId" disabled={disabled}>
                   <SelectTrigger className="mb-4 px-3.5 py-2 text-left text-gray-500 max-w-80">
-                    <SelectValue placeholder="Select organization to switch" />
+                    <SelectValue placeholder="Select workspace to switch" />
                   </SelectTrigger>
                   <SelectContent
                     position="popper"
diff --git a/app/components/errors/index.tsx b/app/components/errors/index.tsx
index e45f57727..665b34ca7 100644
--- a/app/components/errors/index.tsx
+++ b/app/components/errors/index.tsx
@@ -4,8 +4,11 @@ import { isRouteError } from "~/utils/http";
 import { Button } from "../shared/button";
 import { parse404ErrorData } from "./utils";
 import Error404Handler from "./error-404-handler";
+import { tw } from "~/utils/tw";
 
-export const ErrorContent = () => {
+type ErrorContentProps = { className?: string };
+
+export const ErrorContent = ({ className }: ErrorContentProps) => {
   const loc = useLocation();
   const response = useRouteError();
 
@@ -22,14 +25,24 @@ export const ErrorContent = () => {
 
   const error404 = parse404ErrorData(response);
   if (error404.isError404) {
-    return <Error404Handler additionalData={error404.additionalData} />;
+    return (
+      <Error404Handler
+        className={className}
+        additionalData={error404.additionalData}
+      />
+    );
   }
 
   // Creating a string with <br/> tags for line breaks
   const messageHtml = { __html: message.split("\n").join("<br/>") };
 
   return (
-    <div className="flex size-full items-center justify-center">
+    <div
+      className={tw(
+        "h-screen flex size-full items-center justify-center",
+        className
+      )}
+    >
       <div className="flex flex-col items-center text-center">
         <span className="mb-5 size-[56px] text-primary">
           <ErrorIcon />
diff --git a/app/routes/_layout+/settings.team.users.$userId.tsx b/app/routes/_layout+/settings.team.users.$userId.tsx
index 394a52ee7..929f740aa 100644
--- a/app/routes/_layout+/settings.team.users.$userId.tsx
+++ b/app/routes/_layout+/settings.team.users.$userId.tsx
@@ -24,6 +24,7 @@ import {
 } from "~/utils/permissions/permission.data";
 import { requirePermission } from "~/utils/roles.server";
 import { organizationRolesMap } from "./settings.team";
+import { ErrorContent } from "~/components/errors";
 
 export const loader = async ({
   request,
@@ -150,9 +151,10 @@ export default function UserPage() {
           ),
         }}
         subHeading={user.email}
-      ></Header>
-      <AbsolutePositionedHeaderActions className="hidden w-full md:flex">
-        <When truthy={userOrgRole !== "Owner"}>
+      />
+
+      <When truthy={userOrgRole !== "Owner"}>
+        <AbsolutePositionedHeaderActions className="hidden w-full md:flex">
           <TeamUsersActionsDropdown
             userId={user.id}
             email={user.email}
@@ -165,11 +167,16 @@ export default function UserPage() {
               </Button>
             )}
           />
-        </When>
-      </AbsolutePositionedHeaderActions>
+        </AbsolutePositionedHeaderActions>
+      </When>
+
       <HorizontalTabs items={TABS} />
 
       <Outlet />
     </>
   );
 }
+
+export const ErrorBoundary = () => (
+  <ErrorContent className="h-[calc(100vh_-_100px)]" />
+);

From 91074dd43d2557dace918ccbfd59c53cffcf499e Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 27 Nov 2024 13:15:06 +0100
Subject: [PATCH 37/55] feat(improve-404): improve 404 handling for bookings

---
 app/components/errors/error-404-handler.tsx   |   3 +-
 app/components/errors/utils.ts                |   2 +-
 app/modules/booking/service.server.ts         | 113 ++++++++++++++----
 .../bookings.$bookingId.add-assets.tsx        |   9 +-
 .../_layout+/bookings.$bookingId.add-kits.tsx |   9 +-
 .../_layout+/bookings.$bookingId.cal[.ics].ts |  17 +--
 .../bookings.$bookingId.scan-assets.tsx       |  18 +--
 app/routes/_layout+/bookings.$bookingId.tsx   |  15 ++-
 8 files changed, 136 insertions(+), 50 deletions(-)

diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index 155331a99..1c709c08a 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -30,7 +30,8 @@ export default function Error404Handler({
     switch (additionalData.model) {
       case "asset":
       case "kit":
-      case "location": {
+      case "location":
+      case "booking": {
         return (
           <div className="flex flex-col items-center text-center">
             <div className="w-full md:max-w-screen-sm">
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index c075c9232..69a4c323f 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -16,7 +16,7 @@ const organizationSchema = z.object({
 export const error404AdditionalDataSchema = z.discriminatedUnion("model", [
   /* For common and general use case */
   baseAdditionalDataSchema.extend({
-    model: z.enum(["asset", "kit", "location"]),
+    model: z.enum(["asset", "kit", "location", "booking"]),
     organization: organizationSchema,
   }),
   /* A team member (user) can be in multiple organization's of user so we do this. */
diff --git a/app/modules/booking/service.server.ts b/app/modules/booking/service.server.ts
index c80335b88..bcee14968 100644
--- a/app/modules/booking/service.server.ts
+++ b/app/modules/booking/service.server.ts
@@ -6,6 +6,7 @@ import type {
   Asset,
   Kit,
   User,
+  UserOrganization,
 } from "@prisma/client";
 import { db } from "~/database/db.server";
 import { bookingUpdatesTemplateString } from "~/emails/bookings-updates-template";
@@ -14,7 +15,7 @@ import { getStatusClasses, isOneDayEvent } from "~/utils/calendar";
 import { calcTimeDifference } from "~/utils/date-fns";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import type { ErrorLabel } from "~/utils/error";
-import { isNotFoundError, ShelfError } from "~/utils/error";
+import { isLikeShelfError, isNotFoundError, ShelfError } from "~/utils/error";
 import { getCurrentSearchParams } from "~/utils/http.server";
 import { ALL_SELECTED_KEY } from "~/utils/list";
 import { Logger } from "~/utils/logger";
@@ -33,6 +34,7 @@ import { getBookingWhereInput } from "./utils.server";
 import { createNotes } from "../note/service.server";
 import { getOrganizationAdminsEmails } from "../organization/service.server";
 import { getUserByID } from "../user/service.server";
+import { MergeInclude } from "~/utils/utils";
 
 const label: ErrorLabel = "Booking";
 
@@ -141,10 +143,10 @@ async function updateBookingKitStates({
   }
 }
 
-const commonInclude: Prisma.BookingInclude = {
+const BOOKING_COMMON_INCLUDE = {
   custodianTeamMember: true,
   custodianUser: true,
-};
+} as Prisma.BookingInclude;
 //client should pass new Date().toIsoString() to action handler for to and from
 export async function upsertBooking(
   booking: Partial<
@@ -296,7 +298,7 @@ export async function upsertBooking(
           where: { id },
           data,
           include: {
-            ...commonInclude,
+            ...BOOKING_COMMON_INCLUDE,
             assets: true,
             ...bookingIncludeForEmails,
           },
@@ -488,7 +490,7 @@ export async function upsertBooking(
     }
     const res = await db.booking.create({
       data: data as Prisma.BookingCreateInput,
-      include: { ...commonInclude, organization: true },
+      include: { ...BOOKING_COMMON_INCLUDE, organization: true },
     });
     if (res.from && booking.status === BookingStatus.RESERVED && !isExpired) {
       await cancelScheduler(res);
@@ -641,7 +643,7 @@ export async function getBookings(params: {
         }),
         where,
         include: {
-          ...commonInclude,
+          ...BOOKING_COMMON_INCLUDE,
           assets: {
             select: {
               id: true,
@@ -782,7 +784,7 @@ export async function deleteBooking(
     const b = await db.booking.delete({
       where: { id },
       include: {
-        ...commonInclude,
+        ...BOOKING_COMMON_INCLUDE,
         ...bookingIncludeForEmails,
         assets: {
           select: {
@@ -849,11 +851,35 @@ export async function deleteBooking(
   }
 }
 
-export async function getBooking(
-  booking: Pick<Booking, "id" | "organizationId">
+const BOOKING_WITH_ASSETS_INCLUDE = {
+  ...BOOKING_COMMON_INCLUDE,
+  assets: {
+    select: {
+      id: true,
+      availableToBook: true,
+      status: true,
+      kitId: true,
+    },
+  },
+} satisfies Prisma.BookingInclude;
+
+type BookingWithExtraInclude<T extends Prisma.BookingInclude | undefined> =
+  T extends Prisma.BookingInclude
+    ? Prisma.BookingGetPayload<{
+        include: MergeInclude<typeof BOOKING_WITH_ASSETS_INCLUDE, T>;
+      }>
+    : Prisma.BookingGetPayload<{ include: typeof BOOKING_WITH_ASSETS_INCLUDE }>;
+
+export async function getBooking<T extends Prisma.BookingInclude | undefined>(
+  booking: Pick<Booking, "id" | "organizationId"> & {
+    userOrganizations?: Pick<UserOrganization, "organizationId">[];
+    request?: Request;
+    extraInclude?: T;
+  }
 ) {
   try {
-    const { id, organizationId } = booking;
+    const { id, organizationId, userOrganizations, request, extraInclude } =
+      booking;
 
     /**
      * On the booking page, we need some data related to the assets added, so we know what actions are possible
@@ -861,20 +887,56 @@ export async function getBooking(
      * For reserving a booking, we need to make sure that the assets in the booking dont have any other bookings that overlap with the current booking
      * Moreover we just query certain statuses as they are the only ones that matter for an asset being considered unavailable
      */
-    return await db.booking.findFirstOrThrow({
-      where: { id, organizationId },
-      include: {
-        ...commonInclude,
-        assets: {
-          select: {
-            id: true,
-            availableToBook: true,
-            status: true,
-            kitId: true,
-          },
-        },
+
+    const mergedInclude = {
+      ...BOOKING_WITH_ASSETS_INCLUDE,
+      ...extraInclude,
+    } as MergeInclude<typeof BOOKING_WITH_ASSETS_INCLUDE, T>;
+
+    const otherOrganizationIds = userOrganizations?.map(
+      (org) => org.organizationId
+    );
+
+    const bookingFound = (await db.booking.findFirstOrThrow({
+      where: {
+        OR: [
+          { id, organizationId },
+          ...(userOrganizations?.length
+            ? [{ id, organizationId: { in: otherOrganizationIds } }]
+            : []),
+        ],
       },
-    });
+      include: mergedInclude,
+    })) as BookingWithExtraInclude<T>;
+
+    /* User is accessing the asset in the wrong organization. */
+    if (
+      userOrganizations?.length &&
+      bookingFound.organizationId !== organizationId &&
+      otherOrganizationIds?.includes(bookingFound.organizationId)
+    ) {
+      const redirectTo =
+        typeof request !== "undefined"
+          ? new URL(request.url).pathname
+          : undefined;
+
+      throw new ShelfError({
+        cause: null,
+        title: "Booking not found",
+        message: "",
+        additionalData: {
+          model: "booking",
+          organization: userOrganizations?.find(
+            (org) => org.organizationId === bookingFound.organizationId
+          ),
+          redirectTo,
+        },
+        label,
+        status: 404,
+      });
+    }
+
+    return bookingFound;
   } catch (cause) {
     const is404 = isNotFoundError(cause);
     throw new ShelfError({
@@ -882,7 +944,10 @@ export async function getBooking(
       title: "Booking not found",
       message:
         "The booking you are trying to access does not exist or you do not have permission to access it.",
-      additionalData: { booking },
+      additionalData: {
+        ...booking,
+        ...(isLikeShelfError(cause) ? cause.additionalData : {}),
+      },
       label,
       shouldBeCaptured: !is404,
     });
diff --git a/app/routes/_layout+/bookings.$bookingId.add-assets.tsx b/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
index 495604fcf..6fc749a47 100644
--- a/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
+++ b/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
@@ -78,7 +78,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   );
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId: authSession?.userId,
       request,
       entity: PermissionEntity.booking,
@@ -108,7 +108,12 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       plural: "assets",
     };
 
-    const booking = await getBooking({ id, organizationId });
+    const booking = await getBooking({
+      id,
+      organizationId,
+      userOrganizations,
+      request,
+    });
     const bookingKitIds = getKitIdsByAssets(booking.assets);
 
     return json(
diff --git a/app/routes/_layout+/bookings.$bookingId.add-kits.tsx b/app/routes/_layout+/bookings.$bookingId.add-kits.tsx
index bf8699b60..ceaede6ba 100644
--- a/app/routes/_layout+/bookings.$bookingId.add-kits.tsx
+++ b/app/routes/_layout+/bookings.$bookingId.add-kits.tsx
@@ -84,7 +84,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.booking,
@@ -95,7 +95,12 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       singular: "kit",
       plural: "kits",
     };
-    const booking = await getBooking({ id: bookingId, organizationId });
+    const booking = await getBooking({
+      id: bookingId,
+      organizationId,
+      userOrganizations,
+      request,
+    });
     const bookingKitIds = getKitIdsByAssets(booking.assets);
 
     const { page, perPage, kits, search, totalKits, totalPages } =
diff --git a/app/routes/_layout+/bookings.$bookingId.cal[.ics].ts b/app/routes/_layout+/bookings.$bookingId.cal[.ics].ts
index 940b903e3..71ccb00b6 100644
--- a/app/routes/_layout+/bookings.$bookingId.cal[.ics].ts
+++ b/app/routes/_layout+/bookings.$bookingId.cal[.ics].ts
@@ -21,15 +21,18 @@ export async function loader({ request, context, params }: LoaderFunctionArgs) {
 
   try {
     /** Check if the current user is allowed to read booking */
-    const { organizationId, isSelfServiceOrBase } = await requirePermission({
-      userId: authSession.userId,
-      request,
-      entity: PermissionEntity.booking,
-      action: PermissionAction.read,
-    });
+    const { organizationId, isSelfServiceOrBase, userOrganizations } =
+      await requirePermission({
+        userId: authSession.userId,
+        request,
+        entity: PermissionEntity.booking,
+        action: PermissionAction.read,
+      });
     const booking = await getBooking({
       id: bookingId,
-      organizationId: organizationId,
+      organizationId,
+      userOrganizations,
+      request,
     });
 
     /** For self service & base users, we only allow them to read their own bookings */
diff --git a/app/routes/_layout+/bookings.$bookingId.scan-assets.tsx b/app/routes/_layout+/bookings.$bookingId.scan-assets.tsx
index 4e2ba3f85..b44bd3e85 100644
--- a/app/routes/_layout+/bookings.$bookingId.scan-assets.tsx
+++ b/app/routes/_layout+/bookings.$bookingId.scan-assets.tsx
@@ -56,18 +56,22 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId, role } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.booking,
-      action: PermissionAction.update,
-    });
+    const { organizationId, role, userOrganizations } = await requirePermission(
+      {
+        userId,
+        request,
+        entity: PermissionEntity.booking,
+        action: PermissionAction.update,
+      }
+    );
 
     const isSelfService = role === OrganizationRoles.SELF_SERVICE;
 
     const booking = await getBooking({
       id: bookingId,
-      organizationId: organizationId,
+      organizationId,
+      userOrganizations,
+      request,
     });
 
     const canManageAssets = canUserManageBookingAssets(booking, isSelfService);
diff --git a/app/routes/_layout+/bookings.$bookingId.tsx b/app/routes/_layout+/bookings.$bookingId.tsx
index 9ec2ba3c9..356d33c8c 100644
--- a/app/routes/_layout+/bookings.$bookingId.tsx
+++ b/app/routes/_layout+/bookings.$bookingId.tsx
@@ -74,12 +74,13 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   const take = perPage >= 1 && perPage <= 100 ? perPage : 20; // min 1 and max 100 per page
 
   try {
-    const { organizationId, isSelfServiceOrBase } = await requirePermission({
-      userId: authSession?.userId,
-      request,
-      entity: PermissionEntity.booking,
-      action: PermissionAction.create,
-    });
+    const { organizationId, isSelfServiceOrBase, userOrganizations } =
+      await requirePermission({
+        userId: authSession?.userId,
+        request,
+        entity: PermissionEntity.booking,
+        action: PermissionAction.create,
+      });
 
     /**
      * If the org id in the params is different than the current organization id,
@@ -96,6 +97,8 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const booking = await getBooking({
       id: bookingId,
       organizationId: organizationId,
+      userOrganizations,
+      request,
     });
 
     /** For self service & base users, we only allow them to read their own bookings */

From 2044b7f0c774beb5768cfde13625989f6ac99851 Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Thu, 28 Nov 2024 14:47:06 +0200
Subject: [PATCH 38/55] styling adjustments

---
 app/components/layout/sidebar/app-sidebar.tsx |   8 +-
 .../layout/sidebar/organization-selector.tsx  |  35 ++--
 app/components/layout/sidebar/sidebar-nav.tsx |  39 ++--
 .../layout/sidebar/sidebar-user-menu.tsx      |  20 +-
 app/components/layout/sidebar/sidebar.tsx     | 183 ++++++++----------
 app/hooks/use-main-menu-items.tsx             |  18 +-
 app/hooks/use-sidebar-nav-items.tsx           |  39 ++--
 .../_layout+/settings.team.users.$userId.tsx  |   2 +-
 app/tailwind.css                              |   2 +-
 9 files changed, 161 insertions(+), 185 deletions(-)

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index ecca0cf75..fa5333cfb 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -1,4 +1,6 @@
 import { ShelfSidebarLogo } from "~/components/marketing/logos";
+import { useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
+import OrganizationSelector from "./organization-selector";
 import {
   Sidebar,
   SidebarContent,
@@ -7,10 +9,8 @@ import {
   SidebarRail,
   useSidebar,
 } from "./sidebar";
-import OrganizationSelector from "./organization-selector";
-import SidebarUserMenu from "./sidebar-user-menu";
 import SidebarNav from "./sidebar-nav";
-import { useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
+import SidebarUserMenu from "./sidebar-user-menu";
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
 
@@ -21,7 +21,7 @@ export default function AppSidebar(props: AppSidebarProps) {
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className={state === "collapsed" ? "px-0" : ""}>
-        <div className="flex items-center mt-2 mb-2">
+        <div className="my-2 flex items-center">
           <ShelfSidebarLogo minimized={state === "collapsed"} />
         </div>
 
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 569222113..c4f8f9037 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -1,3 +1,10 @@
+import { useEffect, useState } from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { useFetcher, useLoaderData } from "@remix-run/react";
+import { useSetAtom } from "jotai";
+import invariant from "tiny-invariant";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
+import { Button } from "~/components/shared/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -6,24 +13,17 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
+import { Image } from "~/components/shared/image";
+import ProfilePicture from "~/components/user/profile-picture";
+import When from "~/components/when/when";
+import type { loader } from "~/routes/_layout+/_layout";
+import { isFormProcessing } from "~/utils/form";
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
 } from "./sidebar";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { useFetcher, useLoaderData } from "@remix-run/react";
-import type { loader } from "~/routes/_layout+/_layout";
-import ProfilePicture from "~/components/user/profile-picture";
-import { Image } from "~/components/shared/image";
-import { Button } from "~/components/shared/button";
-import invariant from "tiny-invariant";
-import { isFormProcessing } from "~/utils/form";
-import When from "~/components/when/when";
-import { useEffect, useState } from "react";
-import { useSetAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 
 export default function OrganizationSelector() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -72,17 +72,14 @@ export default function OrganizationSelector() {
       <SidebarMenuItem>
         <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground justify-center w-full h-full"
-            >
+            <SidebarMenuButton className="size-full justify-center border !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50">
               {currentOrganization.type === "PERSONAL" ? (
                 <ProfilePicture width="w-6" height="h-6" />
               ) : (
                 <Image
                   imageId={currentOrganization.imageId}
                   alt="img"
-                  className="size-8 rounded-sm object-cover"
+                  className="size-8 rounded-sm border object-cover"
                   updatedAt={currentOrganization.updatedAt}
                 />
               )}
@@ -101,7 +98,7 @@ export default function OrganizationSelector() {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
+            className="!mt-0 w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
             align="start"
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
@@ -109,7 +106,7 @@ export default function OrganizationSelector() {
             {organizations.map((organization, index) => (
               <DropdownMenuItem
                 key={organization.id}
-                className="gap-2 p-2 rounded-sm"
+                className="gap-2 rounded-sm p-2"
                 onClick={() => {
                   if (organization.id !== currentOrganizationId) {
                     handleSwitchOrganization(organization.id);
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 4d4ca0fde..c8f592328 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,4 +1,13 @@
-import { ChevronRight, HomeIcon } from "~/components/icons/library";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { NavLink, useMatches } from "@remix-run/react";
+import Icon from "~/components/icons/icon";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/shared/collapsible";
+import type { NavItem } from "~/hooks/use-sidebar-nav-items";
+import { tw } from "~/utils/tw";
 import {
   SidebarGroup,
   SidebarMenu,
@@ -8,15 +17,6 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "./sidebar";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "~/components/shared/collapsible";
-import { matchRoutes, NavLink, useMatch, useMatches } from "@remix-run/react";
-import { NavItem, useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
-import Icon from "~/components/icons/icon";
-import { tw } from "~/utils/tw";
 
 type SidebarNavProps = {
   className?: string;
@@ -46,6 +46,7 @@ export default function SidebarNav({
                 key={item.title}
                 asChild
                 className="group/collapsible"
+                defaultOpen={item.defaultOpen}
               >
                 <SidebarMenuItem key={item.title}>
                   <CollapsibleTrigger asChild>
@@ -53,10 +54,10 @@ export default function SidebarNav({
                       <Icon
                         size="xs"
                         icon={item.icon}
-                        className="text-gray-500"
+                        className="text-gray-600"
                       />
-                      <span>{item.title}</span>
-                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                      <span className="font-semibold">{item.title}</span>
+                      <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
                     </SidebarMenuButton>
                   </CollapsibleTrigger>
                   <CollapsibleContent>
@@ -71,9 +72,8 @@ export default function SidebarNav({
                                 to={child.to}
                                 target={child.target}
                                 className={tw(
-                                  "font-medium",
-                                  isChildActive &&
-                                    "text-primary-500 bg-primary-25"
+                                  "font-medium hover:bg-gray-100",
+                                  isChildActive && "bg-gray-100"
                                 )}
                               >
                                 {child.title}
@@ -97,12 +97,9 @@ export default function SidebarNav({
                 <NavLink
                   to={item.to}
                   target={item.target}
-                  className={tw(
-                    "font-medium",
-                    isActive && "text-primary-500 bg-primary-25"
-                  )}
+                  className={tw("font-semibold", isActive && "bg-gray-100")}
                 >
-                  <Icon size="xs" icon={item.icon} className="text-gray-500" />
+                  <Icon size="xs" icon={item.icon} className="text-gray-600" />
                   <span>{item.title}</span>
                 </NavLink>
               </SidebarMenuButton>
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index 8e7753e88..9be5b1baf 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -1,3 +1,9 @@
+import { useState } from "react";
+import { useLoaderData } from "@remix-run/react";
+import { Form } from "~/components/custom-form";
+import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
+import { CrispButton } from "~/components/marketing/crisp";
+import { Button } from "~/components/shared/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -6,20 +12,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
+import ProfilePicture from "~/components/user/profile-picture";
+import type { loader } from "~/routes/_layout+/_layout";
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
 } from "./sidebar";
-import { useLoaderData } from "@remix-run/react";
-import type { loader } from "~/routes/_layout+/_layout";
-import ProfilePicture from "~/components/user/profile-picture";
-import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
-import { Button } from "~/components/shared/button";
-import { CrispButton } from "~/components/marketing/crisp";
-import { Form } from "~/components/custom-form";
-import { useState } from "react";
 
 export default function SidebarUserMenu() {
   const { user } = useLoaderData<typeof loader>();
@@ -37,7 +37,7 @@ export default function SidebarUserMenu() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="!h-auto border !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50"
             >
               <ProfilePicture
                 width="w-8"
@@ -83,7 +83,7 @@ export default function SidebarUserMenu() {
                 className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
                 onClick={closeDropdown}
               >
-                Account Details
+                Account settings
               </Button>
             </DropdownMenuItem>
             <DropdownMenuItem
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index 492f3e0cb..d626a9ba1 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -1,6 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
-
 import {
   createContext,
   forwardRef,
@@ -10,11 +7,14 @@ import {
   useMemo,
   useState,
 } from "react";
-import { useIsMobile } from "~/hooks/use-mobile";
+import { Slot } from "@radix-ui/react-slot";
+import { useFetcher } from "@remix-run/react";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+import Input from "~/components/forms/input";
 import { SwitchIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
-import { tw } from "~/utils/tw";
-import Input from "~/components/forms/input";
 import { Separator } from "~/components/shared/separator";
 import { Sheet, SheetContent } from "~/components/shared/sheet";
 import { Skeleton } from "~/components/shared/skeleton";
@@ -24,8 +24,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "~/components/shared/tooltip";
-import { useFetcher } from "@remix-run/react";
+import { useIsMobile } from "~/hooks/use-mobile";
 import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
 
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
@@ -102,15 +103,15 @@ const SidebarProvider = forwardRef<
           action: "/api/user/prefs/minimized-sidebar",
         });
       },
-      [setOpenProp, open]
+      [open, setOpenProp, sidebarTogglerFetcher]
     );
 
     // Helper to toggle the sidebar.
-    const toggleSidebar = useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+    const toggleSidebar = useCallback(
+      () =>
+        isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open),
+      [isMobile, setOpen, setOpenMobile]
+    );
 
     // Adds a keyboard shortcut to toggle the sidebar.
     useEffect(() => {
@@ -232,7 +233,7 @@ const Sidebar = forwardRef<
             }
             side={side}
           >
-            <div className="flex h-full w-full flex-col">{children}</div>
+            <div className="flex size-full flex-col">{children}</div>
           </SheetContent>
         </Sheet>
       );
@@ -241,7 +242,7 @@ const Sidebar = forwardRef<
     return (
       <div
         ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
+        className="group peer hidden text-sidebar-foreground md:block"
         data-state={state}
         data-collapsible={state === "collapsed" ? collapsible : ""}
         data-variant={variant}
@@ -250,7 +251,7 @@ const Sidebar = forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={tw(
-            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
             "group-data-[collapsible=offcanvas]:w-0",
             "group-data-[side=right]:rotate-180",
             variant === "floating" || variant === "inset"
@@ -260,7 +261,7 @@ const Sidebar = forwardRef<
         />
         <div
           className={tw(
-            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -274,7 +275,7 @@ const Sidebar = forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
@@ -325,7 +326,7 @@ const SidebarRail = forwardRef<
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={tw(
-        "absolute inset-y-0 z-50 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "absolute inset-y-0 z-50 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
@@ -347,7 +348,7 @@ const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
       <main
         ref={ref}
         className={tw(
-          "relative flex h-[96.5vh] flex-1 flex-col bg-background",
+          "bg-background relative flex h-[96.5vh] flex-1 flex-col",
           "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
           state === "collapsed"
             ? "md:max-w-[calc(100vw_-_48px)]"
@@ -364,92 +365,80 @@ SidebarInset.displayName = "SidebarInset";
 const SidebarInput = forwardRef<
   React.ElementRef<typeof Input>,
   React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={tw(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-primary-500",
-        className
-      )}
-      {...props}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <Input
+    ref={ref}
+    data-sidebar="input"
+    className={tw(
+      "bg-background h-8 w-full shadow-none focus-visible:ring-2 focus-visible:ring-primary-500",
+      className
+    )}
+    {...props}
+  />
+));
 SidebarInput.displayName = "SidebarInput";
 
 const SidebarHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="header"
-        className={tw("flex flex-col gap-2 p-2", className)}
-        {...props}
-      />
-    );
-  }
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={tw("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
 );
 SidebarHeader.displayName = "SidebarHeader";
 
 const SidebarFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="footer"
-        className={tw("flex flex-col gap-2 p-2", className)}
-        {...props}
-      />
-    );
-  }
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={tw("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
 );
 SidebarFooter.displayName = "SidebarFooter";
 
 const SidebarSeparator = forwardRef<
   React.ElementRef<typeof Separator>,
   React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={tw("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <Separator
+    ref={ref}
+    data-sidebar="separator"
+    className={tw("mx-2 w-auto bg-sidebar-border", className)}
+    {...props}
+  />
+));
 SidebarSeparator.displayName = "SidebarSeparator";
 
 const SidebarContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="content"
-        className={tw(
-          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-          className
-        )}
-        {...props}
-      />
-    );
-  }
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={tw(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
 );
 SidebarContent.displayName = "SidebarContent";
 
 const SidebarGroup = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-sidebar="group"
-        className={tw("relative flex w-full min-w-0 flex-col p-2", className)}
-        {...props}
-      />
-    );
-  }
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={tw("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
 );
 SidebarGroup.displayName = "SidebarGroup";
 
@@ -464,7 +453,7 @@ const SidebarGroupLabel = forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={tw(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-primary-500 transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-sidebar-foreground/70 outline-none ring-primary-500 transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -527,7 +516,7 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
     <li
       ref={ref}
       data-sidebar="menu-item"
-      className={tw("group/menu-item relative", className)}
+      className={tw("group/menu-item relative ", className)}
       {...props}
     />
   )
@@ -535,11 +524,11 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding] hover:text-primary-500 hover:bg-primary-25 focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding]  focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:text-primary-500 hover:bg-primary-25",
+        default: " hover:bg-gray-100",
         outline:
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
@@ -629,7 +618,7 @@ const SidebarMenuAction = forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={tw(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -654,7 +643,7 @@ const SidebarMenuBadge = forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={tw(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-semibold tabular-nums text-sidebar-foreground",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -674,15 +663,13 @@ const SidebarMenuSkeleton = forwardRef<
   }
 >(({ className, showIcon = false, ...props }, ref) => {
   // Random width between 50 to 90%.
-  const width = useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
 
   return (
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={tw("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      className={tw("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
       {showIcon && (
@@ -692,7 +679,7 @@ const SidebarMenuSkeleton = forwardRef<
         />
       )}
       <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
+        className="h-4 max-w-[--skeleton-width] flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
@@ -744,7 +731,7 @@ const SidebarMenuSubButton = forwardRef<
       data-size={size}
       data-active={isActive}
       className={tw(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-primary-500 hover:text-primary-500 hover:bg-primary-25 focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-primary-500 aria-disabled:pointer-events-none aria-disabled:opacity-50  focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/app/hooks/use-main-menu-items.tsx b/app/hooks/use-main-menu-items.tsx
index 742ab1d96..bd5abd503 100644
--- a/app/hooks/use-main-menu-items.tsx
+++ b/app/hooks/use-main-menu-items.tsx
@@ -54,12 +54,16 @@ export function useMainMenuItems() {
     },
   ];
   let menuItemsBottom = [
+    {
+      icon: <Icon icon="settings" />,
+      to: "settings",
+      title: "Workspace settings",
+      end: true,
+    },
     {
       icon: <Icon icon="asset-label" />,
-      to: `https://www.shelf.nu/order-tags?email=${user?.email}${
-        user?.firstName ? `&firstName=${user.firstName}` : ""
-      }${user?.lastName ? `&lastName=${user.lastName}` : ""}`,
-      title: "Asset labels",
+      to: `https://store.shelf.nu/?ref=app_sidebar`,
+      title: "Buy Asset labels",
       target: "_blank",
       isNew: true,
     },
@@ -69,12 +73,6 @@ export function useMainMenuItems() {
       title: "QR scanner",
       end: true,
     },
-    {
-      icon: <Icon icon="settings" />,
-      to: "settings",
-      title: "Workspace settings",
-      end: true,
-    },
   ];
 
   if (isBaseOrSelfService) {
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 4ab66c13c..52af46a93 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -1,11 +1,11 @@
-import { useUserData } from "./use-user-data";
+import type { IconType } from "~/components/shared/icons-map";
 import { useUserRoleHelper } from "./user-user-role-helper";
-import { IconType } from "~/components/shared/icons-map";
 
 type BaseNavItem = {
   title: string;
   hidden?: boolean;
   icon: IconType;
+  defaultOpen?: boolean;
 };
 
 type ChildNavItem = BaseNavItem & {
@@ -22,7 +22,6 @@ type ParentNavItem = BaseNavItem & {
 export type NavItem = ChildNavItem | ParentNavItem;
 
 export function useSidebarNavItems() {
-  const user = useUserData();
   const { isBaseOrSelfService } = useUserRoleHelper();
 
   const topMenuItems: NavItem[] = [
@@ -99,24 +98,6 @@ export function useSidebarNavItems() {
         },
       ],
     },
-  ];
-
-  const bottomMenuItems: NavItem[] = [
-    {
-      type: "child",
-      title: "Asset labels",
-      to: `https://www.shelf.nu/order-tags?email=${user?.email}${
-        user?.firstName ? `&firstName=${user.firstName}` : ""
-      }${user?.lastName ? `&lastName=${user.lastName}` : ""}`,
-      icon: "asset-label",
-      target: "_blank",
-    },
-    {
-      type: "child",
-      title: "QR Scanner",
-      to: "/scanner",
-      icon: "scanQR",
-    },
     {
       type: "parent",
       title: "Workspace settings",
@@ -139,6 +120,22 @@ export function useSidebarNavItems() {
     },
   ];
 
+  const bottomMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Asset labels",
+      to: `https://store.shelf.nu/?ref=shelf_webapp_sidebar`,
+      icon: "asset-label",
+      target: "_blank",
+    },
+    {
+      type: "child",
+      title: "QR Scanner",
+      to: "/scanner",
+      icon: "scanQR",
+    },
+  ];
+
   return {
     topMenuItems: topMenuItems.filter((item) => !item.hidden),
     bottomMenuItems: bottomMenuItems.filter((item) => !item.hidden),
diff --git a/app/routes/_layout+/settings.team.users.$userId.tsx b/app/routes/_layout+/settings.team.users.$userId.tsx
index 929f740aa..77520b80f 100644
--- a/app/routes/_layout+/settings.team.users.$userId.tsx
+++ b/app/routes/_layout+/settings.team.users.$userId.tsx
@@ -5,6 +5,7 @@ import type {
 } from "@remix-run/node";
 import { json, Outlet, useLoaderData } from "@remix-run/react";
 import { z } from "zod";
+import { ErrorContent } from "~/components/errors";
 import Header from "~/components/layout/header";
 import { AbsolutePositionedHeaderActions } from "~/components/layout/header/absolute-positioned-header-actions";
 import HorizontalTabs from "~/components/layout/horizontal-tabs";
@@ -24,7 +25,6 @@ import {
 } from "~/utils/permissions/permission.data";
 import { requirePermission } from "~/utils/roles.server";
 import { organizationRolesMap } from "./settings.team";
-import { ErrorContent } from "~/components/errors";
 
 export const loader = async ({
   request,
diff --git a/app/tailwind.css b/app/tailwind.css
index fd9f66f64..994aca140 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --sidebar-background: 0 0% 98%;
+    --sidebar-background: theme(colors.white);
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;

From 873df4dae84c7a7a6a37d4cdafb61d84bbe718ef Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 17:57:18 +0100
Subject: [PATCH 39/55] refactor(sidebar): remove unsed files

---
 app/components/layout/sidebar/atoms.ts        |  31 ---
 app/components/layout/sidebar/bottom.tsx      | 130 ------------
 app/components/layout/sidebar/menu-button.tsx |  31 ---
 app/components/layout/sidebar/menu-items.tsx  | 199 ------------------
 app/components/layout/sidebar/notice-card.tsx |  53 -----
 .../sidebar/organization-select-form.tsx      |  51 -----
 .../layout/sidebar/organization-selector.tsx  |   2 +-
 app/components/layout/sidebar/overlay.tsx     |  18 --
 app/components/layout/sidebar/sidebar-old.tsx |  99 ---------
 app/hooks/use-main-menu-items.tsx             | 100 ---------
 app/routes/_layout+/_layout.tsx               |   4 +-
 11 files changed, 3 insertions(+), 715 deletions(-)
 delete mode 100644 app/components/layout/sidebar/atoms.ts
 delete mode 100644 app/components/layout/sidebar/bottom.tsx
 delete mode 100644 app/components/layout/sidebar/menu-button.tsx
 delete mode 100644 app/components/layout/sidebar/menu-items.tsx
 delete mode 100644 app/components/layout/sidebar/notice-card.tsx
 delete mode 100644 app/components/layout/sidebar/organization-select-form.tsx
 delete mode 100644 app/components/layout/sidebar/overlay.tsx
 delete mode 100644 app/components/layout/sidebar/sidebar-old.tsx
 delete mode 100644 app/hooks/use-main-menu-items.tsx

diff --git a/app/components/layout/sidebar/atoms.ts b/app/components/layout/sidebar/atoms.ts
deleted file mode 100644
index 9b93b6bb2..000000000
--- a/app/components/layout/sidebar/atoms.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { atom } from "jotai";
-
-export const sidebarCollapseStatusAtom = atom(false);
-
-export const keepSidebarUncollapsedAtom = atom(true);
-
-/* Controls the state for whether the sidebar is collapsed or not */
-export const toggleSidebarAtom = atom(
-  (get) => get(sidebarCollapseStatusAtom),
-  (get, set) =>
-    !get(keepSidebarUncollapsedAtom)
-      ? set(sidebarCollapseStatusAtom, !get(sidebarCollapseStatusAtom))
-      : null
-);
-
-/* Controls the state for whether the sidebar uncollapsed state will be maintained or not */
-export const maintainUncollapsedAtom = atom(
-  (get) => get(keepSidebarUncollapsedAtom),
-  (get, set) => {
-    set(keepSidebarUncollapsedAtom, !get(keepSidebarUncollapsedAtom));
-    set(sidebarCollapseStatusAtom, !get(keepSidebarUncollapsedAtom));
-  }
-);
-
-/* Using different atoms for mobile navigation sidebar as they conflict with desktop's sidebar atoms state*/
-export const isMobileNavOpenAtom = atom(false);
-
-export const toggleMobileNavAtom = atom(
-  (get) => get(isMobileNavOpenAtom),
-  (get, set) => set(isMobileNavOpenAtom, !get(isMobileNavOpenAtom))
-);
diff --git a/app/components/layout/sidebar/bottom.tsx b/app/components/layout/sidebar/bottom.tsx
deleted file mode 100644
index b72e72825..000000000
--- a/app/components/layout/sidebar/bottom.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useState } from "react";
-import type { User } from "@prisma/client";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import { Form } from "~/components/custom-form";
-import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
-import { CrispButton } from "~/components/marketing/crisp";
-import { Button } from "~/components/shared/button";
-import {
-  DropdownMenuItem,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "~/components/shared/dropdown";
-import ProfilePicture from "~/components/user/profile-picture";
-import { tw } from "~/utils/tw";
-
-interface Props {
-  user: Pick<User, "username" | "email">;
-}
-
-export default function SidebarBottom({ user }: Props) {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-
-  return (
-    <div
-      className={tw(
-        "bottom gap-2",
-        workspaceSwitching ? "pointer-events-none" : ""
-      )}
-    >
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger
-          onClick={() => setDropdownOpen((prev) => !prev)}
-          className="w-full truncate outline-none focus-visible:border-0"
-        >
-          <div
-            className={tw(
-              `flex w-full items-center justify-between rounded border border-gray-200  px-2 py-1 hover:bg-gray-100`
-            )}
-          >
-            <ProfilePicture
-              width="w-8"
-              height="h-8"
-              className="mr-3 shrink-0"
-            />
-            <div className="user-credentials grow truncate text-left text-[14px] transition-all duration-200 ease-linear">
-              <div className="line-clamp-1 block text-ellipsis font-semibold">
-                {user.username}
-              </div>
-              <div
-                className="line-clamp-1 block max-w-full text-ellipsis"
-                data-test-id="userEmail"
-              >
-                {user.email}
-              </div>
-            </div>
-            <div className="shrink-0">
-              <i
-                className={`inline-block px-3 py-0 text-gray-400 transition-all duration-300 ease-out ${
-                  dropdownOpen ? "-rotate-90" : "rotate-90"
-                }`}
-              >
-                <ChevronRight />
-              </i>
-            </div>
-          </div>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent
-          align="end"
-          className="order ml-[16px] w-[280px] rounded bg-white p-0 text-right"
-        >
-          <DropdownMenuItem className="border-b border-gray-200 p-0">
-            <Button
-              to={`/account-details`}
-              icon="profile"
-              role="link"
-              variant="link"
-              className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-              width="full"
-            >
-              Account Details
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onSelect={(e) => e.preventDefault()}
-            className="border-b border-gray-200 p-0"
-          >
-            <CrispButton
-              className={tw(
-                "justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-              )}
-              variant="link"
-              width="full"
-              title="Questions/Feedback"
-            >
-              <span className="flex items-center justify-start gap-2">
-                <i className="icon text-gray-700">
-                  <QuestionsIcon />
-                </i>
-                <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                  Questions/Feedback
-                </span>
-              </span>
-            </CrispButton>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="p-0"
-            onSelect={(e) => e.preventDefault()}
-          >
-            <Form action="/logout" method="post" className="w-full">
-              <Button
-                icon="logout"
-                role="link"
-                type="submit"
-                variant="link"
-                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                width="full"
-              >
-                Log Out
-              </Button>
-            </Form>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
diff --git a/app/components/layout/sidebar/menu-button.tsx b/app/components/layout/sidebar/menu-button.tsx
deleted file mode 100644
index b939ccca7..000000000
--- a/app/components/layout/sidebar/menu-button.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useAtom } from "jotai";
-import { tw } from "~/utils/tw";
-import { toggleMobileNavAtom } from "./atoms";
-
-const MenuButton = () => {
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  return (
-    <button className="menu-btn relative z-50 pt-1.5" onClick={toggleMobileNav}>
-      <span
-        className={tw(
-          "mb-1 block h-[2px] w-[19px] rounded-full bg-gray-500 transition-all",
-          isMobileNavOpen ? "translate-y-[6px] rotate-45" : ""
-        )}
-      ></span>
-      <span
-        className={tw(
-          "mb-1 block h-[2px] w-[14px] rounded-full bg-gray-500 transition-all",
-          isMobileNavOpen ? "invisible opacity-0" : "opacity-1"
-        )}
-      ></span>
-      <span
-        className={tw(
-          "mb-1 block h-[2px] w-[19px] rounded-full bg-gray-500 transition-all",
-          isMobileNavOpen ? "translate-y-[-6px] -rotate-45" : ""
-        )}
-      ></span>
-    </button>
-  );
-};
-
-export default MenuButton;
diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
deleted file mode 100644
index 1fabe04b3..000000000
--- a/app/components/layout/sidebar/menu-items.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import type { FetcherWithComponents } from "@remix-run/react";
-import {
-  NavLink,
-  useLoaderData,
-  useLocation,
-  useMatches,
-} from "@remix-run/react";
-import { motion } from "framer-motion";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import Icon from "~/components/icons/icon";
-import { UpgradeMessage } from "~/components/marketing/upgrade-message";
-import { Button } from "~/components/shared/button";
-import When from "~/components/when/when";
-import { useMainMenuItems } from "~/hooks/use-main-menu-items";
-import type { loader } from "~/routes/_layout+/_layout";
-import { tw } from "~/utils/tw";
-import { toggleMobileNavAtom } from "./atoms";
-import { SidebarNoticeCard } from "./notice-card";
-
-const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
-  const [, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  const { isAdmin, minimizedSidebar, canUseBookings, subscription } =
-    useLoaderData<typeof loader>();
-  const { menuItemsTop, menuItemsBottom } = useMainMenuItems();
-  const location = useLocation();
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-  const matches = useMatches();
-  const currentRoute = matches.at(-1);
-  // @ts-expect-error
-  const handle = currentRoute?.handle?.name;
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex h-full flex-col justify-between">
-        <ul className="menu">
-          {isAdmin ? (
-            <li>
-              <NavLink
-                className={({ isActive }) =>
-                  tw(
-                    "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    isActive ? "active bg-primary-50 text-primary-600" : "",
-                    workspaceSwitching ? "pointer-events-none" : ""
-                  )
-                }
-                to={"/admin-dashboard/users"}
-                onClick={toggleMobileNav}
-                title={"Admin dashboard"}
-              >
-                <i className="icon text-gray-500">🛸</i>
-                <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                  Admin dashboard
-                </span>
-              </NavLink>
-              <hr />
-            </li>
-          ) : null}
-
-          {menuItemsTop.map((item) =>
-            item.to === "bookings" || item.to === "calendar" ? (
-              <li key={item.title}>
-                <Button
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                  className={tw(
-                    "my-1 flex items-center justify-start gap-3 rounded border-0 bg-transparent px-3 text-left text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    canUseBookings
-                      ? "justify-start focus:ring-0"
-                      : "my-0 text-gray-500 hover:bg-gray-50 hover:text-gray-500",
-                    /** We need to do this becasue of a special way we handle the bookings link that doesnt allow us to use NavLink currently */
-                    location.pathname.includes(item.to) &&
-                      handle !== "$userId.bookings" &&
-                      !location.pathname.includes("assets")
-                      ? "active bg-primary-50 text-primary-600"
-                      : ""
-                  )}
-                  disabled={
-                    !canUseBookings
-                      ? {
-                          title: "Disabled",
-                          reason: (
-                            <>
-                              {item.to[0].toUpperCase() + item.to.substring(1)}{" "}
-                              is a premium feature only available for Team
-                              workspaces.{" "}
-                              {!subscription ? (
-                                <UpgradeMessage />
-                              ) : (
-                                "Please switch to your team workspace to access this feature."
-                              )}
-                            </>
-                          ),
-                        }
-                      : false
-                  }
-                >
-                  <span className="flex items-center gap-3 rounded ">
-                    <i
-                      className={tw(
-                        "icon pl-[2px] text-gray-500",
-                        !canUseBookings
-                          ? "!hover:text-gray-500 !text-gray-500"
-                          : ""
-                      )}
-                    >
-                      {item.icon}
-                    </i>
-                    <span className="text whitespace-nowrap transition duration-200 ease-linear hover:text-primary-600">
-                      {item.title}
-                    </span>
-                  </span>
-                </Button>
-              </li>
-            ) : (
-              <li key={item.title}></li>
-            )
-          )}
-        </ul>
-
-        <div className="lower-menu">
-          {/* Sidebar notice card component will be visible when uncollapsed sidebar is selected and hidden when minimizing sidebar form is processing */}
-          {fetcher.state == "idle" ? (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.3 }}
-            >
-              <SidebarNoticeCard />
-            </motion.div>
-          ) : null}
-          <ul className="menu mb-6">
-            {menuItemsBottom.map((item) => (
-              <li key={item.title}>
-                <NavLink
-                  className={({ isActive }) =>
-                    tw(
-                      " my-1 flex items-center  gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive && handle !== "settings.team.users"
-                        ? "active bg-primary-50 text-primary-600"
-                        : "",
-                      workspaceSwitching ? "pointer-events-none" : ""
-                    )
-                  }
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                  target={item?.target || undefined}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    {item.icon}
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    {item.title}
-                  </span>
-                  <When truthy={item.isNew || false}>
-                    <span className="ml-auto rounded-lg bg-primary-50 px-2 py-1 text-xs text-primary-600">
-                      New
-                    </span>
-                  </When>
-                </NavLink>
-              </li>
-            ))}
-            <li>
-              <fetcher.Form
-                method="post"
-                action="/api/user/prefs/minimized-sidebar"
-              >
-                <input
-                  type="hidden"
-                  name="minimizeSidebar"
-                  value={minimizedSidebar ? "close" : "open"}
-                />
-                <button
-                  type="submit"
-                  className={tw(
-                    "crisp-btn mt-1 flex w-full items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    workspaceSwitching ? "pointer-events-none" : ""
-                  )}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    <Icon icon="switch" />
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    Minimize
-                  </span>
-                </button>
-              </fetcher.Form>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MenuItems;
diff --git a/app/components/layout/sidebar/notice-card.tsx b/app/components/layout/sidebar/notice-card.tsx
deleted file mode 100644
index fed91f4cb..000000000
--- a/app/components/layout/sidebar/notice-card.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useFetcher, useLoaderData } from "@remix-run/react";
-import { XIcon } from "~/components/icons/library";
-import { Button } from "~/components/shared/button";
-import type { loader } from "~/routes/_layout+/_layout";
-
-export const SidebarNoticeCard = () => {
-  const { hideNoticeCard } = useLoaderData<typeof loader>();
-  const fetcher = useFetcher();
-
-  let optimisticHideNoticeCard = hideNoticeCard;
-  if (fetcher.formData) {
-    optimisticHideNoticeCard =
-      fetcher.formData.get("noticeCardVisibility") === "hidden";
-  }
-
-  return optimisticHideNoticeCard ? null : (
-    <div className="support-banner mb-6 hidden rounded bg-gray-50 px-4 py-5 md:mt-10 md:block">
-      <div className="flex justify-between align-middle">
-        <h5 className="mb-1 font-semibold text-gray-900">
-          Install Shelf for Mobile
-        </h5>
-        <div className="mt-[-6px]">
-          <fetcher.Form
-            method="post"
-            action="/api/user/prefs/dismiss-notice-card"
-          >
-            <input type="hidden" name="noticeCardVisibility" value="hidden" />
-            <button type="submit">
-              <XIcon />
-            </button>
-          </fetcher.Form>
-        </div>
-      </div>
-
-      <p className="text-gray-600">
-        Always available access to shelf, with all features you have on desktop.
-      </p>
-      <img
-        src="/static/images/carlos-support.jpg"
-        alt="Carlos support shelf.nu"
-        className="my-4 rounded"
-      />
-      <p>
-        <Button
-          variant="link"
-          to="https://www.shelf.nu/blog/new-shelf-pwa-progresive-web-application-live-learn-how-to-use"
-        >
-          Written Tutorial
-        </Button>
-      </p>
-    </div>
-  );
-};
diff --git a/app/components/layout/sidebar/organization-select-form.tsx b/app/components/layout/sidebar/organization-select-form.tsx
deleted file mode 100644
index 265f970c3..000000000
--- a/app/components/layout/sidebar/organization-select-form.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useEffect } from "react";
-import { useFetcher } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-
-import { SelectSeparator } from "~/components/forms/select";
-import { Button } from "~/components/shared/button";
-import { isFormProcessing } from "~/utils/form";
-import { OrganizationSelect } from "./organization-select";
-
-export const OrganizationSelectForm = () => {
-  const fetcher = useFetcher();
-
-  /** We track if the fetcher is submitting */
-  const isProcessing = isFormProcessing(fetcher.state);
-  const [_workspaceSwitching, setWorkspaceSwitching] = useAtom(
-    switchingWorkspaceAtom
-  );
-  useEffect(() => {
-    setWorkspaceSwitching(isProcessing);
-  }, [isProcessing, setWorkspaceSwitching]);
-
-  return (
-    <fetcher.Form
-      action={"/api/user/change-current-organization"}
-      method="POST"
-      onChange={(e) => {
-        const form = e.currentTarget;
-        fetcher.submit(form);
-      }}
-    >
-      <OrganizationSelect
-        slots={{
-          "after-select": (
-            <>
-              <SelectSeparator className="mx-0" />
-              <Button
-                to="/account-details/workspace"
-                icon="settings"
-                variant="link"
-                className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
-              >
-                Manage workspaces
-              </Button>
-            </>
-          ),
-        }}
-      />
-    </fetcher.Form>
-  );
-};
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index c4f8f9037..7f8859c70 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -64,7 +64,7 @@ export default function OrganizationSelector() {
     function setSwitchingWorkspaceAfterFetch() {
       setWorkspaceSwitching(isSwitchingOrg);
     },
-    [isFormProcessing, setWorkspaceSwitching]
+    [isSwitchingOrg, setWorkspaceSwitching]
   );
 
   return (
diff --git a/app/components/layout/sidebar/overlay.tsx b/app/components/layout/sidebar/overlay.tsx
deleted file mode 100644
index 015c654c7..000000000
--- a/app/components/layout/sidebar/overlay.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useAtom } from "jotai";
-import { tw } from "~/utils/tw";
-import { toggleMobileNavAtom } from "./atoms";
-
-const Overlay = () => {
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  return (
-    <div
-      onClick={toggleMobileNav}
-      className={tw(
-        "fixed right-0 top-0 z-10 h-screen w-screen cursor-pointer bg-gray-25/10 backdrop-blur transition duration-300 ease-in-out md:hidden",
-        isMobileNavOpen ? "visible" : "invisible opacity-0"
-      )}
-    ></div>
-  );
-};
-
-export default Overlay;
diff --git a/app/components/layout/sidebar/sidebar-old.tsx b/app/components/layout/sidebar/sidebar-old.tsx
deleted file mode 100644
index b32d72635..000000000
--- a/app/components/layout/sidebar/sidebar-old.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useRef } from "react";
-import { Link, NavLink, useFetcher, useLoaderData } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import { ScanQRIcon } from "~/components/icons/library";
-import type { loader } from "~/routes/_layout+/_layout";
-import { tw } from "~/utils/tw";
-
-import { toggleMobileNavAtom } from "./atoms";
-import SidebarBottom from "./bottom";
-import MenuButton from "./menu-button";
-import MenuItems from "./menu-items";
-import { OrganizationSelectForm } from "./organization-select-form";
-import Overlay from "./overlay";
-import { ShelfMobileLogo, ShelfSidebarLogo } from "../../marketing/logos";
-
-export default function Sidebar() {
-  const { user, minimizedSidebar, currentOrganizationId } =
-    useLoaderData<typeof loader>();
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  const mainNavigationRef = useRef<HTMLElement>(null);
-
-  /** We use optimistic UI for folding of the scanner.tsx sidebar
-   * As we are making a request to the server to store the cookie,
-   * we need to use this approach, otherwise the sidebar will close/open
-   * only once the response is received from the server
-   */
-  const sidebarFetcher = useFetcher();
-  let optimisticMinimizedSidebar = minimizedSidebar;
-  if (sidebarFetcher.formData) {
-    optimisticMinimizedSidebar =
-      sidebarFetcher.formData.get("minimizeSidebar") === "open";
-  }
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-  return (
-    <>
-      {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
-      <header
-        id="header"
-        className="flex items-center justify-between border-b bg-white p-4 md:hidden"
-      >
-        <Link to="." title="Home" className="block h-[32px]">
-          <ShelfMobileLogo />
-        </Link>
-        <div className="flex items-center space-x-4">
-          <NavLink
-            to="/scanner"
-            title="Scan QR Code"
-            className={({ isActive }) =>
-              tw(
-                "relative flex items-center justify-center px-2 transition",
-                isActive ? "text-primary-600" : "text-gray-500"
-              )
-            }
-          >
-            <ScanQRIcon />
-          </NavLink>
-          <MenuButton />
-        </div>
-      </header>
-
-      <Overlay />
-      <aside
-        id="main-navigation"
-        ref={mainNavigationRef}
-        className={tw(
-          `main-navigation fixed top-0 z-30 flex h-screen max-h-screen flex-col border-r border-gray-200 bg-white p-4 shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),_0px_8px_8px_-4px_rgba(16,24,40,0.03)] transition-all duration-100 ease-linear md:sticky md:left-0 md:px-4 md:py-8 md:shadow-none md:duration-100`,
-          optimisticMinimizedSidebar
-            ? "collapsed-navigation md:w-[82px] md:overflow-hidden"
-            : "md:left-0 md:w-[312px]",
-          isMobileNavOpen ? "left-0 w-[312px] overflow-hidden " : "-left-full"
-        )}
-      >
-        <div className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden">
-          <div className="navigation-header flex items-center justify-between">
-            <Link
-              to="."
-              title="Home"
-              className="logo flex items-center"
-              onClick={toggleMobileNav}
-            >
-              <ShelfSidebarLogo minimized={optimisticMinimizedSidebar} />
-            </Link>
-          </div>
-          <div className="">
-            <OrganizationSelectForm key={currentOrganizationId} />
-          </div>
-          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
-            <MenuItems fetcher={sidebarFetcher} />
-          </div>
-        </div>
-
-        <div className={tw("", workspaceSwitching ? "opacity-50" : "")}>
-          <SidebarBottom user={user} />
-        </div>
-      </aside>
-    </>
-  );
-}
diff --git a/app/hooks/use-main-menu-items.tsx b/app/hooks/use-main-menu-items.tsx
deleted file mode 100644
index bd5abd503..000000000
--- a/app/hooks/use-main-menu-items.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import Icon from "~/components/icons/icon";
-import { useUserData } from "./use-user-data";
-import { useUserRoleHelper } from "./user-user-role-helper";
-
-export function useMainMenuItems() {
-  const user = useUserData();
-  const { isBaseOrSelfService } = useUserRoleHelper();
-
-  let menuItemsTop = [
-    {
-      icon: <Icon icon="graph" />,
-      to: "dashboard",
-      title: "Dashboard",
-    },
-    {
-      icon: <Icon icon="asset" />,
-      to: "assets",
-      title: "Assets",
-    },
-    {
-      icon: <Icon icon="kit" />,
-      to: "kits",
-      title: "Kits",
-    },
-    {
-      icon: <Icon icon="category" />,
-      to: "categories",
-      title: "Categories",
-    },
-    {
-      icon: <Icon icon="tag" />,
-      to: "tags",
-      title: "Tags",
-    },
-    {
-      icon: <Icon icon="location" />,
-      to: "locations",
-      title: "Locations",
-    },
-    {
-      icon: <Icon icon="calendar" />,
-      to: "calendar",
-      title: "Calendar",
-    },
-    {
-      icon: <Icon icon="bookings" />,
-      to: "bookings",
-      title: "Bookings",
-    },
-    {
-      icon: <Icon icon="user" />,
-      to: "/settings/team",
-      title: "Team",
-    },
-  ];
-  let menuItemsBottom = [
-    {
-      icon: <Icon icon="settings" />,
-      to: "settings",
-      title: "Workspace settings",
-      end: true,
-    },
-    {
-      icon: <Icon icon="asset-label" />,
-      to: `https://store.shelf.nu/?ref=app_sidebar`,
-      title: "Buy Asset labels",
-      target: "_blank",
-      isNew: true,
-    },
-    {
-      icon: <Icon icon="scanQR" />,
-      to: "scanner",
-      title: "QR scanner",
-      end: true,
-    },
-  ];
-
-  if (isBaseOrSelfService) {
-    /** Deleting the Dashboard menu item as its not needed for self_service users. */
-    const itemsToRemove = [
-      "dashboard",
-      "categories",
-      "tags",
-      "locations",
-      "settings",
-      "/settings/team",
-    ];
-    menuItemsTop = menuItemsTop.filter(
-      (item) => !itemsToRemove.includes(item.to)
-    );
-    menuItemsBottom = menuItemsBottom.filter(
-      (item) => !itemsToRemove.includes(item.to)
-    );
-  }
-
-  return {
-    menuItemsTop,
-    menuItemsBottom,
-  };
-}
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 7c84d1e38..1b94cee89 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -2,7 +2,7 @@ import { Roles } from "@prisma/client";
 import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
-import { useAtom } from "jotai";
+import {  useAtomValue } from "jotai";
 import { ClientOnly } from "remix-utils/client-only";
 import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ErrorContent } from "~/components/errors";
@@ -136,7 +136,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 export default function App() {
   useCrisp();
   const { disabledTeamOrg, minimizedSidebar } = useLoaderData<typeof loader>();
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
+  const workspaceSwitching = useAtomValue(switchingWorkspaceAtom);
 
   const renderInstallPwaPromptOnMobile = () =>
     // returns InstallPwaPromptModal if the device width is lesser than 640px and the app is being accessed from browser not PWA

From b7c064298d80d79654b1de24fd30d6486108076b Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 18:03:21 +0100
Subject: [PATCH 40/55] refactor(sidebar): fix eslint issues

---
 .../assets/assets-index/asset-index-pagination.tsx   |  7 +++----
 app/components/errors/error-404-handler.tsx          | 12 ++++++------
 app/components/errors/index.tsx                      |  8 ++++----
 app/components/shared/separator.tsx                  |  6 +++---
 app/components/shared/sheet.tsx                      | 10 +++++-----
 app/modules/booking/service.server.ts                |  2 +-
 app/modules/user/service.server.ts                   |  2 +-
 app/root.tsx                                         |  4 +---
 app/routes/_layout+/_layout.tsx                      |  2 +-
 9 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/app/components/assets/assets-index/asset-index-pagination.tsx b/app/components/assets/assets-index/asset-index-pagination.tsx
index 18c53f3c5..abf869ea8 100644
--- a/app/components/assets/assets-index/asset-index-pagination.tsx
+++ b/app/components/assets/assets-index/asset-index-pagination.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { useFetcher, useRouteLoaderData } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { AlertIcon, ChevronRight } from "~/components/icons/library";
+import { useSidebar } from "~/components/layout/sidebar/sidebar";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -16,7 +17,6 @@ import { useAssetIndexViewState } from "~/hooks/use-asset-index-view-state";
 
 import { useViewportHeight } from "~/hooks/use-viewport-height";
 import { useUserRoleHelper } from "~/hooks/user-user-role-helper";
-import type { loader as layoutLoader } from "~/routes/_layout+/_layout";
 import {
   PermissionAction,
   PermissionEntity,
@@ -26,7 +26,6 @@ import { tw } from "~/utils/tw";
 import { Pagination } from "../../list/pagination";
 import { Button } from "../../shared/button";
 import { ButtonGroup } from "../../shared/button-group";
-import { useSidebar } from "~/components/layout/sidebar/sidebar";
 
 export function AssetIndexPagination() {
   const { roles } = useUserRoleHelper();
@@ -56,7 +55,7 @@ export function AssetIndexPagination() {
   return (
     <div
       className={tw(
-        "asset-index-pagination flex flex-col items-center justify-between border-t border-gray-200 bg-white md:flex-row transition-all ease-in-out delay-75",
+        "asset-index-pagination flex flex-col items-center justify-between border-t border-gray-200 bg-white transition-all delay-75 ease-in-out md:flex-row",
         isMd ? "fixed bottom-0 right-0 z-[12]" : "",
         state === "collapsed" ? "lg:left-[48px]" : "lg:left-[256px]"
       )}
diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index 1c709c08a..d16b44837 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -1,9 +1,8 @@
 import { useMemo } from "react";
-import { tw } from "~/utils/tw";
-import { Error404AdditionalData } from "./utils";
-import { Button } from "../shared/button";
 import { useFetcher } from "@remix-run/react";
 import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
+import type { Error404AdditionalData } from "./utils";
 import {
   Select,
   SelectContent,
@@ -11,6 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../forms/select";
+import { Button } from "../shared/button";
 
 export type Error404HandlerProps = {
   className?: string;
@@ -85,10 +85,10 @@ export default function Error404Handler({
               <fetcher.Form
                 action="/api/user/change-current-organization"
                 method="POST"
-                className="flex items-center flex-col"
+                className="flex flex-col items-center"
               >
                 <Select name="organizationId" disabled={disabled}>
-                  <SelectTrigger className="mb-4 px-3.5 py-2 text-left text-gray-500 max-w-80">
+                  <SelectTrigger className="mb-4 max-w-80 px-3.5 py-2 text-left text-gray-500">
                     <SelectValue placeholder="Select workspace to switch" />
                   </SelectTrigger>
                   <SelectContent
@@ -123,7 +123,7 @@ export default function Error404Handler({
         return null;
       }
     }
-  }, [additionalData]);
+  }, [additionalData, disabled, fetcher]);
 
   return (
     <div
diff --git a/app/components/errors/index.tsx b/app/components/errors/index.tsx
index 665b34ca7..e33a07b40 100644
--- a/app/components/errors/index.tsx
+++ b/app/components/errors/index.tsx
@@ -1,10 +1,10 @@
 import { useLocation, useRouteError } from "@remix-run/react";
 
 import { isRouteError } from "~/utils/http";
-import { Button } from "../shared/button";
-import { parse404ErrorData } from "./utils";
-import Error404Handler from "./error-404-handler";
 import { tw } from "~/utils/tw";
+import Error404Handler from "./error-404-handler";
+import { parse404ErrorData } from "./utils";
+import { Button } from "../shared/button";
 
 type ErrorContentProps = { className?: string };
 
@@ -39,7 +39,7 @@ export const ErrorContent = ({ className }: ErrorContentProps) => {
   return (
     <div
       className={tw(
-        "h-screen flex size-full items-center justify-center",
+        "flex size-full h-screen items-center justify-center",
         className
       )}
     >
diff --git a/app/components/shared/separator.tsx b/app/components/shared/separator.tsx
index 2e1417d74..218b281c1 100644
--- a/app/components/shared/separator.tsx
+++ b/app/components/shared/separator.tsx
@@ -1,5 +1,5 @@
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { forwardRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { tw } from "~/utils/tw";
 
 const Separator = forwardRef<
@@ -15,8 +15,8 @@ const Separator = forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={tw(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className
       )}
       {...props}
diff --git a/app/components/shared/sheet.tsx b/app/components/shared/sheet.tsx
index 033a82aaa..df3630334 100644
--- a/app/components/shared/sheet.tsx
+++ b/app/components/shared/sheet.tsx
@@ -1,6 +1,6 @@
+import { forwardRef } from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { forwardRef } from "react";
 import { tw } from "~/utils/tw";
 import { XIcon } from "../icons/library";
 
@@ -61,8 +61,8 @@ const SheetContent = forwardRef<
       className={tw(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <XIcon className="h-4 w-4" />
+      <SheetPrimitive.Close className="ring-offset-background data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <XIcon className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
       {children}
@@ -105,7 +105,7 @@ const SheetTitle = forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={tw("text-lg font-semibold text-foreground", className)}
+    className={tw("text-foreground text-lg font-semibold", className)}
     {...props}
   />
 ));
@@ -117,7 +117,7 @@ const SheetDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={tw("text-sm text-muted-foreground", className)}
+    className={tw("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/app/modules/booking/service.server.ts b/app/modules/booking/service.server.ts
index bcee14968..5eba8325f 100644
--- a/app/modules/booking/service.server.ts
+++ b/app/modules/booking/service.server.ts
@@ -20,6 +20,7 @@ import { getCurrentSearchParams } from "~/utils/http.server";
 import { ALL_SELECTED_KEY } from "~/utils/list";
 import { Logger } from "~/utils/logger";
 import { scheduler } from "~/utils/scheduler.server";
+import type { MergeInclude } from "~/utils/utils";
 import { bookingSchedulerEventsEnum, schedulerKeys } from "./constants";
 import {
   assetReservedEmailContent,
@@ -34,7 +35,6 @@ import { getBookingWhereInput } from "./utils.server";
 import { createNotes } from "../note/service.server";
 import { getOrganizationAdminsEmails } from "../organization/service.server";
 import { getUserByID } from "../user/service.server";
-import { MergeInclude } from "~/utils/utils";
 
 const label: ErrorLabel = "Booking";
 
diff --git a/app/modules/user/service.server.ts b/app/modules/user/service.server.ts
index 5846962f7..598fe5139 100644
--- a/app/modules/user/service.server.ts
+++ b/app/modules/user/service.server.ts
@@ -33,13 +33,13 @@ import {
   parseFileFormData,
 } from "~/utils/storage.server";
 import { randomUsernameFromEmail } from "~/utils/user";
+import type { MergeInclude } from "~/utils/utils";
 import { INCLUDE_SSO_DETAILS_VIA_USER_ORGANIZATION } from "./fields";
 import { type UpdateUserPayload, USER_STATIC_INCLUDE } from "./types";
 import { defaultFields } from "../asset-index-settings/helpers";
 import { defaultUserCategories } from "../category/default-categories";
 import { getOrganizationsBySsoDomain } from "../organization/service.server";
 import { createTeamMember } from "../team-member/service.server";
-import { MergeInclude } from "~/utils/utils";
 
 const label: ErrorLabel = "User";
 
diff --git a/app/root.tsx b/app/root.tsx
index b170218ae..b904f89d9 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,7 +7,6 @@ import type {
 } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
-  Link,
   Links,
   Meta,
   Outlet,
@@ -19,8 +18,8 @@ import {
 import { withSentry } from "@sentry/remix";
 import nProgressStyles from "nprogress/nprogress.css?url";
 import { ErrorContent } from "./components/errors";
-import { HomeIcon } from "./components/icons/library";
 import BlockInteractions from "./components/layout/maintenance-mode";
+import { SidebarTrigger } from "./components/layout/sidebar/sidebar";
 import { Clarity } from "./components/marketing/clarity";
 import { config } from "./config/shelf.config";
 import { useNprogress } from "./hooks/use-nprogress";
@@ -34,7 +33,6 @@ import { data } from "./utils/http.server";
 import { useNonce } from "./utils/nonce-provider";
 import { PwaManagerProvider } from "./utils/pwa-manager";
 import { splashScreenLinks } from "./utils/splash-screen-links";
-import { SidebarTrigger } from "./components/layout/sidebar/sidebar";
 
 export interface RootData {
   env: typeof getBrowserEnv;
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 1b94cee89..337e8379e 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -2,7 +2,7 @@ import { Roles } from "@prisma/client";
 import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
-import {  useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { ClientOnly } from "remix-utils/client-only";
 import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ErrorContent } from "~/components/errors";

From 6f830a5b8242f9a1cc1bbf8e5a09ebbce31a231c Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 18:46:02 +0100
Subject: [PATCH 41/55] refactor(sidebar): adjust padding on assets index page
 and add label in sidebar

---
 app/components/layout/sidebar/sidebar-nav.tsx | 161 +++++++++++-------
 app/hooks/use-sidebar-nav-items.tsx           |  15 +-
 app/routes/_layout+/assets._index.tsx         |  11 +-
 3 files changed, 115 insertions(+), 72 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index c8f592328..6582584ab 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { NavLink, useMatches } from "@remix-run/react";
 import Icon from "~/components/icons/icon";
@@ -10,6 +11,7 @@ import type { NavItem } from "~/hooks/use-sidebar-nav-items";
 import { tw } from "~/utils/tw";
 import {
   SidebarGroup,
+  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -31,82 +33,113 @@ export default function SidebarNav({
 }: SidebarNavProps) {
   const matches = useMatches();
 
-  function isRouteActive(route: string) {
-    const matchesRoutes = matches.map((match) => match.pathname);
-    return matchesRoutes.some((matchRoute) => matchRoute.includes(route));
-  }
+  const isRouteActive = useCallback(
+    (route: string) => {
+      const matchesRoutes = matches.map((match) => match.pathname);
+      return matchesRoutes.some((matchRoute) => matchRoute.includes(route));
+    },
+    [matches]
+  );
 
-  return (
-    <SidebarGroup className={className} style={style}>
-      <SidebarMenu>
-        {items.map((item) => {
-          if (item.type === "parent") {
-            return (
-              <Collapsible
-                key={item.title}
-                asChild
-                className="group/collapsible"
-                defaultOpen={item.defaultOpen}
-              >
-                <SidebarMenuItem key={item.title}>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuButton tooltip={item.title}>
-                      <Icon
-                        size="xs"
-                        icon={item.icon}
-                        className="text-gray-600"
-                      />
-                      <span className="font-semibold">{item.title}</span>
-                      <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.children.map((child) => {
-                        const isChildActive = isRouteActive(child.to);
+  const isAnyRouteActive = useCallback(
+    (routes: string[]) => routes.some(isRouteActive),
+    [isRouteActive]
+  );
 
-                        return (
-                          <SidebarMenuSubItem key={child.title}>
-                            <SidebarMenuSubButton asChild>
-                              <NavLink
-                                to={child.to}
-                                target={child.target}
-                                className={tw(
-                                  "font-medium hover:bg-gray-100",
-                                  isChildActive && "bg-gray-100"
-                                )}
-                              >
-                                {child.title}
-                              </NavLink>
-                            </SidebarMenuSubButton>
-                          </SidebarMenuSubItem>
-                        );
-                      })}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </SidebarMenuItem>
-              </Collapsible>
-            );
-          }
+  const renderNavItem = useCallback(
+    (navItem: NavItem) => {
+      switch (navItem.type) {
+        case "parent": {
+          const isAnyChildActive = isAnyRouteActive(
+            navItem.children.map((child) => child.to)
+          );
+
+          return (
+            <Collapsible
+              key={navItem.title}
+              asChild
+              className="group/collapsible"
+              defaultOpen={isAnyChildActive}
+            >
+              <SidebarMenuItem key={navItem.title}>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton tooltip={navItem.title}>
+                    <Icon
+                      size="xs"
+                      icon={navItem.icon}
+                      className="text-gray-600"
+                    />
+                    <span className="font-semibold">{navItem.title}</span>
+                    <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {navItem.children.map((child) => {
+                      const isChildActive = isRouteActive(child.to);
 
-          const isActive = isRouteActive(item.to);
+                      return (
+                        <SidebarMenuSubItem key={child.title}>
+                          <SidebarMenuSubButton asChild>
+                            <NavLink
+                              to={child.to}
+                              target={child.target}
+                              className={tw(
+                                "font-medium hover:bg-gray-100",
+                                isChildActive && "bg-gray-100"
+                              )}
+                            >
+                              {child.title}
+                            </NavLink>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      );
+                    })}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          );
+        }
+
+        case "child": {
+          const isActive = isRouteActive(navItem.to);
 
           return (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild tooltip={item.title}>
+            <SidebarMenuItem key={navItem.title}>
+              <SidebarMenuButton asChild tooltip={navItem.title}>
                 <NavLink
-                  to={item.to}
-                  target={item.target}
+                  to={navItem.to}
+                  target={navItem.target}
                   className={tw("font-semibold", isActive && "bg-gray-100")}
                 >
-                  <Icon size="xs" icon={item.icon} className="text-gray-600" />
-                  <span>{item.title}</span>
+                  <Icon
+                    size="xs"
+                    icon={navItem.icon}
+                    className="text-gray-600"
+                  />
+                  <span>{navItem.title}</span>
                 </NavLink>
               </SidebarMenuButton>
             </SidebarMenuItem>
           );
-        })}
-      </SidebarMenu>
+        }
+
+        case "label": {
+          return <SidebarGroupLabel>{navItem.title}</SidebarGroupLabel>;
+        }
+
+        default: {
+          return null;
+        }
+      }
+    },
+    [isAnyRouteActive, isRouteActive]
+  );
+
+  return (
+    <SidebarGroup className={className} style={style}>
+      <SidebarMenu>{items.map(renderNavItem)}</SidebarMenu>
     </SidebarGroup>
   );
 }
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 52af46a93..c707ba0b4 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -5,7 +5,6 @@ type BaseNavItem = {
   title: string;
   hidden?: boolean;
   icon: IconType;
-  defaultOpen?: boolean;
 };
 
 type ChildNavItem = BaseNavItem & {
@@ -19,12 +18,20 @@ type ParentNavItem = BaseNavItem & {
   children: Omit<ChildNavItem, "type" | "icon">[];
 };
 
-export type NavItem = ChildNavItem | ParentNavItem;
+type LabelNavItem = Omit<BaseNavItem, "icon"> & {
+  type: "label";
+};
+
+export type NavItem = ChildNavItem | ParentNavItem | LabelNavItem;
 
 export function useSidebarNavItems() {
   const { isBaseOrSelfService } = useUserRoleHelper();
 
   const topMenuItems: NavItem[] = [
+    {
+      type: "label",
+      title: "Asset management",
+    },
     {
       type: "child",
       title: "Dashboard",
@@ -82,6 +89,10 @@ export function useSidebarNavItems() {
         },
       ],
     },
+    {
+      type: "label",
+      title: "Organization",
+    },
     {
       type: "parent",
       title: "Team",
diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
index 0b5dec9de..12765b8ae 100644
--- a/app/routes/_layout+/assets._index.tsx
+++ b/app/routes/_layout+/assets._index.tsx
@@ -329,23 +329,22 @@ export const AssetsList = ({
     <div
       className={tw(
         "flex flex-col",
-        modeIsSimple ? "gap-4 pt-4" : "gap-2 pt-2"
+        modeIsSimple ? "gap-4 pb-5 pt-4" : "gap-2 py-2"
       )}
     >
-      {isSwappingMode ? (
+      <When truthy={!!isSwappingMode}>
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ delay: 0.2 }}
-          className="absolute inset-[3px] z-[11] flex flex-col items-center border border-gray-200 bg-gray-25/95 pt-[200px]"
+          className="absolute inset-0 z-[11] flex flex-col items-center justify-center border border-gray-200 bg-gray-25/95 pt-[200px]"
         >
           <Spinner />
           <p className="mt-2">Changing mode...</p>
         </motion.div>
-      ) : (
-        <></>
-      )}
+      </When>
+
       {!isMd && !modeIsSimple ? (
         <AdvancedModeMobileFallback />
       ) : (

From 359ae323285526a2562422d8f6fa9aef4ccbac8d Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 19:16:24 +0100
Subject: [PATCH 42/55] refactor(sidebar): move question/feedback from dropdown
 to sidebar

---
 app/components/layout/sidebar/sidebar-nav.tsx | 20 +++++++++++++++-
 .../layout/sidebar/sidebar-user-menu.tsx      | 23 +------------------
 app/hooks/use-sidebar-nav-items.tsx           | 20 +++++++++++++++-
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 6582584ab..efff96213 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -126,7 +126,25 @@ export default function SidebarNav({
         }
 
         case "label": {
-          return <SidebarGroupLabel>{navItem.title}</SidebarGroupLabel>;
+          return (
+            <SidebarGroupLabel key={navItem.title}>
+              {navItem.title}
+            </SidebarGroupLabel>
+          );
+        }
+
+        case "button": {
+          return (
+            <SidebarMenuItem key={navItem.title} onClick={navItem.onClick}>
+              <SidebarMenuButton
+                className="font-medium"
+                tooltip={navItem.title}
+              >
+                <Icon size="xs" icon={navItem.icon} className="text-gray-600" />
+                <span>{navItem.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
         }
 
         default: {
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index 9be5b1baf..b26afc063 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { useLoaderData } from "@remix-run/react";
 import { Form } from "~/components/custom-form";
-import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
-import { CrispButton } from "~/components/marketing/crisp";
+import { ChevronRight } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import {
   DropdownMenu,
@@ -86,26 +85,6 @@ export default function SidebarUserMenu() {
                 Account settings
               </Button>
             </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={(e) => e.preventDefault()}
-              className="border-b border-gray-200 p-0"
-            >
-              <CrispButton
-                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                variant="link"
-                width="full"
-                title="Questions/Feedback"
-              >
-                <span className="flex items-center justify-start gap-2">
-                  <i className="icon text-gray-700">
-                    <QuestionsIcon />
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    Questions/Feedback
-                  </span>
-                </span>
-              </CrispButton>
-            </DropdownMenuItem>
             <DropdownMenuItem
               className="p-0"
               onSelect={(e) => e.preventDefault()}
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index c707ba0b4..7c590187e 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -1,3 +1,4 @@
+import { Crisp } from "crisp-sdk-web";
 import type { IconType } from "~/components/shared/icons-map";
 import { useUserRoleHelper } from "./user-user-role-helper";
 
@@ -22,7 +23,16 @@ type LabelNavItem = Omit<BaseNavItem, "icon"> & {
   type: "label";
 };
 
-export type NavItem = ChildNavItem | ParentNavItem | LabelNavItem;
+type ButtonNavItem = BaseNavItem & {
+  type: "button";
+  onClick: () => void;
+};
+
+export type NavItem =
+  | ChildNavItem
+  | ParentNavItem
+  | LabelNavItem
+  | ButtonNavItem;
 
 export function useSidebarNavItems() {
   const { isBaseOrSelfService } = useUserRoleHelper();
@@ -145,6 +155,14 @@ export function useSidebarNavItems() {
       to: "/scanner",
       icon: "scanQR",
     },
+    {
+      type: "button",
+      title: "Questions/Feedback",
+      icon: "question",
+      onClick: () => {
+        Crisp.chat.open();
+      },
+    },
   ];
 
   return {

From 0c95a51554fc7db69a350165b385c8c7c3f6e2a3 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 19:23:21 +0100
Subject: [PATCH 43/55] refactor(sidebar): navigating to first child route on
 parent button click

---
 app/components/layout/sidebar/sidebar-nav.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index efff96213..1d3204b3d 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { NavLink, useMatches } from "@remix-run/react";
+import { NavLink, useMatches, useNavigate } from "@remix-run/react";
+import invariant from "tiny-invariant";
 import Icon from "~/components/icons/icon";
 import {
   Collapsible,
@@ -32,6 +33,7 @@ export default function SidebarNav({
   items,
 }: SidebarNavProps) {
   const matches = useMatches();
+  const navigate = useNavigate();
 
   const isRouteActive = useCallback(
     (route: string) => {
@@ -50,6 +52,12 @@ export default function SidebarNav({
     (navItem: NavItem) => {
       switch (navItem.type) {
         case "parent": {
+          const firstChildRoute = navItem.children[0];
+          invariant(
+            typeof firstChildRoute !== "undefined",
+            "'parent' nav item should have at lease one child route"
+          );
+
           const isAnyChildActive = isAnyRouteActive(
             navItem.children.map((child) => child.to)
           );
@@ -63,7 +71,12 @@ export default function SidebarNav({
             >
               <SidebarMenuItem key={navItem.title}>
                 <CollapsibleTrigger asChild>
-                  <SidebarMenuButton tooltip={navItem.title}>
+                  <SidebarMenuButton
+                    tooltip={navItem.title}
+                    onClick={() => {
+                      navigate(firstChildRoute.to);
+                    }}
+                  >
                     <Icon
                       size="xs"
                       icon={navItem.icon}
@@ -137,7 +150,7 @@ export default function SidebarNav({
           return (
             <SidebarMenuItem key={navItem.title} onClick={navItem.onClick}>
               <SidebarMenuButton
-                className="font-medium"
+                className="font-semibold"
                 tooltip={navItem.title}
               >
                 <Icon size="xs" icon={navItem.icon} className="text-gray-600" />

From f53eb0c324d915bff62ea5454b2b1b56e0f1dfee Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 19:49:23 +0100
Subject: [PATCH 44/55] refactor(sidebar): replace all sidebar icons with
 lucide-icons

---
 app/components/layout/sidebar/sidebar-nav.tsx | 15 ++----
 .../layout/sidebar/sidebar-user-menu.tsx      | 46 ++++++++-----------
 app/hooks/use-sidebar-nav-items.tsx           | 46 ++++++++++++-------
 3 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index ff3572640..69c98a972 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -2,7 +2,6 @@ import { useCallback } from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { NavLink, useMatches, useNavigate } from "@remix-run/react";
 import invariant from "tiny-invariant";
-import Icon from "~/components/icons/icon";
 import {
   Collapsible,
   CollapsibleContent,
@@ -77,11 +76,7 @@ export default function SidebarNav({
                       navigate(firstChildRoute.to);
                     }}
                   >
-                    <Icon
-                      size="xs"
-                      icon={navItem.icon}
-                      className="text-gray-600"
-                    />
+                    <navItem.Icon className="size-4 text-gray-600" />
                     <span className="font-semibold">{navItem.title}</span>
                     <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
                   </SidebarMenuButton>
@@ -126,11 +121,7 @@ export default function SidebarNav({
                   target={navItem.target}
                   className={tw("font-semibold", isActive && "bg-gray-100")}
                 >
-                  <Icon
-                    size="xs"
-                    icon={navItem.icon}
-                    className="text-gray-600"
-                  />
+                  <navItem.Icon className="size-4 text-gray-600" />
                   <span>{navItem.title}</span>
                 </NavLink>
               </SidebarMenuButton>
@@ -153,7 +144,7 @@ export default function SidebarNav({
                 className="font-semibold"
                 tooltip={navItem.title}
               >
-                <Icon size="xs" icon={navItem.icon} className="text-gray-600" />
+                <navItem.Icon className="size-4 text-gray-600" />
                 <span>{navItem.title}</span>
               </SidebarMenuButton>
             </SidebarMenuItem>
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
index b26afc063..c74634649 100644
--- a/app/components/layout/sidebar/sidebar-user-menu.tsx
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -1,8 +1,7 @@
 import { useState } from "react";
-import { useLoaderData } from "@remix-run/react";
-import { Form } from "~/components/custom-form";
+import { NavLink, useFetcher, useLoaderData } from "@remix-run/react";
+import { LogOutIcon, UserRoundIcon } from "lucide-react";
 import { ChevronRight } from "~/components/icons/library";
-import { Button } from "~/components/shared/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,11 +23,16 @@ export default function SidebarUserMenu() {
   const { user } = useLoaderData<typeof loader>();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { isMobile } = useSidebar();
+  const fetcher = useFetcher();
 
   function closeDropdown() {
     setIsDropdownOpen(false);
   }
 
+  function logOut() {
+    fetcher.submit(null, { action: "/logout", method: "POST" });
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
@@ -73,34 +77,22 @@ export default function SidebarUserMenu() {
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="border-b border-gray-200 p-0">
-              <Button
-                to="/account-details"
-                icon="profile"
-                role="link"
-                variant="link"
-                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                onClick={closeDropdown}
-              >
+            <DropdownMenuItem
+              asChild
+              className="cursor-pointer gap-2 border-b border-gray-200 p-2"
+              onClick={closeDropdown}
+            >
+              <NavLink to="/account-details">
+                <UserRoundIcon className="size-4" />
                 Account settings
-              </Button>
+              </NavLink>
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="p-0"
-              onSelect={(e) => e.preventDefault()}
+              className="mt-1 cursor-pointer gap-2 border-b border-gray-200 p-2"
+              onSelect={logOut}
             >
-              <Form action="/logout" method="post" className="w-full">
-                <Button
-                  icon="logout"
-                  role="link"
-                  type="submit"
-                  variant="link"
-                  className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                  width="full"
-                >
-                  Log Out
-                </Button>
-              </Form>
+              <LogOutIcon className="size-4" />
+              Log Out
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 7c590187e..2ebf1bad4 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -1,11 +1,25 @@
 import { Crisp } from "crisp-sdk-web";
-import type { IconType } from "~/components/shared/icons-map";
+import {
+  BoxesIcon,
+  BriefcaseConveyorBeltIcon,
+  CalendarRangeIcon,
+  ChartNoAxesCombinedIcon,
+  MapPinIcon,
+  MessageCircleIcon,
+  PackageOpenIcon,
+  QrCodeIcon,
+  ScanQrCodeIcon,
+  SettingsIcon,
+  TagsIcon,
+  UsersRoundIcon,
+  type LucideIcon,
+} from "lucide-react";
 import { useUserRoleHelper } from "./user-user-role-helper";
 
 type BaseNavItem = {
   title: string;
   hidden?: boolean;
-  icon: IconType;
+  Icon: LucideIcon;
 };
 
 type ChildNavItem = BaseNavItem & {
@@ -16,10 +30,10 @@ type ChildNavItem = BaseNavItem & {
 
 type ParentNavItem = BaseNavItem & {
   type: "parent";
-  children: Omit<ChildNavItem, "type" | "icon">[];
+  children: Omit<ChildNavItem, "type" | "Icon">[];
 };
 
-type LabelNavItem = Omit<BaseNavItem, "icon"> & {
+type LabelNavItem = Omit<BaseNavItem, "Icon"> & {
   type: "label";
 };
 
@@ -46,27 +60,27 @@ export function useSidebarNavItems() {
       type: "child",
       title: "Dashboard",
       to: "/dashboard",
-      icon: "graph",
+      Icon: ChartNoAxesCombinedIcon,
       hidden: isBaseOrSelfService,
     },
     {
       type: "child",
       title: "Assets",
       to: "/assets",
-      icon: "asset",
+      Icon: PackageOpenIcon,
     },
     {
       type: "child",
       title: "Kits",
       to: "/kits",
-      icon: "kit",
+      Icon: BriefcaseConveyorBeltIcon,
       hidden: isBaseOrSelfService,
     },
     {
       type: "child",
       title: "Categories",
       to: "/categories",
-      icon: "category",
+      Icon: BoxesIcon,
       hidden: isBaseOrSelfService,
     },
 
@@ -74,20 +88,20 @@ export function useSidebarNavItems() {
       type: "child",
       title: "Tags",
       to: "/tags",
-      icon: "tag",
+      Icon: TagsIcon,
       hidden: isBaseOrSelfService,
     },
     {
       type: "child",
       title: "Locations",
       to: "/locations",
-      icon: "location",
+      Icon: MapPinIcon,
       hidden: isBaseOrSelfService,
     },
     {
       type: "parent",
       title: "Bookings",
-      icon: "bookings",
+      Icon: CalendarRangeIcon,
       children: [
         {
           title: "View Bookings",
@@ -106,7 +120,7 @@ export function useSidebarNavItems() {
     {
       type: "parent",
       title: "Team",
-      icon: "user",
+      Icon: UsersRoundIcon,
       hidden: isBaseOrSelfService,
       children: [
         {
@@ -122,7 +136,7 @@ export function useSidebarNavItems() {
     {
       type: "parent",
       title: "Workspace settings",
-      icon: "settings",
+      Icon: SettingsIcon,
       hidden: isBaseOrSelfService,
       children: [
         {
@@ -146,19 +160,19 @@ export function useSidebarNavItems() {
       type: "child",
       title: "Asset labels",
       to: `https://store.shelf.nu/?ref=shelf_webapp_sidebar`,
-      icon: "asset-label",
+      Icon: QrCodeIcon,
       target: "_blank",
     },
     {
       type: "child",
       title: "QR Scanner",
       to: "/scanner",
-      icon: "scanQR",
+      Icon: ScanQrCodeIcon,
     },
     {
       type: "button",
       title: "Questions/Feedback",
-      icon: "question",
+      Icon: MessageCircleIcon,
       onClick: () => {
         Crisp.chat.open();
       },

From e1b3c2007c0092b1eefcd29017ac3820e1d83abf Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 29 Nov 2024 21:16:58 +0100
Subject: [PATCH 45/55] refactor(sidebar): handling disabled state in sidebar
 menu

---
 app/components/layout/sidebar/sidebar-nav.tsx | 48 +++++++++++++------
 app/components/layout/sidebar/sidebar.tsx     |  4 +-
 app/components/when/when.tsx                  |  5 +-
 app/hooks/use-sidebar-nav-items.tsx           | 45 +++++++++++++++++
 4 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 69c98a972..44fab1468 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { Fragment, useCallback } from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { NavLink, useMatches, useNavigate } from "@remix-run/react";
 import invariant from "tiny-invariant";
@@ -47,6 +47,18 @@ export default function SidebarNav({
     [isRouteActive]
   );
 
+  const renderTooltopContent = useCallback((navItem: NavItem) => {
+    if (typeof navItem.disabled === "boolean" && navItem.disabled) {
+      return `${navItem.title} is disabled`;
+    }
+
+    if (typeof navItem.disabled === "object") {
+      return { children: navItem.disabled.reason };
+    }
+
+    return navItem.title;
+  }, []);
+
   const renderNavItem = useCallback(
     (navItem: NavItem) => {
       switch (navItem.type) {
@@ -63,17 +75,19 @@ export default function SidebarNav({
 
           return (
             <Collapsible
-              key={navItem.title}
               asChild
               className="group/collapsible"
               defaultOpen={isAnyChildActive}
             >
-              <SidebarMenuItem key={navItem.title}>
+              <SidebarMenuItem key={navItem.title} className="z-50">
                 <CollapsibleTrigger asChild>
                   <SidebarMenuButton
-                    tooltip={navItem.title}
+                    disabled={!!navItem.disabled}
+                    tooltip={renderTooltopContent(navItem)}
                     onClick={() => {
-                      navigate(firstChildRoute.to);
+                      if (!navItem.disabled) {
+                        navigate(firstChildRoute.to);
+                      }
                     }}
                   >
                     <navItem.Icon className="size-4 text-gray-600" />
@@ -114,8 +128,12 @@ export default function SidebarNav({
           const isActive = isRouteActive(navItem.to);
 
           return (
-            <SidebarMenuItem key={navItem.title}>
-              <SidebarMenuButton asChild tooltip={navItem.title}>
+            <SidebarMenuItem className="z-50">
+              <SidebarMenuButton
+                asChild
+                disabled={!!navItem.disabled}
+                tooltip={renderTooltopContent(navItem)}
+              >
                 <NavLink
                   to={navItem.to}
                   target={navItem.target}
@@ -130,16 +148,12 @@ export default function SidebarNav({
         }
 
         case "label": {
-          return (
-            <SidebarGroupLabel key={navItem.title}>
-              {navItem.title}
-            </SidebarGroupLabel>
-          );
+          return <SidebarGroupLabel>{navItem.title}</SidebarGroupLabel>;
         }
 
         case "button": {
           return (
-            <SidebarMenuItem key={navItem.title} onClick={navItem.onClick}>
+            <SidebarMenuItem onClick={navItem.onClick}>
               <SidebarMenuButton
                 className="font-semibold"
                 tooltip={navItem.title}
@@ -156,12 +170,16 @@ export default function SidebarNav({
         }
       }
     },
-    [isAnyRouteActive, isRouteActive, navigate]
+    [isAnyRouteActive, isRouteActive, navigate, renderTooltopContent]
   );
 
   return (
     <SidebarGroup className={className} style={style}>
-      <SidebarMenu>{items.map(renderNavItem)}</SidebarMenu>
+      <SidebarMenu>
+        {items.map((navItem, i) => (
+          <Fragment key={i}>{renderNavItem(navItem)}</Fragment>
+        ))}
+      </SidebarMenu>
     </SidebarGroup>
   );
 }
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index d626a9ba1..9685e72f0 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -524,7 +524,7 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding]  focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding]  focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -595,7 +595,7 @@ const SidebarMenuButton = forwardRef<
         <TooltipContent
           side="right"
           align="center"
-          hidden={state !== "collapsed" || isMobile}
+          hidden={(state !== "collapsed" && !props.disabled) || isMobile}
           {...tooltip}
         />
       </Tooltip>
diff --git a/app/components/when/when.tsx b/app/components/when/when.tsx
index 8c8207e00..d15f08d79 100644
--- a/app/components/when/when.tsx
+++ b/app/components/when/when.tsx
@@ -1,8 +1,9 @@
 type Props = {
   truthy: boolean | null | undefined;
   children: React.ReactNode;
+  fallback?: React.ReactNode;
 };
 
-export default function When({ truthy, children }: Props) {
-  return truthy ? children : null;
+export default function When({ truthy, children, fallback }: Props) {
+  return truthy ? children : fallback ? fallback : null;
 }
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 2ebf1bad4..852b9db3b 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -1,8 +1,11 @@
+import { useMemo } from "react";
+import { useLoaderData } from "@remix-run/react";
 import { Crisp } from "crisp-sdk-web";
 import {
   BoxesIcon,
   BriefcaseConveyorBeltIcon,
   CalendarRangeIcon,
+  ChartLineIcon,
   ChartNoAxesCombinedIcon,
   MapPinIcon,
   MessageCircleIcon,
@@ -14,12 +17,16 @@ import {
   UsersRoundIcon,
   type LucideIcon,
 } from "lucide-react";
+import { UpgradeMessage } from "~/components/marketing/upgrade-message";
+import When from "~/components/when/when";
+import type { loader } from "~/routes/_layout+/_layout";
 import { useUserRoleHelper } from "./user-user-role-helper";
 
 type BaseNavItem = {
   title: string;
   hidden?: boolean;
   Icon: LucideIcon;
+  disabled?: boolean | { reason: React.ReactNode };
 };
 
 type ChildNavItem = BaseNavItem & {
@@ -49,9 +56,44 @@ export type NavItem =
   | ButtonNavItem;
 
 export function useSidebarNavItems() {
+  const { isAdmin, canUseBookings, subscription } =
+    useLoaderData<typeof loader>();
   const { isBaseOrSelfService } = useUserRoleHelper();
 
+  const bookingDisabled = useMemo(() => {
+    if (canUseBookings) {
+      return false;
+    }
+
+    return {
+      reason: (
+        <div>
+          <h5>Disabled</h5>
+          <p>
+            Booking is a premium feature only available for Team workspaces.
+          </p>
+
+          <When truthy={!!subscription} fallback={<UpgradeMessage />}>
+            <p>Please switch to your team workspace to access this feature.</p>
+          </When>
+        </div>
+      ),
+    };
+  }, [canUseBookings, subscription]);
+
   const topMenuItems: NavItem[] = [
+    {
+      type: "label",
+      title: "Admin",
+      hidden: !isAdmin,
+    },
+    {
+      type: "child",
+      title: "Admin Dashboard",
+      to: "/admin-dashboard/users",
+      Icon: ChartLineIcon,
+      hidden: !isAdmin,
+    },
     {
       type: "label",
       title: "Asset management",
@@ -102,14 +144,17 @@ export function useSidebarNavItems() {
       type: "parent",
       title: "Bookings",
       Icon: CalendarRangeIcon,
+      disabled: bookingDisabled,
       children: [
         {
           title: "View Bookings",
           to: "/bookings",
+          disabled: bookingDisabled,
         },
         {
           title: "Calendar",
           to: "/calendar",
+          disabled: bookingDisabled,
         },
       ],
     },

From a3627f29a7e1a0818c5d4cd136f40016202f4b5a Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Mon, 2 Dec 2024 17:13:59 +0200
Subject: [PATCH 46/55] styling adjustments

---
 app/components/layout/sidebar/sidebar-nav.tsx | 32 +++++++++++++------
 app/hooks/use-sidebar-nav-items.tsx           |  9 ------
 package-lock.json                             | 24 --------------
 3 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 44fab1468..a40b973f8 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -84,11 +84,6 @@ export default function SidebarNav({
                   <SidebarMenuButton
                     disabled={!!navItem.disabled}
                     tooltip={renderTooltopContent(navItem)}
-                    onClick={() => {
-                      if (!navItem.disabled) {
-                        navigate(firstChildRoute.to);
-                      }
-                    }}
                   >
                     <navItem.Icon className="size-4 text-gray-600" />
                     <span className="font-semibold">{navItem.title}</span>
@@ -108,7 +103,8 @@ export default function SidebarNav({
                               target={child.target}
                               className={tw(
                                 "font-medium hover:bg-gray-100",
-                                isChildActive && "bg-gray-100"
+                                isChildActive &&
+                                  "bg-transparent font-bold !text-primary"
                               )}
                             >
                               {child.title}
@@ -137,9 +133,17 @@ export default function SidebarNav({
                 <NavLink
                   to={navItem.to}
                   target={navItem.target}
-                  className={tw("font-semibold", isActive && "bg-gray-100")}
+                  className={tw(
+                    "font-semibold",
+                    isActive && "bg-transparent font-bold text-primary"
+                  )}
                 >
-                  <navItem.Icon className="size-4 text-gray-600" />
+                  <navItem.Icon
+                    className={tw(
+                      "size-4",
+                      isActive ? "text-primary" : "text-gray-600"
+                    )}
+                  />
                   <span>{navItem.title}</span>
                 </NavLink>
               </SidebarMenuButton>
@@ -148,7 +152,17 @@ export default function SidebarNav({
         }
 
         case "label": {
-          return <SidebarGroupLabel>{navItem.title}</SidebarGroupLabel>;
+          return (
+            <SidebarGroupLabel
+              className={
+                navItem.title.toLowerCase() === "organization"
+                  ? "mt-4"
+                  : undefined
+              }
+            >
+              {navItem.title}
+            </SidebarGroupLabel>
+          );
         }
 
         case "button": {
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 852b9db3b..0691bb014 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -82,11 +82,6 @@ export function useSidebarNavItems() {
   }, [canUseBookings, subscription]);
 
   const topMenuItems: NavItem[] = [
-    {
-      type: "label",
-      title: "Admin",
-      hidden: !isAdmin,
-    },
     {
       type: "child",
       title: "Admin Dashboard",
@@ -192,10 +187,6 @@ export function useSidebarNavItems() {
           title: "Custom fields",
           to: "/settings/custom-fields",
         },
-        {
-          title: "Team",
-          to: "/settings/team",
-        },
       ],
     },
   ];
diff --git a/package-lock.json b/package-lock.json
index 806624980..dd3d3d913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,6 @@
         "changedpi": "^1.0.4",
         "chardet": "^2.0.0",
         "class-variance-authority": "^0.7.0",
-        "cmdk": "^1.0.4",
         "cookie": "^0.7.0",
         "crisp-sdk-web": "^1.0.21",
         "csv-parse": "^5.5.3",
@@ -9554,21 +9553,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/cmdk": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz",
-      "integrity": "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==",
-      "dependencies": {
-        "@radix-ui/react-dialog": "^1.1.2",
-        "@radix-ui/react-id": "^1.1.0",
-        "@radix-ui/react-primitive": "^2.0.0",
-        "use-sync-external-store": "^1.2.2"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -21927,14 +21911,6 @@
         }
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
-      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",

From 6c5659bedb33913fc02dab51e69f8406a41a5e7a Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Tue, 3 Dec 2024 18:27:56 +0100
Subject: [PATCH 47/55] fix merge conflicts

---
 app/components/errors/error-404-handler.tsx |  4 +---
 app/components/errors/utils.ts              | 14 +++++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index 1a28cbf8e..732e275e9 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -36,12 +36,11 @@ export default function Error404Handler({
       case "booking":
       case "customField": {
         const modelLabel = getModelLabelForEnumValue(additionalData.model);
-        
+
         return (
           <div className="flex flex-col items-center text-center">
             <div className="w-full md:max-w-screen-sm">
               <h2 className="mb-2">
-
                 <span className="capitalize">{modelLabel}</span> belongs to
                 another workspace.
               </h2>
@@ -74,7 +73,6 @@ export default function Error404Handler({
         );
       }
 
-
       /**
        * User can have a teamMember in multiple organizations, so in this case we
        * show a Select to choose from the organization and switch to that.
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index c8d95040f..2d5b47062 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -48,11 +48,13 @@ export const error404AdditionalDataSchema = z.discriminatedUnion("model", [
 /**
  * Type definition for the 404 error additional data structure
  */
-export type Error404AdditionalData = z.infer<typeof error404AdditionalDataSchema>;
+export type Error404AdditionalData = z.infer<
+  typeof error404AdditionalDataSchema
+>;
 
 /**
  * Parses and validates the structure of a 404 error response.
- * 
+ *
  * @param response - The unknown response to be parsed
  * @returns An object indicating whether it's a valid 404 error and its additional data
  *          If it's not a valid 404 error or parsing fails, returns {isError404: false, additionalData: null}
@@ -60,7 +62,9 @@ export type Error404AdditionalData = z.infer<typeof error404AdditionalDataSchema
  */
 export function parse404ErrorData(
   response: unknown
-): { isError404: false; additionalData: null } | { isError404: true; additionalData: Error404AdditionalData } {
+):
+  | { isError404: false; additionalData: null }
+  | { isError404: true; additionalData: Error404AdditionalData } {
   if (!isRouteError(response)) {
     return { isError404: false, additionalData: null };
   }
@@ -78,7 +82,7 @@ export function parse404ErrorData(
 
 /**
  * Converts a model enum value to a human-readable label.
- * 
+ *
  * @param model - The model type from Error404AdditionalData
  * @returns A string representing the human-readable label for the model
  */
@@ -89,4 +93,4 @@ export function getModelLabelForEnumValue(
     return "Custom field";
   }
   return model;
-}
\ No newline at end of file
+}

From c27973b9c8a1129c67f69e31e9eb1fead9deaa0b Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 4 Dec 2024 19:27:18 +0100
Subject: [PATCH 48/55] refactor(sidebar): fix pr review issues

---
 .../layout/sidebar/organization-selector.tsx  |  14 ++-
 app/components/layout/sidebar/sidebar-nav.tsx | 101 ++++++++++++------
 app/components/layout/sidebar/sidebar.tsx     |  42 ++++----
 app/hooks/use-sidebar-nav-items.tsx           |  26 ++++-
 app/root.tsx                                  |  17 ++-
 app/routes/_layout+/_layout.tsx               |  32 +++++-
 app/styles/global.css                         |   7 ++
 app/tailwind.css                              |  12 ---
 tailwind.config.ts                            |   2 +-
 9 files changed, 165 insertions(+), 88 deletions(-)

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 7f8859c70..ce61e6214 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -18,6 +18,7 @@ import ProfilePicture from "~/components/user/profile-picture";
 import When from "~/components/when/when";
 import type { loader } from "~/routes/_layout+/_layout";
 import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
 import {
   SidebarMenu,
   SidebarMenuButton,
@@ -28,7 +29,7 @@ import {
 export default function OrganizationSelector() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-  const { open, isMobile } = useSidebar();
+  const { open, openMobile, isMobile } = useSidebar();
 
   const { organizations, currentOrganizationId } =
     useLoaderData<typeof loader>();
@@ -69,10 +70,15 @@ export default function OrganizationSelector() {
 
   return (
     <SidebarMenu>
-      <SidebarMenuItem>
+      <SidebarMenuItem className={tw(openMobile && "px-2")}>
         <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
-            <SidebarMenuButton className="size-full justify-center border !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50">
+            <SidebarMenuButton
+              className={tw(
+                "size-full justify-center !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50",
+                open || openMobile ? "border" : ""
+              )}
+            >
               {currentOrganization.type === "PERSONAL" ? (
                 <ProfilePicture width="w-6" height="h-6" />
               ) : (
@@ -84,7 +90,7 @@ export default function OrganizationSelector() {
                 />
               )}
 
-              <When truthy={open}>
+              <When truthy={open || openMobile}>
                 <>
                   <div className="flex-1 text-left text-sm leading-tight">
                     <span className="truncate font-semibold">
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index a40b973f8..39603fc4a 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,12 +1,18 @@
 import { Fragment, useCallback } from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { NavLink, useMatches, useNavigate } from "@remix-run/react";
+import {
+  NavLink,
+  useLocation,
+  useMatches,
+  useNavigate,
+} from "@remix-run/react";
 import invariant from "tiny-invariant";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/shared/collapsible";
+import When from "~/components/when/when";
 import type { NavItem } from "~/hooks/use-sidebar-nav-items";
 import { tw } from "~/utils/tw";
 import {
@@ -18,6 +24,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  useSidebar,
 } from "./sidebar";
 
 type SidebarNavProps = {
@@ -31,15 +38,18 @@ export default function SidebarNav({
   style,
   items,
 }: SidebarNavProps) {
+  const { isMobile, toggleSidebar } = useSidebar();
   const matches = useMatches();
   const navigate = useNavigate();
+  const location = useLocation();
+  const currentRoute = matches.at(-1);
+  // @ts-expect-error
+  const handle = currentRoute?.handle?.name;
 
   const isRouteActive = useCallback(
-    (route: string) => {
-      const matchesRoutes = matches.map((match) => match.pathname);
-      return matchesRoutes.some((matchRoute) => matchRoute.includes(route));
-    },
-    [matches]
+    (route: string) =>
+      location.pathname.includes(route) && handle !== "$userId.bookings",
+    [handle, location.pathname]
   );
 
   const isAnyRouteActive = useCallback(
@@ -59,6 +69,20 @@ export default function SidebarNav({
     return navItem.title;
   }, []);
 
+  const closeIfMobile = useCallback(() => {
+    if (isMobile) {
+      toggleSidebar();
+    }
+  }, [isMobile, toggleSidebar]);
+
+  const navigateParentNav = useCallback(
+    (to: string) => {
+      navigate(to);
+      closeIfMobile();
+    },
+    [closeIfMobile, navigate]
+  );
+
   const renderNavItem = useCallback(
     (navItem: NavItem) => {
       switch (navItem.type) {
@@ -77,13 +101,16 @@ export default function SidebarNav({
             <Collapsible
               asChild
               className="group/collapsible"
-              defaultOpen={isAnyChildActive}
+              defaultOpen={isAnyChildActive && !navItem.disabled}
             >
               <SidebarMenuItem key={navItem.title} className="z-50">
                 <CollapsibleTrigger asChild>
                   <SidebarMenuButton
                     disabled={!!navItem.disabled}
                     tooltip={renderTooltopContent(navItem)}
+                    onClick={() => {
+                      navigateParentNav(firstChildRoute.to);
+                    }}
                   >
                     <navItem.Icon className="size-4 text-gray-600" />
                     <span className="font-semibold">{navItem.title}</span>
@@ -92,27 +119,32 @@ export default function SidebarNav({
                 </CollapsibleTrigger>
                 <CollapsibleContent>
                   <SidebarMenuSub>
-                    {navItem.children.map((child) => {
-                      const isChildActive = isRouteActive(child.to);
-
-                      return (
-                        <SidebarMenuSubItem key={child.title}>
-                          <SidebarMenuSubButton asChild>
-                            <NavLink
-                              to={child.to}
-                              target={child.target}
-                              className={tw(
-                                "font-medium hover:bg-gray-100",
-                                isChildActive &&
-                                  "bg-transparent font-bold !text-primary"
-                              )}
+                    <When truthy={!navItem.disabled}>
+                      {navItem.children.map((child) => {
+                        const isChildActive = isRouteActive(child.to);
+
+                        return (
+                          <SidebarMenuSubItem key={child.title}>
+                            <SidebarMenuSubButton
+                              onClick={closeIfMobile}
+                              asChild
                             >
-                              {child.title}
-                            </NavLink>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      );
-                    })}
+                              <NavLink
+                                to={child.to}
+                                target={child.target}
+                                className={tw(
+                                  "font-medium hover:bg-gray-100",
+                                  isChildActive &&
+                                    "bg-transparent font-bold !text-primary"
+                                )}
+                              >
+                                {child.title}
+                              </NavLink>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        );
+                      })}
+                    </When>
                   </SidebarMenuSub>
                 </CollapsibleContent>
               </SidebarMenuItem>
@@ -129,19 +161,20 @@ export default function SidebarNav({
                 asChild
                 disabled={!!navItem.disabled}
                 tooltip={renderTooltopContent(navItem)}
+                onClick={closeIfMobile}
               >
                 <NavLink
                   to={navItem.to}
                   target={navItem.target}
                   className={tw(
                     "font-semibold",
-                    isActive && "bg-transparent font-bold text-primary"
+                    isActive ? "bg-transparent font-bold text-primary" : ""
                   )}
                 >
                   <navItem.Icon
                     className={tw(
-                      "size-4",
-                      isActive ? "text-primary" : "text-gray-600"
+                      "size-4 text-gray-600",
+                      isActive && "text-primary"
                     )}
                   />
                   <span>{navItem.title}</span>
@@ -184,7 +217,13 @@ export default function SidebarNav({
         }
       }
     },
-    [isAnyRouteActive, isRouteActive, navigate, renderTooltopContent]
+    [
+      closeIfMobile,
+      isAnyRouteActive,
+      isRouteActive,
+      navigateParentNav,
+      renderTooltopContent,
+    ]
   );
 
   return (
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index 9685e72f0..a3402b5a3 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -16,7 +16,7 @@ import Input from "~/components/forms/input";
 import { SwitchIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { Separator } from "~/components/shared/separator";
-import { Sheet, SheetContent } from "~/components/shared/sheet";
+import { Sheet, SheetContent, SheetTitle } from "~/components/shared/sheet";
 import { Skeleton } from "~/components/shared/skeleton";
 import {
   Tooltip,
@@ -223,6 +223,7 @@ const Sidebar = forwardRef<
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
           <SheetContent
+            aria-describedby="sidebar"
             data-sidebar="sidebar"
             data-mobile="true"
             className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
@@ -233,7 +234,8 @@ const Sidebar = forwardRef<
             }
             side={side}
           >
-            <div className="flex size-full flex-col">{children}</div>
+            <SheetTitle className="sr-only" />
+            {children}
           </SheetContent>
         </Sheet>
       );
@@ -288,8 +290,8 @@ Sidebar.displayName = "Sidebar";
 
 const SidebarTrigger = forwardRef<
   React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
+  React.ComponentProps<typeof Button> & { iconClassName?: string }
+>(({ className, onClick, iconClassName, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -304,7 +306,7 @@ const SidebarTrigger = forwardRef<
       }}
       {...props}
     >
-      <SwitchIcon className="size-4 text-gray-500" />
+      <SwitchIcon className={tw("size-4 text-gray-500", iconClassName)} />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
@@ -341,24 +343,16 @@ const SidebarRail = forwardRef<
 SidebarRail.displayName = "SidebarRail";
 
 const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
-  ({ className, ...props }, ref) => {
-    const { state } = useSidebar();
-
-    return (
-      <main
-        ref={ref}
-        className={tw(
-          "bg-background relative flex h-[96.5vh] flex-1 flex-col",
-          "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-          state === "collapsed"
-            ? "md:max-w-[calc(100vw_-_48px)]"
-            : "md:max-w-[calc(100vw_-_274px)]",
-          className
-        )}
-        {...props}
-      />
-    );
-  }
+  ({ className, ...props }, ref) => (
+    <main
+      ref={ref}
+      className={tw(
+        "relative h-screen w-full overflow-auto bg-gray-25 px-4 pb-10",
+        className
+      )}
+      {...props}
+    />
+  )
 );
 SidebarInset.displayName = "SidebarInset";
 
@@ -524,7 +518,7 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding]  focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 0691bb014..14755d2f9 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -20,6 +20,8 @@ import {
 import { UpgradeMessage } from "~/components/marketing/upgrade-message";
 import When from "~/components/when/when";
 import type { loader } from "~/routes/_layout+/_layout";
+import { isPersonalOrg } from "~/utils/organization";
+import { useCurrentOrganization } from "./use-current-organization-id";
 import { useUserRoleHelper } from "./user-user-role-helper";
 
 type BaseNavItem = {
@@ -59,6 +61,8 @@ export function useSidebarNavItems() {
   const { isAdmin, canUseBookings, subscription } =
     useLoaderData<typeof loader>();
   const { isBaseOrSelfService } = useUserRoleHelper();
+  const currentOrganization = useCurrentOrganization();
+  const isPersonalOrganization = isPersonalOrg(currentOrganization);
 
   const bookingDisabled = useMemo(() => {
     if (canUseBookings) {
@@ -111,7 +115,6 @@ export function useSidebarNavItems() {
       title: "Kits",
       to: "/kits",
       Icon: BriefcaseConveyorBeltIcon,
-      hidden: isBaseOrSelfService,
     },
     {
       type: "child",
@@ -156,6 +159,7 @@ export function useSidebarNavItems() {
     {
       type: "label",
       title: "Organization",
+      hidden: isBaseOrSelfService,
     },
     {
       type: "parent",
@@ -166,6 +170,7 @@ export function useSidebarNavItems() {
         {
           title: "Users",
           to: "/settings/team/users",
+          hidden: isPersonalOrganization,
         },
         {
           title: "Non-registered members",
@@ -216,7 +221,22 @@ export function useSidebarNavItems() {
   ];
 
   return {
-    topMenuItems: topMenuItems.filter((item) => !item.hidden),
-    bottomMenuItems: bottomMenuItems.filter((item) => !item.hidden),
+    topMenuItems: removeHiddenNavItems(topMenuItems),
+    bottomMenuItems: removeHiddenNavItems(bottomMenuItems),
   };
 }
+
+function removeHiddenNavItems(navItems: NavItem[]) {
+  return navItems
+    .filter((item) => !item.hidden)
+    .map((item) => {
+      if (item.type === "parent") {
+        return {
+          ...item,
+          children: item.children.filter((child) => !child.hidden),
+        };
+      }
+
+      return item;
+    });
+}
diff --git a/app/root.tsx b/app/root.tsx
index b904f89d9..8e1381a03 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -78,12 +78,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
   const data = useRouteLoaderData<typeof loader>("root");
   const nonce = useNonce();
   const [hasCookies, setHasCookies] = useState(true);
+
   useEffect(() => {
     setHasCookies(navigator.cookieEnabled);
   }, []);
 
   return (
-    <html lang="en" className="h-full">
+    <html lang="en" className="overflow-hidden">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -93,13 +94,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
         <Clarity />
       </head>
-      <body className="h-full">
+      <body>
         <noscript>
           <BlockInteractions
-            title={"JavaScript is disabled"}
-            content={
-              "This website requires JavaScript to be enabled to function properly. Please enable JavaScript or change browser and try again."
-            }
+            title="JavaScript is disabled"
+            content="This website requires JavaScript to be enabled to function properly. Please enable JavaScript or change browser and try again."
             icon="x"
           />
         </noscript>
@@ -108,10 +107,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
           children
         ) : (
           <BlockInteractions
-            title={"Cookies are disabled"}
-            content={
-              "This website requires cookies to be enabled to function properly. Please enable cookies and try again."
-            }
+            title="Cookies are disabled"
+            content="This website requires cookies to be enabled to function properly. Please enable cookies and try again."
             icon="x"
           />
         )}
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 337e8379e..d0467227e 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -1,8 +1,9 @@
 import { Roles } from "@prisma/client";
 import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Outlet, useLoaderData } from "@remix-run/react";
+import { Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
 import { useAtomValue } from "jotai";
+import { ScanQrCodeIcon } from "lucide-react";
 import { ClientOnly } from "remix-utils/client-only";
 import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ErrorContent } from "~/components/errors";
@@ -12,8 +13,10 @@ import AppSidebar from "~/components/layout/sidebar/app-sidebar";
 import {
   SidebarInset,
   SidebarProvider,
+  SidebarTrigger,
 } from "~/components/layout/sidebar/sidebar";
 import { useCrisp } from "~/components/marketing/crisp";
+import { ShelfMobileLogo } from "~/components/marketing/logos";
 import { Spinner } from "~/components/shared/spinner";
 import { Toaster } from "~/components/shared/toast";
 import { NoSubscription } from "~/components/subscription/no-subscription";
@@ -38,6 +41,7 @@ import {
   stripe,
 } from "~/utils/stripe.server";
 import { canUseBookings } from "~/utils/subscription.server";
+import { tw } from "~/utils/tw";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
@@ -148,7 +152,7 @@ export default function App() {
   return (
     <SidebarProvider defaultOpen={!minimizedSidebar}>
       <AppSidebar />
-      <SidebarInset className="flex-1 bg-gray-25 px-4">
+      <SidebarInset>
         {disabledTeamOrg ? (
           <NoSubscription />
         ) : workspaceSwitching ? (
@@ -157,7 +161,29 @@ export default function App() {
             <p className="mt-2">Activating workspace...</p>
           </div>
         ) : (
-          <Outlet />
+          <>
+            <header className="flex items-center justify-between border-b bg-white py-4 md:hidden">
+              <Link to="." title="Home" className="block h-8">
+                <ShelfMobileLogo />
+              </Link>
+              <div className="flex items-center space-x-4">
+                <NavLink
+                  to="/scanner"
+                  title="Scan QR Code"
+                  className={({ isActive }) =>
+                    tw(
+                      "relative flex items-center justify-center px-2 transition",
+                      isActive ? "text-primary-600" : "text-gray-500"
+                    )
+                  }
+                >
+                  <ScanQrCodeIcon />
+                </NavLink>
+                <SidebarTrigger iconClassName="size-6" />
+              </div>
+            </header>
+            <Outlet />
+          </>
         )}
         <Toaster />
         <ClientOnly fallback={null}>
diff --git a/app/styles/global.css b/app/styles/global.css
index c8f7845a0..c1a8acf42 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,5 +1,12 @@
 :root {
   --tw-ring-color: #eaf2ff;
+  --sidebar-background: theme(colors.white);
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
 }
 
 html {
diff --git a/app/tailwind.css b/app/tailwind.css
index 994aca140..b5c61c956 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -1,15 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --sidebar-background: theme(colors.white);
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-  }
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 784257a90..4acf78638 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -222,7 +222,7 @@ export default {
           },
         },
         sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
+          DEFAULT: "var(--sidebar-background)",
           foreground: "hsl(var(--sidebar-foreground))",
           primary: "hsl(var(--sidebar-primary))",
           "primary-foreground": "hsl(var(--sidebar-primary-foreground))",

From 25f8b738afc794859d07b3a0292d2c4f33682fcb Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Thu, 5 Dec 2024 17:45:56 +0200
Subject: [PATCH 49/55] style adjustments

---
 .../layout/sidebar/organization-selector.tsx  | 20 +++++++++++++++----
 app/components/layout/sidebar/sidebar-nav.tsx | 15 +++++++++++---
 app/styles/layout/sidebar.css                 |  4 ++++
 package-lock.json                             |  1 -
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index ce61e6214..2d5b0e933 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -10,7 +10,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
-  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
 import { Image } from "~/components/shared/image";
@@ -109,18 +108,31 @@ export default function OrganizationSelector() {
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
           >
-            {organizations.map((organization, index) => (
+            {organizations.map((organization) => (
               <DropdownMenuItem
                 key={organization.id}
-                className="gap-2 rounded-sm p-2"
+                className={tw(
+                  "gap-2 rounded-sm p-2",
+                  currentOrganization.id === organization.id &&
+                    "bg-gray-50 text-sidebar-accent-foreground"
+                )}
                 onClick={() => {
                   if (organization.id !== currentOrganizationId) {
                     handleSwitchOrganization(organization.id);
                   }
                 }}
               >
+                {organization.type === "PERSONAL" ? (
+                  <ProfilePicture width="w-6" height="h-6" />
+                ) : (
+                  <Image
+                    imageId={organization.imageId}
+                    alt="img"
+                    className="size-6 rounded-sm border object-cover"
+                    updatedAt={organization.updatedAt}
+                  />
+                )}
                 {organization.name}
-                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 39603fc4a..72c8f8e9a 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -38,7 +38,7 @@ export default function SidebarNav({
   style,
   items,
 }: SidebarNavProps) {
-  const { isMobile, toggleSidebar } = useSidebar();
+  const { isMobile, toggleSidebar, open } = useSidebar();
   const matches = useMatches();
   const navigate = useNavigate();
   const location = useLocation();
@@ -109,10 +109,18 @@ export default function SidebarNav({
                     disabled={!!navItem.disabled}
                     tooltip={renderTooltopContent(navItem)}
                     onClick={() => {
-                      navigateParentNav(firstChildRoute.to);
+                      /** Clicking on the parent item should navigate to the first item, if the menu is not open */
+                      if (!open) {
+                        navigateParentNav(firstChildRoute.to);
+                      }
                     }}
                   >
-                    <navItem.Icon className="size-4 text-gray-600" />
+                    <navItem.Icon
+                      className={tw(
+                        "size-4 text-gray-600",
+                        !open && isAnyChildActive && "text-primary"
+                      )}
+                    />
                     <span className="font-semibold">{navItem.title}</span>
                     <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
                   </SidebarMenuButton>
@@ -222,6 +230,7 @@ export default function SidebarNav({
       isAnyRouteActive,
       isRouteActive,
       navigateParentNav,
+      open,
       renderTooltopContent,
     ]
   );
diff --git a/app/styles/layout/sidebar.css b/app/styles/layout/sidebar.css
index 655119f76..4bc4d7655 100644
--- a/app/styles/layout/sidebar.css
+++ b/app/styles/layout/sidebar.css
@@ -42,3 +42,7 @@
     @apply pointer-events-none hidden;
   }
 }
+
+.active\:text-sidebar-accent-foreground:active {
+  @apply text-primary;
+}
diff --git a/package-lock.json b/package-lock.json
index 2b399cab4..dd3d3d913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,6 @@
         "@zxing/library": "^0.20.0",
         "changedpi": "^1.0.4",
         "chardet": "^2.0.0",
-        "cmdk": "^1.0.4",
         "class-variance-authority": "^0.7.0",
         "cookie": "^0.7.0",
         "crisp-sdk-web": "^1.0.21",

From e4a77cad622b851e83953850f7642c46777d2238 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Fri, 6 Dec 2024 16:38:26 +0100
Subject: [PATCH 50/55] refactor(sidebar): fix height issue on auth pages,
 create helper for checking if route is active

---
 .../layout/sidebar/child-nav-item.tsx         |  44 +++++
 .../layout/sidebar/parent-nav-item.tsx        | 115 +++++++++++++
 app/components/layout/sidebar/sidebar-nav.tsx | 151 ++----------------
 app/hooks/use-is-route-active.tsx             |  70 ++++++++
 app/hooks/use-sidebar-nav-items.tsx           |   4 +-
 app/routes/_auth+/_auth.tsx                   |  63 ++++----
 6 files changed, 274 insertions(+), 173 deletions(-)
 create mode 100644 app/components/layout/sidebar/child-nav-item.tsx
 create mode 100644 app/components/layout/sidebar/parent-nav-item.tsx
 create mode 100644 app/hooks/use-is-route-active.tsx

diff --git a/app/components/layout/sidebar/child-nav-item.tsx b/app/components/layout/sidebar/child-nav-item.tsx
new file mode 100644
index 000000000..791f67ae5
--- /dev/null
+++ b/app/components/layout/sidebar/child-nav-item.tsx
@@ -0,0 +1,44 @@
+import { NavLink } from "@remix-run/react";
+import { useIsRouteActive } from "~/hooks/use-is-route-active";
+import type { ChildNavItem } from "~/hooks/use-sidebar-nav-items";
+import { tw } from "~/utils/tw";
+import { SidebarMenuButton, SidebarMenuItem } from "./sidebar";
+
+type ChildNavItemProps = {
+  route: ChildNavItem;
+  closeIfMobile?: () => void;
+  tooltip: React.ComponentProps<typeof SidebarMenuButton>["tooltip"];
+};
+
+export default function ChildNavItem({
+  route,
+  closeIfMobile,
+  tooltip,
+}: ChildNavItemProps) {
+  const isActive = useIsRouteActive(route.to);
+
+  return (
+    <SidebarMenuItem className="z-50">
+      <SidebarMenuButton
+        asChild
+        disabled={!!route.disabled}
+        tooltip={tooltip}
+        onClick={closeIfMobile}
+      >
+        <NavLink
+          to={route.to}
+          target={route.target}
+          className={tw(
+            "font-semibold",
+            isActive ? "bg-transparent font-bold text-primary" : ""
+          )}
+        >
+          <route.Icon
+            className={tw("size-4 text-gray-600", isActive && "text-primary")}
+          />
+          <span>{route.title}</span>
+        </NavLink>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
diff --git a/app/components/layout/sidebar/parent-nav-item.tsx b/app/components/layout/sidebar/parent-nav-item.tsx
new file mode 100644
index 000000000..c55b663e7
--- /dev/null
+++ b/app/components/layout/sidebar/parent-nav-item.tsx
@@ -0,0 +1,115 @@
+import { NavLink, useNavigate } from "@remix-run/react";
+import { ChevronDownIcon } from "lucide-react";
+import invariant from "tiny-invariant";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/shared/collapsible";
+import When from "~/components/when/when";
+import {
+  useIsAnyRouteActive,
+  useIsRouteActive,
+} from "~/hooks/use-is-route-active";
+import type {
+  ChildNavItem,
+  ParentNavItem,
+} from "~/hooks/use-sidebar-nav-items";
+import { tw } from "~/utils/tw";
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "./sidebar";
+
+type ParentNavItemProps = {
+  route: ParentNavItem;
+  tooltip: React.ComponentProps<typeof SidebarMenuButton>["tooltip"];
+  closeIfMobile?: () => void;
+};
+
+export default function ParentNavItem({
+  route,
+  tooltip,
+  closeIfMobile,
+}: ParentNavItemProps) {
+  const navigate = useNavigate();
+  const isAnyChildActive = useIsAnyRouteActive(
+    route.children.map((child) => child.to)
+  );
+
+  const firstChildRoute = route.children[0];
+  invariant(
+    typeof firstChildRoute !== "undefined",
+    "'parent' nav item should have at leaset one child route"
+  );
+
+  function handleClick() {
+    navigate(firstChildRoute.to);
+    closeIfMobile && closeIfMobile();
+  }
+
+  return (
+    <Collapsible
+      asChild
+      className="group/collapsible"
+      defaultOpen={isAnyChildActive && !route.disabled}
+    >
+      <SidebarMenuItem key={route.title} className="z-50">
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            disabled={!!route.disabled}
+            tooltip={tooltip}
+            onClick={handleClick}
+          >
+            <route.Icon className="size-4 text-gray-600" />
+            <span className="font-semibold">{route.title}</span>
+            <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            <When truthy={!route.disabled}>
+              {route.children.map((child) => (
+                <NestedRouteRenderer
+                  key={child.to}
+                  nested={child}
+                  closeIfMobile={closeIfMobile}
+                />
+              ))}
+            </When>
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+}
+
+function NestedRouteRenderer({
+  nested,
+  closeIfMobile,
+}: {
+  nested: Omit<ChildNavItem, "type" | "Icon">;
+  closeIfMobile?: () => void;
+}) {
+  const isChildActive = useIsRouteActive(nested.to);
+
+  return (
+    <SidebarMenuSubItem key={nested.title}>
+      <SidebarMenuSubButton onClick={closeIfMobile} asChild>
+        <NavLink
+          to={nested.to}
+          target={nested.target}
+          className={tw(
+            "font-medium hover:bg-gray-100",
+            isChildActive && "bg-transparent font-bold !text-primary"
+          )}
+        >
+          {nested.title}
+        </NavLink>
+      </SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
index 39603fc4a..31576e474 100644
--- a/app/components/layout/sidebar/sidebar-nav.tsx
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -1,29 +1,13 @@
 import { Fragment, useCallback } from "react";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import {
-  NavLink,
-  useLocation,
-  useMatches,
-  useNavigate,
-} from "@remix-run/react";
-import invariant from "tiny-invariant";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "~/components/shared/collapsible";
-import When from "~/components/when/when";
 import type { NavItem } from "~/hooks/use-sidebar-nav-items";
-import { tw } from "~/utils/tw";
+import ChildNavItem from "./child-nav-item";
+import ParentNavItem from "./parent-nav-item";
 import {
   SidebarGroup,
   SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
   useSidebar,
 } from "./sidebar";
 
@@ -39,23 +23,6 @@ export default function SidebarNav({
   items,
 }: SidebarNavProps) {
   const { isMobile, toggleSidebar } = useSidebar();
-  const matches = useMatches();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const currentRoute = matches.at(-1);
-  // @ts-expect-error
-  const handle = currentRoute?.handle?.name;
-
-  const isRouteActive = useCallback(
-    (route: string) =>
-      location.pathname.includes(route) && handle !== "$userId.bookings",
-    [handle, location.pathname]
-  );
-
-  const isAnyRouteActive = useCallback(
-    (routes: string[]) => routes.some(isRouteActive),
-    [isRouteActive]
-  );
 
   const renderTooltopContent = useCallback((navItem: NavItem) => {
     if (typeof navItem.disabled === "boolean" && navItem.disabled) {
@@ -75,112 +42,26 @@ export default function SidebarNav({
     }
   }, [isMobile, toggleSidebar]);
 
-  const navigateParentNav = useCallback(
-    (to: string) => {
-      navigate(to);
-      closeIfMobile();
-    },
-    [closeIfMobile, navigate]
-  );
-
   const renderNavItem = useCallback(
     (navItem: NavItem) => {
       switch (navItem.type) {
         case "parent": {
-          const firstChildRoute = navItem.children[0];
-          invariant(
-            typeof firstChildRoute !== "undefined",
-            "'parent' nav item should have at lease one child route"
-          );
-
-          const isAnyChildActive = isAnyRouteActive(
-            navItem.children.map((child) => child.to)
-          );
-
           return (
-            <Collapsible
-              asChild
-              className="group/collapsible"
-              defaultOpen={isAnyChildActive && !navItem.disabled}
-            >
-              <SidebarMenuItem key={navItem.title} className="z-50">
-                <CollapsibleTrigger asChild>
-                  <SidebarMenuButton
-                    disabled={!!navItem.disabled}
-                    tooltip={renderTooltopContent(navItem)}
-                    onClick={() => {
-                      navigateParentNav(firstChildRoute.to);
-                    }}
-                  >
-                    <navItem.Icon className="size-4 text-gray-600" />
-                    <span className="font-semibold">{navItem.title}</span>
-                    <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
-                  </SidebarMenuButton>
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <SidebarMenuSub>
-                    <When truthy={!navItem.disabled}>
-                      {navItem.children.map((child) => {
-                        const isChildActive = isRouteActive(child.to);
-
-                        return (
-                          <SidebarMenuSubItem key={child.title}>
-                            <SidebarMenuSubButton
-                              onClick={closeIfMobile}
-                              asChild
-                            >
-                              <NavLink
-                                to={child.to}
-                                target={child.target}
-                                className={tw(
-                                  "font-medium hover:bg-gray-100",
-                                  isChildActive &&
-                                    "bg-transparent font-bold !text-primary"
-                                )}
-                              >
-                                {child.title}
-                              </NavLink>
-                            </SidebarMenuSubButton>
-                          </SidebarMenuSubItem>
-                        );
-                      })}
-                    </When>
-                  </SidebarMenuSub>
-                </CollapsibleContent>
-              </SidebarMenuItem>
-            </Collapsible>
+            <ParentNavItem
+              route={navItem}
+              tooltip={renderTooltopContent(navItem)}
+              closeIfMobile={closeIfMobile}
+            />
           );
         }
 
         case "child": {
-          const isActive = isRouteActive(navItem.to);
-
           return (
-            <SidebarMenuItem className="z-50">
-              <SidebarMenuButton
-                asChild
-                disabled={!!navItem.disabled}
-                tooltip={renderTooltopContent(navItem)}
-                onClick={closeIfMobile}
-              >
-                <NavLink
-                  to={navItem.to}
-                  target={navItem.target}
-                  className={tw(
-                    "font-semibold",
-                    isActive ? "bg-transparent font-bold text-primary" : ""
-                  )}
-                >
-                  <navItem.Icon
-                    className={tw(
-                      "size-4 text-gray-600",
-                      isActive && "text-primary"
-                    )}
-                  />
-                  <span>{navItem.title}</span>
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
+            <ChildNavItem
+              route={navItem}
+              closeIfMobile={closeIfMobile}
+              tooltip={renderTooltopContent(navItem)}
+            />
           );
         }
 
@@ -217,13 +98,7 @@ export default function SidebarNav({
         }
       }
     },
-    [
-      closeIfMobile,
-      isAnyRouteActive,
-      isRouteActive,
-      navigateParentNav,
-      renderTooltopContent,
-    ]
+    [closeIfMobile, renderTooltopContent]
   );
 
   return (
diff --git a/app/hooks/use-is-route-active.tsx b/app/hooks/use-is-route-active.tsx
new file mode 100644
index 000000000..1eb6eaeb4
--- /dev/null
+++ b/app/hooks/use-is-route-active.tsx
@@ -0,0 +1,70 @@
+import type { Path } from "@remix-run/react";
+import { useLocation, useResolvedPath } from "@remix-run/react";
+
+/**
+ * This function returns the active state of a route.
+ * It works similar to {@link NavLink} from react-router
+ */
+export function useIsRouteActive(to: string) {
+  const path = useResolvedPath(to);
+  const toPathname = path.pathname;
+
+  const locationPathname = useLocation().pathname;
+
+  return isRouteActive({ toPathname, locationPathname });
+}
+
+export function useIsAnyRouteActive(routes: string[]) {
+  const locationPathname = useLocation().pathname;
+
+  const resolvedPaths: Path[] = [];
+
+  routes.forEach((route) => {
+    // Hooks like useResolvedPath must be called within a React component or hook.
+    // To comply with React's rules of hooks, we define a temporary component
+    // (ResolvedPathComponent) to call useResolvedPath for each route, ensuring it
+    // is invoked in a valid React context.
+    const ResolvedPathComponent = () => {
+      const resolvedPath = useResolvedPath(route);
+      resolvedPaths.push(resolvedPath);
+    };
+
+    ResolvedPathComponent();
+  });
+
+  return resolvedPaths.some((path) =>
+    isRouteActive({
+      toPathname: path.pathname,
+      locationPathname,
+    })
+  );
+}
+
+/*****************************/
+/***** Utility Fucntion  *****/
+/*****************************/
+
+function isRouteActive({
+  toPathname,
+  locationPathname,
+}: {
+  toPathname: string;
+  locationPathname: string;
+}) {
+  // If the `to` has a trailing slash, look at that exact spot.  Otherwise,
+  // we're looking for a slash _after_ what's in `to`.  For example:
+  //
+  // <NavLink to="/users"> and <NavLink to="/users/">
+  // both want to look for a / at index 6 to match URL `/users/matt`
+  const endSlashPosition =
+    toPathname !== "/" && toPathname.endsWith("/")
+      ? toPathname.length - 1
+      : toPathname.length;
+
+  const isActive =
+    locationPathname === toPathname ||
+    (locationPathname.startsWith(toPathname) &&
+      locationPathname.charAt(endSlashPosition) === "/");
+
+  return isActive;
+}
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
index 14755d2f9..1b835f199 100644
--- a/app/hooks/use-sidebar-nav-items.tsx
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -31,13 +31,13 @@ type BaseNavItem = {
   disabled?: boolean | { reason: React.ReactNode };
 };
 
-type ChildNavItem = BaseNavItem & {
+export type ChildNavItem = BaseNavItem & {
   type: "child";
   to: string;
   target?: string;
 };
 
-type ParentNavItem = BaseNavItem & {
+export type ParentNavItem = BaseNavItem & {
   type: "parent";
   children: Omit<ChildNavItem, "type" | "Icon">[];
 };
diff --git a/app/routes/_auth+/_auth.tsx b/app/routes/_auth+/_auth.tsx
index 3bef5a18e..a2370722b 100644
--- a/app/routes/_auth+/_auth.tsx
+++ b/app/routes/_auth+/_auth.tsx
@@ -16,41 +16,38 @@ export default function App() {
   const { title, subHeading } = data;
 
   return (
-    <div className="flex h-full min-h-screen flex-col ">
-      <main className="flex size-full">
-        <div className="flex size-full flex-col items-center justify-center p-6 lg:p-10">
-          <div className=" mb-8 text-center">
-            <Link to="/" reloadDocument>
-              <ShelfSymbolLogo />
-            </Link>
+    <main className="flex h-screen">
+      <div className="flex size-full flex-col items-center justify-center p-6 lg:p-10">
+        <div className=" mb-8 text-center">
+          <Link to="/" reloadDocument>
+            <ShelfSymbolLogo />
+          </Link>
 
-            <h1>{title}</h1>
-            {subHeading && (
-              <SubHeading className="max-w-md">{subHeading}</SubHeading>
-            )}
-          </div>
-          <div className=" w-[360px]">
-            <Outlet />
-          </div>
+          <h1>{title}</h1>
+          {subHeading && (
+            <SubHeading className="max-w-md">{subHeading}</SubHeading>
+          )}
         </div>
-        <aside className="relative hidden h-full items-end justify-end p-8 lg:flex lg:w-[700px] xl:w-[900px]">
-          <a
-            href="https://www.nga.gov/collection/art-object-page.52316.html"
-            rel="noreferrer"
-            target="_blank"
-            className="relative z-20 w-[150px] text-right text-sm text-black no-underline hover:text-black"
-          >
-            John Singer Sargent <br />A Corner of the Library in Venice,
-            1904/1907
-          </a>
-          <img
-            className="absolute inset-0 size-full max-w-none object-cover"
-            src="/static/images/auth-cover.jpg"
-            alt="John Singer Sargent - A Corner of the Library in Venice, 1904/1907 "
-          />
-        </aside>
-      </main>
-    </div>
+        <div className=" w-[360px]">
+          <Outlet />
+        </div>
+      </div>
+      <aside className="relative hidden h-full items-end justify-end p-8 lg:flex lg:w-[700px] xl:w-[900px]">
+        <a
+          href="https://www.nga.gov/collection/art-object-page.52316.html"
+          rel="noreferrer"
+          target="_blank"
+          className="relative z-20 w-[150px] text-right text-sm text-black no-underline hover:text-black"
+        >
+          John Singer Sargent <br />A Corner of the Library in Venice, 1904/1907
+        </a>
+        <img
+          className="absolute inset-0 size-full max-w-none object-cover"
+          src="/static/images/auth-cover.jpg"
+          alt="John Singer Sargent - A Corner of the Library in Venice, 1904/1907 "
+        />
+      </aside>
+    </main>
   );
 }
 

From 30c902769b25fdf92c720c2db66c59c5596d5bca Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Mon, 9 Dec 2024 15:49:25 +0100
Subject: [PATCH 51/55] refactor(sidebar): fix issue with conditional hook call

---
 app/hooks/use-is-route-active.tsx | 123 +++++++++++++++++++++++++-----
 1 file changed, 106 insertions(+), 17 deletions(-)

diff --git a/app/hooks/use-is-route-active.tsx b/app/hooks/use-is-route-active.tsx
index 1eb6eaeb4..a0dd86740 100644
--- a/app/hooks/use-is-route-active.tsx
+++ b/app/hooks/use-is-route-active.tsx
@@ -1,5 +1,12 @@
-import type { Path } from "@remix-run/react";
-import { useLocation, useResolvedPath } from "@remix-run/react";
+import { useMemo } from "react";
+import type { Path, UIMatch } from "@remix-run/react";
+import {
+  parsePath,
+  resolvePath,
+  useLocation,
+  useMatches,
+  useResolvedPath,
+} from "@remix-run/react";
 
 /**
  * This function returns the active state of a route.
@@ -16,21 +23,16 @@ export function useIsRouteActive(to: string) {
 
 export function useIsAnyRouteActive(routes: string[]) {
   const locationPathname = useLocation().pathname;
+  const matches = useMatches();
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
 
-  const resolvedPaths: Path[] = [];
-
-  routes.forEach((route) => {
-    // Hooks like useResolvedPath must be called within a React component or hook.
-    // To comply with React's rules of hooks, we define a temporary component
-    // (ResolvedPathComponent) to call useResolvedPath for each route, ensuring it
-    // is invoked in a valid React context.
-    const ResolvedPathComponent = () => {
-      const resolvedPath = useResolvedPath(route);
-      resolvedPaths.push(resolvedPath);
-    };
-
-    ResolvedPathComponent();
-  });
+  const resolvedPaths = useMemo(
+    () =>
+      routes.map((route) =>
+        resolveTo(route, JSON.parse(routePathnamesJson), locationPathname)
+      ),
+    [locationPathname, routePathnamesJson, routes]
+  );
 
   return resolvedPaths.some((path) =>
     isRouteActive({
@@ -41,7 +43,7 @@ export function useIsAnyRouteActive(routes: string[]) {
 }
 
 /*****************************/
-/***** Utility Fucntion  *****/
+/***** Utility Functions *****/
 /*****************************/
 
 function isRouteActive({
@@ -68,3 +70,90 @@ function isRouteActive({
 
   return isActive;
 }
+
+/**
+ * This function is directly taken from github repo of react-router
+ * https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/utils.ts#L1226
+ */
+export function resolveTo(
+  toArg: string,
+  routePathnames: string[],
+  locationPathname: string,
+  isPathRelative = false
+): Path {
+  let to: Partial<Path>;
+  to = parsePath(toArg);
+
+  let isEmptyPath = toArg === "" || to.pathname === "";
+  let toPathname = isEmptyPath ? "/" : to.pathname;
+
+  let from: string;
+
+  // Routing is relative to the current pathname if explicitly requested.
+  //
+  // If a pathname is explicitly provided in `to`, it should be relative to the
+  // route context. This is explained in `Note on `<Link to>` values` in our
+  // migration guide from v5 as a means of disambiguation between `to` values
+  // that begin with `/` and those that do not. However, this is problematic for
+  // `to` values that do not provide a pathname. `to` can simply be a search or
+  // hash string, in which case we should assume that the navigation is relative
+  // to the current location's pathname and *not* the route pathname.
+  if (toPathname == null) {
+    from = locationPathname;
+  } else {
+    let routePathnameIndex = routePathnames.length - 1;
+
+    // With relative="route" (the default), each leading .. segment means
+    // "go up one route" instead of "go up one URL segment".  This is a key
+    // difference from how <a href> works and a major reason we call this a
+    // "to" value instead of a "href".
+    if (!isPathRelative && toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/");
+
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        routePathnameIndex -= 1;
+      }
+
+      to.pathname = toSegments.join("/");
+    }
+
+    from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+  }
+
+  let path = resolvePath(to, from);
+
+  // Ensure the pathname has a trailing slash if the original "to" had one
+  let hasExplicitTrailingSlash =
+    toPathname && toPathname !== "/" && toPathname.endsWith("/");
+  // Or if this was a link to the current path which has a trailing slash
+  let hasCurrentTrailingSlash =
+    (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
+  if (
+    !path.pathname.endsWith("/") &&
+    (hasExplicitTrailingSlash || hasCurrentTrailingSlash)
+  ) {
+    path.pathname += "/";
+  }
+
+  return path;
+}
+
+// Return the array of pathnames for the current route matches - used to
+// generate the routePathnames input for resolveTo()
+export function getResolveToMatches(matches: UIMatch[]) {
+  let pathMatches = getPathContributingMatches(matches);
+
+  // Use the full pathname for the leaf match so we include splat values for "." links
+  // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
+  return pathMatches.map((match: any, idx: number) =>
+    idx === pathMatches.length - 1 ? match?.pathname : match?.pathnameBase
+  );
+}
+
+export function getPathContributingMatches(matches: any) {
+  return matches.filter(
+    (match: any, index: number) =>
+      index === 0 || (match?.route?.path && match?.route?.path?.length > 0)
+  );
+}

From 79354a065596e12e2fef7ac11d36f8b657bf6cc7 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Mon, 9 Dec 2024 15:58:30 +0100
Subject: [PATCH 52/55] refactor(sidebar): add sidebar notice card

---
 app/components/layout/sidebar/app-sidebar.tsx |  2 +
 app/components/layout/sidebar/notice-card.tsx | 53 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 app/components/layout/sidebar/notice-card.tsx

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index fa5333cfb..664999ecd 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -1,5 +1,6 @@
 import { ShelfSidebarLogo } from "~/components/marketing/logos";
 import { useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
+import { SidebarNoticeCard } from "./notice-card";
 import OrganizationSelector from "./organization-selector";
 import {
   Sidebar,
@@ -30,6 +31,7 @@ export default function AppSidebar(props: AppSidebarProps) {
 
       <SidebarContent>
         <SidebarNav items={topMenuItems} />
+        <SidebarNoticeCard />
       </SidebarContent>
 
       <SidebarFooter>
diff --git a/app/components/layout/sidebar/notice-card.tsx b/app/components/layout/sidebar/notice-card.tsx
new file mode 100644
index 000000000..3f6d3646f
--- /dev/null
+++ b/app/components/layout/sidebar/notice-card.tsx
@@ -0,0 +1,53 @@
+import { useFetcher, useLoaderData } from "@remix-run/react";
+import { XIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
+import type { loader } from "~/routes/_layout+/_layout";
+
+export const SidebarNoticeCard = () => {
+  const { hideNoticeCard } = useLoaderData<typeof loader>();
+  const fetcher = useFetcher();
+
+  let optimisticHideNoticeCard = hideNoticeCard;
+  if (fetcher.formData) {
+    optimisticHideNoticeCard =
+      fetcher.formData.get("noticeCardVisibility") === "hidden";
+  }
+
+  return !optimisticHideNoticeCard ? null : (
+    <div className="support-banner mx-2 mb-6 hidden rounded bg-gray-50 px-4 py-5 md:block">
+      <div className="flex justify-between align-middle">
+        <h5 className="mb-1 font-semibold text-gray-900">
+          Install Shelf for Mobile
+        </h5>
+        <div className="mt-[-6px]">
+          <fetcher.Form
+            method="post"
+            action="/api/user/prefs/dismiss-notice-card"
+          >
+            <input type="hidden" name="noticeCardVisibility" value="hidden" />
+            <button type="submit">
+              <XIcon />
+            </button>
+          </fetcher.Form>
+        </div>
+      </div>
+
+      <p className="text-gray-600">
+        Always available access to shelf, with all features you have on desktop.
+      </p>
+      <img
+        src="/static/images/carlos-support.jpg"
+        alt="Carlos support shelf.nu"
+        className="my-4 rounded"
+      />
+      <p>
+        <Button
+          variant="link"
+          to="https://www.shelf.nu/blog/new-shelf-pwa-progresive-web-application-live-learn-how-to-use"
+        >
+          Written Tutorial
+        </Button>
+      </p>
+    </div>
+  );
+};

From 725515d130b7eaa52808e97a90bb9efc2cf34ac6 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Mon, 9 Dec 2024 16:11:34 +0100
Subject: [PATCH 53/55] refactor(sidebar): update use-mobile hook

---
 app/hooks/use-mobile.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/hooks/use-mobile.ts b/app/hooks/use-mobile.ts
index 081e23da6..b024d97b8 100644
--- a/app/hooks/use-mobile.ts
+++ b/app/hooks/use-mobile.ts
@@ -6,17 +6,21 @@ export function useIsMobile() {
   const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
 
   useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    let mql: MediaQueryList;
 
-    const onChange = () => {
+    if (window) {
+      mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+      mql.addEventListener("change", onChange);
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
+    }
 
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    function onChange() {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    }
 
     return () => {
-      mql.removeEventListener("change", onChange);
+      mql?.removeEventListener("change", onChange);
     };
   }, []);
 

From 2049e6afd770c4d632bdf7ec81a1f0ed6b997d10 Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Tue, 10 Dec 2024 11:43:31 +0200
Subject: [PATCH 54/55] ui fixes

---
 app/components/layout/sidebar/app-sidebar.tsx | 2 +-
 app/components/layout/sidebar/notice-card.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
index 664999ecd..998554955 100644
--- a/app/components/layout/sidebar/app-sidebar.tsx
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -31,10 +31,10 @@ export default function AppSidebar(props: AppSidebarProps) {
 
       <SidebarContent>
         <SidebarNav items={topMenuItems} />
-        <SidebarNoticeCard />
       </SidebarContent>
 
       <SidebarFooter>
+        <SidebarNoticeCard />
         <SidebarNav className="p-0" items={bottomMenuItems} />
         <SidebarUserMenu />
       </SidebarFooter>
diff --git a/app/components/layout/sidebar/notice-card.tsx b/app/components/layout/sidebar/notice-card.tsx
index 3f6d3646f..9ee7ea1f5 100644
--- a/app/components/layout/sidebar/notice-card.tsx
+++ b/app/components/layout/sidebar/notice-card.tsx
@@ -6,6 +6,7 @@ import type { loader } from "~/routes/_layout+/_layout";
 export const SidebarNoticeCard = () => {
   const { hideNoticeCard } = useLoaderData<typeof loader>();
   const fetcher = useFetcher();
+  console.log("hideNoticeCard", hideNoticeCard);
 
   let optimisticHideNoticeCard = hideNoticeCard;
   if (fetcher.formData) {
@@ -13,8 +14,8 @@ export const SidebarNoticeCard = () => {
       fetcher.formData.get("noticeCardVisibility") === "hidden";
   }
 
-  return !optimisticHideNoticeCard ? null : (
-    <div className="support-banner mx-2 mb-6 hidden rounded bg-gray-50 px-4 py-5 md:block">
+  return optimisticHideNoticeCard ? null : (
+    <div className="support-banner mb-6 hidden rounded border bg-gray-50 px-2 py-3 md:block">
       <div className="flex justify-between align-middle">
         <h5 className="mb-1 font-semibold text-gray-900">
           Install Shelf for Mobile

From 1756f7bf459469c46e709c1c38f77d803acde216 Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Tue, 10 Dec 2024 11:46:35 +0200
Subject: [PATCH 55/55] mend

---
 app/components/layout/sidebar/notice-card.tsx | 1 -
 app/components/layout/sidebar/sidebar.tsx     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/layout/sidebar/notice-card.tsx b/app/components/layout/sidebar/notice-card.tsx
index 9ee7ea1f5..5e06faf79 100644
--- a/app/components/layout/sidebar/notice-card.tsx
+++ b/app/components/layout/sidebar/notice-card.tsx
@@ -6,7 +6,6 @@ import type { loader } from "~/routes/_layout+/_layout";
 export const SidebarNoticeCard = () => {
   const { hideNoticeCard } = useLoaderData<typeof loader>();
   const fetcher = useFetcher();
-  console.log("hideNoticeCard", hideNoticeCard);
 
   let optimisticHideNoticeCard = hideNoticeCard;
   if (fetcher.formData) {
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index a3402b5a3..1e215763d 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -498,7 +498,7 @@ const SidebarMenu = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
     <ul
       ref={ref}
       data-sidebar="menu"
-      className={tw("flex w-full min-w-0 flex-col gap-1", className)}
+      className={tw("flex w-full min-w-0 flex-col ", className)}
       {...props}
     />
   )