Polish sidebar update and relay cards

desktop/playwright.config.ts

@@ -60,6 +60,7 @@ export default defineConfig({
         "**/integration.spec.ts",
         "**/profile.spec.ts",
         "**/sidebar.spec.ts",
+        "**/sidebar-relay-card.spec.ts",
         "**/tokens.spec.ts",
         "**/persona-env-vars.spec.ts",
         "**/mesh-compute.spec.ts",

desktop/public/pow/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Emerge Tools, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

desktop/src/app/AppShell.tsx

@@ -81,7 +81,6 @@ import { chromeCssVarDefaults } from "@/shared/layout/chromeLayout";
 import { cn } from "@/shared/lib/cn";
 import { hasPrimaryShortcutModifier } from "@/shared/lib/platform";
 import { useMessageDeepLinks } from "@/shared/useMessageDeepLinks";
-import { ConnectionBanner } from "@/shared/ui/ConnectionBanner";
 import { SidebarInset, SidebarProvider } from "@/shared/ui/sidebar";
 
 const LazySettingsScreen = React.lazy(async () => {
@@ -879,7 +878,6 @@ export function AppShell() {
                           className="min-h-0 min-w-0 overflow-hidden"
                           style={chromeCssVarDefaults}
                         >
-                          <ConnectionBanner />
                           <Outlet />
                         </SidebarInset>
                       </MainInsetProvider>

desktop/src/features/onboarding/ui/OnboardingFlow.tsx

@@ -5,6 +5,7 @@ import {
   profileQueryKey,
   useUpdateProfileMutation,
 } from "@/features/profile/hooks";
+import { useWorkspaces } from "@/features/workspaces/useWorkspaces";
 import { relayClient } from "@/shared/api/relayClient";
 import { getMyRelayMembershipLookup } from "@/shared/api/relayMembers";
 import { getIdentity, importIdentity } from "@/shared/api/tauri";
@@ -146,6 +147,7 @@ export function OnboardingFlow({
   onBackToWorkspaceSetup,
 }: OnboardingFlowProps) {
   const { complete, skipForNow } = actions;
+  const { activeWorkspace } = useWorkspaces();
   const queryClient = useQueryClient();
   const savedProfile = resolveSavedProfile(initialProfile);
   const profileUpdateMutation = useUpdateProfileMutation();
@@ -486,6 +488,7 @@ export function OnboardingFlow({
               updateDisplayName: updateDisplayNameDraft,
             }}
             direction={transitionDirection}
+            relayUrl={activeWorkspace?.relayUrl}
             state={profileStepState}
           />
         ) : currentPage === "key-import" ? (

desktop/src/features/onboarding/ui/ProfileStep.tsx

@@ -1,6 +1,15 @@
 import * as React from "react";
+import { toast } from "sonner";
 
+import {
+  SidebarBlockAccessRefreshCompactCard,
+  SidebarBlockVpnOffCompactCard,
+  SidebarRelayConnectionCompactCard,
+} from "@/features/sidebar/ui/SidebarRelayConnectionCard";
+import { useReconnectRelay } from "@/shared/api/useReconnectRelay";
 import { cn } from "@/shared/lib/cn";
+import { resolveRelayConnectivityCardVariant } from "@/shared/lib/relayConnectivityCard";
+import { isRelayUnreachableError } from "@/shared/lib/relayError";
 import { Button } from "@/shared/ui/button";
 import { Spinner } from "@/shared/ui/spinner";
 import {
@@ -13,15 +22,206 @@ import type { ProfileStepActions, ProfileStepState } from "./types";
 type ProfileStepProps = {
   actions: ProfileStepActions;
   direction: OnboardingTransitionDirection;
+  relayUrl?: string | null;
   transitionEffect?: OnboardingTransitionEffect;
   state: ProfileStepState;
 };
 
-function ErrorBanner({ message }: { message: string | null }) {
+type OnboardingConnectivityAction =
+  | "connect-vpn"
+  | "reconnect-relay"
+  | "refresh-access";
+type OnboardingRelayCardVariant =
+  | "connect-vpn"
+  | "reconnect-relay"
+  | "refresh-access";
+
+const ONBOARDING_CONNECTIVITY_SUCCESS_AUTO_DISMISS_MS = 2_500;
+
+function resolveOnboardingRelayCardVariant(
+  errorMessage: string,
+  relayUrl: string | null | undefined,
+): OnboardingRelayCardVariant {
+  return resolveRelayConnectivityCardVariant(errorMessage, relayUrl);
+}
+
+function OnboardingRelayConnectionErrorCard({
+  isSaving,
+  message,
+  relayUrl,
+}: {
+  isSaving: boolean;
+  message: string;
+  relayUrl?: string | null;
+}) {
+  const { isPending: isReconnectPending, reconnect } = useReconnectRelay();
+  const [dismissedErrorMessage, setDismissedErrorMessage] = React.useState<
+    string | null
+  >(null);
+  const [connectivityAction, setConnectivityAction] =
+    React.useState<OnboardingConnectivityAction | null>(null);
+  const [successAction, setSuccessAction] =
+    React.useState<OnboardingConnectivityAction | null>(null);
+  const connectivityActionRef =
+    React.useRef<OnboardingConnectivityAction | null>(null);
+  const successTimeoutRef = React.useRef<number | null>(null);
+  const wasSavingRef = React.useRef(isSaving);
+  const cardVariant = resolveOnboardingRelayCardVariant(message, relayUrl);
+  const isActionPending = connectivityAction !== null || isReconnectPending;
+
+  React.useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current !== null) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (isSaving && !wasSavingRef.current) {
+      if (successTimeoutRef.current !== null) {
+        window.clearTimeout(successTimeoutRef.current);
+        successTimeoutRef.current = null;
+      }
+      setDismissedErrorMessage(null);
+      setSuccessAction(null);
+    }
+    wasSavingRef.current = isSaving;
+  }, [isSaving]);
+
+  const markSuccess = React.useCallback(
+    (action: OnboardingConnectivityAction) => {
+      setSuccessAction(action);
+      if (successTimeoutRef.current !== null) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+      successTimeoutRef.current = window.setTimeout(() => {
+        successTimeoutRef.current = null;
+        setDismissedErrorMessage(message);
+      }, ONBOARDING_CONNECTIVITY_SUCCESS_AUTO_DISMISS_MS);
+    },
+    [message],
+  );
+
+  const runConnectivityAction = React.useCallback(
+    (
+      action: OnboardingConnectivityAction,
+      runAction: () => Promise<boolean | undefined>,
+    ) => {
+      if (connectivityActionRef.current !== null) {
+        return;
+      }
+
+      connectivityActionRef.current = action;
+      setConnectivityAction(action);
+      setSuccessAction(null);
+      void Promise.resolve()
+        .then(runAction)
+        .then((didReconnect) => {
+          if (didReconnect !== false) {
+            markSuccess(action);
+          }
+        })
+        .catch((error) => {
+          const detail = error instanceof Error ? error.message : String(error);
+          const label =
+            action === "refresh-access"
+              ? "Could not refresh VPN access."
+              : action === "connect-vpn"
+                ? "Could not turn on VPN."
+                : "Could not reconnect to the relay.";
+          toast.error(`${label} ${detail}`);
+        })
+        .finally(() => {
+          connectivityActionRef.current = null;
+          setConnectivityAction(null);
+        });
+    },
+    [markSuccess],
+  );
+
+  const handleConnectWarpVpn = React.useCallback(() => {
+    runConnectivityAction("connect-vpn", reconnect);
+  }, [reconnect, runConnectivityAction]);
+
+  const handleReconnectRelay = React.useCallback(() => {
+    runConnectivityAction("reconnect-relay", reconnect);
+  }, [reconnect, runConnectivityAction]);
+
+  const handleRefreshWarpAccess = React.useCallback(() => {
+    runConnectivityAction("refresh-access", reconnect);
+  }, [reconnect, runConnectivityAction]);
+
+  if (dismissedErrorMessage === message) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 left-4 z-50 w-[calc(100vw-2rem)] text-left sm:bottom-6 sm:left-6 sm:w-[22rem]">
+      {cardVariant === "refresh-access" ? (
+        <SidebarBlockAccessRefreshCompactCard
+          actionTestId="onboarding-refresh-vpn-access"
+          isActionDisabled={isActionPending}
+          isActionPending={connectivityAction === "refresh-access"}
+          isActionSuccess={successAction === "refresh-access"}
+          onAction={handleRefreshWarpAccess}
+          onDismiss={() => setDismissedErrorMessage(message)}
+          surface="secondary"
+          testId="onboarding-vpn-access-refresh-card"
+        />
+      ) : cardVariant === "connect-vpn" ? (
+        <SidebarBlockVpnOffCompactCard
+          actionTestId="onboarding-connect-vpn"
+          isActionDisabled={isActionPending}
+          isActionPending={connectivityAction === "connect-vpn"}
+          isActionSuccess={successAction === "connect-vpn"}
+          onAction={handleConnectWarpVpn}
+          onDismiss={() => setDismissedErrorMessage(message)}
+          surface="secondary"
+          testId="onboarding-vpn-off-card"
+        />
+      ) : (
+        <SidebarRelayConnectionCompactCard
+          actionTestId="onboarding-reconnect-relay"
+          isActionDisabled={isActionPending}
+          isConnected={successAction === "reconnect-relay"}
+          isReconnectPending={
+            connectivityAction === "reconnect-relay" || isReconnectPending
+          }
+          onDismiss={() => setDismissedErrorMessage(message)}
+          onReconnect={handleReconnectRelay}
+          surface="secondary"
+          testId="onboarding-relay-reconnect-card"
+        />
+      )}
+    </div>
+  );
+}
+
+function ErrorBanner({
+  isSaving,
+  message,
+  relayUrl,
+}: {
+  isSaving: boolean;
+  message: string | null;
+  relayUrl?: string | null;
+}) {
   if (!message) {
     return null;
   }
 
+  if (isRelayUnreachableError(message)) {
+    return (
+      <OnboardingRelayConnectionErrorCard
+        isSaving={isSaving}
+        key={message}
+        message={message}
+        relayUrl={relayUrl}
+      />
+    );
+  }
+
   return (
     <p className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
       {message}
@@ -32,6 +232,7 @@ function ErrorBanner({ message }: { message: string | null }) {
 export function ProfileStep({
   actions,
   direction,
+  relayUrl,
   transitionEffect = "line-slide",
   state,
 }: ProfileStepProps) {
@@ -117,7 +318,11 @@ export function ProfileStep({
       </label>
 
       {saveRecovery.errorMessage ? (
-        <ErrorBanner message={saveRecovery.errorMessage} />
+        <ErrorBanner
+          isSaving={isSaving}
+          message={saveRecovery.errorMessage}
+          relayUrl={relayUrl}
+        />
       ) : null}
 
       <div className="mt-12 flex w-full max-w-[500px] flex-col gap-3">