adjust styles

src/components/ToolFilters.astro

@@ -213,6 +213,14 @@ const sortedTags = Object.entries(tagFrequency)
       tagCloudToggle.style.display = hasHiddenTags ? 'block' : 'none';
     }
     
+    // Check if tool is hosted (has valid projectUrl)
+    function isToolHosted(tool) {
+      return tool.projectUrl !== undefined && 
+             tool.projectUrl !== null && 
+             tool.projectUrl !== "" && 
+             tool.projectUrl.trim() !== "";
+    }
+    
     // Filter function
     function filterTools() {
       const searchTerm = searchInput.value.toLowerCase();
@@ -252,18 +260,31 @@ const sortedTags = Object.entries(tagFrequency)
         return true;
       });
       
+      // Sort filtered results: self-hosted first, proprietary last
+      filtered.sort((a, b) => {
+        const aHosted = isToolHosted(a);
+        const bHosted = isToolHosted(b);
+        const aProprietary = a.license === 'Proprietary';
+        const bProprietary = b.license === 'Proprietary';
+        
+        // Self-hosted tools first (regardless of license)
+        if (aHosted && !bHosted) return -1;
+        if (!aHosted && bHosted) return 1;
+        
+        // If both have same hosting status, proprietary tools go last
+        if (aHosted === bHosted) {
+          if (!aProprietary && bProprietary) return -1;
+          if (aProprietary && !bProprietary) return 1;
+        }
+        
+        // Maintain existing order within same priority group
+        return 0;
+      });
+      
       // Emit custom event with filtered results
       window.dispatchEvent(new CustomEvent('toolsFiltered', { detail: filtered }));
     }
     
-    // Check if tool is hosted (has valid projectUrl)
-    function isToolHosted(tool) {
-      return tool.projectUrl !== undefined && 
-             tool.projectUrl !== null && 
-             tool.projectUrl !== "" && 
-             tool.projectUrl.trim() !== "";
-    }
-    
     // Handle tag cloud clicks
     function handleTagClick(tagItem) {
       const tag = tagItem.getAttribute('data-tag');
@@ -309,6 +330,19 @@ const sortedTags = Object.entries(tagFrequency)
       if (view === 'hosted') {
         // Filter for hosted tools only (tools with valid projectUrl)
         const hosted = window.toolsData.filter(tool => isToolHosted(tool));
+        
+        // Apply same sorting logic for consistency
+        hosted.sort((a, b) => {
+          const aProprietary = a.license === 'Proprietary';
+          const bProprietary = b.license === 'Proprietary';
+          
+          // Since all are hosted, just sort by proprietary status
+          if (!aProprietary && bProprietary) return -1;
+          if (aProprietary && !bProprietary) return 1;
+          
+          return 0;
+        });
+        
         window.dispatchEvent(new CustomEvent('toolsFiltered', { detail: hosted }));
       } else {
         filterTools();
@@ -361,6 +395,10 @@ const sortedTags = Object.entries(tagFrequency)
     // Initialize
     initTagCloud();
     filterTagCloud();
-    filterTools();
+    
+    // Delay initial filter to ensure all event listeners are ready
+    setTimeout(() => {
+      filterTools();
+    }, 100);
   });
 </script>