From 9b9026b12e7464f05d0409bb20ee8882b78a4f61 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sat, 16 Dec 2023 01:35:28 +0200
Subject: [PATCH] Add toggle for compact input area (mobile)

---
 public/css/mobile-styles.css |  4 ++++
 public/index.html            |  4 ++++
 public/scripts/power-user.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index d62534876..ebcd5eda2 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -1,5 +1,9 @@
 /*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
 @media screen and (max-width: 1000px) {
+    #send_form.compact #leftSendForm, #send_form.compact #rightSendForm {
+        flex-wrap: nowrap;
+        width: unset;
+    }
 
     .bg_button {
         font-size: 15px;
diff --git a/public/index.html b/public/index.html
index b0d21d081..7456a65b5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2972,6 +2972,10 @@
                                 <input id="messageTokensEnabled" type="checkbox" />
                                 <span data-i18n="Show Message Token Count">Message Token Count</span>
                             </label>
+                            <label for="compact_input_area" class="checkbox_label">
+                                <input id="compact_input_area" type="checkbox" />
+                                <span data-i18n="Compact Input Area (Mobile)">Compact Input Area&nbsp;<i class="fa-solid fa-mobile-screen-button"></i></span>
+                            </label>
                             <label data-newbie-hidden for="hotswapEnabled" class="checkbox_label">
                                 <input id="hotswapEnabled" type="checkbox" />
                                 <span data-i18n="Characters Hotswap">Characters Hotswap</span>
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index b5ac27f9d..82398c4dc 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -232,6 +232,7 @@ let power_user = {
     aux_field: 'character_version',
     restore_user_input: true,
     reduced_motion: false,
+    compact_input_area: true,
 };
 
 let themes = [];
@@ -273,6 +274,7 @@ const storage_keys = {
     enableZenSliders: 'enableZenSliders',
     enableLabMode: 'enableLabMode',
     reduced_motion: 'reduced_motion',
+    compact_input_area: 'compact_input_area',
 };
 
 const contextControls = [
@@ -450,6 +452,13 @@ function switchReducedMotion() {
     $('#reduced_motion').prop('checked', power_user.reduced_motion);
 }
 
+function switchCompactInputArea() {
+    const value = localStorage.getItem(storage_keys.compact_input_area);
+    power_user.compact_input_area = value === null ? true : value == 'true';
+    $('#send_form').toggleClass('compact', power_user.compact_input_area);
+    $('#compact_input_area').prop('checked', power_user.compact_input_area);
+}
+
 var originalSliderValues = [];
 
 async function switchLabMode() {
@@ -1246,6 +1255,15 @@ async function applyTheme(name) {
             action: async () => {
                 localStorage.setItem(storage_keys.reduced_motion, String(power_user.reduced_motion));
                 $('#reduced_motion').prop('checked', power_user.reduced_motion);
+                switchReducedMotion();
+            },
+        },
+        {
+            key: 'compact_input_area',
+            action: async () => {
+                localStorage.setItem(storage_keys.compact_input_area, String(power_user.compact_input_area));
+                $('#compact_input_area').prop('checked', power_user.compact_input_area);
+                switchCompactInputArea();
             },
         },
     ];
@@ -1504,6 +1522,7 @@ function loadPowerUserSettings(settings, data) {
 
     $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop('selected', true);
     switchReducedMotion();
+    switchCompactInputArea();
     reloadMarkdownProcessor(power_user.render_formulas);
     loadInstructMode(data);
     loadContextSettings();
@@ -1932,6 +1951,8 @@ async function saveTheme() {
         hotswap_enabled: power_user.hotswap_enabled,
         custom_css: power_user.custom_css,
         bogus_folders: power_user.bogus_folders,
+        reduced_motion: power_user.reduced_motion,
+        compact_input_area: power_user.compact_input_area,
     };
 
     const response = await fetch('/savetheme', {
@@ -3151,6 +3172,13 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#compact_input_area').on('input', function () {
+        power_user.compact_input_area = !!$(this).prop('checked');
+        localStorage.setItem(storage_keys.compact_input_area, String(power_user.compact_input_area));
+        switchCompactInputArea();
+        saveSettingsDebounced();
+    });
+
     $(document).on('click', '#debug_table [data-debug-function]', function () {
         const functionId = $(this).data('debug-function');
         const functionRecord = debug_functions.find(f => f.functionId === functionId);