Fix touch support

package.json

@@ -36,6 +36,7 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-dnd-action": "^0.9.40",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

src/lib/preferences/NavigationItems.svelte

@@ -41,6 +41,9 @@
 		usedIdsSvocal.set(ids);
 	};
 
+	/** When this changes all items will reevualte their xoffset */
+	let reEvaluateEvent = 0;
+
 	$: {
 		// Todo: Fix that svocal bug
 		if (browser) saveToSvocal();
@@ -71,6 +74,21 @@
 						...it,
 						isDragged: false
 					}));
+					reEvaluateEvent++;
+					items = items.sort((a, b) => a.xOffset - b.xOffset);
+				}}
+				on:touch={(e) => {
+					e.preventDefault();
+
+					const draggedElement = items.find((i) => i.isDragged);
+					if (!draggedElement) return;
+
+					const { clientX } = e.detail.touch;
+
+					reEvaluateEvent++;
+					draggedElement.xOffset = clientX;
+
+					items = items.sort((a, b) => a.xOffset - b.xOffset);
 				}}
 				icon={item.boxIcon}
 				on:remove={() => {
@@ -79,15 +97,18 @@
 
 					items = items;
 					inactiveItems = [...inactiveItems, removed[0]];
+
+					reEvaluateEvent++;
 				}}
 				canBeRemoved={!!(items.length - 1)}
+				bind:reEvaluateEvent
 			/>
 		{/each}
 	</ul>
 	{#if inactiveItems.length}
 		<div>
 			<h5>
-			<I18n key="settings.nav.unused" />
+				<I18n key="settings.nav.unused" />
 			</h5>
 			<ul class="flex gap-2 flex-col">
 				{#each inactiveItems as item, index}

src/lib/preferences/navigation/NavigationButton.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	const dispatch = createEventDispatcher();
 
 	let thisEle: HTMLLIElement;
 
+	/** change this to reevaluate the xOffset */
+	export let reEvaluateEvent = 0;
+
 	export let icon: string;
 
 	export let isDragged = false;
@@ -16,7 +20,20 @@
 		xCoord = thisEle.getBoundingClientRect().x;
 	};
 
-	onMount(resetXCoord);
+	onMount(() => {
+		resetXCoord();
+		dispatch('mount', {
+			element: thisEle
+		});
+	});
+
+	$: {
+		if (browser && thisEle) {
+			resetXCoord();
+		}
+
+		reEvaluateEvent;
+	}
 </script>
 
 <svelte:window on:resize={resetXCoord} />
@@ -33,6 +50,25 @@
 		isDragged = false;
 		dispatch('dragend');
 	}}
+	on:touchstart={(e) => {
+		e.preventDefault();
+
+		isDragged = true;
+		dispatch('dragstart');
+	}}
+	on:touchmove={(e) => {
+		const touch = e.touches[0];
+
+		xCoord = touch.clientX;
+
+		dispatch('touch', { ...e, touch });
+	}}
+	on:touchend={(e) => {
+		e.preventDefault();
+
+		isDragged = false;
+		dispatch('dragend');
+	}}
 	bind:this={thisEle}
 >
 	{#if showRemove}