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

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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-24 19:15:56 -08:00
parent 308bc12b9f
commit c891b33153
1 changed files with 495 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

498
index.html
View File

@ -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;
}
}
</style>
<script defer src="https://rdata.online/collect.js" data-website-id="5d3c8bac-64b6-4e57-ba66-ed31b182fba0"></script>
</head>
@ -347,9 +593,217 @@
<!-- Nav -->
<nav style="border-bottom:1px solid rgba(255,255,255,0.08);padding:1rem 0;">
<div style="max-width:900px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;">
<a href="/" style="display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:#e2e8f0;">
<span style="font-size:1.1rem;font-weight:600;">rStack</span>
</a>
<div style="display:flex;align-items:center;gap:0.75rem;">
<a href="/" style="display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:#e2e8f0;">
<span style="font-size:1.1rem;font-weight:600;">rStack</span>
</a>
<div class="app-switcher" id="appSwitcher">
<button class="app-switcher-trigger" id="appSwitcherTrigger" aria-expanded="false" aria-haspopup="true">
<span class="app-switcher-badge">r*</span>
<span>rStack</span>
<span class="app-switcher-arrow">&#9662;</span>
</button>
<div class="app-switcher-dropdown" id="appSwitcherDropdown" role="menu">
<div class="app-switcher-header">
<span class="app-switcher-header-badge">r*</span>
<div class="app-switcher-header-text">
<span class="app-switcher-header-title">rStack</span>
<span class="app-switcher-header-subtitle">Self-hosted community app suite</span>
</div>
</div>
<!-- Creating -->
<div class="app-switcher-cat">Creating</div>
<div class="app-switcher-item">
<a href="https://rspace.online">
<span class="app-switcher-item-badge badge-teal">rS</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rSpace</span><span>🎨</span></div>
<div class="app-switcher-item-desc">Real-time collaborative canvas</div>
</div>
</a>
<a href="https://rspace.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rspace.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rnotes.online">
<span class="app-switcher-item-badge badge-amber">rN</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rNotes</span><span>📝</span></div>
<div class="app-switcher-item-desc">Group note-taking & knowledge capture</div>
</div>
</a>
<a href="https://rnotes.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rnotes.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rpubs.online">
<span class="app-switcher-item-badge badge-rose">rP</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rPubs</span><span>📰</span></div>
<div class="app-switcher-item-desc">Collaborative publishing platform</div>
</div>
</a>
<a href="https://rpubs.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rpubs.online">&#8599;</a>
</div>
<!-- Planning -->
<div class="app-switcher-cat">Planning</div>
<div class="app-switcher-item">
<a href="https://rcal.online">
<span class="app-switcher-item-badge badge-sky">rC</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rCal</span><span>📅</span></div>
<div class="app-switcher-item-desc">Collaborative scheduling & events</div>
</div>
</a>
<a href="https://rcal.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rcal.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rtrips.online">
<span class="app-switcher-item-badge badge-emerald">rT</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rTrips</span><span>✈️</span></div>
<div class="app-switcher-item-desc">Group travel planning in real time</div>
</div>
</a>
<a href="https://rtrips.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rtrips.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rmaps.online">
<span class="app-switcher-item-badge badge-green">rM</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rMaps</span><span>🗺️</span></div>
<div class="app-switcher-item-desc">Collaborative real-time mapping</div>
</div>
</a>
<a href="https://rmaps.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rmaps.online">&#8599;</a>
</div>
<!-- Discussing & Deciding -->
<div class="app-switcher-cat">Discussing & Deciding</div>
<div class="app-switcher-item">
<a href="https://rinbox.online">
<span class="app-switcher-item-badge badge-indigo">rI</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rInbox</span><span>📬</span></div>
<div class="app-switcher-item-desc">Private group messaging</div>
</div>
</a>
<a href="https://rinbox.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rinbox.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rchoices.online">
<span class="app-switcher-item-badge badge-fuchsia">rCh</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rChoices</span><span>🔀</span></div>
<div class="app-switcher-item-desc">Collaborative decision making</div>
</div>
</a>
<a href="https://rchoices.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rchoices.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rvote.online">
<span class="app-switcher-item-badge badge-violet">rV</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rVote</span><span>🗳️</span></div>
<div class="app-switcher-item-desc">Real-time polls & governance</div>
</div>
</a>
<a href="https://rvote.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rvote.online">&#8599;</a>
</div>
<!-- Funding & Commerce -->
<div class="app-switcher-cat">Funding & Commerce</div>
<div class="app-switcher-item">
<a href="https://rfunds.online">
<span class="app-switcher-item-badge badge-lime">rF</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rFunds</span><span>💸</span></div>
<div class="app-switcher-item-desc">Collaborative fundraising & grants</div>
</div>
</a>
<a href="https://rfunds.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rfunds.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rwallet.online">
<span class="app-switcher-item-badge badge-yellow">rW</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rWallet</span><span>💰</span></div>
<div class="app-switcher-item-desc">Multi-chain crypto wallet</div>
</div>
</a>
<a href="https://rwallet.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rwallet.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rcart.online">
<span class="app-switcher-item-badge badge-orange">rCt</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rCart</span><span>🛒</span></div>
<div class="app-switcher-item-desc">Group commerce & shared shopping</div>
</div>
</a>
<a href="https://rcart.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rcart.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rauctions.online">
<span class="app-switcher-item-badge badge-red">rA</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rAuctions</span><span>🔨</span></div>
<div class="app-switcher-item-desc">Live auction platform</div>
</div>
</a>
<a href="https://rauctions.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rauctions.online">&#8599;</a>
</div>
<!-- Social & Sharing -->
<div class="app-switcher-cat">Social & Sharing</div>
<div class="app-switcher-item">
<a href="https://rnetwork.online">
<span class="app-switcher-item-badge badge-blue">rNe</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rNetwork</span><span>🌐</span></div>
<div class="app-switcher-item-desc">Community network & social graph</div>
</div>
</a>
<a href="https://rnetwork.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rnetwork.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rfiles.online">
<span class="app-switcher-item-badge badge-cyan">rFi</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rFiles</span><span>📁</span></div>
<div class="app-switcher-item-desc">Collaborative file storage</div>
</div>
</a>
<a href="https://rfiles.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rfiles.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rtube.online">
<span class="app-switcher-item-badge badge-pink">rTu</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rTube</span><span>🎬</span></div>
<div class="app-switcher-item-desc">Group video platform</div>
</div>
</a>
<a href="https://rtube.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rtube.online">&#8599;</a>
</div>
<div class="app-switcher-item">
<a href="https://rdata.online">
<span class="app-switcher-item-badge badge-purple">rD</span>
<div class="app-switcher-item-info">
<div class="app-switcher-item-name"><span>rData</span><span>📊</span></div>
<div class="app-switcher-item-desc">Analytics & insights dashboard</div>
</div>
</a>
<a href="https://rdata.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rdata.online">&#8599;</a>
</div>
<!-- Footer -->
<div class="app-switcher-footer">
<a href="https://rstack.online">rstack.online — self-hosted, community-run</a>
</div>
</div>
</div>
</div>
<div style="display:flex;align-items:center;gap:1rem;">
<a href="#app-grid" style="color:#94a3b8;text-decoration:none;font-size:0.875rem;transition:color 0.2s;" onmouseover="this.style.color='#e2e8f0'" onmouseout="this.style.color='#94a3b8'">Demo</a>
<a href="https://rspace.online" style="color:#94a3b8;text-decoration:none;font-size:0.875rem;transition:color 0.2s;" onmouseover="this.style.color='#e2e8f0'" onmouseout="this.style.color='#94a3b8'">Create Space</a>
@ -1026,5 +1480,43 @@
<p>rStack &mdash; open source, self-hosted, community-owned</p>
</footer>
<script>
(function() {
var trigger = document.getElementById('appSwitcherTrigger');
var dropdown = document.getElementById('appSwitcherDropdown');
var switcher = document.getElementById('appSwitcher');
trigger.addEventListener('click', function(e) {
e.stopPropagation();
var isOpen = dropdown.classList.contains('open');
dropdown.classList.toggle('open');
trigger.setAttribute('aria-expanded', !isOpen);
});
document.addEventListener('click', function(e) {
if (!switcher.contains(e.target)) {
dropdown.classList.remove('open');
trigger.setAttribute('aria-expanded', 'false');
}
});
// Close on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
dropdown.classList.remove('open');
trigger.setAttribute('aria-expanded', 'false');
}
});
// Close dropdown when any app link inside is clicked
dropdown.querySelectorAll('.app-switcher-item a:first-child').forEach(function(link) {
link.addEventListener('click', function() {
dropdown.classList.remove('open');
trigger.setAttribute('aria-expanded', 'false');
});
});
})();
</script>
</body>
</html>