From 39f0871362ebeeb17729be2499726171720102d3 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Fri, 19 Apr 2024 17:06:36 +0200
Subject: [PATCH] sortable file tabs

---
 website/package-lock.json                  | 22 +++++++++++++++++++---
 website/package.json                       |  6 ++++--
 website/src/lib/components/FileList.svelte | 18 +++++++++++++++---
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index 501bec4c..eb4e7607 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -9,13 +9,12 @@
             "version": "0.0.1",
             "dependencies": {
                 "@mapbox/mapbox-gl-geocoder": "^5.0.2",
-                "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
-                "@types/mapbox-gl": "^3.1.0",
                 "bits-ui": "^0.21.3",
                 "clsx": "^2.1.0",
                 "gpx": "file:../gpx",
                 "lucide-svelte": "^0.365.0",
                 "mapbox-gl": "^3.2.0",
+                "sortablejs": "^1.15.2",
                 "tailwind-merge": "^2.2.2",
                 "tailwind-variants": "^0.2.1"
             },
@@ -25,7 +24,10 @@
                 "@sveltejs/vite-plugin-svelte": "^3.0.0",
                 "@types/eslint": "^8.56.0",
                 "@types/events": "^3.0.3",
+                "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
+                "@types/mapbox-gl": "^3.1.0",
                 "@types/node": "^20.12.5",
+                "@types/sortablejs": "^1.15.8",
                 "@typescript-eslint/eslint-plugin": "^7.0.0",
                 "@typescript-eslint/parser": "^7.0.0",
                 "autoprefixer": "^10.4.19",
@@ -1346,7 +1348,8 @@
         "node_modules/@types/geojson": {
             "version": "7946.0.14",
             "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-            "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+            "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+            "dev": true
         },
         "node_modules/@types/http-cache-semantics": {
             "version": "4.0.4",
@@ -1371,6 +1374,7 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/@types/mapbox__mapbox-gl-geocoder/-/mapbox__mapbox-gl-geocoder-5.0.0.tgz",
             "integrity": "sha512-eGBWdFiP2QgmwndPyhwK6eBeOfyB8vRscp2C6Acqasx5dH8FvTo/VgXWCrCKFR3zkWek/H4w4/CwmBFOs7OLBA==",
+            "dev": true,
             "dependencies": {
                 "@types/geojson": "*",
                 "@types/mapbox-gl": "*"
@@ -1380,6 +1384,7 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.1.0.tgz",
             "integrity": "sha512-hI6cQDjw1bkJw7MC/eHMqq5TWUamLwsujnUUeiIX2KDRjxRNSYMjnHz07+LATz9I9XIsKumOtUz4gRYnZOJ/FA==",
+            "dev": true,
             "dependencies": {
                 "@types/geojson": "*"
             }
@@ -1422,6 +1427,12 @@
             "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
             "dev": true
         },
+        "node_modules/@types/sortablejs": {
+            "version": "1.15.8",
+            "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+            "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+            "dev": true
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "7.5.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.5.0.tgz",
@@ -4708,6 +4719,11 @@
                 "sorcery": "bin/sorcery"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz",
+            "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA=="
+        },
         "node_modules/source-map-js": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
diff --git a/website/package.json b/website/package.json
index 9fdda45f..10af31ec 100644
--- a/website/package.json
+++ b/website/package.json
@@ -17,7 +17,10 @@
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@types/eslint": "^8.56.0",
         "@types/events": "^3.0.3",
+        "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
+        "@types/mapbox-gl": "^3.1.0",
         "@types/node": "^20.12.5",
+        "@types/sortablejs": "^1.15.8",
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^7.0.0",
         "autoprefixer": "^10.4.19",
@@ -38,13 +41,12 @@
     "type": "module",
     "dependencies": {
         "@mapbox/mapbox-gl-geocoder": "^5.0.2",
-        "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
-        "@types/mapbox-gl": "^3.1.0",
         "bits-ui": "^0.21.3",
         "clsx": "^2.1.0",
         "gpx": "file:../gpx",
         "lucide-svelte": "^0.365.0",
         "mapbox-gl": "^3.2.0",
+        "sortablejs": "^1.15.2",
         "tailwind-merge": "^2.2.2",
         "tailwind-variants": "^0.2.1"
     }
diff --git a/website/src/lib/components/FileList.svelte b/website/src/lib/components/FileList.svelte
index dcb1c921..82f7d221 100644
--- a/website/src/lib/components/FileList.svelte
+++ b/website/src/lib/components/FileList.svelte
@@ -2,16 +2,28 @@
 	import { files, selectedFiles, addSelectFile, selectFile } from '$lib/stores';
 
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+
+	import Sortable from 'sortablejs';
+
+	import { onMount } from 'svelte';
+
+	let tabs: HTMLDivElement;
+
+	onMount(() => {
+		Sortable.create(tabs, {
+			forceAutoScrollFallback: true
+		});
+	});
 </script>
 
-<div class="absolute h-10 -translate-y-10 w-fit max-w-full bg-secondary rounded-t px-1">
+<div class="absolute h-10 -translate-y-10 w-fit max-w-full bg-secondary rounded-t">
 	<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
-		<div class="flex flex-row gap-1">
+		<div bind:this={tabs} class="flex flex-row gap-1">
 			{#each $files as file}
 				<button
 					class="my-1 px-1.5 py-1 rounded {$selectedFiles.has(file)
 						? 'bg-background shadow'
-						: 'bg-secondary'}"
+						: 'bg-secondary'} first:ml-1 last:mr-1"
 					on:click={(e) => {
 						if (e.shiftKey) {
 							addSelectFile(file);