feat(ui): add readability command to entry item wrapper and enhance action button animation

Innei · Innei · commit 6256b7d76286 · 2025-04-24T21:44:55.000+08:00
- Introduced a new readability command in the EntryItemWrapper for improved user interaction.
- Updated ActionButton to utilize a radial pulse animation for enhanced visual feedback.
- Adjusted state management in ActionButton to control highlight motion based on user interaction.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/src/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/desktop/src/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -110,6 +110,7 @@ export const EntryItemWrapper: FC<
               COMMAND_ID.entry.toggleAISummary,
               COMMAND_ID.entry.toggleAITranslation,
               COMMAND_ID.settings.customizeToolbar,
+              COMMAND_ID.entry.readability,
             ].includes(item.id as any)
           }),
           MENU_ITEM_SEPARATOR,
diff --git a/configs/tailwind-extend.css b/configs/tailwind-extend.css
@@ -396,12 +396,29 @@
     animation: rocketAnimation 1s infinite ease-out;
   }
 
-  @keyframes shine {
+  @keyframes radialPulse {
     0% {
-      background-position: -200% 0;
+      background: radial-gradient(
+        circle,
+        var(--highlight-color, hsl(var(--fo-a) / 0.3)) 0%,
+        transparent 0%
+      );
+    }
+    40% {
+      background: radial-gradient(
+        circle,
+        var(--highlight-color, hsl(var(--fo-a) / 0.3)) 0%,
+        transparent 50%
+      );
+      opacity: 1;
     }
     100% {
-      background-position: 200% 0;
+      background: radial-gradient(
+        circle,
+        var(--highlight-color, oklch(var(--fo-a) / 0.3)) 0%,
+        transparent 80%
+      );
+      opacity: 0;
     }
   }
 }
diff --git a/packages/components/src/ui/button/action-button.tsx b/packages/components/src/ui/button/action-button.tsx
@@ -75,6 +75,7 @@ export const ActionButton = React.forwardRef<
     const buttonRef = React.useRef<HTMLButtonElement>(null)
     React.useImperativeHandle(ref, () => buttonRef.current!)
 
+    const [shouldHighlightMotion, setShouldHighlightMotion] = useState(highlightMotion)
     const [loading, setLoading] = useState(false)
 
     const Trigger = (
@@ -88,19 +89,26 @@ export const ActionButton = React.forwardRef<
           "hover:bg-theme-item-hover data-[state=open]:bg-theme-item-active rounded-md duration-200",
           "disabled:cursor-not-allowed disabled:opacity-50",
           clickableDisabled && "cursor-not-allowed opacity-50",
-          highlightMotion &&
-            "before:via-theme-accent/30 relative before:absolute before:inset-0 before:animate-[shine_6s_ease-in-out_infinite] before:rounded-md before:bg-gradient-to-r before:from-transparent before:to-transparent before:bg-[length:200%_100%]",
+          shouldHighlightMotion &&
+            "relative after:absolute after:inset-0 after:animate-[radialPulse_3s_ease-in-out_infinite] after:rounded-md after:bg-center after:bg-no-repeat after:content-['']",
           actionButtonStyleVariant.size[size],
           className,
         )}
         style={{
-          ...(highlightMotion && { animationDelay: "0.5s" }),
+          ...rest.style,
+          ...(shouldHighlightMotion
+            ? ({
+                "--tw-accent-opacity": "0.3",
+                "--highlight-color": "hsl(var(--fo-a) / var(--tw-accent-opacity))",
+              } as React.CSSProperties)
+            : {}),
         }}
         type="button"
         disabled={disabled}
         onClick={
-          typeof onClick === "function"
+          onClick
             ? async (e) => {
+                setShouldHighlightMotion(false)
                 if (loading) return
                 setLoading(true)
                 try {
@@ -109,7 +117,7 @@ export const ActionButton = React.forwardRef<
                   setLoading(false)
                 }
               }
-            : onClick
+            : void 0
         }
         {...rest}
       >
