wip: implement bookmark preview

packages/web/src/components/dialog.tsx

@@ -17,7 +17,7 @@ function DialogTitle({ children }: React.PropsWithChildren) {
 }
 
 function DialogBody({ children }: React.PropsWithChildren) {
-	return <div className="m-8 w-full text-center">{children}</div>
+	return <div className="p-8 w-full text-center">{children}</div>
 }
 
 function DialogActionRow({ children }: React.PropsWithChildren) {

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

@@ -9,17 +9,31 @@ interface FormFieldProps {
 	className?: string
 	labelClassName?: string
 	required?: boolean
+	autoFocus?: boolean
+	ref?: React.Ref<HTMLInputElement>
 }
 
-function FormField({ name, label, type, className, labelClassName, required = false }: FormFieldProps) {
+function FormField({
+	name,
+	label,
+	type,
+	className,
+	labelClassName,
+	required = false,
+	autoFocus = false,
+	ref,
+}: 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=""
 				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"
 			/>