fix: add tooltip for resize panel

Signed-off-by: Innei <i@innei.in>

Author: Innei

apps/renderer/src/components/ui/divider/PanelSpliter.tsx

@@ -1,14 +1,19 @@
 import * as React from "react"
 
+import { useMeasure } from "~/hooks/common"
 import { cn } from "~/lib/utils"
 
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip"
+
 export const PanelSplitter = (
   props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     isDragging?: boolean
     cursor?: string
+
+    tooltip?: React.ReactNode
   },
 ) => {
-  const { isDragging, cursor, ...rest } = props
+  const { isDragging, cursor, tooltip, ...rest } = props
 
   React.useEffect(() => {
     if (!isDragging) return
@@ -26,16 +31,30 @@ export const PanelSplitter = (
     }
   }, [cursor, isDragging])
 
+  const [ref, { height }] = useMeasure()
+
+  const El = (
+    <div
+      tabIndex={-1}
+      ref={ref}
+      {...rest}
+      className={cn(
+        "absolute inset-0 z-[11] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500",
+        isDragging ? "bg-accent" : "",
+      )}
+    />
+  )
+
   return (
     <div className="relative h-full w-0 shrink-0">
-      <div
-        tabIndex={-1}
-        {...rest}
-        className={cn(
-          "absolute inset-0 z-[11] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500",
-          isDragging ? "bg-accent" : "",
-        )}
-      />
+      {tooltip ? (
+        <Tooltip>
+          <TooltipTrigger>{El}</TooltipTrigger>
+          <TooltipContent sideOffset={height / 2}>{tooltip}</TooltipContent>
+        </Tooltip>
+      ) : (
+        El
+      )}
     </div>
   )
 }

apps/renderer/src/constants/shortcuts.ts

@@ -18,7 +18,7 @@ export const shortcuts = {
   layout: {
     toggleSidebar: {
       name: "keys.layout.toggleSidebar",
-      key: "Meta+B",
+      key: "Meta+B, [",
     },
     showShortcuts: {
       name: "keys.layout.showShortcuts",

apps/renderer/src/modules/feed-column/header.tsx

@@ -1,6 +1,6 @@
 import { m } from "framer-motion"
 import type { FC, PropsWithChildren } from "react"
-import { memo, useCallback, useRef, useState } from "react"
+import { memo, useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { toast } from "sonner"
@@ -77,10 +77,16 @@ export const FeedColumnHeader = memo(() => {
 const LayoutActionButton = () => {
   const feedColumnShow = useFeedColumnShow()
 
-  const [animation] = useState({
+  const [animation, setAnimation] = useState({
     width: !feedColumnShow ? "auto" : 0,
   })
 
+  useEffect(() => {
+    setAnimation({
+      width: !feedColumnShow ? "auto" : 0,
+    })
+  }, [feedColumnShow])
+
   const t = useI18n()
   return (
     <m.div initial={animation} animate={animation} className="overflow-hidden">

apps/renderer/src/pages/(main)/layout.tsx

@@ -4,7 +4,7 @@ import { throttle } from "lodash-es"
 import type { PropsWithChildren } from "react"
 import React, { useEffect, useRef, useState } from "react"
 import { useHotkeys } from "react-hotkeys-hook"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import { useResizable } from "react-resizable-layout"
 import { Outlet } from "react-router-dom"
 
@@ -15,12 +15,14 @@ import { useLoginModalShow, useWhoami } from "~/atoms/user"
 import { AppErrorBoundary } from "~/components/common/AppErrorBoundary"
 import { ErrorComponentType } from "~/components/errors/enum"
 import { PanelSplitter } from "~/components/ui/divider"
+import { Kbd } from "~/components/ui/kbd/Kbd"
 import { DeclarativeModal } from "~/components/ui/modal/stacked/declarative-modal"
 import { NoopChildren } from "~/components/ui/modal/stacked/utils"
 import { RootPortal } from "~/components/ui/portal"
 import { HotKeyScopeMap } from "~/constants"
 import { shortcuts } from "~/constants/shortcuts"
 import { useDailyTask } from "~/hooks/biz/useDailyTask"
+import { useI18n } from "~/hooks/common"
 import { preventDefault } from "~/lib/dom"
 import { cn } from "~/lib/utils"
 import { EnvironmentIndicator } from "~/modules/app/EnvironmentIndicator"
@@ -200,6 +202,7 @@ const FeedResponsiveResizerContainer = ({
       timer = clearTimeout(timer)
     }
   }, [feedColumnShow])
+  const t = useI18n()
 
   return (
     <>
@@ -217,9 +220,6 @@ const FeedResponsiveResizerContainer = ({
           "--fo-feed-col-w": `${position}px`,
         }}
       >
-        {/* {React.cloneElement(children, {
-          className: "!bg-native",
-        })} */}
         <Slot className={!feedColumnShow ? "!bg-native" : ""}>{children}</Slot>
       </div>
 
@@ -231,7 +231,34 @@ const FeedResponsiveResizerContainer = ({
       />
 
       {delayShowSplitter && (
-        <PanelSplitter isDragging={isDragging} cursor={separatorCursor} {...separatorProps} />
+        <PanelSplitter
+          isDragging={isDragging}
+          cursor={separatorCursor}
+          {...separatorProps}
+          onDoubleClick={() => {
+            setFeedColumnShow(false)
+          }}
+          tooltip={
+            !isDragging && (
+              <>
+                <div>
+                  {/* <b>Drag</b> to resize */}
+                  <Trans t={t} i18nKey="resize.tooltip.drag_to_resize" components={{ b: <b /> }} />
+                </div>
+                <div className="center">
+                  <span>
+                    <Trans
+                      t={t}
+                      i18nKey="resize.tooltip.double_click_to_collapse"
+                      components={{ b: <b /> }}
+                    />
+                  </span>{" "}
+                  <Kbd className="ml-1">{"["}</Kbd>
+                </div>
+              </>
+            )
+          }
+        />
       )}
     </>
   )

locales/app/en.json

@@ -127,6 +127,8 @@
   "player.playback_rate": "Playback Rate",
   "player.unmute": "Unmute",
   "player.volume": "Volume",
+  "resize.tooltip.double_click_to_collapse": "<b>Double click</b> to collapse",
+  "resize.tooltip.drag_to_resize": "<b>Drag</b> to resize",
   "search.empty.no_results": "No results found.",
   "search.group.entries": "Entries",
   "search.group.feeds": "Feeds",