From 67901f25329865f16057c6aa1a1ea372056e92e9 Mon Sep 17 00:00:00 2001
From: Dhravya Shah <dhravyashah@gmail.com>
Date: Sun, 21 Jul 2024 10:39:34 -0500
Subject: [PATCH] launch fixes: fix onboarding and no dead buttons

---
 apps/web/app/(auth)/onboarding/page.tsx |   9 +-
 apps/web/app/(dash)/menu.tsx            | 298 ++++++++++++------------
 2 files changed, 157 insertions(+), 150 deletions(-)

diff --git a/apps/web/app/(auth)/onboarding/page.tsx b/apps/web/app/(auth)/onboarding/page.tsx
index 1912a8e8..c402c560 100644
--- a/apps/web/app/(auth)/onboarding/page.tsx
+++ b/apps/web/app/(auth)/onboarding/page.tsx
@@ -9,7 +9,7 @@ import {
 } from "@heroicons/react/24/solid";
 import { CheckIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createMemory } from "@repo/web/app/actions/doers";
 import { useRouter } from "next/navigation";
@@ -20,6 +20,13 @@ import gradientStyle from "../signin/_components/TextGradient/gradient.module.cs
 
 export default function Home() {
 	const [currStep, setCurrStep] = useState(0);
+	const { push } = useRouter();
+
+	useEffect(() => {
+		if (currStep > 3) {
+			push("/home?q=what%20is%20supermemory");
+		}
+	}, [currStep]);
 
 	return (
 		<main className="min-h-screen text-sm text-[#B8C4C6] font-geistSans">
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 0b487e61..e5501958 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -1,176 +1,176 @@
-import React from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { MemoriesIcon, CanvasIcon, AddIcon } from '@repo/ui/icons';
-import { DialogTrigger } from '@repo/ui/shadcn/dialog';
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { MemoriesIcon, CanvasIcon, AddIcon } from "@repo/ui/icons";
+import { DialogTrigger } from "@repo/ui/shadcn/dialog";
 
-import { HomeIcon } from '@heroicons/react/24/solid';
+import { HomeIcon } from "@heroicons/react/24/solid";
 import {
-  PencilSquareIcon,
-  PlusIcon,
-  PresentationChartLineIcon,
-  RectangleStackIcon,
-} from '@heroicons/react/24/solid';
+	PencilSquareIcon,
+	PlusIcon,
+	PresentationChartLineIcon,
+	RectangleStackIcon,
+} from "@heroicons/react/24/solid";
 import DialogTriggerWrapper, {
-  DialogDesktopTrigger,
-  DialogMobileTrigger,
-} from './dialogTriggerWrapper';
+	DialogDesktopTrigger,
+	DialogMobileTrigger,
+} from "./dialogTriggerWrapper";
 
 const menuItems = [
-  {
-    icon: MemoriesIcon,
-    text: 'Memories',
-    url: '/memories',
-    disabled: false,
-  },
-  {
-    icon: CanvasIcon,
-    text: 'Canvas',
-    url: '/canvas',
-    disabled: true,
-  },
+	{
+		icon: MemoriesIcon,
+		text: "Memories",
+		url: "/memories",
+		disabled: false,
+	},
+	{
+		icon: CanvasIcon,
+		text: "Canvas",
+		url: "/canvas",
+		disabled: true,
+	},
 ];
 
 const items = [
-  {
-    icon: <HomeIcon className="h-6 w-6" />,
-    name: 'home',
-    url: '/home',
-    disabled: false,
-  },
-  {
-    icon: <RectangleStackIcon className="h-6 w-6" />,
-    name: 'memories',
-    url: '/memories',
-    disabled: false,
-  },
-  {
-    icon: <PencilSquareIcon className="h-6 w-6" />,
-    name: 'editor',
-    url: '/#',
-    disabled: true,
-  },
-  {
-    icon: <PresentationChartLineIcon className="h-6 w-6" />,
-    name: 'thinkpad',
-    url: '/#',
-    disabled: true,
-  },
+	{
+		icon: <HomeIcon className="h-6 w-6" />,
+		name: "home",
+		url: "/home",
+		disabled: false,
+	},
+	{
+		icon: <RectangleStackIcon className="h-6 w-6" />,
+		name: "memories",
+		url: "/memories",
+		disabled: false,
+	},
+	// {
+	//   icon: <PencilSquareIcon className="h-6 w-6" />,
+	//   name: 'editor',
+	//   url: '/#',
+	//   disabled: true,
+	// },
+	// {
+	//   icon: <PresentationChartLineIcon className="h-6 w-6" />,
+	//   name: 'thinkpad',
+	//   url: '/#',
+	//   disabled: true,
+	// },
 ];
 
 function Menu() {
-  return (
-    <>
-      {/* Desktop Menu */}
-      <div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
-        <div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
-        <div className="pointer-events-auto flex flex-col gap-2">
-          <DialogDesktopTrigger />
-          <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
-            {items.map((v) => (
-              <NavItem {...v} />
-            ))}
-          </div>
-        </div>
-      </div>
+	return (
+		<>
+			{/* Desktop Menu */}
+			<div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
+				<div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
+				<div className="pointer-events-auto flex flex-col gap-2">
+					<DialogDesktopTrigger />
+					<div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
+						{items.map((v) => (
+							<NavItem {...v} />
+						))}
+					</div>
+				</div>
+			</div>
 
-      {/* Mobile Menu */}
-      <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
-        <div className="flex justify-around items-center">
-          <Link
-            href={'/'}
-            className={`flex flex-col items-center text-white ${'cursor-pointer'}`}
-          >
-            <HomeIcon width={24} height={24} />
-            <p className="text-xs text-foreground-menu mt-2">Home</p>
-          </Link>
+			{/* Mobile Menu */}
+			<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
+				<div className="flex justify-around items-center">
+					<Link
+						href={"/"}
+						className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
+					>
+						<HomeIcon width={24} height={24} />
+						<p className="text-xs text-foreground-menu mt-2">Home</p>
+					</Link>
 
-          <DialogMobileTrigger />
-          {menuItems.map((item) => (
-            <Link
-              aria-disabled={item.disabled}
-              href={item.disabled ? '#' : item.url}
-              key={item.url}
-              className={`flex flex-col items-center ${
-                item.disabled
-                  ? 'opacity-50 pointer-events-none'
-                  : 'cursor-pointer'
-              }`}
-            >
-              <Image
-                src={item.icon}
-                alt={`${item.text} icon`}
-                width={24}
-                height={24}
-              />
-              <p className="text-xs text-foreground-menu mt-2">{item.text}</p>
-            </Link>
-          ))}
-        </div>
-      </div>
-    </>
-  );
+					<DialogMobileTrigger />
+					{menuItems.map((item) => (
+						<Link
+							aria-disabled={item.disabled}
+							href={item.disabled ? "#" : item.url}
+							key={item.url}
+							className={`flex flex-col items-center ${
+								item.disabled
+									? "opacity-50 pointer-events-none"
+									: "cursor-pointer"
+							}`}
+						>
+							<Image
+								src={item.icon}
+								alt={`${item.text} icon`}
+								width={24}
+								height={24}
+							/>
+							<p className="text-xs text-foreground-menu mt-2">{item.text}</p>
+						</Link>
+					))}
+				</div>
+			</div>
+		</>
+	);
 }
 
 export function Navbar() {
-  return (
-    <div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
-      <div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
-      <div className="pointer-events-auto">
-        <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-2 border-border px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
-          <Top />
-          {items.map((v) => (
-            <NavItem {...v} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
+			<div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
+			<div className="pointer-events-auto">
+				<div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-2 border-border px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
+					<Top />
+					{items.map((v) => (
+						<NavItem {...v} />
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }
 
 function Top() {
-  return (
-    <DialogTriggerWrapper>
-      <DialogTrigger>
-        <div className="space-y-4 group relative">
-          <div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
-            <PlusIcon className="h-6 w-6" />
-          </div>
-          <div className="h-[1px] w-full bg-[#323b41]"></div>
-          <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all  absolute whitespace-nowrap -top-1  -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-2xl px-2 py-1">
-            Add Memories
-          </div>
-        </div>
-      </DialogTrigger>
-    </DialogTriggerWrapper>
-  );
+	return (
+		<DialogTriggerWrapper>
+			<DialogTrigger>
+				<div className="space-y-4 group relative">
+					<div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
+						<PlusIcon className="h-6 w-6" />
+					</div>
+					<div className="h-[1px] w-full bg-[#323b41]"></div>
+					<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all  absolute whitespace-nowrap -top-1  -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-2xl px-2 py-1">
+						Add Memories
+					</div>
+				</div>
+			</DialogTrigger>
+		</DialogTriggerWrapper>
+	);
 }
 
 function NavItem({
-  disabled,
-  icon,
-  url,
-  name,
+	disabled,
+	icon,
+	url,
+	name,
 }: {
-  disabled: boolean;
-  icon: React.JSX.Element;
-  name: string;
-  url: string;
+	disabled: boolean;
+	icon: React.JSX.Element;
+	name: string;
+	url: string;
 }) {
-  return (
-    <div className="relative group">
-      <Link aria-disabled={disabled} href={disabled ? '#' : url}>
-        <div
-          className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && 'opacity-50'}`}
-        >
-          {icon}
-        </div>
-      </Link>
-      <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all   absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
-        {name}
-      </div>
-    </div>
-  );
+	return (
+		<div className="relative group">
+			<Link aria-disabled={disabled} href={disabled ? "#" : url}>
+				<div
+					className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && "opacity-50"}`}
+				>
+					{icon}
+				</div>
+			</Link>
+			<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all   absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
+				{name}
+			</div>
+		</div>
+	);
 }
 
 export default Menu;