grid: default to desk name if title empty

pkg/grid/src/components/AppInfo.tsx

@@ -9,7 +9,7 @@ import { DocketHeader } from './DocketHeader';
 import { Spinner } from './Spinner';
 import { VatMeta } from './VatMeta';
 import useDocketState, { ChargeWithDesk } from '../state/docket';
-import { getAppHref } from '../state/util';
+import { getAppHref, getAppName } from '../state/util';
 import { addRecentApp } from '../nav/search/Home';
 import { TreatyMeta } from './TreatyMeta';
 
@@ -113,7 +113,7 @@ export const AppInfo: FC<AppInfoProps> = ({ docket, vat, className }) => {
                 className="space-y-6"
                 containerClass="w-full max-w-md"
               >
-                <h2 className="h4">Install &ldquo;{docket.title}&rdquo;</h2>
+                <h2 className="h4">Install &ldquo;{getAppName(docket)}&rdquo;</h2>
                 <p className="text-base tracking-tight pr-6">
                   This application will be able to view and interact with the contents of your
                   Urbit. Only install if you trust the developer.
@@ -123,7 +123,7 @@ export const AppInfo: FC<AppInfoProps> = ({ docket, vat, className }) => {
                     Cancel
                   </DialogClose>
                   <DialogClose as={Button} onClick={installApp}>
-                    Get &ldquo;{docket.title}&rdquo;
+                    Get &ldquo;{getAppName(docket)}&rdquo;
                   </DialogClose>
                 </div>
               </DialogContent>

pkg/grid/src/components/AppLink.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { HTMLProps, ReactNode } from 'react';
 import { Link, LinkProps } from 'react-router-dom';
 import { DocketWithDesk } from '../state/docket';
-import { getAppHref } from '../state/util';
+import { getAppHref, getAppName } from '../state/util';
 import { DocketImage } from './DocketImage';
 
 type Sizes = 'xs' | 'small' | 'default';
@@ -57,7 +57,7 @@ export const AppLink = <T extends DocketWithDesk>({
     <>
       <DocketImage color={app.color} image={app.image} size={size} />
       <div className="flex-1 text-black">
-        <p>{app.title}</p>
+        <p>{getAppName(app)}</p>
         {app.info && size === 'default' && <p className="font-normal">{app.info}</p>}
       </div>
     </>

pkg/grid/src/components/AppList.tsx

@@ -4,6 +4,7 @@ import { MatchItem } from '../nav/Nav';
 import { useRecentsStore } from '../nav/search/Home';
 import { AppLink, AppLinkProps } from './AppLink';
 import { DocketWithDesk } from '../state/docket';
+import { getAppName } from '../state/util';
 
 type AppListProps<T extends DocketWithDesk> = {
   apps: T[];
@@ -45,7 +46,7 @@ export const AppList = <T extends DocketWithDesk>({
       aria-labelledby={labelledBy}
     >
       {apps.map((app) => (
-        <li key={app.title} id={app.title} role="option" aria-selected={selected(app)}>
+        <li key={getAppName(app)} id={getAppName(app)} role="option" aria-selected={selected(app)}>
           <AppLink
             {...props}
             app={app}

pkg/grid/src/nav/SystemPreferences.tsx

@@ -14,6 +14,7 @@ import { LeftArrow } from '../components/icons/LeftArrow';
 import { System } from '../components/icons/System';
 import { Interface } from '../components/icons/Interface';
 import { Notifications } from '../components/icons/Notifications';
+import { getAppName } from '../state/util';
 
 interface SystemPreferencesSectionProps {
   url: string;
@@ -112,7 +113,7 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
                     active={matchSub('apps', charge.desk)}
                   >
                     <DocketImage size="small" className="mr-3" {...charge} />
-                    {charge.title}
+                    {getAppName(charge)}
                   </SystemPreferencesSection>
                 ))}
               </ul>

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

@@ -4,6 +4,7 @@ import { Setting } from '../../components/Setting';
 import { ShipName } from '../../components/ShipName';
 import { useCharge } from '../../state/docket';
 import useKilnState, { useVat } from '../../state/kiln';
+import { getAppName } from '../../state/util';
 
 export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
   const { desk } = match.params;
@@ -18,11 +19,11 @@ export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
 
   return (
     <>
-      <h2 className="h3 mb-7">{charge?.title} Settings</h2>
+      <h2 className="h3 mb-7">{getAppName(charge)} Settings</h2>
       <div className="space-y-3">
         {tracking ? (
           <Setting on={otasEnabled} toggle={toggleUpdates} name="Automatic Updates">
-            <p>Automatically download and apply updates to keep {charge?.title} up to date.</p>
+            <p>Automatically download and apply updates to keep {getAppName(charge)} up to date.</p>
             {otaSource && (
               <p>
                 OTA Source: <ShipName name={otaSource} className="font-semibold font-mono" />

pkg/grid/src/nav/search/TreatyInfo.tsx

@@ -4,6 +4,7 @@ import { AppInfo } from '../../components/AppInfo';
 import { Spinner } from '../../components/Spinner';
 import useDocketState, { useCharge, useTreaty } from '../../state/docket';
 import { useVat } from '../../state/kiln';
+import { getAppName } from '../../state/util';
 import { useLeapStore } from '../Nav';
 
 export const TreatyInfo = () => {
@@ -12,6 +13,7 @@ export const TreatyInfo = () => {
   const treaty = useTreaty(host, desk);
   const vat = useVat(desk);
   const charge = useCharge(desk);
+  const name = getAppName(treaty);
 
   useEffect(() => {
     if (!charge) {
@@ -20,9 +22,9 @@ export const TreatyInfo = () => {
   }, [host, desk]);
 
   useEffect(() => {
-    select(<>{treaty?.title}</>);
+    select(<>{name}</>);
     useLeapStore.setState({ matches: [] });
-  }, [treaty?.title]);
+  }, [name]);
 
   if (!treaty) {
     // TODO: maybe replace spinner with skeletons

pkg/grid/src/state/util.ts

@@ -1,4 +1,4 @@
-import { DocketHref } from '@urbit/api/docket';
+import { Docket, DocketHref, Treaty } from '@urbit/api/docket';
 import { hsla, parseToHsla } from 'color2k';
 import _ from 'lodash';
 
@@ -16,6 +16,14 @@ export function getAppHref(href: DocketHref) {
   return 'site' in href ? href.site : `/apps/${href.glob.base}/`;
 }
 
+export function getAppName(app: (Docket & { desk: string }) | Treaty | undefined): string {
+  if (!app) {
+    return '';
+  }
+
+  return app.title || app.desk;
+}
+
 export function disableDefault<T extends Event>(e: T): void {
   e.preventDefault();
 }

pkg/grid/src/tiles/RemoveApp.tsx

@@ -4,6 +4,7 @@ import { Button } from '../components/Button';
 import { Dialog, DialogClose, DialogContent } from '../components/Dialog';
 import { useRecentsStore } from '../nav/search/Home';
 import useDocketState, { useCharges } from '../state/docket';
+import { getAppName } from '../state/util';
 
 export const RemoveApp = () => {
   const history = useHistory();
@@ -21,7 +22,7 @@ export const RemoveApp = () => {
   return (
     <Dialog open onOpenChange={(open) => !open && history.push('/')}>
       <DialogContent showClose={false} className="space-y-6" containerClass="w-full max-w-md">
-        <h1 className="h4">Remove &ldquo;{docket?.title || ''}&rdquo;?</h1>
+        <h1 className="h4">Remove &ldquo;{getAppName(docket)}&rdquo;?</h1>
         <p className="text-base tracking-tight pr-6">
           This will remove the software&apos;s tile from your home screen.
         </p>
@@ -30,7 +31,7 @@ export const RemoveApp = () => {
             Cancel
           </DialogClose>
           <DialogClose as={Button} onClick={handleRemoveApp}>
-            Remove &ldquo;{docket?.title}&rdquo;
+            Remove &ldquo;{getAppName(docket)}&rdquo;
           </DialogClose>
         </div>
       </DialogContent>

pkg/grid/src/tiles/SuspendApp.tsx

@@ -24,7 +24,7 @@ export const SuspendApp = () => {
   return (
     <Dialog open onOpenChange={(open) => !open && history.push('/')}>
       <DialogContent showClose={false} className="space-y-6" containerClass="w-full max-w-md">
-        <h1 className="h4">Suspend &ldquo;{charge?.title || ''}&rdquo;</h1>
+        <h1 className="h4">Suspend &ldquo;{getAppName(charge)}&rdquo;</h1>
         <p className="text-base tracking-tight pr-6">
           Suspending an app will turn off automatic updates. You cannot use an app when it is
           suspended, but you can resume it at any time.
@@ -34,7 +34,7 @@ export const SuspendApp = () => {
             Cancel
           </DialogClose>
           <DialogClose as={Button} onClick={handleSuspendApp}>
-            Suspend &ldquo;{charge?.title}&rdquo;
+            Suspend &ldquo;{getAppName(docket)}&rdquo;
           </DialogClose>
         </div>
       </DialogContent>