Limit in app notification preview to 2, added wip hover to expand

Nerimity · Sep 21, 2024 · f90765c · f90765c
1 parent 132fb79
commit f90765c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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) => {