Refine subscription profile layout and focus handling

src/web/styles/features/subscription.css

@@ -50,7 +50,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding-right: 76px;
+  padding-right: 44px;
 }
 
 .client-profiles-header h2 {
@@ -60,23 +60,7 @@
   letter-spacing: 0.02em;
 }
 
-.client-profiles-header > button:not(.client-drawer-close) {
-  width: 40px;
-  height: 40px;
-  border: 0;
-  background: transparent;
-  color: var(--client-muted);
-  font: 300 24px/1 inherit;
-  cursor: pointer;
-}
-
-.client-profiles-header > button:hover,
-.client-profiles-header > button:focus-visible {
-  color: var(--client-accent);
-}
-
-.client-profiles-operation,
-.client-profiles-current {
+.client-profiles-operation {
   min-height: 42px;
   display: flex;
   align-items: center;
@@ -99,33 +83,35 @@
   border-radius: 50%;
 }
 
-.client-profiles-current {
-  gap: 8px;
-  margin-bottom: 18px;
-}
-
-.client-profiles-current strong {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--client-text);
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .client-profile-list {
+  margin-top: 18px;
   border-top: 1px solid var(--client-border);
 }
 
 .client-profile-group {
   position: relative;
   border-bottom: 1px solid var(--client-border);
+  animation: client-profile-group-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.client-profile-group.is-active .client-profile-title strong {
+.client-profile-group.is-active {
+  background: color-mix(in oklch, var(--client-accent) 5%, transparent);
+  box-shadow: inset 2px 0 var(--client-accent);
+}
+
+.client-profile-group.is-active .client-profile-title strong,
+.client-profile-group.is-active .client-profile-selected-server {
   color: var(--client-accent);
 }
 
+@keyframes client-profile-group-in {
+  from {
+    opacity: 0;
+    filter: blur(5px);
+    transform: translateY(8px);
+  }
+}
+
 .client-profile-header {
   min-height: 72px;
   display: grid;
@@ -301,6 +287,56 @@
   margin: 0;
 }
 
+.client-profile-selected-server {
+  width: 100%;
+  min-height: 52px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px 0 26px;
+  border: 0;
+  border-top: 1px solid var(--client-border);
+  background: transparent;
+  color: var(--client-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.client-profile-selected-server > span {
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--client-accent);
+  border-radius: 50%;
+  background: var(--client-accent);
+  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--client-bg) 88%, transparent);
+}
+
+.client-profile-selected-server strong {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.client-profile-selected-server small {
+  color: var(--client-muted);
+  font-size: 8px;
+  white-space: nowrap;
+}
+
+.client-profile-selected-server:hover,
+.client-profile-selected-server:focus-visible {
+  background: color-mix(in oklch, var(--client-accent) 5%, transparent);
+}
+
+.client-profile-selected-server:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: -2px;
+}
+
 .client-profile-activate,
 .client-profile-add-trigger {
   min-height: 36px;
@@ -314,6 +350,20 @@
   cursor: pointer;
 }
 
+.client-subscription-sheet > .client-profile-add {
+  margin-top: 12px;
+  border-bottom: 0;
+  animation: client-profile-add-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes client-profile-add-in {
+  from {
+    opacity: 0;
+    filter: blur(5px);
+    transform: translateY(8px);
+  }
+}
+
 .client-profile-activate {
   white-space: nowrap;
 }
@@ -473,7 +523,9 @@
 @media (prefers-reduced-motion: reduce) {
   .client-profile-chevron,
   .client-profile-body,
-  .client-profile-refresh {
+  .client-profile-refresh,
+  .client-profile-group,
+  .client-subscription-sheet > .client-profile-add {
     transition: none;
     animation: none;
   }