@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/app/main.tsx

@@ -7,40 +7,66 @@ import { useExtendedRouter } from '@/vdb/framework/page/use-extended-router.js';
 import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
 import { defaultLocale, dynamicActivate } from '@/vdb/providers/i18n-provider.js';
-import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { AnyRoute, createRouter, RouterOptions, RouterProvider } from '@tanstack/react-router';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
+import { useUiLanguageLoader } from '@/vdb/hooks/use-ui-language-loader.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { DirectionProvider } from '@radix-ui/react-direction';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AppProviders, queryClient } from './app-providers.js';
+import { setDocumentDirection } from './common/set-document-direction.js';
 import { routeTree } from './routeTree.gen.js';
 import './styles.css';
 
-// Register things for typesafety
-declare module '@tanstack/react-router' {
-    interface Register {
-        router: typeof router;
-    }
-}
+const processedBaseUrl = (() => {
+    const baseUrl = import.meta.env.BASE_URL;
+    if (!baseUrl || baseUrl === '/') return undefined;
+    // Ensure leading slash, remove trailing slash
+    const normalized = baseUrl.startsWith('/') ? baseUrl : '/' + baseUrl;
+    return normalized.endsWith('/') ? normalized.slice(0, -1) : normalized;
+})();
 
-export const router = createRouter({
-    routeTree,
-    defaultPreload: 'intent',
+const routerOptions: RouterOptions<AnyRoute, any> = {
+    defaultPreload: 'intent' as const,
     scrollRestoration: true,
-    // In case the dashboard gets served from a subpath, we need to set the basepath based on the environment variable
-    ...(import.meta.env.BASE_URL ? { basepath: import.meta.env.BASE_URL } : {}),
+    basepath: processedBaseUrl,
     context: {
         /* eslint-disable @typescript-eslint/no-non-null-assertion */
         auth: undefined!, // This will be set after we wrap the app in an AuthProvider
         queryClient,
     },
     defaultErrorComponent: ({ error }: { error: Error }) => <div>Uh Oh!!! {error.message}</div>,
+};
+
+// Create a type-only router instance for TypeScript type registration
+// The actual runtime router is created in InnerApp component
+const typeRouter = createRouter({
+    ...routerOptions,
+    routeTree,
 });
 
+// Register the router type for TypeScript
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof typeRouter;
+    }
+}
+
 function InnerApp() {
     const auth = useAuth();
-    const extendedRouter = useExtendedRouter(router);
+    const router = useExtendedRouter(routeTree, routerOptions);
     const serverConfig = useServerConfig();
+    const { isRTL } = useDisplayLocale();
     const [hasSetCustomFieldsMap, setHasSetCustomFieldsMap] = React.useState(false);
+    const { settings } = useUserSettings();
+    const { loadAndActivateLocale } = useUiLanguageLoader();
+
+    useEffect(() => {
+        void loadAndActivateLocale(settings.displayLanguage);
+    }, [settings.displayLanguage]);
 
     useEffect(() => {
         if (!serverConfig) {
@@ -50,11 +76,18 @@ function InnerApp() {
         setHasSetCustomFieldsMap(true);
     }, [serverConfig?.entityCustomFields.length]);
 
+    useEffect(() => {
+        setDocumentDirection(isRTL ? 'rtl' : 'ltr');
+    }, [isRTL]);
+
     return (
         <>
-            {(hasSetCustomFieldsMap || auth.status === 'unauthenticated') && (
-                <RouterProvider router={extendedRouter} context={{ auth, queryClient }} />
-            )}
+            <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'}>
+                {(hasSetCustomFieldsMap || auth.status === 'unauthenticated') && (
+                    <RouterProvider router={router} context={{ auth, queryClient }} />
+                )}
+                {settings.devMode ? <ReactQueryDevtools /> : null}
+            </DirectionProvider>
         </>
     );
 }
@@ -64,7 +97,7 @@ function App() {
     const { extensionsLoaded } = useDashboardExtensions();
     useEffect(() => {
         // With this method we dynamically load the catalogs
-        dynamicActivate(defaultLocale, () => {
+        void dynamicActivate(defaultLocale, () => {
             setI18nLoaded(true);
         });
         registerDefaults();

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -5,7 +5,7 @@ import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { administratorListDocument } from './administrators.graphql.js';
@@ -20,7 +20,7 @@ function AdministratorListPage() {
     return (
         <ListPage
             pageId="administrator-list"
-            title="Administrators"
+            title={<Trans>Administrators</Trans>}
             listQuery={administratorListDocument}
             route={Route}
             onSearchTermChange={searchTerm => {
@@ -32,7 +32,8 @@ function AdministratorListPage() {
             }}
             additionalColumns={{
                 name: {
-                    header: 'Name',
+                    meta: { dependencies: ['id', 'firstName', 'lastName'] },
+                    header: () => <Trans>Name</Trans>,
                     cell: ({ row }) => (
                         <DetailPageButton
                             id={row.original.id}
@@ -41,11 +42,12 @@ function AdministratorListPage() {
                     ),
                 },
                 roles: {
-                    header: 'Roles',
+                    meta: { dependencies: ['user'] },
+                    header: () => <Trans>Roles</Trans>,
                     cell: ({ row }) => {
                         return (
                             <div className="flex flex-wrap gap-2">
-                                {row.original.user.roles.map(role => {
+                                {row.original.user?.roles.map(role => {
                                     return (
                                         <Badge variant="secondary" key={role.id}>
                                             <RoleCodeLabel code={role.code} />
@@ -59,7 +61,6 @@ function AdministratorListPage() {
             }}
             customizeColumns={{
                 emailAddress: {
-                    id: 'Identifier',
                     header: () => <Trans>Identifier</Trans>,
                     cell: ({ row }) => {
                         return <div>{row.original.emailAddress}</div>;
@@ -68,6 +69,7 @@ function AdministratorListPage() {
             }}
             defaultVisibility={{
                 emailAddress: true,
+                name: true,
             }}
             defaultColumnOrder={['name', 'emailAddress', 'roles']}
             bulkActions={[

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
@@ -48,7 +48,7 @@ function AdministratorDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -74,16 +74,27 @@ function AdministratorDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t(creatingNewEntity ? 'Successfully created administrator' : 'Successfully updated administrator'));
+            toast(
+                i18n.t(
+                    creatingNewEntity
+                        ? 'Successfully created administrator'
+                        : 'Successfully updated administrator',
+                ),
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast(i18n.t(creatingNewEntity ? 'Failed to create administrator' : 'Failed to update administrator'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
+            toast(
+                i18n.t(
+                    creatingNewEntity ? 'Failed to create administrator' : 'Failed to update administrator',
+                ),
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
         },
     });
 

package/src/app/routes/_authenticated/_administrators/components/role-permissions-display.tsx

@@ -5,7 +5,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 
 const rolesByIdDocument = graphql(`
@@ -29,7 +29,7 @@ interface RolePermissionsDisplayProps {
 }
 
 export function RolePermissionsDisplay({ value = [] }: Readonly<RolePermissionsDisplayProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 
     const { data } = useQuery({

package/src/app/routes/_authenticated/_assets/assets.tsx

@@ -1,6 +1,6 @@
 import { AssetGallery } from '@/vdb/components/shared/asset/asset-gallery.js';
 import { Page, PageBlock, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute } from '@tanstack/react-router';
 import { DeleteAssetsBulkAction } from './components/asset-bulk-actions.js';
 

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -18,7 +18,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute } from '@tanstack/react-router';
 import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
@@ -45,7 +45,7 @@ export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
 
 function AssetDetailPage() {
     const params = Route.useParams();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const imageRef = useRef<HTMLImageElement>(null);
     const [size, setSize] = useState<PreviewPreset>('medium');
@@ -67,11 +67,11 @@ function AssetDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async () => {
-            toast(i18n.t('Successfully updated asset'));
+            toast(t`Successfully updated asset`);
             form.reset(form.getValues());
         },
         onError: err => {
-            toast(i18n.t('Failed to update asset'), {
+            toast(t`Failed to update asset`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_assets/components/asset-bulk-actions.tsx

@@ -6,7 +6,7 @@ import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-
 import { api } from '@/vdb/graphql/api.js';
 import { AssetFragment } from '@/vdb/graphql/fragments.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { deleteAssetsDocument } from '../assets.graphql.js';
 
 export const DeleteAssetsBulkAction = ({
@@ -16,19 +16,21 @@ export const DeleteAssetsBulkAction = ({
     selection: AssetFragment[];
     refetch: () => void;
 }) => {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
+    const selectionLength = selection.length;
     const { mutate } = useMutation({
         mutationFn: api.mutate(deleteAssetsDocument),
         onSuccess: (result: ResultOf<typeof deleteAssetsDocument>) => {
             if (result.deleteAssets.result === 'DELETED') {
-                toast.success(i18n.t(`Deleted ${selection.length} assets`));
+                toast.success(t`Deleted ${selectionLength} assets`);
             } else {
-                toast.error(i18n.t(`Failed to delete assets: ${result.deleteAssets.message}`));
+                const message = result.deleteAssets.message;
+                toast.error(t`Failed to delete assets: ${message}`);
             }
             refetch();
         },
         onError: () => {
-            toast.error(`Failed to delete ${selection.length} assets`);
+            toast.error(`Failed to delete ${selectionLength} assets`);
         },
     });
 
@@ -37,7 +39,7 @@ export const DeleteAssetsBulkAction = ({
             requiresPermission={['DeleteCatalog', 'DeleteAsset']}
             onClick={() => mutate({ input: { assetIds: selection.map(s => s.id) } })}
             label={<Trans>Delete</Trans>}
-            confirmationText={<Trans>Are you sure you want to delete {selection.length} assets?</Trans>}
+            confirmationText={<Trans>Are you sure you want to delete {selectionLength} assets?</Trans>}
             icon={TrashIcon}
             className="text-destructive"
         />

package/src/app/routes/_authenticated/_assets/components/asset-tag-filter.tsx

@@ -10,8 +10,8 @@ import {
 } from '@/vdb/components/ui/command.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Check, Filter, Loader2, X } from 'lucide-react';

package/src/app/routes/_authenticated/_assets/components/asset-tags-editor.tsx

@@ -10,8 +10,8 @@ import {
 import { Label } from '@/vdb/components/ui/label.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Check, ChevronsUpDown, Settings2, X } from 'lucide-react';
 import { useCallback, useState } from 'react';

package/src/app/routes/_authenticated/_assets/components/manage-tags-dialog.tsx

@@ -9,8 +9,8 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Trash2 } from 'lucide-react';
 import { useState } from 'react';
@@ -108,10 +108,7 @@ export function ManageTagsDialog({ open, onOpenChange, onTagsUpdated }: Readonly
             return (
                 <div
                     key={tag.id}
-                    className={cn(
-                        'flex items-center gap-2 p-2 rounded-md',
-                        isDeleted && 'opacity-50',
-                    )}
+                    className={cn('flex items-center gap-2 p-2 rounded-md', isDeleted && 'opacity-50')}
                 >
                     <Input
                         value={getDisplayValue(tag.id)}
@@ -199,9 +196,7 @@ export function ManageTagsDialog({ open, onOpenChange, onTagsUpdated }: Readonly
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="max-h-[400px] overflow-y-auto space-y-2 py-4">
-                    {renderTagsList()}
-                </div>
+                <div className="max-h-[400px] overflow-y-auto space-y-2 py-4">{renderTagsList()}</div>
 
                 <DialogFooter>
                     <Button variant="outline" onClick={handleCancel} disabled={isSaving}>

package/src/app/routes/_authenticated/_channels/channels.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { channelListQuery } from './channels.graphql.js';
@@ -21,7 +21,7 @@ function ChannelListPage() {
     return (
         <ListPage
             pageId="channel-list"
-            title="Channels"
+            title={<Trans>Channels</Trans>}
             listQuery={channelListQuery}
             route={Route}
             defaultVisibility={{
@@ -39,7 +39,6 @@ function ChannelListPage() {
             }}
             customizeColumns={{
                 code: {
-                    header: 'Code',
                     cell: ({ row }) => {
                         return (
                             <DetailPageButton
@@ -50,13 +49,11 @@ function ChannelListPage() {
                     },
                 },
                 seller: {
-                    header: 'Seller',
                     cell: ({ row }) => {
                         return row.original.seller?.name;
                     },
                 },
                 defaultLanguageCode: {
-                    header: 'Default Language',
                     cell: ({ row }) => {
                         return formatLanguageName(row.original.defaultLanguageCode);
                     },
@@ -74,7 +71,7 @@ function ChannelListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                            New Channel
+                            <Trans>New Channel</Trans>
                         </Link>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -23,7 +23,7 @@ import {
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';
@@ -49,7 +49,7 @@ function ChannelDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { refreshChannels } = useChannel();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
@@ -82,20 +82,20 @@ function ChannelDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             if (data.__typename === 'Channel') {
-                toast(i18n.t(creatingNewEntity ? 'Successfully created channel' : 'Successfully updated channel'));
+                toast(creatingNewEntity ? t`Successfully created channel` : t`Successfully updated channel`);
                 refreshChannels();
                 resetForm();
                 if (creatingNewEntity) {
                     await navigate({ to: `../$id`, params: { id: data.id } });
                 }
             } else {
-                toast(i18n.t(creatingNewEntity ? 'Failed to create channel' : 'Failed to update channel'), {
+                toast(creatingNewEntity ? t`Failed to create channel` : t`Failed to update channel`, {
                     description: data.message,
                 });
             }
         },
         onError: err => {
-            toast(i18n.t(creatingNewEntity ? 'Failed to create channel' : 'Failed to update channel'), {
+            toast(creatingNewEntity ? t`Failed to create channel` : t`Failed to update channel`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { FetchQueryOptions, useQueries } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
@@ -82,7 +82,7 @@ function CollectionListPage() {
         <>
             <ListPage
                 pageId="collection-list"
-                title="Collections"
+                title={<Trans>Collections</Trans>}
                 listQuery={collectionListDocument}
                 transformVariables={input => {
                     const filterTerm = input.options?.filter?.name?.contains;
@@ -96,13 +96,17 @@ function CollectionListPage() {
                 }}
                 customizeColumns={{
                     name: {
-                        header: 'Collection Name',
+                        meta: {
+                            // This column needs the following fields to always be available
+                            // in order to correctly render.
+                            dependencies: ['children', 'breadcrumbs'],
+                        },
                         cell: ({ row }) => {
                             const isExpanded = row.getIsExpanded();
                             const hasChildren = !!row.original.children?.length;
                             return (
                                 <div
-                                    style={{ marginLeft: (row.original.breadcrumbs.length - 2) * 20 + 'px' }}
+                                    style={{ marginLeft: (row.original.breadcrumbs?.length - 2) * 20 + 'px' }}
                                     className="flex gap-2 items-center"
                                 >
                                     <Button
@@ -136,14 +140,14 @@ function CollectionListPage() {
                         },
                     },
                     productVariants: {
-                        header: 'Contents',
+                        header: () => <Trans>Contents</Trans>,
                         cell: ({ row }) => {
                             return (
                                 <CollectionContentsSheet
                                     collectionId={row.original.id}
                                     collectionName={row.original.name}
                                 >
-                                    <Trans>{row.original.productVariants.totalItems} variants</Trans>
+                                    <Trans>{row.original.productVariants?.totalItems} variants</Trans>
                                 </CollectionContentsSheet>
                             );
                         },

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -1,3 +1,4 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
 import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
@@ -21,7 +22,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
@@ -52,7 +53,7 @@ function CollectionDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -89,14 +90,16 @@ function CollectionDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t(creatingNewEntity ? 'Successfully created collection' : 'Successfully updated collection'));
+            toast(
+                creatingNewEntity ? t`Successfully created collection` : t`Successfully updated collection`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast(i18n.t(creatingNewEntity ? 'Failed to create collection' : 'Failed to update collection'), {
+            toast(creatingNewEntity ? t`Failed to create collection` : t`Failed to update collection`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -147,7 +150,15 @@ function CollectionDetailPage() {
                             control={form.control}
                             name="slug"
                             label={<Trans>Slug</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="slug"
+                                    watchFieldName="name"
+                                    entityName="Collection"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
                     <TranslatableFormFieldWrapper

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -9,7 +9,7 @@ import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {

package/src/app/routes/_authenticated/_collections/components/collection-contents-sheet.tsx

@@ -7,7 +7,7 @@ import {
     SheetTitle,
     SheetTrigger,
 } from '@/vdb/components/ui/sheet.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { PanelLeftOpen } from 'lucide-react';
 import { CollectionContentsTable } from './collection-contents-table.js';