User settings update through extension and ui fixed with improvements

client/entrypoints/sidepanel/App.tsx

@@ -78,7 +78,9 @@ const App: React.FC = () => {
         <Route path="/image-recognition" element={<ImageRecognition genAI={genAI} />} />
         <Route path="/navigation" element={<Navigation loading={navigationLoading} />} />
         <Route path="/my-account" element={<MyAccount />} />
-        <Route path="/feedback" element={<FeedBackPopover />} />
+        <Route path="/feedback" element={<FeedBackPopover onClose={function (): void {
+          throw new Error('Function not implemented.');
+        } } />} />
       </Routes>
       <Outlet />
     </div>

client/entrypoints/sidepanel/components/ImageRecognition/ImageRecognition.tsx

@@ -67,7 +67,7 @@ const ImageRecognition: React.FC<{ genAI:GoogleGenerativeAI }> = ({ genAI }) =>
 
 
   return (
-    <div className={`${mode} h-full`}>
+    <div className={`${mode} dark:bg-darkBg dark:text-white h-full`}>
       <Header heading={ModuleNames.IMAGE_RECOGNITION}/>
       <div className='h-auto mt-8 px-5 pb-16 mx-auto text-base overflow-y-scroll'>           
             <div className={`${fontSize} font-kanit w-full`}>

client/entrypoints/sidepanel/components/MainMenu/MainMenu.tsx

@@ -13,67 +13,64 @@ import {Popover,PopoverHandler,PopoverContent,Button,Input,Typography,} from "@m
 
 const MainMenu: React.FC = () => {
 
-  const [mode, setMode] = useState('');
   const [hover, setHover] = useState('');
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const {userSettings} = useStore();
   const handlePopoverClick = () => {
     setIsPopoverOpen(!isPopoverOpen); 
   };
   const [showFeedBack, setShowFeedBack] = useState<boolean>(false);
+  const [mode, setMode] = useState('');
+
   const onClose = () => {
     setShowFeedBack(false);
   };
+
   useEffect(() => {
-      if(userSettings && userSettings.theme == 'dark') {
-        setMode('bg-darkBg text-white');
-        setHover('hover:bg-darkTileHover')
-      }else{
-        setHover('hover:bg-slate-200');
-      }
-  }, [userSettings])
+    setMode(userSettings?.theme || '');
+  }, [userSettings]);
 
   return (
-    <div className={`${mode} grid p-4 max-w-screen-md mx-auto text-xl font-kanit h-full overflow-y-hidden`}>
+    <div className={`${mode} dark:bg-darkBg dark:text-white grid p-4 max-w-screen-md mx-auto text-xl font-kanit h-full overflow-y-hidden`}>
 
       <Link to={`/navigation`}>
-        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 ${hover}`}>
-          <div className={` w-full inline-flex gap-4 items-center pl-16 py-10 sm:py-5 `}>
+        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 dark:hover:bg-darkTileHover hover:bg-slate-200 `}>
+          <div className={` w-full inline-flex gap-4 items-center sm:pl-16 pl-8 py-10 sm:py-5 `}>
               <img src={navigationIcon} alt="Navigation" className="sm:h-20 sm:w-20 w-10 h-10 sm:mb-2" />
               <span className="text-center text-3xl sm:text-4xl">Navigation</span>
           </div>
         </div>
       </Link>
       <hr />
       <Link to={`/summarization`}>
-        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 ${hover}`}>
-          <div className=" inline-flex gap-4 items-center justify-start pl-16 py-10 sm:py-5 ">
+        <div className={`h-full  cursor-pointer hover:pl-5 transition-all duration-75 dark:hover:bg-darkTileHover hover:bg-slate-200 `}>
+          <div className=" inline-flex gap-4 items-center justify-start sm:pl-16 pl-8 py-10 sm:py-5 ">
             <img src={summaryIcon} alt="Summary" className="sm:h-20 sm:w-20 w-10 h-10 sm:mb-2" />
             <span className="text-center text-3xl sm:text-4xl">Summarization</span>
           </div>
         </div>
       </Link>
       <hr />
       <Link to={`/image-recognition`}>
-        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 ${hover}`}>
-          <div className=" inline-flex gap-4 items-center justify-start pl-16 py-10 sm:py-5 ">
+        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 dark:hover:bg-darkTileHover hover:bg-slate-200 `}>
+          <div className=" inline-flex gap-4 items-center justify-start sm:pl-16 pl-8 py-10 sm:py-5 ">
               <img src={imageRecIcon} alt="Image Recognition" className="sm:h-20 sm:w-20 w-10 h-10 sm:mb-2" />
               <span className="text-center text-3xl sm:text-4xl">Images</span>
           </div>
         </div>
       </Link>
       <hr />
       <Link to={`/my-account`}>
-        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 ${hover}`}>
-          <div className=" inline-flex gap-4 items-center justify-start pl-16 py-10 sm:py-5 ">
+        <div className={` h-full  cursor-pointer hover:pl-5 transition-all duration-75 dark:hover:bg-darkTileHover hover:bg-slate-200 `}>
+          <div className=" inline-flex gap-4 items-center justify-start sm:pl-16 pl-8 py-10 sm:py-5 ">
               <img src={userIcon} alt="User" className="sm:h-20 sm:w-20 w-10 h-10 sm:mb-2" />
               <span className="text-center text-3xl sm:text-4xl">My Account</span>
           </div>
         </div>
       </Link>
 
       {/* <Link to={`/feedback`}>
-      <div className={`inline-flex items-center gap-2 mt-2 px-4 py-2 cursor-pointer w-fit rounded-full justify-self-end ${hover}`}>
+      <div className={`inline-flex items-center gap-2 mt-2 px-4 py-2 cursor-pointer w-fit rounded-full justify-self-end dark:hover:bg-darkTileHover `}>
         <span className='text-sm'>Give Feedback</span>
         <img src={feedbackIcon} alt="Feedback" className='w-5 h-5' />
         <FeedBackPopover/>

client/entrypoints/sidepanel/components/MyAccount/LoginForm.tsx

@@ -82,7 +82,7 @@ const LoginForm = () => {
   return (
     <>
         <Toaster richColors position='top-center'/>
-        <div className='w-full md:w-2/6 h-full px-16 py-10'>
+        <div className='w-full md:w-2/6 h-full px-16 py-10 bg-white text-black pt-28'>
             <div className=''>
                 <Typography placeholder={undefined} className={`text-4xl text-primaryPurple`}>Login</Typography>
                 {/* <Typography placeholder={undefined} className='text-sm pt-4'>Don't have an account? <Link href={'/signUp'} className='font-medium underline'>Create Now</Link></Typography> */}

client/entrypoints/sidepanel/components/MyAccount/MyAccount.tsx

@@ -1,42 +1,109 @@
 // OptionScreens/SummarizationScreen.tsx
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Footer from '../shared/Footer';
 import Header from '../shared/Header';
 import ModuleNames from '../../constants/Modules';
 import LoginForm from './LoginForm';
 import { supabase } from '../../lib/helper/supabaseClient';
 import UserCard from './userCard';
 import useStore from '../../context/store';
+import DropDownSetting from './shared/dropDownSetting';
+import ToggleSetting from './shared/toggleSetting';
 
 const MyAccount: React.FC = () => {
 
   const [user, setUser] = useState({
     user_metadata: {
         avatar_url: '',
     }});
-  const [mode, setMode] = useState('');
 
-  const {currentUser, userSettings} = useStore();
+  const {currentUser, userSettings, updateSettings} = useStore();
+  const [mode, setMode] = useState(userSettings?.theme || '');
 
+  const [extTheme, setTheme] = useState(userSettings?.theme || 'light');
+  const [ttsSetting, setTTSSetting] = useState(userSettings?.texttospeech || false);
+  const [fontSize, setFontSize] = useState(userSettings?.fontsize || 'normal');
 
-  useEffect(() => {
-      if(userSettings && userSettings.theme == 'dark') {
-          setMode('bg-darkBg text-white');
-      }
+  const initialSettingsRef = useRef(userSettings);
 
-  }, [userSettings])
-
 
   useEffect(() => {
     setUser(currentUser);
   }, [currentUser, user])
+
+  useEffect(() => {
+    setMode(userSettings?.theme || '');
+  }, [userSettings.theme])
+
+  useEffect(() => {
+    // Only call updateSettings if the settings have actually changed
+    if (initialSettingsRef.current &&
+        (ttsSetting !== initialSettingsRef.current.texttospeech ||
+         extTheme !== initialSettingsRef.current.theme ||
+         fontSize !== initialSettingsRef.current.fontsize)) {
+
+          updateSettings({ theme: extTheme });
+          setMode(extTheme);
+          updateUserSettings();
+
+    }
+  }, [ttsSetting, extTheme, fontSize]);
+
+
+  const updateUserSettings = async () => {
+    // Check if a record with the user ID exists in the database
+    const existingSettings = await supabase
+        .from('settings')
+        .select()
+        .eq('userid', currentUser.id)
+        .single();
+
+    if (existingSettings) {
+        // If a record exists, update the existing record
+        const { data: updatedData, error: updateError } = await supabase
+            .from('settings')
+            .update({
+                fontsize: fontSize,
+                texttospeech: ttsSetting,
+                theme: extTheme
+            })
+            .eq('userid', currentUser.id);
+
+        if (updateError) {
+            console.error("Error updating settings:", updateError);
+            return;
+        }
+    } else {
+        // If no record exists, insert a new record
+        const { data: newData, error: insertError } = await supabase
+            .from('settings')
+            .insert({
+                fontsize: fontSize,
+                texttospeech: ttsSetting,
+                theme: extTheme
+            });
+
+        if (insertError) {
+            console.error("Error inserting settings:", insertError);
+            return;
+        }
+    }
+  }
 
   return (
     <>
-      <div className={`${mode} h-full`}>
+      <div className={`${mode} h-full dark:bg-darkBg dark:text-white overflow-hidden`}>
         <Header heading={ModuleNames.MY_ACCOUNT}/>
       {user && currentUser && (
-        <UserCard />
+        <>
+          <UserCard />
+          <div className='grid gap-3 overflow-y-scroll px-10 h-64 pt-5'>
+            <DropDownSetting settingTopic={'Set your Theme'} setDropdownResponse={setTheme} options={['light', 'dark']} selected={extTheme} />
+            <ToggleSetting settingTopic={'Enable Text-to-Speech'}toggleState={ttsSetting} setToggleResponse={setTTSSetting} />
+            <DropDownSetting settingTopic={'Set font size'} setDropdownResponse={setFontSize} options={['small', 'normal', 'large']} selected={fontSize} />
+            <div className='h-20'></div>
+          </div>
+        </>
       )}
       {!user && !currentUser && (
         <LoginForm />

client/entrypoints/sidepanel/components/MyAccount/shared/dropDownSetting.tsx

@@ -0,0 +1,60 @@
+import { Card, Typography, Select, Option } from "@material-tailwind/react";
+import useStore from "@/entrypoints/sidepanel/context/store";
+import { useEffect, useState } from "react";
+
+interface DropDownSettingProps {
+    settingTopic: string,
+    setDropdownResponse: (newValue: string) => void,
+    options: Array<string>,
+    selected: string
+}
+
+const DropDownSetting: React.FC<DropDownSettingProps> = ({ 
+    settingTopic, 
+    setDropdownResponse, 
+    options, 
+    selected
+}) => {
+
+    const { userSettings } = useStore();
+    const [mode, setMode] = useState(userSettings?.theme || '');
+
+    const handleDropdownChange = (value: any) => {
+        setDropdownResponse(value);
+    };
+
+    useEffect(() => {
+        setMode(userSettings?.theme || '');
+    }, [userSettings.theme])
+
+
+  return (
+    <Card placeholder={undefined} className={`${mode} w-full p-6 flex flex-row justify-between items-center dark:bg-darkTileHover dark:text-white`}>
+        <div className=''>
+            <Typography placeholder={undefined} className={`text-sm font-normal`}>{settingTopic}</Typography>
+        </div>
+        <div className='flex'>
+            <div>
+                <Select 
+                    label="Select Version" 
+                    onChange={handleDropdownChange} 
+                    placeholder={undefined}
+                    value={selected}
+                    color={'blue-gray'}
+                    >
+
+                    {options.map((option, index) => {
+                        return (
+                            <Option key={index} value={option} className="dark:text-black">
+                                {option}
+                            </Option>
+                        )
+                    })}
+                </Select>
+            </div>  
+        </div>
+    </Card>
+  )
+}
+
+export default DropDownSetting

client/entrypoints/sidepanel/components/MyAccount/shared/toggleSetting.tsx

@@ -0,0 +1,50 @@
+import { Card, Typography, Switch } from "@material-tailwind/react";
+import useStore from "@/entrypoints/sidepanel/context/store";
+import { useEffect, useState } from "react";
+
+interface ToggleSettingProps {
+    settingTopic: string;
+    toggleState: boolean;
+    setToggleResponse: (newValue: boolean) => void;
+}
+
+
+const ToggleSetting: React.FC<ToggleSettingProps> = ({ settingTopic, toggleState, setToggleResponse }) => {
+    const { userSettings } = useStore();
+    const [mode, setMode] = useState(userSettings?.theme || '');
+
+    const handleToggleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = event.target.checked;
+        setToggleResponse(newValue);
+    };
+
+    useEffect(() => {
+        setMode(userSettings?.theme || '');
+    }, [userSettings.theme])
+
+    return (
+        <Card placeholder={undefined} className={`${mode} w-full p-6 flex flex-row justify-between items-center dark:bg-darkTileHover dark:text-white`}>
+            <div className=''>
+                <Typography placeholder={undefined} className={`text-sm font-normal`}>{settingTopic}</Typography>
+            </div>
+            <div className='flex'>
+                <Switch
+                    id="custom-switch-component"
+                    ripple={false}
+                    className="h-full w-full bg-gray-200 dark:bg-darkBg checked:bg-[#9E00E8]"
+                    containerProps={{
+                        className: "w-11 h-6",
+                    }}
+                    circleProps={{
+                        className: "before:hidden left-0.5 border-none",
+                    }}
+                    checked={toggleState}
+                    onChange={handleToggleChange} 
+                    crossOrigin={undefined}            
+                />
+            </div>
+        </Card>
+    );
+};
+
+export default ToggleSetting;