lint(gui): make theme handling more type-safe

gui/src/components/OnnxWeb.tsx

@@ -1,6 +1,6 @@
 import { mustExist } from '@apextoaster/js-utils';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
+import { Box, Container, CssBaseline, Divider, PaletteMode, Tab, useMediaQuery } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
@@ -17,7 +17,7 @@ import { Inpaint } from './tab/Inpaint.js';
 import { Settings } from './tab/Settings.js';
 import { Txt2Img } from './tab/Txt2Img.js';
 import { Upscale } from './tab/Upscale.js';
-import { getTheme, getTab, TAB_LABELS } from './utils.js';
+import { getTab, getTheme, TAB_LABELS } from './utils.js';
 
 export function OnnxWeb() {
   /* checks for system light/dark mode preference */
@@ -27,8 +27,8 @@ export function OnnxWeb() {
   const theme = useMemo(
     () => createTheme({
       palette: {
-        mode: getTheme(state.theme, prefersDarkMode) as PaletteMode
-      }
+        mode: getTheme(state.theme, prefersDarkMode),
+      },
     }),
     [prefersDarkMode, state.theme],
   );
@@ -45,7 +45,6 @@ export function OnnxWeb() {
         <Box sx={{ mx: 4, my: 4 }}>
           <ModelControl />
         </Box>
-
         <TabContext value={getTab(hash)}>
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <TabList onChange={(_e, idx) => {
@@ -73,7 +72,6 @@ export function OnnxWeb() {
             </TabPanel>
           </Box>
         </TabContext>
-
         <Divider variant='middle' />
         <Box sx={{ mx: 4, my: 4 }}>
           <ImageHistory />

gui/src/components/utils.ts

@@ -1,3 +1,6 @@
+import { PaletteMode } from '@mui/material';
+
+import { Theme } from '../state.js';
 import { trimHash } from '../utils.js';
 
 export const TAB_LABELS = [
@@ -18,12 +21,12 @@ export function getTab(hash: string): string {
   return TAB_LABELS[0];
 }
 
-export function getTheme(currentTheme: string, preferDark: boolean): string {
+export function getTheme(currentTheme: Theme, preferDark: boolean): PaletteMode {
   if (currentTheme === '') {
     if (preferDark) {
       return 'dark';
     }
     return 'light';
   }
-  return currentTheme;
+  return currentTheme as PaletteMode;
 }

gui/src/state.ts

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 /* eslint-disable no-null/no-null */
 import { Maybe } from '@apextoaster/js-utils';
+import { PaletteMode } from '@mui/material';
 import { Logger } from 'noicejs';
 import { createContext } from 'react';
 import { StateCreator, StoreApi } from 'zustand';
@@ -24,10 +25,12 @@ import {
 } from './client/api.js';
 import { Config, ConfigFiles, ConfigState, ServerParams } from './config.js';
 
+export type Theme = PaletteMode | ''; // tri-state, '' is unset
+
 /**
  * Combine optional files and required ranges.
  */
-type TabState<TabParams> = ConfigFiles<Required<TabParams>> & ConfigState<Required<TabParams>>;
+export type TabState<TabParams> = ConfigFiles<Required<TabParams>> & ConfigState<Required<TabParams>>;
 
 interface HistoryItem {
   image: ImageResponse;
@@ -43,10 +46,10 @@ interface BrushSlice {
 
 interface DefaultSlice {
   defaults: TabState<BaseImgParams>;
-  theme: string;
+  theme: Theme;
 
   setDefaults(param: Partial<BaseImgParams>): void;
-  setTheme(theme: string): void;
+  setTheme(theme: Theme): void;
 }
 
 interface HistorySlice {