From 0c614960bf05c4cb179c343a9d41a85bf38a3adc Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Fri, 24 Jul 2026 15:21:18 +0700 Subject: [PATCH 01/22] feat: add localized user guide labels --- src/i18n/userGuide.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/i18n/userGuide.ts diff --git a/src/i18n/userGuide.ts b/src/i18n/userGuide.ts new file mode 100644 index 0000000..b81b5fa --- /dev/null +++ b/src/i18n/userGuide.ts @@ -0,0 +1,29 @@ +const USER_GUIDE_LABELS: Record = { + en: "User guide", + de: "Benutzerhandbuch", + es: "Guía del usuario", + fr: "Guide d’utilisation", + hi: "उपयोगकर्ता मार्गदर्शिका", + it: "Guida utente", + ja: "ユーザーガイド", + ko: "사용자 가이드", + pl: "Podręcznik użytkownika", + pt_br: "Guia do usuário", + ru: "Руководство пользователя", + tr: "Kullanım kılavuzu", + vi: "Hướng dẫn sử dụng", + zh_cn: "用户指南", +}; + +/** Resolves the user-guide label for a browser UI locale. */ +export function getUserGuideLabel(locale?: string): string { + const browserLocale = locale ?? browser.i18n.getUILanguage?.() ?? "en"; + const normalizedLocale = browserLocale.toLowerCase().replaceAll("-", "_"); + const baseLocale = normalizedLocale.split("_")[0]; + + return ( + USER_GUIDE_LABELS[normalizedLocale] ?? + USER_GUIDE_LABELS[baseLocale] ?? + USER_GUIDE_LABELS.en + ); +} From 96789a6e8cacee21d4f2b177e05c202c4bb3cfab Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Fri, 24 Jul 2026 15:21:31 +0700 Subject: [PATCH 02/22] feat: add tracked user guide link --- src/utils/externalLinks.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/utils/externalLinks.ts diff --git a/src/utils/externalLinks.ts b/src/utils/externalLinks.ts new file mode 100644 index 0000000..a70473a --- /dev/null +++ b/src/utils/externalLinks.ts @@ -0,0 +1,7 @@ +export const USER_GUIDE_URL = + "https://ext.eplus.dev/gmail-alias-toolkit/introduction?utm_source=gmail-alias-toolkit&utm_medium=extension&utm_campaign=user-guide"; + +/** Opens the public Gmail Alias Toolkit guide in a new browser tab. */ +export async function openUserGuide(): Promise { + await browser.tabs.create({ url: USER_GUIDE_URL }); +} From e156a8a1fe41984ee994f0b7034bced329eb015a Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Fri, 24 Jul 2026 15:22:10 +0700 Subject: [PATCH 03/22] feat: add localized user guide action to popup header --- src/components/alias/PopupHeader.tsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/alias/PopupHeader.tsx b/src/components/alias/PopupHeader.tsx index 1a7ab46..dbb8cd8 100644 --- a/src/components/alias/PopupHeader.tsx +++ b/src/components/alias/PopupHeader.tsx @@ -1,8 +1,10 @@ // skipcq: JS-0415 - Header markup is a compact visual composition with no nested business logic. -import { Settings, Sparkles } from "lucide-react"; +import { CircleHelp, Settings, Sparkles } from "lucide-react"; import { Button } from "src/components/motion/button/base"; import { Tooltip } from "src/components/motion/tooltip"; import { ThemeToggle } from "src/components/motion/theme-toggle"; +import { getUserGuideLabel } from "src/i18n/userGuide"; +import { openUserGuide } from "src/utils/externalLinks"; import { t } from "../../../lib/i18n"; export interface PopupHeaderProps { @@ -37,12 +39,19 @@ interface HeaderActionsProps { onThemeChange: (theme: "light" | "dark") => void; } -/** Header actions for theme switching and opening settings. */ +/** Opens the public user guide without blocking the popup event handler. */ +function handleOpenUserGuide() { + void openUserGuide(); +} + +/** Header actions for theme switching, help, and opening settings. */ function HeaderActions({ isDark, onOpenSettings, onThemeChange, }: HeaderActionsProps) { + const userGuideLabel = getUserGuideLabel(); + return (
+ + +