# File Type Icons v1

## 1. Doel

Bestandstype-iconen voegen waarde toe omdat de mediaslot links van de naam dan niet alleen een lege placeholder of generiek bestandssymbool is, maar een snelle visuele hint geeft over het soort bestand. Dat maakt de lijst scanbaarder zonder de dual-pane file manager om te vormen tot een media- of documentbrowser.

Dit past goed naast de bestaande image thumbnails:
- afbeeldingen kunnen visueel herkend worden via echte thumbnails
- overige bestandstypen krijgen een compact, voorspelbaar icoon
- de naamkolom blijft strak uitgelijnd

De winst zit vooral in:
- sneller herkennen van directories, video’s, pdf’s en codebestanden
- rustigere lijst dan met overal dezelfde generieke file-icon
- geen extra backendcomplexiteit

## 2. Scope

Aanbevolen v1-scope voor eigen icon-types:
- directory
- generic file
- image
- video
- pdf
- text
- markdown
- json
- yaml/yml
- css
- javascript
- typescript
- html
- xml
- shell
- python
- dockerfile/containerfile

Niet in v1:
- merk- of app-specifieke iconensets
- tientallen niche-extensies
- dynamische OS-native icon lookup
- thumbnails voor video/pdf/documenten

## 3. Mediaslot gedrag

Aanbevolen gedrag in de bestaande mediaslot links van de naam:

- image + thumbnails aan:
  - echte thumbnail
- image + thumbnails uit:
  - image-icoon of generiek file-icoon
- directory:
  - folder-icoon
- video:
  - video-icoon
- pdf:
  - pdf-icoon
- text / markdown / config / codebestanden:
  - passend type-icoon
- onbekend type:
  - generic file-icoon

Belangrijke regel:
- de mediaslot blijft altijd bestaan
- thumbnails en iconen delen exact dezelfde vaste slotbreedte
- de rij-uitlijning verandert dus niet per bestandstype of setting

## 4. Visuele stijl

Aanbevolen stijlrichting:
- compacte, rustige iconen
- eenvoudige vormen
- subtiele kleurcodering per categorie
- geen zware gradients
- geen drukke illustraties
- geen letterlijke macOS-kopie, maar wel dezelfde nette soberheid

Praktische ontwerprichtlijnen:
- folder-icoon iets warmer/neutraal
- image-icoon subtiel groen/blauw
- video-icoon subtiel paars/blauwgrijs of neutraal media-accent
- pdf-icoon ingetogen roodaccent
- code/configtypes vooral via kleine accentkleur en eenvoudig documentvorm-icoon
- generic file-icoon neutraal grijs/blauwgrijs

Doel:
- herkenbaarheid zonder visuele herrie
- lijst moet primair een file manager lijst blijven, niet een dashboard met bonte badges

## 5. Technische richting

Aanbevolen v1-richting:
- frontend-only
- geen backendwijzigingen
- geen nieuwe dependencies

Beste implementatievorm voor v1:
- inline SVG of kleine SVG-templates in frontendcode
- gekoppeld aan CSS classes voor kleur en grootte

Waarom niet via externe icon library:
- extra dependency zonder echte noodzaak
- grotere bundle en meer onderhoud
- minder controle over rustige, consistente stijl

Waarom niet puur CSS-only iconen:
- mogelijk, maar minder flexibel en vaak minder helder voor meerdere bestandscategorieën

Waarom inline SVG waarschijnlijk het best is:
- lichtgewicht
- goed stijlbaar met CSS
- makkelijk compact te houden
- eenvoudig uit te breiden met extra typen later

## 6. Extensie/content-type mapping

Aanbevolen mappingstrategie:
- primair op bestandsnaam/extensie
- speciale bestandsnamen expliciet ondersteunen

Voorgestelde regels:
- directory -> `folder`
- `jpg`, `jpeg`, `png`, `webp`, `gif`, `bmp`, `avif` -> `image`
- `mp4`, `mkv`, `mov`, `avi`, `webm` -> `video`
- `pdf` -> `pdf`
- `txt`, `log`, `ini`, `cfg`, `conf` -> `text`
- `md`, `markdown` -> `markdown`
- `json` -> `json`
- `yaml`, `yml` -> `yaml`
- `css` -> `css`
- `js`, `mjs`, `cjs` -> `javascript`
- `ts`, `tsx` -> `typescript`
- `html`, `htm` -> `html`
- `xml` -> `xml`
- `sh`, `bash`, `zsh`, `fish` -> `shell`
- `py` -> `python`
- `Dockerfile` / `Containerfile` / gelijknamige extensieloze bestandsnamen -> `docker`
- fallback -> `file`

Belangrijk:
- content-type detectie vanuit backend is hier niet nodig voor v1
- frontendmapping is voldoende en onderhoudbaar
- thumbnails voor images blijven de echte afbeelding gebruiken als de setting aan staat

## 7. Regressierisico

Belangrijkste risico’s:
- mediaslot-uitlijning verschuift
- iconen worden te dominant of te kleurrijk
- thumbnails en iconen krijgen verschillende afmetingen
- current row / selected row styling verliest contrast
- de lijst wordt visueel drukker in plaats van rustiger

Beheersmaatregelen:
- vaste mediaslotbreedte behouden
- identieke bounding box voor iconen en thumbnails
- iconen klein en ingetogen houden
- selectie/current row styling boven iconstyling laten domineren
- geen extra badges, labels of tekstchips in de rij toevoegen

## 8. Teststrategie

### UI smoke/regressietests
- mediaslot blijft aanwezig
- directory render gebruikt folder-icoon-class
- pdf/video/image/generic typeclasses zijn aanwezig in renderlogica
- thumbnails aan/uit blijft de mediaslot intact houden
- lijst render met current row en selected row blijft bestaan

### Handmatige validatie
- directorys zijn snel herkenbaar
- image zonder thumbnail toont netjes image-icoon
- image met thumbnail toont echte thumbnail zonder layoutverschuiving
- video toont video-icoon
- pdf toont pdf-icoon
- code/configbestanden voelen visueel onderscheidbaar maar niet schreeuwerig
- inactive pane blijft rustig leesbaar
- naamkolom blijft voldoende breed en scanbaar

## 9. Aanbeveling

Aanbevolen v1-richting met laag regressierisico:
- frontend-only
- inline SVG-iconen of kleine herbruikbare SVG-templates
- mapping op extensie/bestandsnaam
- vaste mediaslot behouden
- thumbnails alleen voor images als `Show thumbnails` aan staat
- voor alle overige typen een rustig, compact type-icoon
- onbekende types terug laten vallen op generic file-icoon

Kort samengevat:
- geen ffmpeg
- geen video thumbnails
- geen backendwijzigingen
- geen icon library dependency
- wel een kleine, onderhoudbare uitbreiding van de bestaande mediaslot zodat de lijst visueel slimmer en rustiger wordt
