@samanhappy/mcphub 0.0.7 → 0.0.8

package/frontend/src/components/GroupCard.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Group, Server } from '@/types'
-import { Edit, Trash, Copy, Check } from '@/components/icons/LucideIcons'
-import DeleteDialog from '@/components/ui/DeleteDialog'
-import { useToast } from '@/contexts/ToastContext'
-
-interface GroupCardProps {
-  group: Group
-  servers: Server[]
-  onEdit: (group: Group) => void
-  onDelete: (groupId: string) => void
-}
-
-const GroupCard = ({
-  group,
-  servers,
-  onEdit,
-  onDelete
-}: GroupCardProps) => {
-  const { t } = useTranslation()
-  const { showToast } = useToast()
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [copied, setCopied] = useState(false)
-
-  const handleEdit = () => {
-    onEdit(group)
-  }
-
-  const handleDelete = () => {
-    setShowDeleteDialog(true)
-  }
-
-  const handleConfirmDelete = () => {
-    onDelete(group.id)
-    setShowDeleteDialog(false)
-  }
-
-  const copyToClipboard = () => {
-    if (navigator.clipboard && window.isSecureContext) {
-      navigator.clipboard.writeText(group.id).then(() => {
-        setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
-      })
-    } else {
-      // Fallback for HTTP or unsupported clipboard API
-      const textArea = document.createElement('textarea')
-      textArea.value = group.id
-      // Avoid scrolling to bottom
-      textArea.style.position = 'fixed'
-      textArea.style.left = '-9999px'
-      document.body.appendChild(textArea)
-      textArea.focus()
-      textArea.select()
-      try {
-        document.execCommand('copy')
-        setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
-      } catch (err) {
-        showToast(t('common.copyFailed') || 'Copy failed', 'error')
-        console.error('Copy to clipboard failed:', err)
-      }
-      document.body.removeChild(textArea)
-    }
-  }
-
-  // Get servers that belong to this group
-  const groupServers = servers.filter(server => group.servers.includes(server.name))
-
-  return (
-    <div className="bg-white shadow rounded-lg p-6">
-      <div className="flex justify-between items-center mb-4">
-        <div>
-          <div className="flex items-center">
-            <h2 className="text-xl font-semibold text-gray-800">{group.name}</h2>
-            <div className="flex items-center ml-3">
-              <span className="text-xs text-gray-500 mr-1">{group.id}</span>
-              <button
-                onClick={copyToClipboard}
-                className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                title={t('common.copy')}
-              >
-                {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
-              </button>
-            </div>
-          </div>
-          {group.description && (
-            <p className="text-gray-600 text-sm mt-1">{group.description}</p>
-          )}
-        </div>
-        <div className="flex items-center space-x-3">
-          <div className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">
-            {t('groups.serverCount', { count: group.servers.length })}
-          </div>
-          <button
-            onClick={handleEdit}
-            className="text-gray-500 hover:text-gray-700"
-            title={t('groups.edit')}
-          >
-            <Edit size={18} />
-          </button>
-          <button
-            onClick={handleDelete}
-            className="text-gray-500 hover:text-red-600"
-            title={t('groups.delete')}
-          >
-            <Trash size={18} />
-          </button>
-        </div>
-      </div>
-
-      <div className="mt-4">
-        {groupServers.length === 0 ? (
-          <p className="text-gray-500 italic">{t('groups.noServers')}</p>
-        ) : (
-          <div className="flex flex-wrap gap-2 mt-2">
-            {groupServers.map(server => (
-              <div
-                key={server.name}
-                className="inline-flex items-center px-3 py-1 bg-gray-50 rounded"
-              >
-                <span className="font-medium text-gray-700 text-sm">{server.name}</span>
-                <span className={`ml-2 inline-block h-2 w-2 rounded-full ${server.status === 'connected' ? 'bg-green-500' :
-                    server.status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
-                  }`}></span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <DeleteDialog
-        isOpen={showDeleteDialog}
-        onClose={() => setShowDeleteDialog(false)}
-        onConfirm={handleConfirmDelete}
-        serverName={group.name}
-        isGroup={true}
-      />
-    </div>
-  )
-}
-
-export default GroupCard

package/frontend/src/components/MarketServerCard.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { MarketServer } from '@/types';
-
-interface MarketServerCardProps {
-  server: MarketServer;
-  onClick: (server: MarketServer) => void;
-}
-
-const MarketServerCard: React.FC<MarketServerCardProps> = ({ server, onClick }) => {
-  const { t } = useTranslation();
-
-  // Intelligently calculate how many tags to display to ensure they fit in a single line
-  const getTagsToDisplay = () => {
-    if (!server.tags || server.tags.length === 0) {
-      return { tagsToShow: [], hasMore: false, moreCount: 0 };
-    }
-    
-    // Estimate available width in the card (in characters)
-    const estimatedAvailableWidth = 28; // Estimated number of characters that can fit in one line
-    
-    // Calculate the character space needed for tags and plus sign (including # and spacing)
-    const calculateTagWidth = (tag: string) => tag.length + 3; // +3 for # and spacing
-    
-    // Loop to determine the maximum number of tags that can be displayed
-    let totalWidth = 0;
-    let i = 0;
-    
-    // First, sort tags by length to prioritize displaying shorter tags
-    const sortedTags = [...server.tags].sort((a, b) => a.length - b.length);
-    
-    // Calculate how many tags can fit
-    for (i = 0; i < sortedTags.length; i++) {
-      const tagWidth = calculateTagWidth(sortedTags[i]);
-      
-      // If this tag would make the total width exceed available width, stop adding
-      if (totalWidth + tagWidth > estimatedAvailableWidth) {
-        break;
-      }
-      
-      totalWidth += tagWidth;
-      
-      // If this is the last tag but there's still space, no need to show "more"
-      if (i === sortedTags.length - 1) {
-        return {
-          tagsToShow: sortedTags,
-          hasMore: false,
-          moreCount: 0
-        };
-      }
-    }
-    
-    // If there's not enough space to display any tags, show at least one
-    if (i === 0 && sortedTags.length > 0) {
-      i = 1;
-    }
-    
-    // Calculate space needed for the "more" tag
-    const moreCount = sortedTags.length - i;
-    const moreTagWidth = 3 + String(moreCount).length + t('market.moreTags').length;
-    
-    // If there's enough remaining space to display the "more" tag
-    if (totalWidth + moreTagWidth <= estimatedAvailableWidth || i < 1) {
-      return {
-        tagsToShow: sortedTags.slice(0, i),
-        hasMore: true,
-        moreCount
-      };
-    }
-    
-    // If there's not enough space for even the "more" tag, reduce one tag to make room
-    return {
-      tagsToShow: sortedTags.slice(0, Math.max(1, i - 1)),
-      hasMore: true,
-      moreCount: moreCount + 1
-    };
-  };
-
-  const { tagsToShow, hasMore, moreCount } = getTagsToDisplay();
-
-  return (
-    <div 
-      className="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition-shadow cursor-pointer flex flex-col h-full"
-      onClick={() => onClick(server)}
-    >
-      <div className="flex justify-between items-start mb-3">
-        <h3 className="text-lg font-semibold text-gray-900 line-clamp-1 mr-2">{server.display_name}</h3>
-        {server.is_official && (
-          <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex-shrink-0">
-            {t('market.official')}
-          </span>
-        )}
-      </div>
-      <p className="text-gray-600 text-sm mb-4 line-clamp-2 min-h-[40px]">{server.description}</p>
-      
-      {/* Categories */}
-      <div className="flex flex-wrap gap-1 mb-2 min-h-[28px]">
-        {server.categories?.length > 0 ? (
-          server.categories.map((category, index) => (
-            <span 
-              key={index}
-              className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded whitespace-nowrap"
-            >
-              {category}
-            </span>
-          ))
-        ) : (
-          <span className="text-xs text-gray-400 py-1">-</span>
-        )}
-      </div>
-      
-      {/* Tags */}
-      <div className="relative mb-3 min-h-[28px] overflow-x-auto">
-        {server.tags?.length > 0 ? (
-          <div className="flex gap-1 items-center whitespace-nowrap">
-            {tagsToShow.map((tag, index) => (
-              <span 
-                key={index}
-                className="bg-green-50 text-green-700 text-xs px-2 py-1 rounded flex-shrink-0"
-              >
-                #{tag}
-              </span>
-            ))}
-            {hasMore && (
-              <span className="bg-gray-100 text-gray-600 text-xs px-1.5 py-1 rounded flex-shrink-0">
-                +{moreCount} {t('market.moreTags')}
-              </span>
-            )}
-          </div>
-        ) : (
-          <span className="text-xs text-gray-400 py-1">-</span>
-        )}
-      </div>
-      
-      <div className="flex justify-between items-center mt-auto pt-2 text-xs text-gray-500 border-t border-gray-100">
-        <div className="overflow-hidden">
-          <span className="whitespace-nowrap">{t('market.by')} </span>
-          <span className="font-medium whitespace-nowrap overflow-hidden text-ellipsis max-w-[120px] inline-block align-bottom">
-            {server.author?.name || t('market.unknown')}
-          </span>
-        </div>
-        <div className="flex items-center flex-shrink-0">
-          <svg className="h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-            <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
-          </svg>
-          <span>{server.tools?.length || 0} {t('market.tools')}</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MarketServerCard;

package/frontend/src/components/MarketServerDetail.tsx

@@ -1,297 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { MarketServer, MarketServerInstallation } from '@/types';
-import ServerForm from './ServerForm';
-
-interface MarketServerDetailProps {
-  server: MarketServer;
-  onBack: () => void;
-  onInstall: (server: MarketServer) => void;
-  installing?: boolean;
-  isInstalled?: boolean;
-}
-
-const MarketServerDetail: React.FC<MarketServerDetailProps> = ({
-  server,
-  onBack,
-  onInstall,
-  installing = false,
-  isInstalled = false
-}) => {
-  const { t } = useTranslation();
-  const [modalVisible, setModalVisible] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Helper function to determine button state
-  const getButtonProps = () => {
-    if (isInstalled) {
-      return {
-        className: "bg-green-600 cursor-default px-4 py-2 rounded text-sm font-medium text-white",
-        disabled: true,
-        text: t('market.installed')
-      };
-    } else if (installing) {
-      return {
-        className: "bg-gray-400 cursor-not-allowed px-4 py-2 rounded text-sm font-medium text-white",
-        disabled: true,
-        text: t('market.installing')
-      };
-    } else {
-      return {
-        className: "bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium text-white",
-        disabled: false,
-        text: t('market.install')
-      };
-    }
-  };
-
-  const toggleModal = () => {
-    setModalVisible(!modalVisible);
-    setError(null); // Clear any previous errors when toggling modal
-  };
-
-  const handleInstall = () => {
-    if (!isInstalled) {
-      toggleModal();
-    }
-  };
-
-  // Get the preferred installation configuration based on priority:
-  // npm > uvx > default
-  const getPreferredInstallation = (): MarketServerInstallation | undefined => {
-    if (!server.installations) {
-      return undefined;
-    }
-
-    if (server.installations.npm) {
-      return server.installations.npm;
-    } else if (server.installations.uvx) {
-      return server.installations.uvx;
-    } else if (server.installations.default) {
-      return server.installations.default;
-    }
-    
-    // If none of the preferred types are available, get the first available installation type
-    const installTypes = Object.keys(server.installations);
-    if (installTypes.length > 0) {
-      return server.installations[installTypes[0]];
-    }
-    
-    return undefined;
-  };
-
-  const handleSubmit = async (payload: any) => {
-    try {
-      setError(null);
-      // Pass the server object to the parent component for installation
-      onInstall(server);
-      setModalVisible(false);
-    } catch (err) {
-      console.error('Error installing server:', err);
-      setError(t('errors.serverInstall'));
-    }
-  };
-
-  const buttonProps = getButtonProps();
-  const preferredInstallation = getPreferredInstallation();
-
-  return (
-    <div className="bg-white rounded-lg shadow-md p-6">
-      <div className="mb-4">
-        <button
-          onClick={onBack}
-          className="text-gray-600 hover:text-gray-900 flex items-center"
-        >
-          <svg className="h-5 w-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-            <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
-          </svg>
-          {t('market.backToList')}
-        </button>
-      </div>
-
-      <div className="flex justify-between items-start mb-4">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900 flex items-center flex-wrap">
-            {server.display_name} 
-            <span className="text-sm font-normal text-gray-500 ml-2">({server.name})</span>
-            <span className="text-sm font-normal text-gray-600 ml-4">
-              {t('market.author')}: {server.author.name} • {t('market.license')}: {server.license} • 
-              <a
-                href={server.repository.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 hover:underline ml-1"
-              >
-                {t('market.repository')}
-              </a>
-            </span>
-          </h2>
-        </div>
-
-        <div className="flex items-center">
-          {server.is_official && (
-            <span className="bg-blue-100 text-blue-800 text-sm font-medium px-4 py-2 rounded mr-2 flex items-center">
-              {t('market.official')}
-            </span>
-          )}
-          <button
-            onClick={handleInstall}
-            disabled={buttonProps.disabled}
-            className={buttonProps.className}
-          >
-            {buttonProps.text}
-          </button>
-        </div>
-      </div>
-
-      <p className="text-gray-700 mb-6">{server.description}</p>
-
-      <div className="mb-6">
-        <h3 className="text-lg font-semibold mb-3">{t('market.categories')} & {t('market.tags')}</h3>
-        <div className="flex flex-wrap gap-2">
-          {server.categories?.map((category, index) => (
-            <span key={`cat-${index}`} className="bg-gray-100 text-gray-800 px-3 py-1 rounded">
-              {category}
-            </span>
-          ))}
-          {server.tags && server.tags.map((tag, index) => (
-            <span key={`tag-${index}`} className="bg-gray-100 text-green-700 px-2 py-1 rounded text-sm">
-              #{tag}
-            </span>
-          ))}
-        </div>
-      </div>
-
-      {server.arguments && Object.keys(server.arguments).length > 0 && (
-        <div className="mb-6">
-          <h3 className="text-lg font-semibold mb-3">{t('market.arguments')}</h3>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
-                    {t('market.argumentName')}
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
-                    {t('market.description')}
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
-                    {t('market.required')}
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
-                    {t('market.example')}
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {Object.entries(server.arguments).map(([name, arg], index) => (
-                  <tr key={index}>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                      {name}
-                    </td>
-                    <td className="px-6 py-4 text-sm text-gray-500">
-                      {arg.description}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {arg.required ? (
-                        <span className="text-green-600">✓</span>
-                      ) : (
-                        <span className="text-red-600">✗</span>
-                      )}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <code className="bg-gray-100 px-2 py-1 rounded">{arg.example}</code>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-
-      <div className="mb-6">
-        <h3 className="text-lg font-semibold mb-3">{t('market.tools')}</h3>
-        <div className="space-y-4">
-          {server.tools?.map((tool, index) => (
-            <div key={index} className="border border-gray-200 rounded p-4">
-              <h4 className="font-medium mb-2">
-                {tool.name}
-                <button
-                  type="button"
-                  onClick={() => {
-                    // Toggle visibility of schema (simplified for this implementation)
-                    const element = document.getElementById(`schema-${index}`);
-                    if (element) {
-                      element.classList.toggle('hidden');
-                    }
-                  }}
-                  className="text-sm text-blue-600 hover:underline focus:outline-none ml-2"
-                >
-                  {t('market.viewSchema')}
-                </button>
-              </h4>
-              <p className="text-gray-600 mb-2">{tool.description}</p>
-              <div className="mt-2">
-                <pre id={`schema-${index}`} className="hidden bg-gray-50 p-3 rounded text-sm overflow-auto mt-2">
-                  {JSON.stringify(tool.inputSchema, null, 2)}
-                </pre>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {server.examples && server.examples.length > 0 && (
-        <div className="mb-6">
-          <h3 className="text-lg font-semibold mb-3">{t('market.examples')}</h3>
-          <div className="space-y-4">
-            {server.examples.map((example, index) => (
-              <div key={index} className="border border-gray-200 rounded p-4">
-                <h4 className="font-medium mb-2">{example.title}</h4>
-                <p className="text-gray-600 mb-2">{example.description}</p>
-                <pre className="bg-gray-50 p-3 rounded text-sm overflow-auto">
-                  {example.prompt}
-                </pre>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <div className="mt-6 flex justify-end">
-        <button
-          onClick={handleInstall}
-          disabled={buttonProps.disabled}
-          className={buttonProps.className}
-        >
-          {buttonProps.text}
-        </button>
-      </div>
-
-      {modalVisible && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-          <ServerForm
-            onSubmit={handleSubmit}
-            onCancel={toggleModal}
-            modalTitle={t('market.installServer', { name: server.display_name })}
-            formError={error}
-            initialData={{
-              name: server.name,
-              status: 'disconnected',
-              config: preferredInstallation 
-                ? {
-                    command: preferredInstallation.command || '',
-                    args: preferredInstallation.args || [],
-                    env: preferredInstallation.env || {}
-                  }
-                : undefined
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MarketServerDetail;

package/frontend/src/components/ProtectedRoute.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { useAuth } from '../contexts/AuthContext';
-
-interface ProtectedRouteProps {
-  redirectPath?: string;
-}
-
-const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ 
-  redirectPath = '/login' 
-}) => {
-  const { t } = useTranslation();
-  const { auth } = useAuth();
-  
-  if (auth.loading) {
-    return <div className="flex items-center justify-center h-screen">{t('app.loading')}</div>;
-  }
-  
-  if (!auth.isAuthenticated) {
-    return <Navigate to={redirectPath} replace />;
-  }
-  
-  return <Outlet />;
-};
-
-export default ProtectedRoute;