refactor(state): migrate config store to zustand

Author: mat-sz

packages/client/src/App.tsx

@@ -3,7 +3,8 @@ import React, { Suspense, useLayoutEffect } from 'react';
 import { Route, Switch } from 'wouter';
 
 import { ModalWrapperProvider } from '$hooks/useModal';
-import { mainStore } from '$stores/MainStore';
+import { useConfigStore } from '$store/config';
+import { useUIStore } from '$store/ui';
 import { setupStore } from '$stores/SetupStore';
 import { withoutTransitions } from '$utils/css';
 import { lazyPreload } from '$utils/react';
@@ -17,8 +18,11 @@ const Setup = lazyPreload(() => import('./views/setup'));
 const ModelManager = lazyPreload(() => import('./views/models'));
 
 export const App: React.FC = observer(() => {
-  const theme = mainStore.theme;
-  const fontSize = mainStore.config.data?.ui.fontSize || 16;
+  const config = useConfigStore(state => state.data);
+  const systemTheme = useUIStore(state => state.systemTheme);
+  const configTheme = config?.ui.theme || 'dark';
+  const theme = configTheme === 'system' ? systemTheme : configTheme;
+  const fontSize = config?.ui.fontSize || 16;
   const isSetup = setupStore?.status !== 'done';
 
   useLayoutEffect(() => {

packages/client/src/common/hooks/useHotkey.ts

@@ -1,6 +1,7 @@
 import { DependencyList, useCallback, useEffect, useState } from 'react';
 
-import { mainStore } from '$stores/MainStore';
+import { defaultHotkeys } from '$data/hotkeys';
+import { useConfigStore } from '$store/config';
 import { IS_MAC } from '$utils/config';
 
 let disableHotkeys = false;
@@ -130,11 +131,30 @@ const isHotkeyMatchingKeyboardEvent = (
   return false;
 };
 
+let parsedHotkeys: Record<string, ParsedHotkey> = {};
+
+useConfigStore.subscribe(state => {
+  const overrides = state.data?.app?.hotkeys;
+  const hotkeys = { ...defaultHotkeys };
+
+  if (overrides) {
+    for (const [key, value] of Object.entries(overrides)) {
+      if (value && key in hotkeys) {
+        hotkeys[key] = value;
+      }
+    }
+  }
+
+  parsedHotkeys = Object.fromEntries(
+    Object.entries(hotkeys).map(([id, keys]) => [id, parseHotkey(keys)]),
+  );
+});
+
 export function matchHotkey(
   e: KeyboardEvent | React.KeyboardEvent,
   group?: string,
 ) {
-  for (const [id, parsed] of Object.entries(mainStore.hotkeys)) {
+  for (const [id, parsed] of Object.entries(parsedHotkeys)) {
     if (group && !id.startsWith(`${group}_`)) {
       continue;
     }
@@ -240,7 +260,7 @@ export function useHotkey(
   dependencies?: DependencyList,
 ) {
   useEffect(() => {
-    if (!mainStore.hotkeys[id]) {
+    if (!defaultHotkeys[id]) {
       console.warn(`Unregistered hotkey ID: ${id}`);
     }
 

packages/client/src/common/utils/units.ts

@@ -1,7 +1,8 @@
-import { mainStore } from '$stores/MainStore';
+import { useConfigStore } from '$store/config';
 
 export function formatTemperature(value: number) {
-  if (mainStore.config.data?.ui.units.temperature === 'F') {
+  const config = useConfigStore.getState().data;
+  if (config?.ui.units.temperature === 'F') {
     return `${Math.floor(32 + value * 1.8)}°F`;
   }
 

packages/client/src/components/modelBrowser/index.tsx

@@ -27,7 +27,7 @@ import { TreeBrowser } from '$components/treeBrowser';
 import { useModalWrapperContext } from '$hooks/useModal';
 import { ModelDelete } from '$modals/model/delete';
 import { ModelEdit } from '$modals/model/edit';
-import { mainStore } from '$stores/MainStore';
+import { useSearchFn } from '$store/config/hooks';
 import { modelStore } from '$stores/ModelStore';
 import { IS_ELECTRON } from '$utils/config';
 import { removeFileExtension, stringToColor } from '$utils/string';
@@ -53,6 +53,7 @@ export const ModelBrowser: React.FC<Props> = observer(
     architecture,
     allowReset,
   }) => {
+    const searchFn = useSearchFn();
     const modalWrapper = useModalWrapperContext();
     const [compatibleOnly, setCompatibleOnly] = useState(true);
     const types = Array.isArray(type) ? type : [type];
@@ -194,7 +195,7 @@ export const ModelBrowser: React.FC<Props> = observer(
           </>
         }
         quickFilter={(models, search) =>
-          mainStore.searchFn(
+          searchFn(
             models,
             search,
             item =>

packages/client/src/i18n.ts

@@ -4,6 +4,6 @@ init({
   ns: ['civitai', 'model', 'project', 'task', 'setup'],
   defaultNS: 'model',
   load: 'languageOnly',
-  loadPath: `./locales/{{lng}}/{{ns}}.json`,
+  loadPath: `/locales/{{lng}}/{{ns}}.json`,
   fallbackLng: 'en',
 });

packages/client/src/main.tsx

@@ -4,10 +4,13 @@ import { createRoot } from 'react-dom/client';
 import { Router } from 'wouter';
 
 import { API, TRPC } from '$api';
+import { refreshAll } from '$store/actions.ts';
 import { App } from './App.tsx';
 import './onError.ts';
 import './i18n.ts';
 
+refreshAll();
+
 const queryClient = new QueryClient();
 
 const root = createRoot(document.getElementById('root')!);

packages/client/src/modals/instance/backendError/index.tsx

@@ -4,17 +4,19 @@ import { API } from '$api';
 import { Button } from '$components/button';
 import { Log } from '$components/log';
 import { Modal, ModalActions } from '$components/modal';
-import { mainStore } from '$stores/MainStore';
+import { useBackendStore } from '$store/backend';
 
 export const InstanceBackendError: React.FC = () => {
+  const log = useBackendStore(state => state.log);
+
   return (
     <Modal
       title="Backend error"
       size="small"
       onSubmit={() => API.instance.restart.mutate()}
     >
       <div>Unable to start backend. Details:</div>
-      <Log items={mainStore.backendLog} />
+      <Log items={log} />
       <ModalActions cancelText="Close">
         <Button variant="primary">Restart</Button>
       </ModalActions>

packages/client/src/store/actions.ts

@@ -1,9 +1,34 @@
 import { useConfigStore } from './config';
+import { useInstanceStore } from './instance';
+import { useUIStore } from './ui';
 import { useUpdateStore } from './update';
 
 export async function refreshAll() {
-  await Promise.all([
-    useConfigStore.getState().refresh(),
-    useUpdateStore.getState().refresh(),
-  ]);
+  try {
+    await useInstanceStore.getState().refresh();
+
+    await Promise.all([
+      useConfigStore.getState().refresh(),
+      useUpdateStore.getState().refresh(),
+    ]);
+  } catch {
+    //
+  }
+}
+
+export function notify(title: string, body: string, onClick?: () => void) {
+  const config = useConfigStore.getState().data;
+
+  if (Notification.permission !== 'granted' || !config?.ui?.notifications) {
+    return;
+  }
+
+  if (useUIStore.getState().isFocused) {
+    return;
+  }
+
+  const notification = new Notification(title, { body });
+  if (onClick) {
+    notification.addEventListener('click', onClick);
+  }
 }

packages/client/src/store/backend/hooks.ts

@@ -0,0 +1,13 @@
+import { useInstanceStore } from '$store/instance';
+import { useBackendStore } from '.';
+
+export function useStatus() {
+  const connected = useInstanceStore(state => state.connected);
+  const status = useBackendStore(state => state.status);
+
+  if (!connected) {
+    return 'connecting';
+  }
+
+  return status;
+}

packages/client/src/store/backend/index.ts

@@ -0,0 +1,40 @@
+import { BackendStatus, LogItem } from '@metastable/types';
+import { create } from 'zustand';
+
+import { API, linkManager } from '$api';
+import { combineUnsubscribables } from '$utils/trpc';
+
+const MAX_LOG_ITEMS = 100;
+
+type State = {
+  log: LogItem[];
+  status: BackendStatus;
+};
+
+type Actions = {
+  appendLog: (items: LogItem[]) => void;
+};
+
+export const useBackendStore = create<State & Actions>((set, get) => ({
+  log: [],
+  status: 'starting',
+  appendLog: items => {
+    const log = get().log;
+    set({ log: [...log, ...items].slice(-1 * MAX_LOG_ITEMS) });
+  },
+}));
+
+linkManager.subscribe(
+  combineUnsubscribables(() => [
+    API.instance.onBackendLog.subscribe(undefined, {
+      onData: items => {
+        useBackendStore.getState().appendLog(items);
+      },
+    }),
+    API.instance.onBackendStatus.subscribe(undefined, {
+      onData: status => {
+        useBackendStore.setState({ status });
+      },
+    }),
+  ]),
+);