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

feat: scrollable categorized rApp dropdown, rSpaces rename, overlap prevention 

- rApp dropdown now scrollable (max-height: 70vh) with apps grouped into
  5 categories: Creating, Planning, Discussing & Deciding, Funding &
  Commerce, Sharing & Media
- Renamed canvas object terminology from "shapes" to "rSpaces" in UI labels
- New shapes placed on canvas automatically find free positions using
  spiral search to avoid overlapping existing shapes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-23 16:20:24 -08:00
parent 05dfa6d3a0
commit ae8d306a62
2 changed files with 163 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
shared/components/rstack-app-switcher.ts
View File

@ -16,6 +16,40 @@ export interface AppSwitcherModule {
standaloneDomain?: string;
}
// Category definitions for the rApp dropdown (display-only grouping)
const MODULE_CATEGORIES: Record<string, string> = {
canvas: "Creating",
notes: "Creating",
pubs: "Creating",
swag: "Creating",
splat: "Creating",
cal: "Planning",
trips: "Planning",
work: "Planning",
forum: "Discussing & Deciding",
inbox: "Discussing & Deciding",
choices: "Discussing & Deciding",
vote: "Discussing & Deciding",
funds: "Funding & Commerce",
wallet: "Funding & Commerce",
cart: "Funding & Commerce",
providers: "Funding & Commerce",
books: "Sharing & Media",
files: "Sharing & Media",
tube: "Sharing & Media",
data: "Sharing & Media",
maps: "Sharing & Media",
network: "Sharing & Media",
};
const CATEGORY_ORDER = [
"Creating",
"Planning",
"Discussing & Deciding",
"Funding & Commerce",
"Sharing & Media",
];
export class RStackAppSwitcher extends HTMLElement {
#shadow: ShadowRoot;
#modules: AppSwitcherModule[] = [];
@ -46,6 +80,52 @@ export class RStackAppSwitcher extends HTMLElement {
this.#render();
}
#renderGroupedModules(current: string): string {
// Group modules by category
const groups = new Map<string, AppSwitcherModule[]>();
const uncategorized: AppSwitcherModule[] = [];
for (const m of this.#modules) {
const cat = MODULE_CATEGORIES[m.id];
if (cat) {
if (!groups.has(cat)) groups.set(cat, []);
groups.get(cat)!.push(m);
} else {
uncategorized.push(m);
}
}
let html = "";
for (const cat of CATEGORY_ORDER) {
const items = groups.get(cat);
if (!items || items.length === 0) continue;
html += `<div class="category-header">${cat}</div>`;
html += items.map((m) => this.#renderItem(m, current)).join("");
}
if (uncategorized.length > 0) {
html += `<div class="category-header">Other</div>`;
html += uncategorized.map((m) => this.#renderItem(m, current)).join("");
}
return html;
}
#renderItem(m: AppSwitcherModule, current: string): string {
return `
<div class="item-row ${m.id === current ? "active" : ""}">
<a class="item"
href="/${this.#getSpaceSlug()}/${m.id}"
data-id="${m.id}">
<span class="item-icon">${m.icon}</span>
<div class="item-text">
<span class="item-name">${m.name}</span>
<span class="item-desc">${m.description}</span>
</div>
</a>
${m.standaloneDomain ? `<a class="item-ext" href="https://${m.standaloneDomain}" target="_blank" rel="noopener" title="${m.standaloneDomain}">↗</a>` : ""}
</div>
`;
}
#render() {
const current = this.current;
const currentMod = this.#modules.find((m) => m.id === current);
@ -56,24 +136,7 @@ export class RStackAppSwitcher extends HTMLElement {
<div class="switcher">
<button class="trigger" id="trigger">${label} <span class="caret">▾</span></button>
<div class="menu" id="menu">
${this.#modules
.map(
(m) => `
<div class="item-row ${m.id === current ? "active" : ""}">
<a class="item"
href="/${this.#getSpaceSlug()}/${m.id}"
data-id="${m.id}">
<span class="item-icon">${m.icon}</span>
<div class="item-text">
<span class="item-name">${m.name}</span>
<span class="item-desc">${m.description}</span>
</div>
</a>
${m.standaloneDomain ? `<a class="item-ext" href="https://${m.standaloneDomain}" target="_blank" rel="noopener" title="${m.standaloneDomain}">↗</a>` : ""}
</div>
`
)
.join("")}
${this.#renderGroupedModules(current)}
</div>
</div>
`;
@ -134,6 +197,7 @@ const STYLES = `
.menu {
position: absolute; top: 100%; left: 0; margin-top: 6px;
min-width: 260px; border-radius: 12px; overflow: hidden;
overflow-y: auto; max-height: 70vh;
box-shadow: 0 8px 30px rgba(0,0,0,0.25); display: none; z-index: 200;
}
.menu.open { display: block; }
@ -176,4 +240,14 @@ const STYLES = `
.item-text { display: flex; flex-direction: column; min-width: 0; }
.item-name { font-size: 0.875rem; font-weight: 600; }
.item-desc { font-size: 0.75rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-header {
padding: 8px 14px 4px; font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5;
user-select: none;
}
.category-header:not(:first-child) {
border-top: 1px solid rgba(128,128,128,0.15);
margin-top: 4px; padding-top: 10px;
}
`;

80
website/canvas.html
View File

@ -487,8 +487,8 @@
<button id="new-choice-rank" title="New Ranking">📊 Rank</button>
<button id="new-choice-spider" title="New Scoring">🕸 Spider</button>
<button id="new-social-post" title="New Post">📱 Post</button>
<button id="new-arrow" title="Connect Shapes">↗️ Connect</button>
<button id="toggle-memory" title="Forgotten shapes">💭 Memory</button>
<button id="new-arrow" title="Connect rSpaces">↗️ Connect</button>
<button id="toggle-memory" title="Forgotten rSpaces">💭 Memory</button>
<button id="zoom-in" title="Zoom In">+</button>
<button id="zoom-out" title="Zoom Out">-</button>
<button id="reset-view" title="Reset View">Reset</button>
@ -1022,14 +1022,76 @@
// Reverse the canvas transform to get canvas coordinates
const canvasX = (viewCenterX - panX) / scale;
const canvasY = (viewCenterY - panY) / scale;
// Add jitter so shapes don't stack perfectly
return { x: canvasX, y: canvasY };
}
// Check if two rectangles overlap (with padding gap)
function rectsOverlap(a, b, gap = 20) {
return !(a.x + a.width + gap <= b.x ||
b.x + b.width + gap <= a.x ||
a.y + a.height + gap <= b.y ||
b.y + b.height + gap <= a.y);
}
// Collect bounding boxes of all visible shapes on the canvas
function getExistingShapeRects() {
return [...canvasContent.children]
.filter(el => el.tagName && el.tagName.includes('-') &&
!el.tagName.toLowerCase().includes('arrow') &&
typeof el.x === 'number' && typeof el.width === 'number' &&
el.width > 0)
.map(el => ({ x: el.x, y: el.y, width: el.width, height: el.height }));
}
// Find a free position near the viewport center that doesn't overlap existing shapes
function findFreePosition(width, height) {
const center = getViewportCenter();
const candidateX = center.x - width / 2;
const candidateY = center.y - height / 2;
const gap = 20;
const existing = getExistingShapeRects();
if (existing.length === 0) {
return { x: candidateX, y: candidateY };
}
const candidate = { x: candidateX, y: candidateY, width, height };
const hasOverlap = (rect) => existing.some(e => rectsOverlap(rect, e, gap));
if (!hasOverlap(candidate)) {
return { x: candidateX, y: candidateY };
}
// Spiral search: try right, below, left, above with increasing steps
const stepX = width + gap;
const stepY = height + gap;
for (let ring = 1; ring <= 20; ring++) {
const offsets = [
{ x: ring * stepX, y: 0 }, // right
{ x: 0, y: ring * stepY }, // below
{ x: -ring * stepX, y: 0 }, // left
{ x: 0, y: -ring * stepY }, // above
{ x: ring * stepX, y: ring * stepY }, // bottom-right
{ x: -ring * stepX, y: ring * stepY }, // bottom-left
{ x: ring * stepX, y: -ring * stepY }, // top-right
{ x: -ring * stepX, y: -ring * stepY }, // top-left
];
for (const off of offsets) {
const test = { x: candidateX + off.x, y: candidateY + off.y, width, height };
if (!hasOverlap(test)) {
return { x: test.x, y: test.y };
}
}
}
// Fallback: place with jitter if everything is occupied
return {
x: canvasX + (Math.random() - 0.5) * 40,
y: canvasY + (Math.random() - 0.5) * 40
x: candidateX + (Math.random() - 0.5) * 100,
y: candidateY + (Math.random() - 0.5) * 100
};
}
// Create a shape, position it at viewport center, add to canvas, and register for sync
// Create a shape, position it without overlapping others, add to canvas, and register for sync
function newShape(tagName, props = {}) {
const id = `shape-${Date.now()}-${++shapeCounter}`;
const defaults = SHAPE_DEFAULTS[tagName] || { width: 300, height: 200 };
@ -1037,9 +1099,9 @@
const shape = document.createElement(tagName);
shape.id = id;
const center = getViewportCenter();
shape.x = center.x - defaults.width / 2;
shape.y = center.y - defaults.height / 2;
const pos = findFreePosition(defaults.width, defaults.height);
shape.x = pos.x;
shape.y = pos.y;
shape.width = defaults.width;
shape.height = defaults.height;