fix: #463 add subscrption total amount

app/components/settings.tsx

@@ -96,26 +96,18 @@ export function Settings(props: { closeSettings: () => void }) {
 
   const [usage, setUsage] = useState<{
     used?: number;
+    subscription?: number;
   }>();
   const [loadingUsage, setLoadingUsage] = useState(false);
   function checkUsage() {
     setLoadingUsage(true);
     requestUsage()
-      .then((res) =>
-        setUsage({
-          used: res,
-        }),
-      )
+      .then((res) => setUsage(res))
       .finally(() => {
         setLoadingUsage(false);
       });
   }
 
-  useEffect(() => {
-    checkUpdate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const accessStore = useAccessStore();
   const enabledAccessControl = useMemo(
     () => accessStore.enabledAccessControl(),
@@ -127,12 +119,13 @@ export function Settings(props: { closeSettings: () => void }) {
   const builtinCount = SearchService.count.builtin;
   const customCount = promptStore.prompts.size ?? 0;
 
-  const showUsage = accessStore.token !== "";
+  const showUsage = !!accessStore.token || !!accessStore.accessCode;
+
   useEffect(() => {
-    if (showUsage) {
-      checkUsage();
-    }
-  }, [showUsage]);
+    checkUpdate();
+    showUsage && checkUsage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <ErrorBoundary>
@@ -392,7 +385,10 @@ export function Settings(props: { closeSettings: () => void }) {
               showUsage
                 ? loadingUsage
                   ? Locale.Settings.Usage.IsChecking
-                  : Locale.Settings.Usage.SubTitle(usage?.used ?? "[?]")
+                  : Locale.Settings.Usage.SubTitle(
+                      usage?.used ?? "[?]",
+                      usage?.subscription ?? "[?]",
+                    )
                 : Locale.Settings.Usage.NoAccess
             }
           >