🎨 🐛 Refactor

src/constants/launcher.ts

@@ -1,14 +1,8 @@
 import { goto } from '$app/navigation';
-import { setLocalstorageString } from '$lib/localstorage';
-import { th } from '$lib/theme';
+import { setNewList } from '$lib/layout/launcher/setNewList';
+import { setAndStoreTheme } from '$lib/theme';
 import type { Token } from '../languages/i18n';
-import {
-	launcherLinks as linksStore,
-	showLauncher,
-	theme,
-	unfilteredLauncherLinks
-} from '../stores';
-import type { launcherLink } from '../types/launcher';
+import { showLauncher } from '../stores';
 
 type VoidFunction = () => void | Promise<void>;
 
@@ -175,51 +169,39 @@ const rawLauncherLinks: {
 
 	{
 		title: 'settings.apperance.theme',
-		action: () => {
-			const newActions: launcherLink[] = [
+		action: () =>
+			setNewList([
 				{
 					title: 'settings.apperance.theme.light',
 					action: () => {
-						setLocalstorageString('themeProvider', 'light');
-						theme.set('light');
+						setAndStoreTheme('light');
 						showLauncher.set(false);
 					},
 					bxIcon: 'bx-sun',
 					description: 'settings.apperance.theme.light',
-					query: ['light', 'hell'],
-					id: 0,
-					matchingWord: ''
+					query: ['light', 'hell']
 				},
 				{
 					title: 'settings.apperance.theme.dark',
 					action: () => {
-						setLocalstorageString('themeProvider', 'dark');
-						theme.set('dark');
+						setAndStoreTheme('dark');
 						showLauncher.set(false);
 					},
 					bxIcon: 'bx-moon',
 					description: 'settings.apperance.theme.dark',
-					query: ['dark', 'dunkel'],
-					id: 1,
-					matchingWord: ''
+					query: ['dark', 'dunkel']
 				},
 				{
 					title: 'settings.apperance.theme.system',
 					action: () => {
-						setLocalstorageString('themeProvider', 'system');
-						th();
+						setAndStoreTheme('system');
 						showLauncher.set(false);
 					},
 					bxIcon: 'bx-sun',
 					description: 'settings.apperance.theme.system',
-					query: ['system', 'systemeinstellung', 'auto', 'automatisch', 'automatic', 'default'],
-					id: 2,
-					matchingWord: ''
+					query: ['system', 'systemeinstellung', 'auto', 'automatisch', 'automatic', 'default']
 				}
-			];
-			unfilteredLauncherLinks.set(newActions);
-			linksStore.set(newActions);
-		},
+			]),
 		bxIcon: 'bx-palette',
 		description: 'settings.apperance.theme',
 		query: ['theme', 'dark', 'light', 'erscheinungsbild', 'farben', 'colors'],

src/lib/layout/launcher/launcher.svelte

@@ -27,7 +27,6 @@
 
 		if (searchTerm.trim() === '') {
 			launcherLinks.set($unfilteredLauncherLinks);
-			launcherIds = $unfilteredLauncherLinks.map((link) => link.id);
 			return;
 		}
 
@@ -51,10 +50,6 @@
 					matchingWord: matches[link.id]
 				});
 		}
-
-		focusedId = $launcherLinks.length > 0 ? $launcherLinks[0].id : NaN;
-		launcherIds = $launcherLinks.map((link) => link.id);
-
 		launcherLinks.set(newLauncherLinks);
 	};
 
@@ -68,9 +63,14 @@
 			launcherLinks.set(launcherLinksConst);
 			unfilteredLauncherLinks.set(launcherLinksConst);
 
-			launcherIds = $launcherLinks.map((link) => link.id);
+			launcherIds = launcherLinksConst.map((link) => link.id);
 		}
 	});
+
+	launcherLinks.subscribe((v) => {
+		launcherIds = v.map((link) => link.id);
+		focusedId = v.length > 0 ? v[0].id : NaN;
+	});
 </script>
 
 <KeyboardShortcuts
@@ -107,6 +107,8 @@
 					bind:value={searchTerm}
 					on:input={handleInput}
 				/>
+				{focusedId}
+				{launcherIds}
 			</div>
 		</div>
 

src/lib/layout/launcher/setNewList.ts

@@ -0,0 +1,14 @@
+import { launcherLinks, unfilteredLauncherLinks } from '../../../stores';
+import type { launcherLink } from '../../../types/launcher';
+
+type LauncherLinkWithoutIdOrMatchingword = Omit<launcherLink, 'id' | 'matchingWord'>;
+
+export const setNewList = (list: LauncherLinkWithoutIdOrMatchingword[]) => {
+	const newList = list.map((link, index) => ({
+		...link,
+		id: index,
+		matchingWord: ''
+	}));
+	unfilteredLauncherLinks.set(newList);
+	launcherLinks.set(newList);
+};

src/lib/theme.ts

@@ -1,6 +1,6 @@
 import { theme } from '../stores';
 import type { ThemeProvider } from '../types/settings';
-import { getLocalstorageString } from './localstorage';
+import { getLocalstorageString, setLocalstorageString } from './localstorage';
 
 export const setTheme = (themeProvider: ThemeProvider) => {
 	if (themeProvider === 'dark' || themeProvider === 'light') theme.set(themeProvider);
@@ -16,3 +16,8 @@ export const setTheme = (themeProvider: ThemeProvider) => {
 };
 
 export const th = () => setTheme(getLocalstorageString<ThemeProvider>('themeProvider', 'system'));
+
+export const setAndStoreTheme = (themeProvider: ThemeProvider) => {
+	setTheme(themeProvider);
+	setLocalstorageString('themeProvider', themeProvider);
+};