feat: implement subscription setting

frontend/web/src/App.tsx

@@ -2,52 +2,32 @@ import { useColorScheme } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 import DemoBanner from "./components/DemoBanner";
-import { workspaceServiceClient } from "./grpcweb";
-import { workspaceService } from "./services";
 import useUserStore from "./stores/v1/user";
-import { WorkspaceSetting } from "./types/proto/api/v2/workspace_service";
+import useWorkspaceStore from "./stores/v1/workspace";
 
 function App() {
   const { mode: colorScheme } = useColorScheme();
   const userStore = useUserStore();
-  const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>(WorkspaceSetting.fromPartial({}));
+  const workspaceStore = useWorkspaceStore();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const initialState = async () => {
+    (async () => {
       try {
-        await workspaceService.initialState();
+        await Promise.all([workspaceStore.fetchWorkspaceProfile(), workspaceStore.fetchWorkspaceSetting(), userStore.fetchCurrentUser()]);
       } catch (error) {
-        // do nothing
+        // do nth
       }
-
-      try {
-        const { setting } = await workspaceServiceClient.getWorkspaceSetting({});
-        if (setting) {
-          setWorkspaceSetting(setting);
-        }
-      } catch (error) {
-        // do nothing
-      }
-
-      try {
-        await userStore.fetchCurrentUser();
-      } catch (error) {
-        // do nothing.
-      }
-
       setLoading(false);
-    };
-
-    initialState();
+    })();
   }, []);
 
   useEffect(() => {
     const styleEl = document.createElement("style");
-    styleEl.innerHTML = workspaceSetting.customStyle;
+    styleEl.innerHTML = workspaceStore.setting.customStyle;
     styleEl.setAttribute("type", "text/css");
     document.body.insertAdjacentElement("beforeend", styleEl);
-  }, [workspaceSetting.customStyle]);
+  }, [workspaceStore.setting.customStyle]);
 
   useEffect(() => {
     const root = document.documentElement;