jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-03-11 12:27:07 -07:00
parent 99e486b598
commit 2b909becdb
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
server/shell.ts
View File

@ -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;

1
shared/components/rstack-tab-bar.ts
View File

@ -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}