Fix/refactor mapper errors

src/mapper/src/lib/components/bottom-sheet.svelte

@@ -7,8 +7,8 @@
 
 	let startY: number;
 	let startHeight: number;
-	let currSheetHeight: number = $state();
-	let show: boolean = $state();
+	let currSheetHeight: number = $state(0);
+	let show: boolean = $state(false);
 	let isDragging: boolean = $state(false);
 
 	interface Props {
@@ -37,17 +37,27 @@
 		document.body.style.overflowY = 'auto';
 	};
 
-	const dragStart = (e) => {
+	const dragStart = (e: MouseEvent | TouchEvent) => {
 		e.preventDefault();
-		const pagesY = e.pageY || e.changedTouches[0].screenY;
+		let pagesY: number = 0;
+		if (e instanceof MouseEvent) {
+			pagesY = e.pageY;
+		} else if (e instanceof TouchEvent) {
+			pagesY = e.changedTouches[0].screenY;
+		}
 		startY = pagesY;
 		startHeight = parseInt(sheetContentRef.style.height);
 		isDragging = true;
 	};
 
-	const dragging = (e) => {
+	const dragging = (e: MouseEvent | TouchEvent) => {
 		if (!isDragging) return;
-		const delta = startY - (e.pageY || e.changedTouches[0].screenY);
+		let delta: number = 0;
+		if (e instanceof MouseEvent) {
+			delta = startY - e.pageY;
+		} else if (e instanceof TouchEvent) {
+			delta = startY - e.changedTouches[0].screenY;
+		}
 		const newHeight = startHeight + (delta / window.innerHeight) * 100;
 		bottomSheetRef.style.height = `100vh`;
 		updateSheetHeight(newHeight);
@@ -106,8 +116,6 @@
 			>
 				<span class="h-[6px] w-[3.25rem] block bg-[#d2d2d4] rounded-full pointer-events-none"></span>
 			</div>
-			<!-- </div> -->
-
 			<!-- body -->
 			<div class="overflow-y-scroll scrollbar h-[calc(100%-5rem)] sm:h-[calc(100%-6.7rem)] px-4 relative">
 				{@render children?.()}

src/mapper/src/lib/components/dialog-task-actions.svelte

@@ -80,10 +80,12 @@
 						variant="default"
 						size="small"
 						class="primary"
-						onclick={() => mapTask(projectData?.id, taskStore.selectedTaskId)}
+						onclick={() => {
+							if (taskStore.selectedTaskId) mapTask(projectData?.id, taskStore.selectedTaskId);
+						}}
 						onkeydown={(e: KeyboardEvent) => {
 							if (e.key === 'Enter') {
-								mapTask(projectData?.id, taskStore.selectedTaskId);
+								if (taskStore.selectedTaskId) mapTask(projectData?.id, taskStore.selectedTaskId);
 							}
 						}}
 						role="button"
@@ -98,14 +100,16 @@
 				<p class="my-4 sm:my-6">Task #{taskStore.selectedTaskIndex} has been locked. Is the task completely mapped?</p>
 				<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
 					<sl-button
-						onclick={() => resetTask(projectData?.id, taskStore.selectedTaskId)}
+						onclick={() => {
+							if (taskStore.selectedTaskId) resetTask(projectData?.id, taskStore.selectedTaskId);
+						}}
 						variant="default"
 						outline
 						size="small"
 						class="secondary"
 						onkeydown={(e: KeyboardEvent) => {
 							if (e.key === 'Enter') {
-								resetTask(projectData?.id, taskStore.selectedTaskId);
+								if (taskStore.selectedTaskId) resetTask(projectData?.id, taskStore.selectedTaskId);
 							}
 						}}
 						role="button"
@@ -119,13 +123,15 @@
 						<span class="font-barlow-medium text-sm">CANCEL MAPPING</span>
 					</sl-button>
 					<sl-button
-						onclick={() => finishTask(projectData?.id, taskStore.selectedTaskId)}
+						onclick={() => {
+							if (taskStore.selectedTaskId) finishTask(projectData?.id, taskStore.selectedTaskId);
+						}}
 						variant="default"
 						size="small"
 						class="green"
 						onkeydown={(e: KeyboardEvent) => {
 							if (e.key === 'Enter') {
-								finishTask(projectData?.id, taskStore.selectedTaskId);
+								if (taskStore.selectedTaskId) finishTask(projectData?.id, taskStore.selectedTaskId);
 							}
 						}}
 						role="button"

src/mapper/src/lib/components/editor/editor.svelte

@@ -51,6 +51,3 @@
 		</div>
 	</div>
 </div>
-
-<style>
-</style>

src/mapper/src/lib/components/editor/toolbar.svelte

@@ -11,6 +11,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('bold')}
 			onclick={() => editor?.chain()?.focus()?.toggleBold().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleBold().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Italic" placement="bottom">
@@ -19,6 +24,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('italic')}
 			onclick={() => editor?.chain()?.focus()?.toggleItalic().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleItalic().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Strike" placement="bottom">
@@ -27,6 +37,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('strike')}
 			onclick={() => editor?.chain()?.focus()?.toggleStrike().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleStrike().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Heading 1" placement="bottom">
@@ -35,6 +50,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('heading', { level: 1 })}
 			onclick={() => editor?.chain()?.focus()?.toggleHeading({ level: 1 }).run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleHeading({ level: 1 }).run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Heading 2" placement="bottom">
@@ -43,6 +63,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('heading', { level: 2 })}
 			onclick={() => editor?.chain()?.focus()?.toggleHeading({ level: 2 }).run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleHeading({ level: 2 }).run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Heading 3" placement="bottom">
@@ -51,6 +76,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('heading', { level: 3 })}
 			onclick={() => editor?.chain()?.focus()?.toggleHeading({ level: 3 }).run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleHeading({ level: 3 }).run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Unordered List" placement="bottom">
@@ -59,6 +89,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('bulletList')}
 			onclick={() => editor?.chain()?.focus()?.toggleBulletList().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleBulletList().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Ordered List" placement="bottom">
@@ -67,6 +102,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('orderedList')}
 			onclick={() => editor?.chain()?.focus()?.toggleOrderedList().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleOrderedList().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Code" placement="bottom">
@@ -75,6 +115,11 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('codeBlock')}
 			onclick={() => editor?.chain()?.focus()?.toggleCodeBlock().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleCodeBlock().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Quote" placement="bottom">
@@ -83,17 +128,48 @@
 			class={`${iconClassName}`}
 			class:active={editor.isActive('blockquote')}
 			onclick={() => editor?.chain()?.focus()?.toggleBlockquote().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.toggleBlockquote().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Horizontal Ruler" placement="bottom">
-		<hot-icon name="hr" class={`${iconClassName}`} onclick={() => editor?.chain()?.focus()?.setHorizontalRule().run()}
+		<hot-icon
+			name="hr"
+			class={`${iconClassName}`}
+			onclick={() => editor?.chain()?.focus()?.setHorizontalRule().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.setHorizontalRule().run();
+			}}
+			role="button"
+			tabindex="0"
 		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Undo" placement="bottom">
-		<hot-icon name="undo" class={`${iconClassName}`} onclick={() => editor?.chain()?.focus()?.undo().run()}></hot-icon>
+		<hot-icon
+			name="undo"
+			class={`${iconClassName}`}
+			onclick={() => editor?.chain()?.focus()?.undo().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.undo().run();
+			}}
+			role="button"
+			tabindex="0"
+		></hot-icon>
 	</sl-tooltip>
 	<sl-tooltip content="Redo" placement="bottom">
-		<hot-icon name="redo" class={`${iconClassName}`} onclick={() => editor?.chain()?.focus()?.redo().run()}></hot-icon>
+		<hot-icon
+			name="redo"
+			class={`${iconClassName}`}
+			onclick={() => editor?.chain()?.focus()?.redo().run()}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') editor?.chain()?.focus()?.redo().run();
+			}}
+			role="button"
+			tabindex="0"
+		></hot-icon>
 	</sl-tooltip>
 </div>
 

src/mapper/src/lib/components/header.svelte

@@ -8,20 +8,23 @@
 	import { getAlertStore } from '$store/common.svelte';
 	import { getProjectSetupStepStore } from '$store/common.svelte.ts';
 	import { projectSetupStep as projectSetupStepEnum } from '$constants/enums.ts';
+	import type { SlDrawer, SlTooltip } from '@shoelace-style/shoelace';
 
-	let drawerRef: any = $state();
-	let drawerOpenButtonRef: any = $state();
+	let drawerRef: SlDrawer | undefined = $state();
+	let drawerOpenButtonRef: SlTooltip | undefined = $state();
 	const loginStore = getLoginStore();
 	const alertStore = getAlertStore();
 	const projectSetupStepStore = getProjectSetupStepStore();
 
-	let isFirstLoad = $derived(+projectSetupStepStore.projectSetupStep === projectSetupStepEnum['odk_project_load']);
+	let isFirstLoad = $derived(
+		+(projectSetupStepStore.projectSetupStep || 0) === projectSetupStepEnum['odk_project_load'],
+	);
 
 	const handleSignOut = async () => {
 		try {
 			await revokeCookies();
 			loginStore.signOut();
-			drawerRef.hide();
+			drawerRef?.hide();
 			// window.location.href = window.location.origin;
 		} catch (error) {
 			alertStore.setAlert({ variant: 'danger', message: 'Sign Out Failed' });
@@ -87,30 +90,30 @@
 				class="!text-[1.8rem] text-[#52525B] leading-0 cursor-pointer hover:text-red-600 duration-200"
 				style={isFirstLoad ? 'background-color: var(--sl-color-yellow-300);' : ''}
 				onclick={() => {
-					drawerRef.show();
+					drawerRef?.show();
 				}}
 				onkeydown={() => {
-					drawerRef.show();
+					drawerRef?.show();
 				}}
 				role="button"
 				tabindex="0"
 			></hot-icon>
-	  	{/snippet}
+		{/snippet}
 		<!-- add tooltip on first load -->
 		{#if isFirstLoad}
-		<hot-tooltip
-			bind:this={drawerOpenButtonRef}
-			content="First download the custom ODK Collect app here"
-			open={true}
-			placement="bottom"
-			onsl-after-hide={() => {
-				// Always keep tooltip open
-				drawerOpenButtonRef.show();
-			}}
-		>
-			{@render drawerOpenButton()}
-		</hot-tooltip>
-		<!-- else render with no tooltip -->
+			<hot-tooltip
+				bind:this={drawerOpenButtonRef}
+				content="First download the custom ODK Collect app here"
+				open={true}
+				placement="bottom"
+				onsl-after-hide={() => {
+					// Always keep tooltip open
+					drawerOpenButtonRef?.show();
+				}}
+			>
+				{@render drawerOpenButton()}
+			</hot-tooltip>
+			<!-- else render with no tooltip -->
 		{:else}
 			{@render drawerOpenButton()}
 		{/if}

src/mapper/src/lib/components/login.svelte

@@ -3,11 +3,6 @@
 	import { osmLoginRedirect } from '$lib/utils/login';
 	import { getLoginStore } from '$store/login.svelte.ts';
 
-	type Props = {
-		open: boolean;
-		toggleOpen: (value: boolean) => void;
-	};
-
 	type loginOptionsType = {
 		id: string;
 		name: string;