@agent-native/core 0.75.5 → 0.76.1

package/corpus/templates/chat/app/root.tsx

@@ -10,8 +10,10 @@ import {
   appPath,
   configureTracking,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   getThemeInitScript,
   useCommandMenuShortcut,
+  useT,
 } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import changelog from "../CHANGELOG.md?raw";
@@ -20,6 +22,7 @@ import { TAB_ID } from "@/lib/tab-id";
 import { APP_TITLE } from "@/lib/app-config";
 import type { LinksFunction } from "react-router";
 import stylesheet from "./global.css?url";
+import { i18nCatalog } from "./i18n";
 
 configureTracking({
   getDefaultProps: (_name, properties) => ({
@@ -33,6 +36,7 @@ export const links: LinksFunction = () => [
 ];
 
 const THEME_INIT_SCRIPT = getThemeInitScript();
+const LOCALE_INIT_SCRIPT = getLocaleInitScript();
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -47,6 +51,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: LOCALE_INIT_SCRIPT }}
+        />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#18181B" />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -81,6 +90,7 @@ function DbSyncSetup() {
 
 function ThemeToggleItem() {
   const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
   const isDark = resolvedTheme === "dark";
   return (
     <CommandMenu.Item
@@ -88,13 +98,14 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "mode"]}
     >
       {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      Toggle {isDark ? "light" : "dark"} mode
+      {t("root.toggleTheme")}
     </CommandMenu.Item>
   );
 }
 
 function AppContent() {
   const [cmdkOpen, setCmdkOpen] = useState(false);
+  const t = useT();
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
     <>
@@ -104,10 +115,12 @@ function AppContent() {
         changelog={changelog}
         changelogKey="chat"
       >
-        <CommandMenu.Group heading="Actions">
-          <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
+        <CommandMenu.Group heading={t("root.commandActions")}>
+          <CommandMenu.Item onSelect={() => {}}>
+            {t("root.commandSearch")}
+          </CommandMenu.Item>
         </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
+        <CommandMenu.Group heading={t("root.commandAppearance")}>
           <ThemeToggleItem />
         </CommandMenu.Group>
       </CommandMenu>
@@ -121,7 +134,7 @@ function AppContent() {
 export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   return (
-    <AppProviders queryClient={queryClient}>
+    <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
       <DbSyncSetup />
       <AppContent />
     </AppProviders>

package/corpus/templates/chat/app/routes/_index.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router";
 import {
   AgentChatSurface,
   markAgentChatHomeHandoff,
+  useT,
 } from "@agent-native/core/client";
 import { APP_TITLE } from "@/lib/app-config";
 import { TAB_ID } from "@/lib/tab-id";
@@ -33,6 +34,7 @@ function chatThreadPath(threadId: string | null) {
 export default function ChatRoute() {
   const { threadId } = useParams();
   const navigate = useNavigate();
+  const t = useT();
 
   useEffect(() => {
     function handleChatRunning(event: Event) {
@@ -63,23 +65,22 @@ export default function ChatRoute() {
         showTabBar={false}
         dynamicSuggestions={false}
         suggestions={[
-          "What can you do?",
-          "Help me customize this chat app",
-          "Show me the actions and pages I can add",
+          t("chat.suggestionCapabilities"),
+          t("chat.suggestionCustomize"),
+          t("chat.suggestionActions"),
         ]}
-        emptyStateText="Ask anything, then customize the app when you need more."
+        emptyStateText={t("chat.emptyState")}
         emptyStateDisplay="hidden"
         centerComposerWhenEmpty
         composerLayoutVariant="hero"
-        composerPlaceholder="Message the agent..."
+        composerPlaceholder={t("chat.composerPlaceholder")}
         composerSlot={
           <div className="mx-auto mb-5 max-w-xl px-4 text-center">
             <h1 className="text-2xl font-semibold tracking-normal text-foreground sm:text-3xl">
-              How can I help?
+              {t("chat.heroTitle")}
             </h1>
             <p className="mt-2 text-sm leading-6 text-muted-foreground">
-              Chat about anything. Add actions, components, pages, jobs, or your
-              own agent backend when you want this app to do more.
+              {t("chat.heroDescription")}
             </p>
           </div>
         }

package/corpus/templates/chat/app/routes/settings.tsx

@@ -0,0 +1,86 @@
+import { Link } from "react-router";
+import {
+  ChangelogSettingsCard,
+  LanguagePicker,
+  openAgentSettings,
+  useT,
+} from "@agent-native/core/client";
+import { useSetPageTitle } from "@/components/layout/HeaderActions";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { APP_TITLE } from "@/lib/app-config";
+import changelog from "../../CHANGELOG.md?raw";
+
+export function meta() {
+  return [{ title: `Settings - ${APP_TITLE}` }];
+}
+
+export default function SettingsRoute() {
+  const t = useT();
+  useSetPageTitle(t("settings.title"));
+
+  return (
+    <main className="mx-auto w-full max-w-3xl space-y-6 px-4 py-6 sm:px-6 sm:py-10">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          {t("settings.title")}
+        </h1>
+        <p className="text-sm leading-6 text-muted-foreground">
+          {t("settings.description")}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.languageTitle")}
+          </CardTitle>
+          <CardDescription>{t("settings.languageDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent className="max-w-xs space-y-1.5">
+          <Label>{t("settings.languageLabel")}</Label>
+          <LanguagePicker label={t("settings.languageLabel")} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.workspaceTitle")}
+          </CardTitle>
+          <CardDescription>
+            {t("settings.workspaceDescription")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" asChild>
+            <Link to="/team">{t("settings.openTeamSettings")}</Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.agentTitle")}
+          </CardTitle>
+          <CardDescription>{t("settings.agentDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => openAgentSettings()}>
+            {t("settings.openAgentSettings")}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <ChangelogSettingsCard markdown={changelog} />
+    </main>
+  );
+}

package/corpus/templates/chat/changelog/2026-06-24-a-new-settings-page-gives-quick-access-to-language-workspace.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-24
+---
+
+A new Settings page gives quick access to language, workspace, and agent preferences.

package/corpus/templates/chat/changelog/2026-06-24-added-a-language-picker-and-localized-app-chrome-for-support.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-24
+---
+
+Added a language picker and localized app chrome for supported languages.

package/corpus/templates/clips/.agents/skills/self-modifying-code/SKILL.md

@@ -66,6 +66,11 @@ el.dataset.selectedId = selectedItem?.id || "";
 
 **Use configuration-driven rendering** — Extract visual decisions (colors, layouts, sizes) into JSON config files in `data/`. The agent can modify the config (Tier 1) instead of the component source (Tier 2).
 
+**Keep localized copy in catalogs** — When editing visible UI copy, labels,
+toasts, empty states, prompts, or formatting, read `internationalization` and
+update `app/i18n/en-US.ts` plus existing locale catalogs instead of leaving new
+inline strings in components.
+
 ## Don't
 
 - Don't modify `.env` files or files containing secrets
@@ -80,3 +85,4 @@ el.dataset.selectedId = selectedItem?.id || "";
 - **actions** — The agent can create or modify actions to add new capabilities
 - **delegate-to-agent** — Self-modification requests come through the agent chat
 - **real-time-sync** — Database writes trigger change events to update the UI
+- **internationalization** — UI copy, language catalogs, locale switching, and RTL-safe edits

package/corpus/templates/clips/app/components/layout/Header.tsx

@@ -1,30 +1,35 @@
 import { useLocation } from "react-router";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-import { AgentToggleButton } from "@agent-native/core/client";
+import {
+  AgentToggleButton,
+  LanguagePicker,
+  useT,
+} from "@agent-native/core/client";
 
-const pageTitles: Record<string, string> = {
-  "/": "Library",
-  "/library": "Library",
-  "/spaces": "Spaces",
-  "/archive": "Archive",
-  "/trash": "Trash",
-  "/notifications": "Notifications",
-  "/insights": "Insights",
+const pageTitleKeys: Record<string, string> = {
+  "/": "navigation.library",
+  "/library": "navigation.library",
+  "/spaces": "navigation.spaces",
+  "/archive": "navigation.archive",
+  "/trash": "navigation.trash",
+  "/notifications": "navigation.notifications",
+  "/insights": "navigation.insights",
 };
 
-function resolveTitle(pathname: string): string {
-  if (pageTitles[pathname]) return pageTitles[pathname];
+function resolveTitle(pathname: string, t: ReturnType<typeof useT>): string {
+  if (pageTitleKeys[pathname]) return t(pageTitleKeys[pathname]);
 
-  if (pathname.startsWith("/spaces/")) return "Space";
-  if (pathname.startsWith("/library/folder/")) return "Folder";
-  if (pathname.startsWith("/settings")) return "Settings";
-  if (pathname.startsWith("/extensions")) return "Extensions";
+  if (pathname.startsWith("/spaces/")) return t("navigation.space");
+  if (pathname.startsWith("/library/folder/")) return t("navigation.folder");
+  if (pathname.startsWith("/settings")) return t("navigation.settings");
+  if (pathname.startsWith("/extensions")) return t("navigation.extensions");
 
-  return "Clips";
+  return t("navigation.brand");
 }
 
 export function Header() {
   const location = useLocation();
+  const t = useT();
   const title = useHeaderTitle();
   const actions = useHeaderActions();
 
@@ -33,12 +38,13 @@ export function Header() {
       <div className="flex items-center gap-3 flex-1 min-w-0">
         {title ?? (
           <h1 className="text-lg font-semibold tracking-tight truncate">
-            {resolveTitle(location.pathname)}
+            {resolveTitle(location.pathname, t)}
           </h1>
         )}
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
+        <LanguagePicker variant="icon" />
         <AgentToggleButton />
       </div>
     </header>

package/corpus/templates/clips/app/components/library/empty-state.tsx

@@ -8,6 +8,7 @@ import {
   IconPlayerRecord,
 } from "@tabler/icons-react";
 import { Button } from "@/components/ui/button";
+import { useT } from "@agent-native/core/client";
 
 type EmptyKind =
   | "library"
@@ -26,35 +27,7 @@ const ICONS: Record<EmptyKind, React.ComponentType<{ className?: string }>> = {
   search: IconVideo,
 };
 
-const COPY: Record<EmptyKind, { title: string; body: string; cta?: string }> = {
-  library: {
-    title: "Your library is empty",
-    body: "Capture your first screen recording and it'll land here, ready to share.",
-    cta: "Record your first Clip",
-  },
-  folder: {
-    title: "This folder is empty",
-    body: "Drag recordings in, or hit record to start something new in this folder.",
-    cta: "Record here",
-  },
-  space: {
-    title: "No recordings in this space yet",
-    body: "Share a recording with the space or record something new — your team will see it here.",
-    cta: "Record for this space",
-  },
-  archive: {
-    title: "Nothing archived",
-    body: "Archived recordings are hidden from the library but kept safe. You can always restore them later.",
-  },
-  trash: {
-    title: "Trash is empty",
-    body: "Deleted recordings appear here for 30 days before being permanently removed.",
-  },
-  search: {
-    title: "No matches",
-    body: "Try a different search term or check your filters.",
-  },
-};
+const CTA_KINDS = new Set<EmptyKind>(["library", "folder", "space"]);
 
 interface EmptyStateProps {
   kind: EmptyKind;
@@ -70,8 +43,9 @@ export function EmptyState({
   onCtaClick,
 }: EmptyStateProps) {
   const navigate = useNavigate();
+  const t = useT();
   const Icon = ICONS[kind];
-  const copy = COPY[kind];
+  const hasCta = CTA_KINDS.has(kind);
 
   const handleCta = () => {
     if (onCtaClick) {
@@ -91,17 +65,19 @@ export function EmptyState({
         <Icon className="h-10 w-10 text-primary" />
       </div>
       <h2 className="text-base font-semibold text-foreground mb-1">
-        {copy.title}
+        {t(`empty.${kind}.title`)}
       </h2>
-      <p className="text-sm text-muted-foreground max-w-sm mb-5">{copy.body}</p>
-      {copy.cta && (
+      <p className="text-sm text-muted-foreground max-w-sm mb-5">
+        {t(`empty.${kind}.body`)}
+      </p>
+      {hasCta && (
         <Button
           onClick={handleCta}
           className="bg-primary text-primary-foreground hover:bg-primary/90 gap-1.5"
           size="sm"
         >
           <IconPlayerRecord className="h-4 w-4" />
-          {copy.cta}
+          {t(`empty.${kind}.cta`)}
         </Button>
       )}
     </div>

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -24,6 +24,7 @@ import {
   FeedbackButton,
   appPath,
   getBrowserTabId,
+  useT,
 } from "@agent-native/core/client";
 import {
   InvitationBanner,
@@ -91,6 +92,7 @@ function ClipsAgentToggleButton() {
 
 export function LibraryLayout({ children }: LibraryLayoutProps) {
   const location = useLocation();
+  const t = useT();
   // Bind chat to the currently-open recording (`/r/:id`). Library, spaces,
   // meetings, dictate, and settings stay unscoped — those are list-y views
   // where deck-style "this recording" framing doesn't apply.
@@ -185,44 +187,44 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   }[] = [
     {
       to: "/library",
-      label: "Library",
+      label: t("navigation.library"),
       icon: IconInbox,
       match: (p) => p.startsWith("/library"),
       count: libraryCount,
     },
     {
       to: "/spaces",
-      label: "Spaces",
+      label: t("navigation.spaces"),
       icon: IconUsersGroup,
       match: (p) => p.startsWith("/spaces"),
     },
     {
       to: "/meetings",
-      label: "Meetings",
+      label: t("navigation.meetings"),
       icon: IconCalendar,
       match: (p) => p.startsWith("/meetings"),
     },
     {
       to: "/dictate",
-      label: "Dictate",
+      label: t("navigation.dictate"),
       icon: IconMicrophone2,
       match: (p) => p.startsWith("/dictate"),
     },
     {
       to: "/archive",
-      label: "Archive",
+      label: t("navigation.archive"),
       icon: IconArchive,
       match: (p) => p.startsWith("/archive"),
     },
     {
       to: "/trash",
-      label: "Trash",
+      label: t("navigation.trash"),
       icon: IconTrash,
       match: (p) => p.startsWith("/trash"),
     },
     {
       to: "/settings",
-      label: "Settings",
+      label: t("navigation.settings"),
       icon: IconSettings,
       match: (p) => p.startsWith("/settings"),
     },
@@ -233,11 +235,11 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
       <AgentSidebar
         position="right"
         defaultOpen={!isMobile}
-        emptyStateText="How can I help with your recordings?"
+        emptyStateText={t("navigation.agentEmptyState")}
         suggestions={[
-          "Summarize my last recording",
-          "Find where I mentioned pricing",
-          "Remove filler words from this clip",
+          t("navigation.agentSuggestionSummary"),
+          t("navigation.agentSuggestionPricing"),
+          t("navigation.agentSuggestionFiller"),
         ]}
         scope={recordingScope}
         browserTabId={getBrowserTabId()}
@@ -288,7 +290,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                       className="hidden h-4 w-auto shrink-0 dark:block"
                     />
                     <span className="truncate text-sm font-semibold text-foreground">
-                      Clips
+                      {t("navigation.brand")}
                     </span>
                   </>
                 )}
@@ -303,8 +305,8 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                     className="hidden h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground md:inline-flex"
                     aria-label={
                       showCollapsedSidebar
-                        ? "Expand sidebar"
-                        : "Collapse sidebar"
+                        ? t("navigation.expandSidebar")
+                        : t("navigation.collapseSidebar")
                     }
                     aria-expanded={!showCollapsedSidebar}
                     onClick={() => setSidebarCollapsed((value) => !value)}
@@ -317,7 +319,9 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent side="right">
-                  {showCollapsedSidebar ? "Expand sidebar" : "Collapse sidebar"}
+                  {showCollapsedSidebar
+                    ? t("navigation.expandSidebar")
+                    : t("navigation.collapseSidebar")}
                 </TooltipContent>
               </Tooltip>
             </div>
@@ -329,14 +333,14 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                       <TooltipTrigger asChild>
                         <NavLink
                           to="/record"
-                          aria-label="New recording"
+                          aria-label={t("navigation.newRecording")}
                           className="flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-sm hover:bg-primary/90"
                         >
                           <IconPlayerRecord className="h-4 w-4" />
                         </NavLink>
                       </TooltipTrigger>
                       <TooltipContent side="right">
-                        New recording
+                        {t("navigation.newRecording")}
                       </TooltipContent>
                     </Tooltip>
                   </div>
@@ -375,7 +379,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                     >
                       <NavLink to="/record">
                         <IconPlayerRecord className="h-4 w-4" />
-                        New recording
+                        {t("navigation.newRecording")}
                       </NavLink>
                     </Button>
                   </div>
@@ -417,20 +421,22 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                     <div>
                       <div className="flex items-center justify-between px-2 pb-1">
                         <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-                          Folders
+                          {t("navigation.folders")}
                         </span>
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
                               type="button"
-                              aria-label="New folder"
+                              aria-label={t("navigation.newFolder")}
                               className="rounded p-1 text-muted-foreground hover:bg-accent"
                               onClick={() => setNewFolderOpen(true)}
                             >
                               <IconFolderPlus className="h-3.5 w-3.5" />
                             </button>
                           </TooltipTrigger>
-                          <TooltipContent>New folder</TooltipContent>
+                          <TooltipContent>
+                            {t("navigation.newFolder")}
+                          </TooltipContent>
                         </Tooltip>
                       </div>
                       <FolderTree
@@ -445,20 +451,22 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                     <div>
                       <div className="flex items-center justify-between px-2 pb-1">
                         <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-                          Spaces
+                          {t("navigation.spaces")}
                         </span>
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
                               type="button"
-                              aria-label="New space"
+                              aria-label={t("navigation.spaces")}
                               className="rounded p-1 text-muted-foreground hover:bg-accent"
                               onClick={() => setNewSpaceOpen(true)}
                             >
                               <IconPlus className="h-3.5 w-3.5" />
                             </button>
                           </TooltipTrigger>
-                          <TooltipContent>New space</TooltipContent>
+                          <TooltipContent>
+                            {t("navigation.spaces")}
+                          </TooltipContent>
                         </Tooltip>
                       </div>
                       <ul className="space-y-0.5">
@@ -493,7 +501,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                         })}
                         {(spaces?.spaces ?? []).length === 0 && (
                           <li className="px-2 py-1 text-[11px] text-muted-foreground/70">
-                            No spaces yet
+                            {t("navigation.noSpaces")}
                           </li>
                         )}
                       </ul>
@@ -509,7 +517,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                   {shouldShowSidebarLink && (
                     <CaptureInstallInlineLink className="flex items-center gap-2 rounded px-2 py-1.5 text-xs text-foreground hover:bg-accent/60">
                       <IconAppWindow className="h-4 w-4" />
-                      Get desktop app
+                      {t("navigation.desktopCta")}
                     </CaptureInstallInlineLink>
                   )}
                   <SearchBar />
@@ -553,10 +561,10 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                 <IconAppWindow className="h-4 w-4 shrink-0 text-primary" />
                 <div className="min-w-0 flex-1">
                   <span className="font-medium">
-                    Get the Clips desktop app.
+                    {t("navigation.desktopTitle")}
                   </span>{" "}
                   <span className="text-muted-foreground">
-                    Record from the menu bar, global shortcut, auto-updates.
+                    {t("navigation.desktopBody")}
                   </span>
                 </div>
                 <CaptureInstallButton size="sm" className="shrink-0">
@@ -590,17 +598,17 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
       <AlertDialog open={newFolderOpen} onOpenChange={setNewFolderOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>New folder</AlertDialogTitle>
+            <AlertDialogTitle>{t("navigation.newFolder")}</AlertDialogTitle>
           </AlertDialogHeader>
           <input
             autoFocus
             value={newFolderName}
             onChange={(e) => setNewFolderName(e.target.value)}
-            placeholder="Folder name"
+            placeholder={t("navigation.folderNamePlaceholder")}
             className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
           />
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => {
                 const name = newFolderName.trim();
@@ -614,16 +622,19 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                     parentId: null,
                   },
                   {
-                    onSuccess: () => toast.success("Folder created"),
+                    onSuccess: () =>
+                      toast.success(t("navigation.folderCreated")),
                     onError: (err: any) =>
-                      toast.error(err?.message ?? "Create failed"),
+                      toast.error(
+                        err?.message ?? t("navigation.createFolderError"),
+                      ),
                   },
                 );
                 setNewFolderName("");
                 setNewFolderOpen(false);
               }}
             >
-              Create
+              {t("common.create")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>