|
| 1 | +/** |
| 2 | + * CLIProxy Header Component |
| 3 | + * Fixed header with OAuth login buttons, status indicator, and refresh |
| 4 | + */ |
| 5 | + |
| 6 | +import { useState, useEffect } from 'react'; |
| 7 | +import { Button } from '@/components/ui/button'; |
| 8 | +import { Badge } from '@/components/ui/badge'; |
| 9 | +import { RefreshCw, Loader2 } from 'lucide-react'; |
| 10 | +import { useCliproxyAuth } from '@/hooks/use-cliproxy'; |
| 11 | +import { useCliproxyAuthFlow } from '@/hooks/use-cliproxy-auth-flow'; |
| 12 | +import { cn } from '@/lib/utils'; |
| 13 | + |
| 14 | +interface LoginButtonProps { |
| 15 | + provider: string; |
| 16 | + displayName: string; |
| 17 | + isAuthenticated: boolean; |
| 18 | + accountCount: number; |
| 19 | + isAuthenticating: boolean; |
| 20 | + onLogin: () => void; |
| 21 | +} |
| 22 | + |
| 23 | +function LoginButton({ |
| 24 | + displayName, |
| 25 | + isAuthenticated, |
| 26 | + accountCount, |
| 27 | + isAuthenticating, |
| 28 | + onLogin, |
| 29 | +}: LoginButtonProps) { |
| 30 | + if (isAuthenticating) { |
| 31 | + return ( |
| 32 | + <Button variant="outline" size="sm" disabled className="gap-2"> |
| 33 | + <Loader2 className="w-3 h-3 animate-spin" /> |
| 34 | + {displayName} |
| 35 | + </Button> |
| 36 | + ); |
| 37 | + } |
| 38 | + |
| 39 | + if (isAuthenticated) { |
| 40 | + return ( |
| 41 | + <Button |
| 42 | + variant="outline" |
| 43 | + size="sm" |
| 44 | + className="gap-2 border-green-500/30 text-green-600 dark:text-green-400" |
| 45 | + > |
| 46 | + <span className="w-2 h-2 rounded-full bg-green-500" /> |
| 47 | + {displayName} |
| 48 | + {accountCount > 1 && ( |
| 49 | + <Badge variant="secondary" className="ml-1 h-5 px-1.5 text-[10px]"> |
| 50 | + {accountCount} |
| 51 | + </Badge> |
| 52 | + )} |
| 53 | + </Button> |
| 54 | + ); |
| 55 | + } |
| 56 | + |
| 57 | + return ( |
| 58 | + <Button variant="default" size="sm" className="gap-2" onClick={onLogin}> |
| 59 | + + {displayName} |
| 60 | + </Button> |
| 61 | + ); |
| 62 | +} |
| 63 | + |
| 64 | +// Helper to format relative time |
| 65 | +function formatRelativeTime(date: Date): string { |
| 66 | + const diff = Date.now() - date.getTime(); |
| 67 | + const minutes = Math.floor(diff / 60000); |
| 68 | + if (minutes < 1) return 'just now'; |
| 69 | + if (minutes === 1) return '1m ago'; |
| 70 | + return `${minutes}m ago`; |
| 71 | +} |
| 72 | + |
| 73 | +// Hook for relative time display that updates periodically |
| 74 | +function useRelativeTime(date: Date | undefined): string | null { |
| 75 | + const [text, setText] = useState<string | null>(() => (date ? formatRelativeTime(date) : null)); |
| 76 | + |
| 77 | + useEffect(() => { |
| 78 | + if (!date) return; |
| 79 | + |
| 80 | + // Update every 30 seconds via interval only |
| 81 | + const interval = setInterval(() => { |
| 82 | + setText(formatRelativeTime(date)); |
| 83 | + }, 30000); |
| 84 | + |
| 85 | + return () => clearInterval(interval); |
| 86 | + }, [date]); |
| 87 | + |
| 88 | + // Compute current value on each render if date changes |
| 89 | + // This is the pure computation part |
| 90 | + const currentText = date ? formatRelativeTime(date) : null; |
| 91 | + |
| 92 | + // Return the more recent of computed or state-based value |
| 93 | + // State value will be updated by interval |
| 94 | + return date ? currentText : text; |
| 95 | +} |
| 96 | + |
| 97 | +interface CliproxyHeaderProps { |
| 98 | + onRefresh: () => void; |
| 99 | + isRefreshing: boolean; |
| 100 | + lastUpdated?: Date; |
| 101 | + isRunning?: boolean; |
| 102 | +} |
| 103 | + |
| 104 | +export function CliproxyHeader({ |
| 105 | + onRefresh, |
| 106 | + isRefreshing, |
| 107 | + lastUpdated, |
| 108 | + isRunning = true, |
| 109 | +}: CliproxyHeaderProps) { |
| 110 | + const { data: authData } = useCliproxyAuth(); |
| 111 | + const { provider: authProvider, isAuthenticating, startAuth } = useCliproxyAuthFlow(); |
| 112 | + const lastUpdatedText = useRelativeTime(lastUpdated); |
| 113 | + |
| 114 | + const providers = [ |
| 115 | + { id: 'claude', displayName: 'Claude' }, |
| 116 | + { id: 'gemini', displayName: 'Gemini' }, |
| 117 | + { id: 'codex', displayName: 'Codex' }, |
| 118 | + { id: 'agy', displayName: 'Agy' }, |
| 119 | + ]; |
| 120 | + |
| 121 | + const getProviderStatus = (providerId: string) => { |
| 122 | + const status = authData?.authStatus.find((s) => s.provider === providerId); |
| 123 | + return { |
| 124 | + isAuthenticated: status?.authenticated ?? false, |
| 125 | + accountCount: status?.accounts?.length ?? 0, |
| 126 | + }; |
| 127 | + }; |
| 128 | + |
| 129 | + return ( |
| 130 | + <div className="flex flex-col gap-4 pb-4 border-b"> |
| 131 | + {/* Top row: Title and Login Buttons */} |
| 132 | + <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> |
| 133 | + <div> |
| 134 | + <h1 className="text-2xl font-bold tracking-tight">CLIProxy</h1> |
| 135 | + <p className="text-sm text-muted-foreground mt-1"> |
| 136 | + Manage OAuth providers and configuration |
| 137 | + </p> |
| 138 | + </div> |
| 139 | + |
| 140 | + {/* Login Buttons - Wrap on mobile */} |
| 141 | + <div className="flex flex-wrap items-center gap-2"> |
| 142 | + {providers.map((p) => { |
| 143 | + const status = getProviderStatus(p.id); |
| 144 | + return ( |
| 145 | + <LoginButton |
| 146 | + key={p.id} |
| 147 | + provider={p.id} |
| 148 | + displayName={p.displayName} |
| 149 | + isAuthenticated={status.isAuthenticated} |
| 150 | + accountCount={status.accountCount} |
| 151 | + isAuthenticating={authProvider === p.id && isAuthenticating} |
| 152 | + onLogin={() => startAuth(p.id)} |
| 153 | + /> |
| 154 | + ); |
| 155 | + })} |
| 156 | + </div> |
| 157 | + </div> |
| 158 | + |
| 159 | + {/* Bottom row: Status and Refresh */} |
| 160 | + <div className="flex items-center gap-3"> |
| 161 | + <Badge variant={isRunning ? 'default' : 'secondary'} className="gap-1.5"> |
| 162 | + <span |
| 163 | + className={cn( |
| 164 | + 'w-2 h-2 rounded-full', |
| 165 | + isRunning ? 'bg-green-500 animate-pulse' : 'bg-muted-foreground' |
| 166 | + )} |
| 167 | + /> |
| 168 | + {isRunning ? 'Running' : 'Offline'} |
| 169 | + </Badge> |
| 170 | + |
| 171 | + {lastUpdatedText && ( |
| 172 | + <span className="text-xs text-muted-foreground">{lastUpdatedText}</span> |
| 173 | + )} |
| 174 | + |
| 175 | + <Button |
| 176 | + variant="ghost" |
| 177 | + size="icon" |
| 178 | + className="h-8 w-8" |
| 179 | + onClick={onRefresh} |
| 180 | + disabled={isRefreshing} |
| 181 | + > |
| 182 | + <RefreshCw className={cn('w-4 h-4', isRefreshing && 'animate-spin')} /> |
| 183 | + </Button> |
| 184 | + </div> |
| 185 | + </div> |
| 186 | + ); |
| 187 | +} |
0 commit comments