rating notification

frontend/app/notification/notificationbubbles.scss

@@ -3,8 +3,8 @@
 
 .notification-bubbles {
     display: flex;
-    width: 380px;
+    width: 432px;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: flex-end;
     row-gap: 8px;
 }

frontend/app/notification/notificationbubbles.tsx

@@ -8,13 +8,15 @@ import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import "./notificationbubbles.scss";
 import { NotificationItem } from "./notificationitem";
+import { RatingBubble } from "./ratingbubble";
 import { useNotification } from "./usenotification";
 
 const NotificationBubbles = () => {
     const {
         notifications,
         hoveredId,
         hideNotification,
+        removeNotification,
         copyNotification,
         handleActionClick,
         formatTimestamp,
@@ -59,6 +61,15 @@ const NotificationBubbles = () => {
             >
                 {notifications.map((notif) => {
                     if (notif.hidden) return null;
+                    if (notif.componentType === "rating") {
+                        return (
+                            <RatingBubble
+                                key={notif.id}
+                                notification={notif}
+                                onRemove={removeNotification}
+                            ></RatingBubble>
+                        );
+                    }
                     return (
                         <NotificationItem
                             key={notif.id}

frontend/app/notification/notificationitem.tsx

@@ -29,8 +29,8 @@ const NotificationItem = ({
     onMouseEnter,
     onMouseLeave,
 }: NotificationItemProps) => {
-    const { id, title, message, icon, type, timestamp, persistent, actions } = notification;
-    const color = type === "error" ? "red" : type === "warning" ? "yellow" : "green";
+    const { id, title, message, icon, statusType, timestamp, persistent, actions } = notification;
+    const color = statusType === "error" ? "red" : statusType === "warning" ? "yellow" : "green";
     const nIcon = icon ? icon : "bell";
 
     const renderCloseButton = () => {

frontend/app/notification/notificationpopover.tsx

@@ -37,8 +37,10 @@ const NotificationPopover = () => {
         setNotificationPopoverMode(!notificationPopoverMode);
     }, [notificationPopoverMode]);
 
-    const hasErrors = notifications.some((n) => n.type === "error");
-    const hasUpdate = notifications.some((n) => n.type === "update");
+    const filteredNotifications = notifications.filter((n) => n.componentType == null);
+
+    const hasErrors = filteredNotifications.some((n) => n.statusType === "error");
+    const hasUpdate = filteredNotifications.some((n) => n.statusType === "update");
 
     const addOnClassNames = hasUpdate ? "solid green" : hasErrors ? "solid red" : "ghost grey";
 
@@ -61,12 +63,12 @@ const NotificationPopover = () => {
                     "notification-trigger-button horizontal-padding-6 vertical-padding-4 border-radius-",
                     addOnClassNames
                 )}
-                disabled={notifications.length === 0}
+                disabled={filteredNotifications.length === 0}
                 onClick={handleTogglePopover}
             >
                 {getIcon()}
             </PopoverButton>
-            {notifications.length > 0 && (
+            {filteredNotifications.length > 0 && (
                 <PopoverContent className="notification-content">
                     <div className="header">
                         <span>Notifications</span>
@@ -85,7 +87,7 @@ const NotificationPopover = () => {
                         options={{ scrollbars: { autoHide: "leave" } }}
                         style={{ maxHeight: window.innerHeight / 2 }}
                     >
-                        {notifications.map((notif, index) => (
+                        {filteredNotifications.map((notif, index) => (
                             <Fragment key={notif.id}>
                                 <NotificationItem
                                     className={clsx({ hovered: hoveredId === notif.id })}
@@ -98,7 +100,7 @@ const NotificationPopover = () => {
                                     onMouseEnter={() => setHoveredId(notif.id)}
                                     onMouseLeave={() => setHoveredId(null)}
                                 />
-                                {index !== notifications.length - 1 && <div className="divider"></div>}
+                                {index !== filteredNotifications.length - 1 && <div className="divider"></div>}
                             </Fragment>
                         ))}
                     </OverlayScrollbarsComponent>

frontend/app/notification/ratingbubble.less

@@ -0,0 +1,36 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.notification-rating-bubble {
+    position: relative;
+    display: flex;
+    width: 432px;
+    padding: 16px 24px 16px 16px;
+    align-items: flex-start;
+    gap: 12px;
+    border-radius: 8px;
+    border: 0.5px solid rgba(255, 255, 255, 0.12);
+    background: #232323;
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
+
+    .notification-inner {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        column-gap: 6px;
+
+        .actions-wrapper {
+            display: flex;
+            column-gap: 9px;
+            margin-top: 12px;
+
+            button {
+                width: 32px;
+                height: 32px;
+                padding: 0;
+                text-align: center;
+                justify-content: center;
+            }
+        }
+    }
+}

frontend/app/notification/ratingbubble.tsx

@@ -0,0 +1,66 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from "@/element/button";
+import { makeIconClass } from "@/util/util";
+import clsx from "clsx";
+import { useState } from "react";
+
+import "./ratingbubble.less";
+
+interface RatingBubbleProps {
+    notification: NotificationType;
+    onRemove: (id: string) => void;
+}
+
+const RatingBubble = ({ notification, onRemove }: RatingBubbleProps) => {
+    const { id, title, message } = notification;
+    const [hoveredButtons, setHoveredButtons] = useState<{ [key: number]: boolean }>({});
+
+    const handleRatingClick = (id, rating: number) => {
+        console.log("rating clicked");
+        onRemove(id);
+    };
+
+    const handleMouseEnter = (buttonIndex: number) => {
+        setHoveredButtons((prev) => ({ ...prev, [buttonIndex]: true }));
+    };
+
+    const handleMouseLeave = (buttonIndex: number) => {
+        setHoveredButtons((prev) => ({ ...prev, [buttonIndex]: false }));
+    };
+
+    return (
+        <div className={clsx("notification-rating-bubble")} title="Click to Copy Notification Message">
+            <Button
+                className="close-btn ghost grey vertical-padding-10"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onRemove(id);
+                }}
+                aria-label="Close"
+            >
+                <i className={clsx(makeIconClass("close", false))}></i>
+            </Button>
+            <div className="notification-inner">
+                {title && <div className={clsx("notification-title green")}>{title}</div>}
+                {message && <div className="notification-message">{message}</div>}
+                <div className="actions-wrapper">
+                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((rating) => (
+                        <Button
+                            key={rating}
+                            className={clsx("border-radius-4", hoveredButtons[rating] ? "green" : "grey")}
+                            onClick={() => handleRatingClick(id, rating)}
+                            onMouseEnter={() => handleMouseEnter(rating)}
+                            onMouseLeave={() => handleMouseLeave(rating)}
+                        >
+                            {rating}
+                        </Button>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export { RatingBubble };

frontend/types/custom.d.ts

@@ -320,7 +320,8 @@ declare global {
         hidden?: boolean;
         actions?: NotificationActionType[];
         persistent?: boolean;
-        type?: "error" | "update" | "info" | "warning";
+        componentType?: "rating";
+        statusType?: "error" | "update" | "info" | "warning";
     };
 
     interface AbstractWshClient {