From f90765ced9535dc4a0c4494c0d47e8218c1aa93c Mon Sep 17 00:00:00 2001
From: Supertiger <saawalkhn@googlemail.com>
Date: Sat, 21 Sep 2024 14:40:40 +0100
Subject: [PATCH] Limit in app notification preview to 2, added wip hover to
 expand

---
 .../InAppNotificationPreviews.module.scss     | 22 ++++++++++++++++---
 .../useInAppNotificationPreviews.tsx          |  3 +++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/in-app-notification-previews/InAppNotificationPreviews.module.scss b/src/components/in-app-notification-previews/InAppNotificationPreviews.module.scss
index ca38bc02..48bdf9da 100644
--- a/src/components/in-app-notification-previews/InAppNotificationPreviews.module.scss
+++ b/src/components/in-app-notification-previews/InAppNotificationPreviews.module.scss
@@ -10,19 +10,33 @@
 }
 .container {
   display: flex;
+  overflow: hidden;
+  flex: 1;
   flex-direction: column;
-  width: 100%;
   max-width: 500px;
-  height: 46px;
-  padding: 4px;
+  padding: 8px;
+  padding-bottom: 2px;
   margin: 4px;
   border: solid 1px rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   background-color: var(--pane-color);
 
   user-select: none;
+  transition: 0.2s;
   pointer-events: all;
   gap: 4px;
+
+  &:hover {
+    height: auto;
+    .markup {
+      display: block;
+      overflow: initial;
+      flex: 1;
+      text-overflow: initial;
+      white-space: pre-line;
+      line-break: anywhere;
+    }
+  }
 }
 
 .infoContainer {
@@ -56,6 +70,7 @@
   display: flex;
   overflow: hidden;
   flex-direction: column;
+  gap: 2px;
 }
 .body {
   display: flex;
@@ -78,6 +93,7 @@
 }
 
 .avatar {
+  align-self: flex-start;
   margin-right: 4px;
   margin-left: 4px;
 }
diff --git a/src/components/in-app-notification-previews/useInAppNotificationPreviews.tsx b/src/components/in-app-notification-previews/useInAppNotificationPreviews.tsx
index a559d74a..b9bce9f6 100644
--- a/src/components/in-app-notification-previews/useInAppNotificationPreviews.tsx
+++ b/src/components/in-app-notification-previews/useInAppNotificationPreviews.tsx
@@ -29,6 +29,9 @@ const [notifications, setNotifications] = createStore<
 >([]);
 
 const pushNotification = (notification: InAppPreviewNotification) => {
+  if (notifications.length >= 2) {
+    setNotifications(reconcile([notifications[0]!, notification]));
+  }
   setNotifications([...notifications, notification]);
 };
 const removeNotification = (notification: InAppPreviewNotification) => {