refactor(shell): convert settings & history panels to dropdown menus

Replace full-height slide-in panels with compact dropdowns that appear
beneath header icons. Both icons now grouped in header-right with
mutual exclusion and click-outside-to-close behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/shell.ts

@@ -227,7 +227,7 @@ export function renderShell(opts: ShellOptions): string {
     <div class="rstack-header__left">
       <a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
       <rstack-app-switcher current="${escapeAttr(moduleId)}"></rstack-app-switcher>
-      <rstack-space-switcher current="${escapeAttr(spaceSlug)}" name="${escapeAttr(spaceName || spaceSlug)}"></rstack-space-switcher>${spaceEncrypted ? '<span class="rstack-header__encrypted" title="End-to-end encrypted space">&#x1F512;</span>' : ''}<button class="rstack-header__history-btn" id="history-btn" title="History"><svg width="18" height="18" 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"/><polyline points="12 6 12 12 16 14"/></svg></button>
+      <rstack-space-switcher current="${escapeAttr(spaceSlug)}" name="${escapeAttr(spaceName || spaceSlug)}"></rstack-space-switcher>${spaceEncrypted ? '<span class="rstack-header__encrypted" title="End-to-end encrypted space">&#x1F512;</span>' : ''}
     </div>
     <div class="rstack-header__center">
       <rstack-mi></rstack-mi>
@@ -237,12 +237,17 @@ export function renderShell(opts: ShellOptions): string {
       <rstack-offline-indicator></rstack-offline-indicator>
       <rstack-notification-bell></rstack-notification-bell>
       <rstack-share-panel></rstack-share-panel>
+      <div class="rstack-header__dropdown-wrap">
+        <button class="rstack-header__history-btn" id="history-btn" title="History"><svg width="18" height="18" 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"/><polyline points="12 6 12 12 16 14"/></svg></button>
+        <rstack-history-panel></rstack-history-panel>
+      </div>
+      <div class="rstack-header__dropdown-wrap">
         <button class="rstack-header__settings-btn" id="settings-btn" title="Space Settings"><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="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
+        <rstack-space-settings space="${escapeAttr(spaceSlug)}" module-id="${escapeAttr(moduleId)}"></rstack-space-settings>
+      </div>
       <rstack-identity></rstack-identity>
     </div>
   </header>
-  <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">
       <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>
@@ -281,16 +286,16 @@ export function renderShell(opts: ShellOptions): string {
       window.__rspaceInstallPrompt = () => { e.prompt(); return e.userChoice; };
       window.dispatchEvent(new CustomEvent("rspace-install-available"));
     });
-    // ── Settings panel toggle ──
+    // ── Settings panel toggle (close history first) ──
     document.getElementById('settings-btn')?.addEventListener('click', () => {
-      const panel = document.querySelector('rstack-space-settings');
+      document.querySelector('rstack-history-panel')?.close();
-      if (panel) panel.toggle();
+      document.querySelector('rstack-space-settings')?.toggle();
     });
 
-    // ── History panel toggle ──
+    // ── History panel toggle (close settings first) ──
     document.getElementById('history-btn')?.addEventListener('click', () => {
-      const panel = document.querySelector('rstack-history-panel');
+      document.querySelector('rstack-space-settings')?.close();
-      if (panel) panel.toggle();
+      document.querySelector('rstack-history-panel')?.toggle();
     });
 
     // Wire history panel to offline runtime doc (module pages)

shared/components/rstack-history-panel.ts

@@ -51,17 +51,28 @@ export class RStackHistoryPanel extends HTMLElement {
 		}
 	}
 
+	private _clickOutsideHandler = (e: MouseEvent) => {
+		const path = e.composedPath();
+		if (!path.includes(this) && !path.includes(document.getElementById("history-btn")!)) {
+			this.close();
+		}
+	};
+
 	connectedCallback() {
 		if (!this.shadowRoot) this.attachShadow({ mode: "open" });
 		this._render();
 	}
 
+	disconnectedCallback() {
+		document.removeEventListener("click", this._clickOutsideHandler, true);
+	}
+
 	open() {
 		this._open = true;
 		this._refreshHistory();
 		this._render();
-		// Toggle active state on button
 		document.getElementById("history-btn")?.classList.add("active");
+		document.addEventListener("click", this._clickOutsideHandler, true);
 	}
 
 	close() {
@@ -69,6 +80,7 @@ export class RStackHistoryPanel extends HTMLElement {
 		this._timeMachineSnapshot = null;
 		this._render();
 		document.getElementById("history-btn")?.classList.remove("active");
+		document.removeEventListener("click", this._clickOutsideHandler, true);
 	}
 
 	toggle() {
@@ -277,7 +289,6 @@ export class RStackHistoryPanel extends HTMLElement {
 
 		this.shadowRoot.innerHTML = `
 			<style>${PANEL_CSS}</style>
-			<div class="overlay" id="overlay"></div>
 			<div class="panel">
 				<div class="panel-header">
 					<h2>History</h2>
@@ -354,7 +365,6 @@ export class RStackHistoryPanel extends HTMLElement {
 		const sr = this.shadowRoot!;
 
 		sr.getElementById("close-btn")?.addEventListener("click", () => this.close());
-		sr.getElementById("overlay")?.addEventListener("click", () => this.close());
 
 		// Tab switching
 		sr.querySelectorAll(".tab").forEach(btn => {
@@ -406,37 +416,28 @@ const PANEL_CSS = `
 	display: contents;
 }
 
-.overlay {
-	position: fixed;
-	inset: 0;
-	background: rgba(0, 0, 0, 0.5);
-	z-index: 200000;
-	animation: fadeIn 0.2s ease;
-}
-
 .panel {
-	position: fixed;
+	position: absolute;
-	top: 0;
+	top: 100%;
 	right: 0;
-	bottom: 0;
 	width: min(420px, 92vw);
+	max-height: calc(100vh - 72px);
 	background: var(--rs-bg-surface, #1e293b);
-	border-left: 1px solid var(--rs-border, #334155);
+	border: 1px solid var(--rs-border, #334155);
+	border-radius: 12px;
+	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
 	z-index: 200001;
 	display: flex;
 	flex-direction: column;
-	animation: slideIn 0.25s ease;
+	animation: dropDown 0.2s ease;
 	color: var(--rs-text-primary, #e2e8f0);
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	margin-top: 6px;
 }
 
-@keyframes slideIn {
+@keyframes dropDown {
-	from { transform: translateX(100%); }
+	from { opacity: 0; transform: translateY(-8px); }
-	to { transform: translateX(0); }
+	to { opacity: 1; transform: translateY(0); }
-}
-@keyframes fadeIn {
-	from { opacity: 0; }
-	to { opacity: 1; }
 }
 
 .panel-header {

shared/components/rstack-space-settings.ts

@@ -77,6 +77,13 @@ export class RStackSpaceSettings extends HTMLElement {
 		}
 	}
 
+	private _clickOutsideHandler = (e: MouseEvent) => {
+		const path = e.composedPath();
+		if (!path.includes(this) && !path.includes(document.getElementById("settings-btn")!)) {
+			this.close();
+		}
+	};
+
 	connectedCallback() {
 		this._space = this.getAttribute("space") || "";
 		this._moduleId = this.getAttribute("module-id") || "";
@@ -84,16 +91,22 @@ export class RStackSpaceSettings extends HTMLElement {
 		this._render();
 	}
 
+	disconnectedCallback() {
+		document.removeEventListener("click", this._clickOutsideHandler, true);
+	}
+
 	open() {
 		this._open = true;
 		this._loadData();
 		this._loadModuleConfig();
 		this._render();
+		document.addEventListener("click", this._clickOutsideHandler, true);
 	}
 
 	close() {
 		this._open = false;
 		this._render();
+		document.removeEventListener("click", this._clickOutsideHandler, true);
 	}
 
 	toggle() {
@@ -355,7 +368,6 @@ export class RStackSpaceSettings extends HTMLElement {
 
 		this.shadowRoot.innerHTML = `
 			<style>${PANEL_CSS}</style>
-			<div class="overlay" id="overlay"></div>
 			<div class="panel">
 				<div class="panel-header">
 					<h2>${panelTitle}</h2>
@@ -426,7 +438,6 @@ export class RStackSpaceSettings extends HTMLElement {
 		const sr = this.shadowRoot!;
 
 		sr.getElementById("close-btn")?.addEventListener("click", () => this.close());
-		sr.getElementById("overlay")?.addEventListener("click", () => this.close());
 
 		// Toggle add mode
 		sr.querySelectorAll(".toggle-btn").forEach(btn => {
@@ -656,37 +667,28 @@ const PANEL_CSS = `
 	display: contents;
 }
 
-.overlay {
-	position: fixed;
-	inset: 0;
-	background: rgba(0, 0, 0, 0.5);
-	z-index: 200000;
-	animation: fadeIn 0.2s ease;
-}
-
 .panel {
-	position: fixed;
+	position: absolute;
-	top: 0;
+	top: 100%;
 	right: 0;
-	bottom: 0;
 	width: min(380px, 90vw);
+	max-height: calc(100vh - 72px);
 	background: var(--rs-bg-surface);
-	border-left: 1px solid var(--rs-border);
+	border: 1px solid var(--rs-border);
+	border-radius: 12px;
+	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
 	z-index: 200001;
 	display: flex;
 	flex-direction: column;
-	animation: slideIn 0.25s ease;
+	animation: dropDown 0.2s ease;
 	color: var(--rs-text-primary);
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	margin-top: 6px;
 }
 
-@keyframes slideIn {
+@keyframes dropDown {
-	from { transform: translateX(100%); }
+	from { opacity: 0; transform: translateY(-8px); }
-	to { transform: translateX(0); }
+	to { opacity: 1; transform: translateY(0); }
-}
-@keyframes fadeIn {
-	from { opacity: 0; }
-	to { opacity: 1; }
 }
 
 .panel-header {

website/public/shell.css

@@ -105,6 +105,14 @@ body {
   -webkit-text-fill-color: transparent;
 }
 
+/* ── Dropdown wrapper (positions panel relative to button) ── */
+
+.rstack-header__dropdown-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
 /* ── Header icon buttons (settings gear, history clock) ── */
 
 .rstack-header__settings-btn,
@@ -441,8 +449,9 @@ body.rstack-sidebar-open #toolbar {
     flex-wrap: wrap;
     gap: 6px;
   }
-  /* Hide settings gear on mobile — accessible via identity dropdown */
+  /* Hide settings/history on mobile — accessible via identity dropdown */
-  .rstack-header__settings-btn { display: none; }
+  .rstack-header__settings-btn,
+  .rstack-header__history-btn { display: none; }
   /* Sidebar overlays on mobile — no push offsets */
   body.rstack-sidebar-open .rstack-tab-row { left: 0; }
   body.rstack-sidebar-open #app { margin-left: 0; }