From 0a698160485030556b7a78a08bad375047043112 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 26 Jan 2025 13:34:28 +0100
Subject: [PATCH] chore: lint

---
 src/app.d.ts                                     | 11 +++++++----
 src/lib/components/canisters/CanisterEdit.svelte | 13 ++++++++++---
 src/lib/components/canisters/CanisterId.svelte   |  4 ++--
 src/lib/components/canisters/CanisterName.svelte |  3 ---
 src/lib/components/core/Back.svelte              |  2 +-
 src/lib/components/core/SignIn.svelte            |  4 +++-
 src/lib/components/core/Worker.svelte            |  2 +-
 src/lib/components/overlays/Add.svelte           |  2 +-
 src/lib/components/ui/Button.svelte              |  7 +++++--
 src/lib/components/ui/Modal.svelte               |  2 ++
 10 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index fe3972c..67b87dc 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -11,11 +11,14 @@ declare namespace App {
 
 declare const VITE_APP_VERSION: string;
 
-// eslint window checks for custom events
+/* eslint-disable */
+
 declare namespace svelteHTML {
 	interface HTMLAttributes {
-		'on:submit'?: (event: CustomEvent) => void;
-		'on:openAddCanister'?: (event: CustomEvent) => void;
-		'on:addCanister'?: (event: CustomEvent) => void;
+		onopenAddCanister?: (event: CustomEvent<any>) => void;
+		onaddCanister?: (event: CustomEvent<any>) => void;
+		onaddSnsCanister?: (event: CustomEvent<any>) => void;
 	}
 }
+
+/* eslint-enable */
diff --git a/src/lib/components/canisters/CanisterEdit.svelte b/src/lib/components/canisters/CanisterEdit.svelte
index a5d6613..4920d96 100644
--- a/src/lib/components/canisters/CanisterEdit.svelte
+++ b/src/lib/components/canisters/CanisterEdit.svelte
@@ -15,7 +15,7 @@
 	let validConfirm = false;
 	let saving = false;
 
-	const handleSubmit = async ($event: MouseEvent | TouchEvent) => {
+	const handleSubmit = async ($event: SubmitEvent) => {
 		$event.preventDefault();
 
 		if (!validConfirm || canisterName === undefined || canisterName === '') {
@@ -38,12 +38,19 @@
 	$: validConfirm = canisterName !== undefined && canisterName !== '';
 </script>
 
-<button on:click|stopPropagation={() => (visible = true)} aria-label="Edit" class="toolbar small">
+<button
+	onclick={($event) => {
+		$event.stopPropagation();
+		visible = true;
+	}}
+	aria-label="Edit"
+	class="toolbar small"
+>
 	<IconEdit size="small" />
 </button>
 
 <Popover bind:visible center>
-	<form class="container" on:submit={async ($event) => await handleSubmit($event)}>
+	<form class="container" onsubmit={handleSubmit}>
 		<label for="canisterName">Canister name</label>
 
 		<input
diff --git a/src/lib/components/canisters/CanisterId.svelte b/src/lib/components/canisters/CanisterId.svelte
index 184c186..ccf67e7 100644
--- a/src/lib/components/canisters/CanisterId.svelte
+++ b/src/lib/components/canisters/CanisterId.svelte
@@ -19,7 +19,7 @@
 		canisterId !== '' &&
 		$canistersUniqueGroups.find(({ id }: Canister) => id === canisterId) === undefined;
 
-	const handleSubmit = async ($event: MouseEvent | TouchEvent) => {
+	const handleSubmit = async ($event: SubmitEvent) => {
 		$event.preventDefault();
 
 		if (!validConfirm || canisterId === undefined) {
@@ -34,7 +34,7 @@
 
 <slot />
 
-<form on:submit={async ($event) => await handleSubmit($event)}>
+<form onsubmit={handleSubmit}>
 	<input
 		bind:value={canisterId}
 		type="text"
diff --git a/src/lib/components/canisters/CanisterName.svelte b/src/lib/components/canisters/CanisterName.svelte
index 356130b..b59d98b 100644
--- a/src/lib/components/canisters/CanisterName.svelte
+++ b/src/lib/components/canisters/CanisterName.svelte
@@ -21,9 +21,6 @@
 		margin: 0;
 	}
 
-	.canister-id {
-	}
-
 	.name {
 		min-height: 1.2rem;
 		margin-bottom: 0.15rem;
diff --git a/src/lib/components/core/Back.svelte b/src/lib/components/core/Back.svelte
index 4749050..e1131cf 100644
--- a/src/lib/components/core/Back.svelte
+++ b/src/lib/components/core/Back.svelte
@@ -5,7 +5,7 @@
 
 <nav>
 	<button class="toolbar" on:click={async () => await back()} title="Back">
-		<IconBack slot="icon" />
+		<IconBack />
 		<span class="visually-hidden">Back</span>
 	</button>
 </nav>
diff --git a/src/lib/components/core/SignIn.svelte b/src/lib/components/core/SignIn.svelte
index 3bc9184..5cff9aa 100644
--- a/src/lib/components/core/SignIn.svelte
+++ b/src/lib/components/core/SignIn.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import IconInternetComputer from '$lib/components/icons/IconInternetComputer.svelte';
 	import { signIn } from '@junobuild/core';
+
+	const onclick = async () => await signIn();
 </script>
 
-<button type="button" on:click={signIn} class="primary">
+<button type="button" {onclick} class="primary">
 	<IconInternetComputer />
 	Continue with Internet Identity
 </button>
diff --git a/src/lib/components/core/Worker.svelte b/src/lib/components/core/Worker.svelte
index 222d39b..fe046e9 100644
--- a/src/lib/components/core/Worker.svelte
+++ b/src/lib/components/core/Worker.svelte
@@ -45,6 +45,6 @@
 		})();
 </script>
 
-<svelte:window on:addCanister={addCanister} on:addSnsCanister={addSnsCanister} />
+<svelte:window onaddCanister={addCanister} onaddSnsCanister={addSnsCanister} />
 
 <slot />
diff --git a/src/lib/components/overlays/Add.svelte b/src/lib/components/overlays/Add.svelte
index 5e821b3..769eac3 100644
--- a/src/lib/components/overlays/Add.svelte
+++ b/src/lib/components/overlays/Add.svelte
@@ -32,7 +32,7 @@
 	$: back = step !== 'type';
 </script>
 
-<svelte:window on:openAddCanister={() => (open = true)} />
+<svelte:window onopenAddCanister={() => (open = true)} />
 
 {#if open}
 	<Modal on:papyClose={onClose} on:papyBack={onBack} {back}>
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index 0b93a0d..ddb3319 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
+	import { nonNullish } from '$lib/utils/utils';
 
 	export let display: 'inline' | 'card' = 'card';
 	export let text: string;
 
-	export let icon: Component;
+	export let icon: Component | undefined = undefined;
 
 	export let card = true;
 	$: card = display === 'card';
@@ -12,7 +13,9 @@
 
 <div class={card ? 'card' : 'inline'}>
 	<button type="button" class={card ? 'toolbar' : 'primary'} title={text} on:click>
-		<svelte:component this={icon} slot="icon" />
+		{#if nonNullish(icon)}
+			<svelte:component this={icon} slot="icon" />
+		{/if}
 		<span class={card ? 'visually-hidden' : ''}>{text}</span>
 	</button>
 
diff --git a/src/lib/components/ui/Modal.svelte b/src/lib/components/ui/Modal.svelte
index 99a02b0..5596390 100644
--- a/src/lib/components/ui/Modal.svelte
+++ b/src/lib/components/ui/Modal.svelte
@@ -79,6 +79,8 @@
 		position: absolute;
 		inset: 0;
 
+		@include overlay.backdrop-button;
+
 		@include overlay.backdrop('light');
 
 		@include interaction.tappable;