Fix auth & made lang switch available when logged out

package.json

@@ -55,5 +55,5 @@
     "typescript": "^5",
     "ultracite": "4.2.0"
   },
-  "packageManager": "pnpm@10.6.5"
+  "packageManager": "pnpm@10.7.1"
 }

src/app/layout.tsx

@@ -3,7 +3,7 @@ import { getLocale } from "next-intl/server";
 import { Geist, Geist_Mono } from "next/font/google";
 import "@/styles/globals.css";
 import Footer from "@/components/footer";
-import Navbar from "@/components/navbar";
+import Navbar from "@/components/nav/navbar";
 import type { ReactNode } from "react";
 import Providers from "./providers";
 

src/components/discord-login.tsx → src/components/nav/discord-login.tsx

@@ -1,35 +1,27 @@
-import { setUserLocale } from "@/i18n/services/locale";
-import { authClient } from "@/lib/auth-client";
-import { cn } from "@/lib/utils";
-import {
-	CreditCard,
-	Languages,
-	LogOut,
-	Settings,
-	ShieldUser,
-	User
-} from "lucide-react";
-import { type Locale, useTranslations } from "next-intl";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import Flag from "react-world-flags";
-import DiscordIcon from "./icons/discord";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import DiscordIcon from "@/components/icons/discord";
+import LanguageSwitcher from "@/components/nav/language-switcher";
+import ThemeSwitcher from "@/components/nav/theme-switcher";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuLabel,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuSub,
 	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
 	DropdownMenuTrigger
-} from "./ui/dropdown-menu";
-import { Skeleton } from "./ui/skeleton";
+} from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import { CreditCard, LogOut, Settings, ShieldUser, User } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 interface DiscordLoginButtonProps {
 	className?: string;
@@ -49,25 +41,25 @@ export default function DiscordLoginButton({
 		});
 	};
 
-	const handleLocaleChange = (value: string) => {
-		setUserLocale(value as Locale);
-		authClient.updateUser({
-			locale: value
-		});
-	};
-
 	if (session) {
 		return (
 			<DropdownMenu>
-				<DropdownMenuTrigger className="flex cursor-pointer items-center gap-2">
-					<Avatar>
-						<AvatarImage
-							className="h-8 w-8"
-							src={session.user.image || ""}
-						/>
-						<AvatarFallback>{t("nav.profile.avatar.fallback")}</AvatarFallback>
-					</Avatar>
-					{session.user.name}
+				<DropdownMenuTrigger asChild>
+					<Button
+						className="flex h-12 items-center gap-3 p-2 text-xl"
+						variant="ghost"
+					>
+						<Avatar>
+							<AvatarImage
+								className="size-9"
+								src={session.user.image || ""}
+							/>
+							<AvatarFallback>
+								{t("nav.profile.avatar.fallback")}
+							</AvatarFallback>
+						</Avatar>
+						<span className="pr-2 leading-0">{session.user.name}</span>
+					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent
 					side="bottom"
@@ -77,59 +69,17 @@ export default function DiscordLoginButton({
 						<DropdownMenuLabel>
 							{t("nav.profile.dropdown.account.label")}
 						</DropdownMenuLabel>
+
 						<DropdownMenuSeparator />
+
 						<DropdownMenuItem>
 							<User className="size-4" />
 							{t("nav.profile.dropdown.account.profile")}
 						</DropdownMenuItem>
-						<DropdownMenuSub>
-							<DropdownMenuSubTrigger>
-								<Languages className="size-4 text-muted-foreground" />
-								{t("nav.profile.dropdown.account.language")}
-							</DropdownMenuSubTrigger>
-							<DropdownMenuSubContent>
-								<DropdownMenuRadioGroup
-									value={session.user.locale}
-									onValueChange={(value) => handleLocaleChange(value)}
-								>
-									<DropdownMenuRadioItem value="en">
-										<Flag
-											code="us"
-											className="size-4"
-										/>
-										English
-									</DropdownMenuRadioItem>
-									<DropdownMenuRadioItem value="de">
-										<Flag
-											code="de"
-											className="size-4"
-										/>
-										Deutsch
-									</DropdownMenuRadioItem>
-									<DropdownMenuRadioItem value="fr">
-										<Flag
-											code="fr"
-											className="size-4"
-										/>
-										Français
-									</DropdownMenuRadioItem>
-									<DropdownMenuRadioItem value="es">
-										<Flag
-											code="es"
-											className="size-4"
-										/>
-										Española
-									</DropdownMenuRadioItem>
-									<DropdownMenuRadioItem value="it">
-										<Flag
-											code="it"
-											className="size-4"
-										/>
-										Italiana
-									</DropdownMenuRadioItem>
-								</DropdownMenuRadioGroup>
-							</DropdownMenuSubContent>
-						</DropdownMenuSub>
+
+						<ThemeSwitcher />
+						<LanguageSwitcher />
+
 						<DropdownMenuSub>
 							<DropdownMenuSubTrigger>
 								<Link
@@ -145,12 +95,14 @@ export default function DiscordLoginButton({
 									<DropdownMenuLabel>
 										{t("nav.profile.dropdown.account.settings.sub.label")}
 									</DropdownMenuLabel>
+
 									<Link href={"/settings/profile"}>
 										<DropdownMenuItem>
 											<User className="size-4" />
 											{t("nav.profile.dropdown.account.settings.sub.profile")}
 										</DropdownMenuItem>
 									</Link>
+
 									<Link href={"/settings/privacy"}>
 										<DropdownMenuItem>
 											<ShieldUser className="size-4" />
@@ -160,12 +112,16 @@ export default function DiscordLoginButton({
 								</DropdownMenuGroup>
 							</DropdownMenuSubContent>
 						</DropdownMenuSub>
+
 						<DropdownMenuSeparator />
+
 						<DropdownMenuItem>
 							<CreditCard className="size-4" />
 							{t("nav.profile.dropdown.account.manageSubscription")}
 						</DropdownMenuItem>
+
 						<DropdownMenuSeparator />
+
 						<DropdownMenuItem
 							variant="destructive"
 							onClick={() => authClient.signOut()}

src/components/nav/language-switcher.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { Locale } from "@/i18n/config";
+import { getUserLocale, setUserLocale } from "@/i18n/services/locale";
+import { authClient } from "@/lib/auth-client";
+import { Languages } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import Flag from "react-world-flags";
+import {
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger
+} from "../ui/dropdown-menu";
+
+export default function LanguageSwitcher() {
+	const t = useTranslations();
+	const { data: session } = authClient.useSession();
+	const [lang, setLang] = useState("en");
+
+	useEffect(() => {
+		async function getLang() {
+			setLang(await getUserLocale());
+		}
+
+		getLang();
+	}, []);
+
+	const handleLocaleChange = (value: string) => {
+		setUserLocale(value as Locale);
+		setLang(value);
+
+		if (session) {
+			authClient.updateUser({
+				locale: value
+			});
+		}
+	};
+
+	return (
+		<DropdownMenuSub>
+			<DropdownMenuSubTrigger>
+				<Languages className="size-4 text-muted-foreground" />
+				{t("nav.dropdown.language")}
+			</DropdownMenuSubTrigger>
+			<DropdownMenuSubContent>
+				<DropdownMenuRadioGroup
+					value={lang}
+					onValueChange={(value) => handleLocaleChange(value)}
+				>
+					<DropdownMenuRadioItem value="en">
+						<Flag
+							code="us"
+							className="size-4"
+						/>
+						English
+					</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="de">
+						<Flag
+							code="de"
+							className="size-4"
+						/>
+						Deutsch
+					</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="fr">
+						<Flag
+							code="fr"
+							className="size-4"
+						/>
+						Français
+					</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="es">
+						<Flag
+							code="es"
+							className="size-4"
+						/>
+						Española
+					</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="it">
+						<Flag
+							code="it"
+							className="size-4"
+						/>
+						Italiana
+					</DropdownMenuRadioItem>
+				</DropdownMenuRadioGroup>
+			</DropdownMenuSubContent>
+		</DropdownMenuSub>
+	);
+}

src/components/navbar.tsx → src/components/nav/navbar.tsx

@@ -1,17 +1,28 @@
 "use client";
+
+import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 import clsx from "clsx";
-import { Crown, Moon, Sun } from "lucide-react";
+import { Crown, Menu } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
-import { type PropsWithChildren, useEffect, useState } from "react";
+import { type PropsWithChildren, useState } from "react";
+import { Button } from "../ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuTrigger
+} from "../ui/dropdown-menu";
 import DiscordLoginButton from "./discord-login";
+import LanguageSwitcher from "./language-switcher";
+import ThemeSwitcher from "./theme-switcher";
 
 export default function Navbar() {
 	const t = useTranslations("brand");
 	const [isOpen, setIsOpen] = useState(false);
+	const { data: session, isPending } = authClient.useSession();
 
 	const handleIsOpen = () => {
 		if (window.innerWidth < 1024) {
@@ -72,14 +83,14 @@ export default function Navbar() {
 							isOpen && "pointer-events-auto bg-background/70 opacity-100"
 						)}
 					>
-						<ThemeToggle />
+						{session || isPending ? <></> : <NavDropdown />}
 						<NavList />
 						<DiscordLoginButton className="h-12 rounded-md px-6" />
 					</ul>
 				</NavSection>
 
 				<NavSection className="hidden gap-2 p-2 lg:flex">
-					<ThemeToggle />
+					{session || isPending ? <></> : <NavDropdown />}
 					<DiscordLoginButton className="h-12 rounded-md px-6" />
 				</NavSection>
 			</div>
@@ -153,29 +164,27 @@ function NavItem({
 	);
 }
 
-function ThemeToggle() {
-	const [mounted, setMounted] = useState(false);
-	const { theme, setTheme } = useTheme();
-
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	if (!mounted) {
-		return null;
-	}
-
+function NavDropdown() {
 	return (
-		<button
-			type="button"
-			className="flex aspect-square cursor-pointer items-center justify-center rounded-xl p-2 text-muted-foreground transition hover:text-foreground"
-			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-		>
-			{theme === "light" ? (
-				<Moon className="h-6 w-6 sm:h-7 sm:w-7" />
-			) : (
-				<Sun className="h-6 w-6 sm:h-7 sm:w-7" />
-			)}
-		</button>
+		<DropdownMenu>
+			<DropdownMenuTrigger
+				className="cursor-pointer"
+				asChild
+			>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="size-12"
+				>
+					<Menu className="size-6" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuGroup>
+					<ThemeSwitcher />
+					<LanguageSwitcher />
+				</DropdownMenuGroup>
+			</DropdownMenuContent>
+		</DropdownMenu>
 	);
 }