Migrate to native Node.js file access and improve UI

packages/web/src/App.tsx

@@ -1,40 +1,26 @@
 import { useCallback, useState } from "react"
-import type { Vault } from "opvault.js"
-import { OnePassword } from "opvault.js"
-import { getBrowserAdapter } from "opvault.js/src/adapters/browser"
+import type { Vault, OnePassword } from "opvault.js"
 import { VaultView } from "./pages/Vault"
-import { PickOPVault } from "./pages/PickOPVault"
-import { Unlock } from "./pages/Unlock"
+import { VaultPicker } from "./pages/VaultPicker"
 
 export const App: React.FC = () => {
   const [instance, setInstance] = useState<OnePassword>()
   const [vault, setVault] = useState<Vault>()
 
-  const unlock = useCallback(
-    async (profile: string, password: string) => {
-      const vault = await instance!.getProfile(profile!)
-      await vault.unlock(password)
-      setVault(vault)
-    },
-    [instance]
-  )
-
-  const setHandle = useCallback(async (handle: FileSystemDirectoryHandle) => {
-    const adapter = getBrowserAdapter(handle)
-    const instance = new OnePassword({ path: "/", adapter })
-    setInstance(instance)
-  }, [])
-
   const onLock = useCallback(() => {
     vault?.lock()
     setVault(undefined)
   }, [vault])
 
-  if (!instance) {
-    return <PickOPVault setHandle={setHandle} />
-  }
   if (!vault) {
-    return <Unlock instance={instance} onUnlock={unlock} />
+    return (
+      <VaultPicker
+        instance={instance}
+        setInstance={setInstance}
+        vault={vault}
+        setVault={setVault}
+      />
+    )
   }
 
   return (