fix: detail topic (#117)

* feat: keyboard nav * fix: link update * feat: reusable learning state * chore: use new learning state * feat: add to my profile * . * . * feat: on enter open the link * fix: lint * fix: use eslint v8 instead of v9 * fix: add to my profile * chore: update personal link schema * chore: update personal page schema * fix: update detail wrapper * fix: update page section * removing option for learning status * removing option for learning status for topic * feat: add createdAt and updatedAt for personal Page * chore: update page section component * chore: remove chevron from sub menu * fix: sidebar * chore: add focus and disable toast * feat: la editor add execption for no command class * fix: la editor style and fix page detail * fix: title * fix: topic learning state * chore: add showSearch for learning state * fix: bunch stuff * chore: link list and item handle learning state * chore: set expand to false * feat: personal link for topic detail * chore: hook use topic data * chore: go to list * fix: link and topic * feat(utils): new keyboard utils * feat(store): add linkOpenPopoverForIdAtom for link * chore: using memo for use topic data * fix: remove duplicate component * chore: performance for topic detail lint item * refactor: remove LinkOptions component * chore: improve performance for list * feat: added LinkRoute copmonent * chore: link manage * feat: bottom bar * fix: link * fix: page wrapper * fix: import thing * chore: added a displayname * refactor: page detail * refactor: page detail * fix: add topic to personal link form link * fix: only show page count if more than zero * fix: sidebar topic section --------- Co-authored-by: Nikita <github@nikiv.dev> Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
2026-04-27 02:38:45 +02:00 · 2024-08-29 02:48:48 +07:00
parent 94a63bd79b
commit 9e89959dd4
50 changed files with 1667 additions and 1000 deletions
--- a/web/components/routes/link/partials/form/url-input.tsx
+++ b/web/components/routes/link/partials/form/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>
+			)}
+		/>
+	)
+}