feat: UI scale

package.json

@@ -30,7 +30,7 @@
 		"eslint-config-standard-universal": "^1.0.6",
 		"gql.tada": "^1.8.10",
 		"hayase-extensions": "github:hayase-app/extensions",
-		"jassub": "^1.7.18",
+		"jassub": "^1.7.20",
 		"svelte": "^4.2.19",
 		"svelte-check": "^4.2.1",
 		"svelte-radix": "^1.1.1",

src/app.d.ts

@@ -102,6 +102,7 @@ export interface Native {
   spawnPlayer: (url: string) => Promise<void>
   setHideToTray: (enabled: boolean) => Promise<void>
   transparency: (enabled: boolean) => Promise<void>
+  setZoom: (scale: number) => Promise<void>
   isApp: boolean
   version: () => Promise<string>
   navigate: (cb: (data: { target: string, value: string | undefined }) => void) => Promise<void>

src/app.html

@@ -5,7 +5,6 @@
 	<meta charset="utf-8" />
 	<title>Hayase</title>
 	<link rel="icon" href="%sveltekit.assets%/logo.svg" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 	%sveltekit.head%
 </head>
 

src/lib/components/ui/sidebar/sidebarlist.svelte

@@ -50,10 +50,10 @@
 <SidebarButton href='/app/chat/'>
   <MessagesSquare size={18} />
 </SidebarButton>
-<SidebarButton href='/app/client/'>
+<SidebarButton href='/app/client/' id='sidebar-client' data-down='#sidebar-donate'>
   <Download size={18} />
 </SidebarButton>
-<Button variant='ghost' on:click={() => native.openURL('https://github.com/sponsors/ThaUnknown/')} class='px-2 w-full relative mt-auto select:!bg-transparent text-[#fa68b6] select:text-[#fa68b6]'>
+<Button variant='ghost' id='sidebar-donate' data-up='#sidebar-client' on:click={() => native.openURL('https://github.com/sponsors/ThaUnknown/')} class='px-2 w-full relative mt-auto select:!bg-transparent text-[#fa68b6] select:text-[#fa68b6]'>
   <Heart size={18} fill='currentColor' class={cn(active && 'donate')} />
 </Button>
 <SidebarButton href='/app/settings/'>

src/lib/modules/native.ts

@@ -85,6 +85,7 @@ export default Object.assign<Native, Partial<Native>>({
   spawnPlayer: () => sleep(rnd(100_000)),
   setHideToTray: async () => undefined,
   transparency: async () => undefined,
+  setZoom: async () => undefined,
   // @ts-expect-error yeah
   navigate: async (cb) => { globalThis.___navigate = cb },
   downloadProgress: async (percent: number) => undefined,

src/lib/modules/settings/defaults.ts

@@ -33,6 +33,7 @@ export default {
   torrentPath: '',
   angle: 'default' as 'default' | 'd3d11'| 'd3d9' | 'warp' | 'gl' | 'gles' | 'swiftshader' | 'vulkan' | 'metal',
   idleAnimation: true,
+  uiScale: 1,
   enableExternal: false,
   playerPath: '',
   playerSeek: '2',

src/lib/modules/settings/settings.ts

@@ -11,5 +11,6 @@ settings.subscribe(settings => {
   native.updateSettings({ torrentPersist, torrentDHT, torrentStreamedDownload, torrentSpeed, maxConns, torrentPort, dhtPort, torrentPeX })
   native.setHideToTray(settings.hideToTray)
   native.transparency(settings.idleAnimation)
+  native.setZoom(settings.uiScale)
   if (settings.enableDoH) native.setDOH(settings.doHURL)
 })

src/routes/+layout.svelte

@@ -9,6 +9,7 @@
   import { Menubar } from '$lib/components/ui/menubar'
   import { Toaster } from '$lib/components/ui/sonner'
   import native from '$lib/modules/native'
+  import { settings, SUPPORTS } from '$lib/modules/settings'
 
   let root: HTMLDivElement
 
@@ -19,6 +20,10 @@
   })
 </script>
 
+<svelte:head>
+  <meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroid ? $settings.uiScale : 1}, user-scalable=0' />
+</svelte:head>
+
 <div class='w-full h-full flex flex-col backface-hidden bg-black relative overflow-clip border-l-2 [border-image:linear-gradient(to_bottom,white_var(--progress),#2dcf58_var(--progress))_1] preserve-3d' bind:this={root} id='root' style:--progress='{100 - updateProgress}%'>
   <ProgressBar zIndex={100} />
   <Toaster />

src/routes/app/settings/interface/+page.svelte

@@ -17,6 +17,7 @@
 <script lang='ts'>
   import SettingCard from '$lib/components/SettingCard.svelte'
   import { SingleCombo } from '$lib/components/ui/combobox'
+  import { Input } from '$lib/components/ui/input'
   import { Switch } from '$lib/components/ui/switch'
   import { Textarea } from '$lib/components/ui/textarea'
   import native from '$lib/modules/native'
@@ -58,8 +59,11 @@
     </SettingCard>
 
     <div class='font-weight-bold text-xl font-bold'>UI Settings</div>
-    <SettingCard title='Idle Animation' description='Enable/Disable the 3d idle animation. Changing this setting will restart the app.'>
-      <Switch bind:checked={$settings.idleAnimation} on:click={native.restart} />
+    <SettingCard title='Idle Animation' description='Enable/Disable the 3d idle animation. Changing this setting will restart the app.' let:id>
+      <Switch bind:checked={$settings.idleAnimation} on:click={native.restart} {id} />
+    </SettingCard>
+    <SettingCard title='UI Scale' description='Change the zoom level of the interface.' let:id>
+      <Input type='number' inputmode='numeric' pattern='[0-9]*' min='0' max='65536' bind:value={$settings.uiScale} {id} class='w-32 shrink-0 bg-background' />
     </SettingCard>
   {/if}
 </div>