dialog: fixing usage across stacking dialogs

ui/src/components/AppInfo.tsx

@@ -3,7 +3,8 @@ import clipboardCopy from 'clipboard-copy';
 import React, { FC, useCallback, useState } from 'react';
 import cn from 'classnames';
 import { Button, PillButton } from './Button';
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from './Dialog';
+import * as Dialog from '@radix-ui/react-dialog';
+import { DialogClose, DialogContent, DialogTrigger } from './Dialog';
 import { DocketHeader } from './DocketHeader';
 import { Spinner } from './Spinner';
 import { PikeMeta } from './PikeMeta';
@@ -102,7 +103,7 @@ export const AppInfo: FC<AppInfoProps> = ({
             </PillButton>
           )}
           {installStatus !== 'installed' && (
-            <Dialog portal={false}>
+            <Dialog.Root>
               <DialogTrigger asChild>
                 <PillButton variant="alt-primary" disabled={installing}>
                   {installing ? (
@@ -115,31 +116,34 @@ export const AppInfo: FC<AppInfoProps> = ({
                   )}
                 </PillButton>
               </DialogTrigger>
-              <DialogContent
-                showClose={false}
-                className="space-y-6"
-                containerClass="w-full max-w-md"
-              >
-                <h2 className="h4">
-                  Install &ldquo;{getAppName(docket)}&rdquo;
-                </h2>
-                <p className="pr-6 tracking-tight">
-                  This application will be able to view and interact with the
-                  contents of your Urbit. Only install if you trust the
-                  developer.
-                </p>
-                <div className="flex space-x-6">
-                  <DialogClose asChild>
-                    <Button variant="secondary">Cancel</Button>
-                  </DialogClose>
-                  <DialogClose asChild>
-                    <Button onClick={installApp}>
-                      Get &ldquo;{getAppName(docket)}&rdquo;
-                    </Button>
-                  </DialogClose>
-                </div>
-              </DialogContent>
-            </Dialog>
+              <Dialog.Portal>
+                <Dialog.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-[60] transform-gpu bg-black opacity-30" />
+                <DialogContent
+                  showClose={false}
+                  className="space-y-6"
+                  containerClass="w-full max-w-md z-[70]"
+                >
+                  <h2 className="h4">
+                    Install &ldquo;{getAppName(docket)}&rdquo;
+                  </h2>
+                  <p className="pr-6 tracking-tight">
+                    This application will be able to view and interact with the
+                    contents of your Urbit. Only install if you trust the
+                    developer.
+                  </p>
+                  <div className="flex space-x-6">
+                    <DialogClose asChild>
+                      <Button variant="secondary">Cancel</Button>
+                    </DialogClose>
+                    <DialogClose asChild>
+                      <Button onClick={installApp}>
+                        Get &ldquo;{getAppName(docket)}&rdquo;
+                      </Button>
+                    </DialogClose>
+                  </div>
+                </DialogContent>
+              </Dialog.Portal>
+            </Dialog.Root>
           )}
           <PillButton variant="alt-secondary" onClick={copyApp}>
             {!copied && 'Copy App Link'}

ui/src/components/Dialog.tsx

@@ -1,29 +1,17 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import classNames from 'classnames';
 
-interface DialogProps extends DialogPrimitive.DialogProps {
-  portal?: boolean;
-}
-
-export const Dialog: FC<DialogProps> = ({
+export const Dialog: FC<DialogPrimitive.DialogProps> = ({
   children,
-  portal = true,
   ...props
 }) => {
   return (
     <DialogPrimitive.Root {...props}>
-      {portal ? (
-        <DialogPrimitive.Portal>
-          <DialogPrimitive.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-30 transform-gpu bg-black opacity-30" />
-          {children}
-        </DialogPrimitive.Portal>
-      ) : (
-        <>
-          <DialogPrimitive.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-30 transform-gpu bg-black opacity-30" />
-          {children}
-        </>
-      )}
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-30 transform-gpu bg-black opacity-30" />
+        {children}
+      </DialogPrimitive.Portal>
     </DialogPrimitive.Root>
   );
 };

ui/src/components/LandscapeWayfinding.tsx

@@ -128,7 +128,7 @@ export default function LandscapeWayfinding() {
 
   return (
     <Dropdown.Root>
-      <div className="absolute left-4 bottom-16 z-50">
+      <div className="absolute left-4 bottom-16 z-[100]">
         <Dropdown.Trigger className="relative" asChild>
           <button className="h-9 w-9 cursor-pointer rounded-lg bg-black text-xl text-white">
             ?

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

@@ -3,14 +3,13 @@ import React from 'react';
 import { AppList } from '../../components/AppList';
 import { Button } from '../../components/Button';
 import {
-  Dialog,
   DialogClose,
   DialogContent,
   DialogTrigger,
 } from '../../components/Dialog';
+import * as Dialog from '@radix-ui/react-dialog';
 import { FullTlon16Icon } from '../../components/icons/FullTlon16Icon';
 import { useSystemUpdate } from '../../logic/useSystemUpdate';
-import { useCharge } from '../../state/docket';
 import { usePike, useLag } from '../../state/kiln';
 import { disableDefault, pluralize } from '../../state/util';
 import { UpdatePreferences } from './UpdatePreferences';
@@ -29,6 +28,8 @@ export const AboutSystem = () => {
   const hash = basePike && getHash(basePike);
   const lag = useLag();
 
+  console.log(systemBlocked, lag, blockedCount, gardenBlocked);
+
   return (
     <>
       <div className="inner-section relative mb-4 space-y-8">
@@ -90,46 +91,50 @@ export const AboutSystem = () => {
                       </p>
                     </>
                   ) : (
-                    <Dialog>
+                    <Dialog.Root>
                       <DialogTrigger asChild>
                         <Button variant="caution">
                           Suspend {blockedCount}{' '}
                           {pluralize('App', blockedCount)} and Apply Update
                         </Button>
                       </DialogTrigger>
-                      <DialogContent
-                        showClose={false}
-                        onOpenAutoFocus={disableDefault}
-                        className="space-y-6 tracking-tight"
-                        containerClass="w-full max-w-md"
-                      >
-                        <h2 className="h4">
-                          Suspend {blockedCount}{' '}
-                          {pluralize('App', blockedCount)} and Apply System
-                          Update
-                        </h2>
-                        <p>
-                          The following {pluralize('app', blockedCount)} will be
-                          suspended until their developer provides an update.
-                        </p>
-                        <AppList
-                          apps={blockedCharges}
-                          labelledBy="blocked-apps"
-                          size="xs"
-                        />
-                        <div className="flex space-x-6">
-                          <DialogClose asChild>
-                            <Button variant="secondary">Cancel</Button>
-                          </DialogClose>
-                          <DialogClose asChild>
-                            <Button variant="caution" onClick={freezeApps}>
-                              Suspend {pluralize('App', blockedCount)} and
-                              Update
-                            </Button>
-                          </DialogClose>
-                        </div>
-                      </DialogContent>
-                    </Dialog>
+                      <Dialog.Portal>
+                        <Dialog.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-[60] transform-gpu bg-black opacity-30" />
+                        <DialogContent
+                          showClose={false}
+                          onOpenAutoFocus={disableDefault}
+                          className="space-y-6 tracking-tight"
+                          containerClass="w-full max-w-md z-[70]"
+                        >
+                          <h2 className="h4">
+                            Suspend {blockedCount}{' '}
+                            {pluralize('App', blockedCount)} and Apply System
+                            Update
+                          </h2>
+                          <p>
+                            The following {pluralize('app', blockedCount)} will
+                            be suspended until their developer provides an
+                            update.
+                          </p>
+                          <AppList
+                            apps={blockedCharges}
+                            labelledBy="blocked-apps"
+                            size="xs"
+                          />
+                          <div className="flex space-x-6">
+                            <DialogClose asChild>
+                              <Button variant="secondary">Cancel</Button>
+                            </DialogClose>
+                            <DialogClose asChild>
+                              <Button variant="caution" onClick={freezeApps}>
+                                Suspend {pluralize('App', blockedCount)} and
+                                Update
+                              </Button>
+                            </DialogClose>
+                          </div>
+                        </DialogContent>
+                      </Dialog.Portal>
+                    </Dialog.Root>
                   )}
                 </>
               )}