Update Harbor client and gateway functionality

src/web/styles/features/routing.css

@@ -76,16 +76,18 @@
 }
 
 .client-local-rule {
+  --client-rule-drag-y: 0px;
   position: relative;
   isolation: isolate;
   min-width: 0;
   display: grid;
-  grid-template-columns: 24px 116px minmax(0, 1fr) 112px 28px;
+  grid-template-columns: 44px 24px 116px minmax(0, 1fr) 28px;
   align-items: center;
-  gap: 10px;
+  column-gap: 8px;
+  row-gap: 2px;
   padding: 7px 0;
   animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
-  transition: opacity 260ms ease, filter 360ms ease;
+  transition: background-color 180ms ease, box-shadow 180ms ease, opacity 260ms ease, filter 360ms ease;
 }
 
 .client-local-rule:has(.client-rule-type.is-open) {
@@ -98,6 +100,7 @@
   letter-spacing: var(--type-label-tracking);
   text-transform: var(--type-label-transform);
   text-align: right;
+  white-space: nowrap;
   transition: color 280ms ease, opacity 280ms ease, filter 360ms ease;
 }
 
@@ -110,11 +113,19 @@
   color: var(--client-warning, oklch(0.72 0.12 72));
 }
 
-.client-local-rule.is-disabled {
+.client-local-rule.is-disabled > :not(.client-rule-handle):not(.client-row-delete):not(.client-delete-strike) {
   opacity: 0.42;
   filter: saturate(0);
 }
 
+.client-local-rule.is-dragging {
+  z-index: 6;
+  animation: none;
+  background: color-mix(in oklch, var(--client-accent) 5%, transparent);
+  box-shadow: 0 10px 28px color-mix(in oklch, var(--client-accent) 12%, transparent);
+  transform: translateY(var(--client-rule-drag-y));
+}
+
 .client-local-rule.is-removing {
   pointer-events: none;
   animation: client-row-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
@@ -132,6 +143,44 @@
   cursor: pointer;
 }
 
+.client-rule-handle {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  cursor: grab;
+  touch-action: none;
+  transition: color 180ms ease, filter 180ms ease;
+}
+
+.client-rule-handle svg {
+  width: 12px;
+  height: 28px;
+  overflow: visible;
+  fill: currentColor;
+}
+
+.client-rule-handle:hover:not(:disabled),
+.client-rule-handle:focus-visible,
+.client-rule-handle[aria-pressed='true'] {
+  outline: 0;
+  color: var(--client-accent);
+  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-accent) 48%, transparent));
+}
+
+.client-rule-handle[aria-pressed='true'] {
+  cursor: grabbing;
+}
+
+.client-rule-handle:disabled {
+  opacity: 0.28;
+  cursor: default;
+}
+
 .client-local-rule-enabled svg {
   width: 18px;
   height: 18px;
@@ -312,6 +361,67 @@
   text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 22%, transparent);
 }
 
+.client-local-rule-meta {
+  min-width: 0;
+  grid-column: 2 / -1;
+  grid-row: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.client-rule-outbound {
+  width: 128px;
+  height: 30px;
+  flex: 0 0 128px;
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+}
+
+.client-rule-outbound button {
+  height: 30px;
+  padding: 0 5px;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+  cursor: pointer;
+  transition: color 280ms ease, filter 280ms ease, text-shadow 280ms ease;
+}
+
+.client-rule-outbound button[aria-pressed='true'] {
+  color: var(--client-accent);
+  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-accent) 34%, transparent));
+  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 28%, transparent);
+}
+
+.client-rule-outbound button:disabled {
+  cursor: default;
+}
+
+.client-rule-outbound button:focus-visible {
+  outline: 0;
+  color: var(--client-accent);
+  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 42%, transparent);
+}
+
+.client-rule-reorder-instructions,
+.client-rule-reorder-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 .client-local-rules-empty {
   padding: 14px 4px 4px;
   color: var(--client-muted);