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

styles/apps/SidebarTabRearranger.css

@@ -1,19 +1,55 @@
 .oft.SidebarTabRearranger {
-	ol {
-		display: flex;
-		flex-direction: column;
+	> .window-content {
+		gap: 16px;
+	}
+
+	footer {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
 		gap: 8px;
+	}
+
+	.drop-zone {
+		--colour: transparent;
+		background: color-mix(in srgb, var(--colour) 30%, transparent 70%);
+		border: 1px solid var(--colour);
+		border-radius: 4px;
+		transition: all 150ms ease-in-out;
+		width: 12px;
+	}
+
+	.tab-list {
+		display: flex;
+		flex-direction: row;
+		row-gap: 8px;
+		column-gap: 2px;
 		list-style-type: none;
 		margin: 0;
 		padding: 0;
+
+		&.dragging > .drop-zone {
+			--colour: #c9593f;
+		}
 	}
 
-	li {
+	.tab {
+		margin: 0;
 		display: flex;
-		flex-direction: row;
+		flex-direction: column;
 		align-items: center;
-		gap: 12px;
 		cursor: var(--cursor-grab);
+
+		> .drag-handle-icon {
+			display: none;
+		}
+		&:hover:not(.no-hover-styles) {
+			> .sidebar-icon {
+				display: none;
+			}
+			> .drag-handle-icon {
+				display: initial;
+			}
+		}
 	}
 
 	.emulate-button {
@@ -26,4 +62,8 @@
 		border: 1px solid var(--color-light-5);
 		border-radius: 4px;
 	}
+
+	.bottom-label {
+		text-align: right;
+	}
 }