fix: conflict

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/link-section.tsx

@@ -47,7 +47,7 @@ const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount }) => {
 	return (
 		<div
 			className={cn(
-				"flex min-h-[30px] items-center gap-px rounded-md",
+				"flex h-9 items-center gap-px rounded-md sm:h-[30px]",
 				isLinksActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 			)}
 		>
@@ -55,7 +55,7 @@ const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount }) => {
 				href="/links"
 				className="flex flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
 			>
-				<p className="flex w-full items-center text-xs font-medium">
+				<p className="flex w-full items-center text-sm font-medium sm:text-xs">
 					Links
 					{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
 				</p>
@@ -112,7 +112,7 @@ const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) =>
 			<Link
 				href={href}
 				className={cn(
-					"relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
+					"relative flex h-9 w-full items-center gap-2 rounded-md p-1.5 font-medium sm:h-8",
 					isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 				)}
 			>

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

@@ -77,12 +77,12 @@ interface PageSectionHeaderProps {
 const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({ pageCount, isActive }) => (
 	<div
 		className={cn(
-			"flex min-h-[30px] items-center gap-px rounded-md",
+			"flex h-9 items-center gap-px rounded-md sm:h-[30px]",
 			isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 		)}
 	>
 		<Link href="/pages" className="flex flex-1 items-center justify-start rounded-md px-2 py-1">
-			<p className="text-xs">
+			<p className="text-sm sm:text-xs">
 				Pages
 				{pageCount > 0 && <span className="text-muted-foreground ml-1">{pageCount}</span>}
 			</p>
@@ -165,7 +165,7 @@ const PageListItem: React.FC<PageListItemProps> = ({ page, isActive }) => (
 			<Link
 				href={`/pages/${page.id}`}
 				className={cn(
-					"group-hover/sidebar-link:bg-accent group-hover/sidebar-link:text-accent-foreground relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
+					"group-hover/sidebar-link:bg-accent group-hover/sidebar-link:text-accent-foreground relative flex h-9 w-full items-center gap-2 rounded-md p-1.5 font-medium sm:h-8",
 					{ "bg-accent text-accent-foreground": isActive }
 				)}
 			>

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"
@@ -46,12 +45,12 @@ interface TopicSectionHeaderProps {
 const TopicSectionHeader: React.FC<TopicSectionHeaderProps> = ({ topicCount, isActive }) => (
 	<div
 		className={cn(
-			"flex min-h-[30px] items-center gap-px rounded-md",
+			"flex h-9 items-center gap-px rounded-md sm:h-[30px]",
 			isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 		)}
 	>
 		<Link href="/topics" className="flex flex-1 items-center justify-start rounded-md px-2 py-1">
-			<p className="text-xs">
+			<p className="text-sm sm:text-xs">
 				Topics
 				{topicCount > 0 && <span className="text-muted-foreground ml-1">{topicCount}</span>}
 			</p>
@@ -115,9 +114,9 @@ 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",
+						"group-hover/topic-link:bg-accent relative flex h-9 w-full items-center gap-2 rounded-md p-1.5 font-medium sm:h-8",
 						{ "bg-accent text-accent-foreground": isActive },
 						le.className
 					)}