Refine subscription profile layout and focus handling

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