diff --git a/studio/frontend/src/features/settings/tabs/general-tab.tsx b/studio/frontend/src/features/settings/tabs/general-tab.tsx index 6e34b3b23d..5f926e34c3 100644 --- a/studio/frontend/src/features/settings/tabs/general-tab.tsx +++ b/studio/frontend/src/features/settings/tabs/general-tab.tsx @@ -25,8 +25,9 @@ import { useShowLlamaUpdateBanner, } from "@/hooks/use-llama-update-pref"; import { LOCALE_STORAGE_KEY, useT } from "@/i18n"; +import { cn } from "@/lib/utils"; import { useNavigate, useRouterState } from "@tanstack/react-router"; -import { Eye, EyeOff } from "lucide-react"; +import { Check, Eye, EyeOff } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { type HelperPrecacheSettings, @@ -171,6 +172,12 @@ export function GeneralTab() { if (trimmed !== hfToken) setHfToken(trimmed); }; + // Show an "accepted" tick once a non-empty token has been committed to the + // store and the field still matches it (i.e. not mid-edit). Gives the user + // feedback that a pasted token was saved. + const tokenSaved = + draftToken.trim().length > 0 && draftToken.trim() === (hfToken ?? ""); + useEffect(() => { let cancelled = false; void loadUploadLimitSettings() @@ -319,8 +326,22 @@ export function GeneralTab() { value={draftToken} onChange={(e) => setDraftToken(e.target.value)} onBlur={commitToken} - className="h-8 w-full pr-8 font-mono text-xs" + className={cn( + "h-8 w-full font-mono text-xs", + tokenSaved ? "pr-14" : "pr-8", + )} /> + {tokenSaved ? ( + // Decorative: pointer-events-none lets clicks reach the input + // underneath so the field still focuses anywhere. + + + + ) : null}