fix: sort market servers by official status (#36)

frontend/src/pages/ServersPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { Server } from '@/types';
 import ServerCard from '@/components/ServerCard';
 import AddServerForm from '@/components/AddServerForm';
@@ -8,6 +9,7 @@ import { useServerData } from '@/hooks/useServerData';
 
 const ServersPage: React.FC = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { 
     servers, 
     error, 
@@ -50,6 +52,15 @@ const ServersPage: React.FC = () => {
       <div className="flex justify-between items-center mb-8">
         <h1 className="text-2xl font-bold text-gray-900">{t('pages.servers.title')}</h1>
         <div className="flex space-x-4">
+          <button
+            onClick={() => navigate('/market')}
+            className="px-4 py-2 bg-emerald-100 text-emerald-800 rounded hover:bg-emerald-200 flex items-center"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3z" />
+            </svg>
+            {t('nav.market')}
+          </button>
           <AddServerForm onAdd={handleServerAdd} />
           <button
             onClick={handleRefresh}

src/services/marketService.ts

@@ -12,7 +12,15 @@ export const getMarketServers = (): Record<string, MarketServer> => {
   try {
     const serversJsonPath = getServersJsonPath();
     const data = fs.readFileSync(serversJsonPath, 'utf8');
-    return JSON.parse(data);
+    const serversObj = JSON.parse(data) as Record<string, MarketServer>;
+
+    const sortedEntries = Object.entries(serversObj).sort(([, serverA], [, serverB]) => {
+      if (serverA.is_official && !serverB.is_official) return -1;
+      if (!serverA.is_official && serverB.is_official) return 1;
+      return 0;
+    });
+
+    return Object.fromEntries(sortedEntries);
   } catch (error) {
     console.error('Failed to load servers from servers.json:', error);
     return {};
@@ -29,13 +37,13 @@ export const getMarketServerByName = (name: string): MarketServer | null => {
 export const getMarketCategories = (): string[] => {
   const servers = getMarketServers();
   const categories = new Set<string>();
-  
+
   Object.values(servers).forEach((server) => {
     server.categories?.forEach((category) => {
       categories.add(category);
     });
   });
-  
+
   return Array.from(categories).sort();
 };
 
@@ -43,25 +51,28 @@ export const getMarketCategories = (): string[] => {
 export const getMarketTags = (): string[] => {
   const servers = getMarketServers();
   const tags = new Set<string>();
-  
+
   Object.values(servers).forEach((server) => {
     server.tags?.forEach((tag) => {
       tags.add(tag);
     });
   });
-  
+
   return Array.from(tags).sort();
 };
 
 // Search market servers by query
 export const searchMarketServers = (query: string): MarketServer[] => {
   const servers = getMarketServers();
-  const searchTerms = query.toLowerCase().split(' ').filter(term => term.length > 0);
-  
+  const searchTerms = query
+    .toLowerCase()
+    .split(' ')
+    .filter((term) => term.length > 0);
+
   if (searchTerms.length === 0) {
     return Object.values(servers);
   }
-  
+
   return Object.values(servers).filter((server) => {
     // Search in name, display_name, description, categories, and tags
     const searchableText = [
@@ -69,21 +80,23 @@ export const searchMarketServers = (query: string): MarketServer[] => {
       server.display_name,
       server.description,
       ...(server.categories || []),
-      ...(server.tags || [])
-    ].join(' ').toLowerCase();
-    
-    return searchTerms.some(term => searchableText.includes(term));
+      ...(server.tags || []),
+    ]
+      .join(' ')
+      .toLowerCase();
+
+    return searchTerms.some((term) => searchableText.includes(term));
   });
 };
 
 // Filter market servers by category
 export const filterMarketServersByCategory = (category: string): MarketServer[] => {
   const servers = getMarketServers();
-  
+
   if (!category) {
     return Object.values(servers);
   }
-  
+
   return Object.values(servers).filter((server) => {
     return server.categories?.includes(category);
   });
@@ -92,12 +105,12 @@ export const filterMarketServersByCategory = (category: string): MarketServer[]
 // Filter market servers by tag
 export const filterMarketServersByTag = (tag: string): MarketServer[] => {
   const servers = getMarketServers();
-  
+
   if (!tag) {
     return Object.values(servers);
   }
-  
+
   return Object.values(servers).filter((server) => {
     return server.tags?.includes(tag);
   });
-};
+};

src/services/mcpService.ts

@@ -29,7 +29,7 @@ export const notifyToolChanged = async () => {
   currentServer
     .sendToolListChanged()
     .catch((error) => {
-      console.error('Failed to send tool list changed notification:', error);
+      console.warn('Failed to send tool list changed notification:', error.message);
     })
     .then(() => {
       console.log('Tool list changed notification sent successfully');