feat(ui): move more Toast logic

Author: avivkeller

packages/ui-components/src/Common/CodeBox/index.module.css

@@ -73,6 +73,12 @@
   }
 }
 
-.icon {
-  @apply size-4;
+.toast {
+  @apply flex
+    items-center
+    gap-3;
+
+  .icon {
+    @apply size-4;
+  }
 }

packages/ui-components/src/Common/CodeBox/index.tsx

@@ -94,9 +94,9 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
     const text = containerRef.current?.textContent;
     if (text) {
       notify({
-        duration: 300,
+        duration: 30000,
         message: (
-          <div className="flex items-center gap-3">
+          <div className={styles.toast}>
             <CodeBracketIcon className={styles.icon} />
             {notificationText}
           </div>

…/__tests__/NotificationProvider.test.jsx …icationProvider/__tests__/index.test.jsxpackages/ui-components/src/Providers/__tests__/NotificationProvider.test.jsx renamed to packages/ui-components/src/Providers/NotificationProvider/__tests__/index.test.jsx packages/ui-components/src/Providers/__tests__/NotificationProvider.test.jsx renamed to packages/ui-components/src/Providers/NotificationProvider/__tests__/index.test.jsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 
-import { NotificationProvider, useNotification } from '../NotificationProvider';
+import { NotificationProvider, useNotification } from '..';
 
 describe('useNotification', () => {
     it('should return the notification dispatch function', () => {

packages/ui-components/src/Providers/NotificationProvider/index.module.css

@@ -0,0 +1,8 @@
+@reference "../../styles/index.css";
+
+.viewport {
+  @apply fixed
+    bottom-0
+    right-0
+    list-none;
+}

…s/src/Providers/NotificationProvider.tsx …Providers/NotificationProvider/index.tsxpackages/ui-components/src/Providers/NotificationProvider.tsx renamed to packages/ui-components/src/Providers/NotificationProvider/index.tsx packages/ui-components/src/Providers/NotificationProvider.tsx renamed to packages/ui-components/src/Providers/NotificationProvider/index.tsx

@@ -10,6 +10,8 @@ import type {
 
 import Notification from '#ui/Common/Notification';
 
+import styles from './index.module.css';
+
 type NotificationContextType = {
   message: string | ReactNode;
   duration: number;
@@ -38,13 +40,13 @@ export const NotificationProvider: FC<PropsWithChildren> = ({ children }) => {
         <Toast.Provider>
           {children}
 
-          <Toast.Viewport className={'fixed bottom-0 right-0 list-none'} />
-
           {notification && (
             <Notification duration={notification.duration}>
               {notification.message}
             </Notification>
           )}
+
+          <Toast.Viewport className={styles.viewport} />
         </Toast.Provider>
       </NotificationDispatch.Provider>
     </NotificationContext.Provider>