@vendure/dashboard 3.2.0

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

@@ -0,0 +1,34 @@
+import { NavMain } from '@/components/layout/nav-main.js';
+import { NavUser } from '@/components/layout/nav-user.js';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarRail,
+} from '@/components/ui/sidebar.js';
+import { getNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
+import * as React from 'react';
+import { ChannelSwitcher } from './channel-switcher.js';
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+    const { extensionsLoaded } = useDashboardExtensions();
+    const { sections } = getNavMenuConfig();
+    return (
+        extensionsLoaded && (
+            <Sidebar collapsible="icon" {...props}>
+                <SidebarHeader>
+                    <ChannelSwitcher />
+                </SidebarHeader>
+                <SidebarContent className="flex flex-col h-full overflow-y-auto">
+                    <NavMain items={sections} />
+                </SidebarContent>
+                <SidebarFooter>
+                    <NavUser />
+                </SidebarFooter>
+                <SidebarRail />
+            </Sidebar>
+        )
+    );
+}

package/src/lib/components/layout/channel-switcher.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { ChevronsUpDown, Plus } from 'lucide-react';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
+import { Trans } from '@/lib/trans.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Link } from '@tanstack/react-router';
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+
+export function ChannelSwitcher() {
+    const { isMobile } = useSidebar();
+    const { channels, activeChannel, selectedChannel, setSelectedChannel } = useChannel();
+
+    // Use the selected channel if available, otherwise fall back to the active channel
+    const displayChannel = selectedChannel || activeChannel;
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                        >
+                            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                <span className="truncate font-semibold text-xs">
+                                    {displayChannel?.defaultCurrencyCode}
+                                </span>
+                            </div>
+                            <div className="grid flex-1 text-left text-sm leading-tight">
+                                <span className="truncate font-semibold"><ChannelCodeLabel code={displayChannel?.code} /></span>
+                                <span className="truncate text-xs">
+                                    Default Language: {displayChannel?.defaultLanguageCode?.toUpperCase()}
+                                </span>
+                            </div>
+                            <ChevronsUpDown className="ml-auto" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        align="start"
+                        side={isMobile ? 'bottom' : 'right'}
+                        sideOffset={4}
+                    >
+                        <DropdownMenuLabel className="text-muted-foreground text-xs">
+                            <Trans>Channels</Trans>
+                        </DropdownMenuLabel>
+                        {channels.map((channel, index) => (
+                            <DropdownMenuItem
+                                key={channel.code}
+                                onClick={() => setSelectedChannel(channel.id)}
+                                className="gap-2 p-2"
+                            >
+                                <div className="flex size-6 items-center justify-center rounded-xs border">
+                                    <span className="truncate font-semibold text-xs">
+                                        {channel.defaultCurrencyCode}
+                                    </span>
+                                </div>
+                                <ChannelCodeLabel code={channel.code} />
+                                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                        ))}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="gap-2 p-2 cursor-pointer" asChild>
+                            <Link to={'/channels/new'}>
+                                <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                                    <Plus className="size-4" />
+                                </div>
+                                <div className="text-muted-foreground font-medium">Add channel</div>
+                            </Link>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}

package/src/lib/components/layout/content-language-selector.tsx

@@ -0,0 +1,41 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { cn } from '@/lib/utils.js';
+
+interface ContentLanguageSelectorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+
+export function ContentLanguageSelector({ value, onChange, className }: ContentLanguageSelectorProps) {
+    const serverConfig = useServerConfig();
+    const { formatLanguageName } = useLocalFormat();
+    const { settings: { contentLanguage, displayLanguage }, setContentLanguage} = useUserSettings();
+
+    // Fallback to empty array if serverConfig is null
+    const languages = serverConfig?.availableLanguages || [];
+
+    // If no value is provided but languages are available, use the first language
+    const currentValue = contentLanguage;
+
+    return (
+        <Select value={currentValue} onValueChange={value => {
+            onChange?.(value);
+            setContentLanguage(value);
+            }}>
+            <SelectTrigger className={cn('w-[200px]', className)}>
+                <SelectValue placeholder="Select language" />
+            </SelectTrigger>
+            <SelectContent>
+                {languages.map(language => (
+                    <SelectItem key={language} value={language}>
+                        {formatLanguageName(language)}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}

package/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -0,0 +1,82 @@
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb.js';
+import { Link, useRouterState } from '@tanstack/react-router';
+import * as React from 'react';
+import { Fragment } from 'react';
+
+export interface BreadcrumbPair {
+    label: string | React.ReactElement;
+    path: string;
+}
+
+export type BreadcrumbShorthand = string | React.ReactElement;
+
+export type PageBreadcrumb = BreadcrumbPair | BreadcrumbShorthand;
+
+export function GeneratedBreadcrumbs() {
+    const matches = useRouterState({ select: s => s.matches });
+    const breadcrumbs: BreadcrumbPair[] = matches
+        .filter(match => match.loaderData?.breadcrumb)
+        .map(({ pathname, loaderData }) => {
+            if (typeof loaderData.breadcrumb === 'string') {
+                return {
+                    label: loaderData.breadcrumb,
+                    path: pathname,
+                };
+            }
+            if (Array.isArray(loaderData.breadcrumb)) {
+                return loaderData.breadcrumb.map((breadcrumb: PageBreadcrumb) => {
+                    if (typeof breadcrumb === 'string') {
+                        return {
+                            label: breadcrumb,
+                            path: pathname,
+                        };
+                    } else if (React.isValidElement(breadcrumb)) {
+                        return {
+                            label: breadcrumb,
+                            path: pathname,
+                        };
+                    } else {
+                        return {
+                            label: breadcrumb.label,
+                            path: breadcrumb.path,
+                        };
+                    }
+                });
+            }
+            if (typeof loaderData.breadcrumb === 'function') {
+                return {
+                    label: loaderData.breadcrumb(),
+                    path: pathname,
+                };
+            }
+            if (React.isValidElement(loaderData.breadcrumb)) {
+                return {
+                    label: loaderData.breadcrumb,
+                    path: pathname,
+                };
+            }
+        })
+        .flat();
+    return (
+        <Breadcrumb>
+            <BreadcrumbList>
+                {breadcrumbs.map(({ label, path }, index, arr) => (
+                    <Fragment key={index}>
+                        <BreadcrumbItem className="hidden md:block">
+                            <BreadcrumbLink asChild>
+                                <Link to={path}>{label}</Link>
+                            </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        {index < arr.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}
+                    </Fragment>
+                ))}
+            </BreadcrumbList>
+        </Breadcrumb>
+    );
+}

package/src/lib/components/layout/language-dialog.tsx

@@ -0,0 +1,104 @@
+import { CurrencyCode } from '@/constants.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.js';
+import { useState } from 'react';
+import { uiConfig } from 'virtual:vendure-ui-config';
+import { Button } from '../ui/button.js';
+import {
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from '../ui/dialog.js';
+import { Label } from '../ui/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+
+export function LanguageDialog() {
+    const { availableLocales, availableLanguages } = uiConfig;
+    const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
+    const availableCurrencyCodes = Object.values(CurrencyCode);
+    const { formatCurrency, formatLanguageName, formatCurrencyName, formatDate } = useLocalFormat();
+    const [selectedCurrency, setSelectedCurrency] = useState<string>('USD');
+
+    return (
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>
+                    <Trans>Select display language</Trans>
+                </DialogTitle>
+            </DialogHeader>
+            <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-1 w-full">
+                    <Label>
+                        <Trans>Display language</Trans>
+                    </Label>
+                    <Select defaultValue={settings.displayLanguage} onValueChange={setDisplayLanguage}>
+                        <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select a language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {availableLanguages.map(language => (
+                                <SelectItem key={language} value={language}>
+                                    {formatLanguageName(language)}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="space-y-1">
+                    <Label>
+                        <Trans>Locale</Trans>
+                    </Label>
+                    <Select defaultValue={settings.displayLocale} onValueChange={setDisplayLocale}>
+                        <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select a locale" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {availableLocales.map(locale => (
+                                <SelectItem key={locale} value={locale}>
+                                    {formatLanguageName(locale)}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+            <div className="bg-sidebar border border-border rounded-md px-6 py-4 space-y-4">
+                <span className="font-medium block text-accent-foreground">
+                    <Trans>Sample Formatting</Trans>: {settings.displayLocale} {settings.displayLanguage}
+                </span>
+                <Select defaultValue={selectedCurrency} onValueChange={setSelectedCurrency}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select a currency" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {availableCurrencyCodes.map(currency => (
+                            <SelectItem key={currency} value={currency}>
+                                {formatCurrencyName(currency)}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <div className="flex flex-col">
+                    <span className="text-muted-foreground text-sm font-medium">Medium date</span>
+                    <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'medium' })}</span>
+                </div>
+                <div className="flex flex-col">
+                    <span className="text-muted-foreground text-sm font-medium">Short date</span>
+                    <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'short' })}</span>
+                </div>
+                <div className="flex flex-col">
+                    <span className="text-muted-foreground text-sm font-medium">Price</span>
+                    <span>{formatCurrency(100.0, selectedCurrency)}</span>
+                </div>
+            </div>
+            <DialogFooter>
+                <DialogClose asChild>
+                    <Button>Close</Button>
+                </DialogClose>
+            </DialogFooter>
+        </DialogContent>
+    );
+}

package/src/lib/components/layout/nav-main.tsx

@@ -0,0 +1,178 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.js';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+} from '@/components/ui/sidebar.js';
+import { NavMenuSection, NavMenuItem } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { Link, rootRouteId, useLocation, useMatch } from '@tanstack/react-router';
+import { ChevronRight } from 'lucide-react';
+import * as React from 'react';
+
+export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem> }) {
+    const location = useLocation();
+    // State to track which bottom section is currently open
+    const [openBottomSectionId, setOpenBottomSectionId] = React.useState<string | null>(null);
+
+    // Split sections into top and bottom groups based on placement property
+    const topSections = items.filter(item => item.placement === 'top');
+    const bottomSections = items.filter(item => item.placement === 'bottom');
+
+    // Handle bottom section open/close
+    const handleBottomSectionToggle = (sectionId: string, isOpen: boolean) => {
+        if (isOpen) {
+            setOpenBottomSectionId(sectionId);
+        } else if (openBottomSectionId === sectionId) {
+            setOpenBottomSectionId(null);
+        }
+    };
+
+    // Auto-open the bottom section that contains the current route
+    React.useEffect(() => {
+        const currentPath = location.pathname;
+
+        // Check if the current path is in any bottom section
+        for (const section of bottomSections) {
+            const matchingItem =
+                'items' in section
+                    ? section.items?.find(
+                          item => currentPath === item.url || currentPath.startsWith(`${item.url}/`),
+                      )
+                    : null;
+
+            if (matchingItem) {
+                setOpenBottomSectionId(section.id);
+                return;
+            }
+        }
+    }, [location.pathname]);
+
+    // Render a top navigation section
+    const renderTopSection = (item: NavMenuSection | NavMenuItem) => {
+        if ('url' in item) {
+            return (
+                <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton tooltip={item.title} asChild isActive={location.pathname === item.url}>
+                        <Link to={item.url}>
+                            {item.icon && <item.icon />}
+                            <span>{item.title}</span>
+                        </Link>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            );
+        }
+
+        return (
+            <Collapsible
+                key={item.title}
+                asChild
+                defaultOpen={item.defaultOpen}
+                className="group/collapsible"
+            >
+                <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={item.title}>
+                            {item.icon && <item.icon />}
+                            <span>{item.title}</span>
+                            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                        <SidebarMenuSub>
+                            {item.items?.map(subItem => (
+                                <SidebarMenuSubItem key={subItem.title}>
+                                    <SidebarMenuSubButton
+                                        asChild
+                                        isActive={
+                                            location.pathname === subItem.url ||
+                                            location.pathname.startsWith(`${subItem.url}/`)
+                                        }
+                                    >
+                                        <Link to={subItem.url}>
+                                            <span>{subItem.title}</span>
+                                        </Link>
+                                    </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                            ))}
+                        </SidebarMenuSub>
+                    </CollapsibleContent>
+                </SidebarMenuItem>
+            </Collapsible>
+        );
+    };
+
+    // Render a bottom navigation section with controlled open state
+    const renderBottomSection = (item: NavMenuSection | NavMenuItem) => {
+        if ('url' in item) {
+            return (
+                <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton tooltip={item.title} asChild isActive={location.pathname === item.url}>
+                        <Link to={item.url}>
+                            {item.icon && <item.icon />}
+                            <span>{item.title}</span>
+                        </Link>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            );
+        }
+        return (
+            <Collapsible
+                key={item.title}
+                asChild
+                open={openBottomSectionId === item.id}
+                onOpenChange={isOpen => handleBottomSectionToggle(item.id, isOpen)}
+                className="group/collapsible"
+            >
+                <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={item.title}>
+                            {item.icon && <item.icon />}
+                            <span>{item.title}</span>
+                            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                        <SidebarMenuSub>
+                            {item.items?.map(subItem => (
+                                <SidebarMenuSubItem key={subItem.title}>
+                                    <SidebarMenuSubButton
+                                        asChild
+                                        isActive={
+                                            location.pathname === subItem.url ||
+                                            location.pathname.startsWith(`${subItem.url}/`)
+                                        }
+                                    >
+                                        <Link to={subItem.url}>
+                                            <span>{subItem.title}</span>
+                                        </Link>
+                                    </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                            ))}
+                        </SidebarMenuSub>
+                    </CollapsibleContent>
+                </SidebarMenuItem>
+            </Collapsible>
+        );
+    };
+
+    return (
+        <>
+            {/* Top sections */}
+            <SidebarGroup>
+                <SidebarGroupLabel>Platform</SidebarGroupLabel>
+                <SidebarMenu>{topSections.map(renderTopSection)}</SidebarMenu>
+            </SidebarGroup>
+
+            {/* Bottom sections - will be pushed to the bottom by CSS */}
+            <SidebarGroup className="mt-auto">
+                <SidebarGroupLabel>Administration</SidebarGroupLabel>
+                <SidebarMenu>{bottomSections.map(renderBottomSection)}</SidebarMenu>
+            </SidebarGroup>
+        </>
+    );
+}

package/src/lib/components/layout/nav-projects.tsx

@@ -0,0 +1,81 @@
+import { Folder, Forward, MoreHorizontal, Trash2, type LucideIcon } from 'lucide-react';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from '@/components/ui/sidebar.js';
+
+export function NavProjects({
+    projects,
+}: {
+    projects: {
+        name: string;
+        url: string;
+        icon: LucideIcon;
+    }[];
+}) {
+    const { isMobile } = useSidebar();
+
+    return (
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarMenu>
+                {projects.map(item => (
+                    <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton asChild>
+                            <a href={item.url}>
+                                <item.icon />
+                                <span>{item.name}</span>
+                            </a>
+                        </SidebarMenuButton>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <SidebarMenuAction showOnHover>
+                                    <MoreHorizontal />
+                                    <span className="sr-only">More</span>
+                                </SidebarMenuAction>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="w-48 rounded-lg"
+                                side={isMobile ? 'bottom' : 'right'}
+                                align={isMobile ? 'end' : 'start'}
+                            >
+                                <DropdownMenuItem>
+                                    <Folder className="text-muted-foreground" />
+                                    <span>View Project</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <Forward className="text-muted-foreground" />
+                                    <span>Share Project</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem>
+                                    <Trash2 className="text-muted-foreground" />
+                                    <span>Delete Project</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                    <SidebarMenuButton className="text-sidebar-foreground/70">
+                        <MoreHorizontal className="text-sidebar-foreground/70" />
+                        <span>More</span>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}