Setup (#112)

* wip

* wip

* wip3

* chore: utils

* feat: add command

* wip

* fix: key duplicate

* fix: move and check

* fix: use react-use instead

* fix: sidebar

* chore: make dynamic

* chore: tablet mode

* chore: fix padding

* chore: link instead of inbox

* fix: use dnd kit

* feat: add select component

* chore: use atom

* refactor: remove dnd provider

* feat: disabled drag when sort is not manual

* search route

* .

* feat: accessibility

* fix: search

* .

* .

* .

* fix: sidebar collapsed

* ai search layout

* .

* .

* .

* .

* ai responsible content

* .

* .

* .

* .

* .

* global topic route

* global topic correct route

* topic buttons

* sidebar search navigation

* ai

* Update jazz

* .

* .

* .

* .

* .

* learning status

* .

* .

* chore: content header

* fix: pointer none when dragging. prevent auto click after drag end

* fix: confirm

* fix: prevent drag when editing

* chore: remove unused fn

* fix: check propagation

* chore: list

* chore: tweak sonner

* chore: update stuff

* feat: add badge

* chore: close edit when create

* chore: escape on manage form

* refactor: remove learn path

* css: responsive item

* chore: separate pages and topic

* reafactor: remove new-schema

* feat(types): extend jazz type so it can be nullable

* chore: use new types

* fix: missing deps

* fix: link

* fix: sidebar in layout

* fix: quotes

* css: use medium instead semi

* Actual streaming and rendering markdown response

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* chore: metadata

* feat: la-editor

* .

* fix: editor and page

* .

* .

* .

* .

* .

* .

* fix: remove link

* chore: page sidebar

* fix: remove 'replace with learning status'

* fix: link

* fix: link

* chore: update schema

* chore: use new schema

* fix: instead of showing error, just do unique slug

* feat: create slug

* refactor apply

* update package json

* fix: schema personal page

* chore: editor

* feat: pages

* fix: metadata

* fix: jazz provider

* feat: handling data

* feat: page detail

* chore: server page to id

* chore: use id instead of slug

* chore: update content header

* chore: update link header implementation

* refactor: global.css

* fix: la editor use animation frame

* fix: editor export ref

* refactor: page detail

* chore: tidy up schema

* chore: adapt to new schema

* fix: wrap using settimeout

* fix: wrap using settimeout

* .

* .

---------

Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
Co-authored-by: Nikita <github@nikiv.dev>
Co-authored-by: Anselm <anselm.eickhoff@gmail.com>
Co-authored-by: Damian Tarnawski <gthetarnav@gmail.com>

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

@@ -0,0 +1,114 @@
+import { SidebarItem } from "../sidebar"
+import { z } from "zod"
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+import { PlusIcon } from "lucide-react"
+import { generateUniqueSlug } from "@/lib/utils"
+import { PersonalPage } from "@/lib/schema/personal-page"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+const createPageSchema = z.object({
+	title: z.string({ message: "Please enter a valid title" }).min(1, { message: "Please enter a valid title" })
+})
+
+type PageFormValues = z.infer<typeof createPageSchema>
+
+export const PageSection: React.FC = () => {
+	const { me } = useAccount()
+	const personalPages = me.root?.personalPages || []
+
+	return (
+		<div className="-ml-2">
+			<div className="group mb-0.5 ml-2 mt-2 flex flex-row items-center justify-between rounded-md">
+				<div
+					role="button"
+					tabIndex={0}
+					className="text-muted-foreground hover:bg-muted/50 flex h-6 grow cursor-default items-center justify-between gap-x-0.5 self-start rounded-md px-1 text-xs font-medium"
+				>
+					<span className="group-hover:text-muted-foreground">Pages</span>
+					<CreatePageForm />
+				</div>
+			</div>
+
+			<div className="relative shrink-0">
+				<div aria-hidden="false" className="ml-2 shrink-0 pb-2">
+					{personalPages.map(
+						page => page && <SidebarItem key={page.id} url={`/pages/${page.id}`} label={page.title} />
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+const CreatePageForm: React.FC = () => {
+	const { me } = useAccount()
+
+	const form = useForm<PageFormValues>({
+		resolver: zodResolver(createPageSchema),
+		defaultValues: {
+			title: ""
+		}
+	})
+
+	const onSubmit = (values: PageFormValues) => {
+		try {
+			const personalPages = me?.root?.personalPages?.toJSON() || []
+			const slug = generateUniqueSlug(personalPages, values.title)
+
+			const newPersonalPage = PersonalPage.create(
+				{
+					title: values.title,
+					slug: slug,
+					content: ""
+				},
+				{ owner: me._owner }
+			)
+
+			me.root?.personalPages?.push(newPersonalPage)
+
+			toast.success("Page created successfully")
+		} catch (error) {
+			console.error(error)
+			toast.error("Failed to create page")
+		}
+	}
+
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button type="button" size="icon" variant="ghost" aria-label="New Page" className="size-6">
+					<PlusIcon size={16} />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent align="start">
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						<FormField
+							control={form.control}
+							name="title"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>New page</FormLabel>
+									<FormControl>
+										<Input placeholder="Enter a title" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<Button type="submit" size="sm" className="w-full">
+							Create page
+						</Button>
+					</form>
+				</Form>
+			</PopoverContent>
+		</Popover>
+	)
+}

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

@@ -0,0 +1,100 @@
+import { useState, useEffect, useRef } from "react"
+import { usePathname } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { ChevronDown, BookOpen, Bookmark, GraduationCap, Check } from "lucide-react"
+import { SidebarItem } from "../sidebar"
+
+const TOPICS = ["Nix", "Javascript", "Kubernetes", "Figma", "Hiring", "Java", "IOS", "Design"]
+
+export const TopicSection = () => {
+	const [showOptions, setShowOptions] = useState(false)
+	const [selectedStatus, setSelectedStatus] = useState<string | null>(null)
+	const sectionRef = useRef<HTMLDivElement>(null)
+
+	const learningOptions = [
+		{ text: "To Learn", icon: <Bookmark size={16} />, color: "text-white/70" },
+		{
+			text: "Learning",
+			icon: <GraduationCap size={16} />,
+			color: "text-[#D29752]"
+		},
+		{
+			text: "Learned",
+			icon: <Check size={16} />,
+			color: "text-[#708F51]"
+		}
+	]
+
+	const statusSelect = (status: string) => {
+		setSelectedStatus(status === "Show All" ? null : status)
+		setShowOptions(false)
+	}
+
+	useEffect(() => {
+		const overlayClick = (event: MouseEvent) => {
+			if (sectionRef.current && !sectionRef.current.contains(event.target as Node)) {
+				setShowOptions(false)
+			}
+		}
+
+		document.addEventListener("mousedown", overlayClick)
+		return () => {
+			document.removeEventListener("mousedown", overlayClick)
+		}
+	}, [])
+
+	const availableOptions = selectedStatus
+		? [
+				{
+					text: "Show All",
+					icon: <BookOpen size={16} />,
+					color: "text-white"
+				},
+				...learningOptions.filter(option => option.text !== selectedStatus)
+			]
+		: learningOptions
+
+	// const topicClick = (topic: string) => {
+	//   router.push(`/${topic.toLowerCase()}`)
+	// }
+
+	return (
+		<div className="space-y-1 overflow-hidden" ref={sectionRef}>
+			<Button
+				onClick={() => setShowOptions(!showOptions)}
+				className="bg-accent text-foreground hover:bg-accent/50 flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium"
+			>
+				<span>{selectedStatus ? `Topics: ${selectedStatus}` : "Topics"}</span>
+				<ChevronDown
+					size={16}
+					className={`transform transition-transform duration-200 ease-in-out ${
+						showOptions ? "rotate-0" : "rotate-[-90deg]"
+					}`}
+				/>
+			</Button>
+
+			{showOptions && (
+				<div className="rounded-md bg-neutral-800">
+					{availableOptions.map(option => (
+						<Button
+							key={option.text}
+							onClick={() => statusSelect(option.text)}
+							className={`flex w-full items-center justify-start space-x-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-neutral-700 ${option.color} bg-inherit`}
+						>
+							{option.icon && <span className={option.color}>{option.icon}</span>}
+							<span>{option.text}</span>
+						</Button>
+					))}
+				</div>
+			)}
+			<div className="scrollbar-hide space-y-1 overflow-y-auto" style={{ maxHeight: "calc(100vh - 200px)" }}>
+				{TOPICS.map(topic => (
+					<SidebarItem key={topic} label={topic} url={`/${topic}`} />
+				))}
+			</div>
+		</div>
+	)
+}
+
+export default TopicSection

web/components/custom/sidebar/sidebar.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useMedia } from "react-use"
+import { useAtom } from "jotai"
+import { LinkIcon, SearchIcon } from "lucide-react"
+import { Logo } from "@/components/custom/logo"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { isCollapseAtom } from "@/store/sidebar"
+
+import { PageSection } from "./partial/page-section"
+import { TopicSection } from "./partial/topic-section"
+
+interface SidebarContextType {
+	isCollapsed: boolean
+	setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const SidebarContext = React.createContext<SidebarContextType>({
+	isCollapsed: false,
+	setIsCollapsed: () => {}
+})
+
+const useSidebarCollapse = (isTablet: boolean): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {
+	const [isCollapsed, setIsCollapsed] = useAtom(isCollapseAtom)
+	const pathname = usePathname()
+
+	React.useEffect(() => {
+		if (isTablet) setIsCollapsed(true)
+	}, [pathname, setIsCollapsed, isTablet])
+
+	React.useEffect(() => {
+		setIsCollapsed(isTablet)
+	}, [isTablet, setIsCollapsed])
+
+	return [isCollapsed, setIsCollapsed]
+}
+
+interface SidebarItemProps {
+	label: string
+	url: string
+	icon?: React.ReactNode
+	onClick?: () => void
+	children?: React.ReactNode
+}
+
+export const SidebarItem: React.FC<SidebarItemProps> = React.memo(({ label, url, icon, onClick, children }) => {
+	const pathname = usePathname()
+	const isActive = pathname === url
+
+	return (
+		<div className={cn("group relative my-0.5 rounded-md", isActive ? "bg-secondary/80" : "hover:bg-secondary/40")}>
+			<Link
+				className="text-secondary-foreground flex h-8 grow items-center truncate rounded-md pl-1.5 pr-1 text-sm font-medium"
+				href={url}
+				onClick={onClick}
+			>
+				{icon && (
+					<span className={cn("text-primary/60 group-hover:text-primary mr-2 size-4", { "text-primary": isActive })}>
+						{icon}
+					</span>
+				)}
+				<span>{label}</span>
+				{children}
+			</Link>
+		</div>
+	)
+})
+
+const LogoAndSearch: React.FC = React.memo(() => {
+	const pathname = usePathname()
+	return (
+		<div className="px-3.5">
+			<div className="mb-1 mt-2 flex h-10 max-w-full items-center">
+				<Link href="/links" className="px-2">
+					<Logo className="size-7" />
+				</Link>
+				<div className="flex min-w-2 grow flex-row" />
+				{pathname === "/search" ? (
+					<Link href="/links">
+						<Button size="sm" variant="secondary" type="button" className="text-md text-primary/60 font-medium">
+							← Back
+						</Button>
+					</Link>
+				) : (
+					<Link href="/search">
+						<Button
+							size="sm"
+							variant="secondary"
+							aria-label="Search"
+							type="button"
+							className="text-primary/60 flex w-20 items-center justify-start py-4 pl-2"
+						>
+							<SearchIcon size={16} className="mr-2" />
+						</Button>
+					</Link>
+				)}
+			</div>
+		</div>
+	)
+})
+
+const SidebarContent: React.FC = React.memo(() => {
+	const { isCollapsed } = React.useContext(SidebarContext)
+	const isTablet = useMedia("(max-width: 1024px)")
+
+	return (
+		<nav className="bg-background relative flex h-full w-full shrink-0 flex-col">
+			<div className={cn({ "pt-12": !isCollapsed && isTablet })}>
+				<LogoAndSearch />
+			</div>
+			<div tabIndex={-1} className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3.5">
+				<SidebarItem url="/links" label="Links" icon={<LinkIcon size={16} />} />
+				<div className="h-2 shrink-0" />
+				<PageSection />
+				<TopicSection />
+			</div>
+		</nav>
+	)
+})
+
+export const Sidebar: React.FC = () => {
+	const isTablet = useMedia("(max-width: 1024px)")
+	const [isCollapsed, setIsCollapsed] = useSidebarCollapse(isTablet)
+
+	const sidebarClasses = cn(
+		"h-full overflow-hidden transition-all duration-300 ease-in-out",
+		isCollapsed ? "w-0" : "w-auto min-w-56"
+	)
+
+	const sidebarInnerClasses = cn(
+		"h-full w-auto min-w-56 transition-transform duration-300 ease-in-out",
+		isCollapsed ? "-translate-x-full" : "translate-x-0"
+	)
+
+	const contextValue = React.useMemo(() => ({ isCollapsed, setIsCollapsed }), [isCollapsed, setIsCollapsed])
+
+	if (isTablet) {
+		return (
+			<>
+				<div
+					className={cn(
+						"fixed inset-0 z-30 bg-black/40 transition-opacity duration-300",
+						isCollapsed ? "pointer-events-none opacity-0" : "opacity-100"
+					)}
+					onClick={() => setIsCollapsed(true)}
+				/>
+				<div
+					className={cn(
+						"fixed left-0 top-0 z-40 h-full",
+						sidebarClasses,
+						!isCollapsed && "shadow-[4px_0px_16px_rgba(0,0,0,0.1)] transition-all"
+					)}
+				>
+					<div className={cn(sidebarInnerClasses, "border-r-primary/5 border-r")}>
+						<SidebarContext.Provider value={contextValue}>
+							<SidebarContent />
+						</SidebarContext.Provider>
+					</div>
+				</div>
+			</>
+		)
+	}
+
+	return (
+		<div className={sidebarClasses}>
+			<div className={sidebarInnerClasses}>
+				<SidebarContext.Provider value={contextValue}>
+					<SidebarContent />
+				</SidebarContext.Provider>
+			</div>
+		</div>
+	)
+}
+
+export default Sidebar