feat: comprehensive service integration refactor with enhanced tabs architecture (#1978)
* feat: add service tabs refactor with GitHub, GitLab, Supabase, Vercel, and Netlify integration This commit introduces a comprehensive refactor of the connections system, replacing the single connections tab with dedicated service integration tabs: ✨ New Service Tabs: - GitHub Tab: Complete integration with repository management, stats, and API - GitLab Tab: GitLab project integration and management - Supabase Tab: Database project management with comprehensive analytics - Vercel Tab: Project deployment management and monitoring - Netlify Tab: Site deployment and build management 🔧 Supporting Infrastructure: - Enhanced store management for each service with auto-connect via env vars - API routes for secure server-side token handling and data fetching - Updated TypeScript types with missing properties and interfaces - Comprehensive hooks for service connections and state management - Security utilities for API endpoint validation 🎨 UI/UX Improvements: - Individual service tabs with tailored functionality - Motion animations and improved loading states - Connection testing and health monitoring - Advanced analytics dashboards for each service - Consistent design patterns across all service tabs 🛠️ Technical Changes: - Removed legacy connection tab in favor of individual service tabs - Updated tab configuration and routing system - Added comprehensive error handling and loading states - Enhanced type safety with extended interfaces - Implemented environment variable auto-connection features Note: Some TypeScript errors remain and will need to be resolved in follow-up commits. The dev server runs successfully and the service tabs are functional. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: comprehensive service integration refactor with enhanced tabs architecture Major architectural improvements to service integrations: **Service Integration Refactor:** - Complete restructure of service connection tabs (GitHub, GitLab, Vercel, Netlify, Supabase) - Migrated from centralized ConnectionsTab to dedicated service-specific tabs - Added shared service integration components for consistent UX - Implemented auto-connection feature using environment variables **New Components & Architecture:** - ServiceIntegrationLayout for consistent service tab structure - ConnectionStatus, ServiceCard components for reusable UI patterns - BranchSelector component for repository branch management - Enhanced authentication dialogs with improved error handling **API & Backend Enhancements:** - New API endpoints: github-branches, gitlab-branches, gitlab-projects, vercel-user - Enhanced GitLab API service with comprehensive project management - Improved connection testing hooks (useConnectionTest) - Better error handling and rate limiting across all services **Configuration & Environment:** - Updated .env.example with comprehensive service integration guides - Added auto-connection support for all major services - Improved development and production environment configurations - Enhanced tab management with proper service icons **Code Quality & TypeScript:** - Fixed all TypeScript errors across service integration components - Enhanced type definitions for Vercel, Supabase, and other service integrations - Improved type safety with proper optional chaining and type assertions - Better separation of concerns between UI and business logic **Removed Legacy Code:** - Removed redundant connection components and consolidated into service tabs - Cleaned up unused imports and deprecated connection patterns - Streamlined authentication flows across all services This refactor provides a more maintainable, scalable architecture for service integrations while significantly improving the user experience for managing external connections. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: clean up dead code and consolidate utilities - Remove legacy .eslintrc.json (replaced by flat config) - Remove duplicate app/utils/types.ts (unused type definitions) - Remove app/utils/cn.ts and consolidate with classNames utility - Clean up unused ServiceErrorHandler class implementation - Enhance classNames utility to support boolean values - Update GlowingEffect.tsx to use consolidated classNames utility Removes ~150+ lines of unused code while maintaining all functionality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Simplify terminal health checks and improve project setup Removed aggressive health checking and reconnection logic from TerminalManager to prevent issues with terminal responsiveness. Updated TerminalTabs to remove onReconnect handlers. Enhanced projectCommands utility to generate non-interactive setup commands and detect shadcn projects, improving automation and reliability of project setup. * fix: resolve GitLab deployment issues and enhance GitHub deployment reliability GitLab Deployment Fixes: - Fix COEP header issue for avatar images by adding crossOrigin and referrerPolicy attributes - Implement repository name sanitization to handle special characters and ensure GitLab compliance - Enhance error handling with detailed validation error parsing and user-friendly messages - Add explicit path field and description to project creation requests - Improve URL encoding and project path resolution for proper API calls - Add graceful file commit handling with timeout and error recovery GitHub Deployment Enhancements: - Add comprehensive repository name validation and sanitization - Implement real-time feedback for invalid characters in repository name input - Enhance error handling with specific error types and retry suggestions - Improve user experience with better error messages and validation feedback - Add repository name length limits and character restrictions - Show sanitized name preview to users before submission General Improvements: - Add GitLabAuthDialog component for improved authentication flow - Enhance logging and debugging capabilities for deployment operations - Improve accessibility with proper dialog titles and descriptions - Add better user notifications for name sanitization and validation issues 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Stijnus
281
app/components/@settings/tabs/github/GitHubTab.tsx
Normal file
281
app/components/@settings/tabs/github/GitHubTab.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useGitHubConnection, useGitHubStats } from '~/lib/hooks';
|
||||
import { LoadingState, ErrorState, ConnectionTestIndicator, RepositoryCard } from './components/shared';
|
||||
import { GitHubConnection } from './components/GitHubConnection';
|
||||
import { GitHubUserProfile } from './components/GitHubUserProfile';
|
||||
import { GitHubStats } from './components/GitHubStats';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { GitHubErrorBoundary } from './components/GitHubErrorBoundary';
|
||||
import { GitHubProgressiveLoader } from './components/GitHubProgressiveLoader';
|
||||
import { GitHubCacheManager } from './components/GitHubCacheManager';
|
||||
|
||||
interface ConnectionTestResult {
|
||||
status: 'success' | 'error' | 'testing';
|
||||
message: string;
|
||||
timestamp?: number;
|
||||
}
|
||||
|
||||
// GitHub logo SVG component
|
||||
const GithubLogo = () => (
|
||||
<svg viewBox="0 0 24 24" className="w-5 h-5">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function GitHubTab() {
|
||||
const { connection, isConnected, isLoading, error, testConnection } = useGitHubConnection();
|
||||
const {
|
||||
stats,
|
||||
isLoading: isStatsLoading,
|
||||
error: statsError,
|
||||
} = useGitHubStats(
|
||||
connection,
|
||||
{
|
||||
autoFetch: true,
|
||||
cacheTimeout: 30 * 60 * 1000, // 30 minutes
|
||||
},
|
||||
isConnected && connection ? !connection.token : false,
|
||||
); // Use server-side when no token but connected
|
||||
|
||||
const [connectionTest, setConnectionTest] = useState<ConnectionTestResult | null>(null);
|
||||
const [isStatsExpanded, setIsStatsExpanded] = useState(false);
|
||||
const [isReposExpanded, setIsReposExpanded] = useState(false);
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
if (!connection?.user) {
|
||||
setConnectionTest({
|
||||
status: 'error',
|
||||
message: 'No connection established',
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setConnectionTest({
|
||||
status: 'testing',
|
||||
message: 'Testing connection...',
|
||||
});
|
||||
|
||||
try {
|
||||
const isValid = await testConnection();
|
||||
|
||||
if (isValid) {
|
||||
setConnectionTest({
|
||||
status: 'success',
|
||||
message: `Connected successfully as ${connection.user.login}`,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
} else {
|
||||
setConnectionTest({
|
||||
status: 'error',
|
||||
message: 'Connection test failed',
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
setConnectionTest({
|
||||
status: 'error',
|
||||
message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Loading state for initial connection check
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<GithubLogo />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
|
||||
</div>
|
||||
<LoadingState message="Checking GitHub connection..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state for connection issues
|
||||
if (error && !connection) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<GithubLogo />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
|
||||
</div>
|
||||
<ErrorState
|
||||
title="Connection Error"
|
||||
message={error}
|
||||
onRetry={() => window.location.reload()}
|
||||
retryLabel="Reload Page"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Not connected state
|
||||
if (!isConnected || !connection) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<GithubLogo />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">
|
||||
Connect your GitHub account to enable advanced repository management features, statistics, and seamless
|
||||
integration.
|
||||
</p>
|
||||
<GitHubConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<GitHubErrorBoundary>
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
className="flex items-center justify-between gap-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<GithubLogo />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
GitHub Integration
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{connection?.rateLimit && (
|
||||
<div className="flex items-center gap-2 px-3 py-1 bg-bolt-elements-background-depth-1 rounded-lg text-xs">
|
||||
<div className="i-ph:cloud w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
<span className="text-bolt-elements-textSecondary">
|
||||
API: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
|
||||
Manage your GitHub integration with advanced repository features and comprehensive statistics
|
||||
</p>
|
||||
|
||||
{/* Connection Test Results */}
|
||||
<ConnectionTestIndicator
|
||||
status={connectionTest?.status || null}
|
||||
message={connectionTest?.message}
|
||||
timestamp={connectionTest?.timestamp}
|
||||
/>
|
||||
|
||||
{/* Connection Component */}
|
||||
<GitHubConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
|
||||
|
||||
{/* User Profile */}
|
||||
{connection.user && <GitHubUserProfile user={connection.user} />}
|
||||
|
||||
{/* Stats Section */}
|
||||
<GitHubStats connection={connection} isExpanded={isStatsExpanded} onToggleExpanded={setIsStatsExpanded} />
|
||||
|
||||
{/* Repositories Section */}
|
||||
{stats?.repos && stats.repos.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="border-t border-bolt-elements-borderColor pt-6"
|
||||
>
|
||||
<Collapsible open={isReposExpanded} onOpenChange={setIsReposExpanded}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:folder w-4 h-4 text-bolt-elements-item-contentAccent" />
|
||||
<span className="text-sm font-medium text-bolt-elements-textPrimary">
|
||||
All Repositories ({stats.repos.length})
|
||||
</span>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={classNames(
|
||||
'w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
|
||||
isReposExpanded ? 'rotate-180' : '',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent className="overflow-hidden">
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{(isReposExpanded ? stats.repos : stats.repos.slice(0, 12)).map((repo) => (
|
||||
<RepositoryCard
|
||||
key={repo.full_name}
|
||||
repository={repo}
|
||||
variant="detailed"
|
||||
showHealthScore
|
||||
showExtendedMetrics
|
||||
onSelect={() => window.open(repo.html_url, '_blank', 'noopener,noreferrer')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{stats.repos.length > 12 && !isReposExpanded && (
|
||||
<div className="text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsReposExpanded(true)}
|
||||
className="text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
|
||||
>
|
||||
Show {stats.repos.length - 12} more repositories
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Stats Error State */}
|
||||
{statsError && !stats && (
|
||||
<ErrorState
|
||||
title="Failed to Load Statistics"
|
||||
message={statsError}
|
||||
onRetry={() => window.location.reload()}
|
||||
retryLabel="Retry"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Stats Loading State */}
|
||||
{isStatsLoading && !stats && (
|
||||
<GitHubProgressiveLoader
|
||||
isLoading={isStatsLoading}
|
||||
loadingMessage="Loading GitHub statistics..."
|
||||
showProgress={true}
|
||||
progressSteps={[
|
||||
{ key: 'user', label: 'Fetching user info', completed: !!connection?.user, loading: !connection?.user },
|
||||
{ key: 'repos', label: 'Loading repositories', completed: false, loading: true },
|
||||
{ key: 'stats', label: 'Calculating statistics', completed: false },
|
||||
{ key: 'cache', label: 'Updating cache', completed: false },
|
||||
]}
|
||||
>
|
||||
<div />
|
||||
</GitHubProgressiveLoader>
|
||||
)}
|
||||
|
||||
{/* Cache Management Section - Only show when connected */}
|
||||
{isConnected && connection && (
|
||||
<div className="mt-8 pt-6 border-t border-bolt-elements-borderColor">
|
||||
<GitHubCacheManager showStats={true} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GitHubErrorBoundary>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
import React, { useState } from 'react';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { useGitHubConnection } from '~/lib/hooks';
|
||||
|
||||
interface GitHubAuthDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function GitHubAuthDialog({ isOpen, onClose, onSuccess }: GitHubAuthDialogProps) {
|
||||
const { connect, isConnecting, error } = useGitHubConnection();
|
||||
const [token, setToken] = useState('');
|
||||
const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
|
||||
|
||||
const handleConnect = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!token.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await connect(token, tokenType);
|
||||
setToken(''); // Clear token on successful connection
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
} catch {
|
||||
// Error handling is done in the hook
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setToken('');
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={isOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 z-[200]" />
|
||||
<Dialog.Content
|
||||
className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[201] w-full max-w-md"
|
||||
onEscapeKeyDown={handleClose}
|
||||
onPointerDownOutside={handleClose}
|
||||
>
|
||||
<motion.div
|
||||
className="bg-bolt-elements-background border border-bolt-elements-borderColor rounded-lg shadow-lg"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
>
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Connect to GitHub</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-1 rounded-md hover:bg-bolt-elements-item-backgroundActive/10"
|
||||
>
|
||||
<div className="i-ph:x w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 p-3 rounded-lg">
|
||||
<p className="flex items-center gap-1 mb-1">
|
||||
<span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success" />
|
||||
<span className="font-medium">Tip:</span> You need a GitHub token to deploy repositories.
|
||||
</p>
|
||||
<p>Required scopes: repo, read:org, read:user</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleConnect} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-bolt-elements-textSecondary mb-2">Token Type</label>
|
||||
<select
|
||||
value={tokenType}
|
||||
onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
|
||||
disabled={isConnecting}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-1',
|
||||
'border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent',
|
||||
'disabled:opacity-50',
|
||||
)}
|
||||
>
|
||||
<option value="classic">Personal Access Token (Classic)</option>
|
||||
<option value="fine-grained">Fine-grained Token</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-bolt-elements-textSecondary mb-2">
|
||||
{tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={token}
|
||||
onChange={(e) => setToken(e.target.value)}
|
||||
disabled={isConnecting}
|
||||
placeholder={`Enter your GitHub ${
|
||||
tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
|
||||
}`}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-1',
|
||||
'border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
|
||||
'disabled:opacity-50',
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
|
||||
<a
|
||||
href={`https://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
Get your token
|
||||
<div className="i-ph:arrow-square-out w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
|
||||
<p className="text-sm text-red-800 dark:text-red-200">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
className="px-4 py-2 text-sm text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isConnecting || !token.trim()}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
|
||||
'bg-[#303030] text-white',
|
||||
'hover:bg-[#5E41D0] hover:text-white',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap animate-spin" />
|
||||
Connecting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:plug-charging w-4 h-4" />
|
||||
Connect
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { Database, Trash2, RefreshCw, Clock, HardDrive, CheckCircle } from 'lucide-react';
|
||||
|
||||
interface CacheEntry {
|
||||
key: string;
|
||||
size: number;
|
||||
timestamp: number;
|
||||
lastAccessed: number;
|
||||
data: any;
|
||||
}
|
||||
|
||||
interface CacheStats {
|
||||
totalSize: number;
|
||||
totalEntries: number;
|
||||
oldestEntry: number;
|
||||
newestEntry: number;
|
||||
hitRate?: number;
|
||||
}
|
||||
|
||||
interface GitHubCacheManagerProps {
|
||||
className?: string;
|
||||
showStats?: boolean;
|
||||
}
|
||||
|
||||
// Cache management utilities
|
||||
class CacheManagerService {
|
||||
private static readonly _cachePrefix = 'github_';
|
||||
private static readonly _cacheKeys = [
|
||||
'github_connection',
|
||||
'github_stats_cache',
|
||||
'github_repositories_cache',
|
||||
'github_user_cache',
|
||||
'github_rate_limits',
|
||||
];
|
||||
|
||||
static getCacheEntries(): CacheEntry[] {
|
||||
const entries: CacheEntry[] = [];
|
||||
|
||||
for (const key of this._cacheKeys) {
|
||||
try {
|
||||
const data = localStorage.getItem(key);
|
||||
|
||||
if (data) {
|
||||
const parsed = JSON.parse(data);
|
||||
entries.push({
|
||||
key,
|
||||
size: new Blob([data]).size,
|
||||
timestamp: parsed.timestamp || Date.now(),
|
||||
lastAccessed: parsed.lastAccessed || Date.now(),
|
||||
data: parsed,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`Failed to parse cache entry: ${key}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
return entries.sort((a, b) => b.lastAccessed - a.lastAccessed);
|
||||
}
|
||||
|
||||
static getCacheStats(): CacheStats {
|
||||
const entries = this.getCacheEntries();
|
||||
|
||||
if (entries.length === 0) {
|
||||
return {
|
||||
totalSize: 0,
|
||||
totalEntries: 0,
|
||||
oldestEntry: 0,
|
||||
newestEntry: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const totalSize = entries.reduce((sum, entry) => sum + entry.size, 0);
|
||||
const timestamps = entries.map((e) => e.timestamp);
|
||||
|
||||
return {
|
||||
totalSize,
|
||||
totalEntries: entries.length,
|
||||
oldestEntry: Math.min(...timestamps),
|
||||
newestEntry: Math.max(...timestamps),
|
||||
};
|
||||
}
|
||||
|
||||
static clearCache(keys?: string[]): void {
|
||||
const keysToRemove = keys || this._cacheKeys;
|
||||
|
||||
for (const key of keysToRemove) {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
static clearExpiredCache(maxAge: number = 24 * 60 * 60 * 1000): number {
|
||||
const entries = this.getCacheEntries();
|
||||
const now = Date.now();
|
||||
let removedCount = 0;
|
||||
|
||||
for (const entry of entries) {
|
||||
if (now - entry.timestamp > maxAge) {
|
||||
localStorage.removeItem(entry.key);
|
||||
removedCount++;
|
||||
}
|
||||
}
|
||||
|
||||
return removedCount;
|
||||
}
|
||||
|
||||
static compactCache(): void {
|
||||
const entries = this.getCacheEntries();
|
||||
|
||||
for (const entry of entries) {
|
||||
try {
|
||||
// Re-serialize with minimal data
|
||||
const compacted = {
|
||||
...entry.data,
|
||||
lastAccessed: Date.now(),
|
||||
};
|
||||
localStorage.setItem(entry.key, JSON.stringify(compacted));
|
||||
} catch (error) {
|
||||
console.warn(`Failed to compact cache entry: ${entry.key}`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static formatSize(bytes: number): string {
|
||||
if (bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
}
|
||||
|
||||
export function GitHubCacheManager({ className = '', showStats = true }: GitHubCacheManagerProps) {
|
||||
const [cacheEntries, setCacheEntries] = useState<CacheEntry[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [lastClearTime, setLastClearTime] = useState<number | null>(null);
|
||||
|
||||
const refreshCacheData = useCallback(() => {
|
||||
setCacheEntries(CacheManagerService.getCacheEntries());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
refreshCacheData();
|
||||
}, [refreshCacheData]);
|
||||
|
||||
const cacheStats = useMemo(() => CacheManagerService.getCacheStats(), [cacheEntries]);
|
||||
|
||||
const handleClearAll = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
CacheManagerService.clearCache();
|
||||
setLastClearTime(Date.now());
|
||||
refreshCacheData();
|
||||
|
||||
// Trigger a page refresh to update all components
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error('Failed to clear cache:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [refreshCacheData]);
|
||||
|
||||
const handleClearExpired = useCallback(() => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const removedCount = CacheManagerService.clearExpiredCache();
|
||||
refreshCacheData();
|
||||
|
||||
if (removedCount > 0) {
|
||||
// Show success message or trigger update
|
||||
console.log(`Removed ${removedCount} expired cache entries`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to clear expired cache:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [refreshCacheData]);
|
||||
|
||||
const handleCompactCache = useCallback(() => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
CacheManagerService.compactCache();
|
||||
refreshCacheData();
|
||||
} catch (error) {
|
||||
console.error('Failed to compact cache:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [refreshCacheData]);
|
||||
|
||||
const handleClearSpecific = useCallback(
|
||||
(key: string) => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
CacheManagerService.clearCache([key]);
|
||||
refreshCacheData();
|
||||
} catch (error) {
|
||||
console.error(`Failed to clear cache key: ${key}`, error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[refreshCacheData],
|
||||
);
|
||||
|
||||
if (!showStats && cacheEntries.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'space-y-4 p-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="w-4 h-4 text-bolt-elements-item-contentAccent" />
|
||||
<h3 className="text-sm font-medium text-bolt-elements-textPrimary">GitHub Cache Management</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={refreshCacheData} disabled={isLoading}>
|
||||
<RefreshCw className={classNames('w-3 h-3', isLoading ? 'animate-spin' : '')} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showStats && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<HardDrive className="w-3 h-3 text-bolt-elements-textSecondary" />
|
||||
<span className="text-xs font-medium text-bolt-elements-textSecondary">Total Size</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-bolt-elements-textPrimary">
|
||||
{CacheManagerService.formatSize(cacheStats.totalSize)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Database className="w-3 h-3 text-bolt-elements-textSecondary" />
|
||||
<span className="text-xs font-medium text-bolt-elements-textSecondary">Entries</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-bolt-elements-textPrimary">{cacheStats.totalEntries}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Clock className="w-3 h-3 text-bolt-elements-textSecondary" />
|
||||
<span className="text-xs font-medium text-bolt-elements-textSecondary">Oldest</span>
|
||||
</div>
|
||||
<p className="text-xs text-bolt-elements-textSecondary">
|
||||
{cacheStats.oldestEntry ? new Date(cacheStats.oldestEntry).toLocaleDateString() : 'N/A'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<CheckCircle className="w-3 h-3 text-bolt-elements-textSecondary" />
|
||||
<span className="text-xs font-medium text-bolt-elements-textSecondary">Status</span>
|
||||
</div>
|
||||
<p className="text-xs text-green-600 dark:text-green-400">
|
||||
{cacheStats.totalEntries > 0 ? 'Active' : 'Empty'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{cacheEntries.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-xs font-medium text-bolt-elements-textSecondary">
|
||||
Cache Entries ({cacheEntries.length})
|
||||
</h4>
|
||||
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
{cacheEntries.map((entry) => (
|
||||
<div
|
||||
key={entry.key}
|
||||
className="flex items-center justify-between p-2 bg-bolt-elements-background-depth-2 rounded border border-bolt-elements-borderColor"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium text-bolt-elements-textPrimary truncate">
|
||||
{entry.key.replace('github_', '')}
|
||||
</p>
|
||||
<p className="text-xs text-bolt-elements-textSecondary">
|
||||
{CacheManagerService.formatSize(entry.size)} • {new Date(entry.lastAccessed).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleClearSpecific(entry.key)}
|
||||
disabled={isLoading}
|
||||
className="ml-2"
|
||||
>
|
||||
<Trash2 className="w-3 h-3 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2 pt-2 border-t border-bolt-elements-borderColor">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClearExpired}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Clock className="w-3 h-3" />
|
||||
<span className="text-xs">Clear Expired</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCompactCache}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
<span className="text-xs">Compact</span>
|
||||
</Button>
|
||||
|
||||
{cacheEntries.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClearAll}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-1 text-red-600 hover:text-red-700 border-red-200 hover:border-red-300"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
<span className="text-xs">Clear All</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{lastClearTime && (
|
||||
<div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded text-xs text-green-700 dark:text-green-400">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
<span>Cache cleared successfully at {new Date(lastClearTime).toLocaleTimeString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { useGitHubConnection } from '~/lib/hooks';
|
||||
|
||||
interface ConnectionTestResult {
|
||||
status: 'success' | 'error' | 'testing';
|
||||
message: string;
|
||||
timestamp?: number;
|
||||
}
|
||||
|
||||
interface GitHubConnectionProps {
|
||||
connectionTest: ConnectionTestResult | null;
|
||||
onTestConnection: () => void;
|
||||
}
|
||||
|
||||
export function GitHubConnection({ connectionTest, onTestConnection }: GitHubConnectionProps) {
|
||||
const { isConnected, isLoading, isConnecting, connect, disconnect, error } = useGitHubConnection();
|
||||
|
||||
const [token, setToken] = React.useState('');
|
||||
const [tokenType, setTokenType] = React.useState<'classic' | 'fine-grained'>('classic');
|
||||
|
||||
const handleConnect = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('handleConnect called with token:', token ? 'token provided' : 'no token', 'tokenType:', tokenType);
|
||||
|
||||
if (!token.trim()) {
|
||||
console.log('No token provided, returning early');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Calling connect function...');
|
||||
await connect(token, tokenType);
|
||||
console.log('Connect function completed successfully');
|
||||
setToken(''); // Clear token on successful connection
|
||||
} catch (error) {
|
||||
console.log('Connect function failed:', error);
|
||||
|
||||
// Error handling is done in the hook
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-bolt-elements-textSecondary">Loading connection...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="p-6 space-y-6">
|
||||
{!isConnected && (
|
||||
<div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
|
||||
<p className="flex items-center gap-1 mb-1">
|
||||
<span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
|
||||
<span className="font-medium">Tip:</span> You can also set the{' '}
|
||||
<code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
|
||||
VITE_GITHUB_ACCESS_TOKEN
|
||||
</code>{' '}
|
||||
environment variable to connect automatically.
|
||||
</p>
|
||||
<p>
|
||||
For fine-grained tokens, also set{' '}
|
||||
<code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
|
||||
VITE_GITHUB_TOKEN_TYPE=fine-grained
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleConnect} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
|
||||
Token Type
|
||||
</label>
|
||||
<select
|
||||
value={tokenType}
|
||||
onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
|
||||
disabled={isConnecting || isConnected}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
|
||||
'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
|
||||
'disabled:opacity-50',
|
||||
)}
|
||||
>
|
||||
<option value="classic">Personal Access Token (Classic)</option>
|
||||
<option value="fine-grained">Fine-grained Token</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
|
||||
{tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={token}
|
||||
onChange={(e) => setToken(e.target.value)}
|
||||
disabled={isConnecting || isConnected}
|
||||
placeholder={`Enter your GitHub ${
|
||||
tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
|
||||
}`}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#333333]',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
|
||||
'disabled:opacity-50',
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
|
||||
<a
|
||||
href={`https://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
Get your token
|
||||
<div className="i-ph:arrow-square-out w-4 h-4" />
|
||||
</a>
|
||||
<span className="mx-2">•</span>
|
||||
<span>
|
||||
Required scopes:{' '}
|
||||
{tokenType === 'classic' ? 'repo, read:org, read:user' : 'Repository access, Organization access'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
|
||||
<p className="text-sm text-red-800 dark:text-red-200">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
{!isConnected ? (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isConnecting || !token.trim()}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
|
||||
'bg-[#303030] text-white',
|
||||
'hover:bg-[#5E41D0] hover:text-white',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
|
||||
'transform active:scale-95',
|
||||
)}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap animate-spin" />
|
||||
Connecting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:plug-charging w-4 h-4" />
|
||||
Connect
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={disconnect}
|
||||
type="button"
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
|
||||
'bg-red-500 text-white',
|
||||
'hover:bg-red-600',
|
||||
)}
|
||||
>
|
||||
<div className="i-ph:plug w-4 h-4" />
|
||||
Disconnect
|
||||
</button>
|
||||
<span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
|
||||
<div className="i-ph:check-circle w-4 h-4 text-green-500" />
|
||||
Connected to GitHub
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => window.open('https://github.com/dashboard', '_blank', 'noopener,noreferrer')}
|
||||
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
|
||||
>
|
||||
<div className="i-ph:layout w-4 h-4" />
|
||||
Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onTestConnection}
|
||||
disabled={connectionTest?.status === 'testing'}
|
||||
variant="outline"
|
||||
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
|
||||
>
|
||||
{connectionTest?.status === 'testing' ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
|
||||
Testing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:plug-charging w-4 h-4" />
|
||||
Test Connection
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, { Component } from 'react';
|
||||
import type { ReactNode, ErrorInfo } from 'react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
export class GitHubErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('GitHub Error Boundary caught an error:', error, errorInfo);
|
||||
|
||||
if (this.props.onError) {
|
||||
this.props.onError(error, errorInfo);
|
||||
}
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center space-y-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg">
|
||||
<div className="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
|
||||
<AlertTriangle className="w-6 h-6 text-red-500" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Integration Error</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mb-4 max-w-md">
|
||||
Something went wrong while loading GitHub data. This could be due to network issues, API limits, or a
|
||||
temporary problem.
|
||||
</p>
|
||||
|
||||
{this.state.error && (
|
||||
<details className="text-xs text-bolt-elements-textTertiary mb-4">
|
||||
<summary className="cursor-pointer hover:text-bolt-elements-textSecondary">Show error details</summary>
|
||||
<pre className="mt-2 p-2 bg-bolt-elements-background-depth-2 rounded text-left overflow-auto">
|
||||
{this.state.error.message}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={this.handleRetry}>
|
||||
Try Again
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => window.location.reload()}>
|
||||
Reload Page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Higher-order component for wrapping components with error boundary
|
||||
export function withGitHubErrorBoundary<P extends object>(component: React.ComponentType<P>) {
|
||||
return function WrappedComponent(props: P) {
|
||||
return <GitHubErrorBoundary>{React.createElement(component, props)}</GitHubErrorBoundary>;
|
||||
};
|
||||
}
|
||||
|
||||
// Hook for handling async errors in GitHub operations
|
||||
export function useGitHubErrorHandler() {
|
||||
const handleError = React.useCallback((error: unknown, context?: string) => {
|
||||
console.error(`GitHub Error ${context ? `(${context})` : ''}:`, error);
|
||||
|
||||
/*
|
||||
* You could integrate with error tracking services here
|
||||
* For example: Sentry, LogRocket, etc.
|
||||
*/
|
||||
|
||||
return error instanceof Error ? error.message : 'An unknown error occurred';
|
||||
}, []);
|
||||
|
||||
return { handleError };
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { Loader2, ChevronDown, RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';
|
||||
|
||||
interface ProgressiveLoaderProps {
|
||||
isLoading: boolean;
|
||||
isRefreshing?: boolean;
|
||||
error?: string | null;
|
||||
onRetry?: () => void;
|
||||
onRefresh?: () => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
loadingMessage?: string;
|
||||
refreshingMessage?: string;
|
||||
showProgress?: boolean;
|
||||
progressSteps?: Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
completed: boolean;
|
||||
loading?: boolean;
|
||||
error?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
export function GitHubProgressiveLoader({
|
||||
isLoading,
|
||||
isRefreshing = false,
|
||||
error,
|
||||
onRetry,
|
||||
onRefresh,
|
||||
children,
|
||||
className = '',
|
||||
loadingMessage = 'Loading...',
|
||||
refreshingMessage = 'Refreshing...',
|
||||
showProgress = false,
|
||||
progressSteps = [],
|
||||
}: ProgressiveLoaderProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
// Calculate progress percentage
|
||||
const progress = useMemo(() => {
|
||||
if (!showProgress || progressSteps.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const completed = progressSteps.filter((step) => step.completed).length;
|
||||
|
||||
return Math.round((completed / progressSteps.length) * 100);
|
||||
}, [showProgress, progressSteps]);
|
||||
|
||||
const handleToggleExpanded = useCallback(() => {
|
||||
setIsExpanded((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
// Loading state with progressive steps
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className={classNames('flex flex-col items-center justify-center py-8', className)}>
|
||||
<div className="relative mb-4">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-bolt-elements-item-contentAccent" />
|
||||
{showProgress && progress > 0 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xs font-medium text-bolt-elements-item-contentAccent">{progress}%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-sm font-medium text-bolt-elements-textPrimary">{loadingMessage}</p>
|
||||
|
||||
{showProgress && progressSteps.length > 0 && (
|
||||
<div className="w-full max-w-sm">
|
||||
{/* Progress bar */}
|
||||
<div className="w-full bg-bolt-elements-background-depth-2 rounded-full h-2 mb-3">
|
||||
<motion.div
|
||||
className="bg-bolt-elements-item-contentAccent h-2 rounded-full"
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${progress}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Steps toggle */}
|
||||
<button
|
||||
onClick={handleToggleExpanded}
|
||||
className="flex items-center justify-center gap-2 text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
|
||||
>
|
||||
<span>Show details</span>
|
||||
<ChevronDown
|
||||
className={classNames(
|
||||
'w-3 h-3 transform transition-transform duration-200',
|
||||
isExpanded ? 'rotate-180' : '',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Progress steps */}
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mt-3 space-y-2 overflow-hidden"
|
||||
>
|
||||
{progressSteps.map((step) => (
|
||||
<div key={step.key} className="flex items-center gap-2 text-xs">
|
||||
{step.error ? (
|
||||
<AlertCircle className="w-3 h-3 text-red-500 flex-shrink-0" />
|
||||
) : step.completed ? (
|
||||
<CheckCircle className="w-3 h-3 text-green-500 flex-shrink-0" />
|
||||
) : step.loading ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin text-bolt-elements-item-contentAccent flex-shrink-0" />
|
||||
) : (
|
||||
<div className="w-3 h-3 rounded-full border border-bolt-elements-borderColor flex-shrink-0" />
|
||||
)}
|
||||
<span
|
||||
className={classNames(
|
||||
step.error
|
||||
? 'text-red-500'
|
||||
: step.completed
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: step.loading
|
||||
? 'text-bolt-elements-textPrimary'
|
||||
: 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
>
|
||||
{step.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<div className={classNames('flex flex-col items-center justify-center py-8 text-center space-y-4', className)}>
|
||||
<div className="w-10 h-10 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
|
||||
<AlertCircle className="w-5 h-5 text-red-500" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-1">Failed to Load</h3>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mb-4 max-w-sm">{error}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{onRetry && (
|
||||
<Button variant="outline" size="sm" onClick={onRetry} className="text-xs">
|
||||
<RefreshCw className="w-3 h-3 mr-1" />
|
||||
Try Again
|
||||
</Button>
|
||||
)}
|
||||
{onRefresh && (
|
||||
<Button variant="outline" size="sm" onClick={onRefresh} className="text-xs">
|
||||
<RefreshCw className="w-3 h-3 mr-1" />
|
||||
Refresh
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Success state - render children with optional refresh indicator
|
||||
return (
|
||||
<div className={classNames('relative', className)}>
|
||||
{isRefreshing && (
|
||||
<div className="absolute top-0 right-0 z-10">
|
||||
<div className="flex items-center gap-2 px-2 py-1 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg shadow-sm">
|
||||
<Loader2 className="w-3 h-3 animate-spin text-bolt-elements-item-contentAccent" />
|
||||
<span className="text-xs text-bolt-elements-textSecondary">{refreshingMessage}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Hook for managing progressive loading steps
|
||||
export function useProgressiveLoader() {
|
||||
const [steps, setSteps] = useState<
|
||||
Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
completed: boolean;
|
||||
loading?: boolean;
|
||||
error?: boolean;
|
||||
}>
|
||||
>([]);
|
||||
|
||||
const addStep = useCallback((key: string, label: string) => {
|
||||
setSteps((prev) => [
|
||||
...prev.filter((step) => step.key !== key),
|
||||
{ key, label, completed: false, loading: false, error: false },
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const updateStep = useCallback(
|
||||
(
|
||||
key: string,
|
||||
updates: {
|
||||
completed?: boolean;
|
||||
loading?: boolean;
|
||||
error?: boolean;
|
||||
label?: string;
|
||||
},
|
||||
) => {
|
||||
setSteps((prev) => prev.map((step) => (step.key === key ? { ...step, ...updates } : step)));
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const removeStep = useCallback((key: string) => {
|
||||
setSteps((prev) => prev.filter((step) => step.key !== key));
|
||||
}, []);
|
||||
|
||||
const clearSteps = useCallback(() => {
|
||||
setSteps([]);
|
||||
}, []);
|
||||
|
||||
const startStep = useCallback(
|
||||
(key: string) => {
|
||||
updateStep(key, { loading: true, error: false });
|
||||
},
|
||||
[updateStep],
|
||||
);
|
||||
|
||||
const completeStep = useCallback(
|
||||
(key: string) => {
|
||||
updateStep(key, { completed: true, loading: false, error: false });
|
||||
},
|
||||
[updateStep],
|
||||
);
|
||||
|
||||
const errorStep = useCallback(
|
||||
(key: string) => {
|
||||
updateStep(key, { error: true, loading: false });
|
||||
},
|
||||
[updateStep],
|
||||
);
|
||||
|
||||
return {
|
||||
steps,
|
||||
addStep,
|
||||
updateStep,
|
||||
removeStep,
|
||||
clearSteps,
|
||||
startStep,
|
||||
completeStep,
|
||||
errorStep,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import React from 'react';
|
||||
import type { GitHubRepoInfo } from '~/types/GitHub';
|
||||
|
||||
interface GitHubRepositoryCardProps {
|
||||
repo: GitHubRepoInfo;
|
||||
onClone?: (repo: GitHubRepoInfo) => void;
|
||||
}
|
||||
|
||||
export function GitHubRepositoryCard({ repo, onClone }: GitHubRepositoryCardProps) {
|
||||
return (
|
||||
<a
|
||||
key={repo.name}
|
||||
href={repo.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group block p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-all duration-200"
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:git-repository w-4 h-4 text-bolt-elements-icon-info" />
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors">
|
||||
{repo.name}
|
||||
</h5>
|
||||
{repo.private && (
|
||||
<div className="i-ph:lock w-3 h-3 text-bolt-elements-textTertiary" title="Private repository" />
|
||||
)}
|
||||
{repo.fork && (
|
||||
<div className="i-ph:git-fork w-3 h-3 text-bolt-elements-textTertiary" title="Forked repository" />
|
||||
)}
|
||||
{repo.archived && (
|
||||
<div className="i-ph:archive w-3 h-3 text-bolt-elements-textTertiary" title="Archived repository" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1" title="Stars">
|
||||
<div className="i-ph:star w-3.5 h-3.5 text-bolt-elements-icon-warning" />
|
||||
{repo.stargazers_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1" title="Forks">
|
||||
<div className="i-ph:git-fork w-3.5 h-3.5 text-bolt-elements-icon-info" />
|
||||
{repo.forks_count.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{repo.description && (
|
||||
<p className="text-xs text-bolt-elements-textSecondary line-clamp-2">{repo.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1" title="Default Branch">
|
||||
<div className="i-ph:git-branch w-3.5 h-3.5" />
|
||||
{repo.default_branch}
|
||||
</span>
|
||||
{repo.language && (
|
||||
<span className="flex items-center gap-1" title="Primary Language">
|
||||
<div className="w-2 h-2 rounded-full bg-current opacity-60" />
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1" title="Last Updated">
|
||||
<div className="i-ph:clock w-3.5 h-3.5" />
|
||||
{new Date(repo.updated_at).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Repository topics/tags */}
|
||||
{repo.topics && repo.topics.length > 0 && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{repo.topics.slice(0, 3).map((topic) => (
|
||||
<span
|
||||
key={topic}
|
||||
className="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
|
||||
title={`Topic: ${topic}`}
|
||||
>
|
||||
{topic}
|
||||
</span>
|
||||
))}
|
||||
{repo.topics.length > 3 && (
|
||||
<span className="text-bolt-elements-textTertiary">+{repo.topics.length - 3} more</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Repository size if available */}
|
||||
{repo.size && (
|
||||
<div className="text-xs text-bolt-elements-textTertiary">Size: {(repo.size / 1024).toFixed(1)} MB</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom section with Clone button positioned at bottom right */}
|
||||
<div className="flex items-center justify-between pt-3 mt-auto">
|
||||
<span className="flex items-center gap-1 text-xs text-bolt-elements-textSecondary group-hover:text-bolt-elements-item-contentAccent transition-colors">
|
||||
<div className="i-ph:arrow-square-out w-3.5 h-3.5" />
|
||||
View
|
||||
</span>
|
||||
{onClone && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onClone(repo);
|
||||
}}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
|
||||
title="Clone repository"
|
||||
>
|
||||
<div className="i-ph:git-branch w-3.5 h-3.5" />
|
||||
Clone
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { BranchSelector } from '~/components/ui/BranchSelector';
|
||||
import { GitHubRepositoryCard } from './GitHubRepositoryCard';
|
||||
import type { GitHubRepoInfo } from '~/types/GitHub';
|
||||
import { useGitHubConnection, useGitHubStats } from '~/lib/hooks';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { Search, RefreshCw, GitBranch, Calendar, Filter } from 'lucide-react';
|
||||
|
||||
interface GitHubRepositorySelectorProps {
|
||||
onClone?: (repoUrl: string, branch?: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type SortOption = 'updated' | 'stars' | 'name' | 'created';
|
||||
type FilterOption = 'all' | 'own' | 'forks' | 'archived';
|
||||
|
||||
export function GitHubRepositorySelector({ onClone, className }: GitHubRepositorySelectorProps) {
|
||||
const { connection, isConnected } = useGitHubConnection();
|
||||
const {
|
||||
stats,
|
||||
isLoading: isStatsLoading,
|
||||
refreshStats,
|
||||
} = useGitHubStats(connection, {
|
||||
autoFetch: true,
|
||||
cacheTimeout: 30 * 60 * 1000, // 30 minutes
|
||||
});
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortBy, setSortBy] = useState<SortOption>('updated');
|
||||
const [filterBy, setFilterBy] = useState<FilterOption>('all');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedRepo, setSelectedRepo] = useState<GitHubRepoInfo | null>(null);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [isBranchSelectorOpen, setIsBranchSelectorOpen] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const repositories = stats?.repos || [];
|
||||
const REPOS_PER_PAGE = 12;
|
||||
|
||||
// Filter and search repositories
|
||||
const filteredRepositories = useMemo(() => {
|
||||
if (!repositories) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const filtered = repositories.filter((repo: GitHubRepoInfo) => {
|
||||
// Search filter
|
||||
const matchesSearch =
|
||||
!searchQuery ||
|
||||
repo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
repo.full_name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
// Type filter
|
||||
let matchesFilter = true;
|
||||
|
||||
switch (filterBy) {
|
||||
case 'own':
|
||||
matchesFilter = !repo.fork;
|
||||
break;
|
||||
case 'forks':
|
||||
matchesFilter = repo.fork === true;
|
||||
break;
|
||||
case 'archived':
|
||||
matchesFilter = repo.archived === true;
|
||||
break;
|
||||
case 'all':
|
||||
default:
|
||||
matchesFilter = true;
|
||||
break;
|
||||
}
|
||||
|
||||
return matchesSearch && matchesFilter;
|
||||
});
|
||||
|
||||
// Sort repositories
|
||||
filtered.sort((a: GitHubRepoInfo, b: GitHubRepoInfo) => {
|
||||
switch (sortBy) {
|
||||
case 'name':
|
||||
return a.name.localeCompare(b.name);
|
||||
case 'stars':
|
||||
return b.stargazers_count - a.stargazers_count;
|
||||
case 'created':
|
||||
return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(); // Using updated_at as proxy
|
||||
case 'updated':
|
||||
default:
|
||||
return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
|
||||
}
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [repositories, searchQuery, sortBy, filterBy]);
|
||||
|
||||
// Pagination
|
||||
const totalPages = Math.ceil(filteredRepositories.length / REPOS_PER_PAGE);
|
||||
const startIndex = (currentPage - 1) * REPOS_PER_PAGE;
|
||||
const currentRepositories = filteredRepositories.slice(startIndex, startIndex + REPOS_PER_PAGE);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setIsRefreshing(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await refreshStats();
|
||||
} catch (err) {
|
||||
console.error('Failed to refresh GitHub repositories:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to refresh repositories');
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloneRepository = (repo: GitHubRepoInfo) => {
|
||||
setSelectedRepo(repo);
|
||||
setIsBranchSelectorOpen(true);
|
||||
};
|
||||
|
||||
const handleBranchSelect = (branch: string) => {
|
||||
if (onClone && selectedRepo) {
|
||||
const cloneUrl = selectedRepo.html_url + '.git';
|
||||
onClone(cloneUrl, branch);
|
||||
}
|
||||
|
||||
setSelectedRepo(null);
|
||||
};
|
||||
|
||||
const handleCloseBranchSelector = () => {
|
||||
setIsBranchSelectorOpen(false);
|
||||
setSelectedRepo(null);
|
||||
};
|
||||
|
||||
// Reset to first page when filters change
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchQuery, sortBy, filterBy]);
|
||||
|
||||
if (!isConnected || !connection) {
|
||||
return (
|
||||
<div className="text-center p-8">
|
||||
<p className="text-bolt-elements-textSecondary mb-4">Please connect to GitHub first to browse repositories</p>
|
||||
<Button variant="outline" onClick={() => window.location.reload()}>
|
||||
Refresh Connection
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isStatsLoading && !stats) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 space-y-4">
|
||||
<div className="animate-spin w-8 h-8 border-2 border-bolt-elements-borderColorActive border-t-transparent rounded-full" />
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Loading repositories...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!repositories.length) {
|
||||
return (
|
||||
<div className="text-center p-8">
|
||||
<GitBranch className="w-12 h-12 text-bolt-elements-textTertiary mx-auto mb-4" />
|
||||
<p className="text-bolt-elements-textSecondary mb-4">No repositories found</p>
|
||||
<Button variant="outline" onClick={handleRefresh} disabled={isRefreshing}>
|
||||
<RefreshCw className={classNames('w-4 h-4 mr-2', { 'animate-spin': isRefreshing })} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={classNames('space-y-6', className)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Header with stats */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Select Repository to Clone</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">
|
||||
{filteredRepositories.length} of {repositories.length} repositories
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={classNames('w-4 h-4', { 'animate-spin': isRefreshing })} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && repositories.length > 0 && (
|
||||
<div className="p-3 rounded-lg bg-yellow-50 border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700">
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-200">Warning: {error}. Showing cached data.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bolt-elements-textTertiary" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search repositories..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sort */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4 text-bolt-elements-textTertiary" />
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortOption)}
|
||||
className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
|
||||
>
|
||||
<option value="updated">Recently updated</option>
|
||||
<option value="stars">Most starred</option>
|
||||
<option value="name">Name (A-Z)</option>
|
||||
<option value="created">Recently created</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-4 h-4 text-bolt-elements-textTertiary" />
|
||||
<select
|
||||
value={filterBy}
|
||||
onChange={(e) => setFilterBy(e.target.value as FilterOption)}
|
||||
className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
|
||||
>
|
||||
<option value="all">All repositories</option>
|
||||
<option value="own">Own repositories</option>
|
||||
<option value="forks">Forked repositories</option>
|
||||
<option value="archived">Archived repositories</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Repository Grid */}
|
||||
{currentRepositories.length > 0 ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{currentRepositories.map((repo) => (
|
||||
<GitHubRepositoryCard key={repo.id} repo={repo} onClone={() => handleCloneRepository(repo)} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between pt-4 border-t border-bolt-elements-borderColor">
|
||||
<div className="text-sm text-bolt-elements-textSecondary">
|
||||
Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
|
||||
{Math.min(startIndex + REPOS_PER_PAGE, filteredRepositories.length)} of {filteredRepositories.length}{' '}
|
||||
repositories
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
|
||||
disabled={currentPage === 1}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-sm text-bolt-elements-textSecondary px-3">
|
||||
{currentPage} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-bolt-elements-textSecondary">No repositories found matching your search criteria.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Branch Selector Modal */}
|
||||
{selectedRepo && (
|
||||
<BranchSelector
|
||||
provider="github"
|
||||
repoOwner={selectedRepo.full_name.split('/')[0]}
|
||||
repoName={selectedRepo.full_name.split('/')[1]}
|
||||
token={connection?.token || ''}
|
||||
defaultBranch={selectedRepo.default_branch}
|
||||
onBranchSelect={handleBranchSelect}
|
||||
onClose={handleCloseBranchSelector}
|
||||
isOpen={isBranchSelectorOpen}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
291
app/components/@settings/tabs/github/components/GitHubStats.tsx
Normal file
291
app/components/@settings/tabs/github/components/GitHubStats.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import React from 'react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { useGitHubStats } from '~/lib/hooks';
|
||||
import type { GitHubConnection, GitHubStats as GitHubStatsType } from '~/types/GitHub';
|
||||
import { GitHubErrorBoundary } from './GitHubErrorBoundary';
|
||||
|
||||
interface GitHubStatsProps {
|
||||
connection: GitHubConnection;
|
||||
isExpanded: boolean;
|
||||
onToggleExpanded: (expanded: boolean) => void;
|
||||
}
|
||||
|
||||
export function GitHubStats({ connection, isExpanded, onToggleExpanded }: GitHubStatsProps) {
|
||||
const { stats, isLoading, isRefreshing, refreshStats, isStale } = useGitHubStats(
|
||||
connection,
|
||||
{
|
||||
autoFetch: true,
|
||||
cacheTimeout: 30 * 60 * 1000, // 30 minutes
|
||||
},
|
||||
!connection?.token,
|
||||
); // Use server-side if no token
|
||||
|
||||
return (
|
||||
<GitHubErrorBoundary>
|
||||
<GitHubStatsContent
|
||||
stats={stats}
|
||||
isLoading={isLoading}
|
||||
isRefreshing={isRefreshing}
|
||||
refreshStats={refreshStats}
|
||||
isStale={isStale}
|
||||
isExpanded={isExpanded}
|
||||
onToggleExpanded={onToggleExpanded}
|
||||
/>
|
||||
</GitHubErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
function GitHubStatsContent({
|
||||
stats,
|
||||
isLoading,
|
||||
isRefreshing,
|
||||
refreshStats,
|
||||
isStale,
|
||||
isExpanded,
|
||||
onToggleExpanded,
|
||||
}: {
|
||||
stats: GitHubStatsType | null;
|
||||
isLoading: boolean;
|
||||
isRefreshing: boolean;
|
||||
refreshStats: () => Promise<void>;
|
||||
isStale: boolean;
|
||||
isExpanded: boolean;
|
||||
onToggleExpanded: (expanded: boolean) => void;
|
||||
}) {
|
||||
if (!stats) {
|
||||
return (
|
||||
<div className="mt-6 border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor pt-6">
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="flex items-center gap-2">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-bolt-elements-textSecondary">Loading GitHub stats...</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-bolt-elements-textSecondary">No stats available</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-6 border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor pt-6">
|
||||
<Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent" />
|
||||
<span className="text-sm font-medium text-bolt-elements-textPrimary">
|
||||
GitHub Stats
|
||||
{isStale && <span className="text-bolt-elements-textTertiary ml-1">(Stale)</span>}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
refreshStats();
|
||||
}}
|
||||
disabled={isRefreshing}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
{isRefreshing ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap w-3 h-3 animate-spin" />
|
||||
Refreshing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:arrows-clockwise w-3 h-3" />
|
||||
Refresh
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<div
|
||||
className={classNames(
|
||||
'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
|
||||
isExpanded ? 'rotate-180' : '',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent className="overflow-hidden">
|
||||
<div className="space-y-4 mt-4">
|
||||
{/* Languages Section */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
|
||||
{stats.mostUsedLanguages && stats.mostUsedLanguages.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{stats.mostUsedLanguages.slice(0, 15).map(({ language, bytes, repos }) => (
|
||||
<span
|
||||
key={language}
|
||||
className="px-3 py-1 text-xs rounded-full bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText"
|
||||
title={`${language}: ${(bytes / 1024 / 1024).toFixed(2)}MB across ${repos} repos`}
|
||||
>
|
||||
{language} ({repos})
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary">
|
||||
Based on actual codebase size across repositories
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(stats.languages)
|
||||
.sort(([, a], [, b]) => b - a)
|
||||
.slice(0, 5)
|
||||
.map(([language]) => (
|
||||
<span
|
||||
key={language}
|
||||
className="px-3 py-1 text-xs rounded-full bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText"
|
||||
>
|
||||
{language}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* GitHub Overview Summary */}
|
||||
<div className="mb-6 p-4 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">GitHub Overview</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-bolt-elements-textPrimary">
|
||||
{(stats.publicRepos || 0) + (stats.privateRepos || 0)}
|
||||
</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary">Total Repositories</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-bolt-elements-textPrimary">{stats.totalBranches || 0}</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary">Total Branches</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-bolt-elements-textPrimary">
|
||||
{stats.organizations?.length || 0}
|
||||
</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary">Organizations</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-bolt-elements-textPrimary">
|
||||
{Object.keys(stats.languages).length}
|
||||
</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary">Languages Used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity Summary */}
|
||||
<div className="mb-6">
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Activity Summary</h5>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[
|
||||
{
|
||||
label: 'Total Branches',
|
||||
value: stats.totalBranches || 0,
|
||||
icon: 'i-ph:git-branch',
|
||||
iconColor: 'text-bolt-elements-icon-info',
|
||||
},
|
||||
{
|
||||
label: 'Contributors',
|
||||
value: stats.totalContributors || 0,
|
||||
icon: 'i-ph:users',
|
||||
iconColor: 'text-bolt-elements-icon-success',
|
||||
},
|
||||
{
|
||||
label: 'Issues',
|
||||
value: stats.totalIssues || 0,
|
||||
icon: 'i-ph:circle',
|
||||
iconColor: 'text-bolt-elements-icon-warning',
|
||||
},
|
||||
{
|
||||
label: 'Pull Requests',
|
||||
value: stats.totalPullRequests || 0,
|
||||
icon: 'i-ph:git-pull-request',
|
||||
iconColor: 'text-bolt-elements-icon-accent',
|
||||
},
|
||||
].map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col p-3 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor"
|
||||
>
|
||||
<span className="text-xs text-bolt-elements-textSecondary">{stat.label}</span>
|
||||
<span className="text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-1">
|
||||
<div className={`${stat.icon} w-4 h-4 ${stat.iconColor}`} />
|
||||
{stat.value.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Organizations Section */}
|
||||
{stats.organizations && stats.organizations.length > 0 && (
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Organizations</h5>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{stats.organizations.map((org) => (
|
||||
<a
|
||||
key={org.login}
|
||||
href={org.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive dark:hover:border-bolt-elements-borderColorActive transition-all duration-200"
|
||||
>
|
||||
<img
|
||||
src={org.avatar_url}
|
||||
alt={org.login}
|
||||
className="w-8 h-8 rounded-full border border-bolt-elements-borderColor"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h6 className="text-sm font-medium text-bolt-elements-textPrimary truncate">
|
||||
{org.name || org.login}
|
||||
</h6>
|
||||
<p className="text-xs text-bolt-elements-textSecondary truncate">{org.login}</p>
|
||||
{org.description && (
|
||||
<p className="text-xs text-bolt-elements-textTertiary truncate">{org.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-bolt-elements-textSecondary">
|
||||
{org.public_repos && (
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:folder w-3 h-3" />
|
||||
{org.public_repos}
|
||||
</span>
|
||||
)}
|
||||
{org.followers && (
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:users w-3 h-3" />
|
||||
{org.followers}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Last Updated */}
|
||||
<div className="pt-2 border-t border-bolt-elements-borderColor">
|
||||
<span className="text-xs text-bolt-elements-textSecondary">
|
||||
Last updated: {stats.lastUpdated ? new Date(stats.lastUpdated).toLocaleString() : 'Never'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import type { GitHubUserResponse } from '~/types/GitHub';
|
||||
|
||||
interface GitHubUserProfileProps {
|
||||
user: GitHubUserResponse;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function GitHubUserProfile({ user, className = '' }: GitHubUserProfileProps) {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg ${className}`}
|
||||
>
|
||||
<img
|
||||
src={user.avatar_url}
|
||||
alt={user.login}
|
||||
className="w-12 h-12 rounded-full border-2 border-bolt-elements-item-contentAccent dark:border-bolt-elements-item-contentAccent"
|
||||
/>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
{user.name || user.login}
|
||||
</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">@{user.login}</p>
|
||||
{user.bio && (
|
||||
<p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary mt-1">
|
||||
{user.bio}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 mt-2 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:users w-3 h-3" />
|
||||
{user.followers} followers
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:folder w-3 h-3" />
|
||||
{user.public_repos} public repos
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:file-text w-3 h-3" />
|
||||
{user.public_gists} gists
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import React from 'react';
|
||||
import { Loader2, AlertCircle, CheckCircle, Info, Github } from 'lucide-react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
|
||||
interface LoadingStateProps {
|
||||
message?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LoadingState({ message = 'Loading...', size = 'md', className = '' }: LoadingStateProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-6 h-6',
|
||||
lg: 'w-8 h-8',
|
||||
};
|
||||
|
||||
const textSizeClasses = {
|
||||
sm: 'text-sm',
|
||||
md: 'text-base',
|
||||
lg: 'text-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Loader2 className={classNames('animate-spin mb-2', sizeClasses[size])} />
|
||||
<p className={classNames('text-bolt-elements-textSecondary', textSizeClasses[size])}>{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ErrorStateProps {
|
||||
title?: string;
|
||||
message: string;
|
||||
onRetry?: () => void;
|
||||
retryLabel?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ErrorState({
|
||||
title = 'Error',
|
||||
message,
|
||||
onRetry,
|
||||
retryLabel = 'Try Again',
|
||||
size = 'md',
|
||||
className = '',
|
||||
}: ErrorStateProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-6 h-6',
|
||||
lg: 'w-8 h-8',
|
||||
};
|
||||
|
||||
const textSizeClasses = {
|
||||
sm: 'text-sm',
|
||||
md: 'text-base',
|
||||
lg: 'text-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
|
||||
<AlertCircle className={classNames('text-red-500 mb-2', sizeClasses[size])} />
|
||||
<h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
|
||||
<p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
|
||||
{onRetry && (
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
|
||||
>
|
||||
{retryLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SuccessStateProps {
|
||||
title?: string;
|
||||
message: string;
|
||||
onAction?: () => void;
|
||||
actionLabel?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SuccessState({
|
||||
title = 'Success',
|
||||
message,
|
||||
onAction,
|
||||
actionLabel = 'Continue',
|
||||
size = 'md',
|
||||
className = '',
|
||||
}: SuccessStateProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-6 h-6',
|
||||
lg: 'w-8 h-8',
|
||||
};
|
||||
|
||||
const textSizeClasses = {
|
||||
sm: 'text-sm',
|
||||
md: 'text-base',
|
||||
lg: 'text-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
|
||||
<CheckCircle className={classNames('text-green-500 mb-2', sizeClasses[size])} />
|
||||
<h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
|
||||
<p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
|
||||
{onAction && (
|
||||
<button
|
||||
onClick={onAction}
|
||||
className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
|
||||
>
|
||||
{actionLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface GitHubConnectionRequiredProps {
|
||||
onConnect?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function GitHubConnectionRequired({ onConnect, className = '' }: GitHubConnectionRequiredProps) {
|
||||
return (
|
||||
<div className={classNames('flex flex-col items-center justify-center py-12 text-center', className)}>
|
||||
<Github className="w-12 h-12 text-bolt-elements-textTertiary mb-4" />
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Connection Required</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mb-6 max-w-md">
|
||||
Please connect your GitHub account to access this feature. You'll be able to browse repositories, push code, and
|
||||
manage your GitHub integration.
|
||||
</p>
|
||||
{onConnect && (
|
||||
<button
|
||||
onClick={onConnect}
|
||||
className="px-6 py-3 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
Connect GitHub
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface InformationStateProps {
|
||||
title: string;
|
||||
message: string;
|
||||
icon?: React.ComponentType<{ className?: string }>;
|
||||
onAction?: () => void;
|
||||
actionLabel?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InformationState({
|
||||
title,
|
||||
message,
|
||||
icon = Info,
|
||||
onAction,
|
||||
actionLabel = 'Got it',
|
||||
size = 'md',
|
||||
className = '',
|
||||
}: InformationStateProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-6 h-6',
|
||||
lg: 'w-8 h-8',
|
||||
};
|
||||
|
||||
const textSizeClasses = {
|
||||
sm: 'text-sm',
|
||||
md: 'text-base',
|
||||
lg: 'text-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
|
||||
{React.createElement(icon, { className: classNames('text-blue-500 mb-2', sizeClasses[size]) })}
|
||||
<h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
|
||||
<p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
|
||||
{onAction && (
|
||||
<button
|
||||
onClick={onAction}
|
||||
className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
|
||||
>
|
||||
{actionLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ConnectionTestIndicatorProps {
|
||||
status: 'success' | 'error' | 'testing' | null;
|
||||
message?: string;
|
||||
timestamp?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ConnectionTestIndicator({ status, message, timestamp, className = '' }: ConnectionTestIndicatorProps) {
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getStatusColor = () => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700';
|
||||
case 'error':
|
||||
return 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700';
|
||||
case 'testing':
|
||||
return 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700';
|
||||
default:
|
||||
return 'bg-gray-50 border-gray-200 dark:bg-gray-900/20 dark:border-gray-700';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = () => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />;
|
||||
case 'error':
|
||||
return <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400" />;
|
||||
case 'testing':
|
||||
return <Loader2 className="w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />;
|
||||
default:
|
||||
return <Info className="w-5 h-5 text-gray-600 dark:text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusTextColor = () => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return 'text-green-800 dark:text-green-200';
|
||||
case 'error':
|
||||
return 'text-red-800 dark:text-red-200';
|
||||
case 'testing':
|
||||
return 'text-blue-800 dark:text-blue-200';
|
||||
default:
|
||||
return 'text-gray-800 dark:text-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(`p-4 rounded-lg border ${getStatusColor()}`, className)}>
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon()}
|
||||
<span className={classNames('text-sm font-medium', getStatusTextColor())}>{message || status}</span>
|
||||
</div>
|
||||
{timestamp && <p className="text-xs text-gray-500 mt-1">{new Date(timestamp).toLocaleString()}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,361 @@
|
||||
import React from 'react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { formatSize } from '~/utils/formatSize';
|
||||
import type { GitHubRepoInfo } from '~/types/GitHub';
|
||||
import {
|
||||
Star,
|
||||
GitFork,
|
||||
Clock,
|
||||
Lock,
|
||||
Archive,
|
||||
GitBranch,
|
||||
Users,
|
||||
Database,
|
||||
Tag,
|
||||
Heart,
|
||||
ExternalLink,
|
||||
Circle,
|
||||
GitPullRequest,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface RepositoryCardProps {
|
||||
repository: GitHubRepoInfo;
|
||||
variant?: 'default' | 'compact' | 'detailed';
|
||||
onSelect?: () => void;
|
||||
showHealthScore?: boolean;
|
||||
showExtendedMetrics?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function RepositoryCard({
|
||||
repository,
|
||||
variant = 'default',
|
||||
onSelect,
|
||||
showHealthScore = false,
|
||||
showExtendedMetrics = false,
|
||||
className = '',
|
||||
}: RepositoryCardProps) {
|
||||
const daysSinceUpdate = Math.floor((Date.now() - new Date(repository.updated_at).getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
const formatTimeAgo = () => {
|
||||
if (daysSinceUpdate === 0) {
|
||||
return 'Today';
|
||||
}
|
||||
|
||||
if (daysSinceUpdate === 1) {
|
||||
return '1 day ago';
|
||||
}
|
||||
|
||||
if (daysSinceUpdate < 7) {
|
||||
return `${daysSinceUpdate} days ago`;
|
||||
}
|
||||
|
||||
if (daysSinceUpdate < 30) {
|
||||
return `${Math.floor(daysSinceUpdate / 7)} weeks ago`;
|
||||
}
|
||||
|
||||
return new Date(repository.updated_at).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const calculateHealthScore = () => {
|
||||
const hasStars = repository.stargazers_count > 0;
|
||||
const hasRecentActivity = daysSinceUpdate < 30;
|
||||
const hasContributors = (repository.contributors_count || 0) > 1;
|
||||
const hasDescription = !!repository.description;
|
||||
const hasTopics = (repository.topics || []).length > 0;
|
||||
const hasLicense = !!repository.license;
|
||||
|
||||
const healthScore = [hasStars, hasRecentActivity, hasContributors, hasDescription, hasTopics, hasLicense].filter(
|
||||
Boolean,
|
||||
).length;
|
||||
|
||||
const maxScore = 6;
|
||||
const percentage = Math.round((healthScore / maxScore) * 100);
|
||||
|
||||
const getScoreColor = (score: number) => {
|
||||
if (score >= 5) {
|
||||
return 'text-green-500';
|
||||
}
|
||||
|
||||
if (score >= 3) {
|
||||
return 'text-yellow-500';
|
||||
}
|
||||
|
||||
return 'text-red-500';
|
||||
};
|
||||
|
||||
return {
|
||||
percentage,
|
||||
color: getScoreColor(healthScore),
|
||||
score: healthScore,
|
||||
maxScore,
|
||||
};
|
||||
};
|
||||
|
||||
const getHealthIndicatorColor = () => {
|
||||
const isActive = daysSinceUpdate < 7;
|
||||
const isHealthy = daysSinceUpdate < 30 && !repository.archived && repository.stargazers_count > 0;
|
||||
|
||||
if (repository.archived) {
|
||||
return 'bg-gray-500';
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
return 'bg-green-500';
|
||||
}
|
||||
|
||||
if (isHealthy) {
|
||||
return 'bg-blue-500';
|
||||
}
|
||||
|
||||
return 'bg-yellow-500';
|
||||
};
|
||||
|
||||
const getHealthTitle = () => {
|
||||
if (repository.archived) {
|
||||
return 'Archived';
|
||||
}
|
||||
|
||||
if (daysSinceUpdate < 7) {
|
||||
return 'Very Active';
|
||||
}
|
||||
|
||||
if (daysSinceUpdate < 30 && repository.stargazers_count > 0) {
|
||||
return 'Healthy';
|
||||
}
|
||||
|
||||
return 'Needs Attention';
|
||||
};
|
||||
|
||||
const health = showHealthScore ? calculateHealthScore() : null;
|
||||
|
||||
if (variant === 'compact') {
|
||||
return (
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className={classNames(
|
||||
'w-full text-left p-3 rounded-lg border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive hover:bg-bolt-elements-background-depth-1 transition-all duration-200',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">{repository.name}</h4>
|
||||
{repository.private && <Lock className="w-3 h-3 text-bolt-elements-textTertiary" />}
|
||||
{repository.fork && <GitFork className="w-3 h-3 text-bolt-elements-textTertiary" />}
|
||||
{repository.archived && <Archive className="w-3 h-3 text-bolt-elements-textTertiary" />}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<Star className="w-3 h-3" />
|
||||
{repository.stargazers_count}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<GitFork className="w-3 h-3" />
|
||||
{repository.forks_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{repository.description && (
|
||||
<p className="text-xs text-bolt-elements-textSecondary mb-2 line-clamp-2">{repository.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textTertiary">
|
||||
{repository.language && (
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-current opacity-60" />
|
||||
{repository.language}
|
||||
</span>
|
||||
)}
|
||||
{repository.size && <span>{formatSize(repository.size * 1024)}</span>}
|
||||
</div>
|
||||
|
||||
<span className="flex items-center gap-1 text-xs text-bolt-elements-textTertiary">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatTimeAgo()}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const Component = onSelect ? 'button' : 'div';
|
||||
const interactiveProps = onSelect
|
||||
? {
|
||||
onClick: onSelect,
|
||||
className: classNames(
|
||||
'group cursor-pointer hover:border-bolt-elements-borderColorActive dark:hover:border-bolt-elements-borderColorActive transition-all duration-200',
|
||||
className,
|
||||
),
|
||||
}
|
||||
: { className };
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...interactiveProps}
|
||||
className={classNames(
|
||||
'block p-4 rounded-lg bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor relative',
|
||||
interactiveProps.className,
|
||||
)}
|
||||
>
|
||||
{/* Repository Health Indicator */}
|
||||
{variant === 'detailed' && (
|
||||
<div
|
||||
className={`absolute top-2 right-2 w-2 h-2 rounded-full ${getHealthIndicatorColor()}`}
|
||||
title={`Repository Health: ${getHealthTitle()}`}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="w-4 h-4 text-bolt-elements-icon-tertiary" />
|
||||
<h5
|
||||
className={classNames(
|
||||
'text-sm font-medium text-bolt-elements-textPrimary',
|
||||
onSelect && 'group-hover:text-bolt-elements-item-contentAccent transition-colors',
|
||||
)}
|
||||
>
|
||||
{repository.name}
|
||||
</h5>
|
||||
{repository.fork && (
|
||||
<span title="Forked repository">
|
||||
<GitFork className="w-3 h-3 text-bolt-elements-textTertiary" />
|
||||
</span>
|
||||
)}
|
||||
{repository.archived && (
|
||||
<span title="Archived repository">
|
||||
<Archive className="w-3 h-3 text-bolt-elements-textTertiary" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1" title="Stars">
|
||||
<Star className="w-3.5 h-3.5 text-bolt-elements-icon-warning" />
|
||||
{repository.stargazers_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1" title="Forks">
|
||||
<GitFork className="w-3.5 h-3.5 text-bolt-elements-icon-info" />
|
||||
{repository.forks_count.toLocaleString()}
|
||||
</span>
|
||||
{showExtendedMetrics && repository.issues_count !== undefined && (
|
||||
<span className="flex items-center gap-1" title="Open Issues">
|
||||
<Circle className="w-3.5 h-3.5 text-bolt-elements-icon-error" />
|
||||
{repository.issues_count}
|
||||
</span>
|
||||
)}
|
||||
{showExtendedMetrics && repository.pull_requests_count !== undefined && (
|
||||
<span className="flex items-center gap-1" title="Pull Requests">
|
||||
<GitPullRequest className="w-3.5 h-3.5 text-bolt-elements-icon-success" />
|
||||
{repository.pull_requests_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{repository.description && (
|
||||
<p className="text-xs text-bolt-elements-textSecondary line-clamp-2">{repository.description}</p>
|
||||
)}
|
||||
|
||||
{/* Repository metrics bar */}
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{repository.license && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-bolt-elements-background-depth-2 text-bolt-elements-textTertiary">
|
||||
{repository.license.spdx_id || repository.license.name}
|
||||
</span>
|
||||
)}
|
||||
{repository.topics &&
|
||||
repository.topics.slice(0, 2).map((topic) => (
|
||||
<span
|
||||
key={topic}
|
||||
className="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
|
||||
>
|
||||
{topic}
|
||||
</span>
|
||||
))}
|
||||
{repository.archived && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400">
|
||||
Archived
|
||||
</span>
|
||||
)}
|
||||
{repository.fork && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400">
|
||||
Fork
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1" title="Default Branch">
|
||||
<GitBranch className="w-3.5 h-3.5" />
|
||||
{repository.default_branch}
|
||||
</span>
|
||||
{showExtendedMetrics && repository.branches_count && (
|
||||
<span className="flex items-center gap-1" title="Total Branches">
|
||||
<GitFork className="w-3.5 h-3.5" />
|
||||
{repository.branches_count}
|
||||
</span>
|
||||
)}
|
||||
{showExtendedMetrics && repository.contributors_count && (
|
||||
<span className="flex items-center gap-1" title="Contributors">
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
{repository.contributors_count}
|
||||
</span>
|
||||
)}
|
||||
{repository.size && (
|
||||
<span className="flex items-center gap-1" title="Size">
|
||||
<Database className="w-3.5 h-3.5" />
|
||||
{(repository.size / 1024).toFixed(1)}MB
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1" title="Last Updated">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
{formatTimeAgo()}
|
||||
</span>
|
||||
{repository.topics && repository.topics.length > 0 && (
|
||||
<span className="flex items-center gap-1" title={`Topics: ${repository.topics.join(', ')}`}>
|
||||
<Tag className="w-3.5 h-3.5" />
|
||||
{repository.topics.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Repository Health Score */}
|
||||
{health && (
|
||||
<div
|
||||
className="flex items-center gap-1"
|
||||
title={`Health Score: ${health.percentage}% (${health.score}/${health.maxScore})`}
|
||||
>
|
||||
<Heart className={`w-3.5 h-3.5 ${health.color}`} />
|
||||
<span className={`text-xs font-medium ${health.color}`}>{health.percentage}%</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{onSelect && (
|
||||
<span
|
||||
className={classNames(
|
||||
'flex items-center gap-1 ml-2 transition-colors',
|
||||
'group-hover:text-bolt-elements-item-contentAccent',
|
||||
)}
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
View
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export { RepositoryCard } from './RepositoryCard';
|
||||
|
||||
// GitHubDialog components not yet implemented
|
||||
export {
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
SuccessState,
|
||||
GitHubConnectionRequired,
|
||||
InformationState,
|
||||
ConnectionTestIndicator,
|
||||
} from './GitHubStateIndicators';
|
||||
Reference in New Issue
Block a user