From 5760be4313c78e4e15014f56208154437610a114 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 30 Mar 2026 14:24:40 -0700
Subject: [PATCH] Add back button to chat detail

---
 src/app/components/Chat.svelte | 64 +++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/app/components/Chat.svelte b/src/app/components/Chat.svelte
index 14b7ece5c..372c58a4c 100644
--- a/src/app/components/Chat.svelte
+++ b/src/app/components/Chat.svelte
@@ -34,6 +34,7 @@
     messagingRelayListsByPubkey,
   } from "@welshman/app"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
+  import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -72,6 +73,8 @@
       ? pushModal(ProfileDetail, {pubkey: others[0]})
       : pushModal(ChatMembers, {pubkeys: others})
 
+  const back = () => history.back()
+
   const replyTo = (event: TrustedEvent) => {
     parent = event
     compose?.focus()
@@ -251,35 +254,40 @@
 </script>
 
 <PageBar>
-  <div class="flex items-center justify-between gap-4">
-    <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
-      <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}
-          <div class="row-2">
-            <ProfileCircle pubkey={others[0]} size={5} />
-            <ProfileName pubkey={others[0]} />
-          </div>
-        {:else}
-          <div class="flex items-center gap-2">
-            <ProfileCircles pubkeys={others} size={5} />
-            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+  <div class="flex">
+    <Button onclick={back} class="place-self-start pr-3 md:hidden flex items-center">
+      <Icon icon={ArrowLeft} size={7} />
+    </Button>
+    <div class="flex items-center justify-between gap-4">
+      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
+        <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}
+            <div class="row-2">
+              <ProfileCircle pubkey={others[0]} size={5} />
               <ProfileName pubkey={others[0]} />
-              and
-              {#if others.length === 2}
-                <ProfileName pubkey={others[1]} />
-              {:else}
-                {others.length - 1}
-                {others.length > 2 ? "others" : "other"}
-              {/if}
-            </p>
-          </div>
-        {/if}
-      </Button>
+            </div>
+          {:else}
+            <div class="flex items-center gap-2">
+              <ProfileCircles pubkeys={others} size={5} />
+              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+                <ProfileName pubkey={others[0]} />
+                and
+                {#if others.length === 2}
+                  <ProfileName pubkey={others[1]} />
+                {:else}
+                  {others.length - 1}
+                  {others.length > 2 ? "others" : "other"}
+                {/if}
+              </p>
+            </div>
+          {/if}
+        </Button>
+      </div>
     </div>
   </div>
 </PageBar>