feat: make the modal and dropdown more workable

app/components/Dropdown.tsx

@@ -7,6 +7,7 @@ type Properties = {
 	readonly button: ReactNode;
 	// eslint-disable-next-line unicorn/no-keyword-prefix
 	readonly className?: string;
+	readonly width?: string;
 }
 
 function Dropdown(properties: Properties) {
@@ -26,12 +27,13 @@ function Dropdown(properties: Properties) {
 					leaveTo='transform opacity-0 scale-95'
 				>
 					<Menu.Items className={clsx(
-						'absolute right-0 w-fit max-w-36 mt-2 rounded-md',
+						'absolute right-0 mt-2 rounded-md',
 						'text-gray-700 dark:text-gray-300',
-						'bg-white dark:bg-zinc-800 text-right',
+						'bg-white dark:bg-zinc-800',
 						'overflow-hidden z-50',
 						'border border-gray-200 dark:border-zinc-700',
-						'divide-y divide-gray-200 dark:divide-zinc-700'
+						'divide-y divide-gray-200 dark:divide-zinc-700',
+						properties.width ?? 'w-36'
 					)}
 					>
 						{properties.children}
@@ -66,7 +68,7 @@ function Item(properties: ItemProperties) {
 				<div
 					{...properties}
 					className={clsx(
-						'px-4 py-2 w-full text-right',
+						'px-4 py-2 w-full',
 						'focus:outline-none focus:ring',
 						'focus:ring-gray-300 dark:focus:ring-zinc-700',
 						properties.className,

app/components/Modal.tsx

@@ -14,36 +14,60 @@ type HookParameters = {
 
 	// Optional because the button submits
 	onConfirm?: () => void | Promise<void>;
+	onOpen?: () => void | Promise<void>;
+	onClose?: () => void | Promise<void>;
 }
 
+type Overrides = Omit<HookParameters, 'onOpen' | 'onClose'>
+
 type Properties = {
 	readonly isOpen: boolean;
 	readonly setIsOpen: (value: SetStateAction<boolean>) => void;
-	readonly parameters: HookParameters;
+	readonly parameters?: HookParameters;
 }
 
-export default function useModal(properties: HookParameters) {
+export default function useModal(properties?: HookParameters) {
 	const [isOpen, setIsOpen] = useState(false)
+	const [liveProperties, setLiveProperties] = useState(properties)
+
 	return {
 		Modal: (
 			<Modal
 				isOpen={isOpen}
 				setIsOpen={setIsOpen}
-				parameters={properties}
+				parameters={liveProperties}
 			/>
 		),
 
-		open: () => {
+		open: (overrides?: Overrides) => {
+			if (!overrides && !properties) {
+				throw new Error('No properties provided')
+			}
+
 			setIsOpen(true)
+			if (properties?.onOpen) {
+				void properties.onOpen()
+			}
+
+			if (overrides) {
+				setLiveProperties(overrides)
+			}
 		},
 
 		close: () => {
 			setIsOpen(false)
+			if (properties?.onClose) {
+				void properties.onClose()
+			}
 		}
 	}
 }
 
 function Modal({ parameters, isOpen, setIsOpen }: Properties) {
+	if (!parameters) {
+		return
+	}
+
 	return (
 		<Transition
 			show={isOpen}