Add About section to SettingsMenu and update translations

Author: GilbN

src/components/SettingsMenu.svelte

@@ -4,6 +4,8 @@
   import { t } from '../lib/i18n.js'
 
   let open = $state(false)
+  let showAbout = $state(false)
+  const appVersion = __APP_VERSION__
   const SCALES = [1, 1.2, 1.4]
   const SCALE_LABELS = { 1: '100%', 1.2: '120%', 1.4: '140%' }
 
@@ -180,6 +182,42 @@
         <span class="row-value on">{$preferences.lang === 'no' ? 'EN →' : 'NO →'}</span>
       </button>
 
+      <div class="divider"></div>
+
+      <!-- About -->
+      <button class="row" onclick={() => showAbout = !showAbout} role="menuitem">
+        <span class="row-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="12" y1="16" x2="12" y2="12"/>
+            <line x1="12" y1="8" x2="12.01" y2="8"/>
+          </svg>
+        </span>
+        <span class="row-label">{$t('about')}</span>
+        <span class="row-value on">{showAbout ? '▲' : '▼'}</span>
+      </button>
+
+      {#if showAbout}
+        <div class="about-section">
+          <div class="about-row">
+            <span class="about-label">{$t('version')}</span>
+            <span class="about-value">{appVersion}</span>
+          </div>
+          <div class="about-row">
+            <span class="about-label">{$t('sourceCode')}</span>
+            <a class="about-link" href="https://github.com/GilbN/nsf-timer" target="_blank" rel="noopener">GitHub</a>
+          </div>
+          <div class="about-row">
+            <span class="about-label">{$t('license')}</span>
+            <span class="about-value">MIT</span>
+          </div>
+          <div class="about-row">
+            <span class="about-label">{$t('reportBug')}</span>
+            <a class="about-link" href="https://github.com/GilbN/nsf-timer/issues" target="_blank" rel="noopener">GitHub Issues</a>
+          </div>
+        </div>
+      {/if}
+
     </div>
   {/if}
 </div>
@@ -299,4 +337,40 @@
     background: rgba(255,255,255,0.06);
     margin: 2px 0;
   }
+
+  .about-section {
+    padding: 6px 14px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .about-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+  }
+
+  .about-label {
+    color: var(--text-secondary);
+  }
+
+  .about-value {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 0.6875rem;
+    letter-spacing: 0.04em;
+  }
+
+  .about-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.6875rem;
+  }
+
+  .about-link:hover {
+    text-decoration: underline;
+  }
 </style>

src/lib/i18n.js

@@ -126,6 +126,11 @@ const translations = {
     watchDisplay: 'Vis',
     watchDisplayHint: 'Stor skjermvisning for monitor/nettbrett uten kontroller',
     tagline: 'NSF 25m Konkurransetimer',
+    about: 'Om',
+    version: 'Versjon',
+    sourceCode: 'Kildekode',
+    license: 'Lisens',
+    reportBug: 'Rapporter feil',
   },
   en: {
     appName: 'NSF Timer',
@@ -251,6 +256,11 @@ const translations = {
     watchDisplay: 'Display',
     watchDisplayHint: 'Large-screen view for monitors/tablets — no controls',
     tagline: 'NSF 25m Competition Timer',
+    about: 'About',
+    version: 'Version',
+    sourceCode: 'Source Code',
+    license: 'License',
+    reportBug: 'Report a Bug',
   },
 }
 

vite.config.js

@@ -3,11 +3,17 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { VitePWA } from 'vite-plugin-pwa'
 import tailwindcss from '@tailwindcss/vite'
 import basicSsl from '@vitejs/plugin-basic-ssl'
+import { readFileSync } from 'fs'
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'))
 
 export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const wsPort = env.WS_PORT || '8080'
   return {
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
   base: env.VITE_BASE_PATH || '/',
   server: command === 'serve' ? {
     https: env.VITE_HTTPS === 'true',