Small things

.dockerignore

@@ -2,3 +2,4 @@ uploads
 node_modules
 private
 devdocker
+.env*

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;
+	}
+}

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>

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}

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"
+  }
 }

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;

src/routes/account/authorizations/+page.svelte

@@ -31,8 +31,7 @@
 
 		<div class="auth-list">
 			{#each data.items as client}
-				<!-- TODO: client pictures -->
+				<AvatarCard src={`/api/avatar/client/${client.id}`} alt={client.title}>
-				<AvatarCard src={`${assets}/application.png`} alt={client.title}>
 					<div class="card-row">
 						<div class="card-inner">
 							<span class="card-display-name">{client.title}</span>