simplify onboarding

Author: yujonglee

apps/desktop/src/components/onboarding/calendar.tsx

@@ -1,27 +1,23 @@
 import { Icon } from "@iconify-icon/react";
+import { platform } from "@tauri-apps/plugin-os";
 
-import {
-  Divider,
-  IntegrationRow,
-  OnboardingContainer,
-  type OnboardingNext,
-} from "./shared";
+import { useAuth } from "../../auth";
+import type { OnboardingStepId } from "./config";
+import { Divider, IntegrationRow, OnboardingContainer } from "./shared";
 
-type CalendarsProps = {
-  local: boolean;
-  onNext: OnboardingNext;
-  onBack?: () => void;
-};
+export function Calendars({
+  onNavigate,
+}: {
+  onNavigate: (step: OnboardingStepId | "done") => void;
+}) {
+  const auth = useAuth();
+  const currentPlatform = platform();
+  const isLoggedIn = !!auth?.session;
 
-export function Calendars({ local, onNext, onBack }: CalendarsProps) {
   return (
-    <OnboardingContainer
-      title="Connect your calendars to be reminded every time"
-      action={{ kind: "skip", onClick: () => onNext() }}
-      onBack={onBack}
-    >
+    <OnboardingContainer title="Connect your calendars to be reminded every time">
       <div className="flex flex-col gap-4">
-        {local ? (
+        {!isLoggedIn ? (
           <>
             <IntegrationRow
               icon={<Icon icon="logos:google-calendar" size={24} />}
@@ -57,6 +53,15 @@ export function Calendars({ local, onNext, onBack }: CalendarsProps) {
           </>
         )}
       </div>
+
+      <button
+        onClick={() =>
+          onNavigate(currentPlatform === "macos" ? "permissions" : "done")
+        }
+        className="mt-4 text-sm text-neutral-400 transition-colors hover:text-neutral-600"
+      >
+        skip
+      </button>
     </OnboardingContainer>
   );
 }

apps/desktop/src/components/onboarding/config.tsx

@@ -1,12 +1,8 @@
-import { useQuery } from "@tanstack/react-query";
-import { arch, platform, type Platform } from "@tauri-apps/plugin-os";
 import type { ComponentType } from "react";
 
-import { useAuth } from "../../auth";
 import { ConfigureNotice } from "./configure-notice";
 import { Login } from "./login";
 import { Permissions } from "./permissions";
-import type { OnboardingNext } from "./shared";
 import { Welcome } from "./welcome";
 
 export type OnboardingStepId =
@@ -15,78 +11,16 @@ export type OnboardingStepId =
   | "configure-notice"
   | "permissions";
 
-export type OnboardingContext = {
-  platform: Platform;
-  isAppleSilicon: boolean;
-  isLoggedIn: boolean;
-  local: boolean;
-  flags: {
-    calendarReady: boolean;
-  };
-};
-
-export type OnboardingStepConfig = {
+type StepConfig = {
   id: OnboardingStepId;
-  shouldShow: (ctx: OnboardingContext) => boolean;
-  component: ComponentType<{ onNext: OnboardingNext; onBack?: () => void }>;
+  component: ComponentType<{
+    onNavigate: (step: OnboardingStepId | "done") => void;
+  }>;
 };
 
-export function getPreviousStep(
-  ctx: OnboardingContext,
-  currentStep: OnboardingStepId,
-): OnboardingStepId | null {
-  const visibleSteps = STEP_CONFIGS.filter((s) => s.shouldShow(ctx));
-  const currentIndex = visibleSteps.findIndex((s) => s.id === currentStep);
-  return visibleSteps[currentIndex - 1]?.id ?? null;
-}
-
-export const STEP_CONFIGS: OnboardingStepConfig[] = [
-  {
-    id: "welcome",
-    shouldShow: () => true,
-    component: Welcome,
-  },
-  {
-    id: "login",
-    shouldShow: (ctx) => !ctx.local,
-    component: Login,
-  },
-  {
-    id: "configure-notice",
-    shouldShow: (ctx) => ctx.local,
-    component: ConfigureNotice,
-  },
-  {
-    id: "permissions",
-    shouldShow: (ctx) => ctx.platform === "macos",
-    component: Permissions,
-  },
+export const STEP_CONFIGS: StepConfig[] = [
+  { id: "welcome", component: Welcome },
+  { id: "login", component: Login },
+  { id: "configure-notice", component: ConfigureNotice },
+  { id: "permissions", component: Permissions },
 ];
-
-export function useOnboardingContext(
-  local?: boolean,
-): OnboardingContext | null {
-  const currentPlatform = platform();
-  const auth = useAuth();
-  const archQuery = useQuery({
-    queryKey: ["arch"],
-    queryFn: () => arch(),
-  });
-
-  if (archQuery.isPending) {
-    return null;
-  }
-
-  const isAppleSilicon =
-    currentPlatform === "macos" && archQuery.data === "aarch64";
-
-  return {
-    platform: currentPlatform,
-    isAppleSilicon,
-    isLoggedIn: auth?.session !== null,
-    local: local ?? false,
-    flags: {
-      calendarReady: false,
-    },
-  };
-}

apps/desktop/src/components/onboarding/configure-notice.tsx

@@ -1,15 +1,19 @@
-import { OnboardingContainer, type OnboardingNext } from "./shared";
+import { platform } from "@tauri-apps/plugin-os";
 
-type ConfigureNoticeProps = {
-  onNext: OnboardingNext;
-  onBack?: () => void;
-};
+import type { OnboardingStepId } from "./config";
+import { OnboardingContainer } from "./shared";
+
+export function ConfigureNotice({
+  onNavigate,
+}: {
+  onNavigate: (step: OnboardingStepId | "done") => void;
+}) {
+  const currentPlatform = platform();
 
-export function ConfigureNotice({ onNext, onBack }: ConfigureNoticeProps) {
   return (
     <OnboardingContainer
       title="AI models are needed for best experience"
-      onBack={onBack}
+      onBack={() => onNavigate("welcome")}
     >
       <div className="flex flex-col gap-4">
         <Requirement
@@ -25,7 +29,9 @@ export function ConfigureNotice({ onNext, onBack }: ConfigureNoticeProps) {
 
       <div className="flex flex-col gap-3 mt-4">
         <button
-          onClick={() => onNext()}
+          onClick={() =>
+            onNavigate(currentPlatform === "macos" ? "permissions" : "done")
+          }
           className="w-full py-3 rounded-full bg-gradient-to-t from-stone-600 to-stone-500 text-white text-sm font-medium duration-150 hover:scale-[1.01] active:scale-[0.99]"
         >
           I will configure it later
@@ -35,7 +41,7 @@ export function ConfigureNotice({ onNext, onBack }: ConfigureNoticeProps) {
   );
 }
 
-export function Requirement({
+function Requirement({
   title,
   description,
   required,

apps/desktop/src/components/onboarding/login.tsx

@@ -4,20 +4,22 @@ import { useCallback, useEffect, useState } from "react";
 import { getRpcCanStartTrial, postBillingStartTrial } from "@hypr/api-client";
 import { createClient, createConfig } from "@hypr/api-client/client";
 
+import { platform } from "@tauri-apps/plugin-os";
+
 import { useAuth } from "../../auth";
 import { getEntitlementsFromToken } from "../../billing";
 import { env } from "../../env";
 import * as settings from "../../store/tinybase/settings";
-import { Divider, OnboardingContainer, type OnboardingNext } from "./shared";
+import type { OnboardingStepId } from "./config";
+import { Divider, OnboardingContainer } from "./shared";
 
 export function Login({
-  onNext,
-  onBack,
+  onNavigate,
 }: {
-  onNext: OnboardingNext;
-  onBack?: () => void;
+  onNavigate: (step: OnboardingStepId | "done") => void;
 }) {
   const auth = useAuth();
+  const currentPlatform = platform();
   const [callbackUrl, setCallbackUrl] = useState("");
 
   const setLlmProvider = settings.UI.useSetValueCallback(
@@ -78,12 +80,14 @@ export function Login({
     onSuccess: (isPro) => {
       if (isPro) {
         setTrialDefaults();
+        onNavigate(currentPlatform === "macos" ? "permissions" : "done");
+      } else {
+        onNavigate("configure-notice");
       }
-      onNext({ local: !isPro });
     },
     onError: (e) => {
       console.error(e);
-      onNext({ local: true });
+      onNavigate("configure-notice");
     },
   });
 
@@ -103,7 +107,7 @@ export function Login({
     <OnboardingContainer
       title="Waiting for sign in..."
       description="Complete the process in your browser"
-      onBack={onBack}
+      onBack={() => onNavigate("welcome")}
     >
       <button
         onClick={() => auth?.signIn()}

apps/desktop/src/components/onboarding/machine.ts

@@ -2,24 +2,24 @@ import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react";
 
 import { cn } from "@hypr/utils";
 
+import { useAuth } from "../../auth";
 import { usePermissions } from "../../hooks/use-permissions";
-import { OnboardingContainer, type OnboardingNext } from "./shared";
-
-type PermissionBlockProps = {
-  name: string;
-  status: string | undefined;
-  description: { authorized: string; unauthorized: string };
-  isPending: boolean;
-  onAction: () => void;
-};
+import type { OnboardingStepId } from "./config";
+import { OnboardingContainer } from "./shared";
 
 function PermissionBlock({
   name,
   status,
   description,
   isPending,
   onAction,
-}: PermissionBlockProps) {
+}: {
+  name: string;
+  status: string | undefined;
+  description: { authorized: string; unauthorized: string };
+  isPending: boolean;
+  onAction: () => void;
+}) {
   const isAuthorized = status === "authorized";
 
   return (
@@ -71,12 +71,12 @@ function PermissionBlock({
   );
 }
 
-type PermissionsProps = {
-  onNext: OnboardingNext;
-  onBack?: () => void;
-};
-
-export function Permissions({ onNext, onBack }: PermissionsProps) {
+export function Permissions({
+  onNavigate,
+}: {
+  onNavigate: (step: OnboardingStepId | "done") => void;
+}) {
+  const auth = useAuth();
   const {
     micPermissionStatus,
     systemAudioPermissionStatus,
@@ -94,10 +94,12 @@ export function Permissions({ onNext, onBack }: PermissionsProps) {
     systemAudioPermissionStatus.data === "authorized" &&
     accessibilityPermissionStatus.data === "authorized";
 
+  const backStep = auth?.session ? "welcome" : "configure-notice";
+
   return (
     <OnboardingContainer
       title="Permissions needed for best experience"
-      onBack={onBack}
+      onBack={() => onNavigate(backStep)}
     >
       <div className="flex flex-col gap-4">
         <PermissionBlock
@@ -135,7 +137,7 @@ export function Permissions({ onNext, onBack }: PermissionsProps) {
       </div>
 
       <button
-        onClick={() => onNext()}
+        onClick={() => onNavigate("done")}
         disabled={!allPermissionsGranted}
         className={cn([
           "w-full py-3 rounded-full text-sm font-medium duration-150",