re-work space menu

src/routes/chat/+page.svelte

@@ -46,7 +46,8 @@
   <div class="row-2 min-w-0 flex-grow items-center">
     <label class="input input-bordered flex flex-grow items-center gap-2">
       <Icon icon="magnifer" />
-      <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
+      <!-- svelte-ignore a11y-autofocus -->
+      <input autofocus bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
     </label>
     <Button class="btn btn-primary" on:click={startChat}>
       <Icon icon="add-circle" />

src/routes/people/+page.svelte

@@ -31,7 +31,8 @@
   <div class="content col-2" bind:this={element}>
     <label class="input input-bordered flex w-full items-center gap-2">
       <Icon icon="magnifer" />
-      <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
+      <!-- svelte-ignore a11y-autofocus -->
+      <input autofocus bind:value={term} class="grow" type="text" placeholder="Search for people..." />
     </label>
     {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
       <PeopleItem {pubkey} />

src/routes/spaces/[relay]/+layout.svelte

@@ -1,165 +1,23 @@
 <script lang="ts">
-  import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {displayRelayUrl} from "@welshman/util"
-  import {fly, slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Delay from "@lib/components/Delay.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Popover from "@lib/components/Popover.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
-  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
-  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
-  import SpaceInvite from "@app/components/SpaceInvite.svelte"
-  import SpaceExit from "@app/components/SpaceExit.svelte"
-  import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import RoomCreate from "@app/components/RoomCreate.svelte"
-  import {
-    getMembershipRoomsByUrl,
-    getMembershipUrls,
-    userMembership,
-    roomsByUrl,
-    decodeRelay,
-    GENERAL,
-  } from "@app/state"
-  import {checkRelayConnection, checkRelayAuth} from "@app/commands"
-  import {pushModal} from "@app/modal"
-  import {pushToast} from "@app/toast"
-  import {makeSpacePath} from "@app/routes"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import {decodeRelay} from "@app/state"
+  import {pushDrawer} from "@app/modal"
 
-  const openMenu = () => {
-    showMenu = true
-  }
-
-  const toggleMenu = () => {
-    showMenu = !showMenu
-  }
-
-  const createInvite = () => pushModal(SpaceInvite, {url})
-
-  const leaveSpace = () => pushModal(SpaceExit, {url})
-
-  const joinSpace = () => pushModal(SpaceJoin, {url})
-
-  const addRoom = () => pushModal(RoomCreate, {url})
-
-  const getDelay = (reset = false) => {
-    if (reset) {
-      delay = 0
-    } else {
-      delay += 50
-    }
-
-    return delay
-  }
-
-  let delay = 0
-  let showMenu = false
+  const openMenu = () => pushDrawer(MenuSpace, {url})
 
   $: url = decodeRelay($page.params.relay)
-  $: rooms = getMembershipRoomsByUrl(url, $userMembership)
-  $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
-
-  onMount(async () => {
-    const error = (await checkRelayConnection(url)) || (await checkRelayAuth(url))
-
-    if (error) {
-      pushToast({theme: "error", message: error})
-    }
-  })
 </script>
 
 {#key url}
   <Delay>
     <SecondaryNav>
-      <SecondaryNavSection>
-        <div>
-          <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-            <strong>{displayRelayUrl(url)}</strong>
-            <Icon icon="alt-arrow-down" />
-          </SecondaryNavItem>
-          {#if showMenu}
-            <Popover hideOnClick onClose={toggleMenu}>
-              <ul
-                transition:fly
-                class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-                <li>
-                  <Button on:click={createInvite}>
-                    <Icon icon="link-round" />
-                    Create Invite
-                  </Button>
-                </li>
-                {#if !import.meta.env.VITE_PLATFORM_RELAY}
-                  <li>
-                    {#if getMembershipUrls($userMembership).includes(url)}
-                      <Button on:click={leaveSpace} class="text-error">
-                        <Icon icon="exit" />
-                        Leave Space
-                      </Button>
-                    {:else}
-                      <Button on:click={joinSpace}>
-                        <Icon icon="login-2" />
-                        Join Space
-                      </Button>
-                    {/if}
-                  </li>
-                {/if}
-              </ul>
-            </Popover>
-          {/if}
-        </div>
-        <div in:fly={{delay: getDelay(true)}}>
-          <SecondaryNavItem href={makeSpacePath(url, "threads")}>
-            <Icon icon="notes-minimalistic" /> Threads
-          </SecondaryNavItem>
-        </div>
-        <div transition:slide={{delay: getDelay()}}>
-          <div class="h-2" />
-          <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-        </div>
-        <div transition:slide={{delay: getDelay()}}>
-          <SecondaryNavItem href={makeSpacePath(url)}>
-            <Icon icon="hashtag" />
-            {GENERAL}
-          </SecondaryNavItem>
-        </div>
-        {#each rooms as room, i (room)}
-          <div transition:slide={{delay: getDelay()}}>
-            <SecondaryNavItem href={makeSpacePath(url, room)}>
-              <Icon icon="hashtag" />
-              {room}
-            </SecondaryNavItem>
-          </div>
-        {/each}
-        {#if otherRooms.length > 0}
-          <div transition:slide={{delay: getDelay()}}>
-            <div class="h-2" />
-            <SecondaryNavHeader>
-              {#if rooms.length > 0}
-                Other Rooms
-              {:else}
-                Rooms
-              {/if}
-            </SecondaryNavHeader>
-          </div>
-        {/if}
-        {#each otherRooms as room, i (room)}
-          <div transition:slide={{delay: getDelay()}}>
-            <SecondaryNavItem href={makeSpacePath(url, room)}>
-              <Icon icon="hashtag" />
-              {room}
-            </SecondaryNavItem>
-          </div>
-        {/each}
-        <div in:fly={{delay: getDelay()}}>
-          <SecondaryNavItem on:click={addRoom}>
-            <Icon icon="add-circle" />
-            Create room
-          </SecondaryNavItem>
-        </div>
-      </SecondaryNavSection>
+      <MenuSpace {url} />
     </SecondaryNav>
     <Page>
       {#key $page.params.room}
@@ -168,3 +26,9 @@
     </Page>
   </Delay>
 {/key}
+
+<div class="fixed right-7 top-7 z-feature md:hidden">
+  <Button on:click={openMenu}>
+    <Icon icon="menu-dots" />
+  </Button>
+</div>

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -26,7 +26,7 @@
   const getStart = (event: TrustedEvent) =>
     parseInt(event.tags.find(t => t[0] === "start")?.[1] || "")
 
-  let limit = 5
+  const limit = 5
   let loading = true
 
   type Item = {