muse/web/components/welcome.tsx

"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Search } from "lucide-react";
import type { Job } from "@/lib/api";
import { item, useMotionOK } from "@/lib/motion";

const EXAMPLES = [
  "Radiohead Creep",
  "Kendrick Lamar Money Trees",
  "Fleetwood Mac Dreams",
  "Tame Impala The Less I Know The Better",
  "Frank Ocean Ivy",
];

/**
 * The first screen.
 *
 * It used to be a floating disc, a heading, and five hardcoded example chips —
 * a decorated placeholder that said nothing about this install. Leading with
 * the artwork of what has actually been imported makes the empty state a
 * library view instead, and falls back to the examples only when there is
 * genuinely nothing to show.
 */
export function Welcome({
  onPick,
  recent,
}: {
  onPick: (q: string) => void;
  recent: Job[];
}) {
  const ok = useMotionOK();
  const seen = new Set<string>();
  const imported = recent
    .filter((j) => j.state === "imported" && j.cover)
    .filter((j) => {
      const k = `${j.artist}|${j.album ?? j.title}`;
      if (seen.has(k)) return false;
      seen.add(k);
      return true;
    })
    .slice(0, 12);

  return (
    <div className="py-2">
      <div className="mb-8 max-w-[52ch] pt-6">
        <h1 className="text-hero">Find anything.</h1>
        <p className="mt-2.5 text-body text-dim">
          Search a song, preview it, and press Get. It arrives in your library correctly
          tagged — right artist, right album, right track number.
        </p>
      </div>

      {imported.length > 0 ? (
        <section aria-labelledby="recent-h">
          <h2 id="recent-h" className="mb-3 text-headline">
            Recently added
          </h2>
          <div className="grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-4">
            {imported.map((j, i) => (
              <motion.button
                key={j.id}
                {...item(i, ok)}
                onClick={() => onPick(`${j.artist} ${j.title}`)}
                className="focus-ring group text-left"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={j.cover!}
                  alt=""
                  loading="lazy"
                  className="lift mb-2 aspect-square w-full rounded-panel border border-edge
                             object-cover shadow-[var(--e1)]"
                />
                <div className="text-callout font-medium clamp1">{j.title}</div>
                <div className="text-caption text-dim clamp1">{j.artist}</div>
              </motion.button>
            ))}
          </div>
        </section>
      ) : (
        <section aria-labelledby="try-h">
          <h2 id="try-h" className="mb-3 flex items-center gap-2 text-headline">
            <Search className="h-4 w-4 text-mute" /> Try one of these
          </h2>
          <div className="flex flex-wrap gap-2">
            {EXAMPLES.map((e, i) => (
              <motion.button
                key={e}
                {...item(i, ok)}
                onClick={() => onPick(e)}
                className="focus-ring rounded-pill border border-edge bg-[var(--surface)] px-3.5
                           py-1.5 text-callout text-dim transition-colors hover:border-accent-line
                           hover:bg-accent-soft hover:text-accent"
              >
                {e}
              </motion.button>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}