Fix 'show experimental' settings

src/lang/en.ts

@@ -145,6 +145,7 @@ export const languageEnglish = {
         moduleIntergration: "You can enable modules by putting the module namespace in the module intergartion sections. if you want to enable multiple modules, you can seperate them by comma. for example, `module1,module2,module3`. this is for advanced users, who wants to vary the use of modules by presets.",
         customCSS: "Custom CSS for styling. you can also disable/enable it by pressing (Ctrl + .) if something goes wrong.",
         betaMobileGUI: "If enabled, it will use beta mobile GUI on small (less than 800px) screens. requires refresh.",
+        unrecommended: "This is a unrecommended setting. it is not recommended to use this setting.",
     },
     setup: {
         chooseProvider: "Choose AI Provider",

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -95,21 +95,23 @@
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.allowAllExtentionFiles} name="Allow all in file select"/>
 </div>
-<div class="flex items-center mt-4">
+{#if $DataBase.useExperimental}
-    <Check bind:check={$DataBase.antiClaudeOverload} name={language.antiClaudeOverload}>
+    <div class="flex items-center mt-4">
-        <Help key="experimental"/><Help key="antiClaudeOverload"/>
+        <Check bind:check={$DataBase.antiClaudeOverload} name={language.antiClaudeOverload}>
-    </Check>
+            <Help key="experimental"/><Help key="antiClaudeOverload"/>
-</div>
+        </Check>
-<div class="flex items-center mt-4">
+    </div>
-    <Check bind:check={$DataBase.claudeCachingExperimental} name={language.claudeCachingExperimental}>
+    <div class="flex items-center mt-4">
-        <Help key="experimental"/><Help key="claudeCachingExperimental"/>
+        <Check bind:check={$DataBase.claudeCachingExperimental} name={language.claudeCachingExperimental}>
-    </Check>
+            <Help key="experimental"/><Help key="claudeCachingExperimental"/>
-</div>
+        </Check>
-<div class="flex items-center mt-4">
+    </div>
-    <Check bind:check={$DataBase.putUserOpen} name={language.oaiRandomUser}>
+    <div class="flex items-center mt-4">
-        <Help key="experimental"/><Help key="oaiRandomUser"/>
+        <Check bind:check={$DataBase.putUserOpen} name={language.oaiRandomUser}>
-    </Check>
+            <Help key="experimental"/><Help key="oaiRandomUser"/>
-</div>
+        </Check>
+    </div>
+{/if}
 {#if $DataBase.showUnrecommended}
     <div class="flex items-center mt-4">
         <Check bind:check={$DataBase.chainOfThought} name={language.cot}>
@@ -143,22 +145,6 @@
         <Check bind:check={$DataBase.usePlainFetch} name={language.forcePlainFetch}> <Help key="forcePlainFetch" unrecommended/></Check>
     </div>
 {/if}
-<div class="flex items-center mt-4">
-    <Check check={$DataBase.tpo} name="Alpha DevMode" onChange={() => {
-        // access code is "tendo"
-        // I just put it on source code so it's not really a secret
-        // well, if you are reading this, you are a developer, so you can use this feature
-        // this is for testing 2.0 in real environment, but it's not ready yet
-
-        const accessCode = 'tendo'
-        $DataBase.tpo = $DataBase.tpo
-        if(prompt("Access Code") === accessCode){
-            $DataBase.tpo = !$DataBase.tpo
-        }
-    }}>
-        <Help key="experimental"/>
-    </Check>
-</div>
 <button
     on:click={async () => {
         alertMd(getRequestLog())

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -252,10 +252,6 @@
         <Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
     </div>
 
-    <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
-    </div>
-
     {#if $DataBase.textScreenColor}
         <div class="flex items-center mt-2">
             <Check check={true} onChange={() => {
@@ -324,11 +320,16 @@
         <Help key="betaMobileGUI"/>
     </div>
 
-    {#if $DataBase.useExperimental}
+    {#if $DataBase.showUnrecommended}
         <div class="flex items-center mt-2">
-            <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
+            <Check bind:check={$DataBase.useChatSticker} name={language.showUnrecommended}/>
-            <Help key="experimental" name={language.useChatSticker}/>
+            <Help key="unrecommended" name={language.useChatSticker} unrecommended/>
         </div>
+
+        <div class="flex items-center mt-2">
+            <Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
+            <Help key="unrecommended" unrecommended/>
+        </div>    
     {/if}
 
     <span class="text-textcolor mt-4">{language.customCSS}<Help key="customCSS" /></span>

src/lib/SideBars/LoreBook/LoreBookSetting.svelte

@@ -70,9 +70,12 @@
         </div>
     {/if}
     <div class="flex items-center mt-4">
-        <Check bind:check={$CurrentCharacter.lorePlus}
+        {#if $DataBase.useExperimental}
-            name={language.lorePlus}
+            <Check bind:check={$CurrentCharacter.lorePlus}
-        ><Help key="lorePlus"></Help><Help key="experimental"></Help></Check>
+                name={language.lorePlus}
+            ><Help key="lorePlus"></Help><Help key="experimental"></Help></Check>
+        {/if}
+
     </div>
 {/if}
 {#if submenu !== 2}