fix: settings ui not following animations setting

src/interface/components/TabbedContainer.tsx

@@ -1,15 +1,16 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import type { TabbedContainerProps } from '../types/TabbedContainerProps';
+import { useSettingsContext } from '../SettingsContext';
 
 const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
+  const { settingsState } = useSettingsContext();
   const [activeTab, setActiveTab] = useState(0);
   const [hoveredTab, setHoveredTab] = useState<number | null>(null);
   const [tabWidth, setTabWidth] = useState(0);
   const [position, setPosition] = useState(0);
   const positionRef = useRef(position);
 
-
   // Function to handle message
   const handleMessage = (event: MessageEvent) => {
     if (event.data === "popupClosed") {  
@@ -27,7 +28,6 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
     };
   }, []);
 
-
   useEffect(() => {
     const newPosition = -activeTab * 100;
     setPosition(newPosition);
@@ -36,7 +36,7 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
 
   const containerRef = useRef(null);
 
-  const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
+  const springTransition = settingsState.animations ? { type: 'spring', stiffness: 250, damping: 25 } : { duration: 0 };
 
   useEffect(() => {
     if (containerRef.current) {
@@ -85,7 +85,7 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
         className='flex'
       >
         {tabs.map((tab, index) => (
-        <div key={index} className={`absolute h-[100vh] focus-visible:outline-none overflow-y-scroll w-full pb-40 transition-opacity duration-300 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
+          <div key={index} className={`absolute h-[100vh] focus-visible:outline-none overflow-y-scroll w-full pb-40 ${ settingsState.animations ? 'transition-opacity duration-300' : ''} ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
             style={{left: `${index * 100}%`}}>
             {tab.content}
           </div>

src/interface/pages/SettingsPage.tsx

@@ -41,7 +41,7 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
           <button onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' })} className="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
         </div>
         <Picker />
-        <TabbedContainer tabs={tabs} />
+        <TabbedContainer tabs={tabs} animations={false} />
       </div>
     </SettingsContextProvider>
   );

src/interface/types/TabbedContainerProps.ts

@@ -5,6 +5,7 @@ export interface Tab {
 }
 export interface TabbedContainerProps {
     tabs: Tab[];
+    animations?: boolean;
 }
 declare const TabbedContainer: React.FC<TabbedContainerProps>;
 export default TabbedContainer;