feat(toolwindows): Agents second on the stripe, icon-only stripes by default

- Agents sits right after Project on the left stripe.
- The separator between a stripe's primary and split windows only shows
  while a button is dragged, as a drop target.
- "Show tool window names" is off by default: stripes start at their
  narrowest width with icons only.

crates/ide-core/src/settings.rs

@@ -330,7 +330,7 @@ impl Default for AppearanceSettings {
             ide_antialiasing: "greyscale".into(),
             editor_antialiasing: "greyscale".into(),
             show_tool_window_bars: true,
-            show_tool_window_names: true,
+            show_tool_window_names: false,
             widescreen_tool_windows: false,
             status_bar_widgets: BTreeMap::new(),
             main_toolbar: None,

src/features/agents/index.ts

@@ -35,7 +35,7 @@ export function activate(): () => void {
       title: "Agents",
       icon: "toolwindow-agents",
       anchor: "left",
-      order: 30,
+      order: 0.5,
       component: lazyComponent(() => import("./AgentsView").then((m) => m.AgentsView)),
       headerActions: lazyComponent(() => import("./AgentsView").then((m) => m.AgentsHeaderActions)),
       useBadge: () => {

src/features/settings/model/behaviorSchema.ts

@@ -81,7 +81,7 @@ export const DEFAULT_APPEARANCE_EXTRAS: AppearanceExtras = {
   ideAntialiasing: "greyscale",
   editorAntialiasing: "greyscale",
   showToolWindowBars: true,
-  showToolWindowNames: true,
+  showToolWindowNames: false,
   widescreenToolWindows: false,
 };
 

src/workbench/Workbench.test.tsx

@@ -249,8 +249,8 @@ describe("tool window stripe", () => {
     expect(ids("bottom")).toEqual(["terminal"]);
     expect(ids("right")).toEqual(["db"]);
     expect(ids("bottom-split")).toEqual(["services"]);
-    // Only the left stripe has split windows: one separator.
-    expect(document.querySelectorAll("[data-stripe-separator]")).toHaveLength(1);
+    // The separator only shows while a button is dragged.
+    expect(document.querySelectorAll("[data-stripe-separator]")).toHaveLength(0);
     unmount();
   });
 });

src/workbench/toolwindows/ToolWindows.tsx

@@ -274,7 +274,7 @@ let dragEnded = false;
 
 /**
  * Stripe groups (IDEA New UI): each stripe's upper group holds its side,
- * primary windows then split ones after a separator; the lower group of the
+ * primary windows then split ones (a separator marks the boundary while dragging); the lower group of the
  * left stripe holds Bottom Left, that of the right stripe Bottom Right.
  */
 function lowerSlot(side: StripeSide): ToolWindowSlot {
@@ -473,7 +473,7 @@ export function ToolWindowStripe({
   side,
   windows,
   visible,
-  showNames = true,
+  showNames = false,
   buttonWidth,
 }: {
   side: StripeSide;
@@ -494,7 +494,7 @@ export function ToolWindowStripe({
   const moreWindows = windows.filter((w) => !onStripe.includes(w));
   const focused = useToolWindowLayout((s) => s.focused);
   const drop = useStripeDrag((s) => s.drop);
-  // While a button is dragged the separator shows even without split windows, as a drop target.
+  // The separator between primary and split windows only shows while a button is dragged, as a drop target.
   const dragging = useStripeDrag((s) => !!s.id);
 
   const indicator = (slot: ToolWindowSlot, before: string | null) =>
@@ -528,12 +528,8 @@ export function ToolWindowStripe({
       onKeyDown={onStripeKeyDown}
     >
       {renderGroup(side, primary)}
-      {(split.length > 0 || dragging) && (
-        <>
-          <div className={styles.stripeSeparator} data-stripe-separator="" role="separator" />
-          {renderGroup(`${side}-split`, split)}
-        </>
-      )}
+      {dragging && <div className={styles.stripeSeparator} data-stripe-separator="" role="separator" />}
+      {(split.length > 0 || dragging) && renderGroup(`${side}-split`, split)}
       {side === "left" && <StripeMore windows={moreWindows} />}
       <div className={styles.stripeSpacer} data-stripe-spacer="" />
       {renderGroup(lowerSlot(side), lower)}
@@ -925,7 +921,7 @@ function useToolWindowAppearance() {
   const distractionFree = useDistractionFree((s) => s.active);
   return {
     bars: a?.showToolWindowBars !== false && !distractionFree,
-    names: a?.showToolWindowNames !== false,
+    names: a?.showToolWindowNames === true,
     widescreen: a?.widescreenToolWindows === true,
   };
 }