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>
2026-01-12 12:20:23 +01:00 · 2024-08-26 19:35:00 +07:00
parent 7cbfcc705b
commit 2d270706a5
77 changed files with 3002 additions and 1327 deletions
--- a/web/components/routes/link/form/partial/topic-selector.tsx
+++ b/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>
+	)
+}