feat(gui): background terminals and more (#2303)

* fixes & allow for background terminals to stay running

* status indicators etc

1 files changed, 110 insertions, 101 deletions

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 27c57207..5963d31e 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -131,127 +131,136 @@ function App() {
 
   return (
     <div
-      className="flex h-dvh w-screen select-none"
-      style={{ maxWidth: "100vw" }}
+      className="flex w-screen select-none"
+      style={{ maxWidth: "100vw", height: "calc(100dvh - 2rem)" }}
     >
-      <div className="relative flex h-full flex-col !border-r-small border-divider transition-width pb-6 pt-9 items-center">
-        <div className="flex items-center gap-0 px-3 justify-center">
-          <div className="flex h-8 w-8">
-            <img src={icon} alt="icon" className="h-8 w-8" />
+      <div className="flex w-full">
+        <div className="relative flex flex-col !border-r-small border-divider transition-width pb-6 pt-4 items-center">
+          <div className="flex items-center gap-0 px-3 justify-center">
+            <div className="flex h-8 w-8">
+              <img src={icon} alt="icon" className="h-8 w-8" />
+            </div>
           </div>
-        </div>
-
-        <ScrollShadow className="-mr-6 h-full max-h-full py-6 pr-6">
-          <Sidebar
-            defaultSelectedKey="home"
-            isCompact={true}
-            items={navigation}
-          />
-        </ScrollShadow>
 
-        <Spacer y={2} />
+          <ScrollShadow className="-mr-6 h-full max-h-full py-6 pr-6">
+            <Sidebar
+              defaultSelectedKey="home"
+              isCompact={true}
+              items={navigation}
+              className="z-50"
+            />
+          </ScrollShadow>
 
-        <div className="flex items-center gap-3 px-3">
-          <Dropdown showArrow placement="right-start">
-            <DropdownTrigger>
-              <Button disableRipple isIconOnly radius="full" variant="light">
-                <Avatar
-                  isBordered
-                  className="flex-none"
-                  size="sm"
-                  name={user.username || ""}
-                />
-              </Button>
-            </DropdownTrigger>
-            <DropdownMenu aria-label="Custom item styles">
-              <DropdownItem
-                key="profile"
-                isReadOnly
-                className="h-14 opacity-100"
-                textValue="Signed in as"
-              >
-                <User
-                  avatarProps={{
-                    size: "sm",
-                    name: user.username || "Anonymous User",
-                    showFallback: true,
-                    imgProps: {
-                      className: "transition-none",
-                    },
-                  }}
-                  classNames={{
-                    name: "text-default-600",
-                    description: "text-default-500",
-                  }}
-                  description={
-                    user.bio || (user.username && "No bio") || "Sign up now"
-                  }
-                  name={user.username || "Anonymous User"}
-                />
-              </DropdownItem>
+          <Spacer y={2} />
 
-              <DropdownItem
-                key="settings"
-                description="Configure Atuin"
-                startContent={<Icon icon="solar:settings-linear" width={24} />}
-              >
-                Settings
-              </DropdownItem>
+          <div className="flex items-center gap-3 px-3">
+            <Dropdown showArrow placement="right-start">
+              <DropdownTrigger>
+                <Button disableRipple isIconOnly radius="full" variant="light">
+                  <Avatar
+                    isBordered
+                    className="flex-none"
+                    size="sm"
+                    name={user.username || ""}
+                  />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu aria-label="Custom item styles">
+                <DropdownItem
+                  key="profile"
+                  isReadOnly
+                  className="h-14 opacity-100"
+                  textValue="Signed in as"
+                >
+                  <User
+                    avatarProps={{
+                      size: "sm",
+                      name: user.username || "Anonymous User",
+                      showFallback: true,
+                      imgProps: {
+                        className: "transition-none",
+                      },
+                    }}
+                    classNames={{
+                      name: "text-default-600",
+                      description: "text-default-500",
+                    }}
+                    description={
+                      user.bio || (user.username && "No bio") || "Sign up now"
+                    }
+                    name={user.username || "Anonymous User"}
+                  />
+                </DropdownItem>
 
-              <DropdownSection aria-label="Help & Feedback">
                 <DropdownItem
-                  key="help_and_feedback"
-                  description="Get in touch"
-                  onPress={() => open("https://forum.atuin.sh")}
+                  key="settings"
+                  description="Configure Atuin"
                   startContent={
-                    <Icon width={24} icon="solar:question-circle-linear" />
+                    <Icon icon="solar:settings-linear" width={24} />
                   }
                 >
-                  Help & Feedback
+                  Settings
                 </DropdownItem>
 
-                {(user.username && (
+                <DropdownSection aria-label="Help & Feedback">
                   <DropdownItem
-                    key="logout"
+                    key="help_and_feedback"
+                    description="Get in touch"
+                    onPress={() => open("https://forum.atuin.sh")}
                     startContent={
-                      <Icon width={24} icon="solar:logout-broken" />
+                      <Icon width={24} icon="solar:question-circle-linear" />
                     }
-                    onClick={() => {
-                      logout();
-                      refreshUser();
-                    }}
-                  >
-                    Log Out
-                  </DropdownItem>
-                )) || (
-                  <DropdownItem
-                    key="signup"
-                    description="Sync, backup and share your data"
-                    className="bg-emerald-100"
-                    startContent={<KeyRoundIcon size="18px" />}
-                    onPress={onOpen}
                   >
-                    Log in or Register
+                    Help & Feedback
                   </DropdownItem>
-                )}
-              </DropdownSection>
-            </DropdownMenu>
-          </Dropdown>
+
+                  {(user.username && (
+                    <DropdownItem
+                      key="logout"
+                      startContent={
+                        <Icon width={24} icon="solar:logout-broken" />
+                      }
+                      onClick={() => {
+                        logout();
+                        refreshUser();
+                      }}
+                    >
+                      Log Out
+                    </DropdownItem>
+                  )) || (
+                    <DropdownItem
+                      key="signup"
+                      description="Sync, backup and share your data"
+                      className="bg-emerald-100"
+                      startContent={<KeyRoundIcon size="18px" />}
+                      onPress={onOpen}
+                    >
+                      Log in or Register
+                    </DropdownItem>
+                  )}
+                </DropdownSection>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
         </div>
-      </div>
 
-      {renderMain(section)}
+        {renderMain(section)}
 
-      <Toaster />
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="top-center">
-        <ModalContent className="p-8">
-          {(onClose) => (
-            <>
-              <LoginOrRegister onClose={onClose} />
-            </>
-          )}
-        </ModalContent>
-      </Modal>
+        <Toaster />
+        <Modal
+          isOpen={isOpen}
+          onOpenChange={onOpenChange}
+          placement="top-center"
+        >
+          <ModalContent className="p-8">
+            {(onClose) => (
+              <>
+                <LoginOrRegister onClose={onClose} />
+              </>
+            )}
+          </ModalContent>
+        </Modal>
+      </div>
     </div>
   );
 }