add: expand-able menu on settings card; fix: modules list not showing

module/build.gradle.kts

@@ -167,7 +167,8 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/js/main.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/kernelsu.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/theme.js").asFile, null))
-                    set.add(Pair(root.file("webroot/js/list.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/list/module.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/list/settings.js").asFile, null))
 
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Regular.ttf").asFile, null))
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))

module/src/customize.sh

@@ -118,7 +118,8 @@ extract "$ZIPFILE" 'webroot/index.html' "$MODPATH/webroot" true
 extract "$ZIPFILE" 'webroot/js/main.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/kernelsu.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/theme.js' "$MODPATH/webroot/js" true
-extract "$ZIPFILE" 'webroot/js/list.js' "$MODPATH/webroot/js" true
+extract "$ZIPFILE" 'webroot/js/list/module.js' "$MODPATH/webroot/js/list" true
+extract "$ZIPFILE" 'webroot/js/list/settings.js' "$MODPATH/webroot/js/list" true
 
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true

webroot/index.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="viewport-fit=cover" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="js/theme.js" type="module"></script>
-    <script src="js/list.js" type="module"></script>
+    <script src="js/list/module.js" type="module"></script>
+    <script src="js/list/settings.js" type="module"></script>
     <script src="js/main.js" type="module"></script>
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/index.css">
@@ -65,8 +66,8 @@
           <div class="dimc" style="padding-bottom: 4px; padding-left: 5px;">Modules</div>
         </div>
 
-        <div id="expand_clicker" class="dimc">
-          <div id="expand_clicker_icon" class="dimc expander" style="max-height: 24px;">
+        <div class="dimc">
+          <div id="module_expand_icon" class="dimc expander" style="max-height: 24px;">
             <img class="dimc" src="assets/expand.svg">
           </div>
         </div>
@@ -79,14 +80,22 @@
     </div>
 
     <!-- Settings card -->
-    <div id="rezygisk_settings" class="dim card" style="display: none;">
+    <div id="rezygisk_settings" class="dim card list" style="display: none;">
       <!-- Settings card header -->
-      <div class="dimc" style="align-items: center; display: flex;">
-        <div class="dimc" id="setting_icon">
-          <img class="dimc" src="assets/settings.svg">
+      <div class="dimc" style="align-items: center; display: flex; justify-content: space-between; padding-bottom: 10px;">
+        <div class="dimc" style="align-items: center; display: flex;">
+          <div class="dimc" id="setting_icon">
+            <img class="dimc" src="assets/settings.svg">
+          </div>
+          <div class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
+            Settings
+          </div>
         </div>
-        <div class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
-          Settings
+
+        <div class="dimc">
+          <div id="settings_expand_icon" class="dimc expander" style="margin-bottom: 4px; max-height: 24px;">
+            <img class="dimc" src="assets/expand.svg">
+          </div>
         </div>
       </div>
       <!-- Settings card body (Daemon32) -->

webroot/js/list/module.js

@@ -1,6 +1,6 @@
-const button = document.getElementById('expand_clicker')
-const icon = document.getElementById('expand_clicker_icon')
-const card = document.getElementById('module_card')
+const button = document.getElementById('modules_card')
+const icon = document.getElementById('module_expand_icon')
+const card = document.getElementById('modules_card')
 
 let sys_module_mode = localStorage.getItem('system-module-mode')
 if (!sys_module_mode) sys_module_mode = setData('closed')

webroot/js/list/settings.js

@@ -0,0 +1,25 @@
+const button = document.getElementById('rezygisk_settings')
+const icon = document.getElementById('settings_expand_icon')
+const card = document.getElementById('rezygisk_settings')
+
+let sys_module_mode = localStorage.getItem('system-settings-expand-mode')
+if (!sys_module_mode) sys_module_mode = setData('closed')
+
+button.addEventListener("click", () => {
+  if (sys_module_mode == "closed") {
+    sys_module_mode = setData('opend')
+    icon.style.transform = 'rotate(180deg)'
+    card.style.maxHeight = `${card.scrollHeight}px`
+
+    return;
+  }
+
+  sys_module_mode = setData('closed')
+  icon.style.transform = 'rotate(0deg)'
+  card.style.maxHeight = null
+})
+
+function setData(mode) {
+  localStorage.setItem('system-settings-expand-mode', mode)
+  return localStorage.getItem('system-settings-expand-mode')
+}

webroot/js/theme.js

@@ -24,7 +24,8 @@ const button = document.getElementById('theme-switcher')
 
 /* INFO: Changes the icons to match the theme */
 const module_list_icon = document.getElementById('modules_list_icon')
-const expand_clicker = document.getElementById('expand_clicker_icon')
+const module_expand = document.getElementById('module_expand_icon')
+const settings_expand = document.getElementById('settings_expand_icon')
 const settings_icon = document.getElementById('setting_icon')
 
 let sys_theme = localStorage.getItem('system-theme')
@@ -52,7 +53,8 @@ function setDark() {
   sys_theme = setData('dark')
 
   settings_icon.innerHTML = '<img class="dimc" src="assets/settings.svg">'
-  expand_clicker.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  module_expand.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  settings_expand.innerHTML = '<img class="dimc" src="assets/expand.svg">'
   button.innerHTML = '<img src="assets/dark.svg">'
   module_list_icon.innerHTML = '<img class="dimc" src="assets/module.svg">'
 }
@@ -70,7 +72,8 @@ function setLight() {
   sys_theme = setData('light')
 
   settings_icon.innerHTML = light_settings_icon
-  expand_clicker.innerHTML = light_expand_icon
+  module_expand.innerHTML = light_expand_icon
+  settings_expand.innerHTML = light_expand_icon
   button.innerHTML = light_icon
   module_list_icon.innerHTML = light_module_icon
 }