UI-primitiver — En feltguide
Har du noen gang sett på en moderne app og tenkt «hva kaller de den tingen?» — da er denne siden for deg.
Hvert grensesnitt du bruker, er bygget opp av et overraskende lite sett med gjenbrukbare byggesteiner kalt UI-primitiver. De har navn. Rare navn, noen ganger. Men når du først ser metaforen, kan du ikke la være å se den igjen.
En Parlant~ bruker Mantine, et React-komponentbibliotek som leverer alle disse rett ut av boksen. Her er feltguiden din.
De som høres ut som møbler
Section titled “De som høres ut som møbler”En toast er et lite varsel som dukker opp fra kanten av skjermen, henger der i noen sekunder, og så glir bort igjen. Som en brødskive som spretter opp av brødristeren — bortsett fra at tyngdekraften virker i revers og den til slutt går tilbake ned igjen.
I En Parlant~ vises toasts i nedre høyre hjørne (via Mantine sin @mantine/notifications) for ting som:
- «Database lastet inn» — popp
- «TTS-stemme ikke konfigurert» — popp
- «Klarte ikke koble til Lichess» — popp, og du blir litt trist
Du har aldri bedt om dem. De bare dukker opp, leverer beskjeden sin og forsvinner. De er brevduene i UI-verdenen.
Et card (kort) er en rektangulær beholder med en ramme eller skygge som grupperer relatert innhold sammen. Se for deg et kartotekkort som ligger på et skrivebord — det har en tydelig kant, det inneholder én ting, og du kan plukke det opp og flytte det.
I En Parlant~ ser du kort for:
- Forhåndsvisning av partier i databaseleseren (
GameCard) — spillernavn, resultat, dato - Redigering av brettposisjon (
EditingCard) — kortet du snur når du setter opp en egendefinert posisjon - Databaseoppføringer på databasesiden — hver database får sitt eget kort i et rutenett
Kort har en nær slektning kalt Paper, som i bunn og grunn er et kort som har gått på kunstskole. Samme idé — en beholder med en ramme eller skygge — men med mindre semantisk betydning. Paper sier bare «jeg er en overflate.» Det dukker opp som bakgrunn bak analysepaneler og databaseinformasjonsskjermer.
Drawer / Sheet
Section titled “Drawer / Sheet”Brukes ikke i En Parlant~ for øyeblikket, men verdt å kjenne til: en drawer er et panel som glir inn fra kanten av skjermen, som en skrivebordsskuff. (Det var det. Det er hele metaforen. UI-designere var veldig bokstavelige den dagen.)
De som blokkerer veien din
Section titled “De som blokkerer veien din”En modal er en popup-dialog som krever oppmerksomheten din. Den grår ut bakgrunnen og tvinger deg til å ta stilling til den før du kan gjøre noe annet. Den er UI-mønstrenes smårolling — «SE PÅ MEG AKKURAT NÅ.»
En Parlant~ bruker modaler for øyeblikk som virkelig trenger fokuset ditt:
- «Er du sikker på at du vil slette alle data?» (
ClearDataModal) — med avkrysningsbokser så du kan velge hvilke data som skal utslettes - «En oppdatering er tilgjengelig» (
UpdateModal) — med en fremdriftslinje mens den laster ned - «Importer et parti» (
ImportModal) — lim inn en PGN, skriv inn en FEN, eller slipp en lenke - «Opprett et nytt repertoar» (
CreateRepertoireModal) — gi det et navn, konfigurer det, kjør - «Om En Parlant~» (
About) — versjonsinformasjon, kreditering, den vanlige backstagepasset
Modaler sier: «Dette er en samtale. Vi tar den nå.»
Dialog
Section titled “Dialog”En dialog er modalens høflige fetter. I Mantine er de i bunn og grunn samme komponent, men i UI-designteori er en dialog mindre og mer fokusert — ett enkelt spørsmål og svar. «Lagre endringer?» Ja / Nei. Ferdig.
En Parlant~ bruker ConfirmModal for disse raske ja-eller-nei-øyeblikkene, som å bekrefte at du vil forkaste ulagrede endringer.
De som kommer og går
Section titled “De som kommer og går”Tooltip
Section titled “Tooltip”En tooltip er en liten etikett som dukker opp når du holder musepekeren over noe. Det er den hjelpsomme fremmede som hvisker svaret når du ser forvirret ut.
Tooltips er overalt i En Parlant~. Hold musepekeren over nesten hvilken som helst ikonknapp, og du får en:
- Hold over ↻-knappen → «Last inn på nytt»
- Hold over en avkortet filsti → hele stien vises
- Hold over et annotasjonssymbol → hva det symbolet betyr
- Hold over et trekk i analysepanelet → en miniatyr-forhåndsvisning av brettet dukker opp
Tooltips er den opprinnelige «ingen bruksanvisning nødvendig.»
Popover
Section titled “Popover”En popover er en tooltip som har tatt en mastergrad. I stedet for bare å vise en tekstetikett, kan den inneholde hva som helst — knapper, bilder, til og med et lite sjakkbrett.
I En Parlant~, når du holder musepekeren over et trekk i motoranalysen, gjengir en popover en forhåndsvisning av brettet i den posisjonen. Det er en tooltip, men den tok med seg visuelle hjelpemidler.
En meny er en liste med handlinger som dukker opp når du klikker (eller høyreklikker) på noe. Du har brukt disse siden datamaskinens morgen — Fil, Rediger, Vis. Du kjenner drillen.
En Parlant~ har to varianter:
- Topplinjen-menyer — den klassiske Fil / Rediger / Vis-menylinjen, bygget med Mantine sin
Menu-komponent. Hurtigtaster oppført til høyre. Et designmønster så gammelt at det har pensjon. - Kontekstmenyer — høyreklikk på et trekk i partitreet og du får valg som Forfrem variant, Slett herfra og Kopier linje. Disse bruker
mantine-contextmenu-biblioteket for ekstra finpuss.
Menyer har sitt eget underspråk: Menu.Target (det du klikker på), Menu.Dropdown (listen som vises), Menu.Item (hvert alternativ), og Menu.Divider (den tynne linjen som sier «ny seksjon nå»).
De som organiserer rommet
Section titled “De som organiserer rommet”Stack & Group
Section titled “Stack & Group”Disse er smør og brød i layout-verdenen.
- Stack ordner ting vertikalt — én oppå den andre. Som å stable bøker.
- Group ordner ting horisontalt — side ved side. Som å stille sjakkbrikker på en hylle.
De dukker opp i bokstavelig talt 100+ filer hver. De er de vanligste komponentene i hele appen. Hver gang ting er pent ordnet, er det en Stack eller Group som står bak.
Flex er Stack og Group sin sveitsiske lommekniv-fetter. Når ting trenger å brytes, strekkes, krympes, reverseres, eller ellers oppføre seg uregjerlig, trår Flex inn med full kontroll over CSS Flexbox-modellen.
Brukt i analysepanelets trekkliste — de sekvensene av trekk som brytes og flyter som tekst? Det er Flex som gjør det tunge løftet.
En Box er en <div> i flosshatt. Den gjør ingenting alene — den er bare en generisk beholder. Men den aksepterer Mantine sine stylingprops, noe som gjør den til en utrolig hendig wrapper for «jeg trenger en ting rundt denne andre tingen.»
Box dukker opp i 150+ filer. Den er komponentbibliotekets gaffateip.
Center
Section titled “Center”Gjør nøyaktig det navnet sier. Plasserer noe i midten. Horisontalt. Vertikalt. Begge deler. Ferdig.
Dukker opp i tomme tilstander — når det ikke er noen kontoer koblet til, ingen databaser lastet inn, ingen data ennå. Et stort ikon, en melding, og Center som sørger for at alt er perfekt plassert. Ingen liker en dårlig sentrert tom tilstand.
SimpleGrid
Section titled “SimpleGrid”Et rutenett som er enkelt. Du forteller det hvor mange kolonner du vil ha, og det ordner kortene dine i et pent rutenett som tilpasser seg når vinduet endrer størrelse. Databasesiden bruker det til å ordne databasekort i et responsivt rutenett.
ScrollArea
Section titled “ScrollArea”En beholder som ruller når innholdet flommer over. Du skulle tro dette var gratis — og det er det på en måte, med CSS overflow: auto — men ScrollArea legger til stilte rullefelt, treghetsrulling og overflytdeteksjon. Den omslutter partitre-panelet, analyselinjer og alle steder der innhold kan vokse seg høyere enn boksen sin.
AppShell
Section titled “AppShell”AppShell er hovedlayouten — skjelettet til hele applikasjonen. Den definerer hvor topplinjen skal være, hvor sidefeltet skal være, og hvor hovedinnholdet lever. Alt annet nestes inni den.
Du bruker den bare én gang. Den er husets fundament.
Portal
Section titled “Portal”En Portal er et magisk ormehull. Den gjengir en komponent utenfor sin normale posisjon i DOM-treet og plasserer den et annet sted — vanligvis ved roten av dokumentet. Det er slik popovers og brettforhåndsvisninger unngår å bli klippet av overordnede beholdere med overflow: hidden.
Du ser aldri en Portal. Du ser bare effektene av den. Den er sceneteamet blant UI-komponentene.
De du samhandler med
Section titled “De du samhandler med”Button
Section titled “Button”Et klikkbart rektangel med tekst. Denne kjenner du. I Mantine kommer knapper i varianter:
- filled — heldekkende farge, høy vektlegging. «Klikk på meg, jeg er viktig.»
- outline — bare en ramme. «Jeg er et alternativ, men null press.»
- subtle — knapt synlig. «Jeg er her hvis du trenger meg.»
- default — en nøytral mellomting.
En Parlant~ bruker alle disse på tvers av 150+ filer. Det vanligste mønsteret: en Group med knapper nederst i en modal — «Avbryt» (subtle) og «Bekreft» (filled). Klassisk.
ActionIcon
Section titled “ActionIcon”En ActionIcon er en knapp som ga opp tekstetiketten sin og satset fullt på ikonlivsstilen. Den er kompakt, firkantet og stoler på ikonet sitt (pluss en tooltip) for å formidle formålet sitt.
Verktøylinjeknapper, panelkontroller, lukkeknapper — alt er ActionIcons. De er den mest plasseffektive måten å tilby en handling på.
Switch
Section titled “Switch”En Switch er en vekslebryter som ser ut som en liten lysbryter. Vipp den til venstre, vipp den til høyre. På. Av.
I innstillinger styrer switchene binære valg:
- Lyd på/av
- TTS-opplesing aktivert/deaktivert
- Mørk modus / lys modus
Den fysiske metaforen er så god at selv besteforeldrene dine forstår den.
Slider
Section titled “Slider”En Slider er et spor med et håndtak du drar frem og tilbake for å velge en verdi. Som en volumknapp som ble flattrykt.
En Parlant~ bruker slidere for:
- Skriftstørrelse — dra for å justere
- Volum — dra for å justere (selvfølgelig)
- CPU-kjerner — hvor mange kjerner skal motoren bruke?
- Hash-minne — hvor mye RAM til motorens hash-tabell?
Det finnes også en RangeSlider med to håndtak for å velge et intervall — brukt til å filtrere partier etter Elo-rating (f.eks. 2000–2200) og tidsperioder.
SegmentedControl
Section titled “SegmentedControl”En rad med knapper der nøyaktig én er valgt om gangen. Det er som forhåndsinnstilte knapper på en bilradio — trykk på én, og de andre spretter ut.
Brukt til å veksle mellom:
- Centipawn-evaluering vs. Seier/Remis/Tap-prosenter på analysediagrammet
- Ulike trekknotasjonsformater
- Antall motorlinjer
Checkbox & Select
Section titled “Checkbox & Select”Disse kjenner du. Avkrysningsbokser for «velg så mange som passer,» Select-rullegardinmenyer for «velg én fra denne listen.» De dukker opp i innstillinger, filtre og skjemaer gjennom hele appen. Clear Data-modalen har et spesielt tilfredsstillende sett med avkrysningsbokser der du kan velge din egen ødeleggelse.
Autocomplete
Section titled “Autocomplete”Et tekstfelt som foreslår fullføringer mens du skriver. Spillersøket i databaseleseren bruker dette — begynn å skrive et navn, og matchende spillere dukker opp nedenfor.
FileInput & DateInput
Section titled “FileInput & DateInput”FileInput åpner en filvelger når du klikker — brukt i importmodalen for å laste inn PGN-filer. DateInput åpner en kalender for å velge en dato — brukt til å filtrere partier etter dato. Det finnes også MonthPickerInput og YearPickerInput for når du trenger mindre presisjon (Lichess-databasefiltrering etter måned, Masters-databasefiltrering etter år).
De som viser fremdrift
Section titled “De som viser fremdrift”Progress Bar
Section titled “Progress Bar”En horisontal linje som fylles fra venstre til høyre for å vise hvor langt noe har kommet. Brukt under appoppdateringer (nedlastningsfremdrift) og — mer kreativt — for å vise Seier/Remis/Tap-sannsynligheter i analysepanelet. Tre fargede seksjoner (hvit, grå, svart) fyller linjen proporsjonalt. Det er et lite stolpediagram forkledd som en fremdriftsindikator.
Loader
Section titled “Loader”En Loader er en snurrende animasjon som sier «jeg jobber med det, gi meg et sekund.» Dukker opp mens databaser lastes inn, spillerstatistikk hentes, eller noe asynkront skjer.
Skeleton
Section titled “Skeleton”Et Skeleton er en grå plassholder som etterligner formen på innhold som ikke har lastet inn ennå. I stedet for en blank skjerm eller en spinner ser du spøkelsesomriss av hvor kort og tekst kommer til å være. Det er den arkitektoniske blåkopien av en lastetilstand — «de ekte møblene er på vei.»
Databasesiden bruker skeletons mens kortrutenettet laster. Mye mer elegant enn en spinner alene.
LoadingOverlay
Section titled “LoadingOverlay”Et halvgjennomsiktig teppe kastet over en komponent mens den laster. Analysediagrammet bruker dette — du kan fortsatt se diagrammet bak overlegget, men det er dimmet, og det er en spinner oppå. «Jeg er fortsatt her, bare oppdaterer.»
De som merker ting
Section titled “De som merker ting”Et Badge er en liten farget etikett — som et navneskilt på en konferanse. I En Parlant~ bruker SpeedBadge-komponenten badges til å vise tidskontroller med fargekoding:
- 🩷 Rosa — UltraBullet
- 🔴 Rød — Bullet
- 🟠 Oransje — Blitz
- 🟢 Grønn — Rapid
- 🔵 Blå — Classical
- 🟣 Lilla — Correspondence
Hvert badge er bittelite, fargerikt og kommuniserer partiets tempo med et blikk.
Kort for keyboard (tastatur). Viser en tastaturtast med den karakteristiske hevede-tast-stilen. Brukt i hurtigtastinnstillingene for å vise ting som Ctrl + Z. Det er en CSS-gjenskaping av en faktisk fysisk tast på tastaturet ditt. Herlig skeuomorfisk.
De som skiller og kollapser
Section titled “De som skiller og kollapser”Divider
Section titled “Divider”En horisontal linje som skiller seksjoner. Det er det. Det er en strek. Men det er en stilet strek, og den kan valgfritt ha en tekstetikett i midten — som «— ELLER —»-skillelinjen i importmodalen som skiller «lim inn en PGN» fra «skriv inn en FEN.»
Over tretti filer bruker Divider. Det viser seg at ting trenger å bli separert ganske ofte.
Collapse
Section titled “Collapse”En Collapse er en seksjon som utvider og trekker seg sammen med en myk animasjon. Klikk for å avsløre, klikk for å skjule. Databasefilteralternativene bruker dette — du trenger ikke alltid å se alle filtre, så de gjemmer seg bak en Collapse til du vil ha dem.
De fancy
Section titled “De fancy”RichTextEditor
Section titled “RichTextEditor”En fullverdig «det du ser er det du får»-tekstredigerer, bygget på TipTap. Fet, kursiv, lister, hele pakka. Brukt til å skrive partiannotasjoner — de kommentarnotatene du legger til for å forklare hvorfor et trekk var genialt eller forferdelig.
Dette er den ene primitiven som er mer en sammensatt organisme enn en enkelt celle. Under panseret er det TipTap + ProseMirror + Mantine-styling. Men fra brukerens perspektiv er det bare en tekstboks der formatering fungerer.
AreaChart
Section titled “AreaChart”Fra @mantine/charts (som wrapper Recharts), driver AreaChart evalueringsgrafen — den bølgeformen som løper langs bunnen av analysepanelet. Hvitt areal over midtlinjen betyr at hvit vinner; svart under betyr at svart vinner.
Du kan klikke på et hvilket som helst punkt på diagrammet for å hoppe til det trekket. Interaktiv datavisualisering møter sjakkanalyse. Det har til og med tilpassede tooltips og referanselinjer som markerer partifasene (åpning → mellomspill → sluttspill).
DataTable
Section titled “DataTable”Via mantine-datatable-biblioteket — en fullverdig datatabell med sortering, paginering, radvalg og filtrering. Driver databaseleserens partiliste, spillerliste og turneringsliste. Det er et regneark som vet at det er i en sjakkapp.
De usynlige
Section titled “De usynlige”Noen primitiver gjengir ikke noe synlig selv, men får alt annet til å fungere:
- MantineProvider — omslutter hele appen og leverer temaet (farger, mørk modus, komponentstandarder)
- Portal — teleporterer gjengitt innhold til en annen del av DOM-en
- useHotkeys — en hook (ikke en komponent) som kobler opp hurtigtaster
- useForm — håndterer skjematilstand, validering og feilhåndtering
- useDebouncedValue — venter til du slutter å skrive før den utløser et søk. Den høflige hooken.
Den komplette oversikten
Section titled “Den komplette oversikten”For referanse, her er hver primitivfamilie som brukes i En Parlant~, gruppert etter hva de gjør:
| Kategori | Primitiver |
|---|---|
| Layout | AppShell, Box, Center, Flex, Group, Stack, SimpleGrid, ScrollArea, Portal |
| Overflater | Card, Paper |
| Overlegg | Modal, Tooltip, Popover, Menu, ContextMenu, LoadingOverlay |
| Varsler | Toast (via @mantine/notifications) |
| Knapper | Button, ActionIcon, CloseButton, ThemeIcon |
| Inputfelter | TextInput, Textarea, NumberInput, Select, Autocomplete, Checkbox, Switch, Slider, RangeSlider, SegmentedControl, FileInput, DateInput, MonthPickerInput, YearPickerInput |
| Datavisning | Table, DataTable, Badge, Code, Kbd, Rating, Image |
| Typografi | Text, Title, Anchor |
| Fremdrift | Progress, Loader, Skeleton |
| Struktur | Divider, Collapse |
| Rikt innhold | RichTextEditor (TipTap), AreaChart (Recharts) |
| Tematisering | MantineProvider, createTheme, useColorScheme |
| Hooks | useForm, useHotkeys, useToggle, useDebouncedValue, useClickOutside, useElementSize |
Alt hentet fra Mantine v8 og dets økosystempakker: @mantine/core, @mantine/notifications, @mantine/dates, @mantine/charts, @mantine/form, @mantine/tiptap, mantine-datatable, og mantine-contextmenu.
Så nå vet du det
Section titled “Så nå vet du det”Neste gang du ser en liten melding gli opp fra hjørnet av skjermen — det er en toast. Rektangelet rundt en forhåndsvisning av et parti — det er et card. De grå klumpene som flimrer før innholdet lastes inn — det er skeletons.
Når du først har lært navnene, begynner du å se dem overalt. I hver app. På hver nettside. De samme par dusin primitivene, omarrangert på tusen forskjellige måter.
Det er Lego, helt til bunns.