app/components/Models.tsx

@@ -153,50 +153,26 @@ const modelDropdown = {
   onlineFoss: ['Online (FOSS) (La Plateforme)'],
 };
 
-const Category = [
-  'Code', 
-  'Math', 
-  'Language', 
-  'Character', 
-  'Finance', 
-  'Weather', 
-  'Time', 
-  'Image', 
-  'Custom1', 
-  'Custom2'
-]
-
 const Models: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
   const [selectedModel, setSelectedModel] = useState('');
   const [radioSelection, setRadioSelection] = useState<string | null>("")
-  const [activeCategory, setActiveCategory] = useState('');
-  const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));
 
   useEffect(() => {
-    // Retrieve initial values from localStorage
+    setRadioSelection(localStorage.getItem('radioSelection'))
-    setRadioSelection(localStorage.getItem('radioSelection') || '');
-    setSelectedModel(localStorage.getItem('selectedModel') || '');
-
     const handleStorageChange = () => {
       setSelectedModel(localStorage.getItem('selectedModel') || '');
     };
+    handleStorageChange();
 
-    // Update immediately when localStorage changes
+    // Update dropdown immediately when localStorage changes internally or externally
     window.addEventListener('storage', handleStorageChange);
 
     // Cleanup listener on component unmount
     return () => {
       window.removeEventListener('storage', handleStorageChange);
     };
-  }, []); // Dependency array can remain empty if you only want this to run on mount
+  }, []);
-
-  useEffect(() => {
-    const storedCategory = localStorage.getItem("activeCategory");
-    if (storedCategory !== currentCategory) {
-      setCurrentCategory(storedCategory);
-    }
-  }, [activeCategory]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
@@ -260,8 +236,6 @@ const Models: React.FC = () => {
     modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
-    localStorage.setItem('activeCategory' , model)
-    setActiveCategory(model)
     const category = selectedModel as keyof typeof modelList;
     localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
     localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
@@ -286,17 +260,14 @@ const Models: React.FC = () => {
           </select>
         </div>
 
+
         {/* Model Grid with Cards */}
         <div className="grid">
-          {Category.map(
+          {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map(
-            (displayedCategory) => (
+            (category) => (
-              <button
+              <button key={category} className={`${category.toLowerCase()}-model model-box`} onClick={() => modelClicked(category)}>
-                key={displayedCategory}
-                className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`} 
-                onClick={() => modelClicked(displayedCategory)}
-              >
                 <div className="overlay">
-                  <h3>{displayedCategory}</h3>
+                  <h3>{category}</h3>
                   {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
                 </div>
               </button>

app/styles/models.css

@@ -60,11 +60,6 @@
     margin: auto; /* Center each model box in the grid cell */
 }
 
-.model-box.selected {
-    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */
-    border-color: yellow;
-}
-
 .overlay {
     position: absolute;
     left: 0;