fix: Bug fixing & Enhancement (#161)

* chore: memoize sorted pages * chore: make link size more precise * fix(link): disable enter press on create mode * fix(onboarding): move is base logic and use escape for single quote * fix(page): on delete success redirect to pages * fix(sntry): sentry client error report * chore(page): dynamic focus on title/content * chore(link): tweak badge class * chore(link): use nuqs for handling create mode * fix(link): refs * feat(palette): implement new link
2026-01-12 12:20:23 +01:00 · 2024-09-11 15:25:21 +07:00
parent 0668dd5625
commit 2a637705f2
20 changed files with 181 additions and 231 deletions
--- a/web/components/custom/sidebar/partial/link-section.tsx
+++ b/web/components/custom/sidebar/partial/link-section.tsx
@@ -1,24 +1,31 @@
 import React from "react"
 import Link from "next/link"
-import { usePathname, useRouter } from "next/navigation"
+import { usePathname } from "next/navigation"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { cn } from "@/lib/utils"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
 import { useQueryState, parseAsStringLiteral } from "nuqs"
 import { LEARNING_STATES } from "@/lib/constants"

-export const LinkSection: React.FC<{ pathname: string }> = ({ pathname }) => {
+const ALL_STATES = [{ label: "All", value: "all", icon: "List", className: "text-foreground" }, ...LEARNING_STATES]
+const ALL_STATES_STRING = ALL_STATES.map(ls => ls.value)
+
+interface LinkSectionProps {
+	pathname: string
+}
+
+export const LinkSection: React.FC<LinkSectionProps> = ({ pathname }) => {
 	const { me } = useAccount({
 		root: {
 			personalLinks: []
 		}
 	})

-	const linkCount = me?.root.personalLinks?.length || 0
-	const isActive = pathname === "/links"
-
 	if (!me) return null

+	const linkCount = me.root.personalLinks?.length || 0
+	const isActive = pathname === "/links"
+
 	return (
 		<div className="group/pages flex flex-col gap-px py-2">
 			<LinkSectionHeader linkCount={linkCount} isActive={isActive} />
@@ -34,20 +41,19 @@ interface LinkSectionHeaderProps {

 const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount }) => {
 	const pathname = usePathname()
-	const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
-	const isLinksActive = pathname.startsWith("/links") && !state
+	const [state] = useQueryState("state", parseAsStringLiteral(ALL_STATES_STRING))
+	const isLinksActive = pathname.startsWith("/links") && (!state || state === "all")

 	return (
-		<div className="flex gap-px rounded-md">
+		<div
+			className={cn(
+				"flex min-h-[30px] items-center gap-px rounded-md",
+				isLinksActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+			)}
+		>
 			<Link
 				href="/links"
-				className={cn(
-					"flex size-6 flex-1 items-center justify-start rounded-md px-2",
-					"focus-visible:outline-none focus-visible:ring-0",
-					isLinksActive
-						? "bg-accent text-accent-foreground items-center justify-center py-3"
-						: "hover:bg-accent hover:text-accent-foreground"
-				)}
+				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">
 					Links
@@ -66,24 +72,29 @@ const List: React.FC<ListProps> = ({ personalLinks }) => {
 	const pathname = usePathname()
 	const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))

-	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
-
-	const isActive = (checkState: string) => {
-		return pathname === "/links" && state === checkState
+	const linkCounts = {
+		wantToLearn: personalLinks.filter(link => link?.learningState === "wantToLearn").length,
+		learning: personalLinks.filter(link => link?.learningState === "learning").length,
+		learned: personalLinks.filter(link => link?.learningState === "learned").length
 	}

+	const isActive = (checkState: string) => pathname === "/links" && state === checkState
+
 	return (
 		<div className="flex flex-col gap-px">
 			<ListItem
 				label="To Learn"
 				href="/links?state=wantToLearn"
-				count={toLearnCount}
+				count={linkCounts.wantToLearn}
 				isActive={isActive("wantToLearn")}
 			/>
-			<ListItem label="Learning" href="/links?state=learning" count={learningCount} isActive={isActive("learning")} />
-			<ListItem label="Learned" href="/links?state=learned" count={learnedCount} isActive={isActive("learned")} />
+			<ListItem
+				label="Learning"
+				href="/links?state=learning"
+				count={linkCounts.learning}
+				isActive={isActive("learning")}
+			/>
+			<ListItem label="Learned" href="/links?state=learned" count={linkCounts.learned} isActive={isActive("learned")} />
 		</div>
 	)
 }
@@ -95,26 +106,23 @@ interface ListItemProps {
 	isActive: boolean
 }

-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">
-				<Link
-					href={href}
-					className={cn(
-						"relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
-						isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-					)}
-				>
-					<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>
-					</div>
-				</Link>
-
-				{count > 0 && (
-					<span className="absolute right-2 top-1/2 z-[1] -translate-y-1/2 rounded p-1 text-sm">{count}</span>
+const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) => (
+	<div className="group/reorder-page relative">
+		<div className="group/topic-link relative flex min-w-0 flex-1">
+			<Link
+				href={href}
+				className={cn(
+					"relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
+					isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 				)}
-			</div>
+			>
+				<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>
+				</div>
+			</Link>
+			{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>
+)
--- a/web/components/custom/sidebar/partial/page-section.tsx
+++ b/web/components/custom/sidebar/partial/page-section.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { useAtom } from "jotai"
 import { usePathname, useRouter } from "next/navigation"
 import { useAccount } from "@/lib/providers/jazz-provider"
@@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button"
 import { LaIcon } from "@/components/custom/la-icon"
 import { toast } from "sonner"
 import Link from "next/link"
-import { useEffect } from "react"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -54,14 +53,14 @@ export const PageSection: React.FC<{ pathname?: string }> = ({ pathname }) => {
 		}
 	})

-	const [sort, setSort] = useAtom(pageSortAtom)
-	const [show, setShow] = useAtom(pageShowAtom)
-
-	const pageCount = me?.root.personalPages?.length || 0
-	const isActive = pathname === "/pages"
+	const [sort] = useAtom(pageSortAtom)
+	const [show] = useAtom(pageShowAtom)

 	if (!me) return null

+	const pageCount = me.root.personalPages?.length || 0
+	const isActive = pathname === "/pages"
+
 	return (
 		<div className="group/pages flex flex-col gap-px py-2">
 			<PageSectionHeader pageCount={pageCount} isActive={isActive} />
@@ -142,24 +141,19 @@ interface PageListProps {
 	show: ShowOption
 }

-const PageList: React.FC<PageListProps> = ({ personalPages }) => {
+const PageList: React.FC<PageListProps> = ({ personalPages, sort, show }) => {
 	const pathname = usePathname()

-	const [sortCriteria] = useAtom(pageSortAtom)
-	const [showCount] = useAtom(pageShowAtom)
-
-	const sortedPages = [...personalPages]
-		.sort((a, b) => {
-			switch (sortCriteria) {
-				case "title":
+	const sortedPages = useMemo(() => {
+		return [...personalPages]
+			.sort((a, b) => {
+				if (sort === "title") {
 					return (a?.title ?? "").localeCompare(b?.title ?? "")
-				case "recent":
-					return (b?.updatedAt?.getTime() ?? 0) - (a?.updatedAt?.getTime() ?? 0)
-				default:
-					return 0
-			}
-		})
-		.slice(0, showCount === 0 ? personalPages.length : showCount)
+				}
+				return (b?.updatedAt?.getTime() ?? 0) - (a?.updatedAt?.getTime() ?? 0)
+			})
+			.slice(0, show === 0 ? personalPages.length : show)
+	}, [personalPages, sort, show])

 	return (
 		<div className="flex flex-col gap-px">
@@ -185,7 +179,7 @@ const PageListItem: React.FC<PageListItemProps> = ({ page, isActive }) => (
 					{ "bg-accent text-accent-foreground": isActive }
 				)}
 			>
-				<div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
+				<div className="flex max-w-[calc(100%-1rem)] flex-1 items-center gap-1.5 truncate text-sm">
 					<LaIcon name="FileText" className="flex-shrink-0 opacity-60" />
 					<p className="truncate opacity-95 group-hover/sidebar-link:opacity-100">{page.title || "Untitled"}</p>
 				</div>