feat: complete UI overhaul (liquid glass theme, i18n, FontAwesome)

src/components/InputPanel.tsx

@@ -1,18 +1,19 @@
 import { useState, type FormEvent, type KeyboardEvent } from "react";
 import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  ChevronRight,
-  Loader2,
-  Settings as SettingsIcon,
-  Sparkles,
-  Shuffle,
-  Flame,
-  Wand2,
-} from "lucide-react";
+  faCircleNotch,
+  faWandMagicSparkles,
+  faShuffle,
+  faFire,
+  faMicrophone,
+  faMusic,
+} from "@fortawesome/free-solid-svg-icons";
 import type { InputValues, Language, Vocals } from "../lib/types";
 import { formatElapsed, useElapsed } from "../lib/useElapsed";
 import { randomStyle } from "../lib/llm";
 import { useToast } from "../lib/toast";
+import { useI18n } from "../lib/i18n";
 
 export type { InputValues };
 
@@ -67,12 +68,10 @@ export function InputPanel({
   disabled,
   cancelButton,
 }: InputPanelProps) {
-  const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(
-    null,
-  );
-  const [optionsOpen, setOptionsOpen] = useState(false);
+  const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(null);
   const elapsed = useElapsed(loading);
   const toast = useToast();
+  const { t } = useI18n();
 
   const set = <K extends keyof InputValues>(key: K, value: InputValues[K]) =>
     onChange({ ...values, [key]: value });
@@ -84,7 +83,7 @@ export function InputPanel({
     if (canSubmit) onSubmit();
   };
 
-  const onCmdEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+  const onCmdEnter = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
       submit();
@@ -121,273 +120,174 @@ export function InputPanel({
   };
 
   return (
-    <form onSubmit={submit} className="space-y-6">
-      {/* 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>
+    <form onSubmit={submit} className="card p-4 space-y-4 backdrop-blur-md bg-bg-card/80">
+      {/* Top Row: Idea and Generate Button */}
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex-1">
+          <div className="flex items-center justify-between mb-1">
+            <label
+              htmlFor="idea"
+              className="text-xs font-semibold uppercase tracking-wider text-fg-muted"
+            >
+              {t.musicIdea}
+            </label>
+            <button
+              type="button"
+              onClick={fillExample}
+              className="inline-flex items-center gap-1.5 text-xs text-fg-muted hover:text-accent-primary transition-colors"
+              title="Fill the input with a random example"
+            >
+              <FontAwesomeIcon icon={faShuffle} className="w-3 h-3" />
+              {t.tryExample}
+            </button>
+          </div>
+          <input
+            id="idea"
+            type="text"
+            value={values.idea}
+            onChange={(e) => set("idea", e.target.value)}
+            onKeyDown={onCmdEnter}
+            placeholder={t.placeholderIdea}
+            className="input text-[15px]"
+            required
+          />
+        </div>
+
+        <div className="flex items-end gap-2 shrink-0">
           <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"
+            type="submit"
+            disabled={!canSubmit}
+            className="h-[42px] px-6 rounded-lg text-sm font-bold text-white shadow-md shadow-accent-primary/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"
           >
-            <Shuffle className="w-3 h-3" />
-            Try an example
+            {loading ? (
+              <>
+                <FontAwesomeIcon icon={faCircleNotch} spin className="w-4 h-4" />
+                {t.generating} {formatElapsed(elapsed)}
+              </>
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faWandMagicSparkles} className="w-4 h-4" />
+                {t.generateAssets}
+              </>
+            )}
           </button>
+          {loading && cancelButton}
         </div>
-        <textarea
-          id="idea"
-          value={values.idea}
-          onChange={(e) => set("idea", e.target.value)}
-          onKeyDown={onCmdEnter}
-          rows={5}
-          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 gap-2 px-4 py-3 text-sm font-medium text-fg-muted hover:text-fg transition-colors"
-          aria-expanded={optionsOpen}
-        >
-          <span className="flex items-center gap-2">
-            <ChevronRight
-              className={`w-3.5 h-3.5 transition-transform ${optionsOpen ? "rotate-90" : ""}`}
+      {/* Bottom Row: Options (Always Visible) */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 pt-4 border-t border-border">
+        {/* Language */}
+        <div>
+          <label htmlFor="language" className="block text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
+            {t.language}
+          </label>
+          <select
+            id="language"
+            value={values.language}
+            onChange={(e) => set("language", e.target.value as Language)}
+            className="input h-[38px] py-0"
+          >
+            {LANGUAGES.map((l) => (
+              <option key={l.value} value={l.value}>
+                {l.label}
+              </option>
+            ))}
+          </select>
+          {values.language === "Other" && (
+            <input
+              type="text"
+              className="input mt-2 h-[38px]"
+              placeholder="e.g. 日本語"
+              value={values.customLanguage}
+              onChange={(e) => set("customLanguage", e.target.value)}
             />
-            Options
-          </span>
-          <span className="text-[11px] text-fg-muted">
-            {summaryCount(values) > 0
-              ? summaryCount(values) + " set"
-              : "defaults"}
-          </span>
-        </button>
+          )}
+        </div>
 
-        {optionsOpen && (
-          <div className="px-4 pb-4 pt-1 space-y-4 border-t border-border">
-            <div>
-              <label
-                htmlFor="language"
-                className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
+        {/* Style */}
+        <div className="md:col-span-2">
+          <label htmlFor="style_hint" className="flex items-center justify-between text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
+            <span>{t.musicStyle} <span className="normal-case opacity-70 font-normal">{t.optional}</span></span>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => handleStyleRandom("normal")}
+                disabled={styleLoading !== null}
+                className="text-[10px] text-accent-secondary hover:text-accent-primary transition-colors disabled:opacity-50"
               >
-                Language
-              </label>
-              <select
-                id="language"
-                value={values.language}
-                onChange={(e) => set("language", e.target.value as Language)}
-                className="input"
+                {styleLoading === "normal" ? <FontAwesomeIcon icon={faCircleNotch} spin /> : <FontAwesomeIcon icon={faWandMagicSparkles} />} {t.surpriseMe}
+              </button>
+              <button
+                type="button"
+                onClick={() => handleStyleRandom("crazy")}
+                disabled={styleLoading !== null}
+                className="text-[10px] text-rose-400 hover:text-rose-300 transition-colors disabled:opacity-50"
               >
-                {LANGUAGES.map((l) => (
-                  <option key={l.value} value={l.value}>
-                    {l.label}
-                  </option>
-                ))}
-              </select>
-              {values.language === "Other" && (
-                <input
-                  type="text"
-                  className="input mt-2"
-                  placeholder="e.g. 日本語, Türkçe, Русский"
-                  value={values.customLanguage}
-                  onChange={(e) => set("customLanguage", e.target.value)}
-                />
-              )}
+                {styleLoading === "crazy" ? <FontAwesomeIcon icon={faCircleNotch} spin /> : <FontAwesomeIcon icon={faFire} />} {t.goCrazy}
+              </button>
             </div>
+          </label>
+          <input
+            id="style_hint"
+            type="text"
+            placeholder={t.placeholderStyle}
+            value={values.style_hint}
+            onChange={(e) => set("style_hint", e.target.value)}
+            onKeyDown={onCmdEnter}
+            className="input h-[38px]"
+          />
+        </div>
 
-            <StyleField
-              value={values.style_hint}
-              loading={styleLoading}
-              onChange={(v) => set("style_hint", v)}
-              onRandom={handleStyleRandom}
-              onCmdEnter={onCmdEnter}
+        {/* Mood & Vocals */}
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <label htmlFor="mood" className="block text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
+              {t.mood} <span className="normal-case opacity-70 font-normal">{t.optional}</span>
+            </label>
+            <input
+              id="mood"
+              type="text"
+              placeholder={t.placeholderMood}
+              value={values.mood}
+              onChange={(e) => set("mood", e.target.value)}
+              className="input h-[38px]"
             />
+          </div>
 
-            <div>
-              <label
-                htmlFor="mood"
-                className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
+          <div className="shrink-0">
+            <label className="block text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
+              {t.vocals}
+            </label>
+            <div className="inline-flex rounded-lg border border-border bg-bg h-[38px] p-0.5">
+              <button
+                type="button"
+                onClick={() => set("vocals", "vocals")}
+                className={`px-3 flex items-center gap-1.5 rounded-md text-xs font-bold transition-colors ${
+                  values.vocals === "vocals" ? "bg-accent-primary text-white" : "text-fg-muted hover:text-fg"
+                }`}
+                title={t.vocalsOption}
               >
-                Mood{" "}
-                <span className="text-fg-muted/70 normal-case font-normal">
-                  (optional)
-                </span>
-              </label>
-              <input
-                id="mood"
-                type="text"
-                placeholder="e.g. melancholic, euphoric, tense…"
-                value={values.mood}
-                onChange={(e) => set("mood", e.target.value)}
-                className="input"
-              />
-            </div>
-
-            <div>
-              <span className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5">
-                Vocals
-              </span>
-              <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-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"}
-                >
-                  🎤 Vocals
-                </button>
-                <button
-                  type="button"
-                  onClick={() => set("vocals", "instrumental")}
-                  className={
-                    values.vocals === "instrumental"
-                      ? "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"}
-                >
-                  🎹 Instrumental
-                </button>
-              </div>
+                <FontAwesomeIcon icon={faMicrophone} />
+              </button>
+              <button
+                type="button"
+                onClick={() => set("vocals", "instrumental")}
+                className={`px-3 flex items-center gap-1.5 rounded-md text-xs font-bold transition-colors ${
+                  values.vocals === "instrumental" ? "bg-accent-primary text-white" : "text-fg-muted hover:text-fg"
+                }`}
+                title={t.instrumentalOption}
+              >
+                <FontAwesomeIcon icon={faMusic} />
+              </button>
             </div>
           </div>
-        )}
-      </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="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>
       </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({
-  value,
-  loading,
-  onChange,
-  onRandom,
-  onCmdEnter,
-}: StyleFieldProps) {
-  return (
-    <div>
-      <label
-        htmlFor="style_hint"
-        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 font-normal">
-          (optional)
-        </span>
-      </label>
-      <textarea
-        id="style_hint"
-        rows={2}
-        placeholder="e.g. dark synthwave, analog pads, 110 BPM"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={onCmdEnter}
-        className="textarea text-sm"
-      />
-      <div className="mt-2 grid grid-cols-2 gap-2">
-        <button
-          type="button"
-          onClick={() => onRandom("normal")}
-          disabled={loading !== null}
-          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 h-3 animate-spin" />
-          ) : (
-            <Wand2 className="w-3 h-3" />
-          )}
-          Surprise me
-        </button>
-        <button
-          type="button"
-          onClick={() => onRandom("crazy")}
-          disabled={loading !== null}
-          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 h-3 animate-spin" />
-          ) : (
-            <Flame className="w-3 h-3" />
-          )}
-          Go crazy
-        </button>
-      </div>
-    </div>
-  );
-}
-
 function isMac(): boolean {
   if (typeof navigator === "undefined") return false;
   const p = navigator.platform || "";