fix(web): duplicate toast containers

apps/server/src/index.ts

@@ -5,17 +5,13 @@ import { showRoutes } from 'hono/dev';
 
 import { env } from './lib/env-config.js';
 import { logger } from './lib/logger.js';
-// import { browserService } from './services/browser.service.js';
 
 import { browserService } from './services/browser.service.js';
 
 import app from './app.js';
 import { enqueueContentExtraction } from './queues/content-extraction.queue.js';
 import contentExtractionWorker from './workers/content-extraction.worker.js';
 import csvImportWorker from './workers/csv-import.worker.js';
-// import { enqueueContentExtraction } from './queues/content-extraction.queue.js';
-// import contentExtractionWorker from './workers/content-extraction.worker.js';
-// import csvImportWorker from './workers/csv-import.worker.js';
 
 if (env.isDevelopment) {
   logger.info('Available routes:');

apps/web/src/app.tsx

@@ -3,15 +3,14 @@ import { RouterProvider } from '@tanstack/react-router';
 import { ThemeProvider, useTheme } from 'next-themes';
 import { useEffect, useRef } from 'react';
 
-import { getUserQueryOptions, useGetUser } from './features/auth/api/get-user';
+import { TooltipProvider } from '@/components/ui/tooltip';
 
-import { useThemeConfig } from './hooks/use-theme-config';
+import { getUserQueryOptions, useGetUser } from '@/features/auth/api/get-user';
 
-import { queryClient } from './lib/react-query';
-import { type AuthContext, router } from './lib/router';
+import { useThemeConfig } from '@/hooks/use-theme-config';
 
-import { Toaster } from './components/ui/sonner';
-import { TooltipProvider } from './components/ui/tooltip';
+import { queryClient } from '@/lib/react-query';
+import { type AuthContext, router } from '@/lib/router';
 
 export function App() {
   return (
@@ -26,8 +25,6 @@ export function App() {
           <RouterProviderWithContext />
         </TooltipProvider>
       </ThemeProvider>
-
-      <Toaster />
     </QueryClientProvider>
   );
 }

apps/web/src/components/ui/sonner.tsx

@@ -1,15 +1,28 @@
 import {
   CheckCircleIcon,
   InfoIcon,
+  SpinnerIcon,
   WarningIcon,
-  XCircleIcon,
-  SpinnerIcon
+  XCircleIcon
 } from '@phosphor-icons/react';
 import { useTheme } from 'next-themes';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
+const lightRichColorVariables = {
+  '--success-bg': 'var(--color-success-50)',
+  '--success-text': 'var(--color-success-900)',
+  '--success-border': 'var(--color-success-200)',
+  '--info-bg': 'var(--color-info-50)',
+  '--info-text': 'var(--color-info-900)',
+  '--info-border': 'var(--color-info-200)',
+  '--error-bg': 'var(--color-danger-50)',
+  '--error-text': 'var(--color-danger-900)',
+  '--error-border': 'var(--color-danger-200)'
+} as const;
+
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();
+  const richColorVariables = theme === 'dark' ? {} : lightRichColorVariables;
 
   return (
     <Sonner
@@ -27,6 +40,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           '--normal-bg': 'var(--popover)',
           '--normal-text': 'var(--popover-foreground)',
           '--normal-border': 'var(--border)',
+          ...richColorVariables,
           '--border-radius': 'var(--radius)'
         } as React.CSSProperties
       }

apps/web/src/routes/__root.tsx

@@ -1,6 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query';
-import { HeadContent, Outlet, createRootRouteWithContext } from '@tanstack/react-router';
-import { ThemeProvider } from 'next-themes';
+import { createRootRouteWithContext, HeadContent, Outlet } from '@tanstack/react-router';
 
 import { ErrorFallback } from '@/components/common/error';
 import { NotFound } from '@/components/common/not-found';
@@ -29,14 +28,12 @@ function RootComponent() {
   const { queryClient: client } = Route.useRouteContext();
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <QueryClientProvider client={client}>
-        <HeadContent />
-        <Outlet />
-        <Notifications />
-        <TanstackQueryDevTools position="bottom" />
-        <TanstackRouterDevTools position="bottom-left" />
-      </QueryClientProvider>
-    </ThemeProvider>
+    <QueryClientProvider client={client}>
+      <HeadContent />
+      <Outlet />
+      <Notifications />
+      <TanstackQueryDevTools position="bottom" />
+      <TanstackRouterDevTools position="bottom-left" />
+    </QueryClientProvider>
   );
 }

apps/web/src/types/api.ts

@@ -1,9 +1,7 @@
-import type { HttpStatusCode } from '@/lib/response';
-
 export interface ApiResult<T> {
   result: T;
   message: string;
-  status: HttpStatusCode;
+  status: number;
 }
 
 export type BaseEntity = {