Merge pull request 'Gave the models a visual feedback what is active' (#80) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/80

app/components/Models.tsx

@@ -153,26 +153,50 @@ 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(() => {
-    setRadioSelection(localStorage.getItem('radioSelection'))
+    // Retrieve initial values from localStorage
+    setRadioSelection(localStorage.getItem('radioSelection') || '');
+    setSelectedModel(localStorage.getItem('selectedModel') || '');
+
     const handleStorageChange = () => {
       setSelectedModel(localStorage.getItem('selectedModel') || '');
     };
-    handleStorageChange();
 
-    // Update dropdown immediately when localStorage changes internally or externally
+    // Update immediately when localStorage changes
     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;
@@ -236,6 +260,8 @@ 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]])
@@ -260,14 +286,17 @@ const Models: React.FC = () => {
           </select>
         </div>
 
-
         {/* Model Grid with Cards */}
         <div className="grid">
-          {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map(
+          {Category.map(
-            (category) => (
+            (displayedCategory) => (
-              <button key={category} className={`${category.toLowerCase()}-model model-box`} onClick={() => modelClicked(category)}>
+              <button
+                key={displayedCategory}
+                className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`} 
+                onClick={() => modelClicked(displayedCategory)}
+              >
                 <div className="overlay">
-                  <h3>{category}</h3>
+                  <h3>{displayedCategory}</h3>
                   {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
                 </div>
               </button>

app/styles/models.css

@@ -60,6 +60,11 @@
     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;