Refactor ReleaseNoteItem component and add Firefox version extraction logic; update twilight release notes with new features and fixes

src/components/ReleaseNoteItem.astro

@@ -2,7 +2,11 @@
 import { Accordion, AccordionItem } from 'free-astro-components'
 import { Info } from 'lucide-astro'
 
-import type { ReleaseNote, BreakingChange } from '../release-notes'
+import {
+  type ReleaseNote,
+  type BreakingChange,
+  getReleaseNoteFirefoxVersion,
+} from '../release-notes'
 export type Props = ReleaseNote
 const { isTwilight, ...props } = Astro.props
 
@@ -11,6 +15,8 @@ if (props.date) {
   const [day, month, year] = props.date.split('/')
   date = new Date(Date.parse(`${year}-${month}-${day}`))
 }
+
+const ffVersion = getReleaseNoteFirefoxVersion(props)
 ---
 
 <section
@@ -28,7 +34,7 @@ if (props.date) {
         </a>
       ) : null
     }
-    <h1 class="text-3xl font-bold">
+    <h1 class="flex items-center text-3xl font-bold">
       {
         isTwilight ? (
           <>Twilight changes for {props.version} 🌙</>
@@ -36,6 +42,13 @@ if (props.date) {
           <>Release notes for {props.version} 🎉</>
         )
       }
+      {
+        ffVersion ? (
+          <div class="!mb-2 ml-6 mt-1 block inline w-fit rounded-full bg-blue-50 px-3 py-1 text-xs text-paper">
+            Firefox {ffVersion}
+          </div>
+        ) : null
+      }
     </h1>
     {date && date.toLocaleDateString('en-US', { dateStyle: 'long' })}
     <div class="mt-2">

src/pages/privacy-policy.astro

@@ -229,7 +229,8 @@ import Layout from '../layouts/Layout.astro'
       </li>
       <li>
         GitHub: <a class="zen-link" href="https://github.com/zen-browser"
-          >Organization</a>
+          >Organization</a
+        >
       </li>
     </ul>
   </main>

src/pages/release-notes/index.astro

@@ -21,23 +21,18 @@ import { ArrowUp } from 'lucide-astro'
         Stay up to date with the latest changes to Zen Browser! Since the <a
           class="zen-link"
           href="#1.0.0-a.1">first release</a
-        > till <a
-          class="zen-link"
-          href={`#${releaseNotes[0].version}`}
+        > till <a class="zen-link" href={`#${releaseNotes[0].version}`}
           >{releaseNotes[0].version}</a
         >, we've been working hard to make Zen Browser the best it can be.
         Thanks everyone for your feedback! ❤️
       </p>
-      <div class="mx-auto sm:mr-0 flex flex-col sm:flex-row w-fit sm:items-center gap-4 mt-8">
+      <div
+        class="mx-auto mt-8 flex w-fit flex-col gap-4 sm:mr-0 sm:flex-row sm:items-center"
+      >
         <Button class="flex" isPrimary href="/donate">
           Give us some support!
         </Button>
-        <Button
-          id="toggle-notes"
-          class="flex"
-          data-open="false"
-          href="#"
-        >
+        <Button id="toggle-notes" class="flex" data-open="false" href="#">
           Expand all
         </Button>
         <Button id="navigate-to-version" href="#" class="flex">
@@ -59,32 +54,34 @@ import { ArrowUp } from 'lucide-astro'
     isPrimary
     class="fixed bottom-8 right-8 opacity-0"
   >
-    <p class="hidden sm:flex items-center gap-2">
-      Back to the top <ArrowUp aria-hidden="true" class="size-4"/>
+    <p class="hidden items-center gap-2 sm:flex">
+      Back to the top <ArrowUp aria-hidden="true" class="size-4" />
     </p>
-    <ArrowUp aria-label="Back to the top" class="sm:hidden size-4" />
+    <ArrowUp aria-label="Back to the top" class="size-4 sm:hidden" />
   </Button>
 </Layout>
-<Modal id="version-modal" class="m-auto !bg-paper border">
+<Modal id="version-modal" class="m-auto border !bg-paper">
   <ModalHeader class="border-b">
-    <h1 class="font-bold text-4xl">Choose version</h1>
+    <h1 class="text-4xl font-bold">Choose version</h1>
   </ModalHeader>
   <ModalBody>
     <div id="version-list" class="flex flex-col gap-2 text-xl">
-      {releaseNotes.map((note) => (
-        <button
-          aria-label={`Navigate to version ${note.version}`}
-          class="hover:text-coral transition-colors duration-150 w-full text-left"
-          data-version={note.version}
-        >
-          {note.version}
-        </button>
-      ))}
+      {
+        releaseNotes.map((note) => (
+          <button
+            aria-label={`Navigate to version ${note.version}`}
+            class="w-full text-left transition-colors duration-150 hover:text-coral"
+            data-version={note.version}
+          >
+            {note.version}
+          </button>
+        ))
+      }
     </div>
   </ModalBody>
 </Modal>
 <script>
-  import { openModal, closeModal } from 'free-astro-components';
+  import { openModal, closeModal } from 'free-astro-components'
 
   const scrollTopButton = document.getElementById('scroll-top')
   const toggleButton = document.getElementById('toggle-notes')
@@ -124,7 +121,6 @@ import { ArrowUp } from 'lucide-astro'
     toggleButton.textContent = isOpen ? 'Expand all' : 'Collapse all'
   }
 
-
   const navigateToVersion = (e: MouseEvent) => {
     const target = e.target as HTMLElement
     if (!container || !target?.closest('[data-version]')) return
@@ -133,11 +129,13 @@ import { ArrowUp } from 'lucide-astro'
     if (!version) return
     window.location.hash = version
 
-    const versionDetails = document.getElementById(version)?.getElementsByTagName('details')
+    const versionDetails = document
+      .getElementById(version)
+      ?.getElementsByTagName('details')
     if (versionDetails && versionDetails.length > 0) {
-      Array.from(versionDetails).forEach(accordion => {
+      Array.from(versionDetails).forEach((accordion) => {
         accordion.setAttribute('open', '')
-      });
+      })
     }
 
     closeModal(modal)

src/release-notes.ts

@@ -25,3 +25,19 @@ export interface ReleaseNote {
 
 export const releaseNotes: ReleaseNote[] = releaseNotesStable.reverse()
 export { default as releaseNotesTwilight } from './release-notes/twilight.json'
+
+export function getReleaseNoteFirefoxVersion(
+  releaseNote: ReleaseNote,
+): string | null {
+  // Check if "firefox" is on the feature list
+  for (const feature of releaseNote.features || []) {
+    if (feature.toLowerCase().includes('firefox')) {
+      // may be X or X.X or X.X.X
+      const match = feature.match(/(\d+(\.\d+){0,2})/)
+      if (match) {
+        return match[0]
+      }
+    }
+  }
+  return null
+}

src/release-notes/twilight.json

@@ -1,7 +1,41 @@
 {
-  "version": "xxx",
+  "version": "1.12t",
   "image": false,
-  "extra": "",
-  "fixes": [],
-  "features": []
+  "extra": "A nice update that brings some cool new features and fixes!\n\nWe are also exited to announce that we moved into <a href=\"https://floss.social/@zenbrowser\">floss.social</a>!\n\nIn response to recent privacy concerns, we've significantly strengthened Zen's privacy measures. Previously, we only disabled telemetry, but some minimal pings were still being sent. Now, firefox telemetry has been completely stripped out from the core. Additionally, onboarding pages and intial essentials favicons are now served through our own fully private CDN and our website no longer relies on any external services/CDNs.\n\nOnly essential security updates and other non-telemetry-related services remain. As a result, the number of external connections has dropped from 82 to around 13 — factoring in that Zen's site is loaded twice (for the welcome page and privacy policy) and about 10 favicons are fetched from our private CDN.\n\nPsst. With the release of firefox 138, folders are just around the corner!",
+  "fixes": [
+    "Fixed a crash when no loaded tab is present on the ctrl+Tab menu",
+    {
+      "description": "Fixed alert boxes cutoff half way on split view",
+      "issue": 7564
+    },
+    {
+      "description": "Fixed moving split view tabs into other workspaces not working",
+      "issue": 7840
+    },
+    "Fixed Paste-And-Go always navigating in the current tab, even after ctrl+T is pressed",
+    {
+      "description": "Panels UI not rendering addons correctly and overflow outside the screen on linux",
+      "issue": 7633
+    },
+    "Fixed URL bar unfocusing when pressing the newtab button",
+    {
+      "description": "Fixed glance freezing when opening tabs in other worksaces",
+      "issue": 7864
+    },
+    {
+      "description": "Fixed duplicating tabs being stuck on 'New Tab' text",
+      "issue": 7900
+    },
+    "Fixed an empty newtab opening when closing with a pinned tab selected on the previous session"
+  ],
+  "features": [
+    "Updated to Firefox 138.0",
+    "Increased privacy and reduced initial connections at startup",
+    "Added a *really smooth* animation when downloading files. Thanks to @BrielOtero on github!",
+    "New, fully containerized essentials are out! It allows to have different essentials based on your workspace's container. It can be enabled by goign into about:preferences -> tab management -> allow container specific essentials",
+    "Auto-Picture-in-Picture wont activate if the video is muted",
+    "Added homepage button and export/import buttons to the mods page for easier access. Thanks to @Pdzly on github!",
+    "More efficient workspace switching, by only animating what we need and warming up the tabs before switching",
+    "Did internat refactoring to certain components in order to comply with Firefox's new security standards."
+  ]
 }