Improvements to the help and feedback button transition

Author: samejr

apps/webapp/app/components/AskAI.tsx

@@ -5,6 +5,7 @@ import {
   HandThumbUpIcon,
   StopIcon,
 } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
 import { type FeedbackComment, KapaProvider, type QA, useChat } from "@kapaai/react-sdk";
 import { useSearchParams } from "@remix-run/react";
 import DOMPurify from "dompurify";
@@ -37,7 +38,7 @@ function useKapaWebsiteId() {
   return routeMatch?.kapa.websiteId;
 }
 
-export function AskAI() {
+export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   const websiteId = useKapaWebsiteId();
 
@@ -46,21 +47,28 @@ export function AskAI() {
   }
 
   return (
-    <ClientOnly
-      fallback={
-        <Button
-          variant="small-menu-item"
-          data-action="ask-ai"
-          hideShortcutKey
-          data-modal-override-open-class-ask-ai="true"
-          disabled
-        >
-          <AISparkleIcon className="size-5" />
-        </Button>
-      }
+    <div
+      className={cn(
+        "transition-opacity duration-200",
+        isCollapsed ? "pointer-events-none opacity-0" : "opacity-100"
+      )}
     >
-      {() => <AskAIProvider websiteId={websiteId} />}
-    </ClientOnly>
+      <ClientOnly
+        fallback={
+          <Button
+            variant="small-menu-item"
+            data-action="ask-ai"
+            hideShortcutKey
+            data-modal-override-open-class-ask-ai="true"
+            disabled
+          >
+            <AISparkleIcon className="size-5" />
+          </Button>
+        }
+      >
+        {() => <AskAIProvider websiteId={websiteId} />}
+      </ClientOnly>
+    </div>
   );
 }
 

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -8,6 +8,7 @@ import {
   SignalIcon,
   StarIcon,
 } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useState } from "react";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
@@ -24,7 +25,13 @@ import { StepNumber } from "../primitives/StepNumber";
 import { SideMenuItem } from "./SideMenuItem";
 import { Badge } from "../primitives/Badge";
 
-export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?: boolean }) {
+export function HelpAndFeedback({
+  disableShortcut = false,
+  isCollapsed = false,
+}: {
+  disableShortcut?: boolean;
+  isCollapsed?: boolean;
+}) {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
   const currentPlan = useCurrentPlan();
 
@@ -33,16 +40,26 @@ export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?:
       <PopoverSideMenuTrigger
         isOpen={isHelpMenuOpen}
         shortcut={{ key: "h", enabledOnInputElements: false }}
-        className="grow pr-2"
+        className={isCollapsed ? "w-full justify-center" : "grow pr-2"}
         disabled={disableShortcut}
+        hideShortcutKey={isCollapsed}
       >
         <div className="flex items-center gap-1.5">
-          <QuestionMarkCircleIcon className="size-4 text-success" />
-          Help & Feedback
+          <QuestionMarkCircleIcon className="size-4.5 shrink-0 text-success" />
+          <span
+            className={cn(
+              "overflow-hidden whitespace-nowrap transition-all duration-150",
+              isCollapsed ? "max-w-0 opacity-0" : "max-w-[150px] opacity-100"
+            )}
+          >
+            Help & Feedback
+          </span>
         </div>
       </PopoverSideMenuTrigger>
       <PopoverContent
         className="min-w-[14rem] divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        side={isCollapsed ? "right" : "top"}
+        sideOffset={isCollapsed ? 8 : 4}
         align="start"
       >
         <Fragment>

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -780,12 +780,8 @@ function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
   return (
     <>
       <ShortcutsAutoOpen />
-      <CollapsibleHeight isCollapsed={isCollapsed}>
-        <HelpAndFeedback />
-      </CollapsibleHeight>
-      <CollapsibleHeight isCollapsed={isCollapsed}>
-        <AskAI />
-      </CollapsibleHeight>
+      <HelpAndFeedback isCollapsed={isCollapsed} />
+      <AskAI isCollapsed={isCollapsed} />
     </>
   );
 }

apps/webapp/app/components/primitives/Popover.tsx

@@ -154,10 +154,12 @@ function PopoverSideMenuTrigger({
   children,
   className,
   shortcut,
+  hideShortcutKey = false,
   ...props
 }: {
   isOpen?: boolean;
   shortcut?: useShortcutKeys.ShortcutDefinition;
+  hideShortcutKey?: boolean;
 } & React.ComponentPropsWithoutRef<typeof PopoverTrigger>) {
   const ref = React.useRef<HTMLButtonElement>(null);
   useShortcutKeys.useShortcutKeys({
@@ -176,14 +178,14 @@ function PopoverSideMenuTrigger({
       {...props}
       ref={ref}
       className={cn(
-        "flex h-[1.8rem] shrink-0 select-none items-center gap-x-1.5 rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
-        shortcut ? "justify-between" : "",
+        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+        shortcut && !hideShortcutKey ? "justify-between gap-x-1.5" : "",
         className
       )}
     >
       {children}
-      {shortcut && (
-        <ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
+      {shortcut && !hideShortcutKey && (
+        <ShortcutKey className="size-4 flex-none" shortcut={shortcut} variant={"small"} />
       )}
     </PopoverTrigger>
   );