fix(admin/models): make add-to-list visible + clarify account->model loading

- Newly added model is highlighted (2.5s) and the list scrolls into
  view so the owner sees it land immediately after create.
- Model dropdown shows an explicit 'loading catalog…' placeholder while
  the selected account's live catalogue is fetched, instead of a
  misleading 'no catalog' message during the request.
This commit is contained in:
mjalmoudy94
2026-10-13 17:11:56 +03:30
parent 91a8ae6c63
commit 3711ca5513
+21 -4
View File
@@ -116,6 +116,10 @@ export default function AdminModelsPage() {
const [outputPrice, setOutputPrice] = React.useState("");
const [creating, setCreating] = React.useState(false);
const [formError, setFormError] = React.useState<string | null>(null);
/** The id of the model just added, briefly highlighted so the owner sees the
* list updated without hunting for it (the list sits below the form). */
const [justAddedId, setJustAddedId] = React.useState<string | null>(null);
const listRef = React.useRef<HTMLDivElement | null>(null);
const load = React.useCallback(async () => {
setLoading(true);
@@ -253,6 +257,9 @@ export default function AdminModelsPage() {
reasoning_effort: effort || undefined,
});
setModels((current) => [created, ...current]);
setJustAddedId(created.id);
window.setTimeout(() => setJustAddedId(null), 2500);
listRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
setModelId("");
setEffort("");
setInputPrice("");
@@ -328,9 +335,11 @@ export default function AdminModelsPage() {
options={
!accountId
? [{ value: "", label: "ابتدا یک اکانت انتخاب کنید" }]
: modelOptions.length === 0
? [{ value: "", label: "کاتالوگی برای این اکانت نیست" }]
: modelOptions
: catalogLoading
? [{ value: "", label: "در حال بارگذاری کاتالوگ…" }]
: modelOptions.length === 0
? [{ value: "", label: "کاتالوگی برای این اکانت نیست" }]
: modelOptions
}
disabled={!accountId || catalogLoading || modelOptions.length === 0}
/>
@@ -421,6 +430,7 @@ export default function AdminModelsPage() {
description="بدون مدل فعال، هیچ حالت مسیریابی قابل اجرا نیست."
/>
) : (
<div ref={listRef}>
<Card>
<CardTitle>فهرست مدل‌ها</CardTitle>
<div className="mt-3 overflow-x-auto">
@@ -437,7 +447,13 @@ export default function AdminModelsPage() {
</thead>
<tbody className="anim-stagger">
{models.map((model) => (
<tr key={model.id} className="border-b border-surface-border/60">
<tr
key={model.id}
className={
"border-b border-surface-border/60" +
(model.id === justAddedId ? " bg-emerald-500/10" : "")
}
>
<td className="px-2 py-2">
<span className="ltr-inline text-slate-200">{model.internal_name}</span>
<p className="text-xs text-slate-500">
@@ -477,6 +493,7 @@ export default function AdminModelsPage() {
</table>
</div>
</Card>
</div>
)}
</div>
);