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,
|
Flame,
|
||||||
Wand2,
|
Wand2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { EqualizerIcon } from "./EqualizerIcon";
|
|
||||||
import type { InputValues, Language, Vocals } from "../lib/types";
|
import type { InputValues, Language, Vocals } from "../lib/types";
|
||||||
import { formatElapsed, useElapsed } from "../lib/useElapsed";
|
import { formatElapsed, useElapsed } from "../lib/useElapsed";
|
||||||
import { randomStyle } from "../lib/llm";
|
import { randomStyle } from "../lib/llm";
|
||||||
@@ -123,16 +122,6 @@ export function InputPanel({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={submit} className="space-y-6">
|
<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 */}
|
{/* Main textarea */}
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="flex items-center justify-between mb-2">
|
||||||
@@ -157,7 +146,7 @@ export function InputPanel({
|
|||||||
value={values.idea}
|
value={values.idea}
|
||||||
onChange={(e) => set("idea", e.target.value)}
|
onChange={(e) => set("idea", e.target.value)}
|
||||||
onKeyDown={onCmdEnter}
|
onKeyDown={onCmdEnter}
|
||||||
rows={4}
|
rows={5}
|
||||||
placeholder="Describe your music idea…"
|
placeholder="Describe your music idea…"
|
||||||
className="textarea text-[15px] leading-relaxed"
|
className="textarea text-[15px] leading-relaxed"
|
||||||
required
|
required
|
||||||
|
|||||||
+14
-8
@@ -96,18 +96,24 @@ export function HomePage() {
|
|||||||
return () => window.clearTimeout(id);
|
return () => window.clearTimeout(id);
|
||||||
}, [input]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
const ctrl = new AbortController();
|
let cancelled = false;
|
||||||
(async () => {
|
const check = async () => {
|
||||||
try {
|
try {
|
||||||
const s = await getServerStatus(ctrl.signal);
|
const s = await getServerStatus();
|
||||||
setServerOk(Boolean(s.ok));
|
if (!cancelled) setServerOk(Boolean(s.ok));
|
||||||
} catch {
|
} 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.
|
// Clean up any in-flight request on unmount.
|
||||||
|
|||||||
Reference in New Issue
Block a user