feat: tooltip for collapsed drawer items

kouprlabs · Jun 29, 2024 · 8c5230c · 8c5230c
1 parent db1a2a4
commit 8c5230c
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 105 deletions.
diff --git a/ui/src/components/viewer/drawer/drawer-download-button.tsx b/ui/src/components/viewer/drawer/drawer-download-button.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton } from '@chakra-ui/react'
+import { Button, IconButton, Tooltip } from '@chakra-ui/react'
 import cx from 'classnames'
 import { File } from '@/client/api/file'
 import { IconDownload } from '@/lib/components/icons'
@@ -13,31 +13,32 @@ const DrawerDownloadButton = ({
   file,
   isCollapsed,
 }: DrawerDownloadButtonProps) => {
-  if (isCollapsed) {
-    return (
-      <IconButton
-        icon={<IconDownload />}
-        variant="solid"
-        colorScheme="blue"
-        aria-label="Download"
-        title="Download"
-        className={cx('h-[50px]', 'w-[50px]', 'p-1.5', 'rounded-md')}
-        onClick={() => downloadFile(file)}
-      />
-    )
-  } else {
-    return (
-      <Button
-        leftIcon={<IconDownload />}
-        variant="solid"
-        colorScheme="blue"
-        className={cx('h-[50px]', 'w-full', 'p-1.5', 'rounded-md')}
-        onClick={() => downloadFile(file)}
-      >
-        Download
-      </Button>
-    )
-  }
+  const label = 'Download'
+  return (
+    <Tooltip label={label} isDisabled={!isCollapsed}>
+      {isCollapsed ? (
+        <IconButton
+          icon={<IconDownload />}
+          variant="solid"
+          colorScheme="blue"
+          aria-label="Download"
+          title="Download"
+          className={cx('h-[50px]', 'w-[50px]', 'p-1.5', 'rounded-md')}
+          onClick={() => downloadFile(file)}
+        />
+      ) : (
+        <Button
+          leftIcon={<IconDownload />}
+          variant="solid"
+          colorScheme="blue"
+          className={cx('h-[50px]', 'w-full', 'p-1.5', 'rounded-md')}
+          onClick={() => downloadFile(file)}
+        >
+          {label}
+        </Button>
+      )}
+    </Tooltip>
+  )
 }
 
 export default DrawerDownloadButton
diff --git a/ui/src/components/viewer/drawer/drawer-open-new-tab-button.tsx b/ui/src/components/viewer/drawer/drawer-open-new-tab-button.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Button, IconButton } from '@chakra-ui/react'
+import { Button, IconButton, Tooltip } from '@chakra-ui/react'
 import cx from 'classnames'
 import { File } from '@/client/api/file'
 import { IconOpenInNew } from '@/lib/components/icons'
@@ -35,31 +35,31 @@ const DrawerOpenNewTabButton = ({
   if (!file.snapshot?.original) {
     return null
   }
-  if (isCollapsed) {
-    return (
-      <IconButton
-        icon={<IconOpenInNew />}
-        as="a"
-        className={cx('h-[50px]', 'w-[50px]', 'p-1.5', 'rounded-md')}
-        href={url}
-        target="_blank"
-        title={label}
-        aria-label={label}
-      />
-    )
-  } else {
-    return (
-      <Button
-        leftIcon={<IconOpenInNew />}
-        as="a"
-        className={cx('h-[50px]', 'w-full', 'p-1.5', 'rounded-md')}
-        href={url}
-        target="_blank"
-      >
-        {label}
-      </Button>
-    )
-  }
+  return (
+    <Tooltip label={label} isDisabled={!isCollapsed}>
+      {isCollapsed ? (
+        <IconButton
+          icon={<IconOpenInNew />}
+          as="a"
+          className={cx('h-[50px]', 'w-[50px]', 'p-1.5', 'rounded-md')}
+          href={url}
+          target="_blank"
+          title={label}
+          aria-label={label}
+        />
+      ) : (
+        <Button
+          leftIcon={<IconOpenInNew />}
+          as="a"
+          className={cx('h-[50px]', 'w-full', 'p-1.5', 'rounded-md')}
+          href={url}
+          target="_blank"
+        >
+          {label}
+        </Button>
+      )}
+    </Tooltip>
+  )
 }
 
 export default DrawerOpenNewTabButton
diff --git a/ui/src/lib/components/drawer/drawer-item.tsx b/ui/src/lib/components/drawer/drawer-item.tsx
@@ -1,5 +1,6 @@
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import { Tooltip } from '@chakra-ui/react'
 import cx from 'classnames'
 import { DrawerContext } from './drawer-context'
 
@@ -38,55 +39,57 @@ export const DrawerItem = ({
       title={isCollapsed ? `${primaryText}: ${secondaryText}` : secondaryText}
       className={cx('w-full')}
     >
-      <div
-        className={cx(
-          'flex',
-          'flex-row',
-          'items-center',
-          'gap-1.5',
-          'p-1.5',
-          'rounded-md',
-          {
-            'bg-black': isActive,
-            'dark:bg-white': isActive,
-          },
-          {
-            'hover:bg-gray-100': !isActive,
-            'dark:hover:bg-gray-600': !isActive,
-          },
-          {
-            'hover:bg-gray-200': !isActive,
-            'dark:hover:bg-gray-700': !isActive,
-          },
-        )}
-      >
+      <Tooltip label={primaryText} isDisabled={!isCollapsed}>
         <div
           className={cx(
             'flex',
+            'flex-row',
             'items-center',
-            'justify-center',
-            'shrink-0',
-            'w-[21px]',
-            'h-[21px]',
+            'gap-1.5',
+            'p-1.5',
+            'rounded-md',
             {
-              'text-white': isActive,
-              'dark:text-gray-800': isActive,
+              'bg-black': isActive,
+              'dark:bg-white': isActive,
+            },
+            {
+              'hover:bg-gray-100': !isActive,
+              'dark:hover:bg-gray-600': !isActive,
+            },
+            {
+              'hover:bg-gray-200': !isActive,
+              'dark:hover:bg-gray-700': !isActive,
             },
           )}
         >
-          {icon}
-        </div>
-        {!isCollapsed ? (
-          <span
-            className={cx({
-              'text-white': isActive,
-              'dark:text-gray-800': isActive,
-            })}
+          <div
+            className={cx(
+              'flex',
+              'items-center',
+              'justify-center',
+              'shrink-0',
+              'w-[21px]',
+              'h-[21px]',
+              {
+                'text-white': isActive,
+                'dark:text-gray-800': isActive,
+              },
+            )}
           >
-            {primaryText}
-          </span>
-        ) : null}
-      </div>
+            {icon}
+          </div>
+          {!isCollapsed ? (
+            <span
+              className={cx({
+                'text-white': isActive,
+                'dark:text-gray-800': isActive,
+              })}
+            >
+              {primaryText}
+            </span>
+          ) : null}
+        </div>
+      </Tooltip>
     </Link>
   )
 }
diff --git a/ui/src/lib/components/drawer/index.tsx b/ui/src/lib/components/drawer/index.tsx
@@ -29,14 +29,10 @@ const Drawer = ({ children, storage, logo }: DrawerProps) => {
       if (value) {
         collapse = JSON.parse(value)
       } else {
-        localStorage.setItem(localStorageCollapsedKey, JSON.stringify(false))
+        localStorage.setItem(localStorageCollapsedKey, JSON.stringify(true))
       }
     }
-    if (collapse) {
-      setIsCollapsed(true)
-    } else {
-      setIsCollapsed(false)
-    }
+    setIsCollapsed(collapse)
   }, [localStorageCollapsedKey, setIsCollapsed])
 
   if (isCollapsed === undefined) {

diff --git a/ui/src/lib/components/switch-card.tsx b/ui/src/lib/components/switch-card.tsx
@@ -14,6 +14,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Switch,
+  Tooltip,
 } from '@chakra-ui/react'
 import cx from 'classnames'
 
@@ -72,13 +73,17 @@ const SwitchCard = ({
     return (
       <Popover>
         <PopoverTrigger>
-          <IconButton
-            icon={icon}
-            variant="outline"
-            className={cx('w-[50px]', 'h-[50px]', 'p-1.5', 'rounded-md')}
-            aria-label={label}
-            title={label}
-          />
+          <div>
+            <Tooltip label={label}>
+              <IconButton
+                icon={icon}
+                variant="outline"
+                className={cx('w-[50px]', 'h-[50px]', 'p-1.5', 'rounded-md')}
+                aria-label={label}
+                title={label}
+              />
+            </Tooltip>
+          </div>
         </PopoverTrigger>
         <PopoverContent>
           <PopoverBody>{children}</PopoverBody>