Refine subscription profile layout and focus handling

src/shared/versions.ts

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.23.1',
-  gatewayClient: '0.24.1',
+  macClient: '0.23.2',
+  gatewayClient: '0.24.2',
   gatewayBackend: '0.24.0',
 });
 

src/web/features/subscription/SubscriptionFeature.tsx

@@ -96,7 +96,6 @@ export function useSubscriptionFeature({
   const toggleRef = useRef<HTMLButtonElement>(null);
   const closeRef = useRef<HTMLButtonElement>(null);
   const labelRef = useRef<HTMLInputElement>(null);
-  const addInvokerRef = useRef<HTMLElement | null>(null);
   const deleteIdRef = useRef(deleteId);
   const previousProfileCountRef = useRef(profiles.length);
   deleteIdRef.current = deleteId;
@@ -173,9 +172,9 @@ export function useSubscriptionFeature({
     setLabel('');
     setUrl('');
     if (profiles.length) setAdding(false);
-    const invoker = addInvokerRef.current;
-    addInvokerRef.current = null;
-    if (invoker) requestAnimationFrame(() => invoker.focus());
+    if (profiles.length) requestAnimationFrame(() => (
+      document.getElementById('client-profile-add-trigger')?.focus()
+    ));
   }
 
   async function addProfile() {
@@ -274,7 +273,6 @@ export function useSubscriptionFeature({
     toggle: () => setOpen((current) => !current),
     close: () => { setOpen(false); setMenuId(''); },
     showAdd: () => {
-      addInvokerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       setAdding(true);
       setMenuId('');
       onDismissError();
@@ -408,6 +406,14 @@ function ProfileGroup({
     || feature.operations.profileRefresh?.target === profile.id;
   const controlsBlocked = operationBlocked(feature.operations, 'profileSelect');
   const selectedServer = profileServer(profile, profile.desiredServerId);
+  const visibleServerId = applied ? feature.selection.appliedServerId : profile.desiredServerId;
+  const visibleServer = profileServer(profile, visibleServerId)
+    || (applied && feature.selection.appliedServerSnapshot?.id === visibleServerId
+      ? feature.selection.appliedServerSnapshot
+      : null);
+  const visibleServerLocation = [visibleServer?.city, visibleServer?.country]
+    .filter((value): value is string => typeof value === 'string' && Boolean(value))
+    .join(' · ');
   const canActivate = !applied && feature.selection.desiredProfileId !== profile.id;
   const localStatus = profileError?.message || (profile.subscription.status === 'stale'
     ? `Последнее обновление не удалось. Данные от ${profile.subscription.fetchedAt
@@ -485,6 +491,16 @@ function ProfileGroup({
 
     {localStatus && <div className="client-profile-local-status" role="status">{localStatus}</div>}
 
+    {!expanded && visibleServer && <button
+      className="client-profile-selected-server"
+      type="button"
+      onClick={() => feature.toggleProfile(profile.id)}
+    >
+      <span aria-hidden="true" />
+      <strong>{visibleServer.label}</strong>
+      {visibleServerLocation && <small>{visibleServerLocation}</small>}
+    </button>}
+
     {visited && <div
       id={`client-profile-${profile.id}`}
       className="client-profile-body"
@@ -510,23 +526,6 @@ export function SubscriptionPanel({
   statusSlot?: ReactNode;
   renderServerPicker: (profile: ProfileSnapshot, state: ServerPickerRenderState) => ReactNode;
 }) {
-  const currentProfileId = feature.connected
-    ? feature.selection.appliedProfileId
-    : feature.selection.desiredProfileId;
-  const currentProfile = feature.profiles.find((profile) => profile.id === currentProfileId);
-  const currentServerId = feature.connected
-    ? feature.selection.appliedServerId
-    : currentProfile?.desiredServerId || '';
-  const currentServer = profileServer(currentProfile, currentServerId)
-    || (feature.connected && feature.selection.appliedServerSnapshot?.id === currentServerId
-      ? feature.selection.appliedServerSnapshot
-      : null);
-  const currentLabel = feature.gatewayDirect
-    ? 'Gateway · сервер не определён'
-    : currentProfile && currentServer
-      ? `${currentProfile.label} · ${currentServer.label}`
-      : 'сервер не выбран';
-
   const drawerOpen = feature.open && feature.profiles.length > 0;
 
   return <>
@@ -549,7 +548,6 @@ export function SubscriptionPanel({
       <div className="client-drawer-sheet client-subscription-sheet">
         <header className="client-profiles-header">
           <h2>ПОДПИСКИ</h2>
-          <button type="button" aria-label="Добавить подписку" onClick={feature.showAdd}>＋</button>
           <button
             ref={feature.closeRef}
             className="client-drawer-close"
@@ -561,12 +559,7 @@ export function SubscriptionPanel({
         <div className={`client-profiles-operation${feature.activeOperation ? ' is-active' : ''}`} role="status">
           {feature.activeOperation ? operationText(feature.activeOperation[0]) : '\u00a0'}
         </div>
-        <div className="client-profiles-current">
-          <span>{feature.connected || feature.gatewayDirect ? 'Сейчас работает:' : 'Выбрано:'}</span>
-          <strong>{currentLabel}</strong>
-        </div>
         {statusSlot}
-        {feature.adding && feature.profiles.length > 0 && <AddProfileForm feature={feature} />}
         <div className="client-profile-list">
           {feature.profiles.map((profile) => <ProfileGroup
             key={profile.id}
@@ -575,9 +568,14 @@ export function SubscriptionPanel({
             renderServerPicker={renderServerPicker}
           />)}
         </div>
-        <button className="client-profile-add-trigger" type="button" onClick={feature.showAdd}>
-          ＋ Добавить подписку
-        </button>
+        {feature.adding && feature.profiles.length > 0
+          ? <AddProfileForm feature={feature} />
+          : <button
+            id="client-profile-add-trigger"
+            className="client-profile-add-trigger"
+            type="button"
+            onClick={feature.showAdd}
+          >＋ Добавить подписку</button>}
       </div>
     </div>
   </>;

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