fix: link (#115)

* start

* .

* seeding connections

* .

* wip

* wip: learning state

* wip: notes section

* wip: many

* topics

* chore: update schema

* update package

* update sidebar

* update page section

* feat: profile

* fix: remove z index

* fix: wrong type

* add avatar

* add avatar

* wip

* .

* store page section key

* remove atom page section

* fix rerender

* fix rerender

* fix rerender

* fix rerender

* fix link

* search light/dark mode

* bubble menu ui

* .

* fix: remove unecessary code

* chore: mark as old for old schema

* chore: adapt new schema

* fix: add topic schema but null for now

* fix: add icon on personal link

* fix: list item

* fix: set url fetched when editing

* fix: remove image

* feat: add icon to link

* feat: custom url zod validation

* fix: metadata test

* chore: update utils

* fix: link

* fix: url fetcher

* .

* .

* fix: add link, section

* chore: seeder

* .

* .

* .

* .

* fix: change checkbox to learning state

* fix: click outside editing form

* feat: constant

* chore: move to master folder

* chore: adapt new schema

* chore: cli for new schema

* fix: new schema for dev seed

* fix: seeding

* update package

* chore: forcegraph seed

* bottombar

* if isEdit delete icon

* showCreate X button

* .

* options

* chore: implement topic from public global group

* chore: update learning state

* fix: change implementation for outside click

* chore: implement new form param

* chore: update env example

* feat: link form refs exception

* new page button layout, link topic search fixed

* chore: enable topic

* chore: update seed

* profile

* chore: move framer motion package from root to web and add nuqs

* chore: add LearningStateValue

* chore: implement active state

* profile

* chore: use fancy switch and update const

* feat: filter implementation

* dropdown menu

* .

* sidebar topics

* topic selected color

* feat: topic detail

* fix: collapsible page

* pages - sorted by, layout, visible mode

* .

* .

* .

* topic status sidebar

* topic button and count

* fix: topic

* page delete/topic buttons

* search ui

* selected topic for page

* selected topic status sidebar

* removed footer

* update package

* .

---------

Co-authored-by: Nikita <github@nikiv.dev>
Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
Co-authored-by: Kisuyo <ig.intr3st@gmail.com>

web/components/routes/link/form/partial/description-input.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { useFormContext } from "react-hook-form"
+import { FormField, FormItem, FormControl, FormLabel } from "@/components/ui/form"
+import { TextareaAutosize } from "@/components/custom/textarea-autosize"
+import { LinkFormValues } from "../schema"
+
+interface DescriptionInputProps {}
+
+export const DescriptionInput: React.FC<DescriptionInputProps> = () => {
+	const form = useFormContext<LinkFormValues>()
+
+	return (
+		<div>
+			<FormField
+				control={form.control}
+				name="description"
+				render={({ field }) => (
+					<FormItem className="grow space-y-0">
+						<FormLabel className="sr-only">Description</FormLabel>
+						<FormControl>
+							<TextareaAutosize
+								{...field}
+								autoComplete="off"
+								placeholder="Description (optional)"
+								className="placeholder:text-muted-foreground/70 resize-none overflow-y-auto border-none p-1.5 text-[13px] font-medium shadow-none focus-visible:ring-0"
+							/>
+						</FormControl>
+					</FormItem>
+				)}
+			/>
+		</div>
+	)
+}

web/components/routes/link/form/partial/floating-button.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react"
+import { cn } from "@/lib/utils"
+import { LaIcon } from "@/components/custom/la-icon"
+import { Button, ButtonProps } from "@/components/ui/button"
+
+interface FloatingButtonProps extends ButtonProps {
+	isOpen: boolean
+}
+
+export const FloatingButton = forwardRef<HTMLButtonElement, FloatingButtonProps>(
+	({ isOpen, className, ...props }, ref) => (
+		<Button
+			ref={ref}
+			className={cn(
+				"absolute bottom-4 right-4 h-12 w-12 rounded-full bg-[#274079] p-0 text-white transition-transform hover:bg-[#274079]/90",
+				{ "rotate-45 transform": isOpen },
+				className
+			)}
+			{...props}
+		>
+			<LaIcon name="Plus" className="h-6 w-6" />
+		</Button>
+	)
+)
+
+FloatingButton.displayName = "FloatingButton"
+
+export default FloatingButton

web/components/routes/link/form/partial/learning-state-selector.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button"
+import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command"
+import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useFormContext } from "react-hook-form"
+import { cn } from "@/lib/utils"
+import { LaIcon } from "@/components/custom/la-icon"
+import { useAtom } from "jotai"
+import { linkLearningStateSelectorAtom } from "@/store/link"
+import { useMemo } from "react"
+import { LinkFormValues } from "../schema"
+import { LEARNING_STATES } from "@/lib/constants"
+
+export const LearningStateSelector: React.FC = () => {
+	const [islearningStateSelectorOpen, setIslearningStateSelectorOpen] = useAtom(linkLearningStateSelectorAtom)
+	const form = useFormContext<LinkFormValues>()
+
+	const selectedLearningState = useMemo(
+		() => LEARNING_STATES.find(ls => ls.value === form.getValues("learningState")),
+		[form]
+	)
+
+	return (
+		<FormField
+			control={form.control}
+			name="learningState"
+			render={({ field }) => (
+				<FormItem className="space-y-0">
+					<FormLabel className="sr-only">Topic</FormLabel>
+					<Popover open={islearningStateSelectorOpen} onOpenChange={setIslearningStateSelectorOpen}>
+						<PopoverTrigger asChild>
+							<FormControl>
+								<Button size="sm" type="button" role="combobox" variant="secondary" className="gap-x-2 text-sm">
+									{selectedLearningState?.icon && (
+										<LaIcon
+											name={selectedLearningState.icon}
+											className={cn("h-4 w-4", selectedLearningState.className)}
+										/>
+									)}
+									<span className={cn("truncate", selectedLearningState?.className || "")}>
+										{selectedLearningState?.label || "Select state"}
+									</span>
+									<LaIcon name="ChevronDown" />
+								</Button>
+							</FormControl>
+						</PopoverTrigger>
+						<PopoverContent
+							className="w-52 rounded-lg p-0"
+							side="bottom"
+							align="end"
+							onCloseAutoFocus={e => e.preventDefault()}
+						>
+							<Command>
+								<CommandInput placeholder="Search state..." className="h-9" />
+								<CommandList>
+									<ScrollArea>
+										<CommandGroup>
+											{LEARNING_STATES.map(ls => (
+												<CommandItem
+													key={ls.value}
+													value={ls.value}
+													onSelect={value => {
+														field.onChange(value)
+														setIslearningStateSelectorOpen(false)
+													}}
+												>
+													<LaIcon name={ls.icon} className={cn("mr-2", ls.className)} />
+													<span className={ls.className}>{ls.label}</span>
+													<LaIcon
+														name="Check"
+														size={16}
+														className={cn(
+															"absolute right-3",
+															ls.value === field.value ? "text-primary" : "text-transparent"
+														)}
+													/>
+												</CommandItem>
+											))}
+										</CommandGroup>
+									</ScrollArea>
+								</CommandList>
+							</Command>
+						</PopoverContent>
+					</Popover>
+				</FormItem>
+			)}
+		/>
+	)
+}

web/components/routes/link/form/partial/notes-section.tsx

@@ -0,0 +1,36 @@
+import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
+import { useFormContext } from "react-hook-form"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import { LaIcon } from "@/components/custom/la-icon"
+import { LinkFormValues } from "../schema"
+
+export const NotesSection: React.FC = () => {
+	const form = useFormContext<LinkFormValues>()
+
+	return (
+		<FormField
+			control={form.control}
+			name="notes"
+			render={({ field }) => (
+				<FormItem className="relative space-y-0">
+					<FormLabel className="sr-only">Note</FormLabel>
+					<FormControl>
+						<>
+							<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+								<LaIcon name="Pencil" aria-hidden="true" className="text-muted-foreground/70 size-3" />
+							</div>
+
+							<Input
+								{...field}
+								autoComplete="off"
+								placeholder="Take a notes..."
+								className={cn("placeholder:text-muted-foreground/70 border-none pl-8 shadow-none focus-visible:ring-0")}
+							/>
+						</>
+					</FormControl>
+				</FormItem>
+			)}
+		/>
+	)
+}

web/components/routes/link/form/partial/title-input.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { useFormContext } from "react-hook-form"
+import { FormField, FormItem, FormControl, FormLabel } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { LinkFormValues } from "../schema"
+
+interface TitleInputProps {
+	urlFetched: string | null
+}
+
+export const TitleInput: React.FC<TitleInputProps> = ({ urlFetched }) => {
+	const form = useFormContext<LinkFormValues>()
+
+	return (
+		<FormField
+			control={form.control}
+			name="title"
+			render={({ field }) => (
+				<FormItem className="grow space-y-0">
+					<FormLabel className="sr-only">Title</FormLabel>
+					<FormControl>
+						<Input
+							{...field}
+							type={urlFetched ? "text" : "hidden"}
+							autoComplete="off"
+							maxLength={100}
+							autoFocus
+							placeholder="Title"
+							className="placeholder:text-muted-foreground/70 h-8 border-none p-1.5 text-[15px] font-semibold shadow-none focus-visible:ring-0"
+						/>
+					</FormControl>
+				</FormItem>
+			)}
+		/>
+	)
+}

web/components/routes/link/form/partial/topic-section.tsx

@@ -1,74 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Command, CommandInput, CommandList, CommandItem } from "@/components/ui/command"
-import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
-import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
-import { useState } from "react"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { CheckIcon, ChevronDownIcon } from "lucide-react"
-import { useFormContext } from "react-hook-form"
-import { LinkFormValues } from "../manage"
-import { cn } from "@/lib/utils"
-
-const TOPICS = [
-	{ id: "1", name: "Work" },
-	{ id: "2", name: "Personal" }
-]
-
-export const TopicSelector: React.FC = () => {
-	const form = useFormContext<LinkFormValues>()
-	const [open, setOpen] = useState(false)
-	const { setValue } = useFormContext()
-
-	return (
-		<FormField
-			control={form.control}
-			name="topic"
-			render={({ field }) => (
-				<FormItem>
-					<FormLabel className="sr-only">Topic</FormLabel>
-					<Popover open={open} onOpenChange={setOpen}>
-						<PopoverTrigger asChild>
-							<FormControl>
-								<Button size="sm" type="button" role="combobox" variant="secondary" className="!mt-0 gap-x-2 text-sm">
-									<span className="truncate">
-										{field.value ? TOPICS.find(topic => topic.name === field.value)?.name : "Select topic"}
-									</span>
-									<ChevronDownIcon size={16} />
-								</Button>
-							</FormControl>
-						</PopoverTrigger>
-						<PopoverContent className="w-52 rounded-lg p-0" side="right" align="start">
-							<Command>
-								<CommandInput placeholder="Search topic..." className="h-9" />
-								<CommandList>
-									<ScrollArea>
-										{TOPICS.map(topic => (
-											<CommandItem
-												className="cursor-pointer"
-												key={topic.id}
-												value={topic.name}
-												onSelect={value => {
-													setValue("topic", value)
-													setOpen(false)
-												}}
-											>
-												{topic.name}
-												<CheckIcon
-													size={16}
-													className={cn(
-														"absolute right-3",
-														topic.name === field.value ? "text-primary" : "text-transparent"
-													)}
-												/>
-											</CommandItem>
-										))}
-									</ScrollArea>
-								</CommandList>
-							</Command>
-						</PopoverContent>
-					</Popover>
-				</FormItem>
-			)}
-		/>
-	)
-}

web/components/routes/link/form/partial/topic-selector.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button"
+import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { CheckIcon } from "lucide-react"
+import { useFormContext } from "react-hook-form"
+import { cn } from "@/lib/utils"
+import { useAtom } from "jotai"
+import { linkTopicSelectorAtom } from "@/store/link"
+import { LinkFormValues } from "../schema"
+import { useCoState } from "@/lib/providers/jazz-provider"
+import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
+import { ID } from "jazz-tools"
+import { LaIcon } from "@/components/custom/la-icon"
+import { Topic } from "@/lib/schema"
+
+interface TopicSelectorProps {
+	onSelect?: (value: Topic) => void
+}
+
+export const TopicSelector: React.FC<TopicSelectorProps> = ({ onSelect }) => {
+	const globalGroup = useCoState(
+		PublicGlobalGroup,
+		process.env.NEXT_PUBLIC_JAZZ_GLOBAL_GROUP as ID<PublicGlobalGroup>,
+		{
+			root: {
+				topics: []
+			}
+		}
+	)
+	const [isTopicSelectorOpen, setIsTopicSelectorOpen] = useAtom(linkTopicSelectorAtom)
+	const form = useFormContext<LinkFormValues>()
+
+	const handleSelect = (value: string) => {
+		const topic = globalGroup?.root.topics.find(topic => topic?.name === value)
+		if (topic) {
+			onSelect?.(topic)
+			form?.setValue("topic", value)
+		}
+		setIsTopicSelectorOpen(false)
+	}
+
+	const selectedValue = form ? form.watch("topic") : null
+
+	return (
+		<Popover open={isTopicSelectorOpen} onOpenChange={setIsTopicSelectorOpen}>
+			<PopoverTrigger asChild>
+				<Button size="sm" type="button" role="combobox" variant="secondary" className="gap-x-2 text-sm">
+					<span className="truncate">
+						{selectedValue
+							? globalGroup?.root.topics.find(topic => topic?.id && topic.name === selectedValue)?.prettyName
+							: "Topic"}
+					</span>
+					<LaIcon name="ChevronDown" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className="z-50 w-52 rounded-lg p-0"
+				side="bottom"
+				align="end"
+				onCloseAutoFocus={e => e.preventDefault()}
+			>
+				<Command>
+					<CommandInput placeholder="Search topic..." className="h-9" />
+					<CommandList>
+						<ScrollArea>
+							<CommandGroup>
+								{globalGroup?.root.topics.map(
+									topic =>
+										topic?.id && (
+											<CommandItem key={topic.id} value={topic.name} onSelect={handleSelect}>
+												{topic.prettyName}
+												<CheckIcon
+													size={16}
+													className={cn(
+														"absolute right-3",
+														topic.name === selectedValue ? "text-primary" : "text-transparent"
+													)}
+												/>
+											</CommandItem>
+										)
+								)}
+							</CommandGroup>
+						</ScrollArea>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	)
+}

web/components/routes/link/form/partial/url-badge.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import { useFormContext } from "react-hook-form"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { LaIcon } from "@/components/custom/la-icon"
+import { LinkFormValues } from "../schema"
+
+interface UrlBadgeProps {
+	urlFetched: string | null
+	handleResetUrl: () => void
+}
+
+export const UrlBadge: React.FC<UrlBadgeProps> = ({ urlFetched, handleResetUrl }) => {
+	const form = useFormContext<LinkFormValues>()
+
+	if (!urlFetched) return null
+
+	return (
+		<div className="flex items-center gap-1.5 py-1.5">
+			<div className="flex min-w-0 flex-row items-center gap-1.5">
+				<Badge variant="secondary" className="relative truncate py-1 text-xs">
+					{form.getValues("url")}
+					<Button
+						size="icon"
+						type="button"
+						onClick={handleResetUrl}
+						className="text-muted-foreground hover:text-foreground ml-2 size-4 rounded-full bg-transparent hover:bg-transparent"
+					>
+						<LaIcon name="X" className="size-3.5" />
+					</Button>
+				</Badge>
+			</div>
+		</div>
+	)
+}

web/components/routes/link/form/partial/url-input.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { useFormContext } from "react-hook-form"
+import { FormField, FormItem, FormControl, FormLabel, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import { LinkFormValues } from "../schema"
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
+import { TooltipArrow } from "@radix-ui/react-tooltip"
+
+interface UrlInputProps {
+	urlFetched: string | null
+	fetchMetadata: (url: string) => Promise<void>
+	isFetchingUrlMetadata: boolean
+}
+
+export const UrlInput: React.FC<UrlInputProps> = ({ urlFetched, fetchMetadata, isFetchingUrlMetadata }) => {
+	const [isFocused, setIsFocused] = React.useState(false)
+	const form = useFormContext<LinkFormValues>()
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter" && form.getValues("url")) {
+			e.preventDefault()
+			fetchMetadata(form.getValues("url"))
+		}
+	}
+
+	const shouldShowTooltip = isFocused && !form.formState.errors.url && !!form.getValues("url") && !urlFetched
+
+	return (
+		<FormField
+			control={form.control}
+			name="url"
+			render={({ field }) => (
+				<FormItem
+					className={cn("grow space-y-0", {
+						"hidden select-none": urlFetched
+					})}
+				>
+					<FormLabel className="sr-only">Url</FormLabel>
+					<FormControl>
+						<TooltipProvider delayDuration={0}>
+							<Tooltip open={shouldShowTooltip && !isFetchingUrlMetadata}>
+								<TooltipTrigger asChild>
+									<Input
+										{...field}
+										type={urlFetched ? "hidden" : "text"}
+										autoComplete="off"
+										maxLength={100}
+										autoFocus
+										placeholder="Paste a link or write a link"
+										className="placeholder:text-muted-foreground/70 h-8 border-none p-1.5 text-[15px] font-semibold shadow-none focus-visible:ring-0"
+										onKeyDown={handleKeyDown}
+										onFocus={() => setIsFocused(true)}
+										onBlur={() => setIsFocused(false)}
+									/>
+								</TooltipTrigger>
+								<TooltipContent align="center" side="top">
+									<TooltipArrow className="text-primary fill-current" />
+									<span>
+										Press <kbd className="px-1.5">Enter</kbd> to fetch metadata
+									</span>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</FormControl>
+					<FormMessage className="px-1.5" />
+				</FormItem>
+			)}
+		/>
+	)
+}