Skip to content

Commit 8f484d6

Browse files
milispmilisp
committed
refactor: improve code formatting and enhance component functionality
- Reformatted code in various components for better readability and consistency, including AuthPromptDialog, Dashboard, and LocalTable. - Updated Dashboard component to conditionally display personal and team stats based on user authentication status. - Enhanced TeamSelector and TeamCloudTable components with improved async handling and error logging. - Refactored routes.tsx to maintain consistent import formatting and improve overall structure. - Added missing newlines in several files to adhere to coding standards.
1 parent 136bffd commit 8f484d6

22 files changed

+343
-248
lines changed

‎src/components/AuthPromptDialog.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ interface AuthPromptDialogProps {
1616
onClose: () => void;
1717
}
1818

19-
export const AuthPromptDialog = ({ isOpen, onClose }: AuthPromptDialogProps) => {
19+
export const AuthPromptDialog = ({
20+
isOpen,
21+
onClose,
22+
}: AuthPromptDialogProps) => {
2023
const navigate = useNavigate();
2124
const { setMainTab, setPersonalTab } = useTabStore();
2225

@@ -37,14 +40,17 @@ export const AuthPromptDialog = ({ isOpen, onClose }: AuthPromptDialogProps) =>
3740
<AlertDialogHeader>
3841
<AlertDialogTitle>Authentication Required</AlertDialogTitle>
3942
<AlertDialogDescription>
40-
You are not logged in. Please log in to access team features, or switch to your personal server management.
43+
You are not logged in. Please log in to access team features, or
44+
switch to your personal server management.
4145
</AlertDialogDescription>
4246
</AlertDialogHeader>
4347
<AlertDialogFooter>
44-
<AlertDialogCancel onClick={handleGoToPersonal}>Go to Personal</AlertDialogCancel>
48+
<AlertDialogCancel onClick={handleGoToPersonal}>
49+
Go to Personal
50+
</AlertDialogCancel>
4551
<AlertDialogAction onClick={handleLogin}>Log In</AlertDialogAction>
4652
</AlertDialogFooter>
4753
</AlertDialogContent>
4854
</AlertDialog>
4955
);
50-
};
56+
};

‎src/components/manage/Dashboard.tsx‎

Lines changed: 103 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import { Button } from "@/components/ui/button";
12
import { Card, CardContent } from "@/components/ui/card";
2-
import { Server, Cloud, Users, Activity } from "lucide-react";
3+
import { Activity, Cloud, Server, Users } from "lucide-react";
4+
import { useNavigate } from "react-router";
35

46
interface DashboardProps {
7+
isAuthenticated: boolean;
58
personalStats: {
69
total: number;
710
active: number;
@@ -12,68 +15,112 @@ interface DashboardProps {
1215
};
1316
}
1417

15-
export const Dashboard = ({ personalStats, teamStats }: DashboardProps) => {
18+
export const Dashboard = ({
19+
isAuthenticated,
20+
personalStats,
21+
teamStats,
22+
}: DashboardProps) => {
23+
const navigate = useNavigate();
24+
1625
return (
17-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
18-
{/* Personal Total Servers */}
19-
<Card className="border-blue-200 bg-blue-50/50">
20-
<CardContent className="p-4">
21-
<div className="flex items-center justify-between">
22-
<div>
23-
<p className="text-sm font-medium text-blue-600">Personal Total</p>
24-
<p className="text-2xl font-bold text-blue-900">{personalStats.total}</p>
25-
</div>
26-
<div className="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center">
27-
<Server className="h-4 w-4 text-blue-600" />
26+
<>
27+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
28+
{/* Personal Total Servers */}
29+
<Card className="border-blue-200 bg-blue-50/50">
30+
<CardContent className="p-4">
31+
<div className="flex items-center justify-between">
32+
<div>
33+
<p className="text-sm font-medium text-blue-600">
34+
Personal Total
35+
</p>
36+
<p className="text-2xl font-bold text-blue-900">
37+
{isAuthenticated ? personalStats.total : "--"}
38+
</p>
39+
</div>
40+
<div className="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center">
41+
<Server className="h-4 w-4 text-blue-600" />
42+
</div>
2843
</div>
29-
</div>
30-
</CardContent>
31-
</Card>
44+
</CardContent>
45+
</Card>
3246

33-
{/* Personal Active Servers */}
34-
<Card className="border-green-200 bg-green-50/50">
35-
<CardContent className="p-4">
36-
<div className="flex items-center justify-between">
37-
<div>
38-
<p className="text-sm font-medium text-green-600">Personal Active</p>
39-
<p className="text-2xl font-bold text-green-900">{personalStats.active}</p>
40-
</div>
41-
<div className="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
42-
<Activity className="h-4 w-4 text-green-600" />
47+
{/* Personal Active Servers */}
48+
<Card className="border-green-200 bg-green-50/50">
49+
<CardContent className="p-4">
50+
<div className="flex items-center justify-between">
51+
<div>
52+
<p className="text-sm font-medium text-green-600">
53+
Personal Active
54+
</p>
55+
<p className="text-2xl font-bold text-green-900">
56+
{isAuthenticated ? personalStats.active : "--"}
57+
</p>
58+
</div>
59+
<div className="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
60+
<Activity className="h-4 w-4 text-green-600" />
61+
</div>
4362
</div>
44-
</div>
45-
</CardContent>
46-
</Card>
63+
</CardContent>
64+
</Card>
4765

48-
{/* Personal Disabled Servers */}
49-
<Card className="border-orange-200 bg-orange-50/50">
50-
<CardContent className="p-4">
51-
<div className="flex items-center justify-between">
52-
<div>
53-
<p className="text-sm font-medium text-orange-600">Personal Disabled</p>
54-
<p className="text-2xl font-bold text-orange-900">{personalStats.disabled}</p>
66+
{/* Personal Disabled Servers */}
67+
<Card className="border-orange-200 bg-orange-50/50">
68+
<CardContent className="p-4">
69+
<div className="flex items-center justify-between">
70+
<div>
71+
<p className="text-sm font-medium text-orange-600">
72+
Personal Disabled
73+
</p>
74+
<p className="text-2xl font-bold text-orange-900">
75+
{isAuthenticated ? personalStats.disabled : "--"}
76+
</p>
77+
</div>
78+
<div className="h-8 w-8 bg-orange-100 rounded-full flex items-center justify-center">
79+
<Cloud className="h-4 w-4 text-orange-600" />
80+
</div>
5581
</div>
56-
<div className="h-8 w-8 bg-orange-100 rounded-full flex items-center justify-center">
57-
<Cloud className="h-4 w-4 text-orange-600" />
58-
</div>
59-
</div>
60-
</CardContent>
61-
</Card>
82+
</CardContent>
83+
</Card>
6284

63-
{/* Team Servers */}
64-
<Card className="border-purple-200 bg-purple-50/50">
65-
<CardContent className="p-4">
66-
<div className="flex items-center justify-between">
67-
<div>
68-
<p className="text-sm font-medium text-purple-600">Team Total</p>
69-
<p className="text-2xl font-bold text-purple-900">{teamStats.total}</p>
70-
</div>
71-
<div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
72-
<Users className="h-4 w-4 text-purple-600" />
85+
{/* Team Servers */}
86+
<Card className="border-purple-200 bg-purple-50/50">
87+
<CardContent className="p-4">
88+
<div className="flex items-center justify-between">
89+
<div>
90+
<p className="text-sm font-medium text-purple-600">
91+
Team Total
92+
</p>
93+
<p className="text-2xl font-bold text-purple-900">
94+
{isAuthenticated ? teamStats.total : "--"}
95+
</p>
96+
</div>
97+
<div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
98+
<Users className="h-4 w-4 text-purple-600" />
99+
</div>
73100
</div>
74-
</div>
75-
</CardContent>
76-
</Card>
77-
</div>
101+
</CardContent>
102+
</Card>
103+
</div>
104+
105+
{!isAuthenticated && (
106+
<Card className="border-dashed border-2 border-yellow-300 bg-yellow-50/50 col-span-full">
107+
<CardContent className="p-4 text-center">
108+
<p className="text-sm font-medium text-yellow-700">
109+
Pro & Team Features
110+
</p>
111+
<p className="text-lg font-semibold text-yellow-900">
112+
Unlock cloud sync, multi-device access, and advanced templates
113+
</p>
114+
<Button
115+
variant="outline"
116+
className="mt-2"
117+
onClick={() => navigate("/auth")}
118+
>
119+
Login to Explore
120+
</Button>
121+
</CardContent>
122+
</Card>
123+
)}
124+
</>
78125
);
79126
};

‎src/components/manage/LocalTable.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ import { useNavigate } from "react-router-dom";
1717
import { useServerTableColumns } from "./ServerTableColumns";
1818

1919
interface LocalTableProps {
20-
onStatsChange?: (stats: { total: number; active: number; disabled: number }) => void;
20+
onStatsChange?: (stats: {
21+
total: number;
22+
active: number;
23+
disabled: number;
24+
}) => void;
2125
}
2226

2327
export const LocalTable = ({ onStatsChange }: LocalTableProps) => {
@@ -63,9 +67,9 @@ export const LocalTable = ({ onStatsChange }: LocalTableProps) => {
6367
...serverConfig,
6468
}) as ServerTableData,
6569
);
66-
70+
6771
const allServers = [...activeServers, ...disabledServersData];
68-
72+
6973
// Update stats when data changes
7074
if (onStatsChange) {
7175
onStatsChange({
@@ -74,7 +78,7 @@ export const LocalTable = ({ onStatsChange }: LocalTableProps) => {
7478
disabled: disabledServersData.length,
7579
});
7680
}
77-
81+
7882
return allServers;
7983
}, [config?.mcpServers, disabledServers, onStatsChange]);
8084

@@ -184,7 +188,9 @@ export const LocalTable = ({ onStatsChange }: LocalTableProps) => {
184188
/>
185189
</div>
186190
) : (
187-
<Button onClick={() => navigate("/auth")}>Login to Sync Local or cloud</Button>
191+
<Button onClick={() => navigate("/auth")}>
192+
Login to Sync Local or cloud
193+
</Button>
188194
)}
189195
<DataTable
190196
columns={localColumns}

‎src/components/manage/team/TeamCloudTable.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ export const TeamCloudTable = () => {
101101
itemName={`the server "${serverName}"`}
102102
onDelete={async () => {
103103
try {
104-
await api.delete(`/teams/${selectedTeamId}/configs/${serverId}`);
104+
await api.delete(
105+
`/teams/${selectedTeamId}/configs/${serverId}`,
106+
);
105107
setServersData((prevData) =>
106108
prevData.filter((server) => server.id !== serverId),
107109
);

‎src/components/manage/team/TeamLocalTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@ export const TeamLocalTable = ({ onStatsChange }: TeamLocalTableProps) => {
4848
...serverConfig,
4949
}) as ServerTableData,
5050
);
51-
51+
5252
// Update stats when data changes
5353
if (onStatsChange) {
5454
onStatsChange({
5555
total: activeServers.length,
5656
});
5757
}
58-
58+
5959
return [...activeServers];
6060
}, [config?.mcpServers, onStatsChange]);
6161

‎src/components/manage/team/TeamSelector.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,30 @@ export function TeamSelector() {
2424
const [isAuthPromptOpen, setIsAuthPromptOpen] = useState(false);
2525
const { isAuthenticated, sessionCheckComplete } = useAuth();
2626

27-
useEffect(() => {
28-
if (!sessionCheckComplete) return;
27+
useEffect(() => {
28+
if (!sessionCheckComplete) return;
2929

30-
if (!isAuthenticated) {
31-
setIsAuthPromptOpen(true);
32-
return;
33-
}
30+
if (!isAuthenticated) {
31+
setIsAuthPromptOpen(true);
32+
return;
33+
}
3434

35-
async function loadData() {
36-
try {
37-
const teams = await fetchMyTeams();
38-
setTeamOptions(teams);
35+
async function loadData() {
36+
try {
37+
const teams = await fetchMyTeams();
38+
setTeamOptions(teams);
3939

40-
// Set first team as selected if no team is currently selected
41-
if (teams.length > 0 && !selectedTeamId) {
42-
setSelectedTeam(teams[0].id, teams[0].name);
40+
// Set first team as selected if no team is currently selected
41+
if (teams.length > 0 && !selectedTeamId) {
42+
setSelectedTeam(teams[0].id, teams[0].name);
43+
}
44+
} catch (error) {
45+
toast.error("Failed to load teams");
4346
}
44-
} catch (error) {
45-
toast.error("Failed to load teams");
4647
}
47-
}
4848

49-
loadData();
50-
}, [isAuthenticated, sessionCheckComplete, selectedTeamId, setSelectedTeam]);
49+
loadData();
50+
}, [isAuthenticated, sessionCheckComplete, selectedTeamId, setSelectedTeam]);
5151

5252
return (
5353
<div className="z-50">

‎src/components/server/list/ServerCard.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,15 @@ export function ServerCard({
7878
<div className="flex justify-between items-start">
7979
<div className="flex gap-3 items-start">
8080
<div className="bg-gray-100 rounded-full">
81-
{server.logoUrl ? (
82-
<img src={server.logoUrl} alt="icon" className="w-12 h-12 rounded-full" />
83-
) : (
84-
showGithubIcon && <Github size={24} />
85-
)}
81+
{server.logoUrl ? (
82+
<img
83+
src={server.logoUrl}
84+
alt="icon"
85+
className="w-12 h-12 rounded-full"
86+
/>
87+
) : (
88+
showGithubIcon && <Github size={24} />
89+
)}
8690
</div>
8791
<div>
8892
<CardTitle className="text-base">

‎src/components/settings/EncryptionKeyCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export default function EncryptionKeyCard({
130130
<Copy className="w-4 h-4" />
131131
</Button>
132132
</div>
133-
{(!key.trim() && !hasViewedGeneratedKey) && (
133+
{!key.trim() && !hasViewedGeneratedKey && (
134134
<p className="text-destructive text-sm mt-1">
135135
Please generate or enter an encryption key to save.
136136
</p>

‎src/components/settings/PathSelector.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import { useClientPathStore } from "@/stores/clientPathStore";
44
import { open } from "@tauri-apps/plugin-dialog";
55
import { useState } from "react";
66

7-
// Props no longer needed as we're using the store
8-
97
export function PathSelector() {
10-
const { selectedPath, setSelectedPath, selectedClient } = useClientPathStore();
8+
const { selectedPath, setSelectedPath, selectedClient } =
9+
useClientPathStore();
1110
const [isLoading, setIsLoading] = useState(false);
1211

1312
const handleBrowse = async () => {
@@ -34,12 +33,15 @@ export function PathSelector() {
3433
return (
3534
<div className="w-full">
3635
<div className="flex space-x-2">
37-
3836
<Input
3937
value={selectedPath || ""} // Display empty string if null
4038
onChange={(e) => setSelectedPath(e.target.value || null)} // Set to null if empty
4139
className="flex-1"
42-
placeholder={selectedClient === 'custom' ? "Select a directory containing mcp.json" : "Select a project root or empty"}
40+
placeholder={
41+
selectedClient === "custom"
42+
? "Select a directory containing mcp.json"
43+
: "Select a project root or empty"
44+
}
4345
readOnly
4446
/>
4547
<Button onClick={handleBrowse} disabled={isLoading}>

0 commit comments

Comments
 (0)