Refactor server picker and limit ping requests

src/web/styles.css

@@ -2638,14 +2638,6 @@ p {
   transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
 }
 
-.client-server-grid.is-leaving {
-  pointer-events: none;
-}
-
-.client-server-grid.is-leaving .client-server {
-  animation: client-server-leave 420ms calc(var(--server-index) * 90ms) cubic-bezier(0.4, 0, 1, 1) forwards;
-}
-
 @keyframes client-server-leave {
   0% {
     opacity: 1;
@@ -2703,9 +2695,192 @@ p {
   text-align: center;
 }
 
-.client-server small.good { color: var(--client-accent); }
-.client-server small.medium { color: oklch(0.72 0.12 80); }
-.client-server small.slow { color: oklch(0.65 0.16 30); }
+.client-servers.is-scalable {
+  width: min(100%, 360px);
+  margin-inline: auto;
+}
+
+.client-server-tools {
+  display: grid;
+  gap: 9px;
+  margin-bottom: 14px;
+}
+
+.client-server-tools input {
+  width: 100%;
+  height: 36px;
+  padding: 0 4px;
+  border: 0;
+  border-bottom: 1px solid var(--client-border);
+  outline: 0;
+  background: transparent;
+  color: var(--client-text);
+  font: 500 11px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+}
+
+.client-server-tools input:focus {
+  border-bottom-color: var(--client-accent);
+}
+
+.client-server-filters {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.client-server-filters button,
+.client-server-group-toggle,
+.client-server-more {
+  min-height: 30px;
+  padding: 5px 7px;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  cursor: pointer;
+}
+
+.client-server-filters button.is-active,
+.client-server-filters button:hover:not(:disabled),
+.client-server-group-toggle:hover,
+.client-server-more:hover {
+  color: var(--client-accent);
+}
+
+.client-server-filters button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.client-server-pinned {
+  display: grid;
+  gap: 7px;
+  margin-bottom: 10px;
+}
+
+.client-server-auto {
+  min-height: 44px;
+  display: grid;
+  place-items: center;
+  gap: 3px;
+  padding: 6px;
+  border: 0;
+  border-bottom: 1px solid var(--client-border);
+  background: transparent;
+  color: var(--client-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.client-server-auto.is-selected {
+  border-bottom: 2px solid var(--client-accent);
+}
+
+.client-server-auto strong {
+  font-size: 11px;
+}
+
+.client-server-auto small {
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-server-scroll {
+  max-height: 330px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 5px;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklch, var(--client-accent) 36%, transparent) transparent;
+}
+
+.client-server-scroll.is-leaving {
+  pointer-events: none;
+}
+
+.client-server-scroll.is-leaving .client-server {
+  animation: client-server-leave 420ms calc(var(--server-index) * 45ms) cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+.client-server-group + .client-server-group {
+  margin-top: 8px;
+}
+
+.client-server-group-toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.client-server-group-toggle small {
+  font-size: 9px;
+}
+
+.client-servers.is-scalable .client-server-grid {
+  width: 100%;
+  gap: 5px;
+}
+
+.client-server-row.has-favorite {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 38px;
+  align-items: center;
+}
+
+.client-server-row .client-server {
+  width: 100%;
+}
+
+.client-server-favorite {
+  width: 38px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-border);
+  cursor: pointer;
+}
+
+.client-server-favorite.is-active {
+  color: var(--client-accent);
+}
+
+.client-server-empty {
+  padding: 24px 4px;
+  color: var(--client-muted);
+  font-size: 10px;
+  text-align: center;
+}
+
+.client-server-more {
+  margin-top: 8px;
+}
+
+.client-server-pages {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-server-more:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.client-server-filters button:focus-visible,
+.client-server-group-toggle:focus-visible,
+.client-server-more:focus-visible,
+.client-server-auto:focus-visible,
+.client-server-favorite:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 1px;
+}
 
 .client-server:disabled {
   cursor: wait;
@@ -3104,6 +3279,13 @@ p {
     font-size: 10px;
   }
 
+  .client-server-filters button,
+  .client-server-group-toggle,
+  .client-server-more,
+  .client-server-favorite {
+    min-height: 44px;
+  }
+
   .client-local-rule {
     grid-template-columns: 44px minmax(0, 1fr) 44px;
   }
@@ -3192,6 +3374,10 @@ p {
   .client-usage,
   .client-usage > strong,
   .client-server,
+  .client-server-auto,
+  .client-server-favorite,
+  .client-server-group-toggle,
+  .client-server-more,
   .client-copy-button,
   .client-access-tab,
   .client-access-point,