From c78b18c5e83e017bbc01410243af46fdf0cfd8db Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sat, 14 Jun 2025 21:23:55 +0200
Subject: [PATCH] fix: episode list widths fix: macOS menubar

---
 package.json                                 |  2 +-
 src/lib/components/EpisodesList.svelte       |  2 +-
 src/lib/components/ui/menubar/menubar.svelte | 32 ++++++++++++--------
 src/lib/components/ui/menubar/wrapper.svelte | 15 +++++++++
 src/lib/utils.ts                             |  2 ++
 src/routes/app/settings/+layout.svelte       |  5 +--
 6 files changed, 41 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/ui/menubar/wrapper.svelte

diff --git a/package.json b/package.json
index 62a3845..29af842 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/components/EpisodesList.svelte b/src/lib/components/EpisodesList.svelte
index 8795860..ed66f02 100644
--- a/src/lib/components/EpisodesList.svelte
+++ b/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',
diff --git a/src/lib/components/ui/menubar/menubar.svelte b/src/lib/components/ui/menubar/menubar.svelte
index 1f53838..8fc15e7 100644
--- a/src/lib/components/ui/menubar/menubar.svelte
+++ b/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'>
-  <div class='draggable w-full' />
-  <div class='window-controls flex text-white backdrop-blur'>
-    <button class='max-button flex items-center justify-center h-8 w-[46px]' use:click={native.minimise} 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' />
-    </button>
-    <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='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' />
-    </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>
+<Wrapper let:platform>
+  <div class='w-[calc(100%-3.5rem)] left-[3.5rem] top-0 z-[2000] flex navbar absolute h-8'>
+    <div class='draggable w-full' />
+    {#if platform !== 'macOS'}
+      <div class='window-controls flex text-white backdrop-blur'>
+        <button class='max-button flex items-center justify-center h-8 w-[46px]' use:click={native.minimise} 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' />
+        </button>
+        <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='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' />
+        </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}
diff --git a/src/lib/components/ui/menubar/wrapper.svelte b/src/lib/components/ui/menubar/wrapper.svelte
new file mode 100644
index 0000000..85deade
--- /dev/null
+++ b/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}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f1ce6e2..83bc568 100644
--- a/src/lib/utils.ts
+++ b/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)
diff --git a/src/routes/app/settings/+layout.svelte b/src/routes/app/settings/+layout.svelte
index 2a7ebeb..2f3f54a 100644
--- a/src/routes/app/settings/+layout.svelte
+++ b/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}
-          {#await navigator.userAgentData.getHighEntropyValues(['architecture', 'platform', 'platformVersion']) then { architecture, platform, platformVersion }}
+        {#if highEntropyValues}
+          {#await highEntropyValues then { architecture, platform, platformVersion }}
             <div>{platform} {platformVersion} {architecture}</div>
           {:catch e}
             <div>Could not obtain device version</div>