Arayüz Temelleri — Bir Alan Kılavuzu

Modern bir uygulamaya bakıp “şu şeyin adı ne acaba?” diye düşündüyseniz — bu sayfa tam size göre.

Kullandığınız her arayüz, arayüz temelleri (UI primitives) olarak adlandırılan, şaşırtıcı derecede küçük bir yeniden kullanılabilir yapı taşı setinden oluşur. Bunların isimleri vardır. Bazen garip isimler. Ama bir kez metaforu gördüğünüzde, artık görmezden gelemezsiniz.

En Parlant~, tüm bunları hazır olarak sunan bir React bileşen kütüphanesi olan Mantine’i kullanır. İşte alan kılavuzunuz.

Mobilya Gibi Görünenler

Toast

Toast, ekranın kenarından beliren, birkaç saniye orada kalan ve sonra kayarak kaybolan küçük bir bildirimdir. Ekmek kızartma makinesinden fırlayan bir dilim ekmek gibi — ama yerçekimi ters çalışır ve sonunda geri gider.

En Parlant~‘da toast’lar sağ alt köşede (Mantine’in @mantine/notifications modülü aracılığıyla) şu gibi durumlar için görünür:

“Veritabanı başarıyla yüklendi” — hop
“TTS sesi yapılandırılmamış” — hop
“Lichess’e bağlanılamadı” — hop, ve biraz üzülürsünüz

Onları siz çağırmadınız. Kendileri gelir, mesajlarını iletir ve giderler. Arayüz dünyasının posta güvercinleridir.

Card

Card (kart), ilgili içerikleri bir arada gruplayan, kenarlığı veya gölgesi olan dikdörtgen bir kapsayıcıdır. Masanın üzerinde duran bir fişi düşünün — belirgin kenarları var, tek bir şey tutuyor ve onu alıp taşıyabilirsiniz.

En Parlant~‘da kartları şu yerlerde görürsünüz:

Veritabanı tarayıcısındaki oyun önizlemeleri (GameCard) — oyuncu adları, sonuç, tarih
Tahta pozisyonu düzenleyici (EditingCard) — özel bir pozisyon kurarken çevirdiğiniz kart
Veritabanları sayfasındaki veritabanı girişleri — her veritabanı bir ızgarada kendi kartına sahiptir

Kartların Paper adında yakın bir kuzeni vardır; o da aslında sanat okuluna gitmiş bir karttır. Aynı fikir — kenarlığı veya gölgesi olan bir kapsayıcı — ama daha az anlamsal yük taşır. Paper sadece “Ben bir yüzeyim” der. Analiz panellerinin ve veritabanı bilgi ekranlarının arkasındaki zemin olarak karşınıza çıkar.

Drawer / Sheet

Şu anda En Parlant~‘da kullanılmıyor, ama bilmeye değer: drawer (çekmece), ekranın kenarından kayan bir paneldir, tıpkı bir masa çekmecesi gibi. (Hepsi bu. Metaforun tamamı bu. O gün arayüz tasarımcıları çok kelimesi kelimesine davranmış.)

Yolunuzu Kesenler

Modal, dikkatinizi talep eden bir açılır pencere diyaloğudur. Arka planı grileştirir ve başka bir şey yapmadan önce onunla ilgilenmenizi zorunlu kılar. Arayüz kalıplarının küçük çocuğudur — “HEMEN BANA BAK.”

En Parlant~ modal’ları gerçekten odaklanmanızı gerektiren anlarda kullanır:

“Tüm verileri silmek istediğinizden emin misiniz?” (ClearDataModal) — hangi verileri yok edeceğinizi seçebileceğiniz onay kutuları ile
“Bir güncelleme mevcut” (UpdateModal) — indirme sırasında ilerleme çubuğu ile
“Bir oyun içe aktar” (ImportModal) — PGN yapıştırın, FEN girin veya bir bağlantı bırakın
“Yeni bir repertuvar oluştur” (CreateRepertoireModal) — adlandırın, yapılandırın, başlayın
“En Parlant~ Hakkında” (About) — sürüm bilgisi, katkıda bulunanlar, bilinen sahne arkası geçişi

Modal’lar şöyle der: “Bu bir konuşma. Ve şimdi yapıyoruz.”

Dialog

Dialog, modal’ın nazik kuzenidir. Mantine’de temelde aynı bileşendir, ama arayüz tasarım teorisinde dialog daha küçük ve daha odaklıdır — tek bir soru ve cevap. “Değişiklikler kaydedilsin mi?” Evet / Hayır. Bitti.

En Parlant~ bu tür hızlı evet-veya-hayır anları için ConfirmModal kullanır; örneğin kaydedilmemiş değişiklikleri silmek istediğinizi onaylamak gibi.

Gelip Gidenler

Tooltip, bir şeyin üzerine geldiğinizde beliren küçük bir etikettir. Kafanız karışmış görünüyorken cevabı fısıldayan yardımsever bir yabancıdır.

Tooltip’ler En Parlant~‘da her yerdedir. Neredeyse herhangi bir simge düğmesinin üzerine gelin ve bir tane göreceksiniz:

↻ düğmesinin üzerine gelin → “Yenile”
Kısaltılmış bir dosya yolunun üzerine gelin → tam yol görünür
Bir açıklama sembolünün üzerine gelin → o sembolün anlamı
Analiz panelindeki bir hamlenin üzerine gelin → minyatür bir tahta önizlemesi çıkar

Tooltip’ler orijinal “kullanım kılavuzuna gerek yok” çözümüdür.

Popover, yüksek lisans yapmış bir tooltip’tir. Sadece bir metin etiketi göstermek yerine, her şeyi içerebilir — düğmeler, görseller, hatta minik bir satranç tahtası.

En Parlant~‘da motor analizindeki bir hamlenin üzerine geldiğinizde, bir popover o pozisyondaki tahtanın önizlemesini oluşturur. Bir tooltip’tir, ama görsel malzeme getirmiştir.

Menu (menü), bir şeye tıkladığınızda (veya sağ tıkladığınızda) görünen bir eylem listesidir. Bilgisayar tarihinin başlangıcından beri bunları kullanıyorsunuz — Dosya, Düzen, Görünüm. Biliyorsunuz.

En Parlant~‘da iki çeşidi var:

Üst çubuk menüleri — Mantine’in Menu bileşeni ile oluşturulmuş klasik Dosya / Düzen / Görünüm menü çubuğu. Sağ tarafta klavye kısayolları listelenmiş. O kadar eski bir tasarım kalıbı ki emekliliğe hak kazanmış.
Bağlam menüleri — oyun ağacındaki bir hamleye sağ tıklayın ve Varyantı Yükselt, Buradan Sil ve Satırı Kopyala gibi seçenekler gelir. Bunlar ekstra cilalı görünüm için mantine-contextmenu kütüphanesini kullanır.

Menülerin kendi alt sözlüğü vardır: Menu.Target (tıkladığınız şey), Menu.Dropdown (görünen liste), Menu.Item (her seçenek) ve Menu.Divider (“farklı bölüm başlıyor” diyen ince çizgi).

Alanı Düzenleyenler

Stack ve Group

Bunlar düzenin birbirini tamamlayan ikilisidir.

Stack öğeleri dikey olarak düzenler — birinin üstüne diğeri. Kitap yığmak gibi.
Group öğeleri yatay olarak düzenler — yan yana. Satranç taşlarını bir rafa dizmek gibi.

Her biri kelimenin tam anlamıyla 100’den fazla dosyada yer alır. Uygulamanın tamamındaki en yaygın bileşenlerdir. Her şeyin düzgünce dizildiği her yerde bir Stack veya Group sorumludur.

Flex

Flex, Stack ve Group’un İsviçre çakısı kuzenidir. Öğelerin sarılması, genişlemesi, küçülmesi, ters çevrilmesi veya başka türlü kuraldışı davranması gerektiğinde, Flex CSS Flexbox modeli üzerinde tam kontrolle devreye girer.

Analiz panelinin hamle listesinde kullanılır — metin gibi sarılıp akan o hamle dizileri var ya? Ağır işi yapan Flex’tir.

Box

Box, silindir şapka takan bir <div>’dir. Tek başına hiçbir şey yapmaz — sadece genel bir kapsayıcıdır. Ama Mantine’in stil özelliklerini kabul eder, bu da onu “şu şeyin etrafına bir şey lazım” durumları için inanılmaz kullanışlı bir sarmalayıcı yapar.

Box 150’den fazla dosyada yer alır. Bileşen kütüphanesinin koli bandıdır.

Center

Tam olarak adının söylediğini yapar. Bir şeyi ortaya koyar. Yatay olarak. Dikey olarak. İkisi birden. Bitti.

Boş durumlarda karşınıza çıkar — hesap bağlanmamış, veritabanı yüklenmemiş, henüz veri yok. Büyük bir simge, bir mesaj ve Center her şeyin mükemmel konumlandırıldığından emin olur. Kimse merkez dışı bir boş durum görmek istemez.

SimpleGrid

Basit olan bir ızgara. Kaç sütun istediğinizi söylersiniz, o da kartlarınızı pencere yeniden boyutlandırıldıkça yeniden düzenlenen düzgün bir ızgarada sıralar. Veritabanı sayfası, veritabanı kartlarını duyarlı bir ızgarada yerleştirmek için bunu kullanır.

ScrollArea

İçeriği taştığında kaydırılan bir kapsayıcı. Bunun bedava olması gerektiğini düşünürdünüz — CSS overflow: auto ile öyledir de bir bakıma — ama ScrollArea stillendirilmiş kaydırma çubukları, momentum kaydırma ve taşma algılama ekler. Oyun ağacı panelini, analiz satırlarını ve içeriğin kutusundan uzun olabileceği her yeri sarar.

AppShell

AppShell, ana düzendir — tüm uygulamanın iskeleti. Başlığın nereye gideceğini, kenar çubuğunun nereye gideceğini ve ana içeriğin nerede yaşayacağını tanımlar. Diğer her şey onun içine yerleşir.

Sadece bir kez kullanırsınız. Evin temelidir.

Portal

Portal, sihirli bir solucan deliğidir. Bir bileşeni DOM ağacındaki normal konumunun dışında oluşturur ve başka bir yere — genellikle belgenin köküne — yerleştirir. Popover’ların ve tahta önizlemelerinin overflow: hidden olan üst kapsayıcılar tarafından kırpılmasını önleyen budur.

Bir Portal’ı asla görmezsiniz. Sadece etkilerini görürsünüz. Arayüz bileşenlerinin sahne arkası ekibidir.

Etkileşimde Bulunduklarınız

Button

Metin içeren tıklanabilir bir dikdörtgen. Bunu biliyorsunuz. Mantine’de düğmeler varyantlar halinde gelir:

filled — düz renk, yüksek vurgu. “Bana tıkla, önemliyim.”
outline — sadece kenarlık. “Bir seçeneğim, ama baskı yok.”
subtle — neredeyse görünmez. “İhtiyacın olursa buradayım.”
default — nötr bir orta yol.

En Parlant~ bunların hepsini 150’den fazla dosyada kullanır. En yaygın kalıp: bir modal’ın altındaki bir Group düğme — “İptal” (subtle) ve “Onayla” (filled). Klasik.

ActionIcon

ActionIcon, metin etiketinden vazgeçip tamamen simge yaşam tarzına kendini adamış bir düğmedir. Kompakt, kare şeklindedir ve amacını iletmek için simgesine (artı bir tooltip) güvenir.

Araç çubuğu düğmeleri, panel kontrolleri, kapatma düğmeleri — hepsi ActionIcon’dur. Bir eylem sunmanın en alan verimli yoludur.

Switch

Switch, küçük bir ışık anahtarına benzeyen bir geçiştir. Sola çevirin, sağa çevirin. Açık. Kapalı.

Ayarlarda switch’ler ikili seçimleri kontrol eder:

Ses açık/kapalı
TTS anlatımı etkin/devre dışı
Koyu mod / açık mod

Fiziksel metaforu o kadar iyidir ki büyükanne ve büyükbabanız bile anlar.

Slider

Slider, bir değer seçmek için ileri geri sürüklediğiniz bir tutamağı olan bir izdir. Düzleştirilmiş bir ses düğmesi gibi.

En Parlant~ kaydırıcıları şunlar için kullanır:

Yazı tipi boyutu — ayarlamak için sürükleyin
Ses seviyesi — ayarlamak için sürükleyin (elbette)
CPU çekirdekleri — motor kaç çekirdek kullanmalı?
Hash belleği — motorun hash tablosu için ne kadar RAM?

Bir de bir aralık seçmek için iki tutamağı olan RangeSlider vardır — oyunları Elo derecesine göre filtrelemek (ör. 2000–2200) ve zaman aralıkları için kullanılır.

SegmentedControl

Aynı anda tam olarak birinin seçili olduğu bir düğme satırı. Araba radyosunun ön ayarları gibi — birine basın, diğerleri çıkar.

Şunlar arasında geçiş yapmak için kullanılır:

Analiz grafiğinde santipiyede değerlendirme ve Kazanma/Berabere/Kayıp yüzdeleri
Farklı hamle notasyon biçimleri
Motor satır sayısı

Checkbox ve Select

Bunları biliyorsunuz. Onay kutuları “geçerli olanları seçin” için, Select açılır menüler “bu listeden birini seçin” için. Uygulama genelinde ayarlarda, filtrelerde ve formlarda görünürler. Veri Temizleme modal’ında kendi yıkımınızı seçebildiğiniz özellikle tatmin edici bir onay kutusu seti vardır.

Autocomplete

Siz yazarken tamamlamalar öneren bir metin girişi. Veritabanı tarayıcısındaki oyuncu araması bunu kullanır — bir isim yazmaya başlayın ve eşleşen oyuncular aşağıda belirir.

FileInput ve DateInput

FileInput tıklandığında bir dosya seçici açar — PGN dosyalarını yüklemek için içe aktarma modal’ında kullanılır. DateInput tarih seçmek için bir takvim açar — oyunları tarihe göre filtrelemek için kullanılır. Daha az hassasiyet gerektiğinde MonthPickerInput ve YearPickerInput de vardır (Lichess veritabanını aya göre filtreleme, Masters veritabanını yıla göre filtreleme).

İlerleme Gösterenler

Progress Bar

Bir şeyin ne kadar ilerlediğini göstermek için soldan sağa dolan yatay bir çubuk. Uygulama güncellemelerinde (indirme ilerlemesi) ve — daha yaratıcı bir şekilde — analiz panelinde Kazanma/Berabere/Kayıp olasılıklarını göstermek için kullanılır. Üç renkli bölüm (beyaz, gri, siyah) çubuğu orantılı olarak doldurur. İlerleme göstergesi kılığına girmiş küçük bir çubuk grafiktir.

Loader

Loader, “üzerinde çalışıyorum, bir saniye ver” diyen dönen bir animasyondur. Veritabanları yüklenirken, oyuncu istatistikleri getirilirken veya herhangi bir asenkron işlem gerçekleşirken görünür.

Skeleton

Skeleton, henüz yüklenmemiş içeriğin şeklini taklit eden gri bir yer tutucudur. Boş bir ekran veya dönen bir simge yerine, kartların ve metnin nerede olacağının hayalet anahatlarını görürsünüz. Yükleme durumunun mimari planıdır — “gerçek mobilya yolda.”

Veritabanı sayfası, kart ızgarası yüklenirken skeleton’ları kullanır. Tek başına dönen bir simgeden çok daha zariftir.

LoadingOverlay

Yüklenirken bir bileşenin üzerine atılan yarı saydam bir örtü. Analiz grafiği bunu kullanır — örtünün arkasında grafiği hâlâ görebilirsiniz, ama soluklaşmıştır ve üstünde dönen bir simge vardır. “Hâlâ buradayım, sadece güncelleme yapıyorum.”

Etiketleyenler

Badge

Badge (rozet), küçük renkli bir etikettir — bir konferanstaki isim etiketi gibi. En Parlant~‘da SpeedBadge bileşeni, zaman kontrollerini renk kodlamasıyla göstermek için rozetler kullanır:

🩷 Pembe — UltraBullet
🔴 Kırmızı — Bullet
🟠 Turuncu — Blitz
🟢 Yeşil — Rapid
🔵 Mavi — Classical
🟣 Mor — Correspondence

Her rozet küçük, renkli ve oyun hızını bir bakışta anında iletir.

Kbd

Keyboard’un (klavye) kısaltması. Karakteristik kabartmalı tuş stiliyle bir klavye tuşu görüntüler. Tuş atama ayarlarında Ctrl + Z gibi şeyleri göstermek için kullanılır. Klavyenizdeki gerçek fiziksel bir tuşun CSS ile yeniden oluşturulmasıdır. Keyifli bir şekilde skeomorfiktir.

Ayıranlar ve Daralanlar

Divider

Bölümleri ayıran yatay bir çizgi. Hepsi bu. Bir çizgi. Ama stillendirilmiş bir çizgi ve isteğe bağlı olarak ortasında bir metin etiketi olabilir — içe aktarma modal’ındaki “bir PGN yapıştır” ile “bir FEN gir” arasını ayıran ”— VEYA —” ayırıcısı gibi.

Otuzdan fazla dosya Divider kullanır. Görünüşe göre şeylerin birbirinden ayrılması çok gerekiyor.

Collapse

Collapse, yumuşak bir animasyonla genişleyip daralan bir bölümdür. Göstermek için tıklayın, gizlemek için tıklayın. Veritabanı filtre seçenekleri bunu kullanır — her filtreyi her zaman görmeniz gerekmez, bu yüzden siz isteyene kadar bir Collapse’ın arkasına saklanırlar.

Süslü Olanlar

RichTextEditor

TipTap üzerine kurulmuş, tam donanımlı bir ne-görüyorsanız-onu-alırsınız metin düzenleyicisi. Kalın, italik, listeler, her şey. Oyun açıklamaları yazmak için kullanılır — bir hamlenin neden harika veya berbat olduğunu açıklamak için eklediğiniz yorum notları.

Bu, tek bir hücreden çok bir bileşik organizma olan tek temel bileşendir. Perde arkasında TipTap + ProseMirror + Mantine stillendirmesidir. Ama kullanıcının bakış açısından, biçimlendirmenin çalıştığı bir metin kutusudur.

AreaChart

@mantine/charts’tan (Recharts’ı saran), AreaChart değerlendirme grafiğini güçlendirir — analiz panelinin altında akan o dalga formu. Orta çizginin üstündeki beyaz alan Beyaz’ın kazandığı, altındaki siyah alan Siyah’ın kazandığı anlamına gelir.

Grafik üzerinde herhangi bir noktaya tıklayarak o hamleye atlayabilirsiniz. İnteraktif veri görselleştirme satranç analiziyle buluşuyor. Hatta özel tooltip’leri ve oyun aşamalarını (açılış → orta oyun → son oyun) işaretleyen referans çizgileri bile var.

DataTable

mantine-datatable kütüphanesi aracılığıyla — sıralama, sayfalama, satır seçimi ve filtreleme özellikli tam donanımlı bir veri tablosu. Veritabanı tarayıcısının oyun listesini, oyuncu listesini ve turnuva listesini güçlendirir. Bir satranç uygulamasında olduğunu bilen bir elektronik tablodur.

Görünmez Olanlar

Bazı temel bileşenler kendileri görünür bir şey oluşturmaz ama diğer her şeyin çalışmasını sağlar:

MantineProvider — tüm uygulamayı sarar ve temayı sağlar (renkler, koyu mod, bileşen varsayılanları)
Portal — oluşturulan içeriği DOM’un farklı bir bölümüne ışınlar
useHotkeys — klavye kısayollarını bağlayan bir hook (bileşen değil)
useForm — form durumunu, doğrulamayı ve hata işlemeyi yönetir
useDebouncedValue — bir arama tetiklemeden önce yazmayı bırakmanızı bekler. Nazik hook.

Tam Envanter

Referans olarak, En Parlant~‘da kullanılan her temel bileşen ailesi, ne yaptıklarına göre gruplandırılmış halde:

Kategori	Temel Bileşenler
Düzen	AppShell, Box, Center, Flex, Group, Stack, SimpleGrid, ScrollArea, Portal
Yüzeyler	Card, Paper
Katmanlar	Modal, Tooltip, Popover, Menu, ContextMenu, LoadingOverlay
Bildirimler	Toast (`@mantine/notifications` aracılığıyla)
Düğmeler	Button, ActionIcon, CloseButton, ThemeIcon
Girdiler	TextInput, Textarea, NumberInput, Select, Autocomplete, Checkbox, Switch, Slider, RangeSlider, SegmentedControl, FileInput, DateInput, MonthPickerInput, YearPickerInput
Veri görüntüleme	Table, DataTable, Badge, Code, Kbd, Rating, Image
Tipografi	Text, Title, Anchor
İlerleme	Progress, Loader, Skeleton
Yapı	Divider, Collapse
Zengin içerik	RichTextEditor (TipTap), AreaChart (Recharts)
Tema	MantineProvider, createTheme, useColorScheme
Hook’lar	useForm, useHotkeys, useToggle, useDebouncedValue, useClickOutside, useElementSize

Tamamı Mantine v8 ve ekosistem paketlerinden alınmıştır: @mantine/core, @mantine/notifications, @mantine/dates, @mantine/charts, @mantine/form, @mantine/tiptap, mantine-datatable ve mantine-contextmenu.

Artık Biliyorsunuz

Bir dahaki sefere ekranınızın köşesinden küçük bir mesajın kayarak çıktığını gördüğünüzde — o bir toast’tur. Oyun önizlemesinin etrafındaki dikdörtgen — o bir karttır. İçerik yüklenmeden önce titreşen gri lekeler — onlar skeleton’lardır.

İsimlerini öğrendikten sonra onları her yerde görmeye başlarsınız. Her uygulamada. Her web sitesinde. Aynı birkaç düzine temel bileşen, binlerce farklı şekilde yeniden düzenlenmiş.

Sonuna kadar Lego.