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

Add app/space switcher dropdowns to landing and canvas pages 

Replace legacy mountHeader() (identity only) with the full rstack
shell header on both index.html and canvas.html. Both pages now
show rstack-app-switcher (21 modules), rstack-space-switcher, and
rstack-identity — matching the module pages rendered by renderShell().

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-21 01:04:23 +00:00
parent fa740e09ca
commit 69d382cb70
2 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
website/canvas.html
View File

@ -436,8 +436,18 @@
}
}
</style>
<link rel="stylesheet" href="/shell.css">
</head>
<body>
<body data-theme="light">
<header class="rstack-header" data-theme="light">
<div class="rstack-header__left">
<rstack-app-switcher current="canvas"></rstack-app-switcher>
<rstack-space-switcher current="" name=""></rstack-space-switcher>
</div>
<div class="rstack-header__right">
<rstack-identity></rstack-identity>
</div>
</header>
<div id="community-info">
<h2 id="community-name">Loading...</h2>
<p id="community-slug"></p>
@ -535,10 +545,19 @@
generatePeerId,
OfflineStore
} from "@lib";
import { mountHeader } from "@lib/rspace-header";
import { RStackIdentity } from "@shared/components/rstack-identity";
import { RStackAppSwitcher } from "@shared/components/rstack-app-switcher";
import { RStackSpaceSwitcher } from "@shared/components/rstack-space-switcher";
// Mount the header (light theme for canvas)
mountHeader({ theme: "light", showBrand: true });
// Register shell header components
RStackIdentity.define();
RStackAppSwitcher.define();
RStackSpaceSwitcher.define();
// Load module list for app switcher
fetch("/api/modules").then(r => r.json()).then(data => {
document.querySelector("rstack-app-switcher")?.setModules(data.modules || []);
}).catch(() => {});
// Register service worker for offline support
if ("serviceWorker" in navigator && window.location.hostname !== "localhost") {
@ -602,6 +621,13 @@
document.getElementById("community-name").textContent = communitySlug;
document.getElementById("community-slug").textContent = `${communitySlug}.rspace.online`;
// Update shell header space-switcher with resolved slug
const spaceSwitcher = document.querySelector("rstack-space-switcher");
if (spaceSwitcher) {
spaceSwitcher.setAttribute("current", communitySlug);
spaceSwitcher.setAttribute("name", communitySlug);
}
const canvas = document.getElementById("canvas");
const canvasContent = document.getElementById("canvas-content");
const status = document.getElementById("status");

28
website/index.html
View File

@ -336,9 +336,19 @@
}
}
</style>
<link rel="stylesheet" href="/shell.css">
<script defer src="https://rdata.online/collect.js" data-website-id="6ee7917b-0ed7-44cb-a4c8-91037638526b"></script>
</head>
<body>
<body data-theme="dark">
<header class="rstack-header" data-theme="dark">
<div class="rstack-header__left">
<rstack-app-switcher current=""></rstack-app-switcher>
<rstack-space-switcher current="" name="Spaces"></rstack-space-switcher>
</div>
<div class="rstack-header__right">
<rstack-identity></rstack-identity>
</div>
</header>
<div class="hero">
<div class="container">
<h1>rSpace</h1>
@ -567,10 +577,20 @@
</div>
<script type="module">
import { mountHeader, requireAuth, isAuthenticated, getAccessToken } from "@lib/rspace-header";
import { RStackIdentity } from "@shared/components/rstack-identity";
import { RStackAppSwitcher } from "@shared/components/rstack-app-switcher";
import { RStackSpaceSwitcher } from "@shared/components/rstack-space-switcher";
import { requireAuth, isAuthenticated, getAccessToken } from "@shared/components/rstack-identity";
// Mount the header
mountHeader({ theme: "dark", showBrand: true });
// Register shell header components
RStackIdentity.define();
RStackAppSwitcher.define();
RStackSpaceSwitcher.define();
// Load module list for app switcher
fetch("/api/modules").then(r => r.json()).then(data => {
document.querySelector("rstack-app-switcher")?.setModules(data.modules || []);
}).catch(() => {});
const nameInput = document.getElementById("community-name");
const slugInput = document.getElementById("community-slug");