fix(webapp): improve preview branch auto-archive settings UI

Author: samejr

.server-changes/preview-auto-archive-settings-ui.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Simplify preview branch auto-archive settings with clearer descriptions, individual fields for branches to keep, and an option to disable auto-archiving in the settings dialog.

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

@@ -287,57 +287,67 @@ export default function Page() {
               Branches docs
             </LinkButton>
           </WhenAgentUnavailable>
-
-          {limits.isAtLimit ? (
-            <UpgradePanel
-              limits={limits}
-              canUpgrade={canUpgrade ?? false}
-              canPurchaseBranches={canPurchaseBranches}
-              branchPricing={branchPricing}
-              extraBranches={extraBranches}
-              maxBranchQuota={maxBranchQuota}
-              planBranchLimit={planBranchLimit}
-            />
-          ) : (
-            <NewBranchPanel
-              button={
-                <Button
-                  variant="primary/small"
-                  shortcut={{ key: "n" }}
-                  LeadingIcon={PlusIcon}
-                  leadingIconClassName="text-white"
-                  fullWidth
-                  textAlignLeft
-                  disabled={!canManageBranches}
-                  tooltip={
-                    canManageBranches ? undefined : "You don't have permission to create branches."
-                  }
-                >
-                  New branch…
-                </Button>
-              }
-              env="preview"
-            />
-          )}
         </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
-        <div className="grid max-h-full min-h-full grid-rows-[auto_1fr_auto]">
-          <div className="flex items-center justify-between gap-x-1.5 p-2">
-            <BranchFilters>
-              {autoArchiveAvailable && (
-                <AutoArchiveSettings
-                  environment={branchableEnvironment}
-                  canManage={canManageBranches}
+        <div
+          className={cn(
+            "grid max-h-full min-h-full",
+            hasBranches ? "grid-rows-[auto_1fr_auto]" : "grid-rows-[1fr]"
+          )}
+        >
+          {hasBranches && (
+            <div className="flex items-center justify-between gap-x-1.5 p-2">
+              <BranchFilters>
+                {autoArchiveAvailable && (
+                  <AutoArchiveSettings
+                    environment={branchableEnvironment}
+                    canManage={canManageBranches}
+                  />
+                )}
+              </BranchFilters>
+              <div className="flex shrink-0 items-center gap-2">
+                <PaginationControls
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  showPageNumbers={false}
                 />
-              )}
-            </BranchFilters>
-            <PaginationControls
-              currentPage={currentPage}
-              totalPages={totalPages}
-              showPageNumbers={false}
-            />
-          </div>
+                {limits.isAtLimit ? (
+                  <UpgradePanel
+                    limits={limits}
+                    canUpgrade={canUpgrade ?? false}
+                    canPurchaseBranches={canPurchaseBranches}
+                    branchPricing={branchPricing}
+                    extraBranches={extraBranches}
+                    maxBranchQuota={maxBranchQuota}
+                    planBranchLimit={planBranchLimit}
+                  />
+                ) : (
+                  <NewBranchPanel
+                    button={
+                      <Button
+                        variant="primary/small"
+                        shortcut={{ key: "n" }}
+                        LeadingIcon={PlusIcon}
+                        leadingIconClassName="text-white"
+                        fullWidth
+                        textAlignLeft
+                        disabled={!canManageBranches}
+                        tooltip={
+                          canManageBranches
+                            ? undefined
+                            : "You don't have permission to create branches."
+                        }
+                      >
+                        New branch…
+                      </Button>
+                    }
+                    env="preview"
+                  />
+                )}
+              </div>
+            </div>
+          )}
           {!hasBranches ? (
             <MainCenteredContainer className="max-w-md">
               <BranchesNoBranches