fix: topic for guest auth (#149)

* wip

* chore: redirect instead of toast

* refactor: remove useRouter

web/components/custom/sidebar/partial/link-section.tsx

@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
 import { useQueryState, parseAsStringLiteral } from "nuqs"
 import { LEARNING_STATES } from "@/lib/constants"
-import { useRouter } from "next/navigation"
 
 export const LinkSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 	const { me } = useAccount({

web/components/custom/sidebar/partial/profile-section.tsx

@@ -1,7 +1,6 @@
-import { useAccount } from "@/lib/providers/jazz-provider"
-import { LaIcon } from "../../la-icon"
+import { LaIcon } from "@/components/custom/la-icon"
 import { useState } from "react"
-import { useAuth } from "@clerk/nextjs"
+import { SignInButton, useAuth, useUser } from "@clerk/nextjs"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -11,97 +10,68 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Avatar, AvatarImage } from "@/components/ui/avatar"
 import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { usePathname } from "next/navigation"
 
-const MenuItem = ({
-	icon,
-	text,
-	href,
-	onClick,
-	onClose
-}: {
-	icon: string
-	text: string
-	href?: string
-	onClick?: () => void
-	onClose: () => void
-}) => {
-	const handleClick = () => {
-		onClose()
-		if (onClick) {
-			onClick()
-		}
+export const ProfileSection: React.FC = () => {
+	const { user, isSignedIn } = useUser()
+	const { signOut } = useAuth()
+	const [menuOpen, setMenuOpen] = useState(false)
+	const pathname = usePathname()
+
+	if (!isSignedIn) {
+		return (
+			<div className="flex flex-col gap-px border-t border-transparent px-3 py-2 pb-3 pt-1.5">
+				<SignInButton mode="modal" forceRedirectUrl={pathname}>
+					<Button variant="outline" className="flex w-full items-center gap-2">
+						<LaIcon name="LogIn" />
+						Sign in
+					</Button>
+				</SignInButton>
+			</div>
+		)
 	}
 
 	return (
-		<div className="relative flex flex-1 items-center gap-2">
-			<LaIcon name={icon as any} />
-			{href ? (
-				<Link href={href} onClick={onClose}>
-					<span className="line-clamp-1 flex-1">{text}</span>
-				</Link>
-			) : (
-				<span className="line-clamp-1 flex-1" onClick={handleClick}>
-					{text}
-				</span>
-			)}
-		</div>
-	)
-}
-export const ProfileSection: React.FC = () => {
-	const { me } = useAccount({
-		profile: true
-	})
-	const { signOut, isSignedIn } = useAuth()
-	const [menuOpen, setMenuOpen] = useState(false)
-
-	const closeMenu = () => setMenuOpen(false)
-
-	return (
-		<div className="visible absolute inset-x-0 bottom-0 z-10 flex gap-8 p-2.5">
+		<div className="flex flex-col gap-px border-t border-transparent px-3 py-2 pb-3 pt-1.5">
 			<div className="flex h-10 min-w-full items-center">
 				<div className="flex min-w-0">
 					<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
 						<DropdownMenuTrigger asChild>
-							<button
+							<Button
+								variant="ghost"
 								aria-label="Profile"
-								className="hover:bg-accent focus-visible:ring-ring hover:text-accent-foreground flex items-center gap-1.5 truncate rounded pl-1 pr-1.5 focus-visible:outline-none focus-visible:ring-1"
+								className="hover:bg-accent focus-visible:ring-ring hover:text-accent-foreground flex h-auto items-center gap-1.5 truncate rounded py-1 pl-1 pr-1.5 focus-visible:outline-none focus-visible:ring-1"
 							>
-								{isSignedIn ? (
-									<Avatar className="size-6">
-										<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-									</Avatar>
-								) : (
-									<LaIcon name="User" />
-								)}
-								<span className="truncate text-left text-sm font-medium -tracking-wider">
-									{isSignedIn ? me?.profile?.name : "guest"}
-								</span>
+								<Avatar className="size-6">
+									<AvatarImage src={user.imageUrl} alt={user.fullName || ""} />
+								</Avatar>
+								<span className="truncate text-left text-sm font-medium -tracking-wider">{user.fullName}</span>
 								<LaIcon
 									name="ChevronDown"
-									className={`size-4 shrink-0 transition-transform duration-300 ${menuOpen ? "rotate-180" : ""}`}
+									className={cn("size-4 shrink-0 transition-transform duration-300", {
+										"rotate-180": menuOpen
+									})}
 								/>
-							</button>
+							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent className="w-56" align="start" side="top">
-							{isSignedIn ? (
-								<>
-									<DropdownMenuItem>
-										<MenuItem icon="CircleUser" text="My profile" href="/profile" onClose={closeMenu} />
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem>
-										<MenuItem icon="LogOut" text="Log out" onClick={signOut} onClose={closeMenu} />
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem>
-										<MenuItem icon="CircleUser" text="Tauri" href="/tauri" onClose={closeMenu} />
-									</DropdownMenuItem>
-								</>
-							) : (
-								<DropdownMenuItem>
-									<MenuItem icon="LogIn" text="Sign in" href="/sign-in" onClose={closeMenu} />
-								</DropdownMenuItem>
-							)}
+							<DropdownMenuItem asChild>
+								<Link href="/profile">
+									<div className="relative flex flex-1 items-center gap-2">
+										<LaIcon name="CircleUser" />
+										<span className="line-clamp-1 flex-1">My profile</span>
+									</div>
+								</Link>
+							</DropdownMenuItem>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem onClick={() => signOut()}>
+								<div className="relative flex flex-1 items-center gap-2">
+									<LaIcon name="LogOut" />
+									<span className="line-clamp-1 flex-1">Log out</span>
+								</div>
+							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
 				</div>
@@ -109,7 +79,3 @@ export const ProfileSection: React.FC = () => {
 		</div>
 	)
 }
-
-/* <DropdownMenuItem>
-								<MenuItem icon="Settings" text="Settings" href="/settings" onClose={closeMenu} />
-							</DropdownMenuItem> */

web/components/custom/sidebar/sidebar.tsx

@@ -15,7 +15,6 @@ import { PageSection } from "./partial/page-section"
 import { TopicSection } from "./partial/topic-section"
 import { ProfileSection } from "./partial/profile-section"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
-import { SignInButton } from "@clerk/nextjs"
 
 interface SidebarContextType {
 	isCollapsed: boolean
@@ -126,15 +125,9 @@ const SidebarContent: React.FC = React.memo(() => {
 					{me._type === "Account" && <PageSection pathname={pathname} />}
 					{me._type === "Account" && <TopicSection pathname={pathname} />}
 				</div>
-			</nav>
 
-			{me._type === "Account" ? (
 				<ProfileSection />
-			) : (
-				<div className="visible absolute inset-x-0 bottom-0 z-10 flex gap-8 p-2.5">
-					<SignInButton>Fake profile section</SignInButton>
-				</div>
-			)}
+			</nav>
 		</>
 	)
 })

web/components/routes/topics/detail/Header.tsx

@@ -6,13 +6,16 @@ import { ListOfTopics, Topic } from "@/lib/schema"
 import { LearningStateSelector } from "@/components/custom/learning-state-selector"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
 import { LearningStateValue } from "@/lib/constants"
-import { toast } from "sonner"
+import { useClerk } from "@clerk/nextjs"
+import { usePathname } from "next/navigation"
 
 interface TopicDetailHeaderProps {
 	topic: Topic
 }
 
 export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }: TopicDetailHeaderProps) {
+	const clerk = useClerk()
+	const pathname = usePathname()
 	const { me } = useAccountOrGuest({
 		root: {
 			topicsWantToLearn: [],
@@ -32,7 +35,6 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }
 	if (wantToLearnIndex !== -1) {
 		p = {
 			index: wantToLearnIndex,
-			// TODO: fix this type error by doing better conditionals on both index and p
 			topic: me && me._type !== "Anonymous" ? me.root.topicsWantToLearn[wantToLearnIndex] : undefined,
 			learningState: "wantToLearn"
 		}
@@ -60,9 +62,9 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }
 
 	const handleAddToProfile = (learningState: LearningStateValue) => {
 		if (me?._type === "Anonymous") {
-			// TODO: handle better
-			toast.error("You need to sign in to add links to your personal list.")
-			return
+			return clerk.redirectToSignIn({
+				redirectUrl: pathname
+			})
 		}
 
 		const topicLists: Record<LearningStateValue, (ListOfTopics | null) | undefined> = {

web/components/routes/topics/detail/partials/link-item.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react"
 import Link from "next/link"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useAtom } from "jotai"
 import { toast } from "sonner"
 
@@ -10,10 +10,11 @@ import { Button } from "@/components/ui/button"
 import { LearningStateSelectorContent } from "@/components/custom/learning-state-selector"
 
 import { cn, ensureUrlProtocol, generateUniqueSlug } from "@/lib/utils"
-import { LaAccount, Link as LinkSchema, PersonalLink, PersonalLinkLists, Topic, UserRoot } from "@/lib/schema"
+import { Link as LinkSchema, PersonalLink, Topic } from "@/lib/schema"
 import { openPopoverForIdAtom } from "../TopicDetailRoute"
 import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
+import { useClerk } from "@clerk/nextjs"
 
 interface LinkItemProps {
 	topic: Topic
@@ -24,185 +25,183 @@ interface LinkItemProps {
 }
 
 export const LinkItem = React.memo(
-	React.forwardRef<HTMLLIElement, LinkItemProps>(
-		({ topic, link, isActive, index, setActiveIndex }, ref) => {
-			const router = useRouter()
-			const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
-			const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+	React.forwardRef<HTMLLIElement, LinkItemProps>(({ topic, link, isActive, index, setActiveIndex }, ref) => {
+		const clerk = useClerk()
+		const pathname = usePathname()
+		const router = useRouter()
+		const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
+		const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
-			const { me } = useAccountOrGuest({ root: { personalLinks: [] } });
+		const { me } = useAccountOrGuest({ root: { personalLinks: [] } })
 
-			const personalLinks = useMemo(() => {
-				if (!me || me._type === "Anonymous") return undefined;
-				return me?.root?.personalLinks || []
-			}, [me])
+		const personalLinks = useMemo(() => {
+			if (!me || me._type === "Anonymous") return undefined
+			return me?.root?.personalLinks || []
+		}, [me])
 
-			const personalLink = useMemo(() => {
-				return personalLinks?.find(pl => pl?.link?.id === link.id)
-			}, [personalLinks, link.id])
+		const personalLink = useMemo(() => {
+			return personalLinks?.find(pl => pl?.link?.id === link.id)
+		}, [personalLinks, link.id])
 
-			const selectedLearningState = useMemo(() => {
-				return LEARNING_STATES.find(ls => ls.value === personalLink?.learningState)
-			}, [personalLink?.learningState])
+		const selectedLearningState = useMemo(() => {
+			return LEARNING_STATES.find(ls => ls.value === personalLink?.learningState)
+		}, [personalLink?.learningState])
 
-			const handleClick = useCallback(
-				(e: React.MouseEvent) => {
-					e.preventDefault()
-					setActiveIndex(index)
-				},
-				[index, setActiveIndex]
-			)
+		const handleClick = useCallback(
+			(e: React.MouseEvent) => {
+				e.preventDefault()
+				setActiveIndex(index)
+			},
+			[index, setActiveIndex]
+		)
 
-			const handleSelectLearningState = useCallback(
-				(learningState: LearningStateValue) => {
-					if (!personalLinks || !me || me?._type === "Anonymous") {
-						if (me?._type === "Anonymous") {
-							// TODO: handle better
-							toast.error("You need to sign in to add links to your personal list.")
-						}
-						return
-					};
+		const handleSelectLearningState = useCallback(
+			(learningState: LearningStateValue) => {
+				if (!personalLinks || !me || me?._type === "Anonymous") {
+					return clerk.redirectToSignIn({
+						redirectUrl: pathname
+					})
+				}
 
-					const defaultToast = {
-						duration: 5000,
-						position: "bottom-right" as const,
-						closeButton: true,
-						action: {
-							label: "Go to list",
-							onClick: () => router.push("/")
-						}
+				const defaultToast = {
+					duration: 5000,
+					position: "bottom-right" as const,
+					closeButton: true,
+					action: {
+						label: "Go to list",
+						onClick: () => router.push("/")
 					}
+				}
 
-					if (personalLink) {
-						if (personalLink.learningState === learningState) {
-							personalLink.learningState = undefined
-							toast.error("Link learning state removed", defaultToast)
-						} else {
-							personalLink.learningState = learningState
-							toast.success("Link learning state updated", defaultToast)
-						}
+				if (personalLink) {
+					if (personalLink.learningState === learningState) {
+						personalLink.learningState = undefined
+						toast.error("Link learning state removed", defaultToast)
 					} else {
-						const slug = generateUniqueSlug(personalLinks.toJSON(), link.title)
-						const newPersonalLink = PersonalLink.create(
-							{
-								url: link.url,
-								title: link.title,
-								slug,
-								link,
-								learningState,
-								sequence: personalLinks.length + 1,
-								completed: false,
-								topic,
-								createdAt: new Date(),
-								updatedAt: new Date()
-							},
-							{ owner: me }
-						)
-
-						personalLinks.push(newPersonalLink)
-
-						toast.success("Link added.", {
-							...defaultToast,
-							description: `${link.title} has been added to your personal link.`
-						})
+						personalLink.learningState = learningState
+						toast.success("Link learning state updated", defaultToast)
 					}
+				} else {
+					const slug = generateUniqueSlug(personalLinks.toJSON(), link.title)
+					const newPersonalLink = PersonalLink.create(
+						{
+							url: link.url,
+							title: link.title,
+							slug,
+							link,
+							learningState,
+							sequence: personalLinks.length + 1,
+							completed: false,
+							topic,
+							createdAt: new Date(),
+							updatedAt: new Date()
+						},
+						{ owner: me }
+					)
 
-					setOpenPopoverForId(null)
-					setIsPopoverOpen(false)
-				},
-				[personalLink, personalLinks, me, link, router, setOpenPopoverForId, topic]
-			)
+					personalLinks.push(newPersonalLink)
 
-			const handlePopoverOpenChange = useCallback(
-				(open: boolean) => {
-					setIsPopoverOpen(open)
-					setOpenPopoverForId(open ? link.id : null)
-				},
-				[link.id, setOpenPopoverForId]
-			)
+					toast.success("Link added.", {
+						...defaultToast,
+						description: `${link.title} has been added to your personal link.`
+					})
+				}
 
-			return (
-				<li
-					ref={ref}
-					tabIndex={0}
-					onClick={handleClick}
-					className={cn("relative flex h-14 cursor-pointer items-center outline-none xl:h-11", {
-						"bg-muted-foreground/10": isActive,
-						"hover:bg-muted/50": !isActive
-					})}
-				>
-					<div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
-						<div className="flex min-w-0 items-center gap-x-4">
-							<Popover open={isPopoverOpen} onOpenChange={handlePopoverOpenChange}>
-								<PopoverTrigger asChild>
-									<Button
-										size="sm"
-										type="button"
-										role="combobox"
-										variant="secondary"
-										className={cn("size-7 shrink-0 p-0", "hover:bg-accent-foreground/10")}
-										onClick={e => e.stopPropagation()}
-									>
-										{selectedLearningState?.icon ? (
-											<LaIcon name={selectedLearningState.icon} className={selectedLearningState.className} />
-										) : (
-											<LaIcon name="Circle" />
-										)}
-									</Button>
-								</PopoverTrigger>
-								<PopoverContent
-									className="w-52 rounded-lg p-0"
-									side="bottom"
-									align="start"
-									onCloseAutoFocus={e => e.preventDefault()}
+				setOpenPopoverForId(null)
+				setIsPopoverOpen(false)
+			},
+			[personalLink, personalLinks, me, link, router, setOpenPopoverForId, topic]
+		)
+
+		const handlePopoverOpenChange = useCallback(
+			(open: boolean) => {
+				setIsPopoverOpen(open)
+				setOpenPopoverForId(open ? link.id : null)
+			},
+			[link.id, setOpenPopoverForId]
+		)
+
+		return (
+			<li
+				ref={ref}
+				tabIndex={0}
+				onClick={handleClick}
+				className={cn("relative flex h-14 cursor-pointer items-center outline-none xl:h-11", {
+					"bg-muted-foreground/10": isActive,
+					"hover:bg-muted/50": !isActive
+				})}
+			>
+				<div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
+					<div className="flex min-w-0 items-center gap-x-4">
+						<Popover open={isPopoverOpen} onOpenChange={handlePopoverOpenChange}>
+							<PopoverTrigger asChild>
+								<Button
+									size="sm"
+									type="button"
+									role="combobox"
+									variant="secondary"
+									className={cn("size-7 shrink-0 p-0", "hover:bg-accent-foreground/10")}
+									onClick={e => e.stopPropagation()}
 								>
-									<LearningStateSelectorContent
-										showSearch={false}
-										searchPlaceholder="Search state..."
-										value={personalLink?.learningState}
-										onSelect={(value: string) => handleSelectLearningState(value as LearningStateValue)}
+									{selectedLearningState?.icon ? (
+										<LaIcon name={selectedLearningState.icon} className={selectedLearningState.className} />
+									) : (
+										<LaIcon name="Circle" />
+									)}
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent
+								className="w-52 rounded-lg p-0"
+								side="bottom"
+								align="start"
+								onCloseAutoFocus={e => e.preventDefault()}
+							>
+								<LearningStateSelectorContent
+									showSearch={false}
+									searchPlaceholder="Search state..."
+									value={personalLink?.learningState}
+									onSelect={(value: string) => handleSelectLearningState(value as LearningStateValue)}
+								/>
+							</PopoverContent>
+						</Popover>
+
+						<div className="w-full min-w-0 flex-auto">
+							<div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
+								<p
+									className={cn(
+										"text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate",
+										isActive && "font-bold"
+									)}
+								>
+									{link.title}
+								</p>
+
+								<div className="group flex items-center gap-x-1">
+									<LaIcon
+										name="Link"
+										aria-hidden="true"
+										className="text-muted-foreground group-hover:text-primary flex-none"
 									/>
-								</PopoverContent>
-							</Popover>
 
-							<div className="w-full min-w-0 flex-auto">
-								<div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
-									<p
-										className={cn(
-											"text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate",
-											isActive && "font-bold"
-										)}
+									<Link
+										href={ensureUrlProtocol(link.url)}
+										passHref
+										prefetch={false}
+										target="_blank"
+										onClick={e => e.stopPropagation()}
+										className="text-muted-foreground hover:text-primary text-xs"
 									>
-										{link.title}
-									</p>
-
-									<div className="group flex items-center gap-x-1">
-										<LaIcon
-											name="Link"
-											aria-hidden="true"
-											className="text-muted-foreground group-hover:text-primary flex-none"
-										/>
-
-										<Link
-											href={ensureUrlProtocol(link.url)}
-											passHref
-											prefetch={false}
-											target="_blank"
-											onClick={e => e.stopPropagation()}
-											className="text-muted-foreground hover:text-primary text-xs"
-										>
-											<span className="xl:truncate">{link.url}</span>
-										</Link>
-									</div>
+										<span className="xl:truncate">{link.url}</span>
+									</Link>
 								</div>
 							</div>
 						</div>
-						<div className="flex shrink-0 items-center gap-x-4"></div>
 					</div>
-				</li>
-			)
-		}
-	)
+					<div className="flex shrink-0 items-center gap-x-4"></div>
+				</div>
+			</li>
+		)
+	})
 )
 
 LinkItem.displayName = "LinkItem"