From c8af048473ef6221fc8a8fdfbe1db6b70b818522 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Wed, 16 Jul 2025 20:32:46 +0200
Subject: [PATCH] fix: further improve navigation and visiblity of selected
 buttons

---
 package.json                                       | 4 ++--
 src/lib/components/ui/banner/full-banner.svelte    | 5 ++++-
 src/lib/components/ui/button/index.ts              | 6 +++---
 src/lib/components/ui/sidebar/SidebarButton.svelte | 6 +++---
 src/routes/+layout.svelte                          | 2 +-
 src/routes/setup/Footer.svelte                     | 6 +++---
 6 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 553bca8..8b97c32 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
 	"name": "ui",
-	"version": "6.4.44",
+	"version": "6.4.45",
 	"license": "BUSL-1.1",
 	"private": true,
-	"packageManager": "pnpm@9.14.4",
+	"packageManager": "pnpm@9.15.5",
 	"scripts": {
 		"dev": "vite dev --open",
 		"build": "vite build && scopy ./build/index.html ./build/offline.html",
diff --git a/src/lib/components/ui/banner/full-banner.svelte b/src/lib/components/ui/banner/full-banner.svelte
index 3a4906a..733064c 100644
--- a/src/lib/components/ui/banner/full-banner.svelte
+++ b/src/lib/components/ui/banner/full-banner.svelte
@@ -59,6 +59,9 @@
     current = media
     timeout = schedule(currentIndex() + 1)
   }
+  function tabindex (node: HTMLElement) {
+    node.tabIndex = -1
+  }
 </script>
 
 <div class='pl-5 pb-5 justify-end flex flex-col h-full max-w-full'>
@@ -96,7 +99,7 @@
   <div class='flex'>
     {#each shuffled as media (media.id)}
       {@const active = current === media}
-      <div class='pt-2 pb-1' class:cursor-pointer={!active} use:click={() => setCurrent(media)}>
+      <div class='pt-2 pb-1' class:cursor-pointer={!active} use:click={() => setCurrent(media)} use:tabindex>
         <div class='bg-neutral-800 mr-2 progress-badge overflow-clip rounded' class:active style='height: 4px;' style:width={active ? '3rem' : '1.5rem'}>
           <div class='progress-content h-full transform-gpu w-full' class:bg-white={active} />
         </div>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 8d7e14b..e24beac 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -8,11 +8,11 @@ const buttonVariants = tv({
   base: 'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
   variants: {
     variant: {
-      default: 'bg-primary text-primary-foreground select:bg-primary/90 shadow',
+      default: 'bg-primary text-primary-foreground select:bg-primary/70 shadow',
       destructive: 'bg-destructive text-destructive-foreground select:bg-destructive/90 shadow-sm',
       outline: 'border-input bg-background select:bg-accent select:text-accent-foreground border shadow-sm',
-      secondary: 'bg-secondary text-secondary-foreground select:bg-secondary/80 shadow-sm',
-      ghost: 'select:bg-secondary-foreground/10 select:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground select:bg-secondary/70 shadow-sm',
+      ghost: 'select:bg-secondary-foreground/30 select:text-accent-foreground',
       link: 'text-primary underline-offset-4 select:underline'
     },
     size: {
diff --git a/src/lib/components/ui/sidebar/SidebarButton.svelte b/src/lib/components/ui/sidebar/SidebarButton.svelte
index ecdbe8e..80c59a6 100644
--- a/src/lib/components/ui/sidebar/SidebarButton.svelte
+++ b/src/lib/components/ui/sidebar/SidebarButton.svelte
@@ -28,11 +28,11 @@
   $: isActive = href && matchPath(href, $page)
 </script>
 
-<Button variant='ghost' {href} class={cn(className, 'px-2 w-10 relative md:pl-4 md:w-12 md:rounded-l-none')} {...$$restProps}>
+<Button variant='ghost' {href} class={cn(className, 'px-2 w-10 relative md:pl-4 md:w-12 md:rounded-l-none group/sidebar')} {...$$restProps}>
   {#if isActive}
-    <div class='bg-white absolute inset-0 rounded-md md:rounded-l-none' in:send={{ key }} out:receive={{ key }} />
+    <div class='bg-white absolute inset-0 rounded-md md:rounded-l-none group-select/sidebar:bg-primary/70' in:send={{ key }} out:receive={{ key }} />
   {/if}
-  <div class='relative text-white transition-colors duration-300' class:!text-black={isActive}>
+  <div class='relative text-white transition-colors duration-300 pointer-events-none' class:!text-black={isActive}>
     <slot />
   </div>
 </Button>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index beb9611..29d82ba 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <svelte:head>
-  <meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroidTV ? $settings.uiScale / devicePixelRatio : SUPPORTS.isAndroid ? $settings.uiScale : 1}, maximum-scale=2, user-scalable=0' />
+  <meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroidTV ? $settings.uiScale / devicePixelRatio : SUPPORTS.isAndroid ? $settings.uiScale : 1}, maximum-scale=2, user-scalable=0, viewport-fit=cover' />
 </svelte:head>
 
 <div class='w-full h-full flex flex-col backface-hidden bg-black relative overflow-clip md: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}%'>
diff --git a/src/routes/setup/Footer.svelte b/src/routes/setup/Footer.svelte
index 03031ad..12b75b2 100644
--- a/src/routes/setup/Footer.svelte
+++ b/src/routes/setup/Footer.svelte
@@ -67,17 +67,17 @@
   </div>
 </div>
 <div class='flex flex-row items-center justify-between w-full bg-neutral-950 border-t md:border md:rounded-lg border-border py-4 px-8'>
-  <Button variant='secondary' class='w-24' href='../{PREV[step]}'>Prev</Button>
+  <Button variant='secondary' class='w-24' href='../{PREV[step]}' id='setup-prev-button' data-right='#setup-next-button'>Prev</Button>
   {#await settled}
     <Tooltip.Root>
       <Tooltip.Trigger let:builder>
-        <Button builders={[builder]} class='font-semibold w-24 !pointer-events-auto cursor-wait' disabled>Next</Button>
+        <Button builders={[builder]} class='font-semibold w-24 !pointer-events-auto cursor-wait' disabled id='setup-next-button' data-left='#setup-prev-button'>Next</Button>
       </Tooltip.Trigger>
       <Tooltip.Content>
         <p>Wait for all checks to settle</p>
       </Tooltip.Content>
     </Tooltip.Root>
   {:then _}
-    <Button class='font-semibold w-24' on:click={checkNext}>Next</Button>
+    <Button class='font-semibold w-24' on:click={checkNext} id='setup-next-button' data-left='#setup-prev-button'>Next</Button>
   {/await}
 </div>