www/src/components/ReleaseNoteItem.astro

---
import InfoIcon from '~/icons/InfoIcon.astro'

import { getIntlLocale } from '~/constants/i18n'
import { releaseNotes as releaseNotesData } from '~/release-notes'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import { type ReleaseNote, getReleaseNoteFirefoxVersion } from '../release-notes'
import ReleaseNoteListItem from './ReleaseNoteListItem.astro'
export type Props = ReleaseNote
const { isTwilight, ...props } = Astro.props

const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
  routes: {
    releaseNotes: {
      components: { releaseNoteItem },
    },
  },
} = getUI(locale)

let date: Date | undefined
if (props.date) {
  const [day, month, year] = props.date.split('/')
  date = new Date(Date.parse(`${year}-${month}-${day}`))
}

const ffVersion = getReleaseNoteFirefoxVersion(props)
const currentReleaseIndex = releaseNotesData.findIndex(
  (releaseNote: ReleaseNote) => releaseNote.version === props.version
)
const prevReleaseNote = releaseNotesData[currentReleaseIndex + 1]
let compareLink = ''
if (prevReleaseNote && !isTwilight) {
  compareLink = `https://github.com/zen-browser/desktop/compare/${prevReleaseNote.version}...${props.version}`
}

const isLatest = currentReleaseIndex === 0

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const listItems = {} as any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const generateItems = (items: any, type: string) => {
  if (!items) return
  if (!listItems[type]) {
    listItems[type] = []
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  items.forEach((item: any) => {
    switch (type) {
      case 'feature':
        listItems[type].push({
          type: 'feature',
          content: item,
        })
        break
      case 'fix':
        listItems[type].push({
          type: 'fix',
          content: item.description ?? item,
          ...(item.issue
            ? {
                link: {
                  text: `Issue #${item.issue}`,
                  href: `https://github.com/zen-browser/desktop/issues/${item.issue}`,
                },
              }
            : {}),
        })
        break
      case 'security':
        listItems[type].push({
          type: 'security',
          link: {
            text: 'Various security fixes.',
            href: item,
          },
        })
        break
      case 'theme':
        listItems[type].push({
          type: 'theme',
          content: item,
        })
        break
      case 'known':
        listItems[type].push({
          type: 'known',
          content: item,
        })
        break
      case 'break':
        listItems[type].push({
          type: 'break',
          content: item,
        })
        break
      case 'change':
        listItems[type].push({
          type: 'change',
          content: item,
        })
        break
    }
  })
}
generateItems(props.security ? [props.security] : null, 'security')
generateItems(props.fixes, 'fix')
generateItems(props.features, 'feature')
generateItems(props.changes, 'change')
generateItems(props.themeChanges, 'theme')
generateItems(props.breakingChanges, 'break')
generateItems(props.knownIssues, 'known')
---

<section
  class="release-note-item relative mt-12 flex flex-col pt-24 lg:flex-row"
  id={props.version}
>
  <div class="flex w-full flex-col gap-2 px-5 md:px-10 md:pr-32">
    {
      isTwilight ? (
        <a
          class="!mb-2 block w-fit rounded-full bg-coral px-3 py-1 text-xs text-paper"
          href={getLocalePath('/download?twilight')}
        >
          {releaseNoteItem.twilight}
        </a>
      ) : null
    }
    <div class="w-full justify-between sm:flex">
      <div
        class="flex flex-col gap-1 text-sm font-bold opacity-80 sm:flex-row sm:items-center sm:gap-0"
      >
        {
          isTwilight ? (
            <>
              {releaseNoteItem.twilightChanges}{' '}
              {props.version.replaceAll('{version}', props.version)}
            </>
          ) : (
            <>{releaseNoteItem.releaseChanges.replaceAll('{version}', props.version)}</>
          )
        }
        {
          ffVersion ? (
            <>
              <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
              <a
                rel="noopener noreferrer"
                class="text-xs text-coral underline decoration-wavy opacity-80"
                href={`https://www.mozilla.org/en-US/firefox/${ffVersion}/releasenotes/`}
                target="_blank"
                rel="noopener noreferrer"
              >
                {releaseNoteItem.firefoxVersion.replace('{version}', ffVersion)}
              </a>
            </>
          ) : null
        }
        <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
        <a
          rel="noopener noreferrer"
          class="zen-link whitespace-nowrap text-xs !no-underline opacity-80"
          target="_blank"
          href={`https://github.com/zen-browser/desktop/releases/tag/${isTwilight ? 'twilight-1' : props.version}`}
          >{releaseNoteItem.githubRelease}</a
        >
        {
          !isTwilight ? (
            <>
              <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
              <a
                rel="noopener noreferrer"
                class="zen-link whitespace-nowrap text-xs !no-underline opacity-80"
                target="_blank"
                href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}
              >
                {releaseNoteItem.workflowRun}
              </a>
            </>
          ) : null
        }
        {
          compareLink !== '' ? (
            <>
              <span class="text-muted-foreground mx-3 hidden sm:block">•</span>
              <a
                rel="noopener noreferrer"
                class="zen-link whitespace-nowrap text-xs !no-underline opacity-80"
                target="_blank"
                href={compareLink}
              >
                {releaseNoteItem.compareChanges}
              </a>
            </>
          ) : null
        }
      </div>
      <div class="text-xs font-bold opacity-80">
        {date && date.toLocaleDateString(getIntlLocale(locale), { dateStyle: 'long' })}
      </div>
    </div>
    {
      props.extra?.length ? (
        <p class="text-md text-muted-foreground extra mt-2">
          <Fragment set:html={props.extra.replace(/\n/g, '<br />')} />
        </p>
      ) : null
    }
    {
      isTwilight || isLatest ? (
        <div class="text-muted-forground flex text-sm opacity-70">
          {isTwilight ? <InfoIcon class="mx-4 my-0 size-6 text-yellow-500" /> : null}
          <p class="m-0">
            {isTwilight ? <>{releaseNoteItem.twilightWarning}</> : null}
            <span set:html={releaseNoteItem.reportIssues} />
          </p>
        </div>
      ) : null
    }
    <div class="mt-4 flex flex-col gap-8">
      {
        Object.keys(listItems).map(type => {
          const items = listItems[type]
          if (items.length === 0) return null
          return (
            <ul class="flex flex-col gap-1">
              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
              {items.map((item: any) => (
                <ReleaseNoteListItem type={item.type} content={item.content} link={item.link} />
              ))}
            </ul>
          )
        })
      }
    </div>
  </div>
  <style is:global>
    .ac-accordion-item-title {
      @apply !text-dark;
      flex-direction: row-reverse !important;

      &:hover {
        opacity: 0.8 !important;
      }

      & > svg {
        color: var(--zen-dark) !important;
      }
    }

    .ac-accordion-item {
      transition: height 0.2s ease-in-out !important;

      & li {
        opacity: 0.5;
      }
    }
    .ac-accordion {
      &.ac-accordion--light {
        > * + * {
          border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
          width: 100%;
        }
      }
    }

    .extra {
      & a {
        @apply !text-coral underline underline-offset-4;
      }
    }

    .release-note-item {
      border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    }
  </style>
</section>