fix: episode list widths

fix: macOS menubar

package.json

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

src/lib/components/EpisodesList.svelte

@@ -82,7 +82,7 @@
       {#each getPage(currentPage, episodeList) as { episode, image, title, summary, airingAt, airdate, filler, length } (episode)}
         {@const watched = _progress >= episode}
         {@const target = _progress + 1 === episode}
-        <div class={!target ? 'px-3' : 'contents'}>
+        <div class={!target ? 'px-3 w-full' : 'contents'}>
           <div use:click={() => play(episode)}
             class={cn(
               'select:scale-[1.05] select:shadow-lg scale-100 transition-[transform,box-shadow] duration-200 shrink-0 ease-out focus-visible:ring-ring focus-visible:ring-1 rounded-md bg-neutral-950 text-secondary-foreground select:bg-neutral-900 flex w-full max-h-28 cursor-pointer relative overflow-hidden group',

src/lib/components/ui/menubar/menubar.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
   import { persisted } from 'svelte-persisted-store'
 
+  import Wrapper from './wrapper.svelte'
+
   import native from '$lib/modules/native'
   import { click } from '$lib/modules/navigate'
 
@@ -10,20 +12,24 @@
   }
 </script>
 
-<div class='w-[calc(100%-3.5rem)] left-[3.5rem] top-0 z-[2000] flex navbar absolute h-8'>
+<Wrapper let:platform>
-  <div class='draggable w-full' />
+  <div class='w-[calc(100%-3.5rem)] left-[3.5rem] top-0 z-[2000] flex navbar absolute h-8'>
-  <div class='window-controls flex text-white backdrop-blur'>
+    <div class='draggable w-full' />
-    <button class='max-button flex items-center justify-center h-8 w-[46px]' use:click={native.minimise} use:tabindex>
+    {#if platform !== 'macOS'}
-      <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='currentColor' height='1' width='10' x='1' y='6' />
+      <div class='window-controls flex text-white backdrop-blur'>
-    </button>
+        <button class='max-button flex items-center justify-center h-8 w-[46px]' use:click={native.minimise} use:tabindex>
-    <button class='restore-button flex items-center justify-center h-8 w-[46px]' use:click={native.maximise} use:tabindex>
+          <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='currentColor' height='1' width='10' x='1' y='6' />
-      <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' />
+        </button>
-    </button>
+        <button class='restore-button flex items-center justify-center h-8 w-[46px]' use:click={native.maximise} use:tabindex>
-    <button class='close-button flex items-center justify-center h-8 w-[46px]' use:click={native.close} use:tabindex>
+          <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' />
-      <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><polygon fill='currentColor' fill-rule='evenodd' points='11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1' />
+        </button>
-    </button>
+        <button class='close-button flex items-center justify-center h-8 w-[46px]' use:click={native.close} use:tabindex>
+          <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><polygon fill='currentColor' fill-rule='evenodd' points='11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1' />
+        </button>
+      </div>
+    {/if}
   </div>
-</div>
+</Wrapper>
 {#if $debug}
   <div class='ribbon z-[1000] text-center fixed font-bold pointer-events-none'>Debug Mode!</div>
 {/if}

src/lib/components/ui/menubar/wrapper.svelte

@@ -0,0 +1,15 @@
+<script lang='ts'>
+
+  import { highEntropyValues } from '$lib/utils'
+
+</script>
+
+{#if highEntropyValues}
+  {#await highEntropyValues then { platform }}
+    <slot {platform} />
+  {:catch e}
+    <slot platform='' />
+  {/await}
+{:else}
+  <slot platform='' />
+{/if}

src/lib/utils.ts

@@ -65,6 +65,8 @@ 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 function safeLocalStorage<T> (key: string): T | undefined {
   try {
     const value = localStorage.getItem(key)

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

@@ -4,6 +4,7 @@
   import { Separator } from '$lib/components/ui/separator'
   import native from '$lib/modules/native'
   import { dragScroll } from '$lib/modules/navigate'
+  import { highEntropyValues } from '$lib/utils'
 
   const items = [
     {
@@ -51,8 +52,8 @@
       <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}
+        {#if highEntropyValues}
-          {#await navigator.userAgentData.getHighEntropyValues(['architecture', 'platform', 'platformVersion']) then { architecture, platform, platformVersion }}
+          {#await highEntropyValues then { architecture, platform, platformVersion }}
             <div>{platform} {platformVersion} {architecture}</div>
           {:catch e}
             <div>Could not obtain device version</div>