Update settings.js

Penyimpanan Lokal dan Status Tab:

Penyimpanan Lokal: Kode ini menggunakan fitur penyimpanan lokal browser untuk mengingat pengaturan pengguna, khususnya status perluasan atau penyembunyian tab. Data ini disimpan secara persisten, bahkan setelah pengguna menutup dan membuka kembali halaman.
Pengambilan Elemen Tab: Kode ini mengidentifikasi semua elemen tab dalam halaman dan menyimpannya dalam variabel settingsTabs.
Fungsi Pemulihan Status Tab:

Mengembalikan Status: Fungsi ini bertanggung jawab untuk mengembalikan tampilan tab sesuai dengan pengaturan yang telah disimpan sebelumnya.
Membaca Data dari Penyimpanan: Data yang disimpan sebelumnya diambil dari penyimpanan lokal dan diubah menjadi format yang mudah dibaca oleh JavaScript.
Menerapkan Perubahan Tampilan: Setiap tab diperiksa untuk melihat apakah ID-nya ada dalam daftar tab yang seharusnya diperluas. Jika ya, tab tersebut akan ditampilkan; jika tidak, tab tersebut akan disembunyikan.
Fungsi Memperbarui Penyimpanan:

Memperbarui Data: Fungsi ini memperbarui data yang disimpan di penyimpanan lokal setiap kali pengguna mengubah status perluasan atau penyembunyian tab.
Mencatat Tab yang Diperluas: Fungsi ini membuat daftar ID dari semua tab yang sedang diperluas dan menyimpannya dalam format JSON.
Menyimpan ke Penyimpanan Lokal: Daftar ID tab yang diperluas kemudian disimpan kembali ke penyimpanan lokal, sehingga perubahan tersebut akan diingat saat pengguna membuka halaman lagi.
Event Listener dan Pengalihan Tab:

Menambahkan Event Listener: Setiap tombol yang terkait dengan tab diberi event listener. Artinya, ketika tombol ditekan, sebuah fungsi akan dijalankan.
Mengubah Status Tab: Ketika tombol ditekan, fungsi tersebut akan mengubah tampilan tab (memperluas atau menyembunyikan).
Memperbarui Penyimpanan: Setelah status tab diubah, fungsi updateStoredSettings dipanggil untuk memperbarui data yang disimpan di penyimpanan lokal.

Author: ranggapgrl

javascript/settings.js

@@ -45,7 +45,36 @@ onUiLoaded(function() {
     buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
 });
 
+const storedSettings = localStorage.getItem('gradio-settings-tabs');
+const settingsTabs = gradioApp().querySelector('#settings div');
+
+function restoreTabState() {
+  if (!storedSettings) return;
+  const expandedTabs = JSON.parse(storedSettings);
+  settingsTabs.querySelectorAll('div').forEach(tab => {
+    tab.style.display = expandedTabs.includes(tab.id) ? 'block' : 'none';
+  });
+}
+
+function updateStoredSettings() {
+  const expandedTabs = Array.from(settingsTabs.querySelectorAll('div:not([style*="none"])'))
+    .map(tab => tab.id);
+  localStorage.setItem('gradio-settings-tabs', JSON.stringify(expandedTabs));
+}
 
+restoreTabState();
+
+settingsTabs.querySelectorAll('div button').forEach(button => {
+  button.addEventListener('click', function() {
+    const tabId = this.parentElement.id;
+    if (this.parentElement.style.display === 'block') {
+      this.parentElement.style.display = 'none';
+    } else {
+      this.parentElement.style.display = 'block';
+    }
+    updateStoredSettings();
+  });
+});
 
 onOptionsChanged(function() {
     if (gradioApp().querySelector('#settings .settings-category')) return;