From 2b909becdbb1f268748a5c5a478f5f9634da0861 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 11 Mar 2026 12:27:07 -0700
Subject: [PATCH] fix(shell): move info icon to left of layer toggle in tab bar

Slot the rApp info button into the tab-bar's tab-actions area so it
appears immediately left of the view-toggle (layer icon) instead of
after it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/shell.ts                     | 7 ++++---
 shared/components/rstack-tab-bar.ts | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/server/shell.ts b/server/shell.ts
index 4ddc3f1..8c2034c 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -151,8 +151,9 @@ export function renderShell(opts: ShellOptions): string {
   <rstack-space-settings space="${escapeAttr(spaceSlug)}" module-id="${escapeAttr(moduleId)}"></rstack-space-settings>
   <rstack-history-panel></rstack-history-panel>
   <div class="rstack-tab-row">
-    <rstack-tab-bar space="${escapeAttr(spaceSlug)}" active="" view-mode="flat"></rstack-tab-bar>
-    <button class="rapp-info-btn" id="rapp-info-btn" title="About this rApp"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></button>
+    <rstack-tab-bar space="${escapeAttr(spaceSlug)}" active="" view-mode="flat">
+      <button class="rapp-info-btn" id="rapp-info-btn" title="About this rApp"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></button>
+    </rstack-tab-bar>
   </div>
   <div id="rapp-info-panel" class="rapp-info-panel" style="display:none">
     <div class="rapp-info-panel__header">
@@ -1062,7 +1063,7 @@ const WELCOME_CSS = `
 const INFO_PANEL_CSS = `
 .rapp-info-btn {
   display: flex; align-items: center; justify-content: center;
-  width: 28px; height: 28px; padding: 0; margin-left: 4px;
+  width: 28px; height: 28px; padding: 0; margin-right: 2px;
   background: none; border: 1px solid transparent; border-radius: 6px;
   color: var(--rs-text-muted); cursor: pointer; flex-shrink: 0;
   transition: color 0.15s, background 0.15s, border-color 0.15s;
diff --git a/shared/components/rstack-tab-bar.ts b/shared/components/rstack-tab-bar.ts
index b512112..8b60f77 100644
--- a/shared/components/rstack-tab-bar.ts
+++ b/shared/components/rstack-tab-bar.ts
@@ -421,6 +421,7 @@ export class RStackTabBar extends HTMLElement {
 					${this.#addMenuOpen ? this.#renderAddMenu() : ""}
 				</div>
 				<div class="tab-actions">
+					<slot></slot>
 					<button class="view-toggle ${this.#viewMode === "stack" ? "active" : ""}"
 					        id="view-toggle" title="Toggle stack view">
 						${this.#viewMode === "stack" ? ICON_FLAT : ICON_STACK}