add folder collapse trigger

zaknesler · Jul 7, 2024 · f2782db · f2782db
1 parent 20115d1
commit f2782db
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/ui/src/components/feed/feed-folder.tsx b/ui/src/components/feed/feed-folder.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@kobalte/core/button';
 import { Collapsible } from '@kobalte/core/collapsible';
 import { useNavigate } from '@solidjs/router';
 import { cx } from 'class-variance-authority';
@@ -18,20 +19,30 @@ export const FeedFolder: ParentComponent<FeedFolderProps> = props => {
   const isActive = () => state.params.folder_slug === props.slug;
   const [open, setOpen] = createSignal(isActive());
 
-  const handleClick = (isOpen: boolean) => {
+  const handleNavigate = (isOpen: boolean) => {
     navigate(`/folder/${props.slug}`);
     if (isOpen) setOpen(isOpen);
     else if (!isOpen && isActive()) setOpen(isOpen);
   };
 
+  const handleClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    setOpen(value => !value);
+  };
+
   return (
-    <Collapsible open={open()} onOpenChange={handleClick} class="flex flex-col items-stretch gap-1">
+    <Collapsible open={open()} onOpenChange={handleNavigate} class="flex flex-col items-stretch gap-1">
       <Collapsible.Trigger as="button" class={feedClasses.item({ active: isActive() })}>
-        <div class="flex size-7 items-center justify-center md:size-5">
-          <HiOutlineChevronRight
-            class={cx('size-4 text-gray-500 transition-transform md:size-3', open() && 'rotate-90')}
-          />
-        </div>
+        <Button class={feedClasses.folderTrigger({ active: isActive() })} onClick={handleClick}>
+          <div class="flex size-7 items-center justify-center md:size-5">
+            <HiOutlineChevronRight
+              class={cx('size-4 text-gray-500 transition-transform md:size-3', open() && 'rotate-90')}
+            />
+          </div>
+        </Button>
+
         <span class="text-base md:text-sm">{props.label}</span>
       </Collapsible.Trigger>
 

diff --git a/ui/src/constants/ui/feed.ts b/ui/src/constants/ui/feed.ts
@@ -11,32 +11,26 @@ const inactiveClass = cx(
   'focus:text-gray-700 dark:focus:text-white',
 );
 
-export const item = cva(
-  [
-    base,
-    'flex w-full flex-1 select-none items-center gap-2 rounded-lg border p-1 text-base no-underline outline-none transition',
-  ],
-  {
-    variants: {
-      active: {
-        true: 'border-gray-200 bg-gray-100 text-gray-900 xl:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-white',
-        false: inactiveClass,
-      },
-    },
-    defaultVariants: {
-      active: false,
-    },
-  },
-);
-
-export const folder = cva([base, inactiveClass], {
+export const item = cva(base, {
   variants: {
     active: {
-      true: '',
+      true: 'border-gray-200 bg-gray-100 text-gray-900 xl:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-white',
       false: inactiveClass,
     },
   },
   defaultVariants: {
     active: false,
   },
 });
+
+export const folderTrigger = cva(
+  'rounded-md border border-transparent transition focus:border-gray-400 focus:outline-none md:rounded dark:focus:border-gray-600',
+  {
+    variants: {
+      active: {
+        true: 'hover:bg-gray-200',
+        false: 'hover:bg-gray-200 xl:hover:bg-white',
+      },
+    },
+  },
+);