From 88c4dedceb6de92eca378413c1db069a5d1f7992 Mon Sep 17 00:00:00 2001
From: Evert Prants <evert@lunasqu.ee>
Date: Fri, 7 Jun 2024 20:49:31 +0300
Subject: [PATCH] Small things

---
 .dockerignore                                  |  1 +
 src/app.css                                    | 15 +++++++++++++++
 src/lib/components/ThemeButton.svelte          |  8 ++++++--
 src/lib/components/icons/Icon.svelte           |  2 +-
 src/lib/i18n/en/common.json                    |  6 +++++-
 src/lib/theme-mode.ts                          |  3 +--
 src/routes/account/authorizations/+page.svelte |  3 +--
 7 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/.dockerignore b/.dockerignore
index c5292ac..5c8545a 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,3 +2,4 @@ uploads
 node_modules
 private
 devdocker
+.env*
diff --git a/src/app.css b/src/app.css
index 8841df8..43bbd6b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -57,3 +57,18 @@ a[target='_blank']::after {
 	margin-left: 2px;
 	vertical-align: top;
 }
+
+.visually-hidden {
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+
+	&:not(caption) {
+		position: absolute;
+	}
+}
diff --git a/src/lib/components/ThemeButton.svelte b/src/lib/components/ThemeButton.svelte
index 1a24c8b..6f9eb42 100644
--- a/src/lib/components/ThemeButton.svelte
+++ b/src/lib/components/ThemeButton.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { setThemeMode, themeMode } from '$lib/theme-mode';
+	import { t } from '$lib/i18n';
+	import { setThemeMode, themeMode, type ThemeModeType } from '$lib/theme-mode';
 	import Button from './Button.svelte';
 	import Icon from './icons/Icon.svelte';
 
-	const toggleMode = () => setThemeMode($themeMode === 'dark' ? 'light' : 'dark');
+	$: nextMode = ($themeMode === 'dark' ? 'light' : 'dark') as ThemeModeType;
 	$: iconName = $themeMode === 'light' ? 'DarkMode' : 'LightMode';
+
+	const toggleMode = () => setThemeMode(nextMode);
 </script>
 
 <Button variant="link" on:click={toggleMode}>
 	<Icon icon={iconName} />
+	<span class="visually-hidden">{$t(`common.theme.${nextMode}`)}</span>
 </Button>
diff --git a/src/lib/components/icons/Icon.svelte b/src/lib/components/icons/Icon.svelte
index 455fe57..06021d6 100644
--- a/src/lib/components/icons/Icon.svelte
+++ b/src/lib/components/icons/Icon.svelte
@@ -4,7 +4,7 @@
 	$: iconComponent = import(`./svg/${icon}.svelte`);
 </script>
 
-<span class="icon">
+<span class="icon" aria-hidden="true">
 	{#await iconComponent then { default: component }}
 		<svelte:component this={component} />
 	{/await}
diff --git a/src/lib/i18n/en/common.json b/src/lib/i18n/en/common.json
index b7f88a3..de54319 100644
--- a/src/lib/i18n/en/common.json
+++ b/src/lib/i18n/en/common.json
@@ -17,5 +17,9 @@
   "available": "Available",
   "current": "Current",
   "remove": "Remove",
-  "filter": "Filter"
+  "filter": "Filter",
+  "theme": {
+    "light": "Light mode",
+    "dark": "Dark mode"
+  }
 }
diff --git a/src/lib/theme-mode.ts b/src/lib/theme-mode.ts
index 002d154..d631501 100644
--- a/src/lib/theme-mode.ts
+++ b/src/lib/theme-mode.ts
@@ -17,11 +17,10 @@ export const themeMode = writable<ThemeModeType>('light', (set) => {
 	return () => uaTheme?.removeEventListener('change', uaThemeCallback);
 });
 
-export const useThemeMode = () => {
+export const useThemeMode = () =>
 	onMount(() =>
 		themeMode.subscribe((value) => document.documentElement.setAttribute('theme-base', value))
 	);
-};
 
 export const setThemeMode = (mode: ThemeModeType) => {
 	if (!browser) return;
diff --git a/src/routes/account/authorizations/+page.svelte b/src/routes/account/authorizations/+page.svelte
index 0cbd678..424e35f 100644
--- a/src/routes/account/authorizations/+page.svelte
+++ b/src/routes/account/authorizations/+page.svelte
@@ -31,8 +31,7 @@
 
 		<div class="auth-list">
 			{#each data.items as client}
-				<!-- TODO: client pictures -->
-				<AvatarCard src={`${assets}/application.png`} alt={client.title}>
+				<AvatarCard src={`/api/avatar/client/${client.id}`} alt={client.title}>
 					<div class="card-row">
 						<div class="card-inner">
 							<span class="card-display-name">{client.title}</span>