refactor: remove all legacy files

+ comment/delete things that haven't yet migrated to mantine

inertia/components/form/form_link.tsx

@@ -1,11 +1,9 @@
+import { Checkbox, Select, TextInput } from '@mantine/core';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import Checkbox from '~/components/common/form/checkbox';
-import Selector from '~/components/common/form/selector';
-import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
-import FormLayout from '~/components/layouts/form_layout';
 import useSearchParam from '~/hooks/use_search_param';
+import { FormLayout, FormLayoutProps } from '~/layouts/form_layout';
 import { Collection } from '~/types/app';
 
 export type FormLinkData = {
@@ -16,32 +14,24 @@ export type FormLinkData = {
 	collectionId: Collection['id'];
 };
 
-interface FormLinkProps {
-	title: string;
-	canSubmit: boolean;
-	disableHomeLink?: boolean;
+interface FormLinkProps extends FormLayoutProps {
 	data: FormLinkData;
 	errors?: Record<string, Array<string>>;
 	collections: Collection[];
 	disableInputs?: boolean;
-	submitBtnDanger?: boolean;
 
 	setData: (name: string, value: any) => void;
 	handleSubmit: () => void;
 }
 
-export default function FormLink({
-	title,
-	canSubmit,
-	disableHomeLink,
+export default function MantineFormLink({
 	data,
 	errors,
 	collections,
 	disableInputs = false,
-	submitBtnDanger = false,
-
 	setData,
 	handleSubmit,
+	...props
 }: FormLinkProps) {
 	const { t } = useTranslation('common');
 	const collectionId =
@@ -53,64 +43,59 @@ export default function FormLink({
 	};
 
 	return (
-		<FormLayout
-			title={title}
-			handleSubmit={onSubmit}
-			canSubmit={canSubmit}
-			disableHomeLink={disableHomeLink}
-			collectionId={collectionId}
-			submitBtnDanger={submitBtnDanger}
-		>
-			<BackToDashboard>
-				<TextBox
-					label={t('link.name')}
-					placeholder={t('link.name')}
-					name="name"
-					onChange={setData}
+		<FormLayout handleSubmit={onSubmit} collectionId={collectionId} {...props}>
+			<BackToDashboard disabled={props.disableHomeLink}>
+				<TextInput
+					label={t('form.name')}
+					placeholder={t('form.name')}
+					onChange={({ target }) => setData('name', target.value)}
 					value={data.name}
-					errors={errors?.name}
-					disabled={disableInputs}
-					required
+					readOnly={disableInputs}
+					error={errors?.name}
+					mt="md"
 					autoFocus
-				/>
-				<TextBox
-					label={t('link.link')}
-					placeholder={t('link.link')}
-					name="url"
-					onChange={setData}
-					value={data.url}
-					errors={errors?.url}
-					disabled={disableInputs}
 					required
 				/>
-				<TextBox
-					label={t('link.description')}
-					placeholder={t('link.description')}
-					name="description"
-					onChange={setData}
-					value={data.description ?? undefined}
-					errors={errors?.description}
-					disabled={disableInputs}
+				<TextInput
+					label={t('form.url')}
+					placeholder={t('form.url')}
+					onChange={({ target }) => setData('url', target.value)}
+					value={data.url ?? undefined}
+					readOnly={disableInputs}
+					error={errors?.link}
+					mt="md"
+					required
 				/>
-				<Selector
+				<TextInput
+					label={t('form.description')}
+					placeholder={t('form.description')}
+					onChange={({ target }) => setData('description', target.value)}
+					value={data.description ?? undefined}
+					readOnly={disableInputs}
+					error={errors?.description}
+					mt="md"
+				/>
+				<Select
 					label={t('collection.collections')}
-					name="collection"
 					placeholder={t('collection.collections')}
-					value={data.collectionId}
-					onChangeCallback={(value) => setData('collectionId', value)}
-					options={collections.map(({ id, name }) => ({
+					data={collections.map(({ id, name }) => ({
 						label: name,
-						value: id,
+						value: id.toString(),
 					}))}
+					onChange={(value) => setData('collectionId', value)}
+					value={data.collectionId.toString()}
+					readOnly={disableInputs}
+					mt="md"
+					searchable
 					required
 				/>
 				<Checkbox
 					label={t('favorite')}
-					name="favorite"
-					onChange={setData}
+					onChange={({ target }) => setData('favorite', target.checked)}
 					checked={data.favorite}
-					errors={errors?.favorite}
-					disabled={disableInputs}
+					error={errors?.favorite}
+					disabled={disableInputs} // readonly not working
+					mt="md"
 				/>
 			</BackToDashboard>
 		</FormLayout>