Skip to content

Commit cf06a00

Browse files
ankitmukhiaankitmukhia
committed
feat(ui): revamp entire UI
1 parent 9ab147a commit cf06a00

File tree

16 files changed

+937
-657
lines changed

16 files changed

+937
-657
lines changed

‎frontend/app/(app)/layout.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
import { SidebarToggle } from "@/app/_components/sidebar-toggle";
2-
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
1+
"use client";
2+
import {
3+
SidebarInset,
4+
SidebarProvider,
5+
SidebarTrigger,
6+
} from "@/components/ui/sidebar";
7+
import { Separator } from "@/components/ui/separator";
38
import { SelectTheme } from "@/components/ui/theme-toggler";
49
import { UIStructure } from "@/components/ui/ui-structure";
510
import { ThemeProvider } from "@/components/theme-provider";
611
import { UpgradeCTA } from "@/components/ui/upgrade-cta";
12+
import { useUser } from "@/hooks/useUser";
13+
14+
import Link from "next/link";
715

816
export default function ChatLayout({
917
children,
1018
}: {
1119
children: React.ReactNode;
1220
}) {
21+
const { user, isLoading: isUserLoading } = useUser();
22+
1323
return (
1424
<>
1525
<SidebarProvider>
@@ -23,9 +33,18 @@ export default function ChatLayout({
2333
<SidebarInset className="min-!h-svh p-2">
2434
<div className="bg-muted/60 relative h-[calc(100vh-16px)] min-h-[calc(100vh-16px)] w-full rounded-xl p-4">
2535
<div className="absolute top-0 left-0 z-[50] flex h-12 w-full items-center justify-between px-3">
26-
<SidebarToggle />
36+
<SidebarTrigger className="shrink-0" />
37+
{/* <SidebarToggle /> */}
2738
<div className="flex items-center gap-2">
2839
<UpgradeCTA variant="topbar" />
40+
{!isUserLoading && !user && (
41+
<Link
42+
href="/auth"
43+
className="flex items-center w-full text-white dark:text-neutral-900 text-xs h-8 bg-neutral-800 dark:bg-zinc-100 font-bold px-4 rounded-2xl inset-shadow-xs inset-shadow-white/20 border border-black/4 outline-0"
44+
>
45+
Login
46+
</Link>
47+
)}
2948
<SelectTheme />
3049
</div>
3150
</div>

‎frontend/app/_components/Email.tsx‎

Lines changed: 69 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
"use client";
22
import { toast } from "sonner";
3-
import { ArrowLeft } from "lucide-react";
43
import { Button } from "@/components/ui/button";
5-
import Link from "next/link";
64
import { Input } from "@/components/ui/input";
75
import { BACKEND_URL } from "@/lib/utils";
8-
import { useRouter } from "next/navigation";
96
import { useState } from "react";
7+
import Link from "next/link";
8+
import {
9+
Tooltip,
10+
TooltipContent,
11+
TooltipTrigger,
12+
} from "@/components/ui/tooltip";
1013

1114
const isEmailValid = (email: string) => {
1215
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
@@ -21,80 +24,82 @@ export function Email({
2124
setStep: (step: string) => void;
2225
email: string;
2326
}) {
24-
const router = useRouter();
2527
const [sendingRequest, setSendingRequest] = useState(false);
2628

27-
const handleSendOTP = async () => {
29+
const handleAuth = (e: React.FormEvent<HTMLFormElement>) => {
30+
e.preventDefault();
2831
setSendingRequest(true);
29-
30-
try {
31-
const response = await fetch(`${BACKEND_URL}/auth/initiate_signin`, {
32-
method: "POST",
33-
body: JSON.stringify({ email }),
34-
headers: {
35-
"Content-Type": "application/json",
36-
},
37-
});
38-
39-
if (response.status === 200) {
40-
setStep("otp");
41-
toast.success("OTP sent to email");
42-
} else {
32+
fetch(`${BACKEND_URL}/auth/initiate_signin`, {
33+
method: "POST",
34+
body: JSON.stringify({ email }),
35+
headers: {
36+
"Content-Type": "application/json",
37+
},
38+
})
39+
.then((res) => {
40+
if (res.status === 200) {
41+
setStep("otp");
42+
toast.success("OTP sent to email");
43+
} else {
44+
toast.error("Failed to send OTP, please retry after a few minutes");
45+
}
46+
})
47+
.catch((err) => {
48+
console.error(err);
4349
toast.error("Failed to send OTP, please retry after a few minutes");
44-
}
45-
} catch (err) {
46-
console.error(err);
47-
toast.error("Failed to send OTP, please retry after a few minutes");
48-
} finally {
49-
setSendingRequest(false);
50-
}
50+
})
51+
.finally(() => {
52+
setSendingRequest(false);
53+
});
5154
};
55+
5256
return (
53-
<div className="mx-auto max-h-screen max-w-6xl">
54-
<div className="absolute top-4 left-4">
55-
{/* <Button asChild variant="ghost" className="font-semibold" onClick={() => router.push("/")}>
56-
<Link className="flex items-center gap-2" href="/">
57-
<ArrowLeft className="size-4" />
58-
Back to chat
59-
</Link>
60-
</Button> */}
61-
</div>
62-
<div className="flex h-full flex-col items-center justify-center gap-8 max-w-xl ">
63-
<h1 className="text-3xl lg:text-4xl font-bold tracking-tighter text-center">
64-
Welcome to <span className="text-primary">1ai</span>
57+
<div className="mx-auto w-full max-h-screen max-w-sm px-2 sm:px-0">
58+
<div className="flex h-full flex-col items-center justify-center gap-8">
59+
<h1 className="text-3xl font-serif text-foreground">
60+
Welcome to 1<span className="text-orange-400">ai</span>
6561
</h1>
66-
<div className="w-full flex flex-col gap-2">
67-
<Input
68-
onChange={(e) => setEmail(e.target.value)}
69-
placeholder="Email"
70-
onKeyDown={(e) => {
71-
if (e.key === "Enter" && isEmailValid(email) && !sendingRequest) {
72-
handleSendOTP();
73-
}
74-
}}
75-
/>
62+
<form onSubmit={handleAuth} className="w-full flex flex-col gap-3">
63+
<div className="border border-zinc-400/15 focus-within:border-transparent focus-within:ring-1 rounded-xl focus-within:ring-orange-400/80 dark:focus-within:ring-orange-400/60">
64+
<Input
65+
className="border-none dark:bg-transparent focus:border-none focus-visible:ring-0 outline-none focus:ring-0"
66+
spellCheck={false}
67+
onChange={(e) => setEmail(e.target.value)}
68+
placeholder="Email"
69+
/>
70+
</div>
7671
<Button
72+
type="submit"
7773
disabled={!isEmailValid(email) || sendingRequest}
7874
variant="accent"
79-
onClick={() => {
80-
if (isEmailValid(email) && !sendingRequest) {
81-
handleSendOTP();
82-
}
83-
}}
84-
className="w-full h-12"
75+
className="w-full text-sm text-white bg-[#fa7319] hover:bg-[#fa7319]/90 h-10 px-3.5 rounded-xl inset-shadow-sm inset-shadow-white/60 font-medium border border-black/4 outline-0"
8576
>
8677
Continue with Email
8778
</Button>
88-
</div>
89-
<div className="text-muted-foreground text-sm">
90-
By continuing, you agree to our{" "}
91-
<Link href="/terms" className="text-muted-foreground font-medium">
92-
Terms
93-
</Link>{" "}
94-
and{" "}
95-
<Link href="/privacy" className="text-muted-foreground font-medium">
96-
Privacy Policy
97-
</Link>
79+
</form>
80+
<div className="mt-2">
81+
<Tooltip>
82+
<TooltipTrigger>
83+
<div className="group text-muted-foreground text-sm font-serif">
84+
<Link
85+
href="/terms"
86+
className="text-muted-foreground group-hover:text-orange-400 hover:underline hover:underline-offset-3"
87+
>
88+
Terms
89+
</Link>{" "}
90+
<span className="group-hover:text-orange-400">and </span>
91+
<Link
92+
href="/privacy"
93+
className="text-muted-foreground group-hover:text-orange-400 hover:underline hover:underline-offset-3"
94+
>
95+
Privacy Policy
96+
</Link>
97+
</div>
98+
</TooltipTrigger>
99+
<TooltipContent sideOffset={1} className="bg-orange-400">
100+
<p>By continuing, you agree</p>
101+
</TooltipContent>
102+
</Tooltip>
98103
</div>
99104
</div>
100105
</div>

0 commit comments

Comments
 (0)