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

update: Major Overhaul to all subsystems

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-03-07 11:32:18 +02:00
parent 810e81b323
commit c62188fda6
107 changed files with 20414 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,9 +58,7 @@ function normalizeFileUrl(url) {
function Field({ label, children }) {
return (
<div>
<dt className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
{label}
</dt>
<dt className="ui-field-label">{label}</dt>
<dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>{children || "-"}</dd>
</div>
);
@@ -70,9 +68,7 @@ function UrlField({ label, value }) {
const [copied, setCopied] = useState(false);
return (
<div>
<dt className="text-xs font-medium uppercase tracking-wide mb-1" style={{ color: "var(--text-muted)" }}>
{label}
</dt>
<dt className="ui-field-label mb-1">{label}</dt>
<dd className="flex items-center gap-2">
<span
className="text-sm font-mono flex-1 min-w-0"
@@ -354,12 +350,11 @@ export default function MelodyDetail() {
<div className="space-y-6">
{/* Melody Information */}
<section
className="rounded-lg p-6 border"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card"
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Melody Information
</h2>
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__title">Melody Information</h2>
</div>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
<Field label="Color">
{info.color ? (
@@ -422,12 +417,11 @@ export default function MelodyDetail() {
{/* Identifiers */}
<section
className="rounded-lg p-6 border"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card"
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Identifiers
</h2>
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__title">Identifiers</h2>
</div>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
<Field label="Document ID">{melody.id}</Field>
<Field label="PID (Playback ID)">{melody.pid}</Field>
@@ -444,12 +438,11 @@ export default function MelodyDetail() {
<div className="space-y-6">
{/* Default Settings */}
<section
className="rounded-lg p-6 border"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card"
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Default Settings
</h2>
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__title">Default Settings</h2>
</div>
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
<Field label="Speed">
{settings.speed != null ? (
@@ -474,7 +467,7 @@ export default function MelodyDetail() {
</Field>
</div>
<div className="col-span-2 md:col-span-3">
<dt className="text-xs font-medium uppercase tracking-wide mb-2" style={{ color: "var(--text-muted)" }}>Note Assignments</dt>
<dt className="ui-field-label mb-2">Note Assignments</dt>
<dd>
{settings.noteAssignments?.length > 0 ? (
<div className="flex flex-wrap gap-1.5">
@@ -512,10 +505,11 @@ export default function MelodyDetail() {
{/* Files */}
<section
className="rounded-lg p-6 border"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card"
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Files</h2>
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__title">Files</h2>
</div>
<dl className="space-y-4">
<Field label="Available as Built-In">
<label className="inline-flex items-center gap-2">
@@ -681,12 +675,11 @@ export default function MelodyDetail() {
{/* Firmware Code section — only shown if a built melody with PROGMEM code is assigned */}
{builtMelody?.progmem_code && (
<section
className="rounded-lg p-6 border mt-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card mt-6"
>
<div className="flex items-center justify-between mb-3">
<div className="ui-section-card__title-row">
<div>
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>Firmware Code</h2>
<h2 className="ui-section-card__title">Firmware Code</h2>
<p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>
PROGMEM code for built-in firmware playback &nbsp;·&nbsp; PID: <span className="font-mono">{builtMelody.pid}</span>
</p>
@@ -723,10 +716,11 @@ export default function MelodyDetail() {
{/* Metadata section */}
{melody.metadata && (
<section
className="rounded-lg p-6 border mt-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card mt-6"
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>History</h2>
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__title">History</h2>
</div>
<dl className="grid grid-cols-2 md:grid-cols-4 gap-4">
{melody.metadata.dateCreated && (
<Field label="Date Created">
@@ -750,10 +744,11 @@ export default function MelodyDetail() {
{/* Admin Notes section */}
<section
className="rounded-lg p-6 border mt-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="ui-section-card mt-6"
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Admin Notes</h2>
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__title">Admin Notes</h2>
</div>
{(melody.metadata?.adminNotes?.length || 0) > 0 ? (
<div className="space-y-2">
{melody.metadata.adminNotes.map((note, i) => (