Re-work space navigation #223

src/app/components/ChannelCompose.svelte

@@ -1,23 +1,28 @@
 <script lang="ts">
+  import type {Instance} from "tippy.js"
   import {writable} from "svelte/store"
   import type {EventContent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
+  import WidgetAdd from "@assets/icons/widget-add.svg?dataurl"
   import Plane from "@assets/icons/plane-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import ComposeMenu from "@app/components/ComposeMenu.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
   import {onDestroy, onMount} from "svelte"
 
   type Props = {
     url?: string
+    room?: string
     content?: string
     onEditPrevious?: () => void
     onSubmit: (event: EventContent) => void
   }
 
-  const {content, onEditPrevious, onSubmit, url}: Props = $props()
+  const {url, room, content, onEditPrevious, onSubmit}: Props = $props()
 
   const autofocus = !isMobile
 
@@ -36,6 +41,10 @@
 
   const uploadFiles = () => editor.then(ed => ed.chain().selectFiles().run())
 
+  const showPopover = () => popover?.show()
+
+  const hidePopover = () => popover?.hide()
+
   const submit = async () => {
     if ($uploading) return
 
@@ -50,7 +59,9 @@
     ed.chain().clearContent().run()
   }
 
-  const editor = makeEditor({url, autofocus, content, submit, uploading, aggressive: true})
+  const editor = makeEditor({url, content, autofocus, submit, uploading, aggressive: true})
+
+  let popover: Instance | undefined = $state()
 
   onMount(async () => {
     const ed = await editor
@@ -64,17 +75,32 @@
 </script>
 
 <form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>
-  <Button
-    data-tip="Add an image"
-    class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
-    disabled={$uploading}
-    onclick={uploadFiles}>
-    {#if $uploading}
-      <span class="loading loading-spinner loading-xs"></span>
-    {:else}
-      <Icon icon={GallerySend} />
-    {/if}
-  </Button>
+  <div class="join">
+    <Button
+      data-tip="Add an image"
+      class="center join-item tooltip tooltip-right h-10 w-10 min-w-10 rounded-full border border-solid border-base-200 bg-base-300"
+      disabled={$uploading}
+      onclick={uploadFiles}>
+      {#if $uploading}
+        <span class="loading loading-spinner loading-xs"></span>
+      {:else}
+        <Icon icon={GallerySend} />
+      {/if}
+    </Button>
+    <Tippy
+      bind:popover
+      component={ComposeMenu}
+      props={{url, room, onClick: hidePopover}}
+      params={{trigger: "manual", interactive: true}}>
+      <Button
+        data-tip="More options"
+        class="center join-item tooltip tooltip-right h-10 w-10 min-w-10 rounded-full border border-solid border-base-200 bg-base-300"
+        disabled={$uploading}
+        onclick={showPopover}>
+        <Icon icon={WidgetAdd} />
+      </Button>
+    </Tippy>
+  </div>
   <div class="chat-editor flex-grow overflow-hidden">
     <EditorContent {editor} />
   </div>