Refine client overview proxy and subscription display

src/web/components/ClientOverviewPage.jsx

@@ -133,6 +133,30 @@ export function ClientOverviewPage({
               <p>{canStart ? 'Нажмите, чтобы подключиться' : 'Добавьте ссылку и выберите сервер'}</p>
             )}
           </div>
+
+          <section className="client-proxies" aria-label="Локальный прокси">
+            <span className="client-proxy-label">Адрес</span>
+            <strong className="client-proxy-address">
+              {proxyUrls.http.replace(/^https?:\/\//, '')}
+            </strong>
+            <div>
+              {[
+                ['socks5', 'SOCKS5'],
+                ['http', 'HTTP'],
+              ].map(([kind, label]) => (
+                <button
+                  className={copiedProxy === kind ? 'is-copied' : ''}
+                  type="button"
+                  key={kind}
+                  aria-label={`Скопировать ${label}: ${proxyUrls[kind]}`}
+                  onClick={() => copyProxy(kind)}
+                >
+                  <span>{label}</span>
+                  {copiedProxy === kind && <span className="client-copy-check">✓</span>}
+                </button>
+              ))}
+            </div>
+          </section>
         </section>
 
         <div className="client-form">
@@ -151,6 +175,7 @@ export function ClientOverviewPage({
 
             <form
               className="client-subscription-edit"
+              autoComplete="off"
               aria-hidden={!editingSubscription}
               inert={!editingSubscription ? true : undefined}
               onSubmit={submitSubscription}
@@ -160,10 +185,11 @@ export function ClientOverviewPage({
                 id="subscription-url"
                 type="url"
                 inputMode="url"
-                autoComplete="url"
+                autoComplete="off"
                 tabIndex={editingSubscription ? 0 : -1}
                 aria-label="Ссылка подписки"
                 placeholder="Вставьте ссылку подписки"
+                className={subscriptionUrl ? 'has-value' : ''}
                 value={subscriptionUrl}
                 onChange={(event) => setSubscriptionUrl(event.target.value)}
                 onKeyDown={(event) => {
@@ -173,6 +199,11 @@ export function ClientOverviewPage({
                   }
                 }}
               />
+              {subscriptionUrl && (
+                <span className="client-subscription-domain">
+                  {subscriptionDomain(subscriptionUrl)}
+                </span>
+              )}
               {subscriptionUrl.trim() && (
                 <button type="submit" aria-label="Сохранить подписку" disabled={busy}>✓</button>
               )}
@@ -210,27 +241,6 @@ export function ClientOverviewPage({
         </div>
       </main>
 
-      <section className="client-proxies" aria-label="Локальный прокси">
-        {[
-          ['socks5', 'SOCKS5'],
-          ['http', 'HTTP'],
-        ].map(([kind, label]) => (
-          <button
-            className={copiedProxy === kind ? 'is-copied' : ''}
-            type="button"
-            key={kind}
-            aria-label={`Скопировать ${label}: ${proxyUrls[kind]}`}
-            onClick={() => copyProxy(kind)}
-          >
-            <span>
-              {copiedProxy === kind
-                ? 'Скопировано ✓'
-                : copiedProxy === 'error' ? 'Ошибка копирования' : label}
-            </span>
-            <strong>{proxyUrls[kind]}</strong>
-          </button>
-        ))}
-      </section>
     </div>
   );
 }