Files

T

asepharyana d59b59a7a7 feat: migrate frontend to Astro + expand AI moderation + backend admin/runtime config

Frontend:
- migrate from Vite to Astro (astro.config.mjs, pages/, layouts/)
- add admin panel, settings page, command palette, error boundary
- refactor App.tsx, MascotChatbot, Sidebar, Header, DashboardLayout
- update API client, WebSocket, auth, dashboard features

Backend:
- add admin module and config routes
- refactor middlewares, Redis connection, WebSocket server/bridge
- add runtime config loader

Discord Gateway:
- refactor AI moderation: circuit breaker, concurrency limiter, fallback processor
- add media analysis client, Seaxng search, user profile learner
- add new drizzle migration

Shared:
- extend database schema, add new config fields

2026-07-02 00:02:41 +07:00

8.3 KiB

Raw Blame History

BETE Design System — Master Index

"A design system is not a collection of components. It's a collection of decisions." — Menenun takdir visual untuk IMPHNEN, di atas kanvas Amphoreus.

🌌 Filosofi: The Three Pillars

1. Glass & Light — Estetika Transparan

Kita membangun bukan dengan tembok beton visual, tapi dengan lapisan kaca yang meneruskan cahaya. Setiap komponen adalah panele kaca buram (frosted glass) yang:

Menampilkan depth melalui backdrop blur dan layering opacity
Menggunakan light sebagai material — glow, shadow, highlight sebagai indikator state
Memberi kesan ruang tiga dimensi di antarmuka dua dimensi

2. Fluid Motion — Gerak yang Bermakna

Animasi bukan hiasan — ia adalah bahasa spasial yang memberitahu pengguna:

"Dari mana elemen ini datang?" → Transisi masuk
"Ke mana ia pergi?" → Transisi keluar
"Apa yang terjadi?" → Feedback mikro (hover, klik, state change)
Semua gerak mengikuti easing curve yang konsisten (lihat core/04-motion-system.md)

3. Spatial Memory — Ingatan Visual

Seperti ingatan Amphoreus yang abadi, antarmuka kita harus:

Konsisten — warna, spacing, tipografi yang sama di setiap sudut
Prediktif — pengguna tahu di mana mencari sesuatu
Responsif — beradaptasi tanpa kehilangan identitas

📂 Struktur Documentasi

design/
├── _index.md                    ← Kamu di sini
│
├── core/                        ← Fondasi design token
│   ├── 01-color-system.md       ← Sistem warna (OKLCH + HCT + semantic tokens)
│   ├── 02-typography.md         ← Tipografi (type scale + font system + rhythm)
│   ├── 03-spatial-system.md     ← Grid, spacing, layout tokens
│   ├── 04-motion-system.md      ← Animasi physics & choreography
│   └── 05-component-architecture.md ← Arsitektur komponen
│
├── patterns/                    ← Pola desain reusable
│   ├── 06-interaction-patterns.md    ← Micro-interactions
│   ├── 07-data-visualization.md      ← Charts & metrics
│   ├── 08-moderation-ui.md           ← Moderation UI patterns
│   ├── 09-state-machines.md          ← Loading/empty/error states
│   └── 10-responsive-system.md       ← Breakpoints & layout system
│
├── services/                    ← Per-service design guidelines
│   ├── 11-frontend-ui.md             ← Web frontend (React/Tailwind)
│   ├── 12-backend-api-guidelines.md  ← REST/WS API design
│   └── 13-gateway-event-design.md    ← Discord Gateway event schemas
│
├── system/                      ← Sistem lintas service
│   ├── 14-accessibility.md           ← Aksesibilitas (a11y)
│   ├── 15-theme-architecture.md      ← Theme engine & CSS custom properties
│   └── 16-sound-design.md            ← Audio feedback system
│
└── assets/                      ← Diagram, ilustrasi, referensi visual
    └── (future: SVG assets, figma exports, reference images)

🔗 Dependency Graph (Wajib Dibaca Berurutan)

01-color-system ──────────────────────────────────────────┐
     │                                                     │
     ├──→ 02-typography ──────────────────────────────┐   │
     │        │                                        │   │
     │        └──→ 03-spatial-system ──────────────┐   │   │
     │                  │                           │   │   │
     │                  └──→ 04-motion-system ──┐   │   │   │
     │                            │             │   │   │   │
     │                            └──→ 05-component-architecture
     │                                        │
     └────────────────────────────────────────┴──→ 06-interaction-patterns
                                                       │
                                                       ├──→ 07-data-visualization
                                                       ├──→ 08-moderation-ui
                                                       ├──→ 09-state-machines
                                                       └──→ 10-responsive-system
                                                                │
                          ┌─────────────────────────────────────┴──┐
                          ↓                                        ↓
              11-frontend-ui                              12-backend-api-guidelines
                                                                │
                                                         13-gateway-event-design
                                                                │
                          ┌─────────────────────────────────────┘
                          ↓
              14-accessibility ──→ 15-theme-architecture ──→ 16-sound-design

Bacaan yang disarankan:

Mulai dengan core/01-color-system.md — karena warna adalah keputusan desain paling fundamental.
Lanjut ke core/02-typography.md dan core/03-spatial-system.md untuk fondasi layout.
core/04-motion-system.md dan core/05-component-architecture.md sebagai jembatan ke pola.
Pola-pola di patterns/ bisa dibaca sesuai kebutuhan fitur.
services/ dan system/ dibaca terakhir, bergantung pada layer yang sedang dikerjakan.

📐 Prinsip Desain Utama

Prinsip	Deskripsi	Contoh Penerapan
Glassmorphism	Latar belakang transparan dengan efek blur untuk hierarki visual	Card, Sidebar, Modal
Monochromatic Depth	Satu rona warna dengan variasi lightness untuk depth	Sistem warna OKLCH
Kinetic Language	Gerakan sebagai komunikasi spasial	Transisi tab, notifikasi
Gaussian Memory	Elemen yang "diingat" posisinya antar navigasi	Sidebar state, scroll position
Sound as Feedback	Audio sebagai layer konfirmasi non-visual	Moderasi alert, koneksi voice
Progressive Disclosure	Informasi kompleks diungkap bertahap	Detail panel, analytics drill-down
Forgiving Layout	Layout yang toleran terhadap konten kosong/error	Empty states, error boundaries

🚀 Quick Reference: Token Categories

Kategori	Prefix CSS	Contoh
Warna	`--clr-*`	`--clr-primary`, `--clr-surface`
Spacing	`--sp-*`	`--sp-xs`, `--sp-md`, `--sp-xl`
Typography	`--fs-`, `--fw-`, `--lh-*`	`--fs-body`, `--fw-semibold`
Radius	`--rd-*`	`--rd-sm`, `--rd-full`
Shadow	`--sh-*`	`--sh-card`, `--sh-modal`
Z-index	`--z-*`	`--z-header`, `--z-modal`
Timing	`--dur-*`	`--dur-fast`, `--dur-slow`
Easing	`--ease-*`	`--ease-out`, `--ease-spring`

🧭 Status Documentasi

Dokumen	Status	Prioritas
`core/01-color-system.md`	✅ Selesai	P0
`core/02-typography.md`	✅ Selesai	P0
`core/03-spatial-system.md`	✅ Selesai	P0
`core/04-motion-system.md`	✅ Selesai	P0
`core/05-component-architecture.md`	✅ Selesai	P0
`patterns/06-interaction-patterns.md`	✅ Selesai	P0
`patterns/07-data-visualization.md`	✅ Selesai	P1
`patterns/08-moderation-ui.md`	✅ Selesai	P1
`patterns/09-state-machines.md`	✅ Selesai	P0
`patterns/10-responsive-system.md`	✅ Selesai	P0
`services/11-frontend-ui.md`	✅ Selesai	P0
`services/12-backend-api-guidelines.md`	✅ Selesai	P1
`services/13-gateway-event-design.md`	✅ Selesai	P1
`system/14-accessibility.md`	✅ Selesai	P0
`system/15-theme-architecture.md`	✅ Selesai	P1
`system/16-sound-design.md`	✅ Selesai	P1

"Ingatan kita akan tetap abadi, takkan pernah mencair..." ❄️🩵

8.3 KiB Raw Blame History