From ced1f55cdbe912ba0cd354b19a2bd0e65ceea96f Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 21 Oct 2024 14:35:12 -0700
Subject: [PATCH] re-work space menu

---
 src/app/components/MenuSpace.svelte           | 155 +++++++++++++++++
 src/app/components/MenuSpaces.svelte          | 163 ++++--------------
 src/routes/chat/+page.svelte                  |   3 +-
 src/routes/people/+page.svelte                |   3 +-
 src/routes/spaces/[relay]/+layout.svelte      | 158 ++---------------
 .../spaces/[relay]/calendar/+page.svelte      |   2 +-
 6 files changed, 201 insertions(+), 283 deletions(-)
 create mode 100644 src/app/components/MenuSpace.svelte

diff --git a/src/app/components/MenuSpace.svelte b/src/app/components/MenuSpace.svelte
new file mode 100644
index 0000000..7b57a99
--- /dev/null
+++ b/src/app/components/MenuSpace.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {displayRelayUrl} from "@welshman/util"
+  import {fly, slide} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.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,
+    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"
+
+  export let url
+
+  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
+
+  $: 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>
+
+<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>
diff --git a/src/app/components/MenuSpaces.svelte b/src/app/components/MenuSpaces.svelte
index d69e2a2..0d7ee03 100644
--- a/src/app/components/MenuSpaces.svelte
+++ b/src/app/components/MenuSpaces.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {page} from "$app/stores"
-  import {displayRelayUrl} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -9,150 +7,49 @@
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import SpaceExit from "@app/components/SpaceExit.svelte"
-  import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import RoomCreate from "@app/components/RoomCreate.svelte"
   import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
-  import {
-    GENERAL,
-    userMembership,
-    decodeRelay,
-    getMembershipRoomsByUrl,
-    getMembershipUrls,
-    roomsByUrl,
-  } from "@app/state"
+  import {userMembership, getMembershipUrls} from "@app/state"
   import {makeSpacePath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
-  let space = $page.params?.relay ? decodeRelay($page.params?.relay) : undefined
-  let showSettings = false
-
-  const assertNotNil = <T,>(x: T) => x!
-
   const startCreate = () => pushModal(SpaceCreateExternal)
 
   const startJoin = () => pushModal(SpaceInviteAccept)
-
-  const resetSpace = () => {
-    space = ""
-  }
-
-  const setSpace = (url: string) => {
-    space = url
-  }
-
-  const openSettings = () => {
-    showSettings = true
-  }
-
-  const closeSettings = () => {
-    showSettings = false
-  }
-
-  const leaveSpace = () => pushModal(SpaceExit, {url: space})
-
-  const joinSpace = () => pushModal(SpaceJoin, {url: space})
-
-  const addRoom = () => pushModal(RoomCreate, {url: space})
-
-  $: rooms = space ? getMembershipRoomsByUrl(space, $userMembership) : []
-  $: allRooms = $roomsByUrl.get(space || "") || []
-  $: otherRooms = allRooms.filter(room => !rooms.concat(GENERAL).includes(room))
 </script>
 
 <div class="column menu gap-2">
-  {#if showSettings}
-    <p class="mb-4 text-center text-2xl">
-      Settings for <span class="text-primary">{displayRelayUrl(assertNotNil(space))}</span>
-    </p>
-    {#if getMembershipUrls($userMembership).includes(space || "")}
-      <Button on:click={leaveSpace} class="btn btn-error">
-        <Icon icon="exit" />
-        Leave Space
-      </Button>
-    {:else}
-      <Button on:click={joinSpace} class="btn btn-primary">
-        <Icon icon="login-2" />
-        Join Space
-      </Button>
-    {/if}
-    <Button on:click={closeSettings} class="mt-4 flex items-center gap-2 text-lg">
-      <Icon icon="alt-arrow-left" size={7} />
-      Go Back
-    </Button>
-  {:else if space}
-    <p class="center mb-4 gap-2 text-2xl">
-      <Icon icon="compass-big" size={7} />
-      <span class="text-primary">{displayRelayUrl(space)}</span>
-    </p>
-    <div class="grid gap-2 sm:grid-cols-3">
-      <Link href={makeSpacePath(space, "threads")} class="btn btn-neutral">
-        <Icon icon="notes-minimalistic" /> Threads
-      </Link>
-      <Link href={makeSpacePath(space)} class="btn btn-neutral">
-        <Icon icon="hashtag" />
-        {GENERAL}
-      </Link>
-      {#each rooms as room, i (room)}
-        <Link href={makeSpacePath(space, room)} class="btn btn-neutral">
-          <Icon icon="hashtag" />
-          {room}
-        </Link>
-      {/each}
-      {#each otherRooms as room, i (room)}
-        <Link href={makeSpacePath(space, room)} class="btn">
-          <Icon icon="hashtag" />
-          {room}
-        </Link>
-      {/each}
-    </div>
-    <div class="grid gap-2 sm:grid-cols-2">
-      <Button on:click={addRoom} class="btn btn-primary">
-        <Icon icon="add-circle" />
-        Create Room
-      </Button>
-      <Button on:click={openSettings} class="btn">
-        <Icon icon="settings" /> Space Settings
-      </Button>
-    </div>
-    <Button on:click={resetSpace} class="mt-4 flex items-center gap-2 text-lg">
-      <Icon icon="alt-arrow-left" size={7} />
-      Back to Spaces
-    </Button>
-  {:else}
-    {#each getMembershipUrls($userMembership) as url (url)}
-      <Button on:click={() => setSpace(url)}>
-        <CardButton>
-          <div slot="icon"><SpaceAvatar {url} /></div>
-          <div slot="title"><RelayName {url} /></div>
-          <div slot="info"><RelayDescription {url} /></div>
-        </CardButton>
-      </Button>
-    {/each}
-    {#if getMembershipUrls($userMembership).length > 0}
-      <Divider />
-    {/if}
-    <Button on:click={startJoin}>
+  {#each getMembershipUrls($userMembership) as url (url)}
+    <Link href={makeSpacePath(url)}>
       <CardButton>
-        <div slot="icon"><Icon icon="login-2" size={7} /></div>
-        <div slot="title">Join a space</div>
-        <div slot="info">Enter an invite code or url to join an existing space.</div>
-      </CardButton>
-    </Button>
-    <Link href="/discover">
-      <CardButton>
-        <div slot="icon"><Icon icon="compass" size={7} /></div>
-        <div slot="title">Find a space</div>
-        <div slot="info">Browse spaces on the discover page.</div>
+        <div slot="icon"><SpaceAvatar {url} /></div>
+        <div slot="title"><RelayName {url} /></div>
+        <div slot="info"><RelayDescription {url} /></div>
       </CardButton>
     </Link>
-    <Button on:click={startCreate}>
-      <CardButton>
-        <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-        <div slot="title">Create a space</div>
-        <div slot="info">Just a few questions and you'll be on your way.</div>
-      </CardButton>
-    </Button>
+  {/each}
+  {#if getMembershipUrls($userMembership).length > 0}
+    <Divider />
   {/if}
+  <Button on:click={startJoin}>
+    <CardButton>
+      <div slot="icon"><Icon icon="login-2" size={7} /></div>
+      <div slot="title">Join a space</div>
+      <div slot="info">Enter an invite code or url to join an existing space.</div>
+    </CardButton>
+  </Button>
+  <Link href="/discover">
+    <CardButton>
+      <div slot="icon"><Icon icon="compass" size={7} /></div>
+      <div slot="title">Find a space</div>
+      <div slot="info">Browse spaces on the discover page.</div>
+    </CardButton>
+  </Link>
+  <Button on:click={startCreate}>
+    <CardButton>
+      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+      <div slot="title">Create a space</div>
+      <div slot="info">Just a few questions and you'll be on your way.</div>
+    </CardButton>
+  </Button>
 </div>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 2e11598..dc82552 100644
--- a/src/routes/chat/+page.svelte
+++ b/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" />
diff --git a/src/routes/people/+page.svelte b/src/routes/people/+page.svelte
index 6f86612..e5dbc89 100644
--- a/src/routes/people/+page.svelte
+++ b/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} />
diff --git a/src/routes/spaces/[relay]/+layout.svelte b/src/routes/spaces/[relay]/+layout.svelte
index 30d0628..c16ab03 100644
--- a/src/routes/spaces/[relay]/+layout.svelte
+++ b/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>
diff --git a/src/routes/spaces/[relay]/calendar/+page.svelte b/src/routes/spaces/[relay]/calendar/+page.svelte
index 6dbf850..00f40b0 100644
--- a/src/routes/spaces/[relay]/calendar/+page.svelte
+++ b/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 = {