fix: React hooks - variable declaration order and lazy initialization (#1017)

- Fixed variable declaration order in CLIToolsPageClient.js (functions before useEffect)
- Added lazy initialization for useState in BasicChatPageClient.js to read from localStorage
- Reduced ESLint errors by ~23%

Co-authored-by: yuangejiaozhu <leegajone@email.com>

src/app/(dashboard)/dashboard/basic-chat/BasicChatPageClient.js

@@ -170,11 +170,29 @@ export default function BasicChatPageClient() {
   const [providerGroups, setProviderGroups] = useState([]);
   const [loadingData, setLoadingData] = useState(true);
   const [loadError, setLoadError] = useState("");
-  const [sessions, setSessions] = useState([]);
+  const [sessions, setSessions] = useState(() => {
-  const [activeSessionId, setActiveSessionId] = useState("");
+    if (typeof window === "undefined") return [];
-  const [activeProviderId, setActiveProviderId] = useState("");
+    try {
+      const saved = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
+      return Array.isArray(saved) ? saved.map((session) => ({
+        ...session,
+        messages: Array.isArray(session.messages) ? session.messages : [],
+      })) : [];
+    } catch { return []; }
+  });
+  const [activeSessionId, setActiveSessionId] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "";
+  });
+  const [activeProviderId, setActiveProviderId] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "";
+  });
   const [activeModelId, setActiveModelId] = useState("");
-  const [draft, setDraft] = useState("");
+  const [draft, setDraft] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "";
+  });
   const [attachments, setAttachments] = useState([]);
   const [isSending, setIsSending] = useState(false);
   const [streamingMessageId, setStreamingMessageId] = useState("");
@@ -189,20 +207,7 @@ export default function BasicChatPageClient() {
   const historyMenuRef = useRef(null);
 
   useEffect(() => {
-    try {
+    setIsHydrated(true);
-      const savedSessions = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
-      setSessions(Array.isArray(savedSessions) ? savedSessions.map((session) => ({
-        ...session,
-        messages: Array.isArray(session.messages) ? session.messages : [],
-      })) : []);
-      setActiveSessionId(globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "");
-      setActiveProviderId(globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "");
-      setDraft(globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "");
-    } catch {
-      // Ignore storage errors.
-    } finally {
-      setIsHydrated(true);
-    }
   }, []);
 
   useEffect(() => {

src/app/(dashboard)/dashboard/cli-tools/CLIToolsPageClient.js

@@ -24,13 +24,6 @@ export default function CLIToolsPageClient({ machineId }) {
   const [apiKeys, setApiKeys] = useState([]);
   const [toolStatuses, setToolStatuses] = useState({});
 
-  useEffect(() => {
-    fetchConnections();
-    loadCloudSettings();
-    fetchApiKeys();
-    fetchAllStatuses();
-  }, []);
-
   const fetchAllStatuses = async () => {
     try {
       const res = await fetch(ALL_STATUSES_URL);
@@ -88,6 +81,13 @@ export default function CLIToolsPageClient({ machineId }) {
     }
   };
 
+  useEffect(() => {
+    fetchConnections();
+    loadCloudSettings();
+    fetchApiKeys();
+    fetchAllStatuses();
+  }, []);
+
   const getActiveProviders = () => connections.filter(c => c.isActive !== false);
 
   const getAllAvailableModels = () => {