Initial plugin version

src/plugins/ToastNotifications/components/NotificationComponent.tsx

@@ -0,0 +1,133 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { classes } from "@utils/misc";
+import { React, useEffect, useMemo, useState } from "@webpack/common";
+
+import { NotificationData } from "./Notifications";
+import { settings as PluginSettings } from "../index";
+
+export default ErrorBoundary.wrap(function NotificationComponent({
+    title,
+    body,
+    richBody,
+    icon,
+    image,
+    permanent,
+    dismissOnClick,
+    index,
+    onClick,
+    onClose
+}: NotificationData & { index?: number; }) {
+    const [isHover, setIsHover] = useState(false);
+    const [elapsed, setElapsed] = useState(0);
+
+    // Precompute appearance settings.
+    const AppearanceSettings = {
+        position: `toastnotifications-position-${PluginSettings.store.position || "bottom-left"}`,
+        timeout: (PluginSettings.store.timeout * 1000) || 5000,
+        opacity: PluginSettings.store.opacity / 100,
+    };
+
+    const start = useMemo(() => Date.now(), [isHover]); // Reset the timer when the user hovers over the notification.
+
+    // Precompute the position style.
+    const positionStyle = useMemo(() => {
+        if (index === undefined) return {};
+        const isTopPosition = AppearanceSettings.position.includes("top");
+        const actualHeight = 115;  // Update this with the actual height including margin
+        const effectiveIndex = index % PluginSettings.store.maxNotifications;
+        const offset = 10 + (effectiveIndex * actualHeight);  // 10 is the base offset
+
+        return isTopPosition ? { top: `${offset}px` } : { bottom: `${offset}px` };
+    }, [index, AppearanceSettings.position]);
+
+    // Handle notification timeout.
+    useEffect(() => {
+        if (isHover || permanent) return void setElapsed(0);
+
+        const intervalId = setInterval(() => {
+            const elapsed = Date.now() - start;
+            if (elapsed >= AppearanceSettings.timeout)
+                onClose!();
+            else
+                setElapsed(elapsed);
+        }, 10);
+
+        return () => clearInterval(intervalId);
+    }, [isHover]);
+
+    const timeoutProgress = elapsed / AppearanceSettings.timeout;
+
+    // Render the notification.
+    return (
+        <button
+            style={positionStyle}
+            className={classes("toastnotifications-notification-root", AppearanceSettings.position)}
+            onClick={() => {
+                onClick?.();
+                if (dismissOnClick !== false)
+                    onClose!();
+            }}
+            onContextMenu={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose!();
+            }}
+            onMouseEnter={() => setIsHover(true)}
+            onMouseLeave={() => setIsHover(false)}
+        >
+            <div className="toastnotifications-notification">
+                {icon && <img className="toastnotifications-notification-icon" src={icon} alt="User Avatar" />}
+                <div className="toastnotifications-notification-content">
+                    <div className="toastnotifications-notification-header">
+                        <h2 className="toastnotifications-notification-title">{title}</h2>
+                        <button
+                            className="toastnotifications-notification-close-btn"
+                            onClick={e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onClose!();
+                            }}
+                        >
+                            <svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="toastnotifications-notification-dismiss-title">
+                                <title id="toastnotifications-notification-dismiss-title">Dismiss Notification</title>
+                                <path fill="currentColor" d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div>
+                        {richBody ?? <p className="toastnotifications-notification-p">{body}</p>}
+                    </div>
+                </div>
+            </div>
+            {image && <img className="toastnotifications-notification-img" src={image} alt="ToastNotification Image" />}
+            {AppearanceSettings.timeout !== 0 && !permanent && (
+                <div
+                    className="toastnotifications-notification-progressbar"
+                    style={{ width: `${(1 - timeoutProgress) * 100}%`, backgroundColor: "var(--brand-experiment)" }}
+                />
+            )}
+        </button>
+    );
+}, {
+    onError: ({ props }) => props.onClose!()
+});

src/plugins/ToastNotifications/components/Notifications.tsx

@@ -0,0 +1,106 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { ReactDOM, React } from "@webpack/common";
+import type { ReactNode } from "react";
+import type { Root } from "react-dom/client";
+
+import { settings as PluginSettings } from "../index";
+import NotificationComponent from "./NotificationComponent";
+
+let NotificationQueue: JSX.Element[] = [];
+let notificationID = 0;
+let RootContainer: Root;
+
+/**
+ * getNotificationContainer()
+ * Gets the root container for the notifications, creating it if it doesn't exist.
+ * @returns {Root} The root DOM container.
+ */
+function getNotificationContainer() {
+    if (!RootContainer) {
+        const container = document.createElement("div");
+        container.id = "toastnotifications-container";
+        document.body.append(container);
+        RootContainer = ReactDOM.createRoot(container);
+    }
+
+    return RootContainer;
+}
+
+export interface NotificationData {
+    title: string; // Title to display in the notification.
+    body: string; // Notification body text.
+    richBody?: ReactNode; // Same as body, though a rich ReactNode to be rendered within the notification.
+    icon?: string; // Avatar image of the message author or source.
+    image?: string; // Large image to display in the notification for attachments.
+    permanent?: boolean; // Whether or not the notification should be permanent or timeout.
+    dismissOnClick?: boolean; // Whether or not the notification should be dismissed when clicked.
+    onClick?(): void;
+    onClose?(): void;
+}
+
+export async function showNotification(notification: NotificationData) {
+    const root = getNotificationContainer();
+    const thisNotificationID = notificationID++;
+
+    return new Promise<void>(resolve => {
+        const ToastNotification = (
+            <NotificationComponent
+                key={thisNotificationID.toString()}
+                index={NotificationQueue.length}
+                {...notification}
+                onClose={() => {
+                    // Remove this notification from the queue.
+                    NotificationQueue = NotificationQueue.filter((n) => n.key !== thisNotificationID.toString());
+                    notification.onClose?.(); // Trigger the onClose callback if it exists.
+                    console.log(`[DEBUG] [ToastNotifications] Removed #${thisNotificationID} from queue.`);
+
+                    // Re-render remaining notifications with new reversed indices.
+                    root.render(
+                        <>
+                            {NotificationQueue.map((notification, index) => {
+                                const reversedIndex = (NotificationQueue.length - 1) - index;
+                                return React.cloneElement(notification, { index: reversedIndex });
+                            })}
+                        </>
+                    );
+
+                    resolve();
+                }}
+            />
+        );
+
+        // Add this notification to the queue.
+        NotificationQueue.push(ToastNotification);
+        console.log(`[DEBUG] [ToastNotifications] Added #${thisNotificationID} to queue.`);
+
+        // Limit the number of notifications to the configured maximum.
+        if (NotificationQueue.length > PluginSettings.store.maxNotifications) NotificationQueue.shift();
+
+        // Render the notifications.
+        root.render(
+            <>
+                {NotificationQueue.map((notification, index) => {
+                    const reversedIndex = (NotificationQueue.length - 1) - index;
+                    return React.cloneElement(notification, { index: reversedIndex });
+                })}
+            </>
+        );
+    });
+}

src/plugins/ToastNotifications/components/styles.css

@@ -0,0 +1,135 @@
+:root {
+    /* Body */
+    --toastnotifications-background-color: var(--background-secondary-alt);
+    --toastnotifications-text-color: var(--text-normal);
+    --toastnotifications-border-radius: 6px;
+    --toastnotifications-width: 25vw;
+    --toastnotifications-padding: 1.25rem;
+
+    /* Title */
+    --toastnotifications-title-color: var(--header-primary);
+    --toastnotifications-title-font-size: 1rem;
+    --toastnotifications-title-font-weight: 600;
+    --toastnotifications-title-line-height: 1.25rem;
+
+    /* Close Button */
+    --toastnotifications-close-button-color: var(--interactive-normal);
+    --toastnotifications-close-button-hover-color: var(--interactive-hover);
+    --toastnotifications-close-button-opacity: 0.5;
+    --toastnotifications-close-button-hover-opacity: 1;
+
+    /* Message Author Image */
+    --toastnotifications-image-height: 4rem;
+    --toastnotifications-image-width: var(--toastnotifications-image-height);
+    --toastnotifications-image-border-radius: 6px;
+
+    /* Progress Bar */
+    --toastnotifications-progressbar-height: 0.25rem;
+
+    /* Position Offset - Global inherited offset by all positions */
+    --toastnotifications-position-offset: 1rem;
+}
+
+.toastnotifications-notification-root {
+    all: unset;
+    display: flex;
+    flex-direction: column;
+    color: var(--toastnotifications-text-color);
+    background-color: var(--toastnotifications-background-color);
+    border-radius: var(--toastnotifications-border-radius);
+    overflow: hidden;
+    cursor: pointer;
+    position: absolute;
+    z-index: 2147483647;
+    right: 1rem;
+    width: var(--toastnotifications-width);
+    min-height: 10vh;
+    bottom: calc(1rem + var(--notification-index) * 12vh);
+}
+
+.toastnotifications-notification {
+    display: flex;
+    flex-direction: row;
+    padding: var(--toastnotifications-padding);
+    gap: 1.25rem;
+}
+
+.toastnotifications-notification-content {
+    width: 100%;
+}
+
+.toastnotifications-notification-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.toastnotifications-notification-title {
+    color: var(--toastnotifications-title-color);
+    font-size: var(--toastnotifications-title-font-size);
+    font-weight: var(--toastnotifications-title-font-weight);
+    line-height: var(--toastnotifications-title-line-height);
+}
+
+.toastnotifications-notification-close-btn {
+    all: unset;
+    cursor: pointer;
+    color: var(--toastnotifications-close-button-color);
+    opacity: var(--toastnotifications-close-button-opacity);
+    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.toastnotifications-notification-close-btn:hover {
+    color: var(--toastnotifications-close-button-hover-color);
+    opacity: var(--toastnotifications-close-button-hover-opacity);
+}
+
+.toastnotifications-notification-icon {
+    height: var(--toastnotifications-image-height);
+    width: var(--toastnotifications-image-width);
+    border-radius: var(--toastnotifications-image-border-radius);
+}
+
+.toastnotifications-notification-progressbar {
+    height: var(--toastnotifications-progressbar-height);
+    border-radius: 5px;
+    margin-top: auto;
+}
+
+.toastnotifications-notification-p {
+    margin: 0.5rem 0 0;
+    line-height: 140%;
+}
+
+.toastnotifications-notification-img {
+    width: 100%;
+}
+
+/* Notification Positioning CSS */
+.toastnotifications-position-bottom-left {
+    bottom: var(--toastnotifications-position-offset);
+    left: var(--toastnotifications-position-offset);
+}
+
+.toastnotifications-position-top-left {
+    top: var(--toastnotifications-position-offset);
+    left: var(--toastnotifications-position-offset);
+}
+
+.toastnotifications-position-top-right {
+    top: var(--toastnotifications-position-offset);
+    right: var(--toastnotifications-position-offset);
+}
+
+.toastnotifications-position-bottom-right {
+    bottom: var(--toastnotifications-position-offset);
+    right: var(--toastnotifications-position-offset);
+}
+
+/* Rich Body classes */
+.toastnotifications-mention-class {
+    color: var(--mention-foreground);
+    background: var(--mention-background);
+    unicode-bidi: -moz-plaintext;
+    unicode-bidi: plaintext;
+    font-weight: 500;
+}