feat(web): add a compact thread cards option for the sidebar

apps/desktop/src/settings/DesktopClientSettings.test.ts

@@ -66,6 +66,7 @@ const clientSettings: ClientSettings = {
   threadDetailsUsageEnabled: false,
   threadDetailsItems: {},
   sidebarWorkingShelfEnabled: false,
+  sidebarCompactThreadCards: false,
   loadBalancingEnabled: false,
   loadBalancingWeights: { "environment-1": 75, "environment-2": 0 },
   pullRequestMergeMethodOverrides: {},

apps/web/src/components/settings/SettingsPanels.tsx

@@ -496,6 +496,9 @@ export function useSettingsRestore(onRestored?: () => void) {
     ...(settings.sidebarWorkingShelfEnabled !== DEFAULT_UNIFIED_SETTINGS.sidebarWorkingShelfEnabled
       ? ["Working section"]
       : []),
+    ...(settings.sidebarCompactThreadCards !== DEFAULT_UNIFIED_SETTINGS.sidebarCompactThreadCards
+      ? ["Compact thread cards"]
+      : []),
     ...(settings.sidebarAutoSettleAfterDays !== DEFAULT_UNIFIED_SETTINGS.sidebarAutoSettleAfterDays
       ? ["Auto-settle inactive threads"]
       : []),
@@ -677,6 +680,7 @@ export function useSettingsRestore(onRestored?: () => void) {
       sidebarProjectGroupingMode: DEFAULT_UNIFIED_SETTINGS.sidebarProjectGroupingMode,
       sidebarProjectSortOrder: DEFAULT_UNIFIED_SETTINGS.sidebarProjectSortOrder,
       sidebarWorkingShelfEnabled: DEFAULT_UNIFIED_SETTINGS.sidebarWorkingShelfEnabled,
+      sidebarCompactThreadCards: DEFAULT_UNIFIED_SETTINGS.sidebarCompactThreadCards,
       sidebarAutoSettleAfterDays: DEFAULT_UNIFIED_SETTINGS.sidebarAutoSettleAfterDays,
       sidebarAutoSettleKeepPullRequests: DEFAULT_UNIFIED_SETTINGS.sidebarAutoSettleKeepPullRequests,
       sidebarAutoSettleOnMerge: DEFAULT_UNIFIED_SETTINGS.sidebarAutoSettleOnMerge,
@@ -930,6 +934,37 @@ export function GeneralSettingsPanel() {
             />
           }
         />
+        <SettingsRow
+          {...setting("compact-thread-cards")}
+          description={
+            <T>
+              Drop the branch line from sidebar cards. Environment and provider icons move next to
+              the project name, and PRs next to the title. Hover a card for the details.
+            </T>
+          }
+          resetAction={
+            settings.sidebarCompactThreadCards !==
+            DEFAULT_UNIFIED_SETTINGS.sidebarCompactThreadCards ? (
+              <SettingResetButton
+                label="compact thread cards"
+                onClick={() =>
+                  updateSettings({
+                    sidebarCompactThreadCards: DEFAULT_UNIFIED_SETTINGS.sidebarCompactThreadCards,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.sidebarCompactThreadCards}
+              onCheckedChange={(checked) =>
+                updateSettings({ sidebarCompactThreadCards: Boolean(checked) })
+              }
+              aria-label={gt("Compact thread cards")}
+            />
+          }
+        />
       </SettingsSection>
 
       <SettingsSection id="confirmations" title={gt("Confirmations")}>

apps/web/src/components/settings/settingsSearch.ts

@@ -465,6 +465,12 @@ export const SETTINGS_SEARCH_ITEMS = [
     to: "/settings/general",
     searchTerms: ["hide fold running monitoring threads inbox sidebar shelf"],
   },
+  {
+    id: "compact-thread-cards",
+    title: msg("Compact thread cards"),
+    to: "/settings/general",
+    searchTerms: ["sidebar dense smaller hide branch worktree provider environment row"],
+  },
   {
     id: "boring-sidebar",
     title: "Boring sidebar (group by project)",

apps/web/src/components/sidebar/SidebarThreadRow.tsx

@@ -122,6 +122,7 @@ import { Menu, MenuItem, MenuItemDetail, MenuPopup, MenuSeparator, MenuTrigger }
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { MiddleTruncate } from "../ui/middle-truncate";
 import { useThreadHasUnsentDraft } from "../../composerDraftStore";
+import { useClientSettings } from "../../hooks/useSettings";
 
 // The fields thread rows show. Provider status pushes refresh `checkedAt`,
 // status and auth on every provider; leaving those out keeps each
@@ -188,6 +189,7 @@ function terminalProcessLabel(count: number): string {
 function SidebarProviderStack(props: {
   thread: SidebarThreadSummary;
   providerEntryByInstanceId: ReadonlyMap<string, SidebarProviderEntry>;
+  compact?: boolean;
 }) {
   const stack = resolveThreadProviderStack(props.thread);
   const currentInstanceId = stack[stack.length - 1]!;
@@ -206,7 +208,7 @@ function SidebarProviderStack(props: {
       acpRegistryIconUrl={currentEntry.acpRegistryIconUrl}
       showBadge={showInstanceBadge}
       size="compact"
-      iconClassName="opacity-60"
+      iconClassName={props.compact ? "size-3 opacity-60" : "opacity-60"}
     />
   );
   if (stack.length === 1) {
@@ -831,6 +833,8 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
 
   const isRemote = thread.environmentId !== props.currentEnvironmentId;
   const showsScratchMachine = !checkoutThread.branch && props.scratchMachineLabel !== null;
+  const compactCard =
+    useClientSettings((settings) => settings.sidebarCompactThreadCards) && variant === "card";
 
   const detailsTooltip = (
     <SidebarThreadTooltip
@@ -1207,7 +1211,27 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
       </span>
     </div>
   );
-  const titleLineIcons = metaLineEmpty ? (
+  const compactHeaderIcons = compactCard ? (
+    <span
+      aria-hidden
+      className="inline-flex shrink-0 items-center gap-1 text-sidebar-muted-foreground/70"
+    >
+      {isRemote || showsScratchMachine ? (
+        <EnvironmentMachineIcon kind={props.environmentMachine} className="size-3" />
+      ) : null}
+      <SidebarProviderStack
+        thread={thread}
+        providerEntryByInstanceId={props.providerEntryByInstanceId}
+        compact
+      />
+    </span>
+  ) : null;
+  const titleLineIcons = compactCard ? (
+    <>
+      {terminalStatusIcon}
+      {prBadge}
+    </>
+  ) : metaLineEmpty ? (
     <span aria-hidden className="inline-flex shrink-0 items-center gap-1">
       {remoteMachineIcon}
       <SidebarProviderStack
@@ -1424,7 +1448,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
       // that have not rendered yet, so a hint off by a pixel lands it a pixel short per row above.
       className={cn(
         "list-none py-0.5 [content-visibility:auto] [contain-intrinsic-size:auto_78px]",
-        metaLineEmpty && "[contain-intrinsic-size:auto_60px]",
+        (metaLineEmpty || compactCard) && "[contain-intrinsic-size:auto_60px]",
         sortable?.isDragging && "relative z-20",
       )}
     >
@@ -1452,7 +1476,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
           <div
             className={cn(
               "relative z-10 h-[4.875rem] px-(--sidebar-row-content-inset) py-(--sidebar-content-inset)",
-              metaLineEmpty && "h-auto",
+              (metaLineEmpty || compactCard) && "h-auto",
             )}
           >
             <div className="flex h-5 min-w-0 items-center gap-1.5">
@@ -1465,13 +1489,18 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
               {pinIndicator}
               {props.projectDisplayName ? (
                 <span
-                  className={cn("min-w-0 flex-1 truncate font-normal text-secondary-label text-xs")}
+                  className={cn(
+                    "min-w-0 truncate font-normal text-secondary-label text-xs",
+                    !compactCard && "flex-1",
+                  )}
                 >
                   {props.projectDisplayName}
                 </span>
-              ) : (
+              ) : compactCard ? null : (
                 <span className="flex-1" />
               )}
+              {compactHeaderIcons}
+              {compactCard ? <span className="flex-1" /> : null}
               {sortable?.isDragging ? (
                 dragDestination
               ) : (
@@ -1615,7 +1644,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
               ) : null}
               {titleLineIcons}
             </div>
-            {metaLine}
+            {compactCard ? null : metaLine}
           </div>
         </TooltipTrigger>
         {detailsTooltip}

packages/contracts/src/settings.ts

@@ -545,6 +545,7 @@ export const ClientSettingsSchema = Schema.Struct({
     Schema.withDecodingDefault(Effect.succeed({})),
   ),
   sidebarWorkingShelfEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
+  sidebarCompactThreadCards: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
   sidebarProjectGroupingMode: SidebarProjectGroupingMode.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_SIDEBAR_PROJECT_GROUPING_MODE)),
   ),
@@ -2092,6 +2093,7 @@ export const ClientSettingsPatch = Schema.Struct({
   threadDetailsUsageEnabled: Schema.optionalKey(Schema.Boolean),
   threadDetailsItems: Schema.optionalKey(Schema.Record(Schema.String, Schema.Boolean)),
   sidebarWorkingShelfEnabled: Schema.optionalKey(Schema.Boolean),
+  sidebarCompactThreadCards: Schema.optionalKey(Schema.Boolean),
   sidebarProjectGroupingMode: Schema.optionalKey(SidebarProjectGroupingMode),
   sidebarProjectGroupingOverrides: Schema.optionalKey(
     Schema.Record(TrimmedNonEmptyString, SidebarProjectGroupingMode),