feat: implement drag-and-drop reordering for vault items and enhance sorting functionality

webapp/src/styles/vault.css

@@ -354,6 +354,31 @@
   transform: translateX(0);
 }
 
+.list-item.is-dragging {
+  @apply z-[2];
+  border-color: rgba(37, 99, 235, 0.3);
+  background: color-mix(in srgb, var(--panel) 88%, white 12%);
+  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
+}
+
+.list-item.is-sorting-source {
+  opacity: 0.28;
+}
+
+.cipher-drag-overlay {
+  @apply mb-0;
+  cursor: grabbing;
+  border-color: rgba(37, 99, 235, 0.34);
+  background: color-mix(in srgb, var(--panel) 92%, white 8%);
+  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18);
+}
+
+.cipher-drag-overlay .row-main,
+.cipher-drag-overlay .cipher-drag-btn,
+.cipher-drag-overlay .row-check {
+  pointer-events: none;
+}
+
 .row-check {
   @apply relative z-[2] h-4 w-4 cursor-pointer;
 }
@@ -369,6 +394,42 @@
   transform: translateX(2px);
 }
 
+.cipher-drag-btn {
+  @apply relative z-[2] h-[34px] w-6 min-w-6 cursor-grab self-center overflow-visible rounded-[10px] p-0 opacity-[0.82];
+  color: var(--muted);
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.cipher-drag-btn:hover {
+  color: var(--primary-strong);
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.cipher-drag-btn:active {
+  cursor: grabbing;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.cipher-drag-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+
+.cipher-drag-btn::before {
+  content: '';
+  @apply absolute -inset-2.5 rounded-xl;
+}
+
 .list-icon-wrap {
   @apply grid h-6 w-6 shrink-0 place-items-center;
   transition: transform 240ms var(--ease-out-soft), filter 240ms var(--ease-out-soft);