Add species list view per sub-key

[Copilot]

Users had no way to browse all species within a sub-key (e.g. "all ink caps") without stepping through the full decision tree.

Changes

Sub-key index page (/9789050117548/soorten)

• New index page listing all sub-keys as clickable cards
• Accessible via a "Bekijk paddenstoelen in deelsleutels" button on the home page

Species list page (/9789050117548/soorten?key=<subkey>)

• Displays all mushrooms reachable from the selected sub-key, rendered as cards with photo (OneZoom), species name, and quick-links
• Quick-links match the full set from the mushroom identification page: Google afbeeldingen, Engelse Wikipedia, Nederlandse Wikipedia, Open Tree of Life, OneZoom, Encyclopedia of Life, and Waarnemingen.be
• "← Alle deelsleutels" back-link to return to the sub-key index
• Sticky nav bar with "Home" and "Start key" buttons, always anchored to the viewport bottom

Graph traversal utility

Added getMushroomsForSubKey() to parser.ts — recursively walks the question graph from a sub-key entry and returns all terminal mushroom species, sorted alphabetically:

export function getMushroomsForSubKey(
    subKeyId: string,
    parsedQuestions: ParsedQuestions,
    parsedMushrooms: { [key: string]: Mushroom }
): Mushroom[]

Home page

Added a "Bekijk paddenstoelen in deelsleutels" button that routes to the sub-key index page (/9789050117548/soorten).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Mushroom list</issue_title>
<issue_description>I was out and about and was thinking "oh, what is this ink cap". I wanted to get a list of all ink caps in the key. Since we can use the waarnemingen.be data. This should not be too hard... You have your sub keys and just click "view all species". We find the species in our key and list it in a nice view.
We should also look at the image api of waarnemingen.be since the one we use now does not always have an image...</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Mushroom list #39

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

[jitsedesmet]

@copilot nice work, but I think entering this page should not be part of the 'deel sleutel filtern' dropdown. Maybe we can have a button 'bekijk paddenstoelen in deelsleutels' on the main page which routes to a page with a list of all subKeys.

[Copilot]

@copilot nice work, but I think entering this page should not be part of the 'deel sleutel filtern' dropdown. Maybe we can have a button 'bekijk paddenstoelen in deelsleutels' on the...

Done in commit 0a3fcae. The 🍄 link is removed from the "deelsleutels filteren" dropdown. Instead there is now a "Bekijk paddenstoelen in deelsleutels" button on the home page (below the form) that routes to /9789050117548/soorten. That page shows an index of all sub-keys as clickable cards. Selecting one navigates to /9789050117548/soorten?key=<sleutel> which lists all species in that sub-key with a "← Alle deelsleutels" back-link.

Home page:

Here's the flow in brief:

• Home → "Bekijk paddenstoelen in deelsleutels" → sub-key index → click a sub-key → species list for that sub-key

[jitsedesmet]

@copilot this is really nice!
There is a small visual problem though when the subkey has only limited items:

[Copilot]

@copilot this is really nice!
There is a small visual problem though when the subkey has only limited items:

...

Fixed in ef71802. The nav bar was inside .content, so with few items it floated mid-screen. Moved it outside .content as a direct sibling — since .content has flex: 1 1 0, it now always gets pushed to the viewport bottom regardless of how many species are shown.

[jitsedesmet]

@copilot you may undo your work on supporting the waarnemingen.be images. We will tackle that issue in another PR. Additionally, it would be nice if the list overview would have the same quick links as the mushrooms page itself:

1. Google afbeeldingen
2. engelse wikipedia
3. nederlandse wikipedia
4. Open tree of Life
5. OneZoom
6. Encyclopedia of life
7. Waarnemingen.be

[Copilot]

@copilot you may undo your work on supporting the waarnemingen.be images. We will tackle that issue in another PR. Additionally, it would be nice if the list overview would have the ...

Done in e9962d8:

• Removed WaarnemingPicture.svelte and MushroomPicture.svelte — species cards now use OneZoomPicture directly again.
• Each species card now shows the full set of quick links matching the mushroom page: Google afbeeldingen, Engelse Wikipedia, Nederlandse Wikipedia, Open Tree of Life (when available), OneZoom (when available), Encyclopedia of Life (when available), and Waarnemingen.be (when available).

[jitsedesmet]

@copilot viaually, the image and its Copyright sometimes bug out. Can we do some thing about that?

[Copilot]

@copilot viaually, the image and its Copyright sometimes bug out. Can we do some thing about that?

<img width="381" height="258" alt="image" src="https://github.com/user-attachments/assets/34f681e0...

Fixed in 2a1acd6. The thumbnail wrapper is only 72×72 px with overflow: hidden, so the OneZoom credit figcaption was getting clipped. Added credits={false} to the OneZoomPicture call in the species list — the thumbnails now show only the image, no overflowing copyright text.

[jitsedesmet]

@copilot nice, but lets still put credits somewhere with the image.

[Copilot]

@copilot nice, but lets still put credits somewhere with the image.

Done in fa381c1. Added a creditsOverlay prop to OneZoomPicture. When set, the credit text is rendered as a semi-transparent dark bar pinned to the bottom of the image (position: absolute), so it fits cleanly inside the 72×72 px thumbnail without overflowing. The text is truncated with an ellipsis if it's too long for the card width.

[jitsedesmet]

@copilot Nice work. Small question and path forward

[jitsedesmet]

Nice addition! I like the overview look. I think it can replace 'credits' entirely? Since it is used no where?

[Copilot]

Done in 4577b51. Removed the credits prop entirely — creditsOverlay is now the only prop. Updated all three call sites: the mushroom identification page passes creditsOverlay={true}, the saved page drops the old credits={false} (default is no credits), and the species list is unchanged.