Refine VPN client instructions and subscription refresh flow

src/web/App.jsx

@@ -16,7 +16,11 @@ function App() {
     const data = await api.state();
     setState(data);
     setServers(data.servers || []);
-    setPendingTag((current) => current || data.selectedTag || '');
+    setPendingTag((current) => (
+      (data.servers || []).some((server) => server.tag === current)
+        ? current
+        : data.selectedTag || ''
+    ));
   }
 
   useEffect(() => {
@@ -51,13 +55,17 @@ function App() {
     });
   }
 
-  async function refreshSubscriptionInfo() {
-    const data = await api.subscription.refreshInfo();
+  async function refreshSubscription() {
+    const data = await api.subscription.refresh();
     setState((current) => current ? {
       ...current,
       userInfo: data.userInfo,
       fetchedAt: data.fetchedAt,
+      servers: data.servers,
+      selectedTag: data.selectedTag,
     } : current);
+    setServers(data.servers || []);
+    setPendingTag(data.selectedTag || '');
     return data;
   }
 
@@ -87,7 +95,7 @@ function App() {
             pendingTag={pendingTag}
             setPendingTag={setPendingTag}
             onFetchSubscription={fetchSubscription}
-            onRefreshSubscriptionInfo={refreshSubscriptionInfo}
+            onRefreshSubscription={refreshSubscription}
             onForgetSubscription={forgetSubscription}
             onApply={(tag) => run(() => api.apply(tag))}
             onRestart={() => run(api.singbox.restart)}