fix: update inbox action button

Signed-off-by: Innei <tukon479@gmail.com>

apps/renderer/src/components/ui/button/index.tsx

@@ -27,8 +27,15 @@ interface ActionButtonProps {
   disabled?: boolean
   shortcut?: string
   disableTriggerShortcut?: boolean
+  size?: "sm" | "md" | "base"
 }
 
+const actionButtonStyleVariant = {
+  size: {
+    base: tw`text-xl size-8`,
+    sm: tw`text-sm size-6`,
+  },
+}
 export const ActionButton = React.forwardRef<
   HTMLButtonElement,
   ComponentType<ActionButtonProps> & React.HTMLAttributes<HTMLButtonElement>
@@ -45,6 +52,7 @@ export const ActionButton = React.forwardRef<
       shortcut,
       disabled,
       disableTriggerShortcut,
+      size = "base",
       ...rest
     },
     ref,
@@ -60,10 +68,11 @@ export const ActionButton = React.forwardRef<
         // @see https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904
         onFocusCapture={stopPropagation}
         className={cn(
-          "no-drag-region inline-flex size-8 items-center justify-center text-xl",
+          "no-drag-region inline-flex items-center justify-center",
           active && "bg-zinc-500/15 hover:bg-zinc-500/20",
           "rounded-md duration-200 hover:bg-theme-button-hover data-[state=open]:bg-theme-button-hover",
           "disabled:cursor-not-allowed disabled:opacity-50",
+          actionButtonStyleVariant.size[size],
           className,
         )}
         type="button"
@@ -86,7 +95,9 @@ export const ActionButton = React.forwardRef<
         )}
         {tooltip ? (
           <Tooltip disableHoverableContent>
-            <TooltipTrigger asChild>{Trigger}</TooltipTrigger>
+            <TooltipTrigger aria-label={typeof tooltip === "string" ? tooltip : undefined} asChild>
+              {Trigger}
+            </TooltipTrigger>
             <TooltipPortal>
               <TooltipContent className="flex items-center gap-1" side={tooltipSide ?? "bottom"}>
                 {tooltip}

apps/renderer/src/modules/discover/inbox-list-form.tsx

@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
-import { Button } from "~/components/ui/button"
+import { ActionButton, Button } from "~/components/ui/button"
 import { CopyButton } from "~/components/ui/code-highlighter"
 import { useModalStack } from "~/components/ui/modal"
 import {
@@ -78,8 +78,9 @@ export function DiscoverInboxList() {
                 </div>
               </TableCell>
               <TableCell size="sm" className="center">
-                <Button
-                  variant="ghost"
+                <ActionButton
+                  size="sm"
+                  tooltip={t("discover.inbox_destroy")}
                   onClick={() =>
                     present({
                       title: t("discover.inbox_destroy_confirm"),
@@ -96,9 +97,9 @@ export function DiscoverInboxList() {
                   }
                 >
                   <i className="i-mgc-delete-2-cute-re" />
-                </Button>
-                <Button
-                  variant="ghost"
+                </ActionButton>
+                <ActionButton
+                  size="sm"
                   onClick={() => {
                     present({
                       title: t("sidebar.feed_actions.edit_inbox"),
@@ -109,7 +110,7 @@ export function DiscoverInboxList() {
                   }}
                 >
                   <i className="i-mgc-edit-cute-re" />
-                </Button>
+                </ActionButton>
               </TableCell>
             </TableRow>
           ))}
@@ -162,9 +163,14 @@ const ConfirmDestroyModalContent = ({ id, onSuccess }: { id: string; onSuccess:
 
   return (
     <div className="w-[512px]">
-      <div className="mb-4 text-red-600">{t("discover.inbox_destroy_warning")}</div>
+      <div className="mb-4">
+        <i className="i-mingcute-warning-fill -mb-1 mr-1 size-5 text-red-500" />
+        {t("discover.inbox_destroy_warning")}
+      </div>
       <div className="flex justify-end">
-        <Button onClick={() => mutationDestroy.mutate(id)}>{t("words.confirm")}</Button>
+        <Button className="bg-red-600" onClick={() => mutationDestroy.mutate(id)}>
+          {t("words.confirm")}
+        </Button>
       </div>
     </div>
   )