Merge remote-tracking branch 'origin/dist' into lf/nu-hark-store

pkg/bitcoin/desk.docket

@@ -2,7 +2,7 @@
   title+'Bitcoin'
   info+'BTC wallet for Urbit. Testing'
   color+0xf9.8e40
-  glob-http+'https://bootstrap.urbit.org/glob-0v2.sl9s6.ud2bs.l9ft0.mstja.5f8kt.glob'
+  glob-http+'https://bootstrap.urbit.org/glob-0v4.ghaim.of1as.9ucee.uj93f.a9nbs.glob'
   image+'https://urbit.ewr1.vultrobjects.com/hastuc-dibtux/2021.8.24..02.57.38-bitcoin.svg'
   base+'bitcoin'
   version+[0 0 1]

pkg/btc-wallet/config/webpack.prod.js

@@ -55,7 +55,7 @@ module.exports = {
     filename: (pathData) => {
       return pathData.chunk.name === 'app' ? 'index.[contenthash].js' : '[name].js';
     },
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, '../dist'),
     publicPath: '/apps/bitcoin/',
   },
   optimization: {

pkg/grid/src/app.tsx

@@ -5,9 +5,11 @@ import { Grid } from './pages/Grid';
 import useDocketState from './state/docket';
 import { PermalinkRoutes } from './pages/PermalinkRoutes';
 import useKilnState from './state/kiln';
-import { usePreferencesStore } from './nav/preferences/usePreferencesStore';
 import useContactState from './state/contact';
 import api from './state/api';
+import { useHarkStore } from './state/hark';
+import { useTheme } from './state/settings';
+import { useLocalState } from './state/local';
 
 const getNoteRedirect = (path: string) => {
   if (path.startsWith('/desk/')) {
@@ -19,7 +21,6 @@ const getNoteRedirect = (path: string) => {
 
 const AppRoutes = () => {
   const { push } = useHistory();
-  const theme = usePreferencesStore((s) => s.theme);
   const { search } = useLocation();
 
   useEffect(() => {
@@ -29,15 +30,16 @@ const AppRoutes = () => {
       push(redir);
     }
   }, [location.search]);
+  const theme = useTheme();
 
   const updateThemeClass = useCallback(
     (e: MediaQueryListEvent) => {
-      if ((e.matches && theme === 'automatic') || theme === 'dark') {
+      if ((e.matches && theme === 'auto') || theme === 'dark') {
         document.body.classList.add('dark');
-        usePreferencesStore.setState({ currentTheme: 'dark' });
+        useLocalState.setState({ currentTheme: 'dark' });
       } else {
         document.body.classList.remove('dark');
-        usePreferencesStore.setState({ currentTheme: 'light' });
+        useLocalState.setState({ currentTheme: 'light' });
       }
     },
     [theme]
@@ -65,6 +67,7 @@ const AppRoutes = () => {
     fetchVats();
     fetchLag();
     useContactState.getState().initialize(api);
+    useHarkStore.getState().initialize(api);
 
     Mousetrap.bind(['command+/', 'ctrl+/'], () => {
       push('/leap/search');

pkg/grid/src/components/Setting.tsx

@@ -20,14 +20,14 @@ export const Setting: FC<SettingsProps> = ({ name, on, toggle, className, childr
       <h3 id={id} className="flex items-center h4 mb-2">
         {name} {status === 'loading' && <Spinner className="ml-2" />}
       </h3>
-      <div className="flex items-center space-x-2">
+      <div className="flex space-x-2">
         <Toggle
           aria-labelledby={id}
           pressed={on}
           onPressedChange={call}
-          className="text-blue-400"
+          className="flex-none self-start text-blue-400"
         />
-        <div className="flex-1 space-y-6">{children}</div>
+        <div className="flex-1 flex flex-col justify-center space-y-6">{children}</div>
       </div>
     </section>
   );

pkg/grid/src/components/Toggle.tsx

@@ -6,12 +6,13 @@ import type * as Polymorphic from '@radix-ui/react-polymorphic';
 type ToggleComponent = Polymorphic.ForwardRefComponent<
   Polymorphic.IntrinsicElement<typeof RadixToggle.Root>,
   Polymorphic.OwnProps<typeof RadixToggle.Root> & {
+    toggleClass?: string;
     knobClass?: string;
   }
 >;
 
 export const Toggle = React.forwardRef(
-  ({ defaultPressed, pressed, onPressedChange, disabled, className }, ref) => {
+  ({ defaultPressed, pressed, onPressedChange, disabled, className, toggleClass }, ref) => {
     const [on, setOn] = useState(defaultPressed);
     const isControlled = !!onPressedChange;
     const proxyPressed = isControlled ? pressed : on;
@@ -20,14 +21,14 @@ export const Toggle = React.forwardRef(
 
     return (
       <RadixToggle.Root
-        className="default-ring rounded-full"
+        className={classNames('default-ring rounded-full', className)}
         pressed={proxyPressed}
         onPressedChange={proxyOnPressedChange}
         disabled={disabled}
         ref={ref}
       >
         <svg
-          className={classNames('w-12 h-8', className)}
+          className={classNames('w-12 h-8', toggleClass)}
           viewBox="0 0 48 32"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

pkg/grid/src/nav/Notifications.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link, NavLink, Route, Switch } from 'react-router-dom';
-import { Notification } from '@urbit/api';
+import { Notification, HarkLid } from '@urbit/api';
 import { useLeapStore } from './Nav';
 import { Button } from '../components/Button';
 import { BasicNotification } from './notifications/BasicNotification';
@@ -13,7 +13,7 @@ import { useHarkStore } from '../state/hark';
 import { OnboardingNotification } from './notifications/OnboardingNotification';
 import { Inbox } from './notifications/Inbox';
 
-function renderNotification(notification: Notification, key: string, unread = false) {
+function renderNotification(notification: Notification, key: string, lid: HarkLid) {
   // Special casing
   if (notification.bin.place.desk === window.desk) {
     if (notification.bin.place.path === '/lag') {
@@ -23,10 +23,10 @@ function renderNotification(notification: Notification, key: string, unread = fa
       return <BaseBlockedNotification key={key} />;
     }
     if (notification.bin.place.path === '/onboard') {
-      return <OnboardingNotification key={key} unread={unread} />;
+      return <OnboardingNotification key={key} unread />
     }
   }
-  return <BasicNotification key={key} notification={notification} unread={unread} />;
+  return <BasicNotification key={key} notification={notification} lid={lid} />;
 }
 
 const Empty = () => (
@@ -39,8 +39,8 @@ export const Notifications = () => {
   const select = useLeapStore((s) => s.select);
   const { unseen, seen, hasAnyNotifications } = useNotifications();
   const markAllAsRead = () => {
-    const { readAll } = useHarkStore.getState();
-    readAll();
+    const { archiveAll } = useHarkStore.getState();
+    archiveAll();
   };
 
   useEffect(() => {

pkg/grid/src/nav/SystemPreferences.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { PropsWithChildren, useCallback } from 'react';
 import { Link, Route, RouteComponentProps, Switch, useRouteMatch } from 'react-router-dom';
 import classNames from 'classnames';
 import { NotificationPrefs } from './preferences/NotificationPrefs';
@@ -6,32 +6,30 @@ import { SystemUpdatePrefs } from './preferences/SystemUpdatePrefs';
 import notificationsSVG from '../assets/notifications.svg';
 import systemUpdatesSVG from '../assets/system-updates.svg';
 import { InterfacePrefs } from './preferences/InterfacePrefs';
+import { useCharges } from '../state/docket';
+import { AppPrefs } from './preferences/AppPrefs';
+import { DocketImage } from '../components/DocketImage';
 
-interface SystemPreferencesSectionProps extends RouteComponentProps<{ submenu: string }> {
-  submenu: string;
+interface SystemPreferencesSectionProps {
+  url: string;
   active: boolean;
-  text: string;
-  icon?: string;
 }
 
 function SystemPreferencesSection({
-  match,
-  submenu,
+  url,
   active,
-  icon,
-  text
-}: SystemPreferencesSectionProps) {
+  children
+}: PropsWithChildren<SystemPreferencesSectionProps>) {
   return (
     <li>
       <Link
-        to={`${match.url}/${submenu}`}
+        to={url}
         className={classNames(
-          'flex items-center px-5 py-3 hover:text-black hover:bg-gray-100',
+          'flex items-center px-2 py-2 hover:text-black hover:bg-gray-100 rounded-xl',
           active && 'text-black bg-gray-100'
         )}
       >
-        {icon ? <img className="w-8 h-8 mr-3" src={icon} alt="" /> : null}
-        {text}
+        {children}
       </Link>
     </li>
   );
@@ -39,53 +37,72 @@ function SystemPreferencesSection({
 
 export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }>) => {
   const { match } = props;
-  const subMatch = useRouteMatch<{ submenu: string }>(`${match.url}/:submenu`);
+  const subMatch = useRouteMatch<{ submenu: string; desk?: string }>(
+    `${match.url}/:submenu/:desk?`
+  );
+  const charges = useCharges();
 
   const matchSub = useCallback(
-    (target: string) => {
+    (target: string, desk?: string) => {
       if (!subMatch && target === 'notifications') {
         return true;
       }
 
+      if (desk && subMatch?.params.desk !== desk) {
+        return false;
+      }
+
       return subMatch?.params.submenu === target;
     },
     [match, subMatch]
   );
 
+  const subUrl = useCallback((submenu: string) => `${match.url}/${submenu}`, [match]);
+
   return (
     <div className="flex h-[600px] max-h-full">
-      <aside className="flex-none min-w-60 border-r-2 border-gray-50">
-        <div className="p-8">
-          <input className="input h4 default-ring bg-gray-50" placeholder="Search Preferences" />
-        </div>
-        <nav className="border-b-2 border-gray-50">
-          <ul className="font-semibold">
+      <aside className="flex-none min-w-60 py-8 font-semibold border-r-2 border-gray-50">
+        <nav className="px-6">
+          <ul>
             <SystemPreferencesSection
-              {...props}
-              text="Notifications"
-              icon={notificationsSVG}
-              submenu="notifications"
+              url={subUrl('notifications')}
               active={matchSub('notifications')}
-            />
+            >
+              <img className="w-8 h-8 mr-3" src={notificationsSVG} alt="" />
+              Notifications
+            </SystemPreferencesSection>
             <SystemPreferencesSection
-              {...props}
-              text="System Updates"
-              icon={systemUpdatesSVG}
-              submenu="system-updates"
+              url={subUrl('system-updates')}
               active={matchSub('system-updates')}
-            />
-            <SystemPreferencesSection
-              {...props}
-              text="Interface Settings"
-              icon={systemUpdatesSVG}
-              submenu="interface"
-              active={matchSub('interface')}
-            />
+            >
+              <img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
+              System Updates
+            </SystemPreferencesSection>
+            <SystemPreferencesSection url={subUrl('interface')} active={matchSub('interface')}>
+              <img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
+              Interface Settings
+            </SystemPreferencesSection>
+          </ul>
+        </nav>
+        <hr className="my-4 border-t-2 border-gray-50" />
+        <nav className="px-6">
+          <ul>
+            {Object.values(charges).map((charge) => (
+              <SystemPreferencesSection
+                key={charge.desk}
+                url={subUrl(`apps/${charge.desk}`)}
+                active={matchSub('apps', charge.desk)}
+              >
+                <DocketImage size="small" className="mr-3" {...charge} />
+                {charge.title}
+              </SystemPreferencesSection>
+            ))}
           </ul>
         </nav>
       </aside>
       <section className="flex-1 p-8 text-black">
         <Switch>
+          <Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
           <Route path={`${match.url}/system-updates`} component={SystemUpdatePrefs} />
           <Route path={`${match.url}/interface`} component={InterfacePrefs} />
           <Route path={[`${match.url}/notifications`, match.url]} component={NotificationPrefs} />

pkg/grid/src/nav/preferences/AppPrefs.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { Setting } from '../../components/Setting';
+import { ShipName } from '../../components/ShipName';
+import { useCharge } from '../../state/docket';
+import useKilnState, { useVat } from '../../state/kiln';
+
+export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
+  const { desk } = match.params;
+  const charge = useCharge(desk);
+  const vat = useVat(desk);
+  const otasEnabled = !vat?.arak.paused;
+  const otaSource = vat?.arak.ship;
+  const toggleOTAs = useKilnState((s) => s.toggleOTAs);
+
+  const toggleUpdates = useCallback((on: boolean) => toggleOTAs(desk, on), [desk, toggleOTAs]);
+
+  return (
+    <>
+      <h2 className="h3 mb-7">{charge?.title} Settings</h2>
+      <div className="space-y-3">
+        <Setting on={!!otasEnabled} toggle={toggleUpdates} name="Automatic Updates">
+          <p>Automatically download and apply updates to keep {charge?.title} up to date.</p>
+          {otaSource && (
+            <p>
+              OTA Source: <ShipName name={otaSource} className="font-semibold font-mono" />
+            </p>
+          )}
+        </Setting>
+      </div>
+    </>
+  );
+};

pkg/grid/src/nav/preferences/InterfacePrefs.tsx

@@ -36,8 +36,6 @@ export function InterfacePrefs() {
       <Setting on={protocolHandling} toggle={toggleProtoHandling} name="Handle Urbit links">
         <p>Automatically open urbit links with this urbit</p>
       </Setting>
-
-      <div className="space-y-3"> </div>
     </>
   );
 }

pkg/grid/src/nav/preferences/NotificationPrefs.tsx

@@ -1,7 +1,9 @@
+import { setMentions } from '@urbit/api/dist';
 import React from 'react';
 import { Setting } from '../../components/Setting';
+import { pokeOptimisticallyN } from '../../state/base';
+import { HarkState, reduceGraph, useHarkStore } from '../../state/hark';
 import { useSettingsState, SettingsState } from '../../state/settings';
-import { usePreferencesStore } from './usePreferencesStore';
 
 const selDnd = (s: SettingsState) => s.display.doNotDisturb;
 async function toggleDnd() {
@@ -13,9 +15,15 @@ async function toggleDnd() {
   await state.putEntry('display', 'doNotDisturb', !curr);
 }
 
+const selMentions = (s: HarkState) => s.notificationsGraphConfig.mentions;
+async function toggleMentions() {
+  const state = useHarkStore.getState();
+  await pokeOptimisticallyN(useHarkStore, setMentions(!selMentions(state)), reduceGraph);
+}
+
 export const NotificationPrefs = () => {
-  const { mentions, toggleMentions } = usePreferencesStore();
   const doNotDisturb = useSettingsState(selDnd);
+  const mentions = useHarkStore(selMentions);
 
   return (
     <>
@@ -32,14 +40,7 @@ export const NotificationPrefs = () => {
           </p>
         </Setting>
         <Setting on={mentions} toggle={toggleMentions} name="Mentions">
-          <p>
-            [PLACEHOLDER] Block visual desktop notifications whenever Urbit software produces an
-            in-Landscape notification badge.
-          </p>
-          <p>
-            Turning this &quot;off&quot; will prompt your browser to ask if you&apos;d like to
-            enable notifications
-          </p>
+          <p>Notify me if someone mentions my @p in a channel I&apos;ve joined</p>
         </Setting>
       </div>
     </>

pkg/grid/src/nav/preferences/SystemUpdatePrefs.tsx

@@ -1,19 +1,30 @@
+import _ from 'lodash';
 import React, { ChangeEvent, FormEvent, useCallback, useEffect, useState } from 'react';
 import { Button } from '../../components/Button';
 import { Setting } from '../../components/Setting';
 import { ShipName } from '../../components/ShipName';
 import { Spinner } from '../../components/Spinner';
 import { useAsyncCall } from '../../logic/useAsyncCall';
-import { usePreferencesStore } from './usePreferencesStore';
+import useKilnState, { useVat } from '../../state/kiln';
 
 export const SystemUpdatePrefs = () => {
-  const { otasEnabled, otaSource, toggleOTAs, setOTASource } = usePreferencesStore();
-  const [source, setSource] = useState(otaSource);
+  const { changeOTASource, toggleOTAs } = useKilnState((s) =>
+    _.pick(s, ['toggleOTAs', 'changeOTASource'])
+  );
+  const base = useVat('base');
+  const otasEnabled = base && !base.arak.paused;
+  const otaSource = base?.arak.ship;
+
+  const toggleBase = useCallback((on: boolean) => toggleOTAs('base', on), [toggleOTAs]);
+
+  const [source, setSource] = useState('');
   const sourceDirty = source !== otaSource;
-  const { status: sourceStatus, call: setOTA } = useAsyncCall(setOTASource);
+  const { status: sourceStatus, call: setOTA } = useAsyncCall(changeOTASource);
 
   useEffect(() => {
-    setSource(otaSource);
+    if (otaSource) {
+      setSource(otaSource);
+    }
   }, [otaSource]);
 
   const handleSourceChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -34,11 +45,13 @@ export const SystemUpdatePrefs = () => {
     <>
       <h2 className="h3 mb-7">System Updates</h2>
       <div className="space-y-3">
-        <Setting on={otasEnabled} toggle={toggleOTAs} name="Enable Automatic Urbit OTAs">
+        <Setting on={!!otasEnabled} toggle={toggleBase} name="Enable Automatic Urbit OTAs">
           <p>Automatically download and apply system updates to keep your Urbit up to date.</p>
-          <p>
-            OTA Source: <ShipName name={otaSource} className="font-semibold font-mono" />
-          </p>
+          {otaSource && (
+            <p>
+              OTA Source: <ShipName name={otaSource} className="font-semibold font-mono" />
+            </p>
+          )}
         </Setting>
         <form className="inner-section relative" onSubmit={onSubmit}>
           <label htmlFor="ota-source" className="h4 mb-3">

pkg/grid/src/nav/preferences/usePreferencesStore.ts

@@ -1,55 +0,0 @@
-import create from 'zustand';
-import { fakeRequest } from '../../state/util';
-
-const useMockData = import.meta.env.MODE === 'mock';
-
-interface PreferencesStore {
-  theme: 'light' | 'dark' | 'automatic';
-  currentTheme: 'light' | 'dark';
-  otasEnabled: boolean;
-  otaSource: string;
-  doNotDisturb: boolean;
-  mentions: boolean;
-  setOTASource: (source: string) => Promise<void>;
-  toggleOTAs: () => Promise<void>;
-  toggleDoNotDisturb: () => Promise<void>;
-  toggleMentions: () => Promise<void>;
-}
-
-export const usePreferencesStore = create<PreferencesStore>((set) => ({
-  theme: 'automatic',
-  currentTheme: 'light',
-  otasEnabled: true,
-  otaSource: useMockData ? '~sabbus' : '',
-  doNotDisturb: false,
-  mentions: true,
-  /**
-   * a lot of these are repetitive, we may do better with a map of settings
-   * and some generic way to update them through pokes. That way, we could
-   * just have toggleSetting(key) and run a similar op for all
-   */
-  toggleOTAs: async () => {
-    if (useMockData) {
-      await fakeRequest({});
-      set((state) => ({ otasEnabled: !state.otasEnabled }));
-    }
-  },
-  setOTASource: async (source: string) => {
-    if (useMockData) {
-      await fakeRequest({});
-      set({ otaSource: source });
-    }
-  },
-  toggleDoNotDisturb: async () => {
-    if (useMockData) {
-      await fakeRequest({});
-      set((state) => ({ doNotDisturb: !state.doNotDisturb }));
-    }
-  },
-  toggleMentions: async () => {
-    if (useMockData) {
-      await fakeRequest({});
-      set((state) => ({ mentions: !state.mentions }));
-    }
-  }
-}));

pkg/grid/src/state/api.ts

@@ -1,4 +1,5 @@
 import Urbit from '@urbit/http-api';
+import { useMockData } from './util';
 
 declare global {
   interface Window {
@@ -6,17 +7,18 @@ declare global {
   }
 }
 
-const api =
-  import.meta.env.MODE === 'mock'
-    ? ({
-        poke: async () => {},
-        subscribe: async () => {},
-        subscribeOnce: async () => {},
-        ship: '',
-        scry: async () => {}
-      } as unknown as Urbit)
-    : new Urbit('', '');
-
-api.ship = import.meta.env.MODE === 'mock' ? 'dopzod' : window.ship;
+const api = useMockData
+  ? ({
+      poke: async () => {},
+      subscribe: async () => {},
+      subscribeOnce: async () => {},
+      ship: '',
+      scry: async () => {}
+    } as unknown as Urbit)
+  : new Urbit('', '');
+if (useMockData) {
+  api.verbose = true;
+}
+api.ship = useMockData ? 'dopzod' : window.ship;
 
 export default api;

pkg/grid/src/state/hark.ts

@@ -13,38 +13,74 @@ import {
   HarkBin,
   HarkLid,
   archive,
-  HarkContent
+  HarkContent,
+  NotificationGraphConfig
 } from '@urbit/api';
 import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
 /* eslint-disable-next-line camelcase */
 import { unstable_batchedUpdates } from 'react-dom';
 import produce from 'immer';
-import { map } from 'lodash';
+import _, { map } from 'lodash';
 import api from './api';
 import { useMockData } from './util';
 import { mockNotifications } from './mock-data';
 import useDocketState from './docket';
 import { useSettingsState } from './settings';
+import { BaseState, createState, createSubscription, reduceStateN} from './base';
 
-interface HarkStore {
+export interface HarkState {
   seen: Timebox;
   unseen: Timebox;
   archive: BigIntOrderedMap<Timebox>;
-  set: (f: (s: HarkStore) => void) => void;
+  set: (f: (s: HarkState) => void) => void;
   opened: () => Promise<void>;
+  notificationsGraphConfig: NotificationGraphConfig;
   archiveAll: () => Promise<void>;
   archiveNote: (bin: HarkBin, lid: HarkLid) => Promise<void>;
   getMore: () => Promise<void>;
   webNotes: {
     [binId: string]: Notification[];
   };
+  [ref: string]: unknown;
 }
 
-export const useHarkStore = create<HarkStore>((set, get) => ({
+type BaseHarkState = BaseState<HarkState> & HarkState;
+
+function updateState(
+  key: string,
+  transform: (state: BaseHarkState, data: any) => void
+): (json: any, state: BaseHarkState) => BaseHarkState {
+  return (json: any, state: BaseHarkState) => {
+    if (_.has(json, key)) {
+      transform(state, _.get(json, key, undefined));
+    }
+    return state;
+  };
+}
+
+export const reduceGraph = [
+  updateState('initial', (draft, data) => {
+    draft.notificationsGraphConfig = data;
+  }),
+  updateState('set-mentions', (draft, data) => {
+    draft.notificationsGraphConfig.mentions = data;
+  })
+];
+
+
+export const useHarkStore = createState<HarkState>(
+  'Hark',
+  (set, get) => ({
   seen: {},
   unseen: {},
   archive: new BigIntOrderedMap<Timebox>(),
   webNotes: {},
+  notificationsGraphConfig: {
+    watchOnSelf: false,
+    mentions: false,
+    watching: []
+  },
+
   set: (f) => {
     const newState = produce(get(), f);
     set(newState);
@@ -65,7 +101,25 @@ export const useHarkStore = create<HarkStore>((set, get) => ({
     });
     reduceHark(update);
   }
-}));
+}),
+  [],
+  [
+    (set, get) =>
+      createSubscription('hark-graph-hook', '/updates', (j) => {
+        const graphHookData = _.get(j, 'hark-graph-hook-update', false);
+        if (graphHookData) {
+          reduceStateN(get(), graphHookData, reduceGraph);
+        }
+      }),
+    (set, get) =>
+      createSubscription('hark-store', '/updates', u => {
+        /* eslint-ignore-next-line camelcase */
+        unstable_batchedUpdates(() => {
+          reduceHark(u);
+        });
+      })
+  ]
+);
 
 function reduceHark(u: any) {
   const { set } = useHarkStore.getState();
@@ -179,4 +233,5 @@ api.subscribe({
     }
   }
 });
-window.hark = useHarkStore.getState;
+
+

pkg/grid/src/state/kiln.ts

@@ -1,4 +1,5 @@
-import { getVats, Vats, scryLag, getBlockers, Vat } from '@urbit/api';
+import { getVats, Vats, scryLag, getBlockers, Vat, kilnInstall } from '@urbit/api';
+import { kilnPause, kilnResume } from '@urbit/api/hood';
 import create from 'zustand';
 import produce from 'immer';
 import { useCallback } from 'react';
@@ -12,6 +13,8 @@ interface KilnState {
   fetchVats: () => Promise<void>;
   lag: boolean;
   fetchLag: () => Promise<void>;
+  changeOTASource: (ship: string) => Promise<void>;
+  toggleOTAs: (desk: string, on: boolean) => Promise<void>;
   set: (s: KilnState) => void;
 }
 const useKilnState = create<KilnState>((set) => ({
@@ -31,6 +34,39 @@ const useKilnState = create<KilnState>((set) => ({
     const lag = await api.scry<boolean>(scryLag);
     set({ lag });
   },
+  changeOTASource: async (ship: string) => {
+    if (useMockData) {
+      await fakeRequest('');
+      set(
+        produce((draft: KilnState) => {
+          draft.vats.base.arak.ship = ship;
+        })
+      );
+      return;
+    }
+
+    await api.poke(kilnInstall(ship, '%kids', 'base'));
+  },
+  toggleOTAs: async (desk: string, on: boolean) => {
+    if (useMockData) {
+      await fakeRequest('');
+      set(
+        produce((draft: KilnState) => {
+          const { arak } = draft.vats[desk];
+
+          if (on) {
+            arak.paused = false;
+          } else {
+            arak.paused = true;
+          }
+        })
+      );
+
+      return;
+    }
+
+    await api.poke(on ? kilnResume(desk) : kilnPause(desk));
+  },
   set: produce(set)
 }));
 

pkg/grid/src/state/local.ts

@@ -4,6 +4,7 @@ import produce from 'immer';
 
 interface LocalState {
   protocolHandling: boolean;
+  currentTheme: 'light' | 'dark';
   set: (f: (s: LocalState) => void) => void;
 }
 
@@ -11,6 +12,7 @@ export const useLocalState = create<LocalState>(
   persist(
     (set, get) => ({
       set: (f) => set(produce(get(), f)),
+      currentTheme: 'light',
       protocolHandling: false
     }),
     {
@@ -24,4 +26,9 @@ export function useProtocolHandling() {
   return useLocalState(selProtocolHandling);
 }
 
+const selCurrentTheme = (s: LocalState) => s.currentTheme;
+export function useCurrentTheme() {
+  return useLocalState(selCurrentTheme);
+}
+
 export const setLocalState = (f: (s: LocalState) => void) => useLocalState.getState().set(f);

pkg/grid/src/state/mock-data.ts

@@ -189,6 +189,7 @@ function createDmNotification(...content: HarkContent[]): HarkBody {
     title: [ship('~hastuc-dibtux'), text(' messaged you')],
     time: unixToDa(Date.now() - 3_600).toString(),
     content,
+    binned: '/',
     link: '/'
   };
 }
@@ -208,6 +209,7 @@ function createGroupNotif(to: string): HarkBody {
     title: [ship('~ridlur-figbud'), text(` invited you to ${to}`)],
     content: [],
     time: unixToDa(Date.now() - 3_600).toString(),
+    binned: '/',
     link: '/'
   };
 }
@@ -318,7 +320,8 @@ export const mockVat = (desk: string, blockers?: boolean): Vat => ({
     aeon: 3,
     desk,
     next: blockers ? [{ aeon: 3, weft: { name: 'zuse', kelvin: 419 } }] : [],
-    ship: '~zod'
+    ship: '~zod',
+    paused: false
   },
   hash: '0vh.lhfn6.julg1.fs52d.g2lqj.q5kp0.2o7j3.2bljl.jdm34.hd46v.9uv5v'
 });

pkg/grid/src/state/settings.ts

@@ -18,7 +18,7 @@ import api from './api';
 
 interface BaseSettingsState {
   display: {
-    theme: 'light' | 'dark' | 'automatic';
+    theme: 'light' | 'dark' | 'auto';
     doNotDisturb: boolean;
   };
   putEntry: (bucket: string, key: string, value: Value) => Promise<void>;
@@ -68,7 +68,7 @@ export const useSettingsState = createState<BaseSettingsState>(
   'Settings',
   (set, get) => ({
     display: {
-      theme: 'automatic',
+      theme: 'auto',
       doNotDisturb: true
     },
     loaded: false,
@@ -96,3 +96,8 @@ export const useSettingsState = createState<BaseSettingsState>(
       })
   ]
 );
+
+const selTheme = (s: SettingsState) => s.display.theme;
+export function useTheme() {
+  return useSettingsState(selTheme);
+}

pkg/grid/src/tiles/useTileColor.tsx

@@ -1,5 +1,5 @@
 import { hsla, parseToHsla } from 'color2k';
-import { usePreferencesStore } from '../nav/preferences/usePreferencesStore';
+import { useCurrentTheme } from '../state/local';
 
 function getDarkColor(color: string): string {
   const hslaColor = parseToHsla(color);
@@ -7,7 +7,7 @@ function getDarkColor(color: string): string {
 }
 
 export const useTileColor = (color: string) => {
-  const theme = usePreferencesStore((s) => s.currentTheme);
+  const theme = useCurrentTheme();
 
   return {
     theme,

pkg/npm/api/hood/types.ts

@@ -37,6 +37,7 @@ export interface Arak {
   aeon: number;
   next: Woof[];
   rein: Rein;
+  paused: boolean;
 }
 
 /**

pkg/npm/http-api/src/types.ts

@@ -1,7 +1,6 @@
-
 /**
  * An urbit style path, rendered as a Javascript string
- * @example 
+ * @example
  * `"/updates"`
  */
 export type Path = string;
@@ -28,7 +27,6 @@ export type Patp = string;
  */
 export type PatpNoSig = string;
 
-
 /**
  * The name of a clay mark, as a string
  *
@@ -43,43 +41,43 @@ export type Mark = string;
  * The name of a gall agent, as a string
  *
  * @example
- * 
+ *
  * ```typescript
  * "graph-store"
  * ```
  */
 export type GallAgent = string;
 
-/** 
+/**
  * Description of an outgoing poke
- * 
+ *
  * @typeParam Action - Typescript type of the data being poked
  */
 export interface Poke<Action> {
   /**
-   * Ship to poke. If left empty, the api lib will populate it with the ship that it is connected to. 
-   * 
+   * Ship to poke. If left empty, the api lib will populate it with the ship that it is connected to.
+   *
    * @remarks
    *
    * This should always be the ship that you are connected to
-   * 
+   *
    */
-  ship?: PatpNoSig; 
-  /** 
+  ship?: PatpNoSig;
+  /**
    */
   app: GallAgent;
   /**
-   * Mark of the cage to be poked 
-   * 
+   * Mark of the cage to be poked
+   *
    */
   mark: Mark;
-  /** 
+  /**
    * Vase of the cage of to be poked, as JSON
    */
   json: Action;
 }
 
-/** 
+/**
  * Description of a scry request
  */
 export interface Scry {
@@ -91,11 +89,11 @@ export interface Scry {
 
 /**
  * Description of a thread request
- * 
+ *
  * @typeParam Action - Typescript type of the data being poked
  */
 export interface Thread<Action> {
-  /** 
+  /**
    * The mark of the input vase
    */
   inputMark: Mark;
@@ -103,7 +101,7 @@ export interface Thread<Action> {
    * The mark of the output vase
    */
   outputMark: Mark;
-  /** 
+  /**
    * Name of the thread
    *
    * @example
@@ -115,7 +113,7 @@ export interface Thread<Action> {
   /**
    * Desk of thread
    */
-  desk: string;
+  desk?: string;
   /**
    * Data of the input vase
    */
@@ -124,9 +122,6 @@ export interface Thread<Action> {
 
 export type Action = 'poke' | 'subscribe' | 'ack' | 'unsubscribe' | 'delete';
 
-
-
-
 export interface PokeHandlers {
   onSuccess?: () => void;
   onError?: (e: any) => void;
@@ -143,7 +138,7 @@ export interface AuthenticationInterface {
 
 /**
  * Subscription event handlers
- * 
+ *
  */
 export interface SubscriptionInterface {
   /**
@@ -154,7 +149,7 @@ export interface SubscriptionInterface {
    * Handle %fact
    */
   event?(data: any): void;
-  /** 
+  /**
    * Handle %kick
    */
   quit?(data: any): void;
@@ -182,14 +177,13 @@ export interface headers {
   Cookie?: string;
 }
 
-
 export interface CustomEventHandler {
   (data: any, response: string): void;
 }
 
 export interface SSEOptions {
   headers?: {
-    Cookie?: string
+    Cookie?: string;
   };
   withCredentials?: boolean;
 }