grid: add disabled props to components

pkg/grid/src/app.tsx

@@ -49,8 +49,6 @@ const AppRoutes = () => {
     }
   }, [isDarkMode, theme]);
 
-  useEffect(() => {}, []);
-
   useEffect(
     handleError(() => {
       window.name = 'grid';
@@ -77,6 +75,9 @@ const AppRoutes = () => {
   return (
     <Switch>
       <Route path="/perma" component={PermalinkRoutes} />
+      <Route path="/upgrading">
+        <Grid upgrading />
+      </Route>
       <Route path={['/leap/:menu', '/']} component={Grid} />
     </Switch>
   );

pkg/grid/src/nav/Leap.tsx

@@ -227,6 +227,8 @@ export const Leap = React.forwardRef(
       [selection, rawInput, match, matches, selectedMatch]
     );
 
+    console.log(menu);
+
     return (
       <div className="relative z-50 w-full">
         <form
@@ -234,6 +236,7 @@ export const Leap = React.forwardRef(
             'flex items-center h-full w-full px-2 rounded-full bg-white default-ring focus-within:ring-2',
             shouldDim && 'opacity-60',
             !navOpen ? 'bg-gray-50' : '',
+            menu === 'upgrading' ? 'bg-orange-500' : '',
             className
           )}
           onSubmit={onSubmit}
@@ -241,28 +244,32 @@ export const Leap = React.forwardRef(
           <label
             htmlFor="leap"
             className={classNames(
-              'inline-block flex-none p-2 h4 text-blue-400',
-              !selection && 'sr-only'
+              'inline-block flex-none p-2 h4 ',
+              menu === 'upgrading' ? 'text-white' : !selection ? 'sr-only' : 'text-blue-400'
             )}
           >
-            {selection || 'Search'}
+            {menu === 'upgrading'
+              ? 'Your Urbit is being updated, this page will refresh when ready'
+              : selection || 'Search'}
           </label>
-          <input
-            id="leap"
-            type="text"
-            ref={inputRef}
-            placeholder={selection ? '' : 'Search'}
-            className="flex-1 w-full h-full px-2 h4 text-base rounded-full bg-transparent outline-none"
-            value={rawInput}
-            onClick={toggleSearch}
-            onFocus={onFocus}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            autoComplete="off"
-            aria-autocomplete="both"
-            aria-controls={dropdown}
-            aria-activedescendant={selectedMatch?.display || selectedMatch?.value}
-          />
+          {menu !== 'upgrading' ? (
+            <input
+              id="leap"
+              type="text"
+              ref={inputRef}
+              placeholder={selection ? '' : 'Search'}
+              className="flex-1 w-full h-full px-2 h4 text-base rounded-full bg-transparent outline-none"
+              value={rawInput}
+              onClick={toggleSearch}
+              onFocus={onFocus}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              autoComplete="off"
+              aria-autocomplete="both"
+              aria-controls={dropdown}
+              aria-activedescendant={selectedMatch?.display || selectedMatch?.value}
+            />
+          ) : null}
         </form>
         {menu === 'search' && (
           <Link

pkg/grid/src/nav/Nav.tsx

@@ -52,7 +52,8 @@ export type MenuState =
   | 'search'
   | 'notifications'
   | 'help-and-support'
-  | 'system-preferences';
+  | 'system-preferences'
+  | 'upgrading';
 
 interface NavProps {
   menu?: MenuState;
@@ -68,7 +69,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
   const select = useLeapStore((state) => state.select);
 
   const menuState = menu || 'closed';
-  const isOpen = menuState !== 'closed';
+  const isOpen = menuState !== 'upgrading' && menuState !== 'closed';
   const eitherOpen = isOpen || systemMenuOpen;
 
   useEffect(() => {

pkg/grid/src/tiles/Tile.tsx

@@ -13,19 +13,20 @@ import { Bullet } from '../components/icons/Bullet';
 type TileProps = {
   charge: ChargeWithDesk;
   desk: string;
+  disabled?: boolean;
 };
 
-export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
+export const Tile: FunctionComponent<TileProps> = ({ charge, desk, disabled = false }) => {
   const addRecentApp = useRecentsStore((state) => state.addRecentApp);
   const { title, image, color, chad, href } = charge;
   const vat = useVat(desk);
   const { lightText, tileColor, menuColor, suspendColor, suspendMenuColor } = useTileColor(color);
-  const loading = 'install' in chad;
-  const suspended = 'suspend' in chad;
+  const loading = !disabled && 'install' in chad;
+  const suspended = disabled || 'suspend' in chad;
   const hung = 'hung' in chad;
-  const active = chadIsRunning(chad);
+  const active = !disabled && chadIsRunning(chad);
   const link = getAppHref(href);
-  const backgroundColor = active ? tileColor || 'purple' : suspendColor;
+  const backgroundColor = suspended ? suspendColor : active ? tileColor || 'purple' : suspendColor;
 
   return (
     <a
@@ -47,14 +48,12 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
             <>
               {loading && <Spinner className="h-6 w-6 mr-2" />}
               <span className="text-gray-500">
-                {suspended && 'Suspended'}
-                {loading && 'Installing'}
-                {hung && 'Errored'}
+                {suspended ? 'Suspended' : loading ? 'Installing' : hung ? 'Errored' : null }
               </span>
             </>
           )}
         </div>
-        {vat?.arak.rail?.paused && (
+        {vat?.arak.rail?.paused && !disabled && (
           <Bullet className="absolute z-10 top-5 left-5 sm:top-7 sm:left-7 w-4 h-4 text-orange-500 dark:text-black" />
         )}
         <TileMenu