Add space membership management

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Switch back to indexeddb to fix memory and performance
 * Add pay invoice functionality
+* Add room membership management and bans
 
 # 1.5.3
 

CONTEXT.md

@@ -0,0 +1,32 @@
+# Flotilla - AI Assistant Context
+
+## Project Overview
+
+Flotilla is a Discord-like Nostr client based on the concept of "relays as groups". It's built with SvelteKit, TypeScript, and Capacitor for cross-platform support (web, Android, iOS).
+
+On boot, please run `tree -I assets src` to get an idea of the project structure.
+
+## Key Dependencies
+
+`@welshman/*` libraries contain the majority of nostr-related functionality.
+`@app/core/*` contains additional app-specific data stores and commands.
+
+When creating an import statement, first identify what functionality you need. Search the codebase for components with similar functionality, and imitate their imports.
+
+## Dependency Graph (Acyclic)
+
+The project follows a strict dependency hierarchy:
+1. **External libraries** (bottom layer)
+2. **`lib/`** - Only depends on external libraries
+3. **`app/core/`** and **`app/util/`** - Can depend on `lib` only
+4. **`app/components/`** - Can depend on anything in `app` or `lib`
+5. **`routes/`** - Can depend on anything (top layer)
+
+**Import Ordering Convention:** Always sort imports by dependency level:
+1. Third-party libraries first
+2. Then `lib` imports
+3. Then `app` imports
+
+## Development Conventions
+
+When creating components related to a given space or room, parameterize them only with the entity's identifier (i.e., `url` and `h`). Only pass additional props if they can't be derived from the identifiers. For example, a room's `members` should be derived inside the child component, not passed in by the parent.

src/app/components/Chat.svelte

@@ -43,7 +43,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import ProfileList from "@app/components/ProfileList.svelte"
+  import ChatMembers from "@app/components/ChatMembers.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
   import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
@@ -72,7 +72,9 @@
   const missingInboxes = $derived(pubkeys.filter(pk => !$inboxRelaySelectionsByPubkey.has(pk)))
 
   const showMembers = () =>
-    pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
+    others.length === 1
+      ? pushModal(ProfileDetail, {pubkey: others[0]})
+      : pushModal(ChatMembers, {pubkeys: others})
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
@@ -208,19 +210,17 @@
 
 <PageBar>
   {#snippet title()}
-    <div class="flex flex-col gap-1 sm:flex-row sm:gap-2">
+    <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
       {#if others.length === 0}
         <div class="row-2">
           <ProfileCircle pubkey={$pubkey!} size={5} />
           <ProfileName pubkey={$pubkey!} />
         </div>
       {:else if others.length === 1}
-        {@const pubkey = others[0]}
+        <div class="row-2">
-        {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
+          <ProfileCircle pubkey={others[0]} size={5} />
-        <Button onclick={onClick} class="row-2">
+          <ProfileName pubkey={others[0]} />
-          <ProfileCircle {pubkey} size={5} />
+        </div>
-          <ProfileName {pubkey} />
-        </Button>
       {:else}
         <div class="flex items-center gap-2">
           <ProfileCircles pubkeys={others} size={5} />
@@ -235,26 +235,20 @@
             {/if}
           </p>
         </div>
-        {#if others.length > 2}
-          <Button onclick={showMembers} class="btn btn-link hidden sm:block"
-            >Show all members</Button>
-        {/if}
       {/if}
-    </div>
+    </Button>
   {/snippet}
   {#snippet action()}
-    <div>
+    {#if remove($pubkey, missingInboxes).length > 0}
-      {#if remove($pubkey, missingInboxes).length > 0}
+      {@const count = remove($pubkey, missingInboxes).length}
-        {@const count = remove($pubkey, missingInboxes).length}
+      {@const label = count > 1 ? "inboxes are" : "inbox is"}
-        {@const label = count > 1 ? "inboxes are" : "inbox is"}
+      <div
-        <div
+        class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
-          class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+        data-tip="{count} {label} not configured.">
-          data-tip="{count} {label} not configured.">
+        <Icon icon={Danger} />
-          <Icon icon={Danger} />
+        {count}
-          {count}
+      </div>
-        </div>
+    {/if}
-      {/if}
-    </div>
   {/snippet}
 </PageBar>
 

src/app/components/ChatMembers.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import Profile from "@app/components/Profile.svelte"
+
+  interface Props {
+    pubkeys: string[]
+  }
+
+  const {pubkeys}: Props = $props()
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>People in this conversation</div>
+    {/snippet}
+  </ModalHeader>
+  {#each pubkeys as pubkey (pubkey)}
+    <div class="card2 bg-alt">
+      <Profile {pubkey} />
+    </div>
+  {/each}
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
+</div>

src/app/components/ProfileLatest.svelte

@@ -2,8 +2,6 @@
   import type {Snippet} from "svelte"
   import {load} from "@welshman/net"
   import {NOTE} from "@welshman/util"
-  import {fly} from "@lib/transition"
-  import Spinner from "@lib/components/Spinner.svelte"
   import NoteItem from "@app/components/NoteItem.svelte"
 
   interface Props {
@@ -24,16 +22,16 @@
 <div class="col-4">
   <div class="flex flex-col gap-2">
     {#await events}
-      <p class="center my-12 flex">
+      <p class="center flex min-h-6">
-        <Spinner loading />
+        <span class="loading loading-spinner"></span>
       </p>
     {:then events}
       {#each events as event (event.id)}
-        <div in:fly>
+        <NoteItem {url} {event} />
-          <NoteItem {url} {event} />
-        </div>
       {:else}
-        {@render fallback?.()}
+        <div class="min-h-6">
+          {@render fallback?.()}
+        </div>
       {/each}
     {/await}
   </div>

src/app/components/RoomDetail.svelte

@@ -18,7 +18,7 @@
   import Confirm from "@lib/components/Confirm.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import ProfileList from "@app/components/ProfileList.svelte"
+  import RoomMembers from "@app/components/RoomMembers.svelte"
   import RoomEdit from "@app/components/RoomEdit.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
@@ -67,12 +67,7 @@
 
   const leave = () => handleLoading(leaveRoom)
 
-  const showMembers = () =>
+  const showMembers = () => pushModal(RoomMembers, {url, h})
-    pushModal(ProfileList, {
-      title: "Members",
-      subtitle: `of ${$room?.name || h}`,
-      pubkeys: $members,
-    })
 
   const startDelete = () =>
     pushModal(Confirm, {
@@ -139,12 +134,12 @@
     <p>{$room.about}</p>
   {/if}
   {#if $members.length > 0}
-    <div class="card2 card2-sm bg-alt flex gap-4">
+    <Button onclick={showMembers}>
-      <span>Members:</span>
+      <div class="card2 card2-sm bg-alt flex items-center gap-4">
-      <Button onclick={showMembers}>
+        <span>Members:</span>
         <ProfileCircles pubkeys={$members} />
-      </Button>
+      </div>
-    </div>
+    </Button>
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/app/components/RoomMembers.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import Profile from "@app/components/Profile.svelte"
+  import {deriveRoomMembers} from "@app/core/state"
+
+  interface Props {
+    url: string
+    h: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const members = deriveRoomMembers(url, h)
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Members</div>
+    {/snippet}
+    {#snippet info()}
+      <div>of <RoomName {url} {h} /></div>
+    {/snippet}
+  </ModalHeader>
+  {#each $members as pubkey (pubkey)}
+    <div class="card2 bg-alt">
+      <Profile {pubkey} />
+    </div>
+  {/each}
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
+</div>

src/app/components/SpaceDetail.svelte

@@ -34,21 +34,29 @@
 </script>
 
 <div class="column gap-4">
-  <div class="relative flex gap-4">
+  <div class="flex justify-between">
-    <div class="relative">
+    <div class="relative flex gap-4">
-      <div class="avatar relative">
+      <div class="relative">
-        <div
+        <div class="avatar relative">
-          class="center !flex h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
+          <div
-          <RelayIcon {url} size={10} />
+            class="center !flex h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            <RelayIcon {url} size={10} />
+          </div>
         </div>
       </div>
+      <div class="flex min-w-0 flex-col gap-1">
+        <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">
+          <RelayName {url} />
+        </h1>
+        <p class="ellipsize text-sm opacity-75">{displayRelayUrl(url)}</p>
+      </div>
     </div>
-    <div class="flex min-w-0 flex-col gap-1">
+    {#if $userIsAdmin}
-      <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">
+      <Button class="btn btn-primary" onclick={startEdit}>
-        <RelayName {url} />
+        <Icon icon={Pen} />
-      </h1>
+        Edit
-      <p class="ellipsize text-sm opacity-75">{displayRelayUrl(url)}</p>
+      </Button>
-    </div>
+    {/if}
   </div>
   <RelayDescription {url} />
   {#if $relay?.terms_of_service || $relay?.privacy_policy}
@@ -83,18 +91,10 @@
       </div>
     {/if}
   </div>
-  {#if $userIsAdmin}
+  <ModalFooter>
-    <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
-      <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
-        <Icon icon={AltArrowLeft} />
+      Go back
-        Go back
+    </Button>
-      </Button>
+  </ModalFooter>
-      <Button class="btn btn-primary" onclick={startEdit}>
-        <Icon icon={Pen} />
-        Edit Space
-      </Button>
-    </ModalFooter>
-  {:else}
-    <Button class="btn btn-primary" onclick={back}>Got it</Button>
-  {/if}
 </div>

src/app/components/SpaceMembers.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import {displayRelayUrl, ManagementMethod} from "@welshman/util"
+  import {manageRelay} from "@welshman/app"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {fly} from "@lib/transition"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Profile from "@app/components/Profile.svelte"
+  import SpaceMembersAdd from "@app/components/SpaceMembersAdd.svelte"
+  import SpaceMembersBanned from "@app/components/SpaceMembersBanned.svelte"
+  import {
+    deriveSpaceMembers,
+    deriveSpaceBannedPubkeyItems,
+    deriveUserIsSpaceAdmin,
+  } from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  interface Props {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const members = deriveSpaceMembers(url)
+  const bans = deriveSpaceBannedPubkeyItems(url)
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+
+  const back = () => history.back()
+
+  const toggleMenu = (pubkey: string) => {
+    menuPubkey = menuPubkey === pubkey ? null : pubkey
+  }
+
+  const closeMenu = () => {
+    menuPubkey = null
+  }
+
+  const showBannedPubkeyItems = () => pushModal(SpaceMembersBanned, {url})
+
+  const addMember = () => pushModal(SpaceMembersAdd, {url})
+
+  const banMember = (pubkey: string) =>
+    pushModal(Confirm, {
+      title: "Ban User",
+      message: "Are you sure you want to ban this user from the space?",
+      confirm: async () => {
+        const {error} = await manageRelay(url, {
+          method: ManagementMethod.BanPubkey,
+          params: [pubkey],
+        })
+
+        if (error) {
+          pushToast({theme: "error", message: error})
+        } else {
+          pushToast({message: "User has successfully been banned!"})
+          back()
+        }
+      },
+    })
+
+  let menuPubkey = $state<string | null>(null)
+</script>
+
+<div class="column gap-4">
+  <div class="flex min-w-0 flex-col gap-1">
+    <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">Members</h1>
+    <p class="ellipsize text-sm opacity-75">of {displayRelayUrl(url)}</p>
+  </div>
+  {#if $userIsAdmin}
+    <div class="flex gap-2">
+      <Button class="btn btn-primary" onclick={addMember}>
+        <Icon icon={AddCircle} />
+        Add members
+      </Button>
+      {#if $bans.length > 0}
+        <Button class="btn btn-neutral" onclick={showBannedPubkeyItems}>
+          Banned users ({$bans.length})
+        </Button>
+      {/if}
+    </div>
+  {/if}
+  {#each $members as pubkey (pubkey)}
+    <div class="card2 bg-alt relative">
+      <div class="flex items-center justify-between gap-2">
+        <div class="min-w-0 flex-1">
+          <Profile {pubkey} {url} />
+        </div>
+        <div class="relative">
+          <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+            <Icon icon={MenuDots} />
+          </Button>
+          {#if menuPubkey === pubkey}
+            <Popover hideOnClick onClose={closeMenu}>
+              <ul
+                transition:fly
+                class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                <li>
+                  <Button class="text-error" onclick={() => banMember(pubkey)}>
+                    <Icon icon={MinusCircle} />
+                    Ban User
+                  </Button>
+                </li>
+              </ul>
+            </Popover>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/each}
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+  </ModalFooter>
+</div>

src/app/components/SpaceMembersAdd.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {displayRelayUrl, ManagementMethod} from "@welshman/util"
+  import {manageRelay} from "@welshman/app"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
+  import {pushToast} from "@app/util/toast"
+
+  interface Props {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const back = () => history.back()
+
+  const addMember = async () => {
+    loading = true
+
+    try {
+      const results = await Promise.all(
+        pubkeys.map(pubkey =>
+          manageRelay(url, {
+            method: ManagementMethod.AllowPubkey,
+            params: [pubkey],
+          }),
+        ),
+      )
+
+      for (const {error} of results) {
+        if (error) {
+          return pushToast({theme: "error", message: error})
+        }
+      }
+
+      pushToast({message: "User has successfully been added!"})
+      back()
+    } finally {
+      loading = false
+    }
+  }
+
+  let loading = $state(false)
+  let pubkeys: string[] = $state([])
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Add Members</div>
+    {/snippet}
+    {#snippet info()}
+      <div>to {displayRelayUrl(url)}</div>
+    {/snippet}
+  </ModalHeader>
+  <Field>
+    {#snippet label()}
+      <p>Search for Members</p>
+    {/snippet}
+    {#snippet input()}
+      <ProfileMultiSelect bind:value={pubkeys} />
+    {/snippet}
+  </Field>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" onclick={addMember} disabled={loading}>
+      <Spinner {loading}>Save changes</Spinner>
+    </Button>
+  </ModalFooter>
+</div>

src/app/components/SpaceMembersBanned.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import {displayRelayUrl, ManagementMethod} from "@welshman/util"
+  import {manageRelay} from "@welshman/app"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import Restart from "@assets/icons/restart.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {fly} from "@lib/transition"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Profile from "@app/components/Profile.svelte"
+  import {deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+
+  interface Props {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const bans = deriveSpaceBannedPubkeyItems(url)
+
+  const back = () => history.back()
+
+  const toggleMenu = (pubkey: string) => {
+    menuPubkey = menuPubkey === pubkey ? null : pubkey
+  }
+
+  const closeMenu = () => {
+    menuPubkey = null
+  }
+
+  const restoreMember = async (pubkey: string) => {
+    const {error} = await manageRelay(url, {
+      method: ManagementMethod.AllowPubkey,
+      params: [pubkey],
+    })
+
+    if (error) {
+      pushToast({theme: "error", message: error})
+    } else {
+      pushToast({message: "User has successfully been restored!"})
+      back()
+    }
+  }
+
+  let menuPubkey = $state<string | null>(null)
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Banned users</div>
+    {/snippet}
+    {#snippet info()}
+      <div>on {displayRelayUrl(url)}</div>
+    {/snippet}
+  </ModalHeader>
+  {#each $bans as { pubkey, reason } (pubkey)}
+    <div class="card2 bg-alt relative">
+      <div class="flex items-center justify-between gap-2">
+        <div class="min-w-0 flex-1">
+          <Profile {pubkey} {url} />
+        </div>
+        <div class="relative">
+          <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+            <Icon icon={MenuDots} />
+          </Button>
+          {#if menuPubkey === pubkey}
+            <Popover hideOnClick onClose={closeMenu}>
+              <ul
+                transition:fly
+                class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                <li>
+                  <Button onclick={() => restoreMember(pubkey)}>
+                    <Icon icon={Restart} />
+                    Restore User
+                  </Button>
+                </li>
+              </ul>
+            </Popover>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/each}
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Got it
+    </Button>
+  </ModalFooter>
+</div>

src/app/components/SpaceMenu.svelte

@@ -32,7 +32,7 @@
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RelayName from "@app/components/RelayName.svelte"
-  import ProfileList from "@app/components/ProfileList.svelte"
+  import SpaceMembers from "@app/components/SpaceMembers.svelte"
   import AlertAdd from "@app/components/AlertAdd.svelte"
   import Alerts from "@app/components/Alerts.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
@@ -83,12 +83,7 @@
 
   const showDetail = () => pushModal(SpaceDetail, {url}, {replaceState})
 
-  const showMembers = () =>
+  const showMembers = () => pushModal(SpaceMembers, {url}, {replaceState})
-    pushModal(
-      ProfileList,
-      {url, pubkeys: $members, title: `Members of`, subtitle: displayRelayUrl(url)},
-      {replaceState},
-    )
 
   const canCreateRoom = deriveUserCanCreateRoom(url)
 

src/app/core/state.ts

@@ -752,6 +752,24 @@ export const deriveSpaceMembers = (url: string) =>
     },
   )
 
+export type BannedPubkeyItem = {
+  pubkey: string
+  reason: string
+}
+
+export const spaceBannedPubkeyItems = new Map<string, BannedPubkeyItem[]>()
+
+export const deriveSpaceBannedPubkeyItems = (url: string) => {
+  const store = writable(spaceBannedPubkeyItems.get(url) || [])
+
+  manageRelay(url, {method: ManagementMethod.ListBannedPubkeys, params: []}).then(res => {
+    spaceBannedPubkeyItems.set(url, res.result)
+    store.set(res.result)
+  })
+
+  return store
+}
+
 export const deriveRoomMembers = (url: string, h: string) =>
   derived(
     deriveEventsForUrl(url, [
@@ -806,7 +824,7 @@ export enum MembershipStatus {
   Granted,
 }
 
-export const deriveUserIsSpaceAdmin = (url: string) => {
+export const deriveUserIsSpaceAdmin = memoize((url: string) => {
   const store = writable(false)
 
   manageRelay(url, {method: ManagementMethod.SupportedMethods, params: []}).then(res =>
@@ -814,7 +832,7 @@ export const deriveUserIsSpaceAdmin = (url: string) => {
   )
 
   return store
-}
+})
 
 export const deriveUserSpaceMembershipStatus = (url: string) =>
   derived(

src/lib/components/Dialog.svelte

@@ -16,7 +16,7 @@
       cx(
         "bg-alt text-base-content overflow-auto text-base-content shadow-md",
         "px-4 py-6 bottom-0 left-0 right-0 top-20 rounded-t-box absolute",
-        "sm:p-6 sm:max-h-[90vh] sm:w-[520px] sm:rounded-box sm:relative sm:top-0",
+        "sm:p-6 sm:max-h-[90vh] sm:w-[520px] sm:rounded-box sm:relative sm:top-0 sm:relative",
       ),
   )
 </script>
@@ -28,7 +28,7 @@
     transition:fade={{duration: 300}}
     onclick={onClose}>
   </button>
-  <div class="scroll-container relative {extraClass}" transition:fly={{duration: 300}}>
+  <div class="scroll-container {extraClass}" transition:fly={{duration: 300}}>
     {@render children?.()}
   </div>
 </div>

src/lib/indexeddb.ts

@@ -27,15 +27,14 @@ export type IDBOptions = {
 
 export class IDB {
   idbp: Maybe<Promise<IDBPDatabase>>
-  ready: Maybe<Promise<void>>
   unsubscribers: Maybe<Unsubscriber[]>
   status = IDBStatus.Initial
 
   constructor(readonly options: IDBOptions) {}
 
-  init(adapters: IDBAdapters) {
+  async init(adapters: IDBAdapters) {
-    if (this.status !== IDBStatus.Initial) {
+    if (this.idbp) {
-      throw new Error(`Database re-initialized while ${this.status}`)
+      await this.close()
     }
 
     this.status = IDBStatus.Opening
@@ -62,7 +61,7 @@ export class IDB {
       blocking() {},
     })
 
-    this.ready = this.idbp.then(async idbp => {
+    return this.idbp.then(async idbp => {
       window.addEventListener("beforeunload", () => idbp.close())
 
       this.unsubscribers = await Promise.all(adapters.map(({name, init}) => init(this.table(name))))
@@ -132,13 +131,9 @@ export class IDB {
 
       await idbp.close()
 
-      // Allow the caller to call reset and re-init immediately
+      this.idbp = undefined
-      if (this.status === IDBStatus.Closing) {
+      this.unsubscribers = undefined
-        this.idbp = undefined
+      this.status = IDBStatus.Closed
-        this.ready = undefined
-        this.unsubscribers = undefined
-        this.status = IDBStatus.Closed
-      }
     })
 
   clear = async () => {
@@ -147,14 +142,6 @@ export class IDB {
       blocked() {},
     })
   }
-
-  reset = () => {
-    if (![IDBStatus.Closing, IDBStatus.Closed].includes(this.status)) {
-      throw new Error("Database reset when not closed")
-    }
-
-    this.status = IDBStatus.Initial
-  }
 }
 
 export class IDBTable<T> {

src/routes/+layout.svelte

@@ -113,12 +113,6 @@
     // Wait until data storage is initialized before syncing other stuff
     await db.init(storage.adapters)
 
-    // Close DB and restart when we're done
-    unsubscribers.push(() => {
-      db.close()
-      db.reset()
-    })
-
     // Add our extra policies now that we're set up
     defaultSocketPolicies.push(...policies)