Refine Harbor delete flow and gateway affordances

src/web/App.jsx

@@ -71,7 +71,6 @@ function App() {
   }
 
   async function forgetSubscription() {
-    if (!confirm('Удалить подписку и остановить VPN?')) return;
     return run(async () => {
       await api.subscription.forget();
       setSubscriptionUrl('');

src/web/components/ClientOverviewPage.jsx

@@ -89,14 +89,22 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
     </svg>
     <span className="harbor-brand-name">
       <strong>Harbor</strong>
-      {switchable ? <span className="harbor-mode-stack" aria-hidden="true">
+      {switchable ? <span className="harbor-mode-control">
-        <em className="harbor-mode-connect">Connect</em>
+        <span className="harbor-mode-stack" aria-hidden="true">
-        <em className="harbor-mode-gateway">Gateway</em>
+          <em className="harbor-mode-connect">Connect</em>
+          <em className="harbor-mode-gateway">Gateway</em>
+        </span>
+        <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
+          <path d="M3 6h10m-3-3 3 3-3 3M15 12H5m3 3-3-3 3-3" />
+        </svg>
+        <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
+          <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>
+          <span>{gatewayDirect
+            ? 'Трафик идёт через Gateway в этой сети. Нажмите, чтобы использовать локальный VPN.'
+            : 'Сейчас используется локальный VPN. Нажмите, чтобы направить трафик через Gateway.'}</span>
+        </span>
       </span> : <em>{product}</em>}
     </span>
-    {switchable && <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
-      <path d="M3 6h10m-3-3 3 3-3 3M15 12H5m3 3-3-3 3-3" />
-    </svg>}
   </div>;
 
   return (
@@ -111,12 +119,6 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
         onClick={() => onSetGatewayAuto(!gatewayDirect)}
       >
         {content}
-        <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
-          <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>
-          <span>{gatewayDirect
-            ? 'Трафик идёт через Gateway в этой сети. Нажмите, чтобы использовать локальный VPN.'
-            : 'Сейчас используется локальный VPN. Нажмите, чтобы направить трафик через Gateway.'}</span>
-        </span>
       </button> : <div aria-label={`Harbor ${product}`}>{content}</div>}
     </div>
   );
@@ -161,6 +163,7 @@ export function ClientOverviewPage({
   const [serverRevealVersion, setServerRevealVersion] = useState(0);
   const [serversLeaving, setServersLeaving] = useState(false);
   const [instructionsOpen, setInstructionsOpen] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [openInstructionId, setOpenInstructionId] = useState('');
   const subscriptionInputRef = useRef(null);
   const subscriptionRef = useRef(null);
@@ -401,6 +404,11 @@ export function ClientOverviewPage({
     }
   }
 
+  async function forgetSubscription() {
+    await onForgetSubscription();
+    setConfirmingDelete(false);
+  }
+
   function toggleInstruction(id) {
     const update = () => flushSync(() => {
       setOpenInstructionId((current) => current === id ? '' : id);
@@ -583,10 +591,28 @@ export function ClientOverviewPage({
         {error && <p className="client-error" role="alert">{error}</p>}
 
         <div
-          className={`client-form${subscriptionWaiting ? ' is-waiting' : ''}`}
+          className={`client-form${subscriptionWaiting ? ' is-waiting' : ''}${confirmingDelete ? ' is-confirming-delete' : ''}`}
           aria-hidden={subscriptionWaiting}
-          inert={subscriptionWaiting ? true : undefined}
+          aria-disabled={gatewayDirect}
+          inert={subscriptionWaiting || gatewayDirect ? true : undefined}
         >
+          {confirmingDelete && <section
+            className="client-delete-confirmation"
+            role="group"
+            aria-labelledby="delete-subscription-title"
+            aria-describedby="delete-subscription-description"
+          >
+            <span>Необратимое действие</span>
+            <h2 id="delete-subscription-title">Удалить подписку?</h2>
+            <p id="delete-subscription-description">
+              Harbor остановит VPN и удалит сохранённую подписку. Приложения, настроенные на локальный прокси, не смогут выходить в сеть до добавления новой подписки.
+            </p>
+            <div className="client-delete-actions">
+              <button type="button" disabled={busy} onClick={() => setConfirmingDelete(false)}>Отмена</button>
+              <button className="is-danger" type="button" disabled={busy} onClick={forgetSubscription}>Удалить</button>
+            </div>
+          </section>}
+          <div className="client-form-content" inert={confirmingDelete ? true : undefined}>
           <div
             ref={subscriptionRef}
             className={`client-subscription ${editingSubscription ? 'is-editing' : ''}${editingSubscription && state?.hasSubscription && !subscriptionUrl ? ' is-timing-out' : ''}`}
@@ -616,10 +642,11 @@ export function ClientOverviewPage({
                   aria-label="Удалить подписку"
                   title="Удалить подписку"
                   disabled={busy}
-                  onClick={onForgetSubscription}
+                  onClick={() => setConfirmingDelete(true)}
                 >
                   <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M4 7h16M9 7V4h6v3m-9 0 1 13h10l1-13M10 11v5M14 11v5" />
+                    <path className="client-trash-lid" d="M4 7h16M9 7V4h6v3" />
+                    <path d="m6 7 1 13h10l1-13M10 11v5M14 11v5" />
                   </svg>
                 </button>
               </div>
@@ -748,6 +775,7 @@ export function ClientOverviewPage({
             </div>
           </section>
           )}
+          </div>
         </div>
       </main>
 

src/web/styles.css

@@ -200,6 +200,7 @@ p {
   color: var(--harbor-gateway);
 }
 
+.harbor-mode-control,
 .harbor-mode-stack {
   position: relative;
   display: inline-block;
@@ -207,6 +208,11 @@ p {
   height: 1.25em;
 }
 
+.harbor-mode-stack {
+  width: 100%;
+  height: 100%;
+}
+
 .harbor-mode-stack em {
   position: absolute;
   inset: 0 auto auto 0;
@@ -240,6 +246,26 @@ p {
   transform: none;
 }
 
+.harbor-brand-control:hover .harbor-mode-connect,
+.harbor-brand-control:focus-visible .harbor-mode-connect {
+  transform: translateY(-0.14em);
+}
+
+.harbor-brand-control:hover .harbor-mode-gateway,
+.harbor-brand-control:focus-visible .harbor-mode-gateway {
+  transform: translate(0.42em, 0.5em) scale(0.96);
+}
+
+.harbor-brand.is-gateway-active .harbor-brand-control:hover .harbor-mode-connect,
+.harbor-brand.is-gateway-active .harbor-brand-control:focus-visible .harbor-mode-connect {
+  transform: translate(0.42em, 0.5em) scale(0.96);
+}
+
+.harbor-brand.is-gateway-active .harbor-brand-control:hover .harbor-mode-gateway,
+.harbor-brand.is-gateway-active .harbor-brand-control:focus-visible .harbor-mode-gateway {
+  transform: translateY(-0.14em);
+}
+
 .harbor-brand .harbor-mode-swap {
   position: absolute;
   top: 50%;
@@ -256,8 +282,8 @@ p {
 .harbor-mode-tooltip {
   position: absolute;
   bottom: calc(100% + 9px);
-  left: 50%;
+  left: 0;
-  width: 116px;
+  width: calc(100% + 22px);
   display: grid;
   gap: 2px;
   padding: 5px 6px;
@@ -274,7 +300,7 @@ p {
   visibility: hidden;
   filter: blur(2px);
   pointer-events: none;
-  transform: translate(-50%, 3px);
+  transform: translateY(3px);
   transition: opacity 240ms ease, filter 320ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms;
 }
 
@@ -288,7 +314,7 @@ p {
   opacity: 1;
   visibility: visible;
   filter: blur(0);
-  transform: translate(-50%, 0);
+  transform: translateY(0);
   transition-delay: 120ms, 120ms, 120ms, 0s;
 }
 
@@ -904,12 +930,105 @@ p {
   transition: left 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 850ms cubic-bezier(0.16, 1, 0.3, 1), width 850ms cubic-bezier(0.16, 1, 0.3, 1), opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.client-form-content {
+  display: grid;
+  gap: 36px;
+  opacity: 1;
+  filter: blur(0);
+  transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-form.is-confirming-delete .client-form-content {
+  opacity: 0;
+  filter: blur(8px);
+  pointer-events: none;
+}
+
+.client-delete-confirmation {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  align-content: center;
+  gap: 10px;
+  padding: 28px;
+  border-radius: 20px;
+  background: color-mix(in oklch, var(--client-panel) 88%, transparent);
+  box-shadow: 0 20px 54px oklch(0.08 0.015 145 / 0.12);
+  backdrop-filter: blur(16px);
+  animation: client-delete-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-delete-confirmation > span {
+  color: oklch(0.68 0.15 28);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.client-delete-confirmation h2 {
+  font-size: 18px;
+  letter-spacing: -0.04em;
+}
+
+.client-delete-confirmation p {
+  color: var(--client-muted);
+  font-size: 10px;
+  line-height: 1.65;
+}
+
+.client-delete-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.client-delete-actions button {
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 9px;
+  background: color-mix(in oklch, var(--client-control) 74%, transparent);
+  color: var(--client-text);
+  font-size: 10px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
+}
+
+.client-delete-actions button:hover:not(:disabled),
+.client-delete-actions button:focus-visible {
+  outline: none;
+  background: var(--client-control);
+  transform: translateY(-1px);
+}
+
+.client-delete-actions .is-danger {
+  color: oklch(0.68 0.15 28);
+}
+
+.client-delete-actions button:disabled {
+  opacity: 0.45;
+  cursor: wait;
+}
+
+@keyframes client-delete-reveal {
+  from { opacity: 0; filter: blur(8px); transform: scale(0.97); }
+  to { opacity: 1; filter: blur(0); transform: scale(1); }
+}
+
 .client-form.is-waiting {
   opacity: 0;
   filter: blur(10px);
   pointer-events: none;
 }
 
+.client-shell:has(.harbor-brand.is-gateway-active) .client-form:not(.is-waiting) {
+  opacity: 0.34;
+  filter: grayscale(1) saturate(0);
+}
+
 .client-subscription {
   position: relative;
   min-width: 0;
@@ -945,6 +1064,16 @@ p {
   stroke-linejoin: round;
 }
 
+.client-subscription-delete .client-trash-lid {
+  transform-origin: 12px 7px;
+  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-subscription-delete:hover:not(:disabled) .client-trash-lid,
+.client-subscription-delete:focus-visible .client-trash-lid {
+  transform: translateY(-2px) rotate(-10deg);
+}
+
 .client-subscription-refresh:hover:not(:disabled) {
   color: var(--client-accent);
   filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-accent) 55%, transparent));
@@ -1674,6 +1803,14 @@ p {
     transition: none;
   }
 
+  .client-form-content,
+  .client-delete-confirmation,
+  .client-delete-actions button,
+  .client-subscription-delete .client-trash-lid {
+    transition: none;
+    animation: none;
+  }
+
   .client-state-copy h2,
   .client-state-detail > * {
     animation: none;