feat(ui): enhance CommandActionButton with tooltip description and update command label structure

Innei · Innei · commit 1461daa79b71 · 2025-04-24T21:30:59.000+08:00
- Added tooltipDescription prop to ActionButton for improved user guidance.
- Updated CommandActionButton to utilize the new tooltipDescription.
- Modified Command interface to replace subTitle with description for better clarity.
- Adjusted entry command registration to include description in labels.
- Updated various components to ensure consistent text color usage for better readability.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/src/renderer/src/components/ui/button/CommandActionButton.tsx b/apps/desktop/src/renderer/src/components/ui/button/CommandActionButton.tsx
@@ -16,6 +16,14 @@ export const CommandActionButton = forwardRef<HTMLButtonElement, CommandActionBu
     if (!command) return null
     const { icon, label } = command
 
-    return <ActionButton ref={ref} icon={icon} tooltip={label.title} {...rest} />
+    return (
+      <ActionButton
+        ref={ref}
+        icon={icon}
+        tooltip={label.title}
+        tooltipDescription={label.description}
+        {...rest}
+      />
+    )
   },
 )
diff --git a/apps/desktop/src/renderer/src/hooks/biz/useEntryActions.tsx b/apps/desktop/src/renderer/src/hooks/biz/useEntryActions.tsx
@@ -20,7 +20,7 @@ import { shortcuts } from "~/constants/shortcuts"
 import { apiClient } from "~/lib/api-fetch"
 import { COMMAND_ID } from "~/modules/command/commands/id"
 import { getCommand, useRunCommandFn } from "~/modules/command/hooks/use-command"
-import type { FollowCommandId, FollowCommandMap } from "~/modules/command/types"
+import type { FollowCommandId } from "~/modules/command/types"
 import { useToolbarOrderMap } from "~/modules/customize-toolbar/hooks"
 import { useEntry } from "~/store/entry"
 import { useFeedById } from "~/store/feed"
@@ -68,7 +68,7 @@ export const toggleEntryReadability = async ({ id, url }: { id: string; url: str
   }
 }
 
-type EntryActionMenuItemConfig = {
+interface EntryActionMenuItemConfig {
   id: FollowCommandId
   onClick: () => void
   hide?: boolean
@@ -82,7 +82,6 @@ type EntryActionMenuItemConfig = {
 export class EntryActionMenuItem extends MenuItemText {
   protected privateConfig: EntryActionMenuItemConfig
 
-  private cmd: FollowCommandMap[keyof FollowCommandMap] | null = null
   constructor(config: EntryActionMenuItemConfig) {
     const cmd = getCommand(config.id) || null
     super({
@@ -91,7 +90,7 @@ export class EntryActionMenuItem extends MenuItemText {
       click: () => config.onClick?.(),
       hide: !cmd || config.hide,
     })
-    this.cmd = cmd
+
     this.privateConfig = config
   }
 
diff --git a/apps/desktop/src/renderer/src/modules/command/commands/entry.tsx b/apps/desktop/src/renderer/src/modules/command/commands/entry.tsx
@@ -340,7 +340,10 @@ export const useRegisterEntryCommands = () => {
     },
     {
       id: COMMAND_ID.entry.readability,
-      label: t("entry_content.header.readability"),
+      label: {
+        title: t("entry_content.header.readability"),
+        description: t("entry_content.header.readability_description"),
+      },
       icon: (props) => (
         <i className={props?.isActive ? "i-mgc-docment-cute-fi" : "i-mgc-docment-cute-re"} />
       ),
diff --git a/apps/desktop/src/renderer/src/modules/command/types.ts b/apps/desktop/src/renderer/src/modules/command/types.ts
@@ -56,7 +56,7 @@ export interface Command<
   readonly id: T["id"]
   readonly label: {
     title: string
-    subTitle?: string
+    description?: string
   }
   readonly icon?: ReactNode | ((props?: { isActive?: boolean }) => ReactNode)
   readonly category: CommandCategory
@@ -80,8 +80,8 @@ export interface CommandOptions<
   label:
     | string
     | (() => string)
-    | { title: string; subTitle?: string }
-    | (() => { title: string; subTitle?: string })
+    | { title: string; description?: string }
+    | (() => { title: string; description?: string })
   icon?: ReactNode | ((props?: { isActive?: boolean }) => ReactNode)
   category?: CommandCategory
   run: T["fn"]
diff --git a/apps/desktop/src/renderer/src/modules/entry-content/actions/header-actions.tsx b/apps/desktop/src/renderer/src/modules/entry-content/actions/header-actions.tsx
@@ -42,7 +42,7 @@ export const EntryHeaderActions = ({
           onClick={config.onClick!}
           shortcut={config.shortcut!}
           clickableDisabled={config.disabled}
-          tooltipDefaultOpen={config.notice}
+          highlightMotion={config.notice}
           id={`${config.entryId}/${config.id}`}
         />
       )
diff --git a/apps/mobile/web-app/html-renderer/src/components/link.tsx b/apps/mobile/web-app/html-renderer/src/components/link.tsx
@@ -21,7 +21,7 @@ export const MarkdownLink = (props: LinkProps) => {
       <TooltipTrigger asChild>
         <a
           draggable="false"
-          className="text-foreground font-semibold no-underline"
+          className="text-text font-semibold no-underline"
           href={populatedFullHref}
           title={props.title}
           target="_blank"
diff --git a/configs/tailwind-extend.css b/configs/tailwind-extend.css
@@ -395,6 +395,15 @@
   .animate-rocket {
     animation: rocketAnimation 1s infinite ease-out;
   }
+
+  @keyframes shine {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
 }
 
 @layer components {
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -132,6 +132,7 @@
   "entry_content.fetching_content": "Fetching original content and processing...",
   "entry_content.header.play_tts": "Play TTS",
   "entry_content.header.readability": "Readability",
+  "entry_content.header.readability_description": "Using readability's ability to obtain the original website content and parse it may allow for more readable content. Recommended to use it when the RSS content is not available or incomplete.",
   "entry_content.no_content": "No media available",
   "entry_content.readability_notice": "This content is provided by Readability. If you find typographical anomalies, please go to the source site to view the original content.",
   "entry_content.render_error": "Render error:",
diff --git a/packages/components/src/ui/button/action-button.tsx b/packages/components/src/ui/button/action-button.tsx
@@ -12,6 +12,7 @@ import { Tooltip, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } f
 export interface ActionButtonProps {
   icon?: React.ReactNode | ((props: { isActive?: boolean; className: string }) => React.ReactNode)
   tooltip?: React.ReactNode
+  tooltipDescription?: React.ReactNode
   tooltipSide?: "top" | "bottom"
   tooltipDefaultOpen?: boolean
   active?: boolean
@@ -22,7 +23,10 @@ export interface ActionButtonProps {
   enableHoverableContent?: boolean
   size?: "sm" | "base" | "lg"
   id?: string
-
+  /**
+   * Use motion effects to prompt and guide users to pay attention or click this button
+   */
+  highlightMotion?: boolean
   /**
    * @description only trigger shortcut when focus with in `<Focusable />`
    * @default false
@@ -47,9 +51,11 @@ export const ActionButton = React.forwardRef<
       icon,
       id,
       tooltip,
+      tooltipDescription,
       className,
       tooltipSide,
       tooltipDefaultOpen,
+      highlightMotion,
       children,
       active,
       shortcut,
@@ -82,9 +88,14 @@ 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%]",
           actionButtonStyleVariant.size[size],
           className,
         )}
+        style={{
+          ...(highlightMotion && { animationDelay: "0.5s" }),
+        }}
         type="button"
         disabled={disabled}
         onClick={
@@ -137,13 +148,21 @@ export const ActionButton = React.forwardRef<
                 {Trigger}
               </TooltipTrigger>
               <TooltipPortal>
-                <TooltipContent className="flex items-center gap-1" side={tooltipSide ?? "bottom"}>
-                  {tooltip}
-                  {!!finalShortcut && (
-                    <div className="ml-1">
-                      <KbdCombined className="text-foreground/80">{finalShortcut}</KbdCombined>
-                    </div>
-                  )}
+                <TooltipContent
+                  className="max-w-[300px] flex-col gap-1"
+                  side={tooltipSide ?? "bottom"}
+                >
+                  <div className="flex items-center gap-1">
+                    {tooltip}
+                    {!!finalShortcut && (
+                      <div className="ml-1">
+                        <KbdCombined className="text-text">{finalShortcut}</KbdCombined>
+                      </div>
+                    )}
+                  </div>
+                  {tooltipDescription ? (
+                    <div className="text-text-secondary text-body">{tooltipDescription}</div>
+                  ) : null}
                 </TooltipContent>
               </TooltipPortal>
             </TooltipRoot>
diff --git a/packages/components/src/ui/segment/index.tsx b/packages/components/src/ui/segment/index.tsx
@@ -57,7 +57,7 @@ export const SegmentItem: Component<{
       type="button"
       role="tab"
       className={cn(
-        "ring-offset-background data-[state=active]:text-foreground relative inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "ring-offset-background data-[state=active]:text-text relative inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         "focus-visible:ring-accent/30 h-full rounded-md",
         className,
       )}
diff --git a/packages/components/src/ui/tooltip/styles.ts b/packages/components/src/ui/tooltip/styles.ts
@@ -1,6 +1,6 @@
 export const tooltipStyle = {
   content: [
-    "relative z-[101] bg-white px-2 py-1 text-foreground dark:bg-neutral-950",
+    "relative z-[101] bg-white px-2 py-1 text-text dark:bg-neutral-950",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
     "rounded-lg text-sm",
     "max-w-[75ch] select-text",
diff --git a/packages/utils/src/link-parser.ts b/packages/utils/src/link-parser.ts
@@ -50,7 +50,7 @@ export const isXUrl = defineLinkParser({
 export const isV2exUrl = defineLinkParser({
   name: "v2ex",
   validator: (url) => url.hostname.includes("v2ex.com"),
-  icon: "i-simple-icons-v2ex text-foreground",
+  icon: "i-simple-icons-v2ex text-text",
 })
 
 export const isPixivUrl = defineLinkParser({

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export const EntryHeaderActions = ({`
`42`	`42`	`onClick={config.onClick!}`
`43`	`43`	`shortcut={config.shortcut!}`
`44`	`44`	`clickableDisabled={config.disabled}`
`45`		`- tooltipDefaultOpen={config.notice}`
	`45`	`+ highlightMotion={config.notice}`
`46`	`46`	id={`${config.entryId}/${config.id}`}
`47`	`47`	`/>`
`48`	`48`	`)`