fix: improve Hub download button UX for installed models

Lokimorty · Lokimorty · commit 26e1dca01d82 · 2025-11-28T01:18:27.000+03:00
When a model is downloaded in Hub, the button now displays 'New chat' with gray secondary styling (matching Settings buttons) instead of 'Use' with primary styling. This makes installed models visually distinct and clarifies the action.

Updated all 12 locale files with proper translations.
diff --git a/web-app/src/containers/DownloadButton.tsx b/web-app/src/containers/DownloadButton.tsx
@@ -137,11 +137,15 @@ export function DownloadButtonPlaceholder({
       )}
       {isDownloaded ? (
         <Button
+          variant="link"
           size="sm"
+          className="p-0"
           onClick={() => handleUseModel(modelId)}
           data-test-id={`hub-model-${modelId}`}
         >
-          {t('hub:use')}
+          <div className="rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1">
+            {t('hub:use')}
+          </div>
         </Button>
       ) : (
         <Button
diff --git a/web-app/src/containers/ModelDownloadAction.tsx b/web-app/src/containers/ModelDownloadAction.tsx
@@ -79,18 +79,17 @@ export const ModelDownloadAction = ({
 
   if (isDownloaded) {
     return (
-      <div
-        className="flex items-center justify-center rounded bg-main-view-fg/10"
+      <Button
+        variant="link"
+        size="sm"
+        className="p-0"
+        onClick={() => handleUseModel(variant.model_id)}
         title={t('hub:useModel')}
       >
-        <Button
-          variant="link"
-          size="sm"
-          onClick={() => handleUseModel(variant.model_id)}
-        >
+        <div className="rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1">
           {t('hub:use')}
-        </Button>
-      </div>
+        </div>
+      </Button>
     )
   }
 
diff --git a/web-app/src/locales/cs/hub.json b/web-app/src/locales/cs/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Newest",
   "sortMostDownloaded": "Most downloaded",
-  "use": "Use",
+  "use": "Nový chat",
   "download": "Download",
   "downloaded": "Downloaded",
   "loadingModels": "Loading models...",
diff --git a/web-app/src/locales/de-DE/hub.json b/web-app/src/locales/de-DE/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Neueste",
   "sortMostDownloaded": "Meist heruntergeladen",
-  "use": "Nutzen",
+  "use": "Neuer Chat",
   "download": "Herunterladen",
   "downloaded": "Heruntergeladen",
   "loadingModels": "Lade Modelle...",
diff --git a/web-app/src/locales/en/hub.json b/web-app/src/locales/en/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Newest",
   "sortMostDownloaded": "Most downloaded",
-  "use": "Use",
+  "use": "New chat",
   "download": "Download",
   "downloaded": "Downloaded",
   "loadingModels": "Loading models...",
diff --git a/web-app/src/locales/fr/hub.json b/web-app/src/locales/fr/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Le plus récent",
   "sortMostDownloaded": "Le plus téléchargé",
-  "use": "Utiliser",
+  "use": "Nouvelle conversation",
   "download": "Télécharger",
   "downloaded": "Téléchargé",
   "loadingModels": "Chargement des modèles...",
diff --git a/web-app/src/locales/id/hub.json b/web-app/src/locales/id/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Terbaru",
   "sortMostDownloaded": "Paling Banyak Diunduh",
-  "use": "Gunakan",
+  "use": "Chat baru",
   "download": "Unduh",
   "downloaded": "Telah Diunduh",
   "loadingModels": "Memuat model...",
diff --git a/web-app/src/locales/ja/hub.json b/web-app/src/locales/ja/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "新着順",
   "sortMostDownloaded": "ダウンロード数順",
-  "use": "使用",
+  "use": "新しいチャット",
   "download": "ダウンロード",
   "downloaded": "ダウンロード済み",
   "loadingModels": "モデルを読み込み中...",
diff --git a/web-app/src/locales/pl/hub.json b/web-app/src/locales/pl/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Najnowsze",
   "sortMostDownloaded": "Najczęściej pobierane",
-  "use": "Użyj",
+  "use": "Nowy czat",
   "download": "Pobierz",
   "downloaded": "Pobrany",
   "loadingModels": "Wczytywanie modeli…",
diff --git a/web-app/src/locales/pt-BR/hub.json b/web-app/src/locales/pt-BR/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Mais Recentes",
   "sortMostDownloaded": "Mais Baixados",
-  "use": "Usar",
+  "use": "Nova conversa",
   "download": "Baixar",
   "downloaded": "Baixado",
   "loadingModels": "Carregando modelos...",
diff --git a/web-app/src/locales/ru/hub.json b/web-app/src/locales/ru/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Самые новые",
   "sortMostDownloaded": "Наиболее загружаемые",
-  "use": "Использовать",
+  "use": "Новый чат",
   "download": "Загрузить",
   "downloaded": "Загруженные",
   "loadingModels": "Загрузка моделей…",
diff --git a/web-app/src/locales/vn/hub.json b/web-app/src/locales/vn/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Mới nhất",
   "sortMostDownloaded": "Tải nhiều nhất",
-  "use": "Sử dụng",
+  "use": "Cuộc trò chuyện mới",
   "download": "Tải xuống",
   "downloaded": "Đã tải xuống",
   "loadingModels": "Đang tải mô hình...",
diff --git a/web-app/src/locales/zh-CN/hub.json b/web-app/src/locales/zh-CN/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "最新",
   "sortMostDownloaded": "最多下载",
-  "use": "使用",
+  "use": "新对话",
   "download": "下载",
   "downloaded": "已下载",
   "loadingModels": "正在加载模型...",
diff --git a/web-app/src/locales/zh-TW/hub.json b/web-app/src/locales/zh-TW/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "最新",
   "sortMostDownloaded": "最多下載",
-  "use": "使用",
+  "use": "新對話",
   "download": "下載",
   "downloaded": "已下載",
   "loadingModels": "正在載入模型...",
diff --git a/web-app/src/routes/hub/$modelId.tsx b/web-app/src/routes/hub/$modelId.tsx
@@ -27,6 +27,7 @@ import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 import { ModelInfoHoverCard } from '@/containers/ModelInfoHoverCard'
+import { useTranslation } from '@/i18n'
 
 type SearchParams = {
   repo: string
@@ -50,6 +51,7 @@ function HubModelDetail() {
 }
 
 function HubModelDetailContent() {
+  const { t } = useTranslation()
   const { modelId } = useParams({ from: Route.id })
   const navigate = useNavigate()
   const { huggingfaceToken } = useGeneralSetting()
@@ -456,12 +458,16 @@ function HubModelDetailContent() {
                                   if (isDownloaded) {
                                     return (
                                       <Button
+                                        variant="link"
                                         size="sm"
+                                        className="p-0"
                                         onClick={() =>
                                           handleUseModel(variant.model_id)
                                         }
                                       >
-                                        Use
+                                        <div className="rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1">
+                                          {t('hub:use')}
+                                        </div>
                                       </Button>
                                     )
                                   }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Newest",`
`3`	`3`	`"sortMostDownloaded": "Most downloaded",`
`4`		`- "use": "Use",`
	`4`	`+ "use": "Nový chat",`
`5`	`5`	`"download": "Download",`
`6`	`6`	`"downloaded": "Downloaded",`
`7`	`7`	`"loadingModels": "Loading models...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Neueste",`
`3`	`3`	`"sortMostDownloaded": "Meist heruntergeladen",`
`4`		`- "use": "Nutzen",`
	`4`	`+ "use": "Neuer Chat",`
`5`	`5`	`"download": "Herunterladen",`
`6`	`6`	`"downloaded": "Heruntergeladen",`
`7`	`7`	`"loadingModels": "Lade Modelle...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Le plus récent",`
`3`	`3`	`"sortMostDownloaded": "Le plus téléchargé",`
`4`		`- "use": "Utiliser",`
	`4`	`+ "use": "Nouvelle conversation",`
`5`	`5`	`"download": "Télécharger",`
`6`	`6`	`"downloaded": "Téléchargé",`
`7`	`7`	`"loadingModels": "Chargement des modèles...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Terbaru",`
`3`	`3`	`"sortMostDownloaded": "Paling Banyak Diunduh",`
`4`		`- "use": "Gunakan",`
	`4`	`+ "use": "Chat baru",`
`5`	`5`	`"download": "Unduh",`
`6`	`6`	`"downloaded": "Telah Diunduh",`
`7`	`7`	`"loadingModels": "Memuat model...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "新着順",`
`3`	`3`	`"sortMostDownloaded": "ダウンロード数順",`
`4`		`- "use": "使用",`
	`4`	`+ "use": "新しいチャット",`
`5`	`5`	`"download": "ダウンロード",`
`6`	`6`	`"downloaded": "ダウンロード済み",`
`7`	`7`	`"loadingModels": "モデルを読み込み中...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Najnowsze",`
`3`	`3`	`"sortMostDownloaded": "Najczęściej pobierane",`
`4`		`- "use": "Użyj",`
	`4`	`+ "use": "Nowy czat",`
`5`	`5`	`"download": "Pobierz",`
`6`	`6`	`"downloaded": "Pobrany",`
`7`	`7`	`"loadingModels": "Wczytywanie modeli…",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Mais Recentes",`
`3`	`3`	`"sortMostDownloaded": "Mais Baixados",`
`4`		`- "use": "Usar",`
	`4`	`+ "use": "Nova conversa",`
`5`	`5`	`"download": "Baixar",`
`6`	`6`	`"downloaded": "Baixado",`
`7`	`7`	`"loadingModels": "Carregando modelos...",`