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

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

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" />

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();

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>

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">

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}
       />

app/public/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "PocketChords",
+  "short_name": "Chords",
+  "description": "Personal chord chart viewer",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#09090b",
+  "theme_color": "#09090b",
+  "icons": [
+    { "src": "/favicon.ico", "sizes": "48x48", "type": "image/x-icon" }
+  ]
+}

crates/api/src/routes/songs.rs

@@ -3,7 +3,7 @@ use axum::{
     http::StatusCode,
     Json,
 };
-use domain::RepositoryError;
+use domain::{ChordTransposer, RepositoryError, SortField, SortOrder};
 use serde::Deserialize;
 use std::sync::Arc;
 use uuid::Uuid;
@@ -11,6 +11,8 @@ use uuid::Uuid;
 #[derive(Deserialize)]
 pub struct ListQuery {
     pub q: Option<String>,
+    pub sort: Option<String>,
+    pub order: Option<String>,
 }
 
 use crate::routes::tabs::{AppState, ErrorResponse, ParseRequest, resolve_html};
@@ -38,10 +40,19 @@ pub async fn list_songs(
     State(state): State<Arc<AppState>>,
     Query(params): Query<ListQuery>,
 ) -> Result<Json<Vec<domain::SongSummary>>, (StatusCode, Json<ErrorResponse>)> {
+    let sort = match params.sort.as_deref() {
+        Some("title") => SortField::Title,
+        Some("artist") => SortField::Artist,
+        _ => SortField::Date,
+    };
+    let order = match params.order.as_deref() {
+        Some("asc") => SortOrder::Asc,
+        _ => SortOrder::Desc,
+    };
     let result = if let Some(q) = params.q.filter(|s| !s.is_empty()) {
-        state.search.search(&q).await
+        state.search.search(&q, sort, order).await
     } else {
-        state.songs.list().await
+        state.songs.list(sort, order).await
     };
     result
         .map(Json)
@@ -80,19 +91,37 @@ pub async fn update_song(
         })
 }
 
+#[derive(Deserialize)]
+pub struct GetSongQuery {
+    pub apply_capo: Option<bool>,
+}
+
 pub async fn get_song(
     State(state): State<Arc<AppState>>,
     Path(id): Path<String>,
+    Query(params): Query<GetSongQuery>,
 ) -> Result<Json<domain::Song>, (StatusCode, Json<ErrorResponse>)> {
     let uuid = Uuid::parse_str(&id).map_err(|_| {
         (StatusCode::BAD_REQUEST, Json(ErrorResponse { error: "Invalid ID".into() }))
     })?;
 
-    match state.songs.get(uuid).await {
-        Ok(Some(song)) => Ok(Json(song)),
-        Ok(None) => Err((StatusCode::NOT_FOUND, Json(ErrorResponse { error: "Not found".into() }))),
-        Err(e) => Err((StatusCode::INTERNAL_SERVER_ERROR, Json(ErrorResponse { error: e.to_string() }))),
+    let song = match state.songs.get(uuid).await {
+        Ok(Some(s)) => s,
+        Ok(None) => return Err((StatusCode::NOT_FOUND, Json(ErrorResponse { error: "Not found".into() }))),
+        Err(e) => return Err((StatusCode::INTERNAL_SERVER_ERROR, Json(ErrorResponse { error: e.to_string() }))),
+    };
+
+    let song = if params.apply_capo.unwrap_or(false) {
+        if let Some(capo) = song.meta.capo {
+            ChordTransposer.transpose_song(&song, capo as i8)
+        } else {
+            song
         }
+    } else {
+        song
+    };
+
+    Ok(Json(song))
 }
 
 pub async fn delete_song(

crates/common/src/lib.rs

@@ -1,4 +1,4 @@
-use domain::{RepositoryError, Song, SongRepositoryPort, SongSearchPort, SongSummary, StoredSong};
+use domain::{RepositoryError, Song, SongRepositoryPort, SongSearchPort, SongSummary, StoredSong, SortField, SortOrder};
 use uuid::Uuid;
 
 pub struct SongService {
@@ -14,8 +14,8 @@ impl SongService {
         self.repo.save(song).await
     }
 
-    pub async fn list(&self) -> Result<Vec<SongSummary>, RepositoryError> {
-        self.repo.list().await
+    pub async fn list(&self, sort: SortField, order: SortOrder) -> Result<Vec<SongSummary>, RepositoryError> {
+        self.repo.list(sort, order).await
     }
 
     pub async fn get(&self, id: Uuid) -> Result<Option<Song>, RepositoryError> {
@@ -46,7 +46,7 @@ impl SongSearchService {
         Self { search }
     }
 
-    pub async fn search(&self, query: &str) -> Result<Vec<domain::SongSummary>, domain::RepositoryError> {
-        self.search.search(query).await
+    pub async fn search(&self, query: &str, sort: SortField, order: SortOrder) -> Result<Vec<domain::SongSummary>, domain::RepositoryError> {
+        self.search.search(query, sort, order).await
     }
 }

crates/domain/src/lib.rs

@@ -9,5 +9,5 @@ pub use chord::Chord;
 pub use song::{ChordPosition, LyricLine, Section, SectionKind, SongMeta, Song};
 pub use song::{song_preview_chords, StoredSong, SongSummary};
 pub use ports::{FetchError, ParseError, TabFetcherPort, TabParserPort, TabSource};
-pub use ports::{RepositoryError, SongRepositoryPort, SongSearchPort};
+pub use ports::{RepositoryError, SongRepositoryPort, SongSearchPort, SortField, SortOrder};
 pub use transposer::{ChordTransposer, TransposeError};

crates/domain/src/ports.rs

@@ -39,6 +39,21 @@ pub trait TabParserPort: Send + Sync {
 use uuid::Uuid;
 use crate::song::{StoredSong, SongSummary};
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum SortField {
+    #[default]
+    Date,
+    Title,
+    Artist,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum SortOrder {
+    #[default]
+    Desc,
+    Asc,
+}
+
 #[derive(Debug, Error)]
 pub enum RepositoryError {
     #[error("Song not found")]
@@ -50,7 +65,7 @@ pub enum RepositoryError {
 #[async_trait]
 pub trait SongRepositoryPort: Send + Sync {
     async fn save(&self, song: &Song) -> Result<StoredSong, RepositoryError>;
-    async fn list(&self) -> Result<Vec<SongSummary>, RepositoryError>;
+    async fn list(&self, sort: SortField, order: SortOrder) -> Result<Vec<SongSummary>, RepositoryError>;
     async fn get(&self, id: Uuid) -> Result<Option<Song>, RepositoryError>;
     async fn delete(&self, id: Uuid) -> Result<(), RepositoryError>;
     async fn update_meta(
@@ -64,5 +79,5 @@ pub trait SongRepositoryPort: Send + Sync {
 
 #[async_trait]
 pub trait SongSearchPort: Send + Sync {
-    async fn search(&self, query: &str) -> Result<Vec<SongSummary>, RepositoryError>;
+    async fn search(&self, query: &str, sort: SortField, order: SortOrder) -> Result<Vec<SongSummary>, RepositoryError>;
 }

crates/infrastructure/persistence/src/lib.rs

@@ -1,11 +1,23 @@
 use async_trait::async_trait;
 use domain::{
     RepositoryError, Song, SongMeta, SongRepositoryPort, SongSearchPort, SongSummary, StoredSong,
+    SortField, SortOrder,
     song_preview_chords,
 };
 use sqlx::SqlitePool;
 use uuid::Uuid;
 
+fn sort_clause(field: SortField, order: SortOrder) -> &'static str {
+    match (field, order) {
+        (SortField::Title,  SortOrder::Asc)  => "ORDER BY title ASC",
+        (SortField::Title,  SortOrder::Desc) => "ORDER BY title DESC",
+        (SortField::Artist, SortOrder::Asc)  => "ORDER BY artist ASC",
+        (SortField::Artist, SortOrder::Desc) => "ORDER BY artist DESC",
+        (SortField::Date,   SortOrder::Asc)  => "ORDER BY created_at ASC",
+        (SortField::Date,   SortOrder::Desc) => "ORDER BY created_at DESC",
+    }
+}
+
 #[derive(Clone)]
 pub struct SqliteSongRepository {
     pool: SqlitePool,
@@ -57,10 +69,12 @@ impl SongRepositoryPort for SqliteSongRepository {
         Ok(StoredSong { id, song: song.clone() })
     }
 
-    async fn list(&self) -> Result<Vec<SongSummary>, RepositoryError> {
-        let rows = sqlx::query_as::<_, SongRow>(
-            "SELECT id, title, artist, original_key, preview_chords, body FROM songs ORDER BY created_at DESC"
-        )
+    async fn list(&self, sort: SortField, order: SortOrder) -> Result<Vec<SongSummary>, RepositoryError> {
+        let sql = format!(
+            "SELECT id, title, artist, original_key, preview_chords, body FROM songs {}",
+            sort_clause(sort, order)
+        );
+        let rows = sqlx::query_as::<_, SongRow>(&sql)
             .fetch_all(&self.pool)
             .await
             .map_err(|e| RepositoryError::Internal(e.to_string()))?;
@@ -158,13 +172,15 @@ impl SongRepositoryPort for SqliteSongRepository {
 
 #[async_trait]
 impl SongSearchPort for SqliteSongRepository {
-    async fn search(&self, query: &str) -> Result<Vec<SongSummary>, RepositoryError> {
+    async fn search(&self, query: &str, sort: SortField, order: SortOrder) -> Result<Vec<SongSummary>, RepositoryError> {
         let escaped = query.replace('\\', "\\\\").replace('%', "\\%").replace('_', "\\_");
         let pattern = format!("%{}%", escaped);
-        let rows = sqlx::query_as::<_, SongRow>(
+        let sql = format!(
             "SELECT id, title, artist, original_key, preview_chords, body FROM songs \
-             WHERE (title LIKE ? ESCAPE '\\' OR artist LIKE ? ESCAPE '\\') ORDER BY created_at DESC"
-        )
+             WHERE (title LIKE ? ESCAPE '\\' OR artist LIKE ? ESCAPE '\\') {}",
+            sort_clause(sort, order)
+        );
+        let rows = sqlx::query_as::<_, SongRow>(&sql)
             .bind(&pattern)
             .bind(&pattern)
             .fetch_all(&self.pool)