From 182597efceae21cbceac1df46211be9bad485d8a Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Wed, 21 Aug 2024 21:20:30 +1000
Subject: [PATCH] fix: settings ui not following animations setting

---
 src/interface/components/TabbedContainer.tsx | 42 ++++++++++----------
 src/interface/pages/SettingsPage.tsx         |  2 +-
 src/interface/types/TabbedContainerProps.ts  |  1 +
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/interface/components/TabbedContainer.tsx b/src/interface/components/TabbedContainer.tsx
index 3f2e3119..8b1f4e10 100644
--- a/src/interface/components/TabbedContainer.tsx
+++ b/src/interface/components/TabbedContainer.tsx
@@ -1,32 +1,32 @@
 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") {  
-        setActiveTab(0);
-      }
+  // Function to handle message
+  const handleMessage = (event: MessageEvent) => {
+    if (event.data === "popupClosed") {  
+      setActiveTab(0);
+    }
+  };
+  
+  useEffect(() => {
+    // Add event listener for 'message' event
+    window.addEventListener("message", handleMessage);
+  
+    // Cleanup
+    return () => {
+      window.removeEventListener("message", handleMessage);
     };
-  
-    useEffect(() => {
-      // Add event listener for 'message' event
-      window.addEventListener("message", handleMessage);
-  
-      // Cleanup
-      return () => {
-        window.removeEventListener("message", handleMessage);
-      };
-    }, []);
-
+  }, []);
 
   useEffect(() => {
     const newPosition = -activeTab * 100;
@@ -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,8 +85,8 @@ 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'}`}
-          style={{left: `${index * 100}%`}}>
+          <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>
         ))}
@@ -96,4 +96,4 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
   );
 };
 
-export default memo(TabbedContainer);
+export default memo(TabbedContainer);
\ No newline at end of file
diff --git a/src/interface/pages/SettingsPage.tsx b/src/interface/pages/SettingsPage.tsx
index 3cf36e8a..f18c467d 100644
--- a/src/interface/pages/SettingsPage.tsx
+++ b/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>
   );
diff --git a/src/interface/types/TabbedContainerProps.ts b/src/interface/types/TabbedContainerProps.ts
index cea6689d..801a9afc 100644
--- a/src/interface/types/TabbedContainerProps.ts
+++ b/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;