# rasalopa/picodex architecture

> Architecture diagram of the GitHub repository rasalopa/picodex, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rasalopa/picodex
- Repository: https://github.com/rasalopa/picodex

## Overview

PicoDex is a client-side browser tool for managing a Pico Launcher SD card. The user opens a card through the app; the shared SD context reads its library and metadata, and feature views support organizing games, managing art and stats, and inspecting card health. Other documented workflows include screenshots, folder banners, file associations, and loader compatibility. The README documents these capabilities, but sampled source is incomplete, so uncertain internal call links are omitted.

Main entry points: [`src/state/SdContext.tsx`](https://github.com/rasalopa/picodex/blob/main/src/state/SdContext.tsx) (SD context), [`src/lib/sdcard.ts`](https://github.com/rasalopa/picodex/blob/main/src/lib/sdcard.ts) (SD card access), [`src/views/HealthView.tsx`](https://github.com/rasalopa/picodex/blob/main/src/views/HealthView.tsx) (Card health view), [`src/components/CoverPicker.tsx`](https://github.com/rasalopa/picodex/blob/main/src/components/CoverPicker.tsx) (Cover picker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and card access"]
  node_app["App workspace<br/>[App.tsx]"]
  node_sdcontext["SD context<br/>[SdContext.tsx]"]
  node_sdcard["SD card access<br/>[sdcard.ts]"]
end

subgraph group_library["Library and organization"]
  node_libraryview["Library overview<br/>[LibraryView.tsx]"]
  node_systemgallery["System game gallery<br/>[SystemGallery.tsx]"]
  node_dropimport["ROM import<br/>[DropImport.tsx]"]
  node_scanlibrary["Library scanning<br/>[scan.ts]"]
  node_rom["ROM parsing<br/>[rom.ts]"]
  node_gamedata["Game stats data<br/>[gamedata.ts]"]
  node_statsview["Stats editor view<br/>[StatsView.tsx]"]
  node_statseditor["Stats editor<br/>[StatsEditor.tsx]"]
end

subgraph group_art["Artwork management"]
  node_coversview["Cover manager<br/>[CoversView.tsx]"]
  node_coverpicker["Cover picker<br/>[CoverPicker.tsx]"]
  node_matching["Title matching<br/>[matching.ts]"]
  node_thumbnails["Thumbnail catalogs<br/>[thumbnails.ts]"]
  node_coverart["Artwork encoding<br/>[coverart.ts]"]
  node_banner["Folder banners<br/>[banner.ts]"]
end

subgraph group_cardtools["Card tools"]
  node_healthview["Card health view<br/>[HealthView.tsx]"]
  node_healthscan["Card health scan<br/>[scan.ts]"]
  node_loaderscan["Loader file scan<br/>[loaderScan.ts]"]
  node_loaderversion["Loader release ID<br/>[loaderVersion.ts]"]
  node_compatview["Loader compatibility<br/>[CompatSheet.tsx]"]
  node_screenshotsview["Screenshot gallery"]
  node_screenshots["Screenshot handling<br/>[screenshots.ts]"]
  node_associations["File associations"]
end

node_user(("SD card user"))
node_card[("Pico Launcher SD")]
node_thumbnailservice["libretro thumbnails"]

node_user -->|"opens workspace"| node_app
node_app -->|"provides card state"| node_sdcontext
node_sdcontext -->|"reads and writes"| node_sdcard
node_sdcard -->|"accesses files"| node_card
node_sdcontext -->|"scans library"| node_scanlibrary
node_scanlibrary -->|"reads game files"| node_card
node_sdcontext -->|"parses and serializes"| node_gamedata
node_sdcontext -->|"writes game data"| node_card
node_libraryview -->|"shows systems"| node_systemgallery
node_dropimport -->|"organizes ROMs"| node_card
node_systemgallery -->|"opens editor"| node_statseditor
node_statseditor -->|"updates stats"| node_sdcontext
node_systemgallery -->|"opens picker"| node_coverpicker
node_coverpicker -->|"loads catalog"| node_thumbnails
node_thumbnails -.->|"fetches art"| node_thumbnailservice
node_coverpicker -->|"composes previews"| node_coverart
node_coverpicker -->|"writes art"| node_sdcard
node_coversview -->|"matches titles"| node_matching
node_healthview -->|"scans card"| node_healthscan
node_healthview -->|"scans loader files"| node_loaderscan
node_healthview -->|"identifies release"| node_loaderversion
node_healthview -->|"removes selected files"| node_sdcard
node_compatview -->|"reports game compatibility"| node_card
node_screenshotsview -->|"manages captures"| node_screenshots
node_screenshotsview -->|"reads or deletes"| node_sdcard
node_associations -->|"edits settings"| node_sdcard
node_banner -->|"encodes icon art"| node_coverart

click node_app "https://github.com/rasalopa/picodex/blob/main/src/App.tsx"
click node_sdcontext "https://github.com/rasalopa/picodex/blob/main/src/state/SdContext.tsx"
click node_sdcard "https://github.com/rasalopa/picodex/blob/main/src/lib/sdcard.ts"
click node_libraryview "https://github.com/rasalopa/picodex/blob/main/src/views/LibraryView.tsx"
click node_systemgallery "https://github.com/rasalopa/picodex/blob/main/src/views/SystemGallery.tsx"
click node_dropimport "https://github.com/rasalopa/picodex/blob/main/src/components/DropImport.tsx"
click node_scanlibrary "https://github.com/rasalopa/picodex/blob/main/src/lib/scan.ts"
click node_rom "https://github.com/rasalopa/picodex/blob/main/src/lib/rom.ts"
click node_gamedata "https://github.com/rasalopa/picodex/blob/main/src/lib/gamedata.ts"
click node_statsview "https://github.com/rasalopa/picodex/blob/main/src/views/StatsView.tsx"
click node_statseditor "https://github.com/rasalopa/picodex/blob/main/src/components/StatsEditor.tsx"
click node_coversview "https://github.com/rasalopa/picodex/blob/main/src/views/CoversView.tsx"
click node_coverpicker "https://github.com/rasalopa/picodex/blob/main/src/components/CoverPicker.tsx"
click node_matching "https://github.com/rasalopa/picodex/blob/main/src/lib/matching.ts"
click node_thumbnails "https://github.com/rasalopa/picodex/blob/main/src/lib/thumbnails.ts"
click node_coverart "https://github.com/rasalopa/picodex/blob/main/src/lib/coverart.ts"
click node_banner "https://github.com/rasalopa/picodex/blob/main/src/lib/banner.ts"
click node_healthview "https://github.com/rasalopa/picodex/blob/main/src/views/HealthView.tsx"
click node_healthscan "https://github.com/rasalopa/picodex/blob/main/src/lib/scan.ts"
click node_loaderscan "https://github.com/rasalopa/picodex/blob/main/src/lib/loaderScan.ts"
click node_loaderversion "https://github.com/rasalopa/picodex/blob/main/src/lib/loaderVersion.ts"
click node_compatview "https://github.com/rasalopa/picodex/blob/main/src/components/CompatSheet.tsx"
click node_screenshotsview "https://github.com/rasalopa/picodex/blob/main/src/views/ScreenshotsView.tsx"
click node_screenshots "https://github.com/rasalopa/picodex/blob/main/src/lib/screenshots.ts"
click node_associations "https://github.com/rasalopa/picodex/blob/main/src/views/AssociationsView.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_sdcontext,node_sdcard,node_user toneBlue
class node_libraryview,node_systemgallery,node_dropimport,node_scanlibrary,node_rom,node_gamedata,node_statsview,node_statseditor,node_card toneAmber
class node_coversview,node_coverpicker,node_matching,node_thumbnails,node_coverart,node_banner toneMint
class node_healthview,node_healthscan,node_loaderscan,node_loaderversion,node_compatview,node_screenshotsview,node_screenshots,node_associations toneRose
class node_thumbnailservice toneIndigo
```

## Components

### App and card access

- [App workspace](https://github.com/rasalopa/picodex/blob/main/src/App.tsx): `src/App.tsx`
- [SD context](https://github.com/rasalopa/picodex/blob/main/src/state/SdContext.tsx): `src/state/SdContext.tsx`
- [SD card access](https://github.com/rasalopa/picodex/blob/main/src/lib/sdcard.ts): `src/lib/sdcard.ts`

### Library and organization

- [Library overview](https://github.com/rasalopa/picodex/blob/main/src/views/LibraryView.tsx): `src/views/LibraryView.tsx`
- [System game gallery](https://github.com/rasalopa/picodex/blob/main/src/views/SystemGallery.tsx): `src/views/SystemGallery.tsx`
- [ROM import](https://github.com/rasalopa/picodex/blob/main/src/components/DropImport.tsx): `src/components/DropImport.tsx`
- [Library scanning](https://github.com/rasalopa/picodex/blob/main/src/lib/scan.ts): `src/lib/scan.ts`
- [ROM parsing](https://github.com/rasalopa/picodex/blob/main/src/lib/rom.ts): `src/lib/rom.ts`
- [Game stats data](https://github.com/rasalopa/picodex/blob/main/src/lib/gamedata.ts): `src/lib/gamedata.ts`
- [Stats editor view](https://github.com/rasalopa/picodex/blob/main/src/views/StatsView.tsx): `src/views/StatsView.tsx`
- [Stats editor](https://github.com/rasalopa/picodex/blob/main/src/components/StatsEditor.tsx): `src/components/StatsEditor.tsx`

### Artwork management

- [Cover manager](https://github.com/rasalopa/picodex/blob/main/src/views/CoversView.tsx): `src/views/CoversView.tsx`
- [Cover picker](https://github.com/rasalopa/picodex/blob/main/src/components/CoverPicker.tsx): `src/components/CoverPicker.tsx`
- [Title matching](https://github.com/rasalopa/picodex/blob/main/src/lib/matching.ts): `src/lib/matching.ts`
- [Thumbnail catalogs](https://github.com/rasalopa/picodex/blob/main/src/lib/thumbnails.ts): `src/lib/thumbnails.ts`
- [Artwork encoding](https://github.com/rasalopa/picodex/blob/main/src/lib/coverart.ts): `src/lib/coverart.ts`
- [Folder banners](https://github.com/rasalopa/picodex/blob/main/src/lib/banner.ts): `src/lib/banner.ts`

### Card tools

- [Card health view](https://github.com/rasalopa/picodex/blob/main/src/views/HealthView.tsx): `src/views/HealthView.tsx`
- [Card health scan](https://github.com/rasalopa/picodex/blob/main/src/lib/scan.ts): `src/lib/scan.ts`
- [Loader file scan](https://github.com/rasalopa/picodex/blob/main/src/lib/loaderScan.ts): `src/lib/loaderScan.ts`
- [Loader release ID](https://github.com/rasalopa/picodex/blob/main/src/lib/loaderVersion.ts): `src/lib/loaderVersion.ts`
- [Loader compatibility](https://github.com/rasalopa/picodex/blob/main/src/components/CompatSheet.tsx): `src/components/CompatSheet.tsx`
- [Screenshot gallery](https://github.com/rasalopa/picodex/blob/main/src/views/ScreenshotsView.tsx): `src/views/ScreenshotsView.tsx`
- [Screenshot handling](https://github.com/rasalopa/picodex/blob/main/src/lib/screenshots.ts): `src/lib/screenshots.ts`
- [File associations](https://github.com/rasalopa/picodex/blob/main/src/views/AssociationsView.tsx): `src/views/AssociationsView.tsx`

### Other components

- **SD card user**
- **Pico Launcher SD**
- **libretro thumbnails**

## Connections

- SD card user → App workspace: opens workspace
- App workspace → SD context: provides card state
- SD context → SD card access: reads and writes
- SD card access → Pico Launcher SD: accesses files
- SD context → Library scanning: scans library
- Library scanning → Pico Launcher SD: reads game files
- SD context → Game stats data: parses and serializes
- SD context → Pico Launcher SD: writes game data
- Library overview → System game gallery: shows systems
- ROM import → Pico Launcher SD: organizes ROMs
- System game gallery → Stats editor: opens editor
- Stats editor → SD context: updates stats
- System game gallery → Cover picker: opens picker
- Cover picker → Thumbnail catalogs: loads catalog
- Thumbnail catalogs → libretro thumbnails: fetches art
- Cover picker → Artwork encoding: composes previews
- Cover picker → SD card access: writes art
- Cover manager → Title matching: matches titles
- Card health view → Card health scan: scans card
- Card health view → Loader file scan: scans loader files
- Card health view → Loader release ID: identifies release
- Card health view → SD card access: removes selected files
- Loader compatibility → Pico Launcher SD: reports game compatibility
- Screenshot gallery → Screenshot handling: manages captures
- Screenshot gallery → SD card access: reads or deletes
- File associations → SD card access: edits settings
- Folder banners → Artwork encoding: encodes icon art