From 315a29a6d7de12497d6007025363f58206a3f6f8 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 16 Mar 2026 20:58:52 -0700
Subject: [PATCH] fix(shell): hide notification/share/settings icons on mobile,
 add to identity dropdown

On mobile (<=640px), the header right section was too crowded with icons.
Now hides notification bell, share panel, and settings gear buttons, and
adds equivalent mobile-only items in the identity dropdown menu. Share
uses native navigator.share() when available.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 shared/components/rstack-identity.ts          | 21 +++++++++++++++++++
 shared/components/rstack-notification-bell.ts | 15 +++++++++++++
 shared/components/rstack-share-panel.ts       | 14 +++++++++++++
 website/public/shell.css                      |  2 ++
 4 files changed, 52 insertions(+)

diff --git a/shared/components/rstack-identity.ts b/shared/components/rstack-identity.ts
index 793d631..7991d4e 100644
--- a/shared/components/rstack-identity.ts
+++ b/shared/components/rstack-identity.ts
@@ -382,6 +382,10 @@ export class RStackIdentity extends HTMLElement {
 						<button class="dropdown-item" data-action="my-account">👤 My Account</button>
 						<button class="dropdown-item" data-action="my-spaces">🌐 My Spaces</button>
 						<button class="dropdown-item" data-action="my-wallets">💰 My Wallets</button>
+						<div class="dropdown-divider mobile-only"></div>
+						<button class="dropdown-item mobile-only" data-action="notifications">🔔 Notifications</button>
+						<button class="dropdown-item mobile-only" data-action="share">📤 Share</button>
+						<button class="dropdown-item mobile-only" data-action="settings">⚙️ Space Settings</button>
 						<div class="dropdown-divider"></div>
 						<div class="dropdown-theme-row">
 							<span class="theme-icon">☀️</span>
@@ -431,6 +435,16 @@ export class RStackIdentity extends HTMLElement {
 						this.#showSpacesModal();
 					} else if (action === "my-wallets") {
 						this.#showWalletsModal();
+					} else if (action === "notifications") {
+						(document.querySelector("rstack-notification-bell") as any)?.toggle();
+					} else if (action === "share") {
+						if (navigator.share) {
+							navigator.share({ url: location.href, title: document.title }).catch(() => {});
+						} else {
+							(document.querySelector("rstack-share-panel") as any)?.toggle();
+						}
+					} else if (action === "settings") {
+						(document.getElementById("settings-btn") as HTMLElement)?.click();
 					}
 				});
 			});
@@ -1530,6 +1544,13 @@ const STYLES = `
 .dropdown-divider { height: 1px; margin: 4px 0; }
 .dropdown-divider { background: var(--rs-border-subtle); }
 
+/* Mobile-only items — hidden on desktop, shown on mobile */
+.mobile-only { display: none; }
+@media (max-width: 640px) {
+  .mobile-only { display: flex; }
+  .mobile-only.dropdown-divider { display: block; }
+}
+
 /* Theme toggle in dropdown */
 .dropdown-theme-row {
   display: flex; align-items: center; justify-content: center;
diff --git a/shared/components/rstack-notification-bell.ts b/shared/components/rstack-notification-bell.ts
index b82f0e8..83ca47f 100644
--- a/shared/components/rstack-notification-bell.ts
+++ b/shared/components/rstack-notification-bell.ts
@@ -282,6 +282,9 @@ export class RStackNotificationBell extends HTMLElement {
     }
   }
 
+  /** Public toggle — called from identity dropdown on mobile */
+  toggle() { this.#togglePanel(); }
+
   #togglePanel() {
     this.#open = !this.#open;
     if (this.#open && this.#notifications.length === 0) {
@@ -623,4 +626,16 @@ const STYLES = `
 .notif-dismiss:hover {
   color: var(--rs-text-primary, #e2e8f0);
 }
+
+@media (max-width: 640px) {
+  .bell-btn { display: none; }
+  .panel {
+    position: fixed;
+    top: 60px;
+    right: 8px;
+    left: 8px;
+    width: auto;
+    max-height: calc(100vh - 80px);
+  }
+}
 `;
diff --git a/shared/components/rstack-share-panel.ts b/shared/components/rstack-share-panel.ts
index 1c539bd..73d5c18 100644
--- a/shared/components/rstack-share-panel.ts
+++ b/shared/components/rstack-share-panel.ts
@@ -31,6 +31,9 @@ export class RStackSharePanel extends HTMLElement {
     return document.body?.dataset?.spaceSlug || "";
   }
 
+  /** Public toggle — called from identity dropdown on mobile */
+  toggle() { this.#togglePanel(); }
+
   #togglePanel() {
     this.#open = !this.#open;
     this.#render();
@@ -359,4 +362,15 @@ label {
 .btn-blue:hover {
   background: #2563eb;
 }
+
+@media (max-width: 640px) {
+  .share-btn { display: none; }
+  .panel {
+    position: fixed;
+    top: 60px;
+    right: 8px;
+    left: 8px;
+    width: auto;
+  }
+}
 `;
diff --git a/website/public/shell.css b/website/public/shell.css
index 76c8d4a..6ddccad 100644
--- a/website/public/shell.css
+++ b/website/public/shell.css
@@ -413,6 +413,8 @@ body.rstack-sidebar-open #toolbar {
     flex-wrap: wrap;
     gap: 6px;
   }
+  /* Hide settings gear on mobile — accessible via identity dropdown */
+  .rstack-header__settings-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; }