fix: toc item overflow and speed up entry transition

Innei · Innei · commit 15b981382030 · 2025-05-23T12:57:30.000+08:00
- Added EllipsisHorizontalTextWithTooltip for better title display in the Table of Contents.
- Updated scroll handling to dispatch layout focus command.
- Adjusted initial and exit motion variants for smoother animations in entry content.
- Changed transition to a bouncy effect for improved visual feedback.

These changes improve user experience and visual consistency across the application.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/components/ui/markdown/components/Toc.tsx b/apps/desktop/layer/renderer/src/components/ui/markdown/components/Toc.tsx
@@ -1,10 +1,14 @@
 import { useViewport } from "@follow/components/hooks/useViewport.js"
+import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/EllipsisWithTooltip.js"
+import { nextFrame } from "@follow/utils/dom"
+import { EventBus } from "@follow/utils/event-bus"
 import { cn } from "@follow/utils/utils"
 import * as HoverCard from "@radix-ui/react-hover-card"
 import { AnimatePresence, m } from "motion/react"
 import { memo, use, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react"
 
 import { useRealInWideMode } from "~/atoms/settings/ui"
+import { COMMAND_ID } from "~/modules/command/commands/id"
 import {
   useWrappedElementPosition,
   useWrappedElementSize,
@@ -172,18 +176,24 @@ const TocHoverCard: React.FC<TocHoverCardProps> = ({
                         style={{ paddingLeft: `${(heading.depth - rootDepth) * 12}px` }}
                       >
                         <button
+                          tabIndex={1}
                           className={cn(
                             "group flex w-full cursor-pointer justify-between py-1",
                             index === currentScrollRange[0] ? "text-accent" : "",
                           )}
                           type="button"
                           onClick={() => {
                             handleScrollTo(index, heading.$heading, heading.anchorId)
+                            nextFrame(() => {
+                              EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender, {
+                                highlightBoundary: false,
+                              })
+                            })
                           }}
                         >
-                          <span className="group-hover:text-accent/80 select-none duration-200">
+                          <EllipsisHorizontalTextWithTooltip className="group-hover:text-accent/80 max-w-prose select-none truncate duration-200">
                             {heading.title}
-                          </span>
+                          </EllipsisHorizontalTextWithTooltip>
 
                           <span className="ml-4 select-none text-[8px] opacity-50">
                             H{heading.depth}
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx
@@ -61,9 +61,9 @@ import {
 import { EntryContentLoading } from "./loading"
 
 const pageMotionVariants = {
-  initial: { opacity: 0, y: 50 },
+  initial: { opacity: 0, y: 25 },
   animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: 50, transition: { duration: 0 } },
+  exit: { opacity: 0, y: 25, transition: { duration: 0 } },
 } satisfies Variants
 
 export const EntryContent: Component<EntryContentProps> = ({
@@ -147,7 +147,7 @@ export const EntryContent: Component<EntryContentProps> = ({
           <m.div
             initial={pageMotionVariants.initial}
             animate={animationController}
-            transition={Spring.presets.smooth}
+            transition={Spring.presets.bouncy}
             className="select-text"
           >
             {!isZenMode && (
diff --git a/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx b/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx
@@ -48,6 +48,7 @@ export const GlobalHotkeysProvider = () => {
   // Re force to sidebar focusable
   useEventListener("focusout", () => {
     const { activeElement } = document
+
     if (
       activeElement === document.body &&
       activeScopes.length === 1 &&
