Fixes to Add Melody Page, minor UI Tweaks
This commit is contained in:
@@ -150,16 +150,16 @@ export default function MelodyList() {
|
||||
title={info.color}
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-block w-3 h-8 rounded-sm bg-gray-200" />
|
||||
<span className="inline-block w-3 h-8 rounded-sm" style={{ backgroundColor: "var(--border-primary)" }} />
|
||||
);
|
||||
case "name":
|
||||
return (
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">
|
||||
<span className="font-medium" style={{ color: "var(--text-heading)" }}>
|
||||
{getDisplayName(info.name)}
|
||||
</span>
|
||||
{isVisible("description") && (
|
||||
<p className="text-xs text-gray-500 mt-0.5 truncate max-w-xs">
|
||||
<p className="text-xs mt-0.5 truncate max-w-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{getLocalizedValue(info.description, displayLang) || "-"}
|
||||
</p>
|
||||
)}
|
||||
@@ -181,7 +181,8 @@ export default function MelodyList() {
|
||||
{info.customTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-1.5 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
|
||||
className="px-1.5 py-0.5 text-xs rounded-full"
|
||||
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -201,11 +202,11 @@ export default function MelodyList() {
|
||||
case "infiniteLoop":
|
||||
return (
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
ds.infiniteLoop
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
className="px-2 py-0.5 text-xs rounded-full"
|
||||
style={{
|
||||
backgroundColor: ds.infiniteLoop ? "var(--success-bg)" : "var(--bg-card-hover)",
|
||||
color: ds.infiniteLoop ? "var(--success-text)" : "var(--text-muted)",
|
||||
}}
|
||||
>
|
||||
{ds.infiniteLoop ? "Yes" : "No"}
|
||||
</span>
|
||||
@@ -217,18 +218,18 @@ export default function MelodyList() {
|
||||
case "isTrueRing":
|
||||
return (
|
||||
<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"
|
||||
}`}
|
||||
className="px-2 py-0.5 text-xs rounded-full"
|
||||
style={{
|
||||
backgroundColor: info.isTrueRing ? "var(--success-bg)" : "var(--bg-card-hover)",
|
||||
color: info.isTrueRing ? "var(--success-text)" : "var(--text-muted)",
|
||||
}}
|
||||
>
|
||||
{info.isTrueRing ? "Yes" : "No"}
|
||||
</span>
|
||||
);
|
||||
case "docId":
|
||||
return (
|
||||
<span className="font-mono text-xs text-gray-500">{row.id}</span>
|
||||
<span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{row.id}</span>
|
||||
);
|
||||
case "pid":
|
||||
return row.pid || "-";
|
||||
@@ -244,14 +245,18 @@ export default function MelodyList() {
|
||||
|
||||
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">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Melodies</h1>
|
||||
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Melodies</h1>
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={() => navigate("/melodies/new")}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors cursor-pointer"
|
||||
className="px-4 py-2 text-sm rounded-md transition-colors cursor-pointer"
|
||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
||||
>
|
||||
Add Melody
|
||||
</button>
|
||||
@@ -267,7 +272,7 @@ export default function MelodyList() {
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
|
||||
className={selectClass}
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
{MELODY_TYPES.filter(Boolean).map((t) => (
|
||||
@@ -279,7 +284,7 @@ export default function MelodyList() {
|
||||
<select
|
||||
value={toneFilter}
|
||||
onChange={(e) => setToneFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
|
||||
className={selectClass}
|
||||
>
|
||||
<option value="">All Tones</option>
|
||||
{MELODY_TONES.filter(Boolean).map((t) => (
|
||||
@@ -292,7 +297,7 @@ export default function MelodyList() {
|
||||
<select
|
||||
value={displayLang}
|
||||
onChange={(e) => setDisplayLang(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
|
||||
className={selectClass}
|
||||
>
|
||||
{languages.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
@@ -307,7 +312,11 @@ export default function MelodyList() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowColumnPicker((prev) => !prev)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-600 hover:bg-gray-50 transition-colors cursor-pointer flex items-center gap-1.5"
|
||||
className="px-3 py-2 rounded-md text-sm transition-colors cursor-pointer flex items-center gap-1.5 border"
|
||||
style={{
|
||||
borderColor: "var(--border-primary)",
|
||||
color: "var(--text-secondary)",
|
||||
}}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
|
||||
@@ -315,20 +324,27 @@ export default function MelodyList() {
|
||||
Columns
|
||||
</button>
|
||||
{showColumnPicker && (
|
||||
<div className="absolute right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg py-2 w-52">
|
||||
<div
|
||||
className="absolute right-0 top-full mt-1 z-20 rounded-lg shadow-lg py-2 w-52 border"
|
||||
style={{
|
||||
backgroundColor: "var(--bg-card)",
|
||||
borderColor: "var(--border-primary)",
|
||||
}}
|
||||
>
|
||||
{ALL_COLUMNS.map((col) => (
|
||||
<label
|
||||
key={col.key}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-50 cursor-pointer ${
|
||||
col.alwaysOn ? "text-gray-400" : "text-gray-700"
|
||||
}`}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer"
|
||||
style={{
|
||||
color: col.alwaysOn ? "var(--text-muted)" : "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isVisible(col.key)}
|
||||
onChange={() => toggleColumn(col.key)}
|
||||
disabled={col.alwaysOn}
|
||||
className="h-3.5 w-3.5 rounded border-gray-300 text-blue-600 cursor-pointer"
|
||||
className="h-3.5 w-3.5 rounded cursor-pointer"
|
||||
/>
|
||||
{col.label}
|
||||
</label>
|
||||
@@ -337,42 +353,63 @@ export default function MelodyList() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="flex items-center text-sm text-gray-500">
|
||||
<span className="flex items-center text-sm" style={{ color: "var(--text-muted)" }}>
|
||||
{total} {total === 1 ? "melody" : "melodies"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
|
||||
<div
|
||||
className="text-sm rounded-md p-3 mb-4 border"
|
||||
style={{
|
||||
backgroundColor: "var(--danger-bg)",
|
||||
borderColor: "var(--danger)",
|
||||
color: "var(--danger-text)",
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8 text-gray-500">Loading...</div>
|
||||
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
|
||||
) : melodies.length === 0 ? (
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-8 text-center text-gray-500 text-sm">
|
||||
<div
|
||||
className="rounded-lg p-8 text-center text-sm border"
|
||||
style={{
|
||||
backgroundColor: "var(--bg-card)",
|
||||
borderColor: "var(--border-primary)",
|
||||
color: "var(--text-muted)",
|
||||
}}
|
||||
>
|
||||
No melodies found.
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
||||
<div
|
||||
className="rounded-lg overflow-hidden border"
|
||||
style={{
|
||||
backgroundColor: "var(--bg-card)",
|
||||
borderColor: "var(--border-primary)",
|
||||
}}
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
|
||||
{activeColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`px-4 py-3 text-left font-medium text-gray-600 ${
|
||||
className={`px-4 py-3 text-left font-medium ${
|
||||
col.key === "color" ? "w-8 px-2" : ""
|
||||
}`}
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
>
|
||||
{col.key === "color" ? "" : col.label}
|
||||
</th>
|
||||
))}
|
||||
{canEdit && (
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-600 w-24" />
|
||||
<th className="px-4 py-3 text-left font-medium w-24" style={{ color: "var(--text-muted)" }} />
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -381,14 +418,18 @@ export default function MelodyList() {
|
||||
<tr
|
||||
key={row.id}
|
||||
onClick={() => navigate(`/melodies/${row.id}`)}
|
||||
className="border-b border-gray-100 last:border-0 cursor-pointer hover:bg-gray-50"
|
||||
className="cursor-pointer transition-colors"
|
||||
style={{ borderBottom: "1px solid var(--border-secondary)" }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-card-hover)")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
|
||||
>
|
||||
{activeColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`px-4 py-3 text-gray-700 ${
|
||||
className={`px-4 py-3 ${
|
||||
col.key === "color" ? "w-8 px-2" : ""
|
||||
}`}
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{renderCellValue(col.key, row)}
|
||||
</td>
|
||||
@@ -401,13 +442,15 @@ export default function MelodyList() {
|
||||
>
|
||||
<button
|
||||
onClick={() => navigate(`/melodies/${row.id}/edit`)}
|
||||
className="text-blue-600 hover:text-blue-800 text-xs cursor-pointer"
|
||||
className="text-xs cursor-pointer"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteTarget(row)}
|
||||
className="text-red-600 hover:text-red-800 text-xs cursor-pointer"
|
||||
className="text-xs cursor-pointer"
|
||||
style={{ color: "var(--danger)" }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user