@vendure/dashboard 3.3.8 → 3.4.0

package/src/app/routes/_authenticated/_orders/components/order-history/order-history.tsx

@@ -1,15 +1,33 @@
 import { HistoryEntry, HistoryEntryItem } from '@/vdb/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteEditor } from '@/vdb/components/shared/history-timeline/history-note-editor.js';
 import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
 import { HistoryTimeline } from '@/vdb/components/shared/history-timeline/history-timeline.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { Trans } from '@/vdb/lib/trans.js';
-import { ArrowRightToLine, CheckIcon, CreditCardIcon, SquarePen } from 'lucide-react';
+import {
+    ArrowRightToLine,
+    Ban,
+    CheckIcon,
+    ChevronDown,
+    ChevronUp,
+    CreditCardIcon,
+    Edit3,
+    SquarePen,
+    Truck,
+    UserX,
+} from 'lucide-react';
+import { useState } from 'react';
 
 interface OrderHistoryProps {
     order: {
         id: string;
         createdAt: string;
         currencyCode: string;
+        customer?: {
+            firstName: string;
+            lastName: string;
+        } | null;
     };
     historyEntries: Array<HistoryEntryItem>;
     onAddNote: (note: string, isPrivate: boolean) => void;
@@ -18,19 +36,142 @@ interface OrderHistoryProps {
 }
 
 export function OrderHistory({
+    order,
     historyEntries,
     onAddNote,
     onUpdateNote,
     onDeleteNote,
 }: Readonly<OrderHistoryProps>) {
+    const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set());
+    const [noteEditorOpen, setNoteEditorOpen] = useState(false);
+    const [noteEditorNote, setNoteEditorNote] = useState<{
+        noteId: string;
+        note: string;
+        isPrivate: boolean;
+    }>({
+        noteId: '',
+        note: '',
+        isPrivate: true,
+    });
+
+    const handleEditNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setNoteEditorNote({ noteId, note, isPrivate });
+        setNoteEditorOpen(true);
+    };
+
+    const handleDeleteNote = (noteId: string) => {
+        onDeleteNote?.(noteId);
+    };
+
+    const handleNoteEditorSave = (noteId: string, note: string, isPrivate: boolean) => {
+        onUpdateNote?.(noteId, note, isPrivate);
+    };
+
+    const isPrimaryEvent = (entry: HistoryEntryItem) => {
+        // Based on Angular component's isFeatured method
+        switch (entry.type) {
+            case 'ORDER_STATE_TRANSITION':
+                return (
+                    entry.data.to === 'Delivered' ||
+                    entry.data.to === 'Cancelled' ||
+                    entry.data.to === 'Settled' ||
+                    entry.data.from === 'Created'
+                );
+            case 'ORDER_REFUND_TRANSITION':
+                return entry.data.to === 'Settled';
+            case 'ORDER_PAYMENT_TRANSITION':
+                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
+            case 'ORDER_NOTE':
+            case 'ORDER_MODIFIED':
+            case 'ORDER_CUSTOMER_UPDATED':
+            case 'ORDER_CANCELLATION':
+                return true;
+            default:
+                return false; // All other events are secondary
+        }
+    };
+
+    // Group consecutive secondary events
+    const groupedEntries: Array<
+        | { type: 'primary'; entry: HistoryEntryItem; index: number }
+        | {
+              type: 'secondary-group';
+              entries: Array<{ entry: HistoryEntryItem; index: number }>;
+              startIndex: number;
+          }
+    > = [];
+    let currentGroup: Array<{ entry: HistoryEntryItem; index: number }> = [];
+
+    for (let i = 0; i < historyEntries.length; i++) {
+        const entry = historyEntries[i];
+        const isSecondary = !isPrimaryEvent(entry);
+
+        if (isSecondary) {
+            currentGroup.push({ entry, index: i });
+        } else {
+            // If we have accumulated secondary events, add them as a group
+            if (currentGroup.length > 0) {
+                groupedEntries.push({
+                    type: 'secondary-group',
+                    entries: currentGroup,
+                    startIndex: currentGroup[0].index,
+                });
+                currentGroup = [];
+            }
+            // Add the primary event
+            groupedEntries.push({ type: 'primary', entry, index: i });
+        }
+    }
+
+    // Don't forget the last group if it exists
+    if (currentGroup.length > 0) {
+        groupedEntries.push({
+            type: 'secondary-group',
+            entries: currentGroup,
+            startIndex: currentGroup[0].index,
+        });
+    }
+
+    const toggleGroup = (groupIndex: number) => {
+        const newExpanded = new Set(expandedGroups);
+        if (newExpanded.has(groupIndex)) {
+            newExpanded.delete(groupIndex);
+        } else {
+            newExpanded.add(groupIndex);
+        }
+        setExpandedGroups(newExpanded);
+    };
     const getTimelineIcon = (entry: OrderHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'ORDER_PAYMENT_TRANSITION':
                 return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_REFUND_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
             case 'ORDER_NOTE':
                 return <SquarePen className="h-4 w-4" />;
             case 'ORDER_STATE_TRANSITION':
+                if (entry.data.to === 'Delivered') {
+                    return <CheckIcon className="h-4 w-4" />;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Ban className="h-4 w-4" />;
+                }
+                return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped' || entry.data.to === 'Delivered') {
+                    return <Truck className="h-4 w-4" />;
+                }
                 return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT':
+                return <Truck className="h-4 w-4" />;
+            case 'ORDER_MODIFIED':
+                return <Edit3 className="h-4 w-4" />;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <UserX className="h-4 w-4" />;
+            case 'ORDER_CANCELLATION':
+                return <Ban className="h-4 w-4" />;
             default:
                 return <CheckIcon className="h-4 w-4" />;
         }
@@ -39,12 +180,26 @@ export function OrderHistory({
     const getTitle = (entry: OrderHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'ORDER_PAYMENT_TRANSITION':
-                return <Trans>Payment settled</Trans>;
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Payment settled</Trans>;
+                }
+                if (entry.data.to === 'Authorized') {
+                    return <Trans>Payment authorized</Trans>;
+                }
+                if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
+                    return <Trans>Payment failed</Trans>;
+                }
+                return <Trans>Payment transitioned</Trans>;
+            case 'ORDER_REFUND_TRANSITION':
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Refund settled</Trans>;
+                }
+                return <Trans>Refund transitioned</Trans>;
             case 'ORDER_NOTE':
                 return <Trans>Note added</Trans>;
             case 'ORDER_STATE_TRANSITION': {
                 if (entry.data.from === 'Created') {
-                    return <Trans>Order created</Trans>;
+                    return <Trans>Order placed</Trans>;
                 }
                 if (entry.data.to === 'Delivered') {
                     return <Trans>Order fulfilled</Trans>;
@@ -52,8 +207,27 @@ export function OrderHistory({
                 if (entry.data.to === 'Cancelled') {
                     return <Trans>Order cancelled</Trans>;
                 }
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
                 return <Trans>Order transitioned</Trans>;
             }
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order delivered</Trans>;
+                }
+                return <Trans>Fulfillment transitioned</Trans>;
+            case 'ORDER_FULFILLMENT':
+                return <Trans>Fulfillment created</Trans>;
+            case 'ORDER_MODIFIED':
+                return <Trans>Order modified</Trans>;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <Trans>Customer updated</Trans>;
+            case 'ORDER_CANCELLATION':
+                return <Trans>Order cancelled</Trans>;
             default:
                 return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
         }
@@ -64,38 +238,211 @@ export function OrderHistory({
             <div className="mb-4">
                 <HistoryNoteInput onAddNote={onAddNote} />
             </div>
-            <HistoryTimeline onEditNote={onUpdateNote} onDeleteNote={onDeleteNote}>
-                {historyEntries.map(entry => (
-                    <HistoryEntry
-                        key={entry.id}
-                        entry={entry}
-                        isNoteEntry={entry.type === 'ORDER_NOTE'}
-                        timelineIcon={getTimelineIcon(entry)}
-                        title={getTitle(entry)}
-                    >
-                        {entry.type === 'ORDER_NOTE' && (
-                            <div className="flex items-center space-x-2">
-                                <Badge variant={entry.isPublic ? 'outline' : 'secondary'} className="text-xs">
-                                    {entry.isPublic ? 'Public' : 'Private'}
-                                </Badge>
-                                <span>{entry.data.note}</span>
+            <HistoryTimeline>
+                {groupedEntries.map((group, groupIndex) => {
+                    if (group.type === 'primary') {
+                        const entry = group.entry;
+                        return (
+                            <HistoryEntry
+                                key={entry.id}
+                                entry={entry}
+                                isNoteEntry={entry.type === 'ORDER_NOTE'}
+                                timelineIcon={getTimelineIcon(entry)}
+                                title={getTitle(entry)}
+                                isPrimary={true}
+                                customer={order.customer}
+                                onEditNote={handleEditNote}
+                                onDeleteNote={handleDeleteNote}
+                            >
+                                {entry.type === 'ORDER_NOTE' && (
+                                    <div className="space-y-2">
+                                        <p className="text-sm text-foreground">{entry.data.note}</p>
+                                        <div className="flex items-center gap-2">
+                                            <Badge
+                                                variant={entry.isPublic ? 'outline' : 'secondary'}
+                                                className="text-xs"
+                                            >
+                                                {entry.isPublic ? 'Public' : 'Private'}
+                                            </Badge>
+                                        </div>
+                                    </div>
+                                )}
+                                {entry.type === 'ORDER_STATE_TRANSITION' && entry.data.from !== 'Created' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>
+                                            From {entry.data.from} to {entry.data.to}
+                                        </Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>
+                                            Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                                        </Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_REFUND_TRANSITION' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>
+                                            Refund #{entry.data.refundId} transitioned to {entry.data.to}
+                                        </Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_FULFILLMENT_TRANSITION' &&
+                                    entry.data.from !== 'Created' && (
+                                        <p className="text-xs text-muted-foreground">
+                                            <Trans>
+                                                Fulfillment #{entry.data.fulfillmentId} from {entry.data.from}{' '}
+                                                to {entry.data.to}
+                                            </Trans>
+                                        </p>
+                                    )}
+                                {entry.type === 'ORDER_FULFILLMENT' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_MODIFIED' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Order modification #{entry.data.modificationId}</Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_CUSTOMER_UPDATED' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Customer information updated</Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_CANCELLATION' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Order cancelled</Trans>
+                                    </p>
+                                )}
+                            </HistoryEntry>
+                        );
+                    } else {
+                        // Secondary group
+                        const shouldCollapse = group.entries.length > 2;
+                        const isExpanded = expandedGroups.has(groupIndex);
+                        const visibleEntries =
+                            shouldCollapse && !isExpanded ? group.entries.slice(0, 2) : group.entries;
+
+                        return (
+                            <div key={`group-${groupIndex}`}>
+                                {visibleEntries.map(({ entry }) => (
+                                    <HistoryEntry
+                                        key={entry.id}
+                                        entry={entry}
+                                        isNoteEntry={entry.type === 'ORDER_NOTE'}
+                                        timelineIcon={getTimelineIcon(entry)}
+                                        title={getTitle(entry)}
+                                        isPrimary={false}
+                                        customer={order.customer}
+                                        onEditNote={handleEditNote}
+                                        onDeleteNote={handleDeleteNote}
+                                    >
+                                        {entry.type === 'ORDER_NOTE' && (
+                                            <div className="space-y-1">
+                                                <p className="text-xs text-foreground">{entry.data.note}</p>
+                                                <Badge
+                                                    variant={entry.isPublic ? 'outline' : 'secondary'}
+                                                    className="text-xs"
+                                                >
+                                                    {entry.isPublic ? 'Public' : 'Private'}
+                                                </Badge>
+                                            </div>
+                                        )}
+                                        {entry.type === 'ORDER_STATE_TRANSITION' &&
+                                            entry.data.from !== 'Created' && (
+                                                <p className="text-xs text-muted-foreground">
+                                                    <Trans>
+                                                        From {entry.data.from} to {entry.data.to}
+                                                    </Trans>
+                                                </p>
+                                            )}
+                                        {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>
+                                                    Payment #{entry.data.paymentId} transitioned to{' '}
+                                                    {entry.data.to}
+                                                </Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_REFUND_TRANSITION' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>
+                                                    Refund #{entry.data.refundId} transitioned to{' '}
+                                                    {entry.data.to}
+                                                </Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_FULFILLMENT_TRANSITION' &&
+                                            entry.data.from !== 'Created' && (
+                                                <p className="text-xs text-muted-foreground">
+                                                    <Trans>
+                                                        Fulfillment #{entry.data.fulfillmentId} from{' '}
+                                                        {entry.data.from} to {entry.data.to}
+                                                    </Trans>
+                                                </p>
+                                            )}
+                                        {entry.type === 'ORDER_FULFILLMENT' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_MODIFIED' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Order modification #{entry.data.modificationId}</Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_CUSTOMER_UPDATED' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Customer information updated</Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_CANCELLATION' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Order cancelled</Trans>
+                                            </p>
+                                        )}
+                                    </HistoryEntry>
+                                ))}
+
+                                {shouldCollapse && (
+                                    <div className="flex justify-center py-2">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => toggleGroup(groupIndex)}
+                                            className="text-muted-foreground hover:text-foreground h-6 text-xs"
+                                        >
+                                            {isExpanded ? (
+                                                <>
+                                                    <ChevronUp className="w-3 h-3 mr-1" />
+                                                    <Trans>Show less</Trans>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <ChevronDown className="w-3 h-3 mr-1" />
+                                                    <Trans>Show all ({group.entries.length})</Trans>
+                                                </>
+                                            )}
+                                        </Button>
+                                    </div>
+                                )}
                             </div>
-                        )}
-                        <div className="text-sm text-muted-foreground">
-                            {entry.type === 'ORDER_STATE_TRANSITION' && entry.data.from !== 'Created' && (
-                                <Trans>
-                                    From {entry.data.from} to {entry.data.to}
-                                </Trans>
-                            )}
-                            {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
-                                <Trans>
-                                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
-                                </Trans>
-                            )}
-                        </div>
-                    </HistoryEntry>
-                ))}
+                        );
+                    }
+                })}
             </HistoryTimeline>
+            <HistoryNoteEditor
+                key={noteEditorNote.noteId}
+                note={noteEditorNote.note}
+                onNoteChange={handleNoteEditorSave}
+                open={noteEditorOpen}
+                onOpenChange={setNoteEditorOpen}
+                noteId={noteEditorNote.noteId}
+                isPrivate={noteEditorNote.isPrivate}
+            />
         </div>
     );
 }

package/src/app/routes/_authenticated/_products/components/option-value-input.tsx

@@ -47,7 +47,7 @@ export function OptionValueInput({
 
     const handleAddValue = () => {
         if (newValue.trim() && !fields.some(f => f.value === newValue.trim())) {
-            append({ value: newValue.trim(), id: crypto.randomUUID() });
+            append({ value: newValue.trim(), id: Date.now().toString() });
             setNewValue('');
         }
     };

package/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -28,7 +28,7 @@ function HealthchecksPage() {
         queryKey: ['healthchecks'],
         queryFn: async () => {
             const schemeAndHost =
-                uiConfig.apiHost + (uiConfig.apiPort !== 'auto' ? `:${uiConfig.apiPort}` : '');
+                uiConfig.api.host + (uiConfig.api.port !== 'auto' ? `:${uiConfig.api.port}` : '');
 
             const res = await fetch(`${schemeAndHost}/health`);
             return res.json() as Promise<HealthcheckResponse>;

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -94,6 +94,7 @@ function JobQueuePage() {
         <ListPage
             pageId="job-queue-list"
             title="Job Queue"
+            defaultSort={[{ id: 'createdAt', desc: true }]}
             listQuery={jobListDocument}
             route={Route}
             customizeColumns={{

package/src/app/routes/_authenticated/index.tsx

@@ -168,8 +168,8 @@ function DashboardPage() {
     }, [layoutWidth, editMode, widgets]);
 
     return (
-        <Page pageId="dashboard">
-            <PageTitle>Dashboard</PageTitle>
+        <Page pageId="insights">
+            <PageTitle>Insights</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <Button variant="outline" onClick={() => setEditMode(prev => !prev)}>

package/src/app/routes/_authenticated.tsx

@@ -15,7 +15,7 @@ export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
         }
     },
     loader: () => ({
-        breadcrumb: 'Dashboard',
+        breadcrumb: 'Insights',
     }),
     component: AuthLayout,
 });

package/src/lib/components/data-input/rich-text-input.tsx

@@ -1,9 +1,8 @@
-import { BubbleMenu, Editor, EditorContent, useCurrentEditor, useEditor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import ListItem from '@tiptap/extension-list-item';
 import TextStyle from '@tiptap/extension-text-style';
+import { BubbleMenu, Editor, EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
 import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
-import { useEffect, useLayoutEffect } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { Button } from '../ui/button.js';
 
 // define your extension array
@@ -27,6 +26,8 @@ export interface RichTextInputProps {
 }
 
 export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>) {
+    const isInternalUpdate = useRef(false);
+
     const editor = useEditor({
         parseOptions: {
             preserveWhitespace: 'full',
@@ -34,6 +35,7 @@ export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>)
         extensions: extensions,
         content: value,
         onUpdate: ({ editor }) => {
+            isInternalUpdate.current = true;
             onChange(editor.getHTML());
         },
         editorProps: {
@@ -44,11 +46,15 @@ export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>)
     });
 
     useLayoutEffect(() => {
-        if (editor) {
-            const { from, to } = editor.state.selection;
-            editor.commands.setContent(value, false);
-            editor.commands.setTextSelection({ from, to });
+        if (editor && !isInternalUpdate.current) {
+            const currentContent = editor.getHTML();
+            if (currentContent !== value) {
+                const { from, to } = editor.state.selection;
+                editor.commands.setContent(value, false);
+                editor.commands.setTextSelection({ from, to });
+            }
         }
+        isInternalUpdate.current = false;
     }, [value, editor]);
 
     if (!editor) {

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.js';
 import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { Trans } from '@/vdb/lib/trans.js';
@@ -26,7 +27,8 @@ export function DataTableBulkActions<TData>({
     bulkActions,
 }: Readonly<DataTableBulkActionsProps<TData>>) {
     const { pageId } = usePage();
-    const { blockId } = usePageBlock();
+    const pageBlock = usePageBlock();
+    const blockId = pageBlock?.blockId;
 
     // Cache to store selected items across page changes
     const selectedItemsCache = useRef<Map<string, TData>>(new Map());
@@ -52,7 +54,13 @@ export function DataTableBulkActions<TData>({
         })
         .filter((item): item is TData => item !== undefined);
 
-    if (selection.length === 0) {
+    const { position, shouldShow } = useFloatingBulkActions({
+        selectionCount: selection.length,
+        containerSelector: '[data-table-root], .data-table-container, table',
+        bottomOffset: 40,
+    });
+
+    if (!shouldShow) {
         return null;
     }
     const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
@@ -61,8 +69,13 @@ export function DataTableBulkActions<TData>({
 
     return (
         <div
-            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-white shadow-2xl rounded-md border"
-            style={{ height: 'auto', maxHeight: '60px' }}
+            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
+            style={{ 
+                height: 'auto', 
+                maxHeight: '60px',
+                bottom: position.bottom,
+                left: position.left
+            }}
         >
             <span className="text-sm text-muted-foreground">
                 <Trans>{selection.length} selected</Trans>

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

@@ -1,11 +1,10 @@
 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 { Badge } from '@/vdb/components/ui/badge.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 { Trans } from '@/vdb/lib/trans.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>