@tldiagram/core-ui 1.94.3 → 1.94.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.94.3",
+  "version": "1.94.5",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/PanelUI.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Box } from '@chakra-ui/react'
+import { Box, BoxProps } from '@chakra-ui/react'
 
-export function KbdHint({ children }: { children: string }) {
+export function KbdHint({ children, ...props }: { children: string } & BoxProps) {
   return (
     <Box
       as="span"
@@ -17,6 +17,7 @@ export function KbdHint({ children }: { children: string }) {
       color="whiteAlpha.900"
       flexShrink={0}
       ml={2}
+      {...props}
     >
       {children}
     </Box>

package/src/components/ViewExplorer/TagManager/index.tsx

@@ -60,6 +60,7 @@ export const TagManager: React.FC<Props> = ({
   layerCounts,
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isUnusedCollapsed, setIsUnusedCollapsed] = useState(true)
   const [expandedLayerIds, setExpandedLayerIds] = useState<Set<number>>(new Set())
   const [namingPopover, setNamingPopover] = useState<{
     isOpen: boolean;
@@ -122,7 +123,7 @@ export const TagManager: React.FC<Props> = ({
   const handleConfirmNaming = async (name: string) => {
     const { tags } = namingPopover
     if (!tags || tags.length === 0) return
-    
+
     const color = pickUnusedColor(Object.values(tagColors).map(t => t.color))
     await onCreateLayer(name, tags, color)
     setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null, targetLayerId: null }))
@@ -300,28 +301,53 @@ export const TagManager: React.FC<Props> = ({
                     <Divider borderColor="whiteAlpha.100" />
                   )}
                   {unusedTags.length > 0 && (
-                    <Wrap spacing={1} opacity={0.6}>
-                      {unusedTags.map((tag) => (
-                        <WrapItem key={tag}>
-                          <TagItem
-                            tag={tag}
-                            color={tagColors[tag]?.color || '#A0AEC0'}
-                            description={tagColors[tag]?.description || null}
-                            isAssigned={(selectedElement.tags || []).includes(tag)}
-                            tagCount={tagCounts[tag]}
-                            onToggle={() => onToggleTagOnElement(tag)}
-                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
-                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
-                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
-                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
-                            onConfirmNaming={handleConfirmNaming}
-                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
-                            onSetColor={(color) => onCreateTag(tag, color)}
-                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
-                          />
-                        </WrapItem>
-                      ))}
-                    </Wrap>
+                    <VStack align="stretch" spacing={2}>
+                      <HStack
+                        spacing={1.5}
+                        cursor="pointer"
+                        onClick={() => setIsUnusedCollapsed(!isUnusedCollapsed)}
+                        role="button"
+                        opacity={0.6}
+                        _hover={{ opacity: 1 }}
+                        transition="opacity 0.2s"
+                      >
+                        <Box
+                          transform={isUnusedCollapsed ? 'rotate(-90deg)' : 'none'}
+                          transition="transform 0.2s"
+                          display="flex"
+                          alignItems="center"
+                        >
+                          <ChevronDownIcon size={10} />
+                        </Box>
+                        <Text fontSize="10px" fontWeight="bold" color="gray.500" textTransform="uppercase" letterSpacing="0.05em">
+                          Unused on view ({unusedTags.length})
+                        </Text>
+                      </HStack>
+                      {!isUnusedCollapsed && (
+                        <Wrap spacing={1} opacity={0.6}>
+                          {unusedTags.map((tag) => (
+                            <WrapItem key={tag}>
+                              <TagItem
+                                tag={tag}
+                                color={tagColors[tag]?.color || '#A0AEC0'}
+                                description={tagColors[tag]?.description || null}
+                                isAssigned={(selectedElement.tags || []).includes(tag)}
+                                tagCount={tagCounts[tag]}
+                                onToggle={() => onToggleTagOnElement(tag)}
+                                onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                                onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                                onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                                namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                                onConfirmNaming={handleConfirmNaming}
+                                onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                                onSetColor={(color) => onCreateTag(tag, color)}
+                                onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                              />
+                            </WrapItem>
+                          ))}
+                        </Wrap>
+                      )}
+                    </VStack>
                   )}
                 </VStack>
               </Box>
@@ -385,26 +411,51 @@ export const TagManager: React.FC<Props> = ({
                     <Divider borderColor="whiteAlpha.100" />
                   )}
                   {unusedTags.length > 0 && (
-                    <Wrap spacing={2} opacity={0.6}>
-                      {unusedTags.map((tag) => (
-                        <WrapItem key={tag}>
-                          <TagItem
-                            tag={tag}
-                            color={tagColors[tag]?.color || '#A0AEC0'}
-                            description={tagColors[tag]?.description || null}
-                            tagCount={tagCounts[tag]}
-                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
-                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
-                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
-                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
-                            onConfirmNaming={handleConfirmNaming}
-                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
-                            onSetColor={(color) => onCreateTag(tag, color)}
-                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
-                          />
-                        </WrapItem>
-                      ))}
-                    </Wrap>
+                    <VStack align="stretch" spacing={2}>
+                      <HStack
+                        spacing={1.5}
+                        cursor="pointer"
+                        onClick={() => setIsUnusedCollapsed(!isUnusedCollapsed)}
+                        role="button"
+                        opacity={0.6}
+                        _hover={{ opacity: 1 }}
+                        transition="opacity 0.2s"
+                      >
+                        <Box
+                          transform={isUnusedCollapsed ? 'rotate(-90deg)' : 'none'}
+                          transition="transform 0.2s"
+                          display="flex"
+                          alignItems="center"
+                        >
+                          <ChevronDownIcon size={10} />
+                        </Box>
+                        <Text fontSize="10px" fontWeight="bold" color="gray.500" textTransform="uppercase" letterSpacing="0.05em">
+                          Other tags ({unusedTags.length})
+                        </Text>
+                      </HStack>
+                      {!isUnusedCollapsed && (
+                        <Wrap spacing={2} opacity={0.6}>
+                          {unusedTags.map((tag) => (
+                            <WrapItem key={tag}>
+                              <TagItem
+                                tag={tag}
+                                color={tagColors[tag]?.color || '#A0AEC0'}
+                                description={tagColors[tag]?.description || null}
+                                tagCount={tagCounts[tag]}
+                                onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                                onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                                onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                                namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                                onConfirmNaming={handleConfirmNaming}
+                                onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                                onSetColor={(color) => onCreateTag(tag, color)}
+                                onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                              />
+                            </WrapItem>
+                          ))}
+                        </Wrap>
+                      )}
+                    </VStack>
                   )}
                 </VStack>
               </Box>

package/src/components/ViewExplorer/ViewNavigator.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Box, Tooltip, VStack, Text, Divider } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { Box, Tooltip, VStack, Text, HStack } from '@chakra-ui/react'
 import { ZoomInIcon, ZoomOutIcon, ChevronDownIcon } from '../Icons'
 import { KbdHint } from '../PanelUI'
 import { NavItem } from './types'
@@ -20,6 +20,8 @@ export const ViewNavigator: React.FC<Props> = ({
   onFilterToggle,
   onHoverZoom,
 }) => {
+  const [hoveredType, setHoveredType] = useState<'out' | 'in' | null>(null)
+
   const renderNavButton = (type: 'out' | 'in', items: NavItem[]) => {
     const isOut = type === 'out'
     const label = isOut ? 'Zoom Out' : 'Zoom In'
@@ -28,6 +30,7 @@ export const ViewNavigator: React.FC<Props> = ({
     const disabled = items.length === 0
     const isActive = activeFilter === type
     const accentColor = isOut ? PARENT_VIEW_COLOR : CHILD_VIEW_COLOR
+    const isHovered = hoveredType === type
 
     const subtitle = disabled
       ? isOut
@@ -46,7 +49,7 @@ export const ViewNavigator: React.FC<Props> = ({
               : 'No child views'
             : `Navigate to ${isOut ? 'Parent' : 'Child'} View [${shortcut}]`
         }
-        placement="left"
+        placement="top"
         openDelay={400}
       >
         <Box
@@ -56,41 +59,125 @@ export const ViewNavigator: React.FC<Props> = ({
           disabled={disabled}
           onClick={() => onFilterToggle(type, items)}
           onMouseEnter={() => {
+            setHoveredType(type)
             if (disabled || items.length !== 1) return
             onHoverZoom?.(items[0].elementId ?? null, type)
           }}
           onMouseLeave={() => {
+            setHoveredType(null)
             if (disabled || items.length !== 1) return
             onHoverZoom?.(null, null)
           }}
           opacity={disabled ? 0.4 : 1}
+          flex={hoveredType === null ? 1 : (isHovered ? 4 : 1)}
+          transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+          minW={0}
+          overflow="hidden"
+          position="relative"
+          px={isHovered || hoveredType === null ? 3 : 1}
+          sx={{
+            '.panel-action-icon-container': {
+              transition: 'all 0.3s ease',
+              width: '28px',
+              height: '28px',
+              marginRight: isOut ? '0.5rem' : 0,
+              marginLeft: isOut ? 0 : '0.5rem',
+              position: 'relative',
+            }
+          }}
         >
-          <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
-            <IconCmp />
-          </Box>
-          <VStack align="start" spacing={0} flex={1} minW={0}>
-            <Text
-              fontSize="sm"
-              color={disabled ? 'gray.500' : 'white'}
-              fontWeight="medium"
-              isTruncated
-              w="full"
-              textAlign="left"
-            >
-              {label}
-            </Text>
-            <Text
-              fontSize="xs"
-              color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.400'}
-              isTruncated
-              w="full"
-              transition="color 0.15s"
-              textAlign="left"
-            >
-              {subtitle}
-            </Text>
-          </VStack>
-          {items.length > 1 && (
+          {isOut ? (
+            <>
+              <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
+                <IconCmp />
+                {items.length > 1 && (
+                  <Box
+                    position="absolute"
+                    bottom="-5px"
+                    right="-5px"
+                    color="white"
+                    fontSize="12px"
+                    fontWeight="bold"
+                    minW="14px"
+                    h="14px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    zIndex={2}
+                  >
+                    {items.length}
+                  </Box>
+                )}
+              </Box>
+              <VStack
+                align="start"
+                spacing={0}
+                flex={1}
+                minW={0}
+                opacity={hoveredType === 'in' ? 0 : 1}
+                transition="opacity 0.2s, transform 0.3s"
+                transform={hoveredType === 'in' ? 'translateX(-10px)' : 'none'}
+              >
+                <Text fontSize="xs" color={disabled ? 'gray.500' : 'white'} fontWeight="bold" isTruncated w="full" textAlign="left">
+                  {label}
+                </Text>
+                {isHovered && (
+                  <Text fontSize="10px" color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.500'} isTruncated w="full" transition="color 0.15s" textAlign="left">
+                    {subtitle}
+                  </Text>
+                )}
+              </VStack>
+              <Box opacity={hoveredType === 'in' ? 0 : 1} transition="opacity 0.2s">
+                <KbdHint ml={1}>{shortcut}</KbdHint>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box opacity={hoveredType === 'out' ? 0 : 1} transition="opacity 0.2s">
+                <KbdHint ml={0} mr={1}>{shortcut}</KbdHint>
+              </Box>
+              <VStack
+                align="end"
+                spacing={0}
+                flex={1}
+                minW={0}
+                opacity={hoveredType === 'out' ? 0 : 1}
+                transition="opacity 0.2s, transform 0.3s"
+                transform={hoveredType === 'out' ? 'translateX(10px)' : 'none'}
+              >
+                <Text fontSize="xs" color={disabled ? 'gray.500' : 'white'} fontWeight="bold" isTruncated w="full" textAlign="right">
+                  {label}
+                </Text>
+                {isHovered && (
+                  <Text fontSize="10px" color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.500'} isTruncated w="full" transition="color 0.15s" textAlign="right">
+                    {subtitle}
+                  </Text>
+                )}
+              </VStack>
+              <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
+                <IconCmp />
+                {items.length > 1 && (
+                  <Box
+                    position="absolute"
+                    bottom="-5px"
+                    right="-5px"
+                    color="white"
+                    fontSize="12px"
+                    fontWeight="bold"
+                    minW="14px"
+                    h="14px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    zIndex={2}
+                  >
+                    {items.length}
+                  </Box>
+                )}
+              </Box>
+            </>
+          )}
+          {items.length > 1 && isHovered && (
             <Box
               color="whiteAlpha.400"
               _groupHover={{ color: 'white' }}
@@ -102,20 +189,19 @@ export const ViewNavigator: React.FC<Props> = ({
               <ChevronDownIcon size={12} strokeWidth={3.5} />
             </Box>
           )}
-          {isActive && items.length <= 1 && (
+          {isActive && items.length <= 1 && isHovered && (
             <Box w="5px" h="5px" rounded="full" bg={accentColor} flexShrink={0} mx={1} />
           )}
-          <KbdHint>{shortcut}</KbdHint>
         </Box>
       </Tooltip>
     )
   }
 
   return (
-    <VStack spacing={0} align="stretch" flexShrink={0} py={1}>
-      <Box>{renderNavButton('out', parents)}</Box>
-      <Divider borderColor="whiteAlpha.100" />
-      <Box>{renderNavButton('in', children)}</Box>
-    </VStack>
+    <HStack spacing={0} align="stretch" flexShrink={0} height="60px" borderColor="whiteAlpha.100">
+      {renderNavButton('out', parents)}
+      <Box w="1px" bg="whiteAlpha.100" />
+      {renderNavButton('in', children)}
+    </HStack>
   )
 }

package/src/components/ViewExplorer/index.tsx

@@ -142,23 +142,17 @@ function ViewExplorer({
   const children = useMemo(() => {
     if (viewId == null) return []
     const diagMap = new Map<number, NavItem>()
-    flat.forEach((n) => {
-      if (n.parent_view_id === viewId)
-        diagMap.set(n.id, { id: n.id, name: n.name, subtitle: 'Child View' })
-    })
+    
     const objMap = new Map(viewElements.map((o) => [o.element_id, o.name]))
     Object.entries(linksMap).forEach(([elementIdStr, links]) => {
       const elementId = Number(elementIdStr)
-      if (!Number.isFinite(elementId)) return
-      const isOnCanvas = onCanvasIds.has(elementId)
+      if (!Number.isFinite(elementId) || !onCanvasIds.has(elementId)) return
+      
       const objName = objMap.get(elementId) || 'Element'
       links.forEach((link) => {
         const existing = diagMap.get(link.to_view_id)
         if (existing) {
-          if (!existing.elementId && isOnCanvas) existing.elementId = elementId
-          if (existing.subtitle === 'Child View') {
-            existing.subtitle = `Child View (Via ${objName})`
-          } else if (!existing.subtitle?.includes(objName)) {
+          if (!existing.subtitle?.includes(objName)) {
             existing.subtitle = `${existing.subtitle}, ${objName}`
           }
         } else {
@@ -166,13 +160,13 @@ function ViewExplorer({
             id: link.to_view_id,
             name: link.to_view_name,
             subtitle: `Via ${objName}`,
-            elementId: isOnCanvas ? elementId : undefined,
+            elementId: elementId,
           })
         }
       })
     })
     return Array.from(diagMap.values())
-  }, [viewId, flat, linksMap, viewElements, onCanvasIds])
+  }, [viewId, linksMap, viewElements, onCanvasIds])
 
   const viewHoverMap = useMemo(() => {
     const map = new Map<number, { elementId: number | undefined; type: 'in' | 'out' }>()
@@ -184,32 +178,14 @@ function ViewExplorer({
   const filteredByMode = useMemo(() => {
     if (activeFilter === 'out') {
       const parentIds = new Set(parents.map((p) => p.id))
-      const ancestors = new Set<number>()
-      const findAncestors = (id: number) => {
-        const node = treeNodes.find(n => n.id === id)
-        if (node?.parent_view_id) {
-          ancestors.add(node.parent_view_id)
-          findAncestors(node.parent_view_id)
-        }
-      }
-      if (viewId) findAncestors(viewId)
-      return flat.filter((n) => parentIds.has(n.id) || ancestors.has(n.id) || n.id === viewId)
+      return flat.filter((n) => parentIds.has(n.id) || n.id === viewId)
     }
     if (activeFilter === 'in') {
       const childIds = new Set(children.map((c) => c.id))
-      const subtree = new Set<number>()
-      const traverse = (nodes: TreeNode[]) => {
-        nodes.forEach(n => {
-          subtree.add(n.id)
-          traverse(n.children)
-        })
-      }
-      const current = flat.find(n => n.id === viewId)
-      if (current) traverse(current.children)
-      return flat.filter((n) => childIds.has(n.id) || subtree.has(n.id) || n.id === viewId)
+      return flat.filter((n) => childIds.has(n.id) || n.id === viewId)
     }
     return flat
-  }, [flat, parents, children, activeFilter, viewId, treeNodes])
+  }, [flat, parents, children, activeFilter, viewId])
 
   const filtered = useMemo(() => {
     if (!query.trim()) return filteredByMode

package/src/components/ViewFloatingMenu.tsx

@@ -49,6 +49,8 @@ export interface ViewFloatingMenuProps extends ViewFloatingMenuSlots {
   setHighlightColor: (color: string | null) => void
 
   toolbarSlot?: React.ReactNode
+  hideFocusView?: boolean
+  hideExpandExtras?: boolean
 }
 
 /**
@@ -83,6 +85,8 @@ function ViewFloatingMenu({
   setHighlightColor,
   shareSlot,
   toolbarSlot,
+  hideFocusView = false,
+  hideExpandExtras = false,
 }: ViewFloatingMenuProps) {
   const { canEdit } = useViewEditorContext()
   const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
@@ -127,24 +131,28 @@ function ViewFloatingMenu({
         </Button>
       </Tooltip>
 
-      <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-      <Tooltip label={focusMode ? 'Show context' : 'Focus on this view'} placement="top" openDelay={200}>
-        <Button
-          variant="ghost"
-          h="28px"
-          px={2.5}
-          color={focusMode ? 'var(--accent)' : 'gray.300'}
-          bg={focusMode ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
-          _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
-          onClick={() => onFocusModeChange(!focusMode)}
-        >
-          <HStack spacing={1.5}>
-            <FocusSvg />
-            <Text fontSize="11px" fontWeight="normal">Focus View</Text>
-            <Box w="6px" h="6px" rounded="full" bg={focusMode ? 'var(--accent)' : 'gray.500'} />
-          </HStack>
-        </Button>
-      </Tooltip>
+      {!hideFocusView && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          <Tooltip label={focusMode ? 'Show context' : 'Focus on this view'} placement="top" openDelay={200}>
+            <Button
+              variant="ghost"
+              h="28px"
+              px={2.5}
+              color={focusMode ? 'var(--accent)' : 'gray.300'}
+              bg={focusMode ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+              _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+              onClick={() => onFocusModeChange(!focusMode)}
+            >
+              <HStack spacing={1.5}>
+                <FocusSvg />
+                <Text fontSize="11px" fontWeight="normal">Focus View</Text>
+                <Box w="6px" h="6px" rounded="full" bg={focusMode ? 'var(--accent)' : 'gray.500'} />
+              </HStack>
+            </Button>
+          </Tooltip>
+        </>
+      )}
       <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
 
       {(allTags.length > 0 || layers.length > 0) && (
@@ -356,22 +364,26 @@ function ViewFloatingMenu({
         </>
       )}
 
-      <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-      <Button
-        variant="ghost"
-        h="28px"
-        minW="36px"
-        px={2}
-        display="inline-flex"
-        alignItems="center"
-        justifyContent="center"
-        color="gray.300"
-        _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
-        onClick={() => setExtrasOpen((prev) => !prev)}
-        aria-label={extrasOpen ? 'Collapse extras' : 'Expand extras'}
-      >
-        {extrasOpen ? <CollapseExtrasSvg /> : <ExpandExtrasSvg />}
-      </Button>
+      {!hideExpandExtras && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          <Button
+            variant="ghost"
+            h="28px"
+            minW="36px"
+            px={2}
+            display="inline-flex"
+            alignItems="center"
+            justifyContent="center"
+            color="gray.300"
+            _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+            onClick={() => setExtrasOpen((prev) => !prev)}
+            aria-label={extrasOpen ? 'Collapse extras' : 'Expand extras'}
+          >
+            {extrasOpen ? <CollapseExtrasSvg /> : <ExpandExtrasSvg />}
+          </Button>
+        </>
+      )}
     </HStack>
   )
 }