webterm: fix broken imports

pkg/interface/webterm/api.ts

@@ -0,0 +1,8 @@
+import Urbit from '@urbit/http-api';
+const api = new Urbit('', '', (window as any).desk);
+api.ship = window.ship;
+// api.verbose = true;
+// @ts-ignore TODO window typings
+window.api = api;
+
+export default api;

pkg/interface/webterm/join.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useTheme } from './settings';
+import useTermState from './state';
+
+export function useDark() {
+  const [osDark, setOsDark] = useState(false);
+
+  useEffect(() => {
+    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
+    const update = (e: MediaQueryListEvent) => {
+      setOsDark(e.matches);
+    };
+    setOsDark(themeWatcher.matches);
+    themeWatcher.addListener(update);
+
+    return () => {
+      themeWatcher.removeListener(update);
+    }
+
+  }, []);
+
+  const theme = useTermState(s => s.theme);
+  return theme === 'dark' || (osDark && theme === 'auto');
+}

pkg/interface/webterm/state.ts

@@ -1,7 +1,8 @@
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
+import create from 'zustand';
+import produce from 'immer';
 
-import { createState } from "../src/logic/state/base";
 
 type Session  = { term: Terminal, fit: FitAddon };
 type Sessions = { [id: string]: Session; }
@@ -10,12 +11,17 @@ export interface TermState {
   sessions: Sessions,
   selected: string,
   slogstream: null | EventSource,
+  theme: 'auto' | 'light' | 'dark'
 };
 
-const useTermState = createState<TermState>('Term', {
-  sessions: {},
+const useTermState = create<TermState>((set, get) => ({
+  sessions: {} as Sessions,
   selected: '',  //  empty string is default session
   slogstream: null,
-}, ['sessions', 'slogstream']);  //TODO  consider persisting
+  theme: 'auto',
+  set: (f: (draft: TermState) => void) => {
+    set(produce(f));
+  }
+} as TermState))
 
-export default useTermState;
+export default useTermState;