[ENG-37] chore: sidebar help section revamp. (#5495)

* [ENG-37] chore: sidebar help section revamp.

* fix: lint error.

web/app/[workspaceSlug]/(projects)/header.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { Home, Zap } from "lucide-react";
+import { Home } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
@@ -11,7 +11,7 @@ import { Breadcrumbs } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
-import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "@/constants/event-tracker";
+import { GITHUB_REDIRECTED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker } from "@/hooks/store";
 
@@ -34,20 +34,6 @@ export const WorkspaceDashboardHeader = () => {
           </div>
         </div>
         <div className="flex items-center gap-3 px-3">
-          <a
-            onClick={() =>
-              captureEvent(CHANGELOG_REDIRECTED, {
-                element: "navbar",
-              })
-            }
-            href="https://plane.so/changelog"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
-          >
-            <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
-            <span className="hidden text-xs font-medium sm:hidden md:block">{"What's new?"}</span>
-          </a>
           <a
             onClick={() =>
               captureEvent(GITHUB_REDIRECTED, {

web/ce/components/global/index.ts

@@ -1 +1,3 @@
 export * from "./version-number";
+export * from "./product-updates";
+export * from "./product-updates-modal";

web/ce/components/global/product-updates-modal.tsx

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+
+export type ProductUpdatesModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer(() => <></>);

web/ce/components/global/product-updates.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// ui
+import { CustomMenu } from "@plane/ui";
+
+export type ProductUpdatesProps = {
+  setIsChangeLogOpen: (isOpen: boolean) => void;
+};
+
+export const ProductUpdates: FC<ProductUpdatesProps> = observer(() => (
+  <CustomMenu.MenuItem>
+    <Link
+      href="https://go.plane.so/p-changelog"
+      target="_blank"
+      className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+    >
+      <span className="text-xs">What&apos;s new?</span>
+    </Link>
+  </CustomMenu.MenuItem>
+));

web/ce/components/workspace/edition-badge.tsx

@@ -24,7 +24,7 @@ export const WorkspaceEditionBadge = observer(() => {
         <Button
           tabIndex={-1}
           variant="accent-primary"
-          className="w-full cursor-pointer rounded-2xl px-4 py-1.5 text-center text-sm font-medium outline-none"
+          className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
         >
           Upgrade

web/core/components/workspace/sidebar/help-section.tsx

@@ -1,40 +1,20 @@
 "use client";
 
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
+import { FileText, HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
-import { Transition } from "@headlessui/react";
 // ui
-import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useCommandPalette, useInstance, useTransient } from "@/hooks/store";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// components
+// plane web components
-import { PlaneVersionNumber } from "@/plane-web/components/global";
+import { PlaneVersionNumber, ProductUpdates, ProductUpdatesModal } from "@/plane-web/components/global";
 import { WorkspaceEditionBadge } from "@/plane-web/components/workspace";
 
-const HELP_OPTIONS = [
-  {
-    name: "Documentation",
-    href: "https://docs.plane.so/",
-    Icon: FileText,
-  },
-  {
-    name: "Join our Discord",
-    href: "https://discord.com/invite/A92xrEGCge",
-    Icon: DiscordIcon,
-  },
-  {
-    name: "Report a bug",
-    href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: GithubIcon,
-  },
-];
-
 export interface WorkspaceHelpSectionProps {
   setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -48,125 +28,130 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
   const { isIntercomToggle, toggleIntercom } = useTransient();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-  // refs
+  const [isChangeLogOpen, setIsChangeLogOpen] = useState(false);
-  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
   const handleCrispWindowShow = () => {
     toggleIntercom(!isIntercomToggle);
   };
 
-  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
-
   const isCollapsed = sidebarCollapsed || false;
 
   return (
     <>
+      <ProductUpdatesModal isOpen={isChangeLogOpen} handleClose={() => setIsChangeLogOpen(false)} />
       <div
         className={cn(
-          "flex w-full items-center justify-between px-4 gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-14 flex-shrink-0",
+          "flex w-full items-center justify-between px-2 gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12 flex-shrink-0",
           {
             "flex-col h-auto py-1.5": isCollapsed,
           }
         )}
       >
         <div
-          className={cn("w-3/5", {
+          className={`relative flex flex-shrink-0 items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly"}`}
+        >
+          <CustomMenu
+            customButton={
+              <button
+                type="button"
+                className={cn(
+                  "grid place-items-center rounded-md p-1 outline-none text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90",
+                  {
+                    "bg-custom-background-90": isNeedHelpOpen,
+                  }
+                )}
+              >
+                <Tooltip tooltipContent="Help" isMobile={isMobile} disabled={isNeedHelpOpen}>
+                  <HelpCircle className="h-[18px] w-[18px] outline-none" />
+                </Tooltip>
+              </button>
+            }
+            customButtonClassName={`relative grid place-items-center rounded-md p-1.5 outline-none ${isCollapsed ? "w-full" : ""}`}
+            menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
+            onMenuClose={() => setIsNeedHelpOpen(false)}
+            placement={isCollapsed ? "left-end" : "top-end"}
+            maxHeight="lg"
+            closeOnSelect
+          >
+            <CustomMenu.MenuItem>
+              <Link
+                href="https://go.plane.so/p-docs"
+                target="_blank"
+                className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+              >
+                <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                <span className="text-xs">Documentation</span>
+              </Link>
+            </CustomMenu.MenuItem>
+            {config?.intercom_app_id && config?.is_intercom_enabled && (
+              <CustomMenu.MenuItem>
+                <button
+                  type="button"
+                  onClick={handleCrispWindowShow}
+                  className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
+                >
+                  <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
+                  <span className="text-xs">Message support</span>
+                </button>
+              </CustomMenu.MenuItem>
+            )}
+            <CustomMenu.MenuItem>
+              <Link
+                href="mailto:sales@plane.so"
+                target="_blank"
+                className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+              >
+                <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                <span className="text-xs">Contact sales</span>
+              </Link>
+            </CustomMenu.MenuItem>
+            <div className="my-1 border-t border-custom-border-200" />
+            <CustomMenu.MenuItem>
+              <button
+                type="button"
+                onClick={() => toggleShortcutModal(true)}
+                className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+              >
+                <span className="text-xs">Keyboard shortcuts</span>
+              </button>
+            </CustomMenu.MenuItem>
+            <ProductUpdates setIsChangeLogOpen={setIsChangeLogOpen} />
+            <CustomMenu.MenuItem>
+              <Link
+                href="https://go.plane.so/p-discord"
+                target="_blank"
+                className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+              >
+                <span className="text-xs">Community</span>
+              </Link>
+            </CustomMenu.MenuItem>
+            <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
+              <PlaneVersionNumber />
+            </div>
+          </CustomMenu>
+        </div>
+        <div
+          className={cn("w-full flex-grow px-0.5", {
             hidden: isCollapsed,
           })}
         >
           <WorkspaceEditionBadge />
         </div>
-        <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-2/5 justify-evenly"}`}>
+        <div
-          <Tooltip tooltipContent="Shortcuts" isMobile={isMobile}>
+          className={`flex flex-shrink-0 items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly"}`}
-            <button
-              type="button"
-              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-                isCollapsed ? "w-full" : ""
-              }`}
-              onClick={() => toggleShortcutModal(true)}
         >
-              <Zap className="h-3.5 w-3.5" />
-            </button>
-          </Tooltip>
-          <Tooltip tooltipContent="Help" isMobile={isMobile}>
-            <button
-              type="button"
-              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-                isCollapsed ? "w-full" : ""
-              }`}
-              onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-            >
-              <HelpCircle className="h-3.5 w-3.5" />
-            </button>
-          </Tooltip>
-
-          <button
-            type="button"
-            className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
-            onClick={() => toggleSidebar()}
-          >
-            <MoveLeft className="h-3.5 w-3.5" />
-          </button>
-
           <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`} isMobile={isMobile}>
             <button
               type="button"
-              className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+              className={`grid place-items-center rounded-md p-1 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
                 isCollapsed ? "w-full" : ""
               }`}
               onClick={() => toggleSidebar()}
             >
-              <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
+              <MoveLeft className={`h-4 w-4 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
             </button>
           </Tooltip>
         </div>
-
-        <div className="relative">
-          <Transition
-            show={isNeedHelpOpen}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <div
-              className={`absolute bottom-2 min-w-[10rem] z-[15] ${
-                isCollapsed ? "left-full" : "-left-[75px]"
-              } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
-              ref={helpOptionsRef}
-            >
-              <div className="space-y-1 pb-2">
-                {HELP_OPTIONS.map(({ name, Icon, href }) => (
-                  <Link href={href} key={name} target="_blank">
-                    <span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
-                      <div className="grid flex-shrink-0 place-items-center">
-                        <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-                      </div>
-                      <span className="text-xs">{name}</span>
-                    </span>
-                  </Link>
-                ))}
-                {config?.intercom_app_id && config?.is_intercom_enabled && (
-                  <button
-                    type="button"
-                    onClick={handleCrispWindowShow}
-                    className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
-                  >
-                    <div className="grid flex-shrink-0 place-items-center">
-                      <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
-                    </div>
-                    <span className="text-xs">Chat with us</span>
-                  </button>
-                )}
-              </div>
-              <div className="px-2 pb-1 pt-2 text-[10px]">
-                <PlaneVersionNumber />
-              </div>
-            </div>
-          </Transition>
-        </div>
       </div>
     </>
   );