From 4c4d4e35961426e8366c68e351806a462a23f7e5 Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mauro-balades@users.noreply.github.com>
Date: Mon, 27 Jan 2025 15:35:15 +0100
Subject: [PATCH] Revert "Implement lazy loading of videos"

---
 astro.config.mjs                 |   2 +-
 src/components/Features.astro    |  30 +-
 src/components/NavBar.astro      |   4 +-
 src/components/ThemeSwitch.astro |  33 ---
 src/components/Video.astro       |  42 ---
 src/icons/MoonIcon.astro         |   9 -
 src/icons/SunIcon.astro          |   9 -
 src/layouts/Layout.astro         |  32 +--
 src/pages/download.astro         | 454 +++++++++++++++----------------
 9 files changed, 253 insertions(+), 362 deletions(-)
 delete mode 100644 src/components/ThemeSwitch.astro
 delete mode 100644 src/components/Video.astro
 delete mode 100644 src/icons/MoonIcon.astro
 delete mode 100644 src/icons/SunIcon.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 6044bda..ad8e88f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -18,5 +18,5 @@ export default defineConfig({
   site: 'https://zen-browser.app',
   redirects: {
     '/themes/[...slug]': '/mods/[...slug]',
-  }
+  },
 })
diff --git a/src/components/Features.astro b/src/components/Features.astro
index e8bd7a9..34aa645 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -1,5 +1,7 @@
 ---
+import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
+import { Image } from 'astro:assets'
 
 import browserSidebar from '../assets/browser-sidebar.webm'
 import browserWorkspaces from '../assets/browser-workspaces.webm'
@@ -8,8 +10,7 @@ import browserGlance from '../assets/browser-glance.webm'
 import browserSplitViews from '../assets/browser-splitview.webm'
 
 import { motion } from 'motion/react'
-import { getTitleAnimation } from '../animations'
-import Video from './Video.astro'
+import { getTitleAnimation, getZoomInAnimation } from '../animations'
 ---
 
 <section
@@ -46,15 +47,14 @@ import Video from './Video.astro'
           organized.
         </p>
       </div>
-      <Video
+      <video
         src={browserWorkspaces}
         autoplay
         loop
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
-      />
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
     </div>
     <div class="long-feature xl:!flex-row-reverse">
       <div class="lg:p-24">
@@ -66,15 +66,14 @@ import Video from './Video.astro'
           distractions.
         </p>
       </div>
-      <Video
+      <video
         src={browserCompactMode}
         autoplay
         loop
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
-      />
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
     </div>
     <div class="long-feature">
       <div class="lg:p-24">
@@ -88,15 +87,14 @@ import Video from './Video.astro'
           opening them.
         </p>
       </div>
-      <Video
+      <video
         src={browserGlance}
         autoplay
         loop
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
-      />
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
     </div>
     <div class="long-feature xl:!flex-row-reverse">
       <div class="lg:p-24">
@@ -109,15 +107,14 @@ import Video from './Video.astro'
           Zen's split view feature allows you to view multiple tabs at once.
         </p>
       </div>
-      <Video
+      <video
         src={browserSplitViews}
         autoplay
         loop
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
-      />
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
     </div>
     <div class="long-feature">
       <div class="lg:p-24">
@@ -128,15 +125,14 @@ import Video from './Video.astro'
           Zen's sidebar feature allows you to view all your tabs in one place.
         </p>
       </div>
-      <Video
+      <video
         src={browserSidebar}
         autoplay
         loop
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
-      />
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
     </div>
   </div>
 </section>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 83476a5..d937a93 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -12,7 +12,7 @@ import {
 } from 'astro-navbar'
 import { ArrowRight, ChevronDown, Download, DownloadCloud } from 'lucide-astro'
 import Logo from './Logo.astro'
-import ThemeSwitch from './ThemeSwitch.astro'
+import { ThemeSwitch } from 'free-astro-components'
 ---
 
 <nav
@@ -112,7 +112,7 @@ import ThemeSwitch from './ThemeSwitch.astro'
       </div>
       <div class="ml-auto flex gap-2">
         <div id="theme-switcher" class="ml-auto md:mr-2">
-          <ThemeSwitch />
+          <ThemeSwitch label="" class="px-1 py-2" />
         </div>
         <Button href="/download" class="ml-auto" isPrimary>
           <span class="hidden items-center gap-2 md:flex">
diff --git a/src/components/ThemeSwitch.astro b/src/components/ThemeSwitch.astro
deleted file mode 100644
index 31d1d89..0000000
--- a/src/components/ThemeSwitch.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-interface Props {
-  label?: string
-  class?: string
-}
-
-const { label = 'Toggle theme', class: className, ...rest } = Astro.props
-import SunIcon from '../icons/SunIcon.astro'
-import MoonIcon from '../icons/MoonIcon.astro'
----
-
-<button
-  id="theme-toggle"
-  type="button"
-  class:list={['rounded-lg p-2.5 outline-none', className]}
-  aria-label={label}
-  {...rest}
->
-  <SunIcon class="hidden size-5 dark:block" />
-  <MoonIcon class="size-5 dark:hidden" />
-</button>
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    const themeToggleBtn = document.getElementById('theme-toggle')
-    themeToggleBtn?.addEventListener('click', () => {
-      const currentTheme = document.documentElement.dataset.theme
-      const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
-      localStorage.theme = newTheme
-      document.documentElement.dataset.theme = newTheme
-    })
-  })
-</script>
diff --git a/src/components/Video.astro b/src/components/Video.astro
deleted file mode 100644
index 48cdbc7..0000000
--- a/src/components/Video.astro
+++ /dev/null
@@ -1,42 +0,0 @@
----
-const { src, class: className, ...rest } = Astro.props
-const type = src.split('.').pop() || 'webm'
----
-
-<video
-  class:list={['w-full', className]}
-  data-src={src}
-  preload="none"
-  {...rest}
->
-  <source src="" type={`video/${type}`} />
-</video>
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    const videos = document.querySelectorAll('video[data-src]')
-
-    const loadVideo = (video: HTMLVideoElement) => {
-      const source = video.querySelector('source')
-      const dataSrc = video.getAttribute('data-src')
-      if (dataSrc && source) {
-        source.src = dataSrc
-        video.load()
-        video.removeAttribute('data-src')
-      }
-    }
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          loadVideo(entry.target as HTMLVideoElement)
-          observer.unobserve(entry.target)
-        }
-      })
-    })
-
-    videos.forEach((video) => {
-      observer.observe(video)
-    })
-  })
-</script>
diff --git a/src/icons/MoonIcon.astro b/src/icons/MoonIcon.astro
deleted file mode 100644
index 45fa45b..0000000
--- a/src/icons/MoonIcon.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-const { class: className, ...rest } = Astro.props
----
-
-<svg class={className} viewBox="0 0 24 24" {...rest}>
-  <path
-    d="M10.719 2.082c-2.572 2.028-4.719 5.212-4.719 9.918 0 4.569 1.938 7.798 4.548 9.895-4.829-.705-8.548-4.874-8.548-9.895 0-5.08 3.808-9.288 8.719-9.918zm1.281-2.082c-6.617 0-12 5.383-12 12s5.383 12 12 12c1.894 0 3.87-.333 5.37-1.179-3.453-.613-9.37-3.367-9.37-10.821 0-7.555 6.422-10.317 9.37-10.821-1.74-.682-3.476-1.179-5.37-1.179zm0 10.999c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm8.001.001c.958.293 1.707 1.042 2 2.001.291-.959 1.042-1.709 1.999-2.001-.957-.292-1.707-1.042-2-2-.293.958-1.042 1.708-1.999 2zm-1-9c-.437 1.437-1.563 2.562-2.998 3.001 1.438.44 2.561 1.564 3.001 3.002.437-1.438 1.563-2.563 2.996-3.002-1.433-.437-2.559-1.564-2.999-3.001z"
-    fill="currentColor"></path>
-</svg>
diff --git a/src/icons/SunIcon.astro b/src/icons/SunIcon.astro
deleted file mode 100644
index e32c4a8..0000000
--- a/src/icons/SunIcon.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-const { class: className, ...rest } = Astro.props
----
-
-<svg class={className} viewBox="0 0 24 24" {...rest}>
-  <path
-    d="M12 9c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm-4.184-.599l-3.593-3.594-1.415 1.414 3.595 3.595c.401-.537.876-1.013 1.413-1.415zm4.184-1.401c.34 0 .672.033 1 .08v-5.08h-2v5.08c.328-.047.66-.08 1-.08zm5.598 2.815l3.595-3.595-1.414-1.414-3.595 3.595c.537.402 1.012.878 1.414 1.414zm-12.598 4.185c0-.34.033-.672.08-1h-5.08v2h5.08c-.047-.328-.08-.66-.08-1zm11.185 5.598l3.594 3.593 1.415-1.414-3.594-3.593c-.403.536-.879 1.012-1.415 1.414zm-9.784-1.414l-3.593 3.593 1.414 1.414 3.593-3.593c-.536-.402-1.011-.877-1.414-1.414zm12.519-5.184c.047.328.08.66.08 1s-.033.672-.08 1h5.08v-2h-5.08zm-6.92 8c-.34 0-.672-.033-1-.08v5.08h2v-5.08c-.328.047-.66.08-1 .08z"
-    fill="currentColor"></path>
-</svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9f06de8..e432150 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,32 +7,29 @@ const { title } = Astro.props
 import '@fontsource/bricolage-grotesque/400.css'
 import NavBar from '../components/NavBar.astro'
 import Footer from '../components/Footer.astro'
-import { ClientRouter } from 'astro:transitions'
 ---
 
 <script is:inline>
-  function setDarkMode(document) {
-    let theme = localStorage.theme
-
-    if (theme === undefined) {
-      theme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
+  const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme') ?? 'light'
     }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  })()
 
-    localStorage.theme = theme
-
-    document.documentElement.dataset.theme = theme
+  if (theme === 'light') {
+    document.documentElement.setAttribute('data-theme', 'light')
+  } else {
+    document.documentElement.setAttribute('data-theme', 'dark')
   }
 
-  setDarkMode(document)
-
-  document.addEventListener('astro:before-swap', (event) => {
-    setDarkMode(event.newDocument)
-  })
+  window.localStorage.setItem('theme', theme)
 </script>
 
-<html lang="en" transition:name="root" transition:animate="none">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -72,7 +69,6 @@ import { ClientRouter } from 'astro:transitions'
       title="Zen Browser Release Notes"
       href={`${Astro.url.origin}/feed.xml`}
     />
-    <ClientRouter />
   </head>
   <body
     class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark"
diff --git a/src/pages/download.astro b/src/pages/download.astro
index 919f44c..f1cace2 100644
--- a/src/pages/download.astro
+++ b/src/pages/download.astro
@@ -261,265 +261,257 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
   </main>
 </Layout>
 <script>
-  document.addEventListener('astro:page-load', () => {
-    const releases = {
-      macos: {
-        intel: 'zen.macos-x86_64.dmg',
-        arm: 'zen.macos-aarch64.dmg',
+  const releases = {
+    macos: {
+      intel: 'zen.macos-x86_64.dmg',
+      arm: 'zen.macos-aarch64.dmg',
+    },
+    linux: {
+      x86_64: {
+        tar: 'zen.linux-x86_64.tar.bz2',
+        appImage: 'zen-x86_64.AppImage',
       },
-      linux: {
-        x86_64: {
-          tar: 'zen.linux-x86_64.tar.bz2',
-          appImage: 'zen-x86_64.AppImage',
-        },
-        aarch64: {
-          tar: 'zen.linux-aarch64.tar.bz2',
-          appImage: 'zen-aarch64.AppImage',
-        },
+      aarch64: {
+        tar: 'zen.linux-aarch64.tar.bz2',
+        appImage: 'zen-aarch64.AppImage',
       },
-      windows: {
-        x86_64: {
-          installer: 'zen.installer.exe',
-          zip: 'zen.win-x86_64.zip',
-        },
-        arm64: {
-          installer: 'zen.installer-arm64.exe',
-          zip: 'zen.win-arm64.zip',
-        },
+    },
+    windows: {
+      x86_64: {
+        installer: 'zen.installer.exe',
+        zip: 'zen.win-x86_64.zip',
       },
-    } as any
+      arm64: {
+        installer: 'zen.installer-arm64.exe',
+        zip: 'zen.win-arm64.zip',
+      },
+    },
+  } as any
 
-    const BASE_URL =
-      'https://github.com/zen-browser/desktop/releases/latest/download'
-    const TWILIGHT_BASE_URL =
-      'https://github.com/zen-browser/desktop/releases/download/twilight'
+  const BASE_URL =
+    'https://github.com/zen-browser/desktop/releases/latest/download'
+  const TWILIGHT_BASE_URL =
+    'https://github.com/zen-browser/desktop/releases/download/twilight'
 
-    var selectedOS: string | null = null
-    var isTwilight: boolean = false
+  var selectedOS: string | null = null
+  var isTwilight: boolean = false
 
-    var selectedArch: string | null = null
+  var selectedArch: string | null = null
 
-    function showButton(buttonId: string, show: boolean) {
-      const button = document.getElementById(buttonId) as HTMLButtonElement
-      if (show) {
-        button?.classList.remove('hidden')
-      } else {
-        button?.classList.add('hidden')
-      }
+  function showButton(buttonId: string, show: boolean) {
+    const button = document.getElementById(buttonId) as HTMLButtonElement
+    if (show) {
+      button?.classList.remove('hidden')
+    } else {
+      button?.classList.add('hidden')
     }
+  }
 
-    function downloadRelease(os: string, arch: string, format: string = '') {
-      console.log('Downloading release', os, arch, format)
-      let releaseName = releases[os][arch]
-      if (os !== 'macos') {
-        releaseName = releases[os][arch][format]
-      }
-      const url = `${isTwilight ? TWILIGHT_BASE_URL : BASE_URL}/${releaseName}`
-      console.log('Downloading from', url)
-      window.open(url, '_blank')
+  function downloadRelease(os: string, arch: string, format: string = '') {
+    console.log('Downloading release', os, arch, format)
+    let releaseName = releases[os][arch]
+    if (os !== 'macos') {
+      releaseName = releases[os][arch][format]
     }
+    const url = `${isTwilight ? TWILIGHT_BASE_URL : BASE_URL}/${releaseName}`
+    console.log('Downloading from', url)
+    window.open(url, '_blank')
+  }
 
-    function goNextForm() {
-      if (selectedOS === null) {
-        const osSelect = document.getElementById('os-select') as HTMLFormElement
-        const selectedRadio = osSelect.querySelector(
-          "input[type='radio']:checked",
-        ) as HTMLInputElement
-        selectedOS = selectedRadio.value
-        document.getElementById('form-os-select')?.classList.add('hidden')
+  function goNextForm() {
+    if (selectedOS === null) {
+      const osSelect = document.getElementById('os-select') as HTMLFormElement
+      const selectedRadio = osSelect.querySelector(
+        "input[type='radio']:checked",
+      ) as HTMLInputElement
+      selectedOS = selectedRadio.value
+      document.getElementById('form-os-select')?.classList.add('hidden')
 
-        if (selectedOS === 'macos') {
-          const macosDownload = document.getElementById(
-            'form-macos-download',
-          ) as HTMLDivElement
-          macosDownload.classList.remove('hidden')
-          showButton('next-button', false)
-        } else if (selectedOS === 'linux') {
-          const linuxDownload = document.getElementById(
-            'linux-target-download',
-          ) as HTMLDivElement
-          linuxDownload.classList.remove('hidden')
-        } else if (selectedOS === 'windows') {
-          const windowsDownload = document.getElementById(
-            'windows-target-download',
-          ) as HTMLDivElement
-          windowsDownload.classList.remove('hidden')
-        }
-        showButton('back-button', true) // Show Back button after first step
-      } else if (selectedOS === 'linux' && selectedArch === null) {
-        const linuxTargetSelect = document.getElementById(
+      if (selectedOS === 'macos') {
+        const macosDownload = document.getElementById(
+          'form-macos-download',
+        ) as HTMLDivElement
+        macosDownload.classList.remove('hidden')
+        showButton('next-button', false)
+      } else if (selectedOS === 'linux') {
+        const linuxDownload = document.getElementById(
           'linux-target-download',
-        ) as HTMLFormElement
-        const selectedRadio = linuxTargetSelect.querySelector(
-          "input[type='radio']:checked",
-        ) as HTMLInputElement
-        selectedArch = selectedRadio.value
+        ) as HTMLDivElement
+        linuxDownload.classList.remove('hidden')
+      } else if (selectedOS === 'windows') {
+        const windowsDownload = document.getElementById(
+          'windows-target-download',
+        ) as HTMLDivElement
+        windowsDownload.classList.remove('hidden')
+      }
+      showButton('back-button', true) // Show Back button after first step
+    } else if (selectedOS === 'linux' && selectedArch === null) {
+      const linuxTargetSelect = document.getElementById(
+        'linux-target-download',
+      ) as HTMLFormElement
+      const selectedRadio = linuxTargetSelect.querySelector(
+        "input[type='radio']:checked",
+      ) as HTMLInputElement
+      selectedArch = selectedRadio.value
+      document.getElementById('linux-target-download')?.classList.add('hidden')
+
+      const linuxDownload = document.getElementById(
+        'form-linux-download',
+      ) as HTMLDivElement
+      linuxDownload.classList.remove('hidden')
+
+      showButton('next-button', false)
+    } else if (selectedOS === 'windows' && selectedArch === null) {
+      const windowsTargetSelect = document.getElementById(
+        'windows-target-download',
+      ) as HTMLFormElement
+      const selectedRadio = windowsTargetSelect.querySelector(
+        "input[type='radio']:checked",
+      ) as HTMLInputElement
+      selectedArch = selectedRadio.value
+      document
+        .getElementById('windows-target-download')
+        ?.classList.add('hidden')
+
+      const windowsDownload = document.getElementById(
+        'windows-download',
+      ) as HTMLDivElement
+      windowsDownload.classList.remove('hidden')
+
+      showButton('next-button', false)
+    } else {
+      throw new Error('Unknown state')
+    }
+  }
+
+  function goPreviousForm() {
+    if (selectedArch) {
+      // Go back to architecture selection
+      if (selectedOS === 'linux') {
+        document.getElementById('form-linux-download')?.classList.add('hidden')
+        document
+          .getElementById('linux-target-download')
+          ?.classList.remove('hidden')
+      } else if (selectedOS === 'windows') {
+        document.getElementById('windows-download')?.classList.add('hidden')
+        document
+          .getElementById('windows-target-download')
+          ?.classList.remove('hidden')
+      }
+      selectedArch = null
+      showButton('back-button', true)
+      showButton('next-button', true)
+    } else if (selectedOS) {
+      // Go back to OS selection
+      if (selectedOS === 'macos') {
+        document.getElementById('form-macos-download')?.classList.add('hidden')
+      } else if (selectedOS === 'linux') {
         document
           .getElementById('linux-target-download')
           ?.classList.add('hidden')
-
-        const linuxDownload = document.getElementById(
-          'form-linux-download',
-        ) as HTMLDivElement
-        linuxDownload.classList.remove('hidden')
-
-        showButton('next-button', false)
-      } else if (selectedOS === 'windows' && selectedArch === null) {
-        const windowsTargetSelect = document.getElementById(
-          'windows-target-download',
-        ) as HTMLFormElement
-        const selectedRadio = windowsTargetSelect.querySelector(
-          "input[type='radio']:checked",
-        ) as HTMLInputElement
-        selectedArch = selectedRadio.value
+      } else if (selectedOS === 'windows') {
         document
           .getElementById('windows-target-download')
           ?.classList.add('hidden')
-
-        const windowsDownload = document.getElementById(
-          'windows-download',
-        ) as HTMLDivElement
-        windowsDownload.classList.remove('hidden')
-
-        showButton('next-button', false)
-      } else {
-        throw new Error('Unknown state')
       }
+      document.getElementById('form-os-select')?.classList.remove('hidden')
+      selectedOS = null
+      showButton('back-button', false)
+      showButton('next-button', true)
     }
+  }
 
-    function goPreviousForm() {
-      if (selectedArch) {
-        // Go back to architecture selection
-        if (selectedOS === 'linux') {
-          document
-            .getElementById('form-linux-download')
-            ?.classList.add('hidden')
-          document
-            .getElementById('linux-target-download')
-            ?.classList.remove('hidden')
-        } else if (selectedOS === 'windows') {
-          document.getElementById('windows-download')?.classList.add('hidden')
-          document
-            .getElementById('windows-target-download')
-            ?.classList.remove('hidden')
-        }
-        selectedArch = null
-        showButton('back-button', true)
-        showButton('next-button', true)
-      } else if (selectedOS) {
-        // Go back to OS selection
-        if (selectedOS === 'macos') {
-          document
-            .getElementById('form-macos-download')
-            ?.classList.add('hidden')
-        } else if (selectedOS === 'linux') {
-          document
-            .getElementById('linux-target-download')
-            ?.classList.add('hidden')
-        } else if (selectedOS === 'windows') {
-          document
-            .getElementById('windows-target-download')
-            ?.classList.add('hidden')
-        }
-        document.getElementById('form-os-select')?.classList.remove('hidden')
-        selectedOS = null
-        showButton('back-button', false)
-        showButton('next-button', true)
-      }
+  showButton('back-button', false) // Hide Back button on page load
+  showButton('next-button', true) // Ensure Next button is visible on load
+
+  function filloutDefaultOS() {
+    const osSelect = document.getElementById('os-select') as HTMLFormElement
+    const osSelectWindows = document.getElementById(
+      'os-select-windows',
+    ) as HTMLInputElement
+    const osSelectLinux = document.getElementById(
+      'os-select-linux',
+    ) as HTMLInputElement
+    const osSelectMacOS = document.getElementById(
+      'os-select-macos',
+    ) as HTMLInputElement
+
+    if (navigator.platform.includes('Win')) {
+      osSelectWindows.checked = true
+    } else if (navigator.platform.includes('Linux')) {
+      osSelectLinux.checked = true
+    } else if (navigator.platform.includes('Mac')) {
+      osSelectMacOS.checked = true
     }
+  }
 
-    showButton('back-button', false) // Hide Back button on page load
-    showButton('next-button', true) // Ensure Next button is visible on load
-
-    function filloutDefaultOS() {
-      const osSelect = document.getElementById('os-select') as HTMLFormElement
-      const osSelectWindows = document.getElementById(
-        'os-select-windows',
-      ) as HTMLInputElement
-      const osSelectLinux = document.getElementById(
-        'os-select-linux',
-      ) as HTMLInputElement
-      const osSelectMacOS = document.getElementById(
-        'os-select-macos',
-      ) as HTMLInputElement
-
-      if (navigator.platform.includes('Win')) {
-        osSelectWindows.checked = true
-      } else if (navigator.platform.includes('Linux')) {
-        osSelectLinux.checked = true
-      } else if (navigator.platform.includes('Mac')) {
-        osSelectMacOS.checked = true
-      }
+  function getIfTwilight() {
+    const urlParams = new URLSearchParams(window.location.search)
+    isTwilight = urlParams.has('twilight')
+    if (isTwilight) {
+      console.log('Twilight mode enabled')
+      const name = document.getElementById('zen-name')
+      const twilightInfo = document.getElementById('twilight-info')
+      if (name) name.innerHTML = 'Twilight'
+      if (twilightInfo) twilightInfo.classList.remove('hidden')
+    } else {
+      document.getElementById('windows-zip-download')?.classList.add('hidden')
     }
+  }
 
-    function getIfTwilight() {
-      const urlParams = new URLSearchParams(window.location.search)
-      isTwilight = urlParams.has('twilight')
-      if (isTwilight) {
-        console.log('Twilight mode enabled')
-        const name = document.getElementById('zen-name')
-        const twilightInfo = document.getElementById('twilight-info')
-        if (name) name.innerHTML = 'Twilight'
-        if (twilightInfo) twilightInfo.classList.remove('hidden')
-      } else {
-        document.getElementById('windows-zip-download')?.classList.add('hidden')
-      }
-    }
+  getIfTwilight()
 
-    getIfTwilight()
-
-    document.getElementById('next-button')?.addEventListener('click', () => {
-      goNextForm()
-    })
-
-    document.getElementById('back-button')?.addEventListener('click', () => {
-      goPreviousForm()
-    })
-
-    document
-      .getElementById('macos-arm-download')
-      ?.addEventListener('click', () => {
-        downloadRelease('macos', 'arm')
-      })
-
-    document
-      .getElementById('macos-intel-download')
-      ?.addEventListener('click', () => {
-        downloadRelease('macos', 'intel')
-      })
-
-    document
-      .getElementById('linux-tar-download')
-      ?.addEventListener('click', () => {
-        downloadRelease('linux', selectedArch as string, 'tar')
-      })
-
-    document
-      .getElementById('linux-appimage-download')
-      ?.addEventListener('click', () => {
-        downloadRelease('linux', selectedArch as string, 'appImage')
-      })
-
-    document
-      .getElementById('linux-flathub-download')
-      ?.addEventListener('click', () => {
-        window.open('https://flathub.org/apps/app.zen_browser.zen')
-      })
-
-    document
-      .getElementById('windows-installer-download')
-      ?.addEventListener('click', () => {
-        downloadRelease('windows', selectedArch as string, 'installer')
-      })
-
-    document
-      .getElementById('windows-zip-download')
-      ?.addEventListener('click', () => {
-        //downloadRelease("windows", selectedArch as string, "zip");
-      })
-
-    filloutDefaultOS()
+  document.getElementById('next-button')?.addEventListener('click', () => {
+    goNextForm()
   })
+
+  document.getElementById('back-button')?.addEventListener('click', () => {
+    goPreviousForm()
+  })
+
+  document
+    .getElementById('macos-arm-download')
+    ?.addEventListener('click', () => {
+      downloadRelease('macos', 'arm')
+    })
+
+  document
+    .getElementById('macos-intel-download')
+    ?.addEventListener('click', () => {
+      downloadRelease('macos', 'intel')
+    })
+
+  document
+    .getElementById('linux-tar-download')
+    ?.addEventListener('click', () => {
+      downloadRelease('linux', selectedArch as string, 'tar')
+    })
+
+  document
+    .getElementById('linux-appimage-download')
+    ?.addEventListener('click', () => {
+      downloadRelease('linux', selectedArch as string, 'appImage')
+    })
+
+  document
+    .getElementById('linux-flathub-download')
+    ?.addEventListener('click', () => {
+      window.open('https://flathub.org/apps/app.zen_browser.zen')
+    })
+
+  document
+    .getElementById('windows-installer-download')
+    ?.addEventListener('click', () => {
+      downloadRelease('windows', selectedArch as string, 'installer')
+    })
+
+  document
+    .getElementById('windows-zip-download')
+    ?.addEventListener('click', () => {
+      //downloadRelease("windows", selectedArch as string, "zip");
+    })
+
+  filloutDefaultOS()
 </script>
 <style is:global>
   @keyframes fadeIn {