mirror of
https://github.com/tiennm99/ccs.git
synced 2026-09-02 12:19:35 +00:00
fix(ui): update sync card for local sync design
- rename Remote Sync to Profile Sync - change status from Connected/Disconnected to Ready/No Config - update icons and messaging for local config sync
This commit is contained in:
@@ -1,13 +1,13 @@
|
|||||||
/**
|
/**
|
||||||
* Sync Status Card Component
|
* Sync Status Card Component
|
||||||
* Shows remote CLIProxy connection status and sync controls
|
* Shows local CLIProxy config sync status and controls
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Loader2, RefreshCw, Upload, Wifi, WifiOff, AlertCircle } from 'lucide-react';
|
import { Loader2, RefreshCw, FileDown, Check, AlertCircle } from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { SyncDialog } from './sync-dialog';
|
import { SyncDialog } from './sync-dialog';
|
||||||
import { useSyncStatus, useExecuteSync } from '@/hooks/use-cliproxy-sync';
|
import { useSyncStatus, useExecuteSync } from '@/hooks/use-cliproxy-sync';
|
||||||
@@ -30,8 +30,8 @@ export function SyncStatusCard() {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="pb-3">
|
<CardHeader className="pb-3">
|
||||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||||
<Upload className="w-4 h-4" />
|
<FileDown className="w-4 h-4" />
|
||||||
Remote Sync
|
Profile Sync
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex items-center justify-center py-6">
|
<CardContent className="flex items-center justify-center py-6">
|
||||||
@@ -41,7 +41,6 @@ export function SyncStatusCard() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const isConnected = status?.connected ?? false;
|
|
||||||
const isConfigured = status?.configured ?? false;
|
const isConfigured = status?.configured ?? false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -50,50 +49,38 @@ export function SyncStatusCard() {
|
|||||||
<CardHeader className="pb-3">
|
<CardHeader className="pb-3">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||||
<Upload className="w-4 h-4" />
|
<FileDown className="w-4 h-4" />
|
||||||
Remote Sync
|
Profile Sync
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<Badge
|
<Badge
|
||||||
variant={isConnected ? 'default' : 'secondary'}
|
variant={isConfigured ? 'default' : 'secondary'}
|
||||||
className={cn(
|
className={cn(
|
||||||
'gap-1.5',
|
'gap-1.5',
|
||||||
isConnected
|
isConfigured
|
||||||
? 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30'
|
? 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30'
|
||||||
: !isConfigured
|
: 'bg-muted text-muted-foreground'
|
||||||
? 'bg-muted text-muted-foreground'
|
|
||||||
: 'bg-red-500/20 text-red-600 dark:text-red-400 border-red-500/30'
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{isConnected ? (
|
{isConfigured ? <Check className="w-3 h-3" /> : <AlertCircle className="w-3 h-3" />}
|
||||||
<Wifi className="w-3 h-3" />
|
{isConfigured ? 'Ready' : 'No Config'}
|
||||||
) : !isConfigured ? (
|
|
||||||
<WifiOff className="w-3 h-3" />
|
|
||||||
) : (
|
|
||||||
<AlertCircle className="w-3 h-3" />
|
|
||||||
)}
|
|
||||||
{isConnected ? 'Connected' : !isConfigured ? 'Not Configured' : 'Disconnected'}
|
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
{isConnected && status?.remoteUrl && (
|
{isConfigured && (
|
||||||
<div className="text-xs text-muted-foreground">
|
<div className="text-xs text-muted-foreground">
|
||||||
<span className="font-medium">Remote:</span> {status.remoteUrl}
|
Syncs API profiles to local CLIProxy config
|
||||||
{status.latencyMs !== undefined && (
|
|
||||||
<span className="ml-2">({status.latencyMs}ms)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isConfigured && (
|
{!isConfigured && (
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
Configure remote proxy in Settings to enable profile sync.
|
Run <code className="bg-muted px-1 rounded">ccs doctor --fix</code> to generate
|
||||||
|
config.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isConfigured && !isConnected && status?.error && (
|
{status?.error && <p className="text-xs text-red-500">{status.error}</p>}
|
||||||
<p className="text-xs text-red-500">{status.error}</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
@@ -101,16 +88,15 @@ export function SyncStatusCard() {
|
|||||||
size="sm"
|
size="sm"
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
onClick={() => setDialogOpen(true)}
|
onClick={() => setDialogOpen(true)}
|
||||||
disabled={!isConfigured}
|
|
||||||
>
|
>
|
||||||
Configure
|
Aliases
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="default"
|
variant="default"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="flex-1 gap-2"
|
className="flex-1 gap-2"
|
||||||
onClick={handleQuickSync}
|
onClick={handleQuickSync}
|
||||||
disabled={!isConnected || isSyncing}
|
disabled={!isConfigured || isSyncing}
|
||||||
>
|
>
|
||||||
{isSyncing ? (
|
{isSyncing ? (
|
||||||
<Loader2 className="w-3 h-3 animate-spin" />
|
<Loader2 className="w-3 h-3 animate-spin" />
|
||||||
|
|||||||
Reference in New Issue
Block a user