From 2551a49f953c3f604c0e0abdaad0b6f029415c8c Mon Sep 17 00:00:00 2001
From: marshennikovaolga <marshennikova@gmail.com>
Date: Fri, 6 Sep 2024 12:49:58 +0300
Subject: [PATCH] links sidebar

---
 .../custom/sidebar/partial/link-section.tsx   | 97 +++++++++++++++++++
 web/components/custom/sidebar/sidebar.tsx     |  4 +-
 web/components/routes/search/wrapper.tsx      | 11 ++-
 3 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 web/components/custom/sidebar/partial/link-section.tsx

diff --git a/web/components/custom/sidebar/partial/link-section.tsx b/web/components/custom/sidebar/partial/link-section.tsx
new file mode 100644
index 00000000..a3da175a
--- /dev/null
+++ b/web/components/custom/sidebar/partial/link-section.tsx
@@ -0,0 +1,97 @@
+import React from "react"
+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 { PersonalLinkLists } from "@/lib/schema/personal-link"
+
+export const LinkSection: React.FC = () => {
+	const { me } = useAccount({
+		root: {
+			personalLinks: []
+		}
+	})
+
+	const linkCount = me?.root.personalLinks?.length || 0
+
+	if (!me) return null
+
+	return (
+		<div className="group/pages flex flex-col gap-px py-2">
+			<LinkSectionHeader linkCount={linkCount} />
+			<List personalLinks={me.root.personalLinks} />
+		</div>
+	)
+}
+
+interface LinkSectionHeaderProps {
+	linkCount: number
+}
+
+const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount }) => (
+	<div
+		className={cn("flex min-h-[30px] items-center gap-px rounded-md", "hover:bg-accent hover:text-accent-foreground")}
+	>
+		<Link
+			href="/"
+			className={cn(
+				"size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
+				"focus-visible:outline-none focus-visible:ring-0",
+				"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>
+)
+
+interface ListProps {
+	personalLinks: PersonalLinkLists
+}
+
+const List: React.FC<ListProps> = ({ personalLinks }) => {
+	const pathname = usePathname()
+
+	return (
+		<div className="flex flex-col gap-px">
+			<ListItem label="All Links" href="/links" count={personalLinks.length} isActive={pathname === "/links"} />
+		</div>
+	)
+}
+
+interface ListItemProps {
+	label: string
+	href: string
+	count: number
+	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(
+						"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">
+						<LaIcon name="Link" className="flex-shrink-0 opacity-60" />
+						<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>
+	)
+}
diff --git a/web/components/custom/sidebar/sidebar.tsx b/web/components/custom/sidebar/sidebar.tsx
index bfccd464..893dcebb 100644
--- a/web/components/custom/sidebar/sidebar.tsx
+++ b/web/components/custom/sidebar/sidebar.tsx
@@ -10,6 +10,7 @@ import { Logo } from "@/components/custom/logo"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { isCollapseAtom } from "@/store/sidebar"
+import { LinkSection } from "./partial/link-section"
 import { PageSection } from "./partial/page-section"
 import { TopicSection } from "./partial/topic-section"
 import { ProfileSection } from "./partial/profile-section"
@@ -77,7 +78,7 @@ const LogoAndSearch: React.FC = React.memo(() => {
 	return (
 		<div className="px-3">
 			<div className="mt-2 flex h-10 max-w-full items-center">
-				<Link href="/" className="px-2">
+				<Link href="/explore" className="px-2">
 					<Logo className="size-7" />
 				</Link>
 				<div className="flex min-w-2 grow flex-row" />
@@ -116,6 +117,7 @@ const SidebarContent: React.FC = React.memo(() => {
 				</div>
 				<div tabIndex={-1} className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3">
 					<div className="h-2 shrink-0" />
+					<LinkSection />
 					<PageSection />
 					<TopicSection />
 				</div>
diff --git a/web/components/routes/search/wrapper.tsx b/web/components/routes/search/wrapper.tsx
index 11d59430..36cc66fb 100644
--- a/web/components/routes/search/wrapper.tsx
+++ b/web/components/routes/search/wrapper.tsx
@@ -130,7 +130,7 @@ export const SearchWrapper = () => {
 								type="text"
 								value={searchText}
 								onChange={handleSearch}
-								placeholder="Search something..."
+								placeholder="Search topics, links, pages"
 								className="dark:bg-input w-full rounded-lg border border-neutral-300 p-2 pl-8 focus:outline-none dark:border-neutral-600"
 							/>
 							{searchText && (
@@ -178,12 +178,13 @@ export const SearchWrapper = () => {
 							</div>
 						) : (
 							<div className="mt-5">
-								{searchText && !showAiSearch && (
+								{/* {searchText && !showAiSearch && ( */}
+								{searchText && (
 									<div
-										className="cursor-pointer rounded-lg bg-blue-700 p-4 font-semibold text-white"
-										onClick={() => setShowAiSearch(true)}
+										className="cursor-default rounded-lg bg-blue-700 p-4 font-semibold text-white"
+										// onClick={() => setShowAiSearch(true)}
 									>
-										✨ Didn&apos;t find what you were looking for? Ask AI
+										✨ Didn&apos;t find what you were looking for? Will soon have AI assistant builtin
 									</div>
 								)}
 								{showAiSearch && <AiSearch searchQuery={searchText} />}