From a50b78590f2d024d5f2237edca44a1ed16d1aa2f Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:42:18 +0200
Subject: [PATCH] fix: home section re-ordering on android

---
 .../Settings/HomeSectionsSettings.svelte      | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/common/views/Settings/HomeSectionsSettings.svelte b/common/views/Settings/HomeSectionsSettings.svelte
index fbf6cdc..2f335e6 100644
--- a/common/views/Settings/HomeSectionsSettings.svelte
+++ b/common/views/Settings/HomeSectionsSettings.svelte
@@ -1,6 +1,7 @@
 <script>
   import { click } from '@/modules/click.js'
   import { sections } from '@/modules/sections.js'
+  import { SUPPORTS } from '@/modules/support.js'
 
   const allowedHomeSections = sections.map(({ title }) => title)
   export let homeSections
@@ -20,6 +21,15 @@
       draggingItemIndex = hoveredItemIndex
     }
   }
+
+  function moveItem (index, direction) {
+    if (direction === 'up' && index > 0) {
+      [homeSections[index], homeSections[index - 1]] = [homeSections[index - 1], homeSections[index]]
+    } else if (direction === 'down' && index < homeSections.length - 1) {
+      [homeSections[index], homeSections[index + 1]] = [homeSections[index + 1], homeSections[index]]
+    }
+    homeSections = homeSections
+  }
 </script>
 
 {#if mouseYCoordinate}
@@ -59,9 +69,18 @@
       draggingItem = null
       hoveredItemIndex = null
     }}>
-    <div class='input-group-prepend grab'>
-      <span class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20'>swap_vert</span>
-    </div>
+    {#if !SUPPORTS.isAndroid}
+      <div class='input-group-prepend grab'>
+        <span class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20'>swap_vert</span>
+      </div>
+    {:else}
+      <div class='input-group-prepend'>
+        <button use:click={() => moveItem(index, 'up')} class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20 pointer'>arrow_upward</button>
+      </div>
+      <div class='input-group-prepend'>
+        <button use:click={() => moveItem(index, 'down')} class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20 pointer'>arrow_downward</button>
+      </div>
+    {/if}
     <select class='form-control bg-dark w-300 mw-full' bind:value={homeSections[index]}>
       {#each allowedHomeSections as section}
         <option>{section}</option>