Modernize the UI and fix the equalizer sizing bug
Bug fix
- EqualizerIcon: the SVG was rendering at the wrong size (filling
its parent) because it had no explicit width/height attributes.
Now it accepts a size prop with a 24px default and the SVG element
carries the size as width/height attributes, with the className
on top. Can't accidentally balloon.
Design
- Stripped the light-mode CSS — the app is dark-only now, and the
theme toggle was a no-op (clicking it just toggled a class that
had no matching rules). ThemeToggle.tsx and lib/theme.ts are
gone; initTheme() call removed from main.tsx.
- Reworked the input form:
• brand row is now small + refined (icon + wordmark, no huge
gradient title)
• Options is a single subtle collapsible card with a chevron and
a count badge showing how many options are non-default
• Vocals is now a segmented pill (single rounded container, two
flat segments) instead of two full-width grid buttons
• Generate button is slightly smaller (py-3.5, text-sm) and
uses a softer shadow (shadow-violet-900/20)
- Empty state in the results panel: dashed-border card, soft
gradient blur behind the music icon, cleaner copy.
- Results header: smaller heading, the 'Regenerate All' and
'Cancel' buttons are now tiny ghost-style pills in the top-right.
- Sticky ZIP bar: softer shadow, more refined copy.
- Result cards: smaller icon, single-line title, the Regenerate
button is now an inline pill that fits next to Revert + Copy.
- Home page header now has a tiny equalizer icon + 'MelodyMuse'
wordmark on the left (was just text). Settings page header has
the back arrow on the left and the title, no theme toggle.
- Global CSS: added modern focus-visible ring, custom selection
color, subtle scrollbar thumb, slightly tweaked the gradient
text to a softer violet-300 → cyan-300 instead of the loud
violet-400 → fuchsia-400 → cyan-400.
This commit is contained in:
+85
-13
@@ -1,34 +1,106 @@
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# MelodyMuse — server environment
|
||||
#
|
||||
# The Node server (`server.mjs`) reads these from `process.env`. Pass them in
|
||||
# however you run the server:
|
||||
# The Node server (`server.mjs`) reads these from `process.env`. It refuses to
|
||||
# start without `LLM_ENDPOINT` and `LLM_API_KEY`. Pass them in however you run
|
||||
# the server:
|
||||
#
|
||||
# • Bare-metal: LLM_ENDPOINT=… LLM_API_KEY=… node server.mjs
|
||||
# • Docker: -e LLM_ENDPOINT=… -e LLM_API_KEY=…
|
||||
# • docker-compose: put them in a `.env` file next to compose.yml
|
||||
# • Jannik-Cloud: AGE-encrypted `.env` generated by `generate-env.sh`
|
||||
#
|
||||
# `LLM_ENDPOINT` and `LLM_API_KEY` are required — the server refuses to start
|
||||
# without them. The rest have sensible defaults.
|
||||
# Three things you set:
|
||||
#
|
||||
# LLM_ENDPOINT — base URL of an OpenAI-compatible /chat/completions route
|
||||
# LLM_API_KEY — provider secret (never sent to the browser)
|
||||
# LLM_MODEL — model name to send in each request
|
||||
#
|
||||
# Below the active config you'll find worked examples for several providers —
|
||||
# copy one of them into the active block above to switch.
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
# OpenAI-compatible base URL, e.g. https://api.minimax.chat/v1
|
||||
LLM_ENDPOINT=https://api.minimax.chat/v1
|
||||
# ─── Active provider (uncomment ONE of the examples below to switch) ──────────
|
||||
|
||||
# Your provider's secret key
|
||||
LLM_ENDPOINT=https://api.minimax.io/v1
|
||||
LLM_API_KEY=
|
||||
|
||||
# Model name (default: MiniMax-M3)
|
||||
LLM_MODEL=MiniMax-M3
|
||||
|
||||
# Listen port (default: 3000)
|
||||
PORT=3000
|
||||
# ─── Server config ────────────────────────────────────────────────────────────
|
||||
|
||||
# CORS origin. "*" allows any origin (fine for a single-user personal app).
|
||||
# Set to a specific origin like "https://melodymuse.orfel.de" to lock it down.
|
||||
PORT=3000
|
||||
CORS_ORIGIN=*
|
||||
|
||||
|
||||
# ╔═══════════════════════════════════════════════════════════════════════════╗
|
||||
# ║ PROVIDER EXAMPLES — copy one block up to switch providers ║
|
||||
# ╚═══════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
# ─── MiniMax (the default) ───────────────────────────────────────────────────
|
||||
# https://api.minimax.io/v1
|
||||
# Sign in at https://MiniMax.io to get a key.
|
||||
#
|
||||
# LLM_ENDPOINT=https://api.minimax.io/v1
|
||||
# LLM_API_KEY=eyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# LLM_MODEL=MiniMax-M3
|
||||
|
||||
|
||||
# ─── OpenAI ──────────────────────────────────────────────────────────────────
|
||||
# https://platform.openai.com/
|
||||
# Keys look like: sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# Common models: gpt-4o, gpt-4o-mini, gpt-4-turbo, o1-mini, o1, …
|
||||
#
|
||||
# LLM_ENDPOINT=https://api.openai.com/v1
|
||||
# LLM_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# LLM_MODEL=gpt-4o-mini
|
||||
|
||||
|
||||
# ─── OpenRouter (Claude, Llama, Mistral, Gemini, …) ────────────────────────
|
||||
# https://openrouter.ai/
|
||||
# One OpenAI-compatible endpoint that fronts hundreds of models. Easiest way
|
||||
# to use Anthropic Claude, Meta Llama, Google Gemini, etc. without writing a
|
||||
# custom adapter.
|
||||
#
|
||||
# Keys look like: sk-or-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# Model names are namespaced: anthropic/claude-3.5-sonnet, openai/gpt-4o,
|
||||
# meta-llama/llama-3.1-405b-instruct, google/gemini-2.0-flash-exp, …
|
||||
#
|
||||
# LLM_ENDPOINT=https://openrouter.ai/api/v1
|
||||
# LLM_API_KEY=sk-or-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# LLM_MODEL=anthropic/claude-3.5-sonnet
|
||||
|
||||
|
||||
# ─── Poe ─────────────────────────────────────────────────────────────────────
|
||||
# https://poe.com/
|
||||
# Poe exposes an OpenAI-compatible API for the bots you've created in their
|
||||
# UI. Create a bot there first (free), then use its exact name as the model.
|
||||
#
|
||||
# LLM_ENDPOINT=https://api.poe.com/v1
|
||||
# LLM_API_KEY=sk-poe-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# LLM_MODEL=Claude-3.5-Sonnet
|
||||
|
||||
|
||||
# ─── Anthropic Claude (DIRECT — needs a server adapter) ─────────────────────
|
||||
# https://console.anthropic.com/
|
||||
# Anthropic's native API is NOT OpenAI-compatible — it lives at
|
||||
# POST /v1/messages with a different body shape (system message is a
|
||||
# top-level field, not a message) and a different response shape.
|
||||
#
|
||||
# MelodyMuse's server does not currently talk to Anthropic's native API
|
||||
# directly. Two options:
|
||||
#
|
||||
# 1. Use OpenRouter above — same model, OpenAI-compatible, zero code
|
||||
# changes.
|
||||
# 2. Add a small adapter to server.mjs that translates the request
|
||||
# to Anthropic's Messages API format. Roughly 30 lines of code.
|
||||
#
|
||||
# If you do add the adapter, the endpoint would be:
|
||||
#
|
||||
# LLM_ENDPOINT=https://api.anthropic.com
|
||||
# LLM_API_KEY=sk-ant-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
# LLM_MODEL=claude-3-5-sonnet-latest
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Vite dev environment (only used by `npm run dev`, not by the server)
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -1,35 +1,92 @@
|
||||
// Animated equalizer/waveform icon for the MelodyMuse header.
|
||||
export function EqualizerIcon({ className = 'w-7 h-7' }: { className?: string }) {
|
||||
// Equalizer/waveform mark for the MelodyMuse header. The SVG has explicit
|
||||
// width/height attributes (in addition to the Tailwind class) so it can't
|
||||
// accidentally balloon to fill its parent if the CSS fails to load.
|
||||
|
||||
interface EqualizerIconProps {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export function EqualizerIcon({ className, size = 24 }: EqualizerIconProps) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="eq-grad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient
|
||||
id="eq-grad"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="32"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" stopColor="#a78bfa" />
|
||||
<stop offset="1" stopColor="#22d3ee" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g stroke="url(#eq-grad)" strokeWidth="2.4" strokeLinecap="round">
|
||||
<line x1="5" y1="13" x2="5" y2="19">
|
||||
<animate attributeName="y1" values="13;8;13" dur="1.2s" repeatCount="indefinite" />
|
||||
<animate attributeName="y2" values="19;24;19" dur="1.2s" repeatCount="indefinite" />
|
||||
<animate
|
||||
attributeName="y1"
|
||||
values="13;8;13"
|
||||
dur="1.2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="y2"
|
||||
values="19;24;19"
|
||||
dur="1.2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</line>
|
||||
<line x1="11" y1="9" x2="11" y2="23">
|
||||
<animate attributeName="y1" values="9;14;9" dur="1.4s" repeatCount="indefinite" />
|
||||
<animate attributeName="y2" values="23;18;23" dur="1.4s" repeatCount="indefinite" />
|
||||
<animate
|
||||
attributeName="y1"
|
||||
values="9;14;9"
|
||||
dur="1.4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="y2"
|
||||
values="23;18;23"
|
||||
dur="1.4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</line>
|
||||
<line x1="17" y1="11" x2="17" y2="21">
|
||||
<animate attributeName="y1" values="11;6;11" dur="1.0s" repeatCount="indefinite" />
|
||||
<animate attributeName="y2" values="21;26;21" dur="1.0s" repeatCount="indefinite" />
|
||||
<animate
|
||||
attributeName="y1"
|
||||
values="11;6;11"
|
||||
dur="1.0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="y2"
|
||||
values="21;26;21"
|
||||
dur="1.0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</line>
|
||||
<line x1="23" y1="8" x2="23" y2="24">
|
||||
<animate attributeName="y1" values="8;13;8" dur="1.6s" repeatCount="indefinite" />
|
||||
<animate attributeName="y2" values="24;19;24" dur="1.6s" repeatCount="indefinite" />
|
||||
<animate
|
||||
attributeName="y1"
|
||||
values="8;13;8"
|
||||
dur="1.6s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="y2"
|
||||
values="24;19;24"
|
||||
dur="1.6s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</line>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
+129
-116
@@ -1,8 +1,7 @@
|
||||
import { useState, type FormEvent, type KeyboardEvent } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
Settings as SettingsIcon,
|
||||
Sparkles,
|
||||
@@ -29,8 +28,6 @@ const LANGUAGES: { value: Language; label: string }[] = [
|
||||
{ value: "Other", label: "Other" },
|
||||
];
|
||||
|
||||
// A handful of starter ideas shown as quick-fill chips. Kept short and varied
|
||||
// so the user can see the kind of input the model expects.
|
||||
const EXAMPLE_IDEAS: { text: string; mood: string; vocals: Vocals }[] = [
|
||||
{
|
||||
text: "melancholic lo-fi house beat for a rainy sunday morning",
|
||||
@@ -71,10 +68,10 @@ export function InputPanel({
|
||||
disabled,
|
||||
cancelButton,
|
||||
}: InputPanelProps) {
|
||||
const [optionsOpen, setOptionsOpen] = useState(false);
|
||||
const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(
|
||||
null,
|
||||
);
|
||||
const [optionsOpen, setOptionsOpen] = useState(false);
|
||||
const elapsed = useElapsed(loading);
|
||||
const toast = useToast();
|
||||
|
||||
@@ -88,8 +85,7 @@ export function InputPanel({
|
||||
if (canSubmit) onSubmit();
|
||||
};
|
||||
|
||||
// Submit on Cmd/Ctrl+Enter, even from inside the textarea.
|
||||
const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
const onCmdEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
@@ -107,7 +103,7 @@ export function InputPanel({
|
||||
};
|
||||
|
||||
const handleStyleRandom = async (mode: "normal" | "crazy") => {
|
||||
if (styleLoading) return; // already running, don't fire two in parallel
|
||||
if (styleLoading) return;
|
||||
const ctrl = new AbortController();
|
||||
setStyleLoading(mode);
|
||||
try {
|
||||
@@ -126,77 +122,81 @@ export function InputPanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Animated gradient backdrop behind the header */}
|
||||
<div className="absolute -top-10 -left-10 -right-10 h-64 animated-gradient-bg rounded-3xl -z-10 opacity-70 pointer-events-none" />
|
||||
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<EqualizerIcon className="w-8 h-8 shrink-0" />
|
||||
<h1 className="text-3xl font-bold gradient-text leading-none">
|
||||
MelodyMuse
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-sm text-fg-muted mb-6 ml-11">
|
||||
Generate your Suno song assets with AI
|
||||
</p>
|
||||
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<form onSubmit={submit} className="space-y-6">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-2.5">
|
||||
<EqualizerIcon size={22} className="shrink-0" />
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<label htmlFor="idea" className="sr-only">
|
||||
Describe your music idea
|
||||
</label>
|
||||
<span className="text-[11px] uppercase tracking-wider text-fg-muted">
|
||||
Music idea
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fillExample}
|
||||
className="inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-fg transition-colors"
|
||||
title="Fill the input with a random example"
|
||||
>
|
||||
<Shuffle className="w-3 h-3" />
|
||||
Try an example
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
id="idea"
|
||||
value={values.idea}
|
||||
onChange={(e) => set("idea", e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
rows={4}
|
||||
placeholder={`Describe your music idea...\ne.g. 'melancholic house beat for a rainy night'`}
|
||||
className="textarea text-base leading-relaxed"
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-[11px] text-fg-muted">
|
||||
<kbd className="px-1 py-0.5 rounded bg-bg-hover border border-border font-mono">
|
||||
{isMac() ? "⌘" : "Ctrl"}+Enter
|
||||
</kbd>{" "}
|
||||
to generate
|
||||
</p>
|
||||
<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">
|
||||
<label
|
||||
htmlFor="idea"
|
||||
className="text-[11px] font-medium uppercase tracking-wider text-fg-muted"
|
||||
>
|
||||
Music idea
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fillExample}
|
||||
className="inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-fg transition-colors"
|
||||
title="Fill the input with a random example"
|
||||
>
|
||||
<Shuffle className="w-3 h-3" />
|
||||
Try an example
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
id="idea"
|
||||
value={values.idea}
|
||||
onChange={(e) => set("idea", e.target.value)}
|
||||
onKeyDown={onCmdEnter}
|
||||
rows={4}
|
||||
placeholder="Describe your music idea…"
|
||||
className="textarea text-[15px] leading-relaxed"
|
||||
required
|
||||
/>
|
||||
<p className="mt-1.5 text-[11px] text-fg-muted">
|
||||
<kbd className="px-1 py-0.5 rounded bg-bg-hover border border-border font-mono">
|
||||
{isMac() ? "⌘" : "Ctrl"}+Enter
|
||||
</kbd>{" "}
|
||||
to generate
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Options — collapsible, subtle */}
|
||||
<div className="rounded-xl border border-border bg-bg-card/30">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptionsOpen((v) => !v)}
|
||||
className="w-full flex items-center justify-between px-3 py-2 rounded-lg border border-border bg-bg-card hover:bg-bg-hover transition-colors text-sm"
|
||||
className="w-full flex items-center justify-between gap-2 px-4 py-3 text-sm font-medium text-fg-muted hover:text-fg transition-colors"
|
||||
aria-expanded={optionsOpen}
|
||||
>
|
||||
<span className="font-medium text-fg">⚙ Options</span>
|
||||
{optionsOpen ? (
|
||||
<ChevronUp className="w-4 h-4 text-fg-muted" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-fg-muted" />
|
||||
)}
|
||||
<span className="flex items-center gap-2">
|
||||
<ChevronRight
|
||||
className={`w-3.5 h-3.5 transition-transform ${optionsOpen ? "rotate-90" : ""}`}
|
||||
/>
|
||||
Options
|
||||
</span>
|
||||
<span className="text-[11px] text-fg-muted">
|
||||
{summaryCount(values) > 0
|
||||
? summaryCount(values) + " set"
|
||||
: "defaults"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{optionsOpen && (
|
||||
<div className="space-y-4 p-4 rounded-lg border border-border bg-bg-card/50">
|
||||
<div className="px-4 pb-4 pt-1 space-y-4 border-t border-border">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="language"
|
||||
className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
|
||||
className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
|
||||
>
|
||||
Language
|
||||
</label>
|
||||
@@ -228,16 +228,18 @@ export function InputPanel({
|
||||
loading={styleLoading}
|
||||
onChange={(v) => set("style_hint", v)}
|
||||
onRandom={handleStyleRandom}
|
||||
onCmdEnter={onKeyDown}
|
||||
onCmdEnter={onCmdEnter}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="mood"
|
||||
className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
|
||||
className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
|
||||
>
|
||||
Mood{" "}
|
||||
<span className="text-fg-muted/70 normal-case">(optional)</span>
|
||||
<span className="text-fg-muted/70 normal-case font-normal">
|
||||
(optional)
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
id="mood"
|
||||
@@ -250,17 +252,17 @@ export function InputPanel({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="block text-xs uppercase tracking-wider text-fg-muted mb-1">
|
||||
<span className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5">
|
||||
Vocals
|
||||
</span>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="inline-flex rounded-lg border border-border bg-bg-card p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set("vocals", "vocals")}
|
||||
className={
|
||||
values.vocals === "vocals"
|
||||
? "px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors"
|
||||
: "chip justify-center py-2"
|
||||
? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
|
||||
: "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg transition-colors"
|
||||
}
|
||||
aria-pressed={values.vocals === "vocals"}
|
||||
>
|
||||
@@ -271,8 +273,8 @@ export function InputPanel({
|
||||
onClick={() => set("vocals", "instrumental")}
|
||||
className={
|
||||
values.vocals === "instrumental"
|
||||
? "px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors"
|
||||
: "chip justify-center py-2"
|
||||
? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
|
||||
: "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg transition-colors"
|
||||
}
|
||||
aria-pressed={values.vocals === "instrumental"}
|
||||
>
|
||||
@@ -282,47 +284,58 @@ export function InputPanel({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="w-full py-4 rounded-xl text-base font-semibold text-white shadow-lg shadow-violet-900/30 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Generating… {formatElapsed(elapsed)}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-5 h-5" />
|
||||
Generate Song Assets
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{loading && cancelButton}
|
||||
</div>
|
||||
{/* Generate */}
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="w-full py-3.5 rounded-xl text-sm font-semibold text-white shadow-lg shadow-violet-900/20 transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Generating… {formatElapsed(elapsed)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Generate song assets
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{loading && cancelButton}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to="/settings"
|
||||
className="inline-flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors"
|
||||
>
|
||||
<SettingsIcon className="w-3.5 h-3.5" />
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<Link
|
||||
to="/settings"
|
||||
className="inline-flex items-center gap-1.5 text-fg-muted hover:text-fg transition-colors"
|
||||
>
|
||||
<SettingsIcon className="w-3.5 h-3.5" />
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function summaryCount(v: InputValues): number {
|
||||
let n = 0;
|
||||
if (v.style_hint.trim()) n++;
|
||||
if (v.mood.trim()) n++;
|
||||
if (v.vocals === "instrumental") n++;
|
||||
if (v.language !== "English") n++;
|
||||
return n;
|
||||
}
|
||||
|
||||
interface StyleFieldProps {
|
||||
value: string;
|
||||
loading: null | "normal" | "crazy";
|
||||
onChange: (v: string) => void;
|
||||
onRandom: (mode: "normal" | "crazy") => void;
|
||||
onCmdEnter: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
|
||||
}
|
||||
|
||||
function StyleField({
|
||||
@@ -331,17 +344,17 @@ function StyleField({
|
||||
onChange,
|
||||
onRandom,
|
||||
onCmdEnter,
|
||||
}: StyleFieldProps & {
|
||||
onCmdEnter: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
|
||||
}) {
|
||||
}: StyleFieldProps) {
|
||||
return (
|
||||
<div>
|
||||
<label
|
||||
htmlFor="style_hint"
|
||||
className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
|
||||
className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
|
||||
>
|
||||
Music style{" "}
|
||||
<span className="text-fg-muted/70 normal-case">(optional)</span>
|
||||
<span className="text-fg-muted/70 normal-case font-normal">
|
||||
(optional)
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="style_hint"
|
||||
@@ -357,13 +370,13 @@ function StyleField({
|
||||
type="button"
|
||||
onClick={() => onRandom("normal")}
|
||||
disabled={loading !== null}
|
||||
className="btn-secondary text-xs py-2"
|
||||
className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md border border-border bg-bg-card hover:bg-bg-hover transition-colors text-xs font-medium text-fg disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Generate a coherent Suno-friendly style description"
|
||||
>
|
||||
{loading === "normal" ? (
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : (
|
||||
<Wand2 className="w-3.5 h-3.5" />
|
||||
<Wand2 className="w-3 h-3" />
|
||||
)}
|
||||
Surprise me
|
||||
</button>
|
||||
@@ -371,13 +384,13 @@ function StyleField({
|
||||
type="button"
|
||||
onClick={() => onRandom("crazy")}
|
||||
disabled={loading !== null}
|
||||
className="btn-secondary text-xs py-2"
|
||||
className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md border border-border bg-bg-card hover:bg-bg-hover transition-colors text-xs font-medium text-fg disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Generate an unusual genre mashup that still works in Suno"
|
||||
>
|
||||
{loading === "crazy" ? (
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : (
|
||||
<Flame className="w-3.5 h-3.5" />
|
||||
<Flame className="w-3 h-3" />
|
||||
)}
|
||||
Go crazy
|
||||
</button>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import type { ReactNode } from "react";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
interface ResultCardProps {
|
||||
index: number; // 0..4 — controls the stagger delay
|
||||
index: number;
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
onRegenerate?: () => void;
|
||||
@@ -23,30 +23,38 @@ export function ResultCard({
|
||||
return (
|
||||
<section
|
||||
className={`card p-5 opacity-0 animate-fade-up stagger-${index}`}
|
||||
style={{ animationFillMode: 'forwards' }}
|
||||
style={{ animationFillMode: "forwards" }}
|
||||
>
|
||||
<header className="flex items-start justify-between gap-3 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg leading-none">{icon}</span>
|
||||
<h2 className="text-base font-semibold text-fg">{title}</h2>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<span className="text-base leading-none shrink-0">{icon}</span>
|
||||
<h2 className="text-sm font-semibold text-fg truncate">{title}</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{headerExtra}
|
||||
{onRegenerate && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRegenerate}
|
||||
disabled={regenerating}
|
||||
className="btn-ghost"
|
||||
className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
aria-label={`Regenerate ${title}`}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${regenerating ? 'animate-spin' : ''}`} />
|
||||
<span>Regenerate</span>
|
||||
<RefreshCw
|
||||
className={`w-3 h-3 ${regenerating ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Regenerate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<div className={regenerating ? 'opacity-60 pointer-events-none transition-opacity' : ''}>
|
||||
<div
|
||||
className={
|
||||
regenerating
|
||||
? "opacity-50 pointer-events-none transition-opacity"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -18,15 +18,15 @@ export type RegeneratingMap = Partial<Record<SectionKey | "all", boolean>>;
|
||||
|
||||
interface ResultsPanelProps {
|
||||
assets: SongAssets | null;
|
||||
originalAssets: SongAssets | null; // last *generated* values, for Revert
|
||||
loading: boolean; // initial "Generate all" skeleton
|
||||
originalAssets: SongAssets | null;
|
||||
loading: boolean;
|
||||
selectedTitleIndex: number;
|
||||
onSelectTitle: (i: number) => void;
|
||||
onChange: <K extends keyof SongAssets>(key: K, value: SongAssets[K]) => void;
|
||||
onChangeVideoPrompt: (index: number, value: string) => void;
|
||||
onRegenerateAll: () => void;
|
||||
onRegenerateSection: (section: SectionKey) => void;
|
||||
onCancel?: () => void; // cancel the in-flight generation
|
||||
onCancel?: () => void;
|
||||
anyRegenerating: boolean;
|
||||
regenerating: RegeneratingMap;
|
||||
}
|
||||
@@ -49,17 +49,17 @@ export function ResultsPanel({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="sticky top-0 z-30 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-3 bg-bg/80 backdrop-blur border-b border-border mb-6 flex items-center justify-between gap-3">
|
||||
<h2 className="text-lg font-semibold text-fg">Results</h2>
|
||||
<div className="sticky top-14 z-30 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-3 bg-bg/80 backdrop-blur border-b border-border mb-6 flex items-center justify-between gap-3">
|
||||
<h2 className="text-sm font-semibold text-fg">Results</h2>
|
||||
<div className="flex items-center gap-1">
|
||||
{anyRegenerating && onCancel && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="btn-ghost"
|
||||
className="px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors"
|
||||
aria-label="Cancel generation"
|
||||
>
|
||||
<span className="text-rose-300">Cancel</span>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{assets && (
|
||||
@@ -67,12 +67,12 @@ export function ResultsPanel({
|
||||
type="button"
|
||||
onClick={onRegenerateAll}
|
||||
disabled={anyRegenerating}
|
||||
className="btn-ghost"
|
||||
className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${regenerating.all ? "animate-spin" : ""}`}
|
||||
className={`w-3.5 h-3.5 ${regenerating.all ? "animate-spin" : ""}`}
|
||||
/>
|
||||
<span>Regenerate All</span>
|
||||
Regenerate all
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -136,25 +136,28 @@ export function ResultsPanel({
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="card p-10 text-center">
|
||||
<div className="mx-auto w-14 h-14 rounded-full gradient-bg-soft flex items-center justify-center mb-4">
|
||||
<Music className="w-7 h-7 text-violet-300" />
|
||||
<div className="flex flex-col items-center justify-center text-center px-6 py-20 rounded-2xl border border-dashed border-border">
|
||||
<div className="relative w-16 h-16 mb-5">
|
||||
<div className="absolute inset-0 rounded-full bg-gradient-to-br from-violet-500/20 to-cyan-500/20 blur-xl" />
|
||||
<div className="relative w-full h-full rounded-full bg-bg-card border border-border flex items-center justify-center">
|
||||
<Music className="w-7 h-7 text-violet-300" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-fg mb-1">
|
||||
<h3 className="text-base font-semibold text-fg mb-1.5">
|
||||
Your song will appear here
|
||||
</h3>
|
||||
<p className="text-sm text-fg-muted max-w-sm mx-auto">
|
||||
<p className="text-sm text-fg-muted max-w-sm leading-relaxed">
|
||||
Describe a music idea on the left and press{" "}
|
||||
<kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono">
|
||||
<kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono text-fg">
|
||||
Generate
|
||||
</kbd>{" "}
|
||||
to create titles, lyrics, style, video prompts, and a YouTube
|
||||
description — all in one go.
|
||||
to get titles, lyrics, style, video prompts, and a YouTube description
|
||||
in one go.
|
||||
</p>
|
||||
<div className="mt-5 flex items-center justify-center gap-2 text-xs text-fg-muted">
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
Tip: open <span className="text-fg">Settings</span> to add your API key
|
||||
first.
|
||||
<div className="mt-5 flex items-center gap-1.5 text-xs text-fg-muted">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
First time? Open <span className="text-fg">Settings</span> to add your
|
||||
API key.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { FolderArchive, Download } from 'lucide-react';
|
||||
import { sanitizeFilename } from '../lib/zip';
|
||||
import { FolderArchive, Download } from "lucide-react";
|
||||
import { sanitizeFilename } from "../lib/zip";
|
||||
|
||||
interface StickyZipBarProps {
|
||||
title: string | undefined;
|
||||
@@ -8,27 +8,30 @@ interface StickyZipBarProps {
|
||||
}
|
||||
|
||||
export function StickyZipBar({ title, busy, onDownload }: StickyZipBarProps) {
|
||||
const filename = title && title.trim().length > 0
|
||||
? `${sanitizeFilename(title)}.zip`
|
||||
: null;
|
||||
const filename =
|
||||
title && title.trim().length > 0 ? `${sanitizeFilename(title)}.zip` : null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-40 border-t border-border bg-bg/90 backdrop-blur supports-[backdrop-filter]:bg-bg/70">
|
||||
<div className="fixed bottom-0 left-0 right-0 z-40 border-t border-border bg-bg/80 backdrop-blur supports-[backdrop-filter]:bg-bg/60">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-fg min-w-0">
|
||||
<FolderArchive className="w-4 h-4 text-fg-muted shrink-0" />
|
||||
<span className="truncate font-mono">
|
||||
{filename ?? <span className="text-fg-muted">Select a title to name your download</span>}
|
||||
<span className="truncate font-mono text-[13px]">
|
||||
{filename ?? (
|
||||
<span className="text-fg-muted">
|
||||
Select a title to name your download
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDownload}
|
||||
disabled={!filename || busy}
|
||||
className="btn-primary py-2.5 px-5"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white shadow-md shadow-violet-900/20 gradient-bg hover:brightness-110 active:brightness-95 transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
{filename ? 'Download ZIP' : 'Select a title first'}
|
||||
{filename ? "Download ZIP" : "Select a title first"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getStoredTheme, toggleTheme, type Theme } from '../lib/theme';
|
||||
|
||||
export function ThemeToggle() {
|
||||
const [theme, setTheme] = useState<Theme>('dark');
|
||||
|
||||
useEffect(() => {
|
||||
setTheme(getStoredTheme());
|
||||
}, []);
|
||||
|
||||
const onClick = () => {
|
||||
const next = toggleTheme();
|
||||
setTheme(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="btn-ghost p-2"
|
||||
aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
|
||||
title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
+103
-112
@@ -3,147 +3,138 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html:not(.dark) {
|
||||
color-scheme: light;
|
||||
}
|
||||
body {
|
||||
@apply bg-bg text-fg antialiased font-sans;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: "cv11", "ss01", "ss03";
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
/* Subtle, modern focus ring — keyboard only */
|
||||
:focus-visible {
|
||||
outline: 2px solid theme("colors.accent.primary");
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-bg text-fg antialiased font-sans;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html:not(.dark) body {
|
||||
@apply bg-bgLight text-fg-dark;
|
||||
}
|
||||
/* Custom selection color */
|
||||
::selection {
|
||||
background: rgba(124, 58, 237, 0.3);
|
||||
color: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.card {
|
||||
@apply bg-bg-card border border-border rounded-2xl;
|
||||
}
|
||||
.card {
|
||||
@apply bg-bg-card border border-border rounded-2xl;
|
||||
}
|
||||
|
||||
html:not(.dark) .card {
|
||||
@apply bg-bgLight-card border-borderLight;
|
||||
}
|
||||
.card-hover {
|
||||
@apply hover:bg-bg-hover transition-colors duration-150;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:bg-bg-hover transition-colors duration-150;
|
||||
}
|
||||
|
||||
html:not(.dark) .card-hover:hover {
|
||||
@apply bg-slate-50;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
|
||||
bg-accent-primary hover:bg-violet-500 active:bg-violet-700
|
||||
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
|
||||
bg-bg-hover border border-border text-fg hover:bg-bg
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
|
||||
bg-bg-card border border-border text-fg hover:bg-bg-hover
|
||||
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .btn-secondary {
|
||||
@apply bg-white border-borderLight text-fg-dark hover:bg-slate-50;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
|
||||
text-fg-muted hover:text-fg hover:bg-bg-hover
|
||||
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .btn-ghost {
|
||||
@apply text-slate-500 hover:text-fg-dark hover:bg-slate-100;
|
||||
}
|
||||
.input {
|
||||
@apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-[14px] text-fg
|
||||
placeholder-fg-muted/70
|
||||
focus:outline-none focus:border-accent-primary/60
|
||||
focus:ring-1 focus:ring-accent-primary/20
|
||||
transition-colors duration-150;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-fg
|
||||
placeholder-fg-muted focus:outline-none focus:border-accent-primary
|
||||
focus:ring-1 focus:ring-accent-primary/40 transition-colors duration-150;
|
||||
}
|
||||
.textarea {
|
||||
@apply input resize-y;
|
||||
}
|
||||
|
||||
html:not(.dark) .input {
|
||||
@apply bg-white border-borderLight text-fg-dark placeholder:text-slate-400;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
@apply input resize-y;
|
||||
}
|
||||
|
||||
.chip {
|
||||
@apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
|
||||
.chip {
|
||||
@apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
|
||||
bg-bg-card text-sm font-medium text-fg hover:bg-bg-hover
|
||||
transition-colors duration-150;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .chip {
|
||||
@apply bg-white border-borderLight text-fg-dark hover:bg-slate-50;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #c4b5fd 0%, #67e8f9 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-violet-400 via-fuchsia-400 to-cyan-400 bg-clip-text text-transparent;
|
||||
}
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
|
||||
}
|
||||
.gradient-bg-soft {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(124, 58, 237, 0.18) 0%,
|
||||
rgba(6, 182, 212, 0.12) 50%,
|
||||
rgba(8, 8, 16, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.gradient-bg-soft {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(6, 182, 212, 0.12) 50%, rgba(8, 8, 16, 0) 100%);
|
||||
}
|
||||
|
||||
.animated-gradient-bg {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(6, 182, 212, 0.20) 35%, rgba(8, 8, 16, 0) 70%, rgba(124, 58, 237, 0.15) 100%);
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
.stagger-0 { animation-delay: 0ms; }
|
||||
.stagger-1 { animation-delay: 80ms; }
|
||||
.stagger-2 { animation-delay: 160ms; }
|
||||
.stagger-3 { animation-delay: 240ms; }
|
||||
.stagger-4 { animation-delay: 320ms; }
|
||||
/* Stagger delays for the result cards' fade-up animation. */
|
||||
.stagger-0 {
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
.stagger-1 {
|
||||
animation-delay: 80ms;
|
||||
}
|
||||
.stagger-2 {
|
||||
animation-delay: 160ms;
|
||||
}
|
||||
.stagger-3 {
|
||||
animation-delay: 240ms;
|
||||
}
|
||||
.stagger-4 {
|
||||
animation-delay: 320ms;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
||||
}
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
|
||||
}
|
||||
|
||||
html:not(.dark) .scrollbar-thin {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
html:not(.dark) .scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
// Theme management (dark / light) — single source of truth backed by localStorage.
|
||||
const STORAGE_KEY = 'melodymuse-theme';
|
||||
|
||||
export type Theme = 'dark' | 'light';
|
||||
|
||||
export function getStoredTheme(): Theme {
|
||||
if (typeof window === 'undefined') return 'dark';
|
||||
const stored = window.localStorage.getItem(STORAGE_KEY);
|
||||
if (stored === 'dark' || stored === 'light') return stored;
|
||||
return 'dark';
|
||||
}
|
||||
|
||||
export function applyTheme(theme: Theme) {
|
||||
const root = document.documentElement;
|
||||
if (theme === 'dark') {
|
||||
root.classList.add('dark');
|
||||
} else {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
}
|
||||
|
||||
export function setStoredTheme(theme: Theme) {
|
||||
window.localStorage.setItem(STORAGE_KEY, theme);
|
||||
applyTheme(theme);
|
||||
}
|
||||
|
||||
export function toggleTheme(): Theme {
|
||||
const next: Theme = getStoredTheme() === 'dark' ? 'light' : 'dark';
|
||||
setStoredTheme(next);
|
||||
return next;
|
||||
}
|
||||
|
||||
// Used in main.tsx before React mounts.
|
||||
export function initTheme() {
|
||||
applyTheme(getStoredTheme());
|
||||
}
|
||||
+6
-10
@@ -1,14 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
import { initTheme } from './lib/theme';
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
// Apply theme as early as possible to avoid a flash.
|
||||
initTheme();
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
|
||||
@@ -7,9 +7,9 @@ import {
|
||||
type SectionKey,
|
||||
} from "../components/ResultsPanel";
|
||||
import { StickyZipBar } from "../components/StickyZipBar";
|
||||
import { ThemeToggle } from "../components/ThemeToggle";
|
||||
import { HistoryPanel } from "../components/HistoryPanel";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { EqualizerIcon } from "../components/EqualizerIcon";
|
||||
import { useToast } from "../lib/toast";
|
||||
import { generateSong, getServerStatus } from "../lib/llm";
|
||||
import { addToHistory, type HistoryEntry } from "../lib/history";
|
||||
@@ -302,9 +302,14 @@ export function HomePage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-32">
|
||||
<header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
|
||||
<header className="sticky top-0 z-20 bg-bg/80 backdrop-blur border-b border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
||||
<span className="text-sm text-fg-muted">MelodyMuse</span>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<EqualizerIcon size={18} className="shrink-0" />
|
||||
<span className="text-sm font-medium text-fg-muted">
|
||||
MelodyMuse
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{serverOk === false && (
|
||||
<span
|
||||
@@ -314,7 +319,6 @@ export function HomePage() {
|
||||
Server offline
|
||||
</span>
|
||||
)}
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
Trash2,
|
||||
Server,
|
||||
} from "lucide-react";
|
||||
import { ThemeToggle } from "../components/ThemeToggle";
|
||||
import { useToast } from "../lib/toast";
|
||||
import { getServerStatus, type ServerStatus } from "../lib/llm";
|
||||
|
||||
@@ -115,17 +114,16 @@ export function SettingsPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
|
||||
<div className="max-w-md mx-auto px-4 h-14 flex items-center justify-between">
|
||||
<div className="max-w-md mx-auto px-4 h-14 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/")}
|
||||
className="btn-ghost p-2"
|
||||
className="p-2 -ml-2 rounded-md text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors"
|
||||
aria-label="Back"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<h1 className="text-sm font-semibold text-fg">Settings</h1>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user