Saklar Mode Chat Saya Pindah ke Puncak Sidebar

Ada dua mode di halaman chat saya: mencari artikel, atau bertanya tentang saya. Masalahnya, saklar yang memindah kedua mode itu tidak kelihatan. Letaknya menempel di form input di dasar sidebar, jadi pengguna harus menggulung isi riwayat obrolan sampai habis dulu untuk menyadari bahwa pilihan itu ada. Commit ini memindahkannya ke puncak sidebar, dan mengerjakan satu pertanyaan kecil yang sering saya lewatkan: kalau sebuah kontrol menentukan apa yang akan dikerjakan halaman, ia harus terlihat sebelum keputusan diambil, bukan setelahnya.

Dugaan Salah: Ini Cuma Soal Selera Visual

Awalnya saya menganggap posisi lama tidak jelek, hanya kurang cantik. Saklarnya berupa dua chip rapi di dalam bingkai, bagian dari form input, dan form memang identik dengan dasar sidebar di banyak aplikasi. Saya bahkan sempat menimbang cukup memberi warna aktif yang lebih kontras.

Yang saya lewatkan: urutan tata letak adalah urutan keputusan. Mode memengaruhi apa yang terjadi ketika pengguna mengetik dan mengirim, jadi keputusan memilih mode itu terjadi sebelum interaksi dengan form. Kalau alat untuk memilih itu berada di bawah, pengguna baru menyadarinya setelah lewat titik keputusan. Ini bukan soal selera, melainkan soal urutan informasi. Begitu dipahami begitu, satu-satunya tempat yang masuk akal adalah paling atas, sebelum apa pun yang bisa menggulung.

Baris Kode yang Bergerak, Kontrak yang Dipertahankan

Di ChatThreadPanel.tsx, kedua chip saya angkat keluar dari form dan dipasang di grid grid grid-cols-2 gap-1 p-3 di puncak komponen, di atas bar riwayat. Kode tombolnya hampir tidak berubah, dan justru itu poinnya:

<div className="grid grid-cols-2 gap-1 p-3 pb-2">
  <button type="button" aria-pressed={mode === "search"}
    onClick={() => onModeChange("search")}>...</button>
  <button type="button" aria-pressed={mode === "about"}
    onClick={() => onModeChange("about")}>...</button>
</div>

Atribut type="button" ikut pindah tanpa diubah. Secara dokumentasi MDN, tombol tanpa type eksplisit di dalam form berperilaku sebagai tombol submit [1]; chip yang kini tinggal di luar form memang tidak lagi punya risiko itu, tetapi mempertahankan type eksplisit membuat tombolnya aman bila kelak dipindah kembali ke dalam form, dan niatnya terbaca di kode. Sama halnya dengan aria-pressed, yang menandai tombol sebagai toggle dan menyatakan state aktifnya ke pembaca layar [2]. Relokasi bukan alasan membongkar kontrak aksesibilitas yang sudah benar.

Pembeda visual aktif tetap dua rasa: mode pencarian aktif dapat latar solid mint dengan teks hitam, mode tentang-saya aktif cukup garis tepi mint dengan teks berwarna. Kontras solid untuk tindakan utama, outline untuk sekunder, pola yang sama dengan chip lama, hanya kini di tempat yang terlihat.

Form yang Menyusut Jadi Bukti

Efek samping yang paling saya suka: form input menyusut jadi tanggung jawabnya saja. Tidak ada lagi grid pemilih mode di dalamnya; sekarang isinya persis plus tombol kirim, dipisah garis atas tipis. Satu blok UI, satu tanggung jawab. Saklar mode bukan bagian dari tindakan mengirim, jadi tidak ada alasan ia hidup di dalam elemen form.

Pola yang bisa dipinjam dari commit ini: buka layar dengan kontrol yang menentukan mode, biarkan konten yang bisa menggulung berada di bawahnya, dan jaga atribut semantik tetap terpasang saat memindahkan elemen. Grid grid-cols-2 dari Tailwind mengurus dua kolom sama lebar tanpa satu baris CSS kustom pun [3]. Perubahan sepuluh menit, tapi cara membacanya yang mengubah cara saya menata sidebar berikutnya.

Sumber

• MDN Web Docs, atribut aria-pressed [2]
• MDN Web Docs, elemen button [1]
• Dokumentasi Tailwind CSS, grid-template-columns [3]