Add InfoDialog component and integrate with Redux for state management

frontend/src/App.tsx

@@ -5,17 +5,20 @@ import { AppRoutes } from '@/routes/AppRoutes';
 import { ThemeProvider } from '@/contexts/ThemeContext';
 import QueryClientProviders from '@/config/QueryClientProvider';
 import { GlobalLoader } from './components/Loader/GlobalLoader';
+import { InfoDialog } from './components/Dialog/InfoDialog';
 import { useSelector } from 'react-redux';
 import { RootState } from './app/store';
 const App: React.FC = () => {
   const { loading, message } = useSelector((state: RootState) => state.loader);
+  const { isOpen, title, message: infoMessage } = useSelector((state: RootState) => state.infoDialog);
   return (
     <ThemeProvider>
       <QueryClientProviders>
         <BrowserRouter>
           <AppRoutes />
         </BrowserRouter>
         <GlobalLoader loading={loading} message={message} />
+        <InfoDialog isOpen={isOpen} title={title} message={infoMessage} />
       </QueryClientProviders>
     </ThemeProvider>
   );

frontend/src/app/store.ts

@@ -1,10 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 import loaderReducer from '@/features/loaderSlice';
 import onboardingReducer from '@/features/onboardingSlice';
+import infoDialogReducer from '@/features/infoDialogSlice';
+
 export const store = configureStore({
   reducer: {
     loader: loaderReducer,
     onboarding: onboardingReducer,
+    infoDialog: infoDialogReducer,
   },
 });
 

frontend/src/components/Dialog/InfoDialog.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Info } from 'lucide-react';
+import { 
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { InfoDialogProps } from '@/types/infoDialog';
+import { useDispatch } from 'react-redux';
+import { hideInfoDialog } from '@/features/infoDialogSlice';
+
+export const InfoDialog: React.FC<InfoDialogProps> = ({
+  isOpen,
+  title,
+  message
+}) => {
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(hideInfoDialog());
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) handleClose();
+    }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Info className="h-5 w-5 text-primary" />
+            {title}
+          </DialogTitle>
+          <DialogDescription>
+            {message}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button onClick={handleClose}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/src/features/infoDialogSlice.ts

@@ -0,0 +1,33 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface InfoDialogState {
+  isOpen: boolean;
+  title: string;
+  message: string;
+}
+
+const initialState: InfoDialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+};
+
+const infoDialogSlice = createSlice({
+  name: 'infoDialog',
+  initialState,
+  reducers: {
+    showInfoDialog(state, action: PayloadAction<{ title: string; message: string }>) {
+      state.isOpen = true;
+      state.title = action.payload.title;
+      state.message = action.payload.message;
+    },
+    hideInfoDialog(state) {
+      state.isOpen = false;
+      state.title = '';
+      state.message = '';
+    },
+  },
+});
+
+export const { showInfoDialog, hideInfoDialog } = infoDialogSlice.actions;
+export default infoDialogSlice.reducer;

frontend/src/pages/SettingsPage/Settings.tsx

@@ -17,6 +17,7 @@ import { usePictoMutation } from '@/hooks/useQueryExtensio';
 
 import { useDispatch } from 'react-redux';
 import { showLoader, hideLoader } from '@/features/loaderSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
 
 import {
   deleteFolder,
@@ -84,6 +85,12 @@ const Settings: React.FC = () => {
       const hasUpdate = await checkForUpdates();
       if (hasUpdate) {
         setUpdateDialogOpen(true);
+      } else {
+        // Show info dialog when no updates are available
+        dispatch(showInfoDialog({
+          title: 'No Updates Available',
+          message: 'Your application is already up to date with the latest version.'
+        }));
       }
       dispatch(hideLoader());
     };

frontend/src/types/infoDialog.ts

@@ -0,0 +1,5 @@
+export interface InfoDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+}