@samanhappy/mcphub 0.0.10 → 0.0.12

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

@@ -1,98 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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