Refine Harbor delete flow and gateway affordances

2026-07-11 15:46:15 +03:00
parent b389664824
commit befd41933d
3 changed files with 185 additions and 21 deletions
--- a/src/web/App.jsx
+++ b/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('');
--- a/src/web/components/ClientOverviewPage.jsx
+++ b/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">
+        <span className="harbor-mode-stack" aria-hidden="true">
          <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>
@@ -749,6 +776,7 @@ export function ClientOverviewPage({
          </section>
          )}
          </div>
+        </div>
      </main>

      {hasSubscription && subscriptionContentReady && <aside
--- a/src/web/styles.css
+++ b/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%;
-  width: 116px;
+  left: 0;
+  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;