implement bookmark tagging

packages/web/src/components/form-field.tsx

@@ -2,7 +2,8 @@ import { clsx } from "clsx"
 import { useId } from "react"
 import { twMerge } from "tailwind-merge"
 
-interface FormFieldProps {
+interface FormFieldProps
+	extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
 	name: string
 	label: string
 	type: React.HTMLInputTypeAttribute
@@ -11,31 +12,20 @@ interface FormFieldProps {
 	required?: boolean
 	autoFocus?: boolean
 	ref?: React.Ref<HTMLInputElement>
+	value?: string
 }
 
-function FormField({
-	name,
-	label,
-	type,
-	className,
-	labelClassName,
-	required = false,
-	autoFocus = false,
-	ref,
-}: FormFieldProps) {
+function FormField({ label, className, labelClassName, ref, value, ...inputProps }: FormFieldProps) {
 	const id = useId()
 	return (
 		<div className={clsx("flex flex-col-reverse focus:text-teal-600", className)}>
 			<input
 				ref={ref}
 				id={id}
-				required={required}
-				name={name}
-				type={type}
-				// biome-ignore lint/a11y/noAutofocus: <explanation>
-				autoFocus={autoFocus}
-				defaultValue=""
+				defaultValue={value !== undefined ? undefined : ""}
+				value={value}
 				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 dark:border-stone-200 focus:border-teal-600 focus:ring-0 focus:outline-none"
+				{...inputProps}
 			/>
 			<label
 				htmlFor={id}

packages/web/src/components/with-query.tsx

@@ -0,0 +1,9 @@
+import { useQuery, type QueryOptions } from "@tanstack/react-query"
+import type { QueryKey } from "~/api"
+
+interface WithQueryProps<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>
+	extends QueryOptions<TQueryFnData, TError, TQueryKey> {}
+
+function WithQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: React.PropsWithChildren<QueryOptions<TQueryFnData, TData, TQueryKey>>) {
+	useQuery(options)
+}