bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CODEX - MAJOR overhaul to the columns and minor changes to the melody detail and form

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-23 09:33:03 +02:00
parent 8b3ec3f6ec
commit fb3bbac245
3 changed files with 338 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/melodies/MelodyDetail.jsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
@@ -47,6 +47,12 @@ function mapPercentageToStepDelay(percent, minSpeed, maxSpeed) {
return Math.round(a * Math.pow(b / a, t));
}
function hueForDepth(index, count) {
const safeCount = Math.max(1, count);
const t = Math.max(0, Math.min(1, index / safeCount));
return 190 + (15 - 190) * t;
}
function Field({ label, children }) {
return (
<div>
@@ -324,31 +330,6 @@ export default function MelodyDetail() {
Melody Information
</h2>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
<Field label="Type">
<span className="capitalize">{melody.type}</span>
</Field>
<Field label="Tone">
<span className="capitalize">{info.melodyTone}</span>
</Field>
<Field label="Steps">{info.steps}</Field>
<Field label="Total Archetype Notes">{info.totalNotes}</Field>
<Field label="Total Active Bells">{info.totalActiveBells ?? "-"}</Field>
<Field label="Min Speed">
{info.minSpeed ? (
<div>
<div>{minBpm} BPM</div>
<div className="text-xs" style={{ color: "var(--text-muted)" }}>{info.minSpeed} ms</div>
</div>
) : "-"}
</Field>
<Field label="Max Speed">
{info.maxSpeed ? (
<div>
<div>{maxBpm} BPM</div>
<div className="text-xs" style={{ color: "var(--text-muted)" }}>{info.maxSpeed} ms</div>
</div>
) : "-"}
</Field>
<Field label="Color">
{info.color ? (
<span className="inline-flex items-center gap-2">
@@ -362,11 +343,25 @@ export default function MelodyDetail() {
"-"
)}
</Field>
<Field label="True Ring">
<span className="px-2 py-0.5 text-xs rounded-full" style={badgeStyle(info.isTrueRing)}>
{info.isTrueRing ? "Yes" : "No"}
</span>
<Field label="Tone">
<span className="capitalize">{info.melodyTone}</span>
</Field>
<Field label="Steps">{info.steps}</Field>
<Field label="Min Speed">
{info.minSpeed ? (
<span>
{minBpm} bpm <span className="text-xs" style={{ color: "var(--text-muted)" }}>· {info.minSpeed} ms</span>
</span>
) : "-"}
</Field>
<Field label="Max Speed">
{info.maxSpeed ? (
<span>
{maxBpm} bpm <span className="text-xs" style={{ color: "var(--text-muted)" }}>· {info.maxSpeed} ms</span>
</span>
) : "-"}
</Field>
<Field label="Unique Bells">{info.totalActiveBells ?? "-"}</Field>
<div className="col-span-2 md:col-span-3">
<Field label="Description">
{getLocalizedValue(info.description, displayLang)}
@@ -428,7 +423,7 @@ export default function MelodyDetail() {
<Field label="Speed">
{settings.speed != null ? (
<span>
{settings.speed}%{speedBpm ? ` · ${speedBpm} BPM` : ""}{speedMs ? ` · ${speedMs} ms` : ""}
{settings.speed}%{speedBpm ? <span className="text-xs" style={{ color: "var(--text-muted)" }}>{` · ${speedBpm} bpm`}</span> : ""}{speedMs ? <span className="text-xs" style={{ color: "var(--text-muted)" }}>{` · ${speedMs} ms`}</span> : ""}
</span>
) : "-"}
</Field>
@@ -452,26 +447,32 @@ export default function MelodyDetail() {
<dd>
{settings.noteAssignments?.length > 0 ? (
<div className="flex flex-wrap gap-1.5">
{settings.noteAssignments.map((assignedBell, noteIdx) => (
<div
key={noteIdx}
className="flex flex-col items-center rounded-md border"
style={{
minWidth: "36px",
padding: "4px 6px",
backgroundColor: "var(--bg-card-hover)",
borderColor: "var(--border-primary)",
}}
>
<span className="text-xs font-bold leading-tight" style={{ color: "var(--text-secondary)" }}>
{String.fromCharCode(65 + noteIdx)}
</span>
<div className="w-full my-0.5" style={{ height: "1px", backgroundColor: "var(--border-primary)" }} />
<span className="text-xs leading-tight" style={{ color: "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "—"}
</span>
</div>
))}
{settings.noteAssignments.map((assignedBell, noteIdx) => {
const noteHue = hueForDepth(noteIdx, settings.noteAssignments.length - 1);
const bellDepthIdx = Math.max(0, Math.min(15, (assignedBell || 1) - 1));
const bellHue = hueForDepth(bellDepthIdx, 15);
return (
<div
key={noteIdx}
className="flex flex-col items-center rounded-md border"
style={{
minWidth: "36px",
padding: "4px 6px",
backgroundColor: "var(--bg-card-hover)",
borderColor: `hsla(${noteHue}, 65%, 55%, 0.45)`,
boxShadow: `0 0 6px hsla(${noteHue}, 75%, 55%, 0.25) inset`,
}}
>
<span className="text-xs font-bold leading-tight" style={{ color: `hsl(${noteHue}, 80%, 72%)` }}>
{String.fromCharCode(65 + noteIdx)}
</span>
<div className="w-full my-0.5" style={{ height: "1px", backgroundColor: "var(--border-primary)" }} />
<span className="text-xs leading-tight" style={{ color: assignedBell > 0 ? `hsl(${bellHue}, 80%, 70%)` : "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "—"}
</span>
</div>
);
})}
</div>
) : (
<span style={{ color: "var(--text-muted)" }}>-</span>
@@ -566,6 +567,9 @@ export default function MelodyDetail() {
</a>
</span>
)}
<span className="text-xs" style={{ color: "var(--text-muted)" }}>
{info.totalNotes ?? 0} active notes
</span>
</span>
);
})()}
@@ -725,3 +729,7 @@ export default function MelodyDetail() {
</div>
);
}

142
frontend/src/melodies/MelodyForm.jsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
@@ -110,6 +110,8 @@ export default function MelodyForm() {
const [builtMelody, setBuiltMelody] = useState(null);
const [assignedBinaryName, setAssignedBinaryName] = useState(null);
const [assignedBinaryPid, setAssignedBinaryPid] = useState(null);
const binaryInputRef = useRef(null);
const previewInputRef = useRef(null);
// Metadata / Admin Notes
const [adminNotes, setAdminNotes] = useState([]);
@@ -192,6 +194,40 @@ export default function MelodyForm() {
if (!str.trim()) return [];
return str.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !isNaN(n));
};
const resolveFilename = (fileUrl, fallbackName) => {
if (!fileUrl) return fallbackName;
try {
const path = decodeURIComponent(new URL(fileUrl, window.location.origin).pathname);
const parts = path.split("/");
return parts[parts.length - 1] || fallbackName;
} catch {
return fallbackName;
}
};
const downloadExistingFile = async (fileUrl, fallbackName, e) => {
e?.preventDefault?.();
if (!fileUrl) return;
try {
const token = localStorage.getItem("access_token");
let res = await fetch(fileUrl, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
if (!res.ok && fileUrl.startsWith("http")) {
res = await fetch(fileUrl);
}
if (!res.ok) throw new Error(`Download failed: ${res.statusText}`);
const blob = await res.blob();
const objectUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = objectUrl;
a.download = fallbackName || "download.file";
a.click();
URL.revokeObjectURL(objectUrl);
} catch (err) {
setError(err.message);
}
};
const updateLocalizedField = (fieldKey, text) => {
const dict = parseLocalizedString(information[fieldKey]);
@@ -529,7 +565,7 @@ export default function MelodyForm() {
<label className="block text-sm font-medium mb-1" style={labelStyle}>Min Speed</label>
<input type="number" min="0" value={information.minSpeed} onChange={(e) => updateInfo("minSpeed", parseInt(e.target.value, 10) || 0)} className={inputClass} />
{information.minSpeed > 0 && (
<p className="text-xs mt-1" style={mutedStyle}>{minBpm} BPM · {information.minSpeed} ms</p>
<p className="text-xs mt-1" style={mutedStyle}>{minBpm} bpm · {information.minSpeed} ms</p>
)}
</div>
@@ -537,7 +573,7 @@ export default function MelodyForm() {
<label className="block text-sm font-medium mb-1" style={labelStyle}>Max Speed</label>
<input type="number" min="0" value={information.maxSpeed} onChange={(e) => updateInfo("maxSpeed", parseInt(e.target.value, 10) || 0)} className={inputClass} />
{information.maxSpeed > 0 && (
<p className="text-xs mt-1" style={mutedStyle}>{maxBpm} BPM · {information.maxSpeed} ms</p>
<p className="text-xs mt-1" style={mutedStyle}>{maxBpm} bpm · {information.maxSpeed} ms</p>
)}
</div>
@@ -621,7 +657,7 @@ export default function MelodyForm() {
<span className="text-sm font-medium w-12 text-right" style={labelStyle}>{settings.speed}%</span>
</div>
<div className="text-xs mt-1" style={mutedStyle}>
{speedBpm && speedMs ? `${speedBpm} BPM · ${speedMs} ms` : "Set MIN/MAX speed to compute BPM"}
{speedBpm && speedMs ? `${speedBpm} bpm · ${speedMs} ms` : "Set MIN/MAX speed to compute bpm"}
</div>
</div>
@@ -683,23 +719,48 @@ export default function MelodyForm() {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Binary File (.bsm / .bin)</label>
{existingFiles.binary_url && (
<div className="text-xs mb-1" style={{ color: "var(--success)" }}>
{assignedBinaryName ? (
<>
<p><strong>{assignedBinaryName}</strong> has been assigned. Selecting a new file will replace it.</p>
{assignedBinaryPid && (
<p className="mt-0.5" style={{ color: "var(--text-muted)" }}>
filename: <span className="font-mono">{assignedBinaryPid}.bsm</span>
</p>
)}
</>
) : (
<p>Current file uploaded. Selecting a new file will replace it.</p>
)}
</div>
{(() => {
const binaryUrl = existingFiles.binary_url || url || null;
const fallback = assignedBinaryPid ? `${assignedBinaryPid}.bsm` : (pid ? `${pid}.bsm` : "Click to Download");
const binaryName = resolveFilename(binaryUrl, fallback);
return (
<div className="text-xs mb-2" style={{ color: "var(--text-muted)" }}>
{binaryUrl ? (
<a
href={binaryUrl}
onClick={(e) => downloadExistingFile(binaryUrl, binaryName, e)}
className="underline"
style={{ color: "var(--accent)" }}
>
{binaryName}
</a>
) : (
<span>No binary uploaded</span>
)}
<div className="mt-0.5">{information.totalNotes ?? 0} active notes</div>
</div>
);
})()}
<input
ref={binaryInputRef}
type="file"
accept=".bin,.bsm"
onChange={(e) => setBinaryFile(e.target.files[0] || null)}
className="hidden"
/>
<button
type="button"
onClick={() => binaryInputRef.current?.click()}
className="px-3 py-1.5 text-xs rounded-full transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
>
Choose Binary File
</button>
{binaryFile && (
<p className="text-xs mt-1" style={mutedStyle}>
selected: {binaryFile.name}
</p>
)}
<input type="file" accept=".bin,.bsm" onChange={(e) => setBinaryFile(e.target.files[0] || null)} className="w-full text-sm" style={mutedStyle} />
<div className="flex gap-2 mt-2">
<button
type="button"
@@ -748,13 +809,41 @@ export default function MelodyForm() {
</div>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Audio Preview (.mp3)</label>
{existingFiles.preview_url && (
<div className="mb-1">
<p className="text-xs mb-1" style={{ color: "var(--success)" }}>Current preview uploaded. Selecting a new file will replace it.</p>
{existingFiles.preview_url ? (
<div className="mb-2 space-y-1">
<a
href={existingFiles.preview_url}
onClick={(e) => downloadExistingFile(existingFiles.preview_url, resolveFilename(existingFiles.preview_url, "preview.mp3"), e)}
className="underline text-xs"
style={{ color: "var(--accent)" }}
>
{resolveFilename(existingFiles.preview_url, "Click to Download")}
</a>
<audio controls src={existingFiles.preview_url} className="h-8" />
</div>
) : (
<p className="text-xs mb-2" style={mutedStyle}>No preview uploaded</p>
)}
<input
ref={previewInputRef}
type="file"
accept=".mp3,.wav,.ogg"
onChange={(e) => setPreviewFile(e.target.files[0] || null)}
className="hidden"
/>
<button
type="button"
onClick={() => previewInputRef.current?.click()}
className="px-3 py-1.5 text-xs rounded-full transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
>
Choose Preview File
</button>
{previewFile && (
<p className="text-xs mt-1" style={mutedStyle}>
selected: {previewFile.name}
</p>
)}
<input type="file" accept=".mp3,.wav,.ogg" onChange={(e) => setPreviewFile(e.target.files[0] || null)} className="w-full text-sm" style={mutedStyle} />
</div>
</div>
</section>
@@ -910,3 +999,8 @@ export default function MelodyForm() {
</div>
);
}

193
frontend/src/melodies/MelodyList.jsx
View File

@@ -29,8 +29,7 @@ const ALL_COLUMNS = [
{ key: "description", label: "Description", defaultOn: false },
{ key: "type", label: "Type", defaultOn: true },
{ key: "tone", label: "Tone", defaultOn: true },
{ key: "totalNotes", label: "Total Notes", defaultOn: true },
{ key: "totalActiveBells", label: "Total Active Bells", defaultOn: true },
{ key: "totalActiveBells", label: "Unique Bells", defaultOn: true },
{ key: "minSpeed", label: "Min Speed", defaultOn: false },
{ key: "maxSpeed", label: "Max Speed", defaultOn: false },
{ key: "tags", label: "Tags", defaultOn: false },
@@ -42,7 +41,7 @@ const ALL_COLUMNS = [
{ key: "noteAssignments", label: "Note Assignments", defaultOn: false },
{ key: "binaryFile", label: "Binary File", defaultOn: false },
{ key: "dateCreated", label: "Date Created", defaultOn: false },
{ key: "dateEdited", label: "Date Edited", defaultOn: false },
{ key: "dateEdited", label: "Last Edited", defaultOn: false },
{ key: "createdBy", label: "Created By", defaultOn: false },
{ key: "lastEditedBy", label: "Last Edited By", defaultOn: false },
{ key: "isTrueRing", label: "True Ring", defaultOn: true },
@@ -102,6 +101,49 @@ function parseDateValue(isoValue) {
return Number.isNaN(time) ? 0 : time;
}
function formatDurationVerbose(seconds) {
const total = Number(seconds || 0);
const mins = Math.floor(total / 60);
const secs = total % 60;
return `${mins} min ${secs} sec`;
}
function formatDateTwoLine(isoValue) {
const d = new Date(isoValue);
if (Number.isNaN(d.getTime())) return { date: "-", time: "-" };
const dd = String(d.getDate()).padStart(2, "0");
const mm = String(d.getMonth() + 1).padStart(2, "0");
const yyyy = d.getFullYear();
const hh = String(d.getHours()).padStart(2, "0");
const min = String(d.getMinutes()).padStart(2, "0");
return { date: `${dd}/${mm}/${yyyy}`, time: `${hh}:${min}` };
}
function formatRelativeTime(isoValue) {
if (!isoValue) return "-";
const ts = new Date(isoValue).getTime();
if (Number.isNaN(ts)) return "-";
const now = Date.now();
const diffSec = Math.max(1, Math.floor((now - ts) / 1000));
if (diffSec < 60) return `${diffSec} sec ago`;
const diffMin = Math.floor(diffSec / 60);
if (diffMin < 60) return `${diffMin} min ago`;
const diffHours = Math.floor(diffMin / 60);
if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
const diffDays = Math.floor(diffHours / 24);
if (diffDays < 30) return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
const diffMonths = Math.floor(diffDays / 30);
if (diffMonths < 12) return `${diffMonths} month${diffMonths === 1 ? "" : "s"} ago`;
const diffYears = Math.floor(diffMonths / 12);
return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
}
function hueForDepth(index, count) {
const safeCount = Math.max(1, count);
const t = Math.max(0, Math.min(1, index / safeCount));
return 190 + (15 - 190) * t; // high notes blue-ish -> deep notes warm red
}
function getBinaryUrl(row) {
const candidate = row?.url;
if (!candidate || typeof candidate !== "string") return null;
@@ -160,6 +202,20 @@ export default function MelodyList() {
});
}, []);
useEffect(() => {
setVisibleColumns((prev) => {
const known = new Set(ALL_COLUMNS.map((c) => c.key));
let next = prev.filter((k) => known.has(k));
for (const col of ALL_COLUMNS) {
if (col.alwaysOn && !next.includes(col.key)) next.push(col.key);
}
if (JSON.stringify(next) !== JSON.stringify(prev)) {
localStorage.setItem("melodyListColumns", JSON.stringify(next));
}
return next;
});
}, []);
// Close dropdowns on outside click
useEffect(() => {
const handleClick = (e) => {
@@ -279,6 +335,19 @@ export default function MelodyList() {
});
};
const moveColumn = (key, direction) => {
setVisibleColumns((prev) => {
const idx = prev.indexOf(key);
if (idx < 0) return prev;
const swapIdx = direction === "up" ? idx - 1 : idx + 1;
if (swapIdx < 0 || swapIdx >= prev.length) return prev;
const next = [...prev];
[next[idx], next[swapIdx]] = [next[swapIdx], next[idx]];
localStorage.setItem("melodyListColumns", JSON.stringify(next));
return next;
});
};
const toggleCreator = (creator) => {
setCreatedByFilter((prev) =>
prev.includes(creator) ? prev.filter((c) => c !== creator) : [...prev, creator]
@@ -416,8 +485,6 @@ export default function MelodyList() {
}
case "tone":
return <span className="capitalize">{info.melodyTone || "-"}</span>;
case "totalNotes":
return info.totalNotes ?? "-";
case "totalActiveBells":
return info.totalActiveBells ?? "-";
case "minSpeed":
@@ -499,7 +566,7 @@ export default function MelodyList() {
return (
<div className="min-w-28">
<div className="text-xs mb-1" style={{ color: "var(--text-secondary)" }}>
{formatDuration(ds.duration)}
{formatDurationVerbose(ds.duration)}
</div>
<div
className="w-full h-2 rounded-full"
@@ -536,6 +603,11 @@ export default function MelodyList() {
return ds.noteAssignments?.length > 0 ? (
<div className="flex flex-nowrap gap-1 whitespace-nowrap">
{ds.noteAssignments.map((assignedBell, noteIdx) => (
(() => {
const noteHue = hueForDepth(noteIdx, ds.noteAssignments.length - 1);
const bellDepthIdx = Math.max(0, Math.min(15, (assignedBell || 1) - 1));
const bellHue = hueForDepth(bellDepthIdx, 15);
return (
<div
key={noteIdx}
className="flex flex-col items-center rounded-md border"
@@ -543,17 +615,20 @@ export default function MelodyList() {
minWidth: "26px",
padding: "3px 3px",
backgroundColor: "var(--bg-card-hover)",
borderColor: "var(--border-primary)",
borderColor: `hsla(${noteHue}, 65%, 55%, 0.45)`,
boxShadow: `0 0 6px hsla(${noteHue}, 75%, 55%, 0.25) inset`,
}}
>
<span className="text-xs font-bold leading-tight" style={{ color: "var(--text-secondary)" }}>
<span className="text-xs font-bold leading-tight" style={{ color: `hsl(${noteHue}, 80%, 72%)` }}>
{NOTE_LABELS[noteIdx]}
</span>
<div className="w-full my-0.5" style={{ height: "1px", backgroundColor: "var(--border-primary)" }} />
<span className="text-xs leading-tight" style={{ color: "var(--text-muted)" }}>
<span className="text-xs leading-tight" style={{ color: assignedBell > 0 ? `hsl(${bellHue}, 80%, 70%)` : "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "—"}
</span>
</div>
);
})()
))}
</div>
) : (
@@ -562,23 +637,47 @@ export default function MelodyList() {
case "binaryFile": {
const binaryUrl = getBinaryUrl(row);
const filename = getBinaryFilename(row);
if (!binaryUrl) return <span style={{ color: "var(--text-muted)" }}>-</span>;
const totalNotes = info.totalNotes ?? 0;
if (!binaryUrl) {
return (
<span className="inline-flex flex-col">
<span style={{ color: "var(--text-muted)" }}>-</span>
<span className="text-xs" style={{ color: "var(--text-muted)" }}>{totalNotes} active notes</span>
</span>
);
}
return (
<button
type="button"
onClick={(e) => downloadBinary(e, row)}
className="underline text-xs text-left"
style={{ color: "var(--accent)", background: "none", border: "none", padding: 0 }}
title={binaryUrl}
>
{filename}
</button>
<span className="inline-flex flex-col">
<button
type="button"
onClick={(e) => downloadBinary(e, row)}
className="underline text-xs text-left"
style={{ color: "var(--accent)", background: "none", border: "none", padding: 0 }}
title={binaryUrl}
>
{filename || "Click to Download"}
</button>
<span className="text-xs" style={{ color: "var(--text-muted)" }}>{totalNotes} active notes</span>
</span>
);
}
case "dateCreated":
return metadata.dateCreated ? new Date(metadata.dateCreated).toLocaleString() : "-";
if (!metadata.dateCreated) return "-";
{
const parts = formatDateTwoLine(metadata.dateCreated);
return (
<span className="inline-flex flex-col leading-tight">
<span>{parts.date}</span>
<span className="text-xs" style={{ color: "var(--text-muted)" }}>{parts.time}</span>
</span>
);
}
case "dateEdited":
return metadata.dateEdited ? new Date(metadata.dateEdited).toLocaleString() : "-";
return metadata.dateEdited ? (
<span title={new Date(metadata.dateEdited).toLocaleString()}>
{formatRelativeTime(metadata.dateEdited)}
</span>
) : "-";
case "createdBy":
return metadata.createdBy || "-";
case "lastEditedBy":
@@ -604,16 +703,19 @@ export default function MelodyList() {
}
};
// Build visible column list (description is rendered inside name, not as its own column)
const activeColumns = ALL_COLUMNS.filter((c) => c.key !== "description" && isVisible(c.key));
// Build visible column list in user-defined order (description is rendered inside name)
const activeColumns = visibleColumns
.filter((key) => key !== "description")
.map((key) => ALL_COLUMNS.find((c) => c.key === key))
.filter(Boolean);
const languages = melodySettings?.available_languages || ["en"];
const selectClass = "px-3 py-2 rounded-md text-sm cursor-pointer border";
return (
<div>
<div className="flex items-center justify-between mb-6">
<div className="w-full min-w-0">
<div className="flex items-center justify-between mb-6 w-full">
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Melodies</h1>
{canEdit && (
<button
@@ -626,7 +728,7 @@ export default function MelodyList() {
)}
</div>
<div className="mb-4 space-y-3">
<div className="mb-4 space-y-3 w-full">
<SearchBar
onSearch={setSearch}
placeholder="Search by name, description, or tags..."
@@ -754,7 +856,10 @@ export default function MelodyList() {
borderColor: "var(--border-primary)",
}}
>
{ALL_COLUMNS.map((col) => (
{ALL_COLUMNS.map((col) => {
const orderIdx = visibleColumns.indexOf(col.key);
const canMove = orderIdx >= 0;
return (
<label
key={col.key}
className="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer"
@@ -767,9 +872,32 @@ export default function MelodyList() {
disabled={col.alwaysOn}
className="h-3.5 w-3.5 rounded cursor-pointer"
/>
{col.label}
<span className="flex-1">{col.label}</span>
{canMove && (
<span className="inline-flex gap-1" onClick={(e) => e.stopPropagation()}>
<button
type="button"
onClick={() => moveColumn(col.key, "up")}
className="text-[10px] px-1 rounded border"
style={{ borderColor: "var(--border-primary)", color: "var(--text-muted)", background: "transparent" }}
title="Move left"
>
←
</button>
<button
type="button"
onClick={() => moveColumn(col.key, "down")}
className="text-[10px] px-1 rounded border"
style={{ borderColor: "var(--border-primary)", color: "var(--text-muted)", background: "transparent" }}
title="Move right"
>
→
</button>
</span>
)}
</label>
))}
);
})}
</div>
)}
</div>
@@ -808,14 +936,14 @@ export default function MelodyList() {
</div>
) : (
<div
className="rounded-lg overflow-hidden border"
className="rounded-lg overflow-hidden border max-w-full"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
}}
>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<div className="overflow-x-auto max-w-full">
<table className="w-full text-sm min-w-max">
<thead>
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
{activeColumns.map((col) => (
@@ -942,3 +1070,4 @@ export default function MelodyList() {
);
}