From 437227d9aa86132f3be3b41c89981cb393c903d0 Mon Sep 17 00:00:00 2001
From: Sceik <60520115+sceuick@users.noreply.github.com>
Date: Wed, 17 Jul 2024 15:34:44 +0800
Subject: [PATCH] Fix backgrounds and char archiving (#978)

- Fix chat padding
- Fix character archiving deleting some char props
- Fix inputbar background and component rounding
---
 web/App.tsx                                   |  2 +-
 web/pages/Chat/components/InputBar.tsx        | 29 ++++++++++++-------
 .../components/SpeechRecognitionRecorder.tsx  |  3 +-
 web/shared/Mode/Detail.tsx                    | 15 +++++++---
 web/shared/hooks.ts                           |  1 -
 web/store/character.ts                        |  3 +-
 6 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/web/App.tsx b/web/App.tsx
index 86353d519..9d1560dde 100644
--- a/web/App.tsx
+++ b/web/App.tsx
@@ -155,7 +155,7 @@ const Layout: Component<{ children?: any }> = (props) => {
           <Navigation />
           <main class="w-full overflow-y-auto" data-background style={bgStyles()}>
             <div
-              class={`mx-auto h-full min-h-full ${isChat() ? maxW() : 'max-w-8xl'} px-2 sm:px-3`}
+              class={`mx-auto h-full min-h-full ${isChat() ? maxW() : 'max-w-8xl'}`}
               classList={{
                 'content-background': !isChat(),
               }}
diff --git a/web/pages/Chat/components/InputBar.tsx b/web/pages/Chat/components/InputBar.tsx
index b30568cb2..02d22e37d 100644
--- a/web/pages/Chat/components/InputBar.tsx
+++ b/web/pages/Chat/components/InputBar.tsx
@@ -237,9 +237,9 @@ const InputBar: Component<{
   }
 
   return (
-    <div class="relative flex items-end justify-center">
+    <div class="relative flex items-end justify-center rounded-md bg-[var(--bg-800)]">
       <Show when={props.showOocToggle}>
-        <div class="cursor-pointer p-2" onClick={toggleOoc}>
+        <div class="flex h-[40px] cursor-pointer items-center p-2" onClick={toggleOoc}>
           <Show when={!props.ooc}>
             <WizardIcon />
           </Show>
@@ -249,7 +249,7 @@ const InputBar: Component<{
         </div>
       </Show>
 
-      <div class="flex items-center sm:hidden">
+      <div class="flex h-[40px] items-center sm:hidden">
         <a
           href="#"
           role="button"
@@ -312,7 +312,11 @@ const InputBar: Component<{
           },
         }}
       />
-      <Button schema="clear" onClick={onButtonClick} class="h-full px-2 py-2">
+      <Button
+        schema="clear"
+        onClick={onButtonClick}
+        class="h-full rounded-l-none bg-[var(--bg-800)] px-2 py-2"
+      >
         <MoreHorizontal class="icon-button" />
       </Button>
 
@@ -394,13 +398,16 @@ const InputBar: Component<{
       </DropMenu>
       <Switch>
         <Match when={user.user?.speechtotext && (text() === '' || listening())}>
-          <SpeechRecognitionRecorder
-            culture={props.char?.culture}
-            onText={(value) => setText(value)}
-            onSubmit={() => send()}
-            cleared={cleared}
-            listening={setListening}
-          />
+          <div class="flex h-full items-center">
+            <SpeechRecognitionRecorder
+              culture={props.char?.culture}
+              onText={(value) => setText(value)}
+              onSubmit={() => send()}
+              cleared={cleared}
+              listening={setListening}
+              class="h-full bg-[var(--bg-800)]"
+            />
+          </div>
         </Match>
 
         <Match when>
diff --git a/web/pages/Chat/components/SpeechRecognitionRecorder.tsx b/web/pages/Chat/components/SpeechRecognitionRecorder.tsx
index d9532d589..eaed6b1e7 100644
--- a/web/pages/Chat/components/SpeechRecognitionRecorder.tsx
+++ b/web/pages/Chat/components/SpeechRecognitionRecorder.tsx
@@ -235,11 +235,12 @@ export const SpeechRecognitionRecorder: Component<{
       <Show when={speechRecognition() && settings.enabled}>
         <Button
           schema="clear"
-          class={`${isListening() ? 'text-red-500' : 'text-gray-500'}`}
+          class={`${isListening() ? 'text-red-500' : 'text-gray-500'} ${props.class || ''} `}
           onClick={toggleListening}
         >
           <Mic
             size={18}
+            class="h-6"
             classList={{
               'animate-pulse': pendingRecord() || isHearing(),
             }}
diff --git a/web/shared/Mode/Detail.tsx b/web/shared/Mode/Detail.tsx
index 968970e88..61283c2e2 100644
--- a/web/shared/Mode/Detail.tsx
+++ b/web/shared/Mode/Detail.tsx
@@ -52,8 +52,15 @@ export const ModeDetail: Component<{
       </Show>
 
       <Show when={!props.loading}>
-        <section class="mode">
-          <header class="flex flex-col gap-2" style={{ 'grid-area': 'header' }}>
+        <section
+          class="mode pl-2 pr-2 sm:pl-3"
+          style={bgStyles()}
+          classList={{
+            'sm:pr-0': props.showPane,
+            'sm:pr-3': !props.showPane,
+          }}
+        >
+          <header class="flex flex-col gap-2 pt-2" style={{ 'grid-area': 'header' }}>
             <div
               class="hidden items-center justify-between rounded-md sm:flex"
               classList={{ 'sm:flex': !!props.header }}
@@ -79,8 +86,8 @@ export const ModeDetail: Component<{
           </header>
 
           <section
-            style={{ 'grid-area': 'content', ...bgStyles() }}
-            class="content my-2 flex w-full flex-row gap-1 overflow-y-auto px-2 sm:px-3"
+            style={{ 'grid-area': 'content' }}
+            class="content my-2 flex w-full flex-row gap-1 overflow-y-auto"
             classList={{
               'justify-center': !props.showPane || mode() === 'popup',
               'justify-end gap-1 justify-self-center flex-row flex':
diff --git a/web/shared/hooks.ts b/web/shared/hooks.ts
index 19aed128b..89f050ab5 100644
--- a/web/shared/hooks.ts
+++ b/web/shared/hooks.ts
@@ -75,7 +75,6 @@ export function useCharacterBg(src: 'layout' | 'page') {
     const isBg = state.ui.viewMode?.startsWith('background')
     const char = chars.chars.map[chat.active?.char?._id!]
     if (!isChat() || !isBg || !char || char.visualType === 'sprite' || !char.avatar) {
-      console.log('bg', mobile)
       return {
         ...base,
         'background-image': `url(${state.background})`,
diff --git a/web/store/character.ts b/web/store/character.ts
index 4987a02b9..237f4fd24 100644
--- a/web/store/character.ts
+++ b/web/store/character.ts
@@ -241,7 +241,8 @@ export const characterStore = createStore<CharacterState>(
       onSuccess?: () => void
     ) {
       const previous = map[characterId]
-      const res = await charsApi.editCharacter(characterId, char, previous)
+      const update = Object.assign({}, previous, char)
+      const res = await charsApi.editCharacter(characterId, update)
 
       if (res.error) toastStore.error(`Failed to create character: ${res.error}`)
       if (res.result) {