feat: Add translations to stopwatch.svelte

This commit also demonstrates how to do i18n across apps.

7 files changed, 45 insertions, 49 deletions

diff --git a/apps/projects/src/app/index.svelte b/apps/projects/src/app/index.svelte
index e397de3..5c02004 100644
--- a/apps/projects/src/app/index.svelte
+++ b/apps/projects/src/app/index.svelte
@@ -2,8 +2,9 @@
 <svelte:window bind:online={online}/>
 
 <script lang="ts">
+    import {Locales} from "$app/lib/i18n/i18n-types";
     import {logout_user} from "$app/lib/services/user-service";
-    import {currentLocale, preffered_or_default} from "$app/lib/stores/locale";
+    import {currentLocale, preffered_or_default} from "$shared/lib/locale";
     import {CookieNames} from "$shared/lib/configuration";
     import {get_cookie} from "$shared/lib/helpers";
     import {Temporal} from "@js-temporal/polyfill";
@@ -29,23 +30,23 @@
     console.log("Projects Startup Report", {
         prefferedLocale: navigator.language,
         timeZone: Temporal.Now.timeZone().id,
-        go_theme: get_cookie(CookieNames.theme),
-        go_locale: get_cookie(CookieNames.locale),
+        themeCookie: {name: CookieNames.theme, value: get_cookie(CookieNames.theme)},
+        localeCookie: {name: CookieNames.locale, value: get_cookie(CookieNames.locale)},
         prefersColorScheme: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
     });
 
     currentLocale.subscribe(async locale => {
-        locale = locale === "preffered" ? preffered_or_default() : locale;
-        await loadLocaleAsync(locale);
-        LL = i18nObject(locale);
-        setLocale(locale);
+        locale = (locale === "preffered" ? preffered_or_default() : locale);
+        await loadLocaleAsync(locale as Locales);
+        LL = i18nObject(locale as Locales);
+        setLocale(locale as Locales);
     });
 
     onMount(async () => {
         const locale = $currentLocale === "preffered" ? preffered_or_default() : $currentLocale;
-        await loadLocaleAsync(locale);
-        LL = i18nObject(locale);
-        setLocale(locale);
+        await loadLocaleAsync(locale as Locales);
+        LL = i18nObject(locale as Locales);
+        setLocale(locale as Locales);
         notOnlineText = LL.messages.noInternet();
     });
 
diff --git a/apps/projects/src/app/lib/i18n/i18n-types.ts b/apps/projects/src/app/lib/i18n/i18n-types.ts
index f9fd9cc..b0031f6 100644
--- a/apps/projects/src/app/lib/i18n/i18n-types.ts
+++ b/apps/projects/src/app/lib/i18n/i18n-types.ts
@@ -117,6 +117,10 @@ type RootTranslation = {
 			 * No categories
 			 */
 			noCategories: string
+			/**
+			 * Categories
+			 */
+			categories: string
 		}
 		settingsLabelsTile: {
 			/**
@@ -152,6 +156,10 @@ type RootTranslation = {
 			 * No labels
 			 */
 			noLabels: string
+			/**
+			 * Labels
+			 */
+			labels: string
 		}
 		entryForm: {
 			/**
@@ -516,6 +524,10 @@ export type TranslationFunctions = {
 			 * No categories
 			 */
 			noCategories: () => LocalizedString
+			/**
+			 * Categories
+			 */
+			categories: () => LocalizedString
 		}
 		settingsLabelsTile: {
 			/**
@@ -551,6 +563,10 @@ export type TranslationFunctions = {
 			 * No labels
 			 */
 			noLabels: () => LocalizedString
+			/**
+			 * Labels
+			 */
+			labels: () => LocalizedString
 		}
 		entryForm: {
 			/**
diff --git a/apps/projects/src/app/lib/i18n/nb/index.ts b/apps/projects/src/app/lib/i18n/nb/index.ts
index af3a487..28e4bc1 100644
--- a/apps/projects/src/app/lib/i18n/nb/index.ts
+++ b/apps/projects/src/app/lib/i18n/nb/index.ts
@@ -104,16 +104,16 @@ const nb: Translation = {
         hourSingleChar: "t",
         minSingleChar: "m",
         confirmDeleteEntry: "Er du sikker på at du vil slette denne raden?",
-        newEntry: "Ny rad",
+        newEntry: "Ny tidsoppføring",
         editEntry: "Rediger rad",
         deleteEntry: "Slett rad",
         loggedTimeToday: "Registrert tid hittil idag",
         currentTime: "Klokken",
         loading: "Laster",
         stopwatch: "Stoppeklokke",
-        todayEntries: "Dagens rader",
-        noEntriesToday: "Ingen rader i dag",
-        refreshTodayEntries: "Last inn dagens rader på nytt",
+        todayEntries: "Dagens tidsoppføringer",
+        noEntriesToday: "Ingen oppføringer i dag",
+        refreshTodayEntries: "Last inn dagens tidsoppføringer på nytt",
         category: "Kategori",
         timespan: "Tidsrom",
     },
diff --git a/apps/projects/src/app/lib/stores/locale.ts b/apps/projects/src/app/lib/stores/locale.ts
deleted file mode 100644
index 1215c20..0000000
--- a/apps/projects/src/app/lib/stores/locale.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {base_domain, CookieNames} from "$shared/lib/configuration";
-import {get_cookie, set_cookie} from "$shared/lib/helpers";
-import {writable} from "svelte/store";
-import type {Locales} from "$app/lib/i18n/i18n-types";
-
-export function preffered_or_default(): Locales {
-    if (/^en\b/i.test(navigator.language)) {
-        return "en";
-    }
-    if (/^nb\b/i.test(navigator.language) || /^nn\b/i.test(navigator.language)) {
-        return "nb";
-    }
-    return "en";
-}
-
-export const currentLocale = writable<Locales>((get_cookie(CookieNames.locale) ?? preffered_or_default()) as Locales);
-currentLocale.subscribe(locale => {
-    //@ts-ignore
-    if (locale === "preffered") set_cookie(CookieNames.locale, preffered_or_default(), base_domain());
-    set_cookie(CookieNames.locale, locale, base_domain());
-});
diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte
index fb34593..b75c062 100644
--- a/apps/projects/src/app/pages/_layout.svelte
+++ b/apps/projects/src/app/pages/_layout.svelte
@@ -1,16 +1,16 @@
 <script>
-	import {onMount} from "svelte";
-	import {location, link} from "svelte-spa-router";
-	import {logout_user} from "$app/lib/services/user-service";
-	import {random_string} from "$shared/lib/helpers";
-	import {get_session_data} from "$shared/lib/session";
+	import { onMount } from "svelte";
+	import { location, link } from "svelte-spa-router";
+	import { logout_user } from "$app/lib/services/user-service";
+	import { random_string } from "$shared/lib/helpers";
+	import { get_session_data } from "$shared/lib/session";
 	import ProfileModal from "$app/pages/views/profile-modal.svelte";
-	import {Menu, MenuItem, MenuItemSeparator} from "$shared/components/menu";
+	import { Menu, MenuItem, MenuItemSeparator } from "$shared/components/menu";
 	import Button from "$shared/components/button.svelte";
-	import {IconNames} from "$shared/lib/configuration";
+	import { IconNames } from "$shared/lib/configuration";
 	import LL from "$app/lib/i18n/i18n-svelte";
 	import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte";
-	import {currentLocale} from "$app/lib/stores/locale";
+	import { currentLocale } from "$shared/lib/locale";
 
 	let ProfileModalFunctions = {};
 	let showUserMenu = false;
diff --git a/apps/projects/src/app/pages/home.svelte b/apps/projects/src/app/pages/home.svelte
index 33bb0d8..ff52275 100644
--- a/apps/projects/src/app/pages/home.svelte
+++ b/apps/projects/src/app/pages/home.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import LL from "$app/lib/i18n/i18n-svelte";
-    import {delete_time_entry, get_time_entries, get_time_entry, update_time_entry} from "$shared/lib/api/time-entry";
+    import {delete_time_entry, get_time_entries, get_time_entry} from "$shared/lib/api/time-entry";
     import {IconNames, QueryKeys} from "$shared/lib/configuration";
     import {TimeEntryDto} from "$shared/lib/models/TimeEntryDto";
     import {Temporal} from "@js-temporal/polyfill";
diff --git a/apps/projects/src/app/pages/views/settings-labels-tile.svelte b/apps/projects/src/app/pages/views/settings-labels-tile.svelte
index 59b5e30..3d5a567 100644
--- a/apps/projects/src/app/pages/views/settings-labels-tile.svelte
+++ b/apps/projects/src/app/pages/views/settings-labels-tile.svelte
@@ -7,15 +7,15 @@
 	import {Table, THead, TBody, TCell, TRow} from "$shared/components/table";
 	import LL from "$app/lib/i18n/i18n-svelte";
 
-	let is_loading = true;
+	let isLoadingLabels = true;
 
 	$: active_labels = $labels.filter(c => !c.archived);
 	$: archived_labels = $labels.filter(c => c.archived);
 
 	async function load_labels() {
-		is_loading = true;
+		isLoadingLabels = true;
 		await reload_labels();
-		is_loading = false;
+		isLoadingLabels = false;
 	}
 
 	async function handle_edit_label_click(event) {
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<Tile class="col-6@md col-12 {is_loading ? 'c-disabled loading' : ''}">
+<Tile class="col-6@md col-12 {isLoadingLabels ? 'c-disabled loading' : ''}">
     <h2 class="margin-bottom-xxs">{$LL.views.settingsLabelsTile.labels()}</h2>
     {#if active_labels.length > 0 && archived_labels.length > 0}
         <nav class="s-tabs text-sm">
@@ -101,7 +101,7 @@
                     <TCell type="th"
                            thScope="row"
                            colspan="3">
-                        No labels
+                        {$LL.views.settingsLabelsTile.noLabels()}
                     </TCell>
                 </TRow>
             {/if}