sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

development #1

Merged
sschuhmann merged 11 commits from development into main 2026-04-10 07:57:43 +00:00
Conversation 0 Commits 11 Files Changed 39 +1168 -1712
6 changed files with 1168 additions and 1712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d73377ec2f - Show all commits

374
web/src/components/LibraryPanel.tsx Normal file
View File

@@ -0,0 +1,374 @@
import { useState, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import { api } from "../api/client";
// ── Types ─────────────────────────────────────────────────────────────────────
interface SessionSummary {
id: string;
date: string;
label: string | null;
recording_count: number;
}
interface SongSummary {
id: string;
title: string;
status: string;
tags: string[];
global_key: string | null;
global_bpm: number | null;
version_count: number;
}
interface SessionDetail {
id: string;
band_id: string;
date: string;
label: string | null;
notes: string | null;
recording_count: number;
songs: SongSummary[];
}
// ── Helpers ───────────────────────────────────────────────────────────────────
function formatSessionDate(iso: string): string {
const d = new Date(iso.slice(0, 10) + "T12:00:00");
const today = new Date();
today.setHours(12, 0, 0, 0);
const diffDays = Math.round((today.getTime() - d.getTime()) / (1000 * 60 * 60 * 24));
if (diffDays === 0) return "Today";
if (diffDays === 7) return "Last week";
return d.toLocaleDateString(undefined, { weekday: "short", day: "numeric", month: "short", year: "numeric" });
}
function computeWaveBars(seed: string): number[] {
let s = seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 31337);
return Array.from({ length: 12 }, () => {
s = ((s * 1664525 + 1013904223) & 0xffffffff) >>> 0;
return Math.max(15, Math.floor((s / 0xffffffff) * 100));
});
}
function MiniWave({ songId, active }: { songId: string; active: boolean }) {
const bars = useMemo(() => computeWaveBars(songId), [songId]);
return (
<div style={{ display: "flex", alignItems: "flex-end", gap: "1.5px", height: 18, width: 26, flexShrink: 0 }}>
{bars.map((h, i) => (
<div
key={i}
style={{
width: 2,
height: `${h}%`,
borderRadius: 1,
background: active
? `rgba(139,92,246,${0.3 + (h / 100) * 0.5})`
: "rgba(255,255,255,0.1)",
transition: "background 0.15s",
}}
/>
))}
</div>
);
}
// ── Tag badge ─────────────────────────────────────────────────────────────────
const TAG_COLORS: Record<string, { bg: string; color: string }> = {
jam: { bg: "rgba(139,92,246,0.12)", color: "#a78bfa" },
riff: { bg: "rgba(34,211,238,0.1)", color: "#67e8f9" },
idea: { bg: "rgba(52,211,153,0.1)", color: "#6ee7b7" },
};
function TagBadge({ tag }: { tag: string }) {
const style = TAG_COLORS[tag.toLowerCase()] ?? { bg: "rgba(255,255,255,0.06)", color: "rgba(232,233,240,0.45)" };
return (
<span style={{ fontSize: 9, fontWeight: 700, padding: "2px 6px", borderRadius: 4, letterSpacing: "0.02em", background: style.bg, color: style.color, flexShrink: 0 }}>
{tag}
</span>
);
}
// ── Track row ─────────────────────────────────────────────────────────────────
function TrackRow({
song,
index,
active,
onSelect,
}: {
song: SongSummary;
index: number;
active: boolean;
onSelect: () => void;
}) {
const [hovered, setHovered] = useState(false);
return (
<div
onClick={onSelect}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
display: "flex",
alignItems: "center",
gap: 8,
padding: "9px 20px",
cursor: "pointer",
position: "relative",
background: active ? "rgba(139,92,246,0.06)" : hovered ? "rgba(255,255,255,0.025)" : "transparent",
transition: "background 0.12s",
}}
>
{active && (
<div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 2, background: "linear-gradient(to bottom, #7b5cf6, #22d3ee)" }} />
)}
<span style={{ fontSize: 10, color: "rgba(232,233,240,0.2)", width: 20, textAlign: "right", flexShrink: 0, fontFamily: "monospace" }}>
{String(index + 1).padStart(2, "0")}
</span>
<span style={{ fontSize: 13, fontWeight: 600, flex: 1, color: active ? "#a78bfa" : "#e8e9f0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", transition: "color 0.12s" }}>
{song.title}
</span>
{song.tags[0] && <TagBadge tag={song.tags[0]} />}
<MiniWave songId={song.id} active={active} />
</div>
);
}
// ── Session group ─────────────────────────────────────────────────────────────
function SessionGroup({
bandId,
session,
selectedSongId,
search,
filterTag,
onSelectSong,
defaultOpen,
}: {
bandId: string;
session: SessionSummary;
selectedSongId: string | null;
search: string;
filterTag: string;
onSelectSong: (songId: string) => void;
defaultOpen: boolean;
}) {
const [isOpen, setIsOpen] = useState(defaultOpen);
const { data: detail } = useQuery({
queryKey: ["session", session.id],
queryFn: () => api.get<SessionDetail>(`/bands/${bandId}/sessions/${session.id}`),
enabled: isOpen,
});
const filteredSongs = useMemo(() => {
if (!detail?.songs) return [];
return detail.songs.filter((song) => {
const matchesSearch = !search || song.title.toLowerCase().includes(search.toLowerCase());
const matchesTag = !filterTag || song.tags.some((t) => t.toLowerCase() === filterTag);
return matchesSearch && matchesTag;
});
}, [detail, search, filterTag]);
return (
<div>
{/* Session header */}
<div
onClick={() => setIsOpen((o) => !o)}
style={{
display: "flex",
alignItems: "center",
gap: 8,
padding: "8px 20px 5px",
cursor: "pointer",
}}
>
<span style={{
fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
background: "linear-gradient(135deg, #7b5cf6, #22d3ee)",
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
}}>
{formatSessionDate(session.date)}
</span>
{session.label && (
<span style={{ fontSize: 11, color: "rgba(232,233,240,0.35)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
{session.label}
</span>
)}
{!session.label && <span style={{ flex: 1 }} />}
<span style={{ fontSize: 10, color: "rgba(232,233,240,0.28)", background: "rgba(255,255,255,0.04)", padding: "2px 8px", borderRadius: 20, flexShrink: 0 }}>
{session.recording_count}
</span>
<svg
width="12" height="12" viewBox="0 0 12 12" fill="none"
style={{ color: "rgba(232,233,240,0.28)", transform: isOpen ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.18s", flexShrink: 0 }}
>
<path d="M4 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
{/* Track list */}
{isOpen && (
<div>
{!detail && (
<div style={{ padding: "6px 20px 8px", fontSize: 11, color: "rgba(232,233,240,0.25)" }}>
Loading…
</div>
)}
{detail && (filteredSongs.length > 0 ? filteredSongs : detail.songs).map((song, i) => (
<TrackRow
key={song.id}
song={song}
index={i}
active={song.id === selectedSongId}
onSelect={() => onSelectSong(song.id)}
/>
))}
{detail && detail.songs.length === 0 && (
<div style={{ padding: "6px 20px 8px", fontSize: 11, color: "rgba(232,233,240,0.25)" }}>
No recordings yet.
</div>
)}
{detail && search && filteredSongs.length === 0 && detail.songs.length > 0 && (
<div style={{ padding: "6px 20px 8px", fontSize: 11, color: "rgba(232,233,240,0.25)" }}>
No matches in this session.
</div>
)}
</div>
)}
</div>
);
}
// ── Filter chips ──────────────────────────────────────────────────────────────
const FILTER_CHIPS = [
{ label: "All", value: "" },
{ label: "Jam", value: "jam" },
{ label: "Riff", value: "riff" },
{ label: "Idea", value: "idea" },
];
// ── LibraryPanel ──────────────────────────────────────────────────────────────
interface LibraryPanelProps {
bandId: string;
selectedSongId: string | null;
onSelectSong: (songId: string) => void;
}
export function LibraryPanel({ bandId, selectedSongId, onSelectSong }: LibraryPanelProps) {
const [search, setSearch] = useState("");
const [filterTag, setFilterTag] = useState("");
const { data: sessions } = useQuery({
queryKey: ["sessions", bandId],
queryFn: () => api.get<SessionSummary[]>(`/bands/${bandId}/sessions`),
enabled: !!bandId,
});
const border = "rgba(255,255,255,0.06)";
return (
<div style={{
width: 340,
minWidth: 280,
flexShrink: 0,
display: "flex",
flexDirection: "column",
background: "#10131f",
borderRight: `1px solid ${border}`,
height: "100%",
overflow: "hidden",
}}>
{/* Header */}
<div style={{ padding: "22px 20px 12px", flexShrink: 0 }}>
<h2 style={{ margin: "0 0 14px", fontSize: 22, fontWeight: 800, letterSpacing: -0.5, background: "linear-gradient(135deg, #e8e9f0 30%, rgba(232,233,240,0.5))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
Library
</h2>
{/* Search */}
<div style={{ display: "flex", alignItems: "center", gap: 8, background: "#151828", border: `1px solid ${border}`, borderRadius: 8, padding: "8px 12px", transition: "border-color 0.15s" }}
onFocusCapture={(e) => (e.currentTarget.style.borderColor = "rgba(139,92,246,0.4)")}
onBlurCapture={(e) => (e.currentTarget.style.borderColor = border)}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: "rgba(232,233,240,0.25)", flexShrink: 0 }}>
<circle cx="6" cy="6" r="4.5" />
<path d="M10 10l2.5 2.5" strokeLinecap="round" />
</svg>
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search recordings…"
style={{ background: "none", border: "none", outline: "none", fontFamily: "inherit", fontSize: 13, color: "#e8e9f0", flex: 1, caretColor: "#a78bfa" }}
/>
{search && (
<button onClick={() => setSearch("")} style={{ background: "none", border: "none", cursor: "pointer", color: "rgba(232,233,240,0.3)", padding: 0, display: "flex", lineHeight: 1 }}>
✕
</button>
)}
</div>
</div>
{/* Filter chips */}
<div style={{ display: "flex", gap: 5, padding: "0 20px 10px", borderBottom: `1px solid ${border}`, flexShrink: 0, overflowX: "auto" }}>
{FILTER_CHIPS.map((chip) => {
const on = filterTag === chip.value;
return (
<button
key={chip.value}
onClick={() => setFilterTag(chip.value)}
style={{
fontSize: 11, fontWeight: 600, padding: "4px 12px", borderRadius: 20, cursor: "pointer", whiteSpace: "nowrap",
border: on ? "1px solid rgba(139,92,246,0.4)" : `1px solid ${border}`,
background: on ? "rgba(139,92,246,0.1)" : "transparent",
color: on ? "#a78bfa" : "rgba(232,233,240,0.35)",
fontFamily: "inherit",
transition: "all 0.12s",
}}
>
{chip.label}
</button>
);
})}
</div>
{/* Session list */}
<div style={{ flex: 1, overflowY: "auto" }}>
<style>{`
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
`}</style>
{!sessions && (
<div style={{ padding: "20px", fontSize: 12, color: "rgba(232,233,240,0.3)" }}>Loading sessions…</div>
)}
{sessions?.length === 0 && (
<div style={{ padding: "20px", fontSize: 12, color: "rgba(232,233,240,0.3)" }}>
No sessions yet. Go to Storage settings to scan your Nextcloud folder.
</div>
)}
{sessions?.map((session, i) => (
<SessionGroup
key={session.id}
bandId={bandId}
session={session}
selectedSongId={selectedSongId}
search={search}
filterTag={filterTag}
onSelectSong={onSelectSong}
defaultOpen={i === 0}
/>
))}
{/* Bottom padding for last item breathing room */}
<div style={{ height: 20 }} />
</div>
</div>
);
}

472
web/src/components/PlayerPanel.tsx Normal file
View File

@@ -0,0 +1,472 @@
import { useRef, useState, useCallback, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "../api/client";
import type { MemberRead } from "../api/auth";
import { useWaveform } from "../hooks/useWaveform";
// ── Types ─────────────────────────────────────────────────────────────────────
interface SongRead {
id: string;
band_id: string;
session_id: string | null;
title: string;
status: string;
tags: string[];
global_key: string | null;
global_bpm: number | null;
version_count: number;
}
interface SongVersion {
id: string;
version_number: number;
label: string | null;
analysis_status: string;
}
interface SongComment {
id: string;
song_id: string;
body: string;
author_id: string;
author_name: string;
author_avatar_url: string | null;
timestamp: number | null;
tag: string | null;
created_at: string;
}
interface SessionInfo {
id: string;
band_id: string;
date: string;
label: string | null;
songs: { id: string; title: string; status: string; tags: string[] }[];
}
// ── Helpers ───────────────────────────────────────────────────────────────────
function formatTime(seconds: number): string {
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${String(s).padStart(2, "0")}`;
}
function getInitials(name: string): string {
return name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
}
const MEMBER_COLORS = [
{ bg: "rgba(91,156,240,0.18)", border: "rgba(91,156,240,0.6)", text: "#7aabf0" },
{ bg: "rgba(200,90,180,0.18)", border: "rgba(200,90,180,0.6)", text: "#d070c0" },
{ bg: "rgba(52,211,153,0.18)", border: "rgba(52,211,153,0.6)", text: "#34d399" },
{ bg: "rgba(139,92,246,0.18)", border: "rgba(139,92,246,0.6)", text: "#a78bfa" },
{ bg: "rgba(34,211,238,0.18)", border: "rgba(34,211,238,0.6)", text: "#22d3ee" },
];
function memberColor(authorId: string) {
let h = 0;
for (let i = 0; i < authorId.length; i++) h = (h * 31 + authorId.charCodeAt(i)) >>> 0;
return MEMBER_COLORS[h % MEMBER_COLORS.length];
}
const TAG_STYLES: Record<string, { bg: string; color: string }> = {
suggestion: { bg: "rgba(91,156,240,0.1)", color: "#7aabf0" },
issue: { bg: "rgba(244,63,94,0.1)", color: "#f87171" },
keeper: { bg: "rgba(52,211,153,0.1)", color: "#34d399" },
};
// ── Sub-components ────────────────────────────────────────────────────────────
function Avatar({ name, avatarUrl, authorId, size = 24 }: { name: string; avatarUrl: string | null; authorId: string; size?: number }) {
const mc = memberColor(authorId);
if (avatarUrl) return <img src={avatarUrl} alt={name} style={{ width: size, height: size, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />;
return (
<div style={{ width: size, height: size, borderRadius: "50%", background: mc.bg, border: `1.5px solid ${mc.border}`, color: mc.text, display: "flex", alignItems: "center", justifyContent: "center", fontSize: size * 0.38, fontWeight: 700, flexShrink: 0 }}>
{getInitials(name)}
</div>
);
}
function TransportBtn({ onClick, title, children }: { onClick: () => void; title?: string; children: React.ReactNode }) {
const [hovered, setHovered] = useState(false);
return (
<button onClick={onClick} title={title} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
style={{ width: 36, height: 36, borderRadius: "50%", background: hovered ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.07)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: hovered ? "rgba(232,233,240,0.72)" : "rgba(232,233,240,0.35)", flexShrink: 0, transition: "all 0.12s" }}>
{children}
</button>
);
}
function WaveformPins({
comments, duration, containerWidth, onSeek, onScrollToComment,
}: {
comments: SongComment[]; duration: number; containerWidth: number;
onSeek: (t: number) => void; onScrollToComment: (id: string) => void;
}) {
const [hoveredId, setHoveredId] = useState<string | null>(null);
const pinned = comments.filter((c) => c.timestamp != null);
return (
<div style={{ position: "relative", height: 44, overflow: "visible" }}>
{pinned.map((c) => {
const pct = duration > 0 ? c.timestamp! / duration : 0;
const left = Math.round(pct * containerWidth);
const mc = memberColor(c.author_id);
const isHovered = hoveredId === c.id;
return (
<div key={c.id}
style={{ position: "absolute", left, top: 0, transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center", cursor: "pointer", zIndex: 10, transition: "transform 0.12s", ...(isHovered ? { transform: "translateX(-50%) scale(1.15)" } : {}) }}
onMouseEnter={() => setHoveredId(c.id)} onMouseLeave={() => setHoveredId(null)}
onClick={() => { onSeek(c.timestamp!); onScrollToComment(c.id); }}
>
{isHovered && (
<div style={{ position: "absolute", bottom: "calc(100% + 6px)", left: "50%", transform: "translateX(-50%)", background: "#1a1e30", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, padding: "8px 10px", width: 180, zIndex: 50, pointerEvents: "none" }}>
<div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
<div style={{ width: 18, height: 18, borderRadius: "50%", background: mc.bg, color: mc.text, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8, fontWeight: 700 }}>
{getInitials(c.author_name)}
</div>
<span style={{ fontSize: 11, fontWeight: 500, color: "rgba(232,233,240,0.72)" }}>{c.author_name}</span>
<span style={{ fontSize: 10, fontFamily: "monospace", color: "#a78bfa", marginLeft: "auto" }}>{formatTime(c.timestamp!)}</span>
</div>
<div style={{ fontSize: 11, color: "rgba(232,233,240,0.42)", lineHeight: 1.4 }}>
{c.body.length > 80 ? c.body.slice(0, 80) + "…" : c.body}
</div>
</div>
)}
<div style={{ width: 22, height: 22, borderRadius: "50%", background: mc.bg, border: `2px solid ${mc.border}`, color: mc.text, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8, fontWeight: 700, boxShadow: "0 2px 8px rgba(0,0,0,0.45)" }}>
{getInitials(c.author_name)}
</div>
<div style={{ width: 1.5, height: 14, background: mc.text, opacity: 0.3, marginTop: 2 }} />
</div>
);
})}
</div>
);
}
// ── Icons ─────────────────────────────────────────────────────────────────────
function IconSkipBack() {
return <svg width="13" height="13" viewBox="0 0 13 13" fill="currentColor"><path d="M6.5 2.5a4 4 0 1 0 3.46 2H8a2.5 2.5 0 1 1-1.5-2.28V4L9.5 2 6.5 0v2.5z" /></svg>;
}
function IconSkipFwd() {
return <svg width="13" height="13" viewBox="0 0 13 13" fill="currentColor" style={{ transform: "scaleX(-1)" }}><path d="M6.5 2.5a4 4 0 1 0 3.46 2H8a2.5 2.5 0 1 1-1.5-2.28V4L9.5 2 6.5 0v2.5z" /></svg>;
}
function IconPlay() {
return <svg width="16" height="16" viewBox="0 0 16 16" fill="white"><path d="M4 2l10 6-10 6V2z" /></svg>;
}
function IconPause() {
return <svg width="16" height="16" viewBox="0 0 16 16" fill="white"><path d="M4 2h3v12H4zm6 0h3v12H10z" /></svg>;
}
// ── PlayerPanel ───────────────────────────────────────────────────────────────
interface PlayerPanelProps {
songId: string;
bandId: string;
/** Called when back button is clicked. If omitted, navigates to /bands/:bandId */
onBack?: () => void;
}
export function PlayerPanel({ songId, bandId, onBack }: PlayerPanelProps) {
const navigate = useNavigate();
const qc = useQueryClient();
const waveformRef = useRef<HTMLDivElement>(null);
const waveformContainerRef = useRef<HTMLDivElement>(null);
const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
const [commentBody, setCommentBody] = useState("");
const [selectedTag, setSelectedTag] = useState("");
const [composeFocused, setComposeFocused] = useState(false);
const [waveformWidth, setWaveformWidth] = useState(0);
// State resets automatically because BandPage passes key={selectedSongId} to PlayerPanel
// ── Queries ──────────────────────────────────────────────────────────────
const { data: me } = useQuery({ queryKey: ["me"], queryFn: () => api.get<MemberRead>("/auth/me") });
const { data: song } = useQuery({
queryKey: ["song", songId],
queryFn: () => api.get<SongRead>(`/songs/${songId}`),
enabled: !!songId,
});
const { data: versions } = useQuery({
queryKey: ["versions", songId],
queryFn: () => api.get<SongVersion[]>(`/songs/${songId}/versions`),
enabled: !!songId,
});
const { data: session } = useQuery({
queryKey: ["session", song?.session_id],
queryFn: () => api.get<SessionInfo>(`/bands/${bandId}/sessions/${song!.session_id}`),
enabled: !!song?.session_id && !!bandId,
});
const { data: comments } = useQuery<SongComment[]>({
queryKey: ["comments", songId],
queryFn: () => api.get<SongComment[]>(`/songs/${songId}/comments`),
enabled: !!songId,
});
const activeVersion = selectedVersionId ?? versions?.[0]?.id ?? null;
// ── Waveform ──────────────────────────────────────────────────────────────
const { isPlaying, isReady, currentTime, duration, play, pause, seekTo, error } = useWaveform(waveformRef, {
url: activeVersion ? `/api/v1/versions/${activeVersion}/stream` : null,
peaksUrl: activeVersion ? `/api/v1/versions/${activeVersion}/waveform` : null,
songId,
bandId,
});
useEffect(() => {
const el = waveformContainerRef.current;
if (!el) return;
const ro = new ResizeObserver((entries) => setWaveformWidth(entries[0].contentRect.width));
ro.observe(el);
setWaveformWidth(el.offsetWidth);
return () => ro.disconnect();
}, []);
// Space bar shortcut
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement;
if (target.tagName === "TEXTAREA" || target.tagName === "INPUT") return;
if (e.code === "Space") { e.preventDefault(); if (isPlaying) pause(); else if (isReady) play(); }
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [isPlaying, isReady, play, pause]);
// ── Mutations ─────────────────────────────────────────────────────────────
const addCommentMutation = useMutation({
mutationFn: ({ body, timestamp, tag }: { body: string; timestamp: number; tag: string }) =>
api.post(`/songs/${songId}/comments`, { body, timestamp, tag: tag || null }),
onSuccess: () => { qc.invalidateQueries({ queryKey: ["comments", songId] }); setCommentBody(""); setSelectedTag(""); },
});
const deleteCommentMutation = useMutation({
mutationFn: (commentId: string) => api.delete(`/comments/${commentId}`),
onSuccess: () => qc.invalidateQueries({ queryKey: ["comments", songId] }),
});
const scrollToComment = useCallback((commentId: string) => {
document.getElementById(`comment-${commentId}`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
}, []);
const handleBack = () => {
if (onBack) onBack();
else navigate(`/bands/${bandId}`);
};
const border = "rgba(255,255,255,0.06)";
// ── Render ────────────────────────────────────────────────────────────────
return (
<div style={{ display: "flex", flexDirection: "column", flex: 1, height: "100%", overflow: "hidden", background: "#0c0e1a", minWidth: 0 }}>
{/* Breadcrumb / header */}
<div style={{ padding: "11px 20px", borderBottom: `1px solid ${border}`, display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
<button onClick={handleBack}
style={{ background: "none", border: "none", cursor: "pointer", color: "rgba(232,233,240,0.28)", fontSize: 11, padding: 0, fontFamily: "inherit" }}
onMouseEnter={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.65)")}
onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.28)")}
>
← Library
</button>
{session && (
<>
<span style={{ color: "rgba(232,233,240,0.2)", fontSize: 11 }}>›</span>
<button onClick={() => navigate(`/bands/${bandId}/sessions/${session.id}`)}
style={{ background: "none", border: "none", cursor: "pointer", color: "rgba(232,233,240,0.28)", fontSize: 11, padding: 0, fontFamily: "inherit" }}
onMouseEnter={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.65)")}
onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.28)")}
>
{session.date}
</button>
</>
)}
<span style={{ color: "rgba(232,233,240,0.2)", fontSize: 11 }}>›</span>
<span style={{ fontSize: 12, color: "rgba(232,233,240,0.72)", fontFamily: "monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>
{song?.title ?? "…"}
</span>
{/* Version selector */}
{versions && versions.length > 1 && (
<div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
{versions.map((v) => (
<button key={v.id} onClick={() => setSelectedVersionId(v.id)}
style={{ background: v.id === activeVersion ? "rgba(139,92,246,0.12)" : "transparent", border: `1px solid ${v.id === activeVersion ? "rgba(139,92,246,0.3)" : "rgba(255,255,255,0.09)"}`, borderRadius: 6, padding: "4px 10px", color: v.id === activeVersion ? "#a78bfa" : "rgba(232,233,240,0.38)", cursor: "pointer", fontSize: 11, fontFamily: "monospace" }}>
v{v.version_number}{v.label ? ` · ${v.label}` : ""}
</button>
))}
</div>
)}
<button style={{ background: "transparent", border: `1px solid rgba(255,255,255,0.09)`, borderRadius: 6, color: "rgba(232,233,240,0.38)", cursor: "pointer", fontSize: 12, padding: "5px 12px", fontFamily: "inherit", flexShrink: 0 }}>
Share
</button>
</div>
{/* Body */}
<div style={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}>
{/* Waveform section */}
<div style={{ padding: "16px 20px", flexShrink: 0 }}>
<div style={{ background: "rgba(255,255,255,0.02)", border: `1px solid ${border}`, borderRadius: 10, padding: "14px 14px 10px", marginBottom: 12 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
<span style={{ fontSize: 11, color: "rgba(232,233,240,0.45)", fontFamily: "monospace" }}>{song?.title ?? "…"}</span>
<span style={{ fontSize: 10, fontFamily: "monospace", color: "rgba(232,233,240,0.28)" }}>{isReady ? formatTime(duration) : "—"}</span>
</div>
{/* Pin layer + canvas */}
<div ref={waveformContainerRef} style={{ position: "relative" }}>
{isReady && duration > 0 && comments && (
<WaveformPins comments={comments} duration={duration} containerWidth={waveformWidth} onSeek={seekTo} onScrollToComment={scrollToComment} />
)}
{!isReady && <div style={{ height: 44 }} />}
<div ref={waveformRef} />
{error && <div style={{ color: "#f87171", fontSize: 12, padding: "8px 0", textAlign: "center", fontFamily: "monospace" }}>Audio error: {error}</div>}
{!isReady && !error && <div style={{ color: "rgba(232,233,240,0.28)", fontSize: 12, padding: "8px 0", textAlign: "center", fontFamily: "monospace" }}>Loading audio…</div>}
</div>
{/* Time bar */}
<div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, padding: "0 1px" }}>
<span style={{ fontSize: 10, fontFamily: "monospace", color: "#a78bfa" }}>{formatTime(currentTime)}</span>
<span style={{ fontSize: 10, fontFamily: "monospace", color: "rgba(232,233,240,0.22)" }}>{isReady && duration > 0 ? formatTime(duration / 2) : "—"}</span>
<span style={{ fontSize: 10, fontFamily: "monospace", color: "rgba(232,233,240,0.22)" }}>{isReady ? formatTime(duration) : "—"}</span>
</div>
</div>
{/* Transport */}
<div style={{ display: "flex", justifyContent: "center", gap: 10, padding: "4px 0 4px" }}>
<TransportBtn onClick={() => seekTo(Math.max(0, currentTime - 30))} title="−30s"><IconSkipBack /></TransportBtn>
<button
onClick={isPlaying ? pause : play}
disabled={!activeVersion}
style={{ width: 46, height: 46, background: "linear-gradient(135deg, #7b5cf6, #06b6d4)", borderRadius: "50%", border: "none", display: "flex", alignItems: "center", justifyContent: "center", cursor: activeVersion ? "pointer" : "default", opacity: activeVersion ? 1 : 0.4, flexShrink: 0, transition: "transform 0.12s, box-shadow 0.12s", boxShadow: "0 4px 16px rgba(139,92,246,0.35)" }}
onMouseEnter={(e) => { if (activeVersion) { e.currentTarget.style.boxShadow = "0 6px 24px rgba(139,92,246,0.55)"; e.currentTarget.style.transform = "scale(1.04)"; } }}
onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "0 4px 16px rgba(139,92,246,0.35)"; e.currentTarget.style.transform = "scale(1)"; }}
>
{isPlaying ? <IconPause /> : <IconPlay />}
</button>
<TransportBtn onClick={() => seekTo(currentTime + 30)} title="+30s"><IconSkipFwd /></TransportBtn>
</div>
</div>
{/* Comments section */}
<div style={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden", borderTop: `1px solid ${border}`, background: "rgba(0,0,0,0.1)" }}>
{/* Header */}
<div style={{ padding: "12px 15px", borderBottom: `1px solid ${border}`, display: "flex", alignItems: "center", justifyContent: "space-between", flexShrink: 0 }}>
<span style={{ fontSize: 13, fontWeight: 500, color: "rgba(232,233,240,0.72)" }}>Comments</span>
{comments && comments.length > 0 && (
<span style={{ fontSize: 11, background: "rgba(139,92,246,0.12)", color: "#a78bfa", padding: "1px 8px", borderRadius: 10 }}>{comments.length}</span>
)}
</div>
{/* Compose */}
<div style={{ padding: "11px 14px", borderBottom: `1px solid ${border}`, flexShrink: 0 }}>
<div style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
{me ? (
<Avatar name={me.display_name} avatarUrl={me.avatar_url ?? null} authorId={me.id} size={26} />
) : (
<div style={{ width: 26, height: 26, borderRadius: "50%", background: "rgba(255,255,255,0.06)", flexShrink: 0 }} />
)}
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 6 }}>
<div style={{ fontSize: 11, fontFamily: "monospace", background: "rgba(139,92,246,0.1)", color: "#a78bfa", border: "1px solid rgba(139,92,246,0.22)", padding: "3px 9px", borderRadius: 20, display: "flex", alignItems: "center", gap: 6 }}>
{isPlaying && <div style={{ width: 6, height: 6, borderRadius: "50%", background: "#a78bfa", animation: "pp-blink 1.1s infinite" }} />}
{formatTime(currentTime)}
</div>
<span style={{ fontSize: 11, color: "rgba(232,233,240,0.2)" }}>· pins to playhead</span>
</div>
<textarea
value={commentBody}
onChange={(e) => setCommentBody(e.target.value)}
onFocus={() => setComposeFocused(true)}
onBlur={() => { if (!commentBody.trim()) setComposeFocused(false); }}
placeholder="What do you hear at this moment…"
style={{ width: "100%", background: "rgba(255,255,255,0.04)", border: composeFocused ? "1px solid rgba(139,92,246,0.35)" : `1px solid rgba(255,255,255,0.07)`, borderRadius: 7, padding: "8px 10px", color: "#e8e9f0", fontSize: 12, resize: "none", outline: "none", fontFamily: "inherit", height: composeFocused ? 68 : 42, transition: "height 0.18s, border-color 0.15s", boxSizing: "border-box" }}
/>
{composeFocused && (
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 7 }}>
<div style={{ display: "flex", gap: 5 }}>
{(["suggestion", "issue", "keeper"] as const).map((tag) => (
<button key={tag} onClick={() => setSelectedTag((t) => (t === tag ? "" : tag))}
style={{ fontSize: 11, padding: "3px 8px", borderRadius: 4, cursor: "pointer", fontFamily: "inherit", background: selectedTag === tag ? TAG_STYLES[tag].bg : "rgba(255,255,255,0.05)", border: `1px solid ${selectedTag === tag ? TAG_STYLES[tag].color + "44" : "rgba(255,255,255,0.07)"}`, color: selectedTag === tag ? TAG_STYLES[tag].color : "rgba(232,233,240,0.32)", transition: "all 0.12s" }}>
{tag}
</button>
))}
</div>
<button
onClick={() => { if (commentBody.trim()) addCommentMutation.mutate({ body: commentBody.trim(), timestamp: currentTime, tag: selectedTag }); }}
disabled={!commentBody.trim() || addCommentMutation.isPending}
style={{ padding: "5px 14px", borderRadius: 6, background: "linear-gradient(135deg, #7b5cf6, #06b6d4)", border: "none", color: "white", cursor: commentBody.trim() ? "pointer" : "default", fontSize: 12, fontWeight: 600, fontFamily: "inherit", opacity: commentBody.trim() ? 1 : 0.35, transition: "opacity 0.12s" }}>
Post
</button>
</div>
)}
</div>
</div>
</div>
{/* Comment list */}
<div style={{ flex: 1, overflowY: "auto", padding: "12px 14px" }}>
{comments?.map((c) => {
const tagStyle = c.tag ? TAG_STYLES[c.tag] : null;
const isNearPlayhead = isReady && c.timestamp != null && Math.abs(c.timestamp - currentTime) < 5;
return (
<div key={c.id} id={`comment-${c.id}`}
style={{ marginBottom: 14, paddingBottom: 14, borderBottom: `1px solid rgba(255,255,255,0.04)`, borderRadius: isNearPlayhead ? 6 : undefined, background: isNearPlayhead ? "rgba(139,92,246,0.04)" : undefined, border: isNearPlayhead ? "1px solid rgba(139,92,246,0.12)" : undefined, padding: isNearPlayhead ? 8 : undefined }}>
<div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
<Avatar name={c.author_name} avatarUrl={c.author_avatar_url} authorId={c.author_id} size={21} />
<span style={{ fontSize: 12, fontWeight: 500, color: "rgba(232,233,240,0.72)" }}>{c.author_name}</span>
{c.timestamp != null && (
<button onClick={() => seekTo(c.timestamp!)}
style={{ marginLeft: "auto", fontSize: 10, fontFamily: "monospace", color: "#a78bfa", background: "rgba(139,92,246,0.1)", border: "none", borderRadius: 3, padding: "1px 5px", cursor: "pointer" }}
onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(139,92,246,0.2)")}
onMouseLeave={(e) => (e.currentTarget.style.background = "rgba(139,92,246,0.1)")}
>
{formatTime(c.timestamp)}
</button>
)}
{tagStyle && <span style={{ fontSize: 10, padding: "1px 5px", borderRadius: 3, background: tagStyle.bg, color: tagStyle.color }}>{c.tag}</span>}
</div>
<p style={{ margin: 0, fontSize: 12, color: "rgba(232,233,240,0.45)", lineHeight: 1.55 }}>{c.body}</p>
<div style={{ display: "flex", gap: 8, marginTop: 4 }}>
<span style={{ fontSize: 11, color: "rgba(232,233,240,0.18)", cursor: "pointer" }}
onMouseEnter={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.5)")}
onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.18)")}
>↩ Reply</span>
{me && c.author_id === me.id && (
<button onClick={() => deleteCommentMutation.mutate(c.id)}
style={{ background: "none", border: "none", color: "rgba(232,233,240,0.15)", cursor: "pointer", fontSize: 11, padding: 0, fontFamily: "inherit" }}
onMouseEnter={(e) => (e.currentTarget.style.color = "#f87171")}
onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(232,233,240,0.15)")}
>Delete</button>
)}
</div>
</div>
);
})}
{comments?.length === 0 && <p style={{ color: "rgba(232,233,240,0.22)", fontSize: 12 }}>No comments yet.</p>}
</div>
</div>
</div>
<style>{`
@keyframes pp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
`}</style>
</div>
);
}

620
web/src/components/Sidebar.tsx
View File

@@ -8,60 +8,70 @@ import { getInitials } from "../utils";
import type { MemberRead } from "../api/auth"; import type { MemberRead } from "../api/auth";
import { usePlayerStore } from "../stores/playerStore"; import { usePlayerStore } from "../stores/playerStore";
// ── Icons (inline SVG) ────────────────────────────────────────────────────── // ── Icons ────────────────────────────────────────────────────────────────────
function IconWaveform() {
function IconMenu() {
return ( return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<rect x="1" y="1.5" width="12" height="2" rx="1" fill="white" opacity=".9" /> <path d="M3 5h12M3 9h12M3 13h8" stroke="white" strokeWidth="1.8" strokeLinecap="round" />
<rect x="1" y="5.5" width="9" height="2" rx="1" fill="white" opacity=".7" />
<rect x="1" y="9.5" width="11" height="2" rx="1" fill="white" opacity=".8" />
</svg> </svg>
); );
} }
function IconLibrary() { function IconLibrary() {
return ( return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M2 3.5h10v1.5H2zm0 3h10v1.5H2zm0 3h7v1.5H2z" /> <rect x="2" y="3.5" width="14" height="2" rx="1" fill="currentColor" />
<rect x="2" y="8" width="14" height="2" rx="1" fill="currentColor" />
<rect x="2" y="12.5" width="14" height="2" rx="1" fill="currentColor" />
</svg> </svg>
); );
} }
function IconPlay() { function IconPlay() {
return ( return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
<path d="M3 2l9 5-9 5V2z" /> <path d="M5 3l11 6-11 6V3z" />
</svg>
);
}
function IconSettings() {
return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
<circle cx="7" cy="7" r="2" />
<path d="M7 1v1.5M7 11.5V13M1 7h1.5M11.5 7H13" />
</svg> </svg>
); );
} }
function IconMembers() { function IconMembers() {
return ( return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<circle cx="5" cy="4.5" r="2" /> <circle cx="7" cy="6.5" r="2.5" stroke="currentColor" strokeWidth="1.4" />
<path d="M1 12c0-2.2 1.8-3.5 4-3.5s4 1.3 4 3.5H1z" /> <path d="M1.5 14.5c0-2.761 2.462-4.5 5.5-4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
<circle cx="10.5" cy="4.5" r="1.5" opacity=".6" /> <circle cx="13" cy="11" r="2" stroke="currentColor" strokeWidth="1.4" />
<path d="M10.5 8.5c1.4 0 2.5 1 2.5 2.5H9.5" opacity=".6" /> <path d="M16 16c0-1.657-1.343-2.5-3-2.5S10 14.343 10 16" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
</svg>
);
}
function IconSettings() {
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<circle cx="9" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.4" />
<path d="M9 2v1.5M9 14.5V16M2 9h1.5M14.5 9H16M3.7 3.7l1.06 1.06M13.24 13.24l1.06 1.06M14.3 3.7l-1.06 1.06M4.76 13.24l-1.06 1.06" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
</svg> </svg>
); );
} }
function IconStorage() { function IconStorage() {
return ( return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
<rect x="1" y="3" width="12" height="3" rx="1.5" /> <rect x="1" y="4" width="16" height="3.5" rx="1.5" />
<rect x="1" y="8" width="12" height="3" rx="1.5" /> <rect x="1" y="10.5" width="16" height="3.5" rx="1.5" />
<circle cx="11" cy="4.5" r=".75" fill="#0b0b0e" /> <circle cx="14" cy="5.75" r="0.9" fill="#0c0e1a" />
<circle cx="11" cy="9.5" r=".75" fill="#0b0b0e" /> <circle cx="14" cy="12.25" r="0.9" fill="#0c0e1a" />
</svg>
);
}
function IconSignOut() {
return (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
<path d="M5.5 2.5H3A1.5 1.5 0 0 0 1.5 4v7A1.5 1.5 0 0 0 3 12.5H5.5" />
<path d="M10 10.5l3-3-3-3M13 7.5H6" />
</svg> </svg>
); );
} }
@@ -74,39 +84,33 @@ function IconChevron() {
); );
} }
function IconSignOut() { // ── NavItem ──────────────────────────────────────────────────────────────────
return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 2H2.5A1.5 1.5 0 0 0 1 3.5v7A1.5 1.5 0 0 0 2.5 12H5" />
<path d="M9 10l3-3-3-3M12 7H5" />
</svg>
);
}
// ── NavItem ─────────────────────────────────────────────────────────────────
interface NavItemProps { interface NavItemProps {
icon: React.ReactNode; icon: React.ReactNode;
label: string; label: string;
active: boolean; active: boolean;
onClick: () => void; onClick: () => void;
disabled?: boolean; disabled?: boolean;
badge?: number;
collapsed: boolean;
} }
function NavItem({ icon, label, active, onClick, disabled }: NavItemProps) { function NavItem({ icon, label, active, onClick, disabled, badge, collapsed }: NavItemProps) {
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const color = active const fg = active
? "#e8a22a" ? "#a78bfa"
: disabled : disabled
? "rgba(255,255,255,0.18)" ? "rgba(255,255,255,0.16)"
: hovered : hovered
? "rgba(255,255,255,0.7)" ? "rgba(232,233,240,0.7)"
: "rgba(255,255,255,0.35)"; : "rgba(232,233,240,0.35)";
const bg = active const bg = active
? "rgba(232,162,42,0.12)" ? "rgba(139,92,246,0.12)"
: hovered && !disabled : hovered && !disabled
? "rgba(255,255,255,0.045)" ? "rgba(255,255,255,0.04)"
: "transparent"; : "transparent";
return ( return (
@@ -115,34 +119,61 @@ function NavItem({ icon, label, active, onClick, disabled }: NavItemProps) {
disabled={disabled} disabled={disabled}
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
title={collapsed ? label : undefined}
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 9, gap: 10,
width: "100%", width: "100%",
padding: "7px 10px", padding: "9px 10px",
borderRadius: 7, borderRadius: 8,
border: "none", border: "none",
cursor: disabled ? "default" : "pointer", cursor: disabled ? "default" : "pointer",
color, color: fg,
background: bg, background: bg,
fontSize: 12,
textAlign: "left", textAlign: "left",
marginBottom: 1, transition: "background 0.15s, color 0.15s",
transition: "background 0.12s, color 0.12s",
fontFamily: "inherit", fontFamily: "inherit",
position: "relative",
overflow: "hidden",
flexShrink: 0,
}} }}
> >
{icon} {/* Active indicator */}
<span>{label}</span> {active && (
<div style={{
position: "absolute", left: 0, top: "20%", bottom: "20%",
width: 2, borderRadius: "0 2px 2px 0",
background: "linear-gradient(to bottom, #7b5cf6, #22d3ee)",
}} />
)}
<span style={{ width: 20, height: 20, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
{icon}
</span>
{!collapsed && (
<span style={{ fontSize: 13, fontWeight: 600, flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{label}
</span>
)}
{!collapsed && badge != null && badge > 0 && (
<span style={{
fontSize: 9, fontWeight: 700, padding: "2px 6px", borderRadius: 20,
background: "linear-gradient(135deg, #7b5cf6, #22d3ee)", color: "white",
flexShrink: 0,
}}>
{badge}
</span>
)}
</button> </button>
); );
} }
// ── Sidebar ──────────────────────────────────────────────────────────────── // ── Sidebar ───────────────────────────────────────────────────────────────────
export function Sidebar({ children }: { children: React.ReactNode }) { export function Sidebar({ children }: { children: React.ReactNode }) {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const [collapsed, setCollapsed] = useState(true);
const [dropdownOpen, setDropdownOpen] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
@@ -152,14 +183,12 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
queryFn: () => api.get<MemberRead>("/auth/me"), queryFn: () => api.get<MemberRead>("/auth/me"),
}); });
// Derive active band from the current URL
const bandMatch = const bandMatch =
matchPath("/bands/:bandId/*", location.pathname) ?? matchPath("/bands/:bandId/*", location.pathname) ??
matchPath("/bands/:bandId", location.pathname); matchPath("/bands/:bandId", location.pathname);
const activeBandId = bandMatch?.params?.bandId ?? null; const activeBandId = bandMatch?.params?.bandId ?? null;
const activeBand = bands?.find((b) => b.id === activeBandId) ?? null; const activeBand = bands?.find((b) => b.id === activeBandId) ?? null;
// Nav active states
const isLibrary = !!( const isLibrary = !!(
matchPath({ path: "/bands/:bandId", end: true }, location.pathname) || matchPath({ path: "/bands/:bandId", end: true }, location.pathname) ||
matchPath("/bands/:bandId/sessions/:sessionId", location.pathname) || matchPath("/bands/:bandId/sessions/:sessionId", location.pathname) ||
@@ -169,12 +198,10 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
const isSettings = location.pathname.startsWith("/settings"); const isSettings = location.pathname.startsWith("/settings");
const isBandSettings = !!matchPath("/bands/:bandId/settings/*", location.pathname); const isBandSettings = !!matchPath("/bands/:bandId/settings/*", location.pathname);
const bandSettingsPanel = matchPath("/bands/:bandId/settings/:panel", location.pathname)?.params?.panel ?? null; const bandSettingsPanel = matchPath("/bands/:bandId/settings/:panel", location.pathname)?.params?.panel ?? null;
// Player state
const { currentSongId, currentBandId: playerBandId, isPlaying: isPlayerPlaying } = usePlayerStore(); const { currentSongId, currentBandId: playerBandId, isPlaying: isPlayerPlaying } = usePlayerStore();
const hasActiveSong = !!currentSongId && !!playerBandId; const hasActiveSong = !!currentSongId && !!playerBandId;
// Close dropdown on outside click
useEffect(() => { useEffect(() => {
if (!dropdownOpen) return; if (!dropdownOpen) return;
function handleClick(e: MouseEvent) { function handleClick(e: MouseEvent) {
@@ -186,231 +213,126 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
return () => document.removeEventListener("mousedown", handleClick); return () => document.removeEventListener("mousedown", handleClick);
}, [dropdownOpen]); }, [dropdownOpen]);
const sidebarWidth = collapsed ? 68 : 230;
const border = "rgba(255,255,255,0.06)"; const border = "rgba(255,255,255,0.06)";
return ( return (
<div <div style={{ display: "flex", height: "100vh", overflow: "hidden", background: "#0c0e1a", color: "#e8e9f0", fontFamily: "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif", fontSize: 13 }}>
style={{
{/* ── Sidebar ── */}
<aside style={{
width: sidebarWidth,
minWidth: sidebarWidth,
background: "#10131f",
borderRight: `1px solid ${border}`,
display: "flex", display: "flex",
height: "100vh", flexDirection: "column",
overflow: "hidden", overflow: "hidden",
background: "#0f0f12", transition: "width 0.22s cubic-bezier(0.4,0,0.2,1), min-width 0.22s cubic-bezier(0.4,0,0.2,1)",
color: "#eeeef2", flexShrink: 0,
fontFamily: "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif", zIndex: 20,
fontSize: 13, }}>
}}
> {/* Logo / toggle */}
{/* ── Sidebar ──────────────────────────────────────────────────── */} <div style={{ padding: "18px 14px 14px", display: "flex", alignItems: "center", gap: 10, borderBottom: `1px solid ${border}`, flexShrink: 0 }}>
<aside <button
style={{ onClick={() => setCollapsed((c) => !c)}
width: 210, title={collapsed ? "Expand menu" : "Collapse menu"}
minWidth: 210,
background: "#0b0b0e",
borderRight: `1px solid ${border}`,
display: "flex",
flexDirection: "column",
overflow: "hidden",
}}
>
{/* Logo */}
<div
style={{
padding: "17px 14px 14px",
display: "flex",
alignItems: "center",
gap: 10,
borderBottom: `1px solid ${border}`,
flexShrink: 0,
}}
>
<div
style={{ style={{
width: 28, width: 40, height: 40, borderRadius: 12, flexShrink: 0,
height: 28, background: "linear-gradient(135deg, #7b5cf6, #06b6d4)",
background: "#e8a22a", display: "flex", alignItems: "center", justifyContent: "center",
borderRadius: 7, border: "none", cursor: "pointer",
display: "flex", boxShadow: "0 0 20px rgba(139,92,246,0.3)",
alignItems: "center", transition: "box-shadow 0.2s",
justifyContent: "center",
flexShrink: 0,
}} }}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "0 0 30px rgba(139,92,246,0.5)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "0 0 20px rgba(139,92,246,0.3)")}
> >
<IconWaveform /> <IconMenu />
</div> </button>
<div> {!collapsed && (
<div style={{ fontSize: 13, fontWeight: 600, color: "#eeeef2", letterSpacing: -0.2 }}> <div style={{ overflow: "hidden" }}>
RehearsalHub <div style={{ fontSize: 13, fontWeight: 700, color: "#e8e9f0", letterSpacing: -0.3, whiteSpace: "nowrap" }}>
</div> RehearsalHub
{activeBand && (
<div style={{ fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 1 }}>
{activeBand.name}
</div> </div>
)} </div>
</div> )}
</div> </div>
{/* Band switcher */} {/* Band switcher */}
<div <div ref={dropdownRef} style={{ padding: "10px 12px", borderBottom: `1px solid ${border}`, position: "relative", flexShrink: 0 }}>
ref={dropdownRef}
style={{
padding: "10px 8px",
borderBottom: `1px solid ${border}`,
position: "relative",
flexShrink: 0,
}}
>
<button <button
onClick={() => setDropdownOpen((o) => !o)} onClick={() => setDropdownOpen((o) => !o)}
title={collapsed ? (activeBand?.name ?? "Select band") : undefined}
style={{ style={{
width: "100%", width: "100%", display: "flex", alignItems: "center", gap: 8,
display: "flex", padding: "7px 8px",
alignItems: "center", background: "rgba(255,255,255,0.04)",
gap: 8,
padding: "7px 9px",
background: "rgba(255,255,255,0.05)",
border: "1px solid rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.07)",
borderRadius: 8, borderRadius: 8, cursor: "pointer", color: "#e8e9f0",
cursor: "pointer", textAlign: "left", fontFamily: "inherit",
color: "#eeeef2", transition: "border-color 0.15s",
textAlign: "left", overflow: "hidden",
fontFamily: "inherit",
}} }}
onMouseEnter={(e) => (e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)")}
onMouseLeave={(e) => (e.currentTarget.style.borderColor = "rgba(255,255,255,0.07)")}
> >
<div <div style={{
style={{ width: 28, height: 28, borderRadius: 8, flexShrink: 0,
width: 26, background: "rgba(139,92,246,0.15)",
height: 26, border: "1px solid rgba(139,92,246,0.3)",
background: "rgba(232,162,42,0.15)", display: "flex", alignItems: "center", justifyContent: "center",
border: "1px solid rgba(232,162,42,0.3)", fontSize: 10, fontWeight: 800, color: "#a78bfa",
borderRadius: 7, }}>
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 10,
fontWeight: 700,
color: "#e8a22a",
flexShrink: 0,
}}
>
{activeBand ? getInitials(activeBand.name) : "?"} {activeBand ? getInitials(activeBand.name) : "?"}
</div> </div>
<span {!collapsed && (
style={{ <>
flex: 1, <span style={{ flex: 1, fontSize: 12, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
fontSize: 12, {activeBand?.name ?? "Select a band"}
fontWeight: 500, </span>
overflow: "hidden", <span style={{ opacity: 0.3, flexShrink: 0, display: "flex" }}>
textOverflow: "ellipsis", <IconChevron />
whiteSpace: "nowrap", </span>
}} </>
> )}
{activeBand?.name ?? "Select a band"}
</span>
<span style={{ opacity: 0.3, flexShrink: 0, display: "flex" }}>
<IconChevron />
</span>
</button> </button>
{dropdownOpen && ( {dropdownOpen && (
<div <div style={{
style={{ position: "absolute", top: "calc(100% - 2px)",
position: "absolute", left: 12, right: 12,
top: "calc(100% - 2px)", background: "#1a1e30",
left: 8, border: "1px solid rgba(255,255,255,0.1)",
right: 8, borderRadius: 10, padding: 6, zIndex: 100,
background: "#18181e", boxShadow: "0 8px 24px rgba(0,0,0,0.5)",
border: "1px solid rgba(255,255,255,0.1)", }}>
borderRadius: 10,
padding: 6,
zIndex: 100,
boxShadow: "0 8px 24px rgba(0,0,0,0.5)",
}}
>
{bands?.map((band) => ( {bands?.map((band) => (
<button <button
key={band.id} key={band.id}
onClick={() => { onClick={() => { navigate(`/bands/${band.id}`); setDropdownOpen(false); }}
navigate(`/bands/${band.id}`);
setDropdownOpen(false);
}}
style={{ style={{
width: "100%", width: "100%", display: "flex", alignItems: "center", gap: 8,
display: "flex", padding: "7px 9px", marginBottom: 1,
alignItems: "center", background: band.id === activeBandId ? "rgba(139,92,246,0.1)" : "transparent",
gap: 8, border: "none", borderRadius: 6, cursor: "pointer",
padding: "7px 9px", color: "#e8e9f0", textAlign: "left", fontFamily: "inherit",
marginBottom: 1,
background: band.id === activeBandId ? "rgba(232,162,42,0.08)" : "transparent",
border: "none",
borderRadius: 6,
cursor: "pointer",
color: "#eeeef2",
textAlign: "left",
fontFamily: "inherit",
}} }}
> >
<div <div style={{ width: 22, height: 22, borderRadius: 6, background: "rgba(139,92,246,0.15)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, color: "#a78bfa", flexShrink: 0 }}>
style={{
width: 22,
height: 22,
borderRadius: 5,
background: "rgba(232,162,42,0.15)",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 9,
fontWeight: 700,
color: "#e8a22a",
flexShrink: 0,
}}
>
{getInitials(band.name)} {getInitials(band.name)}
</div> </div>
<span <span style={{ flex: 1, fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "rgba(232,233,240,0.7)" }}>
style={{
flex: 1,
fontSize: 12,
color: "rgba(255,255,255,0.62)",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{band.name} {band.name}
</span> </span>
{band.id === activeBandId && ( {band.id === activeBandId && <span style={{ fontSize: 10, color: "#a78bfa", flexShrink: 0 }}>✓</span>}
<span style={{ fontSize: 10, color: "#e8a22a", flexShrink: 0 }}>✓</span>
)}
</button> </button>
))} ))}
<div style={{ borderTop: "1px solid rgba(255,255,255,0.06)", marginTop: 4, paddingTop: 4 }}>
<div
style={{
borderTop: "1px solid rgba(255,255,255,0.06)",
marginTop: 4,
paddingTop: 4,
}}
>
<button <button
onClick={() => { onClick={() => { navigate("/"); setDropdownOpen(false); }}
navigate("/"); style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "7px 9px", background: "transparent", border: "none", borderRadius: 6, cursor: "pointer", color: "rgba(232,233,240,0.35)", fontSize: 12, textAlign: "left", fontFamily: "inherit" }}
setDropdownOpen(false);
}}
style={{
width: "100%",
display: "flex",
alignItems: "center",
gap: 8,
padding: "7px 9px",
background: "transparent",
border: "none",
borderRadius: 6,
cursor: "pointer",
color: "rgba(255,255,255,0.35)",
fontSize: 12,
textAlign: "left",
fontFamily: "inherit",
}}
> >
<span style={{ fontSize: 14, opacity: 0.5 }}>+</span> <span style={{ fontSize: 14, opacity: 0.5 }}>+</span>
Create new band Create new band
@@ -421,205 +343,75 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav style={{ flex: 1, padding: "10px 8px", overflowY: "auto" }}> <nav style={{ flex: 1, padding: "10px 12px", overflowY: "auto", overflowX: "hidden", display: "flex", flexDirection: "column", gap: 2 }}>
{activeBand && ( {activeBand && (
<> <>
<SectionLabel>{activeBand.name}</SectionLabel> <NavItem icon={<IconLibrary />} label="Library" active={isLibrary} onClick={() => navigate(`/bands/${activeBand.id}`)} collapsed={collapsed} />
<NavItem
icon={<IconLibrary />}
label="Library"
active={isLibrary}
onClick={() => navigate(`/bands/${activeBand.id}`)}
/>
<NavItem <NavItem
icon={<IconPlay />} icon={<IconPlay />}
label="Player" label="Now Playing"
active={hasActiveSong && (isPlayer || isPlayerPlaying)} active={hasActiveSong && (isPlayer || isPlayerPlaying)}
onClick={() => { onClick={() => { if (hasActiveSong) navigate(`/bands/${playerBandId}/songs/${currentSongId}`); }}
if (hasActiveSong) {
navigate(`/bands/${playerBandId}/songs/${currentSongId}`);
}
}}
disabled={!hasActiveSong} disabled={!hasActiveSong}
collapsed={collapsed}
/> />
</> </>
)} )}
{activeBand && ( {activeBand && (
<> <>
<SectionLabel style={{ paddingTop: 14 }}>Band Settings</SectionLabel> <div style={{ height: 1, background: border, margin: "10px 0", flexShrink: 0 }} />
<NavItem <NavItem icon={<IconMembers />} label="Members" active={isBandSettings && bandSettingsPanel === "members"} onClick={() => navigate(`/bands/${activeBand.id}/settings/members`)} collapsed={collapsed} />
icon={<IconMembers />} <NavItem icon={<IconStorage />} label="Storage" active={isBandSettings && bandSettingsPanel === "storage"} onClick={() => navigate(`/bands/${activeBand.id}/settings/storage`)} collapsed={collapsed} />
label="Members" <NavItem icon={<IconSettings />} label="Band Settings" active={isBandSettings && bandSettingsPanel === "band"} onClick={() => navigate(`/bands/${activeBand.id}/settings/band`)} collapsed={collapsed} />
active={isBandSettings && bandSettingsPanel === "members"}
onClick={() => navigate(`/bands/${activeBand.id}/settings/members`)}
/>
<NavItem
icon={<IconStorage />}
label="Storage"
active={isBandSettings && bandSettingsPanel === "storage"}
onClick={() => navigate(`/bands/${activeBand.id}/settings/storage`)}
/>
<NavItem
icon={<IconSettings />}
label="Band Settings"
active={isBandSettings && bandSettingsPanel === "band"}
onClick={() => navigate(`/bands/${activeBand.id}/settings/band`)}
/>
</> </>
)} )}
<SectionLabel style={{ paddingTop: 14 }}>Account</SectionLabel> <div style={{ height: 1, background: border, margin: "10px 0", flexShrink: 0 }} />
<NavItem <NavItem icon={<IconSettings />} label="Settings" active={isSettings} onClick={() => navigate("/settings")} collapsed={collapsed} />
icon={<IconSettings />}
label="Settings"
active={isSettings}
onClick={() => navigate("/settings")}
/>
</nav> </nav>
{/* User row */} {/* User row */}
<div <div style={{ padding: "10px 12px", borderTop: `1px solid ${border}`, flexShrink: 0 }}>
style={{
padding: "10px",
borderTop: `1px solid ${border}`,
flexShrink: 0,
}}
>
<div style={{ display: "flex", alignItems: "center", gap: 4 }}> <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
<button <button
onClick={() => navigate("/settings")} onClick={() => navigate("/settings")}
style={{ title={collapsed ? (me?.display_name ?? "Account") : undefined}
flex: 1, style={{ flex: 1, display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", background: "transparent", border: "none", borderRadius: 8, cursor: "pointer", color: "#e8e9f0", textAlign: "left", minWidth: 0, fontFamily: "inherit", overflow: "hidden" }}
display: "flex",
alignItems: "center",
gap: 8,
padding: "6px 8px",
background: "transparent",
border: "none",
borderRadius: 8,
cursor: "pointer",
color: "#eeeef2",
textAlign: "left",
minWidth: 0,
fontFamily: "inherit",
}}
> >
{me?.avatar_url ? ( {me?.avatar_url ? (
<img <img src={me.avatar_url} alt="" style={{ width: 28, height: 28, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
src={me.avatar_url}
alt=""
style={{
width: 28,
height: 28,
borderRadius: "50%",
objectFit: "cover",
flexShrink: 0,
}}
/>
) : ( ) : (
<div <div style={{ width: 28, height: 28, borderRadius: "50%", background: "rgba(52,211,153,0.15)", border: "1.5px solid rgba(52,211,153,0.3)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: "#34d399", flexShrink: 0 }}>
style={{
width: 28,
height: 28,
borderRadius: "50%",
background: "rgba(232,162,42,0.18)",
border: "1.5px solid rgba(232,162,42,0.35)",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 10,
fontWeight: 700,
color: "#e8a22a",
flexShrink: 0,
}}
>
{getInitials(me?.display_name ?? "?")} {getInitials(me?.display_name ?? "?")}
</div> </div>
)} )}
<span {!collapsed && (
style={{ <span style={{ flex: 1, fontSize: 12, color: "rgba(232,233,240,0.55)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
flex: 1, {me?.display_name ?? "…"}
fontSize: 12, </span>
color: "rgba(255,255,255,0.55)", )}
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{me?.display_name ?? "…"}
</span>
</button> </button>
<button {!collapsed && (
onClick={() => logout()} <button
title="Sign out" onClick={() => logout()}
style={{ title="Sign out"
flexShrink: 0, style={{ flexShrink: 0, width: 30, height: 30, borderRadius: 7, background: "transparent", border: "1px solid transparent", cursor: "pointer", color: "rgba(255,255,255,0.2)", display: "flex", alignItems: "center", justifyContent: "center", transition: "border-color 0.12s, color 0.12s", padding: 0 }}
width: 30, onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.color = "rgba(255,255,255,0.5)"; }}
height: 30, onMouseLeave={(e) => { e.currentTarget.style.borderColor = "transparent"; e.currentTarget.style.color = "rgba(255,255,255,0.2)"; }}
borderRadius: 7, >
background: "transparent", <IconSignOut />
border: "1px solid transparent", </button>
cursor: "pointer", )}
color: "rgba(255,255,255,0.2)",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "border-color 0.12s, color 0.12s",
padding: 0,
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
e.currentTarget.style.color = "rgba(255,255,255,0.5)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "transparent";
e.currentTarget.style.color = "rgba(255,255,255,0.2)";
}}
>
<IconSignOut />
</button>
</div> </div>
</div> </div>
</aside> </aside>
{/* ── Main content ──────────────────────────────────────────────── */} {/* ── Main content ── */}
<main <main style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column", background: "#0c0e1a", minWidth: 0 }}>
style={{
flex: 1,
overflow: "auto",
display: "flex",
flexDirection: "column",
background: "#0f0f12",
}}
>
{children} {children}
</main> </main>
</div> </div>
); );
} }
function SectionLabel({
children,
style,
}: {
children: React.ReactNode;
style?: React.CSSProperties;
}) {
return (
<div
style={{
fontSize: 10,
fontWeight: 500,
color: "rgba(255,255,255,0.2)",
textTransform: "uppercase",
letterSpacing: "0.7px",
padding: "0 6px 5px",
...style,
}}
>
{children}
</div>
);
}

37
web/src/index.css
View File

@@ -16,23 +16,30 @@ input, textarea, button, select {
/* ── Design system (dark only — no light mode in v1) ─────────────────────── */ /* ── Design system (dark only — no light mode in v1) ─────────────────────── */
:root { :root {
--bg: #0f0f12; /* v2 dark-space palette */
--bg: #0c0e1a;
--bg-card: #10131f;
--bg-raised: #151828;
--bg-hover: #1a1e30;
--bg-subtle: rgba(255,255,255,0.025); --bg-subtle: rgba(255,255,255,0.025);
--bg-inset: rgba(255,255,255,0.04); --bg-inset: rgba(255,255,255,0.04);
--border: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.06);
--border-subtle: rgba(255,255,255,0.05); --border-bright: rgba(255,255,255,0.12);
--text: #eeeef2; --border-subtle: rgba(255,255,255,0.04);
--text-muted: rgba(255,255,255,0.35); --text: #e8e9f0;
--text-subtle: rgba(255,255,255,0.22); --text-muted: rgba(232,233,240,0.55);
--accent: #e8a22a; --text-subtle: rgba(232,233,240,0.28);
--accent-hover: #f0b740; /* Violet accent */
--accent-bg: rgba(232,162,42,0.1); --accent: #8b5cf6;
--accent-border: rgba(232,162,42,0.28); --accent-light: #a78bfa;
--accent-fg: #0f0f12; --accent-hover: #9f70f8;
--teal: #4dba85; --accent-bg: rgba(139,92,246,0.12);
--teal-bg: rgba(61,200,120,0.1); --accent-border: rgba(139,92,246,0.3);
--danger: #e07070; --accent-fg: #ffffff;
--danger-bg: rgba(220,80,80,0.1); --teal: #34d399;
--teal-bg: rgba(52,211,153,0.1);
--danger: #f43f5e;
--danger-bg: rgba(244,63,94,0.1);
} }
/* ── Responsive Layout ──────────────────────────────────────────────────── */ /* ── Responsive Layout ──────────────────────────────────────────────────── */

346
web/src/pages/BandPage.tsx
View File

@@ -1,50 +1,44 @@
import { useState, useMemo } from "react"; import { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom"; import { useParams, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { getBand } from "../api/bands"; import { getBand } from "../api/bands";
import { api } from "../api/client"; import { LibraryPanel } from "../components/LibraryPanel";
import { PlayerPanel } from "../components/PlayerPanel";
interface SongSummary { // ── Empty player state ────────────────────────────────────────────────────────
id: string;
title: string; function EmptyPlayer() {
status: string; return (
tags: string[]; <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: "#0c0e1a", gap: 12, padding: 40 }}>
global_key: string | null; <div style={{ width: 64, height: 64, borderRadius: 20, background: "rgba(139,92,246,0.08)", border: "1px solid rgba(139,92,246,0.15)", display: "flex", alignItems: "center", justifyContent: "center" }}>
global_bpm: number | null; <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
version_count: number; <path d="M7 14c0-4.5 3.5-7 7-7s7 2.5 7 7v5L23 22H5l2-3v-5z" stroke="rgba(139,92,246,0.5)" strokeWidth="1.5" strokeLinejoin="round" />
<path d="M10 22a4 4 0 0 0 8 0" stroke="rgba(139,92,246,0.5)" strokeWidth="1.5" />
</svg>
</div>
<p style={{ fontSize: 13, color: "rgba(232,233,240,0.28)", margin: 0, textAlign: "center" }}>
Select a track from the library to start listening
</p>
</div>
);
} }
interface SessionSummary { // ── BandPage ──────────────────────────────────────────────────────────────────
id: string;
date: string;
label: string | null;
recording_count: number;
}
type FilterPill = "all" | "full band" | "guitar" | "vocals" | "drums" | "keys" | "commented";
const PILLS: FilterPill[] = ["all", "full band", "guitar", "vocals", "drums", "keys", "commented"];
function formatDate(iso: string): string {
const d = new Date(iso.slice(0, 10) + "T12:00:00");
return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
}
function formatDateLabel(iso: string): string {
const d = new Date(iso.slice(0, 10) + "T12:00:00");
const today = new Date();
today.setHours(12, 0, 0, 0);
const diffDays = Math.round((today.getTime() - d.getTime()) / (1000 * 60 * 60 * 24));
if (diffDays === 0) {
return "Today — " + d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}
return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}
export function BandPage() { export function BandPage() {
const { bandId } = useParams<{ bandId: string }>(); const { bandId } = useParams<{ bandId: string }>();
const [librarySearch, setLibrarySearch] = useState(""); const [searchParams, setSearchParams] = useSearchParams();
const [activePill, setActivePill] = useState<FilterPill>("all"); // selectedSongId is kept in URL as ?song=<id> so deep-links and browser back work
const selectedSongId = searchParams.get("song");
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const check = () => setIsMobile(window.innerWidth < 900);
check();
window.addEventListener("resize", check);
return () => window.removeEventListener("resize", check);
}, []);
const { data: band, isLoading } = useQuery({ const { data: band, isLoading } = useQuery({
queryKey: ["band", bandId], queryKey: ["band", bandId],
@@ -52,239 +46,63 @@ export function BandPage() {
enabled: !!bandId, enabled: !!bandId,
}); });
const { data: sessions } = useQuery({ function selectSong(songId: string) {
queryKey: ["sessions", bandId], setSearchParams({ song: songId }, { replace: false });
queryFn: () => api.get<SessionSummary[]>(`/bands/${bandId}/sessions`), }
enabled: !!bandId,
});
const { data: unattributedSongs } = useQuery({ function clearSong() {
queryKey: ["songs-unattributed", bandId], setSearchParams({}, { replace: false });
queryFn: () => api.get<SongSummary[]>(`/bands/${bandId}/songs/search?unattributed=true`), }
enabled: !!bandId,
});
const filteredSessions = useMemo(() => { if (isLoading) return <div style={{ color: "rgba(232,233,240,0.35)", padding: 32 }}>Loading…</div>;
return (sessions ?? []).filter((s) => { if (!band || !bandId) return <div style={{ color: "#f87171", padding: 32 }}>Band not found</div>;
if (!librarySearch) return true;
const haystack = [s.label ?? "", s.date, formatDate(s.date)].join(" ").toLowerCase();
return haystack.includes(librarySearch.toLowerCase());
});
}, [sessions, librarySearch]);
const filteredUnattributed = useMemo(() => { // ── Mobile: show library OR player, not both ──────────────────────────────
return (unattributedSongs ?? []).filter((song) => {
const matchesSearch =
!librarySearch || song.title.toLowerCase().includes(librarySearch.toLowerCase());
const matchesPill =
activePill === "all" ||
activePill === "commented" ||
song.tags.some((t) => t.toLowerCase() === activePill);
return matchesSearch && matchesPill;
});
}, [unattributedSongs, librarySearch, activePill]);
if (isMobile) {
if (selectedSongId) {
return (
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<PlayerPanel
key={selectedSongId}
songId={selectedSongId}
bandId={bandId}
onBack={clearSong}
/>
</div>
);
}
return (
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<LibraryPanel
bandId={bandId}
selectedSongId={selectedSongId}
onSelectSong={selectSong}
/>
</div>
);
}
if (isLoading) return <div style={{ color: "var(--text-muted)", padding: 32 }}>Loading...</div>; // ── Desktop: three-panel (Sidebar is handled by AppShell, we add Library + Player) ──
if (!band) return <div style={{ color: "var(--danger)", padding: 32 }}>Band not found</div>;
const hasResults = filteredSessions.length > 0 || filteredUnattributed.length > 0;
return ( return (
<div style={{ display: "flex", flexDirection: "column", height: "100%", maxWidth: 760, margin: "0 auto" }}> <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
<LibraryPanel
bandId={bandId}
selectedSongId={selectedSongId}
onSelectSong={selectSong}
/>
{/* ── Header ─────────────────────────────────────────────── */} {selectedSongId ? (
<div style={{ padding: "18px 26px 0", flexShrink: 0, borderBottom: "1px solid rgba(255,255,255,0.06)" }}> <PlayerPanel
{/* Title row + search + actions */} key={selectedSongId}
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 11 }}> songId={selectedSongId}
<h1 style={{ fontSize: 17, fontWeight: 500, color: "#eeeef2", margin: 0, flexShrink: 0 }}> bandId={bandId}
Library onBack={clearSong}
</h1> />
) : (
{/* Search input */} <EmptyPlayer />
<div style={{ position: "relative", flex: 1, maxWidth: 280 }}> )}
<svg
style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", opacity: 0.3, pointerEvents: "none", color: "#eeeef2" }}
width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" strokeWidth="1.5"
>
<circle cx="5.5" cy="5.5" r="3.5" />
<path d="M8.5 8.5l3 3" strokeLinecap="round" />
</svg>
<input
value={librarySearch}
onChange={(e) => setLibrarySearch(e.target.value)}
placeholder="Search recordings, comments…"
style={{
width: "100%",
padding: "7px 12px 7px 30px",
background: "rgba(255,255,255,0.05)",
border: "1px solid rgba(255,255,255,0.08)",
borderRadius: 7,
color: "#e2e2e8",
fontSize: 13,
fontFamily: "inherit",
outline: "none",
boxSizing: "border-box",
}}
onFocus={(e) => (e.currentTarget.style.borderColor = "rgba(232,162,42,0.35)")}
onBlur={(e) => (e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)")}
/>
</div>
</div>
{/* Filter pills */}
<div style={{ display: "flex", gap: 5, flexWrap: "wrap", paddingBottom: 14 }}>
{PILLS.map((pill) => {
const active = activePill === pill;
return (
<button
key={pill}
onClick={() => setActivePill(pill)}
style={{
padding: "3px 10px",
borderRadius: 20,
cursor: "pointer",
border: `1px solid ${active ? "rgba(232,162,42,0.28)" : "rgba(255,255,255,0.08)"}`,
background: active ? "rgba(232,162,42,0.1)" : "transparent",
color: active ? "#e8a22a" : "rgba(255,255,255,0.3)",
fontSize: 11,
fontFamily: "inherit",
transition: "all 0.12s",
textTransform: "capitalize",
}}
>
{pill}
</button>
);
})}
</div>
</div>
{/* ── Scrollable content ────────────────────────────────── */}
<div style={{ flex: 1, overflowY: "auto", padding: "4px 26px 26px" }}>
{/* Sessions — one date group per session */}
{filteredSessions.map((s) => (
<div key={s.id} style={{ marginTop: 18 }}>
{/* Date group header */}
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
<span style={{ fontSize: 10, fontWeight: 500, color: "rgba(255,255,255,0.32)", textTransform: "uppercase", letterSpacing: "0.6px", whiteSpace: "nowrap" }}>
{formatDateLabel(s.date)}{s.label ? ` — ${s.label}` : ""}
</span>
<div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.05)" }} />
<span style={{ fontSize: 10, color: "rgba(255,255,255,0.18)", whiteSpace: "nowrap" }}>
{s.recording_count} recording{s.recording_count !== 1 ? "s" : ""}
</span>
</div>
{/* Session row */}
<Link
to={`/bands/${bandId}/sessions/${s.id}`}
style={{
display: "flex",
alignItems: "center",
gap: 11,
padding: "9px 13px",
borderRadius: 8,
background: "rgba(255,255,255,0.02)",
border: "1px solid rgba(255,255,255,0.04)",
textDecoration: "none",
cursor: "pointer",
transition: "background 0.12s, border-color 0.12s",
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.048)";
(e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)";
}}
onMouseLeave={(e) => {
(e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.02)";
(e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.04)";
}}
>
{/* Session name */}
<span style={{ flex: 1, fontSize: 13, color: "#c8c8d0", fontFamily: "'SF Mono','Fira Code',monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
{s.label ?? formatDate(s.date)}
</span>
{/* Recording count */}
<span style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", whiteSpace: "nowrap", flexShrink: 0 }}>
{s.recording_count}
</span>
</Link>
</div>
))}
{/* Unattributed recordings */}
{filteredUnattributed.length > 0 && (
<div style={{ marginTop: filteredSessions.length > 0 ? 28 : 18 }}>
{/* Section header */}
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
<span style={{ fontSize: 10, fontWeight: 500, color: "rgba(255,255,255,0.32)", textTransform: "uppercase", letterSpacing: "0.6px", whiteSpace: "nowrap" }}>
Unattributed
</span>
<div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.05)" }} />
<span style={{ fontSize: 10, color: "rgba(255,255,255,0.18)", whiteSpace: "nowrap" }}>
{filteredUnattributed.length} track{filteredUnattributed.length !== 1 ? "s" : ""}
</span>
</div>
<div style={{ display: "grid", gap: 3 }}>
{filteredUnattributed.map((song) => (
<Link
key={song.id}
to={`/bands/${bandId}/songs/${song.id}`}
style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 13px", borderRadius: 8, background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.04)", textDecoration: "none", transition: "background 0.12s, border-color 0.12s" }}
onMouseEnter={(e) => {
(e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.048)";
(e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)";
}}
onMouseLeave={(e) => {
(e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.02)";
(e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.04)";
}}
>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: 13, color: "#c8c8d0", fontFamily: "'SF Mono','Fira Code',monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginBottom: 3 }}>
{song.title}
</div>
<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
{song.tags.map((t) => (
<span key={t} style={{ background: "rgba(61,200,120,0.08)", color: "#4dba85", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>
{t}
</span>
))}
{song.global_key && (
<span style={{ background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.28)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>
{song.global_key}
</span>
)}
{song.global_bpm && (
<span style={{ background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.28)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>
{song.global_bpm.toFixed(0)} BPM
</span>
)}
</div>
</div>
<span style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", whiteSpace: "nowrap", flexShrink: 0 }}>
{song.version_count} ver{song.version_count !== 1 ? "s" : ""}
</span>
</Link>
))}
</div>
</div>
)}
{/* Empty state */}
{!hasResults && (
<p style={{ color: "rgba(255,255,255,0.28)", fontSize: 13, padding: "24px 0 8px" }}>
{librarySearch
? "No results match your search."
: "No sessions yet. Go to Storage settings to scan your Nextcloud folder."}
</p>
)}
</div>
</div> </div>
); );
} }

1031
web/src/pages/SongPage.tsx
View File

File diff suppressed because it is too large Load Diff