Discord UI refactor + band collaboration features

[Copilot]

Refactors the app UI to match Discord's 3-column layout exactly and adds band-specific features (setlist, equipment check, pins, audio player). Also fixes 9 TypeScript build errors and a Vercel adapter Node.js v24 incompatibility.

Build Fixes

• TypeScript errors (9): Typed the neon SQL wrapper explicitly as Promise<Record<string, any>[]> to resolve FullQueryResults<boolean> union ambiguity; changed !result.ok → result.ok === false in login/register to fix discriminated union narrowing under TS 5.9
• Vercel adapter crash on Node v24: Added runtime: "nodejs22.x" to svelte.config.js

UI / Layout

• Message grouping: Consecutive messages from the same author within 5 minutes collapse the avatar/header; timestamp appears on hover — matches Discord's compact rendering
• Reaction picker: Repositioned from a centered modal to a small popup anchored at the triggering button; falls back to centered when opened via context menu
• Composer: Replaced the old input row with a Discord-style floating rounded box (#383a40, border-radius: 12px) and a + button that opens the GIF picker
• Mobile sidebar: Hidden by default on <768px; hamburger button in the chat header slides both sidebars in from the left with a dark overlay
• Channel links: Added SVG hash icons

Band Features

• Setlist panel: Ordered song list (title / artist / duration) in the chat area; songs reorderable with ↑↓; persisted to localStorage
• Equipment checklist: Per-item assignee field, check/uncheck with strikethrough; persisted to localStorage
• Pinned messages: Context-menu pin/unpin; pinned messages surface in a compact strip below the chat header; count shown in the sidebar
• Audio player: Detects bare https://….(mp3|wav|ogg|flac|aac|m4a) URLs in messages and renders a native <audio controls> element — URL validated via the URL constructor before use

<!-- Message grouping — no avatar/header for grouped rows -->
{@const grouped = isGroupedMessage(msgIdx)}
<article class="message-row" class:grouped>
  {#if grouped}
    <div class="avatar-placeholder">
      <span class="grouped-time">…</span>
    </div>
  {:else}
    <div class="avatar">…</div>
  {/if}
  …
</article>

Screenshot

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
band-msg	Ready	Preview, Comment	Mar 3, 2026 4:54pm