Add web interface and tests

packages/web/src/App.tsx

@@ -0,0 +1,45 @@
+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 { VaultView } from "./pages/Vault"
+import { PickOPVault } from "./pages/PickOPVault"
+import { Unlock } from "./pages/Unlock"
+
+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 (
+    <div>
+      <VaultView onLock={onLock} vault={vault} />
+    </div>
+  )
+}