Moves the Close session button

Author: samejr

apps/webapp/app/components/sessions/v1/CloseSessionDialog.tsx

@@ -30,8 +30,8 @@ export function CloseSessionDialog({
       <DialogHeader>Close this session?</DialogHeader>
       <div className="flex flex-col gap-3 pt-3">
         <Paragraph>
-          Closing a session is permanent. The session will no longer accept new input or trigger
-          new runs. Any in-flight run continues until it finishes on its own.
+          Closing a session is permanent. The session will no longer accept new input or trigger new
+          runs. Any in-flight run continues until it finishes on its own.
         </Paragraph>
         <Form action={formAction} method="post" className="flex flex-col gap-3">
           <input type="hidden" name="redirectUrl" value={redirectPath} />
@@ -52,16 +52,15 @@ export function CloseSessionDialog({
               <Button
                 type="submit"
                 variant="danger/medium"
-                LeadingIcon={isLoading ? SpinnerWhite : XCircleIcon}
                 disabled={isLoading}
                 shortcut={{ modifiers: ["mod"], key: "enter" }}
               >
-                {isLoading ? "Closing..." : "Close session"}
+                {isLoading ? "Closing…" : "Close session"}
               </Button>
             }
             cancelButton={
               <DialogClose asChild>
-                <Button variant={"tertiary/medium"}>Cancel</Button>
+                <Button variant={"secondary/medium"}>Cancel</Button>
               </DialogClose>
             }
           />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions.$sessionParam/route.tsx

@@ -143,18 +143,6 @@ export default function Page() {
           >
             Sessions docs
           </LinkButton>
-          {status === "ACTIVE" && (
-            <Dialog key={`close-${session.friendlyId}`}>
-              <DialogTrigger asChild>
-                <Button variant="danger/small">Close session…</Button>
-              </DialogTrigger>
-              <CloseSessionDialog
-                sessionParam={session.friendlyId}
-                environmentId={environment.id}
-                redirectPath={`${sessionsPath}/${session.friendlyId}`}
-              />
-            </Dialog>
-          )}
         </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
@@ -665,16 +653,31 @@ function OverviewTab({ session, status }: { session: LoadedSession; status: Sess
   const project = useProject();
   const environment = useEnvironment();
   const isAdmin = useHasAdminAccess();
+  const sessionsPath = v3SessionsPath(organization, project, environment);
 
   return (
     <div className="flex flex-col gap-4">
       <Property.Table>
-        <Property.Item>
-          <Property.Label>Status</Property.Label>
-          <Property.Value>
-            <SessionStatusCombo status={status} />
-          </Property.Value>
-        </Property.Item>
+        <div className="flex items-start justify-between gap-3">
+          <Property.Item>
+            <Property.Label>Status</Property.Label>
+            <Property.Value>
+              <SessionStatusCombo status={status} />
+            </Property.Value>
+          </Property.Item>
+          {status === "ACTIVE" && (
+            <Dialog key={`close-${session.friendlyId}`}>
+              <DialogTrigger asChild>
+                <Button variant="danger/small">Close session…</Button>
+              </DialogTrigger>
+              <CloseSessionDialog
+                sessionParam={session.friendlyId}
+                environmentId={environment.id}
+                redirectPath={`${sessionsPath}/${session.friendlyId}`}
+              />
+            </Dialog>
+          )}
+        </div>
         <Property.Item>
           <Property.Label>Friendly ID</Property.Label>
           <Property.Value>