refactor(web/notifications): notifications rewrite

web/package.json

@@ -29,6 +29,7 @@
     "prettier": "^2.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.0",
     "react-markdown": "^8.0.1",
     "typescript": "^4.6.3",
     "vite": "^2.9.13",

web/pnpm-lock.yaml

@@ -34,6 +34,7 @@ specifiers:
   prop-types: ^15.8.1
   react: 18.2.0
   react-dom: 18.2.0
+  react-hot-toast: ^2.4.0
   react-markdown: ^8.0.1
   rimraf: ^3.0.2
   typescript: ^4.6.3
@@ -66,6 +67,7 @@ dependencies:
   prettier: 2.7.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y
   react-markdown: 8.0.1_bbvjflvjoibwhtpmedigb26h6y
   typescript: 4.6.3
   vite: 2.9.13
@@ -2984,6 +2986,12 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
+  /goober/2.1.11:
+    resolution: {integrity: sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dev: false
+
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -3547,6 +3555,20 @@ packages:
       use-sidecar: 1.1.2_bbvjflvjoibwhtpmedigb26h6y
     dev: false
 
+  /react-hot-toast/2.4.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      goober: 2.1.11
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - csstype
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 

web/src/features/dev/debug/notification.ts

@@ -1,30 +1,45 @@
 import { CustomNotificationProps, NotificationProps } from '../../notifications/NotificationWrapper';
 import { debugData } from '../../../utils/debugData';
 
-export const debugNotification = () => {
-  debugData<NotificationProps>([
-    {
-      action: 'notify',
-      data: {
-        description: 'Dunak is nerd',
-        title: 'Dunak',
-        id: 1,
-      },
-    },
-  ]);
-};
-
 export const debugCustomNotification = () => {
   debugData<CustomNotificationProps>([
     {
       action: 'customNotify',
       data: {
-        description: 'Dunak is nerd',
-        icon: 'basket-shopping',
-        style: {
-          backgroundColor: '#2D3748',
-          color: 'white',
-        },
+        title: 'Success',
+        description: 'Notification description',
+        type: 'success',
+      },
+    },
+  ]);
+  debugData<CustomNotificationProps>([
+    {
+      action: 'customNotify',
+      data: {
+        title: 'Info',
+        description: 'Notification description',
+        type: 'info',
+      },
+    },
+  ]);
+  debugData<CustomNotificationProps>([
+    {
+      action: 'customNotify',
+      data: {
+        title: 'Error',
+        description: 'Notification description',
+        type: 'error',
+      },
+    },
+  ]);
+  debugData<CustomNotificationProps>([
+    {
+      action: 'customNotify',
+      data: {
+        title: 'Custom icon success',
+        description: 'Notification description',
+        type: 'success',
+        icon: 'microchip',
       },
     },
   ]);

web/src/features/dev/index.tsx

@@ -4,7 +4,7 @@ import { debugAlert } from './debug/alert';
 import { debugContext } from './debug/context';
 import { debugInput } from './debug/input';
 import { debugMenu } from './debug/menu';
-import { debugCustomNotification, debugNotification } from './debug/notification';
+import { debugCustomNotification } from './debug/notification';
 import { debugCircleProgressbar, debugProgressbar } from './debug/progress';
 import { debugTextUI } from './debug/textui';
 import { debugSkillCheck } from './debug/skillcheck';
@@ -48,10 +48,7 @@ const Dev: React.FC = () => {
           </Button>
           <Divider />
           <Button fullWidth onClick={() => debugCustomNotification()}>
-            Send custom notification
-          </Button>
-          <Button fullWidth onClick={() => debugNotification()}>
-            Send default notification
+            Send notification
           </Button>
           <Divider />
           <Button fullWidth onClick={() => debugProgressbar()}>

web/src/features/notifications/NotificationWrapper.tsx

@@ -1,14 +1,17 @@
-import { useToast, type ToastPosition, Box, HStack, Text } from '@chakra-ui/react';
+import { useToast, Box, HStack, Text } from '@chakra-ui/react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { toast, Toaster, ToastPosition } from 'react-hot-toast';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ReactMarkdown from 'react-markdown';
+import { Avatar, createStyles, Group, keyframes, Stack } from '@mantine/core';
+import React from 'react';
 
 export interface NotificationProps {
   title?: string;
   description?: string;
   duration?: number;
-  position?: ToastPosition;
+  position?: ToastPosition | 'top' | 'bottom';
   variant?: string;
   status?: 'info' | 'warning' | 'success' | 'error';
   id?: number;
@@ -21,64 +24,92 @@ export interface CustomNotificationProps {
   duration?: number;
   icon?: IconProp;
   iconColor?: string;
-  position?: ToastPosition;
+  position?: ToastPosition | 'top' | 'bottom';
   id?: number;
   type?: string;
 }
 
+const useStyles = createStyles((theme) => ({
+  container: {
+    width: 300,
+    height: 'fit-content',
+    backgroundColor: theme.colors.dark[6],
+    color: theme.colors.dark[0],
+    padding: 12,
+    borderRadius: theme.radius.sm,
+    fontFamily: 'Roboto',
+    boxShadow: theme.shadows.sm,
+  },
+  title: {
+    fontWeight: 500,
+  },
+  description: {
+    fontSize: 12,
+    color: theme.colors.dark[2],
+  },
+}));
+
 const Notifications: React.FC = () => {
-  const toast = useToast();
+  const { classes } = useStyles();
 
   useNuiEvent<CustomNotificationProps>('customNotify', (data) => {
     if (!data.title && !data.description) return;
-    if (data.id && toast.isActive(data.id)) return;
+    // Backwards compat with old notifications
+    let position = data.position;
+    switch (position) {
+      case 'top':
+        position = 'top-center';
+        break;
+      case 'bottom':
+        position = 'bottom-center';
+        break;
+    }
     if (!data.icon) {
-      data.icon = data.type === 'error' ? 'circle-xmark' : data.type === 'success' ? 'circle-check' : 'circle-info';
+      data.icon = data.type === 'error' ? 'xmark' : data.type === 'success' ? 'check' : 'info';
     }
 
-    const id = data.id;
-    toast({
-      id,
-      duration: data.duration || 3000,
-      position: data.position || 'top-right',
-      render: () => (
-        <Box className={`toast-${data.type || 'inform'}`} style={data.style} p={2} borderRadius="sm" boxShadow="md">
-          <HStack spacing={0}>
-            {data.icon && (
-              <FontAwesomeIcon
-                fixedWidth
-                icon={data.icon}
-                fontSize="1.3em"
-                style={{ paddingRight: 8 }}
-                color={data.iconColor}
-              />
+    toast(
+      <Box style={data.style} className={`${classes.container}`}>
+        <Group noWrap spacing={12}>
+          {data.icon && (
+            <>
+              {!data.iconColor ? (
+                <Avatar
+                  color={data.type === 'error' ? 'red' : data.type === 'success' ? 'teal' : 'blue'}
+                  radius="xl"
+                  size={(data.title && !data.description) || (data.description && !data.title) ? 28 : undefined}
+                >
+                  <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" />
+                </Avatar>
+              ) : (
+                <FontAwesomeIcon icon={data.icon} style={{ color: data.iconColor }} fixedWidth size="lg" />
+              )}
+            </>
+          )}
+          <Stack spacing={0}>
+            {data.title && <Text className={classes.title}>{data.title}</Text>}
+            {data.description && (
+              <Text className={classes.description}>
+                <ReactMarkdown>{data.description}</ReactMarkdown>
+              </Text>
             )}
-            <Box w="100%">
-              {data.title && <Text as="b">{data.title}</Text>}
-              {data.description && <Text><ReactMarkdown>{data.description}</ReactMarkdown></Text>}
-            </Box>
-          </HStack>
-        </Box>
-      ),
-    });
+          </Stack>
+        </Group>
+      </Box>,
+      {
+        id: data.id?.toString(),
+        duration: data.duration || 3000,
+        position: position || 'top-right',
+        style: {
+          padding: 0,
+          boxShadow: 'none',
+          backgroundColor: 'transparent',
+        },
+      }
+    );
   });
 
-  useNuiEvent<NotificationProps>('notify', (data) => {
-    if (!data.title && !data.description) return;
-    if (data.id && toast.isActive(data.id)) return;
-    const id = data.id;
-    toast({
-      id,
-      title: data.title,
-      description: data.description,
-      duration: data.duration || 4000,
-      position: data.position || 'top-right',
-      variant: data.variant,
-      status: data.status,
-    });
-  });
-
-  return <></>;
+  return <Toaster></Toaster>;
 };
 
 export default Notifications;