feat: version info

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.1.12",
+	"version": "6.1.13",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",

src/app.d.ts

@@ -127,6 +127,12 @@ declare global {
   interface ScreenOrientation {
     lock: (orientation: 'any' | 'natural' | 'landscape' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary') => Promise<void>
   }
+
+  interface Navigator {
+    userAgentData: {
+      getHighEntropyValues: (keys: string[]) => Promise<Record<string, string>>
+    }
+  }
 }
 
 declare module '*.svelte' {

src/lib/components/SettingsNav.svelte

@@ -19,7 +19,7 @@
   const key = 'active-settings-tab'
 </script>
 
-<nav class={cn('flex flex-col md:flex-row space-x-0 md:space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
+<nav class={cn('flex flex-col md:flex-row lg:flex-col gap-y-1 gap-x-2', className)}>
   {#each items as { href, title }, i (i)}
     {@const isActive = $page.url.pathname === href}
     <Button {href} variant='ghost' data-sveltekit-noscroll class='relative font-semibold justify-start'>

src/routes/app/settings/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
+  import { version } from '$app/environment'
   import SettingsNav from '$lib/components/SettingsNav.svelte'
   import { Separator } from '$lib/components/ui/separator'
+  import native from '$lib/modules/native'
   import { dragScroll } from '$lib/modules/navigate'
 
   const items = [
@@ -43,9 +45,22 @@
     </p>
   </div>
   <Separator class='my-6' />
-  <div class='flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0 grow min-h-0'>
-    <aside class='lg:grow lg:max-w-60'>
+  <div class='flex flex-col lg:flex-row gap-x-12 grow min-h-0'>
+    <aside class='lg:grow lg:max-w-60 flex flex-col'>
       <SettingsNav {items} />
+      <div class='mt-auto text-xs text-muted-foreground px-4 sm:px-2 py-5 flex flex-row lg:flex-col font-light gap-0.5 gap-x-4 flex-wrap'>
+        <div>Interface v{version}</div>
+        <div>Native {#await native.version() then version}{version}{/await}</div>
+        {#if 'userAgentData' in navigator}
+          {#await navigator.userAgentData.getHighEntropyValues(['architecture', 'platform', 'platformVersion']) then { architecture, platform, platformVersion }}
+            <div>{platform} {platformVersion} {architecture}</div>
+          {:catch e}
+            <div>Could not obtain device version</div>
+          {/await}
+        {:else}
+          <div>Could not obtain device version</div>
+        {/if}
+      </div>
     </aside>
     <div class='flex-1 overflow-y-scroll pb-40' use:dragScroll>
       <slot />

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

@@ -28,13 +28,16 @@
   }
 
   async function copyDevice () {
-    const device = await native.getDeviceInfo() // TODO: app version and platform
-    device.appInfo = {
-      userAgent: navigator.userAgent,
-      support: SUPPORTS,
-      settings
+    const device = await native.getDeviceInfo() as object
+    const info = {
+      ...device,
+      appInfo: {
+        userAgent: await navigator.userAgentData.getHighEntropyValues(['architecture', 'platform', 'platformVersion']),
+        support: SUPPORTS,
+        settings: $settings
+      }
     }
-    navigator.clipboard.writeText(JSON.stringify(device, null, 2))
+    navigator.clipboard.writeText(JSON.stringify(info, null, 2))
     toast.success('Copied to clipboard', {
       description: 'Copied device info to clipboard',
       duration: 5000