fix(front): fix inconsistencies in notification design

Fixed an issue where the dark mode design was not being applied on the settings page with a unified component.

frontend/src/components/notifications/index.ts

@@ -0,0 +1,3 @@
+// @index('./*', f => `export * from '${f.path}'`)
+export * from './progress_bar';
+export * from './toaster';

frontend/src/components/progress_bar.tsx → frontend/src/components/notifications/progress_bar.tsx

@@ -1,7 +1,6 @@
 import Box from '@mui/material/Box';
 import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
-import * as React from 'react';
 
 function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
   return (
@@ -20,7 +19,7 @@ type Props = {
   progress: number;
 };
 
-export default function LinearWithValueLabel({ progress }: Readonly<Props>) {
+export function LinearWithValueLabel({ progress }: Readonly<Props>) {
   return (
     <Box sx={{ width: '100%' }}>
       <LinearProgressWithLabel value={progress} />

frontend/src/components/notifications/toaster.tsx

@@ -0,0 +1,22 @@
+import { Toaster as Toast, type ToasterProps } from 'react-hot-toast';
+
+/**
+ * Toaster wrapper with default style applied
+ * # INFO
+ * This was written for ease of changing the source code.
+ */
+export function Toaster(props: Readonly<ToasterProps>) {
+  return (
+    <Toast
+      position="bottom-right"
+      reverseOrder={false}
+      toastOptions={{
+        style: {
+          color: '#fff',
+          background: '#1a1919e1',
+        },
+      }}
+      {...props}
+    />
+  );
+}

frontend/src/components/pages/converter.tsx

@@ -1,9 +1,7 @@
-'use client';
-
 import { Box } from '@mui/material';
-import { Toaster } from 'react-hot-toast';
 
 import { ConvertForm } from '@/components/form';
+import { Toaster } from '@/components/notifications';
 import { useDynStyle, useInjectScript, useLocale, useToastLimit } from '@/hooks';
 
 export default function Converter() {
@@ -26,16 +24,7 @@ export default function Converter() {
       >
         <ConvertForm />
       </Box>
-      <Toaster
-        position="bottom-right"
-        reverseOrder={false}
-        toastOptions={{
-          style: {
-            color: '#fff',
-            background: '#1a1919e1',
-          },
-        }}
-      />
+      <Toaster />
     </>
   );
 }

frontend/src/components/pages/settings.tsx

@@ -3,9 +3,9 @@
 import { Box } from '@mui/material';
 import InputLabel from '@mui/material/InputLabel';
 import AceEditor from 'react-ace';
-import { Toaster } from 'react-hot-toast';
 
 import { SelectEditorMode, StyleList, TranslationList } from '@/components/lists';
+import { Toaster } from '@/components/notifications';
 import { useDynStyle, useInjectScript, useLocale, useStorageState, useTranslation } from '@/hooks';
 import { selectEditorMode, type EditorMode } from '@/utils/selector';