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);

src/web/styles/layout.css

@@ -629,15 +629,6 @@
 }
 
 @media (max-width: 560px) {
-  .client-local-rule {
-    grid-template-columns: 24px 104px minmax(0, 1fr) 28px;
-  }
-
-  .client-local-rule-status {
-    grid-column: 3;
-    text-align: left;
-  }
-
   .client-mode .app-main {
     padding: 20px 14px;
   }
@@ -713,15 +704,27 @@
   }
 
   .client-local-rule {
-    grid-template-columns: 44px minmax(0, 1fr) 44px;
+    grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
   }
 
+  .client-rule-handle,
   .client-local-rule-enabled,
   .client-row-delete {
     width: 44px;
     height: 44px;
   }
 
+  .client-rule-type-trigger,
+  .client-local-rule input,
+  .client-rule-outbound,
+  .client-rule-outbound button {
+    height: 44px;
+  }
+
+  .client-rule-type-list button {
+    min-height: 44px;
+  }
+
   .client-instructions-sheet {
     padding: 40px 58px 60px 18px;
   }
@@ -734,26 +737,36 @@
     gap: 8px;
   }
 
-  .client-local-rule-enabled {
+  .client-rule-handle {
     grid-column: 1;
     grid-row: 1;
   }
 
-  .client-rule-type {
+  .client-local-rule-enabled {
     grid-column: 2;
     grid-row: 1;
   }
 
-  .client-row-delete {
+  .client-rule-type {
     grid-column: 3;
     grid-row: 1;
   }
 
+  .client-row-delete {
+    grid-column: 4;
+    grid-row: 1;
+  }
+
   .client-local-rule input {
     grid-column: 2 / -1;
     grid-row: 2;
   }
 
+  .client-local-rule-meta {
+    grid-column: 2 / -1;
+    grid-row: 3;
+  }
+
   .client-instruction-block:nth-child(n) {
     margin-inline: 0;
   }
@@ -769,3 +782,23 @@
   }
 
 }
+
+@media (max-width: 360px) {
+  .client-local-rule-meta {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .client-rule-outbound {
+    width: 100%;
+    flex-basis: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .client-local-rule-status {
+    width: 100%;
+    min-height: 1em;
+    text-align: left;
+    white-space: normal;
+  }
+}

src/web/styles/primitives.css

@@ -314,8 +314,10 @@
   transform: rotate(8deg) scale(1.1);
 }
 
+.client-rule-handle:focus-visible,
 .client-local-rule-enabled:focus-visible,
 .client-rule-type-trigger:focus-visible,
+.client-rule-outbound button:focus-visible,
 .client-row-delete:focus-visible,
 .client-row-add:focus-visible,
 .client-local-rules-save:focus-visible,

src/web/styles/themes.css

@@ -122,6 +122,7 @@
   }
 
   .client-local-rule,
+  .client-rule-handle,
   .client-local-rule-enabled svg,
   .client-local-rule-enabled circle,
   .client-local-rule-enabled path,
@@ -130,6 +131,7 @@
   .client-rule-type-list,
   .client-rule-type-list button,
   .client-local-rule input,
+  .client-rule-outbound button,
   .client-row-delete,
   .client-row-add,
   .client-row-add-slot > span,