feat(ui): Enhance SourceSwitcher component design

Improves the visual presentation and usability of the source selection dropdown menu.

- Aligns the dropdown menu correctly under the trigger button.
- Implements a tree-like structure with connecting lines to clearly represent the data source hierarchy.
- Adds a visual highlight to the currently selected item in the list.

Author: Uli-Z

package-lock.json

@@ -75,6 +75,7 @@
     "@radix-ui/react-dropdown-menu": "^2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-tooltip": "^1",
+    "clsx": "^2.1.1",
     "csv-parse": "^5.6.0",
     "escape-string-regexp": "^5",
     "fast-glob": "^3",

package.json

@@ -112,12 +112,59 @@
   padding: 0.5rem 1rem;
   cursor: pointer;
   color: var(--rt-text-color);
+  position: relative;
+  padding-left: calc(1rem + (var(--level, 0) * 1.5rem));
+  outline: none; /* Radix adds a default outline */
 }
 
-.sourceSwitcherItem:hover {
+.sourceSwitcherItem[data-highlighted] {
   background-color: var(--rt-subtle-background-hover);
 }
 
+.sourceSwitcherItemSelected {
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+}
+
+.sourceSwitcherItemContainer {
+  position: relative;
+}
+
+/* Vertical line for all indented items */
+.sourceSwitcherItemIndented::before {
+  content: '';
+  position: absolute;
+  left: calc(1rem + (var(--level, 1) - 1) * 1.5rem);
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--rt-border-color);
+  z-index: 1;
+}
+
+/* Horizontal line (elbow) for all indented items */
+.sourceSwitcherItemIndented::after {
+  content: '';
+  position: absolute;
+  left: calc(1rem + (var(--level, 1) - 1) * 1.5rem);
+  top: 50%;
+  height: 1px;
+  width: 1rem; /* Connects the vertical line to the item */
+  background-color: var(--rt-border-color);
+  z-index: 1;
+}
+
+/* For the last item in a group, the vertical line should only go halfway down */
+.sourceSwitcherItemIsLast::before {
+  height: 50%;
+}
+
+.sourceSwitcherItemInner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 
 /* ============================================================================
    Tooltip

src/theme/ResistanceTable/styles.module.css

@@ -1,38 +1,59 @@
 import React from 'react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
+import clsx from 'clsx';
 
 // Recursive component to render the source tree
 const SourceMenuItem = ({
   source,
+  selected,
   onSelect,
   styles,
   level = 0,
+  isLast = false,
   locale,
-}) => (
-  <>
-    <DropdownMenu.Item
-      key={source.id}
-      className={styles.sourceSwitcherItem}
-      style={{ paddingLeft: `${1 + level * 1.5}rem` }}
-      onSelect={() => onSelect(source)}
-    >
-      {source[`name_${locale}`] || source.name_en || source.id}
-    </DropdownMenu.Item>
-    {source.children && source.children.length > 0 && (
-      source.children.map(child => (
-        <SourceMenuItem
-          key={child.id}
-          source={child}
-          onSelect={onSelect}
-          styles={styles}
-          level={level + 1}
-          locale={locale}
-        />
-      ))
-    )}
-  </>
-);
+}) => {
+  const hasChildren = source.children && source.children.length > 0;
+  const isSelected = selected?.id === source.id;
+
+  return (
+    <div className={styles.sourceSwitcherItemContainer} role="presentation">
+      <DropdownMenu.Item
+        key={source.id}
+        className={clsx(
+          styles.sourceSwitcherItem,
+          isSelected && styles.sourceSwitcherItemSelected,
+          isLast && styles.sourceSwitcherItemIsLast,
+          level > 0 && styles.sourceSwitcherItemIndented,
+        )}
+        style={{ '--level': level }}
+        onSelect={() => onSelect(source)}
+        role="menuitemradio"
+        aria-checked={isSelected}
+      >
+        <span className={styles.sourceSwitcherItemInner}>
+          <span className={styles.sourceSwitcherItemLabel}>{source[`name_${locale}`] || source.name_en || source.id}</span>
+        </span>
+      </DropdownMenu.Item>
+      {hasChildren && (
+        <div className={styles.sourceSwitcherSubMenu} role="group">
+          {source.children.map((child, index) => (
+            <SourceMenuItem
+              key={child.id}
+              source={child}
+              selected={selected}
+              onSelect={onSelect}
+              styles={styles}
+              level={level + 1}
+              isLast={index === source.children.length - 1}
+              locale={locale}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
 
 export const SourceSwitcher = ({
   sources,
@@ -58,10 +79,20 @@ export const SourceSwitcher = ({
         </button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className={styles.sourceSwitcherContent} sideOffset={5}>
-          {sources.map((s) => (
-            <SourceMenuItem key={s.id} source={s} onSelect={onSelect} styles={styles} locale={locale} />
-          ))}
+        <DropdownMenu.Content className={styles.sourceSwitcherContent} sideOffset={-1} align="start">
+          <DropdownMenu.RadioGroup value={selected?.id}>
+            {sources.map((s, index) => (
+              <SourceMenuItem
+                key={s.id}
+                source={s}
+                selected={selected}
+                onSelect={onSelect}
+                styles={styles}
+                isLast={index === sources.length - 1}
+                locale={locale}
+              />
+            ))}
+          </DropdownMenu.RadioGroup>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>