@svadmin/ui 0.38.1 → 0.38.5

package/dist/components/Sidebar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { getResources, canAccessAsync } from '@svadmin/core';
+  import { captureAdminContext, getResources, canAccessAsync } from '@svadmin/core';
   import type { Identity, MenuItem } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
   import { getPath } from '../router-state.svelte.js';
-  import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { toggleTheme, getResolvedTheme, getColorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
@@ -22,6 +22,8 @@
     Calendar, Bell, Clock, Tag, Trash2, Shield
   } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { collapsed, identity, title, onToggle, onLogout, menu, routeMode = 'auto' }: {
     collapsed: boolean;
     identity: Identity | null;
@@ -31,6 +33,7 @@
     menu?: MenuItem[];
     routeMode?: 'hash' | 'path' | 'auto';
   } = $props();
+  const adminContext = captureAdminContext();
 
   const effectiveRouteMode = $derived(
     routeMode === 'auto'
@@ -38,6 +41,11 @@
       : routeMode
   );
 
+  function formatSidebarLink(path: string): string {
+    if (adminContext.routerProvider) return adminContext.formatLink(path);
+    return effectiveRouteMode === 'hash' ? `#${path}` : path;
+  }
+
   const iconMap: Record<string, typeof LayoutDashboard> = {
     'dashboard': LayoutDashboard,
     'posts': FileText,
@@ -97,7 +105,7 @@
   let navItems = $state.raw<NavItem[]>([]);
 
   $effect(() => {
-    getLocale();
+    const homeLabel = i18n.t('common.home');
     const currentResources = getResources();
     let cancelled = false;
 
@@ -110,7 +118,7 @@
       }
     })).then(results => {
       if (cancelled) return;
-      const items: NavItem[] = [{ path: '/', label: t('common.home'), Icon: LayoutDashboard }];
+      const items: NavItem[] = [{ path: '/', label: homeLabel, Icon: LayoutDashboard }];
       for (const { r, can } of results) {
         if (can) {
           items.push({
@@ -128,14 +136,14 @@
   });
 
   function toggleLocale() {
-    const locales = getAvailableLocales();
-    const current = getLocale();
+    const locales = i18n.getAvailableLocales();
+    const current = i18n.locale;
     const idx = locales.indexOf(current);
     const next = locales[(idx + 1) % locales.length];
-    setLocale(next);
+    i18n.setLocale(next);
   }
 
-  const localeLabel = $derived(getLocale() === 'zh-CN' ? '中' : 'EN');
+  const localeLabel = $derived(i18n.locale === 'zh-CN' ? '中' : 'EN');
 
   const path = $derived(getPath());
 
@@ -210,12 +218,12 @@
 >
   <div class="flex h-[70px] items-center shrink-0" class:px-5={!collapsed} class:justify-center={collapsed}>
     {#if !collapsed}
-      <a href="#/" class="flex items-center gap-2.5 group" onclick={(e) => { e.preventDefault(); navigate('/'); }}>
+      <a href={formatSidebarLink('/')} class="flex items-center gap-2.5 group" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
         <div class="w-[34px] h-[34px] rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 transition-transform group-hover:scale-105" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
         <span class="font-semibold text-[15px] tracking-[-0.01em] text-sidebar-foreground">{title}</span>
       </a>
     {:else}
-      <a href="#/" class="group" aria-label={title} onclick={(e) => { e.preventDefault(); navigate('/'); }}>
+      <a href={formatSidebarLink('/')} class="group" aria-label={title} onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
         <div class="w-[34px] h-[34px] rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 transition-transform group-hover:scale-105" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
       </a>
     {/if}
@@ -248,8 +256,8 @@
               {#each group.items as item, _i (_i)}
                 {@const active = isActive(item.path)}
                 <a
-                  href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                  onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+                  href={formatSidebarLink(item.path)}
+                  onclick={(e) => { e.preventDefault(); adminContext.navigate(item.path); }}
                   class="sidebar-menu-item flex items-center gap-2.5 rounded-md px-[10px] {pyClassGroupItem} text-[13px] font-medium transition-colors duration-150
                   {active
                     ? 'sidebar-menu-item-active bg-sidebar-accent text-primary'
@@ -271,8 +279,8 @@
                 {#snippet child({ props }: { props: Record<string, unknown> })}
                   <a
                     {...props}
-                    href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                    onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+                    href={formatSidebarLink(item.path)}
+                    onclick={(e) => { e.preventDefault(); adminContext.navigate(item.path); }}
                     class="sidebar-menu-item flex items-center justify-center rounded-md px-2 {pyClass} transition-colors duration-150
                     {active
                       ? 'sidebar-menu-item-active bg-sidebar-accent text-primary'
@@ -288,8 +296,8 @@
             </Tooltip.Root>
           {:else}
             <a
-              href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-              onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+              href={formatSidebarLink(item.path)}
+              onclick={(e) => { e.preventDefault(); adminContext.navigate(item.path); }}
               class="sidebar-menu-item flex items-center gap-2.5 rounded-md px-[10px] {pyClass} text-[13px] font-medium transition-colors duration-150
               {active
                 ? 'sidebar-menu-item-active bg-sidebar-accent text-primary'
@@ -315,7 +323,7 @@
             onclick={() => { if (!colorPickerOpen) colorPickerOpenedAt = Date.now(); colorPickerOpen = !colorPickerOpen; }}
           >
             <Palette class="h-3.5 w-3.5" />
-            <span class="flex-1 text-left">{t('common.toggleTheme')}</span>
+            <span class="flex-1 text-left">{i18n.t('common.toggleTheme')}</span>
             <span
               class="h-3 w-3 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
               style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
@@ -363,21 +371,21 @@
         </div>
         <div class="mt-1 flex items-center justify-between px-1">
           <div class="flex items-center gap-0.5">
-            <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
+            <TooltipButton tooltip={i18n.t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
               <span class="text-[11px] font-semibold">{localeLabel}</span>
             </TooltipButton>
-            <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
+            <TooltipButton tooltip={i18n.t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
               {#if getResolvedTheme() === 'dark'}
                 <Sun class="h-3.5 w-3.5" />
               {:else}
                 <Moon class="h-3.5 w-3.5" />
               {/if}
             </TooltipButton>
-            <TooltipButton tooltip={t('settings.title')} variant="ghost" size="icon-sm" onclick={() => navigate('/settings')} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
+            <TooltipButton tooltip={i18n.t('settings.title')} variant="ghost" size="icon-sm" onclick={() => adminContext.navigate('/settings')} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
               <Settings class="h-3.5 w-3.5" />
             </TooltipButton>
           </div>
-          <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
+          <TooltipButton tooltip={i18n.t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
             <ChevronLeft class="h-3.5 w-3.5" />
           </TooltipButton>
         </div>
@@ -392,7 +400,7 @@
               </Button>
             {/snippet}
           </Tooltip.Trigger>
-          <Tooltip.Content side="right">{t('common.switchLanguage')}</Tooltip.Content>
+          <Tooltip.Content side="right">{i18n.t('common.switchLanguage')}</Tooltip.Content>
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger>
@@ -406,7 +414,7 @@
               </Button>
             {/snippet}
           </Tooltip.Trigger>
-          <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
+          <Tooltip.Content side="right">{i18n.t('common.toggleTheme')}</Tooltip.Content>
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger>
@@ -416,7 +424,7 @@
               </Button>
             {/snippet}
           </Tooltip.Trigger>
-          <Tooltip.Content side="right">{t('common.toggleSidebar')}</Tooltip.Content>
+          <Tooltip.Content side="right">{i18n.t('common.toggleSidebar')}</Tooltip.Content>
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger>
@@ -426,15 +434,15 @@
               </Button>
             {/snippet}
           </Tooltip.Trigger>
-          <Tooltip.Content side="right">{t('common.logout')}</Tooltip.Content>
+          <Tooltip.Content side="right">{i18n.t('common.logout')}</Tooltip.Content>
         </Tooltip.Root>
       </div>
     {:else}
       <div class="flex justify-center gap-1 p-3">
-        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
+        <TooltipButton tooltip={i18n.t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
           <span class="text-[11px] font-semibold">{localeLabel}</span>
         </TooltipButton>
-        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
+        <TooltipButton tooltip={i18n.t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-3.5 w-3.5" />
           {:else}

package/dist/components/SidebarItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { MenuItem } from '@svadmin/core';
+  import { captureAdminContext, type MenuItem } from '@svadmin/core';
   import * as Collapsible from './ui/collapsible/index.js';
   import * as Tooltip from './ui/tooltip/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -12,14 +12,14 @@
     Circle,
   } from '@lucide/svelte';
 
-  import { formatLink } from '@svadmin/core/router';
-  
+
   let { item, currentPath, collapsed = false, depth = 0 }: {
     item: MenuItem;
     currentPath: string;
     collapsed?: boolean;
     depth?: number;
   } = $props();
+  const adminContext = captureAdminContext();
 
   const iconMap: Record<string, typeof LayoutDashboard> = {
     dashboard: LayoutDashboard,
@@ -90,7 +90,7 @@
   const childActive = $derived(hasActiveChild(item));
   const isExternal = $derived(item.target === '_blank' || item.href?.startsWith('http'));
 
-  const finalHref = $derived(isExternal ? item.href : (item.href ? formatLink(item.href) : undefined));
+  const finalHref = $derived(isExternal ? item.href : (item.href ? adminContext.formatLink(item.href) : undefined));
 
   let isOpen = $state(false);
   $effect(() => { if (childActive) isOpen = true; });

package/dist/components/SidebarItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MenuItem } from '@svadmin/core';
+import { type MenuItem } from '@svadmin/core';
 import SidebarItem from './SidebarItem.svelte';
 type $$ComponentProps = {
     item: MenuItem;

package/dist/components/StepsForm.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-  import { useStepsForm, deriveValidator } from '@svadmin/core';
+  import { captureAdminContext, useStepsForm, deriveValidator } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
   import { getResource } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Button } from './ui/button/index.js';
   import * as Card from './ui/card/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -12,6 +12,8 @@
   import { Save, ArrowLeft, ArrowRight, Check, Loader2 } from '@lucide/svelte';
   import FieldRenderer from './FieldRenderer.svelte';
 
+  const i18n = useTranslation();
+
   interface StepDef {
     title: string;
     fields: string[];
@@ -25,6 +27,7 @@
   }
 
   let { resourceName, id, mode = 'create', steps }: Props = $props();
+  const adminContext = captureAdminContext();
 
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
@@ -53,7 +56,7 @@
     return d;
   })());
 
-  const validator = $derived(deriveValidator(flatStepsFields));
+  const validator = $derived(deriveValidator(flatStepsFields, { translate: i18n.t }));
   const stepsCount = $derived(steps.length);
 
   // ─── useStepsForm: form state + step navigation ──────────────────
@@ -147,7 +150,7 @@
     <Card.CardHeader>
       <Card.CardTitle>{steps[form.steps.currentStep]?.title ?? ''}</Card.CardTitle>
       <Badge variant="outline" class="w-fit">
-        {t('common.step')} {form.steps.currentStep + 1} / {totalSteps}
+        {i18n.t('common.step')} {form.steps.currentStep + 1} / {totalSteps}
       </Badge>
     </Card.CardHeader>
     <Card.CardContent>
@@ -168,10 +171,10 @@
           <Button
             type="button"
             variant="outline"
-            onclick={() => form.steps.currentStep === 0 ? navigate(`/${resourceName}`) : form.steps.prevStep()}
+            onclick={() => form.steps.currentStep === 0 ? adminContext.navigate(`/${resourceName}`) : form.steps.prevStep()}
           >
             <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
-            {form.steps.currentStep === 0 ? t('common.cancel') : t('common.back')}
+            {form.steps.currentStep === 0 ? i18n.t('common.cancel') : i18n.t('common.back')}
           </Button>
 
           <Button type="submit" disabled={form.submitting}>
@@ -182,7 +185,7 @@
             {:else}
               <ArrowRight class="h-4 w-4" data-icon="inline-start" />
             {/if}
-            {isLastStep ? t('common.save') : t('common.next')}
+            {isLastStep ? i18n.t('common.save') : i18n.t('common.next')}
           </Button>
         </div>
       </form>

package/dist/components/TaskDetails.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useTask, getTaskProvider } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
   import { Loader2 } from '@lucide/svelte';
   import * as Card from './ui/card/index.js';
@@ -21,6 +22,8 @@
     resolveTaskUpdatedAt,
   } from './task-utils.js';
 
+  const i18n = useTranslation();
+
   let {
     task,
     taskId,
@@ -57,7 +60,7 @@
   });
 
   const resolvedTask = $derived(task ?? query.data);
-  const resolvedTitle = $derived(title ?? t('task.detailsTitle'));
+  const resolvedTitle = $derived(title ?? i18n.t('task.detailsTitle'));
 
   function formatDate(value: unknown) {
     if (!value) return '—';
@@ -82,7 +85,7 @@
       {#if resolvedTask}
         {resolveTaskTitle(resolvedTask)}
       {:else}
-        {t('task.detailsSummary')}
+        {i18n.t('task.detailsSummary')}
       {/if}
     </Card.Description>
   </Card.Header>
@@ -90,7 +93,7 @@
     {#if useProviderData && taskProvider && query.isLoading}
       <div class="flex h-40 items-center justify-center text-muted-foreground">
         <Loader2 class="mr-2 h-4 w-4 animate-spin" />
-        {t('task.loadingDetail')}
+        {i18n.t('task.loadingDetail')}
       </div>
     {:else if resolvedTask}
       <div class="flex flex-wrap items-center gap-2">
@@ -104,38 +107,38 @@
 
       <div class="grid gap-4 md:grid-cols-2">
         <div class="space-y-1">
-          <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.createdLabel')}</div>
+          <div class="text-xs uppercase tracking-wide text-muted-foreground">{i18n.t('task.createdLabel')}</div>
           <div class="text-sm">{formatDate(resolveTaskCreatedAt(resolvedTask))}</div>
         </div>
         <div class="space-y-1">
-          <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.updatedLabel')}</div>
+          <div class="text-xs uppercase tracking-wide text-muted-foreground">{i18n.t('task.updatedLabel')}</div>
           <div class="text-sm">{formatDate(resolveTaskUpdatedAt(resolvedTask))}</div>
         </div>
       </div>
 
       {#if resolveTaskMessage(resolvedTask)}
         <div class="space-y-1">
-          <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.messageLabel')}</div>
+          <div class="text-xs uppercase tracking-wide text-muted-foreground">{i18n.t('task.messageLabel')}</div>
           <div class="rounded-md border border-border/60 bg-muted/30 p-3 text-sm">{resolveTaskMessage(resolvedTask)}</div>
         </div>
       {/if}
 
       {#if resolveTaskError(resolvedTask)}
         <div class="space-y-1">
-          <div class="text-xs uppercase tracking-wide text-destructive">{t('task.errorLabel')}</div>
+          <div class="text-xs uppercase tracking-wide text-destructive">{i18n.t('task.errorLabel')}</div>
           <pre class="overflow-auto rounded-md border border-destructive/20 bg-destructive/5 p-3 text-xs text-destructive">{toPrettyJson(resolveTaskError(resolvedTask))}</pre>
         </div>
       {/if}
 
       {#if resolveTaskResult(resolvedTask) !== undefined}
         <div class="space-y-1">
-          <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.resultLabel')}</div>
+          <div class="text-xs uppercase tracking-wide text-muted-foreground">{i18n.t('task.resultLabel')}</div>
           <pre class="overflow-auto rounded-md border border-border/60 bg-muted/20 p-3 text-xs">{toPrettyJson(resolveTaskResult(resolvedTask))}</pre>
         </div>
       {/if}
 
       <div class="space-y-1">
-        <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.payloadLabel')}</div>
+        <div class="text-xs uppercase tracking-wide text-muted-foreground">{i18n.t('task.payloadLabel')}</div>
         <pre class="overflow-auto rounded-md border border-border/60 bg-muted/20 p-3 text-xs">{toPrettyJson(resolvedTask.payload ?? resolvedTask)}</pre>
       </div>
 
@@ -151,7 +154,7 @@
       {/if}
     {:else}
       <div class="flex h-32 items-center justify-center text-sm text-muted-foreground">
-        {t('task.noSelection')}
+        {i18n.t('task.noSelection')}
       </div>
     {/if}
   </Card.Content>

package/dist/components/TaskList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useTaskList, getTaskProvider } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
   import { Loader2 } from '@lucide/svelte';
   import * as Card from './ui/card/index.js';
@@ -19,6 +20,8 @@
     resolveTaskUpdatedAt,
   } from './task-utils.js';
 
+  const i18n = useTranslation();
+
   let {
     tasks,
     taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
@@ -68,8 +71,8 @@
   });
 
   const resolvedTasks = $derived(tasks ?? query.data?.data ?? []);
-  const resolvedTitle = $derived(title ?? (dlq ? t('task.dlqTitle') : t('task.listTitle')));
-  const resolvedEmptyText = $derived(emptyText ?? (dlq ? t('task.noDlq') : t('task.noTasks')));
+  const resolvedTitle = $derived(title ?? (dlq ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')));
+  const resolvedEmptyText = $derived(emptyText ?? (dlq ? i18n.t('task.noDlq') : i18n.t('task.noTasks')));
 
   function formatDate(value: unknown) {
     if (!value) return '—';
@@ -84,9 +87,9 @@
     <Card.Title class="text-base">{resolvedTitle}</Card.Title>
       <Card.Description>
       {#if useProviderData && taskProvider}
-        {t('task.count', { count: (query.data?.total ?? resolvedTasks.length) || 0 })}
+        {i18n.t('task.count', { count: (query.data?.total ?? resolvedTasks.length) || 0 })}
       {:else}
-        {t('task.count', { count: resolvedTasks.length })}
+        {i18n.t('task.count', { count: resolvedTasks.length })}
       {/if}
     </Card.Description>
   </Card.Header>
@@ -94,18 +97,18 @@
     {#if useProviderData && taskProvider && query.isLoading}
       <div class="flex h-40 items-center justify-center text-muted-foreground">
         <Loader2 class="mr-2 h-4 w-4 animate-spin" />
-        {t('task.loadingList')}
+        {i18n.t('task.loadingList')}
       </div>
     {:else}
       <div class="overflow-auto">
         <Table.Root>
           <Table.Header>
             <Table.Row>
-              <Table.Head>{t('task.taskColumn')}</Table.Head>
-              <Table.Head>{t('task.statusColumn')}</Table.Head>
-              <Table.Head>{t('task.updatedColumn')}</Table.Head>
+              <Table.Head>{i18n.t('task.taskColumn')}</Table.Head>
+              <Table.Head>{i18n.t('task.statusColumn')}</Table.Head>
+              <Table.Head>{i18n.t('task.updatedColumn')}</Table.Head>
               {#if showActions}
-                <Table.Head class="text-right">{t('task.actionsColumn')}</Table.Head>
+                <Table.Head class="text-right">{i18n.t('task.actionsColumn')}</Table.Head>
               {/if}
             </Table.Row>
           </Table.Header>
@@ -139,7 +142,7 @@
                         <CancelTaskButton taskId={task.id} {taskProvider} />
                       {/if}
                       <Button variant="ghost" size="sm" onclick={(e) => { e.stopPropagation(); onSelect?.(task); }}>
-                        {t('task.detailsAction')}
+                        {i18n.t('task.detailsAction')}
                       </Button>
                     </div>
                   </Table.Cell>