From 6a1d2e7a7b205767529fdf0e24f197b2a0c03a91 Mon Sep 17 00:00:00 2001
From: funkyFangs <funkyFangs@outlook.com>
Date: Thu, 26 Dec 2024 17:31:18 -0600
Subject: [PATCH 1/3] :sparkles: add drag and drop for tabs to rearrange them

---
 src/lib/menu/tracker/view/ViewTrackers.svelte | 83 +++++++++++++++++--
 1 file changed, 78 insertions(+), 5 deletions(-)

diff --git a/src/lib/menu/tracker/view/ViewTrackers.svelte b/src/lib/menu/tracker/view/ViewTrackers.svelte
index 512fb81..a8ab5ef 100644
--- a/src/lib/menu/tracker/view/ViewTrackers.svelte
+++ b/src/lib/menu/tracker/view/ViewTrackers.svelte
@@ -168,26 +168,99 @@
     }
   }
 
+  function onTabDragStart(event: DragEvent, target: number) {
+    const dataTransfer = event.dataTransfer!
+
+    dataTransfer.setData('text/plain', target.toString())
+    dataTransfer.dropEffect = 'move'
+  }
+
+  function onTabDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  function onTabDrop(event: DragEvent) {
+    event.preventDefault()
+
+    const clientX = event.x
+    const leftIndex = tabs
+      .map((tab) => tab.getBoundingClientRect())
+      .findLastIndex((box) => box.x + box.width / 2 <= clientX)
+    const startIndex = parseInt(event.dataTransfer!.getData('text/plain'))
+    const lastIndex = tabs.length - 1
+
+    const selectedHuntTracker = $huntTrackers[$selectedTrackerIndex]
+
+    if (startIndex !== leftIndex && startIndex !== leftIndex + 1) {
+      huntTrackers.update((huntTrackers) => {
+        // Moving to beginning
+        if (leftIndex === -1) {
+          return [
+            huntTrackers[startIndex],
+            ...huntTrackers.slice(0, startIndex),
+            ...huntTrackers.slice(startIndex + 1)
+          ]
+        }
+        // Moving to end
+        else if (leftIndex === lastIndex) {
+          return [
+            ...huntTrackers.slice(0, startIndex),
+            ...huntTrackers.slice(startIndex + 1),
+            huntTrackers[startIndex]
+          ]
+        }
+        // Moving to the left
+        else if (startIndex < leftIndex) {
+          return [
+            ...huntTrackers.slice(0, startIndex),
+            ...huntTrackers.slice(startIndex + 1, leftIndex + 1),
+            huntTrackers[startIndex],
+            ...huntTrackers.slice(leftIndex + 1)
+          ]
+        }
+        // Moving to the right
+        else {
+          return [
+            ...huntTrackers.slice(0, leftIndex + 1),
+            huntTrackers[startIndex],
+            ...huntTrackers.slice(leftIndex + 1, startIndex),
+            ...huntTrackers.slice(startIndex + 1)
+          ]
+        }
+      })
+
+      selectedTrackerIndex.set($huntTrackers.indexOf(selectedHuntTracker))
+    }
+  }
+
   let tabs: HTMLElement[] = []
   let kebabMenuOpen = false
 </script>
 
 <div id="tabs">
-  <div role="tablist" aria-label="Hunt Tracker Tabs">
+  <div
+    role="tablist"
+    aria-label="Hunt Tracker Tabs"
+    tabindex={-1}
+    on:dragover={onTabDragOver}
+    on:drop={onTabDrop}
+  >
     {#each $huntTrackers as huntTracker, index}
-      <button
+      <div
         id="tab-{index + 1}"
-        role="tab"
         tabindex={index === $selectedTrackerIndex ? 0 : -1}
+        role="tab"
         aria-selected={index === $selectedTrackerIndex}
         aria-controls="tracker-{index + 1}"
+        draggable="true"
         class:hoverable={Device.canHover}
         on:click={selectTracker(index)}
-        on:keydown={(event) => onTabKeyPress(event)}
+        on:keydown={onTabKeyPress}
+        on:dragstart={(event) => onTabDragStart(event, index)}
         bind:this={tabs[index]}
       >
         <span>{formatPokemonSpeciesName(huntTracker.pokemonSpecies)}</span>
-      </button>
+      </div>
     {/each}
   </div>
   {#if !creatingTracker}

From c897a321ad106ef2c1ea8986394c36f19eaa965c Mon Sep 17 00:00:00 2001
From: funkyFangs <funkyFangs@outlook.com>
Date: Thu, 26 Dec 2024 17:37:00 -0600
Subject: [PATCH 2/3] :wheelchair: add home and end for tab focus

---
 src/lib/menu/tracker/view/ViewTrackers.svelte | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/lib/menu/tracker/view/ViewTrackers.svelte b/src/lib/menu/tracker/view/ViewTrackers.svelte
index a8ab5ef..31e8640 100644
--- a/src/lib/menu/tracker/view/ViewTrackers.svelte
+++ b/src/lib/menu/tracker/view/ViewTrackers.svelte
@@ -151,14 +151,33 @@
 
   function onTabKeyPress(event: KeyboardEvent) {
     switch (event.key) {
-      case 'ArrowRight':
-        selectedTrackerIndex.update((index) => (index + 1) % $huntTrackers.length)
-        tabs[$selectedTrackerIndex]?.focus()
+      case 'ArrowRight': {
+        const nextIndex = ($selectedTrackerIndex + 1) % tabs.length
+        selectedTrackerIndex.set(nextIndex)
+        tabs[nextIndex]?.focus()
         break
+      }
       case 'ArrowLeft': {
-        const length = $huntTrackers.length
-        selectedTrackerIndex.update((index) => (((index - 1) % length) + length) % length)
-        tabs[$selectedTrackerIndex]?.focus()
+        const length = tabs.length
+        const nextIndex = ((($selectedTrackerIndex - 1) % length) + length) % length
+        selectedTrackerIndex.set(nextIndex)
+        tabs[nextIndex]?.focus()
+        break
+      }
+      case 'Home': {
+        const index = 0
+        if ($selectedTrackerIndex !== index) {
+          selectedTrackerIndex.set(index)
+          tabs[index]?.focus()
+        }
+        break
+      }
+      case 'End': {
+        const index = tabs.length - 1
+        if ($selectedTrackerIndex !== index) {
+          selectedTrackerIndex.set(index)
+          tabs[index]?.focus()
+        }
         break
       }
       case 'Delete': {

From 42e84f34f7c8c174e9446477450297a4ce5db043 Mon Sep 17 00:00:00 2001
From: funkyFangs <funkyFangs@outlook.com>
Date: Thu, 26 Dec 2024 17:37:33 -0600
Subject: [PATCH 3/3] :hammer: add run script that auto-opens browser

---
 .idea/runConfigurations/Run_Development.xml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .idea/runConfigurations/Run_Development.xml

diff --git a/.idea/runConfigurations/Run_Development.xml b/.idea/runConfigurations/Run_Development.xml
new file mode 100644
index 0000000..fa7ad96
--- /dev/null
+++ b/.idea/runConfigurations/Run_Development.xml
@@ -0,0 +1,15 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Run Development" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="dev" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
+      <browser start="true" url="http://localhost:5173" />
+    </EXTENSION>
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file