fix: restore threadDoubleAccordion sticky effect

bitcashorg · May 2, 2024 · 69e2f6e · 69e2f6e
1 parent 00f952c
commit 69e2f6e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/apps/masterbots.ai/components/shared/thread-list-accordion.tsx b/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
@@ -35,8 +35,9 @@ export function ThreadListAccordion({
       type="multiple"
     >
       {/* Frist level question and excerpt visible  on lists */}
-      <AccordionItem value="pair-1">
+      <AccordionItem className="relative" value="pair-1">
         <AccordionTrigger
+          isSticky
           className={cn('hover:bg-mirage px-5', state.isOpen && 'bg-mirage')}
         >
           <ThreadHeading

diff --git a/apps/masterbots.ai/components/ui/accordion.tsx b/apps/masterbots.ai/components/ui/accordion.tsx
@@ -5,6 +5,11 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { ChevronDown } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
+interface AccordionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+  isSticky?: boolean
+}
+
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
@@ -21,9 +26,16 @@ AccordionItem.displayName = 'AccordionItem'
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+  AccordionTriggerProps
+>(({ className, isSticky = false, children, ...props }, ref) => (
+  <AccordionPrimitive.Header
+    className={cn(
+      'flex',
+      isSticky
+        ? '[&[data-state=open]]:sticky [&[data-state=open]]:top-0 z-[1]'
+        : ''
+    )}
+  >
     <AccordionPrimitive.Trigger
       className={cn(
         'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',