add buttons that communicate with the browser extension (Athou/commafeed-browser-extension#1)

commafeed-client/src/components/ActionButtton.tsx

@@ -7,9 +7,10 @@ import { forwardRef, MouseEventHandler, ReactNode } from "react"
 interface ActionButtonProps {
     className?: string
     icon?: ReactNode
-    label?: ReactNode
+    label: ReactNode
     onClick?: MouseEventHandler
     variant?: ActionIconProps["variant"] & ButtonProps["variant"]
+    hideLabelOnDesktop?: boolean
     showLabelOnMobile?: boolean
 }
 
@@ -20,7 +21,7 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
     const theme = useMantineTheme()
     const variant = props.variant ?? "subtle"
     const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
-    const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
+    const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
     return iconOnly ? (
         <Tooltip label={props.label} openDelay={500}>
             <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>

commafeed-client/src/components/header/Header.tsx

@@ -7,8 +7,9 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { ActionButton } from "components/ActionButtton"
 import { ButtonToolbar } from "components/ButtonToolbar"
 import { Loader } from "components/Loader"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useEffect } from "react"
-import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser, TbX } from "react-icons/tb"
+import { TbArrowDown, TbArrowUp, TbExternalLink, TbEye, TbEyeOff, TbRefresh, TbSearch, TbSettings, TbUser, TbX } from "react-icons/tb"
 import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
 
@@ -22,6 +23,7 @@ export function Header() {
     const settings = useAppSelector(state => state.user.settings)
     const profile = useAppSelector(state => state.user.profile)
     const searchFromStore = useAppSelector(state => state.entries.search)
+    const { isBrowserExtension, openSettingsPage, openAppInNewTab } = useBrowserExtension()
     const dispatch = useAppDispatch()
 
     const searchForm = useForm<{ search: string }>({
@@ -87,6 +89,23 @@ export function Header() {
                 <HeaderDivider />
 
                 <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
+
+                {isBrowserExtension && (
+                    <>
+                        <HeaderDivider />
+
+                        <ActionButton
+                            icon={<TbSettings size={iconSize} />}
+                            label={<Trans>Extension options</Trans>}
+                            onClick={() => openSettingsPage()}
+                        />
+                        <ActionButton
+                            icon={<TbExternalLink size={iconSize} />}
+                            label={<Trans>Open CommaFeed</Trans>}
+                            onClick={() => openAppInNewTab()}
+                        />
+                    </>
+                )}
             </ButtonToolbar>
         </Center>
     )

commafeed-client/src/hooks/useBrowserExtension.ts

@@ -0,0 +1,9 @@
+export const useBrowserExtension = () => {
+    // when not in an iframe, window.parent is a reference to window
+    const isBrowserExtension = window.parent !== window
+
+    const openSettingsPage = () => window.parent.postMessage("open-settings-page", "*")
+    const openAppInNewTab = () => window.parent.postMessage("open-app-in-new-tab", "*")
+
+    return { isBrowserExtension, openSettingsPage, openAppInNewTab }
+}

commafeed-client/src/locales/ar/messages.po

@@ -308,6 +308,11 @@ msgstr "موسع"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "قم بتصدير اشتراكاتك وفئاتك كملف OPML يمكن استيراده في خدمات قراءة الأعلاف الأخرى"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "اسم الخلاصة"
@@ -540,6 +545,10 @@ msgstr "الأقدم أولا"
 msgid "Oops!"
 msgstr "اوووه!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "فتح الإدخال الحالي في علامة تبويب جديدة"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "التبديل إلى النسق الداكن"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "قم بالتبديل إلى النسق الفاتح"
 

commafeed-client/src/locales/ca/messages.po

@@ -308,6 +308,11 @@ msgstr "Ampliat"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "exporteu les vostres subscripcions i categories com a fitxer OPML que es pot importar a altres serveis de lectura de feeds"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nom del canal"
@@ -540,6 +545,10 @@ msgstr "el més vell primer"
 msgid "Oops!"
 msgstr "Vaja!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Obre l'entrada actual en una pestanya nova"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Canvia al tema fosc"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Canvia al tema clar"
 

commafeed-client/src/locales/cs/messages.po

@@ -308,6 +308,11 @@ msgstr "Rozbaleno"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exportujte svá předplatná a kategorie jako soubor OPML, který lze importovat do jiných služeb čtení kanálů"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Název zdroje"
@@ -540,6 +545,10 @@ msgstr "Nejdříve nejstarší"
 msgid "Oops!"
 msgstr "Jejda!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Otevřete aktuální položku na nové kartě"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Přepněte na tmavý motiv"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Přepněte na světlé téma"
 

commafeed-client/src/locales/cy/messages.po

@@ -308,6 +308,11 @@ msgstr "Ehangu"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Allforio eich tanysgrifiadau a'ch categorïau fel ffeil OPML y gellir ei mewnforio i wasanaethau darllen porthiant eraill"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Enw porthiant"
@@ -540,6 +545,10 @@ msgstr "Hynaf yn gyntaf"
 msgid "Oops!"
 msgstr "Wps!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Agorwch y cofnod cyfredol mewn tab newydd"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Newid i thema dywyll"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Newid i thema golau"
 

commafeed-client/src/locales/da/messages.po

@@ -308,6 +308,11 @@ msgstr "Udvidet"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Eksporter dine abonnementer og kategorier som en OPML-fil, der kan importeres i andre feed-læsningstjenester"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Feednavn"
@@ -540,6 +545,10 @@ msgstr "Ældst først"
 msgid "Oops!"
 msgstr "Hovsa!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Åbn den aktuelle post i en ny fane"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Skift til mørkt tema"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Skift til lystema"
 

commafeed-client/src/locales/de/messages.po

@@ -308,6 +308,11 @@ msgstr "Erweitert"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exportieren Sie Ihre Abonnements und Kategorien als OPML-Datei, die in andere Feed-Lesedienste importiert werden kann"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Feedname"
@@ -540,6 +545,10 @@ msgstr "Älteste zuerst"
 msgid "Oops!"
 msgstr "Ups!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Aktuellen Eintrag in neuem Tab öffnen"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Zum dunklen Design wechseln"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Wechseln Sie zum Lichtdesign"
 

commafeed-client/src/locales/en/messages.po

@@ -308,6 +308,11 @@ msgstr "Expanded"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr "Extension options"
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Feed name"
@@ -540,6 +545,10 @@ msgstr "Oldest first"
 msgid "Oops!"
 msgstr "Oops!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr "Open CommaFeed"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Open current entry in a new tab"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr "Swipe header to the right"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Switch to dark theme"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Switch to light theme"
 

commafeed-client/src/locales/es/messages.po

@@ -308,6 +308,11 @@ msgstr "Expandido"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exporte sus suscripciones y categorías como un archivo OPML que se puede importar en otros servicios de lectura de feeds"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nombre de alimentación"
@@ -540,6 +545,10 @@ msgstr "más antigua primero"
 msgid "Oops!"
 msgstr "¡Ups!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Abrir la entrada actual en una nueva pestaña"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Cambiar a tema oscuro"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Cambiar a tema claro"
 

commafeed-client/src/locales/fa/messages.po

@@ -308,6 +308,11 @@ msgstr "گسترش یافت"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "اشتراک ها و دسته های خود را به عنوان یک فایل OPML صادر کنید که می تواند در سایر خدمات خواندن فید وارد شود"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "نام فید"
@@ -540,6 +545,10 @@ msgstr "قدیمی ترین اول"
 msgid "Oops!"
 msgstr "اوه!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "ورودی فعلی را در یک برگه جدید باز کنید"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "تغییر به تم تیره"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "روی زمینه روشن"
 

commafeed-client/src/locales/fi/messages.po

@@ -308,6 +308,11 @@ msgstr "Laajennettu"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Vie tilauksesi ja luokat OPML-tiedostona, joka voidaan tuoda muihin syötteiden lukupalveluihin"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Syötteen nimi"
@@ -540,6 +545,10 @@ msgstr "Vanhin ensin"
 msgid "Oops!"
 msgstr "Hups!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Avaa nykyinen merkintä uudessa välilehdessä"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Vaihda tummaan teemaan"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Vaihda vaaleaan teemaan"
 

commafeed-client/src/locales/fr/messages.po

@@ -308,6 +308,11 @@ msgstr "Vue étendue"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exporter vos abonnements et catégories en tant que fichier OPML qui peut être importé dans d'autres services de lecture de flux"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nom du flux"
@@ -540,6 +545,10 @@ msgstr "Du plus ancien au plus récent"
 msgid "Oops!"
 msgstr "Oups !"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Ouvrir l'entrée actuelle dans un nouvel onglet"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr "Faire glisser le titre vers la droite"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Activer le mode sombre"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Activer le mode clair"
 

commafeed-client/src/locales/gl/messages.po

@@ -308,6 +308,11 @@ msgstr "Ampliado"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exporta as túas subscricións e categorías como ficheiro OPML que se pode importar noutros servizos de lectura de feeds"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nome do feed"
@@ -540,6 +545,10 @@ msgstr "O máis vello primeiro"
 msgid "Oops!"
 msgstr "Vaia!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Abrir a entrada actual nunha nova pestana"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Cambiar ao tema escuro"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Cambiar ao tema claro"
 

commafeed-client/src/locales/hu/messages.po

@@ -308,6 +308,11 @@ msgstr "Kiterjesztve"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exportálja előfizetéseit és kategóriáit OPML-fájlként, amely importálható más feedolvasó szolgáltatásokba"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Hírcsatorna neve"
@@ -540,6 +545,10 @@ msgstr "A legidősebb első"
 msgid "Oops!"
 msgstr "Hoppá!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Az aktuális bejegyzés megnyitása új lapon"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Váltás sötét témára"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Váltás világos témára"
 

commafeed-client/src/locales/id/messages.po

@@ -308,6 +308,11 @@ msgstr "Diperluas"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Ekspor langganan dan kategori Anda sebagai file OPML yang dapat diimpor ke layanan membaca feed lainnya"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nama umpan"
@@ -540,6 +545,10 @@ msgstr "Tertua dulu"
 msgid "Oops!"
 msgstr "Ups!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Buka entri saat ini di tab baru"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Beralih ke tema gelap"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Beralih ke tema terang"
 

commafeed-client/src/locales/it/messages.po

@@ -308,6 +308,11 @@ msgstr "Espanso"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Esporta le tue iscrizioni e categorie come file OPML che può essere importato in altri servizi di lettura feed"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nome del feed"
@@ -540,6 +545,10 @@ msgstr "Il più vecchio prima"
 msgid "Oops!"
 msgstr "Ops!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Apri la voce corrente in una nuova scheda"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Passa al tema scuro"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Passa al tema della luce"
 

commafeed-client/src/locales/ja/messages.po

@@ -308,6 +308,11 @@ msgstr "拡張"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "サブスクリプションとカテゴリを、他のフィード読み取りサービスにインポートできる OPML ファイルとしてエクスポートします"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "フィード名"
@@ -540,6 +545,10 @@ msgstr "古い順"
 msgid "Oops!"
 msgstr "おっと！"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "現在のエントリを新しいタブで開く"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "ダークテーマに切り替え"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "ライトテーマに切り替え"
 

commafeed-client/src/locales/ko/messages.po

@@ -308,6 +308,11 @@ msgstr "확장"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "구독 및 카테고리를 다른 피드 읽기 서비스에서 가져올 수 있는 OPML 파일로 내보내기"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "피드 이름"
@@ -540,6 +545,10 @@ msgstr "가장 오래된 것부터"
 msgid "Oops!"
 msgstr "앗!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "새 탭에서 현재 항목 열기"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "어두운 테마로 전환"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "밝은 테마로 전환"
 

commafeed-client/src/locales/ms/messages.po

@@ -308,6 +308,11 @@ msgstr "Dikembangkan"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Eksport langganan dan kategori anda sebagai fail OPML yang boleh diimport dalam perkhidmatan membaca suapan lain"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nama suapan"
@@ -540,6 +545,10 @@ msgstr "Tertua dahulu"
 msgid "Oops!"
 msgstr "Aduh!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Buka entri semasa dalam tab baharu"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Tukar kepada tema gelap"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Tukar kepada tema cahaya"
 

commafeed-client/src/locales/nb/messages.po

@@ -308,6 +308,11 @@ msgstr "Utvidet"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Eksporter abonnementene og kategoriene dine som en OPML-fil som kan importeres i andre feedlesetjenester"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Feednavn"
@@ -540,6 +545,10 @@ msgstr "Eldste først"
 msgid "Oops!"
 msgstr "Beklager!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Åpne gjeldende oppføring i en ny fane"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Bytt til mørkt tema"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Bytt til lystema"
 

commafeed-client/src/locales/nl/messages.po

@@ -308,6 +308,11 @@ msgstr "Uitgebreid"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exporteer uw abonnementen en categorieën als een OPML-bestand dat kan worden geïmporteerd in andere feedleesservices"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Feednaam"
@@ -540,6 +545,10 @@ msgstr "Oudste eerst"
 msgid "Oops!"
 msgstr "Oeps!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Huidige invoer openen in een nieuw tabblad"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Overschakelen naar donker thema"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Overschakelen naar lichtthema"
 

commafeed-client/src/locales/nn/messages.po

@@ -308,6 +308,11 @@ msgstr "Utvidet"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Eksporter abonnementene og kategoriene dine som en OPML-fil som kan importeres i andre feedlesetjenester"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Feednavn"
@@ -540,6 +545,10 @@ msgstr "Eldste først"
 msgid "Oops!"
 msgstr "Beklager!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Åpne gjeldende oppføring i en ny fane"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Bytt til mørkt tema"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Bytt til lystema"
 

commafeed-client/src/locales/pl/messages.po

@@ -308,6 +308,11 @@ msgstr "Rozszerzony"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Eksportuj swoje subskrypcje i kategorie jako plik OPML, który można zaimportować do innych usług odczytu kanałów"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "nazwa kanału"
@@ -540,6 +545,10 @@ msgstr "Najstarsze jako pierwsze"
 msgid "Oops!"
 msgstr "Ups!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Otwórz bieżący wpis w nowej karcie"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Przełącz na ciemny motyw"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Przełącz na jasny motyw"
 

commafeed-client/src/locales/pt/messages.po

@@ -308,6 +308,11 @@ msgstr "Expandido"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exporte suas inscrições e categorias como um arquivo OPML que pode ser importado em outros serviços de leitura de feed"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Nome do feed"
@@ -540,6 +545,10 @@ msgstr "Mais antigo primeiro"
 msgid "Oops!"
 msgstr "Opa!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Abrir a entrada atual em uma nova aba"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Mudar para tema escuro"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Mudar para tema claro"
 

commafeed-client/src/locales/ru/messages.po

@@ -308,6 +308,11 @@ msgstr "Расширенный"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Экспортируйте свои подписки и категории в виде файла OPML, который можно импортировать в другие службы чтения каналов."
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Имя фида"
@@ -540,6 +545,10 @@ msgstr "Сначала самые старые"
 msgid "Oops!"
 msgstr "Ой!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Открыть текущую запись в новой вкладке"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Переключиться на темную тему"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Переключиться на светлую тему"
 

commafeed-client/src/locales/sk/messages.po

@@ -308,6 +308,11 @@ msgstr "Rozšírené"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exportujte svoje odbery a kategórie ako súbor OPML, ktorý je možné importovať do iných služieb na čítanie informačných kanálov"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Názov informačného kanála"
@@ -540,6 +545,10 @@ msgstr "Najprv najstarší"
 msgid "Oops!"
 msgstr "Ojoj!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Otvorte aktuálny záznam na novej karte"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Prepnúť na tmavú tému"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Prepnite na svetlú tému"
 

commafeed-client/src/locales/sv/messages.po

@@ -308,6 +308,11 @@ msgstr "Utökad"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Exportera dina prenumerationer och kategorier som en OPML-fil som kan importeras i andra flödesläsningstjänster"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Flödesnamn"
@@ -540,6 +545,10 @@ msgstr "Äldst först"
 msgid "Oops!"
 msgstr "Hoppsan!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Öppna aktuell post i en ny flik"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Byt till mörkt tema"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Byt till ljustema"
 

commafeed-client/src/locales/tr/messages.po

@@ -308,6 +308,11 @@ msgstr "Genişletilmiş"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "Aboneliklerinizi ve kategorilerinizi diğer besleme okuma hizmetlerinde içe aktarılabilen bir OPML dosyası olarak dışa aktarın"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "Yayın adı"
@@ -540,6 +545,10 @@ msgstr "Önce en eski"
 msgid "Oops!"
 msgstr "Hata!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "Geçerli girişi yeni bir sekmede aç"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Karanlık temaya geç"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Açık temaya geç"
 

commafeed-client/src/locales/zh/messages.po

@@ -308,6 +308,11 @@ msgstr "展开"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "将您的订阅和类别导出为 OPML 文件，可以在其他提要阅读服务中导入"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
 msgstr "提要名称"
@@ -540,6 +545,10 @@ msgstr "最早的优先"
 msgid "Oops!"
 msgstr "哎呀！"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "在新选项卡中打开当前条目"
@@ -759,10 +768,12 @@ msgid "Swipe header to the right"
 msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "切换到深色主题"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "切换到浅色主题"
 

commafeed-client/src/pages/WelcomePage.tsx

@@ -9,10 +9,10 @@ import welcome_page_dark from "assets/welcome_page_dark.png"
 import welcome_page_light from "assets/welcome_page_light.png"
 import { ActionButton } from "components/ActionButtton"
 import { ButtonToolbar } from "components/ButtonToolbar"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useAsyncCallback } from "react-async-hook"
-import { SiGithub, TbKey, TbUserPlus } from "react-icons/all"
-import { SiTwitter } from "react-icons/si"
-import { TbClock, TbMoon, TbSun } from "react-icons/tb"
+import { SiGithub, SiTwitter } from "react-icons/si"
+import { TbClock, TbKey, TbMoon, TbSettings, TbSun, TbUserPlus } from "react-icons/tb"
 import { PageTitle } from "./PageTitle"
 
 export function WelcomePage() {
@@ -63,8 +63,9 @@ function Buttons() {
     const iconSize = 18
     const serverInfos = useAppSelector(state => state.server.serverInfos)
     const { colorScheme, toggleColorScheme } = useMantineColorScheme()
-
+    const { isBrowserExtension, openSettingsPage } = useBrowserExtension()
     const dispatch = useAppDispatch()
+    const dark = colorScheme === "dark"
 
     const login = useAsyncCallback(client.user.login, {
         onSuccess: () => {
@@ -101,9 +102,20 @@ function Buttons() {
             )}
 
             <ActionButton
+                label={dark ? <Trans>Switch to light theme</Trans> : <Trans>Switch to dark theme</Trans>}
                 icon={colorScheme === "dark" ? <TbSun size={18} /> : <TbMoon size={iconSize} />}
                 onClick={() => toggleColorScheme()}
+                hideLabelOnDesktop
             />
+
+            {isBrowserExtension && (
+                <ActionButton
+                    label={<Trans>Extension options</Trans>}
+                    icon={<TbSettings size={iconSize} />}
+                    onClick={() => openSettingsPage()}
+                    hideLabelOnDesktop
+                />
+            )}
         </ButtonToolbar>
     )
 }