From 1b62df33d25f8fbddd69e6b79bfc8b49d33449ac Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Wed, 11 Sep 2024 16:21:13 -0300
Subject: [PATCH 1/2] Fix chatbar messages to persist through different
 conversations

---
 .../components/messaging/ChatPreview.svelte   |  7 ++-
 src/lib/elements/Input/Input.svelte           | 59 ++++++++++---------
 src/lib/layouts/Chatbar.svelte                | 32 ++++++++--
 src/lib/layouts/Sidebar.svelte                |  2 +-
 src/routes/chat/+page.svelte                  |  3 +-
 5 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/messaging/ChatPreview.svelte b/src/lib/components/messaging/ChatPreview.svelte
index 649966222..dae83b57d 100644
--- a/src/lib/components/messaging/ChatPreview.svelte
+++ b/src/lib/components/messaging/ChatPreview.svelte
@@ -8,6 +8,7 @@
     import ProfilePictureMany from "../profile/ProfilePictureMany.svelte"
     import { Store } from "$lib/state/Store"
     import { goto } from "$app/navigation"
+    import { get } from "svelte/store"
 
     export let chat: Chat
     export let cta: boolean = false
@@ -40,7 +41,7 @@
 
 <button
     data-cy="chat-preview"
-    class="chat-preview {cta ? 'cta' : ''}"
+    class="chat-preview {cta ? 'cta' : ''} {get(Store.state.activeChat)?.id === chat.id ? 'active-chat' : ''}"
     on:contextmenu
     on:click={_ => {
         dispatch("click")
@@ -98,6 +99,10 @@
         transition: all var(--animation-speed);
         min-width: var(--min-component-width);
 
+        &.active-chat {
+            background-color: var(--primary-color-alt);
+        }
+
         &.cta {
             background-color: var(--alt-color);
 
diff --git a/src/lib/elements/Input/Input.svelte b/src/lib/elements/Input/Input.svelte
index d276a9a76..13c58ea5f 100644
--- a/src/lib/elements/Input/Input.svelte
+++ b/src/lib/elements/Input/Input.svelte
@@ -67,6 +67,7 @@
 
     let onsend: any[] = []
     let editor: MarkdownEditor
+
     if (rich) {
         onMount(() => {
             if (autoFocus) input.focus()
@@ -134,34 +135,38 @@
     }
 </script>
 
-<div
-    class="input-group {alt ? 'alt' : ''} {highlight !== null ? `highlight-${highlight}` : ''} {tooltip ? 'tooltip' : ''} {clazz || ''} {rich ? 'multiline' : ''}"
-    data-tooltip={tooltip}
-    role="none"
-    on:click={async _ => {
-        if (copyOnInteract) {
-            await navigator.clipboard.writeText(`${value}`)
-        }
-    }}>
-    <div class="input-container {rounded ? 'rounded' : ''} {clazz || ''} {rich ? 'multiline' : ''}">
-        <slot></slot>
-        <input
-            data-cy={hook}
-            class="input {centered ? 'centered' : ''} {disabled ? 'disabled' : ''}"
-            type="text"
-            disabled={disabled}
-            bind:this={input}
-            on:focus={handleFocus}
-            bind:value={$writableValue}
-            placeholder={placeholder}
-            on:keydown={onKeyDown}
-            on:input={onInput}
-            on:blur={onBlur} />
+{#key hook}
+    <div
+        class="input-group {alt ? 'alt' : ''} {highlight !== null ? `highlight-${highlight}` : ''} {tooltip ? 'tooltip' : ''} {clazz || ''} {rich ? 'multiline' : ''}"
+        data-tooltip={tooltip}
+        role="none"
+        on:click={async _ => {
+            if (copyOnInteract) {
+                await navigator.clipboard.writeText(`${value}`)
+            }
+        }}>
+        <div class="input-container {rounded ? 'rounded' : ''} {clazz || ''} {rich ? 'multiline' : ''}">
+            <slot></slot>
+            <!-- svelte-ignore a11y-autofocus -->
+            <input
+                id={hook}
+                data-cy={hook}
+                class="input {centered ? 'centered' : ''} {disabled ? 'disabled' : ''}"
+                type="text"
+                bind:this={input}
+                on:focus={handleFocus}
+                bind:value={$writableValue}
+                placeholder={placeholder}
+                on:keydown={onKeyDown}
+                on:input={onInput}
+                on:blur={onBlur}
+                autofocus={autoFocus} />
+        </div>
     </div>
-</div>
-{#if errorMessage}
-    <Text appearance={Appearance.Warning}>{errorMessage}</Text>
-{/if}
+    {#if errorMessage}
+        <Text appearance={Appearance.Warning}>{errorMessage}</Text>
+    {/if}
+{/key}
 
 <style lang="scss">
     .input-group {
diff --git a/src/lib/layouts/Chatbar.svelte b/src/lib/layouts/Chatbar.svelte
index 9d8e47d35..7df2848ad 100644
--- a/src/lib/layouts/Chatbar.svelte
+++ b/src/lib/layouts/Chatbar.svelte
@@ -10,16 +10,16 @@
     import { RaygunStoreInstance, type FileAttachment } from "$lib/wasm/RaygunStore"
     import { createEventDispatcher } from "svelte"
     import { ConversationStore } from "$lib/state/conversation"
-    import type { GiphyGif, Message } from "$lib/types"
+    import type { Chat, GiphyGif, Message } from "$lib/types"
     import { PopupButton } from "$lib/components"
     import CombinedSelector from "$lib/components/messaging/CombinedSelector.svelte"
     import { checkMobile } from "$lib/utils/Mobile"
-    import { VoiceRTCMessageType } from "$lib/media/Voice"
     import { UIStore } from "$lib/state/ui"
 
     export let replyTo: Message | undefined = undefined
     export let filesSelected: [File?, string?][] = []
     export let emojiClickHook: (emoji: string) => boolean
+    export let activeChat: Chat
 
     const dispatch = createEventDispatcher()
 
@@ -28,6 +28,21 @@
     $: emojiSelectorOpen = UIStore.state.emojiSelector
     let gifSelectorOpen = writable(false)
     let stickerSelectorOpen = writable(false)
+    let focus = writable(true)
+
+    let chatMessages = writable<{ [key: string]: string }>({})
+
+    $: if (activeChat) {
+        message.set(get(chatMessages)[activeChat.id] || "")
+    }
+
+    $: if (message) {
+        focus.set(true)
+        chatMessages.update(messages => {
+            messages[activeChat.id] = $message
+            return messages
+        })
+    }
 
     async function sendMessage(text: string) {
         let attachments: FileAttachment[] = []
@@ -51,14 +66,20 @@
             ConversationStore.addPendingMessages(chat.id, res.message, txt)
         })
         message.set("")
+        chatMessages.update(messages => {
+            messages[activeChat.id] = ""
+            return messages
+        })
         replyTo = undefined
         dispatch("onsend")
     }
 
     function handleEmojiClick(emoji: string) {
+        focus.set(false)
         emojiSelectorOpen.set(false)
+        focus.set(true)
         if (emojiClickHook(emoji)) return
-        message.set($message + emoji)
+        message.update(m => m + emoji)
     }
 
     function handleGif(gif: GiphyGif) {
@@ -70,12 +91,11 @@
     }
 </script>
 
-<div class="chatbar" data-cy="chatbar">
+<div class="chatbar" data-cy="chatbar" id={activeChat.id}>
     <Controls>
         <slot name="pre-controls"></slot>
     </Controls>
-
-    <Input hook="chatbar-input" alt placeholder={$_("generic.placeholder")} autoFocus bind:value={$message} rounded rich={markdown} on:input on:enter={_ => sendMessage($message)} />
+    <Input hook={activeChat.id} alt placeholder={$_("generic.placeholder")} autoFocus={$focus} bind:value={$message} rounded rich={markdown} on:input on:enter={_ => sendMessage($message)} />
 
     <slot></slot>
 
diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index e355b417e..328399c01 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -50,7 +50,7 @@
     {#if open}
         <div class="sidebar">
             <div class="sidebar-pre">
-                <Input hook="input-sidebar-search" alt placeholder={$_("generic.search_placeholder")} bind:value={search} on:enter={handleEnter} on:input={handleSearch}>
+                <Input hook="input-sidebar-search" alt autoFocus={false} placeholder={$_("generic.search_placeholder")} bind:value={search} on:enter={handleEnter} on:input={handleSearch}>
                     <Icon icon={Shape.Search} />
                 </Input>
 
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 201727c32..30ba3f142 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -65,7 +65,7 @@
     // TODO(Lucas): Need to improve that for chats when not necessary all users are friends
     $: loading = get(UIStore.state.chats).length > 0 && !$activeChat.users.slice(1).some(userId => $users[userId]?.name !== undefined)
 
-    $: chatName = $activeChat.kind === ChatType.DirectMessage ? $users[$activeChat.users[1]]?.name : ($activeChat.name ?? $users[$activeChat.users[1]]?.name)
+    $: chatName = $activeChat.kind === ChatType.DirectMessage ? $users[$activeChat.users[1]]?.name : $activeChat.name ?? $users[$activeChat.users[1]]?.name
     $: statusMessage = $activeChat.kind === ChatType.DirectMessage ? $users[$activeChat.users[1]]?.profile?.status_message : $activeChat.motd
     $: pinned = getPinned($conversation)
 
@@ -657,6 +657,7 @@
             <Chatbar
                 filesSelected={files}
                 replyTo={replyTo}
+                activeChat={$activeChat}
                 typing={$activeChat.typing_indicator.users && $activeChat.typing_indicator.users().map(u => $users[u])}
                 emojiClickHook={emoji => {
                     if (reactingTo) {

From 2a19bb8259b5336d5ef9207dcfab3fd2f4eae647 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Wed, 11 Sep 2024 17:38:13 -0300
Subject: [PATCH 2/2] Refocus chatbar after select emoji, gif or sticker

---
 src/lib/layouts/Chatbar.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/layouts/Chatbar.svelte b/src/lib/layouts/Chatbar.svelte
index 7df2848ad..cd394323e 100644
--- a/src/lib/layouts/Chatbar.svelte
+++ b/src/lib/layouts/Chatbar.svelte
@@ -28,7 +28,7 @@
     $: emojiSelectorOpen = UIStore.state.emojiSelector
     let gifSelectorOpen = writable(false)
     let stickerSelectorOpen = writable(false)
-    let focus = writable(true)
+    let hackVariableToRefocusChatBar = writable("")
 
     let chatMessages = writable<{ [key: string]: string }>({})
 
@@ -37,7 +37,6 @@
     }
 
     $: if (message) {
-        focus.set(true)
         chatMessages.update(messages => {
             messages[activeChat.id] = $message
             return messages
@@ -75,19 +74,20 @@
     }
 
     function handleEmojiClick(emoji: string) {
-        focus.set(false)
         emojiSelectorOpen.set(false)
-        focus.set(true)
         if (emojiClickHook(emoji)) return
         message.update(m => m + emoji)
+        hackVariableToRefocusChatBar.set(Math.random().toString())
     }
 
     function handleGif(gif: GiphyGif) {
         gifSelectorOpen.set(false)
+        hackVariableToRefocusChatBar.set(Math.random().toString())
     }
 
     function handleSticker(gif: GiphyGif) {
         stickerSelectorOpen.set(false)
+        hackVariableToRefocusChatBar.set(Math.random().toString())
     }
 </script>
 
@@ -95,7 +95,7 @@
     <Controls>
         <slot name="pre-controls"></slot>
     </Controls>
-    <Input hook={activeChat.id} alt placeholder={$_("generic.placeholder")} autoFocus={$focus} bind:value={$message} rounded rich={markdown} on:input on:enter={_ => sendMessage($message)} />
+    <Input hook={`${activeChat.id}-${$hackVariableToRefocusChatBar}`} alt placeholder={$_("generic.placeholder")} autoFocus={true} bind:value={$message} rounded rich={markdown} on:input on:enter={_ => sendMessage($message)} />
 
     <slot></slot>