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

style: align all pages with CLAUDE.md design system

Browse Source 
- Inputs: uniform padding (8px 12px), borderRadius 7, bg-inset background
- List rows/cards: bg-subtle background, border-subtle border (bg-inset was input-only)
- Invite/admin badge borders: use accent-border var instead of raw accent
- Section headers: 11px, weight 500, uppercase, 0.7px letter-spacing
- Notification/status banners: borderRadius 8
- Remove debug console.log statements from SettingsPage avatar upload flow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mistral Vibe
2026-04-01 09:52:06 +02:00
parent 7677677e7b
commit 6dc191585c
6 changed files with 55 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -254,7 +254,7 @@ export function BandPage() {
value={folderInput}
onChange={(e) => setFolderInput(e.target.value)}
placeholder={`bands/${band.slug}/`}
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, fontFamily: "monospace", boxSizing: "border-box" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, fontFamily: "monospace", boxSizing: "border-box" }}
/>
<div style={{ display: "flex", gap: 8, marginTop: 8 }}>
<button
@@ -289,7 +289,7 @@ export function BandPage() {
</div>
{inviteLink && (
<div style={{ background: "var(--accent-bg)", border: "1px solid var(--accent)", borderRadius: 6, padding: "10px 14px", marginBottom: 12 }}>
<div style={{ background: "var(--accent-bg)", border: "1px solid var(--accent-border)", borderRadius: 8, padding: "10px 14px", marginBottom: 12 }}>
<p style={{ color: "var(--text-muted)", fontSize: 11, margin: "0 0 6px" }}>Invite link (copied to clipboard, valid 72h):</p>
<code style={{ color: "var(--accent)", fontSize: 12, wordBreak: "break-all" }}>{inviteLink}</code>
<button
@@ -305,7 +305,7 @@ export function BandPage() {
{members?.map((m) => (
<div
key={m.id}
style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 6, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}
style={{ background: "var(--bg-subtle)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}
>
<div>
<span style={{ fontWeight: 500 }}>{m.display_name}</span>
@@ -316,7 +316,7 @@ export function BandPage() {
fontSize: 10, fontFamily: "monospace", padding: "2px 6px", borderRadius: 3,
background: m.role === "admin" ? "var(--accent-bg)" : "var(--bg-inset)",
color: m.role === "admin" ? "var(--accent)" : "var(--text-muted)",
border: `1px solid ${m.role === "admin" ? "var(--accent)" : "var(--border)"}`,
border: `1px solid ${m.role === "admin" ? "var(--accent-border)" : "var(--border)"}`,
}}>
{m.role}
</span>
@@ -355,12 +355,12 @@ export function BandPage() {
</div>
{scanning && scanProgress && (
<div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", fontSize: 12, padding: "8px 14px", marginBottom: 8, fontFamily: "monospace" }}>
<div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, color: "var(--text-muted)", fontSize: 12, padding: "8px 14px", marginBottom: 8, fontFamily: "monospace" }}>
{scanProgress}
</div>
)}
{scanMsg && (
<div style={{ background: "var(--teal-bg)", border: "1px solid var(--teal)", borderRadius: 6, color: "var(--teal)", fontSize: 12, padding: "8px 14px", marginBottom: 12 }}>
<div style={{ background: "var(--teal-bg)", border: "1px solid var(--teal)", borderRadius: 8, color: "var(--teal)", fontSize: 12, padding: "8px 14px", marginBottom: 12 }}>
{scanMsg}
</div>
)}
@@ -373,7 +373,7 @@ export function BandPage() {
value={title}
onChange={(e) => setTitle(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && title && createMutation.mutate()}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", marginBottom: 12, fontSize: 14, boxSizing: "border-box" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", marginBottom: 12, fontSize: 14, boxSizing: "border-box" }}
autoFocus
/>
<div style={{ display: "flex", gap: 8 }}>
@@ -425,8 +425,8 @@ export function BandPage() {
key={s.id}
to={`/bands/${bandId}/sessions/${s.id}`}
style={{
background: "var(--bg-inset)",
border: "1px solid var(--border)",
background: "var(--bg-subtle)",
border: "1px solid var(--border-subtle)",
borderRadius: 8,
padding: "14px 18px",
textDecoration: "none",
@@ -467,8 +467,8 @@ export function BandPage() {
key={song.id}
to={`/bands/${bandId}/songs/${song.id}`}
style={{
background: "var(--bg-inset)",
border: "1px solid var(--border)",
background: "var(--bg-subtle)",
border: "1px solid var(--border-subtle)",
borderRadius: 8,
padding: "14px 18px",
textDecoration: "none",
@@ -512,7 +512,7 @@ export function BandPage() {
onChange={(e) => setSearchQ(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") { setSearchDirty(true); qc.invalidateQueries({ queryKey: ["songs-search", bandId] }); } }}
placeholder="Search by name…"
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
/>
</div>
<div>
@@ -521,7 +521,7 @@ export function BandPage() {
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
placeholder="e.g. Am, C, F#"
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
/>
</div>
<div>
@@ -532,7 +532,7 @@ export function BandPage() {
type="number"
min={0}
placeholder="e.g. 80"
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
/>
</div>
<div>
@@ -543,7 +543,7 @@ export function BandPage() {
type="number"
min={0}
placeholder="e.g. 140"
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
/>
</div>
</div>
@@ -571,7 +571,7 @@ export function BandPage() {
onChange={(e) => setSearchTagInput(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && addTag()}
placeholder="Add tag…"
style={{ flex: 1, padding: "6px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 12 }}
style={{ flex: 1, padding: "6px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 12 }}
/>
<button
onClick={addTag}
@@ -599,8 +599,8 @@ export function BandPage() {
key={song.id}
to={`/bands/${bandId}/songs/${song.id}`}
style={{
background: "var(--bg-inset)",
border: "1px solid var(--border)",
background: "var(--bg-subtle)",
border: "1px solid var(--border-subtle)",
borderRadius: 8,
padding: "14px 18px",
textDecoration: "none",

2
web/src/pages/HomePage.tsx
View File

@@ -35,7 +35,7 @@ export function HomePage() {
padding: "8px 12px",
background: "var(--bg-inset)",
border: "1px solid var(--border)",
borderRadius: 6,
borderRadius: 7,
color: "var(--text)",
marginBottom: 12,
fontSize: 14,

6
web/src/pages/LoginPage.tsx
View File

@@ -28,10 +28,10 @@ export function LoginPage() {
}
const inputStyle: React.CSSProperties = {
width: "100%", padding: "10px 12px",
width: "100%", padding: "8px 12px",
background: "var(--bg-inset)",
border: "1px solid var(--border)",
borderRadius: 6,
borderRadius: 7,
color: "var(--text)",
marginBottom: 16, fontSize: 14, boxSizing: "border-box",
};
@@ -68,7 +68,7 @@ export function LoginPage() {
style={{ ...inputStyle, marginBottom: 24 }}
/>
<button type="submit" style={{ width: "100%", padding: "12px", background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", fontWeight: 600, cursor: "pointer", fontSize: 14 }}>
<button type="submit" style={{ width: "100%", padding: "10px", background: "var(--accent)", border: "none", borderRadius: 7, color: "var(--accent-fg)", fontWeight: 600, cursor: "pointer", fontSize: 14 }}>
{mode === "login" ? "Sign In" : "Create Account"}
</button>

8
web/src/pages/SessionPage.tsx
View File

@@ -104,14 +104,14 @@ export function SessionPage() {
value={labelInput}
onChange={(e) => setLabelInput(e.target.value)}
placeholder="e.g. pre-gig warmup"
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box", marginBottom: 10 }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box", marginBottom: 10 }}
/>
<label style={{ display: "block", color: "var(--text-muted)", fontSize: 11, marginBottom: 4 }}>NOTES</label>
<textarea
value={notesInput}
onChange={(e) => setNotesInput(e.target.value)}
rows={3}
style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box", resize: "vertical", fontFamily: "inherit" }}
style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box", resize: "vertical", fontFamily: "inherit" }}
/>
<div style={{ display: "flex", gap: 8, marginTop: 10 }}>
<button
@@ -139,8 +139,8 @@ export function SessionPage() {
key={song.id}
to={`/bands/${bandId}/songs/${song.id}`}
style={{
background: "var(--bg-inset)",
border: "1px solid var(--border)",
background: "var(--bg-subtle)",
border: "1px solid var(--border-subtle)",
borderRadius: 8,
padding: "14px 18px",
textDecoration: "none",

77
web/src/pages/SettingsPage.tsx
View File

@@ -27,7 +27,7 @@ const inputStyle: React.CSSProperties = {
padding: "8px 12px",
background: "var(--bg-inset)",
border: "1px solid var(--border)",
borderRadius: 6,
borderRadius: 7,
color: "var(--text)",
fontSize: 14,
boxSizing: "border-box",
@@ -102,9 +102,6 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
lastModified: Date.now()
});
console.log(`Resized image from ${img.width}x${img.height} to ${width}x${height}`);
console.log(`File size reduced from ${file.size} to ${resizedFile.size} bytes`);
resolve(resizedFile);
}, 'image/jpeg', 0.8); // JPEG quality 80%
};
@@ -144,7 +141,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
return (
<>
<section style={{ marginBottom: 32 }}>
<h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 16 }}>PROFILE</h2>
<h2 style={{ fontSize: 11, fontWeight: 500, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 16 }}>PROFILE</h2>
<div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
{avatarUrl && (
<img src={avatarUrl} alt="Profile" style={{ width: 64, height: 64, borderRadius: "50%", objectFit: "cover" }} />
@@ -158,7 +155,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
</section>
<section style={{ marginBottom: 32 }}>
<h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 8 }}>NEXTCLOUD CONNECTION</h2>
<h2 style={{ fontSize: 11, fontWeight: 500, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 8 }}>Nextcloud Connection</h2>
<p style={{ color: "var(--text-subtle)", fontSize: 12, marginBottom: 16 }}>
Configure your personal Nextcloud credentials. When set, all file operations (band folders, song uploads, scans) will use these credentials.
</p>
@@ -190,43 +187,36 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
</section>
<section style={{ marginBottom: 32 }}>
<h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 16 }}>AVATAR</h2>
<h2 style={{ fontSize: 11, fontWeight: 500, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 16 }}>AVATAR</h2>
<div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
<input
type="file"
accept="image/*"
onChange={async (e) => {
console.log("File input changed", e.target.files);
const file = e.target.files?.[0];
if (file) {
console.log("Selected file:", file.name, file.type, file.size);
setUploading(true);
try {
// Check file size and resize if needed
const maxSize = 4 * 1024 * 1024; // 4MB (more conservative to account for base64 overhead)
let processedFile = file;
if (file.size > maxSize) {
console.log("File too large, resizing...");
processedFile = await resizeImage(file, 800, 800); // Max 800x800
}
const formData = new FormData();
formData.append('file', processedFile, processedFile.name || file.name);
console.log("Uploading file to /auth/me/avatar");
console.log("Final file size:", processedFile.size);
const response = await api.upload<MemberRead>('/auth/me/avatar', formData);
console.log("Upload response:", response);
setAvatarUrl(response.avatar_url || '');
qc.invalidateQueries({ queryKey: ['me'] });
qc.invalidateQueries({ queryKey: ['comments'] });
} catch (err) {
console.error("Upload failed:", err);
let errorMessage = 'Failed to upload avatar. Please try again.';
if (err instanceof Error) {
errorMessage = err.message;
if (err.message.includes('413')) {
@@ -235,8 +225,6 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
errorMessage = 'Invalid image file. Please upload a valid image (JPG, PNG, etc.).';
}
} else if (typeof err === 'object' && err !== null) {
// Try to extract more details from the error object
console.error("Error details:", JSON.stringify(err));
const errorObj = err as { status?: number; data?: { detail?: string } };
if (errorObj.status === 422 && errorObj.data?.detail) {
errorMessage = errorObj.data.detail;
@@ -252,48 +240,39 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
style={{ display: "none" }}
id="avatar-upload"
/>
<label htmlFor="avatar-upload" style={{
background: "var(--accent)",
border: "none",
borderRadius: 6,
color: "var(--accent-fg)",
cursor: "pointer",
padding: "8px 16px",
fontWeight: 600,
fontSize: 14
<label htmlFor="avatar-upload" style={{
background: "var(--accent)",
border: "none",
borderRadius: 6,
color: "var(--accent-fg)",
cursor: "pointer",
padding: "8px 16px",
fontWeight: 600,
fontSize: 13,
}}>
{uploading ? "Uploading..." : "Upload Avatar"}
</label>
<button
onClick={async () => {
console.log("Generate Random button clicked");
try {
// Generate a new random avatar using user ID as seed for consistency
const seed = Math.random().toString(36).substring(2, 15);
const newAvatarUrl = `https://api.dicebear.com/9.x/identicon/svg?seed=${seed}&backgroundType=gradientLinear&size=128`;
console.log("Generated avatar URL:", newAvatarUrl);
console.log("Calling updateSettings with:", { avatar_url: newAvatarUrl });
await updateSettings({ avatar_url: newAvatarUrl });
setAvatarUrl(newAvatarUrl);
qc.invalidateQueries({ queryKey: ["me"] });
qc.invalidateQueries({ queryKey: ["comments"] });
console.log("Avatar updated successfully");
} catch (err) {
console.error("Failed to update avatar:", err);
setError(err instanceof Error ? err.message : 'Failed to update avatar');
}
}}
style={{
background: "none",
border: "1px solid var(--border)",
borderRadius: 6,
color: "var(--text)",
cursor: "pointer",
padding: "8px 16px",
fontSize: 14
style={{
background: "none",
border: "1px solid var(--border)",
borderRadius: 6,
color: "var(--text)",
cursor: "pointer",
padding: "8px 16px",
fontSize: 13,
}}
>
Generate Random
@@ -306,8 +285,6 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
alt="Preview"
style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }}
onError={() => {
console.error("Failed to load avatar:", avatarUrl);
// Set to default avatar on error
setAvatarUrl(`https://api.dicebear.com/9.x/identicon/svg?seed=${me.id}&backgroundType=gradientLinear&size=128`);
}}
/>

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

@@ -219,7 +219,7 @@ export function SongPage() {
onChange={(e) => setCommentBody(e.target.value)}
placeholder="Add a comment…"
rows={2}
style={{ flex: 1, padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, resize: "vertical", fontFamily: "inherit" }}
style={{ flex: 1, padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, resize: "vertical", fontFamily: "inherit" }}
/>
<button
onClick={() => commentBody.trim() && addCommentMutation.mutate({ body: commentBody.trim(), timestamp: currentTime })}
@@ -242,7 +242,7 @@ function AnnotationCard({ annotation: a, onSeek, versionId }: { annotation: Anno
});
return (
<div style={{ background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 8, padding: 14 }}>
<div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: 14 }}>
<div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
<button
onClick={() => onSeek(a.timestamp_ms / 1000)}