refactor: split modules and harden scraping workflows

web/src/components/PinDialog.tsx

@@ -1,28 +1,13 @@
 import { FormEvent, useState } from 'react'
-import { createRoot } from 'react-dom/client'
 import { LockKeyhole } from 'lucide-react'
 
-type PinOptions = {
+export type PinOptions = {
   title?: string
   message?: string
   profileName: string
 }
 
-export function requestPIN(options: PinOptions): Promise<string | null> {
-  return new Promise((resolve) => {
-    const host = document.createElement('div')
-    document.body.appendChild(host)
-    const root = createRoot(host)
-    const close = (value: string | null) => {
-      root.unmount()
-      host.remove()
-      resolve(value)
-    }
-    root.render(<PinDialog options={options} onClose={close} />)
-  })
-}
-
-function PinDialog({
+export function PinDialog({
   options,
   onClose,
 }: {