From 3dc440632f94cef773dda34d830c0683d8114b54 Mon Sep 17 00:00:00 2001
From: marshennikovaolga <marshennikova@gmail.com>
Date: Mon, 9 Sep 2024 20:05:36 +0300
Subject: [PATCH 1/3] pages active sidebar background

---
 .../custom/sidebar/partial/page-section.tsx      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/components/custom/sidebar/partial/page-section.tsx b/web/components/custom/sidebar/partial/page-section.tsx
index 8fe4e59c..94216769 100644
--- a/web/components/custom/sidebar/partial/page-section.tsx
+++ b/web/components/custom/sidebar/partial/page-section.tsx
@@ -57,7 +57,8 @@ export const PageSection: React.FC<{ pathname?: string }> = ({ pathname }) => {
 	const [show, setShow] = useAtom(pageShowAtom)
 
 	const pageCount = me?.root.personalPages?.length || 0
-	const isActive = pathname ? pathname.startsWith("/pages") : false
+	// const isActive = pathname ? pathname.startsWith("/pages") : false
+	const isActive = pathname === "/pages"
 
 	if (!me) return null
 
@@ -74,21 +75,24 @@ interface PageSectionHeaderProps {
 	isActive: boolean
 }
 
-const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({ pageCount }) => (
+const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({ pageCount, isActive }) => (
 	<div
-		className={cn("flex min-h-[30px] items-center gap-px rounded-md", "hover:bg-accent hover:text-accent-foreground")}
+		className={cn(
+			"flex min-h-[30px] items-center gap-px rounded-md",
+			isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+		)}
 	>
 		<Link
 			href="/pages"
-			className="size-6 flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
+			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 items-center text-xs font-medium">
+			<p className="text-xs">
 				Pages
 				{pageCount > 0 && <span className="text-muted-foreground ml-1">{pageCount}</span>}
 			</p>
 		</Link>
 
-		<div className={cn("flex items-center gap-px pr-2")}>
+		<div className="flex items-center gap-px pr-2">
 			<ShowAllForm />
 			<NewPageButton />
 		</div>

From 3f6ff82063a73620e1381b1a55b088ad70b13c92 Mon Sep 17 00:00:00 2001
From: marshennikovaolga <marshennikova@gmail.com>
Date: Mon, 9 Sep 2024 20:17:13 +0300
Subject: [PATCH 2/3] date format

---
 web/components/routes/page/list.tsx               | 2 +-
 web/components/routes/page/partials/page-item.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/components/routes/page/list.tsx b/web/components/routes/page/list.tsx
index d5796a73..149cb9ce 100644
--- a/web/components/routes/page/list.tsx
+++ b/web/components/routes/page/list.tsx
@@ -64,7 +64,7 @@ export const ColumnHeader: React.FC = () => {
 			<Column.Wrapper style={columnStyles.topic}>
 				<Column.Text>Topic</Column.Text>
 			</Column.Wrapper>
-			<Column.Wrapper style={columnStyles.updated} className="justify-end">
+			<Column.Wrapper style={columnStyles.updated}>
 				<Column.Text>Updated</Column.Text>
 			</Column.Wrapper>
 		</div>
diff --git a/web/components/routes/page/partials/page-item.tsx b/web/components/routes/page/partials/page-item.tsx
index 1f9c3d29..6b484eed 100644
--- a/web/components/routes/page/partials/page-item.tsx
+++ b/web/components/routes/page/partials/page-item.tsx
@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge"
 import { Column } from "./column"
 import { useMedia } from "react-use"
 import { useColumnStyles } from "../hooks/use-column-styles"
+import { format } from "date-fns"
 
 interface PageItemProps {
 	page: PersonalPage
@@ -47,8 +48,8 @@ export const PageItem = React.forwardRef<HTMLAnchorElement, PageItemProps>(({ pa
 					</>
 				)}
 
-				<Column.Wrapper style={columnStyles.updated} className="justify-end">
-					<Column.Text className="text-[13px]">{page.updatedAt.toLocaleDateString()}</Column.Text>
+				<Column.Wrapper style={columnStyles.updated} className="flex justify-end">
+					<Column.Text className="text-[13px]">{format(new Date(page.updatedAt), "d MMM yyyy")}</Column.Text>
 				</Column.Wrapper>
 			</div>
 		</Link>

From 6f77158aacb56b3e4e48447b2d836c1c851355c2 Mon Sep 17 00:00:00 2001
From: marshennikovaolga <marshennikova@gmail.com>
Date: Mon, 9 Sep 2024 20:48:29 +0300
Subject: [PATCH 3/3] link isActive sidebar

---
 .../custom/sidebar/partial/link-section.tsx   | 77 ++++++++++---------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/web/components/custom/sidebar/partial/link-section.tsx b/web/components/custom/sidebar/partial/link-section.tsx
index 46a6e359..0ac854aa 100644
--- a/web/components/custom/sidebar/partial/link-section.tsx
+++ b/web/components/custom/sidebar/partial/link-section.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { cn } from "@/lib/utils"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
@@ -32,28 +32,31 @@ interface LinkSectionHeaderProps {
 	isActive: boolean
 }
 
-const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => (
-	<div
-		className={cn(
-			"flex min-h-[30px] items-center gap-px rounded-md",
-			isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-		)}
-	>
-		<Link
-			href="/links"
-			className={cn(
-				"size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
-				"focus-visible:outline-none focus-visible:ring-0",
-				isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-			)}
-		>
-			<p className="flex items-center text-xs font-medium">
-				Links
-				{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
-			</p>
-		</Link>
-	</div>
-)
+const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => {
+	const pathname = usePathname()
+	const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
+	const isLinksActive = pathname.startsWith("/links") && !state
+
+	return (
+		<div className="flex gap-px rounded-md">
+			<Link
+				href="/links"
+				className={cn(
+					"flex size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
+					"focus-visible:outline-none focus-visible:ring-0",
+					isLinksActive
+						? "bg-accent text-accent-foreground items-center justify-center py-4"
+						: "hover:bg-accent hover:text-accent-foreground"
+				)}
+			>
+				<p className="flex w-full items-center text-xs font-medium">
+					Links
+					{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
+				</p>
+			</Link>
+		</div>
+	)
+}
 
 const ALL_STATES = ["all", ...LEARNING_STATES.map(ls => ls.value)]
 interface ListProps {
@@ -62,31 +65,26 @@ interface ListProps {
 
 const List: React.FC<ListProps> = ({ personalLinks }) => {
 	const pathname = usePathname()
-	const [activeState] = useQueryState("state", parseAsStringLiteral(ALL_STATES))
+	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
+	}
+
 	return (
 		<div className="flex flex-col gap-px">
 			<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"}
+				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")} />
 		</div>
 	)
 }
@@ -104,7 +102,10 @@ const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) =>
 			<div className="group/topic-link relative flex min-w-0 flex-1">
 				<Link
 					href={href}
-					className="group-hover/topic-link:bg-accent relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium"
+					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>