grid: distinguish app sync from system install

By using `%kiln-install` instead of `%kiln-sync` for System Updates, this ensures that the `%kids` desk is also updated.

Also, address UX feedback: render the entire source ship's patp to avoid ambiguity. (as opposed to truncating a moon's name).

ui/src/components/ShipName.tsx

@@ -3,11 +3,12 @@ import React, { HTMLAttributes } from 'react';
 
 type ShipNameProps = {
   name: string;
+  truncate?: boolean;
 } & HTMLAttributes<HTMLSpanElement>;
 
-export const ShipName = ({ name, ...props }: ShipNameProps) => {
+export const ShipName = ({ name, truncate = true, ...props }: ShipNameProps) => {
   const separator = /([_^-])/;
-  const citedName = cite(name);
+  const citedName = truncate ? cite(name) : name;
 
   if (!citedName) {
     return null;

ui/src/components/SourceSetter.tsx

@@ -1,34 +1,39 @@
 import React, { useCallback, useState } from 'react';
 import { useAsyncCall } from '../logic/useAsyncCall';
-import useKilnState from '../state/kiln';
 import { Button } from './Button';
 import { ShipName } from './ShipName';
 import { Spinner } from './Spinner';
 
-interface SourceSyncerProps {
+interface SourceSetterProps {
   appName: string;
+  srcDesk: string;
+  srcShip?: string;
   title: string;
-  syncDesk: string;
-  syncShip?: string;
+  toggleSrc: (desk: string, ship: string) => Promise<void>;
 }
 
-export default function SourceSyncer({ appName, title, syncDesk, syncShip }: SourceSyncerProps) {
-  const [newSyncShip, setNewSyncShip] = useState(syncShip ?? '');
-  const { toggleSync } = useKilnState();
-  const { status: requestStatus, call: setSync } = useAsyncCall(toggleSync);
-  const syncDirty = newSyncShip !== syncShip;
+export default function SourceSetter({
+  appName,
+  srcDesk,
+  srcShip,
+  title,
+  toggleSrc
+}: SourceSetterProps) {
+  const [newSyncShip, setNewSyncShip] = useState(srcShip ?? '');
+  const { status: requestStatus, call: handleSubmit } = useAsyncCall(toggleSrc);
+  const syncDirty = newSyncShip !== srcShip;
 
-  const onUnsync = useCallback(() => {
-    if (!syncShip) {
+  const onUnset = useCallback(() => {
+    if (!srcShip) {
       return;
     }
     if (
       // eslint-disable-next-line no-alert, no-restricted-globals
       confirm(`Are you sure you want to unsync ${appName}? You will no longer receive updates.`)
     ) {
-      toggleSync(syncDesk, syncShip);
+      toggleSrc(srcDesk, srcShip);
     }
-  }, [syncShip, syncDesk, toggleSync]);
+  }, [srcShip, srcDesk]);
 
   const handleSourceChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = e;
@@ -39,26 +44,27 @@ export default function SourceSyncer({ appName, title, syncDesk, syncShip }: Sou
   const onSubmit = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      await setSync(syncDesk, newSyncShip);
+      await handleSubmit(srcDesk, newSyncShip);
     },
-    [syncDesk, newSyncShip, toggleSync]
+    [srcDesk, newSyncShip]
   );
 
   return (
     <>
       <h2 className="h3 mb-7">{title}</h2>
       <div className="space-y-3">
-        {syncShip ? (
+        {srcShip ? (
           <>
             <h3 className="flex items-center h4 mb-2">Automatic Updates</h3>
             <p>Automatically download and apply updates to keep {appName} up to date.</p>
             <div className="flex-1 flex flex-col justify-center space-y-6">
               <p>
-                OTA Source: <ShipName name={syncShip} className="font-semibold font-mono" />
+                OTA Source:{' '}
+                <ShipName name={srcShip} truncate={false} className="font-semibold font-mono" />
               </p>
             </div>
             <div className="flex space-x-2">
-              <Button onClick={onUnsync} variant="destructive">
+              <Button onClick={onUnset} variant="destructive">
                 Unsync Updates for {appName}...
               </Button>
             </div>

ui/src/preferences/AppPrefs.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useCharge } from '../state/docket';
-import { usePike } from '../../state/kiln';
+import useKilnState, { usePike } from '../state/kiln';
 import { getAppName } from '../state/util';
-import SourceSyncer from '../components/SourceSyncer';
+import SourceSetter from '../components/SourceSetter';
 
 export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
   const { desk } = match.params;
   const charge = useCharge(desk);
   const appName = getAppName(charge);
   const pike = usePike(desk);
-  const syncShip = pike?.sync?.ship;
-    
+  const srcShip = pike?.sync?.ship;
+  const { toggleSync } = useKilnState();
+
   return (
-    <SourceSyncer
+    <SourceSetter
       appName={appName}
       title={`${appName} Settings`}
-      syncDesk={desk}
-      syncShip={syncShip}
+      toggleSrc={toggleSync}
+      srcDesk={desk}
+      srcShip={srcShip}
     />
   );
 };

ui/src/preferences/about-system/UpdatePreferences.tsx

@@ -1,9 +1,10 @@
 import { Vat } from '@urbit/api';
 import _ from 'lodash';
 import React from 'react';
-import SourceSyncer from '../../components/SourceSyncer';
-import { usePike } from '../../state/kiln';
+import SourceSetter from '../../components/SourceSetter';
+import useKilnState, { usePike } from '../../state/kiln';
 
+// TODO
 interface UpdatePreferencesProps {
   base: Vat | undefined;
 }
@@ -12,9 +13,16 @@ export const UpdatePreferences = ({ base }: UpdatePreferencesProps) => {
   const desk = 'base';
   const appName = 'your Urbit';
   const pike = usePike(desk);
-  const syncShip = pike?.sync?.ship;
-
+  const srcShip = pike?.sync?.ship;
+  const { toggleInstall } = useKilnState();
+  
   return (
-    <SourceSyncer appName={appName} title="System Updates" syncDesk={desk} syncShip={syncShip} />
+    <SourceSetter
+      appName={appName}
+      toggleSrc={toggleInstall}
+      srcDesk={desk}
+      srcShip={srcShip}
+      title="System Updates"
+    />
   );
 };

ui/src/state/kiln.ts

@@ -1,4 +1,13 @@
-import { scryLag, getPikes, Pikes, Pike, kilnUnsync, kilnSync } from '@urbit/api';
+import {
+  scryLag,
+  getPikes,
+  Pikes,
+  Pike,
+  kilnUnsync,
+  kilnSync,
+  kilnUninstall,
+  kilnInstall
+} from '@urbit/api';
 import create from 'zustand';
 import produce from 'immer';
 import { useCallback } from 'react';
@@ -12,6 +21,7 @@ interface KilnState {
   lag: boolean;
   fetchLag: () => Promise<void>;
   fetchPikes: () => Promise<void>;
+  toggleInstall: (desk: string, ship: string) => Promise<void>;
   toggleSync: (desk: string, ship: string) => Promise<void>;
   set: (s: KilnState) => void;
   initializeKiln: () => Promise<void>;
@@ -33,6 +43,13 @@ const useKilnState = create<KilnState>((set, get) => ({
     const lag = await api.scry<boolean>(scryLag);
     set({ lag });
   },
+  toggleInstall: async (desk: string, ship: string) => {
+    const synced = !!get().pikes[desk].sync;
+    await (useMockData
+      ? fakeRequest('')
+      : api.poke(synced ? kilnUninstall(desk) : kilnInstall(ship, desk)));
+    await get().fetchPikes();
+  },
   toggleSync: async (desk: string, ship: string) => {
     const synced = !!get().pikes[desk].sync;
     await (useMockData