Rework realm and several bug fixes

src/lib/UI/MainMenu.svelte

@@ -31,7 +31,7 @@
                   search: '',
                   page: 0,
                   nsfw: false,
-                  sort: ''
+                  sort: 'recommended'
               }) then charas}
             {#if charas.length > 0}
               {@html hubAdditionalHTML}

src/lib/UI/Realm/RealmMain.svelte

@@ -12,7 +12,7 @@
     let charas:hubType[] = $state([])
 
     let page = $state(0)
-    let sort = $state('')
+    let sort = $state('recommended')
 
     let search = $state('')
     let menuOpen = $state(false)
@@ -27,6 +27,16 @@
         })
     }
 
+    function changeSort(type:string) {
+        if(sort === type){
+            sort = 'recommended'
+        }else{
+            sort = type
+        }
+        page = 0
+        return getHub()
+    }
+
     getHub()
 
 
@@ -36,6 +46,9 @@
         <input bind:value={search} class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full">
             <button
             onclick={() => {
+                if(sort === 'random' || sort === 'recommended'){
+                    sort = ''
+                }
                 page = 0
                 getHub()
             }}
@@ -81,6 +94,7 @@
             getHub()
         }}>
             {
+                sort === 'recommended' ? language.recommended :
                 sort === '' ? language.recent : 
                 sort === 'trending' ? language.trending :
                 sort === 'downloads' ? language.downloads :
@@ -99,26 +113,22 @@
         </button>
         <div class="ml-2 mr-2 h-full border-r border-r-selected"></div>
         <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} onclick={() => {
-            sort = ''
-            getHub()
+            changeSort('')
         }}>
             {language.recent}
         </button>
         <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} onclick={() => {
-            sort = 'trending'
-            getHub()
+            changeSort('trending')
         }}>
             {language.trending}
         </button>
         <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} onclick={() => {
-            sort = 'downloads'
-            getHub()
+            changeSort('downloads')
         }}>
             {language.downloads}
         </button>
         <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow min-w-0 max-w-full" class:ring={sort === 'random'} onclick={() => {
-            sort = 'random'
-            getHub()
+            changeSort('random')
         }}>
             {language.random}
         </button>
@@ -132,7 +142,7 @@
         {/each}
     {/key}
 </div>
-{#if sort !== 'random'}
+{#if sort !== 'random' && sort !== 'recommended'}
     <div class="w-full flex justify-center">
         <div class="flex">
             <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" onclick={() => {