Fixes to Add Melody Page, minor UI Tweaks
This commit is contained in:
@@ -13,10 +13,10 @@ import {
|
||||
function Field({ label, children }) {
|
||||
return (
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
<dt className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
|
||||
{label}
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">{children || "-"}</dd>
|
||||
<dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>{children || "-"}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -73,12 +73,19 @@ export default function MelodyDetail() {
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8 text-gray-500">Loading...</div>;
|
||||
return <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
|
||||
<div
|
||||
className="text-sm rounded-md p-3 border"
|
||||
style={{
|
||||
backgroundColor: "var(--danger-bg)",
|
||||
borderColor: "var(--danger)",
|
||||
color: "var(--danger-text)",
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
@@ -91,23 +98,29 @@ export default function MelodyDetail() {
|
||||
const languages = melodySettings?.available_languages || ["en"];
|
||||
const displayName = getLocalizedValue(info.name, displayLang, "Untitled Melody");
|
||||
|
||||
const badgeStyle = (active) => ({
|
||||
backgroundColor: active ? "var(--success-bg)" : "var(--bg-card-hover)",
|
||||
color: active ? "var(--success-text)" : "var(--text-muted)",
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<button
|
||||
onClick={() => navigate("/melodies")}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 mb-2 inline-block"
|
||||
className="text-sm mb-2 inline-block"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
← Back to Melodies
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-gray-900">{displayName}</h1>
|
||||
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>{displayName}</h1>
|
||||
{languages.length > 1 && (
|
||||
<select
|
||||
value={displayLang}
|
||||
onChange={(e) => setDisplayLang(e.target.value)}
|
||||
className="text-xs px-2 py-1 border border-gray-200 rounded text-gray-500"
|
||||
className="text-xs px-2 py-1 rounded border"
|
||||
>
|
||||
{languages.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
@@ -122,13 +135,15 @@ export default function MelodyDetail() {
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => navigate(`/melodies/${id}/edit`)}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
|
||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDelete(true)}
|
||||
className="px-4 py-2 bg-red-600 text-white text-sm rounded-md hover:bg-red-700 transition-colors"
|
||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@@ -140,8 +155,11 @@ export default function MelodyDetail() {
|
||||
{/* Left column */}
|
||||
<div className="space-y-6">
|
||||
{/* Melody Information */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg p-6 border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
|
||||
Melody Information
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -159,8 +177,8 @@ export default function MelodyDetail() {
|
||||
{info.color ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span
|
||||
className="w-4 h-4 rounded border border-gray-300 inline-block"
|
||||
style={{ backgroundColor: normalizeColor(info.color) }}
|
||||
className="w-4 h-4 rounded inline-block border"
|
||||
style={{ backgroundColor: normalizeColor(info.color), borderColor: "var(--border-primary)" }}
|
||||
/>
|
||||
{info.color}
|
||||
</span>
|
||||
@@ -169,13 +187,7 @@ export default function MelodyDetail() {
|
||||
)}
|
||||
</Field>
|
||||
<Field label="True Ring">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
info.isTrueRing
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={badgeStyle(info.isTrueRing)}>
|
||||
{info.isTrueRing ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
@@ -191,7 +203,8 @@ export default function MelodyDetail() {
|
||||
{info.customTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
|
||||
className="px-2 py-0.5 text-xs rounded-full"
|
||||
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -206,14 +219,17 @@ export default function MelodyDetail() {
|
||||
</section>
|
||||
|
||||
{/* Identifiers */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg p-6 border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
|
||||
Identifiers
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Document ID">{melody.id}</Field>
|
||||
<Field label="UID">{melody.uid}</Field>
|
||||
<Field label="PID (Playback ID)">{melody.pid}</Field>
|
||||
<Field label="UID">{melody.uid}</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="URL">{melody.url}</Field>
|
||||
</div>
|
||||
@@ -224,8 +240,11 @@ export default function MelodyDetail() {
|
||||
{/* Right column */}
|
||||
<div className="space-y-6">
|
||||
{/* Default Settings */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg p-6 border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
|
||||
Default Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -234,13 +253,7 @@ export default function MelodyDetail() {
|
||||
<Field label="Total Run Duration">{settings.totalRunDuration}</Field>
|
||||
<Field label="Pause Duration">{settings.pauseDuration}</Field>
|
||||
<Field label="Infinite Loop">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
settings.infiniteLoop
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<span className="px-2 py-0.5 text-xs rounded-full" style={badgeStyle(settings.infiniteLoop)}>
|
||||
{settings.infiniteLoop ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
@@ -262,8 +275,11 @@ export default function MelodyDetail() {
|
||||
</section>
|
||||
|
||||
{/* Files */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Files</h2>
|
||||
<section
|
||||
className="rounded-lg p-6 border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Files</h2>
|
||||
<dl className="space-y-4">
|
||||
<Field label="Binary File">
|
||||
{files.binary_url ? (
|
||||
@@ -271,12 +287,13 @@ export default function MelodyDetail() {
|
||||
href={files.binary_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline"
|
||||
className="underline"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
Download binary
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
<span style={{ color: "var(--text-muted)" }}>Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Audio Preview">
|
||||
@@ -287,13 +304,14 @@ export default function MelodyDetail() {
|
||||
href={files.preview_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline text-xs"
|
||||
className="underline text-xs"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
Download preview
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
<span style={{ color: "var(--text-muted)" }}>Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
</dl>
|
||||
|
||||
Reference in New Issue
Block a user