refactor(ui): remove deprecated project components
Delete unused project components: - Board: BoardColumn, BoardHeader, BoardListView, BoardModals, KanbanBoard - Channel: RoomSettingsModal, AiSettings - Issue: IssueSidebar, ReactionBar - Skills: CreateSkillDialog, DeleteSkillDialog - ProjectCreateMenuModal
This commit is contained in:
zhenyi
parent
f6f69a063e
commit
2b543f5e37
@ -1,96 +0,0 @@
|
|||||||
import { Plus, X, User } from "lucide-react";
|
|
||||||
import { BOARD_PAGE } from "@/css/app/board-styles";
|
|
||||||
import type { CardResponse } from "@/client/model";
|
|
||||||
|
|
||||||
interface BoardColumnProps {
|
|
||||||
column: {
|
|
||||||
column: { id: string; name: string };
|
|
||||||
cards: CardResponse[];
|
|
||||||
};
|
|
||||||
allColumns: { column: { id: string; name: string } }[];
|
|
||||||
onAddCard: (columnId: string) => void;
|
|
||||||
onDeleteColumn: (columnId: string) => void;
|
|
||||||
onCardClick: (card: CardResponse) => void;
|
|
||||||
onMoveCard: (cardId: string, targetColumnId: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BoardColumn({
|
|
||||||
column,
|
|
||||||
allColumns,
|
|
||||||
onAddCard,
|
|
||||||
onDeleteColumn,
|
|
||||||
onCardClick,
|
|
||||||
onMoveCard,
|
|
||||||
}: BoardColumnProps) {
|
|
||||||
return (
|
|
||||||
<div className={BOARD_PAGE.column}>
|
|
||||||
<div className={BOARD_PAGE.columnHead}>
|
|
||||||
<div className={BOARD_PAGE.columnTitle}>
|
|
||||||
{column.column.name}
|
|
||||||
<span className={BOARD_PAGE.columnBadge}>{column.cards.length}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<button
|
|
||||||
className={BOARD_PAGE.iconBtn}
|
|
||||||
onClick={() => onAddCard(column.column.id)}
|
|
||||||
>
|
|
||||||
<Plus className="w-3.5 h-3.5" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={BOARD_PAGE.iconBtn}
|
|
||||||
onClick={() => onDeleteColumn(column.column.id)}
|
|
||||||
>
|
|
||||||
<X className="w-3.5 h-3.5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={BOARD_PAGE.columnBody}>
|
|
||||||
{column.cards.map((card) => (
|
|
||||||
<div
|
|
||||||
key={card.id}
|
|
||||||
className={BOARD_PAGE.card}
|
|
||||||
onClick={() => onCardClick(card)}
|
|
||||||
>
|
|
||||||
<h4 className={BOARD_PAGE.cardTitle}>{card.title}</h4>
|
|
||||||
{card.description && (
|
|
||||||
<p className="text-[11px] text-muted-foreground line-clamp-2 mb-2 leading-relaxed">
|
|
||||||
{card.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<div className={BOARD_PAGE.cardFooter}>
|
|
||||||
<div className={BOARD_PAGE.cardMeta}>
|
|
||||||
<User className="w-3 h-3" />
|
|
||||||
<span>Assignee</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
{allColumns.map((targetCol) =>
|
|
||||||
targetCol.column.id !== column.column.id ? (
|
|
||||||
<button
|
|
||||||
key={targetCol.column.id}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
onMoveCard(card.id, targetCol.column.id);
|
|
||||||
}}
|
|
||||||
className="p-1 rounded hover:bg-muted text-[9px] font-bold border border-border"
|
|
||||||
title={`Move to ${targetCol.column.name}`}
|
|
||||||
>
|
|
||||||
{targetCol.column.name[0]}
|
|
||||||
</button>
|
|
||||||
) : null,
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<button
|
|
||||||
className={BOARD_PAGE.addBtn}
|
|
||||||
onClick={() => onAddCard(column.column.id)}
|
|
||||||
>
|
|
||||||
<Plus className="w-3.5 h-3.5" />
|
|
||||||
Add card
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import { useNavigate } from "react-router-dom"
|
|
||||||
import { Plus, Trash2, ArrowLeft } from "lucide-react"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
|
|
||||||
interface BoardHeaderProps {
|
|
||||||
projectName: string
|
|
||||||
boardName: string
|
|
||||||
boardDescription?: string
|
|
||||||
onDeleteBoard: () => void
|
|
||||||
onAddColumn: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BoardHeader({
|
|
||||||
projectName,
|
|
||||||
boardName,
|
|
||||||
boardDescription,
|
|
||||||
onDeleteBoard,
|
|
||||||
onAddColumn,
|
|
||||||
}: BoardHeaderProps) {
|
|
||||||
const navigate = useNavigate()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="rounded-2xl border border-border/70 bg-card/80 p-5 shadow-sm backdrop-blur">
|
|
||||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
||||||
<div className="min-w-0">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="rounded-full text-muted-foreground"
|
|
||||||
onClick={() => navigate(`/${projectName}/board`)}
|
|
||||||
title="Back to boards"
|
|
||||||
>
|
|
||||||
<ArrowLeft />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 flex flex-wrap items-center gap-3">
|
|
||||||
<h1 className="truncate text-2xl font-semibold tracking-tight text-foreground">
|
|
||||||
{boardName}
|
|
||||||
</h1>
|
|
||||||
<span className="rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
|
|
||||||
/{projectName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{boardDescription && (
|
|
||||||
<p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
|
|
||||||
{boardDescription}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
onClick={onAddColumn}
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="rounded-full"
|
|
||||||
>
|
|
||||||
<Plus />
|
|
||||||
Add column
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="rounded-full text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
||||||
onClick={onDeleteBoard}
|
|
||||||
title="Delete board"
|
|
||||||
>
|
|
||||||
<Trash2 />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { useBoardsQuery } from "@/hooks/useBoardsQuery";
|
|
||||||
import { useBoardOperations } from "@/hooks/useBoardOperations";
|
|
||||||
import { LoadingState } from "@/components/ui/LoadingState";
|
|
||||||
import { EmptyState } from "@/components/ui/EmptyState";
|
|
||||||
import {
|
|
||||||
LayoutGrid,
|
|
||||||
Plus,
|
|
||||||
X,
|
|
||||||
Trash2,
|
|
||||||
Clock,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { BOARD_PAGE } from "@/css/app/board-styles";
|
|
||||||
|
|
||||||
interface BoardListViewProps {
|
|
||||||
projectName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BoardListView({ projectName }: BoardListViewProps) {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { data: boards = [], isLoading } = useBoardsQuery(projectName);
|
|
||||||
const ops = useBoardOperations(projectName);
|
|
||||||
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
|
|
||||||
const [newBoard, setNewBoard] = useState({ name: "", description: "" });
|
|
||||||
|
|
||||||
const handleCreateBoard = async () => {
|
|
||||||
if (!newBoard.name.trim()) return;
|
|
||||||
await ops.createBoard.mutateAsync({
|
|
||||||
name: newBoard.name.trim(),
|
|
||||||
description: newBoard.description.trim() || undefined,
|
|
||||||
});
|
|
||||||
setIsCreateBoardOpen(false);
|
|
||||||
setNewBoard({ name: "", description: "" });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteBoard = async (id: string) => {
|
|
||||||
if (confirm("Are you sure you want to delete this board?")) {
|
|
||||||
await ops.deleteBoard.mutateAsync(id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <LoadingState message="Loading boards..." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className={BOARD_PAGE.container}>
|
|
||||||
<div className={BOARD_PAGE.header}>
|
|
||||||
<div className={BOARD_PAGE.titleGroup}>
|
|
||||||
<h1 className={BOARD_PAGE.title}>Boards</h1>
|
|
||||||
<p className={BOARD_PAGE.description}>
|
|
||||||
Organize and track your project tasks
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsCreateBoardOpen(true)}
|
|
||||||
className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-accent text-accent-fg hover:bg-accent/90 transition-colors text-[13px] font-medium shadow-sm"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
New Board
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{boards.length === 0 ? (
|
|
||||||
<EmptyState
|
|
||||||
icon={<LayoutGrid className="w-8 h-8 opacity-20" />}
|
|
||||||
title="No boards yet"
|
|
||||||
description="Create a Kanban board to start managing your workflow."
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className={BOARD_PAGE.grid}>
|
|
||||||
{boards.map((board) => (
|
|
||||||
<div
|
|
||||||
key={board.id}
|
|
||||||
onClick={() => navigate(`/${projectName}/board/${board.id}`)}
|
|
||||||
className={BOARD_PAGE.boardCard}
|
|
||||||
>
|
|
||||||
<div className={BOARD_PAGE.boardIcon}>
|
|
||||||
<LayoutGrid className="w-5 h-5" />
|
|
||||||
</div>
|
|
||||||
<h3 className={BOARD_PAGE.boardName}>{board.name}</h3>
|
|
||||||
<p className={BOARD_PAGE.boardDesc}>
|
|
||||||
{board.description || "No description provided."}
|
|
||||||
</p>
|
|
||||||
<div className={BOARD_PAGE.boardMeta}>
|
|
||||||
<Clock className="w-3.5 h-3.5" />
|
|
||||||
<span>
|
|
||||||
Created {new Date(board.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
className="ml-auto p-1 text-muted-foreground hover:text-red-500 transition-colors"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleDeleteBoard(board.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="w-3.5 h-3.5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Create Board Modal */}
|
|
||||||
{isCreateBoardOpen && (
|
|
||||||
<div className={BOARD_PAGE.modal}>
|
|
||||||
<div className={`${BOARD_PAGE.modalContent} max-w-md`}>
|
|
||||||
<div className={BOARD_PAGE.modalHead}>
|
|
||||||
<h3 className="font-bold text-[15px]">New Board</h3>
|
|
||||||
<button
|
|
||||||
className={BOARD_PAGE.iconBtn}
|
|
||||||
onClick={() => setIsCreateBoardOpen(false)}
|
|
||||||
>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className={BOARD_PAGE.modalBody}>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
||||||
Board Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
autoFocus
|
|
||||||
className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent"
|
|
||||||
placeholder="e.g. Sprint Planning"
|
|
||||||
value={newBoard.name}
|
|
||||||
onChange={(e) =>
|
|
||||||
setNewBoard((b) => ({ ...b, name: e.target.value }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent min-h-[80px]"
|
|
||||||
placeholder="Optional details..."
|
|
||||||
value={newBoard.description}
|
|
||||||
onChange={(e) =>
|
|
||||||
setNewBoard((b) => ({ ...b, description: e.target.value }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={BOARD_PAGE.modalFooter}>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsCreateBoardOpen(false)}
|
|
||||||
className="px-4 py-1.5 rounded-md text-[13px] hover:bg-muted font-medium"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleCreateBoard}
|
|
||||||
disabled={!newBoard.name.trim() || ops.createBoard.isPending}
|
|
||||||
className="px-4 py-1.5 rounded-md bg-accent text-accent-fg font-bold text-[13px] disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Create Board
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,265 +0,0 @@
|
|||||||
import { X, Loader2, Save } from "lucide-react";
|
|
||||||
import { BOARD_PAGE } from "@/css/app/board-styles";
|
|
||||||
import type { CardResponse } from "@/client/model";
|
|
||||||
import { t } from "@/i18n/T";
|
|
||||||
|
|
||||||
interface BoardModalsProps {
|
|
||||||
// Column modal
|
|
||||||
isCreateColumnOpen: boolean;
|
|
||||||
newColumnName: string;
|
|
||||||
isCreatingColumn: boolean;
|
|
||||||
onNewColumnNameChange: (name: string) => void;
|
|
||||||
onCreateColumn: () => void;
|
|
||||||
onCloseColumn: () => void;
|
|
||||||
// Card modal
|
|
||||||
isCreateCardOpen: string | false;
|
|
||||||
newCardTitle: string;
|
|
||||||
newCardDescription: string;
|
|
||||||
isCreatingCard: boolean;
|
|
||||||
onNewCardTitleChange: (title: string) => void;
|
|
||||||
onNewCardDescriptionChange: (desc: string) => void;
|
|
||||||
onCreateCard: () => void;
|
|
||||||
onCloseCard: () => void;
|
|
||||||
// Card detail modal
|
|
||||||
selectedCard: CardResponse | null;
|
|
||||||
editCardTitle: string;
|
|
||||||
editCardDescription: string;
|
|
||||||
isUpdatingCard: boolean;
|
|
||||||
onEditTitleChange: (title: string) => void;
|
|
||||||
onEditDescriptionChange: (desc: string) => void;
|
|
||||||
onUpdateCard: () => void;
|
|
||||||
onDeleteCard: () => void;
|
|
||||||
onCloseDetail: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BoardModals({
|
|
||||||
isCreateColumnOpen,
|
|
||||||
newColumnName,
|
|
||||||
isCreatingColumn,
|
|
||||||
onNewColumnNameChange,
|
|
||||||
onCreateColumn,
|
|
||||||
onCloseColumn,
|
|
||||||
isCreateCardOpen,
|
|
||||||
newCardTitle,
|
|
||||||
newCardDescription,
|
|
||||||
isCreatingCard,
|
|
||||||
onNewCardTitleChange,
|
|
||||||
onNewCardDescriptionChange,
|
|
||||||
onCreateCard,
|
|
||||||
onCloseCard,
|
|
||||||
selectedCard,
|
|
||||||
editCardTitle,
|
|
||||||
editCardDescription,
|
|
||||||
isUpdatingCard,
|
|
||||||
onEditTitleChange,
|
|
||||||
onEditDescriptionChange,
|
|
||||||
onUpdateCard,
|
|
||||||
onDeleteCard,
|
|
||||||
onCloseDetail,
|
|
||||||
}: BoardModalsProps) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Create Column Modal */}
|
|
||||||
{isCreateColumnOpen && (
|
|
||||||
<div className={BOARD_PAGE.modal}>
|
|
||||||
<div className={`${BOARD_PAGE.modalContent} max-w-md`}>
|
|
||||||
<div className={BOARD_PAGE.modalHead}>
|
|
||||||
<h3 className="font-bold text-[15px]">{t("project.board.add_column_title")}</h3>
|
|
||||||
<button className={BOARD_PAGE.iconBtn} onClick={onCloseColumn}>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className={BOARD_PAGE.modalBody}>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
||||||
{t("project.board.column_name")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
autoFocus
|
|
||||||
className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent"
|
|
||||||
placeholder={t("project.board.column_name_placeholder")}
|
|
||||||
value={newColumnName}
|
|
||||||
onChange={(e) => onNewColumnNameChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={BOARD_PAGE.modalFooter}>
|
|
||||||
<button
|
|
||||||
onClick={onCloseColumn}
|
|
||||||
className="px-4 py-1.5 rounded-md text-[13px] hover:bg-muted font-medium"
|
|
||||||
>
|
|
||||||
{t("common.actions.cancel")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onCreateColumn}
|
|
||||||
disabled={!newColumnName.trim() || isCreatingColumn}
|
|
||||||
className="px-4 py-1.5 rounded-md bg-accent text-accent-fg font-bold text-[13px] disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{t("project.board.add_column")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Create Card Modal */}
|
|
||||||
{isCreateCardOpen && (
|
|
||||||
<div className={BOARD_PAGE.modal}>
|
|
||||||
<div className={`${BOARD_PAGE.modalContent} max-w-md`}>
|
|
||||||
<div className={BOARD_PAGE.modalHead}>
|
|
||||||
<h3 className="font-bold text-[15px]">{t("project.board.new_card")}</h3>
|
|
||||||
<button className={BOARD_PAGE.iconBtn} onClick={onCloseCard}>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className={BOARD_PAGE.modalBody}>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
||||||
{t("project.board.card_title")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
autoFocus
|
|
||||||
className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent"
|
|
||||||
placeholder={t("project.board.card_title_placeholder")}
|
|
||||||
value={newCardTitle}
|
|
||||||
onChange={(e) => onNewCardTitleChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
||||||
{t("project.settings.general.description")}
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent min-h-[100px]"
|
|
||||||
placeholder={t("project.board.card_desc_placeholder")}
|
|
||||||
value={newCardDescription}
|
|
||||||
onChange={(e) => onNewCardDescriptionChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={BOARD_PAGE.modalFooter}>
|
|
||||||
<button
|
|
||||||
onClick={onCloseCard}
|
|
||||||
className="px-4 py-1.5 rounded-md text-[13px] hover:bg-muted font-medium"
|
|
||||||
>
|
|
||||||
{t("common.actions.cancel")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onCreateCard}
|
|
||||||
disabled={!newCardTitle.trim() || isCreatingCard}
|
|
||||||
className="px-4 py-1.5 rounded-md bg-accent text-accent-fg font-bold text-[13px] disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{t("project.board.add_card")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Card Detail & Edit Modal */}
|
|
||||||
{selectedCard && (
|
|
||||||
<div className={BOARD_PAGE.modal}>
|
|
||||||
<div
|
|
||||||
className={`${BOARD_PAGE.modalContent} max-w-7xl min-h-[700px] flex flex-col`}
|
|
||||||
>
|
|
||||||
<div className={BOARD_PAGE.modalHead}>
|
|
||||||
<div className="flex items-center gap-2 text-muted-foreground">
|
|
||||||
<span className="text-[12px] font-medium uppercase tracking-wider">
|
|
||||||
{t("project.board.card_detail_title")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
className={BOARD_PAGE.iconBtn}
|
|
||||||
onClick={onDeleteCard}
|
|
||||||
title={t("project.board.delete_card")}
|
|
||||||
>
|
|
||||||
<X className="w-4 h-4 text-red-500" />
|
|
||||||
</button>
|
|
||||||
<button className={BOARD_PAGE.iconBtn} onClick={onCloseDetail}>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={`${BOARD_PAGE.modalBody} flex-1 overflow-y-auto`}>
|
|
||||||
<div className="flex gap-12">
|
|
||||||
{/* Main Content */}
|
|
||||||
<div className="flex-1 space-y-10">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase flex items-center gap-2 tracking-[0.2em] ml-1">
|
|
||||||
{t("project.board.card_detail_title")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
className="w-full text-[28px] font-bold px-1 py-1 rounded-md border-b border-transparent hover:border-border focus:border-accent bg-transparent outline-none transition-all placeholder:opacity-30"
|
|
||||||
value={editCardTitle}
|
|
||||||
onChange={(e) => onEditTitleChange(e.target.value)}
|
|
||||||
placeholder={t("project.board.card_detail_title")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-[11px] font-bold text-muted-foreground uppercase flex items-center gap-2 tracking-[0.2em] ml-1">
|
|
||||||
{t("project.settings.general.description")}
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className="w-full text-[16px] px-6 py-6 rounded-2xl border border-border bg-muted/5 focus:bg-background outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent min-h-[400px] leading-relaxed transition-all shadow-inner"
|
|
||||||
placeholder={t("project.board.card_detail_desc_placeholder")}
|
|
||||||
value={editCardDescription}
|
|
||||||
onChange={(e) => onEditDescriptionChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sidebar Attributes */}
|
|
||||||
<div className="w-60 space-y-8 pt-4 shrink-0">
|
|
||||||
<div className="pt-8 border-t border-border/50 space-y-3 px-1">
|
|
||||||
<div className="flex items-center justify-between text-[11px]">
|
|
||||||
<span className="text-muted-foreground">{t("project.board.id")}</span>
|
|
||||||
<span className="text-foreground font-mono opacity-60">
|
|
||||||
#{selectedCard.id.substring(0, 6)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-[11px]">
|
|
||||||
<span className="text-muted-foreground">{t("project.board.created")}</span>
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{new Date(selectedCard.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-[11px]">
|
|
||||||
<span className="text-muted-foreground">{t("project.board.updated")}</span>
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{new Date(selectedCard.updated_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={BOARD_PAGE.modalFooter}>
|
|
||||||
<button
|
|
||||||
onClick={onCloseDetail}
|
|
||||||
className="px-5 py-2 rounded-lg text-[13px] font-semibold text-muted-foreground hover:bg-muted transition-all"
|
|
||||||
>
|
|
||||||
{t("common.actions.cancel")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onUpdateCard}
|
|
||||||
disabled={!editCardTitle.trim() || isUpdatingCard}
|
|
||||||
className="flex items-center gap-2 px-6 py-2 rounded-lg bg-accent text-accent-fg font-bold text-[13px] shadow-sm disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{isUpdatingCard ? (
|
|
||||||
<Loader2 className="w-4 h-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Save className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
{t("common.actions.save_changes")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,181 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { useBoardDetailQuery } from "@/hooks/useBoardsQuery";
|
|
||||||
import { useBoardOperations } from "@/hooks/useBoardOperations";
|
|
||||||
import { LoadingState } from "@/components/ui/LoadingState";
|
|
||||||
import { ErrorState } from "@/components/ui/ErrorState";
|
|
||||||
import { AlertCircle, Plus } from "lucide-react";
|
|
||||||
import type { CardResponse } from "@/client/model";
|
|
||||||
import { BOARD_PAGE } from "@/css/app/board-styles";
|
|
||||||
import { BoardHeader } from "./BoardHeader";
|
|
||||||
import { BoardColumn } from "./BoardColumn";
|
|
||||||
import { BoardModals } from "./BoardModals";
|
|
||||||
|
|
||||||
interface KanbanBoardProps {
|
|
||||||
projectName: string;
|
|
||||||
boardId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function KanbanBoard({ projectName, boardId }: KanbanBoardProps) {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { data: boardDetail, isLoading, refetch } = useBoardDetailQuery(projectName, boardId);
|
|
||||||
const ops = useBoardOperations(projectName);
|
|
||||||
|
|
||||||
const [isCreateColumnOpen, setIsCreateColumnOpen] = useState(false);
|
|
||||||
const [isCreateCardOpen, setIsCreateCardOpen] = useState<string | false>(false);
|
|
||||||
const [selectedCard, setSelectedCard] = useState<CardResponse | null>(null);
|
|
||||||
const [newColumnName, setNewColumnName] = useState("");
|
|
||||||
const [newCardTitle, setNewCardTitle] = useState("");
|
|
||||||
const [newCardDescription, setNewCardDescription] = useState("");
|
|
||||||
const [editCardTitle, setEditCardTitle] = useState("");
|
|
||||||
const [editCardDescription, setEditCardDescription] = useState("");
|
|
||||||
|
|
||||||
|
|
||||||
const handleCreateColumn = async () => {
|
|
||||||
if (!newColumnName.trim()) return;
|
|
||||||
await ops.createColumn.mutateAsync({
|
|
||||||
boardId,
|
|
||||||
params: { name: newColumnName.trim(), position: boardDetail?.columns.length || 0 },
|
|
||||||
});
|
|
||||||
setIsCreateColumnOpen(false);
|
|
||||||
setNewColumnName("");
|
|
||||||
refetch();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateCard = async () => {
|
|
||||||
if (!newCardTitle.trim() || !isCreateCardOpen) return;
|
|
||||||
await ops.createCard.mutateAsync({
|
|
||||||
column_id: isCreateCardOpen,
|
|
||||||
title: newCardTitle.trim(),
|
|
||||||
description: newCardDescription.trim() || undefined,
|
|
||||||
});
|
|
||||||
setIsCreateCardOpen(false);
|
|
||||||
setNewCardTitle("");
|
|
||||||
setNewCardDescription("");
|
|
||||||
refetch();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdateCard = async () => {
|
|
||||||
if (!selectedCard || !editCardTitle.trim()) return;
|
|
||||||
await ops.updateCard.mutateAsync({
|
|
||||||
id: selectedCard.id,
|
|
||||||
params: { title: editCardTitle.trim(), description: editCardDescription.trim() || null },
|
|
||||||
});
|
|
||||||
setSelectedCard(null);
|
|
||||||
refetch();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMoveCard = async (cardId: string, targetColumnId: string) => {
|
|
||||||
await ops.moveCard.mutateAsync({
|
|
||||||
id: cardId,
|
|
||||||
params: { target_column_id: targetColumnId, position: 0 },
|
|
||||||
});
|
|
||||||
refetch();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteBoard = async () => {
|
|
||||||
if (confirm("Are you sure you want to delete this board?")) {
|
|
||||||
await ops.deleteBoard.mutateAsync(boardId);
|
|
||||||
navigate(`/${projectName}/board`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteCard = async () => {
|
|
||||||
if (!selectedCard) return;
|
|
||||||
if (confirm("Delete this card?")) {
|
|
||||||
await ops.deleteCard.mutateAsync(selectedCard.id);
|
|
||||||
setSelectedCard(null);
|
|
||||||
refetch();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <LoadingState message="Opening board..." />;
|
|
||||||
if (!boardDetail)
|
|
||||||
return (
|
|
||||||
<ErrorState
|
|
||||||
title="Board not found"
|
|
||||||
message="This board might have been deleted."
|
|
||||||
onRetry={() => navigate(`/${projectName}/board`)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className={BOARD_PAGE.container}>
|
|
||||||
<BoardHeader
|
|
||||||
projectName={projectName}
|
|
||||||
boardName={boardDetail.board.name}
|
|
||||||
boardDescription={boardDetail.board.description ?? undefined}
|
|
||||||
onDeleteBoard={handleDeleteBoard}
|
|
||||||
onAddColumn={() => setIsCreateColumnOpen(true)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={BOARD_PAGE.kanbanWrapper}>
|
|
||||||
{boardDetail.columns.map((col) => (
|
|
||||||
<BoardColumn
|
|
||||||
key={col.column.id}
|
|
||||||
column={col}
|
|
||||||
allColumns={boardDetail.columns}
|
|
||||||
onAddCard={(columnId) => setIsCreateCardOpen(columnId)}
|
|
||||||
onDeleteColumn={(columnId) => {
|
|
||||||
if (confirm("Delete column?")) {
|
|
||||||
ops.deleteColumn.mutate(columnId);
|
|
||||||
refetch();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onCardClick={(card) => {
|
|
||||||
setSelectedCard(card);
|
|
||||||
setEditCardTitle(card.title);
|
|
||||||
setEditCardDescription(card.description || "");
|
|
||||||
}}
|
|
||||||
onMoveCard={handleMoveCard}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{boardDetail.columns.length === 0 && (
|
|
||||||
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-border/40 rounded-2xl bg-muted/5 min-h-[300px]">
|
|
||||||
<AlertCircle className="w-10 h-10 opacity-10 mb-4" />
|
|
||||||
<h4 className="text-[14px] font-bold text-muted-foreground">Empty Board</h4>
|
|
||||||
<p className="text-[12px] text-muted-foreground/60 mt-1 mb-6 text-center max-w-[240px]">
|
|
||||||
Add your first column (e.g. To Do, Doing, Done) to start tracking work.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsCreateColumnOpen(true)}
|
|
||||||
className="flex items-center gap-1.5 px-5 py-2 rounded-lg bg-accent text-accent-fg font-bold text-[13px]"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
Add First Column
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BoardModals
|
|
||||||
isCreateColumnOpen={isCreateColumnOpen}
|
|
||||||
newColumnName={newColumnName}
|
|
||||||
isCreatingColumn={ops.createColumn.isPending}
|
|
||||||
onNewColumnNameChange={setNewColumnName}
|
|
||||||
onCreateColumn={handleCreateColumn}
|
|
||||||
onCloseColumn={() => { setIsCreateColumnOpen(false); setNewColumnName(""); }}
|
|
||||||
isCreateCardOpen={isCreateCardOpen}
|
|
||||||
newCardTitle={newCardTitle}
|
|
||||||
newCardDescription={newCardDescription}
|
|
||||||
isCreatingCard={ops.createCard.isPending}
|
|
||||||
onNewCardTitleChange={setNewCardTitle}
|
|
||||||
onNewCardDescriptionChange={setNewCardDescription}
|
|
||||||
onCreateCard={handleCreateCard}
|
|
||||||
onCloseCard={() => { setIsCreateCardOpen(false); setNewCardTitle(""); setNewCardDescription(""); }}
|
|
||||||
selectedCard={selectedCard}
|
|
||||||
editCardTitle={editCardTitle}
|
|
||||||
editCardDescription={editCardDescription}
|
|
||||||
isUpdatingCard={ops.updateCard.isPending}
|
|
||||||
onEditTitleChange={setEditCardTitle}
|
|
||||||
onEditDescriptionChange={setEditCardDescription}
|
|
||||||
onUpdateCard={handleUpdateCard}
|
|
||||||
onDeleteCard={handleDeleteCard}
|
|
||||||
onCloseDetail={() => setSelectedCard(null)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,219 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Settings, Trash2, Loader2, Globe, Lock } from "lucide-react";
|
|
||||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import { useOptionalRoom } from "@/contexts/room";
|
|
||||||
import { AiSettings } from "./settings/AiSettings";
|
|
||||||
import { roomUpdate, roomDelete } from "@/client/api";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { useParams, useNavigate } from "react-router-dom";
|
|
||||||
import { useCreateCategoryMutation, useInvalidateRooms, useRoomsQuery } from "@/hooks/useRoomsQuery";
|
|
||||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
||||||
|
|
||||||
interface RoomSettingsModalProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function RoomSettingsModal({ open, onOpenChange }: RoomSettingsModalProps) {
|
|
||||||
const roomCtx = useOptionalRoom();
|
|
||||||
const currentRoom = roomCtx?.currentRoom ?? null;
|
|
||||||
const setCurrentRoom = roomCtx?.setCurrentRoom ?? (() => {});
|
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { data: roomsData } = useRoomsQuery(projectName);
|
|
||||||
const createCategory = useCreateCategoryMutation(projectName);
|
|
||||||
const invalidateRooms = useInvalidateRooms();
|
|
||||||
const categories = roomsData?.categories ?? [];
|
|
||||||
|
|
||||||
const [name, setName] = useState("");
|
|
||||||
const [isPublic, setIsPublic] = useState(true);
|
|
||||||
const [category, setCategory] = useState("none");
|
|
||||||
const [newCategory, setNewCategory] = useState("");
|
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open || !currentRoom) return;
|
|
||||||
setName(currentRoom.room_name);
|
|
||||||
setIsPublic(currentRoom.public ?? true);
|
|
||||||
setCategory(currentRoom.category ?? "none");
|
|
||||||
setNewCategory("");
|
|
||||||
}, [currentRoom, open]);
|
|
||||||
|
|
||||||
const handleOpenChange = (newOpen: boolean) => {
|
|
||||||
onOpenChange(newOpen);
|
|
||||||
if (newOpen && currentRoom) {
|
|
||||||
setName(currentRoom.room_name);
|
|
||||||
setIsPublic(currentRoom.public ?? true);
|
|
||||||
setCategory(currentRoom.category ?? "none");
|
|
||||||
setNewCategory("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdateRoom = async () => {
|
|
||||||
if (!currentRoom || !name.trim()) return;
|
|
||||||
setIsSaving(true);
|
|
||||||
try {
|
|
||||||
let categoryId: string | null = category === "none" ? null : category;
|
|
||||||
if (category === "new") {
|
|
||||||
if (!newCategory.trim()) {
|
|
||||||
toast.error("Enter a group name");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const createdCategory = await createCategory.mutateAsync({
|
|
||||||
name: newCategory.trim(),
|
|
||||||
position: categories.length,
|
|
||||||
});
|
|
||||||
categoryId = createdCategory?.id ?? null;
|
|
||||||
}
|
|
||||||
await roomUpdate(currentRoom.id, { room_name: name, room_public: isPublic, category: categoryId });
|
|
||||||
setCurrentRoom({ ...currentRoom, room_name: name, public: isPublic, category: categoryId });
|
|
||||||
if (projectName) invalidateRooms(projectName);
|
|
||||||
toast.success("Room settings updated");
|
|
||||||
} catch {
|
|
||||||
toast.error("Failed to update room");
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteRoom = async () => {
|
|
||||||
if (!currentRoom) return;
|
|
||||||
if (!confirm("Are you sure you want to delete this room? This action cannot be undone.")) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await roomDelete(currentRoom.id);
|
|
||||||
toast.success("Room deleted");
|
|
||||||
onOpenChange(false);
|
|
||||||
navigate(`/${projectName}/channel`);
|
|
||||||
} catch {
|
|
||||||
toast.error("Failed to delete room");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sheet open={open} onOpenChange={handleOpenChange}>
|
|
||||||
<SheetContent side="right" className="w-full sm:max-w-lg p-0 flex flex-col" style={{ backgroundColor: "var(--surface-ground)" }}>
|
|
||||||
<SheetHeader className="p-6 pb-0 shrink-0">
|
|
||||||
<SheetTitle className="flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
|
|
||||||
<Settings className="w-5 h-5" />
|
|
||||||
Room Settings
|
|
||||||
</SheetTitle>
|
|
||||||
</SheetHeader>
|
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
|
||||||
{/* General Section */}
|
|
||||||
<section>
|
|
||||||
<h3 className="text-sm font-semibold uppercase tracking-wider mb-4" style={{ color: "var(--text-muted)" }}>
|
|
||||||
General
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="name" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Room Name
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="name"
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
placeholder="e.g. general"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-between p-3 rounded-lg border"
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{isPublic ? (
|
|
||||||
<Globe className="w-4 h-4" style={{ color: "var(--accent)" }} />
|
|
||||||
) : (
|
|
||||||
<Lock className="w-4 h-4" style={{ color: "var(--text-muted)" }} />
|
|
||||||
)}
|
|
||||||
<Label className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
|
|
||||||
Public Room
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs" style={{ color: "var(--text-muted)" }}>
|
|
||||||
Anyone in the project can join this room.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Switch checked={isPublic} onCheckedChange={setIsPublic} />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Group
|
|
||||||
</Label>
|
|
||||||
<Select value={category} onValueChange={setCategory}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem value="none">No group</SelectItem>
|
|
||||||
{categories.map((item) => (
|
|
||||||
<SelectItem key={item.id} value={item.id}>{item.name}</SelectItem>
|
|
||||||
))}
|
|
||||||
<SelectItem value="new">Create new group</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
{category === "new" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="new-category" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
New Group Name
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="new-category"
|
|
||||||
value={newCategory}
|
|
||||||
onChange={(e) => setNewCategory(e.target.value)}
|
|
||||||
placeholder="e.g. Engineering"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* AI Agents */}
|
|
||||||
{currentRoom && <AiSettings roomId={currentRoom.id} />}
|
|
||||||
|
|
||||||
{/* Danger Zone */}
|
|
||||||
<section>
|
|
||||||
<h4 className="text-sm font-semibold mb-3" style={{ color: "var(--destructive)" }}>
|
|
||||||
Danger Zone
|
|
||||||
</h4>
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
className="w-full justify-start gap-2"
|
|
||||||
onClick={handleDeleteRoom}
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
Delete Room
|
|
||||||
</Button>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="p-4 shrink-0 flex justify-end gap-2"
|
|
||||||
style={{ borderTop: "1px solid var(--border-subtle)", backgroundColor: "var(--surface-ground)" }}
|
|
||||||
>
|
|
||||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
disabled={isSaving || !name.trim()}
|
|
||||||
onClick={handleUpdateRoom}
|
|
||||||
style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
|
|
||||||
>
|
|
||||||
{isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
|
|
||||||
Save Changes
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,585 +0,0 @@
|
|||||||
import { Loader2, Shield, Search, Check } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { aiList, aiUpsert, aiDelete, modelCatalog } from "@/client/api";
|
|
||||||
import type { RoomAiUpsertRequest, ModelWithPricingResponse, RoomAiResponse } from "@/client/model";
|
|
||||||
import { getModelIcon } from "@/lib/icons/modelIcons";
|
|
||||||
import { Plus, Trash2, Settings, X as XIcon } from "lucide-react";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { useState, useEffect } from "react";
|
|
||||||
|
|
||||||
const AVATAR_COLORS = [
|
|
||||||
"#6366f1", "#8b5cf6", "#d946ef", "#ec4899", "#f43f5e",
|
|
||||||
"#ef4444", "#f97316", "#eab308", "#22c55e", "#14b8a6",
|
|
||||||
"#06b6d4", "#3b82f6", "#2563eb", "#7c3aed", "#c026d3",
|
|
||||||
];
|
|
||||||
|
|
||||||
function hashColor(str: string): string {
|
|
||||||
let hash = 0;
|
|
||||||
for (let i = 0; i < str.length; i++) {
|
|
||||||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
|
||||||
}
|
|
||||||
return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
|
|
||||||
}
|
|
||||||
|
|
||||||
function ModelAvatar({ modelName, size = 36 }: { modelName: string; size?: number }) {
|
|
||||||
const Icon = getModelIcon(modelName);
|
|
||||||
if (Icon) {
|
|
||||||
return <Icon.Avatar size={size} />;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="rounded-lg flex items-center justify-center font-bold shrink-0"
|
|
||||||
style={{
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
backgroundColor: hashColor(modelName),
|
|
||||||
fontSize: Math.max(10, size * 0.35),
|
|
||||||
color: "var(--text-inverse)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{modelName[0]?.toUpperCase() || "?"}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AiSettingsProps {
|
|
||||||
roomId: string;
|
|
||||||
onAiListChange?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AiSettings({ roomId, onAiListChange }: AiSettingsProps) {
|
|
||||||
const [roomAis, setRoomAis] = useState<RoomAiResponse[]>([]);
|
|
||||||
const [isLoadingAi, setIsLoadingAi] = useState(true);
|
|
||||||
const [showAddAi, setShowAddAi] = useState(false);
|
|
||||||
const [selectedModelFull, setSelectedModelFull] = useState<ModelWithPricingResponse | null>(null);
|
|
||||||
const [aiParams, setAiParams] = useState({
|
|
||||||
temperature: 0.7,
|
|
||||||
max_tokens: 2000,
|
|
||||||
stream: true,
|
|
||||||
system_prompt: "",
|
|
||||||
});
|
|
||||||
const [isAddingAi, setIsAddingAi] = useState(false);
|
|
||||||
const [modelSearch, setModelSearch] = useState("");
|
|
||||||
|
|
||||||
const { data: catalog, isLoading: isLoadingCatalog } = useQuery({
|
|
||||||
queryKey: ["modelCatalog"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await modelCatalog();
|
|
||||||
return (res.data.data as unknown as { data: ModelWithPricingResponse[] }).data;
|
|
||||||
},
|
|
||||||
enabled: showAddAi,
|
|
||||||
});
|
|
||||||
|
|
||||||
const models = Array.isArray(catalog) ? catalog : [];
|
|
||||||
const filteredCatalog = modelSearch.trim()
|
|
||||||
? models.filter(
|
|
||||||
(m) =>
|
|
||||||
m.name.toLowerCase().includes(modelSearch.toLowerCase()) ||
|
|
||||||
m.provider_id.toLowerCase().includes(modelSearch.toLowerCase())
|
|
||||||
)
|
|
||||||
: models;
|
|
||||||
|
|
||||||
const fetchRoomAis = async () => {
|
|
||||||
setIsLoadingAi(true);
|
|
||||||
try {
|
|
||||||
const res = await aiList(roomId);
|
|
||||||
setRoomAis(res.data.data || []);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to fetch room AIs", err);
|
|
||||||
} finally {
|
|
||||||
setIsLoadingAi(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
aiList(roomId)
|
|
||||||
.then((res) => setRoomAis(res.data.data || []))
|
|
||||||
.catch((err) => console.error("Failed to fetch room AIs", err))
|
|
||||||
.finally(() => setIsLoadingAi(false));
|
|
||||||
}, [roomId]);
|
|
||||||
|
|
||||||
const handleAddAi = async () => {
|
|
||||||
if (!selectedModelFull) return;
|
|
||||||
setIsAddingAi(true);
|
|
||||||
try {
|
|
||||||
const req: RoomAiUpsertRequest = {
|
|
||||||
model: selectedModelFull.id,
|
|
||||||
stream: aiParams.stream,
|
|
||||||
temperature: aiParams.temperature,
|
|
||||||
max_tokens: aiParams.max_tokens,
|
|
||||||
system_prompt: aiParams.system_prompt || undefined,
|
|
||||||
};
|
|
||||||
await aiUpsert(roomId, req);
|
|
||||||
fetchRoomAis();
|
|
||||||
setShowAddAi(false);
|
|
||||||
setSelectedModelFull(null);
|
|
||||||
onAiListChange?.();
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to add AI model", err);
|
|
||||||
} finally {
|
|
||||||
setIsAddingAi(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemoveAi = async (modelId: string) => {
|
|
||||||
try {
|
|
||||||
await aiDelete(roomId, modelId);
|
|
||||||
fetchRoomAis();
|
|
||||||
onAiListChange?.();
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to remove AI agent", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section>
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h3 className="text-sm font-semibold uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>
|
|
||||||
AI Agents
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
className="gap-1.5 h-8"
|
|
||||||
onClick={() => setShowAddAi(true)}
|
|
||||||
>
|
|
||||||
<Plus className="w-3.5 h-3.5" /> Add AI
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isLoadingAi ? (
|
|
||||||
<div className="flex justify-center py-8">
|
|
||||||
<Loader2 className="w-6 h-6 animate-spin" style={{ color: "var(--text-muted)" }} />
|
|
||||||
</div>
|
|
||||||
) : roomAis.length === 0 ? (
|
|
||||||
<div className="text-center py-10 border-2 border-dashed rounded-xl" style={{ borderColor: "var(--border-subtle)" }}>
|
|
||||||
<Shield className="w-8 h-8 mx-auto mb-2" style={{ color: "var(--text-muted)", opacity: 0.3 }} />
|
|
||||||
<p className="text-sm" style={{ color: "var(--text-muted)" }}>
|
|
||||||
No AI agents active in this room
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
{roomAis.map((ai) => (
|
|
||||||
<div
|
|
||||||
key={ai.model}
|
|
||||||
className="flex items-center justify-between p-3 rounded-lg border group"
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<ModelAvatar modelName={ai.model_name || ai.model} size={36} />
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)", fontSize: "13px" }}
|
|
||||||
>
|
|
||||||
{ai.model_name || "Unknown Model"}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="line-clamp-1"
|
|
||||||
style={{ color: "var(--text-muted)", fontSize: "11px" }}
|
|
||||||
>
|
|
||||||
{ai.model}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="h-8 w-8 rounded-md flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
onMouseEnter={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--destructive)";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--text-muted)";
|
|
||||||
}}
|
|
||||||
onClick={() => handleRemoveAi(ai.model)}
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={showAddAi}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
setShowAddAi(open);
|
|
||||||
if (!open) {
|
|
||||||
setSelectedModelFull(null);
|
|
||||||
setModelSearch("");
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
className="!max-w-[80vw] w-[80vw] h-[85vh] !max-h-[85vh] !gap-0 !p-0 overflow-hidden !rounded-xl"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)" }}
|
|
||||||
>
|
|
||||||
<DialogTitle className="sr-only">添加 AI 模型</DialogTitle>
|
|
||||||
|
|
||||||
<div className="flex h-full w-full">
|
|
||||||
{/* ── Left Sidebar: Model List ── */}
|
|
||||||
<div
|
|
||||||
className="w-[280px] shrink-0 flex flex-col h-full"
|
|
||||||
style={{ borderRight: "1px solid var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div className="px-4 pt-6 pb-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3
|
|
||||||
className="text-[13px] font-semibold uppercase tracking-wider"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
选择模型
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowAddAi(false);
|
|
||||||
setSelectedModelFull(null);
|
|
||||||
}}
|
|
||||||
className="p-1 rounded-md transition-colors"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
<XIcon className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search */}
|
|
||||||
<div className="px-3 pb-3">
|
|
||||||
<div className="relative">
|
|
||||||
<Search
|
|
||||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="搜索模型..."
|
|
||||||
value={modelSearch}
|
|
||||||
onChange={(e) => setModelSearch(e.target.value)}
|
|
||||||
className="w-full h-9 pl-8 pr-3 text-sm rounded-lg outline-none"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--input-bg)",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
border: "1px solid var(--border-subtle)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Model list */}
|
|
||||||
<div className="flex-1 overflow-y-auto px-2">
|
|
||||||
{isLoadingCatalog ? (
|
|
||||||
<div className="flex justify-center py-8">
|
|
||||||
<Loader2 className="w-5 h-5 animate-spin" style={{ color: "var(--text-muted)" }} />
|
|
||||||
</div>
|
|
||||||
) : filteredCatalog.length === 0 ? (
|
|
||||||
<div className="text-center py-8 text-xs" style={{ color: "var(--text-muted)" }}>
|
|
||||||
暂无模型
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
filteredCatalog.map((model) => {
|
|
||||||
const isActive = selectedModelFull?.id === model.id;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={model.id}
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedModelFull(model);
|
|
||||||
}}
|
|
||||||
className="w-full text-left px-3 py-2.5 rounded-lg transition-colors flex items-center gap-3 text-sm mb-0.5"
|
|
||||||
style={{
|
|
||||||
backgroundColor: isActive ? "var(--hover-bg-strong)" : "transparent",
|
|
||||||
color: "var(--text-secondary)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ModelAvatar modelName={model.name} size={28} />
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<span
|
|
||||||
className="truncate font-medium"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{model.name}
|
|
||||||
</span>
|
|
||||||
{isActive && (
|
|
||||||
<Check className="w-3.5 h-3.5 shrink-0" style={{ color: "var(--accent)" }} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-[11px] truncate"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
{model.provider_id}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Right Panel: Model Details & Config ── */}
|
|
||||||
<div className="flex-1 flex flex-col min-w-0 h-full">
|
|
||||||
<div className="flex-1 overflow-y-auto">
|
|
||||||
<div className="max-w-[660px] px-10 py-8">
|
|
||||||
{!selectedModelFull ? (
|
|
||||||
<div className="flex flex-col items-center justify-center h-full min-h-[400px]">
|
|
||||||
<Shield
|
|
||||||
className="w-12 h-12 mb-4"
|
|
||||||
style={{ color: "var(--text-muted)", opacity: 0.2 }}
|
|
||||||
/>
|
|
||||||
<p className="text-sm" style={{ color: "var(--text-muted)" }}>
|
|
||||||
从左侧选择一个 AI 模型查看详情
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Model Info Card */}
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-4 p-5 rounded-xl border"
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<ModelAvatar modelName={selectedModelFull.name} size={56} />
|
|
||||||
<div className="min-w-0">
|
|
||||||
<h3
|
|
||||||
className="text-lg font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{selectedModelFull.name}
|
|
||||||
</h3>
|
|
||||||
<div
|
|
||||||
className="text-sm font-mono"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
{selectedModelFull.provider_id}
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-1.5 mt-2">
|
|
||||||
<span
|
|
||||||
className="px-2 py-0.5 rounded text-[11px] font-medium"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--accent-muted)",
|
|
||||||
color: "var(--accent)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedModelFull.capability}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="px-2 py-0.5 rounded text-[11px] font-medium"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--interactive)",
|
|
||||||
color: "var(--text-muted)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedModelFull.context_length.toLocaleString()} ctx
|
|
||||||
</span>
|
|
||||||
{selectedModelFull.max_output_tokens && (
|
|
||||||
<span
|
|
||||||
className="px-2 py-0.5 rounded text-[11px] font-medium"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--interactive)",
|
|
||||||
color: "var(--text-muted)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
最大输出 {selectedModelFull.max_output_tokens.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pricing */}
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div
|
|
||||||
className="p-4 rounded-xl border"
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="text-[11px] font-semibold uppercase tracking-wider mb-1"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
输入价格
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-lg font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{selectedModelFull.input_price ?? "N/A"}{" "}
|
|
||||||
<span className="text-sm font-normal" style={{ color: "var(--text-muted)" }}>
|
|
||||||
{selectedModelFull.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="p-4 rounded-xl border"
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="text-[11px] font-semibold uppercase tracking-wider mb-1"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
输出价格
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-lg font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{selectedModelFull.output_price ?? "N/A"}{" "}
|
|
||||||
<span className="text-sm font-normal" style={{ color: "var(--text-muted)" }}>
|
|
||||||
{selectedModelFull.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr style={{ borderColor: "var(--border-subtle)" }} />
|
|
||||||
|
|
||||||
{/* Parameter Configuration */}
|
|
||||||
<section>
|
|
||||||
<h4
|
|
||||||
className="text-xs font-bold uppercase tracking-widest mb-4 flex items-center gap-2"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
<Settings className="w-3.5 h-3.5" /> 参数配置
|
|
||||||
</h4>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Temperature
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min={0}
|
|
||||||
max={2}
|
|
||||||
step={0.1}
|
|
||||||
value={aiParams.temperature}
|
|
||||||
onChange={(e) =>
|
|
||||||
setAiParams((p) => ({
|
|
||||||
...p,
|
|
||||||
temperature: parseFloat(e.target.value) || 0,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
className="w-full h-9 text-sm px-3 rounded-lg border outline-none"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--input-bg)",
|
|
||||||
borderColor: "var(--border-subtle)",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Max Tokens
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={selectedModelFull.max_output_tokens || 128000}
|
|
||||||
step={1}
|
|
||||||
value={aiParams.max_tokens}
|
|
||||||
onChange={(e) =>
|
|
||||||
setAiParams((p) => ({
|
|
||||||
...p,
|
|
||||||
max_tokens: parseInt(e.target.value) || 1,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
className="w-full h-9 text-sm px-3 rounded-lg border outline-none"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--input-bg)",
|
|
||||||
borderColor: "var(--border-subtle)",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
System Prompt
|
|
||||||
</Label>
|
|
||||||
<textarea
|
|
||||||
className="w-full min-h-[100px] text-sm p-3 rounded-lg border resize-y outline-none"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--input-bg)",
|
|
||||||
borderColor: "var(--border-subtle)",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
}}
|
|
||||||
placeholder="You are a helpful assistant..."
|
|
||||||
value={aiParams.system_prompt}
|
|
||||||
onChange={(e) =>
|
|
||||||
setAiParams((p) => ({ ...p, system_prompt: e.target.value }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-between p-4 rounded-xl border"
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Label
|
|
||||||
className="text-sm font-medium"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
Stream Response
|
|
||||||
</Label>
|
|
||||||
<p
|
|
||||||
className="text-[11px] mt-0.5"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
启用流式响应以实时输出
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Switch
|
|
||||||
checked={aiParams.stream}
|
|
||||||
onCheckedChange={(v) =>
|
|
||||||
setAiParams((p) => ({ ...p, stream: v }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Confirm Button */}
|
|
||||||
<Button
|
|
||||||
onClick={handleAddAi}
|
|
||||||
disabled={isAddingAi || !selectedModelFull}
|
|
||||||
className="w-full font-semibold h-11"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--accent)",
|
|
||||||
color: "var(--accent-fg)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isAddingAi ? (
|
|
||||||
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
||||||
) : null}
|
|
||||||
确认添加
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,530 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useParams, useNavigate } from "react-router-dom";
|
|
||||||
import { useCreateRepoMutation } from "@/hooks/useReposQuery";
|
|
||||||
import { useCreateCategoryMutation, useCreateRoomMutation, useRoomsQuery } from "@/hooks/useRoomsQuery";
|
|
||||||
import { useBoardOperations } from "@/hooks/useBoardOperations";
|
|
||||||
import { useCreateSkillMutation } from "@/hooks/useSkillsQuery";
|
|
||||||
import { projectInviteUser } from "@/client/api";
|
|
||||||
import type { MemberRole } from "@/client/model";
|
|
||||||
import {
|
|
||||||
X,
|
|
||||||
Hash,
|
|
||||||
Plus,
|
|
||||||
Loader2,
|
|
||||||
Globe,
|
|
||||||
Lock,
|
|
||||||
PlusCircle,
|
|
||||||
FolderPlus,
|
|
||||||
MessageSquarePlus,
|
|
||||||
Kanban,
|
|
||||||
Zap,
|
|
||||||
Mail,
|
|
||||||
UserPlus,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectGroup,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
|
|
||||||
import { t } from "@/i18n/T";
|
|
||||||
|
|
||||||
interface ProjectCreateMenuModalProps {
|
|
||||||
onClose: () => void;
|
|
||||||
initialTab?: "repo" | "channel" | "board" | "skill" | "invite";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ProjectCreateMenuModal({ onClose, initialTab = "repo" }: ProjectCreateMenuModalProps) {
|
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<"repo" | "channel" | "board" | "skill" | "invite">(initialTab);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// --- Repo Form State ---
|
|
||||||
const [repoForm, setRepoForm] = useState({
|
|
||||||
repo_name: "",
|
|
||||||
description: "",
|
|
||||||
is_private: false
|
|
||||||
});
|
|
||||||
const createRepo = useCreateRepoMutation(projectName);
|
|
||||||
|
|
||||||
// --- Channel Form State ---
|
|
||||||
const [channelForm, setChannelForm] = useState({
|
|
||||||
room_name: "",
|
|
||||||
is_public: true,
|
|
||||||
category: "none",
|
|
||||||
new_category: "",
|
|
||||||
});
|
|
||||||
const createRoom = useCreateRoomMutation(projectName);
|
|
||||||
const createCategory = useCreateCategoryMutation(projectName);
|
|
||||||
const { data: roomsData } = useRoomsQuery(projectName);
|
|
||||||
const categories = roomsData?.categories ?? [];
|
|
||||||
|
|
||||||
// --- Board Form State ---
|
|
||||||
const [boardForm, setBoardForm] = useState({
|
|
||||||
name: "",
|
|
||||||
description: ""
|
|
||||||
});
|
|
||||||
const boardOps = useBoardOperations(projectName);
|
|
||||||
|
|
||||||
// --- Skill Form State ---
|
|
||||||
const [skillForm, setSkillForm] = useState({
|
|
||||||
name: "",
|
|
||||||
description: ""
|
|
||||||
});
|
|
||||||
const createSkill = useCreateSkillMutation(projectName);
|
|
||||||
|
|
||||||
// --- Invite Form State ---
|
|
||||||
const [inviteForm, setInviteForm] = useState({
|
|
||||||
email: "",
|
|
||||||
scope: "Member" as MemberRole,
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleCreateRepo = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!repoForm.repo_name.trim()) return;
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
await createRepo.mutateAsync({
|
|
||||||
repo_name: repoForm.repo_name.trim(),
|
|
||||||
description: repoForm.description.trim() || undefined,
|
|
||||||
is_private: repoForm.is_private
|
|
||||||
});
|
|
||||||
onClose();
|
|
||||||
navigate(`/${projectName}/repo/${repoForm.repo_name.trim()}`);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_repo"));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateChannel = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!channelForm.room_name.trim()) return;
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
let category: string | null = channelForm.category === "none" ? null : channelForm.category;
|
|
||||||
if (channelForm.category === "new") {
|
|
||||||
if (!channelForm.new_category.trim()) {
|
|
||||||
setError(t("project_create.enter_group_name"));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const createdCategory = await createCategory.mutateAsync({
|
|
||||||
name: channelForm.new_category.trim(),
|
|
||||||
position: categories.length,
|
|
||||||
});
|
|
||||||
category = createdCategory?.id ?? null;
|
|
||||||
}
|
|
||||||
const room = await createRoom.mutateAsync({
|
|
||||||
room_name: channelForm.room_name.trim(),
|
|
||||||
room_public: channelForm.is_public,
|
|
||||||
category,
|
|
||||||
});
|
|
||||||
onClose();
|
|
||||||
if (room) {
|
|
||||||
navigate(`/${projectName}/channel/${room.id}`);
|
|
||||||
}
|
|
||||||
} catch (err: unknown) {
|
|
||||||
setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_channel"));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateBoard = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!boardForm.name.trim()) return;
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
const res = await boardOps.createBoard.mutateAsync({
|
|
||||||
name: boardForm.name.trim(),
|
|
||||||
description: boardForm.description.trim() || undefined
|
|
||||||
});
|
|
||||||
onClose();
|
|
||||||
if (res.data?.data) {
|
|
||||||
navigate(`/${projectName}/board/${res.data.data.id}`);
|
|
||||||
}
|
|
||||||
} catch (err: unknown) {
|
|
||||||
setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_board"));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateSkill = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!skillForm.name.trim()) return;
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
const skill = await createSkill.mutateAsync({
|
|
||||||
slug: skillForm.name.trim().toLowerCase().replace(/\s+/g, '-'),
|
|
||||||
name: skillForm.name.trim(),
|
|
||||||
description: skillForm.description.trim() || undefined,
|
|
||||||
content: "# New AI Skill\n\nExplain how this skill works here."
|
|
||||||
});
|
|
||||||
onClose();
|
|
||||||
if (skill) {
|
|
||||||
navigate(`/${projectName}/skills/${skill.slug}`);
|
|
||||||
}
|
|
||||||
} catch (err: unknown) {
|
|
||||||
setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_skill"));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInviteUser = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!projectName || !inviteForm.email.trim()) return;
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
await projectInviteUser(projectName, {
|
|
||||||
email: inviteForm.email.trim(),
|
|
||||||
scope: inviteForm.scope,
|
|
||||||
});
|
|
||||||
setInviteForm({ email: "", scope: "Member" });
|
|
||||||
onClose();
|
|
||||||
} catch (err: unknown) {
|
|
||||||
setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_invite"));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
||||||
<div
|
|
||||||
className="border rounded-2xl shadow-2xl w-full max-w-[540px] overflow-hidden animate-in zoom-in-95 duration-200"
|
|
||||||
style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }}
|
|
||||||
onClick={e => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
{/* Header Tabs */}
|
|
||||||
<div className="px-1 pt-1 border-b" style={{ backgroundColor: "var(--surface-rail)", borderColor: "var(--border-default)" }}>
|
|
||||||
<div className="flex items-center justify-between px-4 py-2">
|
|
||||||
<span className="text-[14px] font-bold flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
|
|
||||||
<PlusCircle className="w-4 h-4" style={{ color: "var(--accent)" }} /> {t("project_create.quick_start")}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="p-1 rounded transition-colors"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
<X className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex px-2">
|
|
||||||
{[
|
|
||||||
{ id: "repo", label: t("project_create.repo_tab"), icon: FolderPlus },
|
|
||||||
{ id: "channel", label: t("project_create.channel_tab"), icon: MessageSquarePlus },
|
|
||||||
{ id: "board", label: t("project_create.board_tab"), icon: Kanban },
|
|
||||||
{ id: "skill", label: t("project_create.skill_tab"), icon: Zap },
|
|
||||||
{ id: "invite", label: t("project_create.invite_tab"), icon: UserPlus },
|
|
||||||
].map(tab => (
|
|
||||||
<button
|
|
||||||
key={tab.id}
|
|
||||||
onClick={() => { setActiveTab(tab.id as typeof activeTab); setError(null); }}
|
|
||||||
className="flex-1 py-2.5 text-[12px] font-bold transition-all border-b-2 flex items-center justify-center gap-2"
|
|
||||||
style={{
|
|
||||||
borderColor: activeTab === tab.id ? "var(--accent)" : "transparent",
|
|
||||||
color: activeTab === tab.id ? "var(--text-primary)" : "var(--text-secondary)"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<tab.icon className="w-4 h-4" />
|
|
||||||
{tab.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-6">
|
|
||||||
{activeTab === "repo" && (
|
|
||||||
<form onSubmit={handleCreateRepo} className="space-y-5">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.repo_name")}</Label>
|
|
||||||
<Input
|
|
||||||
autoFocus
|
|
||||||
placeholder={t("project_create.repo_name_placeholder")}
|
|
||||||
value={repoForm.repo_name}
|
|
||||||
onChange={e => setRepoForm({...repoForm, repo_name: e.target.value.toLowerCase().replace(/\s+/g, '-')})}
|
|
||||||
className="border-none h-10 text-[14px] font-mono"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.description_optional")}</Label>
|
|
||||||
<Input
|
|
||||||
placeholder={t("project_create.repo_desc_placeholder")}
|
|
||||||
value={repoForm.description}
|
|
||||||
onChange={e => setRepoForm({...repoForm, description: e.target.value})}
|
|
||||||
className="border-none h-10 text-[14px]"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)" }}
|
|
||||||
onClick={() => setRepoForm({...repoForm, is_private: !repoForm.is_private})}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{repoForm.is_private ? <Lock className="w-4 h-4" style={{ color: "var(--warning)" }} /> : <Globe className="w-4 h-4" style={{ color: "var(--success)" }} />}
|
|
||||||
<div>
|
|
||||||
<p className="text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>{repoForm.is_private ? t("project.repos.private") : t("project.repos.public")}</p>
|
|
||||||
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>{repoForm.is_private ? t("project_create.private_desc") : t("project_create.public_desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-8 h-4 rounded-full relative transition-colors" style={{ backgroundColor: repoForm.is_private ? "var(--accent)" : "var(--border-default)" }}>
|
|
||||||
<div className={`absolute top-0.5 w-3 h-3 rounded-full transition-all ${repoForm.is_private ? 'right-0.5' : 'left-0.5'}`} style={{ backgroundColor: "var(--text-inverse)" }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 flex flex-col gap-3">
|
|
||||||
{error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={!repoForm.repo_name.trim() || loading}
|
|
||||||
className="w-full font-bold h-10"
|
|
||||||
style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <FolderPlus className="w-4 h-4 mr-2" />}
|
|
||||||
{t("project_create.create_repo")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "channel" && (
|
|
||||||
<form onSubmit={handleCreateChannel} className="space-y-5">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.channel_name")}</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Hash className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
|
|
||||||
<Input
|
|
||||||
autoFocus
|
|
||||||
placeholder={t("project_create.channel_name_placeholder")}
|
|
||||||
value={channelForm.room_name}
|
|
||||||
onChange={e => setChannelForm({...channelForm, room_name: e.target.value.toLowerCase().replace(/\s+/g, '-')})}
|
|
||||||
className="border-none h-10 pl-9 text-[14px]"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)" }}
|
|
||||||
onClick={() => setChannelForm({...channelForm, is_public: !channelForm.is_public})}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{channelForm.is_public ? <Globe className="w-4 h-4" style={{ color: "var(--success)" }} /> : <Lock className="w-4 h-4" style={{ color: "var(--warning)" }} />}
|
|
||||||
<div>
|
|
||||||
<p className="text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>{channelForm.is_public ? t("project_create.public_channel") : t("project_create.private_channel")}</p>
|
|
||||||
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>{channelForm.is_public ? t("project_create.public_channel_desc") : t("project_create.private_channel_desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-8 h-4 rounded-full relative transition-colors" style={{ backgroundColor: channelForm.is_public ? "var(--success)" : "var(--border-default)" }}>
|
|
||||||
<div className={`absolute top-0.5 w-3 h-3 rounded-full transition-all ${channelForm.is_public ? 'right-0.5' : 'left-0.5'}`} style={{ backgroundColor: "var(--text-inverse)" }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.group")}</Label>
|
|
||||||
<Select
|
|
||||||
value={channelForm.category}
|
|
||||||
onValueChange={(value) => setChannelForm({...channelForm, category: value})}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-10 border-none" style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem value="none">{t("project_create.no_group")}</SelectItem>
|
|
||||||
{categories.map((category) => (
|
|
||||||
<SelectItem key={category.id} value={category.id}>{category.name === "default" ? "Channels" : category.name}</SelectItem>
|
|
||||||
))}
|
|
||||||
<SelectItem value="new">{t("project_create.create_new_group")}</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{channelForm.category === "new" && (
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.group_name")}</Label>
|
|
||||||
<Input
|
|
||||||
placeholder={t("project_create.group_name_placeholder")}
|
|
||||||
value={channelForm.new_category}
|
|
||||||
onChange={e => setChannelForm({...channelForm, new_category: e.target.value})}
|
|
||||||
className="border-none h-10 text-[14px]"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="pt-2 flex flex-col gap-3">
|
|
||||||
{error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={!channelForm.room_name.trim() || loading}
|
|
||||||
className="w-full font-bold h-10"
|
|
||||||
style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <MessageSquarePlus className="w-4 h-4 mr-2" />}
|
|
||||||
{t("project_create.create_channel")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "board" && (
|
|
||||||
<form onSubmit={handleCreateBoard} className="space-y-5">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.board_name")}</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Kanban className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
|
|
||||||
<Input
|
|
||||||
autoFocus
|
|
||||||
placeholder={t("project_create.board_name_placeholder")}
|
|
||||||
value={boardForm.name}
|
|
||||||
onChange={e => setBoardForm({...boardForm, name: e.target.value})}
|
|
||||||
className="border-none h-10 pl-9 text-[14px]"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.description_optional")}</Label>
|
|
||||||
<Textarea
|
|
||||||
placeholder={t("project_create.board_desc_placeholder")}
|
|
||||||
value={boardForm.description}
|
|
||||||
onChange={e => setBoardForm({...boardForm, description: e.target.value})}
|
|
||||||
className="border-none min-h-[100px] text-[14px] resize-none py-3"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 flex flex-col gap-3">
|
|
||||||
{error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={!boardForm.name.trim() || loading}
|
|
||||||
className="w-full font-bold h-10"
|
|
||||||
style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
|
|
||||||
{t("project_create.create_board")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "skill" && (
|
|
||||||
<form onSubmit={handleCreateSkill} className="space-y-5">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.skill_name")}</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Zap className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
|
|
||||||
<Input
|
|
||||||
autoFocus
|
|
||||||
placeholder={t("project_create.skill_name_placeholder")}
|
|
||||||
value={skillForm.name}
|
|
||||||
onChange={e => setSkillForm({...skillForm, name: e.target.value})}
|
|
||||||
className="border-none h-10 pl-9 text-[14px]"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.description_optional")}</Label>
|
|
||||||
<Textarea
|
|
||||||
placeholder={t("project_create.skill_desc_placeholder")}
|
|
||||||
value={skillForm.description}
|
|
||||||
onChange={e => setSkillForm({...skillForm, description: e.target.value})}
|
|
||||||
className="border-none min-h-[100px] text-[14px] resize-none py-3"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 flex flex-col gap-3">
|
|
||||||
{error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={!skillForm.name.trim() || loading}
|
|
||||||
className="w-full font-bold h-10"
|
|
||||||
style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
|
|
||||||
{t("project_create.create_skill")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "invite" && (
|
|
||||||
<form onSubmit={handleInviteUser} className="space-y-5">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.invite_email")}</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
|
|
||||||
<Input
|
|
||||||
autoFocus
|
|
||||||
placeholder={t("project_create.email_placeholder")}
|
|
||||||
value={inviteForm.email}
|
|
||||||
onChange={e => setInviteForm({...inviteForm, email: e.target.value})}
|
|
||||||
className="border-none h-10 pl-9 text-[14px]"
|
|
||||||
style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
|
|
||||||
type="email"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.role")}</Label>
|
|
||||||
<Select
|
|
||||||
value={inviteForm.scope}
|
|
||||||
onValueChange={(value) => setInviteForm({...inviteForm, scope: value as MemberRole})}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-10 border-none" style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem value="Member">{t("project_create.member_role")}</SelectItem>
|
|
||||||
<SelectItem value="Admin">{t("project_create.admin_role")}</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 flex flex-col gap-3">
|
|
||||||
{error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={!inviteForm.email.trim() || loading}
|
|
||||||
className="w-full font-bold h-10"
|
|
||||||
style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <UserPlus className="w-4 h-4 mr-2" />}
|
|
||||||
{t("project_create.send_invitation")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,482 +0,0 @@
|
|||||||
import {
|
|
||||||
useIssueAssigneesQuery,
|
|
||||||
useAddAssigneeMutation,
|
|
||||||
useRemoveAssigneeMutation,
|
|
||||||
useIssueLabelsQuery,
|
|
||||||
useAddIssueLabelMutation,
|
|
||||||
useRemoveIssueLabelMutation,
|
|
||||||
useProjectLabelsQuery,
|
|
||||||
useIssueSubscribersQuery,
|
|
||||||
useIssueSubscribeMutation,
|
|
||||||
useIssueUnsubscribeMutation,
|
|
||||||
useIssuePRsQuery,
|
|
||||||
useIssueReposQuery,
|
|
||||||
useLinkPRMutation,
|
|
||||||
useUnlinkPRMutation,
|
|
||||||
useLinkRepoMutation,
|
|
||||||
useUnlinkRepoMutation,
|
|
||||||
} from "@/hooks/useIssueExtraQuery"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
import { Badge } from "@/components/ui/badge"
|
|
||||||
import { Separator } from "@/components/ui/separator"
|
|
||||||
import {
|
|
||||||
Tag,
|
|
||||||
Bell,
|
|
||||||
GitPullRequest,
|
|
||||||
Link as LinkIcon,
|
|
||||||
Loader2,
|
|
||||||
Plus,
|
|
||||||
X,
|
|
||||||
Users,
|
|
||||||
Settings,
|
|
||||||
} from "lucide-react"
|
|
||||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
} from "@/components/ui/dropdown-menu"
|
|
||||||
import { useState } from "react"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog"
|
|
||||||
import { Input } from "@/components/ui/input"
|
|
||||||
import { t } from "@/i18n/T"
|
|
||||||
|
|
||||||
interface IssueSidebarProps {
|
|
||||||
projectName: string
|
|
||||||
issueNumber: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export function IssueSidebar({ projectName, issueNumber }: IssueSidebarProps) {
|
|
||||||
const { data: assignees = [] } = useIssueAssigneesQuery({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
})
|
|
||||||
const { data: issueLabels = [] } = useIssueLabelsQuery({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
})
|
|
||||||
const { data: projectLabels = [] } = useProjectLabelsQuery(projectName)
|
|
||||||
const { data: subscribers = [] } = useIssueSubscribersQuery({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
})
|
|
||||||
const { data: prs = [] } = useIssuePRsQuery({ projectName, issueNumber })
|
|
||||||
const { data: repos = [] } = useIssueReposQuery({ projectName, issueNumber })
|
|
||||||
|
|
||||||
const addAssignee = useAddAssigneeMutation()
|
|
||||||
const removeAssignee = useRemoveAssigneeMutation()
|
|
||||||
const addLabel = useAddIssueLabelMutation()
|
|
||||||
const removeLabel = useRemoveIssueLabelMutation()
|
|
||||||
const subscribe = useIssueSubscribeMutation()
|
|
||||||
const unsubscribe = useIssueUnsubscribeMutation()
|
|
||||||
const linkPR = useLinkPRMutation()
|
|
||||||
const unlinkPR = useUnlinkPRMutation()
|
|
||||||
const linkRepo = useLinkRepoMutation()
|
|
||||||
const unlinkRepo = useUnlinkRepoMutation()
|
|
||||||
|
|
||||||
const isSubscribed = subscribers.some((s) => s.user_id === "me")
|
|
||||||
|
|
||||||
const [showLinkPR, setShowLinkPR] = useState(false)
|
|
||||||
const [prRepo, setPrRepo] = useState("")
|
|
||||||
const [prNum, setPrNum] = useState("")
|
|
||||||
const [showLinkRepo, setShowLinkRepo] = useState(false)
|
|
||||||
const [repoName, setRepoName] = useState("")
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-5 rounded-2xl border border-border/70 bg-card/80 p-4 shadow-sm backdrop-blur">
|
|
||||||
{/* Assignees */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="group flex items-center justify-between">
|
|
||||||
<h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
|
|
||||||
<Users className="size-3.5" /> {t("project.issue_detail.assignees")}
|
|
||||||
<Badge
|
|
||||||
variant="secondary"
|
|
||||||
className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
|
|
||||||
>
|
|
||||||
{assignees.length}
|
|
||||||
</Badge>
|
|
||||||
</h3>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<button className="text-[10px] font-medium text-accent opacity-0 transition-opacity group-hover:opacity-100 hover:underline">
|
|
||||||
{t("project.issue_detail.edit")}
|
|
||||||
</button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end" className="w-48">
|
|
||||||
<DropdownMenuItem className="text-xs">
|
|
||||||
{t("project.issue_detail.assign_to_me")}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<p className="px-2 py-1.5 text-[10px] font-bold text-muted-foreground uppercase">
|
|
||||||
{t("project.issue_detail.suggestions")}
|
|
||||||
</p>
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() =>
|
|
||||||
addAssignee.mutate({ projectName, issueNumber, userId: "me" })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
admin
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 p-3">
|
|
||||||
{assignees.length === 0 ? (
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
{t("project.issue_detail.no_assigned")}
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
assignees.map((a) => (
|
|
||||||
<div
|
|
||||||
key={a.username}
|
|
||||||
className="group flex items-center gap-2 text-sm"
|
|
||||||
>
|
|
||||||
<Avatar className="size-5 rounded-full">
|
|
||||||
<AvatarFallback className="text-[10px]">
|
|
||||||
{a.username[0].toUpperCase()}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<span className="flex-1 truncate text-foreground">
|
|
||||||
{a.username}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
removeAssignee.mutate({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
userId: a.user_id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
|
|
||||||
>
|
|
||||||
<X className="size-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Labels */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="group flex items-center justify-between">
|
|
||||||
<h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
|
|
||||||
<Tag className="size-3.5" /> {t("project.issue_detail.labels")}
|
|
||||||
<Badge
|
|
||||||
variant="secondary"
|
|
||||||
className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
|
|
||||||
>
|
|
||||||
{issueLabels.length}
|
|
||||||
</Badge>
|
|
||||||
</h3>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<button className="text-[10px] font-medium text-accent opacity-0 transition-opacity group-hover:opacity-100 hover:underline">
|
|
||||||
{t("project.issue_detail.edit")}
|
|
||||||
</button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end" className="w-56">
|
|
||||||
<p className="px-2 py-1.5 text-[10px] font-bold text-muted-foreground uppercase">
|
|
||||||
{t("project.issue_detail.apply_labels")}
|
|
||||||
</p>
|
|
||||||
{projectLabels.map((l) => (
|
|
||||||
<DropdownMenuItem
|
|
||||||
key={l.id}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
onClick={() =>
|
|
||||||
addLabel.mutate({ projectName, issueNumber, labelId: l.id })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="size-2.5 rounded-full"
|
|
||||||
style={{ backgroundColor: l.color || "var(--accent)" }}
|
|
||||||
/>
|
|
||||||
<span className="flex-1">{l.name}</span>
|
|
||||||
{issueLabels.some((il) => il.label_name === l.name) && (
|
|
||||||
<Loader2 className="size-3 animate-spin" />
|
|
||||||
)}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
))}
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuItem className="text-accent">
|
|
||||||
<Settings className="mr-2" /> Manage labels
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-1 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 p-3">
|
|
||||||
{issueLabels.length === 0 ? (
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
{t("project.issue_detail.none_yet")}
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
issueLabels.map((l) => (
|
|
||||||
<Badge
|
|
||||||
key={l.label_name}
|
|
||||||
variant="outline"
|
|
||||||
className="h-5 border-border/70 bg-muted/40 px-1.5 text-[10px] text-foreground"
|
|
||||||
style={{
|
|
||||||
borderLeft: `3px solid ${l.label_color ?? "var(--accent)"}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{l.label_name}
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
removeLabel.mutate({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
labelId: l.label_id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className="ml-1 transition-colors hover:text-destructive"
|
|
||||||
>
|
|
||||||
<X className="size-2.5" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Notifications */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
|
|
||||||
<Bell className="size-3.5" />{" "}
|
|
||||||
{t("project.issue_detail.notifications")}
|
|
||||||
<Badge
|
|
||||||
variant="secondary"
|
|
||||||
className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
|
|
||||||
>
|
|
||||||
{subscribers.length}
|
|
||||||
</Badge>
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="h-8 w-full justify-start rounded-full text-xs"
|
|
||||||
onClick={() => {
|
|
||||||
if (isSubscribed) {
|
|
||||||
unsubscribe.mutate({ projectName, issueNumber })
|
|
||||||
} else {
|
|
||||||
subscribe.mutate({ projectName, issueNumber })
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isSubscribed
|
|
||||||
? t("project.issue_detail.unsubscribe")
|
|
||||||
: t("project.issue_detail.subscribe")}
|
|
||||||
</Button>
|
|
||||||
<p className="text-[10px] text-muted-foreground">
|
|
||||||
{t("project.issue_detail.subscribers_count", {
|
|
||||||
count: String(subscribers.length),
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Development */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
|
|
||||||
{t("project.issue_detail.development")}
|
|
||||||
<Badge
|
|
||||||
variant="secondary"
|
|
||||||
className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
|
|
||||||
>
|
|
||||||
{prs.length + repos.length}
|
|
||||||
</Badge>
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{prs.length > 0 && (
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-[10px] font-bold text-muted-foreground uppercase">
|
|
||||||
{t("project.issue_detail.pull_requests")}
|
|
||||||
</p>
|
|
||||||
{prs.map((pr) => (
|
|
||||||
<div
|
|
||||||
key={`${pr.repo}-${pr.number}`}
|
|
||||||
className="group flex items-center gap-1.5 text-xs"
|
|
||||||
>
|
|
||||||
<div className="flex cursor-pointer items-center gap-1.5 text-accent hover:underline">
|
|
||||||
<GitPullRequest className="size-3" />
|
|
||||||
<span>
|
|
||||||
#{pr.number} in {pr.repo}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
unlinkPR.mutate({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
repo: pr.repo!,
|
|
||||||
prNumber: pr.number!,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
|
|
||||||
>
|
|
||||||
<X className="size-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{repos.length > 0 && (
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-[10px] font-bold text-muted-foreground uppercase">
|
|
||||||
{t("project.issue_detail.linked_repos")}
|
|
||||||
</p>
|
|
||||||
{repos.map((r) => (
|
|
||||||
<div
|
|
||||||
key={r.repo}
|
|
||||||
className="group flex items-center gap-1.5 text-xs"
|
|
||||||
>
|
|
||||||
<div className="flex cursor-pointer items-center gap-1.5 text-accent hover:underline">
|
|
||||||
<LinkIcon className="size-3" />
|
|
||||||
<span>{r.repo}</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
unlinkRepo.mutate({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
repoId: r.repo!,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
|
|
||||||
>
|
|
||||||
<X className="size-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<button
|
|
||||||
className="flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 px-3 py-1.5 text-[10px] font-medium text-accent transition-colors hover:bg-[var(--hover-bg)]"
|
|
||||||
onClick={() => setShowLinkPR(true)}
|
|
||||||
>
|
|
||||||
<Plus className="size-3" /> {t("project.issue_detail.link_pr")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 px-3 py-1.5 text-[10px] font-medium text-accent transition-colors hover:bg-[var(--hover-bg)]"
|
|
||||||
onClick={() => setShowLinkRepo(true)}
|
|
||||||
>
|
|
||||||
<Plus className="size-3" /> {t("project.issue_detail.link_repo")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Link PR Dialog */}
|
|
||||||
<Dialog open={showLinkPR} onOpenChange={setShowLinkPR}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{t("project.issue_detail.link_pr_title")}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
className="text-xs font-medium"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
Repo
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
value={prRepo}
|
|
||||||
onChange={(e) => setPrRepo(e.target.value)}
|
|
||||||
placeholder="owner/repo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
className="text-xs font-medium"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
PR Number
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
value={prNum}
|
|
||||||
onChange={(e) => setPrNum(e.target.value)}
|
|
||||||
placeholder="123"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
className="rounded-full"
|
|
||||||
style={{ backgroundColor: "var(--accent)" }}
|
|
||||||
onClick={() => {
|
|
||||||
const parts = prRepo.split("/")
|
|
||||||
if (parts.length === 2 && prNum) {
|
|
||||||
linkPR.mutate({
|
|
||||||
projectName,
|
|
||||||
issueNumber,
|
|
||||||
repo: prRepo,
|
|
||||||
prNumber: Number(prNum),
|
|
||||||
})
|
|
||||||
setShowLinkPR(false)
|
|
||||||
setPrRepo("")
|
|
||||||
setPrNum("")
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={linkPR.isPending}
|
|
||||||
>
|
|
||||||
Link
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* Link Repo Dialog */}
|
|
||||||
<Dialog open={showLinkRepo} onOpenChange={setShowLinkRepo}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>
|
|
||||||
{t("project.issue_detail.link_repo_title")}
|
|
||||||
</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
className="text-xs font-medium"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
Repo
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
value={repoName}
|
|
||||||
onChange={(e) => setRepoName(e.target.value)}
|
|
||||||
placeholder="owner/repo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
className="rounded-full"
|
|
||||||
style={{ backgroundColor: "var(--accent)" }}
|
|
||||||
onClick={() => {
|
|
||||||
if (repoName) {
|
|
||||||
linkRepo.mutate({ projectName, issueNumber, repo: repoName })
|
|
||||||
setShowLinkRepo(false)
|
|
||||||
setRepoName("")
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={linkRepo.isPending}
|
|
||||||
>
|
|
||||||
Link
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
useIssueReactionsQuery,
|
|
||||||
} from "@/hooks/useIssueExtraQuery";
|
|
||||||
import { issueReactionAdd, issueReactionRemove } from "@/client/api";
|
|
||||||
import { useCurrentUserQuery } from "@/hooks/useAuth";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
import {
|
|
||||||
Popover,
|
|
||||||
PopoverContent,
|
|
||||||
PopoverTrigger
|
|
||||||
} from "@/components/ui/popover";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
interface ReactionBarProps {
|
|
||||||
projectName: string;
|
|
||||||
issueNumber: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const EMOJI_MAP: Record<string, string> = {
|
|
||||||
plus_one: "👍",
|
|
||||||
minus_one: "👎",
|
|
||||||
laugh: "😄",
|
|
||||||
hooray: "🎉",
|
|
||||||
confused: "😕",
|
|
||||||
heart: "❤️",
|
|
||||||
rocket: "🚀",
|
|
||||||
eyes: "👀",
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ReactionBar({ projectName, issueNumber }: ReactionBarProps) {
|
|
||||||
const { data: currentUser } = useCurrentUserQuery();
|
|
||||||
const { data: reactions } = useIssueReactionsQuery({ projectName, issueNumber });
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
|
|
||||||
const handleToggleReaction = async (reaction: string) => {
|
|
||||||
const existing = reactions?.reactions.find(r =>
|
|
||||||
r.reaction === reaction &&
|
|
||||||
r.users.includes(currentUser?.uid ?? "me")
|
|
||||||
);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (existing) {
|
|
||||||
await issueReactionRemove(projectName, issueNumber, reaction);
|
|
||||||
} else {
|
|
||||||
await issueReactionAdd(projectName, issueNumber, { reaction });
|
|
||||||
}
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["issue", projectName, issueNumber, "reactions"] });
|
|
||||||
setIsOpen(false);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to toggle reaction", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!reactions) return null;
|
|
||||||
|
|
||||||
const displayed = reactions.reactions.filter(r => r.count > 0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-wrap items-center gap-2 mt-4">
|
|
||||||
{displayed.map((r) => (
|
|
||||||
<button
|
|
||||||
key={r.reaction}
|
|
||||||
onClick={() => handleToggleReaction(r.reaction)}
|
|
||||||
className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors ${
|
|
||||||
r.users.includes(currentUser?.uid ?? "me")
|
|
||||||
? "border-[var(--accent)]"
|
|
||||||
: "border-transparent hover:border-[var(--border-default)]"
|
|
||||||
}`}
|
|
||||||
style={{
|
|
||||||
backgroundColor: r.users.includes(currentUser?.uid ?? "me") ? "rgba(var(--accent-rgb, 88, 101, 242), 0.1)" : "var(--surface-elevated)",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span>{EMOJI_MAP[r.reaction] || r.reaction}</span>
|
|
||||||
<span>{r.count}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="rounded-full w-7 h-7"
|
|
||||||
style={{ backgroundColor: "var(--surface-elevated)" }}
|
|
||||||
>
|
|
||||||
<Plus className="w-3.5 h-3.5" />
|
|
||||||
</Button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent className="w-auto p-1" style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }} side="top" align="start">
|
|
||||||
<div className="flex gap-1">
|
|
||||||
{Object.entries(EMOJI_MAP).map(([name, emoji]) => (
|
|
||||||
<button
|
|
||||||
key={name}
|
|
||||||
onClick={() => handleToggleReaction(name)}
|
|
||||||
className="p-1.5 hover:bg-[var(--surface-elevated)] rounded transition-colors text-lg"
|
|
||||||
style={{ borderColor: "var(--border-default)" }}
|
|
||||||
title={name}
|
|
||||||
>
|
|
||||||
{emoji}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { useCreateSkillMutation } from "@/hooks/useSkillsQuery";
|
|
||||||
|
|
||||||
interface CreateSkillDialogProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CreateSkillDialog({ open, onOpenChange }: CreateSkillDialogProps) {
|
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
|
||||||
const { mutate: createSkill, isPending } = useCreateSkillMutation(projectName);
|
|
||||||
|
|
||||||
const [slug, setSlug] = useState("");
|
|
||||||
const [name, setName] = useState("");
|
|
||||||
const [description, setDescription] = useState("");
|
|
||||||
const [content, setContent] = useState("");
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const reset = () => {
|
|
||||||
setSlug("");
|
|
||||||
setName("");
|
|
||||||
setDescription("");
|
|
||||||
setContent("");
|
|
||||||
setError(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOpenChange = (open: boolean) => {
|
|
||||||
if (!open) reset();
|
|
||||||
onOpenChange(open);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
if (!slug.trim()) {
|
|
||||||
setError("Slug is required");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!content.trim()) {
|
|
||||||
setError("Content is required");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setError(null);
|
|
||||||
createSkill(
|
|
||||||
{
|
|
||||||
slug: slug.trim(),
|
|
||||||
name: name.trim() || undefined,
|
|
||||||
description: description.trim() || undefined,
|
|
||||||
content: content.trim(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
onSuccess: () => handleOpenChange(false),
|
|
||||||
onError: (err) =>
|
|
||||||
setError(err instanceof Error ? err.message : "Create failed"),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
||||||
<DialogContent className="sm:max-w-lg">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Create skill</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
Add a new AI skill to the project.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="grid gap-4 py-2">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="slug">Slug *</Label>
|
|
||||||
<Input
|
|
||||||
id="slug"
|
|
||||||
value={slug}
|
|
||||||
onChange={(e) => setSlug(e.target.value)}
|
|
||||||
placeholder="my-skill"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="name">Name</Label>
|
|
||||||
<Input
|
|
||||||
id="name"
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
placeholder="My Skill"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="description">Description</Label>
|
|
||||||
<Input
|
|
||||||
id="description"
|
|
||||||
value={description}
|
|
||||||
onChange={(e) => setDescription(e.target.value)}
|
|
||||||
placeholder="What this skill does"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="content">Content *</Label>
|
|
||||||
<Textarea
|
|
||||||
id="content"
|
|
||||||
value={content}
|
|
||||||
onChange={(e) => setContent(e.target.value)}
|
|
||||||
placeholder="Skill content or prompt..."
|
|
||||||
rows={6}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{error && (
|
|
||||||
<p className="text-sm text-destructive">{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isPending}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleSubmit} disabled={isPending}>
|
|
||||||
{isPending ? "Creating..." : "Create"}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import {
|
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/components/ui/alert-dialog";
|
|
||||||
import { useDeleteSkillMutation } from "@/hooks/useSkillsQuery";
|
|
||||||
import type { SkillResponse } from "@/client/model";
|
|
||||||
|
|
||||||
interface DeleteSkillDialogProps {
|
|
||||||
skill: SkillResponse;
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
onDeleted?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DeleteSkillDialog({ skill, open, onOpenChange, onDeleted }: DeleteSkillDialogProps) {
|
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
|
||||||
const { mutate: deleteSkill, isPending } = useDeleteSkillMutation(projectName);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const handleDelete = () => {
|
|
||||||
setError(null);
|
|
||||||
deleteSkill(skill.slug, {
|
|
||||||
onSuccess: () => {
|
|
||||||
onOpenChange(false);
|
|
||||||
onDeleted?.();
|
|
||||||
},
|
|
||||||
onError: (err) => setError(err instanceof Error ? err.message : "Delete failed"),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Delete skill</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
Are you sure you want to delete <strong>{skill.name}</strong>? This action cannot be undone.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
{error && (
|
|
||||||
<p className="text-sm text-destructive mt-2">{error}</p>
|
|
||||||
)}
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
variant="destructive"
|
|
||||||
onClick={handleDelete}
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
{isPending ? "Deleting..." : "Delete"}
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user