Initial UI

* locale
* navbar

source/SIL.AppBuilder.Portal/package.json

@@ -18,6 +18,7 @@
 		"seed": "ts-node --esm prisma/seed.ts"
 	},
 	"devDependencies": {
+		"@iconify/svelte": "^3.1.4",
 		"@playwright/test": "^1.28.1",
 		"@prisma/client": "^5.4.2",
 		"@sveltejs/adapter-auto": "^2.0.0",
@@ -38,6 +39,7 @@
 		"prisma": "^5.4.2",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-i18n": "^4.0.0",
 		"tailwindcss": "^3.3.3",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.4.1",

source/SIL.AppBuilder.Portal/src/hooks.server.ts

@@ -0,0 +1,11 @@
+// hooks.server.ts
+import type { Handle } from '@sveltejs/kit';
+import { locale } from 'svelte-i18n';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const lang = event.request.headers.get('accept-language')?.split(',')[0];
+	if (lang) {
+		locale.set(lang);
+	}
+	return resolve(event);
+};

source/SIL.AppBuilder.Portal/src/lib/components/Dropdown.svelte

@@ -0,0 +1,26 @@
+<!--
+@component
+A simple dropdown menu from DaisyUI.
+-->
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	export let cols = 6;
+	const dispatch = createEventDispatcher();
+</script>
+
+<div class="dy-dropdown">
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<label tabindex="0" class="dy-btn dy-btn-ghost p-0.5 no-animation flex-nowrap">
+		<slot name="label" />
+	</label>
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div
+		tabindex="0"
+		class="dy-dropdown-content dy-menu drop-shadow-lg mt-2.5 bg-base-100 z-10"
+		class:min-w-[21rem]={cols == 6}
+		class:min-w-[17.25rem]={cols == 5}
+		on:blur={() => dispatch('nav-end')}
+	>
+		<slot name="content" />
+	</div>
+</div>

source/SIL.AppBuilder.Portal/src/lib/components/LanguageSelector.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { LanguageIcon } from '$lib/icons';
+	import { _, locale, locales } from 'svelte-i18n';
+
+	function setLocale(lang: string | null | undefined) {
+		locale.set(lang);
+		const elem = document.activeElement as HTMLElement;
+		if (elem) {
+			elem?.blur();
+		}
+		return;
+	}
+
+	function isActive(lang: string, current: any) {
+		if (lang === current?.substring(0, 2)) {
+			return 'active';
+		} else {
+			return 'inactive';
+		}
+	}
+</script>
+
+{#key $_('lang')}
+	<div class="dropdown dropdown-end">
+		<label
+			for
+			class="btn btn-ghost m-2 p-2 rounded-xl items-middle justify-center flex-nowrap"
+			tabindex="-1"
+		>
+			<LanguageIcon color="white" />
+		</label>
+		<div class="dropdown-content bg-base-200 w-48 rounded-md overflow-y-auto">
+			<ul class="menu menu-compact gap-1 p-2" tabindex="-1">
+				{#each $locales as lang}
+					<li>
+						<div
+							class="btn flex {isActive(lang, $locale)}"
+							on:click={setLocale(lang)}
+							on:keypress={setLocale(lang)}
+						>
+							<Icon icon="circle-flags:{lang}" color="white" width="24" />
+							{lang}
+						</div>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+{/key}

source/SIL.AppBuilder.Portal/src/lib/i18n.js

@@ -0,0 +1,11 @@
+import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
+
+let fallback = 'en';
+
+register('en', () => import('./locales/en-us.json'));
+register('es', () => import('./locales/es-419.json'));
+register('fr', () => import('./locales/fr-FR.json'));
+init({
+	initialLocale: getLocaleFromNavigator(),
+	fallbackLocale: fallback
+});

source/SIL.AppBuilder.Portal/src/lib/icons/ArrowBackIcon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    // Arrow Back from https://fonts.google.com/icons
+    // Filled = 0
+    // Weight = 400
+    // Grade = 0
+    // Optical size = 24px
+    export let color = 'black';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"
+    ><path d="M480 896 160 576l320-320 57 56-224 224h487v80H313l224 224-57 56Z" /></svg
+>

source/SIL.AppBuilder.Portal/src/lib/icons/HamburgerIcon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    // Hamburger from https://fonts.google.com/icons
+    // Filled = 1
+    // Weight = 400
+    // Grade = 0
+    // Optical size = 24px
+    export let color = 'black';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height="24" width="24"
+    ><path d="M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z" /></svg
+>

source/SIL.AppBuilder.Portal/src/lib/icons/LanguageIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    // Language from https://fonts.google.com/icons
+    // Filled = 0
+    // Weight = 400
+    // Grade = 0
+    // Optical size = 24px
+    export let size = '24';
+    export let color = 'white';
+</script>
+
+<svg
+    fill={color}
+    xmlns="http://www.w3.org/2000/svg"
+    height={size}
+    viewBox="0 -960 960 960"
+    width={size}
+    ><path
+        d="M 480 -80 q -82 0 -155 -31.5 t -127.5 -86 Q 143 -252 111.5 -325 T 80 -480 q 0 -83 31.5 -155.5 t 86 -127 Q 252 -817 325 -848.5 T 480 -880 q 83 0 155.5 31.5 t 127 86 q 54.5 54.5 86 127 T 880 -480 q 0 82 -31.5 155 t -86 127.5 q -54.5 54.5 -127 86 T 480 -80 Z m 0 -82 q 26 -36 45 -75 t 31 -83 H 404 q 12 44 31 83 t 45 75 Z m -104 -16 q -18 -33 -31.5 -68.5 T 322 -320 H 204 q 29 50 72.5 87 t 99.5 55 Z m 208 0 q 56 -18 99.5 -55 t 72.5 -87 H 638 q -9 38 -22.5 73.5 T 584 -178 Z M 170 -400 h 136 q -3 -20 -4.5 -39.5 T 300 -480 q 0 -21 1.5 -40.5 T 306 -560 H 170 q -5 20 -7.5 39.5 T 160 -480 q 0 21 2.5 40.5 T 170 -400 Z m 216 0 h 188 q 3 -20 4.5 -39.5 T 580 -480 q 0 -21 -1.5 -40.5 T 574 -560 H 386 q -3 20 -4.5 39.5 T 380 -480 q 0 21 1.5 40.5 T 386 -400 Z m 268 0 h 136 q 5 -20 7.5 -39.5 T 800 -480 q 0 -21 -2.5 -40.5 T 790 -560 H 654 q 3 20 4.5 39.5 T 660 -480 q 0 21 -1.5 40.5 T 654 -400 Z m -16 -240 h 118 q -29 -50 -72.5 -87 T 584 -782 q 18 33 31.5 68.5 T 638 -640 Z m -234 0 h 152 q -12 -44 -31 -83 t -45 -75 q -26 36 -45 75 t -31 83 Z m -200 0 h 118 q 9 -38 22.5 -73.5 T 376 -782 q -56 18 -99.5 55 T 204 -640 Z"
+    /></svg
+>

source/SIL.AppBuilder.Portal/src/lib/icons/index.js

@@ -0,0 +1,9 @@
+import ArrowBackIcon from './ArrowBackIcon.svelte';
+import HamburgerIcon from './HamburgerIcon.svelte';
+import LanguageIcon from './LanguageIcon.svelte';
+
+export {
+    ArrowBackIcon,
+    HamburgerIcon,
+    LanguageIcon
+}