diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx index dfe8912..c4706e1 100644 --- a/app/components/chat/Chat.client.tsx +++ b/app/components/chat/Chat.client.tsx @@ -3,7 +3,7 @@ import type { Message } from 'ai'; import { useChat } from '@ai-sdk/react'; import { useAnimate } from 'framer-motion'; import { memo, useCallback, useEffect, useRef, useState } from 'react'; -import { cssTransition, toast, ToastContainer } from 'react-toastify'; +import { toast } from 'react-toastify'; import { useMessageParser, usePromptEnhancer, useShortcuts } from '~/lib/hooks'; import { description, useChatHistory } from '~/lib/persistence'; import { chatStore } from '~/lib/stores/chat'; @@ -29,11 +29,6 @@ import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils'; import { useMCPStore } from '~/lib/stores/mcp'; import type { LlmErrorAlertType } from '~/types/actions'; -const toastAnimation = cssTransition({ - enter: 'animated fadeInRight', - exit: 'animated fadeOutRight', -}); - const logger = createScopedLogger('Chat'); export function Chat() { @@ -56,34 +51,6 @@ export function Chat() { importChat={importChat} /> )} - { - return ( - - ); - }} - icon={({ type }) => { - /** - * @todo Handle more types if we need them. This may require extra color palettes. - */ - switch (type) { - case 'success': { - return
; - } - case 'error': { - return
; - } - } - - return undefined; - }} - position="bottom-right" - pauseOnFocusLoss - transition={toastAnimation} - autoClose={3000} - /> ); } diff --git a/app/components/deploy/GitHubDeploy.client.tsx b/app/components/deploy/GitHubDeploy.client.tsx index a6846f7..d49f427 100644 --- a/app/components/deploy/GitHubDeploy.client.tsx +++ b/app/components/deploy/GitHubDeploy.client.tsx @@ -145,6 +145,9 @@ export function useGitHubDeploy() { source: 'github', }); + // Show success toast notification + toast.success(`🚀 GitHub deployment preparation completed successfully!`); + return { success: true, files: fileContents, diff --git a/app/components/deploy/GitLabDeploy.client.tsx b/app/components/deploy/GitLabDeploy.client.tsx index ba58095..1173bac 100644 --- a/app/components/deploy/GitLabDeploy.client.tsx +++ b/app/components/deploy/GitLabDeploy.client.tsx @@ -145,6 +145,9 @@ export function useGitLabDeploy() { source: 'gitlab', }); + // Show success toast notification + toast.success(`🚀 GitLab deployment preparation completed successfully!`); + return { success: true, files: fileContents, diff --git a/app/components/deploy/NetlifyDeploy.client.tsx b/app/components/deploy/NetlifyDeploy.client.tsx index 62b95f4..327efba 100644 --- a/app/components/deploy/NetlifyDeploy.client.tsx +++ b/app/components/deploy/NetlifyDeploy.client.tsx @@ -224,6 +224,9 @@ export function useNetlifyDeploy() { source: 'netlify', }); + // Show success toast notification + toast.success(`🚀 Netlify deployment completed successfully!`); + return true; } catch (error) { console.error('Deploy error:', error); diff --git a/app/components/deploy/VercelDeploy.client.tsx b/app/components/deploy/VercelDeploy.client.tsx index d2303cd..46d2d41 100644 --- a/app/components/deploy/VercelDeploy.client.tsx +++ b/app/components/deploy/VercelDeploy.client.tsx @@ -213,6 +213,9 @@ export function useVercelDeploy() { source: 'vercel', }); + // Show success toast notification + toast.success(`🚀 Vercel deployment completed successfully!`); + return true; } catch (err) { console.error('Vercel deploy error:', err); diff --git a/app/root.tsx b/app/root.tsx index 9b8c692..24513c1 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -9,6 +9,7 @@ import { useEffect } from 'react'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { ClientOnly } from 'remix-utils/client-only'; +import { cssTransition, ToastContainer } from 'react-toastify'; import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url'; import globalStyles from './styles/index.scss?url'; @@ -16,6 +17,11 @@ import xtermStyles from '@xterm/xterm/css/xterm.css?url'; import 'virtual:uno.css'; +const toastAnimation = cssTransition({ + enter: 'animated fadeInRight', + exit: 'animated fadeOutRight', +}); + export const links: LinksFunction = () => [ { rel: 'icon', @@ -75,6 +81,31 @@ export function Layout({ children }: { children: React.ReactNode }) { return ( <> {() => {children}} + { + return ( + + ); + }} + icon={({ type }) => { + switch (type) { + case 'success': { + return
; + } + case 'error': { + return
; + } + } + + return undefined; + }} + position="bottom-right" + pauseOnFocusLoss + transition={toastAnimation} + autoClose={3000} + /> diff --git a/app/styles/components/toast.scss b/app/styles/components/toast.scss index 3ebc97e..2405b72 100644 --- a/app/styles/components/toast.scss +++ b/app/styles/components/toast.scss @@ -1,3 +1,9 @@ +@use '../z-index'; + +.Toastify__toast-container { + @extend .z-toast; +} + .Toastify__toast { --at-apply: shadow-md; diff --git a/app/styles/z-index.scss b/app/styles/z-index.scss index 47a7882..7c68536 100644 --- a/app/styles/z-index.scss +++ b/app/styles/z-index.scss @@ -31,3 +31,7 @@ $zIndexMax: 999; .z-max { z-index: $zIndexMax; } + +.z-toast { + z-index: $zIndexMax + 1; +}