fix(console): hide add-account type descriptions until hover

changelog/unreleased/add-account-type-hints.md

@@ -0,0 +1,7 @@
+### English
+
+- The add-account type cards now show only the icon and title. Login details appear when you hover the info button.
+
+### 中文
+
+- 添加账号的类型卡片现在只显示图标和标题。登录方式等说明放到信息按钮上，悬停后再展开。

frontend/src/components/AddAccountModal.tsx

@@ -70,12 +70,9 @@ function AccountTypeSkeleton({ ariaLabel }: { ariaLabel: string }) {
   return (
     <div className="grid grid-cols-1 gap-2 sm:grid-cols-2" aria-busy="true" aria-label={ariaLabel}>
       {Array.from({ length: 4 }, (_, index) => (
-        <div key={index} className="flex items-start gap-2.5 rounded-xl border border-separator px-3.5 py-3">
-          <Skeleton className="mt-0.5 size-[18px] shrink-0 rounded-lg" />
-          <div className="min-w-0 flex-1 space-y-1.5">
-            <Skeleton className="h-4 w-28 rounded-lg" />
-            <Skeleton className="h-3 w-full rounded-lg" />
-          </div>
+        <div key={index} className="flex items-center gap-2.5 rounded-xl border border-separator px-3 py-2.5">
+          <Skeleton className="size-[18px] shrink-0 rounded-lg" />
+          <Skeleton className="h-4 w-28 rounded-lg" />
         </div>
       ))}
     </div>
@@ -478,7 +475,6 @@ export function AddAccountModal({ isOpen, onClose, onAdded }: Props) {
                         />
                       </>
                     )}
-                    {typesReady && hint ? <p className="min-h-5 text-xs leading-5 text-muted">{hint}</p> : null}
                   </section>
 
                   <section className="mt-5 space-y-3">

frontend/src/components/ui/OptionTiles.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
-import { Description, Label, Radio, RadioGroup } from '@heroui/react'
+import { Button, Label, Radio, RadioGroup, Tooltip } from '@heroui/react'
+import { Info } from '@phosphor-icons/react'
 
 type Option<T extends string> = {
   value: T
@@ -42,23 +43,45 @@ export function OptionTiles<T extends string>({
       className={`grid gap-2 ${columnClass[columns]} ${className}`.trim()}
     >
       {options.map((option) => (
-        <Radio
+        <div
           key={option.value}
-          value={option.value}
-          isDisabled={option.disabled}
-          className="rounded-xl border border-border bg-surface-secondary p-3 data-selected:border-accent data-selected:bg-accent-soft"
+          data-selected={option.value === value || undefined}
+          className="flex items-center gap-1 rounded-xl border border-border bg-surface-secondary p-1.5 data-selected:border-accent data-selected:bg-accent-soft"
         >
-          <Radio.Content className="w-full items-start">
-            {option.icon ? <span className="mt-0.5 shrink-0">{option.icon}</span> : null}
-            <Radio.Control>
-              <Radio.Indicator />
-            </Radio.Control>
-            <div className="min-w-0 flex-1">
-              <Label className="block truncate">{option.label}</Label>
-              {option.hint ? <Description className="mt-0.5">{option.hint}</Description> : null}
-            </div>
-          </Radio.Content>
-        </Radio>
+          <Radio
+            value={option.value}
+            isDisabled={option.disabled}
+            className="min-w-0 flex-1 border-0 bg-transparent p-1.5"
+          >
+            <Radio.Content className="w-full items-center">
+              {option.icon ? <span className="shrink-0">{option.icon}</span> : null}
+              <Radio.Control>
+                <Radio.Indicator />
+              </Radio.Control>
+              <div className="min-w-0 flex-1">
+                <Label className="block truncate">{option.label}</Label>
+              </div>
+            </Radio.Content>
+          </Radio>
+          {option.hint ? (
+            <Tooltip>
+              <Tooltip.Trigger>
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="ghost"
+                  aria-label={option.hint}
+                  className="shrink-0 text-muted"
+                >
+                  <Info size={14} />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <p className="max-w-xs text-xs leading-5">{option.hint}</p>
+              </Tooltip.Content>
+            </Tooltip>
+          ) : null}
+        </div>
       ))}
     </RadioGroup>
   )

internal/webui/static/index.html

@@ -22,8 +22,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-2slrySyr.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BjsOfFoj.css">
+    <script type="module" crossorigin src="/assets/index-oNlXVfto.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BEwWCUnU.css">
   </head>
   <body>
     <div id="root"></div>