Improve server picker layout and profile activation flow

2026-08-11 01:40:50 +03:00
parent aa9c959368
commit 9432112fe2
9 changed files with 172 additions and 57 deletions
@@ -554,3 +554,121 @@
 .client-server:disabled {
  cursor: wait;
 }
+
+/* The drawer uses the same picker behavior with a flat, full-width list. */
+.client-profile-body .client-servers {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+}
+
+.client-profile-body .client-server-mode-panels {
+  order: 1;
+}
+
+.client-profile-body .client-server-toolbar {
+  order: 2;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 40px;
+  margin-top: 6px;
+  border-top: 1px solid var(--client-border);
+}
+
+.client-profile-body .client-server-toolbar-title {
+  display: none;
+}
+
+.client-profile-body .client-server-check {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: start;
+  width: auto;
+  gap: 8px;
+  padding: 0 8px;
+}
+
+.client-profile-body .client-server-check::after {
+  content: 'ПРОВЕРИТЬ ПИНГ';
+  font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  letter-spacing: 0.03em;
+}
+
+.client-profile-body .client-server-mode-toggle {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+}
+
+.client-profile-body .client-servers.is-short .client-server-mode-toggle {
+  display: none;
+}
+
+.client-profile-body .client-server-grid,
+.client-profile-body .client-server-row,
+.client-profile-body .client-server-auto,
+.client-profile-body .client-server-row .client-server {
+  width: 100%;
+  margin: 0;
+}
+
+.client-profile-body .client-server-row {
+  grid-template-columns: minmax(0, 1fr) 64px;
+  min-height: 52px;
+  border-bottom: 1px solid var(--client-border);
+}
+
+.client-profile-body .client-server-row.is-selected {
+  background: color-mix(in oklch, var(--client-accent) 7%, transparent);
+  box-shadow: inset 2px 0 var(--client-accent);
+}
+
+.client-profile-body .client-server-row .client-server {
+  grid-column: 1;
+  min-height: 51px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  place-items: center start;
+  gap: 8px;
+  padding: 0 8px;
+  border: 0;
+  text-align: left;
+}
+
+.client-profile-body .client-server-row .client-server::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--client-muted);
+  border-radius: 50%;
+}
+
+.client-profile-body .client-server-row .client-server.is-selected::before {
+  border: 1px solid var(--client-accent);
+  background: var(--client-accent);
+  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--client-bg) 88%, transparent);
+}
+
+.client-profile-body .client-server strong,
+.client-profile-body .client-server small {
+  text-align: left;
+}
+
+.client-profile-body .client-server small {
+  grid-column: 3;
+  font-size: 8px;
+}
+
+.client-profile-body .client-server-meta {
+  grid-column: 2;
+  justify-self: stretch;
+  width: auto;
+  margin: 0;
+}
+
+.client-profile-body .client-server-meta .client-server-health {
+  width: auto;
+  place-items: center end;
+  padding: 0 10px 0 0;
+  color: var(--client-accent);
+}