refactor: implement useDialogSnapshot for stable state management across various components

frontend/features/admin/components/sections/about/admin-about.tsx

@@ -28,6 +28,7 @@ import {
   writeCachedLatestRelease,
 } from "@/features/admin/model/update-check";
 import { AboutSettingsContent } from "@/shared/components/about-settings-content";
+import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot";
 import { cn } from "@/lib/utils";
 
 type GitHubRelease = {
@@ -133,30 +134,31 @@ function UpdateResultDialog({
 }) {
   const t = useTranslations("adminUsers.aboutPage");
   const currentVersion = formatReleaseVersion(packageMeta.version);
-  const latestVersion = state?.type === "available" ? formatReleaseVersion(state.release.version) : "";
+  const stableState = useDialogSnapshot(state);
+  const latestVersion = stableState?.type === "available" ? formatReleaseVersion(stableState.release.version) : "";
 
   return (
     <Dialog open={state !== null} onOpenChange={onOpenChange}>
       <DialogContent className="flex max-h-[min(86vh,760px)] flex-col gap-0 overflow-hidden p-0 sm:max-w-[420px]">
         <DialogHeader className="shrink-0 px-4 py-4">
           <DialogTitle>
-            {state?.type === "available"
+            {stableState?.type === "available"
               ? t("updateDialog.availableTitle")
-              : state?.type === "failed"
+              : stableState?.type === "failed"
                 ? t("updateDialog.failedTitle")
                 : t("updateDialog.currentTitle")}
           </DialogTitle>
           <DialogDescription>
-            {state?.type === "available"
+            {stableState?.type === "available"
               ? t("updateDialog.availableDescription", { current: currentVersion, latest: latestVersion })
-              : state?.type === "failed"
+              : stableState?.type === "failed"
                 ? t("updateDialog.failedDescription")
                 : t("updateDialog.currentDescription", { current: currentVersion })}
           </DialogDescription>
         </DialogHeader>
 
         <div className="min-h-0 flex-1 overflow-y-auto px-4 py-2">
-          {state?.type === "available" ? (
+          {stableState?.type === "available" ? (
             <div className="rounded-md bg-muted/50 px-3 py-2 text-xs">
               <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
                 <span className="text-muted-foreground">{t("updateDialog.currentVersion")}</span>
@@ -174,14 +176,14 @@ function UpdateResultDialog({
               {t("updateDialog.close")}
             </Button>
           </DialogClose>
-          {state?.type === "failed" ? (
+          {stableState?.type === "failed" ? (
             <Button type="button" onClick={onRetry}>
               {t("updateDialog.retry")}
             </Button>
           ) : null}
-          {state?.type === "available" ? (
+          {stableState?.type === "available" ? (
             <Button asChild type="button">
-              <a href={state.release.url} target="_blank" rel="noopener noreferrer">
+              <a href={stableState.release.url} target="_blank" rel="noopener noreferrer">
                 {t("updateDialog.openRelease")}
               </a>
             </Button>

frontend/features/admin/components/sections/accounts/accounts-users.tsx

@@ -47,6 +47,7 @@ import type { ImportOpenWebUIUsersData, ImportOpenWebUIUsersRequest } from "@/fe
 import { resolveAvatarImageSrc } from "@/shared/lib/avatar";
 import { useAuthSession } from "@/shared/auth/auth-session-context";
 import { resolveAccessToken } from "@/shared/auth/resolve-access-token";
+import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot";
 import { TimeZoneSelect } from "@/shared/components/time-zone-select";
 import type { AdminUserRole, AdminUserStatus } from "@/features/admin/api/admin.types";
 import type { AdminBillingMode } from "@/features/admin/api/billing.types";
@@ -514,6 +515,8 @@ export function AccountsUsers({
     onSetUsers,
     onSetTotal,
   });
+  const stableEditDialogTarget = useDialogSnapshot(editDialogTarget);
+  const stableResetPasswordDraft = useDialogSnapshot(resetDialogTarget ? resetPasswordDraft : null) ?? "";
   const virtualRows = useVirtualTableRows(filteredItems, {
     enabled: filteredItems.length > 100,
     estimateSize: 40,
@@ -945,16 +948,16 @@ export function AccountsUsers({
         onSubmit={handleImportOpenWebUI}
       />
 
-      {editDialogTarget ? (
+      {stableEditDialogTarget ? (
         <EditUserSheet
-          open
+          open={Boolean(editDialogTarget)}
           onOpenChange={(open) => {
             if (!open && pendingAction !== "edit") {
               setEditDialogTarget(null);
             }
           }}
           pending={pendingAction === "edit"}
-          editDialogTarget={editDialogTarget}
+          editDialogTarget={stableEditDialogTarget}
           editPayload={editPayload}
           setEditPayload={setEditPayload}
           billingMode={billingMode}
@@ -966,27 +969,27 @@ export function AccountsUsers({
           onOpenEditAvatarDialog={() => {
             setAvatarDialog({
               mode: "edit",
-              target: editDialogTarget,
-              value: editPayload.avatarURL.trim() || editDialogTarget.avatarURL.trim(),
+              target: stableEditDialogTarget,
+              value: editPayload.avatarURL.trim() || stableEditDialogTarget.avatarURL.trim(),
             });
           }}
           onOpenResetPasswordDialog={() => {
-            setResetDialogTarget(editDialogTarget);
+            setResetDialogTarget(stableEditDialogTarget);
             setResetPasswordDraft("");
           }}
           onOpenResetTwoFactorDialog={() => {
-            setResetTwoFactorDialogTarget(editDialogTarget);
+            setResetTwoFactorDialogTarget(stableEditDialogTarget);
           }}
           onOpenRevokeDialog={() => {
-            setRevokeDialogTarget(editDialogTarget);
+            setRevokeDialogTarget(stableEditDialogTarget);
           }}
           onOpenDeleteDialog={() => {
-            setDeleteDialogTarget(editDialogTarget);
+            setDeleteDialogTarget(stableEditDialogTarget);
           }}
-          resetPasswordPending={pendingAction === "reset-password" && actionUserID === editDialogTarget.id}
-          resetTwoFactorPending={pendingAction === "reset-2fa" && actionUserID === editDialogTarget.id}
-          revokePending={pendingAction === "revoke-sessions" && actionUserID === editDialogTarget.id}
-          deletePending={pendingAction === "delete" && actionUserID === editDialogTarget.id}
+          resetPasswordPending={pendingAction === "reset-password" && actionUserID === stableEditDialogTarget.id}
+          resetTwoFactorPending={pendingAction === "reset-2fa" && actionUserID === stableEditDialogTarget.id}
+          revokePending={pendingAction === "revoke-sessions" && actionUserID === stableEditDialogTarget.id}
+          deletePending={pendingAction === "delete" && actionUserID === stableEditDialogTarget.id}
           resolveUserInitial={resolveUserInitial}
         />
       ) : null}
@@ -1000,7 +1003,7 @@ export function AccountsUsers({
           }
         }}
         pending={pendingAction === "reset-password"}
-        password={resetPasswordDraft}
+        password={stableResetPasswordDraft}
         onPasswordChange={setResetPasswordDraft}
         onConfirm={() => void onResetPassword()}
         onCancel={() => {

frontend/features/admin/components/sections/billing/billing-plan.tsx

@@ -10,6 +10,7 @@ import type { PermissionGroup } from "@/features/admin/api/permission-groups";
 import { resolveAdminErrorMessage } from "@/features/admin/utils/admin-error";
 import { createPlanFormState, parseIntValue, parsePrice, type PlanFormState } from "@/features/admin/model/billing-settings";
 import { resolveAccessToken } from "@/shared/auth/resolve-access-token";
+import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot";
 import { PlanBillingDialog } from "@/features/admin/components/sections/billing/billing-dialogs";
 import { PeriodBillingTable } from "@/features/admin/components/sections/billing/billing-tables";
 
@@ -25,6 +26,7 @@ export function BillingPlanSection({ plans, setPlans, permissionGroups, loading
   const [saving, setSaving] = React.useState(false);
   const [editPlan, setEditPlan] = React.useState<AdminBillingPlanDTO | null>(null);
   const [planForm, setPlanForm] = React.useState<PlanFormState | null>(null);
+  const stablePlanForm = useDialogSnapshot(planForm);
 
   function openPlanEdit(plan: AdminBillingPlanDTO) {
     setEditPlan(plan);
@@ -73,7 +75,7 @@ export function BillingPlanSection({ plans, setPlans, permissionGroups, loading
       <PlanBillingDialog
         open={!!editPlan && !!planForm}
         saving={saving}
-        planForm={planForm}
+        planForm={stablePlanForm}
         setPlanForm={setPlanForm}
         permissionGroups={permissionGroups}
         onOpenChange={(open) => {

frontend/features/admin/components/sections/billing/billing-prices.tsx

@@ -49,6 +49,7 @@ import {
 import { resolveAdminErrorMessage } from "@/features/admin/utils/admin-error";
 import { LobeHubIcon } from "@/shared/components/lobehub-icon";
 import { resolveAccessToken } from "@/shared/auth/resolve-access-token";
+import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot";
 import { cn } from "@/lib/utils";
 import { KNOWN_VENDOR_OPTIONS, resolveLobeHubIconURL, resolveModelIdentity } from "@/shared/lib/model-identity";
 
@@ -150,6 +151,9 @@ export function BillingPricesSection({ models, pricingItems, setPricingItems, lo
   const [officialPricingCatalogHasError, setOfficialPricingCatalogHasError] = React.useState(false);
   const [officialPricingSingleDialogOpen, setOfficialPricingSingleDialogOpen] = React.useState(false);
   const [freeSwitchPendingModel, setFreeSwitchPendingModel] = React.useState("");
+  const stableEditRow = useDialogSnapshot(editRow);
+  const stableForm = useDialogSnapshot(form);
+  const stableOfficialPricingImportSuggestion = useDialogSnapshot(officialPricingImportSuggestion);
 
   const rows = React.useMemo(() => buildPricingRows(models, pricingItems), [models, pricingItems]);
   const vendorFilterOptions = React.useMemo(() => {
@@ -689,7 +693,7 @@ export function BillingPricesSection({ models, pricingItems, setPricingItems, lo
       <PricingBillingDialog
         open={!!editRow && !!form}
         saving={saving}
-        form={form}
+        form={stableForm}
         setForm={setForm}
         onOpenChange={(open) => {
           if (!open && !saving) {
@@ -729,7 +733,7 @@ export function BillingPricesSection({ models, pricingItems, setPricingItems, lo
           </DialogHeader>
 
           <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-4 py-2">
-            {editRow ? (
+            {stableEditRow ? (
               <>
                 <div className="shrink-0 space-y-2">
                   <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
@@ -909,7 +913,7 @@ export function BillingPricesSection({ models, pricingItems, setPricingItems, lo
             </Button>
             <Button
               type="button"
-              disabled={!officialPricingMultiplierValid}
+              disabled={!officialPricingMultiplierValid || !stableOfficialPricingImportSuggestion}
               onClick={confirmOfficialPricingImport}
             >
               {t("modelPricing.officialPricingImport")}