refactor(frontend): use i18next interpolation instead of manual replace (#1074)

Convert every t('key').replace('{ph}', value) call site (77 t() calls
across 37 files) to native i18next interpolation t('key', { ph: value }),
and switch the corresponding locale placeholders from {ph} to {{ph}} in
all 14 locales (842 strings).

- count params are passed as numbers, enabling i18next plural resolution
  (podcasts.usedByCount now uses the existing _one/_other forms instead
  of a manual ternary)
- podcasts.tokens/chars keep their pre-formatted display value
  (formatNumber) under a renamed {{value}} placeholder, since i18next
  types reserve count for numbers
- escapeValue: false was already set in src/lib/i18n.ts (React escapes
  at render), so rendered output is unchanged
- unused-key test now strips plural suffixes before matching, and a new
  interpolation test covers variables, plurals and non-escaping

Author: lfnovo

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - CI now gates every PR on `ruff check` (backend lint), `npm run lint` (frontend ESLint) and `npm run build` (frontend production build), in addition to the existing test suites
 
 ### Fixed
+- Frontend translations now use i18next interpolation (`t('key', { count })`) instead of manual `.replace('{count}', ...)` string surgery across ~75 call sites — locale placeholders changed from `{name}` to `{{name}}` in all 14 locales. This restores proper pluralization (e.g. "used by N episodes" now goes through i18next plural forms) and lets translators reorder placeholders freely
 - Podcast generation dialog: the token/char counter no longer fires a request storm on rapid checkbox toggling (debounced, with a stale-response guard so a slow response can't overwrite a fresher count) and the dialog now closes as soon as the episode-list refetch completes instead of after a fixed 500ms timer; the 983-line component was also split (content selection panel and selection helpers extracted, duplicated context-config logic deduplicated) with no behavior changes
 
 ### Changed

frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx

@@ -256,16 +256,13 @@ export function RebuildEmbeddings() {
                 <div className="flex justify-between text-sm">
                   <span>{t('common.progress')}</span>
                   <span className="font-medium">
-                    {t('advanced.rebuild.itemsProcessed')
-                      .replace('{processed}', processedItems.toString())
-                      .replace('{total}', totalItems.toString())
-                      .replace('{percent}', progressPercent.toFixed(1))}
+                    {t('advanced.rebuild.itemsProcessed', { processed: processedItems.toString(), total: totalItems.toString(), percent: progressPercent.toFixed(1) })}
                   </span>
                 </div>
                 <Progress value={progressPercent} className="h-2" />
                 {failedItems > 0 && (
                   <p className="text-sm text-yellow-600">
-                    ⚠️ {t('advanced.rebuild.failedItems').replace('{count}', failedItems.toString())}
+                    ⚠️ {t('advanced.rebuild.failedItems', { count: failedItems })}
                   </p>
                 )}
               </div>
@@ -303,7 +300,7 @@ export function RebuildEmbeddings() {
 
             {status.started_at && (
               <div className="text-sm text-muted-foreground space-y-1">
-                <p>{t('common.created').replace('{time}', new Date(status.started_at).toLocaleString())}</p>
+                <p>{t('common.created', { time: new Date(status.started_at).toLocaleString() })}</p>
                 {status.completed_at && (
                   <p>{t('notebooks.updated')}: {new Date(status.completed_at).toLocaleString()}</p>
                 )}

frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx

@@ -66,7 +66,7 @@ export function SystemInfo() {
             <span className="text-sm font-medium">{t('advanced.status')}</span>
             {config?.hasUpdate ? (
               <Badge variant="destructive">
-                {t('advanced.updateAvailable').replace('{version}', config.latestVersion || '')}
+                {t('advanced.updateAvailable', { version: config.latestVersion || '' })}
               </Badge>
             ) : config?.latestVersion ? (
               <Badge variant="outline" className="text-green-600 border-green-600">

frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx

@@ -106,10 +106,10 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
             </CardDescription>
 
             <div className="mt-3 text-xs text-muted-foreground">
-              {t('common.updated').replace('{time}', formatDistanceToNow(new Date(notebook.updated), { 
+              {t('common.updated', { time: formatDistanceToNow(new Date(notebook.updated), { 
                 addSuffix: true,
                 locale: getDateLocale(language)
-              }))}
+              }) })}
             </div>
 
             {/* Item counts footer */}

frontend/src/app/(dashboard)/notebooks/components/NotebookDeleteDialog.tsx

@@ -71,7 +71,7 @@ export function NotebookDeleteDialog({
         <AlertDialogHeader>
           <AlertDialogTitle>{t('notebooks.deleteNotebook')}</AlertDialogTitle>
           <AlertDialogDescription>
-            {t('notebooks.deleteNotebookDesc').replace('{name}', notebookName)}
+            {t('notebooks.deleteNotebookDesc', { name: notebookName })}
           </AlertDialogDescription>
         </AlertDialogHeader>
 
@@ -91,10 +91,7 @@ export function NotebookDeleteDialog({
               <div className="text-sm">
                 {preview.note_count > 0 ? (
                   <p className="text-destructive font-medium">
-                    {t('notebooks.deleteNotebookNotes').replace(
-                      '{count}',
-                      String(preview.note_count)
-                    )}
+                    {t('notebooks.deleteNotebookNotes', { count: preview.note_count })}
                   </p>
                 ) : (
                   <p className="text-muted-foreground">{t('notebooks.deleteNotebookNoNotes')}</p>
@@ -105,10 +102,7 @@ export function NotebookDeleteDialog({
               {preview.shared_source_count > 0 && (
                 <div className="text-sm">
                   <p className="text-muted-foreground">
-                    {t('notebooks.deleteNotebookSharedSources').replace(
-                      '{count}',
-                      String(preview.shared_source_count)
-                    )}
+                    {t('notebooks.deleteNotebookSharedSources', { count: preview.shared_source_count })}
                   </p>
                 </div>
               )}
@@ -124,10 +118,7 @@ export function NotebookDeleteDialog({
               {preview.exclusive_source_count > 0 && (
                 <div className="pt-3 border-t space-y-3">
                   <p className="text-sm text-destructive font-medium">
-                    {t('notebooks.deleteNotebookExclusiveSources').replace(
-                      '{count}',
-                      String(preview.exclusive_source_count)
-                    )}
+                    {t('notebooks.deleteNotebookExclusiveSources', { count: preview.exclusive_source_count })}
                   </p>
                   <RadioGroup
                     value={sourceAction}

frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx

@@ -110,8 +110,8 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
           />
 
           <div className="text-sm text-muted-foreground">
-            {t('common.created').replace('{time}', formatDistanceToNow(new Date(notebook.created), { addSuffix: true, locale: dfLocale }))} • 
-            {t('common.updated').replace('{time}', formatDistanceToNow(new Date(notebook.updated), { addSuffix: true, locale: dfLocale }))}
+            {t('common.created', { time: formatDistanceToNow(new Date(notebook.created), { addSuffix: true, locale: dfLocale }) })} • 
+            {t('common.updated', { time: formatDistanceToNow(new Date(notebook.updated), { addSuffix: true, locale: dfLocale }) })}
           </div>
         </div>
       </div>

frontend/src/app/(dashboard)/notebooks/components/NotebookRow.tsx

@@ -85,10 +85,10 @@ export function NotebookRow({ notebook }: NotebookRowProps) {
         </div>
 
         <div className="hidden sm:block w-40 shrink-0 text-right text-xs text-muted-foreground">
-          {t('common.updated').replace('{time}', formatDistanceToNow(new Date(notebook.updated), {
+          {t('common.updated', { time: formatDistanceToNow(new Date(notebook.updated), {
             addSuffix: true,
             locale: getDateLocale(language)
-          }))}
+          }) })}
         </div>
 
         <DropdownMenu>

frontend/src/app/(dashboard)/search/page.tsx

@@ -428,15 +428,15 @@ export default function SearchPage() {
                   <div className="mt-6 space-y-3">
                     <div className="flex items-center justify-between">
                       <h3 className="text-sm font-medium">
-                        {t('searchPage.resultsFound').replace('{count}', searchMutation.data.total_count.toString())}
+                        {t('searchPage.resultsFound', { count: searchMutation.data.total_count })}
                       </h3>
                       <Badge variant="outline">{searchMutation.data.search_type === 'text' ? t('searchPage.textSearch') : t('searchPage.vectorSearch')}</Badge>
                     </div>
 
                     {searchMutation.data.results.length === 0 ? (
                       <Card>
                         <CardContent className="pt-6 text-center text-muted-foreground">
-                          {t('searchPage.noResultsFor').replace('{query}', searchQuery)}
+                          {t('searchPage.noResultsFor', { query: searchQuery })}
                         </CardContent>
                       </Card>
                     ) : (
@@ -472,7 +472,7 @@ export default function SearchPage() {
                                 <Collapsible className="mt-3">
                                   <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
                                     <ChevronDown className="h-4 w-4" />
-                                    {t('searchPage.matches').replace('{count}', result.matches.length.toString())}
+                                    {t('searchPage.matches', { count: result.matches.length })}
                                   </CollapsibleTrigger>
                                   <CollapsibleContent className="mt-2 space-y-1">
                                     {result.matches.map((match, i) => (

frontend/src/app/(dashboard)/sources/page.tsx

@@ -446,7 +446,7 @@ export default function SourcesPage() {
         open={deleteDialog.open}
         onOpenChange={(open) => setDeleteDialog({ open, source: deleteDialog.source })}
         title={t('sources.delete')}
-        description={t('sources.deleteConfirmWithTitle').replace('{title}', deleteDialog.source?.title || t('sources.untitledSource'))}
+        description={t('sources.deleteConfirmWithTitle', { title: deleteDialog.source?.title || t('sources.untitledSource') })}
         confirmText={t('common.delete')}
         confirmVariant="destructive"
         onConfirm={handleDeleteConfirm}

frontend/src/components/common/CommandPalette.tsx

@@ -187,15 +187,15 @@ export function CommandPalette() {
               forceMount
             >
               <Search className="h-4 w-4" />
-              <span>{t('searchPage.searchResultsFor').replace('{query}', query)}</span>
+              <span>{t('searchPage.searchResultsFor', { query: query })}</span>
             </CommandItem>
             <CommandItem
               value={`__ask__ ${query}`}
               onSelect={handleAsk}
               forceMount
             >
               <MessageCircleQuestion className="h-4 w-4" />
-              <span>{t('searchPage.askAbout').replace('{query}', query)}</span>
+              <span>{t('searchPage.askAbout', { query: query })}</span>
             </CommandItem>
           </CommandGroup>
         )}
@@ -274,15 +274,15 @@ export function CommandPalette() {
                 forceMount
               >
                 <Search className="h-4 w-4" />
-                <span>{t('searchPage.searchResultsFor').replace('{query}', query)}</span>
+                <span>{t('searchPage.searchResultsFor', { query: query })}</span>
               </CommandItem>
               <CommandItem
                 value={`__ask__ ${query}`}
                 onSelect={handleAsk}
                 forceMount
               >
                 <MessageCircleQuestion className="h-4 w-4" />
-                <span>{t('searchPage.askAbout').replace('{query}', query)}</span>
+                <span>{t('searchPage.askAbout', { query: query })}</span>
               </CommandItem>
             </CommandGroup>
           </>