(feat): big methanium/ui migration

(feat): update message state icons
(qol): update todo
(qol): formatted

packages/onboarding/src/index.tsx

@@ -36,6 +36,9 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
   const [showLoading, setShowLoading] = useState(false);
   const [error, setError] = useState("");
   const [errorDescription, setErrorDescription] = useState("");
+  const [onboardingThemeId, setOnboardingThemeId] = useState<string | null>(
+    null,
+  );
 
   useEffect(() => {
     let active = true;
@@ -63,13 +66,19 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
           return;
         }
 
-        const [localDocs, acceptedPP, acceptedTOS, onboardingDone] =
-          await Promise.all([
-            load("legal_docs"),
-            load("accepted_privacy_policy"),
-            load("accepted_terms_of_service"),
-            load("onboarding_done"),
-          ]);
+        const [
+          localDocs,
+          acceptedPP,
+          acceptedTOS,
+          onboardingDone,
+          onboardingStarted,
+        ] = await Promise.all([
+          load("legal_docs"),
+          load("accepted_privacy_policy"),
+          load("accepted_terms_of_service"),
+          load("onboarding_done"),
+          load("onboarding_started"),
+        ]);
 
         if (!active) return;
 
@@ -78,11 +87,15 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
         const currentAcceptedTOS =
           acceptedTOS && localDocs.tos.hash === parsed.data.tos.hash;
         const existingUser = acceptedPP && acceptedTOS;
-        const includeOnboarding = !onboardingDone && !existingUser;
+        const includeOnboarding =
+          !onboardingDone && (!existingUser || onboardingStarted);
 
-        if (!onboardingDone && existingUser) {
+        if (!onboardingDone && existingUser && !onboardingStarted) {
           await save("onboarding_done", true);
           if (!active) return;
+        } else if (includeOnboarding && !onboardingStarted) {
+          await save("onboarding_started", true);
+          if (!active) return;
         }
 
         setState({
@@ -124,7 +137,10 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
 
   const finish = useCallback(async () => {
     if (state?.includeOnboarding) {
-      await save("onboarding_done", true);
+      await Promise.all([
+        save("onboarding_done", true),
+        save("onboarding_started", false),
+      ]);
     }
     setComplete(true);
   }, [save, state?.includeOnboarding]);
@@ -142,6 +158,8 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
   if (state.includeLegal) {
     steps.push({
       id: "legal",
+      title: "Privacy Policy & ToS",
+      description: `${state.docs.pp.version} / ${state.docs.tos.version}`,
       defaultCanContinue: false,
       content: (
         <LegalPage
@@ -154,7 +172,7 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
     });
   }
   if (state.includeOnboarding) {
-    steps.push(...onboardingSteps);
+    steps.push(...onboardingSteps(onboardingThemeId, setOnboardingThemeId));
   }
 
   if (complete || steps.length === 0) return <>{children}</>;

packages/onboarding/src/pages/legal.tsx

@@ -32,16 +32,7 @@ export default function LegalPage({
   });
 
   return (
-    <div className="mx-auto flex h-full w-full max-w-5xl flex-col gap-10 p-10 py-20 md:p-24">
-      <div>
-        <h1 className="text-3xl font-bold md:text-4xl" tabIndex={-1}>
-          Privacy Policy &amp; ToS
-        </h1>
-        <p className="pt-3 text-xl text-muted-foreground">
-          {docs.pp.version} / {docs.tos.version}
-        </p>
-      </div>
-
+    <div className="mx-auto flex min-h-[calc(100dvh-17rem)] w-full max-w-5xl flex-col gap-10 p-10 py-20 md:min-h-[calc(100dvh-20.5rem)] md:p-24">
       <div className="flex flex-1 items-center justify-center">
         <div className="flex flex-col items-start gap-2">
           <BigCheckbox

packages/onboarding/src/pages/onboarding.tsx

@@ -1,9 +0,0 @@
-export default function OnboardingPage() {
-  return (
-    <div className="flex h-full items-center justify-center p-8">
-      <h1 className="text-3xl font-bold" tabIndex={-1}>
-        Onboarding
-      </h1>
-    </div>
-  );
-}

packages/onboarding/src/steps.tsx

@@ -1,10 +1,15 @@
-import type { OnboardingStep } from "@methanium/ui";
-import OnboardingPage from "./pages/onboarding";
+import { ThemeOnboardingPage, type OnboardingStep } from "@methanium/ui";
 
-// Add future onboarding pages here. Completed users skip this entire manifest.
-export const onboardingSteps: OnboardingStep[] = [
+export const onboardingSteps = (
+  themeId: string | null,
+  setThemeId: (id: string) => void,
+): OnboardingStep[] => [
   {
-    id: "onboarding",
-    content: <OnboardingPage />,
+    id: "theme",
+    title: "Theming",
+    description:
+      "Pick a main theme and after that ... let's just hope you don't get into decision paralysis",
+    defaultCanContinue: false,
+    content: <ThemeOnboardingPage value={themeId} onValueChange={setThemeId} />,
   },
 ];