Add view full profile and message button to mini profile flyout

Nerimity · Sep 9, 2024 · 4bdb319 · 4bdb319
1 parent 70363c3
commit 4bdb319
Show file tree

Hide file tree

Showing 7 changed files with 413 additions and 225 deletions.
diff --git a/src/components/floating-profile/FloatingProfile.module.scss b/src/components/floating-profile/FloatingProfile.module.scss
@@ -211,3 +211,12 @@ body .postItemContainer {
   font-weight: bold;
   gap: 5px;
 }
+
+.buttonsContainer {
+  display: flex;
+  margin-top: 4px;
+  gap: 4px;
+  .button {
+    flex: 1;
+  }
+}
diff --git a/src/components/floating-profile/FloatingProfile.tsx b/src/components/floating-profile/FloatingProfile.tsx
@@ -51,6 +51,9 @@ import { t } from "i18next";
 import { PostItem } from "../post-area/PostItem";
 import { Skeleton } from "../ui/skeleton/Skeleton";
 import average from "@/common/chromaJS";
+import Button from "../ui/Button";
+import { FlexRow } from "../ui/Flexbox";
+import { emitDrawerGoToMain } from "@/common/GlobalEvents";
 
 interface Props {
   dmPane?: boolean;
@@ -292,6 +295,10 @@ const DesktopProfileFlyout = (props: {
       />
     ));
   };
+  const onMessageClicked = () => {
+    users.openDM(props.userId);
+    emitDrawerGoToMain();
+  };
 
   const StickyArea = () => {
     return (
@@ -317,6 +324,7 @@ const DesktopProfileFlyout = (props: {
               size={82}
             />
           </CustomLink>
+
           <div
             class={styles.flyoutOtherDetailsContainer}
             style={{ background: bgColor() }}
@@ -333,6 +341,7 @@ const DesktopProfileFlyout = (props: {
                 <Text color="rgba(255,255,255,0.6)">:{user()!.tag}</Text>
               </CustomLink>
             </span>
+
             <UserPresence
               showFull
               hideActivity
@@ -372,6 +381,30 @@ const DesktopProfileFlyout = (props: {
                   </CustomLink>
                 </Show>
               </Text>
+              <div class={styles.buttonsContainer}>
+                <Button
+                  padding={4}
+                  textSize={12}
+                  iconSize={16}
+                  href={RouterEndpoints.PROFILE(user()!.id)}
+                  color={colors().primary}
+                  class={styles.button}
+                  label="Full Profile"
+                  iconName="person"
+                  margin={0}
+                />
+                <Button
+                  padding={4}
+                  textSize={12}
+                  iconSize={16}
+                  color={colors().primary}
+                  class={styles.button}
+                  label="Message"
+                  onClick={onMessageClicked}
+                  iconName="mail"
+                  margin={0}
+                />
+              </div>
             </Show>
           </div>
         </div>

diff --git a/src/components/message-pane/MessagePane.tsx b/src/components/message-pane/MessagePane.tsx
@@ -75,6 +75,7 @@ import Checkbox from "../ui/Checkbox";
 import { ChannelIcon } from "../ChannelIcon";
 import { MetaTitle } from "@/common/MetaTitle";
 import { millisecondsToReadable } from "@/common/date";
+import { useResizeObserver } from "@/common/useResizeObserver";
 
 const DeleteMessageModal = lazy(
   () => import("./message-delete-modal/MessageDeleteModal")
@@ -174,6 +175,8 @@ function MessageArea(props: {
   const [showEmojiPicker, setShowEmojiPicker] = createSignal(false);
   const { createPortal } = useCustomPortal();
 
+  const { height } = useResizeObserver(textAreaEl);
+
   const { channels, messages, serverMembers } = useStore();
 
   const setMessage = (content: string) => {
@@ -198,7 +201,7 @@ function MessageArea(props: {
     }
   });
 
-  createEffect(on(message, () => adjustHeight()));
+  createEffect(on([message, height], () => adjustHeight()));
 
   const cancelEdit = () => {
     channelProperties.setEditMessage(params.channelId, undefined);