feat(app): add library page with song grid and search

2026-04-08 02:31:44 +02:00
parent cdb9c59d37
commit 3d18bb9e77
1 changed files with 90 additions and 0 deletions
--- a/app/app/routes/home.tsx
+++ b/app/app/routes/home.tsx
@@ -0,0 +1,90 @@
+import { useState } from "react";
+import type { Route } from "./+types/home";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Card, CardContent } from "~/components/ui/card";
+import { Plus } from "lucide-react";
+import { SongCard } from "~/components/song-card";
+import { AddSongSheet } from "~/components/add-song-sheet";
+import { MOCK_SONGS } from "~/lib/mock";
+import type { SongSummary } from "~/lib/types";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "PocketChords" },
+    { name: "description", content: "Your personal chord chart library" },
+  ];
+}
+
+export function loader() {
+  return { songs: MOCK_SONGS };
+}
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  const { songs } = loaderData;
+  const [query, setQuery] = useState("");
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [localSongs, setLocalSongs] = useState<SongSummary[]>([]);
+
+  const allSongs = [...songs, ...localSongs];
+  const filtered = query.trim()
+    ? allSongs.filter(
+        (s) =>
+          s.meta.title.toLowerCase().includes(query.toLowerCase()) ||
+          s.meta.artist.toLowerCase().includes(query.toLowerCase())
+      )
+    : allSongs;
+
+  return (
+    <div className="flex flex-col h-dvh max-w-lg mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 pt-4 pb-2">
+        <h1 className="text-lg font-bold">PocketChords</h1>
+        <Button size="sm" onClick={() => setSheetOpen(true)}>
+          <Plus className="w-4 h-4 mr-1" />
+          Add
+        </Button>
+      </div>
+
+      {/* Search */}
+      <div className="px-4 pb-3">
+        <Input
+          placeholder="Search songs..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full"
+        />
+      </div>
+
+      {/* Grid */}
+      <div className="flex-1 overflow-y-auto px-4 pb-4">
+        {filtered.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center pt-12">
+            {query ? "No songs match your search." : "No songs yet. Tap Add to get started."}
+          </p>
+        ) : (
+          <div className="grid grid-cols-2 gap-3">
+            {filtered.map((song) => (
+              <SongCard key={song.id} song={song} />
+            ))}
+            {/* Add card */}
+            <Card
+              className="h-full border-dashed cursor-pointer hover:bg-accent transition-colors"
+              onClick={() => setSheetOpen(true)}
+            >
+              <CardContent className="p-3 flex items-center justify-center h-full min-h-[80px]">
+                <Plus className="w-6 h-6 text-muted-foreground" />
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      <AddSongSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        onSongAdded={(summary) => setLocalSongs((prev) => [...prev, summary])}
+      />
+    </div>
+  );
+}