3.7 release

Co-authored-by: ChiseWaguri <188340668+ChiseWaguri@users.noreply.github.com>

.gitattributes

@@ -1,11 +1,5 @@
 # Declare files that will always have LF line endings on checkout.
-*.sh text eol=lf
-*.prop text eol=lf
-*.md text eol=lf
-*.xml text eol=lf
-*.json text eol=lf
-.extra text eol=lf
-META-INF/** text eol=lf
+** text eol=lf
 
 # Denote all files that are truly binary and should not be modified.
 module/bin/**/** binary

.gitignore

@@ -1,2 +1,3 @@
 __MACOSX
 .DS_Store
+applist.json

README.md

@@ -29,11 +29,10 @@ Configure Tricky Store target.txt with KSU WebUI.
 | Set verifiedBootHash `optional`                                                                                                                                              |   ✅    |
 | Auto config [security patch](https://github.com/5ec1cff/TrickyStore?tab=readme-ov-file#customize-security-patch-level-121), customizable in WebUI                            |   ✅    |
 | Provide AOSP Keybox `optional`                                                                                                                                               |   ✅    |
-| Import custom Keybox from device storage                                                                                                                        |   ✅    |
+| Import custom Keybox from device storage                                                                                                                                     |   ✅    |
+| Add system apps `not recommended`                                                                                                                                            |   ✅    |
 | Valid Keybox `not guaranteed`                                                                                                                                                |   ❌    |
-| Shamiko Whitelist switch. [Why?](https://github.com/rushizgithub/shamiko?tab=readme-ov-file#whitelist)                                                                       |   ❌    |
 | Periodically add all app to target.txt                                                                                                                                       |   ❌    |
-| Add system apps `GMS added by default`                                                                                                                                       |   ❌    |
 
 ## Localization
 - Read [Translation Guide](https://github.com/KOWX712/Tricky-Addon-Update-Target-List/blob/main/module/webui/locales/A-translate.md)

changelog.md

@@ -8,6 +8,26 @@ GitHub release: [Tricky Addon: Update Target List](https://github.com/KOWX712/Tr
 Telegram channel: [KOW's Little World](https://t.me/kowchannel)
 
 ## Changelog
+### v3.7
+- **WebUI:** Optimized UI.
+- **WebUI:** Added uninstall confirmation dialog.
+- **WebUI:** Sanitize text content (#23, @totalolage)
+- **WebUI:** Added selected language memory.
+- **WebUI:** Fixed Chinese translation (#26 #27, @xiaokuqwq)
+- **WebUI:** Added Indonesian translation (#28, @ChiseWaguri)
+- **WebUI:** Added Italian translation (#30, @luigimak)
+- **MMRL:** Added monet theme suport.
+- **MMRL:** Fixed fail to display guide when permission is not granted.
+- No longer add Play Store by default.
+
+### v3.6
+- **WebUI:** Option to add system apps.
+- **WebUI:** Fixed abnormal gap between content and header in MMRL.
+- Handle some vbmeta related prop, enforce boot hash to lowercase.
+- No longer auto config security patch by default (old user will remain current setup).
+- Fixed issue with disable sucompat.
+- More minor improvements.
+
 ### v3.5
 - **Script:** Set `system=prop` in auto config.
 - **WebUI:** Option to fetch secuirty patch date.

module/common/boot_hash

@@ -1,6 +0,0 @@
-# This file is to pass Minotaur native test 'Partition Check Fail'
-# Download Key Attestation (chiteroman fork recommended)
-# Link: https://github.com/chiteroman/KeyAttestation/releases
-# Get your VerifiedBootHash value from Key Attestation app
-# Ask here if you don't know how to do: https://t.me/kowchannelchat
-# Paste verifiedBootHash value on next line and save

module/common/get_extra.sh

@@ -2,6 +2,7 @@
 MODPATH=${0%/*}
 ORG_PATH="$PATH"
 SKIPLIST="$MODPATH/tmp/skiplist"
+XPOSED="$MODPATH/tmp/xposed"
 
 if [ "$MODPATH" = "/data/adb/modules/.TA_utl/common" ]; then
     MODDIR="/data/adb/modules/.TA_utl"
@@ -26,14 +27,16 @@ download() {
 }
 
 get_xposed() {
-    pm list packages -3 | cut -d':' -f2 | grep -vxF -f "$SKIPLIST" | while read -r PACKAGE; do
+    touch "$XPOSED"
+    pm list packages -3 | cut -d':' -f2 | grep -vxF -f "$SKIPLIST" | grep -vxF -f "$XPOSED" | while read -r PACKAGE; do
         APK_PATH=$(pm path "$PACKAGE" | grep "base.apk" | cut -d':' -f2 | tr -d '\r')
         if [ -n "$APK_PATH" ]; then
             if aapt dump xmltree "$APK_PATH" AndroidManifest.xml 2>/dev/null | grep -qE "xposed.category|xposeddescription"; then
-                echo "$PACKAGE"
+                echo "$PACKAGE" >> "$XPOSED"
             fi
         fi
     done
+    cat "$XPOSED"
 }
 
 check_update() {
@@ -65,12 +68,13 @@ get_update() {
 }
 
 install_update() {
+    PATH=/data/adb/ap/bin:/data/adb/ksu/bin:/data/adb/magisk:$PATH
     if command -v magisk >/dev/null 2>&1; then
-        magisk --install-module "$MODPATH/tmp/module.zip"
+        magisk --install-module "$MODPATH/tmp/module.zip" || exit 1
     elif command -v apd >/dev/null 2>&1; then
-        apd module install "$MODPATH/tmp/module.zip"
+        apd module install "$MODPATH/tmp/module.zip" || exit 1
     elif command -v ksud >/dev/null 2>&1; then
-        ksud module install "$MODPATH/tmp/module.zip"
+        ksud module install "$MODPATH/tmp/module.zip" || exit 1
     else
         exit 1
     fi

module/install_func.sh

@@ -15,9 +15,6 @@ initialize() {
         cp "$MODPATH/uninstall.sh" "$COMPATH/update/uninstall.sh"
     fi
 
-    #Set specific path
-    sed -i "s|\"set-path\"|\"/data/adb/modules/$NEW_MODID/\"|" "$MODPATH/webui/scripts/main.js" || abort "! Failed to set path"
-
     # Set aapt binary
     cp "$MODPATH/module.prop" "$COMPATH/update/module.prop"
     mv "$MODPATH/bin/$(getprop ro.product.cpu.abi)/aapt" "$COMPATH/aapt"
@@ -32,18 +29,34 @@ find_config() {
 }
 
 migrate_config() {
-    # Migrate boot_hash
-    if [ ! -f "/data/adb/boot_hash" ]; then
-        mv "$COMPATH/boot_hash" "/data/adb/boot_hash"
-    else
-        rm -f "$COMPATH/boot_hash"
+    # remove empty file
+    if [ -f "/data/adb/boot_hash" ]; then
+        hash_value=$(grep -v '^#' "/data/adb/boot_hash" | tr -d '[:space:]' | tr '[:upper:]' '[:lower:]')
+        [ -z "$hash_value" ] && rm -f /data/adb/boot_hash || echo "$hash_value" > /data/adb/boot_hash
     fi
 
     # Migrate security_patch config*
-    if [ ! -s "/data/adb/security_patch" ]; then
-        echo "#Tricky Addon security patch auto config" > "/data/adb/security_patch"
+    if [ -f "/data/adb/security_patch" ]; then
+        if grep -q "^auto_config=1" "/data/adb/security_patch"; then
+            touch "/data/adb/tricky_store/security_patch_auto_config"
+        fi
+        rm -f "/data/adb/security_patch"
     fi
-    if ! grep -q "^auto_config=" "/data/adb/security_patch"; then
-        echo "auto_config=1" >> "/data/adb/security_patch"
+
+    # Additional system app
+    if [ ! -f "/data/adb/tricky_store/system_app" ]; then
+        SYSTEM_APP="
+        com.google.android.gms
+        com.google.android.gsf
+        com.android.vending
+        com.oplus.deepthinker
+        com.heytap.speechassist
+        com.coloros.sceneservice"
+        touch "/data/adb/tricky_store/system_app"
+        for app in $SYSTEM_APP; do
+            if pm list packages -s | grep -q "$app"; then
+                echo "$app" >> "/data/adb/tricky_store/system_app"
+            fi
+        done
     fi
 }

module/module.prop

@@ -1,7 +1,7 @@
 id=TA_utl
 name=Tricky Addon - Update Target List
-version=v3.5
-versionCode=350
+version=v3.7
+versionCode=370
 author=KOWX712
 description=A WebUI to conifgure tricky store target.txt 
 updateJson=https://raw.githubusercontent.com/KOWX712/Tricky-Addon-Update-Target-List/main/update.json

module/service.sh

@@ -22,17 +22,26 @@ add_denylist_to_target() {
     done
 }
 
+resetprop_if_empty() {
+    CURRENT=$(getprop "$1")
+    [ -z "$CURRENT" ] && resetprop -n "$1" "$2"
+}
+
 # Spoof security patch
-if grep -q "^auto_config=1" "/data/adb/security_patch"; then
+if [ -f "/data/adb/tricky_store/security_patch_auto_config" ]; then
     sh "$MODPATH/common/get_extra.sh" --security-patch
 fi
 
-# Reset verified Boot Hash
-hash_value=$(grep -v '^#' "/data/adb/boot_hash" | tr -d '[:space:]')
-if [ -n "$hash_value" ]; then
-    resetprop -n ro.boot.vbmeta.digest "$hash_value"
+# Reset vbmeta related prop
+if [ -f "/data/adb/boot_hash" ]; then
+    hash_value=$(grep -v '^#' "/data/adb/boot_hash" | tr -d '[:space:]' | tr '[:upper:]' '[:lower:]')
+    [ -z "$hash_value" ] && rm -f /data/adb/boot_hash || resetprop -n ro.boot.vbmeta.digest "$hash_value"
 fi
-
+resetprop_if_empty "ro.boot.vbmeta.device_state" "locked"
+resetprop_if_empty "ro.boot.vbmeta.invalidate_on_error" "yes"
+resetprop_if_empty "ro.boot.vbmeta.avb_version" "1.0"
+resetprop_if_empty "ro.boot.vbmeta.hash_alg" "sha256"
+resetprop_if_empty "ro.boot.vbmeta.size" "10496"
 
 # Disable TSupport-A auto update target to prevent overwrite
 if [ -d "$TSPA" ]; then
@@ -46,10 +55,12 @@ if [ -f "$MODPATH/action.sh" ]; then
     # Hide module from Magisk manager
     if [ "$MODPATH" != "$HIDE_DIR" ]; then
         rm -rf "$HIDE_DIR"
-        mv "$MODPATH" "$HIDE_DIR"
+        mkdir -p "$HIDE_DIR"
+        busybox chcon --reference="$MODPATH" "$HIDE_DIR"
+        cp -af "$MODPATH/." "$HIDE_DIR/"
     fi
     MODPATH="$HIDE_DIR"
-    
+
     # Add target from denylist
     # To trigger this, choose "Select from DenyList" in WebUI once
     [ -f "/data/adb/tricky_store/target_from_denylist" ] && add_denylist_to_target
@@ -61,16 +72,17 @@ fi
 rm -f "$MODPATH/module.prop"
 
 # Symlink tricky store
-if [ -f "$MODPATH/action.sh" ] && [ ! -f "$TS/action.sh" ] && [ ! -L "$TS/action.sh" ]; then
+if [ -f "$MODPATH/action.sh" ] && [ ! -e "$TS/action.sh" ]; then
     ln -s "$MODPATH/action.sh" "$TS/action.sh"
 fi
-if [ ! -d "$TS/webroot" ] && [ ! -L "$TS/webroot" ]; then
+if [ ! -e "$TS/webroot" ]; then
     ln -s "$MODPATH/webui" "$TS/webroot"
 fi
 
 # Optimization
-OUTPUT_APP="$MODPATH/common/tmp/applist"
+OUTPUT_APP="$MODPATH/webui/applist.json"
 OUTPUT_SKIP="$MODPATH/common/tmp/skiplist"
+OUTPUT_XPOSED="$MODPATH/common/tmp/xposed"
 
 until [ "$(getprop sys.boot_completed)" = "1" ]; do
     sleep 1
@@ -80,32 +92,40 @@ done
 mkdir -p "$MODPATH/common/tmp"
 
 # Additional system apps
-SYSTEM_APP="com.google.android.gms|com.google.android.gsf|com.android.vending"
+if [ -f "/data/adb/tricky_store/system_app" ]; then
+    SYSTEM_APP=$(cat "/data/adb/tricky_store/system_app" | tr '\n' '|' | sed 's/|*$//')
+else
+    SYSTEM_APP=""
+fi
 
 # Initialize cache files to save app list and skip list
-echo "# This file is generated from service.sh to speed up load time" > "$OUTPUT_APP"
+echo "[" > "$OUTPUT_APP"
 echo "# This file is generated from service.sh to speed up load time" > "$OUTPUT_SKIP"
 
 # Get list of third party apps and specific system apps, then cache app name
 # Check Xposed module
 { 
     pm list packages -3 2>/dev/null
-    pm list package -s | grep -E "$SYSTEM_APP" 2>/dev/null || true
+    pm list packages -s | grep -E "$SYSTEM_APP" 2>/dev/null || true
 } | awk -F: '{print $2}' | while read -r PACKAGE; do
     # Get APK path for the package
-    APK_PATH=$(pm path "$PACKAGE" 2>/dev/null | grep "base.apk" | awk -F: '{print $2}' | tr -d '\r')
-    [ -z "$APK_PATH" ] && APK_PATH=$(pm path "$PACKAGE" 2>/dev/null | grep ".apk" | awk -F: '{print $2}' | tr -d '\r')
+    APK_PATH=$(pm path "$PACKAGE" 2>/dev/null | grep "base.apk" | awk -F: '{print $2}')
+    [ -z "$APK_PATH" ] && APK_PATH=$(pm path "$PACKAGE" 2>/dev/null | grep ".apk" | awk -F: '{print $2}')
 
-    if [ -n "$APK_PATH" ]; then
-        # Extract app name and save package info
-        APP_NAME=$(aapt dump badging "$APK_PATH" 2>/dev/null | grep "application-label:" | sed "s/application-label://g; s/'//g")
-        echo "app-name: $APP_NAME, package-name: $PACKAGE" >> "$OUTPUT_APP"
-    else
-        echo "app-name: Unknown App package-name: $PACKAGE" >> "$OUTPUT_APP"
-    fi
+    APP_NAME=$(aapt dump badging "$APK_PATH" 2>/dev/null | grep "application-label:" | sed "s/application-label://g; s/'//g")
+    [ -z "$APP_NAME" ] && APP_NAME="$PACKAGE"
+    echo "  {\"app_name\": \"$APP_NAME\", \"package_name\": \"$PACKAGE\"}," >> "$OUTPUT_APP"
 
     # Check if app is Xposed module and add to skip list if not
-    if ! aapt dump xmltree "$APK_PATH" AndroidManifest.xml 2>/dev/null | grep -qE "xposed.category|xposeddescription"; then
+    touch "$OUTPUT_XPOSED"
+    if aapt dump xmltree "$APK_PATH" AndroidManifest.xml 2>/dev/null | grep -qE "xposed.category|xposeddescription"; then
+        echo "$PACKAGE" >> "$OUTPUT_XPOSED"
+    else
         echo "$PACKAGE" >> "$OUTPUT_SKIP"
     fi
 done
+
+sed -i '$ s/,$//' "$OUTPUT_APP"
+echo "]" >> "$OUTPUT_APP"
+
+[ -f "$MODPATH/action.sh" ] && rm -rf "/data/adb/modules/TA_utl"

module/uninstall.sh

@@ -10,8 +10,9 @@ fi
 # Remove residue and restore aosp keybox.
 rm -rf "/data/adb/modules/.TA_utl"
 rm -f "/data/adb/boot_hash"
-rm -f "/data/adb/security_patch"
+rm -f "/data/adb/tricky_store/security_patch_auto_config"
 rm -f "/data/adb/tricky_store/target_from_denylist"
+rm -f "/data/adb/tricky_store/system_app"
 if [ -d "$TS" ]; then
     [ -L "$TS/webroot" ] && rm -f "$TS/webroot"
     [ -L "$TS/action.sh" ] && rm -f "$TS/action.sh"

module/webui/index.html

@@ -4,15 +4,16 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title data-i18n="title">TrickyAddon</title>
-    <link rel="stylesheet" type="text/css" href="/mmrl/insets.css" />
+    <title>TrickyAddon</title>
     <link rel="stylesheet" href="styles/global.css" type="text/css">
     <link rel="stylesheet" href="styles/about.css" type="text/css">
     <link rel="stylesheet" href="styles/applist.css" type="text/css">
     <link rel="stylesheet" href="styles/boot_hash.css" type="text/css">
+    <link rel="stylesheet" href="styles/file_selector.css" type="text/css">
     <link rel="stylesheet" href="styles/header.css" type="text/css">
     <link rel="stylesheet" href="styles/search_menu.css" type="text/css">
     <link rel="stylesheet" href="styles/security_patch.css" type="text/css">
+    <link rel="stylesheet" href="styles/system_app.css" type="text/css">
     <script type="module" crossorigin src="scripts/main.js"></script>
     <script type="module" crossorigin src="scripts/about.js"></script>
     <script type="module" crossorigin src="scripts/help.js"></script>
@@ -77,6 +78,7 @@
                     <li class="ripple-element" id="deselect-all" data-i18n="menu.deselect_all"></li>
                     <li class="ripple-element" id="select-denylist" data-i18n="menu.select_denylist"></li>
                     <li class="ripple-element" id="deselect-unnecessary" data-i18n="menu.deselect_unnecessary"></li>
+                    <li class="ripple-element" id="add-system-app" data-i18n="menu.add_system_app"></li>
                     <li class="ripple-element" id="aospkb" data-i18n="menu.set_aosp_keybox"></li>
                     <li class="ripple-element" id="validkb" data-i18n="menu.set_valid_keybox"></li>
                     <li class="ripple-element" id="customkb" data-i18n="menu.set_custom_keybox"></li>
@@ -102,29 +104,29 @@
                 <div class="content" data-package="">
                     <div class="mode">
                         <label class="mode-switch" id="normal">
-					        <input type="radio" class="mode-input" id="normal-mode">
-					        <i class="mode-icon">
-					            <div class="status-indicator ripple-element" id="normal-indicator">
-				                    <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#ffffff"><path d="M480-480Zm0 280q-116 0-198-82t-82-198q0-116 82-198t198-82q116 0 198 82t82 198q0 116-82 198t-198 82Zm0-80q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Z"/></svg>
-				                </div>
-				            </i>
-				        </label>
-				        <label class="mode-switch" id="generate">
-					        <input type="radio" class="mode-input" id="generate-mode">
-					        <i class="mode-icon">
-					            <div class="status-indicator ripple-element" id="generate-indicator">
-				                    <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#ffffff"><path d="M480-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm-80-240v-480h160v480H400Z"/></svg>
-				                </div>
-				            </i>
-				        </label>
-				        <label class="mode-switch" id="hack">
-					        <input type="radio" class="mode-input" id="hack-mode">
-					        <i class="mode-icon">
-					            <div class="status-indicator ripple-element" id="hack-indicator">
-				                    <svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="19px" fill="#ffffff"><path d="M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z"/></svg>
-				                </div>
-				            </i>
-				        </label>
+                            <input type="radio" class="mode-input" id="normal-mode">
+                            <i class="mode-icon">
+                                <div class="status-indicator ripple-element" id="normal-indicator">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#ffffff"><path d="M480-480Zm0 280q-116 0-198-82t-82-198q0-116 82-198t198-82q116 0 198 82t82 198q0 116-82 198t-198 82Zm0-80q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Z"/></svg>
+                                </div>
+                            </i>
+                        </label>
+                        <label class="mode-switch" id="generate">
+                            <input type="radio" class="mode-input" id="generate-mode">
+                            <i class="mode-icon">
+                                <div class="status-indicator ripple-element" id="generate-indicator">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#ffffff"><path d="M480-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm-80-240v-480h160v480H400Z"/></svg>
+                                </div>
+                            </i>
+                        </label>
+                        <label class="mode-switch" id="hack">
+                            <input type="radio" class="mode-input" id="hack-mode">
+                            <i class="mode-icon">
+                                <div class="status-indicator ripple-element" id="hack-indicator">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="19px" fill="#ffffff"><path d="M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z"/></svg>
+                                </div>
+                            </i>
+                        </label>
                     </div>
                     <p class="name"></p>
                     <div class="checkbox-wrapper">
@@ -141,112 +143,85 @@
     </template>
 
     <!-- Help Overlay -->
-    <div id="help-overlay" class="help-overlay">
-        <div class="help-menu">
-            <button id="close-help" class="close-help">&#x2715;</button>
+    <div id="help-overlay" class="help-overlay overlay">
+        <div class="help-menu overlay-content">
+            <button id="close-help" class="close-btn">&#x2715;</button>
             <div class="help-content">
-                <p data-i18n="help.help_instructions"></p>
-                <ul id="helpList">
-                    <li id="save_and_update_button">
-                        <strong data-i18n="help.save_and_update"></strong>
-                        <ul>
-                            <li data-i18n="help.save_and_update_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="refresh">
-                        <strong data-i18n="help.refresh"></strong>
-                        <ul>
-                            <li data-i18n="help.refresh_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="select_deselect">
-                        <strong data-i18n="help.select_deselect"></strong>
-                        <ul>
-                            <li data-i18n="help.select_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="select_denylist">
-                        <strong data-i18n="help.select_denylist"></strong>
-                        <ul>
-                            <li data-i18n="help.select_denylist_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="deselect_unnecessary">
-                        <strong data-i18n="help.deselect_unnecessary"></strong>
-                        <ul>
-                            <li data-i18n="help.deselect_unnecessary_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_keybox">
-                        <strong data-i18n="help.set_keybox"></strong>
-                        <ul>
-                            <li data-i18n="help.set_keybox_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_custom_keybox">
-                        <strong data-i18n="help.set_custom_keybox"></strong>
-                        <ul>
-                            <li data-i18n="help.set_custom_keybox_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_security_patch">
-                        <strong data-i18n="help.set_security_patch"></strong>
-                        <ul>
-                            <li data-i18n="help.set_security_patch_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                    <li id="set_verified_boot_hash">
-                        <strong data-i18n="help.set_verified_boot_hash"></strong>
-                        <ul>
-                            <li data-i18n="help.set_verified_boot_hash_description"></li>
-                        </ul>
-                    </li>
-                    <br>
-                </ul>
+                <div class="help-content-header" data-i18n="help.help_instructions"></div>
+                <div class="instruction">
+                    <strong data-i18n="help.save_and_update"></strong>
+                    <p data-i18n="help.save_and_update_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.refresh"></strong>
+                    <p data-i18n="help.refresh_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.select_deselect"></strong>
+                    <p data-i18n="help.select_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.select_denylist"></strong>
+                    <p data-i18n="help.select_denylist_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.deselect_unnecessary"></strong>
+                    <p data-i18n="help.deselect_unnecessary_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.add_system_app"></strong>
+                    <p data-i18n="help.add_system_app_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_keybox"></strong>
+                    <p data-i18n="help.set_keybox_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_custom_keybox"></strong>
+                    <p data-i18n="help.set_custom_keybox_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_security_patch"></strong>
+                    <p data-i18n="help.set_security_patch_description"></p>
+                </div>
+                <div class="instruction">
+                    <strong data-i18n="help.set_verified_boot_hash"></strong>
+                    <p data-i18n="help.set_verified_boot_hash_description"></p>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- BootHash Input Overlay -->
-    <div id="boot-hash-overlay" class="boot-hash-overlay"></div>
-    <div id="boot-hash-card" class="boot-hash-card">
-        <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
-        <textarea id="boot-hash-input" class="boot-hash-input" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder" oninput="window.trimInput(this)"></textarea>
-        <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
+    <div id="boot-hash-overlay" class="boot-hash-overlay overlay">
+        <div id="boot-hash-card" class="boot-hash-card overlay-content">
+            <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
+            <textarea id="boot-hash-input" class="boot-hash-input" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder" oninput="window.trimInput(this)"></textarea>
+            <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
+        </div>
     </div>
 
     <!-- About Overlay -->
-    <div id="about-overlay" class="about-overlay">
-        <div id="about-menu" class="about-menu">
-            <button id="close-about" class="close-about">&#x2715;</button>
-            <div class="about-content">
+    <div id="about-overlay" class="about-overlay overlay">
+        <div class="about-menu overlay-content">
+            <button id="close-about" class="close-btn">&#x2715;</button>
+            <div class="about-title">
                 <p id="module_name_line1" data-i18n="about.module_name_line1"></p>
                 <p id="module_name_line2" data-i18n="about.module_name_line2"></p>
                 <p><span id="authored" data-i18n="about.by"></span> KOWX712</p>
-                <br>
-                <p id="disclaimer" data-i18n="about.disclaimer"></p>
-                <br>
-                <p>
-                <div class="link">
-                    <i class="link-icon ripple-element" id="telegram" aria-hidden="true">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
-                        <span id="link-text" data-i18n="about.telegram_channel"></span>
-                    </i>
-                    <i class="link-icon ripple-element" id="github" aria-hidden="true">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-                        <span id="link-text" data-i18n="about.github"></span>
-                    </i>
-                </div>
-                </p>
-                <br>
+            </div>
+            <div id="disclaimer" data-i18n="about.disclaimer"></div>
+            <div class="link">
+                <i class="link-icon ripple-element" id="telegram" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
+                    <span id="link-text" data-i18n="about.telegram_channel"></span>
+                </i>
+                <i class="link-icon ripple-element" id="github" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                    <span id="link-text" data-i18n="about.github"></span>
+                </i>
+            </div>
+            <div class="acknowledgment">
                 <p id="acknowledgment" data-i18n="about.acknowledgment"></p>
                 <p>j-hc/zygisk-detach: WebUI template</p>
                 <p>markedjs/marked: Markdown Support</p>
@@ -255,9 +230,9 @@
     </div>
 
     <!-- Update Overlay -->
-    <div class="update-overlay">
-        <div class="update-menu">
-            <button class="close-update">&#x2715;</button>
+    <div class="update-overlay overlay">
+        <div class="update-menu overlay-content">
+            <button id="close-update" class="close-btn">&#x2715;</button>
             <div class="update-content">
                 <h1 data-i18n="update.changelog"></h1>
                 <div class="changelog"></div>
@@ -270,64 +245,106 @@
     </div>
 
     <!-- MMRL Permission Request Overlay -->
-    <div id="permission-popup" class="permission-popup hidden">
+    <div id="permission-popup" class="permission-popup overlay">
         <div class="permission-content">
             <h2 id="permission-title">Please allow JavaScript API in MMRL settings</h2>
             <div class="permission-steps">
-                <p>1. Settings</p>
-                <p>2. Security</p>
-                <p>3. Allow JavaScript API</p>
-                <p>4. Tricky Store</p>
-                <p>5. Enable Allow Advanced KernelSU API</p>
+                <ol>
+                    <li>Settings</li>
+                    <li>Security</li>
+                    <li>Allow JavaScript API</li>
+                    <li>Tricky Store</li>
+                    <li>Enable "Allow Advanced KernelSU API"</li>
+                </ol>
             </div>
         </div>
     </div>
 
+    <!-- File Selector Overlay -->
+    <div class="file-selector-overlay overlay">
+        <div class="file-selector overlay-content">
+            <div class="file-selector-header">
+                <button class="back-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="40 -1050 900 960" width="22px"><path d="M400-93.85 13.85-480 400-866.15l56.77 56.77L127.38-480l329.39 329.38L400-93.85Z"/></svg>
+                </button>
+                <div class="current-path">/storage/emulated/0/Download</div>
+                <button class="close-selector">&#x2715;</button>
+            </div>
+            <div class="file-list"></div>
+        </div>
+    </div>
+
     <!-- Security Patch Overlay -->
-    <div id="security-patch-overlay" class="security-patch-overlay"></div>
-    <div id="security-patch-card" class="security-patch-card">
-        <div class="security-patch-header" data-i18n="security_patch.title"></div>
-        <div class="security-patch-content">
-            <div id="normal-mode-inputs" class="normal-mode-inputs">
-                <div class="input-group">
-                    <label id="security_patch-all">All</label>
-                    <input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none">
+    <div id="security-patch-overlay" class="security-patch-overlay overlay">
+        <div id="security-patch-card" class="security-patch-card overlay-content">
+            <div class="security-patch-header" data-i18n="security_patch.title"></div>
+            <div class="security-patch-content">
+                <div id="normal-mode-inputs" class="normal-mode-inputs">
+                    <div class="input-group">
+                        <label id="security_patch-all">All</label>
+                        <input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none">
+                    </div>
+                </div>
+
+                <div id="advanced-mode-inputs" class="advanced-mode-inputs hidden">
+                    <div class="input-group">
+                        <label id="security_patch-system">System</label>
+                        <input type="text" id="system-patch" placeholder="202501" maxlength="6" autocapitalize="none">
+                    </div>
+                    <div class="input-group">
+                        <label id="security_patch-boot">Boot</label>
+                        <input type="text" id="boot-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'boot')" maxlength="10">
+                    </div>
+                    <div class="input-group">
+                        <label id="security_patch-vendor">Vendor</label>
+                        <input type="text" id="vendor-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'vendor')" maxlength="10">
+                    </div>
+                </div>
+
+                <div class="advanced-toggle">
+                    <input type="checkbox" class="checkbox" id="advanced-mode" />
+                    <label for="advanced-mode" class="custom-checkbox">
+                        <span class="tick-symbol">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff">
+                                <path d="M 22.566406 4.730469 L 20.773438 3.511719 C 20.277344 3.175781 19.597656 3.304688 19.265625 3.796875 L 10.476563 16.757813 L 6.4375 12.71875 C 6.015625 12.296875 5.328125 12.296875 4.90625 12.71875 L 3.371094 14.253906 C 2.949219 14.675781 2.949219 15.363281 3.371094 15.789063 L 9.582031 22 C 9.929688 22.347656 10.476563 22.613281 10.96875 22.613281 C 11.460938 22.613281 11.957031 22.304688 12.277344 21.839844 L 22.855469 6.234375 C 23.191406 5.742188 23.0625 5.066406 22.566406 4.730469 Z"/>
+                            </svg>
+                        </span>
+                    </label>
+                    <label for="advanced-mode" data-i18n="security_patch.advanced_mode"></label>
+                </div>
+
+                <div>
+                    <button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button>
+                    <div class="button-container">
+                        <button id="auto-config" class="auto-button ripple-element" data-i18n="security_patch.auto"></button>
+                        <button id="save-patch" class="save-button ripple-element" data-i18n="security_patch.save"></button>
+                    </div>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <div id="advanced-mode-inputs" class="advanced-mode-inputs hidden">
-                <div class="input-group">
-                    <label id="security_patch-system">System</label>
-                    <input type="text" id="system-patch" placeholder="202501" maxlength="6" autocapitalize="none">
-                </div>
-                <div class="input-group">
-                    <label id="security_patch-boot">Boot</label>
-                    <input type="text" id="boot-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'boot')" maxlength="10">
-                </div>
-                <div class="input-group">
-                    <label id="security_patch-vendor">Vendor</label>
-                    <input type="text" id="vendor-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'vendor')" maxlength="10">
-                </div>
+    <!-- Add System App Overlay -->
+    <div id="add-system-app-overlay" class="add-system-app-overlay overlay">
+        <div id="add-system-app-card" class="add-system-app-card overlay-content">
+            <div class="add-system-app-title" data-i18n="add_system_app.title"></div>
+            <div class="add-system-app-content">
+                <input type="text" id="system-app-input" placeholder="com.example.app" autocapitalize="none">
+                <button id="add-system-app-button" class="add-system-app-button ripple-element" data-i18n="add_system_app.add"></button>
+                <h3 class="current-system-app-list" data-i18n="add_system_app.current_list"></h3>
+                <div class="current-system-app-list-content"></div>
             </div>
+        </div>
+    </div>
 
-            <div class="advanced-toggle">
-                <input type="checkbox" class="checkbox" id="advanced-mode" />
-                <label for="advanced-mode" class="custom-checkbox">
-                    <span class="tick-symbol">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff">
-                            <path d="M 22.566406 4.730469 L 20.773438 3.511719 C 20.277344 3.175781 19.597656 3.304688 19.265625 3.796875 L 10.476563 16.757813 L 6.4375 12.71875 C 6.015625 12.296875 5.328125 12.296875 4.90625 12.71875 L 3.371094 14.253906 C 2.949219 14.675781 2.949219 15.363281 3.371094 15.789063 L 9.582031 22 C 9.929688 22.347656 10.476563 22.613281 10.96875 22.613281 C 11.460938 22.613281 11.957031 22.304688 12.277344 21.839844 L 22.855469 6.234375 C 23.191406 5.742188 23.0625 5.066406 22.566406 4.730469 Z"/>
-                        </svg>
-                    </span>
-                </label>
-                <label for="advanced-mode" data-i18n="security_patch.advanced_mode"></label>
-            </div>
-
-            <div>
-                <button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button>
-                <div class="button-container">
-                    <button id="auto-config" class="auto-button ripple-element" data-i18n="security_patch.auto"></button>
-                    <button id="save-patch" class="save-button ripple-element" data-i18n="security_patch.save"></button>
-                </div>
+    <!-- Uninstall Confirmation Overlay -->
+    <div class="uninstall-confirmation-overlay overlay" id="uninstall-confirmation-overlay">
+        <div class="uninstall-confirmation overlay-content">
+            <div class="uninstall-confirmation-title" data-i18n="confirmation.uninstall_title"></div>
+            <p data-i18n="confirmation.uninstall_message"></p>
+            <div class="uninstall-confirmation-button-container">
+                <button class="uninstall-confirmation-button ripple-element" id="cancel-uninstall" data-i18n="confirmation.uninstall_cancel"></button>
+                <button class="uninstall-confirmation-button ripple-element" id="confirm-uninstall" data-i18n="confirmation.uninstall_confirm"></button>
             </div>
         </div>
     </div>
@@ -335,7 +352,7 @@
     <!-- Footer -->
     <div class="footer">
         <div class="uninstall-container ripple-element hidden-uninstall">
-            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FF3636"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
             <span data-i18n="functional_button.uninstall_webui"></span>
         </div>
     </div>

module/webui/locales/A-template.json

@@ -1,5 +1,6 @@
 {
     "language": "English",
+    "system_default": "System Default",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Available in Magisk only, select apps that are in the DenyList. Recommended.",
         "deselect_unnecessary": "Deselect Unnecessary",
         "deselect_unnecessary_description": "Unnecessary category: Xposed module, root manager, root-related apps, and general apps that never check bootloader status. This option requires Internet connection.",
+        "add_system_app": "Add System App",
+        "add_system_app_description": "Add specific system app to app list.",
         "set_keybox": "Set AOSP & Valid Keybox",
         "set_keybox_description": "Replace tricky store keybox.xml. AOSP keybox will be replaced if there's no more valid keybox. Valid keybox option requires Internet connection.",
         "set_custom_keybox": "Set Custom Keybox",
@@ -47,6 +50,7 @@
         "deselect_all": "Deselect All",
         "select_denylist": "Select From DenyList",
         "deselect_unnecessary": "Deselect Unnecessary",
+        "add_system_app": "Add System App",
         "set_aosp_keybox": "Set AOSP Keybox",
         "set_valid_keybox": "Set Valid Keybox",
         "set_custom_keybox": "Set Custom Keybox",
@@ -86,12 +90,14 @@
         "download_fail": "Fail to download update",
         "installing": "Installing update...",
         "installed": "Installed successfully, reboot now.",
-        "install_fail": "Fail to install, please update manual",
+        "install_fail": "Fail to install, please update manually",
         "rebooting": "Rebooting...",
         "reboot_fail": "Fail to reboot, please reboot manually",
         "custom_key_set": "Custom keybox set successfully",
         "custom_key_set_error": "Failed to set custom keybox",
-        "no_file_selected": "No file selected"
+        "no_file_selected": "No file selected",
+        "system_app_not_found": "System app not found",
+        "system_app_error": "Failed to add system app"
     },
     "security_patch": {
         "title": "Security Patch",
@@ -111,5 +117,16 @@
         "invalid_boot": "Invalid boot format",
         "invalid_system": "Invalid system format",
         "invalid_vendor": "Invalid vendor format"
+    },
+    "add_system_app": {
+        "title": "Add System App",
+        "add": "Add",
+        "current_list": "Current System App List"
+    },
+    "confirmation": {
+        "uninstall_title": "Confirm Uninstall?",
+        "uninstall_message": "Are you sure you want to uninstall Tricky Addon",
+        "uninstall_cancel": "Cancel",
+        "uninstall_confirm": "Confirm"
     }
 }

module/webui/locales/A-translate.md

@@ -1,7 +1,7 @@
 # Translation Guide
 ## Fix Bad Translation
 1. Fork this repository.
-2. Find your language string file in `/module/webroot/locales/`.
+2. Find your language string file in `/module/webui/locales/`.
 3. Edit the string value with translated incorrectly.
 4. Create a Pull Request.
 
@@ -12,7 +12,8 @@
 
 ### Advanced
 1. Fork this repository.
-2. Make a copy of `/module/webroot/locales/A-template.json`
+2. Make a copy of `/module/webui/locales/A-template.json`
 3. Rename it to `language_code-COUNTRY_CODE.json`, e.g., `en-US.json`.
 4. Translate the string value inside.
-6. Create a Pull Request.
+5. Add the language code to `/module/webui/locales/available-lang.json`, this step is necessary for displaying the language in the WebUI.
+6. Create a Pull Request.

module/webui/locales/available-lang.json

@@ -0,0 +1,15 @@
+{
+    "languages": [
+        "en-US",
+        "es-ES",
+        "ja-JP",
+        "id-ID",
+        "it-IT",
+        "pl-PL",
+        "ru-RU",
+        "tl-PH",
+        "tr-TR",
+        "zh-CN",
+        "zh-TW"
+    ]
+}

module/webui/locales/en-US.json

@@ -1,5 +1,6 @@
 {
     "language": "English",
+    "system_default": "System Default",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Available in Magisk only, select apps that are in the DenyList. Recommended.",
         "deselect_unnecessary": "Deselect Unnecessary",
         "deselect_unnecessary_description": "Unnecessary category: Xposed module, root manager, root-related apps, and general apps that never check bootloader status. This option requires Internet connection.",
+        "add_system_app": "Add System App",
+        "add_system_app_description": "Add specific system app to app list.",
         "set_keybox": "Set AOSP & Valid Keybox",
         "set_keybox_description": "Replace tricky store keybox.xml. AOSP keybox will be replaced if there's no more valid keybox. Valid keybox option requires Internet connection.",
         "set_custom_keybox": "Set Custom Keybox",
@@ -47,6 +50,7 @@
         "deselect_all": "Deselect All",
         "select_denylist": "Select From DenyList",
         "deselect_unnecessary": "Deselect Unnecessary",
+        "add_system_app": "Add System App",
         "set_aosp_keybox": "Set AOSP Keybox",
         "set_valid_keybox": "Set Valid Keybox",
         "set_custom_keybox": "Set Custom Keybox",
@@ -86,12 +90,14 @@
         "download_fail": "Fail to download update",
         "installing": "Installing update...",
         "installed": "Installed successfully, reboot now.",
-        "install_fail": "Fail to install, please update manual",
+        "install_fail": "Fail to install, please update manually",
         "rebooting": "Rebooting...",
         "reboot_fail": "Fail to reboot, please reboot manually",
         "custom_key_set": "Custom keybox set successfully",
         "custom_key_set_error": "Failed to set custom keybox",
-        "no_file_selected": "No file selected"
+        "no_file_selected": "No file selected",
+        "system_app_not_found": "System app not found",
+        "system_app_error": "Failed to add system app"
     },
     "security_patch": {
         "title": "Security Patch",
@@ -111,5 +117,16 @@
         "invalid_boot": "Invalid boot format",
         "invalid_system": "Invalid system format",
         "invalid_vendor": "Invalid vendor format"
+    },
+    "add_system_app": {
+        "title": "Add System App",
+        "add": "Add",
+        "current_list": "Current System App List"
+    },
+    "confirmation": {
+        "uninstall_title": "Confirm Uninstall?",
+        "uninstall_message": "Are you sure you want to uninstall Tricky Addon",
+        "uninstall_cancel": "Cancel",
+        "uninstall_confirm": "Confirm"
     }
 }

module/webui/locales/es-ES.json

@@ -1,5 +1,6 @@
 {
     "language": "Español",
+    "system_default": "Predeterminado del sistema",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Disponible solo en Magisk, selecciona aplicaciones que están en la DenyList. Recomendado.",
         "deselect_unnecessary": "Deseleccionar innecesarios",
         "deselect_unnecessary_description": "Categorías innecesarias: módulos Xposed, gestores de root, aplicaciones relacionadas con root y aplicaciones generales que nunca verifican el estado del bootloader. Esta opción requiere conexión a Internet.",
+        "add_system_app": "Agregar Aplicación del Sistema",
+        "add_system_app_description": "Agregar una aplicación del sistema específica a la lista de aplicaciones.",
         "set_keybox": "Configurar AOSP y Keybox Válido",
         "set_keybox_description": "Reemplazar el archivo keybox.xml de Tricky Store. El AOSP Keybox será reemplazado si no hay un keybox válido. Esta opción requiere conexión a Internet.",
         "set_custom_keybox": "Establecer Keybox Personalizado",
@@ -47,6 +50,7 @@
         "deselect_all": "Deseleccionar Todo",
         "select_denylist": "Seleccionar desde DenyList",
         "deselect_unnecessary": "Deseleccionar innecesarios",
+        "add_system_app": "Agregar Aplicación del Sistema",
         "set_aosp_keybox": "Configurar AOSP Keybox",
         "set_valid_keybox": "Configurar Keybox Válido",
         "set_custom_keybox": "Establecer Keybox Personalizado",
@@ -91,7 +95,9 @@
         "reboot_fail": "Error al reiniciar, reinicia manualmente",
         "custom_key_set": "Keybox personalizado establecido con éxito",
         "custom_key_set_error": "Error al establecer el keybox personalizado",
-        "no_file_selected": "Ningún archivo seleccionado"
+        "no_file_selected": "Ningún archivo seleccionado",
+        "system_app_not_found": "Aplicación del sistema no encontrada",
+        "system_app_error": "Error al agregar la aplicación del sistema"
     },
     "security_patch": {
         "title": "Parche de Seguridad",
@@ -111,5 +117,16 @@
         "invalid_boot": "Formato de boot inválido",
         "invalid_system": "Formato de system inválido",
         "invalid_vendor": "Formato de vendor inválido"
+    },
+    "add_system_app": {
+        "title": "Añadir aplicación del sistema",
+        "add": "Añadir",
+        "current_list": "Lista actual de aplicaciones del sistema"
+    },
+    "confirmation": {
+        "uninstall_title": "¿Confirmar desinstalación?",
+        "uninstall_message": "¿Está seguro de que desea desinstalar Tricky Addon",
+        "uninstall_cancel": "Cancelar",
+        "uninstall_confirm": "Confirmar"
     }
 }

module/webui/locales/id-ID.json

@@ -0,0 +1,132 @@
+{
+    "language": "Bahasa Indonesia",
+    "system_default": "Default Sistem",
+    "header": {
+        "title": "Tricky Addon"
+    },
+    "help": {
+        "help_instructions": "Panduan",
+        "save_and_update": "Simpan",
+        "save_and_update_description": "Simpan konfigurasi saat ini ke target.txt.",
+        "refresh": "Segarkan",
+        "refresh_description": "Perbarui daftar aplikasi dan daftar pengecualian.",
+        "select_deselect": "Pilih & Batalkan Pilihan Semua",
+        "select_description": "Pilih atau batalkan pilihan semua aplikasi yang ditampilkan.",
+        "select_denylist": "Pilih dari Denylist",
+        "select_denylist_description": "Hanya untuk Magisk, pilih aplikasi yang ada di Denylist. Disarankan.",
+        "deselect_unnecessary": "Batalkan Pilihan yang Tidak Perlu",
+        "deselect_unnecessary_description": "Kategori tidak perlu: Modul Xposed, pengelola root, aplikasi terkait root, dan aplikasi yang tidak pernah memeriksa status bootloader. Opsi ini memerlukan koneksi internet.",
+        "add_system_app": "Tambahkan Aplikasi Sistem",
+        "add_system_app_description": "Tambahkan aplikasi sistem tertentu ke daftar aplikasi.",
+        "set_keybox": "Ganti Keybox AOSP & Valid",
+        "set_keybox_description": "Ganti file keybox.xml bawaan. Jika tidak ada keybox valid, maka keybox AOSP akan digunakan. Opsi ini memerlukan koneksi internet.",
+        "set_custom_keybox": "Gunakan Keybox Kustom",
+        "set_custom_keybox_description": "Impor keybox dari penyimpanan perangkat. Hanya mendukung file XML.",
+        "set_security_patch": "Atur Patch Keamanan",
+        "set_security_patch_description": "Sesuaikan patch keamanan. Konfigurasi otomatis akan menggunakan patch dari modul PIF dan aktif secara default. Kosongkan dan simpan untuk menonaktifkan konfigurasi otomatis.",
+        "set_verified_boot_hash": "Atur Verified Boot Hash",
+        "set_verified_boot_hash_description": "Ambil nilai verifiedBootHash dari aplikasi Key Attestation Demo. Perbaiki status boot yang bermasalah dengan mereset ro.boot.vbmeta.digest."
+    },
+    "update": {
+        "update_available": "Versi baru tersedia!",
+        "redirect_to_release": "Ketuk untuk mengunduh versi terbaru",
+        "changelog": "Catatan Perubahan",
+        "install": "Pasang",
+        "reboot": "Mulai Ulang"
+    },
+    "search_bar": {
+        "search_placeholder": "Cari"
+    },
+    "functional_button": {
+        "save_and_update_button": "Simpan",
+        "uninstall_webui": "Copot Pemasangan WebUI"
+    },
+    "loading": {
+        "loading": "Memuat..."
+    },
+    "menu": {
+        "refresh": "Segarkan",
+        "select_all": "Pilih Semua",
+        "deselect_all": "Batalkan Semua Pilihan",
+        "select_denylist": "Pilih dari Denylist",
+        "deselect_unnecessary": "Batalkan Pilihan yang Tidak Perlu",
+        "add_system_app": "Tambahkan Aplikasi Sistem",
+        "set_aosp_keybox": "Gunakan Keybox AOSP",
+        "set_valid_keybox": "Gunakan Keybox Valid",
+        "set_custom_keybox": "Gunakan Keybox Kustom",
+        "set_verified_boot_hash": "Atur Verified Boot Hash",
+        "set_security_patch": "Atur Patch Keamanan",
+        "about": "Tentang"
+    },
+    "boot_hash": {
+        "title": "Verified Boot Hash",
+        "input_placeholder": "Tempel Verified Boot Hash Anda di sini",
+        "save_button": "Simpan"
+    },
+    "about": {
+        "module_name_line1": "Tricky Addon",
+        "module_name_line2": "Perbarui Daftar Target",
+        "by": "oleh",
+        "telegram_channel": "Saluran Telegram",
+        "github": "GitHub",
+        "disclaimer": "Modul ini bukan bagian dari Tricky Store. Jangan laporkan masalah ke Tricky Store jika mengalami kendala.",
+        "acknowledgment": "Pengakuan"
+    },
+    "prompt": {
+        "no_internet": "Periksa koneksi internet Anda",
+        "aosp_key_set": "Keybox AOSP berhasil digunakan",
+        "key_set_error": "Gagal memperbarui keybox",
+        "valid_key_set": "Keybox valid berhasil digunakan",
+        "no_valid_fallback": "Tidak ada keybox valid, menggunakan keybox AOSP.",
+        "boot_hash_set": "Verified Boot Hash berhasil disimpan",
+        "boot_hash_set_error": "Gagal memperbarui Verified Boot Hash",
+        "saved_target": "Konfigurasi disimpan ke target.txt",
+        "save_error": "Gagal menyimpan konfigurasi",
+        "uninstall_prompt": "WebUI akan dicopot setelah perangkat dimulai ulang",
+        "uninstall_failed": "Gagal mencopot pemasangan WebUI",
+        "new_update": "Pembaruan baru tersedia!",
+        "downloading": "Mengunduh pembaruan...",
+        "downloaded": "Unduhan selesai",
+        "download_fail": "Gagal mengunduh pembaruan",
+        "installing": "Memasang pembaruan...",
+        "installed": "Pembaruan berhasil dipasang, mulai ulang sekarang.",
+        "install_fail": "Gagal memasang, silakan perbarui secara manual",
+        "rebooting": "Memulai ulang...",
+        "reboot_fail": "Gagal memulai ulang, silakan lakukan secara manual",
+        "custom_key_set": "Keybox kustom berhasil digunakan",
+        "custom_key_set_error": "Gagal menggunakan keybox kustom",
+        "no_file_selected": "Tidak ada file yang dipilih",
+        "system_app_not_found": "Aplikasi sistem tidak ditemukan",
+        "system_app_error": "Gagal menambahkan aplikasi sistem"
+    },
+    "security_patch": {
+        "title": "Patch Keamanan",
+        "advanced_mode": "Mode Lanjutan",
+        "get_date": "Ambil Tanggal Patch Keamanan",
+        "auto": "Otomatis",
+        "save": "Simpan",
+        "fetching": "Mengambil...",
+        "fetched": "Selesai",
+        "get_failed": "Gagal mengambil tanggal patch keamanan",
+        "auto_success": "Konfigurasi otomatis berhasil diaktifkan",
+        "auto_failed": "Gagal mengaktifkan konfigurasi otomatis",
+        "save_success": "Patch keamanan berhasil disimpan",
+        "save_failed": "Gagal menyimpan patch keamanan",
+        "value_empty": "Konfigurasi patch keamanan dinonaktifkan",
+        "invalid_all": "Format tidak valid",
+        "invalid_boot": "Format boot tidak valid",
+        "invalid_system": "Format sistem tidak valid",
+        "invalid_vendor": "Format vendor tidak valid"
+    },
+    "add_system_app": {
+        "title": "Tambah Aplikasi Sistem",
+        "add": "Tambah",
+        "current_list": "Daftar Aplikasi Sistem Saat Ini"
+    },
+    "confirmation": {
+        "uninstall_title": "Konfirmasi Hapus?",
+        "uninstall_message": "Apakah Anda yakin ingin menghapus Tricky Addon",
+        "uninstall_cancel": "Batal",
+        "uninstall_confirm": "Konfirmasi"
+    }
+}

module/webui/locales/it-IT.json

@@ -0,0 +1,132 @@
+{
+    "language": "Italiano",
+    "system_default": "Predefinito di sistema",
+    "header": {
+        "title": "Tricky Addon"
+    },
+    "help": {
+        "help_instructions": "Istruzioni",
+        "save_and_update": "Salva",
+        "save_and_update_description": "Salva la configurazione corrente in target.txt.",
+        "refresh": "Aggiorna",
+        "refresh_description": "Aggiorna l'elenco delle app e l'elenco delle esclusioni.",
+        "select_deselect": "Seleziona & Deseleziona Tutto",
+        "select_description": "Seleziona o deseleziona tutte le app nell'interfaccia corrente.",
+        "select_denylist": "Seleziona da DenyList",
+        "select_denylist_description": "Disponibile solo in Magisk, seleziona le app presenti nella DenyList. Consigliato.",
+        "deselect_unnecessary": "Deseleziona Non necessari",
+        "deselect_unnecessary_description": "Categoria non necessaria: modulo Xposed, root manager, app correlate al root e app generali che non controllano mai lo stato del bootloader. Questa opzione richiede una connessione a Internet.",
+        "add_system_app": "Aggiungi App di Sistema",
+        "add_system_app_description": "Aggiungi app di sistema specifiche all'elenco delle app.",
+        "set_keybox": "Imposta AOSP & Keybox Valida",
+        "set_keybox_description": "Sostituisci tricky store keybox.xml. La keybox AOSP verrà sostituita se non ci sono più keybox valide. L'opzione valida per la keybox richiede una connessione Internet.",
+        "set_custom_keybox": "Imposta Keybox Personalizzata",
+        "set_custom_keybox_description": "Importa keybox dalla memoria del tuo dispositivo. Supporta solo file xml.",
+        "set_security_patch": "Imposta Patch di Sicurezza",
+        "set_security_patch_description": "Imposta spoofing patch di sicurezza personalizzato. La configurazione automatica utilizzerà la patch di sicurezza dal modulo PIF, abilitato di default. Lascia vuoto e salva per disabilitare la configurazione automatica.",
+        "set_verified_boot_hash": "Imposta Boot Hash Verificato",
+        "set_verified_boot_hash_description": "Ottieni il valore verifiedBootHash da Key Attestation Demo. Correggi lo stato di avvio anomalo reimpostando ro.boot.vbmeta.digest."
+    },
+    "update": {
+        "update_available": "È pronta una nuova versione",
+        "redirect_to_release": "tocca per scaricare l'ultima versione",
+        "changelog": "Changelog",
+        "install": "Installa",
+        "reboot": "Riavvio"
+    },
+    "search_bar": {
+        "search_placeholder": "Ricerca"
+    },
+    "functional_button": {
+        "save_and_update_button": "Salva",
+        "uninstall_webui": "Disinstalla WebUI"
+    },
+    "loading": {
+        "loading": "Caricamento..."
+    },
+    "menu": {
+        "refresh": "Aggiorna",
+        "select_all": "Seleziona Tutto",
+        "deselect_all": "Deseleziona tutto",
+        "select_denylist": "Seleziona da DenyList",
+        "deselect_unnecessary": "Deseleziona Non necessari",
+        "add_system_app": "Aggiungi App di Sistema",
+        "set_aosp_keybox": "Imposta Keybox AOSP",
+        "set_valid_keybox": "Imposta Keybox Valida",
+        "set_custom_keybox": "Imposta Keybox Personalizzata",
+        "set_verified_boot_hash": "Imposta Boot Hash Verificato",
+        "set_security_patch": "Imposta Patch di Sicurezza",
+        "about": "About"
+    },
+    "boot_hash": {
+        "title": "Boot Hash",
+        "input_placeholder": "Incolla qui il tuo Boot Hash verificato",
+        "save_button": "Salva"
+    },
+    "about": {
+        "module_name_line1": "Tricky Addon",
+        "module_name_line2": "Aggiorna Target List",
+        "by": "by",
+        "telegram_channel": "Canale Telegram",
+        "github": "GitHub",
+        "disclaimer": "Questo modulo non fa parte del modulo Tricky Store. NON segnalare eventuali problemi a Tricky Store se riscontrati.",
+        "acknowledgment": "Riconoscimento"
+    },
+    "prompt": {
+        "no_internet": "Controlla la tua connessione Internet",
+        "aosp_key_set": "Keybox AOSP impostata correttamente",
+        "key_set_error": "Impossibile aggiornare keybox",
+        "valid_key_set": "Keybox valida impostata correttamente",
+        "no_valid_fallback": "Nessuna keybox valida trovata, sostituito con keybox AOSP.",
+        "boot_hash_set": "Boot Hash Verificato salvato correttamente",
+        "boot_hash_set_error": "Impossibile aggiornare Boot Hash Verificato",
+        "saved_target": "Configurazione salvata in target.txt",
+        "save_error": "Impossibile salvare la configurazione",
+        "uninstall_prompt": "WebUI verrà rimosso dopo il riavvio",
+        "uninstall_failed": "Impossibile disinstallare WebUI",
+        "new_update": "È disponibile un nuovo aggiornamento!",
+        "downloading": "Download nuovo aggiornamento...",
+        "downloaded": "Download completato",
+        "download_fail": "Impossibile scaricare l'aggiornamento",
+        "installing": "Installazione aggiornamento...",
+        "installed": "Installato correttamente, riavvia ora.",
+        "install_fail": "Installazione non riuscita, aggiorna manualmente",
+        "rebooting": "Riavvio...",
+        "reboot_fail": "Impossibile riavviare, riavvia manualmente",
+        "custom_key_set": "Keybox personalizzata impostata correttamente",
+        "custom_key_set_error": "Impossibile impostare keybox personalizzata",
+        "no_file_selected": "Nessun file selezionato",
+        "system_app_not_found": "App di sistema non trovata",
+        "system_app_error": "Impossibile aggiungere l'app di sistema"
+    },
+    "security_patch": {
+        "title": "Patch di sicurezza",
+        "advanced_mode": "Avanzato",
+        "get_date": "Ottieni data patch di sicurezza",
+        "auto": "Auto",
+        "save": "Salva",
+        "fetching": "Recupero...",
+        "fetched": "Fatto",
+        "get_failed": "Impossibile recuperare la data della patch di sicurezza",
+        "auto_success": "Configurazione automatica abilitata correttamente",
+        "auto_failed": "Impossibile abilitare la configurazione automatica",
+        "save_success": "Patch di sicurezza salvata correttamente",
+        "save_failed": "Impossibile salvare la patch di sicurezza",
+        "value_empty": "La configurazione della patch di sicurezza è disabilitata",
+        "invalid_all": "Formato non valido",
+        "invalid_boot": "Formato boot non valido",
+        "invalid_system": "Formato system non valido",
+        "invalid_vendor": "Formato vendor non valido"
+    },
+    "add_system_app": {
+        "title": "Aggiungi app di sistema",
+        "add": "Aggiungi",
+        "current_list": "Elenco attuale delle app di sistema"
+    },
+    "confirmation": {
+        "uninstall_title": "Confermi disinstallazione?",
+        "uninstall_message": "Sei sicuro di voler disinstallare Tricky Addon",
+        "uninstall_cancel": "Annulla",
+        "uninstall_confirm": "Conferma"
+    }
+}

module/webui/locales/ja-JP.json

@@ -1,5 +1,6 @@
 {
     "language": "日本語",
+    "system_default": "システムデフォルト",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Magisk の環境でのみ使用可能です。Deny List 内のアプリを選択します(推奨)。",
         "deselect_unnecessary": "不要な選択を解除",
         "deselect_unnecessary_description": "不要なカテゴリー: Xposed モジュール、root マネージャー、root 関連アプリ、Bootloader の状態を確認しない一般的なアプリです。このオプションはインターネット接続が必要です。",
+        "add_system_app": "システムアプリを追加",
+        "add_system_app_description": "特定のシステムアプリをアプリリストに追加します。",
         "set_keybox": "AOSP と 有効な Keybox",
         "set_keybox_description": "Tricky Store の keybox.xml を置き換えます。有効な Keybox がなくなった場合は、AOSP Keybox に置き換えられます。インターネット接続が必要です。",
         "set_custom_keybox": "カスタム Keybox を設定",
@@ -47,6 +50,7 @@
         "deselect_all": "すべての選択を解除",
         "select_denylist": "DenyList から選択",
         "deselect_unnecessary": "不要な選択を解除",
+        "add_system_app": "システムアプリを追加",
         "set_aosp_keybox": "AOSP Keybox を設定",
         "set_valid_keybox": "有効な Keybox を設定",
         "set_custom_keybox": "カスタム Keybox を設定",
@@ -91,7 +95,9 @@
         "reboot_fail": "再起動に失敗しました。手動で再起動してください。",
         "custom_key_set": "カスタム Keybox の設定に成功しました",
         "custom_key_set_error": "カスタム Keybox の設定に失敗しました",
-        "no_file_selected": "ファイルが選択されていません"
+        "no_file_selected": "ファイルが選択されていません",
+        "system_app_not_found": "システムアプリが見つかりません",
+        "system_app_error": "システムアプリの追加に失敗しました"
     },
     "security_patch": {
         "title": "セキュリティパッチ",
@@ -111,5 +117,16 @@
         "invalid_boot": "無効な boot 形式です",
         "invalid_system": "無効な system 形式です",
         "invalid_vendor": "無効な vendor 形式です"
+    },
+    "add_system_app": {
+        "title": "システムアプリを追加",
+        "add": "追加",
+        "current_list": "現在のシステムアプリリスト"
+    },
+    "confirmation": {
+        "uninstall_title": "アンインストールの確認",
+        "uninstall_message": "Tricky Addonをアンインストールしてもよろしいですか",
+        "uninstall_cancel": "キャンセル",
+        "uninstall_confirm": "確認"
     }
-}
+}

module/webui/locales/pl-PL.json

@@ -1,5 +1,6 @@
 {
     "language": "Polski",
+    "system_default": "Domyślne systemowe",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Dostępne tylko w Magisk, wybrane aplikacje, które są na DenyList. Zalecane.",
         "deselect_unnecessary": "Odznacz niepotrzebne",
         "deselect_unnecessary_description": "Kategoria niepotrzebna: moduł Xposed, menedżer root, aplikacje związane z rootem i ogólne aplikacje, które nigdy nie sprawdzają stanu bootloadera. Ta opcja wymaga połączenia internetowego.",
+        "add_system_app": "Dodaj aplikację systemową",
+        "add_system_app_description": "Dodaj konkretną aplikację systemową do listy aplikacji.",
         "set_keybox": "Ustaw AOSP i prawidłowy klucz",
         "set_keybox_description": "Zastąp tricky store keybox.xml. Klucz AOSP zostanie zastąpiony, jeśli nie będzie już prawidłowego klucza. Opcja pobrania prawidłowego klucza wymaga połączenia internetowego.",
         "set_custom_keybox": "Ustaw niestandardowy klucz",
@@ -47,6 +50,7 @@
         "deselect_all": "Odznacz wszystko",
         "select_denylist": "Wybierz z listy odrzuconych",
         "deselect_unnecessary": "Odznacz niepotrzebne",
+        "add_system_app": "Dodaj aplikację systemową",
         "set_aosp_keybox": "Ustaw klucz AOSP",
         "set_valid_keybox": "Ustaw ważny klucz",
         "set_custom_keybox": "Ustaw niestandardowy klucz ",
@@ -91,7 +95,9 @@
         "reboot_fail": "Nie udało się ponownie uruchomić, proszę ponownie uruchomić ręcznie",
         "custom_key_set": "Niestandardowe klucz został pomyślnie ustawiony",
         "custom_key_set_error": "Nie udało się ustawić niestandardowego klucza",
-        "no_file_selected": "Nie wybrano pliku"
+        "no_file_selected": "Nie wybrano pliku",
+        "system_app_not_found": "Aplikacja systemowa nie znaleziona",
+        "system_app_error": "Nie udało się dodać aplikacji systemowej"
     },
     "security_patch": {
         "title": "Poprawka bezpieczeństwa",
@@ -111,5 +117,16 @@
         "invalid_boot": "Nieprawidłowy format rozruchu",
         "invalid_system": "Nieprawidłowy format systemu",
         "invalid_vendor": "Nieprawidłowy format dostawcy"
+    },
+    "add_system_app": {
+        "title": "Dodaj aplikację systemową",
+        "add": "Dodaj",
+        "current_list": "Aktualna lista aplikacji systemowych"
+    },
+    "confirmation": {
+        "uninstall_title": "Potwierdzić odinstalowanie?",
+        "uninstall_message": "Czy na pewno chcesz odinstalować Tricky Addon",
+        "uninstall_cancel": "Anuluj",
+        "uninstall_confirm": "Potwierdź"
     }
 }

module/webui/locales/ru-RU.json

@@ -1,5 +1,6 @@
 {
     "language": "Русский",
+    "system_default": "Системный по умолчанию",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Доступно только в Magisk, выберите приложения, которые находятся в DenyList. Рекомендуется.",
         "deselect_unnecessary": "Отменить выбор ненужных",
         "deselect_unnecessary_description": "Ненужные категории: модули Xposed, менеджеры root, приложения, связанные с root, и общие приложения, которые никогда не проверяют статус загрузчика. Этот параметр требует подключения к интернету.",
+        "add_system_app": "Добавить системное приложение",
+        "add_system_app_description": "Добавить конкретное системное приложение в список приложений.",
         "set_keybox": "Установить AOSP и действующий Keybox",
         "set_keybox_description": "Замените tricky store keybox.xml. AOSP keybox будет заменен, если не будет найден действующий keybox. Опция с действующим keybox требует подключения к интернету.",
         "set_custom_keybox": "Установить пользовательский Keybox",
@@ -47,6 +50,7 @@
         "deselect_all": "Отменить выбор всех",
         "select_denylist": "Выбрать из DenyList",
         "deselect_unnecessary": "Отменить выбор ненужных",
+        "add_system_app": "Добавить системное приложение",
         "set_aosp_keybox": "Установить AOSP Keybox",
         "set_valid_keybox": "Установить действующий Keybox",
         "set_custom_keybox": "Установить пользовательский Keybox",
@@ -91,7 +95,9 @@
         "reboot_fail": "Не удалось перезагрузить, перезагрузите вручную",
         "custom_key_set": "Пользовательский keybox успешно установлен",
         "custom_key_set_error": "Не удалось установить пользовательский keybox",
-        "no_file_selected": "Файл не выбран"
+        "no_file_selected": "Файл не выбран",
+        "system_app_not_found": "Системное приложение не найдено",
+        "system_app_error": "Не удалось добавить системное приложение"
     },
     "security_patch": {
         "title": "Патч безопасности",
@@ -111,5 +117,16 @@
         "invalid_boot": "Неверный формат boot",
         "invalid_system": "Неверный формат system",
         "invalid_vendor": "Неверный формат vendor"
+    },
+    "add_system_app": {
+        "title": "Добавить системное приложение",
+        "add": "Добавить",
+        "current_list": "Текущий список системных приложений"
+    },
+    "confirmation": {
+        "uninstall_title": "Подтвердить удаление?",
+        "uninstall_message": "Вы уверены, что хотите удалить Tricky Addon",
+        "uninstall_cancel": "Отмена",
+        "uninstall_confirm": "Подтвердить"
     }
 }

module/webui/locales/tl-PH.json

@@ -1,5 +1,6 @@
 {
-    "language": "Tagalog",
+    "language": "Filipino",
+    "system_default": "Default ng Sistema",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Available lang sa Magisk, piliin ang mga app na nasa DenyList. Inirerekomenda.",
         "deselect_unnecessary": "Huwag Pumili ng Hindi Kinakailangan",
         "deselect_unnecessary_description": "Hindi kinakailangang kategorya: Xposed module, root manager, root-related apps, at mga karaniwang apps na hindi kailanman nire-refresh ang bootloader status. Nangangailangan ng koneksyon sa internet.",
+        "add_system_app": "Magdagdag ng System App",
+        "add_system_app_description": "Magdagdag ng tiyak na system app sa listahan ng apps.",
         "set_keybox": "I-set ang AOSP at Valid Keybox",
         "set_keybox_description": "Palitan ang tricky store keybox. Palitan ang AOSP keybox kung walang valid keybox. Nangangailangan ng koneksyon sa internet ang valid keybox option.",
         "set_custom_keybox": "I-set ang Custom Keybox",
@@ -47,6 +50,7 @@
         "deselect_all": "Huwag Pumili ng Lahat",
         "select_denylist": "Piliin mula sa DenyList",
         "deselect_unnecessary": "Huwag Pumili ng Hindi Kinakailangan",
+        "add_system_app": "Magdagdag ng System App",
         "set_aosp_keybox": "I-set ang AOSP Keybox",
         "set_valid_keybox": "I-set ang Valid Keybox",
         "set_custom_keybox": "I-set ang Custom Keybox",
@@ -91,7 +95,9 @@
         "reboot_fail": "Nabigo ang pag-reboot, pakisubukang mag-reboot nang manu-mano",
         "custom_key_set": "Matagumpay na na-set ang Custom Keybox",
         "custom_key_set_error": "Nabigong i-set ang Custom Keybox",
-        "no_file_selected": "Walang napiling file"
+        "no_file_selected": "Walang napiling file",
+        "system_app_not_found": "Walang natagpuan na system app",
+        "system_app_error": "Nabigong dagdag ang system app"
     },
     "security_patch": {
         "title": "Security Patch",
@@ -111,5 +117,16 @@
         "invalid_boot": "Invalid boot format",
         "invalid_system": "Invalid system format",
         "invalid_vendor": "Invalid vendor format"
+    },
+    "add_system_app": {
+        "title": "Magdagdag ng System App",
+        "add": "Idagdag",
+        "current_list": "Kasalukuyang Listahan ng System App"
+    },
+    "confirmation": {
+        "uninstall_title": "Kumpirmahin ang Pag-uninstall?",
+        "uninstall_message": "Sigurado ka bang gusto mong i-uninstall ang Tricky Addon",
+        "uninstall_cancel": "Kanselahin",
+        "uninstall_confirm": "Kumpirmahin"
     }
 }

module/webui/locales/tr-TR.json

@@ -1,5 +1,6 @@
 {
     "language": "Türkçe",
+    "system_default": "Sistem Varsayılanı",
     "header": {
         "title": "Tricky Addon"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "Yalnızca Magisk'te mevcut, Reddetme Listesindeki uygulamaları seç. Tavsiye edilir.",
         "deselect_unnecessary": "Gereksizleri Seçme",
         "deselect_unnecessary_description": "Gereksiz kategori: Xposed modülü, root yöneticisi, root ile ilgili uygulamalar ve asla bootloader durumunu kontrol etmeyen genel uygulamalar. Bu seçenek internet bağlantısı gerektirir.",
+        "add_system_app": "Sistem Uygulaması Ekle",
+        "add_system_app_description": "Belirli bir sistem uygulamasını uygulama listesine ekleyin.",
         "set_keybox": "AOSP & Geçerli Keybox Ayarla",
         "set_keybox_description": "Tricky Store'daki keybox.xml dosyasını değiştirir. Eğer geçerli bir keybox yoksa AOSP keybox ile değiştirilecektir. Geçerli keybox seçeneği internet bağlantısı gerektirir.",
         "set_custom_keybox": "Özel Keybox Ayarla",
@@ -47,6 +50,7 @@
         "deselect_all": "Tüm Seçimleri Kaldır",
         "select_denylist": "Reddetme Listesinden Seç",
         "deselect_unnecessary": "Gereksizleri Seçme",
+        "add_system_app": "Sistem Uygulaması Ekle",
         "set_aosp_keybox": "AOSP Keybox Ayarla",
         "set_valid_keybox": "Geçerli Keybox Ayarla",
         "set_custom_keybox": "Özel Keybox Ayarla",
@@ -91,7 +95,9 @@
         "reboot_fail": "Yeniden başlatma başarısız, lütfen manuel olarak yeniden başlatın",
         "custom_key_set": "Özel keybox başarıyla ayarlandı",
         "custom_key_set_error": "Özel keybox ayarlanamadı",
-        "no_file_selected": "Dosya seçilmedi"
+        "no_file_selected": "Dosya seçilmedi",
+        "system_app_not_found": "Sistem uygulaması bulunamadı",
+        "system_app_error": "Sistem uygulaması ekleme hatası"
     },
     "security_patch": {
         "title": "Güvenlik Yaması",
@@ -111,5 +117,16 @@
         "invalid_boot": "Geçersiz boot formatı",
         "invalid_system": "Geçersiz system formatı",
         "invalid_vendor": "Geçersiz vendor formatı"
+    },
+    "add_system_app": {
+        "title": "Sistem Uygulaması Ekle",
+        "add": "Ekle",
+        "current_list": "Mevcut Sistem Uygulamaları Listesi"
+    },
+    "confirmation": {
+        "uninstall_title": "Kaldırma İşlemi Onaylansın mı?",
+        "uninstall_message": "Tricky Addon'u kaldırmak istediğinizden emin misiniz",
+        "uninstall_cancel": "İptal",
+        "uninstall_confirm": "Onayla"
     }
 }

module/webui/locales/zh-CN.json

@@ -1,5 +1,6 @@
 {
     "language": "简体中文",
+    "system_default": "系统默认",
     "header": {
         "title": "TS 插件"
     },
@@ -13,8 +14,10 @@
         "select_description": "选择或取消选择当前界面中的所有应用。",
         "select_denylist": "从排除列表中选择",
         "select_denylist_description": "仅适用于 Magisk，选择在排除列表中的应用。推荐使用。",
-        "deselect_unnecessary": "取消选择非必应用",
+        "deselect_unnecessary": "取消选择非必要应用",
         "deselect_unnecessary_description": "非必要分类：Xposed 模块、root 管理器、与 root 相关的应用，以及从不检查 bootloader 状态的通用应用。此功能需连网使用。",
+        "add_system_app": "添加系统应用",
+        "add_system_app_description": "添加特定系统应用到应用列表。",
         "set_keybox": "设置 AOSP & 有效密钥",
         "set_keybox_description": "替换 Tricky Store 的密钥（keybox.xml）。如果没有有效密钥，将替换为 AOSP 密钥。有效密钥选项需连网使用。",
         "set_custom_keybox": "设置自定义密钥",
@@ -46,7 +49,8 @@
         "select_all": "全选",
         "deselect_all": "取消全选",
         "select_denylist": "从排除列表中选择",
-        "deselect_unnecessary": "取消选择非必应用",
+        "deselect_unnecessary": "取消选择非必要应用",
+        "add_system_app": "添加系统应用",
         "set_aosp_keybox": "设置 AOSP 密钥",
         "set_valid_keybox": "设置有效密钥",
         "set_custom_keybox": "设置自定义密钥",
@@ -91,7 +95,9 @@
         "reboot_fail": "重启失败，请手动重启",
         "custom_key_set": "成功设置自定义密钥",
         "custom_key_set_error": "设置自定义密钥失败",
-        "no_file_selected": "未选择文件"
+        "no_file_selected": "未选择文件",
+        "system_app_not_found": "未找到该系统应用",
+        "system_app_error": "系统应用添加失败"
     },
     "security_patch": {
         "title": "安全补丁",
@@ -111,5 +117,16 @@
         "invalid_boot": "无效 boot 格式",
         "invalid_system": "无效 system 格式",
         "invalid_vendor": "无效 vendor 格式"
+    },
+    "add_system_app": {
+        "title": "添加系统应用",
+        "add": "添加",
+        "current_list": "当前系统应用列表"
+    },
+    "confirmation": {
+        "uninstall_title": "确认卸载？",
+        "uninstall_message": "您确定要卸载 TS 插件吗",
+        "uninstall_cancel": "取消",
+        "uninstall_confirm": "确认"
     }
-}
+}

module/webui/locales/zh-TW.json

@@ -1,5 +1,6 @@
 {
     "language": "繁體中文",
+    "system_default": "系統預設",
     "header": {
         "title": "TS 插件"
     },
@@ -15,6 +16,8 @@
         "select_denylist_description": "僅適用於 Magisk，選擇在排除列表中的應用。推薦使用。",
         "deselect_unnecessary": "取消選擇非必要應用",
         "deselect_unnecessary_description": "非必要分類：Xposed 模組、root 管理器、與 root 相關的應用，以及從不檢查 bootloader 狀態的通用應用。此功能需連網使用。",
+        "add_system_app": "添加系統應用",
+        "add_system_app_description": "添加特定系統應用到應用列表。",
         "set_keybox": "設置 AOSP & 有效密鑰",
         "set_keybox_description": "替換 Tricky Store 的密鑰（keybox.xml）。如果沒有有效密鑰，將替換為 AOSP 密鑰。有效密鑰選項需連網使用。",
         "set_custom_keybox": "設置自定義密鑰",
@@ -47,6 +50,7 @@
         "deselect_all": "取消全選",
         "select_denylist": "從排除列表中選擇",
         "deselect_unnecessary": "取消選擇非必要應用",
+        "add_system_app": "添加系統應用",
         "set_aosp_keybox": "設置 AOSP 密鑰",
         "set_valid_keybox": "設置有效密鑰",
         "set_custom_keybox": "設置自定義密鑰",
@@ -91,7 +95,9 @@
         "reboot_fail": "重啟失敗，請手動重啟",
         "custom_key_set": "成功設置自定義密鑰",
         "custom_key_set_error": "設置自定義密鑰失敗",
-        "no_file_selected": "未選擇文件"
+        "no_file_selected": "未選擇文件",
+        "system_app_not_found": "未找到該系統應用",
+        "system_app_error": "系統應用添加失敗"
     },
     "security_patch": {
         "title": "安全補丁",
@@ -111,5 +117,16 @@
         "invalid_boot": "無效 boot 格式",
         "invalid_system": "無效 system 格式",
         "invalid_vendor": "無效 vendor 格式"
+    },
+    "add_system_app": {
+        "title": "添加系統應用",
+        "add": "添加",
+        "current_list": "當前系統應用列表"
+    },
+    "confirmation": {
+        "uninstall_title": "確認卸載？",
+        "uninstall_message": "您確定要卸載 TS 插件嗎",
+        "uninstall_cancel": "取消",
+        "uninstall_confirm": "確認"
     }
 }

module/webui/scripts/about.js

@@ -1,4 +1,4 @@
-import { execCommand, linkRedirect } from './main.js';
+import { linkRedirect } from './main.js';
 
 const telegramLink = document.getElementById('telegram');
 const githubLink = document.getElementById('github');
@@ -6,35 +6,30 @@ const githubLink = document.getElementById('github');
 // Function to show about overlay
 document.getElementById("about").addEventListener("click", () => {
     const aboutOverlay = document.getElementById('about-overlay');
-    const aboutMenu = document.getElementById('about-menu');
+    const aboutContent = document.querySelector('.about-menu');
     const closeAbout = document.getElementById('close-about');
-    const showMenu = () => {
-        aboutOverlay.style.display = 'flex';
-        setTimeout(() => {
-            aboutOverlay.style.opacity = '1';
-            aboutMenu.style.opacity = '1';
-        }, 10);
-        document.body.style.overflow = 'hidden';
-    };
+
+    // Show about menu
+    document.body.classList.add("no-scroll");
+    aboutOverlay.style.display = 'flex';
+    setTimeout(() => {
+        aboutOverlay.style.opacity = '1';
+        aboutContent.classList.add('open');
+    }, 10);
+
     const hideMenu = () => {
+        document.body.classList.remove("no-scroll");
         aboutOverlay.style.opacity = '0';
-        aboutMenu.style.opacity = '0';
+        aboutContent.classList.remove('open');
         setTimeout(() => {
             aboutOverlay.style.display = 'none';
-            document.body.style.overflow = 'auto';
         }, 200);
     };
-    showMenu();
-    closeAbout.addEventListener('click', (event) => {
-        event.stopPropagation();
-        hideMenu();
-    });
+
+    closeAbout.addEventListener("click", hideMenu);
     aboutOverlay.addEventListener('click', (event) => {
-        if (!aboutMenu.contains(event.target)) {
-            hideMenu();
-        }
+        if (event.target === aboutOverlay) hideMenu();
     });
-    menu.addEventListener('click', (event) => event.stopPropagation());
 });
 
 // Event listener for link redirect

module/webui/scripts/applist.js

@@ -1,14 +1,14 @@
-import { basePath, execCommand, floatingBtn, appsWithExclamation, appsWithQuestion, toast } from './main.js';
+import { basePath, execCommand, hideFloatingBtn, appsWithExclamation, appsWithQuestion, toast } from './main.js';
 
 const appTemplate = document.getElementById('app-template').content;
 const modeOverlay = document.querySelector('.mode-overlay');
 export const appListContainer = document.getElementById('apps-list');
 export const updateCard = document.getElementById('update-card');
-export let modeActive = false;
 
 // Fetch and render applist
 export async function fetchAppList() {
     try {
+        // fetch target list
         let targetList = [];
         try {
             const targetFileContent = await execCommand('cat /data/adb/tricky_store/target.txt');
@@ -19,51 +19,45 @@ export async function fetchAppList() {
             console.error("Failed to read target.txt file:", error);
         }
 
-        let applistMap = {};
-        try {
-            const applistResult = await execCommand(`cat ${basePath}common/tmp/applist`);
-            applistMap = applistResult
-                .split("\n")
-                .reduce((map, line) => {
-                    const match = line.match(/app-name:\s*(.+),\s*package-name:\s*(.+)/);
-                    if (match) {
-                        const appName = match[1].trim();
-                        const packageName = match[2].trim();
-                        map[packageName] = appName;
-                    }
-                    return map;
-                }, {});
-            console.log("Applist loaded successfully.");
-        } catch (error) {
-            console.warn("Applist file not found or could not be loaded. Skipping applist lookup.");
-        }
+        // fetch applist
+        const response = await fetch('applist.json');
+        const appList = await response.json();
+        const appNameMap = appList.reduce((map, app) => {
+            map[app.package_name] = app.app_name;
+            return map;
+        }, {});
 
-        const result = await execCommand(`
-            pm list packages -3 | awk -F: '{print $2}'
-            pm list packages -s | awk -F: '{print $2}' | grep -Ex "com.google.android.gms|com.google.android.gsf|com.android.vending" 2>/dev/null || true
-        `);
-        const appEntries = result
-            .split("\n")
-            .map(line => {
-                const packageName = line.trim();
-                const appName = applistMap[packageName] || null;
-                return { appName, packageName };
-            })
-            .filter(entry => entry.packageName);
-        for (const entry of appEntries) {
-            if (!entry.appName) {
-                try {
-                    const apkPath = await execCommand(`pm path ${entry.packageName} | grep "base.apk" | awk -F: '{print $2}' | tr -d '\\r'`);
-                    if (apkPath) {
-                        const appName = await execCommand(`${basePath}common/aapt dump badging ${apkPath.trim()} 2>/dev/null | grep "application-label:" | sed "s/application-label://; s/'//g"`);
-                        entry.appName = appName.trim() || "Unknown App";
-                    } else {
-                        entry.appName = "Unknown App";
-                    }
-                } catch (error) {
-                    entry.appName = "Unknown App";
+        // Get installed packages first
+        let appEntries = [], installedPackages = [];
+        try {
+            installedPackages = await execCommand(`
+                pm list packages -3 | awk -F: '{print $2}'
+                [ -s "/data/adb/tricky_store/system_app" ] && SYSTEM_APP=$(cat "/data/adb/tricky_store/system_app" | tr '\n' '|' | sed 's/|*$//') || SYSTEM_APP=""
+                [ -z "$SYSTEM_APP" ] || pm list packages -s | awk -F: '{print $2}' | grep -Ex "$SYSTEM_APP" 2>/dev/null || true
+            `)
+            installedPackages = installedPackages.split("\n").map(line => line.trim()).filter(Boolean);
+            appEntries = await Promise.all(installedPackages.map(async packageName => {
+                if (appNameMap[packageName]) {
+                    return {
+                        appName: appNameMap[packageName],
+                        packageName
+                    };
                 }
-            }
+                const appName = await execCommand(`
+                    base_apk=$(pm path ${packageName} | grep "base.apk" | awk -F: '{print $2}')
+                    [ -n "$base_apk" ] || base_apk=$(pm path ${packageName} | grep ".apk" | awk -F: '{print $2}')
+                    ${basePath}/common/aapt dump badging $base_apk 2>/dev/null | grep "application-label:" | sed "s/application-label://; s/'//g"
+                `);
+                return {
+                    appName: appName.trim() || packageName,
+                    packageName
+                };
+            }));
+        } catch (error) {
+            appEntries = appList.map(app => ({
+                appName: app.app_name,
+                packageName: app.package_name
+            }));
         }
 
         // Sort
@@ -103,7 +97,12 @@ export async function fetchAppList() {
             }
         
             const nameElement = appElement.querySelector(".name");
-            nameElement.innerHTML = `<strong>${appName || "Unknown App"}</strong><br>${packageName}`;
+            nameElement.innerHTML = `
+                <div class="app-info">
+                    <div class="app-name"><strong>${appName}</strong></div>
+                    <div class="package-name">${packageName}</div>
+                </div>
+            `;
             const checkbox = appElement.querySelector(".checkbox");
             checkbox.checked = targetList.includes(packageName);
             appListContainer.appendChild(appElement);
@@ -113,7 +112,7 @@ export async function fetchAppList() {
         toast("Failed to fetch app list!");
         console.error("Failed to fetch or render app list with names:", error);
     }
-    floatingBtn.style.transform = 'translateY(0)';
+    hideFloatingBtn(false);
     toggleableCheckbox();
     if (appListContainer.firstChild !== updateCard) {
         appListContainer.insertBefore(updateCard, appListContainer.firstChild);
@@ -201,7 +200,6 @@ function setupModeMenu() {
     function showMode(card) {
         const modeElement = card.querySelector(".mode");
         if (modeElement) {
-            modeActive = true;
             modeElement.style.display = "flex";
             modeOverlay.style.display = "flex";
             setTimeout(() => {
@@ -212,7 +210,6 @@ function setupModeMenu() {
     function hideAllModes() {
         const allModeElements = appListContainer.querySelectorAll(".mode");
         allModeElements.forEach((modeElement) => {
-            modeActive = false;
             modeElement.classList.remove('show');
             modeOverlay.style.display = "none";
             setTimeout(() => {

module/webui/scripts/boot_hash.js

@@ -1,36 +1,33 @@
 import { execCommand, showPrompt } from './main.js';
 
 const bootHashOverlay = document.getElementById('boot-hash-overlay');
-const card = document.getElementById('boot-hash-card');
+const bootHash = document.querySelector('.boot-hash-card');
 const inputBox = document.getElementById('boot-hash-input');
 const saveButton = document.getElementById('boot-hash-save-button');
 
-// Remove empty spaces from input
+// Remove empty spaces from input and convert to lowercase
 window.trimInput = (input) => {
-    input.value = input.value.replace(/\s+/g, '');
+    input.value = input.value.replace(/\s+/g, '').toLowerCase();
 };
 
 // Function to handle Verified Boot Hash
 document.getElementById("boot-hash").addEventListener("click", async () => {
-    const showCard = () => {
-        bootHashOverlay.style.display = "flex";
-        card.style.display = "flex";
-        requestAnimationFrame(() => {
-            bootHashOverlay.classList.add("show");
-            card.classList.add("show");
-        });
-        document.body.style.overflow = "hidden";
-    };
-    const closeCard = () => {
-        bootHashOverlay.classList.remove("show");
-        card.classList.remove("show");
+    // Display boot hash menu
+    document.body.classList.add("no-scroll");
+    bootHashOverlay.style.display = "flex";
+    setTimeout(() => {
+        bootHashOverlay.style.opacity = 1;
+        bootHash.classList.add('open');
+    }, 10);
+
+    const closeBootHashMenu = () => {
+        document.body.classList.remove("no-scroll");
+        bootHashOverlay.style.opacity = 0;
+        bootHash.classList.remove('open');
         setTimeout(() => {
             bootHashOverlay.style.display = "none";
-            card.style.display = "none";
-            document.body.style.overflow = "auto";
         }, 200);
     };
-    showCard();
     try {
         const bootHashContent = await execCommand("cat /data/adb/boot_hash");
         const validHash = bootHashContent
@@ -44,17 +41,23 @@ document.getElementById("boot-hash").addEventListener("click", async () => {
     saveButton.addEventListener("click", async () => {
         const inputValue = inputBox.value.trim();
         try {
-            await execCommand(`echo "${inputValue}" > /data/adb/boot_hash`);
-            await execCommand(`su -c resetprop -n ro.boot.vbmeta.digest ${inputValue}`);
+            await execCommand(`
+                PATH=/data/adb/ap/bin:/data/adb/ksu/bin:/data/adb/magisk:$PATH
+                resetprop -n ro.boot.vbmeta.digest ${inputValue}
+                [ -z "${inputValue}" ] && rm -f /data/adb/boot_hash || {
+                    echo "${inputValue}" > /data/adb/boot_hash
+                    chmod 644 /data/adb/boot_hash
+                }
+            `);
             showPrompt("prompt.boot_hash_set");
-            closeCard();
+            closeBootHashMenu();
         } catch (error) {
             console.error("Failed to update boot_hash:", error);
             showPrompt("prompt.boot_hash_set_error", false);
         }
     });
     bootHashOverlay.addEventListener("click", (event) => {
-        if (event.target === bootHashOverlay) closeCard();
+        if (event.target === bootHashOverlay) closeBootHashMenu();
     });
 
     // Enter to save

module/webui/scripts/help.js

@@ -1,21 +1,21 @@
 const helpButton = document.getElementById('help-button');
 const helpOverlay = document.getElementById('help-overlay');
+const helpContent = document.querySelector('.help-menu');
 const closeHelp = document.getElementById('close-help');
-const helpList = document.getElementById('help-list');
 
 // Open help menu
 helpButton.addEventListener("click", () => {
-    helpOverlay.classList.remove("hide");
-    helpOverlay.style.display = "flex";
-    requestAnimationFrame(() => {
-        helpOverlay.classList.add("show");
-    });
     document.body.classList.add("no-scroll");
+    helpOverlay.style.display = "flex";
+    setTimeout(() => {
+        helpOverlay.style.opacity = 1;
+        helpContent.classList.add('open');
+    }, 10);
 });
 
 const hideHelpOverlay = () => {
-    helpOverlay.classList.remove("show");
-    helpOverlay.classList.add("hide");
+    helpOverlay.style.opacity = 0;
+    helpContent.classList.remove('open');
     document.body.classList.remove("no-scroll");
     setTimeout(() => {
         helpOverlay.style.display = "none";

module/webui/scripts/language.js

@@ -1,57 +1,60 @@
-import { basePath, execCommand, toast } from './main.js';
-
 const languageButton = document.querySelector('.language-button');
 const languageMenu = document.querySelector('.language-menu');
 const languageOptions = document.querySelectorAll('.language-option');
 const languageOverlay = document.getElementById('language-overlay');
 
 export let translations = {};
-let currentLang = 'en-US';
 let availableLanguages = ['en-US'];
 
-// Function to check for available language
-export async function initializeAvailableLanguages() {
-    try {
-        const multiLang = await execCommand(`find ${basePath}webui/locales -type f -name "*.json" ! -name "A-template.json" -exec basename -s .json {} \\;`);
-        availableLanguages = multiLang.trim().split('\n');
-        generateLanguageMenu();
-    } catch (error) {
-        toast("Failed to get available langauge!");
-        console.error('Failed to fetch available languages:', error);
-        availableLanguages = ['en-US'];
-    }
-}
-
-// Function to detect user's default language
-export function detectUserLanguage() {
+/**
+ * Detect user's default language
+ * @returns {Promise<string>} - Detected language code
+ */
+export async function detectUserLanguage() {
     const userLang = navigator.language || navigator.userLanguage;
     const langCode = userLang.split('-')[0];
-    if (availableLanguages.includes(userLang)) {
-        return userLang;
-    } else if (availableLanguages.includes(langCode)) {
-        return langCode;
-    } else {
+
+    try {
+        // Fetch available languages
+        const availableResponse = await fetch('locales/available-lang.json');
+        const availableData = await availableResponse.json();
+        availableLanguages = availableData.languages;
+        generateLanguageMenu();
+
+        // Fetch preferred language
+        const prefered_language_code = localStorage.getItem('trickyAddonLanguage');
+
+        // Check if preferred language is valid
+        if (prefered_language_code !== 'default' && availableLanguages.includes(prefered_language_code)) {
+            return prefered_language_code;
+        } else if (availableLanguages.includes(userLang)) {
+            return userLang;
+        } else if (availableLanguages.includes(langCode)) {
+            return langCode;
+        } else {
+            return 'en-US';
+        }
+    } catch (error) {
+        console.error('Error detecting user language:', error);
         return 'en-US';
     }
 }
 
-// Load translations dynamically based on the selected language
-export async function loadTranslations(lang) {
-    try {
-        const response = await fetch(`/locales/${lang}.json`);
-        translations = await response.json();
-        applyTranslations();
-    } catch (error) {
-        toast(`Failed to load translation for ${lang}!`);
-        console.error(`Error loading translations for ${lang}:`, error);
-        if (lang !== 'en-US') {
-            console.log("Falling back to English.");
-            loadTranslations('en-US');
-        }
-    }
+/**
+ * Load translations dynamically based on the selected language
+ * @returns {Promise<void>}
+ */
+export async function loadTranslations() {
+    const lang = await detectUserLanguage();
+    const response = await fetch(`locales/${lang}.json`);
+    translations = await response.json();
+    applyTranslations();
 }
 
-// Function to apply translations to all elements with data-i18n attributes
+/**
+ * Apply translations to all elements with data-i18n attributes
+ * @returns {void}
+ */
 function applyTranslations() {
     document.querySelectorAll("[data-i18n]").forEach((el) => {
         const keyString = el.getAttribute("data-i18n");
@@ -66,7 +69,10 @@ function applyTranslations() {
     });
 }
 
-// Function to setup the language menu
+/**
+ * Function to setup the language menu
+ * @returns {void}
+ */
 export function setupLanguageMenu() {
     languageButton.addEventListener("click", (event) => {
         event.stopPropagation();
@@ -105,18 +111,31 @@ export function setupLanguageMenu() {
     languageMenu.addEventListener("click", (e) => {
     if (e.target.classList.contains("language-option")) {
         const lang = e.target.getAttribute("data-lang");
+        localStorage.setItem('trickyAddonLanguage', lang);
         loadTranslations(lang);
         closeLanguageMenu();
     }
 });
 }
 
-// Function to generate the language menu dynamically
+/**
+ * Generate the language menu dynamically
+ * Refer available-lang.json in ./locales for list of languages
+ * @returns {Promise<void>}
+ */
 async function generateLanguageMenu() {
     languageMenu.innerHTML = '';
+    
+    // Add System Default option
+    const defaultButton = document.createElement('button');
+    defaultButton.classList.add('language-option', 'ripple-element');
+    defaultButton.setAttribute('data-lang', 'default');
+    defaultButton.setAttribute('data-i18n', 'system_default');
+    languageMenu.appendChild(defaultButton);
+
     const languagePromises = availableLanguages.map(async (lang) => {
         try {
-            const response = await fetch(`/locales/${lang}.json`);
+            const response = await fetch(`locales/${lang}.json`);
             const data = await response.json();
             return { lang, name: data.language || lang };
         } catch (error) {

module/webui/scripts/main.js

@@ -1,6 +1,6 @@
-import { appListContainer, fetchAppList, modeActive } from './applist.js';
-import { initializeAvailableLanguages, detectUserLanguage, loadTranslations, setupLanguageMenu, translations } from './language.js';
-import { aospkb } from './menu_option.js';
+import { appListContainer, fetchAppList } from './applist.js';
+import { loadTranslations, setupLanguageMenu, translations } from './language.js';
+import { aospkb, setupSystemAppMenu } from './menu_option.js';
 import { searchMenuContainer, searchInput, clearBtn, setupMenuToggle } from './search_menu.js';
 import { updateCheck } from './update.js';
 import { securityPatch } from './security_patch.js';
@@ -15,23 +15,33 @@ const permissionPopup = document.getElementById('permission-popup');
 const loadingIndicator = document.querySelector('.loading');
 const prompt = document.getElementById('prompt');
 const floatingCard = document.querySelector('.floating-card');
-export const floatingBtn = document.querySelector('.floating-btn');
+const floatingBtn = document.querySelector('.floating-btn');
 
-export const basePath = "set-path";
+export let basePath;
 export const appsWithExclamation = [];
 export const appsWithQuestion = [];
-const ADDITIONAL_APPS = [ "android", "com.android.vending", "com.google.android.gms", "io.github.vvb2060.keyattestation", "io.github.vvb2060.mahoshojo", "icu.nullptr.nativetest" ]; // Always keep default apps in target.txt
+const ADDITIONAL_APPS = [ "android", "com.google.android.gms", "io.github.vvb2060.keyattestation", "io.github.vvb2060.mahoshojo", "icu.nullptr.nativetest" ]; // Always keep default apps in target.txt
 
 // Variables
 let e = 0;
 let isRefreshing = false;
 let MMRL_API = true;
 
+// Function to set basePath
+async function getBasePath() {
+    try {
+        await execCommand('[ -d /data/adb/modules/.TA_utl ]');
+        basePath = "/data/adb/modules/.TA_utl"
+    } catch (error) {
+        basePath = "/data/adb/modules/TA_utl"
+    }
+}
+
 // Function to load the version from module.prop
 async function getModuleVersion() {
     const moduleVersion = document.getElementById('module-version');
     try {
-        const version = await execCommand(`grep '^version=' ${basePath}common/update/module.prop | cut -d'=' -f2`);
+        const version = await execCommand(`grep '^version=' ${basePath}/common/update/module.prop | cut -d'=' -f2`);
         moduleVersion.textContent = version;
     } catch (error) {
         console.error("Failed to read version from module.prop:", error);
@@ -40,7 +50,7 @@ async function getModuleVersion() {
 }
 
 // Function to refresh app list
-async function refreshAppList() {
+export async function refreshAppList() {
     isRefreshing = true;
     title.style.transform = 'translateY(0)';
     searchMenuContainer.style.transform = 'translateY(0)';
@@ -55,7 +65,7 @@ async function refreshAppList() {
     if (noConnection.style.display === "flex") {
         try {
             updateCheck();
-            await execCommand(`[ -f ${basePath}common/tmp/exclude-list ] && rm -f "${basePath}common/tmp/exclude-list"`);
+            await execCommand(`[ -f ${basePath}/common/tmp/exclude-list ] && rm -f "${basePath}/common/tmp/exclude-list"`);
         } catch (error) {
             toast("Failed!");
             console.error("Error occurred:", error);
@@ -114,11 +124,7 @@ export function showPrompt(key, isSuccess = true, duration = 3000) {
         clearTimeout(window.promptTimeout);
     }
     setTimeout(() => {
-        if (typeof ksu !== 'undefined' && ksu.mmrl) {
-            prompt.style.transform = 'translateY(calc((var(--window-inset-bottom) + 60%) * -1))';
-        } else {
-            prompt.style.transform = 'translateY(-60%)';
-        }
+        prompt.style.transform = 'translateY(calc((var(--window-inset-bottom, 0px) + 60%) * -1))';
         window.promptTimeout = setTimeout(() => {
             prompt.style.transform = 'translateY(100%)';
         }, duration);
@@ -172,27 +178,52 @@ document.getElementById("save").addEventListener("click", async () => {
 });
 
 // Uninstall WebUI
-document.querySelector(".uninstall-container").addEventListener("click", async () => {
+document.querySelector(".uninstall-container").addEventListener("click", () => {
+    const uninstallOverlay = document.getElementById("uninstall-confirmation-overlay");
+    const uninstallContent = document.querySelector('.uninstall-confirmation');
+    const cancelButton = document.getElementById("cancel-uninstall");
+    const confirmButton = document.getElementById("confirm-uninstall")
+
+    uninstallOverlay.style.display = 'flex';
+    document.body.classList.add('no-scroll');
+    setTimeout(() => {
+        uninstallOverlay.style.opacity = 1;
+        uninstallContent.classList.add('open');
+    }, 10)
+
+    const closeuninstallOverlay = () => {
+        document.body.classList.remove('no-scroll');
+        uninstallOverlay.style.opacity = 0;
+        uninstallContent.classList.remove('open');
+        setTimeout(() => {
+            uninstallOverlay.style.display = 'none';
+        }, 200)
+    }
+    cancelButton.addEventListener('click', () => closeuninstallOverlay());
+    uninstallOverlay.addEventListener('click', (e) => {
+        if (e.target === uninstallOverlay) closeuninstallOverlay();
+    })
+    confirmButton.addEventListener('click', () => {
+        closeuninstallOverlay();
+        uninstallWebUI();
+    })
+});
+async function uninstallWebUI() {
     try {
-        await execCommand(`sh ${basePath}common/get_extra.sh --uninstall`);
+        await execCommand(`sh ${basePath}/common/get_extra.sh --uninstall`);
         console.log("uninstall script executed successfully.");
         showPrompt("prompt.uninstall_prompt");
     } catch (error) {
         console.error("Failed to execute uninstall command:", error);
         showPrompt("prompt.uninstall_failed", false);
     }
-});
+}
 
 // Function to check if running in MMRL
 async function checkMMRL() {
     if (typeof ksu !== 'undefined' && ksu.mmrl) {
         // Adjust elements position for MMRL
-        title.style.top = 'var(--window-inset-top)';
-        const insetTop = getComputedStyle(document.documentElement).getPropertyValue('--window-inset-top');
-        const insetTopValue = parseInt(insetTop, 10);
-        searchMenuContainer.style.top = `${insetTopValue + 40}px`;
         headerBlock.style.display = 'block';
-        floatingCard.style.bottom = 'calc(var(--window-inset-bottom) + 50px)';
 
         // Set status bars theme based on device theme
         try {
@@ -214,19 +245,16 @@ async function checkMMRL() {
             MMRL_API = true;
         } catch (error) {
             console.error('Permission check failed:', error);
-            permissionPopup.classList.remove('hidden');
+            permissionPopup.style.display = 'flex';
             MMRL_API = false;
         }
     }
 }
 
 // Funtion to adapt floating button hide in MMRL
-function hideFloatingBtn() {
-    if (typeof ksu !== 'undefined' && ksu.mmrl) {
-        floatingBtn.style.transform = 'translateY(calc(var(--window-inset-bottom) + 120px))';
-    } else {
-        floatingBtn.style.transform = 'translateY(120px)';
-    }
+export function hideFloatingBtn(hide = true) {
+    if (!hide) floatingCard.style.transform = 'translateY(0)';
+    else floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom, 0px) + 120px))';
 }
 
 // Function to apply ripple effect
@@ -308,22 +336,22 @@ window.addEventListener('scroll', () => {
         headerBlock.style.transform = 'translateY(0)';
         title.style.transform = 'translateY(0)';
         searchMenuContainer.style.transform = 'translateY(0)';
-        floatingBtn.style.transform = 'translateY(0)';
+        hideFloatingBtn(false);
     }
     lastScrollY = window.scrollY;
 });
 
 // Initial load
 document.addEventListener('DOMContentLoaded', async () => {
+    loadTranslations();
     await checkMMRL();
     if (!MMRL_API) return;
+    await getBasePath();
     hideFloatingBtn();
     getModuleVersion();
-    await initializeAvailableLanguages();
-    const userLang = detectUserLanguage();
-    await loadTranslations(userLang);
     setupMenuToggle();
     setupLanguageMenu();
+    setupSystemAppMenu();
     await fetchAppList();
     applyRippleEffect();
     checkTrickyStoreVersion();
@@ -331,10 +359,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     updateCheck();
     securityPatch();
     loadingIndicator.style.display = "none";
-    floatingBtn.style.opacity = '1';
-    setTimeout(() => {
-        floatingBtn.style.transform = 'translateY(0)';
-    }, 10);
+    floatingBtn.style.display = 'block';
+    hideFloatingBtn(false);
     document.getElementById("refresh").addEventListener("click", refreshAppList);
     document.getElementById("aospkb").addEventListener("click", aospkb);
     document.querySelector('.uninstall-container').classList.remove('hidden-uninstall');
@@ -364,5 +390,9 @@ export async function execCommand(command) {
 
 // Function to toast message
 export function toast(message) {
-    ksu.toast(message);
+    try {
+        ksu.toast(message);
+    } catch (error) {
+        console.error("Failed to show toast:", error);
+    }
 }

module/webui/scripts/menu_option.js

@@ -1,4 +1,4 @@
-import { basePath, execCommand, showPrompt, toast, applyRippleEffect } from './main.js';
+import { basePath, execCommand, showPrompt, toast, applyRippleEffect, refreshAppList } from './main.js';
 
 // Function to check or uncheck all app
 function toggleCheckboxes(shouldCheck) {
@@ -57,7 +57,7 @@ document.getElementById("deselect-unnecessary").addEventListener("click", async
                 toast("Failed to download unnecessary apps!");
                 throw error;
             });
-        const xposed = await execCommand(`sh ${basePath}common/get_extra.sh --xposed`);
+        const xposed = await execCommand(`sh ${basePath}/common/get_extra.sh --xposed`);
         const UnnecessaryApps = excludeList.split("\n").map(app => app.trim()).filter(Boolean).concat(xposed.split("\n").map(app => app.trim()).filter(Boolean));
         const apps = document.querySelectorAll(".card");
         apps.forEach(app => {
@@ -75,12 +75,112 @@ document.getElementById("deselect-unnecessary").addEventListener("click", async
     }
 });
 
+// Function to add system app
+export async function setupSystemAppMenu() {
+    document.getElementById("add-system-app").addEventListener("click", () => openSystemAppOverlay());
+    document.getElementById("add-system-app-overlay").addEventListener("click", (event) => {
+        if (event.target === event.currentTarget) closeSystemAppOverlay();
+    });
+    const systemAppOverlay = document.getElementById("add-system-app-overlay");
+    const systemAppContent = document.querySelector('.add-system-app-card');
+    const systemAppInput = document.getElementById("system-app-input");
+    function openSystemAppOverlay() {
+        renderSystemAppList();
+        document.body.classList.add("no-scroll");
+        systemAppOverlay.style.display = "flex";
+        setTimeout(() => {
+            systemAppOverlay.style.opacity = "1";
+            systemAppContent.classList.add('open');
+        }, 10);
+        systemAppInput.value = "";
+    }
+    function closeSystemAppOverlay() {
+        document.body.classList.remove("no-scroll");
+        systemAppOverlay.style.opacity = "0";
+        systemAppContent.classList.remove('open');
+        setTimeout(() => {
+            systemAppOverlay.style.display = "none";
+        }, 300);
+    }
+
+    // Add system app button
+    document.getElementById("add-system-app-button").addEventListener("click", async () => {
+        const input = document.getElementById("system-app-input");
+        const packageName = input.value.trim();
+        if (packageName) {
+            try {
+                const result = await execCommand(`pm list packages -s | grep -q ${packageName} || echo "false"`);
+                if (result.includes("false")) {
+                    showPrompt("prompt.system_app_not_found", false);
+                } else {
+                    await execCommand(`
+                        touch "/data/adb/tricky_store/system_app"
+                        echo "${packageName}" >> "/data/adb/tricky_store/system_app"
+                        echo "${packageName}" >> "/data/adb/tricky_store/target.txt"
+                    `);
+                    systemAppInput.value = "";
+                    closeSystemAppOverlay();
+                    refreshAppList();
+                }
+            } catch (error) {
+                console.error("Error adding system app:", error);
+                showPrompt("prompt.add_system_app_error", false);
+            }
+        }
+    });
+
+    // Display current system app list and remove button
+    async function renderSystemAppList() {
+        const currentSystemAppList = document.querySelector(".current-system-app-list");
+        const currentSystemAppListContent = document.querySelector(".current-system-app-list-content");
+        currentSystemAppListContent.innerHTML = "";
+        try {
+            const systemAppList = await execCommand(`[ -f "/data/adb/tricky_store/system_app" ] && cat "/data/adb/tricky_store/system_app" | sed '/^$/d' || echo "false"`);
+            if (systemAppList.includes("false")) {
+                currentSystemAppList.style.display = "none";
+            } else {
+                systemAppList.split("\n").forEach(app => {
+                    currentSystemAppListContent.innerHTML += `
+                    <div class="system-app-item">
+                        <span>${app}</span>
+                        <button class="remove-system-app-button ripple-element">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 -960 960 960" width="22px" fill="#FFFFFF"><path d="M154-412v-136h652v136H154Z"/></svg>
+                        </button>
+                    </div>
+                `;
+                });
+            }
+        } catch (error) {
+            currentSystemAppList.style.display = "none";
+            console.error("Error displaying system app list:", error);
+        }
+
+        const removeSystemAppButtons = document.querySelectorAll(".remove-system-app-button");
+        removeSystemAppButtons.forEach(button => {
+            button.addEventListener("click", async () => {
+                const app = button.closest(".system-app-item").querySelector("span").textContent;
+                try {
+                    await execCommand(`
+                        sed -i "/${app}/d" "/data/adb/tricky_store/system_app" || true
+                        sed -i "/${app}/d" "/data/adb/tricky_store/target.txt" || true
+                    `);
+                    closeSystemAppOverlay();
+                    refreshAppList();
+                } catch (error) {
+                    console.error("Error removing system app:", error);
+                }
+            });
+        });
+    }
+}
+
 // Function to backup previous keybox and set new keybox
 async function setKeybox(content) {
+    const sanitizedContent = content.replace(/'/g, "'\\''");
     try {
         await execCommand(`
             mv -f /data/adb/tricky_store/keybox.xml /data/adb/tricky_store/keybox.xml.bak 2>/dev/null
-            echo '${content}' > /data/adb/tricky_store/keybox.xml
+            echo '${sanitizedContent}' > /data/adb/tricky_store/keybox.xml
             chmod 644 /data/adb/tricky_store/keybox.xml
             `);
         return true;
@@ -92,7 +192,7 @@ async function setKeybox(content) {
 
 // Function to replace aosp kb
 export async function aospkb() {
-    const source = await execCommand(`xxd -r -p ${basePath}common/.default | base64 -d`);
+    const source = await execCommand(`xxd -r -p ${basePath}/common/.default | base64 -d`);
     const result = await setKeybox(source);
     if (result) {
         console.log("AOSP keybox copied successfully.");
@@ -136,45 +236,12 @@ document.getElementById("validkb").addEventListener("click", async () => {
     });
 });
 
-// Add file selector dialog elements dynamically
-const fileSelector = document.createElement('div');
-fileSelector.className = 'file-selector-overlay';
-fileSelector.innerHTML = `
-    <div class="file-selector">
-        <div class="file-selector-header">
-            <button class="back-button">
-                <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M400-80 0-480l400-400 56 57-343 343 343 343-56 57Z"/></svg>
-            </button>
-            <div class="current-path">/storage/emulated/0/Download</div>
-            <button class="close-selector">&#x2715;</button>
-        </div>
-        <div class="file-list"></div>
-    </div>
-`;
-document.body.appendChild(fileSelector);
-
-// Add styles for animations
-const style = document.createElement('style');
-style.textContent = `
-    .file-selector-overlay {
-        transition: opacity 0.3s ease;
-        opacity: 0;
-    }
-    .file-selector-overlay.visible {
-        opacity: 1;
-    }
-    .file-list {
-        transition: transform 0.3s ease, opacity 0.3s ease;
-    }
-    .file-list.switching {
-        transform: scale(0.95);
-        opacity: 0;
-    }
-`;
-document.head.appendChild(style);
-
+// File selector
+const fileSelector = document.querySelector('.file-selector-overlay');
+const fileSelectorContent = document.querySelector('.file-selector');
 let currentPath = '/storage/emulated/0/Download';
 
+// Function to display file in current path
 function updateCurrentPath() {
     const currentPathElement = document.querySelector('.current-path');
     const segments = currentPath.split('/').filter(Boolean);
@@ -211,7 +278,7 @@ async function listFiles(path, skipAnimation = false) {
         // Add back button item if not in root directory
         if (currentPath !== '/storage/emulated/0') {
             const backItem = document.createElement('div');
-            backItem.className = 'file-item';
+            backItem.className = 'file-item ripple-element';
             backItem.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                     <path d="M141-160q-24 0-42-18.5T81-220v-520q0-23 18-41.5t42-18.5h280l60 60h340q23 0 41.5 18.5T881-680v460q0 23-18.5 41.5T821-160H141Z"/>
@@ -219,23 +286,14 @@ async function listFiles(path, skipAnimation = false) {
                 <span>..</span>
             `;
             backItem.addEventListener('click', async () => {
-                currentPath = currentPath.split('/').slice(0, -1).join('/');
-                if (currentPath === '') currentPath = '/storage/emulated/0';
-                const currentPathElement = document.querySelector('.current-path');
-                currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('<span class="separator">›</span>');
-                currentPathElement.scrollTo({ 
-                    left: currentPathElement.scrollWidth,
-                    behavior: 'smooth'
-                });
-                await listFiles(currentPath);
+                document.querySelector('.back-button').click();
             });
-            
             fileList.appendChild(backItem);
         }
         items.forEach(item => {
             if (item.path === path) return;
             const itemElement = document.createElement('div');
-            itemElement.className = 'file-item';
+            itemElement.className = 'file-item ripple-element';
             itemElement.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                     ${item.isDirectory ? 
@@ -258,7 +316,7 @@ async function listFiles(path, skipAnimation = false) {
                     const source = await execCommand(`cat "${item.path}"`);
                     const result = await setKeybox(source);
                     if (result) {
-                        fileSelector.style.display = 'none';
+                        closeCustomKeyboxSelector();
                         showPrompt('prompt.custom_key_set');
                     } else {
                         showPrompt('prompt.custom_key_set_error');
@@ -322,28 +380,32 @@ document.querySelector('.back-button').addEventListener('click', async () => {
 
 // Close custom keybox selector
 document.querySelector('.close-selector').addEventListener('click', () => {
-    fileSelector.classList.remove('visible');
+    closeCustomKeyboxSelector();
+});
+fileSelector.addEventListener('click', (event) => {
+    if (event.target === fileSelector) {
+        closeCustomKeyboxSelector();
+    }
+});
+
+// Function to close custom keybox selector
+function closeCustomKeyboxSelector() {
+    fileSelector.style.opacity = '0';
+    fileSelectorContent.classList.remove('open');
     document.body.classList.remove("no-scroll");
     setTimeout(() => {
         fileSelector.style.display = 'none';
     }, 300);
-});
-fileSelector.addEventListener('click', (event) => {
-    if (event.target === fileSelector) {
-        fileSelector.classList.remove('visible');
-        document.body.classList.remove("no-scroll");
-        setTimeout(() => {
-            fileSelector.style.display = 'none';
-        }, 300);
-    }
-});
+}
 
 // Open custom keybox selector
 document.getElementById('customkb').addEventListener('click', async () => {
     fileSelector.style.display = 'flex';
     document.body.classList.add("no-scroll");
-    fileSelector.offsetHeight;
-    fileSelector.classList.add('visible');
+    setTimeout(() => {
+        fileSelector.style.opacity = '1';
+        fileSelectorContent.classList.add('open');
+    }, 10)
     currentPath = '/storage/emulated/0/Download';
     const currentPathElement = document.querySelector('.current-path');
     currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('<span class="separator">›</span>');

module/webui/scripts/security_patch.js

@@ -1,7 +1,7 @@
 import { basePath, execCommand, showPrompt } from './main.js';
 
 const overlay = document.getElementById('security-patch-overlay');
-const card = document.getElementById('security-patch-card');
+const overlayContent = document.querySelector('.security-patch-card');
 const advancedToggle = document.getElementById('advanced-mode');
 const normalInputs = document.getElementById('normal-mode-inputs');
 const advancedInputs = document.getElementById('advanced-mode-inputs');
@@ -16,11 +16,10 @@ const saveButton = document.getElementById('save-patch');
 // Show security patch dialog
 function showSecurityPatchDialog() {
     document.body.classList.add("no-scroll");
-    overlay.style.display = 'block';
-    card.style.display = 'block';
+    overlay.style.display = 'flex';
     setTimeout(() => {
         overlay.style.opacity = '1';
-        card.style.opacity = '1';
+        overlayContent.classList.add('open');
         loadCurrentConfig();
     }, 10);
 }
@@ -29,10 +28,9 @@ function showSecurityPatchDialog() {
 function hideSecurityPatchDialog() {
     document.body.classList.remove("no-scroll");
     overlay.style.opacity = '0';
-    card.style.opacity = '0';
+    overlayContent.classList.remove('open');
     setTimeout(() => {
         overlay.style.display = 'none';
-        card.style.display = 'none';
     }, 200);
 }
 
@@ -41,7 +39,7 @@ async function handleSecurityPatch(mode, value = null) {
     if (mode === 'disable') {
         try {
             await execCommand(`
-                sed -i "s/^auto_config=.*/auto_config=0/" /data/adb/security_patch
+                rm -f /data/adb/tricky_store/security_patch_auto_config
                 rm -f /data/adb/tricky_store/security_patch.txt
             `);
             showPrompt('security_patch.value_empty');
@@ -53,7 +51,7 @@ async function handleSecurityPatch(mode, value = null) {
     } else if (mode === 'manual') {
         try {
             await execCommand(`
-                sed -i "s/^auto_config=.*/auto_config=0/" /data/adb/security_patch
+                rm -f /data/adb/tricky_store/security_patch_auto_config
                 echo "${value}" > /data/adb/tricky_store/security_patch.txt
                 chmod 644 /data/adb/tricky_store/security_patch.txt
             `);
@@ -68,60 +66,47 @@ async function handleSecurityPatch(mode, value = null) {
 
 // Load current configuration
 async function loadCurrentConfig() {
+    let allValue, systemValue, bootValue, vendorValue;
     try {
-        const result = await execCommand('cat /data/adb/security_patch');
-        if (result) {
-            const lines = result.split('\n');
-            let autoConfig = '1', allValue = '0', systemValue = '0', bootValue = '0', vendorValue = '0';
-            for (const line of lines) {
-                if (line.startsWith('auto_config=')) {
-                    autoConfig = line.split('=')[1];
-                }
-            }
-
-            if (autoConfig === '1') {
-                allValue = null;
-                systemValue = null;
-                bootValue = null;
-                vendorValue = null;
-                overlay.classList.add('hidden');
-            } else {
-                // Read values from tricky_store if auto_config is 0
-                const trickyResult = await execCommand('cat /data/adb/tricky_store/security_patch.txt');
-                if (trickyResult) {
-                    const trickyLines = trickyResult.split('\n');
-                    for (const line of trickyLines) {
-                        if (line.startsWith('all=')) {
-                            allValue = line.split('=')[1] || null;
-                            if (allValue !== null) allPatchInput.value = allValue;
-                        } else {
-                            allValue = null;
-                        }
-                        if (line.startsWith('system=')) {
-                            systemValue = line.split('=')[1] || null;
-                            if (systemValue !== null) systemPatchInput.value = systemValue;
-                        } else {
-                            systemValue = null;
-                        }
-                        if (line.startsWith('boot=')) {
-                            bootValue = line.split('=')[1] || null;
-                            if (bootValue !== null) bootPatchInput.value = bootValue;
-                        } else {
-                            bootValue = null;
-                        }
-                        if (line.startsWith('vendor=')) {
-                            vendorValue = line.split('=')[1] || null;
-                            if (vendorValue !== null) vendorPatchInput.value = vendorValue;
-                        } else {
-                            vendorValue = null;
-                        }
+        const autoConfig = await execCommand('[ -f /data/adb/tricky_store/security_patch_auto_config ] && echo "true" || echo "false"');
+        if (autoConfig.trim() === 'true') {
+            allValue = null;
+            systemValue = null;
+            bootValue = null;
+            vendorValue = null;
+        } else {
+            // Read values from tricky_store if auto_config is 0
+            const trickyResult = await execCommand('cat /data/adb/tricky_store/security_patch.txt');
+            if (trickyResult) {
+                const trickyLines = trickyResult.split('\n');
+                for (const line of trickyLines) {
+                    if (line.startsWith('all=')) {
+                        allValue = line.split('=')[1] || null;
+                        if (allValue !== null) allPatchInput.value = allValue;
+                    } else {
+                        allValue = null;
+                    }
+                    if (line.startsWith('system=')) {
+                        systemValue = line.split('=')[1] || null;
+                        if (systemValue !== null) systemPatchInput.value = systemValue;
+                    } else {
+                        systemValue = null;
+                    }
+                    if (line.startsWith('boot=')) {
+                        bootValue = line.split('=')[1] || null;
+                        if (bootValue !== null) bootPatchInput.value = bootValue;
+                    } else {
+                        bootValue = null;
+                    }
+                    if (line.startsWith('vendor=')) {
+                        vendorValue = line.split('=')[1] || null;
+                        if (vendorValue !== null) vendorPatchInput.value = vendorValue;
+                    } else {
+                        vendorValue = null;
                     }
                 }
-                overlay.classList.add('hidden');
             }
-
-            // Check if in advanced mode
-            if (autoConfig === '0' && allValue === null && (bootValue || systemValue || vendorValue)) {
+            if (allValue === null && (bootValue || systemValue || vendorValue)) {
                 checkAdvanced(true);
             }
         }
@@ -240,11 +225,11 @@ export function securityPatch() {
     // Auto config button
     autoButton.addEventListener('click', async () => {
         try {
-            const output = await execCommand(`sh ${basePath}common/get_extra.sh --security-patch`);
+            const output = await execCommand(`sh ${basePath}/common/get_extra.sh --security-patch`);
             if (output.trim() === "not set") {
                 showPrompt('security_patch.auto_failed', false);
             } else {
-                await execCommand(`sed -i "s/^auto_config=.*/auto_config=1/" /data/adb/security_patch`);
+                await execCommand(`touch /data/adb/tricky_store/security_patch_auto_config`);
                 // Reset inputs
                 allPatchInput.value = '';
                 systemPatchInput.value = '';
@@ -333,7 +318,7 @@ export function securityPatch() {
         try {
             showPrompt('security_patch.fetching');
             await new Promise(resolve => setTimeout(resolve, 200));
-            const output = await execCommand(`sh ${basePath}common/get_extra.sh --get-security-patch`);
+            const output = await execCommand(`sh ${basePath}/common/get_extra.sh --get-security-patch`);
             showPrompt('security_patch.fetched', true, 1000);
             checkAdvanced(true);
 

module/webui/scripts/update.js

@@ -1,9 +1,9 @@
 import { basePath, execCommand, showPrompt, noConnection, linkRedirect } from './main.js';
 import { updateCard } from './applist.js';
 
-const updateCardText = document.getElementById('redirect-to-release');
-const UpdateMenu = document.querySelector('.update-overlay');
-const closeUpdate = document.querySelector('.close-update');
+const updateMenu = document.querySelector('.update-overlay');
+const updateMenuContent = document.querySelector('.update-menu');
+const closeUpdate = document.getElementById('close-update');
 const releaseNotes = document.querySelector('.changelog');
 const installButton = document.querySelector('.install');
 const rebootButton = document.querySelector('.reboot');
@@ -26,7 +26,7 @@ function downloadFile(targetURL, fileName) {
                 reader.onload = async function() {
                     const base64Data = reader.result.split(',')[1];
                     try {
-                        await execCommand(`echo ${base64Data} | base64 -d > ${basePath}common/tmp/${fileName}`);
+                        await execCommand(`echo ${base64Data} | base64 -d > ${basePath}/common/tmp/${fileName}`);
                         resolve();
                     } catch (error) {
                         reject(error);
@@ -52,7 +52,7 @@ export async function updateCheck() {
         zipURL = data.zipUrl;
         changelogURL = data.changelog;
 
-        const updateAvailable = await execCommand(`sh ${basePath}common/get_extra.sh --check-update ${remoteVersionCode}`);
+        const updateAvailable = await execCommand(`sh ${basePath}/common/get_extra.sh --check-update ${remoteVersionCode}`);
         if (updateAvailable.includes("update")) {
             showPrompt("prompt.new_update", true, 1500);
             updateCard.style.display = "flex";
@@ -67,7 +67,7 @@ export async function updateCheck() {
 
 // Function to render changelog
 async function renderChangelog() {
-    const changelog = await execCommand(`sh ${basePath}common/get_extra.sh --release-note ${remoteVersion}`);
+    const changelog = await execCommand(`sh ${basePath}/common/get_extra.sh --release-note ${remoteVersion}`);
         window.linkRedirect = linkRedirect;
         marked.setOptions({
             sanitize: true,
@@ -84,24 +84,26 @@ async function renderChangelog() {
             .split('\n')
             .filter(line => line.trim() !== '')
             .join('\n');
-            const formattedChangelog = marked.parse(cleanedChangelog);
-            releaseNotes.innerHTML = formattedChangelog;
+        const formattedChangelog = marked.parse(cleanedChangelog);
+        releaseNotes.innerHTML = formattedChangelog;
 }
 
 // Function to setup update menu
 function setupUpdateMenu() {
     function openUpdateMenu() {
-        UpdateMenu.style.display = "flex";
+        updateMenu.style.display = "flex";
         setTimeout(async () => {
-            UpdateMenu.style.opacity = "1";
+            updateMenu.style.opacity = "1";
+            updateMenuContent.classList.add('open');
         }, 10);
         document.body.classList.add("no-scroll");
     }
     function closeUpdateMenu() {
-        UpdateMenu.style.opacity = "0";
+        updateMenu.style.opacity = "0";
+        updateMenuContent.classList.remove('open');
         document.body.classList.remove("no-scroll");
         setTimeout(async () => {
-            UpdateMenu.style.display = "none";
+            updateMenu.style.display = "none";
         }, 200);
     }
 
@@ -109,8 +111,8 @@ function setupUpdateMenu() {
     updateCard.addEventListener('click', async () => {
         try {
             const module = await execCommand(`
-                [ -f ${basePath}common/tmp/module.zip ] || echo "noModule"
-                [ -f ${basePath}common/tmp/changelog.md ] || echo "noChangelog"
+                [ -f ${basePath}/common/tmp/module.zip ] || echo "noModule"
+                [ -f ${basePath}/common/tmp/changelog.md ] || echo "noChangelog"
                 [ ! -f /data/adb/modules/TA_utl/update ] || echo "updated"
             `);
             if (module.trim().includes("updated")) {
@@ -129,7 +131,7 @@ function setupUpdateMenu() {
                 if (downloading) return;
                 downloading = true;
                 try {
-                    await execCommand(`sh ${basePath}common/get_extra.sh --get-update ${zipURL}`);
+                    await execCommand(`sh ${basePath}/common/get_extra.sh --get-update ${zipURL}`);
                     showPrompt("prompt.downloaded");
                     installButton.style.display = "flex";
                     downloading = false;
@@ -150,22 +152,19 @@ function setupUpdateMenu() {
 
     // Close update menu
     closeUpdate.addEventListener("click", closeUpdateMenu);
-    UpdateMenu.addEventListener("click", (event) => {
-        if (event.target === UpdateMenu) {
-            closeUpdateMenu();
-        }
+    updateMenu.addEventListener("click", (event) => {
+        if (event.target === updateMenu) closeUpdateMenu();
     });
 
     // Install button
     installButton.addEventListener('click', async () => {
         try {
             showPrompt("prompt.installing");
-            setTimeout(async () => {
-                await execCommand(`su -c 'sh ${basePath}common/get_extra.sh --install-update'`);
-                showPrompt("prompt.installed");
-                installButton.style.display = "none";
-                rebootButton.style.display = "flex";
-            }, 300);
+            await new Promise(resolve => setTimeout(resolve, 300));
+            await execCommand(`sh ${basePath}/common/get_extra.sh --install-update`);
+            showPrompt("prompt.installed");
+            installButton.style.display = "none";
+            rebootButton.style.display = "flex";
         } catch (error) {
             showPrompt("prompt.install_fail", false);
             console.error('Fail to execute installation script:', error);
@@ -176,9 +175,8 @@ function setupUpdateMenu() {
     rebootButton.addEventListener('click', async () => {
         try {
             showPrompt("prompt.rebooting");
-            setTimeout(async () => {
-                await execCommand("svc power reboot");
-            }, 1000);
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            await execCommand("svc power reboot");
         } catch (error) {
             showPrompt("prompt.reboot_fail", false);
             console.error('Fail to reboot:', error);

module/webui/styles/about.css

@@ -1,53 +1,24 @@
 .about-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 1100;
-    display: none;
-    justify-content: center;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.2s ease;
 }
 
 .about-menu {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 90vw;
+    position: relative;
+    width: calc(90vw - 60px);
     max-width: 800px;
-    transform: translate(-50%, -50%);
-    background: #fff;
+    background-color: var(--bg-secondary);
     border-radius: 15px;
-    padding: 30px 0;
-    z-index: 1200;
+    padding: 30px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    z-index: 1200;
-    opacity: 0;
     display: flex;
     flex-direction: column;
     gap: 15px;
-    transition: opacity 0.2s ease;
-}
-
-.close-about {
-    position: absolute;
-    top: 15px;
-    right: 12px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    color: #ccc;
-    user-select: none;
 }
 
 .link,
-.about-content p {
+.about-menu p {
     margin: 0;
-    padding: 0 30px;
     font-size: 16px;
     text-align: left;
 }
@@ -69,13 +40,10 @@
 
 #disclaimer {
     font-family: serif;
-    width: calc(100% - 80px);
+    width: calc(100% - 20px);
     padding: 8px 10px;
-    left: 0;
-    right: 0;
-    margin: auto;
     border-radius: 10px;
-    background-color: #F5F5F5;
+    background-color: var(--border-color);
 }
 
 #acknowledgment {
@@ -120,14 +88,4 @@
 #link-text {
     font-size: 17px;
     font-weight: bold;
-}
-
-@media (prefers-color-scheme: dark) {
-    .about-menu {
-        background-color: #343434;
-    }
-
-    #disclaimer {
-        background-color: #6E6E6E;
-    }
 }

module/webui/styles/applist.css

@@ -14,7 +14,7 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    background-color: #DCDCDC;
+    background-color: var(--border-color);
     border: none;
     border-radius: 12px;
     box-sizing: border-box;
@@ -22,7 +22,7 @@
     margin-bottom: 10px;
     outline: none;
     padding: 12px;
-    width: calc(100% - 5px);
+    width: calc(100% - 20px);
     max-width: 900px;
 }
 
@@ -43,40 +43,19 @@
 }
 
 .update-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 1800;
-    justify-content: center;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.2s ease;
 }
 
 .update-menu {
     position: relative;
     width: calc(90% - 60px);
     max-width: 800px;
-    background-color: white;
+    background-color: var(--bg-secondary);
     padding: 30px;
     border-radius: 15px;
     text-align: left;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    transition: opacity 0.2s ease;
-}
-
-.close-update {
-    position: absolute;
-    top: 15px;
-    right: 12px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #ccc;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 .update-content h3 {
@@ -101,12 +80,12 @@
 }
 
 .changelog a {
-    color: #6E6E6E;
-    cursor: none;
+    color: var(--text-secondary);
+    cursor: default;
 }
 
 .changelog a:active {
-    color: blue;
+    color: var(--btn-primary);
 }
 
 .update-button-container {
@@ -121,7 +100,8 @@
     display: none;
     justify-content: center;
     font-weight: bold;
-    background-color: #ddd;
+    color: var(--text-primary);
+    background-color: var(--border-color);
     width: 100%;
     border: none;
     padding: 12px;
@@ -131,12 +111,12 @@
 }
 
 .reboot {
-    color: #fff;
-    background-color: #007bff;
+    color: var(--btn-primary-text);
+    background-color: var(--btn-primary);
 }
 
 .card {
-    background-color: #fff;
+    background-color: var(--bg-secondary);
     border: none;
     box-sizing: border-box;
     border-radius: 12px;
@@ -144,7 +124,7 @@
     margin-bottom: 10px;
     outline: none;
     padding: 12px;
-    width: calc(100% - 5px);
+    width: calc(100% - 20px);
     max-width: 900px;
     transition: background-color 0.2s ease;
 }
@@ -166,9 +146,8 @@
     right: 0;
     margin: auto;
     width: fit-content;
-    background-color: #B1B1B1;
+    background-color: var(--border-color);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border: 1px solid #ccc;
     border-radius: 50px 50px;
     opacity: 0;
     transform: scale(0);
@@ -217,7 +196,7 @@
 }
 
 #normal-indicator {
-    background-color: #007bff;
+    background-color: var(--btn-primary);
 }
 
 #hack-indicator {
@@ -276,11 +255,15 @@
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
     transition: transform 0.2s ease-out, opacity 0.3s ease;
+
+    svg {
+        fill: var(--btn-primary-text);
+    }
 }
 
 .checkbox:checked + .custom-checkbox {
-    border-color: #007bff;
-    background-color: #007bff;
+    border-color: var(--btn-primary);
+    background-color: var(--btn-primary);
     transition: border-color 0.1s ease;
     animation: checked-bounce 0.3s ease-out;
 }
@@ -326,32 +309,4 @@
     100% {
         transform: scale(1);
     }
-}
-
-@media (prefers-color-scheme: dark) {
-    .card {
-        background-color: #343434;
-    }
-
-    .update-card {
-        background-color: #4D4D4D;
-    }
-
-    .mode {
-        background-color: #343434;
-        border: 1px solid #6E6E6E;
-    }
-
-    .install {
-        background-color: #6E6E6E;
-        color: white;
-    }
-
-    .update-menu {
-        background-color: #343434;
-    }
-
-    .update-content a {
-        color: #C2C2C2;
-    }
 }

module/webui/styles/boot_hash.css

@@ -1,45 +1,20 @@
 .boot-hash-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 1200;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
 }
 
 .boot-hash-card {
     position: fixed;
     top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
     width: calc(90% - 60px);
     max-width: 300px;
-    background-color: #fff;
+    height: fit-content;
+    background-color: var(--bg-secondary);
     border-radius: 18px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    z-index: 1200;
     padding: 30px;
-    display: none;
+    display: flex;
     flex-direction: column;
     gap: 15px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.boot-hash-overlay.show {
-    visibility: visible;
-    opacity: 1;
-}
-
-.boot-hash-card.show {
-    display: flex;
-    opacity: 1;
 }
 
 .boot-hash-title {
@@ -54,11 +29,12 @@
     height: 100px;
     font-size: 16px;
     padding: 10px;
-    background-color: #F5F5F5;
-    border: 1px solid #ccc;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
     border-radius: 10px;
     box-sizing: border-box;
-    outline-color: #007bff;
+    outline-color: var(--btn-primary);
     resize: none;
 }
 
@@ -69,21 +45,9 @@
     border-radius: 12px;
     font-size: 20px;
     font-weight: bold;
-    background-color: #007bff;
-    color: white;
+    background-color: var(--btn-primary);
+    color: var(--btn-primary-text);
     position: relative;
     overflow: hidden;
     user-select: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    .boot-hash-card {
-        background-color: #343434;
-    }
-
-    .boot-hash-input {
-        background-color: #232323;
-        color: #fff;
-        border: 1px solid #6E6E6E;
-    }
 }

module/webui/styles/file_selector.css

@@ -0,0 +1,88 @@
+.file-selector-overlay {
+    z-index: 2000;
+    align-items: center;
+}
+
+.file-selector {
+    width: 90%;
+    max-width: 600px;
+    height: 80vh;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+}
+
+.file-selector-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.current-path .separator {
+    color: var(--text-secondary);
+    padding: 0 4px;
+}
+
+.back-button {
+    background: none;
+    border: none;
+    fill: var(--border-color);
+    user-select: none;
+}
+
+.current-path {
+    flex-grow: 1;
+    font-size: 16px;
+    overflow: scroll;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.close-selector {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: var(--border-color);
+    padding: 0 5px;
+}
+
+.file-list {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 10px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.file-list.switching {
+    transform: scale(0.95);
+    opacity: 0;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: var(--bg-secondary);
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+}
+
+.file-item svg {
+    flex-shrink: 0;
+    margin-right: 10px;
+    fill: var(--text-secondary);
+}
+
+.file-item span {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

module/webui/styles/global.css

@@ -1,7 +1,50 @@
+@import url('https://mui.kernelsu.org/mmrl/insets.css');
+@import url('https://mui.kernelsu.org/mmrl/colors.css');
+
+:root {
+    --top-inset: var(--window-inset-top, 0px);
+    --bottom-inset: var(--window-inset-bottom, 0px);
+
+    /* Background colors */
+    --bg-primary: var(--background, #F5F5F5);
+    --bg-secondary: var(--tonalSurface, #fff);
+    --bg-input: var(--surfaceBright, #F5F5F5);
+
+    /* Text colors */
+    --text-primary: var(--onSurface, #000);
+    --text-secondary: var(--onSurfaceVariant, #757575);
+
+    /* Border colors */
+    --border-color: var(--outlineVariant, #ccc);
+
+    /* Button colors */
+    --btn-primary: var(--primary, #007bff);
+    --btn-primary-text: var(--onPrimary, #fff);
+    --btn-uninstall: var(--error, #FF3636);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Background colors */
+        --bg-primary: var(--background, #151515);
+        --bg-secondary: var(--tonalSurface, #292929);
+        --bg-input: var(--surfaceBright, #1b1b1b);
+
+        /* Text colors */
+        --text-primary: var(--onSurface, #fff);
+        --text-secondary: var(--onSurfaceVariant, #C2C2C2);
+
+        /* Border colors */
+        --border-color: var(--outlineVariant, #636363);
+    }
+}
+
 body {
-    background-color: #F5F5F5;
-    padding-top: var(--window-inset-top);
-    padding-bottom: var(--window-inset-bottom);
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    padding-top: var(--top-inset);
+    padding-bottom: var(--bottom-inset);
+    margin: 0;
 }
 
 .no-scroll {
@@ -12,28 +55,60 @@ body {
     display: flex;
     justify-content: center;
     position: fixed;
-    bottom: 50px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10;
+    width: 100%;
+    bottom: calc(var(--bottom-inset) + 50px);
+    transition: transform 0.4s ease;
+    pointer-events: none;
+    z-index: 2;
 }
 
 .floating-btn {
-    flex-shrink: 0;
-    background-color: #007bff;
+    color: var(--btn-primary-text);
+    background-color: var(--btn-primary);
     border: none;
     box-shadow: 0 4px 8px #0003;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
+    display: none;
+    bottom: 0;
     padding: 10px 20px;
     font-size: 22px;
     font-weight: bold;
-    transition: transform 0.4s ease;
     border-radius: 50px 50px;
     user-select: none;
+    pointer-events: auto;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    display: none;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.overlay-content {
+    transform: scale(0.8);
+    transition: transform 0.2s ease;
+}
+
+.overlay-content.open {
+    transform: scale(1);
+}
+
+.close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: var(--border-color);
+    user-select: none;
 }
 
 .prompt {
@@ -79,18 +154,22 @@ body {
 
 .uninstall-container {
     padding: 8px;
-    width: calc(100% - 5px);
+    width: calc(100% - 20px);
     max-width: 900px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 12px;
-    border: 3px solid #FF3636;
+    border: 3px solid var(--btn-uninstall);
     box-sizing: border-box;
-    background-color: #F5F5F5;
+    background-color: var(--bg-primary);
     white-space: nowrap;
     overflow: hidden;
     user-select: none;
+
+    svg {
+        fill: var(--btn-uninstall);
+    }
 }
 
 .uninstall-container i {
@@ -100,121 +179,73 @@ body {
 .uninstall-container span {
     font-size: 16px;
     font-weight: bold;
-    color: #FF3636;
+    color: var(--btn-uninstall);
 }
 
 .uninstall-container.hidden-uninstall {
     display: none;
 }
 
-.file-selector-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    justify-content: center;
+.uninstall-confirmation-overlay {
     align-items: center;
+    z-index: 2000;
 }
 
-.file-selector {
+.uninstall-confirmation {
     width: 90%;
     max-width: 600px;
-    height: 80vh;
-    background-color: #fff;
+    max-height: 80%;
+    overflow-y: auto;
+    background-color: var(--bg-secondary);
     border-radius: 15px;
+    padding: 30px;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
 }
 
-.file-selector-header {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-}
-
-.current-path .separator {
-    color: #6E6E6E;
-    padding: 0 4px;
-}
-
-.back-button {
-    background: none;
-    border: none;
-    padding: 5px;
-    margin-right: 10px;
-    fill: #6E6E6E;
+.uninstall-confirmation p {
     user-select: none;
 }
 
-.current-path {
-    flex-grow: 1;
-    font-size: 16px;
-    overflow: scroll;
-    white-space: nowrap;
-}
-
-.close-selector {
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #ccc;
-    padding: 5px;
-}
-
-.file-list {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 10px;
-}
-
-.file-item {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #fff;
-    position: relative;
-    overflow: hidden;
+.uninstall-confirmation-title {
+    font-size: 26px;
     user-select: none;
 }
 
-.file-item svg {
-    margin-right: 10px;
-    fill: #6E6E6E;
+.uninstall-confirmation-button-container {
+    display: flex;
+    width: 100%;
+    gap: 10px;
+    margin-top: 10px;
 }
 
-.file-item span {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.uninstall-confirmation-button {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 12px;
+    font-size: 18px;
+    font-weight: bold;
+    user-select: none;
+    color: var(--text-primary);
+    background-color: var(--border-color);
+}
+
+#confirm-uninstall {
+    color: var(--btn-primary-text);
+    background-color: var(--btn-primary);
 }
 
 .permission-popup {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.85);
-    display: flex;
-    justify-content: center;
+    opacity: 1;
     align-items: center;
-    z-index: 9999;
-}
-
-.permission-popup.hidden {
-    display: none;
+    z-index: 2000;
 }
 
 .permission-content {
-    background-color: #fff;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     padding: 20px;
     border-radius: 12px;
     width: 80%;
@@ -223,20 +254,20 @@ body {
 }
 
 .permission-content h2 {
-    color: #333;
     margin-bottom: 20px;
     font-size: 18px;
 }
 
 .permission-steps {
     text-align: left;
-    padding: 10px 20px;
 }
 
-.permission-steps p {
-    color: #333;
-    margin: 10px 0;
-    font-size: 16px;
+.permission-steps ol {
+    padding: 0 25px;
+}
+
+.permission-steps li {
+    margin-top: 10px;
 }
 
 .ripple-element {
@@ -262,49 +293,4 @@ body {
     to {
         transform: scale(3);
     }
-}
-
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #121212;
-        color: #fff;
-    }
-
-    .uninstall-container {
-        background-color: #121212;
-    }
-
-    .file-selector {
-        background-color: #343434;
-        color: #fff;
-    }
-
-    .file-selector-header {
-        border-bottom: 1px solid #6E6E6E;
-    }
-
-    .file-item {
-        background-color: #343434;
-    }
-
-    .current-path .separator {
-        color: #C2C2C2;
-    }
-
-    .back-button {
-        fill: #C2C2C2;
-    }
-
-    .file-item svg {
-        fill: #C2C2C2;
-    }
-
-    .permission-content {
-        background-color: #343434;
-    }
-
-    .permission-content h2,
-    .permission-steps p {
-        color: #fff;
-    }
 }

module/webui/styles/header.css

@@ -3,11 +3,11 @@
     align-items: center;
     justify-content: space-between;
     position: fixed;
-    top: 0;
+    top: var(--top-inset);
     height: 40px;
     width: calc(100% - 10px);
     max-width: 1100px;
-    background-color: #F5F5F5;
+    background-color: var(--bg-primary);
     transition: transform 0.4s ease;
     z-index: 1100;
     margin-left: auto;
@@ -18,7 +18,7 @@
 }
 
 .header-block {
-    background-color: #F5F5F5;
+    background-color: var(--bg-primary);
     display: none;
     position: fixed;
     top: 0;
@@ -26,7 +26,7 @@
     width: 100%;
     z-index: 1100;
     transition: transform 0.4s ease;
-    height: var(--window-inset-top);
+    height: var(--top-inset);
 }
 
 #module-version,
@@ -56,7 +56,7 @@
 }
 
 .language-icon {
-    fill: #000;
+    fill: var(--text-primary);
 }
 
 .language-menu {
@@ -64,10 +64,10 @@
     flex-direction: column;
     position: absolute;
     right: 5px;
-    background-color: white;
+    background-color: var(--bg-secondary);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     z-index: 1800;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     box-sizing: border-box;
     opacity: 0;
@@ -85,9 +85,9 @@
 
 .language-option {
     padding: 8px 10px;
-    text-align: left;
-    color: #333;
-    background-color: white;
+    text-align: center;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     border: none;
     font-size: 16px;
     width: 100%;
@@ -103,7 +103,7 @@
     left: 10px;
     width: calc(100% - 20px);
     height: 1px;
-    background-color: #ccc;
+    background-color: var(--border-color);
 }
 
 .language-option:last-child::after {
@@ -137,113 +137,38 @@
 }
 
 .help-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 2000;
-    justify-content: center;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.4s ease;
-}
-
-.help-overlay.show {
-    display: flex;
-    opacity: 1;
-}
-
-.help-overlay.hide {
-    opacity: 0;
 }
 
 .help-menu {
     position: relative;
-    width: 90vw;
+    width: calc(95vw - 60px);
     max-width: 800px;
-    background-color: white;
-    padding: 10px 0;
+    background-color: var(--bg-secondary);
+    padding: 30px;
     border-radius: 15px;
     text-align: left;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
-.close-help {
-    position: absolute;
-    top: 15px;
-    right: 12px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #ccc;
-    user-select: none;
-}
-
 .help-content {
-    max-height: 85vh;
-    padding: 0 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-height: calc(85vh - 60px);
     overflow-y: auto;
 }
 
-.help-content p {
+.help-content-header {
     font-size: 26px;
     user-select: none;
 }
 
-.help-content ul {
-    padding-left: 0;
-    list-style-type: none;
-}
-
-.help-content ul li {
-    font-weight: bold;
+.instruction strong {
     font-size: 18px;
 }
 
-.help-content ul ul li {
-    font-weight: normal;
-    font-size: 16px;
-}
-
-.help-content ul ul ul li {
-    color: #777777;
-    font-weight: normal;
-    font-size: 14px;
-}
-
-.help-content ul ul ul li a {
-    color: inherit;
-}
-
-@media (prefers-color-scheme: dark) {
-    .header-block,
-    .header {
-        background-color: #121212;
-    }
-
-    .help-button {
-        color: #fff;
-    }
-    
-    .language-icon {
-        fill: #eee;
-    }
-
-    .language-option,
-    .help-menu {
-        color: #eee;
-        background-color: #343434;
-    }
-
-    .language-menu {
-        background-color: #343434;
-        border: 1px solid #6E6E6E;
-    }
-
-    .language-option::after {
-        background-color: #6E6E6E;
-    }
+.instruction p {
+    margin: 0;
 }

module/webui/styles/search_menu.css

@@ -1,7 +1,7 @@
 .search-menu-container {
     display: flex;
     position: fixed;
-    top: 40px;
+    top: calc(var(--top-inset) + 40px);
     height: 50px;
     width: calc(100% - 20px);
     max-width: 1100px;
@@ -14,8 +14,8 @@
 }
 
 .search-card {
-    background-color: white;
-    border: 1px solid #ccc;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
@@ -36,6 +36,8 @@
 .search-input {
     position: absolute;
     border: none;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     font-size: 17px;
     outline: none;
     left: 10px;
@@ -45,7 +47,7 @@
 
 .clear-btn {
     position: absolute;
-    color: #ccc;
+    color: var(--border-color);
     padding-bottom: 3px;
     right: 10px;
     border: none;
@@ -68,8 +70,8 @@
 }
 
 .menu-button {
-    background-color: white;
-    border: 1px solid #ccc;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
     border-radius: 50%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     width: 48px;
@@ -81,7 +83,7 @@
 
 .menu-icon {
     display: inline-block;
-    fill: #000;
+    fill: var(--text-primary);
     transform: rotate(0deg);
     transition: transform 0.2s ease;
 }
@@ -91,8 +93,8 @@
 }
 
 .menu-options {
-    background-color: white;
-    border: 1px solid #ccc;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     box-sizing: border-box;
@@ -131,7 +133,7 @@
 .menu-options li {
     padding: 12px 15px;
     text-align: left;
-    background-color: white;
+    background-color: var(--bg-secondary);
 }
 
 .menu-options li::after {
@@ -141,7 +143,7 @@
     left: 15px;
     width: calc(100% - 30px);
     height: 1px;
-    background-color: #ccc;
+    background-color: var(--border-color);
 }
 
 .menu-options li:last-child::after {
@@ -165,37 +167,4 @@
     background-color: none;
     z-index: 100;
     display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    .menu-icon {
-        fill: #eee;
-    }
-
-    .search-input,
-    .search-card {
-        background-color: #343434;
-    }
-
-    .search-card {
-        border: 1px solid #6E6E6E;
-    }
-
-    .search-input {
-        color: white;
-    }
-
-    .menu-options,
-    #menu-button {
-        background-color: #343434;
-        border: 1px solid #6E6E6E;
-    }
-
-    .menu-options li {
-        background-color: #343434;
-    }
-
-    .menu-options li::after {
-        background-color: #6E6E6E
-    }
 }

module/webui/styles/security_patch.css

@@ -1,33 +1,20 @@
 .security-patch-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
     z-index: 2000;
-    transition: opacity 0.2s ease;
-    opacity: 0;
 }
 
 .security-patch-card {
-    display: none;
+    display: block;
     position: fixed;
     top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: white;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     padding: 30px;
     border-radius: 15px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 2001;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     width: calc(90% - 60px);
     max-width: 300px;
     max-height: calc(80% - 60px);
     overflow-y: auto;
-    transition: opacity 0.2s ease;
-    opacity: 0;
 }
 
 .security-patch-content {
@@ -71,7 +58,7 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    border: 2px solid #ccc;
+    border: 2px solid var(--border-color);
     border-radius: 4px;
     box-sizing: border-box;
     transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s ease;
@@ -84,11 +71,15 @@
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
     transition: transform 0.2s ease-out, opacity 0.3s ease;
+
+    svg {
+        fill: var(--btn-primary-text);
+    }
 }
 
 .advanced-toggle .checkbox:checked + .custom-checkbox {
-    border-color: #007bff;
-    background-color: #007bff;
+    border-color: var(--btn-primary);
+    background-color: var(--btn-primary);
     transition: border-color 0.1s ease;
     animation: checked-bounce 0.3s ease-out;
 }
@@ -107,15 +98,16 @@
 .input-group label {
     padding-top: 10px;
     font-size: 14px;
-    color: #666;
+    color: var(--text-secondary);
     user-select: none;
 }
 
 .input-group input {
     padding: 15px;
-    background-color: #F5F5F5;
-    border: 1px solid #ccc;
-    outline-color: #007bff;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    outline-color: var(--btn-primary);
     border-radius: 10px;
     font-size: 16px;
 }
@@ -136,48 +128,21 @@
     border-radius: 12px;
     font-size: 18px;
     font-weight: bold;
-    transition: background-color 0.2s ease;
 }
 
 .get-button,
 .auto-button {
-    background-color: #ddd;
+    color: var(--text-primary);
+    background-color: var(--border-color);
     user-select: none;
 }
 
 .save-button {
-    background-color: #007bff;
-    color: white;
+    background-color: var(--btn-primary);
+    color: var(--btn-primary-text);
     user-select: none;
 }
 
 .hidden {
     display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    .security-patch-overlay {
-        background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    .security-patch-card {
-        background-color: #343434;
-        color: white;
-    }
-
-    .input-group label {
-        color: #ccc;
-    }
-
-    .input-group input {
-        background-color: #232323;
-        color: #fff;
-        border: 1px solid #6E6E6E;
-    }
-
-    .get-button,
-    .auto-button {
-        background-color: #6E6E6E;
-        color: white;
-    }
-}
+}

module/webui/styles/system_app.css

@@ -0,0 +1,104 @@
+.add-system-app-overlay {
+    z-index: 2000;
+}
+
+.add-system-app-card {
+    position: fixed;
+    display: flex;
+    top: 10%;
+    flex-direction: column;
+    align-items: center;
+    width: calc(90vw - 60px);
+    max-width: 400px;
+    max-height: calc(80vh - 60px);
+    overflow-y: auto;
+    padding: 30px;
+    background-color: var(--bg-secondary);
+    border-radius: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.add-system-app-title {
+    text-align: center;
+    font-size: 26px;
+    user-select: none;
+    margin-bottom: 20px;
+}
+
+.add-system-app-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.add-system-app-content input {
+    width: 100%;
+    padding: 15px;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    outline-color: var(--btn-primary);
+    border-radius: 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
+.add-system-app-button {
+    margin-top: 15px;
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 12px;
+    font-size: 18px;
+    font-weight: bold;
+    background-color: var(--btn-primary);
+    color: var(--btn-primary-text);
+    user-select: none;
+}
+
+.current-system-app-list {
+    text-align: center;
+    margin-top: 25px;
+    margin-bottom: 10px;
+    user-select: none;
+}
+
+.current-system-app-list-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.system-app-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 100%;
+    border-bottom: 1px solid var(--border-color);
+    padding: 10px;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    word-break: break-all;
+}
+
+.system-app-item:last-child {
+    border-bottom: none;
+}
+
+.remove-system-app-button {
+    flex-shrink: 0;
+    margin-left: 10px;
+    background-color: #e84d4d;
+    border: none;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+}

more-exclude.json

@@ -1,7 +1,5 @@
 {
     "description": "Unnecessary app list",
-    "repo-link": "https://github.com/KOWX712/Tricky-Addon-Update-Target-List",
-    "json-link": "https://raw.githubusercontent.com/KOWX712/Tricky-Addon-Update-Target-List/main/more-exclude.json",
     "data": [
         {
             "info": "Root manager",
@@ -126,11 +124,5 @@
                 }
             ]
         }
-    ],
-    "Add more app into this list?": [
-        {
-            "issue": "https://github.com/KOWX712/Tricky-Addon-Update-Target-List/issues",
-            "pull-request": "https://github.com/KOWX712/Tricky-Addon-Update-Target-List/pulls"
-        }
     ]
 }

update.json

@@ -1,6 +1,6 @@
 {
-  "versionCode": 350,
-  "version": "v3.5",
-  "zipUrl": "https://github.com/KOWX712/Tricky-Addon-Update-Target-List/releases/download/v3.5/TrickyAddonModule-v3.5.zip",
+  "versionCode": 370,
+  "version": "v3.7",
+  "zipUrl": "https://github.com/KOWX712/Tricky-Addon-Update-Target-List/releases/download/v3.7/TrickyAddonModule-v3.7.zip",
   "changelog": "https://raw.githubusercontent.com/KOWX712/Tricky-Addon-Update-Target-List/main/changelog.md"
 }