diff --git a/src/shared/versions.ts b/src/shared/versions.ts index ce8a389..9d10c7b 100644 --- a/src/shared/versions.ts +++ b/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', }); diff --git a/src/web/features/subscription/SubscriptionFeature.tsx b/src/web/features/subscription/SubscriptionFeature.tsx index 097543b..993bcd6 100644 --- a/src/web/features/subscription/SubscriptionFeature.tsx +++ b/src/web/features/subscription/SubscriptionFeature.tsx @@ -96,7 +96,6 @@ export function useSubscriptionFeature({ const toggleRef = useRef(null); const closeRef = useRef(null); const labelRef = useRef(null); - const addInvokerRef = useRef(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 &&
{localStatus}
} + {!expanded && visibleServer && } + {visited &&
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({

ПОДПИСКИ

-
-
- {feature.connected || feature.gatewayDirect ? 'Сейчас работает:' : 'Выбрано:'} - {currentLabel} -
{statusSlot} - {feature.adding && feature.profiles.length > 0 && }
{feature.profiles.map((profile) => )}
- + {feature.adding && feature.profiles.length > 0 + ? + : }
; diff --git a/src/web/styles/features/subscription.css b/src/web/styles/features/subscription.css index 5919ac1..a597f00 100644 --- a/src/web/styles/features/subscription.css +++ b/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; } diff --git a/test/web/style-boundaries.test.js b/test/web/style-boundaries.test.js index 5003df3..c68cb2e 100644 --- a/test/web/style-boundaries.test.js +++ b/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'); }); diff --git a/test/web/subscription-feature-contract.test.js b/test/web/subscription-feature-contract.test.js index c2e6d29..5216897 100644 --- a/test/web/subscription-feature-contract.test.js +++ b/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 &&
[\s\S]*InlineError[\s\S]*renderServerPicker=[\s\S]* { 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 &&