Mendesain Ulang Dashboard di Sekitar Satu Grafik Gelombang

Beberapa rilis menambahkan sebuah fitur. GeekBye v1.8.2 justru kebanyakan menghapus satu — dan penghapusan itulah ceritanya. Dalam satu sore di bulan Februari 2026, delapan belas commit mengubah home dashboard dari sebuah remote control perekaman menjadi tampilan analitik read-only: empat statistik dan satu grafik aktivitas. Di sepanjang jalan ia merilis grafik batang yang hidup dua puluh dua menit, grid kartu statistik yang hidup dua puluh menit, dan gelombang SVG buatan tangan yang menggantikan keduanya. Seluruh pencariannya terpelihara di stempel waktu commit, yang merupakan jenis dokumentasi desain terbaik yang ada.

Dashboard berhenti menjadi remote control

Sebelum rilis ini, home dashboard adalah panel kontrol. Ia dipimpin oleh sebuah hero card — widget perekaman besar dengan badge LIVE, tombol Pause/Resume/Stop, gumpalan gradien, dan hook useSessionState yang mengaitkan semuanya ke perekam. Dashboard mencoba menjadi dua hal sekaligus: tempat kamu melihat rapat-rapatmu dan tempat kamu mengendalikan perekam. Dua produk, satu layar, diam-diam bersaing.

v1.8.2 memilih satu. Ia menghapus hero card dan pengkabelan useSessionState — termasuk sebuah effect yang otomatis menavigasikanmu ke halaman detail sebuah rapat begitu sebuah sesi berakhir, yang persis jenis lompatan "membantu" yang mengejutkan orang di tengah alur. Memulai dan menyembunyikan perekam pindah ke sebuah toggle navbar biasa (tombol yang dialihfungsikan dan kehilangan sekitar seratus baris saat berubah dari pengontrol sesi menjadi sakelar on/off), didukung oleh handler IPC navbar:hide yang baru. Yang tersisa adalah dashboard yang melakukan satu hal: menunjukkan apa yang telah kamu rekam. Read-only. Tenang.

Ada sebuah bug kecil yang manusiawi di transisi itu yang layak disebut, karena inilah jenis hal yang diam-diam diperkenalkan oleh sebuah desain ulang dan ditangkap oleh mata yang jeli pada jam yang sama. Dua tombol sidebar baru — Start dan Hide — dirilis dengan ikon grid generik yang sama, jadi keduanya identik secara visual. Dua belas menit kemudian sebuah commit lanjutan memberi Start ikon play, memberi Hide ikon mata-tertutup, dan mewarnai Hide dengan amber, sehingga "buat aplikasi menghilang" terbaca sebagai tindakan yang disengaja alih-alih kembaran netral dari "start." Ikon adalah teks. Dua tombol yang tampak sama mengatakan hal yang sama, dan keduanya tidak bermaksud sama.

Grafik batang yang hidup dua puluh dua menit

Inilah bagian yang aku sukai, dan seluruhnya terbaca dari git log. Pada 16:29:34 versi pertama desain ulang mendarat: grafik aktivitas 7 hari yang digambar sebagai batang — kolom beranimasi, tinggi minimum agar hari-hari kecil tetap terlihat, tonjolan redup 2 piksel untuk hari bernilai nol. Masuk akal. Konvensional. Jenis grafik yang kamu ambil tanpa berpikir.

Pada 16:51:21 — dua puluh dua menit kemudian — ia dihapus. Commit penggantinya mengatakan persis apa yang ia lakukan: "ganti grafik batang dengan grafik area gelombang yang halus untuk aktivitas 7 hari." Dan pada 16:52:21, satu menit setelahnya, commit lain melucuti kartu membulat dan bingkai di sekeliling gelombang, "untuk tampilan yang lebih bersih."

Kenapa? Commit hanya mengatakan apa yang berubah, jadi kenapa-nya adalah sebuah pembacaan — tetapi bentuk datanya membuatnya jelas. Ini adalah alat di mana pengguna tipikal punya nol, satu, atau dua rapat pada hari mana pun. Tujuh batang, sebagian besar setinggi 2 piksel, tampak seperti lahan yang nyaris kosong. Tujuh angka yang sama digambar sebagai area terisi yang menerus tampak seperti sebuah tren — gelombang lembut yang naik di tempat minggu itu sibuk. Tidak ada yang dipalsukan; nilai sumbu y-nya identik. Desain ulang itu sekadar memilih pengodean yang membuat data jarang nan jujur terbaca sebagai sebuah bentuk alih-alih sebagai ketiadaan.

Statistiknya mendapat perlakuan yang sama pada jam yang sama. Versi pertama (16:29) menaruh empat angka dalam grid 2×4 kartu. Pada 16:49 grid itu mengerut menjadi satu strip statistik inline — satu baris berbingkai dengan pembatas setipis rambut, tipe huruf lebih kecil, satu kontainer alih-alih empat. Lima kotak di layar (empat kartu plus satu kartu grafik) menjadi dua (satu strip dan satu gelombang). PR berikutnya menambahkan satu sentuhan jujur lagi: label "Total Waktu" menjadi "Waktu dalam Rapat", karena total-dari-apa adalah pertanyaan wajar yang tak seorang pun seharusnya perlu tanyakan.

Dua puluh menit, dari versi pertama hingga final, semuanya di dalam satu pull request. Seandainya itu dipadatkan menjadi satu commit "desain ulang dashboard", pencariannya akan tak terlihat. Karena tidak, kamu bisa menyaksikan seorang desainer berkonvergensi secara real time.

Gelombang itu, secara mekanis

Di sini tidak ada library grafik. Gelombangnya adalah SVG inline yang dibangun di JSX, dan layak dilihat karena ia adalah resep kecil nan jujur yang bisa kamu curi untuk sparkline apa pun.

Smoothing-nya adalah triknya. Untuk setiap pasang titik yang bersebelahan, path memakai segmen cubic-bezier yang dua titik kontrolnya duduk di titik tengah horizontal di antara keduanya — cpx = (prev.x + curr.x) / 2 — dengan titik kontrol dijaga pada ketinggian masing-masing ujung. Itulah smoothing tangen-datar klasik: kurva meluncur melewati setiap titik data tanpa pernah melampaui di atas nilai tertinggi atau di bawah nilai terendah, yang justru akan dilakukan oleh spline Catmull-Rom yang naif. Untuk grafik tentang jumlah rapat, "jangan pernah menggambar tonjolan yang menyiratkan nilai yang tidak terjadi" bukanlah basa-basi; itu kebenaran. Area terisinya adalah kurva yang sama yang ditutup di sepanjang bawah dan dicat dengan gradien vertikal (cyan, memudar dari 30% hingga nyaris tak ada), dan garisnya menggambar dirinya sendiri lewat animasi pathLength framer-motion, dari kiri ke kanan.

Di bawah SVG ada perpipaan data, dan itulah pahlawan yang diam. Sebuah metode getAggregateStats() baru pada repository transkrip menjalankan tiga prepared statement terhadap tabel SQLite lokal transcript_sessions: total sepanjang waktu (jumlah, durasi terjumlah, durasi rata-rata), hitungan tujuh hari bergulir, dan bucket per hari lewat GROUP BY date(created_at). Lalu — dan inilah detail yang membuat grafiknya tangguh — sebuah loop JavaScript kecil menyusuri tujuh hari kalender terakhir dan mengisi-ulang setiap hari yang tidak dikembalikan oleh query, mendorong sebuah nol. Karena itu grafiknya dijamin tepat tujuh titik, selalu.

Jaminan itulah yang membuat kasus-kasus tepi lenyap alih-alih membutuhkan penjaga yang berserakan di seluruh view. Minggu kosong? Tujuh nol, dan sebuah Math.max(count, 1) pada penyebut menjaga garis tetap datar di bawah alih-alih membagi dengan nol. Satu titik data tunggal yang akan membuat formula jarak-x i / (n − 1) menghasilkan NaN? Tak mungkin — repository tak pernah mengeluarkan kurang dari tujuh. Label hari bahkan mengurai setiap bucket pada T12:00:00 alih-alih tengah malam telanjang, sehingga string YYYY-MM-DD tidak tergelincir ke hari sebelumnya di zona waktu UTC-negatif. Perbaiki bentuk datanya di sumber dan kode rendering pun boleh naif dengan sengaja.

Semuanya tinggal di mesin. Query statistik membaca database lokal, kembali lewat kanal IPC bertipe transcript:get-stats, dan beranimasi menjadi empat angka yang menghitung naik saat mount. Tidak ada apa pun tentang riwayat rapatmu yang meninggalkan laptop untuk menggambar grafik ini — yang, bagi alat yang merekam percakapanmu, adalah satu-satunya cara yang bisa diterima untuk membangun tampilan analitik.

Satu bug lagi, karena desain ulang menyeret mereka ke terang

Dibundel ke dalam rilis yang sama adalah sebuah perbaikan yang tak ada hubungannya dengan dashboard dan sepenuhnya berhubungan dengan jenis utang yang ditabrak oleh sebuah desain ulang. Gaya scrollbar gelap aplikasi telah melenceng menjadi dua definisi CSS yang bersaing untuk kelas yang sama — satu yang ungu lebih tua dan satu yang putih-di-atas-gelap lebih baru — dan mana yang menang bergantung pada urutan cascade. Lebih buruk lagi, hanya elemen yang ingat menambahkan kelas itu yang mendapat gaya sama sekali; yang lain jatuh kembali ke scrollbar terang default, dan scrollbar horizontal tak pernah diberi gaya karena aturan lama hanya menetapkan lebar, tak pernah tinggi. Perbaikan itu menghapus kedua definisi, memberi gaya scrollbar secara global pada setiap elemen, dan menghapus kelas yang kini mati dari sepuluh komponen yang selama ini membawanya. Ini adalah diff dua baris yang diulang sepuluh kali — pajak tak berkilau dari memberi gaya hal yang sama dua kali dan membiarkan keduanya bertahan.

Tiga hal yang diajarkan rilis ini

1. Kurangi untuk fokus. Dashboard menjadi lebih baik dengan melakukan lebih sedikit — kehilangan kontrol perekaman yang tak pernah ia butuhkan dan menjadi satu hal yang jelas. Layar yang sekaligus penampil dan remote adalah dua produk setengah jadi; pilih satu dan pindahkan yang lain ke tempat yang semestinya.
2. Pilih pengodean yang layak untuk datamu. Hitungan yang jarang terbaca sebagai ketiadaan di batang dan sebagai tren di grafik area, dari angka yang identik. Itu bukan pemolesan — itu memilih bentuk jujur yang membiarkan data nyata nan tipis berkomunikasi.
3. Jamin bentuk data di hulu. Loop isi-ulang-jadi-tujuh adalah alasan kode grafik tak punya pengecekan null yang berserakan: divide-by-zero, NaN satu-titik, dan hari yang hilang semuanya lenyap karena query menjanjikan tepat tujuh bucket. Rendering yang tangguh dimulai satu lapis di bawah.

Untuk bab sebelumnya dalam kisah v1, empat rilis dalam dua puluh enam jam (v1.7.6–v1.8.1); dan untuk keseluruhan alurnya, anatomi merilis software sampai sempurna.