Put the compose bar chrome in one component

src/app/components/Chat.svelte

@@ -37,8 +37,8 @@
   import ChatMembers from "@app/components/ChatMembers.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
-  import ChatComposeEdit from "@app/components/ChatComposeEdit.svelte"
-  import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
+  import ComposeEdit from "@app/components/ComposeEdit.svelte"
+  import ComposeParent from "@app/components/ComposeParent.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import {app, deletes, router, user, wraps} from "@app/core"
   import {userSettingsValues} from "@app/settings"
@@ -338,12 +338,12 @@
   </PageContent>
 
   <div class="room__compose bg-surface">
-    <div>
+    <div class="flex flex-col gap-px">
       {#if parent}
-        <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
+        <ComposeParent event={parent} clear={clearParent} verb="Replying to" />
       {/if}
       {#if eventToEdit}
-        <ChatComposeEdit clear={clearEventToEdit} />
+        <ComposeEdit clear={clearEventToEdit} />
       {/if}
     </div>
     {#key initialValues}

src/app/components/CommandArgBar.svelte

@@ -2,8 +2,8 @@
   import cx from "classnames"
   import {Pubkey} from "@welshman/util"
   import type {CommandArg, CommandScopeTarget} from "@welshman/util"
-  import {slide} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
+  import ComposeBar from "@app/components/ComposeBar.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import {deriveValidCommands, describeCommandDraft} from "@app/commands"
 
@@ -44,9 +44,7 @@
 </script>
 
 {#if draft}
-  <div
-    class="bg-surface-more border-t-line-less border-l-primary flex flex-col gap-1 border-t border-l-2 border-solid px-2 py-1 text-xs"
-    transition:slide>
+  <ComposeBar class="border-t-line-less flex flex-col gap-1 border-t text-xs">
     <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
       <span class="font-mono">
         <span class="text-primary">/{draft.command.command()}</span>
@@ -85,5 +83,5 @@
         {/each}
       </div>
     {/if}
-  </div>
+  </ComposeBar>
 {/if}

src/app/components/ComposeBar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {Snippet} from "svelte"
+  import type {HTMLAttributes} from "svelte/elements"
+  import {slide} from "@lib/transition"
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    children: Snippet
+  }
+
+  const {children, ...restProps}: Props = $props()
+
+  const className = $derived(
+    cx("border-l-primary bg-surface-more border-l-2 border-solid px-2 py-1", restProps.class),
+  )
+</script>
+
+<div {...restProps} class={className} transition:slide>
+  {@render children()}
+</div>

src/app/components/ComposeEdit.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import {slide} from "@lib/transition"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import ComposeBar from "@app/components/ComposeBar.svelte"
 
   const {
     clear,
@@ -11,12 +11,9 @@
   } = $props()
 </script>
 
-<div
-  class="bg-surface-more relative flex h-8 items-center justify-between border-l-2 border-solid px-2 pr-7 text-xs"
-  style="border-color: var(--primary)"
-  transition:slide>
+<ComposeBar class="flex h-8 items-center justify-between pr-7 text-xs">
   <p class="text-primary">Editing message</p>
   <Button onclick={clear} class="flex items-center">
     <Icon icon={CloseCircle} />
   </Button>
-</div>
+</ComposeBar>

src/app/components/ComposeParent.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import {removeUndefined} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {slide} from "@lib/transition"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import ComposeBar from "@app/components/ComposeBar.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import {profiles} from "@app/core"
 
@@ -20,10 +20,7 @@
   const display = $profiles.display(event.pubkey, removeUndefined([url])).$
 </script>
 
-<div
-  class="bg-surface-more relative border-l-2 border-solid px-2 py-1 pr-8"
-  style="border-color: var(--primary)"
-  transition:slide>
+<ComposeBar class="relative pr-8">
   <p class="text-primary text-xs">{verb} @{$display}</p>
   {#key event.id}
     <NoteContentMinimal trimParent {event} />
@@ -31,4 +28,4 @@
   <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
     <Icon icon={CloseCircle} />
   </Button>
-</div>
+</ComposeBar>

src/app/components/EventReply.svelte

@@ -11,7 +11,7 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
-  import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
+  import ComposeParent from "@app/components/ComposeParent.svelte"
   import {prependParent} from "@app/rooms"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/drafts"
@@ -115,7 +115,7 @@
   class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
   <div class="card mx-2 my-2 shadow-md">
     {#if parent}
-      <ChatComposeParent {url} event={parent} clear={() => onClearParent?.()} verb="Replying to" />
+      <ComposeParent {url} event={parent} clear={() => onClearParent?.()} verb="Replying to" />
     {/if}
     <div class="relative">
       <div class="note-editor grow overflow-hidden">

src/app/components/RoomChat.svelte

@@ -24,8 +24,8 @@
   import VirtualList from "@lib/components/VirtualList.svelte"
   import type {VirtualListController} from "@lib/components/VirtualList.svelte"
   import RoomCompose from "@app/components/RoomCompose.svelte"
-  import RoomComposeEdit from "@app/components/RoomComposeEdit.svelte"
-  import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
+  import ComposeEdit from "@app/components/ComposeEdit.svelte"
+  import ComposeParent from "@app/components/ComposeParent.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@app/components/RoomItemAddMember.svelte"
   import RoomPinnedMessages from "@app/components/RoomPinnedMessages.svelte"
@@ -696,15 +696,15 @@
             {@render membershipButton("Ask to Join")}
           </div>
         {:else}
-          <div>
+          <div class="flex flex-col gap-px">
             {#if parent}
-              <RoomComposeParent {url} event={parent} clear={clearParent} verb="Replying to" />
+              <ComposeParent {url} event={parent} clear={clearParent} verb="Replying to" />
             {/if}
             {#if sharedEvent}
-              <RoomComposeParent {url} event={sharedEvent} clear={clearShare} verb="Sharing" />
+              <ComposeParent {url} event={sharedEvent} clear={clearShare} verb="Sharing" />
             {/if}
             {#if eventToEdit}
-              <RoomComposeEdit clear={clearEventToEdit} />
+              <ComposeEdit clear={clearEventToEdit} />
             {/if}
           </div>
           {#key initialValues}

src/app/components/RoomComposeEdit.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import {slide} from "@lib/transition"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-
-  const {
-    clear,
-  }: {
-    clear: () => void
-  } = $props()
-</script>
-
-<div
-  class="relative flex h-8 items-center justify-between border-l-2 border-solid bg-surface-more px-2 pr-7 text-xs"
-  style="border-color: var(--primary)"
-  transition:slide>
-  <p class="text-primary">Editing message</p>
-  <Button onclick={clear} class="flex items-center">
-    <Icon icon={CloseCircle} />
-  </Button>
-</div>

src/app/components/RoomComposeParent.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
-  import {slide} from "@lib/transition"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
-  import {profiles} from "@app/core"
-
-  type Props = {
-    url: string
-    verb: string
-    event: TrustedEvent
-    clear: () => void
-  }
-
-  const {url, verb, event, clear}: Props = $props()
-
-  const display = $profiles.display(event.pubkey, [url]).$
-</script>
-
-<div
-  class="relative border-l-2 border-solid bg-surface-more px-2 py-1 pr-8"
-  style="border-color: var(--primary)"
-  transition:slide>
-  <p class="text-xs text-primary">{verb} @{$display}</p>
-  {#key event.id}
-    <NoteContentMinimal trimParent {event} />
-  {/key}
-  <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
-    <Icon icon={CloseCircle} />
-  </Button>
-</div>