[WEB-4328] feat: sidebar revamp (#7217)

* chore: sidebar peek state added to theme store

* chore: extended sidebar wrapper added

* chore: resizeable sidebar component added

* chore: appsidebar root component

* chore: updated sidebar and applied necessary changes across codebase

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: breadcrumb changes

* chore: sidebar improvements and fixes

* chore: enhancements and fixes

* fix: peek sidebar leave

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: icons added

* chore: add dock variable and toggle function to theme store

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: theme and workspace store updated

* chore: workspace content wrapper and apprail context

* chore: workspace and project wrapper updated

* chore: app rail component

* chore: content wrapper

* chore: sidebar component updated

* chore: layout changes and code refactoring

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: appsidebar toggle button

* chore: code refactor

* chore: workspace menu improvements

* chore: sidebar spacing and padding improvements

* chore: settings layout improvement

* chore: enhancements

* chore: extended sidebar code refactor

* chore: code refactor

* fix: merge conflict

* fix: merge conflict

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

apps/web/ce/components/workspace/app-switcher.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import React from "react";
+
+export const WorkspaceAppSwitcher = () => <></>;

apps/web/ce/components/workspace/content-wrapper.tsx

@@ -0,0 +1,9 @@
+"use client";
+import React from "react";
+import { observer } from "mobx-react";
+
+export const WorkspaceContentWrapper = observer(({ children }: { children: React.ReactNode }) => (
+  <div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
+    <div className="size-full p-2 flex-grow transition-all ease-in-out duration-300">{children}</div>
+  </div>
+));

apps/web/ce/components/workspace/index.ts

@@ -4,3 +4,5 @@ export * from "./billing";
 export * from "./delete-workspace-section";
 export * from "./sidebar";
 export * from "./members";
+export * from "./content-wrapper";
+export * from "./app-switcher";

apps/web/ce/components/workspace/sidebar/app-search.tsx

@@ -2,14 +2,11 @@ import { observer } from "mobx-react";
 import { Search } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-// helpers
-import { cn } from "@plane/utils";
 // hooks
-import { useAppTheme, useCommandPalette } from "@/hooks/store";
+import { useCommandPalette } from "@/hooks/store";
 
 export const AppSearch = observer(() => {
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
   const { toggleCommandPaletteModal } = useCommandPalette();
   // translation
   const { t } = useTranslation();
@@ -17,12 +14,7 @@ export const AppSearch = observer(() => {
   return (
     <button
       type="button"
-      className={cn(
-        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
-        {
-          "border-[0.5px] border-custom-sidebar-border-300": !sidebarCollapsed,
-        }
-      )}
+      className="flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none border-[0.5px] border-custom-sidebar-border-300"
       onClick={() => toggleCommandPaletteModal(true)}
       aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
     >

apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx

@@ -171,10 +171,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
               className={cn(
                 "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
                 {
-                  // "cursor-not-allowed opacity-60": project.sort_order === null,
                   "cursor-grabbing": isDragging,
-
-                  // "!hidden": isSidebarCollapsed,
                 }
               )}
               ref={dragHandleRef}

apps/web/ce/components/workspace/sidebar/sidebar-item.tsx

@@ -5,9 +5,7 @@ import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
-import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Tooltip } from "@plane/ui";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
@@ -31,14 +29,13 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
   const { data } = useUser();
 
   // store hooks
-  const { toggleSidebar, sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
-  const { isMobile } = usePlatformOS();
+  const { toggleSidebar, isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
 
   const handleLinkClick = () => {
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
-    if (!extendedSidebarCollapsed) toggleExtendedSidebar();
+    if (isExtendedSidebarOpened) toggleExtendedSidebar(false);
   };
 
   const staticItems = ["home", "inbox", "pi-chat", "projects"];
@@ -61,30 +58,14 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
   const icon = getSidebarNavigationItemIcon(item.key);
 
   return (
-    <Tooltip
-      tooltipContent={t(item.labelTranslationKey)}
-      position="right"
-      className="ml-2"
-      disabled={!sidebarCollapsed}
-      isMobile={isMobile}
-    >
-      <Link href={itemHref} onClick={() => handleLinkClick()}>
-        <SidebarNavItem
-          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-          isActive={isActive}
-        >
-          <div className="flex items-center gap-1.5 py-[1px]">
-            {icon}
-            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
-          </div>
-          {item.key === "inbox" && (
-            <NotificationAppSidebarOption
-              workspaceSlug={workspaceSlug?.toString()}
-              isSidebarCollapsed={sidebarCollapsed ?? false}
-            />
-          )}
-        </SidebarNavItem>
-      </Link>
-    </Tooltip>
+    <Link href={itemHref} onClick={() => handleLinkClick()}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          {icon}
+          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        {item.key === "inbox" && <NotificationAppSidebarOption workspaceSlug={workspaceSlug?.toString()} />}
+      </SidebarNavItem>
+    </Link>
   );
 });