feat: add reload button. (#471)

frontend/src/components/ServerCard.tsx

@@ -15,14 +15,16 @@ interface ServerCardProps {
   onEdit: (server: Server) => void;
   onToggle?: (server: Server, enabled: boolean) => Promise<boolean>;
   onRefresh?: () => void;
+  onReload?: (server: Server) => Promise<boolean>;
 }
 
-const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCardProps) => {
+const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }: ServerCardProps) => {
   const { t } = useTranslation();
   const { showToast } = useToast();
   const [isExpanded, setIsExpanded] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isToggling, setIsToggling] = useState(false);
+  const [isReloading, setIsReloading] = useState(false);
   const [showErrorPopover, setShowErrorPopover] = useState(false);
   const [copied, setCopied] = useState(false);
   const errorPopoverRef = useRef<HTMLDivElement>(null);
@@ -64,6 +66,26 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
     }
   };
 
+  const handleReload = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isReloading || !onReload) return;
+
+    setIsReloading(true);
+    try {
+      const success = await onReload(server);
+      if (success) {
+        showToast(t('server.reloadSuccess') || 'Server reloaded successfully', 'success');
+      } else {
+        showToast(
+          t('server.reloadError', { serverName: server.name }) || 'Failed to reload server',
+          'error',
+        );
+      }
+    } finally {
+      setIsReloading(false);
+    }
+  };
+
   const handleErrorIconClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     setShowErrorPopover(!showErrorPopover);
@@ -330,7 +352,7 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
                       ? 'bg-green-100 text-green-800 hover:bg-green-200 btn-secondary'
                       : 'bg-gray-100 text-gray-800 hover:bg-gray-200 btn-primary'
                 }`}
-                disabled={isToggling}
+                disabled={isToggling || isReloading}
               >
                 {isToggling
                   ? t('common.processing')
@@ -339,6 +361,15 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
                     : t('server.enable')}
               </button>
             </div>
+            {server.enabled !== false && onReload && (
+              <button
+                onClick={handleReload}
+                className="px-3 py-1 bg-purple-100 text-purple-800 rounded hover:bg-purple-200 text-sm btn-secondary disabled:opacity-70 disabled:cursor-not-allowed"
+                disabled={isReloading || isToggling}
+              >
+                {isReloading ? t('common.processing') : t('server.reload')}
+              </button>
+            )}
             <button
               onClick={handleRemove}
               className="px-3 py-1 bg-red-100 text-red-800 rounded hover:bg-red-200 text-sm btn-danger"

frontend/src/contexts/ServerContext.tsx

@@ -30,6 +30,7 @@ interface ServerContextType {
   handleServerEdit: (server: Server) => Promise<any>;
   handleServerRemove: (serverName: string) => Promise<boolean>;
   handleServerToggle: (server: Server, enabled: boolean) => Promise<boolean>;
+  handleServerReload: (server: Server) => Promise<boolean>;
 }
 
 // Create Context
@@ -358,6 +359,30 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     [t],
   );
 
+  const handleServerReload = useCallback(
+    async (server: Server) => {
+      try {
+        const encodedServerName = encodeURIComponent(server.name);
+        const result = await apiPost(`/servers/${encodedServerName}/reload`, {});
+
+        if (!result || !result.success) {
+          console.error('Failed to reload server:', result);
+          setError(t('server.reloadError', { serverName: server.name }));
+          return false;
+        }
+
+        // Refresh server list after successful reload
+        triggerRefresh();
+        return true;
+      } catch (err) {
+        console.error('Error reloading server:', err);
+        setError(err instanceof Error ? err.message : String(err));
+        return false;
+      }
+    },
+    [t, triggerRefresh],
+  );
+
   const value: ServerContextType = {
     servers,
     error,
@@ -370,6 +395,7 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     handleServerEdit,
     handleServerRemove,
     handleServerToggle,
+    handleServerReload,
   };
 
   return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;

frontend/src/pages/ServersPage.tsx

@@ -21,6 +21,7 @@ const ServersPage: React.FC = () => {
     handleServerEdit,
     handleServerRemove,
     handleServerToggle,
+    handleServerReload,
     triggerRefresh
   } = useServerData({ refreshOnMount: true });
   const [editingServer, setEditingServer] = useState<Server | null>(null);
@@ -159,6 +160,7 @@ const ServersPage: React.FC = () => {
               onEdit={handleEditClick}
               onToggle={handleServerToggle}
               onRefresh={triggerRefresh}
+              onReload={handleServerReload}
             />
           ))}
         </div>
@@ -189,4 +191,4 @@ const ServersPage: React.FC = () => {
   );
 };
 
-export default ServersPage;
+export default ServersPage;