Update the sidebar tab rearranger to use Drag and Drop (again)

templates/SidebarTabRearranger/footer.hbs

@@ -1,3 +1,14 @@
 <footer>
-	<button>Submit</button>
+	<button type="close">
+		{{ localize "OFT.apps.discard-changes" }}
+	</button>
+	<button>
+		<oft-icon
+			name="icons/save"
+			aria-hidden="true"
+			var:fill="currentColor"
+			var:size="1rem"
+		></oft-icon>
+		{{ localize "Save Changes" }}
+	</button>
 </footer>

templates/SidebarTabRearranger/list.hbs

@@ -1,15 +1,33 @@
 <main>
-	<ol>
+	<div class="top-label">
+		{{ localize "OFT.apps.SidebarTabRearranger.top" }}
+	</div>
+	<div class="tab-list" data-tooltip-direction="UP">
+		<div
+			class="drop-zone"
+			data-move-to-index="0"
+		></div>
 		{{#each tabs as | tab |}}
-			<li>
-				<span class="emulate-button {{tab.icon}}"></span>
-				<span>{{tab.name}}</span>
-				<div style="flex-grow: 1"></div>
+			<div
+				class="emulate-button tab"
+				data-tab-id="{{tab.id}}"
+				data-tooltip="{{tab.name}}"
+			>
+				<span class="sidebar-icon {{tab.icon}}"></span>
 				<oft-icon
+					class="drag-handle-icon"
 					name="icons/drag-handle"
-					var:fill="currentColor"
+					var:fill="color-mix(in srgb, currentColor 75%, black 25%)"
+					var:size="1rem"
 				></oft-icon>
-			</li>
+			</div>
+			<div
+				class="drop-zone"
+				data-move-to-index="{{tab.nextIndex}}"
+			></div>
 		{{/each}}
-	</ol>
+	</div>
+	<div class="bottom-label">
+		{{ localize "OFT.apps.SidebarTabRearranger.bottom" }}
+	</div>
 </main>