From 70e6bee3d1832d5e4069ad96ed4e9ee5f4a474b6 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 30 Sep 2025 07:37:36 +0000
Subject: [PATCH] feat: Add team management functionality

This commit introduces the ability to create, edit, delete, and manage teams of authors. It includes UI components for team creation and management, as well as state management for teams.

Co-authored-by: meta.alex.r <meta.alex.r@gmail.com>
---
 src/renderer/components/teams/TeamModal.tsx   | 271 ++++++++++++++++++
 .../components/teams/TeamsManagerModal.tsx    | 237 +++++++++++++++
 src/renderer/stores/teamStore.ts              | 188 ++++++++++++
 src/renderer/views/PRListView.tsx             | 132 ++++++++-
 4 files changed, 827 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/teams/TeamModal.tsx
 create mode 100644 src/renderer/components/teams/TeamsManagerModal.tsx
 create mode 100644 src/renderer/stores/teamStore.ts

diff --git a/src/renderer/components/teams/TeamModal.tsx b/src/renderer/components/teams/TeamModal.tsx
new file mode 100644
index 00000000..ce9bab8f
--- /dev/null
+++ b/src/renderer/components/teams/TeamModal.tsx
@@ -0,0 +1,271 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "../../utils/cn";
+import type { TeamDefinition } from "../../stores/teamStore";
+
+interface AuthorOption {
+  login: string;
+  avatar_url: string;
+}
+
+interface TeamModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (input: {
+    id?: string;
+    name: string;
+    members: string[];
+    color?: string;
+    icon?: string;
+    description?: string;
+  }) => Promise<void> | void;
+  initialTeam?: TeamDefinition | null;
+  availableAuthors: AuthorOption[];
+  theme: "light" | "dark";
+}
+
+export default function TeamModal({
+  isOpen,
+  onClose,
+  onSave,
+  initialTeam,
+  availableAuthors,
+  theme,
+}: TeamModalProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [color, setColor] = useState<string>("");
+  const [icon, setIcon] = useState<string>("");
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<Set<string>>(new Set<string>());
+
+  useEffect(() => {
+    if (isOpen) {
+      setName(initialTeam?.name || "");
+      setDescription(initialTeam?.description || "");
+      setColor(initialTeam?.color || "");
+      setIcon(initialTeam?.icon || "");
+      setSelected(new Set(initialTeam?.members || []));
+      setSearch("");
+    }
+  }, [isOpen, initialTeam]);
+
+  const filteredAuthors = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return availableAuthors;
+    return availableAuthors.filter((a) => a.login.toLowerCase().includes(q));
+  }, [availableAuthors, search]);
+
+  const toggleMember = (login: string) => {
+    setSelected((prev: Set<string>) => {
+      const next = new Set(prev);
+      if (next.has(login)) next.delete(login);
+      else next.add(login);
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    const trimmedName = name.trim();
+    const members: string[] = Array.from(selected.values());
+    if (!trimmedName || members.length === 0) {
+      alert("Please enter a team name and select at least one member.");
+      return;
+    }
+    await onSave({
+      id: initialTeam?.id,
+      name: trimmedName,
+      members,
+      color: color || undefined,
+      icon: icon || undefined,
+      description: description || undefined,
+    });
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center",
+        theme === "dark" ? "bg-black/50" : "bg-black/40",
+      )}
+      role="dialog"
+      aria-modal="true"
+      onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Escape") onClose();
+      }}
+    >
+      <div
+        className={cn(
+          "w-full max-w-lg rounded-md shadow-lg border",
+          theme === "dark"
+            ? "bg-gray-800 border-gray-700 text-gray-100"
+            : "bg-white border-gray-200 text-gray-900",
+        )}
+      >
+        <div className={cn(
+          "flex items-center justify-between px-4 py-3 border-b",
+          theme === "dark" ? "border-gray-700" : "border-gray-200",
+        )}>
+          <h2 className="text-sm font-semibold truncate">
+            {initialTeam ? "Edit Team" : "Create New Team"}
+          </h2>
+          <button
+            onClick={onClose}
+            className={cn(
+              "p-1 rounded",
+              theme === "dark" ? "hover:bg-gray-700" : "hover:bg-gray-100",
+            )}
+            aria-label="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="px-4 py-3 space-y-3">
+          <div>
+            <label className="block text-xs font-medium mb-1">Team name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+              className={cn(
+                "w-full px-2 py-1 text-sm rounded border",
+                theme === "dark"
+                  ? "bg-gray-900 border-gray-700 text-gray-100 placeholder:text-gray-400"
+                  : "bg-white border-gray-300 text-gray-900 placeholder:text-gray-500",
+              )}
+              placeholder="e.g. Frontend Team"
+            />
+          </div>
+
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label className="block text-xs font-medium mb-1">Color</label>
+              <input
+                type="color"
+                value={color || "#999999"}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setColor(e.target.value)}
+                className="w-full h-8 p-0 border-0 bg-transparent"
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-xs font-medium mb-1">Icon</label>
+              <input
+                type="text"
+                value={icon}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setIcon(e.target.value)}
+                className={cn(
+                  "w-full px-2 py-1 text-sm rounded border",
+                  theme === "dark"
+                    ? "bg-gray-900 border-gray-700 text-gray-100 placeholder:text-gray-400"
+                    : "bg-white border-gray-300 text-gray-900 placeholder:text-gray-500",
+                )}
+                placeholder="Optional emoji or short label"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium mb-1">Description</label>
+            <textarea
+              value={description}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
+              rows={2}
+              className={cn(
+                "w-full px-2 py-1 text-sm rounded border resize-y",
+                theme === "dark"
+                  ? "bg-gray-900 border-gray-700 text-gray-100 placeholder:text-gray-400"
+                  : "bg-white border-gray-300 text-gray-900 placeholder:text-gray-500",
+              )}
+              placeholder="Optional description"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium mb-1">Members</label>
+            <input
+              type="text"
+              value={search}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+              className={cn(
+                "w-full px-2 py-1 text-sm rounded border mb-2",
+                theme === "dark"
+                  ? "bg-gray-900 border-gray-700 text-gray-100 placeholder:text-gray-400"
+                  : "bg-white border-gray-300 text-gray-900 placeholder:text-gray-500",
+              )}
+              placeholder="Search authors..."
+            />
+            <div
+              className={cn(
+                "max-h-56 overflow-y-auto rounded border",
+                theme === "dark" ? "border-gray-700" : "border-gray-200",
+              )}
+            >
+              {filteredAuthors.map((author: AuthorOption) => (
+                <label
+                  key={author.login}
+                  className={cn(
+                    "flex items-center space-x-2 p-2 cursor-pointer text-sm",
+                    theme === "dark" ? "hover:bg-gray-800" : "hover:bg-gray-50",
+                  )}
+                >
+                  <input
+                    type="checkbox"
+                    checked={selected.has(author.login)}
+                    onChange={() => toggleMember(author.login)}
+                  />
+                  <img
+                    src={author.avatar_url}
+                    alt={author.login}
+                    className="w-5 h-5 rounded-full"
+                  />
+                  <span className="truncate">{author.login}</span>
+                </label>
+              ))}
+              {filteredAuthors.length === 0 && (
+                <div className={cn(
+                  "p-2 text-xs",
+                  theme === "dark" ? "text-gray-400" : "text-gray-600",
+                )}>
+                  No authors match your search.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className={cn(
+          "flex items-center justify-end gap-2 px-4 py-3 border-t",
+          theme === "dark" ? "border-gray-700" : "border-gray-200",
+        )}>
+          <button
+            onClick={onClose}
+            className={cn(
+              "px-3 py-1.5 text-xs rounded border",
+              theme === "dark"
+                ? "border-gray-600 text-gray-300 hover:bg-gray-800"
+                : "border-gray-300 text-gray-700 hover:bg-gray-100",
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className={cn(
+              "px-3 py-1.5 text-xs rounded border font-medium",
+              theme === "dark"
+                ? "border-blue-500 text-blue-300 hover:bg-blue-900/20"
+                : "border-blue-500 text-blue-600 hover:bg-blue-50",
+            )}
+          >
+            Save Team
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/renderer/components/teams/TeamsManagerModal.tsx b/src/renderer/components/teams/TeamsManagerModal.tsx
new file mode 100644
index 00000000..54a18667
--- /dev/null
+++ b/src/renderer/components/teams/TeamsManagerModal.tsx
@@ -0,0 +1,237 @@
+import React, { useMemo, useState } from "react";
+import { Trash2, Pencil, Download, Upload, X } from "lucide-react";
+import { cn } from "../../utils/cn";
+import { TeamDefinition, useTeamStore } from "../../stores/teamStore";
+import TeamModal from "./TeamModal";
+
+interface AuthorOption {
+  login: string;
+  avatar_url: string;
+}
+
+interface TeamsManagerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  theme: "light" | "dark";
+  availableAuthors: AuthorOption[];
+}
+
+export default function TeamsManagerModal({
+  isOpen,
+  onClose,
+  theme,
+  availableAuthors,
+}: TeamsManagerModalProps) {
+  const { teams, addTeam, updateTeam, deleteTeam, importTeams, exportTeams } = useTeamStore();
+  const [editingTeam, setEditingTeam] = useState<TeamDefinition | null>(null);
+  const [showEditModal, setShowEditModal] = useState(false);
+
+  const sortedTeams = useMemo(() => {
+    return [...teams].sort((a, b) => {
+      const aDate = a.lastUsedAt || a.createdAt;
+      const bDate = b.lastUsedAt || b.createdAt;
+      return new Date(bDate).getTime() - new Date(aDate).getTime();
+    });
+  }, [teams]);
+
+  const handleCreateNew = () => {
+    setEditingTeam(null);
+    setShowEditModal(true);
+  };
+
+  const handleEdit = (team: TeamDefinition) => {
+    setEditingTeam(team);
+    setShowEditModal(true);
+  };
+
+  const handleSave = async (input: {
+    id?: string;
+    name: string;
+    members: string[];
+    color?: string;
+    icon?: string;
+    description?: string;
+  }) => {
+    if (input.id) {
+      await updateTeam(input.id, input);
+    } else {
+      await addTeam(input);
+    }
+  };
+
+  const handleDelete = async (team: TeamDefinition) => {
+    if (confirm(`Delete team "${team.name}"?`)) {
+      await deleteTeam(team.id);
+    }
+  };
+
+  const handleExport = () => {
+    const json = exportTeams();
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "teams.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    try {
+      const text = await file.text();
+      const parsed = JSON.parse(text) as TeamDefinition[];
+      await importTeams(parsed);
+      alert("Teams imported.");
+    } catch (error) {
+      alert("Failed to import teams. Ensure the file is valid JSON.");
+    } finally {
+      event.target.value = "";
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center",
+        theme === "dark" ? "bg-black/50" : "bg-black/40",
+      )}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className={cn(
+          "w-full max-w-2xl rounded-md shadow-lg border",
+          theme === "dark"
+            ? "bg-gray-800 border-gray-700 text-gray-100"
+            : "bg-white border-gray-200 text-gray-900",
+        )}
+      >
+        <div className={cn(
+          "flex items-center justify-between px-4 py-3 border-b",
+          theme === "dark" ? "border-gray-700" : "border-gray-200",
+        )}>
+          <h2 className="text-sm font-semibold">Manage Teams</h2>
+          <div className="flex items-center gap-2">
+            <label className={cn(
+              "px-2 py-1 text-xs rounded border cursor-pointer",
+              theme === "dark" ? "border-gray-600 hover:bg-gray-700" : "border-gray-300 hover:bg-gray-100",
+            )}>
+              <input type="file" accept="application/json" className="hidden" onChange={handleImport} />
+              <span className="inline-flex items-center gap-1"><Upload className="w-3 h-3" /> Import</span>
+            </label>
+            <button
+              onClick={handleExport}
+              className={cn(
+                "px-2 py-1 text-xs rounded border",
+                theme === "dark" ? "border-gray-600 hover:bg-gray-700" : "border-gray-300 hover:bg-gray-100",
+              )}
+            >
+              <span className="inline-flex items-center gap-1"><Download className="w-3 h-3" /> Export</span>
+            </button>
+            <button
+              onClick={onClose}
+              className={cn(
+                "p-1 rounded",
+                theme === "dark" ? "hover:bg-gray-700" : "hover:bg-gray-100",
+              )}
+              aria-label="Close"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="px-4 py-3">
+          <div className="flex items-center justify-between mb-3">
+            <div className="text-xs text-gray-500">
+              {sortedTeams.length} {sortedTeams.length === 1 ? "team" : "teams"}
+            </div>
+            <button
+              onClick={handleCreateNew}
+              className={cn(
+                "px-2 py-1 text-xs rounded border",
+                theme === "dark" ? "border-blue-500 text-blue-300 hover:bg-blue-900/20" : "border-blue-500 text-blue-600 hover:bg-blue-50",
+              )}
+            >
+              + Create Team
+            </button>
+          </div>
+
+          <div className={cn(
+            "border rounded divide-y",
+            theme === "dark" ? "border-gray-700 divide-gray-700" : "border-gray-200 divide-gray-200",
+          )}>
+            {sortedTeams.map((team) => (
+              <div key={team.id} className="flex items-center justify-between p-2">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    {team.color && (
+                      <span className="w-3 h-3 rounded" style={{ backgroundColor: team.color }} />
+                    )}
+                    <span className="text-sm font-medium truncate">{team.icon ? `${team.icon} ` : ""}{team.name}</span>
+                    <span className={cn(
+                      "text-xs",
+                      theme === "dark" ? "text-gray-400" : "text-gray-600",
+                    )}>
+                      ({team.members.length} members)
+                    </span>
+                  </div>
+                  {team.description && (
+                    <div className={cn(
+                      "text-xs truncate",
+                      theme === "dark" ? "text-gray-400" : "text-gray-600",
+                    )}>
+                      {team.description}
+                    </div>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleEdit(team)}
+                    className={cn(
+                      "px-2 py-1 text-xs rounded border inline-flex items-center gap-1",
+                      theme === "dark" ? "border-gray-600 hover:bg-gray-700" : "border-gray-300 hover:bg-gray-100",
+                    )}
+                  >
+                    <Pencil className="w-3 h-3" /> Edit
+                  </button>
+                  <button
+                    onClick={() => handleDelete(team)}
+                    className={cn(
+                      "px-2 py-1 text-xs rounded border inline-flex items-center gap-1",
+                      theme === "dark" ? "border-red-500/60 text-red-300 hover:bg-red-900/30" : "border-red-400 text-red-600 hover:bg-red-50",
+                    )}
+                  >
+                    <Trash2 className="w-3 h-3" /> Delete
+                  </button>
+                </div>
+              </div>
+            ))}
+            {sortedTeams.length === 0 && (
+              <div className={cn(
+                "p-3 text-xs",
+                theme === "dark" ? "text-gray-400" : "text-gray-600",
+              )}>
+                No teams yet. Create your first team.
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <TeamModal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+        onSave={handleSave}
+        initialTeam={editingTeam}
+        availableAuthors={availableAuthors}
+        theme={theme}
+      />
+    </div>
+  );
+}
+
diff --git a/src/renderer/stores/teamStore.ts b/src/renderer/stores/teamStore.ts
new file mode 100644
index 00000000..74fddd29
--- /dev/null
+++ b/src/renderer/stores/teamStore.ts
@@ -0,0 +1,188 @@
+import { create } from "zustand";
+
+export interface TeamDefinition {
+  id: string;
+  name: string;
+  members: string[];
+  color?: string;
+  icon?: string;
+  description?: string;
+  createdAt: string;
+  lastUsedAt?: string;
+}
+
+interface TeamInput {
+  name: string;
+  members: string[];
+  color?: string;
+  icon?: string;
+  description?: string;
+}
+
+interface TeamState {
+  teams: TeamDefinition[];
+  loading: boolean;
+  error: string | null;
+
+  loadTeams: () => Promise<void>;
+  addTeam: (input: TeamInput) => Promise<TeamDefinition>;
+  updateTeam: (id: string, changes: Partial<TeamInput>) => Promise<void>;
+  deleteTeam: (id: string) => Promise<void>;
+  markTeamUsed: (id: string) => Promise<void>;
+  importTeams: (teams: TeamDefinition[]) => Promise<void>;
+  exportTeams: () => string;
+}
+
+const generateId = (): string => {
+  const globalCrypto: any = (globalThis as any).crypto;
+  if (globalCrypto?.randomUUID) {
+    return globalCrypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+};
+
+const persistTeams = async (teams: TeamDefinition[]) => {
+  if (typeof window !== "undefined" && (window as any).electron?.settings) {
+    try {
+      await window.electron.settings.set("teams", teams);
+    } catch (error) {
+      console.error("Failed to persist teams:", error);
+    }
+  }
+};
+
+export const useTeamStore = create<TeamState>((set: any, get: any) => {
+  // Initialize by loading teams from settings
+  (async () => {
+    if (typeof window !== "undefined" && (window as any).electron?.settings) {
+      try {
+        const result = await window.electron.settings.get("teams");
+        if (result.success && Array.isArray(result.value)) {
+          set({ teams: result.value as TeamDefinition[] });
+        }
+      } catch (error) {
+        console.error("Failed to load teams on init:", error);
+      }
+    }
+  })();
+
+  return {
+    teams: [],
+    loading: false,
+    error: null,
+
+    loadTeams: async () => {
+      if (typeof window === "undefined" || !(window as any).electron?.settings) {
+        return;
+      }
+      set({ loading: true, error: null });
+      try {
+        const result = await window.electron.settings.get("teams");
+        if (result.success && Array.isArray(result.value)) {
+          set({ teams: result.value as TeamDefinition[], loading: false });
+        } else {
+          set({ teams: [], loading: false });
+        }
+      } catch (error) {
+        set({ loading: false, error: (error as Error).message });
+      }
+    },
+
+    addTeam: async (input: TeamInput) => {
+      const now = new Date().toISOString();
+      const team: TeamDefinition = {
+        id: generateId(),
+        name: input.name.trim(),
+        members: Array.from(new Set(input.members.map((m) => m.trim()).filter(Boolean))),
+        color: input.color,
+        icon: input.icon,
+        description: input.description,
+        createdAt: now,
+        lastUsedAt: now,
+      };
+      set((state: TeamState) => ({ teams: [...state.teams, team] }));
+      await persistTeams(get().teams);
+      return team;
+    },
+
+    updateTeam: async (id: string, changes: Partial<TeamInput>) => {
+      set((state: TeamState) => ({
+        teams: state.teams.map((t: TeamDefinition) =>
+          t.id === id
+            ? {
+                ...t,
+                name: changes.name !== undefined ? changes.name : t.name,
+                members:
+                  changes.members !== undefined
+                    ? Array.from(new Set(changes.members.map((m: string) => m.trim()).filter(Boolean)))
+                    : t.members,
+                color: changes.color !== undefined ? changes.color : t.color,
+                icon: changes.icon !== undefined ? changes.icon : t.icon,
+                description:
+                  changes.description !== undefined ? changes.description : t.description,
+              }
+            : t,
+        ),
+      }));
+      await persistTeams(get().teams);
+    },
+
+    deleteTeam: async (id: string) => {
+      set((state: TeamState) => ({ teams: state.teams.filter((t: TeamDefinition) => t.id !== id) }));
+      await persistTeams(get().teams);
+    },
+
+    markTeamUsed: async (id: string) => {
+      const now = new Date().toISOString();
+      set((state: TeamState) => ({
+        teams: state.teams.map((t: TeamDefinition) => (t.id === id ? { ...t, lastUsedAt: now } : t)),
+      }));
+      await persistTeams(get().teams);
+    },
+
+    importTeams: async (teams: TeamDefinition[]) => {
+      // Merge by id if present, else by name
+      set((state: TeamState) => {
+        const existingById = new Map(state.teams.map((t: TeamDefinition) => [t.id, t] as const));
+        const existingByName = new Map(
+          state.teams.map((t: TeamDefinition) => [t.name.toLowerCase(), t] as const),
+        );
+        const merged: TeamDefinition[] = [...state.teams];
+        for (const incoming of teams) {
+          const normalizedIncoming: TeamDefinition = {
+            ...incoming,
+            id: incoming.id || generateId(),
+            name: incoming.name?.trim() || "Untitled Team",
+            members: Array.from(
+              new Set((incoming.members || []).map((m: string) => m.trim()).filter(Boolean)),
+            ),
+            createdAt: incoming.createdAt || new Date().toISOString(),
+          };
+          const byId = incoming.id ? (existingById.get(incoming.id) as TeamDefinition | undefined) : undefined;
+          const byName = existingByName.get(normalizedIncoming.name.toLowerCase()) as TeamDefinition | undefined;
+          if (byId) {
+            const idx = merged.findIndex((t: TeamDefinition) => t.id === byId.id);
+            if (idx >= 0) merged[idx] = { ...byId, ...normalizedIncoming } as TeamDefinition;
+          } else if (byName) {
+            const idx = merged.findIndex((t: TeamDefinition) => t.id === byName.id);
+            if (idx >= 0) merged[idx] = { ...byName, ...normalizedIncoming } as TeamDefinition;
+          } else {
+            merged.push(normalizedIncoming);
+          }
+        }
+        return { teams: merged };
+      });
+      await persistTeams(get().teams);
+    },
+
+    exportTeams: () => {
+      try {
+        return JSON.stringify(get().teams, null, 2);
+      } catch (error) {
+        console.error("Failed to export teams:", error);
+        return "[]";
+      }
+    },
+  };
+});
+
diff --git a/src/renderer/views/PRListView.tsx b/src/renderer/views/PRListView.tsx
index 965f1166..49ff8b43 100644
--- a/src/renderer/views/PRListView.tsx
+++ b/src/renderer/views/PRListView.tsx
@@ -13,6 +13,9 @@ import WelcomeView from "./WelcomeView";
 import { GitHubAPI, PullRequest } from "../services/github";
 import { PRTreeView } from "../components/PRTreeView";
 import type { SortByType, PRWithMetadata } from "../types/prList";
+import { useTeamStore } from "../stores/teamStore";
+import TeamModal from "../components/teams/TeamModal";
+import TeamsManagerModal from "../components/teams/TeamsManagerModal";
 
 type StatusType = PRStatusType; // Use the centralized type
 
@@ -55,6 +58,9 @@ export default function PRListView() {
   const [showStatusDropdown, setShowStatusDropdown] = useState(false);
   const statusDropdownRef = useRef<HTMLDivElement>(null);
   const [isClosing, setIsClosing] = useState(false);
+  const { teams, addTeam, updateTeam, markTeamUsed } = useTeamStore();
+  const [showTeamCreateModal, setShowTeamCreateModal] = useState(false);
+  const [showTeamsManager, setShowTeamsManager] = useState(false);
 
   const sortBy = prListFilters.sortBy;
   const selectedAuthors = useMemo(
@@ -185,6 +191,46 @@ export default function PRListView() {
     return Array.from(authorMap.values());
   }, [pullRequests]);
 
+  const handleTeamToggle = useCallback(
+    (teamId: string) => {
+      const team = teams.find((t) => t.id === teamId);
+      if (!team) return;
+      const members = team.members;
+      setPRListFilters((prev) => {
+        const newSet = new Set(prev.selectedAuthors);
+        const allSelected = members.every((m) => newSet.has(m));
+        if (allSelected) {
+          members.forEach((m) => newSet.delete(m));
+          newSet.delete("all");
+        } else {
+          members.forEach((m) => newSet.add(m));
+          // If we ended up selecting all available authors, mark as all
+          const allAuthorLogins = authors.map((a) => a.login);
+          if (allAuthorLogins.length > 0 && allAuthorLogins.every((login) => newSet.has(login))) {
+            newSet.add("all");
+          }
+        }
+        return {
+          ...prev,
+          selectedAuthors: Array.from(newSet),
+        };
+      });
+      markTeamUsed(teamId);
+    },
+    [teams, authors, setPRListFilters, markTeamUsed],
+  );
+
+  const handleCreateTeamSave = useCallback(
+    async (input: { id?: string; name: string; members: string[]; color?: string; icon?: string; description?: string; }) => {
+      if (input.id) {
+        await updateTeam(input.id, input);
+      } else {
+        await addTeam(input);
+      }
+    },
+    [addTeam, updateTeam],
+  );
+
   const handleAuthorToggle = useCallback(
     (authorLogin: string) => {
       setPRListFilters(prev => {
@@ -851,6 +897,74 @@ export default function PRListView() {
                         theme === "dark" ? "border-gray-700" : "border-gray-200"
                       )} />
 
+                      {/* Teams section */}
+                      {teams.length > 0 && (
+                        <div className="mb-1">
+                          <div className={cn(
+                            "px-2 py-1 text-[10px] uppercase tracking-wide font-semibold",
+                            theme === "dark" ? "text-gray-400" : "text-gray-500",
+                          )}>
+                            Teams
+                          </div>
+                          {teams.map((team) => {
+                            const allSelected = team.members.every((m) => selectedAuthors.has(m));
+                            const selectedCount = team.members.filter((m) => selectedAuthors.has(m)).length;
+                            const title = `${team.name}: ${team.members.join(", ")}`;
+                            return (
+                              <label
+                                key={team.id}
+                                title={title}
+                                className={cn(
+                                  "flex items-center space-x-2 p-2 rounded cursor-pointer",
+                                  theme === "dark" ? "hover:bg-gray-700" : "hover:bg-gray-50",
+                                )}
+                              >
+                                <input
+                                  type="checkbox"
+                                  checked={allSelected}
+                                  onChange={() => handleTeamToggle(team.id)}
+                                  className="rounded"
+                                />
+                                {team.color && (
+                                  <span className="w-3 h-3 rounded" style={{ backgroundColor: team.color }} />
+                                )}
+                                <span className="text-sm truncate">
+                                  {team.icon ? `${team.icon} ` : ""}{team.name}
+                                  <span className={cn(
+                                    "ml-1 text-[11px]",
+                                    theme === "dark" ? "text-gray-400" : "text-gray-600",
+                                  )}>
+                                    ({team.members.length}{selectedCount > 0 && !allSelected ? ` · ${selectedCount} selected` : ""})
+                                  </span>
+                                </span>
+                              </label>
+                            );
+                          })}
+                        </div>
+                      )}
+
+                      {/* Teams actions */}
+                      <div className="flex items-center gap-2 px-2 py-1">
+                        <button
+                          onClick={() => setShowTeamCreateModal(true)}
+                          className={cn(
+                            "px-2 py-1 text-[11px] rounded border",
+                            theme === "dark" ? "border-gray-600 hover:bg-gray-700" : "border-gray-300 hover:bg-gray-100",
+                          )}
+                        >
+                          + Create New Team
+                        </button>
+                        <button
+                          onClick={() => setShowTeamsManager(true)}
+                          className={cn(
+                            "px-2 py-1 text-[11px] rounded border",
+                            theme === "dark" ? "border-gray-600 hover:bg-gray-700" : "border-gray-300 hover:bg-gray-100",
+                          )}
+                        >
+                          Manage Teams…
+                        </button>
+                      </div>
+
                       {/* Individual authors */}
                       {authors.map(author => (
                         <label
@@ -884,7 +998,7 @@ export default function PRListView() {
           )}
         </div>
       </div>
-
+      
       {/* PR List */}
       <div className="flex-1 overflow-y-auto">
         {showLoadingPlaceholder ? (
@@ -928,6 +1042,22 @@ export default function PRListView() {
           />
         )}
       </div>
+
+      {/* Modals */}
+      <TeamModal
+        isOpen={showTeamCreateModal}
+        onClose={() => setShowTeamCreateModal(false)}
+        onSave={handleCreateTeamSave}
+        initialTeam={null}
+        availableAuthors={authors}
+        theme={theme}
+      />
+      <TeamsManagerModal
+        isOpen={showTeamsManager}
+        onClose={() => setShowTeamsManager(false)}
+        theme={theme}
+        availableAuthors={authors}
+      />
     </div>
   );
 }