sidebar links learning status

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

@@ -3,8 +3,10 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { cn } from "@/lib/utils"
-import { LaIcon } from "@/components/custom/la-icon"
 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({
@@ -54,16 +56,38 @@ const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActi
 	</div>
 )
 
+const ALL_STATES = ["all", ...LEARNING_STATES.map(ls => ls.value)]
 interface ListProps {
 	personalLinks: PersonalLinkLists
 }
 
 const List: React.FC<ListProps> = ({ personalLinks }) => {
 	const pathname = usePathname()
+	const [activeState] = useQueryState("state", parseAsStringLiteral(ALL_STATES))
+	const toLearnCount = personalLinks.filter(link => link?.learningState === "wantToLearn").length
+	const learningCount = personalLinks.filter(link => link?.learningState === "learning").length
+	const learnedCount = personalLinks.filter(link => link?.learningState === "learned").length
 
 	return (
 		<div className="flex flex-col gap-px">
-			<ListItem label="All Links" href="/links" count={personalLinks.length} isActive={pathname === "/links"} />
+			<ListItem
+				label="To Learn"
+				href="/links?state=wantToLearn"
+				count={toLearnCount}
+				isActive={pathname === "/links" && activeState === "wantToLearn"}
+			/>
+			<ListItem
+				label="Learning"
+				href="/links?state=learning"
+				count={learningCount}
+				isActive={pathname === "/links" && activeState === "learning"}
+			/>
+			<ListItem
+				label="Learned"
+				href="/links?state=learned"
+				count={learnedCount}
+				isActive={pathname === "/links" && activeState === "learned"}
+			/>
 		</div>
 	)
 }
@@ -78,13 +102,10 @@ interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) => {
 	return (
 		<div className="group/reorder-page relative">
-			{/* <div className="group/topic-link relative flex min-w-0 flex-1">
+			<div className="group/topic-link relative flex min-w-0 flex-1">
 				<Link
 					href={href}
-					className={cn(
+					className="group-hover/topic-link:bg-accent relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium"
-						"group-hover/topic-link:bg-accent relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
-						{ "bg-accent text-accent-foreground": isActive }
-					)}
 				>
 					<div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
 						<p className={cn("truncate opacity-95 group-hover/topic-link:opacity-100")}>{label}</p>
@@ -94,7 +115,7 @@ const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) =>
 				{count > 0 && (
 					<span className="absolute right-2 top-1/2 z-[1] -translate-y-1/2 rounded p-1 text-sm">{count}</span>
 				)}
-			</div> */}
+			</div>
 		</div>
 	)
 }

web/components/routes/link/header.tsx

@@ -24,6 +24,11 @@ export const learningStateAtom = atom<string>("all")
 export const LinkHeader = React.memo(() => {
 	const isTablet = useMedia("(max-width: 1024px)")
 
+	const [activeState, setActiveState] = useQueryState(
+		"state",
+		parseAsStringLiteral(["all", "ToLearn", "learning", "learned"]).withDefault("all")
+	)
+
 	return (
 		<>
 			<ContentHeader className="px-6 py-5 max-lg:px-4">
@@ -52,6 +57,42 @@ export const LinkHeader = React.memo(() => {
 
 LinkHeader.displayName = "LinkHeader"
 
+// const LearningTab = React.memo(() => {
+// 	const [activeTab, setActiveTab] = useAtom(learningStateAtom)
+// 	const [activeState, setActiveState] = useQueryState(
+// 		"state",
+// 		parseAsStringLiteral(Object.values(ALL_STATES_STRING)).withDefault(ALL_STATES_STRING[0])
+// 	)
+
+// 	const handleTabChange = React.useCallback(
+// 		(value: string) => {
+// 			setActiveTab(value)
+// 			setActiveState(value)
+// 		},
+// 		[setActiveTab, setActiveState]
+// 	)
+
+// 	React.useEffect(() => {
+// 		setActiveTab(activeState)
+// 	}, [activeState, setActiveTab])
+
+// 	return (
+// 		<FancySwitch
+// 			value={activeTab}
+// 			onChange={value => {
+// 				handleTabChange(value as string)
+// 			}}
+// 			options={ALL_STATES}
+// 			className="bg-secondary flex rounded-lg"
+// 			highlighterClassName="bg-secondary-foreground/10 rounded-lg"
+// 			radioClassName={cn(
+// 				"relative mx-2 flex h-8 cursor-pointer items-center justify-center rounded-full px-1 text-sm text-secondary-foreground/60 data-[checked]:text-secondary-foreground font-medium transition-colors focus:outline-none"
+// 			)}
+// 			highlighterIncludeMargin={true}
+// 		/>
+// 	)
+// })
+
 const LearningTab = React.memo(() => {
 	const [activeTab, setActiveTab] = useAtom(learningStateAtom)
 	const [activeState, setActiveState] = useQueryState(
@@ -61,15 +102,19 @@ const LearningTab = React.memo(() => {
 
 	const handleTabChange = React.useCallback(
 		(value: string) => {
-			setActiveTab(value)
+			if (value !== activeTab) {
-			setActiveState(value)
+				setActiveTab(value)
+				setActiveState(value)
+			}
 		},
-		[setActiveTab, setActiveState]
+		[activeTab, setActiveTab, setActiveState]
 	)
 
 	React.useEffect(() => {
-		setActiveTab(activeState)
+		if (activeState !== activeTab) {
-	}, [activeState, setActiveTab])
+			setActiveTab(activeState)
+		}
+	}, [activeState, activeTab, setActiveTab])
 
 	return (
 		<FancySwitch