feat: add Brazilian Portuguese localization foundation

package.json

@@ -49,11 +49,13 @@
     "dockview-react": "8.2.0",
     "emoji-mart": "5.6.0",
     "flexlayout-react": "0.10.8",
+    "i18next": "^26.4.2",
     "lucide-react": "1.34.0",
     "mdast-util-from-markdown": "2.0.3",
     "nostr-tools": "2.25.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",
+    "react-i18next": "^17.0.13",
     "react-markdown": "10.1.0",
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.1",

src/app/LanguageSettings.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import {
+  appLocales,
+  currentLocale,
+  setAppLocale,
+  type AppLocale,
+} from "../features/localization/service";
+
+export function LanguageSettings() {
+  const { t } = useTranslation();
+  return (
+    <section aria-labelledby="language-settings-title">
+      <h2
+        id="language-settings-title"
+        className="mt-0 mb-3 text-lg font-medium"
+      >
+        {t("language.title")}
+      </h2>
+      <div className="ui-card p-5 sm:p-6">
+        <label
+          htmlFor="application-language"
+          className="mb-2 block text-base font-medium"
+        >
+          {t("language.label")}
+        </label>
+        <p id="language-description" className="mt-0 mb-4 text-sm text-muted">
+          {t("language.description")}
+        </p>
+        <select
+          id="application-language"
+          aria-describedby="language-description"
+          value={currentLocale()}
+          onChange={(event) =>
+            void setAppLocale(event.currentTarget.value as AppLocale)
+          }
+          className="w-full max-w-sm rounded-xl border border-line bg-surface px-3 py-2 text-ink"
+        >
+          {appLocales.map((locale) => (
+            <option key={locale} value={locale}>
+              {locale === "pt-BR"
+                ? t("language.portugueseBrazil")
+                : t("language.english")}
+            </option>
+          ))}
+        </select>
+      </div>
+    </section>
+  );
+}

src/app/Settings.tsx

@@ -1,21 +1,31 @@
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { RecoveryScreen } from "./RecoveryScreen";
-import { Blocks, Settings2, UserRound, Palette, Bell } from "lucide-react";
+import {
+  Blocks,
+  Settings2,
+  UserRound,
+  Palette,
+  Bell,
+  Languages,
+} from "lucide-react";
 import type { PluginManager } from "../plugins/manager";
 import type { Communities } from "../features/communities/service";
 import { PluginImport } from "./PluginImport";
 import { ProfileSettings } from "./ProfileSettings";
 
 import type { Appearance } from "../shared/theme/service";
 import { AppearanceSettings } from "./AppearanceSettings";
+import { LanguageSettings } from "./LanguageSettings";
+import { useTranslation } from "react-i18next";
 import { NotificationSettings } from "./NotificationSettings";
 import type { NotificationsService } from "../features/notifications/service";
 
 const sections = [
-  { id: "profile", label: "Profile", icon: UserRound },
-  { id: "plugins", label: "Plugins", icon: Blocks },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "notifications", label: "Notifications", icon: Bell },
+  { id: "profile", label: "settings.profile", icon: UserRound },
+  { id: "plugins", label: "settings.plugins", icon: Blocks },
+  { id: "appearance", label: "settings.appearance", icon: Palette },
+  { id: "notifications", label: "settings.notifications", icon: Bell },
+  { id: "language", label: "settings.language", icon: Languages },
 ] as const;
 
 export function Settings({
@@ -35,6 +45,7 @@ export function Settings({
     | undefined;
   onSection?: (section: string) => void;
 }) {
+  const { t } = useTranslation();
   const [selected, setSelected] =
     useState<(typeof sections)[number]["id"]>("profile");
   const requestedSection =
@@ -68,13 +79,13 @@ export function Settings({
             id="settings-title"
             className="m-0 text-3xl font-medium tracking-tight"
           >
-            Settings
+            {t("settings.title")}
           </h1>
         </div>
       </div>
       <div className="grid gap-6 @min-[36rem]:grid-cols-[10rem_minmax(0,1fr)]">
         <nav
-          aria-label="Settings sections"
+          aria-label={t("settings.sections")}
           className="flex flex-wrap gap-1 self-start rounded-2xl border border-shell-edge/80 bg-surface/60 p-2 @min-[36rem]:flex-col"
         >
           {sections.map(({ id, label, icon: Icon }) => (
@@ -90,7 +101,7 @@ export function Settings({
               }}
             >
               <Icon aria-hidden="true" size={18} strokeWidth={1.6} />
-              {label}
+              {t(label)}
             </button>
           ))}
         </nav>
@@ -104,6 +115,9 @@ export function Settings({
           <div hidden={selected !== "profile"}>
             <ProfileSettings communities={communities} />
           </div>
+          <div hidden={selected !== "language"}>
+            <LanguageSettings />
+          </div>
           <div hidden={selected !== "plugins"}>
             <section aria-labelledby="plugin-settings-title">
               <h2

src/app/navigation.ts

@@ -77,7 +77,7 @@ export function useAppNavigation(services: AppServices) {
   if (
     target.kind === "settings" &&
     target.section &&
-    !["profile", "plugins", "appearance", "notifications"].includes(
+    !["profile", "plugins", "appearance", "notifications", "language"].includes(
       target.section,
     )
   )

src/app/shell/AppShell.tsx

@@ -8,6 +8,8 @@ import { ProfileButton } from "./ProfileButton";
 import { PageSearch } from "./PageSearch";
 import { orderPages, pagePresentation } from "./presentation";
 import { PanelFrame } from "../../features/panels/PanelFrame";
+import { useTranslation } from "react-i18next";
+import { localizedPageLabel } from "../../features/localization/service";
 
 const macDesktop = isTauri() && /Mac/i.test(navigator.platform);
 
@@ -36,6 +38,7 @@ export function AppShell({
   companion?: ReactNode;
   children: ReactNode;
 }) {
+  const { t } = useTranslation();
   return (
     <div
       data-shell-tone={tone}
@@ -51,7 +54,7 @@ export function AppShell({
         }}
         className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:rounded-lg focus:bg-surface focus:p-3"
       >
-        Skip to content
+        {t("shell.skipToContent")}
       </a>
       <header
         data-tauri-drag-region
@@ -64,15 +67,15 @@ export function AppShell({
             onSelect={onCommunitySelect}
           />
         </div>
-        <nav aria-label="Pages" className="shell-pages">
+        <nav aria-label={t("shell.pages")} className="shell-pages">
           <button
             type="button"
             className="shell-tab"
             aria-current={selected === "home" ? "page" : undefined}
             onClick={() => onSelect("home")}
           >
             <House aria-hidden="true" size={15} strokeWidth={1.7} />
-            Home
+            {t("shell.home")}
           </button>
           {orderPages(pages).map((page) => {
             const { label, icon: Icon } = pagePresentation(page);
@@ -85,7 +88,7 @@ export function AppShell({
                 onClick={() => onSelect(page.key)}
               >
                 <Icon aria-hidden="true" size={15} strokeWidth={1.7} />
-                {label}
+                {localizedPageLabel(page.key, label, t)}
               </button>
             );
           })}

src/app/shell/Home.tsx

@@ -1,6 +1,8 @@
 import { ArrowUpRight, Settings2 } from "lucide-react";
 import type { RegisteredPage } from "../../features/pages/service";
 import { orderPages, pagePresentation } from "./presentation";
+import { useTranslation } from "react-i18next";
+import { localizedPageLabel } from "../../features/localization/service";
 
 export function Home({
   pages,
@@ -9,16 +11,17 @@ export function Home({
   pages: readonly RegisteredPage[];
   onSelect: (key: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <section className="mx-auto max-w-2xl pt-8 sm:pt-16">
       <img
         src="/app-icon.png"
         alt="Buzz"
         className="mb-6 size-16 rounded-2xl"
       />
-      <p className="mb-2 text-sm text-muted">A little space for everything.</p>
+      <p className="mb-2 text-sm text-muted">{t("home.tagline")}</p>
       <h1 className="mb-8 text-4xl font-medium tracking-tight sm:text-5xl">
-        Make yourself at home.
+        {t("home.title")}
       </h1>
       <div className="overflow-hidden rounded-3xl border border-shell-edge/70 bg-surface/95 shadow-surface">
         {orderPages(pages).map((page) => {
@@ -33,7 +36,9 @@ export function Home({
               <span className="flex size-11 items-center justify-center rounded-2xl bg-shell">
                 <Icon size={21} aria-hidden="true" />
               </span>
-              <span className="flex-1 text-base font-medium">{label}</span>
+              <span className="flex-1 text-base font-medium">
+                {localizedPageLabel(page.key, label, t)}
+              </span>
               <ArrowUpRight
                 size={18}
                 className="text-muted"
@@ -51,8 +56,10 @@ export function Home({
             <Settings2 size={21} aria-hidden="true" />
           </span>
           <span className="flex-1">
-            <span className="block text-base font-medium">Make it yours</span>
-            <span className="text-sm text-muted">Settings</span>
+            <span className="block text-base font-medium">
+              {t("home.customize")}
+            </span>
+            <span className="text-sm text-muted">{t("shell.settings")}</span>
           </span>
           <ArrowUpRight size={18} className="text-muted" aria-hidden="true" />
         </button>