feat: ui scale setting as slider

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.134",
+	"version": "6.4.135",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",

pnpm-lock.yaml

@@ -185,7 +185,7 @@ importers:
         version: 1.8.13(@gql.tada/svelte-support@1.0.1(svelte@4.2.19)(typescript@5.9.2))(graphql@16.10.0)(typescript@5.9.2)
       hayase-extensions:
         specifier: github:hayase-app/extensions
-        version: https://codeload.github.com/hayase-app/extensions/tar.gz/785940de1833af9b5eb0f41dc3a537c881cb6276
+        version: https://codeload.github.com/hayase-app/extensions/tar.gz/0fad214a4a0aacd826c0801255ced65bd1d49a13
       jassub:
         specifier: ^1.8.6
         version: 1.8.6
@@ -1708,8 +1708,8 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hayase-extensions@https://codeload.github.com/hayase-app/extensions/tar.gz/785940de1833af9b5eb0f41dc3a537c881cb6276:
-    resolution: {tarball: https://codeload.github.com/hayase-app/extensions/tar.gz/785940de1833af9b5eb0f41dc3a537c881cb6276}
+  hayase-extensions@https://codeload.github.com/hayase-app/extensions/tar.gz/0fad214a4a0aacd826c0801255ced65bd1d49a13:
+    resolution: {tarball: https://codeload.github.com/hayase-app/extensions/tar.gz/0fad214a4a0aacd826c0801255ced65bd1d49a13}
     version: 1.0.6
 
   idb-keyval@6.2.2:
@@ -4553,7 +4553,7 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hayase-extensions@https://codeload.github.com/hayase-app/extensions/tar.gz/785940de1833af9b5eb0f41dc3a537c881cb6276: {}
+  hayase-extensions@https://codeload.github.com/hayase-app/extensions/tar.gz/0fad214a4a0aacd826c0801255ced65bd1d49a13: {}
 
   idb-keyval@6.2.2: {}
 

src/lib/components/ui/slider/index.ts

@@ -0,0 +1,7 @@
+import Root from './slider.svelte'
+
+export {
+  Root,
+  //
+  Root as Slider
+}

src/lib/components/ui/slider/slider.svelte

@@ -0,0 +1,40 @@
+<script lang='ts'>
+  import { Slider as SliderPrimitive } from 'bits-ui'
+
+  import { cn } from '$lib/utils.js'
+
+  type $$Props = SliderPrimitive.Props
+
+  let className: $$Props['class'] = undefined
+  export let value: $$Props['value'] = [0]
+  export { className as class }
+
+  let wrapper: HTMLDivElement
+
+  function capture (e: PointerEvent) {
+    wrapper.setPointerCapture(e.pointerId)
+  }
+  function release (e: PointerEvent) {
+    wrapper.releasePointerCapture(e.pointerId)
+  }
+</script>
+
+<div class='contents' on:pointerup on:pointerdown={capture} on:pointerup={release} on:pointercancel={release} bind:this={wrapper}>
+  <SliderPrimitive.Root
+    bind:value
+    class={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...$$restProps}
+    let:thumbs
+  >
+    <span class='bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full'>
+      <SliderPrimitive.Range class='bg-primary absolute h-full' />
+    </span>
+
+    {#each thumbs as thumb (thumb)}
+      <SliderPrimitive.Thumb
+        {thumb}
+        class='border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50'
+      />
+    {/each}
+  </SliderPrimitive.Root>
+</div>

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

@@ -17,7 +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 { Slider } from '$lib/components/ui/slider'
   import { Switch } from '$lib/components/ui/switch'
   import { Textarea } from '$lib/components/ui/textarea'
   // import native from '$lib/modules/native'
@@ -34,6 +34,12 @@
     vulkan: 'Vulkan',
     metal: 'Metal'
   }
+
+  let value = [$settings.uiScale]
+
+  function saveScale () {
+    $settings.uiScale = value[0]!
+  }
 </script>
 
 <div class='space-y-3 pb-10 lg:max-w-4xl'>
@@ -60,6 +66,7 @@
     <div class='font-weight-bold text-xl font-bold'>UI Settings</div>
   {/if}
   <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' />
+    <Slider bind:value min={0.3} max={2.5} step={0.1} class='w-60 shrink-0' on:pointerup={saveScale} />
+    <div class='text-muted-foreground text-xs'>{value[0]?.toFixed(1)}</div>
   </SettingCard>
 </div>

svelte.config.js

@@ -5,11 +5,10 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // @ts-expect-error no typedef for this
   onwarn: (warning, handler) => {
     if (warning.code === 'a11y_media_has_caption') return
     if (warning.code === 'element_invalid_self_closing_tag') return
-    handler(warning)
+    handler?.(warning)
   },
   preprocess: vitePreprocess({}),
   kit: {

tasks.json

@@ -1,20 +0,0 @@
-{
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "Run gql.tada turbo",
-      "type": "shell",
-      "command": "pnpm run gql:turbo",
-      "windows": {
-        "command": "pnpm run gql:turbo"
-      },
-      "presentation": {
-        "reveal": "always",
-        "panel": "new"
-      },
-      "runOptions": {
-        "runOn": "folderOpen"
-      }
-    }
-  ]
-}