test: add comprehensive test suite for components, composables, and pages

Add 16 new test files covering:
- Composables: useBackend, useMeta, useDataJson
- Type classes: QueryResult, ResumeContent
- UI components: BadgeList, BadgeListCard
- Navbar components: LanguageSwitcher, ThemeSwitcher
- App components: AppNavbar, AppFooter
- VocalSynth components: Projects, Tools
- Pages: contact, resume, [...slug]

Tests focus on pure logic, interfaces, and component rendering where
possible, avoiding complex mocking of Nuxt auto-imported composables.

Total: 174 tests across 17 test files (including existing useApi tests).

app/components/navbar/ThemeSwitcher.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+
+describe('ThemeSwitcher', () => {
+  describe('icon mapping', () => {
+    const icons: Record<string, string> = {
+      light: 'material-symbols:light-mode',
+      dark: 'material-symbols:dark-mode',
+      system: 'material-symbols:computer-outline',
+    };
+
+    it('should have correct icon for light theme', () => {
+      expect(icons.light).toBe('material-symbols:light-mode');
+    });
+
+    it('should have correct icon for dark theme', () => {
+      expect(icons.dark).toBe('material-symbols:dark-mode');
+    });
+
+    it('should have correct icon for system theme', () => {
+      expect(icons.system).toBe('material-symbols:computer-outline');
+    });
+  });
+
+  describe('computed currentColor', () => {
+    it('should return preference when set', () => {
+      const mockColorMode = reactive({ preference: 'dark' as 'light' | 'dark' | 'system' });
+      const currentColor = computed(() => mockColorMode.preference ?? 'system');
+
+      expect(currentColor.value).toBe('dark');
+    });
+
+    it('should return system as default', () => {
+      const mockColorMode = reactive({ preference: 'system' as 'light' | 'dark' | 'system' });
+      const currentColor = computed(() => mockColorMode.preference ?? 'system');
+
+      expect(currentColor.value).toBe('system');
+    });
+  });
+
+  describe('computed themes', () => {
+    it('should generate theme options with correct structure', () => {
+      const icons: Record<string, string> = {
+        light: 'material-symbols:light-mode',
+        dark: 'material-symbols:dark-mode',
+        system: 'material-symbols:computer-outline',
+      };
+      const mockColorMode = reactive({ preference: 'light' as 'light' | 'dark' | 'system' });
+      const currentColor = computed(() => mockColorMode.preference ?? 'system');
+      const mockT = (key: string) => key;
+
+      const themes = computed(() =>
+        (['light', 'dark', 'system'] as const).map((theme) => ({
+          code: theme,
+          label: mockT(`theme.${theme}`),
+          icon: icons[theme],
+          type: 'checkbox' as const,
+          checked: currentColor.value === theme,
+        })),
+      );
+
+      expect(themes.value).toHaveLength(3);
+      expect(themes.value[0]!.code).toBe('light');
+      expect(themes.value[0]!.checked).toBe(true);
+      expect(themes.value[1]!.code).toBe('dark');
+      expect(themes.value[1]!.checked).toBe(false);
+      expect(themes.value[2]!.code).toBe('system');
+      expect(themes.value[2]!.checked).toBe(false);
+    });
+  });
+
+  describe('switchColor', () => {
+    it('should update colorMode.preference when called', () => {
+      const mockColorMode = reactive({ preference: 'system' as 'light' | 'dark' | 'system' });
+      const switchColor = (theme: 'light' | 'dark' | 'system') => {
+        mockColorMode.preference = theme;
+      };
+
+      switchColor('dark');
+
+      expect(mockColorMode.preference).toBe('dark');
+    });
+  });
+});