Skip to content

Commit

Permalink
Allow notifications to be hoverable / closeable on modals (#2216)
Browse files Browse the repository at this point in the history
Also moves them to the bottom
Related
[discussion](https://dust4ai.slack.com/archives/C050SM8NSPK/p1697714565463949)
with context and screenshots
  • Loading branch information
philipperolet authored Oct 20, 2023
1 parent 5fdb0bb commit f2b659f
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions front/components/sparkle/Notification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
} from "@dust-tt/sparkle";
import { Transition } from "@headlessui/react";
import React, { useEffect } from "react";
import { createPortal } from "react-dom";

import { classNames } from "@app/lib/utils";

Expand Down Expand Up @@ -42,7 +43,18 @@ export function NotificationArea({ children }: { children: React.ReactNode }) {
return (
<SendNotificationsContext.Provider value={sendNotification}>
{children}
<NotificationsList notifications={notifications} />
{
/** Notifications are created at DOM root via a Portal. This is to avoid
* them being made inert by headlessUI modals */
typeof window === "object" ? (
createPortal(
<NotificationsList notifications={notifications} />,
document.body
)
) : (
<NotificationsList notifications={notifications} />
) // SSR (otherwise hydration issues)
}
</SendNotificationsContext.Provider>
);
}
Expand All @@ -52,7 +64,7 @@ export function NotificationsList({
notifications: (NotificationType & { id: string })[];
}) {
return (
<div className="fixed right-0 top-0 z-30 w-80">
<div className="z-60 fixed bottom-0 right-0 w-80">
<div className="flex flex-col items-center justify-center gap-4 p-4">
{notifications.map((n) => {
return (
Expand Down

0 comments on commit f2b659f

Please sign in to comment.