More cosmetic changes

chat/src/App.css

@@ -6,14 +6,13 @@ body {
 .App {
   position: fixed;
   width: 100vw;
-  height: 100%;
   display: flex;
   overflow: hidden;
 }
 
 @media screen and (min-width: 1000px) {
-  .App {
-    height: calc(100vh - 12rem);
+  .App-content {
+    height: 740px !important;
   }
 }
 
@@ -47,10 +46,13 @@ body {
 .App-content {
   position: relative;
   flex: 3;
-  height: 720px;
+  height: 360px;
   overflow: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px dashed var(--primary);
 }
 
 .App-content::-webkit-scrollbar {
@@ -64,27 +66,30 @@ body {
   height: 100%;
 }
 
-.App-input {
-  flex-basis: 7rem;
-  padding: 0 1rem;
-  margin-top: 2rem;
-  flex: 3;
-}
 
 .App-center {
   display: flex;
   align-items: flex-start;
 }
 
-.App-bottom {
+.App-bottom-wrapper {
   display: flex;
   align-items: flex-start;
 }
 
+.App-bottom {
+  flex: 3;
+}
+
 .App-bottom-dummy {
   flex: 1;
 }
 
+.App-bottom-extra {
+  padding: 1rem;
+  height: 64px;
+}
+
 /* On mobile, hide the sidebar and make the input full-width. */
 @media screen and (max-width: 1100px) {
   .App-side {
@@ -94,6 +99,11 @@ body {
   .App-bottom-dummy {
     display: none;
   }
+
+  .App-bottom-wrapper {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
 }
 
 lite-youtube {

chat/src/App.tsx

@@ -4,6 +4,7 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import {
   ChatHeading,
   ChatMessageList,
+  QuotedMessage,
   UserInput,
   UserList,
   UsersTyping,
@@ -11,7 +12,7 @@ import {
 import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
 import "./App.css";
 
-const SCROLL_CANCEL_THRESHOLD = 200;
+const SCROLL_CANCEL_THRESHOLD = 500;
 
 export function App() {
   return (
@@ -32,17 +33,22 @@ function AppInner() {
   const { open, config } = useDrawer();
   const contentWrapper = useRef<HTMLDivElement>(null);
   const initiallyScrolledDown = useRef(false);
-  const { messages } = useChat();
+  const { messages, quote } = useChat();
+
+  console.log({ quote });
 
   useEffect(() => {
     if (messages.length > 0) {
       if (initiallyScrolledDown.current) {
         /* We only want to scroll back down on a new message
          if the user is not scrolled up looking at previous messages. */
-        const scrollableDistance = contentWrapper.current.scrollHeight - contentWrapper.current.clientHeight;
+        const scrollableDistance =
+          contentWrapper.current.scrollHeight -
+          contentWrapper.current.clientHeight;
         const scrolledDistance = contentWrapper.current.scrollTop;
-        const hasScrolledEnough = scrollableDistance - scrolledDistance >= SCROLL_CANCEL_THRESHOLD;
-        
+        const hasScrolledEnough =
+          scrollableDistance - scrolledDistance >= SCROLL_CANCEL_THRESHOLD;
+
         if (hasScrolledEnough) {
           return;
         }
@@ -50,7 +56,7 @@ function AppInner() {
         // Always scroll to the bottom on first load.
         initiallyScrolledDown.current = true;
       }
-  
+
       contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
     }
   }, [messages]);
@@ -64,18 +70,26 @@ function AppInner() {
         </div>
         <div className="App-center">
           <div className="App-content" ref={contentWrapper}>
-              {open ? (
-                <div className="App-drawer">{config.content}</div>
-              ) : (
-                <ChatMessageList />
-              )}
+            {open ? (
+              <div className="App-drawer">{config.content}</div>
+            ) : (
+              <ChatMessageList />
+            )}
           </div>
           <div className="App-side">
             <UserList />
           </div>
         </div>
-        <div className="App-bottom">
-          <div className="App-input">
+        <div className="App-bottom-wrapper">
+          <div className="App-bottom">
+            <div
+              className="App-bottom-extra"
+              style={{
+                visibility: quote ? "visible" : "hidden",
+              }}
+            >
+              {quote && <QuotedMessage />}
+            </div>
             <UserInput />
             <UsersTyping />
           </div>

chat/src/features/chat/ChatMessage.css

@@ -49,3 +49,8 @@
   top: 4px;
   right: 4px;
 }
+
+/* List */
+.ChatMessageList {
+  flex: 1;
+}

chat/src/features/chat/QuotedMessage.css

@@ -1,28 +1,15 @@
-@keyframes sliding-up {
-    from {
-        top: 50px;
-    }
-    to {
-        top: 0;
-    }
-}
-
 .QuotedMessage {
-    position: relative;
-    padding: 0.5rem 0;
-    border-top: 1px solid var(--primary);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    animation: sliding-up 0.3s forwards;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .QuotedMessage-content {
-    margin-left: 1rem;
-    flex: 1;
-    max-width: 420px;
-    max-height: 40px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-right: 1rem;
-}
+  margin-left: 1rem;
+  flex: 1;
+  max-width: 420px;
+  max-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 1rem;
+}