feat(app): PWA manifest, persistent transpose, font size, capo toggle, library sort

2026-04-08 04:09:25 +02:00
parent 2558f19960
commit f80ed4e88a
7 changed files with 175 additions and 33 deletions
--- a/app/app/components/chord-chart.tsx
+++ b/app/app/components/chord-chart.tsx
@@ -6,6 +6,7 @@ const MAX_WIDTH = 38;

 interface Props {
  sections: Section[];
+  fontSize?: 'sm' | 'base' | 'lg';
 }

 function buildChordRow(chords: { offset: number; chord: string }[]): string {
@@ -54,16 +55,16 @@ function segmentLine(line: LyricLine, maxWidth: number): LyricLine[] {
  return segments;
 }

-function LineBlock({ line }: { line: LyricLine }) {
+function LineBlock({ line, sizeClass }: { line: LyricLine; sizeClass: string }) {
  return (
    <div className="leading-tight">
      {line.chords.length > 0 && (
-        <pre className="text-primary text-sm font-mono whitespace-pre">
+        <pre className={`text-primary ${sizeClass} font-mono whitespace-pre`}>
          {buildChordRow(line.chords)}
        </pre>
      )}
      {line.text && (
-        <pre className="text-foreground text-sm font-mono whitespace-pre">
+        <pre className={`text-foreground ${sizeClass} font-mono whitespace-pre`}>
          {line.text}
        </pre>
      )}
@@ -71,7 +72,7 @@ function LineBlock({ line }: { line: LyricLine }) {
  );
 }

-function SectionBlock({ section }: { section: Section }) {
+function SectionBlock({ section, sizeClass }: { section: Section; sizeClass: string }) {
  return (
    <div className="mb-6">
      {section.label && (
@@ -79,18 +80,19 @@ function SectionBlock({ section }: { section: Section }) {
      )}
      {section.lines.flatMap((line, i) =>
        segmentLine(line, MAX_WIDTH).map((seg, j) => (
-          <LineBlock key={`${i}-${j}`} line={seg} />
+          <LineBlock key={`${i}-${j}`} line={seg} sizeClass={sizeClass} />
        ))
      )}
    </div>
  );
 }

-export function ChordChart({ sections }: Props) {
+export function ChordChart({ sections, fontSize }: Props) {
+  const sizeClass = { sm: 'text-sm', base: 'text-base', lg: 'text-lg' }[fontSize ?? 'sm'];
  return (
    <div className="px-4 py-3">
      {sections.map((section, i) => (
-        <SectionBlock key={i} section={section} />
+        <SectionBlock key={i} section={section} sizeClass={sizeClass} />
      ))}
    </div>
  );
--- a/app/app/components/transpose-bar.tsx
+++ b/app/app/components/transpose-bar.tsx
@@ -4,6 +4,7 @@ import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 import { ChevronUp, ChevronDown, Minus, Plus, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+import { cn } from "~/lib/utils";
 import type { SongMeta } from "~/lib/types";

 interface Props {
@@ -12,9 +13,14 @@ interface Props {
  onOffsetChange: (offset: number) => void;
  onEdit?: () => void;
  onDelete?: () => void;
+  fontSize?: 'sm' | 'base' | 'lg';
+  onFontSizeChange?: (size: 'sm' | 'base' | 'lg') => void;
+  capo?: number;
+  applyCapo?: boolean;
+  onToggleCapo?: () => void;
 }

-export function TransposeBar({ meta, offset, onOffsetChange, onEdit, onDelete }: Props) {
+export function TransposeBar({ meta, offset, onOffsetChange, onEdit, onDelete, fontSize, onFontSizeChange, capo, applyCapo, onToggleCapo }: Props) {
  const [expanded, setExpanded] = useState(true);

  const label = offset === 0 ? "±0" : offset > 0 ? `+${offset}` : `${offset}`;
@@ -75,10 +81,40 @@ export function TransposeBar({ meta, offset, onOffsetChange, onEdit, onDelete }:
      <div className="flex items-center justify-between">
        <div className="flex gap-3 text-xs text-muted-foreground">
          {meta.original_key && <span>Key: {meta.original_key}</span>}
-          {meta.capo != null && <span>Capo: {meta.capo}</span>}
+          {capo != null && onToggleCapo ? (
+            <button
+              onClick={onToggleCapo}
+              className={cn(
+                "text-xs transition-colors",
+                applyCapo ? "text-primary" : "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              Capo {capo}{applyCapo ? " · sounding" : ""}
+            </button>
+          ) : meta.capo != null ? (
+            <span>Capo: {meta.capo}</span>
+          ) : null}
          {meta.tuning && <span>{meta.tuning}</span>}
        </div>
        <div className="flex items-center gap-2">
+          {onFontSizeChange && (
+            <div className="flex items-center gap-1">
+              {(['sm', 'base', 'lg'] as const).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => onFontSizeChange(s)}
+                  className={cn(
+                    "text-xs px-1.5 py-0.5 rounded transition-colors",
+                    fontSize === s
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  {s === 'sm' ? 'S' : s === 'base' ? 'M' : 'L'}
+                </button>
+              ))}
+            </div>
+          )}
          <Button variant="ghost" size="icon" className="h-8 w-8"
            onClick={() => onOffsetChange(Math.max(-11, offset - 1))}>
            <Minus className="w-4 h-4" />
--- a/app/app/lib/api.ts
+++ b/app/app/lib/api.ts
@@ -2,17 +2,22 @@ import type { Song, SongSummary, StoredSong, UpdateSongRequest } from "./types";

 const API_BASE = import.meta.env.VITE_API_URL ?? "http://localhost:8000";

-export async function listSongs(q = ""): Promise<SongSummary[]> {
-  const url = q.trim()
-    ? `${API_BASE}/songs?q=${encodeURIComponent(q.trim())}`
-    : `${API_BASE}/songs`;
+export async function listSongs(q = "", sort = "date", order = "desc"): Promise<SongSummary[]> {
+  const params = new URLSearchParams();
+  if (q.trim()) params.set("q", q.trim());
+  if (sort !== "date") params.set("sort", sort);
+  if (order !== "desc") params.set("order", order);
+  const url = params.size ? `${API_BASE}/songs?${params}` : `${API_BASE}/songs`;
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Failed to load songs: ${res.status}`);
  return res.json();
 }

-export async function getSong(id: string): Promise<Song | null> {
-  const res = await fetch(`${API_BASE}/songs/${id}`);
+export async function getSong(id: string, applyCapo = false): Promise<Song | null> {
+  const url = applyCapo
+    ? `${API_BASE}/songs/${id}?apply_capo=true`
+    : `${API_BASE}/songs/${id}`;
+  const res = await fetch(url);
  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`Failed to load song: ${res.status}`);
  return res.json();
--- a/app/app/root.tsx
+++ b/app/app/root.tsx
@@ -23,6 +23,8 @@ export const links: Route.LinksFunction = () => [
    rel: "stylesheet",
    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
  },
+  { rel: "manifest", href: "/manifest.json" },
+  { rel: "apple-touch-icon", href: "/favicon.ico" },
 ];

 export function Layout({ children }: { children: React.ReactNode }) {
@@ -32,6 +34,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-title" content="PocketChords" />
+        <meta name="theme-color" content="#09090b" />
        <Links />
      </head>
      <body>
--- a/app/app/routes/home.tsx
+++ b/app/app/routes/home.tsx
@@ -8,6 +8,7 @@ import { Plus } from "lucide-react";
 import { SongCard } from "~/components/song-card";
 import { AddSongSheet } from "~/components/add-song-sheet";
 import { listSongs } from "~/lib/api";
+import { cn } from "~/lib/utils";
 import type { SongSummary } from "~/lib/types";

 export function meta({}: Route.MetaArgs) {
@@ -18,17 +19,20 @@ export function meta({}: Route.MetaArgs) {
 }

 export async function loader({ request }: Route.LoaderArgs) {
-  const q = new URL(request.url).searchParams.get("q") ?? "";
+  const url = new URL(request.url);
+  const q = url.searchParams.get("q") ?? "";
+  const sort = url.searchParams.get("sort") ?? "date";
+  const order = url.searchParams.get("order") ?? "desc";
  try {
-    const songs = await listSongs(q);
-    return { songs, q, error: false };
+    const songs = await listSongs(q, sort, order);
+    return { songs, q, sort, order, error: false };
  } catch {
-    return { songs: [], q, error: true };
+    return { songs: [], q, sort, order, error: true };
  }
 }

 export default function Home({ loaderData }: Route.ComponentProps) {
-  const { songs, q: initialQ, error } = loaderData;
+  const { songs, q: initialQ, sort: initialSort, order: initialOrder, error } = loaderData;
  const [searchParams, setSearchParams] = useSearchParams();
  const [sheetOpen, setSheetOpen] = useState(false);
  const [localSongs, setLocalSongs] = useState<SongSummary[]>([]);
@@ -41,9 +45,13 @@ export default function Home({ loaderData }: Route.ComponentProps) {
    setInputValue(value);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
-      setSearchParams(value.trim() ? { q: value.trim() } : {}, { replace: true });
+      const next: Record<string, string> = {};
+      if (value.trim()) next.q = value.trim();
+      if (initialSort !== "date") next.sort = initialSort;
+      if (initialOrder !== "desc") next.order = initialOrder;
+      setSearchParams(next, { replace: true });
    }, 300);
-  }, [setSearchParams]);
+  }, [setSearchParams, initialSort, initialOrder]);

  useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current); }, []);

@@ -70,6 +78,29 @@ export default function Home({ loaderData }: Route.ComponentProps) {
        />
      </div>

+      <div className="flex gap-1 px-4 pb-2">
+        {([["date", "Date"], ["title", "Title"], ["artist", "Artist"]] as const).map(([val, label]) => (
+          <button
+            key={val}
+            onClick={() => {
+              const newOrder = initialSort === val ? (initialOrder === "asc" ? "desc" : "asc") : (val === "date" ? "desc" : "asc");
+              const next: Record<string, string> = {};
+              if (inputValue.trim()) next.q = inputValue.trim();
+              next.sort = val;
+              next.order = newOrder;
+              setSearchParams(next, { replace: true });
+            }}
+            className={cn(
+              "text-xs px-2 py-1 rounded-full border transition-colors",
+              initialSort === val
+                ? "bg-primary text-primary-foreground border-primary"
+                : "text-muted-foreground border-border"
+            )}
+          >
+            {label}{initialSort === val ? (initialOrder === "asc" ? " ↑" : " ↓") : ""}
+          </button>
+        ))}
+      </div>

      {error && (
        <div className="flex flex-col items-center gap-3 pt-8 pb-4 px-6 text-center">
--- a/app/app/routes/songs.$id.tsx
+++ b/app/app/routes/songs.$id.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { data, Link } from "react-router";
 import type { Route } from "./+types/songs.$id";
 import { TransposeBar } from "~/components/transpose-bar";
@@ -31,14 +31,57 @@ export async function loader({ params }: Route.LoaderArgs) {
  }
 }

+type FontSize = 'sm' | 'base' | 'lg';
+
+function initFontSize(): FontSize {
+  try {
+    const v = localStorage.getItem('fontSize');
+    if (v === 'sm' || v === 'base' || v === 'lg') return v;
+  } catch { /* noop */ }
+  return 'sm';
+}
+
 export default function SongDetail({ loaderData }: Route.ComponentProps) {
  const { song: initialSong, id } = loaderData;
-  const [song, setSong] = useState<Song | null>(initialSong ?? null);
-  const [offset, setOffset] = useState(0);
+  const [baseSong, setBaseSong] = useState<Song | null>(initialSong ?? null);
+  const [displayedSong, setDisplayedSong] = useState<Song | null>(initialSong ?? null);
+  const [applyCapo, setApplyCapo] = useState(false);
+
+  const initOffset = (() => {
+    try {
+      const v = localStorage.getItem(`transpose:${id}`);
+      if (v !== null) {
+        const n = parseInt(v, 10);
+        if (!isNaN(n)) return n;
+      }
+    } catch { /* noop */ }
+    return 0;
+  })();
+
+  const [offset, setOffset] = useState(initOffset);
+  const [fontSize, setFontSize] = useState<FontSize>(initFontSize);
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);

-  if (!song) {
+  useEffect(() => {
+    if (applyCapo && baseSong?.meta.capo) {
+      getSong(id, true).then((s) => { if (s) setDisplayedSong(s); });
+    } else {
+      setDisplayedSong(baseSong);
+    }
+  }, [applyCapo]); // eslint-disable-line
+
+  function handleOffsetChange(newOffset: number) {
+    setOffset(newOffset);
+    try { localStorage.setItem(`transpose:${id}`, String(newOffset)); } catch { /* noop */ }
+  }
+
+  function handleFontSizeChange(size: FontSize) {
+    setFontSize(size);
+    try { localStorage.setItem('fontSize', size); } catch { /* noop */ }
+  }
+
+  if (!baseSong || !displayedSong) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-4">
        <p className="text-muted-foreground text-sm">Song not found or unavailable.</p>
@@ -49,34 +92,40 @@ export default function SongDetail({ loaderData }: Route.ComponentProps) {
    );
  }

-  const displayed = transposeSong(song, offset);
+  const displayed = transposeSong(displayedSong, offset);

  function handleUpdated(summary: SongSummary) {
-    setSong((prev) => prev ? { ...prev, meta: summary.meta } : prev);
+    setBaseSong((prev) => prev ? { ...prev, meta: summary.meta } : prev);
+    setDisplayedSong((prev) => prev ? { ...prev, meta: summary.meta } : prev);
  }

  return (
    <div className="flex flex-col h-full max-w-lg mx-auto">
      <TransposeBar
-        meta={song.meta}
+        meta={baseSong.meta}
        offset={offset}
-        onOffsetChange={setOffset}
+        onOffsetChange={handleOffsetChange}
        onEdit={() => setEditOpen(true)}
        onDelete={() => setDeleteOpen(true)}
+        fontSize={fontSize}
+        onFontSizeChange={handleFontSizeChange}
+        capo={baseSong.meta.capo ?? undefined}
+        applyCapo={applyCapo}
+        onToggleCapo={() => setApplyCapo((v) => !v)}
      />
      <div className="flex-1 overflow-y-auto">
-        <ChordChart sections={displayed.sections} />
+        <ChordChart sections={displayed.sections} fontSize={fontSize} />
      </div>
      <EditSongSheet
        id={id}
-        meta={song.meta}
+        meta={baseSong.meta}
        open={editOpen}
        onOpenChange={setEditOpen}
        onUpdated={handleUpdated}
      />
      <DeleteSongDialog
        id={id}
-        title={song.meta.title}
+        title={baseSong.meta.title}
        open={deleteOpen}
        onOpenChange={setDeleteOpen}
      />