Added new locales, reduced About page scope

Author: stefan-ernst

frontend/src/lib/pages/About.svelte

@@ -3,6 +3,7 @@
   import Button from '../components/Button.svelte';
   import { versionLabel } from '../version.js';
   import { t } from '../stores/i18n.svelte.js';
+    import { IconClock } from '@tabler/icons-svelte-runes';
 
   let { version = versionLabel } = $props();
 </script>
@@ -35,48 +36,6 @@
         </div>
       </section>
 
-      <!-- Features Section -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-6" style="color: var(--ds-text);">{t('about.keyFeatures')}</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div class="p-6 rounded border" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-            <div class="flex items-center gap-3 mb-4">
-              <div class="p-2 rounded" style="background-color: var(--ds-interactive-subtle);">
-                <Users class="w-5 h-5" style="color: var(--ds-interactive);" />
-              </div>
-              <h3 class="font-semibold" style="color: var(--ds-text);">{t('about.projectManagement')}</h3>
-            </div>
-            <p class="text-sm" style="color: var(--ds-text-subtle);">
-              {t('about.projectManagementDesc')}
-            </p>
-          </div>
-
-          <div class="p-6 rounded border" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-            <div class="flex items-center gap-3 mb-4">
-              <div class="p-2 rounded" style="background-color: var(--ds-interactive-subtle);">
-                <Zap class="w-5 h-5" style="color: var(--ds-interactive);" />
-              </div>
-              <h3 class="font-semibold" style="color: var(--ds-text);">{t('about.testManagement')}</h3>
-            </div>
-            <p class="text-sm" style="color: var(--ds-text-subtle);">
-              {t('about.testManagementDesc')}
-            </p>
-          </div>
-
-          <div class="p-6 rounded border" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-            <div class="flex items-center gap-3 mb-4">
-              <div class="p-2 rounded" style="background-color: var(--ds-interactive-subtle);">
-                <Heart class="w-5 h-5" style="color: var(--ds-interactive);" />
-              </div>
-              <h3 class="font-semibold" style="color: var(--ds-text);">{t('about.timeTracking')}</h3>
-            </div>
-            <p class="text-sm" style="color: var(--ds-text-subtle);">
-              {t('about.timeTrackingDesc')}
-            </p>
-          </div>
-        </div>
-      </section>
-
       <!-- Notable Libraries -->
       <section>
         <h2 class="text-2xl font-semibold mb-6" style="color: var(--ds-text);">{t('about.builtWith')}</h2>

frontend/src/lib/pages/UserProfile.svelte

@@ -574,7 +574,8 @@
 		       loc.code === 'de' ? 'Deutsch (German)' :
 		       loc.code === 'es' ? 'Español (Spanish)' :
 		       loc.code === 'ar' ? 'العربية (Arabic)' :
-		       loc.code === 'pt-BR' ? 'Português (Brasil)' : loc.name
+		       loc.code === 'pt-BR' ? 'Português (Brasil)' :
+		       loc.code === 'zh-CN' ? '简体中文 (Chinese)' : loc.name
 	}));
 </script>
 

frontend/src/lib/stores/i18n.svelte.js

@@ -20,6 +20,7 @@ export const SUPPORTED_LOCALES = [
   { code: 'es', name: 'Español', direction: 'ltr' },
   { code: 'ar', name: 'العربية', direction: 'rtl' },
   { code: 'pt-BR', name: 'Português (Brasil)', direction: 'ltr' },
+  { code: 'zh-CN', name: '简体中文', direction: 'ltr' },
 ];
 
 // Reactive state using Svelte 5 runes