fix(topic): Topic list keybind (#181)

* fix(page): improve keybind

* fix(topic): improve keybind

* fix: learning state selector

web/components/custom/learning-state-selector.tsx

@@ -8,7 +8,7 @@ import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
 import { linkLearningStateSelectorAtom } from "@/store/link"
 import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import type { icons } from "lucide-react"
+import { icons } from "lucide-react"
 
 interface LearningStateSelectorProps {
 	showSearch?: boolean
@@ -37,6 +37,9 @@ export const LearningStateSelector: React.FC<LearningStateSelectorProps> = ({
 		setIsLearningStateSelectorOpen(false)
 	}
 
+	const iconName = selectedLearningState?.icon || defaultIcon
+	const labelText = selectedLearningState?.label || defaultLabel
+
 	return (
 		<Popover open={isLearningStateSelectorOpen} onOpenChange={setIsLearningStateSelectorOpen}>
 			<PopoverTrigger asChild>
@@ -47,20 +50,8 @@ export const LearningStateSelector: React.FC<LearningStateSelectorProps> = ({
 					variant="secondary"
 					className={cn("gap-x-2 text-sm", className)}
 				>
-					{selectedLearningState?.icon ||
-						(defaultIcon && (
-							<LaIcon
-								name={selectedLearningState?.icon || defaultIcon}
-								className={cn(selectedLearningState?.className)}
-							/>
-						))}
-
-					{selectedLearningState?.label ||
-						(defaultLabel && (
-							<span className={cn("truncate", selectedLearningState?.className || "")}>
-								{selectedLearningState?.label || defaultLabel}
-							</span>
-						))}
+					{iconName && <LaIcon name={iconName} className={cn(selectedLearningState?.className)} />}
+					{labelText && <span className={cn("truncate", selectedLearningState?.className || "")}>{labelText}</span>}
 					<LaIcon name="ChevronDown" />
 				</Button>
 			</PopoverTrigger>
@@ -97,7 +88,7 @@ export const LearningStateSelectorContent: React.FC<LearningStateSelectorContent
 					<CommandGroup>
 						{LEARNING_STATES.map(ls => (
 							<CommandItem key={ls.value} value={ls.value} onSelect={onSelect}>
-								<LaIcon name={ls.icon} className={cn("mr-2", ls.className)} />
+								{ls.icon && <LaIcon name={ls.icon} className={cn("mr-2", ls.className)} />}
 								<span className={ls.className}>{ls.label}</span>
 								<LaIcon
 									name="Check"

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

@@ -3,7 +3,6 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
 import { LaIcon } from "@/components/custom/la-icon"
 import { ListOfTopics } from "@/lib/schema"
 import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
@@ -27,7 +26,7 @@ export const TopicSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 	if (!me) return null
 
 	return (
-		<div className="group/pages flex flex-col gap-px py-2">
+		<div className="group/topics flex flex-col gap-px py-2">
 			<TopicSectionHeader topicCount={topicCount} isActive={isActive} />
 			<List
 				topicsWantToLearn={me.root.topicsWantToLearn}
@@ -50,15 +49,12 @@ const TopicSectionHeader: React.FC<TopicSectionHeaderProps> = ({ topicCount, isA
 			isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 		)}
 	>
-		<Button
-			variant="ghost"
-			className="size-6 flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
-		>
-			<p className="flex items-center text-xs font-medium">
+		<Link href="/topics" className="flex flex-1 items-center justify-start rounded-md px-2 py-1">
+			<p className="text-xs">
 				Topics
 				{topicCount > 0 && <span className="text-muted-foreground ml-1">{topicCount}</span>}
 			</p>
-		</Button>
+		</Link>
 	</div>
 )
 
@@ -78,7 +74,7 @@ const List: React.FC<ListProps> = ({ topicsWantToLearn, topicsLearning, topicsLe
 				count={topicsWantToLearn.length}
 				label="To Learn"
 				value="wantToLearn"
-				href="/me/wantToLearn"
+				href="#"
 				isActive={pathname === "/me/wantToLearn"}
 			/>
 			<ListItem
@@ -86,7 +82,7 @@ const List: React.FC<ListProps> = ({ topicsWantToLearn, topicsLearning, topicsLe
 				label="Learning"
 				value="learning"
 				count={topicsLearning.length}
-				href="/me/learning"
+				href="#"
 				isActive={pathname === "/me/learning"}
 			/>
 			<ListItem
@@ -94,7 +90,7 @@ const List: React.FC<ListProps> = ({ topicsWantToLearn, topicsLearning, topicsLe
 				label="Learned"
 				value="learned"
 				count={topicsLearned.length}
-				href="/me/learned"
+				href="#"
 				isActive={pathname === "/me/learned"}
 			/>
 		</div>
@@ -118,7 +114,7 @@ const ListItem: React.FC<ListItemProps> = ({ label, value, href, count, isActive
 		<div className="group/reorder-page relative">
 			<div className="group/topic-link relative flex min-w-0 flex-1">
 				<Link
-					href={"#"}
+					href={href}
 					className={cn(
 						"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 },