Nested Groups Fixes

src/lib/components/tui/TuiGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { getSegmentStyle, getLinePrefix, getSegmentsUpToChar, parseColorText, getPlainText } from './utils';
+	import { handleNavigation } from './terminal-keyboard';
 	import { user } from '$lib/config';
 	import { themeColors } from '$lib/stores/theme';
 	import TuiButton from './TuiButton.svelte';
@@ -10,6 +11,7 @@
 	import TuiInput from './TuiInput.svelte';
 	import TuiCheckbox from './TuiCheckbox.svelte';
 	import TuiToggle from './TuiToggle.svelte';
+	import TuiGroup from './TuiGroup.svelte';
 	import type { TerminalLine } from './types';
 
 	interface Props {
@@ -83,7 +85,7 @@
 				{/if}
 			</div>
 		{:else if child.type === 'button'}
-			<TuiButton line={child} index={idx} selected={false} onClick={onButtonClick} onHover={onHoverButton} inline={childInline} />
+			<TuiButton line={child} index={idx} selected={false} onClick={() => handleNavigation(child)} onHover={() => {}} inline={childInline} />
 		{:else if child.type === 'link'}
 			<TuiLink line={child} onClick={() => onLinkClick(idx)} />
 		{:else if child.type === 'tooltip'}
@@ -96,6 +98,8 @@
 			<TuiCheckbox line={child} inline={childInline} />
 		{:else if child.type === 'toggle'}
 			<TuiToggle line={child} inline={childInline} />
+		{:else if child.type === 'group'}
+			<TuiGroup line={child} inline={childInline} {onButtonClick} {onHoverButton} {onLinkClick} />
 		{:else if child.type === 'header'}
 			<span class="content header-text">
 				<Icon icon="mdi:pound" width="14" class="header-icon" />