From c891b33153d40ec54066f150a4c0349c813c47fa Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Tue, 24 Feb 2026 19:15:56 -0800 Subject: [PATCH] feat: add rStack AppSwitcher dropdown to header Adds the unified rStack app switcher as pure HTML/CSS/JS with pastel badges, emoji icons, and categorized navigation across all 17 rStack apps. Co-Authored-By: Claude Opus 4.6 --- index.html | 498 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 495 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8706222..bd315f0 100644 --- a/index.html +++ b/index.html @@ -339,6 +339,252 @@ .unlock-grid { grid-template-columns: 1fr; } .section-inner h2 { font-size: 1.5rem; } } + + /* ── AppSwitcher ─────────────────────────────── */ + + .app-switcher { + position: relative; + } + + .app-switcher-trigger { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0.625rem; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + background: rgba(255,255,255,0.08); + color: #cbd5e1; + border: none; + cursor: pointer; + transition: background 0.2s; + line-height: 1; + } + + .app-switcher-trigger:hover { + background: rgba(255,255,255,0.12); + } + + .app-switcher-badge { + width: 1.5rem; + height: 1.5rem; + border-radius: 0.375rem; + background: linear-gradient(135deg, #67e8f9, #c4b5fd, #fda4af); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 900; + color: #0f172a; + line-height: 1; + flex-shrink: 0; + } + + .app-switcher-arrow { + font-size: 0.7em; + opacity: 0.6; + } + + .app-switcher-dropdown { + display: none; + position: absolute; + top: 100%; + left: 0; + margin-top: 0.375rem; + width: 300px; + max-height: 70vh; + overflow-y: auto; + border-radius: 0.75rem; + background: #1e293b; + border: 1px solid rgba(255,255,255,0.1); + box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3); + z-index: 9999; + } + + .app-switcher-dropdown.open { + display: block; + } + + .app-switcher-header { + display: flex; + align-items: center; + gap: 0.625rem; + padding: 0.75rem 0.875rem; + border-bottom: 1px solid rgba(255,255,255,0.08); + } + + .app-switcher-header-badge { + width: 1.75rem; + height: 1.75rem; + border-radius: 0.5rem; + background: linear-gradient(135deg, #67e8f9, #c4b5fd, #fda4af); + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: 900; + color: #0f172a; + line-height: 1; + flex-shrink: 0; + } + + .app-switcher-header-text { + display: flex; + flex-direction: column; + } + + .app-switcher-header-title { + font-size: 0.875rem; + font-weight: 700; + color: #fff; + } + + .app-switcher-header-subtitle { + font-size: 10px; + color: #94a3b8; + } + + .app-switcher-cat { + padding: 0.75rem 0.875rem 0.25rem; + font-size: 0.6rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #64748b; + user-select: none; + } + + .app-switcher-item { + display: flex; + align-items: center; + transition: background 0.15s; + } + + .app-switcher-item:hover { + background: rgba(255,255,255,0.04); + } + + .app-switcher-item a { + display: flex; + align-items: center; + gap: 0.625rem; + flex: 1; + padding: 0.5rem 0.875rem; + color: #cbd5e1; + text-decoration: none; + min-width: 0; + } + + .app-switcher-item-badge { + width: 1.75rem; + height: 1.75rem; + border-radius: 0.375rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 900; + color: #0f172a; + line-height: 1; + flex-shrink: 0; + } + + .app-switcher-item-info { + display: flex; + flex-direction: column; + min-width: 0; + flex: 1; + } + + .app-switcher-item-name { + display: flex; + align-items: center; + gap: 0.375rem; + } + + .app-switcher-item-name span:first-child { + font-size: 0.875rem; + font-weight: 600; + } + + .app-switcher-item-name span:last-child { + font-size: 0.875rem; + flex-shrink: 0; + } + + .app-switcher-item-desc { + font-size: 11px; + color: #94a3b8; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .app-switcher-ext { + width: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + color: #22d3ee; + opacity: 0; + transition: opacity 0.15s; + flex-shrink: 0; + text-decoration: none; + } + + .app-switcher-item:hover .app-switcher-ext { + opacity: 0.5; + } + + .app-switcher-ext:hover { + opacity: 1 !important; + } + + .app-switcher-footer { + padding: 0.625rem 0.875rem; + border-top: 1px solid rgba(255,255,255,0.08); + text-align: center; + } + + .app-switcher-footer a { + font-size: 11px; + color: #64748b; + text-decoration: none; + transition: color 0.2s; + } + + .app-switcher-footer a:hover { + color: #22d3ee; + } + + /* Badge colors */ + .badge-teal { background: #5eead4; } + .badge-amber { background: #fcd34d; } + .badge-rose { background: #fda4af; } + .badge-sky { background: #7dd3fc; } + .badge-emerald { background: #6ee7b7; } + .badge-green { background: #86efac; } + .badge-indigo { background: #a5b4fc; } + .badge-fuchsia { background: #f0abfc; } + .badge-violet { background: #c4b5fd; } + .badge-lime { background: #bef264; } + .badge-yellow { background: #fde047; } + .badge-orange { background: #fdba74; } + .badge-red { background: #fca5a5; } + .badge-blue { background: #93c5fd; } + .badge-cyan { background: #67e8f9; } + .badge-pink { background: #f9a8d4; } + .badge-purple { background: #d8b4fe; } + + @media (max-width: 600px) { + .app-switcher-dropdown { + width: 280px; + left: auto; + right: -1rem; + } + } @@ -347,9 +593,217 @@