Remove duplicate MelodyMuse brand row in InputPanel

The home page header already shows a small equalizer + 'MelodyMuse'
wordmark. Having a second brand row inside the InputPanel was
redundant and pushed the textarea down. Removed it; the form now
starts directly with the 'Music idea' label. Bumped the textarea
rows from 4 to 5 to fill the freed space.

Also added: the server-status check on the home page now re-runs
every 30s, so the 'Server offline' hint in the header stays current
without a manual refresh.
This commit is contained in:
2026-06-03 17:37:11 +02:00
parent 040a063860
commit 9980d5ba20
2 changed files with 15 additions and 20 deletions
+1 -12
View File
@@ -9,7 +9,6 @@ import {
Flame,
Wand2,
} from "lucide-react";
import { EqualizerIcon } from "./EqualizerIcon";
import type { InputValues, Language, Vocals } from "../lib/types";
import { formatElapsed, useElapsed } from "../lib/useElapsed";
import { randomStyle } from "../lib/llm";
@@ -123,16 +122,6 @@ export function InputPanel({
return (
<form onSubmit={submit} className="space-y-6">
{/* Brand */}
<div className="flex items-center gap-2.5">
<EqualizerIcon size={22} className="shrink-0" />
<div>
<h1 className="text-lg font-semibold tracking-tight gradient-text leading-none">
MelodyMuse
</h1>
</div>
</div>
{/* Main textarea */}
<div>
<div className="flex items-center justify-between mb-2">
@@ -157,7 +146,7 @@ export function InputPanel({
value={values.idea}
onChange={(e) => set("idea", e.target.value)}
onKeyDown={onCmdEnter}
rows={4}
rows={5}
placeholder="Describe your music idea…"
className="textarea text-[15px] leading-relaxed"
required
+14 -8
View File
@@ -96,18 +96,24 @@ export function HomePage() {
return () => window.clearTimeout(id);
}, [input]);
// Check the server on mount. If unreachable, surface a quiet header hint.
// Check the server on mount and re-check periodically so the header
// "Server offline" hint stays current without a manual refresh.
useEffect(() => {
const ctrl = new AbortController();
(async () => {
let cancelled = false;
const check = async () => {
try {
const s = await getServerStatus(ctrl.signal);
setServerOk(Boolean(s.ok));
const s = await getServerStatus();
if (!cancelled) setServerOk(Boolean(s.ok));
} catch {
setServerOk(false);
if (!cancelled) setServerOk(false);
}
})();
return () => ctrl.abort();
};
check();
const id = window.setInterval(check, 30_000);
return () => {
cancelled = true;
window.clearInterval(id);
};
}, []);
// Clean up any in-flight request on unmount.