Merge branch 'main' of https://github.com/dchat-app/dchat-app.github.io

amber-dchat · Sep 24, 2024 · b36aa81 · b36aa81
2 parents 614a652 + 9be1ba8
commit b36aa81
Show file tree

Hide file tree

Showing 25 changed files with 1,059 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -13,10 +13,13 @@
 		"@radix-ui/react-avatar": "^1.1.0",
 		"@radix-ui/react-context-menu": "^2.2.1",
 		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-dropdown-menu": "^2.1.1",
+		"@radix-ui/react-label": "^2.1.0",
 		"@radix-ui/react-navigation-menu": "^1.2.0",
 		"@radix-ui/react-progress": "^1.1.0",
 		"@radix-ui/react-separator": "^1.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
+		"@radix-ui/react-tabs": "^1.1.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"gun": "^0.2020.1240",
@@ -27,7 +30,8 @@
 		"react-resizable-panels": "^2.1.3",
 		"sonner": "^1.5.0",
 		"tailwind-merge": "^2.5.2",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"vaul": "^0.9.4"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/nav/index.css b/src/components/nav/index.css
@@ -9,4 +9,4 @@ nav img {
 
 nav a * {
 	@apply cursor-pointer;
-}
+}
diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx
@@ -3,17 +3,38 @@ import {
 	NavigationMenuLink,
 	navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu';
-import { navigate } from '@/routes/hooks';
+import { navigate } from '@/hooks';
 
 import './index.css';
-import { useMainUser } from '@/hooks/user/useMainUser';
+
+import { LogOut, Settings } from "lucide-react";
+import { useMainUser, UserContextValues } from '@/hooks/user/useMainUser';
+
+import { MdDarkMode, MdLightMode, MdOutlineLaptop } from "react-icons/md";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { HiOutlineRocketLaunch } from "react-icons/hi2";
+
+import { Button } from '../ui/button';
+
+import { useEffect, useState } from 'react';
+import { getTheme, setTheme } from '@/utils/theme';
+import { Login } from './login';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 
 export default function NavigationBar() {
+	const [theme, changeTheme] = useState(getTheme());
+	const [open, setOpen] = useState(false);
+
+	useEffect(() => setTheme(theme), [theme]);
+
 	const user = useMainUser();
 
 	// let react handle useMemo
 	const logged = !!user?.userInfo?.isCurrentlyActive;
 
+	useEffect(() => logged ? setOpen(false) : undefined, [logged]);
+
+
 	return (
 		<NavigationMenu style={{ display: 'flex' }}>
 			<img src="/favicon.png" />
@@ -26,12 +47,70 @@ export default function NavigationBar() {
 				DChatt
 			</NavigationMenuLink>
 
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild className='flex justify-center text-center items-center'>
+					<Button variant="ghost">
+						{theme == "system" ? <MdOutlineLaptop size="1.5em" /> : theme == "true" ? <MdDarkMode size="1.5em" /> : <MdLightMode size="1.5em" />}
+						<span className='ml-1 md:block hidden'>{theme == "system" ? "Theme" : theme == "true" ? "Dark" : "Light"}</span>
+					</Button>
+				</DropdownMenuTrigger>
+
+				<DropdownMenuContent>
+					<DropdownMenuLabel>Theme</DropdownMenuLabel>
+
+					<DropdownMenuRadioGroup value={theme} onValueChange={changeTheme}>
+						<DropdownMenuRadioItem value="system">
+							<MdOutlineLaptop /> <span className='ml-1'>System</span>
+						</DropdownMenuRadioItem>
+
+						<DropdownMenuRadioItem value="true">
+							<MdDarkMode /> <span className='ml-1'>Dark</span>
+						</DropdownMenuRadioItem>
+
+						<DropdownMenuRadioItem value="false">
+							<MdLightMode /> <span className='ml-1'>Light</span>
+						</DropdownMenuRadioItem>
+					</DropdownMenuRadioGroup>
+				</DropdownMenuContent>
+			</DropdownMenu>
+
 			<NavigationMenuLink
-				onClick={() => navigate(logged ? '/chat' : '/login')}
-				className={navigationMenuTriggerStyle({ className: 'cursor-pointer' })}
+				onClick={() => !logged ? setOpen(true) : undefined}
+				className={navigationMenuTriggerStyle({ className: `ml-1 cursor-pointer ${logged ? "hover:bg-transparent cursor-auto" : ""}` })}
 			>
-				{logged ? 'Chat' : 'Login / SignUp'}
+				{logged ? <></> : <HiOutlineRocketLaunch />}
+				{logged ? <ProfileDropdown user={user} /> : <span className="ml-1">Get Started</span>}
 			</NavigationMenuLink>
+			<Login {...{ open, setOpen }} />
 		</NavigationMenu>
 	);
 }
+
+function ProfileDropdown({ user }: { user: UserContextValues | null }) {
+	return (<DropdownMenu>
+		<DropdownMenuTrigger asChild>
+			<Avatar className='border-2 rounded-full'>
+				<AvatarImage src={user?.userInfo?.avatar || `https://robohash.org/${user?.userInfo?.alias}`} />
+				<AvatarFallback>{user?.userInfo?.alias.substring(0, 1).toUpperCase()}</AvatarFallback>
+			</Avatar>
+		</DropdownMenuTrigger>
+
+		<DropdownMenuContent>
+			<DropdownMenuLabel>Hello {user?.userInfo?.display_name || user?.userInfo?.alias}</DropdownMenuLabel>
+
+			<DropdownMenuSeparator />
+
+			<DropdownMenuGroup>
+				<DropdownMenuItem>
+					<Settings className="mr-2 h-4 w-4" />
+					<span>Edit Profile</span>
+				</DropdownMenuItem>
+
+				<DropdownMenuItem onClick={() => user?.account.logout()}>
+					<LogOut className="mr-2 h-4 w-4" />
+					<span>Logout</span>
+				</DropdownMenuItem>
+			</DropdownMenuGroup>
+		</DropdownMenuContent>
+	</DropdownMenu>);
+}