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

src/components/ResultsPanel.tsx

@@ -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>
   );
 }