Change the design of the launcher

The launcher now has a glossy appereance
The user can select how wide the launcher is

src/constants/launcher.ts

@@ -11,6 +11,7 @@ import { getSubdivisions } from '$lib/holidays/api/subdivisions';
 import { get } from 'svelte/store';
 import { Holiday } from 'open-holiday-js';
 import { addToast } from '$lib/toast/addToast';
+import type { Width } from '../types/launcher';
 
 type VoidFunction = () => void | Promise<void>;
 
@@ -365,6 +366,33 @@ const rawLauncherLinks: {
 		query: ['text', 'beschreibung', 'description', 'navigation', 'label'],
 		description: 'settings.apperance.nav.text'
 	},
+	{
+		title: 'settings.launcher.width',
+		description: 'settings.launcher.width.desc',
+		action: () =>
+			setNewList(
+				(
+					[
+						['narrow', 'schmal'],
+						['normal', 'normal'],
+						['wide', 'breit']
+					] as const
+				).map(([en, de]) => {
+					const title = `settings.launcher.width.${en}` as const;
+
+					return {
+						title,
+						action: () => localstorage<Width>(SvocalKeys.LAUNCHER_WIDTH, 'normal').set(en),
+						bxIcon: '',
+						description: title,
+						query: [en, de]
+					};
+				})
+			),
+		bxIcon: 'bx-ruler',
+		closeManually: true,
+		query: ['launcher', 'width', 'breite']
+	},
 
 	{
 		title: 'nav.github.frontend',

src/enums/svocal.ts

@@ -49,5 +49,10 @@ export enum SvocalKeys {
 	/**
 	 * Default: []
 	 */
-	AUTOFILL_HOMEWORK_STRINGS = 'autofill.homework.strings'
+	AUTOFILL_HOMEWORK_STRINGS = 'autofill.homework.strings',
+
+	/**
+	 * Default: "normal"
+	 */
+	LAUNCHER_WIDTH = 'launcher.width'
 }

src/languages/de.ts

@@ -95,7 +95,7 @@ const de = {
 	'register.pwd.lowercase': 'Das Passwort muss mindestens einen Kleinbuchstaben enthalten',
 
 	'nav.home': 'Startseite',
-	'nav.home.description': 'Die Startseite von Dlool bietet kaum Funktionen.',
+	'nav.home.description': 'Die wunderschöne neue Startseite von Dlool',
 	'nav.login': 'Einloggen',
 	'nav.login.description': 'Wilkommen zurück! Hier kannst du dich einloggen.',
 	'nav.register': 'Registrieren',
@@ -293,6 +293,13 @@ const de = {
 	'settings.local.country': 'Staat',
 	'settings.local.subdivision': 'Bundesland',
 
+	'settings.launcher': 'Launcher',
+	'settings.launcher.width': 'Width of the launcher',
+	'settings.launcher.width.desc': 'Change the width of the launcher',
+	'settings.launcher.width.narrow': 'Narrow',
+	'settings.launcher.width.normal': 'Normal',
+	'settings.launcher.width.wide': 'Wide',
+
 	'colors.red': 'Rot',
 	'colors.green': 'Grün',
 	'colors.blue': 'Blau',

src/languages/en.ts

@@ -283,6 +283,13 @@ const en = {
 	'settings.local.country': 'Country',
 	'settings.local.subdivision': 'State',
 
+	'settings.launcher': 'Launcher',
+	'settings.launcher.width': 'Breite des Launchers',
+	'settings.launcher.width.desc': 'Stelle ein wie breit dieser Launcher ist',
+	'settings.launcher.width.narrow': 'Schmal',
+	'settings.launcher.width.normal': 'Normal',
+	'settings.launcher.width.wide': 'Breit',
+
 	'colors.red': 'Red',
 	'colors.green': 'Green',
 	'colors.blue': 'Blue',

src/lib/layout/launcher/LauncherLink.svelte

@@ -26,8 +26,8 @@
 {#key link}
 	<button
 		class=" flex items-center gap-2 px-3 py-1 text-light-text dark:text-dark-text focus:outline-none focus:border-none w-full"
-		class:bg-gray-400={isFocused}
-		class:dark:bg-gray-500={isFocused}
+		class:bg-emerald-500={isFocused}
+		class:bg-opacity-20={isFocused}
 		class:shadow-sm={isFocused}
 		on:click={() => {
 			link.action();

src/lib/layout/launcher/launcher.svelte

@@ -11,6 +11,11 @@
 	import { launcherLinks as launcherLinksConst } from '../../../constants/launcher';
 	import type { launcherLink } from '../../../types/launcher';
 	import type { Token } from '../../../languages/i18n';
+	import { stringify } from '$lib/utils/css/stringify';
+	import { localstorage } from 'svocal';
+	import { SvocalKeys } from '../../../enums/svocal';
+	import type { Width } from '../../../types/launcher';
+	import { get } from 'svelte/store';
 
 	let show = false;
 
@@ -75,6 +80,17 @@
 		launcherIds = v.map((link) => link.id);
 		focusedId = v.length > 0 ? v[0].id : NaN;
 	});
+
+	const widthRems = {
+		narrow: '30rem',
+		normal: '38rem',
+		wide: '46rem'
+	} satisfies Record<Width, string>;
+	let width = widthRems['normal'];
+
+	localstorage<Width>(SvocalKeys.LAUNCHER_WIDTH, 'normal').subscribe((v) => {
+		width = widthRems[v];
+	});
 </script>
 
 <KeyboardShortcuts
@@ -96,17 +112,20 @@
 	aria-hidden={show}
 >
 	<div
-		class="fixed top-[12.5%] left-1/2 -translate-x-1/2 w-[min(90%,38rem)] flex-col gap-4"
+		class="fixed top-[12.5%] left-1/2 -translate-x-1/2 w-[min(90%,var(--width,38rem))] flex-col gap-4 backdrop-blur-md bg-white bg-opacity-20 overflow-hidden rounded-md outline outline-emerald-500 outline-1 dark"
 		class:hidden={!show}
 		class:flex={show}
+		style={stringify({
+			'--width': width
+		})}
 	>
-		<div class="shadow-nav rounded-md w-full bg-light-box dark:bg-dark-box">
+		<div class="shadow-nav w-full">
 			<div class="flex p-4 gap-2 items-center">
-				<i class="bx bx-search text-xl" />
+				<i class="bx bx-search text-xl text-white" />
 				<input
 					type="search"
 					placeholder="Type a search"
-					class="bg-transparent w-full focus:outline-none border-b-transparent pb-0.5 focus:border-b-light-secondary dark:focus:border-b-dark-secondary border-b-2 text-xl"
+					class="bg-transparent w-full focus:outline-none border-b-transparent pb-0.5 focus:border-b-light-secondary dark:focus:border-b-dark-secondary border-b-2 text-xl text-white"
 					bind:this={inputElement}
 					bind:value={$launcherSearchTerm}
 					on:input={handleInput}

src/lib/preferences/LauncherWidth.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import I18n from '$lib/I18n.svelte';
+	import { localstorage } from 'svocal';
+	import { SvocalKeys } from '../../enums/svocal';
+	import type { Width } from '../../types/launcher';
+
+	const widths = ['narrow', 'normal', 'wide'] satisfies Width[];
+
+	const svocalStore = localstorage<Width>(SvocalKeys.LAUNCHER_WIDTH, 'normal');
+</script>
+
+<div class="flex flex-row gap-2 items-center justify-between">
+	<I18n key="settings.launcher.width" />
+
+	<span class="min-w-max">
+		<select
+			class="w-full outline-1 outline-gray-400 outline rounded-sm p-1 bg-gray-200 dark:bg-gray-800"
+			bind:value={$svocalStore}
+		>
+			{#each widths as width}
+				<option value={width}><I18n key={`settings.launcher.width.${width}`} /></option>
+			{/each}
+		</select>
+	</span>
+</div>

src/lib/utils/css/stringify.ts

@@ -0,0 +1,6 @@
+type Css = Record<string, string | number>;
+
+export const stringify = (css: Css) => {
+	const strings = Object.entries(css).map(([key, val]) => `${key}: ${val};`);
+	return strings.join('');
+};

src/routes/settings/preferences/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import I18n from '$lib/I18n.svelte';
 	import NavigationItems from '$lib/preferences/NavigationItems.svelte';
+	import LauncherWidth from '$lib/preferences/LauncherWidth.svelte';
 	import TextInNav from '$lib/preferences/TextInNav.svelte';
 	import Theme from '$lib/preferences/Theme.svelte';
 	import ChangeHomeworkOpacity from '$lib/preferences/ChangeHomeworkOpacity.svelte';
@@ -18,6 +19,10 @@
 				<TextInNav />
 				<NavigationItems />
 			</section>
+			<section class="flex flex-col gap-4">
+				<h4><I18n key="settings.launcher" /></h4>
+				<LauncherWidth />
+			</section>
 			<section class="flex flex-col gap-4">
 				<h4><I18n key="homework" /></h4>
 				<ChangeHomeworkOpacity />

src/types/launcher.ts

@@ -13,3 +13,5 @@ export type launcherLink<Tok extends Token> = {
 	matchingWord: string;
 	showSimpelfied: boolean;
 };
+
+export type Width = 'narrow' | 'normal' | 'wide';