Some notification highlight animations

For better notification visibility, add notification highlight animation
around the screen.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/ui/notifications.css

@@ -1,3 +1,43 @@
+/** Notification Ripple */
+@keyframes notification-ripple {
+	0% {
+		border: none 0px;
+	}
+	50% {
+		border: solid 5px;
+	}
+	100% {
+		border: none 0px;
+	}
+}
+
+div.notification-highlight {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+
+	z-index: 1000;
+	pointer-events: none;
+
+	box-sizing: border-box;
+
+	animation: notification-ripple;
+	animation-iteration-count: 1;
+}
+
+.notification-highlight.notification-success {
+	border-color: #39b34999 !important;
+}
+.notification-highlight.notification-warn {
+	border-color: #b3a13999 !important;
+}
+.notification-highlight.notification-info {
+	border-color: #3976b399 !important;
+}
+
 /** Notification area */
 .notification-area {
 	position: absolute;

js/config.js

@@ -41,6 +41,12 @@ const config = makeReadOnly(
 
 		// Default notification timeout
 		notificationTimeout: 8000,
+		notificationHighlightAnimationDuration: 200,
+
+		/**
+		 * Interrogate Tool
+		 */
+		interrogateToolNotificationTimeout: 120000, // Default is two minutes
 	},
 	"config"
 );

js/initalize/workspace.populate.js

@@ -39,8 +39,11 @@
 			console.debug("[workspace.populate] Loading workspace");
 
 			const res = e.target.result;
-			const {workspace} = res;
+			const {name, workspace} = res;
 			importWorkspaceState(workspace);
+			notifications.notify(`Loaded workspace '${name}'`, {
+				type: NotificationType.SUCCESS,
+			});
 		};
 	});
 
@@ -149,6 +152,10 @@
 				workspace.name = name;
 
 				workspaces.put(workspace).onsuccess = () => {
+					notifications.notify(
+						`Workspace name was updated to '${workspace.name}'`,
+						{type: NotificationType.SUCCESS}
+					);
 					listWorkspaces();
 				};
 			};

js/lib/notifications.js

@@ -52,16 +52,20 @@ const notifications = {
 	 *
 	 * @param {string | HTMLElement} message Message to display to the user.
 	 * @param {Object} options Extra options for the notification.
-	 * @param {NotificationType} type Notification type
+	 * @param {NotificationType} options.type Notification type
+	 * @param {boolean} options.collapsed Whether notification is collapsed by default
+	 * @param {number} options.timeout Timeout for the notification
 	 */
 	notify(message, options = {}) {
 		defaultOpt(options, {
 			type: NotificationType.INFO,
+			collapsed: false,
 			timeout: config.notificationTimeout,
 		});
 
 		const notificationEl = document.createElement("div");
-		notificationEl.classList.add("notification", "expanded", options.type);
+		notificationEl.classList.add("notification", options.type);
+		if (!options.collapsed) notificationEl.classList.add("expanded");
 		notificationEl.title = new Date().toISOString();
 		notificationEl.addEventListener("click", () =>
 			notificationEl.classList.toggle("expanded")
@@ -79,6 +83,23 @@ const notifications = {
 
 		notificationEl.append(closeBtn);
 
+		if (
+			config.notificationHighlightAnimationDuration &&
+			config.notificationHighlightAnimationDuration > 0
+		) {
+			const notificationHighlightEl = document.createElement("div");
+			notificationHighlightEl.style.animationDuration = `${config.notificationHighlightAnimationDuration}ms`;
+			notificationHighlightEl.classList.add(
+				"notification-highlight",
+				`notification-${options.type}`
+			);
+
+			document.body.appendChild(notificationHighlightEl);
+			setTimeout(() => {
+				notificationHighlightEl.remove();
+			}, config.notificationHighlightAnimationDuration);
+		}
+
 		this._areaEl.prepend(notificationEl);
 		if (options.timeout)
 			setTimeout(() => {

js/ui/tool/interrogate.js

@@ -149,6 +149,10 @@ const interrogate_callback = async (evn, state) => {
 				"\n\nDo you want to replace your prompt with this? You can change it down below:",
 			result
 		);
+		notifications.notify(`Interrogation returned '${result}'`, {
+			collapsed: true,
+			timeout: config.interrogateToolNotificationTimeout,
+		});
 		if (text) {
 			document.getElementById("prompt").value = text;
 			tools.dream.enable();