@fecommunity/reactpress-theme-starter 1.0.0-beta.0

package/components/layout/SiteFooter.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import PageContainer from '@/components/layout/PageContainer'
+import Link from '@/components/shared/Link'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { getSiteTitle, useSiteSetting } from '@fecommunity/reactpress-toolkit/theme'
+
+export default function SiteFooter() {
+  const { t } = useLocale()
+  const setting = useSiteSetting()
+  const siteTitle = getSiteTitle(setting)
+
+  return (
+    <footer
+      className="mt-auto w-full shrink-0 border-t border-[var(--border-color)] bg-[var(--bg-box)] py-8"
+      role="contentinfo"
+    >
+      <PageContainer>
+        <div className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
+          <div className="min-w-0 flex-1">
+            <div className="mb-2 font-semibold text-[var(--main-text-color)]">{t('aboutUs')}</div>
+            {setting?.systemSubTitle ? (
+              <p className="m-0 mb-2 text-sm leading-relaxed text-[var(--second-text-color)]">
+                {setting.systemSubTitle}
+              </p>
+            ) : null}
+            {setting?.systemFooterInfo ? (
+              <div
+                className="rp-rich-text text-sm leading-relaxed text-[var(--second-text-color)]"
+                dangerouslySetInnerHTML={{ __html: setting.systemFooterInfo }}
+              />
+            ) : (
+              <p className="m-0 text-sm text-[var(--second-text-color)]">
+                {siteTitle} — Powered by ReactPress
+              </p>
+            )}
+          </div>
+          <div className="flex shrink-0 items-center gap-4">
+            <a
+              href="/rss"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="rss"
+              className="rp-footer-icon text-[var(--main-text-color)] hover:text-[var(--primary-color)]"
+            >
+              <svg viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor" aria-hidden>
+                <path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m-182.4 768C288 768 256 736 256 694.4s32-73.6 73.6-73.6 73.6 32 73.6 73.6-32 73.6-73.6 73.6z m185.6 0c0-144-115.2-259.2-259.2-259.2v-80c185.6 0 339.2 150.4 339.2 339.2h-80z m172.8 0c0-240-195.2-432-432-432V256c281.6 0 512 230.4 512 512h-80z" />
+              </svg>
+            </a>
+            {setting?.aboutUsGithubUrl?.trim() ? (
+              <a
+                href={setting.aboutUsGithubUrl.trim()}
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                aria-label="Github"
+                className="rp-footer-icon text-[var(--main-text-color)] hover:text-[var(--primary-color)]"
+              >
+                <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden>
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                </svg>
+              </a>
+            ) : null}
+          </div>
+        </div>
+        <div className="mt-6 text-center text-xs text-[var(--second-text-color)]">
+          <Link href="/" className="rp-inline-link rp-inline-link--muted">
+            {siteTitle}
+          </Link>
+          {' · '}
+          {`© ${new Date().getFullYear()}`}
+        </div>
+      </PageContainer>
+    </footer>
+  )
+}

package/components/layout/SiteHeader.tsx

@@ -0,0 +1,312 @@
+'use client'
+
+import PageContainer from '@/components/layout/PageContainer'
+import HeaderSearch from '@/components/layout/HeaderSearch'
+import LocaleSwitcher from '@/components/layout/LocaleSwitcher'
+import ThemeSwitch from '@/components/layout/ThemeSwitch'
+import UserAuth from '@/components/layout/UserAuth'
+import Link from '@/components/shared/Link'
+import ThemeImage from '@/components/shared/ThemeImage'
+import Logo from '@/components/shared/logo.svg'
+import { getDocumentScrollTop } from '@/lib/utils/scroll'
+import { getFirstLevelRoute, getIconByName } from '@/lib/utils/icons'
+import {
+  resolveImageUrl,
+  useSiteCatalog,
+  useSiteSetting,
+  useToggle,
+} from '@fecommunity/reactpress-toolkit/theme'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { usePathname } from 'next/navigation'
+import { useEffect, useMemo } from 'react'
+
+function isRemovedNavLink(item: { path?: string; locale?: string }) {
+  const path = (item.path || '').replace(/\/$/, '') || '/'
+  return path === '/nav' || item.locale === 'nav'
+}
+
+function HeaderLogo({ systemLogo }: { systemLogo?: string }) {
+  const raw = systemLogo?.trim() ?? ''
+  if (!raw) {
+    return <Logo className="relative z-[1] block h-12 w-auto max-w-[159px]" />
+  }
+  if (
+    raw.startsWith('http') ||
+    raw.startsWith('/') ||
+    /\.(svg|png|jpe?g|gif|webp)(\?.*)?$/i.test(raw)
+  ) {
+    return (
+      <ThemeImage
+        src={resolveImageUrl(raw, 'medium')}
+        alt="logo"
+        width={159}
+        height={48}
+        priority
+        className="relative z-[1] block h-12 w-auto max-w-[159px] object-contain"
+      />
+    )
+  }
+  if (raw.includes('<')) {
+    return <span dangerouslySetInnerHTML={{ __html: raw }} />
+  }
+  return <Logo className="relative z-[1] block h-12 w-auto max-w-[159px]" />
+}
+
+export default function SiteHeader() {
+  const { t } = useLocale()
+  const pathname = usePathname() ?? '/'
+  const setting = useSiteSetting()
+  const { pages, locales = [], siteConfig } = useSiteCatalog()
+  const navLinks = useMemo(() => siteConfig?.header?.navLinks ?? [], [siteConfig?.header?.navLinks])
+  const [affix, setAffix] = useToggle(false)
+  const [affixVisible, setAffixVisible] = useToggle(false)
+  const [visible, setVisible] = useToggle(false)
+  const mainPath = getFirstLevelRoute(pathname, locales)
+
+  useEffect(() => {
+    if (!visible) return
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = previousOverflow
+    }
+  }, [visible])
+
+  useEffect(() => {
+    let beforeY = 0
+    let ticking = false
+    const handler = () => {
+      if (ticking) return
+      ticking = true
+      window.requestAnimationFrame(() => {
+        const y = getDocumentScrollTop()
+        setAffix(y > 0)
+        setAffixVisible(beforeY >= y)
+        beforeY = y
+        ticking = false
+      })
+    }
+    document.addEventListener('scroll', handler, { passive: true })
+    return () => document.removeEventListener('scroll', handler)
+  }, [setAffix, setAffixVisible])
+
+  useEffect(() => {
+    const offset = affix && affixVisible ? '64px' : '0px'
+    document.documentElement.style.setProperty('--rp-header-offset', offset)
+    window.postMessage(
+      {
+        id: 'header-state',
+        isFixedVisible: affix && affixVisible,
+        height: '64px',
+        isFxied: affix,
+      },
+      location.origin
+    )
+    return () => {
+      document.documentElement.style.removeProperty('--rp-header-offset')
+    }
+  }, [affix, affixVisible])
+
+  const navItems = useMemo(() => {
+    const navMenu = navLinks
+      .filter((nav) => !isRemovedNavLink(nav))
+      .map((nav) => {
+        const Icon = getIconByName(nav.icon)
+        const labelText = nav.label || (nav.locale ? t(nav.locale) : nav.path)
+        return {
+          key: nav.path,
+          href: nav.path,
+          label: labelText,
+          icon: Icon ? <Icon size={20} /> : null,
+        }
+      })
+
+    const pageMenu = pages
+      .filter((menu) => !isRemovedNavLink({ path: menu.path, locale: menu.path }))
+      .map((menu, index) => {
+        const Icon = getIconByName(menu.path)
+        const href = menu.path?.startsWith('/') ? menu.path : `/${menu.path}/`
+        return {
+          key: `${index}-${menu.name}`,
+          href,
+          label: (menu.path ? t(menu.path) : '') || menu.name,
+          icon: Icon ? <Icon size={20} /> : null,
+        }
+      })
+
+    return navMenu.concat(pageMenu)
+  }, [navLinks, pages, t])
+
+  useEffect(() => {
+    setVisible(false)
+  }, [pathname, setVisible])
+
+  const desktopNavLinkClass = (isActive: boolean) =>
+    `rp-nav-link inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-lg px-3 text-sm no-underline ${
+      isActive
+        ? 'bg-[var(--bg-second)] font-medium text-[var(--primary-button-bg)] dark:text-[#ff6659]'
+        : 'text-[var(--second-text-color)] hover:bg-[var(--bg-second)] hover:text-[var(--main-text-color)]'
+    }`
+
+  const mobileNavLinkClass = (isActive: boolean) =>
+    `rp-nav-link inline-flex items-center gap-2 whitespace-nowrap no-underline ${
+      isActive
+        ? 'font-medium text-[var(--primary-color)] dark:text-[#ff6659]'
+        : 'text-[var(--main-text-color)] hover:text-[var(--primary-color)] dark:hover:text-[#ff6659]'
+    }`
+
+  const renderNavLinks = (mode: 'desktop' | 'mobile', onNavigate?: () => void) => (
+    <ul
+      className={
+        mode === 'desktop'
+          ? 'm-0 flex min-w-0 [scrollbar-width:none] list-none items-center justify-start gap-0.5 overflow-x-auto p-0 [-ms-overflow-style:none] lg:gap-1 [&::-webkit-scrollbar]:hidden'
+          : 'm-0 flex w-full list-none flex-col items-stretch gap-0 p-0'
+      }
+    >
+      {navItems.map((item, index) => {
+        const isActive = mainPath === item.key || pathname === item.href
+        const isLast = index === navItems.length - 1
+        return (
+          <li key={item.key} className={mode === 'mobile' ? 'w-full' : 'shrink-0'}>
+            <Link
+              href={item.href}
+              onClick={onNavigate}
+              className={
+                mode === 'desktop'
+                  ? desktopNavLinkClass(isActive)
+                  : `h-[52px] w-full border-b px-1 ${isLast ? 'border-transparent' : 'border-[var(--border-color)]'} ${mobileNavLinkClass(isActive)}`
+              }
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </Link>
+          </li>
+        )
+      })}
+    </ul>
+  )
+
+  const renderIconTools = (mode: 'desktop' | 'mobile') => (
+    <ul
+      className={
+        mode === 'desktop'
+          ? 'm-0 flex list-none items-center gap-0.5 p-0 xl:gap-1'
+          : 'm-0 flex list-none items-center justify-center gap-3 p-0'
+      }
+    >
+      <li className="flex h-10 w-10 items-center justify-center">
+        <HeaderSearch />
+      </li>
+      <li className="flex h-10 w-10 items-center justify-center">
+        <ThemeSwitch />
+      </li>
+      <li className="flex h-10 w-10 items-center justify-center">
+        <LocaleSwitcher />
+      </li>
+      {setting.aboutUsGithubUrl?.trim() ? (
+        <li className="flex h-10 w-10 items-center justify-center">
+          <a
+            href={setting.aboutUsGithubUrl.trim()}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            aria-label="Github"
+            className="rp-icon-btn inline-flex h-10 w-10 items-center justify-center rounded-full text-[var(--main-text-color)] no-underline hover:bg-[var(--bg-second)] hover:text-[var(--primary-color)]"
+          >
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden>
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+            </svg>
+          </a>
+        </li>
+      ) : null}
+    </ul>
+  )
+
+  const renderMobileToolArea = () => (
+    <div className="mt-3 flex w-full flex-col gap-4 border-t border-[var(--border-color)] pt-4">
+      {renderIconTools('mobile')}
+      <UserAuth layout="drawer" />
+    </div>
+  )
+
+  return (
+    <header className="relative z-[100] h-16 w-full bg-[var(--bg-box)]">
+      <a
+        href="#main-content"
+        className="absolute top-0 -left-[9999px] z-[200] rounded-lg bg-[var(--primary-color)] px-4 py-2 text-white no-underline focus:top-2 focus:left-4"
+      >
+        {t('skipToContent')}
+      </a>
+      <div
+        className={`rp-header-bar z-[100] h-16 w-full border-b border-[var(--border-color)] bg-[var(--bg-box)] ${
+          affix ? 'is-affix lg:fixed lg:top-0 lg:right-0 lg:left-0 lg:-translate-y-16' : 'relative'
+        } ${affix && affixVisible ? 'is-visible lg:!translate-y-0' : ''}`}
+      >
+        <PageContainer className="relative flex h-16 items-center gap-3 lg:gap-6">
+          <div className="rp-header-logo min-w-0 flex-1 shrink-0 text-[var(--main-text-color)] lg:flex-none">
+            <Link
+              href="/"
+              aria-label={setting.systemTitle || 'Home'}
+              className="rp-header-logo-link inline-flex h-12 max-h-12 max-w-[159px] items-center overflow-hidden rounded-sm"
+            >
+              <HeaderLogo systemLogo={setting.systemLogo as string | undefined} />
+            </Link>
+          </div>
+
+          <nav
+            className="hidden min-w-0 items-center overflow-hidden text-[var(--main-text-color)] lg:flex"
+            aria-label={setting.systemTitle || 'Navigation'}
+          >
+            {renderNavLinks('desktop')}
+          </nav>
+
+          <div className="hidden shrink-0 items-center gap-3 lg:ml-auto lg:flex xl:gap-4">
+            {renderIconTools('desktop')}
+            <UserAuth layout="header" />
+          </div>
+
+          <button
+            type="button"
+            className="relative z-[101] flex h-11 w-11 shrink-0 flex-col items-center justify-center border-0 bg-transparent p-0 lg:hidden"
+            onClick={() => setVisible(!visible)}
+            aria-label="Toggle mobile menu"
+            aria-expanded={visible}
+          >
+            <span
+              className={`block h-0.5 w-[22px] rounded bg-[var(--primary-color)] transition-all duration-300 ease-out ${
+                visible ? 'translate-y-2 rotate-45' : ''
+              }`}
+            />
+            <span
+              className={`my-1.5 block h-0.5 w-[22px] rounded bg-[var(--primary-color)] transition-all duration-300 ease-out ${
+                visible ? 'opacity-0' : ''
+              }`}
+            />
+            <span
+              className={`block h-0.5 w-[22px] rounded bg-[var(--primary-color)] transition-all duration-300 ease-out ${
+                visible ? '-translate-y-2 -rotate-45' : ''
+              }`}
+            />
+          </button>
+        </PageContainer>
+      </div>
+
+      {visible ? (
+        <>
+          <button
+            type="button"
+            className="rp-mobile-backdrop fixed top-16 right-0 bottom-0 left-0 z-[98] border-0 bg-black/45 lg:hidden"
+            aria-label="Close menu"
+            onClick={() => setVisible(false)}
+          />
+          <nav
+            className="rp-mobile-drawer fixed top-16 right-0 left-0 z-[99] flex max-h-[calc(100dvh-4rem)] flex-col overflow-y-auto border-b border-[var(--border-color)] bg-[var(--bg-box)] px-4 py-3 text-base text-[var(--main-text-color)] shadow-[var(--box-shadow)] lg:hidden"
+            aria-label={setting.systemTitle || 'Navigation'}
+          >
+            {renderNavLinks('mobile', () => setVisible(false))}
+            {renderMobileToolArea()}
+          </nav>
+        </>
+      ) : null}
+    </header>
+  )
+}

package/components/layout/SystemNotification.tsx

@@ -0,0 +1,176 @@
+'use client'
+
+import { siteNoticeDisplayLines, useSiteSetting } from '@fecommunity/reactpress-toolkit/theme'
+import { useEffect, useRef, useState } from 'react'
+
+import { BellIcon } from '@/lib/utils/icons'
+
+const NOTICE_INTERVAL_MS = 4500
+
+function noticePlainText(html: string) {
+  return html
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function NoticeContent({ html }: { html: string }) {
+  const plain = noticePlainText(html)
+
+  return (
+    <div
+      className="rp-notification-text"
+      title={plain || undefined}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
+
+function NoticeTicker({
+  notices,
+  activeIndex,
+  canRotate,
+  canAnimate,
+}: {
+  notices: string[]
+  activeIndex: number
+  canRotate: boolean
+  canAnimate: boolean
+}) {
+  const [leavingIndex, setLeavingIndex] = useState<number | null>(null)
+  const prevIndexRef = useRef(activeIndex)
+
+  useEffect(() => {
+    if (!canAnimate || prevIndexRef.current === activeIndex) return undefined
+
+    setLeavingIndex(prevIndexRef.current)
+    prevIndexRef.current = activeIndex
+
+    const timer = window.setTimeout(() => setLeavingIndex(null), 540)
+    return () => window.clearTimeout(timer)
+  }, [activeIndex, canAnimate])
+
+  useEffect(() => {
+    prevIndexRef.current = 0
+    setLeavingIndex(null)
+  }, [notices])
+
+  const content = notices[activeIndex] ?? notices[0]
+
+  if (!canRotate) {
+    return <NoticeContent html={content} />
+  }
+
+  if (!canAnimate) {
+    return <NoticeContent html={content} />
+  }
+
+  return (
+    <div className="rp-notification-ticker-viewport">
+      {leavingIndex !== null ? (
+        <div
+          key={`leave-${leavingIndex}-${activeIndex}`}
+          className="rp-notification-ticker-item is-leaving"
+          aria-hidden
+        >
+          <NoticeContent html={notices[leavingIndex]} />
+        </div>
+      ) : null}
+      <div key={`enter-${activeIndex}`} className="rp-notification-ticker-item is-entering">
+        <NoticeContent html={content} />
+      </div>
+    </div>
+  )
+}
+
+export default function SystemNotification() {
+  const setting = useSiteSetting()
+  const notices = siteNoticeDisplayLines(setting?.systemNoticeInfo)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [paused, setPaused] = useState(false)
+  const [bellPulse, setBellPulse] = useState(false)
+  const [phase, setPhase] = useState<'visible' | 'dismissing' | 'hidden'>('visible')
+  const [reduceMotion, setReduceMotion] = useState(false)
+
+  const canRotate = notices.length > 1
+  const canAnimate = canRotate && !reduceMotion
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const sync = () => setReduceMotion(mq.matches)
+    sync()
+    mq.addEventListener('change', sync)
+    return () => mq.removeEventListener('change', sync)
+  }, [])
+
+  useEffect(() => {
+    setActiveIndex(0)
+  }, [notices])
+
+  useEffect(() => {
+    if (!canRotate || paused || phase !== 'visible') return undefined
+
+    const timer = window.setInterval(() => {
+      setActiveIndex((current) => (current + 1) % notices.length)
+      setBellPulse(true)
+    }, NOTICE_INTERVAL_MS)
+
+    return () => window.clearInterval(timer)
+  }, [canRotate, paused, phase, notices.length])
+
+  useEffect(() => {
+    if (!bellPulse) return undefined
+    const timer = window.setTimeout(() => setBellPulse(false), 560)
+    return () => window.clearTimeout(timer)
+  }, [bellPulse])
+
+  const handleDismiss = () => {
+    setPhase('dismissing')
+    window.setTimeout(() => setPhase('hidden'), 320)
+  }
+
+  if (!notices.length || phase === 'hidden') return null
+
+  return (
+    <div
+      className={`rp-notification-bar mt-4 flex items-center gap-3 overflow-hidden rounded-xl border border-[color-mix(in_srgb,var(--border-color)_70%,transparent)] bg-[color-mix(in_srgb,var(--bg-box)_92%,transparent)] px-4 py-3 text-sm text-[var(--main-text-color)] shadow-[var(--box-shadow)] backdrop-blur-sm ${
+        phase === 'dismissing' ? 'is-dismissing' : ''
+      }`}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocusCapture={() => setPaused(true)}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setPaused(false)
+        }
+      }}
+      role="status"
+      aria-live="polite"
+    >
+      <span
+        className={`rp-notification-icon shrink-0 text-[var(--primary-color)] ${bellPulse ? 'is-active' : ''}`}
+        aria-hidden
+      >
+        <BellIcon size={16} />
+      </span>
+
+      <div className="min-w-0 flex-1 [&_a]:text-inherit [&_a]:no-underline [&_a:hover]:text-[var(--primary-color)]">
+        <NoticeTicker
+          notices={notices}
+          activeIndex={activeIndex}
+          canRotate={canRotate}
+          canAnimate={canAnimate}
+        />
+      </div>
+
+      <button
+        type="button"
+        aria-label="Close notification"
+        className="rp-notification-close shrink-0 text-[var(--second-text-color)] hover:text-[var(--primary-color)]"
+        onClick={handleDismiss}
+      >
+        ×
+      </button>
+    </div>
+  )
+}

package/components/layout/ThemeSwitch.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { ThemeToggleButton, TOOLBAR_ICON_SIZE, useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useColorMode } from '@fecommunity/reactpress-toolkit/theme'
+
+export default function ThemeSwitch() {
+  const { t } = useLocale()
+  const { colorMode: theme = 'light', changeColorMode: changeTheme } = useColorMode()
+  const dark = theme === 'dark'
+
+  return (
+    <ThemeToggleButton
+      isDark={dark}
+      onToggle={() => changeTheme?.(dark ? 'light' : 'dark')}
+      size={TOOLBAR_ICON_SIZE}
+      aria-label={t('theme.toggle')}
+    />
+  )
+}