@samanhappy/mcphub 0.0.9 → 0.0.10

package/frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { NavLink, useLocation } from 'react-router-dom';
+
+interface SidebarProps {
+  collapsed: boolean;
+}
+
+interface MenuItem {
+  path: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  
+  // Menu item configuration
+  const menuItems: MenuItem[] = [
+    {
+      path: '/',
+      label: t('nav.dashboard'),
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
+          <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
+        </svg>
+      ),
+    },
+    {
+      path: '/servers',
+      label: t('nav.servers'),
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z" clipRule="evenodd" />
+        </svg>
+      ),
+    },
+    {
+      path: '/groups',
+      label: t('nav.groups'),
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
+        </svg>
+      ),
+    },
+    {
+      path: '/market',
+      label: t('nav.market'),
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" 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 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+        </svg>
+      ),
+    },
+    {
+      path: '/settings',
+      label: t('nav.settings'),
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <aside 
+      className={`bg-white shadow-sm transition-all duration-300 ease-in-out ${
+        collapsed ? 'w-16' : 'w-64'
+      }`}
+    >
+      <nav className="p-3 space-y-1">
+        {menuItems.map((item) => (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            className={({ isActive }) => 
+              `flex items-center px-3 py-2 rounded-md transition-colors ${
+                isActive 
+                  ? 'bg-blue-100 text-blue-800' 
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`
+            }
+            end={item.path === '/'}
+          >
+            <span className="flex-shrink-0">{item.icon}</span>
+            {!collapsed && <span className="ml-3">{item.label}</span>}
+          </NavLink>
+        ))}
+      </nav>
+    </aside>
+  );
+};
+
+export default Sidebar;

package/frontend/src/components/ui/Badge.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+import { ServerStatus } from '@/types'
+
+interface BadgeProps {
+  status: ServerStatus
+}
+
+const Badge = ({ status }: BadgeProps) => {
+  const { t } = useTranslation()
+  
+  const colors = {
+    connecting: 'bg-yellow-100 text-yellow-800',
+    connected: 'bg-green-100 text-green-800',
+    disconnected: 'bg-red-100 text-red-800',
+  }
+
+  // Map status to translation keys
+  const statusTranslations = {
+    connected: 'status.online',
+    disconnected: 'status.offline',
+    connecting: 'status.connecting'
+  }
+
+  return (
+    <span
+      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${colors[status]}`}
+    >
+      {t(statusTranslations[status] || status)}
+    </span>
+  )
+}
+
+export default Badge

package/frontend/src/components/ui/DeleteDialog.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next'
+
+interface DeleteDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  serverName: string
+  isGroup?: boolean
+}
+
+const DeleteDialog = ({ isOpen, onClose, onConfirm, serverName, isGroup = false }: DeleteDialogProps) => {
+  const { t } = useTranslation()
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-30 z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg shadow-lg max-w-md w-full">
+        <div className="p-6">
+          <h3 className="text-lg font-medium text-gray-900 mb-3">
+            {isGroup ? t('groups.confirmDelete') : t('server.confirmDelete')}
+          </h3>
+          <p className="text-gray-500 mb-6">
+            {isGroup 
+              ? t('groups.deleteWarning', { name: serverName })
+              : t('server.deleteWarning', { name: serverName })}
+          </p>
+          <div className="flex justify-end space-x-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-600 hover:text-gray-800"
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              onClick={onConfirm}
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              {t('common.delete')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DeleteDialog

package/frontend/src/components/ui/Pagination.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({ 
+  currentPage, 
+  totalPages, 
+  onPageChange 
+}) => {
+  // Generate page buttons
+  const getPageButtons = () => {
+    const buttons = [];
+    const maxDisplayedPages = 5; // Maximum number of page buttons to display
+    
+    // Always display first page
+    buttons.push(
+      <button
+        key="first"
+        onClick={() => onPageChange(1)}
+        className={`px-3 py-1 mx-1 rounded ${
+          currentPage === 1 
+            ? 'bg-blue-500 text-white' 
+            : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+        }`}
+      >
+        1
+      </button>
+    );
+    
+    // Start range
+    let startPage = Math.max(2, currentPage - Math.floor(maxDisplayedPages / 2));
+    
+    // If we're showing ellipsis after first page
+    if (startPage > 2) {
+      buttons.push(
+        <span key="ellipsis1" className="px-3 py-1">
+          ...
+        </span>
+      );
+    }
+    
+    // Middle pages
+    for (let i = startPage; i <= Math.min(totalPages - 1, startPage + maxDisplayedPages - 3); i++) {
+      buttons.push(
+        <button
+          key={i}
+          onClick={() => onPageChange(i)}
+          className={`px-3 py-1 mx-1 rounded ${
+            currentPage === i 
+              ? 'bg-blue-500 text-white' 
+              : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+          }`}
+        >
+          {i}
+        </button>
+      );
+    }
+    
+    // If we're showing ellipsis before last page
+    if (startPage + maxDisplayedPages - 3 < totalPages - 1) {
+      buttons.push(
+        <span key="ellipsis2" className="px-3 py-1">
+          ...
+        </span>
+      );
+    }
+    
+    // Always display last page if there's more than one page
+    if (totalPages > 1) {
+      buttons.push(
+        <button
+          key="last"
+          onClick={() => onPageChange(totalPages)}
+          className={`px-3 py-1 mx-1 rounded ${
+            currentPage === totalPages 
+              ? 'bg-blue-500 text-white' 
+              : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+          }`}
+        >
+          {totalPages}
+        </button>
+      );
+    }
+    
+    return buttons;
+  };
+
+  // If there's only one page, don't render pagination
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center items-center my-6">
+      <button
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+        className={`px-3 py-1 rounded mr-2 ${
+          currentPage === 1 
+            ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
+            : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+        }`}
+      >
+        &laquo; Prev
+      </button>
+      
+      <div className="flex">{getPageButtons()}</div>
+      
+      <button
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+        className={`px-3 py-1 rounded ml-2 ${
+          currentPage === totalPages 
+            ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
+            : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+        }`}
+      >
+        Next &raquo;
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

package/frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { Check, X } from 'lucide-react';
+import { cn } from '@/utils/cn';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface ToastProps {
+  message: string;
+  type?: ToastType;
+  duration?: number;
+  onClose: () => void;
+  visible: boolean;
+}
+
+const Toast: React.FC<ToastProps> = ({
+  message,
+  type = 'info',
+  duration = 3000,
+  onClose,
+  visible
+}) => {
+  useEffect(() => {
+    if (visible) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, duration);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [visible, duration, onClose]);
+
+  const icons = {
+    success: <Check className="w-5 h-5 text-green-500" />,
+    error: <X className="w-5 h-5 text-red-500" />,
+    info: (
+      <svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    warning: (
+      <svg className="w-5 h-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
+    )
+  };
+
+  const bgColors = {
+    success: 'bg-green-50 border-green-200',
+    error: 'bg-red-50 border-red-200',
+    info: 'bg-blue-50 border-blue-200',
+    warning: 'bg-yellow-50 border-yellow-200'
+  };
+
+  const textColors = {
+    success: 'text-green-800',
+    error: 'text-red-800',
+    info: 'text-blue-800',
+    warning: 'text-yellow-800'
+  };
+
+  return (
+    <div className={cn(
+      "fixed top-4 right-4 z-50 max-w-sm p-4 rounded-md shadow-lg border",
+      bgColors[type],
+      "transform transition-all duration-300 ease-in-out",
+      visible ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
+    )}>
+      <div className="flex items-start">
+        <div className="flex-shrink-0">
+          {icons[type]}
+        </div>
+        <div className="ml-3">
+          <p className={cn("text-sm font-medium", textColors[type])}>
+            {message}
+          </p>
+        </div>
+        <div className="ml-auto pl-3">
+          <div className="-mx-1.5 -my-1.5">
+            <button
+              onClick={onClose}
+              className={cn(
+                "inline-flex rounded-md p-1.5",
+                `hover:bg-${type}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${type}-500`
+              )}
+            >
+              <span className="sr-only">Dismiss</span>
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;

package/frontend/src/components/ui/ToggleGroup.tsx

@@ -0,0 +1,134 @@
+import React, { ReactNode } from 'react';
+import { cn } from '@/utils/cn';
+
+interface ToggleGroupItemProps {
+  value: string;
+  isSelected: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}
+
+export const ToggleGroupItem: React.FC<ToggleGroupItemProps> = ({
+  value,
+  isSelected,
+  onClick,
+  children
+}) => {
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isSelected}
+      className={cn(
+        "flex w-full items-center justify-between p-2 rounded transition-colors cursor-pointer",
+        isSelected 
+          ? "bg-blue-50 text-blue-700 hover:bg-blue-100 border-l-4 border-blue-500" 
+          : "hover:bg-gray-50 text-gray-700"
+      )}
+      onClick={onClick}
+    >
+      <span className="flex items-center">
+        {children}
+      </span>
+      {isSelected && (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 text-blue-500">
+          <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+interface ToggleGroupProps {
+  label: string;
+  helpText?: string;
+  noOptionsText?: string;
+  values: string[];
+  options: { value: string; label: string }[];
+  onChange: (values: string[]) => void;
+  className?: string;
+}
+
+export const ToggleGroup: React.FC<ToggleGroupProps> = ({
+  label,
+  helpText,
+  noOptionsText = "No options available",
+  values,
+  options,
+  onChange,
+  className
+}) => {
+  const handleToggle = (value: string) => {
+    const isSelected = values.includes(value);
+    if (isSelected) {
+      onChange(values.filter(v => v !== value));
+    } else {
+      onChange([...values, value]);
+    }
+  };
+
+  return (
+    <div className={className}>
+      <label className="block text-gray-700 text-sm font-bold mb-2">
+        {label}
+      </label>
+      <div className="border rounded shadow max-h-60 overflow-y-auto">
+        {options.length === 0 ? (
+          <p className="text-gray-500 text-sm p-3">{noOptionsText}</p>
+        ) : (
+          <div className="space-y-1 p-1">
+            {options.map(option => (
+              <ToggleGroupItem
+                key={option.value}
+                value={option.value}
+                isSelected={values.includes(option.value)}
+                onClick={() => handleToggle(option.value)}
+              >
+                {option.label}
+              </ToggleGroupItem>
+            ))}
+          </div>
+        )}
+      </div>
+      {helpText && (
+        <p className="text-xs text-gray-500 mt-1">
+          {helpText}
+        </p>
+      )}
+    </div>
+  );
+};
+
+interface SwitchProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  checked,
+  onCheckedChange,
+  disabled = false
+}) => {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      className={cn(
+        "relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500",
+        checked ? "bg-blue-600" : "bg-gray-200",
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+      )}
+      onClick={() => !disabled && onCheckedChange(!checked)}
+    >
+      <span
+        className={cn(
+          "inline-block h-4 w-4 transform rounded-full bg-white transition-transform",
+          checked ? "translate-x-6" : "translate-x-1"
+        )}
+      />
+    </button>
+  );
+};

package/frontend/src/components/ui/ToolCard.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { Tool } from '@/types'
+import { ChevronDown, ChevronRight } from '@/components/icons/LucideIcons'
+
+interface ToolCardProps {
+  tool: Tool
+}
+
+const ToolCard = ({ tool }: ToolCardProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className="bg-white shadow rounded-lg p-4 mb-4">
+      <div
+        className="flex justify-between items-center cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <h3 className="text-lg font-medium text-gray-900">{tool.name}</h3>
+        <button className="text-gray-400 hover:text-gray-600">
+          {isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
+        </button>
+      </div>
+      {isExpanded && (
+        <div className="mt-4">
+          <p className="text-gray-600 mb-2">{tool.description || 'No description available'}</p>
+          <div className="bg-gray-50 rounded p-2">
+            <h4 className="text-sm font-medium text-gray-900 mb-2">Input Schema:</h4>
+            <pre className="text-xs text-gray-600 overflow-auto">
+              {JSON.stringify(tool.inputSchema, null, 2)}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ToolCard