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

2026-06-03 22:00:37 +02:00
parent e5a9936066
commit d34d34565f
23 changed files with 732 additions and 580 deletions
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Check, Copy } from 'lucide-react';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";

 interface CopyButtonProps {
  value: string;
@@ -41,12 +42,12 @@ export function CopyButton({ value, label = 'Copy', className = '' }: CopyButton
    >
      {copied ? (
        <>
-          <Check className="w-4 h-4 text-emerald-400" />
+          <FontAwesomeIcon icon={faCheck} className="w-4 h-4 text-emerald-400" />
          <span>Copied!</span>
        </>
      ) : (
        <>
-          <Copy className="w-4 h-4" />
+          <FontAwesomeIcon icon={faCopy} className="w-4 h-4" />
          <span>{label}</span>
        </>
      )}
@@ -1,14 +1,13 @@
+import { useI18n } from "../lib/i18n";
+
 export function Footer() {
+  const { t } = useI18n();
  return (
-    <footer className="mt-16 border-t border-border">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-fg-muted">
+    <footer className="mt-8 border-t border-border pt-4">
+      <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] font-semibold text-fg-muted uppercase tracking-wide">
        <p>
-          <span className="gradient-text font-semibold">MelodyMuse</span> ·
-          Generate Suno song assets with AI
-        </p>
-        <p>
-          Generation runs on the MelodyMuse server — your API key never reaches
-          the browser.
+          <span className="gradient-text">MelodyMuse</span> ·
+          {t.appSubtitle}
        </p>
      </div>
    </footer>
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { Clock, History, Trash2, X } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClock, faHistory, faTrashAlt, faTimes } from "@fortawesome/free-solid-svg-icons";
 import {
  clearHistory,
  formatRelative,
@@ -9,88 +10,72 @@ import {
  type HistoryEntry,
 } from "../lib/history";
 import type { InputValues } from "../lib/types";
+import { useI18n } from "../lib/i18n";

 interface HistoryPanelProps {
  onLoad: (entry: HistoryEntry) => void;
 }

 export function HistoryPanel({ onLoad }: HistoryPanelProps) {
-  const [open, setOpen] = useState(false);
  const [entries, setEntries] = useState<HistoryEntry[]>([]);
+  const { t } = useI18n();

-  // Refresh the list whenever the panel is opened.
  useEffect(() => {
-    if (!open) return;
    setEntries(loadHistory());
-  }, [open]);
+  }, []);

-  // And whenever the history is updated from elsewhere in the app (after a
-  // successful generation, or a delete/clear from a different panel).
  useEffect(() => {
    const handler = () => {
-      if (!open) return;
      setEntries(loadHistory());
    };
    window.addEventListener(HISTORY_UPDATED_EVENT, handler);
    return () => window.removeEventListener(HISTORY_UPDATED_EVENT, handler);
-  }, [open]);
-
-  if (entries.length === 0 && !open) {
-    return null;
-  }
+  }, []);

  return (
-    <div className="mt-4">
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className="w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-border bg-bg-card/50 hover:bg-bg-hover transition-colors text-sm"
-        aria-expanded={open}
-      >
-        <span className="flex items-center gap-2 text-fg">
-          <History className="w-4 h-4" />
-          Recent generations
+    <div className="flex flex-col h-full bg-bg-card/40 backdrop-blur-md border border-border rounded-xl shadow-lg overflow-hidden">
+      <div className="px-4 py-3 border-b border-border bg-bg/20">
+        <span className="flex items-center gap-2 text-sm font-bold text-fg">
+          <FontAwesomeIcon icon={faHistory} className="text-accent-secondary" />
+          {t.history}
          {entries.length > 0 && (
-            <span className="text-xs text-fg-muted">({entries.length})</span>
+            <span className="text-[10px] bg-accent-primary/20 text-accent-primary px-1.5 py-0.5 rounded-full">
+              {entries.length}
+            </span>
          )}
        </span>
-        <span className="text-xs text-fg-muted">{open ? "Hide" : "Show"}</span>
-      </button>
+      </div>

-      {open && (
-        <div className="mt-2 rounded-lg border border-border bg-bg-card/30 divide-y divide-border">
-          {entries.length === 0 ? (
-            <p className="px-3 py-4 text-xs text-fg-muted text-center">
-              No recent generations yet.
-            </p>
-          ) : (
-            <>
-              {entries.map((e) => (
-                <HistoryRow
-                  key={e.id}
-                  entry={e}
-                  onLoad={() => {
-                    onLoad(e);
-                    setOpen(false);
-                  }}
-                  onRemove={() => setEntries(removeFromHistory(e.id))}
-                />
-              ))}
-              <div className="px-3 py-2 flex justify-end">
-                <button
-                  type="button"
-                  onClick={() => {
-                    clearHistory();
-                    setEntries([]);
-                  }}
-                  className="inline-flex items-center gap-1 text-xs text-fg-muted hover:text-rose-300 transition-colors"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                  Clear all
-                </button>
-              </div>
-            </>
-          )}
+      <div className="flex-1 overflow-y-auto scrollbar-thin p-2 space-y-1">
+        {entries.length === 0 ? (
+          <p className="px-3 py-6 text-xs text-fg-muted text-center italic">
+            {t.noHistory}
+          </p>
+        ) : (
+          entries.map((e) => (
+            <HistoryRow
+              key={e.id}
+              entry={e}
+              onLoad={() => onLoad(e)}
+              onRemove={() => setEntries(removeFromHistory(e.id))}
+            />
+          ))
+        )}
+      </div>
+
+      {entries.length > 0 && (
+        <div className="p-2 border-t border-border bg-bg/20">
+          <button
+            type="button"
+            onClick={() => {
+              clearHistory();
+              setEntries([]);
+            }}
+            className="w-full inline-flex items-center justify-center gap-2 text-xs font-semibold text-fg-muted hover:text-rose-400 hover:bg-rose-400/10 transition-colors py-2 rounded-lg"
+          >
+            <FontAwesomeIcon icon={faTrashAlt} />
+            {t.history === 'History' ? 'Clear history' : 'Verlauf löschen'}
+          </button>
        </div>
      )}
    </div>
@@ -108,31 +93,27 @@ function HistoryRow({
 }) {
  const summary = summarizeInput(entry.input);
  return (
-    <div className="px-3 py-2 flex items-center justify-between gap-2 text-sm hover:bg-bg-hover/40 transition-colors">
-      <button
-        type="button"
-        onClick={onLoad}
-        className="flex-1 text-left min-w-0"
-      >
-        <div className="truncate text-fg">{summary}</div>
-        <div className="flex items-center gap-2 text-[11px] text-fg-muted mt-0.5">
-          <Clock className="w-3 h-3" />
+    <div className="group px-3 py-2.5 flex items-center justify-between gap-2 text-sm hover:bg-bg-hover/80 rounded-lg transition-colors cursor-pointer" onClick={onLoad}>
+      <div className="flex-1 min-w-0">
+        <div className="truncate text-fg font-medium text-[13px]">{summary}</div>
+        <div className="flex items-center gap-1.5 text-[10px] text-fg-muted mt-1 uppercase tracking-wider font-semibold">
+          <FontAwesomeIcon icon={faClock} />
          <span>{formatRelative(entry.timestamp)}</span>
          {entry.input.mood && (
            <>
-              <span>·</span>
+              <span className="opacity-50">·</span>
              <span className="truncate">{entry.input.mood}</span>
            </>
          )}
        </div>
-      </button>
+      </div>
      <button
        type="button"
-        onClick={onRemove}
-        className="text-fg-muted hover:text-rose-300 transition-colors p-1"
+        onClick={(e) => { e.stopPropagation(); onRemove(); }}
+        className="opacity-0 group-hover:opacity-100 text-fg-muted hover:text-rose-400 transition-all p-1.5 rounded-md hover:bg-rose-400/10"
        aria-label="Remove from history"
      >
-        <X className="w-3.5 h-3.5" />
+        <FontAwesomeIcon icon={faTimes} />
      </button>
    </div>
  );
@@ -140,7 +121,7 @@ function HistoryRow({

 function summarizeInput(v: InputValues): string {
  const idea = v.idea.trim();
-  const max = 90;
+  const max = 60;
  if (idea.length <= max) return idea || "(no idea text)";
  return idea.slice(0, max - 1) + "…";
 }
@@ -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 || "";
@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import { RefreshCw } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSync } from "@fortawesome/free-solid-svg-icons";

 interface ResultCardProps {
  index: number;
@@ -37,11 +38,13 @@ export function ResultCard({
              type="button"
              onClick={onRegenerate}
              disabled={regenerating}
-              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"
+              className="inline-flex items-center gap-1.5 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-3 h-3 ${regenerating ? "animate-spin" : ""}`}
+              <FontAwesomeIcon
+                icon={faSync}
+                spin={regenerating}
+                className="w-3 h-3"
              />
              Regenerate
            </button>
@@ -1,4 +1,5 @@
-import { Music, RefreshCw, Sparkles } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMusic, faSync, faSparkles } from "@fortawesome/free-solid-svg-icons";
 import type { SongAssets } from "../lib/types";
 import { SkeletonCard } from "./SkeletonCard";
 import { TitlesCard } from "./cards/TitlesCard";
@@ -6,6 +7,7 @@ import { LyricsCard } from "./cards/LyricsCard";
 import { StyleCard } from "./cards/StyleCard";
 import { VideoPromptsCard } from "./cards/VideoPromptsCard";
 import { YouTubeCard } from "./cards/YouTubeCard";
+import { useI18n } from "../lib/i18n";

 export type SectionKey =
  | "titles"
@@ -46,10 +48,11 @@ export function ResultsPanel({
  regenerating,
 }: ResultsPanelProps) {
  const showSkeletons = loading && !assets;
+  const { t } = useI18n();

  return (
    <div>
-      <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">
+      <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/60 backdrop-blur-md 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 && (
@@ -69,8 +72,10 @@ export function ResultsPanel({
              disabled={anyRegenerating}
              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-3.5 h-3.5 ${regenerating.all ? "animate-spin" : ""}`}
+              <FontAwesomeIcon
+                icon={faSync}
+                spin={regenerating.all}
+                className="w-3.5 h-3.5"
              />
              Regenerate all
            </button>
@@ -135,30 +140,26 @@ export function ResultsPanel({
 }

 function EmptyState() {
+  const { t } = useI18n();
  return (
-    <div className="flex flex-col items-center justify-center text-center px-6 py-20 rounded-2xl border border-dashed border-border">
+    <div className="flex flex-col items-center justify-center text-center px-6 py-20 rounded-2xl border border-dashed border-border backdrop-blur-sm bg-bg-card/30">
      <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 className="absolute inset-0 rounded-full bg-gradient-to-br from-accent-primary/20 to-accent-secondary/20 blur-xl" />
+        <div className="relative w-full h-full rounded-full bg-bg-card border border-border flex items-center justify-center shadow-lg">
+          <FontAwesomeIcon icon={faMusic} className="w-7 h-7 text-accent-primary" />
        </div>
      </div>
      <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 leading-relaxed">
-        Describe a music idea on the left and press{" "}
+        Describe a music idea above and press{" "}
        <kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono text-fg">
-          Generate
+          {t.generateAssets}
        </kbd>{" "}
        to get titles, lyrics, style, video prompts, and a YouTube description
        in one go.
      </p>
-      <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,4 +1,5 @@
-import { FolderArchive, Download } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileZipper, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { sanitizeFilename } from "../lib/zip";

 interface StickyZipBarProps {
@@ -15,7 +16,7 @@ export function StickyZipBar({ title, busy, onDownload }: StickyZipBarProps) {
    <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" />
+          <FontAwesomeIcon icon={faFileZipper} className="w-4 h-4 text-fg-muted shrink-0" />
          <span className="truncate font-mono text-[13px]">
            {filename ?? (
              <span className="text-fg-muted">
@@ -30,7 +31,7 @@ export function StickyZipBar({ title, busy, onDownload }: StickyZipBarProps) {
          disabled={!filename || busy}
          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" />
+          <FontAwesomeIcon icon={faDownload} className="w-4 h-4" />
          {filename ? "Download ZIP" : "Select a title first"}
        </button>
      </div>
@@ -1,6 +1,7 @@
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
-import { RotateCcw } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileAlt, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";

 interface LyricsCardProps {
@@ -24,7 +25,7 @@ export function LyricsCard({
  return (
    <ResultCard
      index={1}
-      icon="📝"
+      icon={<FontAwesomeIcon icon={faFileAlt} className="text-blue-400" />}
      title="Lyrics"
      onRegenerate={onRegenerate}
      regenerating={regenerating}
@@ -38,7 +39,7 @@ export function LyricsCard({
              aria-label="Revert lyrics to last generated version"
              title="Revert to last generated"
            >
-              <RotateCcw className="w-4 h-4" />
+              <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
              <span>Revert</span>
            </button>
          )}
@@ -1,6 +1,7 @@
-import { RotateCcw } from "lucide-react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMusic, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";

 interface StyleCardProps {
@@ -33,7 +34,7 @@ export function StyleCard({
  return (
    <ResultCard
      index={2}
-      icon="🎵"
+      icon={<FontAwesomeIcon icon={faMusic} className="text-violet-400" />}
      title="Style"
      onRegenerate={onRegenerate}
      regenerating={regenerating}
@@ -49,7 +50,7 @@ export function StyleCard({
            aria-label="Revert style to last generated version"
            title="Revert to last generated"
          >
-            <RotateCcw className="w-4 h-4" />
+            <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
            <span>Revert</span>
          </button>
        )
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { ResultCard } from "../ResultCard";
-import { RefreshCw } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTags, faSync } from "@fortawesome/free-solid-svg-icons";

 interface TitlesCardProps {
  titles: string[];
@@ -35,7 +36,7 @@ export function TitlesCard({
  return (
    <ResultCard
      index={0}
-      icon="🏷️"
+      icon={<FontAwesomeIcon icon={faTags} className="text-emerald-400" />}
      title="Song Titles"
      onRegenerate={onRegenerate}
      regenerating={regenerating}
@@ -61,7 +62,7 @@ export function TitlesCard({
        })}
        {regenerating && (
          <span className="chip text-fg-muted">
-            <RefreshCw className="w-4 h-4 animate-spin" />
+            <FontAwesomeIcon icon={faSync} spin className="w-4 h-4" />
            Generating new titles…
          </span>
        )}
@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { RotateCcw } from "lucide-react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faVideo, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 import {
  NEGATIVE_VIDEO_PROMPT,
@@ -37,7 +38,7 @@ export function VideoPromptsCard({
  return (
    <ResultCard
      index={3}
-      icon="🎬"
+      icon={<FontAwesomeIcon icon={faVideo} className="text-rose-400" />}
      title="Video Prompts"
      onRegenerate={onRegenerate}
      regenerating={regenerating}
@@ -52,7 +53,7 @@ export function VideoPromptsCard({
                aria-label="Revert video prompt to last generated version"
                title="Revert to last generated"
              >
-                <RotateCcw className="w-4 h-4" />
+                <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
                <span>Revert</span>
              </button>
            )}
@@ -1,6 +1,8 @@
-import { RotateCcw } from "lucide-react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";

 interface YouTubeCardProps {
@@ -24,7 +26,7 @@ export function YouTubeCard({
  return (
    <ResultCard
      index={4}
-      icon="📺"
+      icon={<FontAwesomeIcon icon={faYoutube} className="text-red-500" />}
      title="YouTube Description"
      onRegenerate={onRegenerate}
      regenerating={regenerating}
@@ -38,7 +40,7 @@ export function YouTubeCard({
              aria-label="Revert description to last generated version"
              title="Revert to last generated"
            >
-              <RotateCcw className="w-4 h-4" />
+              <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
              <span>Revert</span>
            </button>
          )}