@vendure/dashboard 3.3.8 → 3.4.0

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

@@ -1,4 +1,4 @@
-import { ChevronsUpDown, Plus } from 'lucide-react';
+import { ChevronsUpDown, Languages, Plus } from 'lucide-react';
 
 import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
 import {
@@ -7,80 +7,189 @@ import {
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } 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 { 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/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/language-dialog.tsx

@@ -10,7 +10,8 @@ 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();

package/src/lib/components/layout/manage-languages-dialog.tsx

@@ -1,3 +1,4 @@
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
 import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
@@ -16,7 +17,6 @@ import { graphql } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
-import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Lock } from 'lucide-react';
@@ -69,7 +69,24 @@ const updateChannelDocument = graphql(`
 
 // All possible language codes for global settings - includes more than what might be globally enabled
 const ALL_LANGUAGE_CODES = [
-    'en', 'es', 'fr', 'de', 'it', 'pt', 'nl', 'pl', 'ru', 'ja', 'zh', 'ko', 'ar', 'hi', 'sv', 'da', 'no', 'fi'
+    'en',
+    'es',
+    'fr',
+    'de',
+    'it',
+    'pt',
+    'nl',
+    'pl',
+    'ru',
+    'ja',
+    'zh',
+    'ko',
+    'ar',
+    'hi',
+    'sv',
+    'da',
+    'no',
+    'fi',
 ];
 
 interface ManageLanguagesDialogProps {
@@ -82,12 +99,13 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
     const { activeChannel, selectedChannel } = useChannel();
     const { hasPermissions } = usePermissions();
     const queryClient = useQueryClient();
-    
+
     const displayChannel = selectedChannel || activeChannel;
-    
+
     // Permission checks
     const canReadGlobalSettings = hasPermissions(['ReadSettings']) || hasPermissions(['ReadGlobalSettings']);
-    const canUpdateGlobalSettings = hasPermissions(['UpdateSettings']) || hasPermissions(['UpdateGlobalSettings']);
+    const canUpdateGlobalSettings =
+        hasPermissions(['UpdateSettings']) || hasPermissions(['UpdateGlobalSettings']);
     const canReadChannel = hasPermissions(['ReadChannel']);
     const canUpdateChannel = hasPermissions(['UpdateChannel']);
 
@@ -97,10 +115,10 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
     const [channelDefaultLanguage, setChannelDefaultLanguage] = useState<string>('');
 
     // Queries
-    const { 
-        data: globalSettingsData, 
+    const {
+        data: globalSettingsData,
         isLoading: globalSettingsLoading,
-        error: globalSettingsError 
+        error: globalSettingsError,
     } = useQuery({
         queryKey: ['globalSettings', 'languages'],
         queryFn: () => api.query(globalSettingsLanguagesDocument),
@@ -121,8 +139,11 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
     });
 
     const updateChannelMutation = useMutation({
-        mutationFn: (input: { id: string; availableLanguageCodes?: string[]; defaultLanguageCode?: string }) =>
-            api.mutate(updateChannelDocument, { input }),
+        mutationFn: (input: {
+            id: string;
+            availableLanguageCodes?: string[];
+            defaultLanguageCode?: string;
+        }) => api.mutate(updateChannelDocument, { input }),
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['channels'] });
             toast.success('Channel language settings updated successfully');
@@ -145,11 +166,11 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
 
     const handleGlobalLanguagesChange = (newLanguages: string[]) => {
         setGlobalLanguages(newLanguages);
-        
+
         // Remove channel languages that are no longer in global languages
         const updatedChannelLanguages = channelLanguages.filter(lang => newLanguages.includes(lang));
         setChannelLanguages(updatedChannelLanguages);
-        
+
         // If the default language is no longer available, reset it
         if (!newLanguages.includes(channelDefaultLanguage)) {
             setChannelDefaultLanguage(updatedChannelLanguages[0] || '');
@@ -158,7 +179,7 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
 
     const handleChannelLanguagesChange = (newLanguages: string[]) => {
         setChannelLanguages(newLanguages);
-        
+
         // If the default language is no longer available, reset it
         if (!newLanguages.includes(channelDefaultLanguage)) {
             setChannelDefaultLanguage(newLanguages[0] || '');
@@ -172,7 +193,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
         if (canUpdateGlobalSettings && globalSettingsData) {
             const currentGlobalLanguages = globalSettingsData.globalSettings.availableLanguages || [];
             if (JSON.stringify(currentGlobalLanguages.sort()) !== JSON.stringify(globalLanguages.sort())) {
-                promises.push(updateGlobalSettingsMutation.mutateAsync({ availableLanguages: globalLanguages }));
+                promises.push(
+                    updateGlobalSettingsMutation.mutateAsync({ availableLanguages: globalLanguages }),
+                );
             }
         }
 
@@ -180,16 +203,19 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
         if (canUpdateChannel && displayChannel) {
             const currentChannelLanguages = displayChannel.availableLanguageCodes || [];
             const currentChannelDefault = displayChannel.defaultLanguageCode || '';
-            
-            const languagesChanged = JSON.stringify(currentChannelLanguages.sort()) !== JSON.stringify(channelLanguages.sort());
+
+            const languagesChanged =
+                JSON.stringify(currentChannelLanguages.sort()) !== JSON.stringify(channelLanguages.sort());
             const defaultChanged = currentChannelDefault !== channelDefaultLanguage;
-            
+
             if (languagesChanged || defaultChanged) {
-                promises.push(updateChannelMutation.mutateAsync({
-                    id: displayChannel.id,
-                    availableLanguageCodes: channelLanguages,
-                    defaultLanguageCode: channelDefaultLanguage,
-                }));
+                promises.push(
+                    updateChannelMutation.mutateAsync({
+                        id: displayChannel.id,
+                        availableLanguageCodes: channelLanguages,
+                        defaultLanguageCode: channelDefaultLanguage,
+                    }),
+                );
             }
         }
 
@@ -208,17 +234,17 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                 return true;
             }
         }
-        
+
         if (displayChannel && canUpdateChannel) {
             const currentChannelLangs = displayChannel.availableLanguageCodes || [];
             const currentChannelDefault = displayChannel.defaultLanguageCode || '';
-            
+
             return (
                 JSON.stringify(currentChannelLangs.sort()) !== JSON.stringify(channelLanguages.sort()) ||
                 currentChannelDefault !== channelDefaultLanguage
             );
         }
-        
+
         return false;
     };
 
@@ -228,7 +254,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
         <Dialog open={open} onOpenChange={onClose}>
             <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle><Trans>Manage Languages</Trans></DialogTitle>
+                    <DialogTitle>
+                        <Trans>Manage Languages</Trans>
+                    </DialogTitle>
                     <DialogDescription>
                         <Trans>Configure available languages for your store and channels</Trans>
                     </DialogDescription>
@@ -238,10 +266,12 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                     {/* Global Settings Section */}
                     <div>
                         <div className="flex items-center gap-2 mb-3">
-                            <h3 className="text-lg font-semibold"><Trans>Global Languages</Trans></h3>
+                            <h3 className="font-semibold">
+                                <Trans>Global Languages</Trans>
+                            </h3>
                             {!canReadGlobalSettings && <Lock className="h-4 w-4 text-muted-foreground" />}
                         </div>
-                        
+
                         {!canReadGlobalSettings ? (
                             <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
                                 <AlertCircle className="h-4 w-4 text-muted-foreground" />
@@ -262,10 +292,14 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                             </div>
                         ) : (
                             <div className="space-y-2">
-                                <Label className="text-sm font-medium">
+                                <Label>
                                     <Trans>Select Available Languages</Trans>
                                 </Label>
-                                <div className={!canUpdateGlobalSettings ? 'pointer-events-none opacity-50' : ''}>
+                                <div
+                                    className={
+                                        !canUpdateGlobalSettings ? 'pointer-events-none opacity-50' : ''
+                                    }
+                                >
                                     <LanguageSelector
                                         value={globalLanguages}
                                         onChange={handleGlobalLanguagesChange}
@@ -285,8 +319,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                     {/* Channel Settings Section */}
                     <div>
                         <div className="flex items-center gap-2 mb-3">
-                            <h3 className="text-lg font-semibold">
-                                <Trans>Channel Languages</Trans> - <ChannelCodeLabel code={displayChannel?.code} />
+                            <h3 className="font-semibold">
+                                <Trans>Channel Languages</Trans> -{' '}
+                                <ChannelCodeLabel code={displayChannel?.code} />
                             </h3>
                             {!canReadChannel && <Lock className="h-4 w-4 text-muted-foreground" />}
                         </div>
@@ -304,7 +339,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                     <Label className="text-sm font-medium">
                                         <Trans>Available Languages</Trans>
                                     </Label>
-                                    <div className={!canUpdateChannel ? 'pointer-events-none opacity-50' : ''}>
+                                    <div
+                                        className={!canUpdateChannel ? 'pointer-events-none opacity-50' : ''}
+                                    >
                                         <LanguageSelector
                                             value={channelLanguages}
                                             onChange={handleChannelLanguagesChange}
@@ -318,7 +355,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                         </p>
                                     ) : (
                                         <p className="text-xs text-muted-foreground">
-                                            <Trans>Select from globally available languages for this channel</Trans>
+                                            <Trans>
+                                                Select from globally available languages for this channel
+                                            </Trans>
                                         </p>
                                     )}
                                 </div>
@@ -339,7 +378,8 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                             <SelectContent>
                                                 {channelLanguages.map(languageCode => (
                                                     <SelectItem key={languageCode} value={languageCode}>
-                                                        {formatLanguageName(languageCode)} ({languageCode.toUpperCase()})
+                                                        {formatLanguageName(languageCode)} (
+                                                        {languageCode.toUpperCase()})
                                                     </SelectItem>
                                                 ))}
                                             </SelectContent>
@@ -355,14 +395,11 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                     <Button variant="outline" onClick={onClose} disabled={isLoading}>
                         <Trans>Cancel</Trans>
                     </Button>
-                    <Button 
-                        onClick={handleSave} 
-                        disabled={!hasChanges() || isLoading}
-                    >
+                    <Button onClick={handleSave} disabled={!hasChanges() || isLoading}>
                         {isLoading ? <Trans>Saving...</Trans> : <Trans>Save Changes</Trans>}
                     </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
     );
-}
+}

package/src/lib/components/layout/nav-item-wrapper.tsx

@@ -0,0 +1,107 @@
+import { CopyableText } from '@/vdb/components/shared/copyable-text.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { cn } from '@/vdb/lib/utils.js';
+import React, { useEffect, useState } from 'react';
+import { DevModeButton } from '../../framework/layout-engine/dev-mode-button.js';
+
+// Singleton state for hover tracking
+let globalHoveredNavId: string | null = null;
+const navHoverListeners: Set<(id: string | null) => void> = new Set();
+
+const setGlobalHoveredNavId = (id: string | null) => {
+    globalHoveredNavId = id;
+    navHoverListeners.forEach(listener => listener(id));
+};
+
+export interface NavItemWrapperProps {
+    children: React.ReactNode;
+    locationId: string;
+    order?: number;
+    parentLocationId?: string;
+    offset?: boolean;
+}
+
+export function NavItemWrapper({
+    children,
+    locationId,
+    order,
+    parentLocationId,
+    offset,
+}: Readonly<NavItemWrapperProps>) {
+    const { settings } = useUserSettings();
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [hoveredId, setHoveredId] = useState<string | null>(globalHoveredNavId);
+
+    const isHovered = hoveredId === locationId;
+
+    // Subscribe to global hover changes
+    useEffect(() => {
+        const listener = (newHoveredId: string | null) => {
+            setHoveredId(newHoveredId);
+        };
+        navHoverListeners.add(listener);
+        return () => {
+            navHoverListeners.delete(listener);
+        };
+    }, []);
+
+    const setHoverId = (id: string | null) => {
+        setGlobalHoveredNavId(id);
+    };
+
+    const handleMouseEnter = () => {
+        setHoverId(locationId);
+    };
+
+    const handleMouseLeave = () => {
+        // If we have a parent, fall back to the parent on mouse leave
+        // Otherwise, clear the hover
+        setHoverId(parentLocationId || null);
+    };
+
+    if (settings.devMode) {
+        return (
+            <div
+                className={cn(
+                    'ring-2 ring-transparent rounded-md transition-all delay-50 relative',
+                    isHovered || isPopoverOpen ? 'ring-dev-mode ring-offset-1 ring-offset-background' : '',
+                )}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div
+                    className={cn(
+                        `absolute right-0 transition-all delay-50 z-10`,
+                        isHovered || isPopoverOpen ? 'visible' : 'invisible',
+                        offset ? 'right-[26px] top-[3px]' : 'right-[3px] top-0.5 ',
+                    )}
+                >
+                    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                        <PopoverTrigger asChild>
+                            <DevModeButton className={`h-6 w-6`} />
+                        </PopoverTrigger>
+                        <PopoverContent className="w-48 p-3">
+                            <div className="space-y-2">
+                                <div className="space-y-1">
+                                    <div className="text-xs">
+                                        <div className="text-muted-foreground mb-0.5">locationId</div>
+                                        <CopyableText text={locationId} />
+                                    </div>
+                                    {order !== undefined && (
+                                        <div className="text-xs">
+                                            <div className="text-muted-foreground mb-0.5">order</div>
+                                            <CopyableText text={order.toString()} />
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </PopoverContent>
+                    </Popover>
+                </div>
+                {children}
+            </div>
+        );
+    }
+    return children;
+}