Species card-grid page, real audio playback, and visual polish - #2
Merged
Conversation
Remove the hill/tree/sun hero graphic and the dotted paper-grain background texture per feedback -- flat solid background everywhere. Also reduce the shared --radius token so cards, buttons, inputs, and badges read with tighter, less rounded corners site-wide, and add scrollbar-gutter: stable so pages that change height (e.g. filtering a grid) don't shift horizontally when the scrollbar appears/disappears. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…udio playback Rebuilds the species listing as a card grid (search box; sort by most recordings / recent / A-Z with icons and pagination), each card showing a Wikipedia thumbnail (with graceful fallback), this-hour/all-time counts, and Play/Wiki/eBird actions. Audio playback is fully wired, not a placeholder: adds BIRDNET_EXTRACTED_DIR config and a dynamic server route that streams clips from BirdNET-Pi's real extraction path (BirdSongs/Extracted/ By_Date/..., a sibling of the repo, matching production layout). Wikipedia images come from their public summary API (image + canonical page URL, no key needed); eBird links go through a scoped search since their species pages require login for anonymous requests. Worked around three real bugs in this bleeding-edge TanStack Start/ Nitro version along the way: a Node-only import leaking into the client bundle (fixed by marking db/index.ts server-only and splitting audio.ts's filesystem code into audio.server.ts), a 3-segment dynamic route silently failing to register (collapsed to 2 segments), and native <audio src> requests 404ing while identical fetch() calls succeeded (worked around by fetching the clip and playing it from a Blob URL). Verified in both dev and a production build. Card layout also fixes two bugs found after building it: the image wrapper's height varied across cards despite aspect-square (a flex/ aspect-ratio interaction quirk) -- replaced with an explicit fixed height. Reordered content to name/sciname, then image, then stats, then actions, top to bottom. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
For each species, synthesizes a short distinct tone at its most recent detection's extraction path (BirdSongs/Extracted/By_Date/...), matching the same BIRDNET_EXTRACTED_DIR default web-ui uses, so the new play-button feature has real audio to play during local dev. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR brings back follow-up commits for the web UI: it refines the site’s visual styling, rebuilds the /species route as a searchable/sortable card grid, and adds an API route to play real extracted audio clips (plus seed-data support for local playback).
Changes:
- Visual updates: flatter background, smaller global radius, and stable scrollbar gutter to prevent layout shift.
/speciesredesign: card grid with search, sort modes, pagination, thumbnails, counts, and Play/Wiki/eBird actions.- Real audio playback:
/api/audio/...route + helpers/config to stream extracted clips; seed script now generates placeholder wavs per species for local dev.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| web-ui/src/styles.css | Tweaks global radius, removes paper grain overlay, adds scrollbar-gutter: stable. |
| web-ui/src/routeTree.gen.ts | Registers the new dynamic audio API route. |
| web-ui/src/routes/species.tsx | Replaces the species table with a searchable/sortable/paginated card grid + audio play UI. |
| web-ui/src/routes/index.tsx | Removes the HeroBand from the home page and aligns updated rounding. |
| web-ui/src/routes/detections.tsx | Adjusts card rounding to match new radius styling. |
| web-ui/src/routes/api/audio/$date/$speciesAndFile.ts | Adds an API handler that serves extracted audio clips by date/species/file. |
| web-ui/src/lib/wikipedia.ts | Adds Wikipedia thumbnail + link lookup with in-memory caching, plus eBird search URL helper. |
| web-ui/src/lib/detections.ts | Adds getLifeListCards() to power the new species page (counts + latest clip + external links). |
| web-ui/src/lib/audio.ts | Adds URL building/encoding helpers for the new audio route. |
| web-ui/src/lib/audio.server.ts | Adds server-only extracted-clip resolution and MIME-type detection. |
| web-ui/src/db/index.ts | Marks DB access as server-only. |
| web-ui/src/components/ui/toggle.tsx | Adds a Toggle UI primitive used by the sort controls. |
| web-ui/src/components/ui/toggle-group.tsx | Adds ToggleGroup/ToggleGroupItem for sort controls. |
| web-ui/src/components/ui/pagination.tsx | Adds pagination UI components used on /species. |
| web-ui/src/components/ui/input.tsx | Adds an Input UI component used for species search. |
| web-ui/src/components/HeroBand.tsx | Removes the HeroBand SVG component. |
| scripts/seed_test_data.py | Adds placeholder wav generation so local species cards can play real audio. |
Comments suppressed due to low confidence (1)
web-ui/src/lib/audio.ts:49
splitSpeciesAndFile()will currently throw ifencodedisn’t valid base64url (viaatob()), which would turn malformed requests into 500s. Returning an empty tuple on decode/format failure lets the API route reliably return 404 instead.
export function splitSpeciesAndFile(
encoded: string,
): [species: string, file: string] {
const [species, file] = base64UrlDecode(encoded).split(SEGMENT_SEPARATOR);
return [species ?? "", file ?? ""];
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| MoreHorizontalIcon, | ||
| } from "lucide-react"; | ||
| import type * as React from "react"; | ||
| import { type Button, buttonVariants } from "#/components/ui/button.tsx"; |
Comment on lines
+33
to
+40
| data-variant={variant} | ||
| data-size={size} | ||
| data-spacing={spacing} | ||
| style={{ "--gap": spacing } as React.CSSProperties} | ||
| className={cn( | ||
| "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", | ||
| className, | ||
| )} |
Comment on lines
+20
to
+32
| function base64UrlEncode(value: string): string { | ||
| return btoa(value) | ||
| .replaceAll("+", "-") | ||
| .replaceAll("/", "_") | ||
| .replaceAll("=", ""); | ||
| } | ||
|
|
||
| function base64UrlDecode(value: string): string { | ||
| const padded = value.replaceAll("-", "+").replaceAll("_", "/"); | ||
| const padding = | ||
| padded.length % 4 === 0 ? "" : "=".repeat(4 - (padded.length % 4)); | ||
| return atob(padded + padding); | ||
| } |
Comment on lines
+17
to
+21
| try { | ||
| const data = await readFile(resolved); | ||
| return new Response(data, { | ||
| headers: { | ||
| "Content-Type": mimeTypeFor(resolved), |
Comment on lines
103
to
+107
| .from(detections) | ||
| .groupBy(detections.Com_Name, detections.Sci_Name) | ||
| .orderBy(sql`count(*) desc`); | ||
| .orderBy(desc(detections.Date), desc(detections.Time)); | ||
| const latestByName = new Map< | ||
| string, | ||
| { date: string; time: string; fileName: string } |
This was referenced Jul 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR #1 merged before these follow-up commits were pushed to the same branch, so they never made it into
main. This PR picks them up.scrollbar-gutter: stableso filtering doesn't shift the page horizontally.BIRDNET_EXTRACTED_DIRconfig and a dynamic server route that streams clips from BirdNET-Pi's actual extraction path (BirdSongs/Extracted/By_Date/..., a sibling of the repo, matching production layout). Worked around a few real bugs in this bleeding-edge TanStack Start/Nitro version along the way (details in the commit message).Test plan
tsc --noEmitandbiome checkcleannpm run buildsucceedsCo-Authored-By: Claude Sonnet 5 noreply@anthropic.com