Compact language switcher layout

lib/app_shell.dart

@@ -459,8 +459,8 @@ class _HomeShellState extends State<HomeShell> {
                           child: Row(
                             children: [
                               Container(
-                                width: 42,
+                                width: 38,
-                                height: 42,
+                                height: 38,
                                 decoration: BoxDecoration(
                                   color: sage,
                                   borderRadius: BorderRadius.circular(15),
@@ -472,7 +472,7 @@ class _HomeShellState extends State<HomeShell> {
                                   size: 24,
                                 ),
                               ),
-                              const SizedBox(width: 10),
+                              const SizedBox(width: 8),
                               Expanded(
                                 child: Column(
                                   crossAxisAlignment: CrossAxisAlignment.start,
@@ -500,7 +500,7 @@ class _HomeShellState extends State<HomeShell> {
                                       ),
                                     ),
                                     const SizedBox(height: 2),
-                                    LanguageSwitcher(
+                                    CompactLanguageSwitcher(
                                       languageCode: widget.languageCode,
                                       onChanged: widget.onLanguageChanged,
                                       labels: text,
@@ -527,7 +527,7 @@ class _HomeShellState extends State<HomeShell> {
                                 style: IconButton.styleFrom(
                                   backgroundColor: Colors.white,
                                   foregroundColor: sage,
-                                  minimumSize: const Size(36, 36),
+                                  minimumSize: const Size(32, 32),
                                   tapTargetSize:
                                       MaterialTapTargetSize.shrinkWrap,
                                   padding: EdgeInsets.zero,
@@ -1350,3 +1350,134 @@ class _LanguagePill extends StatelessWidget {
     );
   }
 }
+
+class CompactLanguageSwitcher extends StatelessWidget {
+  const CompactLanguageSwitcher({
+    super.key,
+    required this.languageCode,
+    required this.onChanged,
+    required this.labels,
+  });
+
+  final String languageCode;
+  final ValueChanged<String> onChanged;
+  final AppText labels;
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        alignment: Alignment.centerLeft,
+        child: Container(
+          height: 22,
+          padding: const EdgeInsets.all(2),
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(999),
+            border: Border.all(color: sage.withValues(alpha: .16)),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              _CompactLanguagePill(
+                selected: languageCode != 'en',
+                colors: const [
+                  Color(0xFFCE2939),
+                  Colors.white,
+                  Color(0xFF477050),
+                ],
+                label: labels.hunShort,
+                onTap: () => onChanged('hu'),
+              ),
+              _CompactLanguagePill(
+                selected: languageCode == 'en',
+                colors: const [
+                  Color(0xFF012169),
+                  Colors.white,
+                  Color(0xFFC8102E),
+                ],
+                label: labels.engShort,
+                onTap: () => onChanged('en'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _CompactLanguagePill extends StatelessWidget {
+  const _CompactLanguagePill({
+    required this.selected,
+    required this.colors,
+    required this.label,
+    required this.onTap,
+  });
+
+  final bool selected;
+  final List<Color> colors;
+  final String label;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      borderRadius: BorderRadius.circular(999),
+      onTap: selected ? null : onTap,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 180),
+        padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
+        decoration: BoxDecoration(
+          color: selected ? sage : Colors.transparent,
+          borderRadius: BorderRadius.circular(999),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _MiniFlag(colors: colors),
+            const SizedBox(width: 2),
+            Text(
+              label,
+              style: TextStyle(
+                fontSize: 8,
+                height: 1,
+                fontWeight: FontWeight.w900,
+                color: selected ? Colors.white : Colors.black45,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _MiniFlag extends StatelessWidget {
+  const _MiniFlag({required this.colors});
+
+  final List<Color> colors;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 12,
+      height: 8,
+      clipBehavior: Clip.antiAlias,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(2),
+        border: Border.all(
+          color: Colors.black.withValues(alpha: .10),
+          width: .5,
+        ),
+      ),
+      child: Column(
+        children: colors
+            .map((color) => Expanded(child: Container(color: color)))
+            .toList(),
+      ),
+    );
+  }
+}