Improve gateway traffic dashboard and connection branding

src/web/features/connection/ConnectionPanel.tsx

@@ -34,6 +34,7 @@ interface ConnectionPanelProps {
   proxyPort?: number;
   now: number;
   blocked: boolean;
+  brandSlot?: ReactNode;
   copyFeedback?: Partial<Record<CopyKind, CopyFeedback>>;
   routingSlot?: ReactNode;
   serverSlot?: ReactNode;
@@ -74,6 +75,7 @@ export function ConnectionPanel({
   proxyPort,
   now,
   blocked,
+  brandSlot,
   copyFeedback,
   routingSlot,
   serverSlot,
@@ -161,18 +163,19 @@ export function ConnectionPanel({
   </button>;
 
   return <>
-    {visible && <section className={`client-power-section${isGateway ? ' is-gateway' : ''}`} aria-labelledby="connection-title">
-      {isGateway ? <span
-        className="client-power-control client-tooltip-anchor"
+    {visible ? <section className={`client-power-section${isGateway ? ' is-gateway' : ''}`} aria-labelledby="connection-title">
+      <div
+        className={`client-power-control${isGateway ? ' client-tooltip-anchor' : ''}`}
         tabIndex={powerUnavailable ? 0 : undefined}
         aria-label={powerUnavailable ? 'VPN недоступен' : undefined}
         aria-describedby={powerUnavailable ? 'gateway-power-unavailable' : undefined}
       >
+        {brandSlot}
         {powerButton}
         {powerUnavailable && <span className="client-tooltip" id="gateway-power-unavailable" role="tooltip">
           Сначала добавьте подписку и выберите сервер
         </span>}
-      </span> : powerButton}
+      </div>
       <div className="client-state-detail">
         {connected ? (
           <button
@@ -266,7 +269,7 @@ export function ConnectionPanel({
         </div>
       </section>
       {statusSlot}
-    </section>}
+    </section> : brandSlot}
 
     <ConfirmationDialog
       open={confirmingStop}