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:
@@ -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
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user