From 82e5e48ae34ddd0f9d9f603b00d7bbc363cbee8b Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Thu, 21 Mar 2024 03:32:43 +0900
Subject: [PATCH] Add height mode option to advanced settings

---
 src/lang/en.ts                                |  1 +
 src/lib/Setting/Pages/AdvancedSettings.svelte | 10 +++++++
 src/ts/storage/database.ts                    |  4 +--
 src/ts/storage/globalApi.ts                   | 26 +++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 831b6010..76b07569 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -550,4 +550,5 @@ export const languageEnglish = {
     log: "Log",
     popularityLevelDesc: "Popularity increases with downloads, etc. to estimate, 3.7 popularity is about 1 downloads.",
     additionalParams: "Additional Parameters",
+    heightMode: "Height Mode",
 }
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 3008456e..e30e7313 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -43,6 +43,16 @@
     <OptionInput value="high">High</OptionInput>
 </SelectInput>
 
+<span class="text-textcolor mt-4">{language.heightMode}</span>
+<SelectInput bind:value={$DataBase.heightMode}>
+    <OptionInput value="normal">Normal</OptionInput>
+    <OptionInput value="percent">Percent</OptionInput>
+    <OptionInput value="vh">VH</OptionInput>
+    <OptionInput value="dvh">DVH</OptionInput>
+    <OptionInput value="svh">SVH</OptionInput>
+    <OptionInput value="lvh">LVH</OptionInput>
+</SelectInput>
+
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}> <Help key="sayNothing"/></Check>
 </div>
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 348db650..3935a5e1 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -376,7 +376,7 @@ export function setDatabase(data:Database){
     data.modules ??= []
     data.enabledModules ??= []
     data.additionalParams ??= []
-    data.heightMode ??= 0
+    data.heightMode ??= 'normal'
 
     changeLanguage(data.language)
     DataBase.set(data)
@@ -603,7 +603,7 @@ export interface Database{
     sideMenuRerollButton?:boolean
     requestInfoInsideChat?:boolean
     additionalParams:[string, string][]
-    heightMode:number
+    heightMode:string
 }
 
 export interface customscript{
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index 81003edb..ce4e4db3 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -475,6 +475,7 @@ export async function loadData() {
             updateColorScheme()
             updateTextTheme()
             updateAnimationSpeed()
+            updateHeightMode()
             if(db.botSettingAtStart){
                 botMakerMode.set(true)
             }
@@ -1571,4 +1572,29 @@ export function trimNonLatin(data:string){
     return data .replace(/[^\x00-\x7F]/g, "")
                 .replace(/ +/g, ' ')
                 .trim()
+}
+
+export function updateHeightMode(){
+    const db = get(DataBase)
+    const root = document.querySelector(':root') as HTMLElement;
+    switch(db.heightMode){
+        case 'auto':
+            root.style.setProperty('--risu-height-size', '100%');
+            break
+        case 'vh':
+            root.style.setProperty('--risu-height-size', '100vh');
+            break
+        case 'dvh':
+            root.style.setProperty('--risu-height-size', '100dvh');
+            break
+        case 'lvh':
+            root.style.setProperty('--risu-height-size', '100lvh');
+            break
+        case 'svh':
+            root.style.setProperty('--risu-height-size', '100svh');
+            break
+        case 'percent':
+            root.style.setProperty('--risu-height-size', '100%');
+            break
+    }
 }
\ No newline at end of file