@agent-native/core 0.76.9 → 0.76.11

package/corpus/templates/analytics/app/components/layout/Sidebar.tsx

@@ -228,6 +228,8 @@ function SidebarSectionSettingsPopover({
   showHidden?: boolean;
   onShowHiddenChange?: (value: boolean) => void;
 }) {
+  const t = useT();
+  const settingsLabel = t("sidebar.sectionSettings", { label });
   return (
     <Popover>
       <Tooltip>
@@ -236,13 +238,13 @@ function SidebarSectionSettingsPopover({
             <button
               type="button"
               className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/65 opacity-0 transition-all hover:bg-sidebar-accent hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-hover/section:opacity-100 data-[state=open]:opacity-100"
-              aria-label={`${label} settings`}
+              aria-label={settingsLabel}
             >
               <IconSettings className="h-3.5 w-3.5" />
             </button>
           </PopoverTrigger>
         </TooltipTrigger>
-        <TooltipContent side="right">{`${label} settings`}</TooltipContent>
+        <TooltipContent side="right">{settingsLabel}</TooltipContent>
       </Tooltip>
       <PopoverContent side="right" align="start" className="w-60 p-2">
         <div className="px-2 pb-2">
@@ -251,7 +253,7 @@ function SidebarSectionSettingsPopover({
         <div className="grid gap-3">
           <div className="grid gap-1.5">
             <p className="px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              Sort by
+              {t("sidebar.sortBy")}
             </p>
             <ToggleGroup
               type="single"
@@ -269,24 +271,24 @@ function SidebarSectionSettingsPopover({
             >
               <ToggleGroupItem
                 value="most-used"
-                aria-label="Sort by most used"
+                aria-label={t("sidebar.sortMostUsed")}
                 className="h-7 px-2 text-[11px]"
               >
-                Used
+                {t("sidebar.used")}
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="alphabetical"
-                aria-label="Sort alphabetically"
+                aria-label={t("sidebar.sortAlphabetically")}
                 className="h-7 px-2 text-[11px]"
               >
-                A-Z
+                {t("sidebar.alphabetical")}
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="manual"
-                aria-label="Sort manually"
+                aria-label={t("sidebar.sortManually")}
                 className="h-7 px-2 text-[11px]"
               >
-                Manual
+                {t("sidebar.manual")}
               </ToggleGroupItem>
             </ToggleGroup>
           </div>
@@ -295,12 +297,14 @@ function SidebarSectionSettingsPopover({
               htmlFor={`${label.toLowerCase()}-shared-filter`}
               className="flex items-center justify-between gap-3 rounded-md px-2 py-1.5 text-xs text-foreground hover:bg-sidebar-accent/60"
             >
-              <span className="min-w-0 truncate">Org shared only</span>
+              <span className="min-w-0 truncate">
+                {t("sidebar.orgSharedOnly")}
+              </span>
               <Switch
                 id={`${label.toLowerCase()}-shared-filter`}
                 checked={sharedOnly}
                 onCheckedChange={onSharedOnlyChange}
-                aria-label={`${label} org shared only`}
+                aria-label={`${label} ${t("sidebar.orgSharedOnly")}`}
               />
             </label>
             {onShowHiddenChange && showHidden !== undefined && (
@@ -308,12 +312,14 @@ function SidebarSectionSettingsPopover({
                 htmlFor={`${label.toLowerCase()}-hidden-filter`}
                 className="flex items-center justify-between gap-3 rounded-md px-2 py-1.5 text-xs text-foreground hover:bg-sidebar-accent/60"
               >
-                <span className="min-w-0 truncate">Hidden analyses</span>
+                <span className="min-w-0 truncate">
+                  {t("sidebar.hiddenAnalyses")}
+                </span>
                 <Switch
                   id={`${label.toLowerCase()}-hidden-filter`}
                   checked={showHidden}
                   onCheckedChange={onShowHiddenChange}
-                  aria-label={`${label} hidden analyses`}
+                  aria-label={`${label} ${t("sidebar.hiddenAnalyses")}`}
                 />
               </label>
             )}
@@ -370,6 +376,7 @@ function SortableRow({
   onSetVisibility?: (visibility: Visibility) => Promise<void> | void;
   children?: React.ReactNode;
 }) {
+  const t = useT();
   const {
     attributes,
     listeners,
@@ -407,11 +414,14 @@ function SortableRow({
       setRenameValue(name);
       toast.error(
         e instanceof Error
-          ? `Couldn't rename ${name}: ${e.message}`
-          : `Couldn't rename ${name}`,
+          ? t("sidebar.renameFailedWithMessage", {
+              name,
+              message: e.message,
+            })
+          : t("sidebar.renameFailed", { name }),
       );
     }
-  }, [name, onRename, renameValue]);
+  }, [name, onRename, renameValue, t]);
 
   const runDelete = useCallback(async () => {
     setMenuOpen(false);
@@ -421,11 +431,14 @@ function SortableRow({
     } catch (e) {
       toast.error(
         e instanceof Error
-          ? `Couldn't delete ${name}: ${e.message}`
-          : `Couldn't delete ${name}`,
+          ? t("sidebar.deleteFailedWithMessage", {
+              name,
+              message: e.message,
+            })
+          : t("sidebar.deleteFailed", { name }),
       );
     }
-  }, [name, onDelete]);
+  }, [name, onDelete, t]);
 
   const runArchive = useCallback(async () => {
     setMenuOpen(false);
@@ -435,11 +448,14 @@ function SortableRow({
     } catch (e) {
       toast.error(
         e instanceof Error
-          ? `Couldn't archive ${name}: ${e.message}`
-          : `Couldn't archive ${name}`,
+          ? t("sidebar.archiveFailedWithMessage", {
+              name,
+              message: e.message,
+            })
+          : t("sidebar.archiveFailed", { name }),
       );
     }
-  }, [name, onArchive]);
+  }, [name, onArchive, t]);
 
   const runHide = useCallback(async () => {
     setMenuOpen(false);
@@ -449,11 +465,14 @@ function SortableRow({
     } catch (e) {
       toast.error(
         e instanceof Error
-          ? `Couldn't hide ${name}: ${e.message}`
-          : `Couldn't hide ${name}`,
+          ? t("sidebar.hideFailedWithMessage", {
+              name,
+              message: e.message,
+            })
+          : t("sidebar.hideFailed", { name }),
       );
     }
-  }, [name, onHide]);
+  }, [name, onHide, t]);
 
   const runUnhide = useCallback(async () => {
     setMenuOpen(false);
@@ -463,11 +482,14 @@ function SortableRow({
     } catch (e) {
       toast.error(
         e instanceof Error
-          ? `Couldn't unhide ${name}: ${e.message}`
-          : `Couldn't unhide ${name}`,
+          ? t("sidebar.unhideFailedWithMessage", {
+              name,
+              message: e.message,
+            })
+          : t("sidebar.unhideFailed", { name }),
       );
     }
-  }, [name, onUnhide]);
+  }, [name, onUnhide, t]);
 
   const runSetVisibility = useCallback(
     async (visibility: Visibility) => {
@@ -478,29 +500,31 @@ function SortableRow({
       } catch (e) {
         toast.error(
           e instanceof Error
-            ? `Couldn't update visibility: ${e.message}`
-            : "Couldn't update visibility",
+            ? t("sidebar.updateVisibilityFailedWithMessage", {
+                message: e.message,
+              })
+            : t("sidebar.updateVisibilityFailed"),
         );
       }
     },
-    [onSetVisibility],
+    [onSetVisibility, t],
   );
 
   const copyLink = useCallback(() => {
     const url = window.location.origin + href;
     navigator.clipboard.writeText(url).then(
-      () => toast.success("Link copied"),
-      () => toast.error("Couldn't copy link"),
+      () => toast.success(t("sidebar.linkCopied")),
+      () => toast.error(t("sidebar.copyLinkFailed")),
     );
     setMenuOpen(false);
-  }, [href]);
+  }, [href, t]);
 
   return (
     <div ref={setNodeRef} style={style} className="group/item relative min-w-0">
       <button
         type="button"
         className="absolute -start-4 top-1/2 z-10 -translate-y-1/2 cursor-grab rounded p-1 text-muted-foreground/30 opacity-0 transition-colors hover:text-muted-foreground/60 group-hover/item:opacity-100 active:cursor-grabbing"
-        aria-label={`Drag ${name}`}
+        aria-label={t("sidebar.dragItem", { name })}
         {...attributes}
         {...listeners}
       >
@@ -557,13 +581,15 @@ function SortableRow({
                     ? "text-yellow-500"
                     : "text-muted-foreground/50 hover:text-yellow-500",
                 )}
-                aria-label={isFav ? "Unfavorite" : "Favorite"}
+                aria-label={
+                  isFav ? t("sidebar.unfavorite") : t("sidebar.favorite")
+                }
               >
                 <IconStar className={cn("h-3 w-3", isFav && "fill-current")} />
               </button>
             </TooltipTrigger>
             <TooltipContent side="right">
-              {isFav ? "Unfavorite" : "Favorite"}
+              {isFav ? t("sidebar.unfavorite") : t("sidebar.favorite")}
             </TooltipContent>
           </Tooltip>
           <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
@@ -573,13 +599,15 @@ function SortableRow({
                   <button
                     type="button"
                     className="pointer-events-auto rounded p-0.5 text-muted-foreground/50 transition-colors hover:text-foreground"
-                    aria-label={`${name} actions`}
+                    aria-label={t("sidebar.itemActions", { name })}
                   >
                     <IconDots className="h-3 w-3" />
                   </button>
                 </DropdownMenuTrigger>
               </TooltipTrigger>
-              <TooltipContent side="right">{`${name} actions`}</TooltipContent>
+              <TooltipContent side="right">
+                {t("sidebar.itemActions", { name })}
+              </TooltipContent>
             </Tooltip>
             <DropdownMenuContent side="right" align="start" className="w-44">
               <DropdownMenuItem
@@ -589,7 +617,7 @@ function SortableRow({
                 }}
               >
                 <IconPencil className="me-2 h-3.5 w-3.5" />
-                Rename
+                {t("sidebar.rename")}
               </DropdownMenuItem>
               {onSetVisibility && visibility !== undefined && (
                 <DropdownMenuItem
@@ -605,12 +633,14 @@ function SortableRow({
                   ) : (
                     <IconLock className="me-2 h-3.5 w-3.5" />
                   )}
-                  {visibility === "private" ? "Share with org" : "Make private"}
+                  {visibility === "private"
+                    ? t("sidebar.shareWithOrg")
+                    : t("sidebar.makePrivate")}
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem onSelect={copyLink}>
                 <IconLink className="me-2 h-3.5 w-3.5" />
-                Copy link
+                {t("sidebar.copyLink")}
               </DropdownMenuItem>
               {onUnhide && hidden ? (
                 <DropdownMenuItem
@@ -620,7 +650,7 @@ function SortableRow({
                   }}
                 >
                   <IconEye className="me-2 h-3.5 w-3.5" />
-                  Unhide
+                  {t("sidebar.unhide")}
                 </DropdownMenuItem>
               ) : onHide ? (
                 <DropdownMenuItem
@@ -630,7 +660,7 @@ function SortableRow({
                   }}
                 >
                   <IconEyeOff className="me-2 h-3.5 w-3.5" />
-                  Hide
+                  {t("sidebar.hide")}
                 </DropdownMenuItem>
               ) : null}
               <DropdownMenuSeparator />
@@ -643,7 +673,7 @@ function SortableRow({
                     }}
                   >
                     <IconArchive className="me-2 h-3.5 w-3.5" />
-                    Archive
+                    {t("sidebar.archive")}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
@@ -655,7 +685,7 @@ function SortableRow({
                     className="text-destructive focus:text-destructive"
                   >
                     <IconTrash className="me-2 h-3.5 w-3.5" />
-                    Delete permanently
+                    {t("sidebar.deletePermanently")}
                   </DropdownMenuItem>
                 </>
               ) : (
@@ -668,7 +698,7 @@ function SortableRow({
                   className="text-destructive focus:text-destructive"
                 >
                   <IconTrash className="me-2 h-3.5 w-3.5" />
-                  Delete
+                  {t("sidebar.delete")}
                 </DropdownMenuItem>
               )}
             </DropdownMenuContent>
@@ -679,22 +709,21 @@ function SortableRow({
       <AlertDialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete permanently?</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("sidebar.deletePermanentlyTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              This permanently deletes &ldquo;{name}&rdquo; and cannot be
-              undone.
-              {onArchive
-                ? " To keep it recoverable, choose Archive instead."
-                : ""}
+              {t("sidebar.deletePermanentlyDescription", { name })}
+              {onArchive ? t("sidebar.deletePermanentlyArchiveHint") : ""}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => void runDelete()}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              Delete permanently
+              {t("sidebar.deletePermanently")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -734,6 +763,7 @@ function SortableDashboardItem({
   ) => Promise<void>;
 }) {
   const href = `/dashboards/${d.id}`;
+  const t = useT();
   const { mutateAsync: deleteView } = useDeleteDashboardView();
   const [deletingViewId, setDeletingViewId] = useState<string | null>(null);
 
@@ -845,8 +875,8 @@ function SortableDashboardItem({
                       </TooltipTrigger>
                       <TooltipContent side="right">
                         {favoriteIds.has(`view:${d.id}:${sv.id}`)
-                          ? "Unfavorite"
-                          : "Favorite"}
+                          ? t("sidebar.unfavorite")
+                          : t("sidebar.favorite")}
                       </TooltipContent>
                     </Tooltip>
                     <Popover
@@ -863,7 +893,9 @@ function SortableDashboardItem({
                             </button>
                           </PopoverTrigger>
                         </TooltipTrigger>
-                        <TooltipContent side="right">{`Delete ${sv.name}`}</TooltipContent>
+                        <TooltipContent side="right">
+                          {t("sidebar.deleteView", { name: sv.name })}
+                        </TooltipContent>
                       </Tooltip>
                       <PopoverContent
                         className="w-56 p-3"
@@ -871,7 +903,7 @@ function SortableDashboardItem({
                         align="start"
                       >
                         <p className="text-sm mb-3">
-                          Delete view <strong>{sv.name}</strong>?
+                          {t("sidebar.deleteView", { name: sv.name })}
                         </p>
                         <div className="flex gap-2">
                           <button
@@ -888,8 +920,10 @@ function SortableDashboardItem({
                                 setDeletingViewId(sv.id);
                                 toast.error(
                                   err instanceof Error
-                                    ? `Couldn't delete view: ${err.message}`
-                                    : "Couldn't delete view",
+                                    ? t("sidebar.deleteViewFailedWithMessage", {
+                                        message: err.message,
+                                      })
+                                    : t("sidebar.deleteViewFailed"),
                                 );
                               }
                             }}
@@ -898,14 +932,16 @@ function SortableDashboardItem({
                             {isDeleting && (
                               <IconLoader2 className="h-3 w-3 animate-spin" />
                             )}
-                            {isDeleting ? "Deleting..." : "Delete"}
+                            {isDeleting
+                              ? t("sidebar.deleting")
+                              : t("sidebar.delete")}
                           </button>
                           <button
                             disabled={isDeleting}
                             onClick={() => setDeletingViewId(null)}
                             className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-sidebar-accent/50 transition-colors disabled:opacity-60"
                           >
-                            Cancel
+                            {t("sidebar.cancel")}
                           </button>
                         </div>
                       </PopoverContent>
@@ -990,7 +1026,9 @@ type SqlDashboardListItem = {
   visibility?: Visibility;
 };
 
-async function fetchSqlDashboards(): Promise<SqlDashboardListItem[]> {
+async function fetchSqlDashboards(
+  t: (key: string) => string,
+): Promise<SqlDashboardListItem[]> {
   try {
     const rows = await callAction("list-sql-dashboards", {}, { method: "GET" });
     return (Array.isArray(rows) ? rows : [])
@@ -1000,7 +1038,7 @@ async function fetchSqlDashboards(): Promise<SqlDashboardListItem[]> {
         name:
           typeof d.name === "string" && d.name.trim().length > 0
             ? d.name
-            : "Untitled dashboard",
+            : t("sidebar.untitledDashboard"),
         visibility:
           d.visibility === "org" || d.visibility === "public"
             ? (d.visibility as Visibility)
@@ -1012,6 +1050,7 @@ async function fetchSqlDashboards(): Promise<SqlDashboardListItem[]> {
 }
 
 async function fetchSidebarAnalyses(
+  t: (key: string) => string,
   hidden: AnalysisHiddenFilter = "visible",
 ): Promise<
   {
@@ -1036,7 +1075,7 @@ async function fetchSidebarAnalyses(
         name:
           typeof a.name === "string" && a.name.trim().length > 0
             ? a.name
-            : "Untitled analysis",
+            : t("sidebar.untitledAnalysis"),
         visibility:
           a.visibility === "org" || a.visibility === "public"
             ? a.visibility
@@ -1068,6 +1107,7 @@ type PrefetchedSqlDashboard = {
 
 async function fetchSqlDashboardForPrefetch(
   id: string,
+  t: (key: string) => string,
 ): Promise<PrefetchedSqlDashboard | null> {
   try {
     const data: any = await callAction(
@@ -1082,7 +1122,7 @@ async function fetchSqlDashboardForPrefetch(
         name:
           typeof data.name === "string" && data.name.trim().length > 0
             ? data.name
-            : "Untitled Dashboard",
+            : t("sidebar.untitledDashboard"),
         description: data.description,
         filters: data.filters,
         variables: data.variables,
@@ -1282,14 +1322,14 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const { data: sqlDashboards = [], isLoading: sqlDashboardsLoading } =
     useQuery({
       queryKey: ["sql-dashboards-sidebar", dashboardsSync],
-      queryFn: fetchSqlDashboards,
+      queryFn: () => fetchSqlDashboards(t),
       staleTime: 30_000,
       placeholderData: (prev) => prev,
     });
 
   const { data: analysesList = [], isLoading: analysesLoading } = useQuery({
     queryKey: ["analyses-sidebar", analysesSync, analysisHiddenFilter],
-    queryFn: () => fetchSidebarAnalyses(analysisHiddenFilter),
+    queryFn: () => fetchSidebarAnalyses(t, analysisHiddenFilter),
     staleTime: 30_000,
     placeholderData: (prev) => prev,
   });
@@ -1365,13 +1405,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       void queryClient.prefetchQuery({
         queryKey,
         queryFn: async () => ({
-          data: await fetchSqlDashboardForPrefetch(d.id),
+          data: await fetchSqlDashboardForPrefetch(d.id, t),
           syncVersion: dashboardsSync,
         }),
         staleTime: cached?.syncVersion === dashboardsSync ? 30_000 : 0,
       });
     },
-    [dashboardsSync, queryClient],
+    [dashboardsSync, queryClient, t],
   );
 
   const prefetchAnalysis = useCallback(
@@ -1504,13 +1544,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         await archiveDashboardMut({ id: d.id, archived: true });
         queryClient.removeQueries({ queryKey: sqlDashboardPrefetchKey(d.id) });
         queryClient.invalidateQueries({ queryKey: activeKey });
-        toast.success(`Archived "${d.name}"`);
+        toast.success(t("sidebar.archivedName", { name: d.name }));
       } catch (err) {
         restoreQuerySnapshots(queryClient, prevActive);
         throw err;
       }
     },
-    [queryClient, archiveDashboardMut],
+    [queryClient, archiveDashboardMut, t],
   );
 
   const handleDashboardRename = useCallback(
@@ -1603,15 +1643,15 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         queryClient.invalidateQueries({ queryKey });
         toast.success(
           visibility === "org"
-            ? `"${d.name}" shared with org`
-            : `"${d.name}" made private`,
+            ? t("sidebar.nameSharedWithOrg", { name: d.name })
+            : t("sidebar.nameMadePrivate", { name: d.name }),
         );
       } catch (err) {
         restoreQuerySnapshots(queryClient, prev);
         throw err;
       }
     },
-    [queryClient, setResourceVisibility],
+    [queryClient, setResourceVisibility, t],
   );
 
   const handleAnalysisSetVisibility = useCallback(
@@ -1644,8 +1684,8 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         queryClient.invalidateQueries({ queryKey: listKey });
         toast.success(
           visibility === "org"
-            ? `"${a.name}" shared with org`
-            : `"${a.name}" made private`,
+            ? t("sidebar.nameSharedWithOrg", { name: a.name })
+            : t("sidebar.nameMadePrivate", { name: a.name }),
         );
       } catch (err) {
         restoreQuerySnapshots(queryClient, prevSidebar);
@@ -1653,7 +1693,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         throw err;
       }
     },
-    [queryClient, setResourceVisibility],
+    [queryClient, setResourceVisibility, t],
   );
 
   const handleAnalysisRename = useCallback(
@@ -1719,13 +1759,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         await hideAnalysisMut({ id: a.id, hidden: true });
         queryClient.invalidateQueries({ queryKey: sidebarKey });
         queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
-        toast.success(`"${a.name}" hidden`);
+        toast.success(t("sidebar.nameHidden", { name: a.name }));
       } catch (err) {
         restoreQuerySnapshots(queryClient, prev);
         throw err;
       }
     },
-    [queryClient, hideAnalysisMut],
+    [queryClient, hideAnalysisMut, t],
   );
 
   const handleAnalysisUnhide = useCallback(
@@ -1742,13 +1782,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         await hideAnalysisMut({ id: a.id, hidden: false });
         queryClient.invalidateQueries({ queryKey: sidebarKey });
         queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
-        toast.success(`"${a.name}" unhidden`);
+        toast.success(t("sidebar.nameUnhidden", { name: a.name }));
       } catch (err) {
         restoreQuerySnapshots(queryClient, prev);
         throw err;
       }
     },
-    [queryClient, hideAnalysisMut],
+    [queryClient, hideAnalysisMut, t],
   );
 
   const sensors = useSensors(
@@ -1859,7 +1899,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             aria-hidden="true"
             className="hidden h-5 w-auto shrink-0 dark:block"
           />
-          <span className="text-lg font-bold tracking-tight">Analytics</span>
+          <span className="text-lg font-bold tracking-tight">
+            {t("navigation.brand")}
+          </span>
         </Link>
       </div>
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden py-2">
@@ -1887,7 +1929,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             )}
           >
             <IconMessageCircle className="h-4 w-4" />
-            Ask
+            {t("navigation.ask")}
           </Link>
 
           {/* Overview link */}
@@ -1901,7 +1943,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             )}
           >
             <IconHome className="h-4 w-4" />
-            Overview
+            {t("navigation.overview")}
           </Link>
 
           {/* Data Sources link */}
@@ -1915,7 +1957,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             )}
           >
             <IconDatabase className="h-4 w-4" />
-            Data Sources
+            {t("navigation.dataSources")}
           </Link>
 
           {/* Data Dictionary link */}
@@ -1929,7 +1971,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             )}
           >
             <IconBook2 className="h-4 w-4" />
-            Data Dictionary
+            {t("navigation.dataDictionary")}
           </Link>
 
           {/* Catalog link */}
@@ -1943,7 +1985,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             )}
           >
             <IconTemplate className="h-4 w-4" />
-            Catalog
+            {t("navigation.templateCatalog")}
           </Link>
 
           {/* Dashboards section */}
@@ -1963,10 +2005,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 aria-expanded={dashOpen}
               >
                 <IconChartBar className="h-4 w-4 shrink-0" />
-                <span className="min-w-0 flex-1 truncate">Dashboards</span>
+                <span className="min-w-0 flex-1 truncate">
+                  {t("navigation.dashboards")}
+                </span>
               </button>
               <SidebarSectionSettingsPopover
-                label="Dashboards"
+                label={t("navigation.dashboards")}
                 sortMode={dashboardSortMode}
                 onSortModeChange={setDashboardSortMode}
                 sharedOnly={dashFilter === "org"}
@@ -1979,7 +2023,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 onClick={toggleDashOpen}
                 className="me-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-sidebar-accent hover:text-foreground"
                 aria-label={
-                  dashOpen ? "Collapse dashboards" : "Expand dashboards"
+                  dashOpen
+                    ? t("sidebar.collapseDashboards")
+                    : t("sidebar.expandDashboards")
                 }
               >
                 <IconChevronDown
@@ -2024,8 +2070,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                         className="flex items-center gap-1 px-3 py-1 text-[11px] text-muted-foreground/70 hover:text-primary"
                       >
                         {dashShowAll
-                          ? "Show less"
-                          : `Show ${filteredDashboards.length - SIDEBAR_PREVIEW_COUNT} more`}
+                          ? t("sidebar.showLess")
+                          : t("sidebar.showMore", {
+                              count:
+                                filteredDashboards.length -
+                                SIDEBAR_PREVIEW_COUNT,
+                            })}
                       </button>
                     )}
                     {sqlDashboardsLoading &&
@@ -2066,10 +2116,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 aria-expanded={analysesOpen}
               >
                 <IconReportAnalytics className="h-4 w-4 shrink-0" />
-                <span className="min-w-0 flex-1 truncate">Analyses</span>
+                <span className="min-w-0 flex-1 truncate">
+                  {t("navigation.analyses")}
+                </span>
               </button>
               <SidebarSectionSettingsPopover
-                label="Analyses"
+                label={t("navigation.analyses")}
                 sortMode={analysisSortMode}
                 onSortModeChange={setAnalysisSortMode}
                 sharedOnly={analysisFilter === "org"}
@@ -2086,7 +2138,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 onClick={toggleAnalysesOpen}
                 className="me-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-sidebar-accent hover:text-foreground"
                 aria-label={
-                  analysesOpen ? "Collapse analyses" : "Expand analyses"
+                  analysesOpen
+                    ? t("sidebar.collapseAnalyses")
+                    : t("sidebar.expandAnalyses")
                 }
               >
                 <IconChevronDown
@@ -2145,8 +2199,11 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                         className="flex items-center gap-1 px-3 py-1 text-[11px] text-muted-foreground/70 hover:text-primary"
                       >
                         {analysesShowAll
-                          ? "Show less"
-                          : `Show ${filteredAnalyses.length - SIDEBAR_PREVIEW_COUNT} more`}
+                          ? t("sidebar.showLess")
+                          : t("sidebar.showMore", {
+                              count:
+                                filteredAnalyses.length - SIDEBAR_PREVIEW_COUNT,
+                            })}
                       </button>
                     )}
                     {analysesLoading &&
@@ -2165,7 +2222,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       ))}
                     {!analysesLoading && sortedAnalyses.length === 0 && (
                       <p className="px-3 py-1 text-[11px] text-muted-foreground/60">
-                        No analyses yet
+                        {t("sidebar.noAnalysesYet")}
                       </p>
                     )}
                     <NewAnalysisDialog />
@@ -2218,14 +2275,18 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                             new CustomEvent("analytics:open-command-palette"),
                           )
                         }
-                        aria-label="Search"
+                        aria-label={t("sidebar.search")}
                         className="flex items-center justify-center rounded-lg p-2 text-muted-foreground transition-all hover:text-primary cursor-pointer hover:bg-sidebar-accent/50"
                       >
                         <IconSearch className="h-4 w-4" />
                       </button>
                     </TooltipTrigger>
                     <TooltipContent side="top">
-                      <p>Search ({shortcutModifierLabel()}+K)</p>
+                      <p>
+                        {t("sidebar.searchShortcut", {
+                          shortcut: `${shortcutModifierLabel()}+K`,
+                        })}
+                      </p>
                     </TooltipContent>
                   </Tooltip>
                   <Popover open={logoutOpen} onOpenChange={setLogoutOpen}>
@@ -2238,7 +2299,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                         </PopoverTrigger>
                       </TooltipTrigger>
                       <TooltipContent side="top">
-                        <p>Sign Out</p>
+                        <p>{t("sidebar.signOut")}</p>
                       </TooltipContent>
                     </Tooltip>
                     <PopoverContent
@@ -2246,7 +2307,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       side="top"
                       align="start"
                     >
-                      <p className="text-sm mb-3">Sign out?</p>
+                      <p className="text-sm mb-3">
+                        {t("sidebar.signOutTitle")}
+                      </p>
                       <div className="flex gap-2">
                         <button
                           onClick={() => {
@@ -2255,13 +2318,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                           }}
                           className="flex-1 rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90 transition-colors"
                         >
-                          Yes
+                          {t("sidebar.yes")}
                         </button>
                         <button
                           onClick={() => setLogoutOpen(false)}
                           className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-sidebar-accent/50 transition-colors"
                         >
-                          Cancel
+                          {t("sidebar.cancel")}
                         </button>
                       </div>
                     </PopoverContent>
@@ -2284,7 +2347,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       </button>
                     </TooltipTrigger>
                     <TooltipContent side="top">
-                      <p>{light ? "Dark mode" : "Light mode"}</p>
+                      <p>
+                        {light ? t("sidebar.darkMode") : t("sidebar.lightMode")}
+                      </p>
                     </TooltipContent>
                   </Tooltip>
                 </div>