Add Relays group (chat/file/message) + faded homepage dividers

New collapsible 'Relays' group in the sidebar (chat/file/message relay) that
expands to show its items and persists open state. Homepage gets a matching
Relays card group, and areas are now split by faded separator bars like the
sidebar. Relay pages are placeholder 'coming soon' stubs (/relays/{kind}).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-05 18:38:27 +01:00
parent 3f9683e07f
commit 5a5134f9b2
4 changed files with 89 additions and 1 deletions

View File

@@ -8,7 +8,8 @@
.home-head p { color: var(--muted); font-size: 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tiles + .tiles { margin-top: 32px; } /* vertical buffer between areas */
/* faded bar between areas, like the sidebar separators */
.tiles + .tiles { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.tile {
display: flex; flex-direction: column; gap: 8px;
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
@@ -58,6 +59,25 @@
</a>
</div>
<!-- Area: relays -->
<div class="tiles">
<a class="tile" href="/relays/chat">
<span class="t-ico">💬</span>
<span class="t-title">Chat relay</span>
<span class="t-desc">Relay chat messages between connections.</span>
</a>
<a class="tile" href="/relays/file">
<span class="t-ico">📁</span>
<span class="t-title">File relay</span>
<span class="t-desc">Relay files between connections.</span>
</a>
<a class="tile" href="/relays/message">
<span class="t-ico">✉️</span>
<span class="t-title">Message relay</span>
<span class="t-desc">Relay messages between connections.</span>
</a>
</div>
<!-- Area 2: manage -->
<div class="tiles">
<a class="tile" href="/network">