From 1df63a0716d1c8cde6992d1472e03cc213778e99 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sun, 20 Jul 2025 02:13:14 +0200
Subject: [PATCH] fix: improve keyboard navigation in text inputs fix: w2g link
 pasting

---
 package.json                                  |  2 +-
 src/app.d.ts                                  |  4 +--
 .../ui/extensions/extensions.svelte           |  2 +-
 src/lib/modules/navigate.ts                   | 25 +++++++++++++------
 src/lib/utils.ts                              |  2 +-
 src/routes/app/+layout.svelte                 |  2 +-
 src/routes/app/settings/app/+page.svelte      |  2 +-
 src/routes/update/+page.svelte                |  1 -
 8 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 9193d92..9f14d67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.66",
+	"version": "6.4.67",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",
diff --git a/src/app.d.ts b/src/app.d.ts
index e989d59..3bdf046 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -36,8 +36,8 @@ declare global {
   }
 
   interface Navigator {
-    userAgentData: {
-      getHighEntropyValues: (keys: string[]) => Promise<Record<string, string>>
+    userAgentData?: {
+      getHighEntropyValues?: (keys: string[]) => Promise<Record<string, string>>
     }
   }
 
diff --git a/src/lib/components/ui/extensions/extensions.svelte b/src/lib/components/ui/extensions/extensions.svelte
index 57b7758..b1b54d7 100644
--- a/src/lib/components/ui/extensions/extensions.svelte
+++ b/src/lib/components/ui/extensions/extensions.svelte
@@ -51,7 +51,7 @@
       <Tabs.Trigger tabindex={0} value='extensions'>Extensions</Tabs.Trigger>
       <Tabs.Trigger tabindex={0} value='repositories'>Repositories</Tabs.Trigger>
     </Tabs.List>
-    <div class='flex items-center relative scale-parent md:max-w-72 w-full'>
+    <div class='flex items-center relative scale-parent md:max-w-56 w-full'>
       <Input
         class='pl-9 bg-neutral-950 select:bg-accent select:text-accent-foreground shadow-sm no-scale placeholder:opacity-50'
         placeholder='Search {value}...'
diff --git a/src/lib/modules/navigate.ts b/src/lib/modules/navigate.ts
index d8ff2a5..084db6f 100644
--- a/src/lib/modules/navigate.ts
+++ b/src/lib/modules/navigate.ts
@@ -213,15 +213,28 @@ function getElementsInDesiredDirection (keyboardFocusable: ElementPosition[], cu
   })
 }
 
+// is input utility class
+function inInputEl (element: HTMLElement): element is HTMLInputElement {
+  return element.matches('input, textarea')
+}
+
 /**
  * Navigates using D-pad keys.
  */
-function navigateDPad (direction = 'up') {
+function navigateDPad (direction = 'up', e: KeyboardEvent) {
   const keyboardFocusable = getFocusableElementPositions()
   const nofocus = !document.activeElement || document.activeElement === document.body
   const currentElement = nofocus ? keyboardFocusable[0]! : getElementPosition(document.activeElement as HTMLElement)
 
   if (nofocus) return focusElement(currentElement.element)
+  if (inInputEl(currentElement.element)) {
+    const input = currentElement.element
+    if (direction === 'left' && input.selectionStart !== 0) return
+    if (direction === 'right' && input.selectionEnd !== input.value.length) return
+  }
+
+  e.preventDefault()
+  e.stopPropagation()
 
   // allow overrides via data attributes ex: <div data-up="#id, #id2"?> but order them, as querySelectorAll returns them in order of appearance rather than order of selectors
   for (const selector of currentElement.element.dataset[direction]?.split(',') ?? []) {
@@ -260,13 +273,13 @@ function navigateDPad (direction = 'up') {
 
 function focusElement (element?: HTMLElement | null) {
   if (!element) return false
-  const isInput = element.matches('input[type=text], input[type=url], input[type=number], textarea')
+  const isInput = inInputEl(element)
   if (isInput) {
-    const input = element as HTMLInputElement
+    const input = element
     input.readOnly = true
   }
   element.focus()
-  if (isInput) setTimeout(() => { (element as HTMLInputElement).readOnly = false })
+  if (isInput) setTimeout(() => { element.readOnly = false })
   element.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' })
 
   element.dispatchEvent(new CustomEvent('navigate', { bubbles: true, composed: true, detail: { target: element.id, value: element.dataset.value } }))
@@ -280,10 +293,8 @@ document.addEventListener('keydown', navigate)
 
 export function navigate (e: KeyboardEvent) {
   if (e.key in DirectionKeyMap) {
-    e.preventDefault()
-    e.stopPropagation()
     inputType.value = 'dpad'
-    navigateDPad(DirectionKeyMap[e.key as 'ArrowDown' | 'ArrowUp' | 'ArrowLeft' | 'ArrowRight'])
+    navigateDPad(DirectionKeyMap[e.key as 'ArrowDown' | 'ArrowUp' | 'ArrowLeft' | 'ArrowRight'], e)
   }
 }
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6f4ab2c..40c06b3 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -101,7 +101,7 @@ export const flyAndScale = (
 
 export const sleep = (t: number) => new Promise<void>(resolve => setTimeout(resolve, t))
 
-export const highEntropyValues = 'userAgentData' in navigator && navigator.userAgentData.getHighEntropyValues(['architecture', 'platform', 'platformVersion'])
+export const highEntropyValues = 'userAgentData' in navigator && navigator.userAgentData?.getHighEntropyValues?.(['architecture', 'platform', 'platformVersion'])
 
 export function safeLocalStorage<T> (key: string): T | undefined {
   try {
diff --git a/src/routes/app/+layout.svelte b/src/routes/app/+layout.svelte
index 3b3fae9..aef9b46 100644
--- a/src/routes/app/+layout.svelte
+++ b/src/routes/app/+layout.svelte
@@ -22,7 +22,7 @@
 
   const imageRx = /\.(jpeg|jpg|gif|png|webp)/i
 
-  const w2gRx = /hayase(?:(?:\.watch)|(?::\/))\/w2g\/(.+)/
+  const w2gRx = /hayas.?ee?(?:(?:\.watch)|(?::\/))?\/w2g\/(.+)/
 
   async function handleTransfer (e: { dataTransfer?: DataTransfer | null, clipboardData?: DataTransfer | null } & Event) {
     const promises = [...(e.dataTransfer ?? e.clipboardData)!.items].map(item => {
diff --git a/src/routes/app/settings/app/+page.svelte b/src/routes/app/settings/app/+page.svelte
index d9c34df..3f31eef 100644
--- a/src/routes/app/settings/app/+page.svelte
+++ b/src/routes/app/settings/app/+page.svelte
@@ -30,7 +30,7 @@
     const info = {
       ...device,
       appInfo: {
-        userAgent: await navigator.userAgentData.getHighEntropyValues(['architecture', 'platform', 'platformVersion']),
+        userAgent: await navigator.userAgentData?.getHighEntropyValues?.(['architecture', 'platform', 'platformVersion']),
         support: SUPPORTS,
         settings: $settings
       }
diff --git a/src/routes/update/+page.svelte b/src/routes/update/+page.svelte
index 40493a0..9067834 100644
--- a/src/routes/update/+page.svelte
+++ b/src/routes/update/+page.svelte
@@ -17,7 +17,6 @@
       <div class='text-6xl text-center font-bold'>Update Required</div>
       <Separator class='my-6 w-40' />
       <div class='text-xl text-wrap max-w-full text-center mb-6'>A mandatory update is available for the {#await outdatedComponent then name}{name}{/await}.<br />Please update to continue.</div>
-
       {#await outdatedComponent then name}
         {#if name === 'client'}
           {#await native.updateReady()}