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 [outputPrice, setOutputPrice] = React.useState("");
const [creating, setCreating] = React.useState(false); const [creating, setCreating] = React.useState(false);
const [formError, setFormError] = React.useState<string | null>(null); 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 () => { const load = React.useCallback(async () => {
setLoading(true); setLoading(true);
@@ -253,6 +257,9 @@ export default function AdminModelsPage() {
reasoning_effort: effort || undefined, reasoning_effort: effort || undefined,
}); });
setModels((current) => [created, ...current]); setModels((current) => [created, ...current]);
setJustAddedId(created.id);
window.setTimeout(() => setJustAddedId(null), 2500);
listRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
setModelId(""); setModelId("");
setEffort(""); setEffort("");
setInputPrice(""); setInputPrice("");
@@ -328,9 +335,11 @@ export default function AdminModelsPage() {
options={ options={
!accountId !accountId
? [{ value: "", label: "ابتدا یک اکانت انتخاب کنید" }] ? [{ value: "", label: "ابتدا یک اکانت انتخاب کنید" }]
: modelOptions.length === 0 : catalogLoading
? [{ value: "", label: "کاتالوگی برای این اکانت نیست" }] ? [{ value: "", label: "در حال بارگذاری کاتالوگ…" }]
: modelOptions : modelOptions.length === 0
? [{ value: "", label: "کاتالوگی برای این اکانت نیست" }]
: modelOptions
} }
disabled={!accountId || catalogLoading || modelOptions.length === 0} disabled={!accountId || catalogLoading || modelOptions.length === 0}
/> />
@@ -421,6 +430,7 @@ export default function AdminModelsPage() {
description="بدون مدل فعال، هیچ حالت مسیریابی قابل اجرا نیست." description="بدون مدل فعال، هیچ حالت مسیریابی قابل اجرا نیست."
/> />
) : ( ) : (
<div ref={listRef}>
<Card> <Card>
<CardTitle>فهرست مدل‌ها</CardTitle> <CardTitle>فهرست مدل‌ها</CardTitle>
<div className="mt-3 overflow-x-auto"> <div className="mt-3 overflow-x-auto">
@@ -437,7 +447,13 @@ export default function AdminModelsPage() {
</thead> </thead>
<tbody className="anim-stagger"> <tbody className="anim-stagger">
{models.map((model) => ( {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"> <td className="px-2 py-2">
<span className="ltr-inline text-slate-200">{model.internal_name}</span> <span className="ltr-inline text-slate-200">{model.internal_name}</span>
<p className="text-xs text-slate-500"> <p className="text-xs text-slate-500">
@@ -477,6 +493,7 @@ export default function AdminModelsPage() {
</table> </table>
</div> </div>
</Card> </Card>
</div>
)} )}
</div> </div>
); );