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

test/web/style-boundaries.test.js

@@ -36,26 +36,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 793,
+    cascadeEdges: 795,
     customProperties: 31,
-    declarations: 2968,
+    declarations: 2996,
     important: 0,
-    keyframes: 49,
+    keyframes: 51,
     media: 13,
-    rules: 905,
-    variableReferences: 340,
+    rules: 911,
+    variableReferences: 347,
   },
   hashes: {
-    cascadeEdges: '78b7ac8a4e6e39376dd811c0b66b7562b8562c800a332be259478e391996278b',
+    cascadeEdges: '5cf4f4dc60eabe1e8175fa7c514a4ebc95983b588c2190adea0f75ffbbb813ef',
     customProperties: 'c7dd331e4bad898c450568999d8c9c6837e275a79c365c7680e143026fde4545',
-    declarations: '9935ad971bc1804c0f6bf50f26b6057f1f75fa66321af90cae8f8132a3275fac',
+    declarations: '47604ceab56972914f0c193ea10b3fc29b2532ca5b8a8057d1cfb437f5c8f86e',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
-    duplicateSelectors: 'c0ec5c96e48cd2ceed32aa5050383bcf29c3c0b8f1b440ed6883435e3e9b964d',
-    keyframes: 'bde9c628dc86cb8a4299d5397eb7a81c5fbc9481136a073130991d3182d0799d',
-    ruleDeclarationSequences: 'a62dc2ad887bd5fdba773e462e137eda397fc13b7b151bfc2ca16352d325ec60',
-    selectors: '529b528153c3f4e0c565aa80ed9fefea52a8c02c4ae10a5e807a961eb81ebefd',
-    variableReferences: '0189ffef214066db38a0ed0b8bfba18150353da5a09589ef1f606e5651cd25f7',
-    witnesses: '770af3da2a817c9bc2bd593aeb1c21fe81b36fd7f86bf24e47d8ae844719feaa',
+    duplicateSelectors: 'e063b7ac4965baed089fbcbba37544d7545eec7a7e84c3a68589465af53ed017',
+    keyframes: '9e87e997d0b776462ac3e495c7ced584871a5d9512226e5008eb84b4d311530a',
+    ruleDeclarationSequences: 'd7db36cc3209e48c75e6e1b0c2748d0bff6be5a078f4e61b97c039d9da9c12cb',
+    selectors: 'cd61e05ec477919f2c34d3944edc4fbb175b1572f8060a7696f0b73a687ddfad',
+    variableReferences: 'b6f3567fc26a250c81f9214d1486a1cd3f7998012383aeb9d9e53fdeb32b17b1',
+    witnesses: '1ba29e4efc61874a5c329d7d48d0fc399dae8b1c9dccfea0e682ceba3cb1630f',
   },
 };
 
@@ -306,8 +306,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-Bl9ybRZ0.css']);
+  assert.deepEqual(assets, ['index-BJwATLJx.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 111207);
-  assert.equal(sha256(built), '236deba70723e5bfe8e49fc0514f2c8b8fc0c1354664a37d5b37e6b22ac0c156');
+  assert.equal(built.byteLength, 112406);
+  assert.equal(sha256(built), '4b117a70cf431bbe7aacd368df3cb30ab50c5ab58498190b3822b92607aa9045');
 });

test/web/subscription-feature-contract.test.js

@@ -50,8 +50,8 @@ test('local validation, scoped refresh and drawer focus remain feature-owned', (
   assert.match(feature, /previousProfileCountRef\.current > 0\) setOpen\(false\)/);
   assert.match(feature, /if \(!adding \|\| \(profiles\.length > 0 && !open\)\) return undefined/);
   assert.match(feature, /if \(deleteIdRef\.current\) return;[\s\S]*toggleRef\.current\?\.focus\(\)/);
-  assert.match(feature, /const invoker = addInvokerRef\.current[\s\S]*if \(invoker\) requestAnimationFrame\(\(\) => invoker\.focus\(\)\)/);
-  assert.match(feature, /showAdd: \(\) => \{[\s\S]*addInvokerRef\.current = document\.activeElement instanceof HTMLElement/);
+  assert.match(feature, /setAdding\(false\)[\s\S]*client-profile-add-trigger'\)\?\.focus\(\)/);
+  assert.doesNotMatch(feature, /addInvokerRef/);
   assert.match(feature, /function cancelRename\(\)[\s\S]*client-profile-menu-\$\{profileId\}[\s\S]*\.focus\(\)/);
   assert.match(feature, /id=\{`client-profile-menu-\$\{profile\.id\}`\}/);
 });
@@ -87,7 +87,8 @@ test('validation rejection parser preserves structured errors and normalizes non
 test('feature keeps exact slots, truthy closes and subscription DOM order', () => {
   assert.match(feature, /if \(!await onAdd\(normalizedLabel, normalizedUrl\)\) return;[\s\S]*resetAdd\(\)/);
   assert.match(feature, /if \(!await onForget\(deleteProfile\.id, deleteStopsVpn \? 'stop-and-delete' : 'delete'\)\) return;[\s\S]*setDeleteId\(''\)/);
-  assert.match(feature, /client-profiles-operation[\s\S]*client-profiles-current[\s\S]*\{statusSlot\}[\s\S]*client-profile-list/);
+  assert.match(feature, /client-profiles-operation[\s\S]*\{statusSlot\}[\s\S]*client-profile-list[\s\S]*feature\.adding[\s\S]*AddProfileForm[\s\S]*client-profile-add-trigger/);
+  assert.doesNotMatch(feature, /client-profiles-current|aria-label="Добавить подписку"/);
   assert.match(feature, /const drawerOpen = feature\.open && feature\.profiles\.length > 0/);
   assert.match(feature, /feature\.profiles\.length === 0 && <div className="client-form client-subscription-first-run"/);
   assert.match(page, /<SubscriptionPanel[\s\S]*statusSlot=\{<>[\s\S]*InlineError[\s\S]*renderServerPicker=[\s\S]*<ServerPicker/);
@@ -102,7 +103,8 @@ test('profiles render as flat accordion groups with scoped controls', () => {
   assert.match(feature, /aria-expanded=\{expanded\}/);
   assert.match(feature, /profile\.subscription\.status === 'stale'[\s\S]*profile\.subscription\.fetchedAt/);
   assert.match(feature, /feature\.operations\.profileRefresh\?\.target === profile\.id/);
-  assert.match(feature, /const currentLabel = feature\.gatewayDirect[\s\S]*Gateway · сервер не определён/);
+  assert.match(feature, /!expanded && visibleServer && <button[\s\S]*client-profile-selected-server/);
+  assert.match(feature, /const visibleServerId = applied \? feature\.selection\.appliedServerId : profile\.desiredServerId/);
   assert.match(feature, /const desired = !feature\.connected[\s\S]*&& !feature\.gatewayDirect/);
   assert.match(styles, /\.client-profile-group/);
   assert.match(styles, /\.client-profile-body/);