From a771ab984be6cf32dd873e9d50d52c9997d468aa Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Fri, 19 Jun 2026 03:18:22 +0000
Subject: [PATCH] Add hovercard

---
 .../src/components/nav/NavigationTree.tsx     | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/nav/NavigationTree.tsx b/src/frontend/src/components/nav/NavigationTree.tsx
index 2ccd97594a..03e73c9ee0 100644
--- a/src/frontend/src/components/nav/NavigationTree.tsx
+++ b/src/frontend/src/components/nav/NavigationTree.tsx
@@ -5,6 +5,7 @@ import {
   Divider,
   Drawer,
   Group,
+  HoverCard,
   Loader,
   LoadingOverlay,
   type RenderTreeNodePayload,
@@ -301,13 +302,39 @@ export default function NavigationTree({
               )
             ) : null}
           </ActionIcon>
-          <Anchor
-            onClick={(event: any) => follow(payload.node, event)}
-            aria-label={`nav-tree-item-${payload.node.value}`}
-            c='var(--mantine-color-text)'
+          <HoverCard
+            width={260}
+            shadow='md'
+            withArrow
+            closeDelay={100}
+            openDelay={500}
+            position='top-end'
           >
-            {payload.node.label}
-          </Anchor>
+            <HoverCard.Target>
+              <Anchor
+                onClick={(event: any) => follow(payload.node, event)}
+                aria-label={`nav-tree-item-${payload.node.value}`}
+                c='var(--mantine-color-text)'
+              >
+                {payload.node.label}
+              </Anchor>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <Stack gap={4}>
+                <Group gap='xs' wrap='nowrap'>
+                  {nodeInfo.icon && <ApiIcon name={nodeInfo.icon} />}
+                  <Text fw={600} size='sm'>
+                    {nodeInfo.name}
+                  </Text>
+                </Group>
+                {nodeInfo.description && (
+                  <Text size='sm' c='dimmed'>
+                    {nodeInfo.description}
+                  </Text>
+                )}
+              </Stack>
+            </HoverCard.Dropdown>
+          </HoverCard>
         </Group>
       );
     },