chore(lint): cleanup warnings and errors

Author: xjerod

.eslintignore

@@ -2,6 +2,7 @@
 	import { onMount, type ComponentProps } from 'svelte';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.ts';
 	import * as Avatar from '$lib/components/ui/avatar/index.ts';
 	import NavUser from '$lib/components/nav-user.svelte';
@@ -50,7 +51,7 @@
 				extra_channel = result.data;
 			}
 		}
-		goto(`/app/chat/${login}`);
+		goto(resolve(`/app/chat/${login}`));
 	}
 
 	let authState = new SyncedState<AuthState>('auth_state', {
@@ -68,7 +69,7 @@
 	async function logout() {
 		let result = await commands.logout();
 		if (result.status == 'ok') {
-			goto('/');
+			goto(resolve('/'));
 		} else {
 			Logger.error('logout failed', result.error);
 		}
@@ -84,8 +85,6 @@
 		}
 	});
 
-	$inspect(page.url.pathname);
-
 	let {
 		ref = $bindable(null),
 		collapsible = 'icon',
@@ -102,7 +101,7 @@
 	<Sidebar.MenuItem isActive={`/app/chat/${login}` === page.url.pathname}>
 		<Sidebar.MenuButton size="lg" class="p-2">
 			{#snippet child({ props })}
-				<a href={`/app/chat/${login}`} {...props}>
+				<a href={resolve(`/app/chat/${login}`)} {...props}>
 					<div class="relative">
 						<Avatar.Root class="size-8">
 							<Avatar.Image src={imageUrl} alt={displayName} />

src/lib/components/app-sidebar.svelte

@@ -5,6 +5,7 @@
 	import broadcasterBadge from '$lib/resources/broadcaster.svelte';
 	import vipBadge from '$lib/resources/vip.svelte';
 	import type { BadgeRef } from '$lib/bindings';
+	import type { Component } from 'svelte';
 
 	interface Props {
 		badge_ref: BadgeRef;
@@ -16,9 +17,7 @@
 		badge_ref.set_id !== badge_ref.badge.set_id && badge_ref.id !== badge_ref.badge.id
 	);
 
-	$inspect(badge_ref);
-
-	const badgeMap: Map<string, any> = new Map<string, any>([
+	const badgeMap: Map<string, Component> = new Map<string, Component>([
 		['subscriber', subBadge],
 		['moderator', moderatorBadge],
 		['partner', partnerBadge],

src/lib/components/chat/+badge.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <span class="inline-flex items-center gap-1 align-middle whitespace-nowrap">
-	{#each badges as badge}
+	{#each badges as badge (`${badge.set_id}:${badge.id}`)}
 		<Badge badge_ref={badge} />
 	{/each}
 </span>

src/lib/components/chat/+badges.svelte

@@ -37,7 +37,6 @@
 		class="absolute bottom-full left-0 right-0 z-50 max-h-48 overflow-y-auto border rounded-lg bg-popover p-2 shadow-md"
 	>
 		{#if showSearch}
-			<!-- svelte-ignore a11y_autofocus -->
 			<Input
 				bind:value={searchQuery}
 				onkeydown={onSearchKeydown}
@@ -48,7 +47,7 @@
 		{/if}
 		{#if emotes.length > 0}
 			<div class="grid grid-cols-8 gap-1">
-				{#each emotes as emote, i}
+				{#each emotes as emote, i (emote.name)}
 					<Tooltip.Root>
 						<Tooltip.Trigger>
 							<button

src/lib/components/chat/+emote-picker.svelte

@@ -53,6 +53,7 @@
 </script>
 
 {#if href}
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 	<a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
 		{@render children?.()}
 	</a>

src/lib/components/ui/button/button.svelte

@@ -18,6 +18,7 @@
 </script>
 
 <Button
+	bind:ref
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);

src/lib/components/ui/sidebar/sidebar-trigger.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import '../app.css';
-	import { page } from '$app/state';
 	import { checkForAppUpdates } from '$utils/updater';
 
 	let { children } = $props();
 
-	$inspect(page.params.id);
-
 	onMount(async () => {
 		await checkForAppUpdates('https://github.com/synthlabs/pepo/releases/latest');
 	});

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import { SyncedState } from 'tauri-svelte-synced-store';
 	import { CircleCheckBig, LoaderCircle } from '@lucide/svelte';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { commands, type AuthState } from '$lib/bindings';
 	import { cn } from '$lib/utils.js';
 	import Logger from '$utils/log';
@@ -34,7 +35,7 @@
 	onMount(async () => {
 		let result = await commands.login(true);
 		if (result.status == 'ok') {
-			goto('/app');
+			goto(resolve('/app'));
 		}
 	});
 
@@ -45,7 +46,7 @@
 
 		let result = await commands.login(false);
 		if (result.status == 'ok') {
-			goto('/app');
+			goto(resolve('/app'));
 		} else {
 			Logger.error('failure', result.error);
 		}

src/routes/+page.svelte

@@ -10,14 +10,15 @@
 	import Users from '@lucide/svelte/icons/users';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.ts';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 
 	let { children } = $props();
 
 	let authState = new SyncedState<AuthState>('auth_state');
 
 	$effect(() => {
 		if (authState.ready && authState.obj.phase === 'unauthorized') {
-			goto('/');
+			goto(resolve('/'));
 		}
 	});