@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,86 +1,195 @@
-import * as React from 'react';
-import { ChevronsUpDown, Plus } from 'lucide-react';
+import { ChevronsUpDown, Languages, Plus } from 'lucide-react';
 
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
     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';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Link } from '@tanstack/react-router';
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+import { useState } from 'react';
+import { ManageLanguagesDialog } from './manage-languages-dialog.js';
+
+/**
+ * Convert the channel code to initials.
+ * Splits by punctuation like '-' and '_' and takes the first letter of each part
+ * up to 3 parts.
+ *
+ * If no splits, takes the first 3 letters.
+ */
+function getChannelInitialsFromCode(code: string) {
+    const parts = code.split(/[-_]/);
+    if (parts.length > 1) {
+        return parts
+            .filter(part => part.length > 0)
+            .slice(0, 3)
+            .map(part => part[0])
+            .join('');
+    } else {
+        return code.slice(0, 3);
+    }
+}
 
 export function ChannelSwitcher() {
     const { isMobile } = useSidebar();
     const { channels, activeChannel, selectedChannel, setSelectedChannel } = useChannel();
+    const serverConfig = useServerConfig();
+    const { formatLanguageName } = useLocalFormat();
+    const {
+        settings: { contentLanguage },
+        setContentLanguage,
+    } = useUserSettings();
+    const [showManageLanguagesDialog, setShowManageLanguagesDialog] = useState(false);
 
     // Use the selected channel if available, otherwise fall back to the active channel
     const displayChannel = selectedChannel || activeChannel;
 
+    // Get available languages from server config
+    const availableLanguages = serverConfig?.availableLanguages || [];
+    const hasMultipleLanguages = availableLanguages.length > 1;
+
+    // Reorder channels to put the currently selected one first
+    const orderedChannels = displayChannel
+        ? [displayChannel, ...channels.filter(ch => ch.id !== displayChannel.id)]
+        : channels;
+
     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"
+        <>
+            <SidebarMenu>
+                <SidebarMenuItem>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <SidebarMenuButton
+                                size="lg"
+                                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                             >
-                                <div className="flex size-8 items-center justify-center rounded border">
-                                    <span className="truncate font-semibold text-xs">
-                                        {channel.defaultCurrencyCode}
+                                <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 uppercase">
+                                        {getChannelInitialsFromCode(displayChannel?.code || '')}
                                     </span>
                                 </div>
-                                <ChannelCodeLabel code={channel.code} />
-                            </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 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">
+                                        {hasMultipleLanguages ? (
+                                            <span className="cursor-pointer hover:text-foreground">
+                                                Language: {formatLanguageName(contentLanguage)}
+                                            </span>
+                                        ) : (
+                                            <span>Language: {formatLanguageName(contentLanguage)}</span>
+                                        )}
+                                    </span>
                                 </div>
-                                <div className="text-muted-foreground font-medium">Add channel</div>
-                            </Link>
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </SidebarMenuItem>
-        </SidebarMenu>
+                                <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>
+                            {orderedChannels.map((channel, index) => (
+                                <div key={channel.code}>
+                                    <DropdownMenuItem
+                                        onClick={() => setSelectedChannel(channel.id)}
+                                        className="gap-2 p-2"
+                                    >
+                                        <div className="flex size-8 items-center justify-center rounded border">
+                                            <span className="truncate font-semibold text-xs uppercase">
+                                                {getChannelInitialsFromCode(channel.code)}
+                                            </span>
+                                        </div>
+                                        <ChannelCodeLabel code={channel.code} />
+                                        {channel.id === displayChannel?.id && (
+                                            <span className="ml-auto text-xs text-muted-foreground">
+                                                Current
+                                            </span>
+                                        )}
+                                    </DropdownMenuItem>
+                                    {/* Show language sub-menu for the current channel */}
+                                    {channel.id === displayChannel?.id && (
+                                        <DropdownMenuSub>
+                                            <DropdownMenuSubTrigger className="gap-2 p-2 pl-4">
+                                                <Languages className="w-4 h-4" />
+                                                <div className="flex gap-1 ml-2">
+                                                    <span className="text-muted-foreground">Content: </span>
+                                                    {formatLanguageName(contentLanguage)}
+                                                </div>
+                                            </DropdownMenuSubTrigger>
+                                            <DropdownMenuSubContent>
+                                                {channel.availableLanguageCodes?.map(languageCode => (
+                                                    <DropdownMenuItem
+                                                        key={`${channel.code}-${languageCode}`}
+                                                        onClick={() => setContentLanguage(languageCode)}
+                                                        className={`gap-2 p-2 ${contentLanguage === languageCode ? 'bg-accent' : ''}`}
+                                                    >
+                                                        <div className="flex w-6 h-5 items-center justify-center rounded border">
+                                                            <span className="truncate font-medium text-xs">
+                                                                {languageCode.toUpperCase()}
+                                                            </span>
+                                                        </div>
+                                                        <span>{formatLanguageName(languageCode)}</span>
+                                                        {contentLanguage === languageCode && (
+                                                            <span className="ml-auto text-xs text-muted-foreground">
+                                                                Active
+                                                            </span>
+                                                        )}
+                                                    </DropdownMenuItem>
+                                                ))}
+                                                <DropdownMenuSeparator />
+                                                <DropdownMenuItem
+                                                    onClick={() => setShowManageLanguagesDialog(true)}
+                                                    className="gap-2 p-2"
+                                                >
+                                                    <Languages className="w-4 h-4" />
+                                                    <span>
+                                                        <Trans>Manage Languages</Trans>
+                                                    </span>
+                                                </DropdownMenuItem>
+                                            </DropdownMenuSubContent>
+                                        </DropdownMenuSub>
+                                    )}
+                                    {/* Add separator after the current channel group */}
+                                    {channel.id === displayChannel?.id &&
+                                        index === 0 &&
+                                        orderedChannels.length > 1 && <DropdownMenuSeparator />}
+                                </div>
+                            ))}
+                            <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>
+            <ManageLanguagesDialog
+                open={showManageLanguagesDialog}
+                onClose={() => setShowManageLanguagesDialog(false)}
+            />
+        </>
     );
 }

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

@@ -1,8 +1,8 @@
-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';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 interface ContentLanguageSelectorProps {
     value?: string;
@@ -13,7 +13,10 @@ interface ContentLanguageSelectorProps {
 export function ContentLanguageSelector({ value, onChange, className }: ContentLanguageSelectorProps) {
     const serverConfig = useServerConfig();
     const { formatLanguageName } = useLocalFormat();
-    const { settings: { contentLanguage, displayLanguage }, setContentLanguage} = useUserSettings();
+    const {
+        settings: { contentLanguage },
+        setContentLanguage,
+    } = useUserSettings();
 
     // Fallback to empty array if serverConfig is null
     const languages = serverConfig?.availableLanguages || [];
@@ -22,10 +25,13 @@ export function ContentLanguageSelector({ value, onChange, className }: ContentL
     const currentValue = contentLanguage;
 
     return (
-        <Select value={currentValue} onValueChange={value => {
-            onChange?.(value);
-            setContentLanguage(value);
-            }}>
+        <Select
+            value={currentValue}
+            onValueChange={value => {
+                onChange?.(value);
+                setContentLanguage(value);
+            }}
+        >
             <SelectTrigger className={cn('w-[200px]', className)}>
                 <SelectValue placeholder="Select language" />
             </SelectTrigger>

package/src/lib/components/layout/dev-mode-indicator.tsx

@@ -0,0 +1,18 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { CodeXmlIcon, XIcon } from 'lucide-react';
+
+export function DevModeIndicator() {
+    const { setDevMode } = useUserSettings();
+    return (
+        <Badge className="bg-dev-mode text-background">
+            <CodeXmlIcon className="w-6 h-6" />
+            <Trans>Dev Mode</Trans>
+            <Button variant="ghost" size="icon-xs" onClick={() => setDevMode(false)}>
+                <XIcon className="w-4 h-4" />
+            </Button>
+        </Badge>
+    );
+}

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

@@ -4,7 +4,7 @@ import {
     BreadcrumbLink,
     BreadcrumbList,
     BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb.js';
+} from '@/vdb/components/ui/breadcrumb.js';
 import { Link, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';
 import { Fragment } from 'react';

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

@@ -1,22 +1,17 @@
-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 { CurrencyCode } from '@/vdb/constants.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/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 { 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 { i18n } = uiConfig;
+    const { availableLocales, availableLanguages } = i18n;
     const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
     const availableCurrencyCodes = Object.values(CurrencyCode);
     const { formatCurrency, formatLanguageName, formatCurrencyName, formatDate } = useLocalFormat();