feat: add TeamMemberPage and enhance team management features

- Introduced TeamMemberPage for managing team members with protected routing.
- Updated TeamColumns to include a button for navigating to the members page with a tooltip.
- Enhanced TeamPage to facilitate navigation to the members section.
- Added new types for team members to improve type safety and clarity in the codebase.
- Updated toast removal delay for better user experience.
- Remove git2 from Cargo.toml

Author: milisp

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mcp-linker"
-version = "1.3.0"
+version = "1.3.1"
 description = "Easily connect and manage MCP servers for Claude and other clients"
 authors = ["milisp"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -0,0 +1,82 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AddTeamMemberData, TeamMemberRole } from "@/types/team";
+import { Mail, Plus } from "lucide-react";
+import { useState } from "react";
+
+interface AddTeamMemberFormProps {
+  onAddMember: (newMember: AddTeamMemberData) => void;
+  isAddingMember: boolean;
+}
+
+export function AddTeamMemberForm({
+  onAddMember,
+  isAddingMember,
+}: AddTeamMemberFormProps) {
+  const [newMemberData, setNewMemberData] = useState<AddTeamMemberData>({
+    email: "",
+    role: "member",
+  });
+
+  const handleAddClick = () => {
+    onAddMember(newMemberData);
+  };
+
+  return (
+    <div className="border rounded-lg p-4 space-y-4">
+      <h3 className="font-medium flex items-center gap-2">
+        <Plus className="h-4 w-4" />
+        Add New Member
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="md:col-span-2">
+          <Label htmlFor="email">Email Address</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter member's email"
+            value={newMemberData.email}
+            onChange={(e) =>
+              setNewMemberData((prev) => ({ ...prev, email: e.target.value }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="role">Role</Label>
+          <Select
+            value={newMemberData.role}
+            onValueChange={(value: TeamMemberRole) =>
+              setNewMemberData((prev) => ({ ...prev, role: value }))
+            }
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="member">Member</SelectItem>
+              <SelectItem value="admin">Admin</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <Button
+        onClick={handleAddClick}
+        disabled={isAddingMember || !newMemberData.email.trim()}
+        className="w-full md:w-auto"
+      >
+        <Mail className="mr-2 h-4 w-4" />
+        {isAddingMember ? "Adding..." : "Add Member"}
+      </Button>
+    </div>
+  );
+}

src/components/team/AddTeamMemberForm.tsx

@@ -10,18 +10,26 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { TeamResponse } from "@/types/team";
 import { ColumnDef } from "@tanstack/react-table";
-import { Pencil, Trash2 } from "lucide-react";
-import { TeamResponse } from "../../types/team";
+import { Pencil, Trash2, User2 } from "lucide-react";
 
 interface TeamColumnsProps {
   onEdit: (team: TeamResponse) => void;
   onDelete: (teamId: string) => void;
+  navigateToMembers: (teamId: string) => void;
 }
 
 export function useTeamColumns({
   onEdit,
   onDelete,
+  navigateToMembers,
 }: TeamColumnsProps): ColumnDef<TeamResponse>[] {
   return [
     {
@@ -62,33 +70,37 @@ export function useTeamColumns({
       header: "Actions",
       cell: ({ row }) => {
         const team = row.original;
-    
+
         return (
           <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onEdit(team)}
-            >
+            {/* Manage Members Button */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => navigateToMembers(team.id)}
+                  >
+                    <User2 className="mr-1 h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Manage Members</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <Button variant="outline" size="sm" onClick={() => onEdit(team)}>
               <Pencil className="mr-1 h-4 w-4" />
-              Edit
             </Button>
-    
+
             <AlertDialog>
               <AlertDialogTrigger asChild>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                >
+                <Button variant="destructive" size="sm">
                   <Trash2 className="mr-1 h-4 w-4" />
-                  Delete
                 </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    Are you absolutely sure?
-                  </AlertDialogTitle>
+                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                   <AlertDialogDescription>
                     This action cannot be undone. This will permanently delete
                     the team "{team.name}" and all associated data.

src/components/team/TeamColumns.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
 
 const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
+const TOAST_REMOVE_DELAY = 5000;
 
 type ToasterToast = ToastProps & {
   id: string;
@@ -188,4 +188,5 @@ function useToast() {
   };
 }
 
-export { useToast, toast };
+export { toast, useToast };
+