@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -1,11 +1,9 @@
-import { Trans } from "@/lib/trans.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableIdFilterProps {
     value: Record<string, any> | undefined;
@@ -14,7 +12,7 @@ export interface DataTableIdFilterProps {
 
 export const ID_OPERATORS = ['eq', 'notEq', 'in', 'notIn', 'isNull'] as const;
 
-export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableIdFilterProps) {
+export function DataTableIdFilter({ value: incomingValue, onChange }: Readonly<DataTableIdFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
@@ -25,7 +23,10 @@ export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableI
             onChange({ [operator]: true });
         } else if (operator === 'in' || operator === 'notIn') {
             // Split by comma and trim whitespace
-            const values = value.split(',').map(v => v.trim()).filter(v => v);
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v);
             onChange({ [operator]: values });
         } else {
             onChange({ [operator]: value });
@@ -48,7 +49,11 @@ export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableI
             </Select>
             {operator !== 'isNull' && (
                 <Input
-                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated IDs..." : "Enter ID..."}
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated IDs...'
+                            : 'Enter ID...'
+                    }
                     value={value}
                     onChange={e => setValue(e.target.value)}
                 />

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -1,11 +1,9 @@
-import { Trans } from "@/lib/trans.js";
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { MoneyInput } from "@/components/data-input/money-input.js";
-import { useEffect, useState } from "react";
-import { useChannel } from "@/hooks/use-channel.js";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableNumberFilterProps {
     mode: 'number' | 'money';
@@ -15,7 +13,11 @@ export interface DataTableNumberFilterProps {
 
 export const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte', 'isNull', 'between'] as const;
 
-export function DataTableNumberFilter({ mode, value: incomingValue, onChange }: DataTableNumberFilterProps) {
+export function DataTableNumberFilter({
+    mode,
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableNumberFilterProps>) {
     const { activeChannel } = useChannel();
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : 0;
@@ -72,7 +74,7 @@ export function DataTableNumberFilter({ mode, value: incomingValue, onChange }:
             return (
                 <MoneyInput
                     value={parseFloat(value) || 0}
-                    onChange={(newValue) => onChange(newValue.toString())}
+                    onChange={newValue => onChange(newValue.toString())}
                     currency={activeChannel?.defaultCurrencyCode ?? 'USD'}
                 />
             );
@@ -102,16 +104,15 @@ export function DataTableNumberFilter({ mode, value: incomingValue, onChange }:
                         ))}
                     </SelectContent>
                 </Select>
-                {operator !== 'isNull' && (
-                    operator === 'between' ? (
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
                         <div className="flex gap-2">
-                            {renderInput(minValue, setMinValue, "Min")}
-                            {renderInput(maxValue, setMaxValue, "Max")}
+                            {renderInput(minValue, setMinValue, 'Min')}
+                            {renderInput(maxValue, setMaxValue, 'Max')}
                         </div>
                     ) : (
-                        renderInput(value, setValue, "Enter value...")
-                    )
-                )}
+                        renderInput(value, setValue, 'Enter value...')
+                    ))}
             </div>
             {error && <p className="text-sm text-red-500">{error}</p>}
         </div>

package/src/lib/components/data-table/filters/data-table-string-filter.tsx

@@ -1,20 +1,30 @@
-import { Trans } from "@/lib/trans.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableStringFilterProps {
     value: Record<string, any> | undefined;
     onChange: (filter: Record<string, any>) => void;
 }
 
-export const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'] as const;
+export const STRING_OPERATORS = [
+    'eq',
+    'notEq',
+    'contains',
+    'notContains',
+    'in',
+    'notIn',
+    'regex',
+    'isNull',
+] as const;
 
-export function DataTableStringFilter({ value: incomingValue, onChange }: DataTableStringFilterProps) {
+export function DataTableStringFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableStringFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'contains';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
@@ -26,7 +36,10 @@ export function DataTableStringFilter({ value: incomingValue, onChange }: DataTa
         } else if (operator === 'in' || operator === 'notIn') {
             // Split by comma and trim whitespace
             if (typeof value === 'string') {
-                const values = value.split(',').map(v => v.trim()).filter(v => v);
+                const values = value
+                    .split(',')
+                    .map(v => v.trim())
+                    .filter(v => v);
                 onChange({ [operator]: values });
             } else {
                 onChange({ [operator]: [] });
@@ -52,11 +65,15 @@ export function DataTableStringFilter({ value: incomingValue, onChange }: DataTa
             </Select>
             {operator !== 'isNull' && (
                 <Input
-                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated values..." : "Enter filter value..."}
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated values...'
+                            : 'Enter filter value...'
+                    }
                     value={value}
                     onChange={e => setValue(e.target.value)}
                 />
             )}
         </div>
-    )
+    );
 }

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -1,11 +1,11 @@
-import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
+import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
 import { ID_OPERATORS } from './filters/data-table-id-filter.js';
 import { NUMBER_OPERATORS } from './filters/data-table-number-filter.js';
 import { STRING_OPERATORS } from './filters/data-table-string-filter.js';
-import { Trans } from '@/lib/trans.js';
 
-type Operator =
+export type Operator =
     | (typeof DATETIME_OPERATORS)[number]
     | (typeof BOOLEAN_OPERATORS)[number]
     | (typeof ID_OPERATORS)[number]

package/src/lib/components/data-table/refresh-button.tsx

@@ -1,25 +1,40 @@
-import React, { useState } from 'react';
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
-export function RefreshButton({ onRefresh }: { onRefresh: () => void }) {
-    const [isRotating, setIsRotating] = useState(false);
+function useDelayedLoading(isLoading: boolean, delayMs: number = 100) {
+    const [delayedLoading, setDelayedLoading] = useState(isLoading);
 
-    const handleClick = () => {
-        if (!isRotating) {
-            setIsRotating(true);
-            onRefresh();
+    useEffect(() => {
+        if (isLoading) {
+            // When loading starts, wait for the delay before showing loading state
+            const timer = setTimeout(() => {
+                setDelayedLoading(true);
+            }, delayMs);
+
+            return () => clearTimeout(timer);
+        } else {
+            // When loading stops, immediately hide loading state
+            setDelayedLoading(false);
         }
+    }, [isLoading, delayMs]);
+
+    return delayedLoading;
+}
+
+export function RefreshButton({
+    onRefresh,
+    isLoading,
+}: Readonly<{ onRefresh: () => void; isLoading: boolean }>) {
+    const delayedLoading = useDelayedLoading(isLoading, 100);
+
+    const handleClick = () => {
+        onRefresh();
     };
 
     return (
-        <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleClick}
-        >
-            <RefreshCw onAnimationEnd={() => setIsRotating(false)}
-                       className={isRotating ? 'animate-rotate' : ''} />
+        <Button variant="ghost" size="sm" onClick={handleClick} disabled={delayedLoading}>
+            <RefreshCw className={delayedLoading ? 'animate-rotate' : ''} />
         </Button>
     );
 }

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -0,0 +1,322 @@
+import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
+import { FieldInfo, getTypeFieldInfo, getOperationVariablesFields } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { useMutation } from '@tanstack/react-query';
+import { AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
+import { EllipsisIcon, TrashIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+import {
+    AdditionalColumns,
+    AllItemFieldKeys,
+    CustomizeColumnConfig,
+    FacetedFilterConfig,
+    PaginatedListItemFields,
+    RowAction,
+    usePaginatedList,
+} from '../shared/paginated-list-data-table.js';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '../ui/alert-dialog.js';
+import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu.js';
+import { DataTableColumnHeader } from './data-table-column-header.js';
+
+/**
+ * @description
+ * This hook is used to generate the columns for a data table, combining the fields
+ * from the query with the additional columns and the custom fields.
+ *
+ * It also
+ * - adds the row actions and the delete mutation.
+ * - adds the row selection column.
+ * - adds the custom field columns.
+ */
+export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
+    fields,
+    customizeColumns,
+    rowActions,
+    deleteMutation,
+    additionalColumns,
+    defaultColumnOrder,
+    facetedFilters,
+    includeSelectionColumn = true,
+    includeActionsColumn = true,
+    enableSorting = true,
+}: Readonly<{
+    fields: FieldInfo[];
+    customizeColumns?: CustomizeColumnConfig<T>;
+    rowActions?: RowAction<PaginatedListItemFields<T>>[];
+    deleteMutation?: TypedDocumentNode<any, any>;
+    additionalColumns?: AdditionalColumns<T>;
+    defaultColumnOrder?: Array<string | number | symbol>;
+    facetedFilters?: FacetedFilterConfig<T>;
+    includeSelectionColumn?: boolean;
+    includeActionsColumn?: boolean;
+    enableSorting?: boolean;
+}>) {
+    const columnHelper = createColumnHelper<PaginatedListItemFields<T>>();
+
+    const { columns, customFieldColumnNames } = useMemo(() => {
+        const columnConfigs: Array<{ fieldInfo: FieldInfo; isCustomField: boolean }> = [];
+        const customFieldColumnNames: string[] = [];
+
+        columnConfigs.push(
+            ...fields // Filter out custom fields
+                .filter(field => field.name !== 'customFields' && !field.type.endsWith('CustomFields'))
+                .map(field => ({ fieldInfo: field, isCustomField: false })),
+        );
+
+        const customFieldColumn = fields.find(field => field.name === 'customFields');
+        if (customFieldColumn && customFieldColumn.type !== 'JSON') {
+            const customFieldFields = getTypeFieldInfo(customFieldColumn.type);
+            columnConfigs.push(
+                ...customFieldFields.map(field => ({ fieldInfo: field, isCustomField: true })),
+            );
+            customFieldColumnNames.push(...customFieldFields.map(field => field.name));
+        }
+
+        const queryBasedColumns = columnConfigs.map(({ fieldInfo, isCustomField }) => {
+            const customConfig = customizeColumns?.[fieldInfo.name as unknown as AllItemFieldKeys<T>] ?? {};
+            const { header, ...customConfigRest } = customConfig;
+            const enableColumnFilter = fieldInfo.isScalar && !facetedFilters?.[fieldInfo.name];
+
+            return columnHelper.accessor(fieldInfo.name as any, {
+                id: fieldInfo.name,
+                meta: { fieldInfo, isCustomField },
+                enableColumnFilter,
+                enableSorting: fieldInfo.isScalar && enableSorting,
+                // Filtering is done on the server side, but we set this to 'equalsString' because
+                // otherwise the TanStack Table with apply an "auto" function which somehow
+                // prevents certain filters from working.
+                filterFn: 'equalsString',
+                cell: ({ cell, row }) => {
+                    const cellValue = cell.getValue();
+                    const value =
+                        cellValue ??
+                        (isCustomField ? row.original?.customFields?.[fieldInfo.name] : undefined);
+
+                    if (fieldInfo.list && Array.isArray(value)) {
+                        return value.join(', ');
+                    }
+                    if (
+                        (fieldInfo.type === 'DateTime' && typeof value === 'string') ||
+                        value instanceof Date
+                    ) {
+                        return <DisplayComponent id="vendure:dateTime" value={value} />;
+                    }
+                    if (fieldInfo.type === 'Boolean') {
+                        if (cell.column.id === 'enabled') {
+                            return <DisplayComponent id="vendure:booleanBadge" value={value} />;
+                        } else {
+                            return <DisplayComponent id="vendure:booleanCheckbox" value={value} />;
+                        }
+                    }
+                    if (fieldInfo.type === 'Asset') {
+                        return <DisplayComponent id="vendure:asset" value={value} />;
+                    }
+                    if (value !== null && typeof value === 'object') {
+                        return JSON.stringify(value);
+                    }
+                    return value;
+                },
+                header: headerContext => {
+                    return (
+                        <DataTableColumnHeader headerContext={headerContext} customConfig={customConfig} />
+                    );
+                },
+                ...customConfigRest,
+            });
+        });
+
+        let finalColumns = [...queryBasedColumns];
+
+        for (const [id, column] of Object.entries(additionalColumns ?? {})) {
+            if (!id) {
+                throw new Error('Column id is required');
+            }
+            finalColumns.push(columnHelper.accessor(id as any, { ...column, id }));
+        }
+
+        if (defaultColumnOrder) {
+            // ensure the columns with ids matching the items in defaultColumnOrder
+            // appear as the first columns in sequence, and leave the remainder in the
+            // existing order
+            const orderedColumns = finalColumns
+                .filter(column => column.id && defaultColumnOrder.includes(column.id as any))
+                .sort(
+                    (a, b) =>
+                        defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any),
+                );
+            const remainingColumns = finalColumns.filter(
+                column => !column.id || !defaultColumnOrder.includes(column.id as any),
+            );
+            finalColumns = [...orderedColumns, ...remainingColumns];
+        }
+
+        if (includeActionsColumn && (rowActions || deleteMutation)) {
+            const rowActionColumn = getRowActions(rowActions, deleteMutation);
+            if (rowActionColumn) {
+                finalColumns.push(rowActionColumn);
+            }
+        }
+
+        if (includeSelectionColumn) {
+            // Add the row selection column
+            finalColumns.unshift({
+                id: 'selection',
+                accessorKey: 'selection',
+                header: ({ table }) => (
+                    <Checkbox
+                        className="mx-1"
+                        checked={table.getIsAllRowsSelected()}
+                        onCheckedChange={checked =>
+                            table.toggleAllRowsSelected(checked === 'indeterminate' ? undefined : checked)
+                        }
+                    />
+                ),
+                enableColumnFilter: false,
+                cell: ({ row }) => {
+                    return (
+                        <Checkbox
+                            className="mx-1"
+                            checked={row.getIsSelected()}
+                            onCheckedChange={row.getToggleSelectedHandler()}
+                        />
+                    );
+                },
+            });
+        }
+
+        return { columns: finalColumns, customFieldColumnNames };
+    }, [fields, customizeColumns, rowActions, deleteMutation, additionalColumns, defaultColumnOrder]);
+
+    return { columns, customFieldColumnNames };
+}
+
+function getRowActions(
+    rowActions?: RowAction<any>[],
+    deleteMutation?: TypedDocumentNode<any, any>,
+): AccessorKeyColumnDef<any> | undefined {
+    return {
+        id: 'actions',
+        accessorKey: 'actions',
+        header: () => <Trans>Actions</Trans>,
+        enableColumnFilter: false,
+        cell: ({ row }) => {
+            return (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <EllipsisIcon />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        {rowActions?.map((action, index) => (
+                            <DropdownMenuItem
+                                onClick={() => action.onClick?.(row)}
+                                key={`${action.label}-${index}`}
+                            >
+                                {action.label}
+                            </DropdownMenuItem>
+                        ))}
+                        {deleteMutation && (
+                            <DeleteMutationRowAction deleteMutation={deleteMutation} row={row} />
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            );
+        },
+    };
+}
+
+function DeleteMutationRowAction({
+    deleteMutation,
+    row,
+}: Readonly<{
+    deleteMutation: TypedDocumentNode<any, any>;
+    row: Row<{ id: string }>;
+}>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    
+    // Inspect the mutation variables to determine if it expects 'id' or 'ids'
+    const mutationVariables = getOperationVariablesFields(deleteMutation);
+    const hasIdsParameter = mutationVariables.some(field => field.name === 'ids');
+    
+    const { mutate: deleteMutationFn } = useMutation({
+        mutationFn: api.mutate(deleteMutation),
+        onSuccess: (result: { [key: string]: { result: 'DELETED' | 'NOT_DELETED'; message: string } | { result: 'DELETED' | 'NOT_DELETED'; message: string }[] }) => {
+            const unwrappedResult = Object.values(result)[0];
+            // Handle both single result and array of results
+            const resultToCheck = Array.isArray(unwrappedResult) ? unwrappedResult[0] : unwrappedResult;
+            if (resultToCheck.result === 'DELETED') {
+                refetchPaginatedList();
+                toast.success(i18n.t('Deleted successfully'));
+            } else {
+                toast.error(i18n.t('Failed to delete'), {
+                    description: resultToCheck.message,
+                });
+            }
+        },
+        onError: (err: Error) => {
+            toast.error(i18n.t('Failed to delete'), {
+                description: err.message,
+            });
+        },
+    });
+    return (
+        <AlertDialog>
+            <AlertDialogTrigger asChild>
+                <DropdownMenuItem onSelect={e => e.preventDefault()}>
+                    <div className="flex items-center gap-2 text-destructive">
+                        <TrashIcon className="w-4 h-4 text-destructive" />
+                        <Trans>Delete</Trans>
+                    </div>
+                </DropdownMenuItem>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>
+                        <Trans>Confirm deletion</Trans>
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                        <Trans>
+                            Are you sure you want to delete this item? This action cannot be undone.
+                        </Trans>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>
+                        <Trans>Cancel</Trans>
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={() => {
+                            // Pass variables based on what the mutation expects
+                            if (hasIdsParameter) {
+                                deleteMutationFn({ ids: [row.original.id] });
+                            } else {
+                                // Fallback to single id if we can't determine the format
+                                deleteMutationFn({ id: row.original.id });
+                            }
+                        }}
+                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                        <Trans>Delete</Trans>
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

package/src/lib/components/labeled-data.tsx

@@ -0,0 +1,21 @@
+type LabeledDataProps = {
+    label: string | React.ReactNode;
+    value: React.ReactNode;
+    className?: string;
+};
+
+/**
+ * @description
+ * Used to display a value with a label, like
+ *
+ * Order Code
+ * QWERTY
+ */
+export function LabeledData({ label, value, className }: Readonly<LabeledDataProps>) {
+    return (
+        <div className="">
+            <span className="font-medium text-muted-foreground text-xs">{label}</span>
+            <div className={`col-span-2 text-sm ${className}`}>{value}</div>
+        </div>
+    );
+}

package/src/lib/components/layout/app-layout.tsx

@@ -1,11 +1,10 @@
-import { AppSidebar } from '@/components/layout/app-sidebar.js';
-import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
-import { PrereleasePopup } from '@/components/layout/prerelease-popup.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Separator } from '@/components/ui/separator.js';
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+import { AppSidebar } from '@/vdb/components/layout/app-sidebar.js';
+import { DevModeIndicator } from '@/vdb/components/layout/dev-mode-indicator.js';
+import { GeneratedBreadcrumbs } from '@/vdb/components/layout/generated-breadcrumbs.js';
+import { PrereleasePopup } from '@/vdb/components/layout/prerelease-popup.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/vdb/components/ui/sidebar.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Outlet } from '@tanstack/react-router';
 import { Alerts } from '../shared/alerts.js';
 
@@ -24,11 +23,7 @@ export function AppLayout() {
                                 <GeneratedBreadcrumbs />
                             </div>
                             <div className="flex items-center justify-end gap-2">
-                                {settings.devMode && (
-                                    <Badge variant="destructive">
-                                        <Trans>Dev Mode</Trans>
-                                    </Badge>
-                                )}
+                                {settings.devMode && <DevModeIndicator />}
                                 <Alerts />
                             </div>
                         </div>

package/src/lib/components/layout/app-sidebar.tsx

@@ -1,14 +1,14 @@
-import { NavMain } from '@/components/layout/nav-main.js';
-import { NavUser } from '@/components/layout/nav-user.js';
+import { NavMain } from '@/vdb/components/layout/nav-main.js';
+import { NavUser } from '@/vdb/components/layout/nav-user.js';
 import {
     Sidebar,
     SidebarContent,
     SidebarFooter,
     SidebarHeader,
     SidebarRail,
-} from '@/components/ui/sidebar.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { getNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
+} from '@/vdb/components/ui/sidebar.js';
+import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
+import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import * as React from 'react';
 import { ChannelSwitcher } from './channel-switcher.js';