Use a minimize icon in the Update skills dialog (#28107)

* fix(skills): use a minimize icon for the update dialog

* fix(skills): match the app updater minimize icon

src/renderer/src/components/skills/SkillFreshnessUpdateDialog.tsx

@@ -276,6 +276,7 @@ export function SkillFreshnessUpdateDialog(): React.JSX.Element {
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
         aria-describedby={undefined}
+        closeButtonVariant="minimize"
         className="scrollbar-sleek max-h-[85vh] overflow-y-auto sm:max-w-xl"
       >
         <DialogHeader>

src/renderer/src/components/ui/dialog.tsx

@@ -2,12 +2,13 @@
 
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { XIcon } from 'lucide-react'
+import { Minus, XIcon } from 'lucide-react'
 import * as DialogPrimitive from 'radix-ui/dialog'
 
 import { cn } from '@/lib/utils'
 import { handleImeOverlayEscape } from '@/lib/ime-overlay-escape'
 import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { translate } from '@/i18n/i18n'
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -57,17 +58,45 @@ const dialogContentSurfaceVariants = cva('', {
   defaultVariants: { surface: 'default' }
 })
 
+function DialogContentCloseButton({ variant }: { variant: 'close' | 'minimize' }) {
+  const label =
+    variant === 'minimize'
+      ? translate('auto.components.ui.dialog.minimize', 'Minimize')
+      : translate('auto.components.ui.dialog.f26c4baeda', 'Close')
+  const button = (
+    <DialogPrimitive.Close
+      data-slot="dialog-close"
+      className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    >
+      {variant === 'minimize' ? <Minus className="size-3.5" /> : <XIcon />}
+      <span className="sr-only">{label}</span>
+    </DialogPrimitive.Close>
+  )
+  return variant === 'minimize' ? (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="top" sideOffset={4}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    button
+  )
+}
+
 function DialogContent({
   className,
   children,
   overlayClassName,
   showCloseButton = true,
+  closeButtonVariant = 'close',
   surface,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> &
   VariantProps<typeof dialogContentSurfaceVariants> & {
     overlayClassName?: string
     showCloseButton?: boolean
+    closeButtonVariant?: 'close' | 'minimize'
   }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -91,17 +120,7 @@ function DialogContent({
         onEscapeKeyDown={(event) => handleImeOverlayEscape(event, props.onEscapeKeyDown)}
       >
         {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">
-              {translate('auto.components.ui.dialog.f26c4baeda', 'Close')}
-            </span>
-          </DialogPrimitive.Close>
-        )}
+        {showCloseButton && <DialogContentCloseButton variant={closeButtonVariant} />}
       </DialogPrimitive.Content>
     </DialogPortal>
   )

src/renderer/src/i18n/locales/en.json

@@ -3243,7 +3243,8 @@
           }
         },
         "dialog": {
-          "f26c4baeda": "Close"
+          "f26c4baeda": "Close",
+          "minimize": "Minimize"
         },
         "repo": {
           "multi": {

src/renderer/src/i18n/locales/es.json

@@ -3012,7 +3012,8 @@
           }
         },
         "dialog": {
-          "f26c4baeda": "Cerrar"
+          "f26c4baeda": "Cerrar",
+          "minimize": "Minimizar"
         },
         "repo": {
           "multi": {

src/renderer/src/i18n/locales/fr.json

@@ -3117,7 +3117,8 @@
           }
         },
         "dialog": {
-          "f26c4baeda": "Fermer"
+          "f26c4baeda": "Fermer",
+          "minimize": "Réduire"
         },
         "repo": {
           "multi": {

src/renderer/src/i18n/locales/ja.json

@@ -3012,7 +3012,8 @@
           }
         },
         "dialog": {
-          "f26c4baeda": "閉じる"
+          "f26c4baeda": "閉じる",
+          "minimize": "最小化"
         },
         "repo": {
           "multi": {

src/renderer/src/i18n/locales/ko.json

@@ -3012,7 +3012,8 @@
           }
         },
         "dialog": {
-          "f26c4baeda": "닫기"
+          "f26c4baeda": "닫기",
+          "minimize": "최소화"
         },
         "repo": {
           "multi": {

src/renderer/src/i18n/locales/zh.json

@@ -3012,7 +3012,8 @@
           }
         },
         "dialog": {
-          "f26c4baeda": "关闭"
+          "f26c4baeda": "关闭",
+          "minimize": "最小化"
         },
         "repo": {
           "multi": {