feat(shared-ui): add nested language submenu in PillNavigation

- Move language selector into nested submenu within user dropdown
- Show full language name instead of code (e.g., "🇩🇪 Deutsch" vs "🇩🇪 DE")
- Align submenu items with parent pill styling (same padding, font-size, gap)
- Left-align submenu content
- Add extra spacing between flag emoji and text

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/shared-i18n/src/utils.ts

@@ -269,7 +269,7 @@ export function getLanguageDropdownItems(
 		const info = getLanguageInfo(locale);
 		return {
 			id: locale,
-			label: info ? `${info.emoji} ${info.nativeName}` : locale.toUpperCase(),
+			label: info ? `${info.emoji}  ${info.nativeName}` : locale.toUpperCase(),
 			onClick: () => onLocaleChange(locale),
 			active: currentLocale === locale,
 		};
@@ -279,12 +279,12 @@ export function getLanguageDropdownItems(
 /**
  * Get current language label for PillDropdown trigger
  * @param currentLocale - Currently selected locale
- * @returns Label with flag emoji and language code (e.g., "🇩🇪 DE")
+ * @returns Label with flag emoji and native name (e.g., "🇩🇪 Deutsch")
  */
 export function getCurrentLanguageLabel(currentLocale: string): string {
 	const info = getLanguageInfo(currentLocale);
 	if (info) {
-		return `${info.emoji} ${currentLocale.toUpperCase()}`;
+		return `${info.emoji}  ${info.nativeName}`;
 	}
 	return currentLocale.toUpperCase();
 }

packages/shared-ui/src/navigation/PillDropdown.svelte

@@ -453,20 +453,21 @@
 	.submenu-container {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		padding-left: 1rem;
-		margin-top: -0.25rem;
-		margin-bottom: 0.25rem;
+		gap: 0.5rem;
+		margin-top: 0;
+		margin-bottom: 0;
 	}
 
 	.submenu-item {
-		padding: 0.375rem 0.75rem;
-		font-size: 0.8125rem;
+		padding: 0.5rem 0.875rem;
+		font-size: 0.875rem;
 		animation: fanIn 0.15s ease-out forwards;
 		opacity: 0;
+		justify-content: flex-start;
 	}
 
 	.submenu-item .pill-label {
 		flex: 1;
+		text-align: left;
 	}
 </style>

packages/shared-ui/src/navigation/PillNavigation.svelte

@@ -457,10 +457,14 @@
 						...(showLanguageSwitcher && languageItems.length > 0
 							? [
 									{ id: 'language-divider', label: '', divider: true },
-									...languageItems.map((item) => ({
-										...item,
-										id: `lang-${item.id}`,
-									})),
+									{
+										id: 'language',
+										label: currentLanguageLabel,
+										submenu: languageItems.map((item) => ({
+											...item,
+											id: `lang-${item.id}`,
+										})),
+									},
 								]
 							: []),
 						{ id: 'logout-divider', label: '', divider: true },