feat: Add inital translation support

8 files changed, 395 insertions, 258 deletions

diff --git a/apps/web-shared/src/components/blowout-toolbelt.svelte b/apps/web-shared/src/components/blowout-toolbelt.svelte
new file mode 100644
index 0000000..69e9902
--- /dev/null
+++ b/apps/web-shared/src/components/blowout-toolbelt.svelte
@@ -0,0 +1,60 @@
+<script>
+	import {createEventDispatcher} from "svelte";
+	import ThemeSwitcher from "./theme-switcher.svelte";
+	import ThemeSwitcherIcon from "./theme-switcher-icon.svelte";
+	import LocaleSwitcher from "./locale-switcher.svelte";
+	import LocaleSwitcherIcon from "./locale-switcher-icon.svelte";
+	import {ChevronsRightIcon, ChevronsLeftIcon} from "svelte-feather-icons";
+    
+	const dispatch = createEventDispatcher();
+	
+	function locale_change(event) {
+		dispatch("change", {name: "locale", value: event.detail})
+    }
+	
+	let expanded = false;
+	const localeSwitcher = {
+		show: false,
+		selection: "preffered"
+	};
+	
+	const themeSwitcher = {
+		show: false,
+		selection: "system"
+	};
+</script>
+<style>
+    .blowout {
+        right: -80px;
+    }
+
+    .expanded {
+        right: 0 !important;
+    }
+</style>
+<aside class="blowout position-fixed bg-light inner-glow shadow-xs padding-xxs bottom-50% right-0 z-index-2 {expanded ? 'expanded' : ''}">
+    <LocaleSwitcher bind:show="{localeSwitcher.show}"
+                    glow="{false}"
+                    on:change={locale_change}
+                    bind:selection="{localeSwitcher.selection}"/>
+    <ThemeSwitcher bind:show="{themeSwitcher.show}"
+                   glow="{false}"
+                   bind:selection="{themeSwitcher.selection}"/>
+    <div class="flex flex-row gap-sm justify-end">
+        {#if !expanded}
+            <div class="flex ld-switch-btn"
+                 on:click={() => expanded = true}>
+                <ChevronsLeftIcon/>
+            </div>
+        {:else}
+            <div class="flex ld-switch-btn"
+                 on:click={() => expanded = false}>
+                <ChevronsRightIcon/>
+            </div>
+        {/if}
+        <LocaleSwitcherIcon bind:show="{localeSwitcher.show}"
+                            bind:selection="{localeSwitcher.selection}"/>
+        <ThemeSwitcherIcon bind:show="{themeSwitcher.show}"
+                           bind:selection="{themeSwitcher.selection}"/>
+    </div>
+</aside>
diff --git a/apps/web-shared/src/components/link-card.svelte b/apps/web-shared/src/components/link-card.svelte
index 0c15a53..85738c7 100644
--- a/apps/web-shared/src/components/link-card.svelte
+++ b/apps/web-shared/src/components/link-card.svelte
@@ -7,13 +7,13 @@
 	export let title = null;
 </script>
 
-<a class="link-card flex flex-column bg-light cursor-pointer radius-md {$$restProps.class??''}"
+<a class="link-card flex flex-column bg-light cursor-pointer radius-sm inner-glow {$$restProps.class??''}"
    {href}
    {target}
    {title}
    on:click
    aria-label="Link label">
-    <div class="padding-md">
+    <div class="padding-sm">
         <div class="flex flex-wrap gap-xs items-center">
             <slot name="icon"></slot>
             <div class="line-height-xs">
diff --git a/apps/web-shared/src/components/locale-switcher-icon.svelte b/apps/web-shared/src/components/locale-switcher-icon.svelte
new file mode 100644
index 0000000..d2776a1
--- /dev/null
+++ b/apps/web-shared/src/components/locale-switcher-icon.svelte
@@ -0,0 +1,16 @@
+<script>
+	import {GlobeIcon} from "svelte-feather-icons";
+
+	export let show = false;
+	export let selection = "preffered";
+</script>
+<div data-locale-switcher-element
+     class="ld-switch flex">
+    <button class="reset ld-switch-btn"
+            on:click={() => (show = !show)}>
+        <div class="ld-switch-btn__icon-wrapper ld-switch-btn__icon-wrapper--in"
+             aria-hidden="true">
+            <GlobeIcon/>
+        </div>
+    </button>
+</div>
diff --git a/apps/web-shared/src/components/locale-switcher.svelte b/apps/web-shared/src/components/locale-switcher.svelte
new file mode 100644
index 0000000..2dae026
--- /dev/null
+++ b/apps/web-shared/src/components/locale-switcher.svelte
@@ -0,0 +1,64 @@
+<script>
+	import {base_domain, CookieNames} from "$shared/lib/configuration";
+	import {get_cookie, set_cookie} from "$shared/lib/helpers";
+	import {createEventDispatcher, onMount} from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	export let glow = false;
+	export let show = false;
+	export let selection = "preffered";
+	export let size;
+
+	function change(to) {
+		selection = to;
+		set_cookie(CookieNames.locale, selection, base_domain());
+		dispatch("change", selection);
+	}
+
+	onMount(() => {
+		selection = get_cookie(CookieNames.locale);
+		document.addEventListener("keydown", (e) => {
+			if (e.code === "Esc") {
+				show = false;
+			}
+		});
+		document.addEventListener("click", (e) => {
+			if (e.target.closest("[data-locale-switcher-element]") === null) {
+				show = false;
+			}
+		});
+	});
+</script>
+
+<div class="bg-light padding-x-xs padding-bottom-xs padding-top-xxxs radius-md {glow ? 'inner-glow shadow-xs':''}"
+     data-locale-switcher-element
+     class:is-hidden={!show}
+     role="listbox">
+    <div class="flex flex-wrap flex-column"
+         role="group">
+        <div class="margin-bottom-xs flex-grow">
+            <span class="text-xs color-contrast-medium">Language</span>
+        </div>
+        <div class="flex gap-xs flex-row">
+            <div class="ld-switch-popover__option"
+                 aria-selected="{selection === 'en' ? 'true' : 'false'}"
+                 on:click={() => change("en")}
+                 role="option">
+                <div class="text-xs margin-top-xxxs padding-x-xxxxs">English</div>
+            </div>
+            <div class="ld-switch-popover__option"
+                 aria-selected="{selection === 'nb' ? 'true' : 'false'}"
+                 on:click={() => change("nb")}
+                 role="option">
+                <div class="text-xs margin-top-xxxs padding-x-xxxxs">Norsk</div>
+            </div>
+            <div class="ld-switch-popover__option"
+                 aria-selected="{selection === 'preffered' ? 'true' : 'false'}"
+                 on:click={() => change("preffered")}
+                 role="option">
+                <div class="text-xs margin-top-xxxs padding-x-xxxxs">Default</div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/apps/web-shared/src/components/theme-switcher-icon.svelte b/apps/web-shared/src/components/theme-switcher-icon.svelte
new file mode 100644
index 0000000..1531ab2
--- /dev/null
+++ b/apps/web-shared/src/components/theme-switcher-icon.svelte
@@ -0,0 +1,248 @@
+<script>
+    export let show = false;
+	export let selection = "";
+</script>
+
+<div class="ld-switch flex"
+     data-theme-switcher-element>
+    <button class="reset ld-switch-btn"
+            on:click={() => show =!show}>
+        <span class="sr-only">{selection}</span>
+        <div class="ld-switch-btn__icon-wrapper ld-switch-btn__icon-wrapper--in"
+             aria-hidden="true">
+            {#if selection === "dark"}
+                <svg class="icon ld-switch-btn__icon"
+                     viewBox="0 0 20 20">
+                    <title>dark</title>
+                    <g fill="currentColor">
+                        <path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z"
+                              fill-opacity=".2"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"></path>
+                        <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
+                    </g>
+                </svg>
+            {:else if selection === "light"}
+                <svg class="icon ld-switch-btn__icon"
+                     viewBox="0 0 20 20"><title>light</title>
+                    <g fill="currentColor">
+                        <circle cx="10"
+                                cy="10"
+                                r="4"
+                                fill-opacity=".2"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"></circle>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M10 1v1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M16.364 3.636l-1.061 1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M19 10h-1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M16.364 16.364l-1.061-1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M10 19v-1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M3.636 16.364l1.061-1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M1 10h1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M3.636 3.636l1.061 1.061"></path>
+                    </g>
+                </svg>
+            {:else }
+                <svg class="icon ld-switch-btn__icon"
+                     viewBox="0 0 20 20"><title>light-auto</title>
+                    <g fill="currentColor">
+                        <path d="M10 14a4 4 0 1 1 3.465-6"
+                              fill-opacity=".2"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12 18l2.5-7h1l2.5 7"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12.714 16h4.572"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M10 1v1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M16.364 3.636l-1.061 1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M3.636 16.364l1.061-1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M1 10h1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M3.636 3.636l1.061 1.061"></path>
+                    </g>
+                </svg>
+            {/if}
+        </div>
+
+        <div class="ld-switch-btn__icon-wrapper js-ld-switch-icon"
+             aria-hidden="true">
+            {#if selection === "dark"}
+                <svg class="icon ld-switch-btn__icon"
+                     viewBox="0 0 20 20">
+                    <title>dark</title>
+                    <g fill="currentColor">
+                        <path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z"
+                              fill-opacity=".2"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"></path>
+                        <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
+                    </g>
+                </svg>
+            {:else if selection === "light"}
+                <svg class="icon ld-switch-btn__icon"
+                     viewBox="0 0 20 20">
+                    <title>light-auto</title>
+                    <g fill="currentColor">
+                        <path d="M10 14a4 4 0 1 1 3.465-6"
+                              fill-opacity=".2"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12 18l2.5-7h1l2.5 7"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12.714 16h4.572"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M10 1v1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M16.364 3.636l-1.061 1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M3.636 16.364l1.061-1.061"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M1 10h1.5"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M3.636 3.636l1.061 1.061"></path>
+                    </g>
+                </svg>
+            {:else }
+                <svg class="icon ld-switch-btn__icon"
+                     viewBox="0 0 20 20">
+                    <title>dark-auto</title>
+                    <g fill="currentColor">
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12 18l2.5-7h1l2.5 7"></path>
+                        <path fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12.714 16h4.572"></path>
+                        <path d="M12.146 10.159A2.5 2.5 0 0 1 14.5 8.5h1a2.5 2.5 0 0 1 1.412.441 7 7 0 0 0-4.948-5.657c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a6.99 6.99 0 0 0 6.427 5.012z"
+                              fill-opacity=".2"></path>
+                        <path d="M16.71 8a7.015 7.015 0 0 0-4.746-4.716c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036A7.006 7.006 0 0 0 9 16.929"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"></path>
+                        <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
+                    </g>
+                </svg>
+            {/if}
+        </div>
+    </button>
+</div>
diff --git a/apps/web-shared/src/components/theme-switcher.svelte b/apps/web-shared/src/components/theme-switcher.svelte
index fd14059..397bad4 100644
--- a/apps/web-shared/src/components/theme-switcher.svelte
+++ b/apps/web-shared/src/components/theme-switcher.svelte
@@ -6,6 +6,7 @@
     type theme = "system"|"dark"|"light";
 
     export let show = false;
+    export let glow = false;
     export let selection: theme = "system";
     export let size;
     let prefers = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -42,253 +43,8 @@
     }
 </script>
 
-<div class="ld-switch"
-     data-theme-switcher-element>
-    <button class="reset ld-switch-btn"
-            on:click={() => show =!show}>
-        <span class="sr-only">{selection}</span>
-        <div class="ld-switch-btn__icon-wrapper ld-switch-btn__icon-wrapper--in"
-             aria-hidden="true">
-            {#if selection === "dark"}
-                <svg class="icon ld-switch-btn__icon"
-                     viewBox="0 0 20 20">
-                    <title>dark</title>
-                    <g fill="currentColor">
-                        <path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z"
-                              fill-opacity=".2"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"></path>
-                        <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
-                    </g>
-                </svg>
-            {:else if selection === "light"}
-                <svg class="icon ld-switch-btn__icon"
-                     viewBox="0 0 20 20"><title>light</title>
-                    <g fill="currentColor">
-                        <circle cx="10"
-                                cy="10"
-                                r="4"
-                                fill-opacity=".2"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"></circle>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M10 1v1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M16.364 3.636l-1.061 1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M19 10h-1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M16.364 16.364l-1.061-1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M10 19v-1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M3.636 16.364l1.061-1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M1 10h1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M3.636 3.636l1.061 1.061"></path>
-                    </g>
-                </svg>
-            {:else }
-                <svg class="icon ld-switch-btn__icon"
-                     viewBox="0 0 20 20"><title>light-auto</title>
-                    <g fill="currentColor">
-                        <path d="M10 14a4 4 0 1 1 3.465-6"
-                              fill-opacity=".2"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 18l2.5-7h1l2.5 7"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12.714 16h4.572"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M10 1v1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M16.364 3.636l-1.061 1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M3.636 16.364l1.061-1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M1 10h1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M3.636 3.636l1.061 1.061"></path>
-                    </g>
-                </svg>
-            {/if}
-        </div>
-
-        <div class="ld-switch-btn__icon-wrapper js-ld-switch-icon"
-             aria-hidden="true">
-            {#if selection === "dark"}
-                <svg class="icon ld-switch-btn__icon"
-                     viewBox="0 0 20 20">
-                    <title>dark</title>
-                    <g fill="currentColor">
-                        <path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z"
-                              fill-opacity=".2"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"></path>
-                        <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
-                    </g>
-                </svg>
-            {:else if selection === "light"}
-                <svg class="icon ld-switch-btn__icon"
-                     viewBox="0 0 20 20">
-                    <title>light-auto</title>
-                    <g fill="currentColor">
-                        <path d="M10 14a4 4 0 1 1 3.465-6"
-                              fill-opacity=".2"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 18l2.5-7h1l2.5 7"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12.714 16h4.572"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M10 1v1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M16.364 3.636l-1.061 1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M3.636 16.364l1.061-1.061"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M1 10h1.5"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M3.636 3.636l1.061 1.061"></path>
-                    </g>
-                </svg>
-            {:else }
-                <svg class="icon ld-switch-btn__icon"
-                     viewBox="0 0 20 20">
-                    <title>dark-auto</title>
-                    <g fill="currentColor">
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 18l2.5-7h1l2.5 7"></path>
-                        <path fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12.714 16h4.572"></path>
-                        <path d="M12.146 10.159A2.5 2.5 0 0 1 14.5 8.5h1a2.5 2.5 0 0 1 1.412.441 7 7 0 0 0-4.948-5.657c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a6.99 6.99 0 0 0 6.427 5.012z"
-                              fill-opacity=".2"></path>
-                        <path d="M16.71 8a7.015 7.015 0 0 0-4.746-4.716c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036A7.006 7.006 0 0 0 9 16.929"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"></path>
-                        <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
-                    </g>
-                </svg>
-            {/if}
-        </div>
-    </button>
-</div>
-
-<div class="bg-light position-fixed margin-top-xxs padding-x-xs padding-bottom-xs padding-top-xxxs radius-md inner-glow shadow-xs"
+<div class="bg-light padding-x-xs padding-bottom-xs padding-top-xxxs radius-md {glow ? 'inner-glow shadow-xs' : ''}"
      class:is-hidden={!show}
-     style="right: 15px"
      data-theme-switcher-element
      role="listbox">
     <div class="flex flex-wrap flex-column"
diff --git a/apps/web-shared/src/lib/configuration.ts b/apps/web-shared/src/lib/configuration.ts
index cb08d21..5c79089 100644
--- a/apps/web-shared/src/lib/configuration.ts
+++ b/apps/web-shared/src/lib/configuration.ts
@@ -40,7 +40,8 @@ export function is_debug(): boolean {
 }
 
 export const CookieNames = {
-    theme: "go_theme"
+    theme: "go_theme",
+    locale: "go_locale"
 };
 
 export const QueryKeys = {
diff --git a/apps/web-shared/src/lib/helpers.ts b/apps/web-shared/src/lib/helpers.ts
index 4da8254..1cf94f4 100644
--- a/apps/web-shared/src/lib/helpers.ts
+++ b/apps/web-shared/src/lib/helpers.ts
@@ -1,4 +1,4 @@
-import {base_domain, CookieNames, StorageKeys} from "$shared/lib/configuration";
+import {base_domain, CookieNames} from "$shared/lib/configuration";
 import {TimeEntryDto} from "$shared/lib/models/TimeEntryDto";
 import {UnwrappedEntryDateTime} from "$shared/lib/models/UnwrappedEntryDateTime";
 import {Temporal} from "@js-temporal/polyfill";
@@ -482,11 +482,3 @@ export function get_hash_code(value: string): number|undefined {
     }
     return hash;
 }
-
-export function $(selector: string): HTMLElement|null {
-    return document.querySelector(selector);
-}
-
-export function $$(selector: string): NodeListOf<Element> {
-    return document.querySelectorAll(selector);
-}