For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /tr/docs/mobile/ui.md (or send Accept: text/markdown).

Yerel UI ve temalandırma

Web'in tasarım kararlarını yansıtan ekran primitifleri ve paylaşılan görünüm modelleri.

Bu kılavuz hakkında sor

Başlamadan önce

İndirdiğiniz supastack projenizi Visual Studio Code'de Dosya → Klasörü Aç'ı kullanarak açın ve ardından Terminal → Yeni Terminal'i seçin. Depo kökü package.json'u, uygulamaları ve paketleri içeren klasördür. Aşağıdaki komutu orada çalıştırın ve terminalini açık bırakın. Bir komut tanınmazsa devam etmeden önce araç kurulum kılavuzunu tamamlayın.

Önce platform eğitimini okuyun. Sunucu, tarayıcı veya telefon isteklerini yanıtlayan uygulama işlemidir. Web, apps/web/.env.local'yi okur, Expo, apps/mobile/.env.local'yi okur ve veritabanı geçiş komutları root .env'yi okur. Veritabanı olmayan/gösterge paneli gösterimi, Postgres'nin taşınmasını gerektiren gerçek/auth hesaplarından ayrıdır. Yalnızca telefona veya masaüstüne yönelik bir ödeme, ayrı olarak çalışan bir Web arka ucuna ihtiyaç duyar.

corepack pnpm --filter @supastack/mobile start

Kurulum ve yapılandırma

Ekran temel bileşenleri apps/mobile/src/ui içinde yer alır — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — ve apps/mobile/src/theme üzerinden stillendirilir; böylece web için alınan görsel bir karar yerel arayüze yansır. Görünüm ayarlarında “Web uygulamasıyla eşleştir” modu (GET/PUT /api/mobile/appearance üzerinden apps/mobile/src/theme/synced.ts), oturum açmış kullanıcının senkronize edilmiş web renk paketini yerel önbellekten uygular.

packages/ui-native, platformlar arası görünüm-modeli yardımcılarını taşır: createEntitlementCard, sunucu yetkilendirme durumunu bir kartın başlığına, durumuna, ayrıntısına, eylem etiketine ve erişilebilirlik etiketine dönüştürür; böylece web ve mobil aynı erişim kararını işler.

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

Uygulama iş akışı

Yeni öğeler yazmadan önce ekranları paylaşılan primitiflerden kurun; boyutları ve renkleri sabit kodlamak yerine tema modülünün token'larını ve yoğunluğunu eşleştirin.

Ürün metnini primitiflerin dışında tutun — metin kararlarını değil etiketleri işlerler. Özel satırlarda erişilebilirlik etiketlerini createEntitlementCard'ın yaptığı gibi taşıyın.

Doğrulama ve sorun giderme

Bir ekranı açık ve koyu temada, en büyük metin boyutunda, ekran okuyucu etiketleriyle ve küçük bir cihazda doğrulayın. %200 metinde kesilen veya kırpan bir bileşen bitmemiştir.