aboutsummaryrefslogtreecommitdiff
path: root/apps/web/app/(dash)
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/app/(dash)')
-rw-r--r--apps/web/app/(dash)/chat/[chatid]/loading.tsx10
-rw-r--r--apps/web/app/(dash)/chat/[chatid]/page.tsx4
-rw-r--r--apps/web/app/(dash)/chat/chatWindow.tsx48
-rw-r--r--apps/web/app/(dash)/chat/route.ts5
-rw-r--r--apps/web/app/(dash)/dialogContentContainer.tsx2
-rw-r--r--apps/web/app/(dash)/header/autoBreadCrumbs.tsx4
-rw-r--r--apps/web/app/(dash)/header/header.tsx34
-rw-r--r--apps/web/app/(dash)/header/signOutButton.tsx22
-rw-r--r--apps/web/app/(dash)/home/history.tsx106
-rw-r--r--apps/web/app/(dash)/home/page.tsx61
-rw-r--r--apps/web/app/(dash)/home/queryinput.tsx60
-rw-r--r--apps/web/app/(dash)/layout.tsx8
-rw-r--r--apps/web/app/(dash)/menu.tsx521
13 files changed, 588 insertions, 297 deletions
diff --git a/apps/web/app/(dash)/chat/[chatid]/loading.tsx b/apps/web/app/(dash)/chat/[chatid]/loading.tsx
index d28961a6..422adb8e 100644
--- a/apps/web/app/(dash)/chat/[chatid]/loading.tsx
+++ b/apps/web/app/(dash)/chat/[chatid]/loading.tsx
@@ -7,9 +7,15 @@ async function Page({
}: {
searchParams: Record<string, string | string[] | undefined>;
}) {
- const q = (searchParams?.q as string) ?? "from_loading";
+ const q = (searchParams?.q as string) ?? "";
return (
- <ChatWindow q={q} spaces={[]} initialChat={undefined} threadId={"idk"} />
+ <ChatWindow
+ proMode={false}
+ q={q}
+ spaces={[]}
+ initialChat={undefined}
+ threadId={"idk"}
+ />
);
}
diff --git a/apps/web/app/(dash)/chat/[chatid]/page.tsx b/apps/web/app/(dash)/chat/[chatid]/page.tsx
index 87fd0b19..29ffb3d8 100644
--- a/apps/web/app/(dash)/chat/[chatid]/page.tsx
+++ b/apps/web/app/(dash)/chat/[chatid]/page.tsx
@@ -9,7 +9,8 @@ async function Page({
params: { chatid: string };
searchParams: Record<string, string | string[] | undefined>;
}) {
- const { firstTime, q, spaces } = chatSearchParamsCache.parse(searchParams);
+ const { firstTime, q, spaces, proMode } =
+ chatSearchParamsCache.parse(searchParams);
let chat: Awaited<ReturnType<typeof getFullChatThread>>;
@@ -31,6 +32,7 @@ async function Page({
spaces={spaces ?? []}
initialChat={chat.data.length > 0 ? chat.data : undefined}
threadId={params.chatid}
+ proMode={proMode}
/>
);
}
diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index 28b99c9d..ed65bf7a 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -35,14 +35,19 @@ function ChatWindow({
parts: [],
sources: [],
},
+ proModeProcessing: {
+ queries: [],
+ },
},
],
threadId,
+ proMode,
}: {
q: string;
spaces: { id: number; name: string }[];
initialChat?: ChatHistory[];
threadId: string;
+ proMode: boolean;
}) {
const [layout, setLayout] = useState<"chat" | "initial">("chat");
const [chatHistory, setChatHistory] = useState<ChatHistory[]>(initialChat);
@@ -63,13 +68,17 @@ function ChatWindow({
const router = useRouter();
- const getAnswer = async (query: string, spaces: string[]) => {
+ const getAnswer = async (
+ query: string,
+ spaces: string[],
+ proMode: boolean = false,
+ ) => {
if (query.trim() === "from_loading" || query.trim().length === 0) {
return;
}
const sourcesFetch = await fetch(
- `/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true&threadId=${threadId}`,
+ `/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true&threadId=${threadId}&proMode=${proMode}`,
{
method: "POST",
body: JSON.stringify({ chatHistory }),
@@ -91,6 +100,8 @@ function ChatWindow({
behavior: "smooth",
});
+ let proModeListedQueries: string[] = [];
+
const updateChatHistoryAndFetch = async () => {
// Step 1: Update chat history with the assistant's response
await new Promise((resolve) => {
@@ -123,6 +134,11 @@ function ChatWindow({
).length,
}));
+ lastAnswer.proModeProcessing.queries =
+ sourcesParsed.data.proModeListedQueries ?? [];
+
+ proModeListedQueries = lastAnswer.proModeProcessing.queries;
+
resolve(newChatHistory);
return newChatHistory;
});
@@ -130,7 +146,7 @@ function ChatWindow({
// Step 2: Fetch data from the API
const resp = await fetch(
- `/api/chat?q=${query}&spaces=${spaces}&threadId=${threadId}`,
+ `/api/chat?q=${(query += proModeListedQueries.join(" "))}&spaces=${spaces}&threadId=${threadId}`,
{
method: "POST",
body: JSON.stringify({ chatHistory, sources: sourcesParsed.data }),
@@ -181,6 +197,7 @@ function ChatWindow({
getAnswer(
q,
spaces.map((s) => `${s.id}`),
+ proMode,
);
}
} else {
@@ -224,6 +241,28 @@ function ChatWindow({
{chat.question}
</h2>
+ {chat.proModeProcessing?.queries?.length > 0 && (
+ <div className="flex flex-col mt-2">
+ <div className="text-foreground-menu py-2">
+ Pro Mode
+ </div>
+ <div className="text-base">
+ <div className="flex gap-2 text-base">
+ {chat.proModeProcessing.queries.map(
+ (query, idx) => (
+ <div
+ className="bg-secondary rounded-md p-2"
+ key={`promode-query-${idx}`}
+ >
+ {query}
+ </div>
+ ),
+ )}
+ </div>
+ </div>
+ </div>
+ )}
+
<div className="flex flex-col mt-2">
<div>
<div className="text-foreground-menu py-2">Answer</div>
@@ -407,6 +446,9 @@ function ChatWindow({
parts: [],
sources: [],
},
+ proModeProcessing: {
+ queries: [],
+ },
},
];
});
diff --git a/apps/web/app/(dash)/chat/route.ts b/apps/web/app/(dash)/chat/route.ts
new file mode 100644
index 00000000..94f250ff
--- /dev/null
+++ b/apps/web/app/(dash)/chat/route.ts
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export async function GET() {
+ return redirect("/home");
+}
diff --git a/apps/web/app/(dash)/dialogContentContainer.tsx b/apps/web/app/(dash)/dialogContentContainer.tsx
index aae71237..4e8d81ef 100644
--- a/apps/web/app/(dash)/dialogContentContainer.tsx
+++ b/apps/web/app/(dash)/dialogContentContainer.tsx
@@ -100,7 +100,7 @@ export function DialogContentContainer({
}, []);
return (
- <DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39] backdrop-blur-md">
+ <DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
<form
action={async (e: FormData) => {
const content = e.get("content")?.toString();
diff --git a/apps/web/app/(dash)/header/autoBreadCrumbs.tsx b/apps/web/app/(dash)/header/autoBreadCrumbs.tsx
index a823671c..671464ff 100644
--- a/apps/web/app/(dash)/header/autoBreadCrumbs.tsx
+++ b/apps/web/app/(dash)/header/autoBreadCrumbs.tsx
@@ -13,8 +13,6 @@ import React from "react";
function AutoBreadCrumbs() {
const pathname = usePathname();
- console.log(pathname.split("/").filter(Boolean));
-
return (
<Breadcrumb className="hidden md:block">
<BreadcrumbList>
@@ -31,7 +29,7 @@ function AutoBreadCrumbs() {
.filter(Boolean)
.map((path, idx, paths) => (
<>
- <BreadcrumbItem key={path}>
+ <BreadcrumbItem key={path + idx}>
<BreadcrumbLink href={`/${paths.slice(0, idx + 1).join("/")}`}>
{path.charAt(0).toUpperCase() + path.slice(1)}
</BreadcrumbLink>
diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx
index b9d400c9..eaade258 100644
--- a/apps/web/app/(dash)/header/header.tsx
+++ b/apps/web/app/(dash)/header/header.tsx
@@ -6,6 +6,14 @@ import Logo from "../../../public/logo.svg";
import { getChatHistory } from "../../actions/fetchers";
import NewChatButton from "./newChatButton";
import AutoBreadCrumbs from "./autoBreadCrumbs";
+import SignOutButton from "./signOutButton";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@repo/ui/shadcn/dropdown-menu";
+import { CaretDownIcon } from "@radix-ui/react-icons";
async function Header() {
const chatThreads = await getChatHistory();
@@ -32,26 +40,28 @@ async function Header() {
<div className="flex items-center gap-2">
<NewChatButton />
- <div className="relative group">
- <button className="flex duration-200 items-center text-[#7D8994] hover:bg-[#1F2429] text-[13px] gap-2 px-3 py-2 rounded-xl">
+ <DropdownMenu>
+ <DropdownMenuTrigger className="inline-flex flex-row flex-nowrap items-center text-muted-foreground hover:text-foreground">
History
- </button>
-
- <div className="absolute p-4 hidden group-hover:block right-0 w-full md:w-[400px] max-h-[70vh] overflow-auto">
- <div className="bg-[#1F2429] rounded-xl p-2 flex flex-col shadow-lg">
- {chatThreads.data.map((thread) => (
+ <CaretDownIcon />
+ </DropdownMenuTrigger>
+ <DropdownMenuContent className="p-4 w-full md:w-[400px] max-h-[70vh] overflow-auto border-none">
+ {chatThreads.data.map((thread) => (
+ <DropdownMenuItem asChild>
<Link
prefetch={false}
href={`/chat/${thread.id}`}
key={thread.id}
- className="p-2 rounded-md hover:bg-secondary"
+ className="p-2 rounded-md cursor-pointer focus:bg-secondary focus:text-current"
>
{thread.firstMessage}
</Link>
- ))}
- </div>
- </div>
- </div>
+ </DropdownMenuItem>
+ ))}
+ </DropdownMenuContent>
+ </DropdownMenu>
+
+ <SignOutButton />
</div>
</div>
</div>
diff --git a/apps/web/app/(dash)/header/signOutButton.tsx b/apps/web/app/(dash)/header/signOutButton.tsx
new file mode 100644
index 00000000..4c61c74d
--- /dev/null
+++ b/apps/web/app/(dash)/header/signOutButton.tsx
@@ -0,0 +1,22 @@
+import { signOut } from "@/server/auth";
+import { Button } from "@repo/ui/shadcn/button";
+
+export default function SignOutButton() {
+ return (
+ <form
+ action={async () => {
+ "use server";
+ await signOut();
+ }}
+ >
+ <Button
+ variant="ghost"
+ size="sm"
+ type="submit"
+ className="text-[#7D8994]"
+ >
+ Sign Out
+ </Button>
+ </form>
+ );
+}
diff --git a/apps/web/app/(dash)/home/history.tsx b/apps/web/app/(dash)/home/history.tsx
index 3d8d5a28..a4cd11d0 100644
--- a/apps/web/app/(dash)/home/history.tsx
+++ b/apps/web/app/(dash)/home/history.tsx
@@ -1,53 +1,65 @@
-import { getChatHistory } from '@repo/web/app/actions/fetchers';
-import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
-import { Skeleton } from '@repo/ui/shadcn/skeleton';
-import Link from 'next/link';
-import { memo, useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-import { chatThreads } from '@/server/db/schema';
+import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
+import { Skeleton } from "@repo/ui/shadcn/skeleton";
+import { memo, useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { getQuerySuggestions } from "@/app/actions/doers";
-const History = memo(() => {
- const [chatThreads_, setChatThreads] = useState<
- (typeof chatThreads.$inferSelect)[] | null
- >(null);
+const History = memo(({ setQuery }: { setQuery: (q: string) => void }) => {
+ const [suggestions, setSuggestions] = useState<string[] | null>(null);
- useEffect(() => {
- (async () => {
- const chatThreads = await getChatHistory();
- if (!chatThreads.success || !chatThreads.data) {
- console.error(chatThreads.error);
- return;
- }
- setChatThreads(chatThreads.data.reverse().slice(0, 3));
- })();
- }, []);
+ useEffect(() => {
+ (async () => {
+ const suggestions = await getQuerySuggestions();
+ if (!suggestions.success || !suggestions.data) {
+ console.error(suggestions.error);
+ setSuggestions([]);
+ return;
+ }
+ console.log(suggestions);
+ if (typeof suggestions.data === "string") {
+ const queries = suggestions.data.slice(1, -1).split(", ");
+ const parsedQueries = queries.map((query) =>
+ query.replace(/^'|'$/g, ""),
+ );
+ console.log(parsedQueries);
+ setSuggestions(parsedQueries);
+ return;
+ }
+ setSuggestions(suggestions.data.reverse().slice(0, 3));
+ })();
+ }, []);
- if (!chatThreads) {
- return (
- <>
- <Skeleton className="w-[80%] h-4 bg-[#3b444b] "></Skeleton>
- <Skeleton className="w-[40%] h-4 bg-[#3b444b] "></Skeleton>
- <Skeleton className="w-[60%] h-4 bg-[#3b444b] "></Skeleton>
- </>
- );
- }
-
- return (
- <ul className="text-base list-none space-y-3 text-[#b9b9b9] mt-8">
- {chatThreads_?.map((thread) => (
- <motion.li
- initial={{ opacity: 0, filter: 'blur(1px)' }}
- animate={{ opacity: 1, filter: 'blur(0px)' }}
- className="flex items-center gap-2 truncate"
- >
- <ArrowLongRightIcon className="h-5" />{' '}
- <Link prefetch={false} href={`/chat/${thread.id}`}>
- {thread.firstMessage}
- </Link>
- </motion.li>
- ))}
- </ul>
- );
+ return (
+ <ul className="text-base list-none space-y-3 text-[#b9b9b9] mt-8">
+ {!suggestions && (
+ <>
+ <Skeleton
+ key="loader-1"
+ className="w-[80%] h-4 bg-[#3b444b] "
+ ></Skeleton>
+ <Skeleton
+ key="loader-2"
+ className="w-[40%] h-4 bg-[#3b444b] "
+ ></Skeleton>
+ <Skeleton
+ key="loader-3"
+ className="w-[60%] h-4 bg-[#3b444b] "
+ ></Skeleton>
+ </>
+ )}
+ {suggestions?.map((suggestion) => (
+ <motion.li
+ initial={{ opacity: 0, filter: "blur(1px)" }}
+ animate={{ opacity: 1, filter: "blur(0px)" }}
+ className="flex items-center gap-2 truncate cursor-pointer"
+ key={suggestion}
+ onClick={() => setQuery(suggestion)}
+ >
+ <ArrowLongRightIcon className="h-5" /> {suggestion}
+ </motion.li>
+ ))}
+ </ul>
+ );
});
export default History;
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index cc1856b4..d192d07d 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -4,12 +4,15 @@ import React, { useEffect, useState } from "react";
import QueryInput from "./queryinput";
import { getSessionAuthToken, getSpaces } from "@/app/actions/fetchers";
import { redirect, useRouter } from "next/navigation";
-import { createChatThread, linkTelegramToUser } from "@/app/actions/doers";
+import {
+ createChatThread,
+ getQuerySuggestions,
+ linkTelegramToUser,
+} from "@/app/actions/doers";
import { toast } from "sonner";
import { motion } from "framer-motion";
-import { ChromeIcon, GithubIcon, TwitterIcon } from "lucide-react";
+import { ChromeIcon, GithubIcon, MailIcon, TwitterIcon } from "lucide-react";
import Link from "next/link";
-import { homeSearchParamsCache } from "@/lib/searchParams";
import History from "./history";
const slap = {
@@ -26,28 +29,14 @@ const slap = {
};
function Page({ searchParams }: { searchParams: Record<string, string> }) {
- // TODO: use this to show a welcome page/modal
- const firstTime = searchParams.firstTime === "true";
+ const telegramUser = searchParams.telegramUser;
+ const extensionInstalled = searchParams.extension;
+ const [query, setQuery] = useState(searchParams.q || "");
- const query = searchParams.q || "";
-
- if (firstTime) {
- redirect("/onboarding");
- }
-
- const [queryPresent, setQueryPresent] = useState<boolean>(false);
-
- const [telegramUser, setTelegramUser] = useState<string | undefined>(
- searchParams.telegramUser as string,
- );
- const [extensionInstalled, setExtensionInstalled] = useState<
- string | undefined
- >(searchParams.extension as string);
+ const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
const { push } = useRouter();
- const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
-
useEffect(() => {
if (telegramUser) {
const linkTelegram = async () => {
@@ -63,10 +52,6 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
linkTelegram();
}
- if (extensionInstalled) {
- toast.success("Extension installed successfully");
- }
-
getSpaces().then((res) => {
if (res.success && res.data) {
setSpaces(res.data);
@@ -77,21 +62,21 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
getSessionAuthToken().then((token) => {
if (typeof window === "undefined") return;
+ if (extensionInstalled) {
+ toast.success("Extension installed successfully");
+ }
window.postMessage({ token: token.data }, "*");
});
}, [telegramUser]);
return (
<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
- {/* all content goes here */}
- {/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
-
<motion.h1
{...{
...slap,
transition: { ...slap.transition, delay: 0.2 },
}}
- className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl"
+ className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl pb-2"
>
<span>Ask your</span>{" "}
<span className="inline-flex items-center gap-2 bg-gradient-to-r to-blue-300 from-zinc-300 text-transparent bg-clip-text">
@@ -99,17 +84,16 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
</span>
</motion.h1>
- <div className="w-full pb-20 mt-12">
+ <div className="w-full pb-20 mt-10">
<QueryInput
- initialQuery={query}
- setQueryPresent={setQueryPresent}
- handleSubmit={async (q, spaces) => {
+ query={query}
+ setQuery={setQuery}
+ handleSubmit={async (q, spaces, proMode) => {
if (q.length === 0) {
toast.error("Query is required");
return;
}
- console.log("creating thread");
const threadid = await createChatThread(q);
if (!threadid.success || !threadid.data) {
@@ -117,15 +101,14 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
return;
}
- console.log("pushing to chat");
push(
- `/chat/${threadid.data}?spaces=${JSON.stringify(spaces)}&q=${q}`,
+ `/chat/${threadid.data}?spaces=${JSON.stringify(spaces)}&q=${q}&proMode=${proMode}`,
);
}}
initialSpaces={spaces}
/>
- <History />
+ <History setQuery={setQuery} />
</div>
<div className="w-full fixed bottom-0 left-0 p-4">
@@ -140,12 +123,12 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
Install extension
</Link>
<Link
- href="https://github.com/supermemoryai/supermemory/issues/new"
+ href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
className="flex items-center gap-2 text-muted-foreground hover:text-grey-50 duration-300"
>
- <GithubIcon className="w-4 h-4" />
+ <MailIcon className="w-4 h-4" />
Bug report
</Link>
<Link
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index e49f06e0..82561438 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -1,26 +1,32 @@
"use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { FilterSpaces } from "./filterSpaces";
import { ArrowRightIcon } from "@repo/ui/icons";
import Image from "next/image";
+import { Switch } from "@repo/ui/shadcn/switch";
+import { Label } from "@repo/ui/shadcn/label";
function QueryInput({
- setQueryPresent,
- initialQuery,
initialSpaces,
handleSubmit,
+ query,
+ setQuery,
}: {
- setQueryPresent: (t: boolean) => void;
initialSpaces?: {
id: number;
name: string;
}[];
- initialQuery?: string;
mini?: boolean;
- handleSubmit: (q: string, spaces: { id: number; name: string }[]) => void;
+ handleSubmit: (
+ q: string,
+ spaces: { id: number; name: string }[],
+ proMode: boolean,
+ ) => void;
+ query: string;
+ setQuery: (q: string) => void;
}) {
- const [q, setQ] = useState(initialQuery || "");
+ const [proMode, setProMode] = useState(false);
const [selectedSpaces, setSelectedSpaces] = useState<
{ id: number; name: string }[]
@@ -34,11 +40,11 @@ function QueryInput({
{/* input and action button */}
<form
action={async () => {
- if (q.trim().length === 0) {
+ if (query.trim().length === 0) {
return;
}
- handleSubmit(q, selectedSpaces);
- setQ("");
+ handleSubmit(query, selectedSpaces, proMode);
+ setQuery("");
}}
>
<textarea
@@ -51,20 +57,15 @@ function QueryInput({
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
- if (q.trim().length === 0) {
+ if (query.trim().length === 0) {
return;
}
- handleSubmit(q, selectedSpaces);
- setQ("");
+ handleSubmit(query, selectedSpaces, proMode);
+ setQuery("");
}
}}
- onChange={(e) =>
- setQ((prev) => {
- setQueryPresent(!!e.target.value.length);
- return e.target.value;
- })
- }
- value={q}
+ onChange={(e) => setQuery(e.target.value)}
+ value={query}
/>
<div className="flex p-2 px-3 w-full items-center justify-between rounded-xl overflow-hidden">
<FilterSpaces
@@ -72,9 +73,22 @@ function QueryInput({
setSelectedSpaces={setSelectedSpaces}
initialSpaces={initialSpaces || []}
/>
- <button type="submit" className="rounded-lg bg-[#369DFD1A] p-3">
- <Image src={ArrowRightIcon} alt="Enter" />
- </button>
+ <div className="flex items-center gap-4">
+ <div className="flex items-center gap-2">
+ <Label htmlFor="pro-mode" className="text-sm text-[#9B9B9B]">
+ Pro mode
+ </Label>
+ <Switch
+ value={proMode ? "on" : "off"}
+ onCheckedChange={(v) => setProMode(v)}
+ id="pro-mode"
+ about="Pro mode"
+ />
+ </div>
+ <button type="submit" className="rounded-lg bg-[#369DFD1A] p-3">
+ <Image src={ArrowRightIcon} alt="Enter" />
+ </button>
+ </div>
</div>
</form>
</div>
diff --git a/apps/web/app/(dash)/layout.tsx b/apps/web/app/(dash)/layout.tsx
index b2b27a4f..c6174945 100644
--- a/apps/web/app/(dash)/layout.tsx
+++ b/apps/web/app/(dash)/layout.tsx
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
import { auth } from "../../server/auth";
import { Toaster } from "@repo/ui/shadcn/sonner";
import BackgroundPlus from "../(landing)/GridPatterns/PlusGrid";
+import { getUser } from "../actions/fetchers";
async function Layout({ children }: { children: React.ReactNode }) {
const info = await auth();
@@ -12,6 +13,13 @@ async function Layout({ children }: { children: React.ReactNode }) {
return redirect("/signin");
}
+ const user = await getUser();
+ const hasOnboarded = user.data?.hasOnboarded;
+
+ if (!hasOnboarded) {
+ redirect("/onboarding");
+ }
+
return (
<main className="h-screen flex flex-col">
<div className="fixed top-0 left-0 w-full z-40">
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 0b487e61..c56a3247 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -1,176 +1,365 @@
-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';
+"use client";
-import { HomeIcon } from '@heroicons/react/24/solid';
+import React, { useEffect, useMemo, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
import {
- PencilSquareIcon,
- PlusIcon,
- PresentationChartLineIcon,
- RectangleStackIcon,
-} from '@heroicons/react/24/solid';
-import DialogTriggerWrapper, {
- DialogDesktopTrigger,
- DialogMobileTrigger,
-} from './dialogTriggerWrapper';
-
-const menuItems = [
- {
- 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,
- },
-];
+ MemoriesIcon,
+ ExploreIcon,
+ CanvasIcon,
+ AddIcon,
+ HomeIcon as HomeIconWeb,
+} from "@repo/ui/icons";
+import { Button } from "@repo/ui/shadcn/button";
+import { MinusIcon, PlusCircleIcon } from "lucide-react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@repo/ui/shadcn/dialog";
+import { Label } from "@repo/ui/shadcn/label";
+import { Textarea } from "@repo/ui/shadcn/textarea";
+import { toast } from "sonner";
+import { getSpaces } from "../actions/fetchers";
+import { HomeIcon } from "@heroicons/react/24/solid";
+import { createMemory, createSpace } from "../actions/doers";
+import ComboboxWithCreate from "@repo/ui/shadcn/combobox";
+import { StoredSpace } from "@/server/db/schema";
+import useMeasure from "react-use-measure";
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>
-
- {/* 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>
- </>
- );
-}
+ const [spaces, setSpaces] = useState<StoredSpace[]>([]);
-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>
- );
-}
+ useEffect(() => {
+ (async () => {
+ let spaces = await getSpaces();
-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>
- );
-}
+ if (!spaces.success || !spaces.data) {
+ toast.warning("Unable to get spaces", {
+ richColors: true,
+ });
+ setSpaces([]);
+ return;
+ }
+ setSpaces(spaces.data);
+ })();
+ }, []);
+
+ const menuItems = [
+ {
+ icon: HomeIconWeb,
+ text: "Home",
+ url: "/home",
+ disabled: false,
+ },
+ {
+ icon: MemoriesIcon,
+ text: "Memories",
+ url: "/memories",
+ disabled: false,
+ },
+ ];
+
+ const [content, setContent] = useState("");
+ const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
+
+ const autoDetectedType = useMemo(() => {
+ if (content.length === 0) {
+ return "none";
+ }
+
+ if (
+ content.match(/https?:\/\/(x\.com|twitter\.com)\/[\w]+\/[\w]+\/[\d]+/)
+ ) {
+ return "tweet";
+ } else if (content.match(/https?:\/\/[\w\.]+/)) {
+ return "page";
+ } else if (content.match(/https?:\/\/www\.[\w\.]+/)) {
+ return "page";
+ } else {
+ return "note";
+ }
+ }, [content]);
+
+ const [dialogOpen, setDialogOpen] = useState(false);
+
+ const options = useMemo(
+ () =>
+ spaces.map((x) => ({
+ label: x.name,
+ value: x.id.toString(),
+ })),
+ [spaces],
+ );
+
+ const handleSubmit = async (content?: string, spaces?: number[]) => {
+ setDialogOpen(false);
+
+ toast.info("Creating memory...", {
+ icon: <PlusCircleIcon className="w-4 h-4 text-white animate-spin" />,
+ duration: 7500,
+ });
+
+ if (!content || content.length === 0) {
+ toast.error("Content is required");
+ return;
+ }
+
+ console.log(spaces);
+
+ const cont = await createMemory({
+ content: content,
+ spaces: spaces ?? undefined,
+ });
+
+ setContent("");
+ setSelectedSpaces([]);
+
+ if (cont.success) {
+ toast.success("Memory created", {
+ richColors: true,
+ });
+ } else {
+ toast.error(`Memory creation failed: ${cont.error}`);
+ }
+ };
+
+ return (
+ <>
+ {/* Desktop Menu */}
+ <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+ <div className="hidden lg:flex fixed h-screen pb-20 w-full p-4 items-center justify-start top-0 left-0 pointer-events-none z-[39]">
+ <div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] border-2 border-border bg-secondary px-3 py-4 duration-200 hover:w-40 z-[99999]">
+ <div className="border-b border-border pb-4 w-full">
+ <DialogTrigger
+ className={`flex w-full text-white brightness-75 hover:brightness-125 focus:brightness-125 cursor-pointer items-center gap-3 px-1 duration-200 justify-start`}
+ >
+ <Image
+ src={AddIcon}
+ alt="Logo"
+ width={24}
+ height={24}
+ className="hover:brightness-125 focus:brightness-125 duration-200 text-white"
+ />
+ <p className="opacity-0 duration-200 group-hover:opacity-100">
+ Add
+ </p>
+ </DialogTrigger>
+ </div>
+ {menuItems.map((item) => (
+ <Link
+ aria-disabled={item.disabled}
+ href={item.disabled ? "#" : item.url}
+ key={item.url}
+ className={`flex w-full ${
+ item.disabled
+ ? "cursor-not-allowed opacity-30"
+ : "text-white brightness-75 hover:brightness-125 cursor-pointer"
+ } items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-start`}
+ >
+ <Image
+ src={item.icon}
+ alt={`${item.text} icon`}
+ width={24}
+ height={24}
+ className="hover:brightness-125 duration-200"
+ />
+ <p className="opacity-0 duration-200 group-hover:opacity-100">
+ {item.text}
+ </p>
+ </Link>
+ ))}
+ </div>
+ </div>
+
+ <DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
+ <form
+ action={async (e: FormData) => {
+ const content = e.get("content")?.toString();
+
+ await handleSubmit(content, selectedSpaces);
+ }}
+ className="flex flex-col gap-4 "
+ >
+ <DialogHeader>
+ <DialogTitle>Add memory</DialogTitle>
+ <DialogDescription className="text-[#F2F3F5]">
+ A "Memory" is a bookmark, something you want to remember.
+ </DialogDescription>
+ </DialogHeader>
+
+ <div>
+ <Label htmlFor="name">Resource (URL or content)</Label>
+ <Textarea
+ className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
+ id="content"
+ name="content"
+ rows={8}
+ placeholder="Start typing a note or paste a URL here. I'll remember it."
+ value={content}
+ onChange={(e) => setContent(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmit(content, selectedSpaces);
+ }
+ }}
+ />
+ </div>
+
+ <div>
+ <Label className="space-y-1" htmlFor="space">
+ <h3 className="font-semibold text-lg tracking-tight">
+ Spaces (Optional)
+ </h3>
+ <p className="leading-normal text-[#F2F3F5] text-sm">
+ A space is a collection of memories. It's a way to organise
+ your memories.
+ </p>
+ </Label>
+
+ <ComboboxWithCreate
+ options={spaces.map((x) => ({
+ label: x.name,
+ value: x.id.toString(),
+ }))}
+ onSelect={(v) =>
+ setSelectedSpaces((prev) => {
+ if (v === "") {
+ return [];
+ }
+ return [...prev, parseInt(v)];
+ })
+ }
+ onSubmit={async (spaceName) => {
+ const space = options.find((x) => x.label === spaceName);
+ toast.info("Creating space...");
+
+ if (space) {
+ toast.error("A space with that name already exists.");
+ }
+
+ const creationTask = await createSpace(spaceName);
+ if (creationTask.success && creationTask.data) {
+ toast.success("Space created " + creationTask.data);
+ setSpaces((prev) => [
+ ...prev,
+ {
+ name: spaceName,
+ id: creationTask.data!,
+ createdAt: new Date(),
+ user: null,
+ numItems: 0,
+ },
+ ]);
+ setSelectedSpaces((prev) => [...prev, creationTask.data!]);
+ } else {
+ toast.error(
+ "Space creation failed: " + creationTask.error ??
+ "Unknown error",
+ );
+ }
+ }}
+ placeholder="Select or create a new space."
+ className="bg-[#2F353C] h-min rounded-md mt-4 mb-4"
+ />
+
+ <div>
+ {selectedSpaces.length > 0 && (
+ <div className="flex flex-row flex-wrap gap-0.5 h-min">
+ {[...new Set(selectedSpaces)].map((x, idx) => (
+ <button
+ key={x}
+ type="button"
+ onClick={() =>
+ setSelectedSpaces((prev) =>
+ prev.filter((y) => y !== x),
+ )
+ }
+ className={`relative group p-2 py-3 bg-[#3C464D] max-w-32 ${
+ idx === selectedSpaces.length - 1
+ ? "rounded-br-xl"
+ : ""
+ }`}
+ >
+ <p className="line-clamp-1">
+ {spaces.find((y) => y.id === x)?.name}
+ </p>
+ <div className="absolute h-full right-0 top-0 p-1 opacity-0 group-hover:opacity-100 items-center">
+ <MinusIcon className="w-6 h-6 rounded-full bg-secondary" />
+ </div>
+ </button>
+ ))}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <DialogFooter>
+ <Button
+ disabled={autoDetectedType === "none"}
+ variant={"secondary"}
+ type="submit"
+ >
+ Save {autoDetectedType != "none" && autoDetectedType}
+ </Button>
+ </DialogFooter>
+ </form>
+ </DialogContent>
+
+ {/* 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>
-function NavItem({
- disabled,
- icon,
- url,
- name,
-}: {
- 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>
- );
+ <DialogTrigger
+ className={`flex flex-col items-center cursor-pointer text-white`}
+ >
+ <Image
+ src={AddIcon}
+ alt="Logo"
+ width={24}
+ height={24}
+ className="hover:brightness-125 focus:brightness-125 duration-200 stroke-white"
+ />
+ <p className="text-xs text-foreground-menu mt-2">Add</p>
+ </DialogTrigger>
+ {menuItems.slice(1, 2).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 cursor-not-allowed"
+ : "cursor-pointer"
+ }`}
+ onClick={(e) => item.disabled && e.preventDefault()}
+ >
+ <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>
+ </Dialog>
+ </>
+ );
}
export default Menu;
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 10:44:58 +0000