Compare commits
No commits in common. "3a1a7b97db55c9b41630e782f5ed7324bddd6740" and "32bd760b77caa0d8cf8ddb934fe645951214eace" have entirely different histories.
3a1a7b97db
...
32bd760b77
@ -22,7 +22,6 @@ const TwoFactorPage = lazy(() => import("@/app/auth/two-factor").then(m => ({ de
|
|||||||
const VerifyEmailPage = lazy(() => import("@/app/auth/verify-email").then(m => ({ default: m.VerifyEmailPage })));
|
const VerifyEmailPage = lazy(() => import("@/app/auth/verify-email").then(m => ({ default: m.VerifyEmailPage })));
|
||||||
const ChangePasswordPage = lazy(() => import("@/app/auth/change-password").then(m => ({ default: m.ChangePasswordPage })));
|
const ChangePasswordPage = lazy(() => import("@/app/auth/change-password").then(m => ({ default: m.ChangePasswordPage })));
|
||||||
const MePage = lazy(() => import("@/app/me").then(m => ({ default: m.MePage })));
|
const MePage = lazy(() => import("@/app/me").then(m => ({ default: m.MePage })));
|
||||||
const MyInvitationsPage = lazy(() => import("@/app/me/MyInvitationsPage"));
|
|
||||||
const ChatPage = lazy(() => import("@/app/chat").then(m => ({ default: m.ChatPage })));
|
const ChatPage = lazy(() => import("@/app/chat").then(m => ({ default: m.ChatPage })));
|
||||||
const ExplorePage = lazy(() => import("@/app/explore/ExplorePage").then(m => ({ default: m.ExplorePage })));
|
const ExplorePage = lazy(() => import("@/app/explore/ExplorePage").then(m => ({ default: m.ExplorePage })));
|
||||||
const MyAccountPage = lazy(() => import("@/app/settings").then(m => ({ default: m.MyAccountPage })));
|
const MyAccountPage = lazy(() => import("@/app/settings").then(m => ({ default: m.MyAccountPage })));
|
||||||
@ -45,8 +44,6 @@ const CommitDetailPage = lazy(() => import("@/app/project").then(m => ({ default
|
|||||||
const IssueDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.IssueDetailPage })));
|
const IssueDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.IssueDetailPage })));
|
||||||
const SkillDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.SkillDetailPage })));
|
const SkillDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.SkillDetailPage })));
|
||||||
const PullRequestDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.PullRequestDetailPage })));
|
const PullRequestDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.PullRequestDetailPage })));
|
||||||
const ProjectJoinPage = lazy(() => import("@/app/project").then(m => ({ default: m.ProjectJoinPage })));
|
|
||||||
const ProjectInvitationPage = lazy(() => import("@/app/project").then(m => ({ default: m.ProjectInvitationPage })));
|
|
||||||
const GeneralSettings = lazy(() => import("@/app/project").then(m => ({ default: m.GeneralSettings })));
|
const GeneralSettings = lazy(() => import("@/app/project").then(m => ({ default: m.GeneralSettings })));
|
||||||
const MembersSettings = lazy(() => import("@/app/project").then(m => ({ default: m.MembersSettings })));
|
const MembersSettings = lazy(() => import("@/app/project").then(m => ({ default: m.MembersSettings })));
|
||||||
const AccessSettings = lazy(() => import("@/app/project").then(m => ({ default: m.AccessSettings })));
|
const AccessSettings = lazy(() => import("@/app/project").then(m => ({ default: m.AccessSettings })));
|
||||||
@ -99,7 +96,6 @@ export default function App() {
|
|||||||
<Route path="/me/followers" element={<MePage />} />
|
<Route path="/me/followers" element={<MePage />} />
|
||||||
<Route path="/me/following" element={<MePage />} />
|
<Route path="/me/following" element={<MePage />} />
|
||||||
<Route path="/me/notify" element={<MePage />} />
|
<Route path="/me/notify" element={<MePage />} />
|
||||||
<Route path="/me/invitations" element={<MyInvitationsPage />} />
|
|
||||||
<Route path="/me/chat" element={<ChatPage scope="personal" />} />
|
<Route path="/me/chat" element={<ChatPage scope="personal" />} />
|
||||||
<Route path="/me/chat/:conversationId" element={<ChatPage scope="personal" />} />
|
<Route path="/me/chat/:conversationId" element={<ChatPage scope="personal" />} />
|
||||||
<Route path="/explore" element={<ExplorePage />} />
|
<Route path="/explore" element={<ExplorePage />} />
|
||||||
@ -121,9 +117,6 @@ export default function App() {
|
|||||||
{/* Channel-based routes if any */}
|
{/* Channel-based routes if any */}
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Route path="/projects/:projectName/invitations" element={<ProjectInvitationPage />} />
|
|
||||||
<Route path="/:projectName/join" element={<ProjectJoinPage />} />
|
|
||||||
|
|
||||||
<Route path="/:projectName" element={<ProjectLayout />}>
|
<Route path="/:projectName" element={<ProjectLayout />}>
|
||||||
<Route index element={<Navigate to="repos" replace />} />
|
<Route index element={<Navigate to="repos" replace />} />
|
||||||
<Route path="repos" element={<ReposPage />} />
|
<Route path="repos" element={<ReposPage />} />
|
||||||
@ -171,4 +164,4 @@ export default function App() {
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -10,7 +10,6 @@ import { useProjectInfo } from "@/hooks/useProjectInfo";
|
|||||||
import { useConversationQuery } from "@/hooks/useAiChatQuery";
|
import { useConversationQuery } from "@/hooks/useAiChatQuery";
|
||||||
import { CodePreviewPanel } from "@/components/chat/CodePreviewPanel";
|
import { CodePreviewPanel } from "@/components/chat/CodePreviewPanel";
|
||||||
import { CodePreviewProvider, type CodePreviewPayload } from "@/components/chat/CodePreviewContext";
|
import { CodePreviewProvider, type CodePreviewPayload } from "@/components/chat/CodePreviewContext";
|
||||||
import { ProjectJoinBanner, useProjectLayout } from "@/app/project/layout";
|
|
||||||
|
|
||||||
interface ChatPageProps {
|
interface ChatPageProps {
|
||||||
scope: "personal" | "project";
|
scope: "personal" | "project";
|
||||||
@ -28,7 +27,6 @@ export function ChatPage({ scope }: ChatPageProps) {
|
|||||||
const [userModel, setSelectedModel] = useState<SelectedModel | null>(null);
|
const [userModel, setSelectedModel] = useState<SelectedModel | null>(null);
|
||||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
|
||||||
const [activeCode, setActiveCode] = useState<CodePreviewPayload | null>(null);
|
const [activeCode, setActiveCode] = useState<CodePreviewPayload | null>(null);
|
||||||
const { isProjectPreview } = useProjectLayout();
|
|
||||||
|
|
||||||
const { data: conversation } = useConversationQuery(selectedConversationId || "");
|
const { data: conversation } = useConversationQuery(selectedConversationId || "");
|
||||||
|
|
||||||
@ -133,36 +131,24 @@ export function ChatPage({ scope }: ChatPageProps) {
|
|||||||
{selectedConversationId ? (
|
{selectedConversationId ? (
|
||||||
<>
|
<>
|
||||||
<ChatMessageList conversationId={selectedConversationId} setIsStreaming={setIsStreaming} />
|
<ChatMessageList conversationId={selectedConversationId} setIsStreaming={setIsStreaming} />
|
||||||
{scope === "project" && isProjectPreview ? (
|
<ChatMessageInput
|
||||||
<div className="shrink-0 px-4 pb-4">
|
conversationId={selectedConversationId}
|
||||||
<div className="mx-auto max-w-3xl">
|
isStreaming={isStreaming}
|
||||||
<ProjectJoinBanner compact message="Join this project to start project chat." />
|
setIsStreaming={setIsStreaming}
|
||||||
</div>
|
onSelectConversation={handleSelectConversation}
|
||||||
</div>
|
/>
|
||||||
) : (
|
|
||||||
<ChatMessageInput
|
|
||||||
conversationId={selectedConversationId}
|
|
||||||
isStreaming={isStreaming}
|
|
||||||
setIsStreaming={setIsStreaming}
|
|
||||||
onSelectConversation={handleSelectConversation}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex-1 flex flex-col items-center justify-center px-4 gap-4">
|
<div className="flex-1 flex flex-col items-center justify-center px-4 gap-4">
|
||||||
<div className="w-full max-w-3xl">
|
<div className="w-full max-w-3xl">
|
||||||
<ChatMessageList conversationId={null} setIsStreaming={setIsStreaming} />
|
<ChatMessageList conversationId={null} setIsStreaming={setIsStreaming} />
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
{scope === "project" && isProjectPreview ? (
|
<ChatMessageInput
|
||||||
<ProjectJoinBanner compact message="Join this project to start project chat." />
|
conversationId={null}
|
||||||
) : (
|
isStreaming={isStreaming}
|
||||||
<ChatMessageInput
|
setIsStreaming={setIsStreaming}
|
||||||
conversationId={null}
|
onSelectConversation={handleSelectConversation}
|
||||||
isStreaming={isStreaming}
|
/>
|
||||||
setIsStreaming={setIsStreaming}
|
|
||||||
onSelectConversation={handleSelectConversation}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,250 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { Check, Loader2, Mail, X } from "lucide-react";
|
|
||||||
import {
|
|
||||||
projectAcceptInvitation,
|
|
||||||
projectCancelJoinRequest,
|
|
||||||
projectMyInvitations,
|
|
||||||
projectMyJoinRequests,
|
|
||||||
projectRejectInvitation,
|
|
||||||
} from "@/client/api";
|
|
||||||
import type { InvitationResponse, JoinRequestResponse } from "@/client/model";
|
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardAction,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
Empty,
|
|
||||||
EmptyDescription,
|
|
||||||
EmptyHeader,
|
|
||||||
EmptyMedia,
|
|
||||||
EmptyTitle,
|
|
||||||
} from "@/components/ui/empty";
|
|
||||||
|
|
||||||
type ActionKey = `invite:${string}` | `request:${number}` | null;
|
|
||||||
|
|
||||||
function formatDate(value?: string | null) {
|
|
||||||
if (!value) return "Unknown";
|
|
||||||
return new Intl.DateTimeFormat(undefined, {
|
|
||||||
dateStyle: "medium",
|
|
||||||
timeStyle: "short",
|
|
||||||
}).format(new Date(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
function statusVariant(status: string) {
|
|
||||||
if (status === "approved") return "default";
|
|
||||||
if (status === "rejected") return "destructive";
|
|
||||||
return "secondary";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function MyInvitationsPage() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [actionKey, setActionKey] = useState<ActionKey>(null);
|
|
||||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
|
||||||
|
|
||||||
const invitationsQuery = useQuery({
|
|
||||||
queryKey: ["project-my-invitations"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await projectMyInvitations({ page: 1, per_page: 50 });
|
|
||||||
return (res.data?.data?.invitations ?? []) as InvitationResponse[];
|
|
||||||
},
|
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const requestsQuery = useQuery({
|
|
||||||
queryKey: ["project-my-join-requests"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await projectMyJoinRequests({ page: 1, per_page: 50 });
|
|
||||||
return (res.data?.data?.requests ?? []) as JoinRequestResponse[];
|
|
||||||
},
|
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const invalidate = () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-my-invitations"] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-my-join-requests"] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["projects"] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInvitation = async (projectName: string, accept: boolean) => {
|
|
||||||
setActionKey(`invite:${projectName}`);
|
|
||||||
setMessage(null);
|
|
||||||
try {
|
|
||||||
if (accept) {
|
|
||||||
await projectAcceptInvitation(projectName);
|
|
||||||
} else {
|
|
||||||
await projectRejectInvitation(projectName);
|
|
||||||
}
|
|
||||||
setMessage({ type: "success", text: accept ? "Invitation accepted." : "Invitation rejected." });
|
|
||||||
invalidate();
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to process invitation." });
|
|
||||||
} finally {
|
|
||||||
setActionKey(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancelRequest = async (request: JoinRequestResponse) => {
|
|
||||||
setActionKey(`request:${request.id}`);
|
|
||||||
setMessage(null);
|
|
||||||
try {
|
|
||||||
await projectCancelJoinRequest(request.username, request.id);
|
|
||||||
setMessage({ type: "success", text: "Join request cancelled." });
|
|
||||||
invalidate();
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to cancel join request." });
|
|
||||||
} finally {
|
|
||||||
setActionKey(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const invitations = invitationsQuery.data ?? [];
|
|
||||||
const requests = requestsQuery.data ?? [];
|
|
||||||
const isLoading = invitationsQuery.isLoading || requestsQuery.isLoading;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full overflow-y-auto bg-background p-8">
|
|
||||||
<div className="mx-auto flex max-w-4xl flex-col gap-6">
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<h1 className="text-2xl font-semibold tracking-tight">Invitations</h1>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Review project invitations and track your join requests.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<Alert variant={message.type === "error" ? "destructive" : "default"}>
|
|
||||||
<AlertDescription>{message.text}</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Pending Invitations</CardTitle>
|
|
||||||
<CardDescription>Invitations sent by project admins.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col gap-3">
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-10">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : invitations.length === 0 ? (
|
|
||||||
<Empty>
|
|
||||||
<EmptyHeader>
|
|
||||||
<EmptyMedia variant="icon">
|
|
||||||
<Mail />
|
|
||||||
</EmptyMedia>
|
|
||||||
<EmptyTitle>No pending invitations</EmptyTitle>
|
|
||||||
<EmptyDescription>New project invitations will appear here.</EmptyDescription>
|
|
||||||
</EmptyHeader>
|
|
||||||
</Empty>
|
|
||||||
) : (
|
|
||||||
invitations.map((invitation) => {
|
|
||||||
const loading = actionKey === `invite:${invitation.project_name}`;
|
|
||||||
return (
|
|
||||||
<Card key={invitation.project_uid} size="sm" className="bg-muted/20">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Link to={`/${invitation.project_name}`} className="hover:underline">
|
|
||||||
{invitation.project_name}
|
|
||||||
</Link>
|
|
||||||
<Badge variant="secondary">{invitation.scope}</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Invited by {invitation.invited_by_username ?? "Unknown"} on{" "}
|
|
||||||
{formatDate(invitation.created_at)}
|
|
||||||
</CardDescription>
|
|
||||||
<CardAction className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleInvitation(invitation.project_name, true)}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
|
|
||||||
Accept
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handleInvitation(invitation.project_name, false)}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
<X data-icon="inline-start" />
|
|
||||||
Reject
|
|
||||||
</Button>
|
|
||||||
</CardAction>
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Join Requests</CardTitle>
|
|
||||||
<CardDescription>Your project membership applications.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col gap-3">
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-10">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : requests.length === 0 ? (
|
|
||||||
<Empty>
|
|
||||||
<EmptyHeader>
|
|
||||||
<EmptyTitle>No join requests</EmptyTitle>
|
|
||||||
<EmptyDescription>Projects you apply to join will be tracked here.</EmptyDescription>
|
|
||||||
</EmptyHeader>
|
|
||||||
</Empty>
|
|
||||||
) : (
|
|
||||||
requests.map((request) => {
|
|
||||||
const loading = actionKey === `request:${request.id}`;
|
|
||||||
return (
|
|
||||||
<Card key={request.id} size="sm" className="bg-muted/20">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Link to={`/${request.username}`} className="hover:underline">
|
|
||||||
{request.username}
|
|
||||||
</Link>
|
|
||||||
<Badge variant={statusVariant(request.status)}>{request.status}</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Submitted on {formatDate(request.created_at)}
|
|
||||||
{request.reject_reason ? ` · ${request.reject_reason}` : ""}
|
|
||||||
</CardDescription>
|
|
||||||
{request.status === "pending" && (
|
|
||||||
<CardAction>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handleCancelRequest(request)}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <X data-icon="inline-start" />}
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</CardAction>
|
|
||||||
)}
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MyInvitationsPage;
|
|
||||||
@ -8,7 +8,6 @@ import {
|
|||||||
Users,
|
Users,
|
||||||
MessageSquare,
|
MessageSquare,
|
||||||
Bell,
|
Bell,
|
||||||
Mail,
|
|
||||||
PanelLeftClose
|
PanelLeftClose
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import type { ComponentType } from "react";
|
import type { ComponentType } from "react";
|
||||||
@ -54,11 +53,6 @@ const ME_NAV_ITEMS: NavItem[] = [
|
|||||||
name: "Notifications",
|
name: "Notifications",
|
||||||
icon: Bell,
|
icon: Bell,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/me/invitations",
|
|
||||||
name: "Invitations",
|
|
||||||
icon: Mail,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/me/stars",
|
path: "/me/stars",
|
||||||
name: "Stars",
|
name: "Stars",
|
||||||
@ -212,4 +206,4 @@ export function MeSidebar({ onCollapse }: MeSidebarProps) {
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,151 +0,0 @@
|
|||||||
import { useMemo, useState } from "react";
|
|
||||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { Check, Loader2, Mail, X } from "lucide-react";
|
|
||||||
import {
|
|
||||||
projectAcceptInvitation,
|
|
||||||
projectMyInvitations,
|
|
||||||
projectRejectInvitation,
|
|
||||||
} from "@/client/api";
|
|
||||||
import type { InvitationResponse } from "@/client/model";
|
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardAction,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
Empty,
|
|
||||||
EmptyDescription,
|
|
||||||
EmptyHeader,
|
|
||||||
EmptyMedia,
|
|
||||||
EmptyTitle,
|
|
||||||
} from "@/components/ui/empty";
|
|
||||||
|
|
||||||
function formatDate(value?: string | null) {
|
|
||||||
if (!value) return "Unknown";
|
|
||||||
return new Intl.DateTimeFormat(undefined, {
|
|
||||||
dateStyle: "medium",
|
|
||||||
timeStyle: "short",
|
|
||||||
}).format(new Date(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ProjectInvitationPage() {
|
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
|
||||||
|
|
||||||
const { data: invitations = [], isLoading } = useQuery({
|
|
||||||
queryKey: ["project-my-invitations"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await projectMyInvitations({ page: 1, per_page: 50 });
|
|
||||||
return (res.data?.data?.invitations ?? []) as InvitationResponse[];
|
|
||||||
},
|
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const invitation = useMemo(
|
|
||||||
() => invitations.find((item) => item.project_name === projectName),
|
|
||||||
[invitations, projectName],
|
|
||||||
);
|
|
||||||
|
|
||||||
const invalidate = () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-my-invitations"] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["projects"] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDecision = async (accept: boolean) => {
|
|
||||||
if (!projectName) return;
|
|
||||||
setIsSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
try {
|
|
||||||
if (accept) {
|
|
||||||
await projectAcceptInvitation(projectName);
|
|
||||||
} else {
|
|
||||||
await projectRejectInvitation(projectName);
|
|
||||||
}
|
|
||||||
invalidate();
|
|
||||||
if (accept) {
|
|
||||||
navigate(`/${projectName}`, { replace: true });
|
|
||||||
} else {
|
|
||||||
setMessage({ type: "success", text: "Invitation rejected." });
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to process invitation." });
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex min-h-screen items-center justify-center bg-background p-6">
|
|
||||||
<div className="w-full max-w-xl">
|
|
||||||
{message && (
|
|
||||||
<Alert variant={message.type === "error" ? "destructive" : "default"} className="mb-4">
|
|
||||||
<AlertDescription>{message.text}</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Project Invitation</CardTitle>
|
|
||||||
<CardDescription>Accept or reject your invitation to join this project.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-16">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : !invitation ? (
|
|
||||||
<Empty>
|
|
||||||
<EmptyHeader>
|
|
||||||
<EmptyMedia variant="icon">
|
|
||||||
<Mail />
|
|
||||||
</EmptyMedia>
|
|
||||||
<EmptyTitle>No pending invitation</EmptyTitle>
|
|
||||||
<EmptyDescription>
|
|
||||||
This invitation may have already been processed. You can review all invitations from your profile.
|
|
||||||
</EmptyDescription>
|
|
||||||
</EmptyHeader>
|
|
||||||
<Button asChild variant="outline">
|
|
||||||
<Link to="/me/invitations">View invitations</Link>
|
|
||||||
</Button>
|
|
||||||
</Empty>
|
|
||||||
) : (
|
|
||||||
<Card size="sm" className="bg-muted/20">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
{invitation.project_name}
|
|
||||||
<Badge variant="secondary">{invitation.scope}</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Invited by {invitation.invited_by_username ?? "Unknown"} on {formatDate(invitation.created_at)}
|
|
||||||
</CardDescription>
|
|
||||||
<CardAction className="flex gap-2">
|
|
||||||
<Button onClick={() => handleDecision(true)} disabled={isSubmitting}>
|
|
||||||
{isSubmitting ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
|
|
||||||
Accept
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" onClick={() => handleDecision(false)} disabled={isSubmitting}>
|
|
||||||
<X data-icon="inline-start" />
|
|
||||||
Reject
|
|
||||||
</Button>
|
|
||||||
</CardAction>
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProjectInvitationPage;
|
|
||||||
@ -1,260 +0,0 @@
|
|||||||
import { useMemo, useState } from "react";
|
|
||||||
import { Link, useParams } from "react-router-dom";
|
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { Loader2, Send, X } from "lucide-react";
|
|
||||||
import {
|
|
||||||
projectCancelJoinRequest,
|
|
||||||
projectInfo,
|
|
||||||
projectJoinSettings,
|
|
||||||
projectMyJoinRequests,
|
|
||||||
projectSubmitJoinRequest,
|
|
||||||
} from "@/client/api";
|
|
||||||
import type {
|
|
||||||
AnswerRequest,
|
|
||||||
JoinRequestResponse,
|
|
||||||
JoinSettingsResponse,
|
|
||||||
ProjectInfoRelational,
|
|
||||||
QuestionSchema,
|
|
||||||
} from "@/client/model";
|
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardAction,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
|
|
||||||
function parseQuestions(settings?: JoinSettingsResponse | null): QuestionSchema[] {
|
|
||||||
if (!settings?.require_questions) return [];
|
|
||||||
if (Array.isArray(settings.questions)) {
|
|
||||||
return settings.questions
|
|
||||||
.map((item) => {
|
|
||||||
if (typeof item === "string") return { question: item };
|
|
||||||
if (item && typeof item === "object" && "question" in item) {
|
|
||||||
return { question: String((item as { question: unknown }).question ?? "") };
|
|
||||||
}
|
|
||||||
return { question: "" };
|
|
||||||
})
|
|
||||||
.filter((item) => item.question.trim().length > 0);
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(value?: string | null) {
|
|
||||||
if (!value) return "Unknown";
|
|
||||||
return new Intl.DateTimeFormat(undefined, {
|
|
||||||
dateStyle: "medium",
|
|
||||||
timeStyle: "short",
|
|
||||||
}).format(new Date(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
function statusVariant(status: string) {
|
|
||||||
if (status === "approved") return "default";
|
|
||||||
if (status === "rejected") return "destructive";
|
|
||||||
return "secondary";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ProjectJoinPage() {
|
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [message, setMessage] = useState("");
|
|
||||||
const [answers, setAnswers] = useState<Record<string, string>>({});
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [feedback, setFeedback] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
|
||||||
|
|
||||||
const projectQuery = useQuery({
|
|
||||||
queryKey: ["project-info", projectName],
|
|
||||||
queryFn: async (): Promise<ProjectInfoRelational | null> => {
|
|
||||||
if (!projectName) return null;
|
|
||||||
const res = await projectInfo(projectName);
|
|
||||||
return res.data?.data ?? null;
|
|
||||||
},
|
|
||||||
enabled: !!projectName,
|
|
||||||
retry: false,
|
|
||||||
staleTime: 60_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const settingsQuery = useQuery({
|
|
||||||
queryKey: ["project-join-settings", projectName],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await projectJoinSettings(projectName!);
|
|
||||||
return res.data?.data as JoinSettingsResponse;
|
|
||||||
},
|
|
||||||
enabled: !!projectName,
|
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const requestsQuery = useQuery({
|
|
||||||
queryKey: ["project-my-join-requests"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await projectMyJoinRequests({ page: 1, per_page: 50 });
|
|
||||||
return (res.data?.data?.requests ?? []) as JoinRequestResponse[];
|
|
||||||
},
|
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const questions = useMemo(() => parseQuestions(settingsQuery.data), [settingsQuery.data]);
|
|
||||||
const existingRequest = useMemo(
|
|
||||||
() => requestsQuery.data?.find((request) => request.username === projectName),
|
|
||||||
[projectName, requestsQuery.data],
|
|
||||||
);
|
|
||||||
|
|
||||||
const isMember = !!projectQuery.data?.role;
|
|
||||||
const isLoading = settingsQuery.isLoading || requestsQuery.isLoading;
|
|
||||||
const canJoinWithoutReason = !settingsQuery.data?.require_approval && questions.length === 0;
|
|
||||||
const missingRequiredAnswer = questions.some((item) => !answers[item.question]?.trim());
|
|
||||||
|
|
||||||
const invalidate = () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-my-join-requests"] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-info", projectName] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["projects"] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
if (!projectName || missingRequiredAnswer) return;
|
|
||||||
setIsSubmitting(true);
|
|
||||||
setFeedback(null);
|
|
||||||
try {
|
|
||||||
const payloadAnswers: AnswerRequest[] = questions.map((item) => ({
|
|
||||||
question: item.question,
|
|
||||||
answer: answers[item.question]?.trim() ?? "",
|
|
||||||
}));
|
|
||||||
await projectSubmitJoinRequest(projectName, {
|
|
||||||
message: message.trim() || null,
|
|
||||||
answers: payloadAnswers,
|
|
||||||
});
|
|
||||||
setMessage("");
|
|
||||||
setAnswers({});
|
|
||||||
setFeedback({ type: "success", text: "Join request submitted." });
|
|
||||||
invalidate();
|
|
||||||
} catch {
|
|
||||||
setFeedback({ type: "error", text: "Failed to submit join request." });
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = async () => {
|
|
||||||
if (!projectName || !existingRequest) return;
|
|
||||||
setIsSubmitting(true);
|
|
||||||
setFeedback(null);
|
|
||||||
try {
|
|
||||||
await projectCancelJoinRequest(projectName, existingRequest.id);
|
|
||||||
setFeedback({ type: "success", text: "Join request cancelled." });
|
|
||||||
invalidate();
|
|
||||||
} catch {
|
|
||||||
setFeedback({ type: "error", text: "Failed to cancel join request." });
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex min-h-screen items-center justify-center bg-background p-6">
|
|
||||||
<div className="w-full max-w-2xl">
|
|
||||||
{feedback && (
|
|
||||||
<Alert variant={feedback.type === "error" ? "destructive" : "default"} className="mb-4">
|
|
||||||
<AlertDescription>{feedback.text}</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Join {projectQuery.data?.display_name || projectName}</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{projectQuery.data?.description || "Submit a request to become a project member."}
|
|
||||||
</CardDescription>
|
|
||||||
{projectQuery.data && (
|
|
||||||
<CardAction>
|
|
||||||
<Badge variant={projectQuery.data.is_public ? "secondary" : "outline"}>
|
|
||||||
{projectQuery.data.is_public ? "Public" : "Private"}
|
|
||||||
</Badge>
|
|
||||||
</CardAction>
|
|
||||||
)}
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-16">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : isMember ? (
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<Alert>
|
|
||||||
<AlertDescription>You are already a member of this project.</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
<Button asChild>
|
|
||||||
<Link to={`/${projectName}`}>Open project</Link>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : existingRequest && existingRequest.status !== "cancelled" ? (
|
|
||||||
<Card size="sm" className="bg-muted/20">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
Current request
|
|
||||||
<Badge variant={statusVariant(existingRequest.status)}>{existingRequest.status}</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Submitted on {formatDate(existingRequest.created_at)}
|
|
||||||
{existingRequest.reject_reason ? ` · ${existingRequest.reject_reason}` : ""}
|
|
||||||
</CardDescription>
|
|
||||||
{existingRequest.status === "pending" && (
|
|
||||||
<CardAction>
|
|
||||||
<Button variant="outline" onClick={handleCancel} disabled={isSubmitting}>
|
|
||||||
{isSubmitting ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <X data-icon="inline-start" />}
|
|
||||||
Cancel request
|
|
||||||
</Button>
|
|
||||||
</CardAction>
|
|
||||||
)}
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<FieldGroup>
|
|
||||||
{!canJoinWithoutReason && (
|
|
||||||
<Field>
|
|
||||||
<FieldLabel htmlFor="join-message">Message</FieldLabel>
|
|
||||||
<Textarea
|
|
||||||
id="join-message"
|
|
||||||
value={message}
|
|
||||||
onChange={(event) => setMessage(event.target.value)}
|
|
||||||
placeholder="Tell the admins why you want to join."
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
<FieldDescription>Optional, but useful for private or approval-required projects.</FieldDescription>
|
|
||||||
</Field>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{questions.map((item, index) => (
|
|
||||||
<Field key={`${item.question}-${index}`} data-invalid={!answers[item.question]?.trim()}>
|
|
||||||
<FieldLabel htmlFor={`join-answer-${index}`}>{item.question}</FieldLabel>
|
|
||||||
<Input
|
|
||||||
id={`join-answer-${index}`}
|
|
||||||
value={answers[item.question] ?? ""}
|
|
||||||
onChange={(event) =>
|
|
||||||
setAnswers((current) => ({ ...current, [item.question]: event.target.value }))
|
|
||||||
}
|
|
||||||
aria-invalid={!answers[item.question]?.trim()}
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Button onClick={handleSubmit} disabled={isSubmitting || missingRequiredAnswer}>
|
|
||||||
{isSubmitting ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Send data-icon="inline-start" />}
|
|
||||||
{canJoinWithoutReason ? "Join project" : "Submit join request"}
|
|
||||||
</Button>
|
|
||||||
</FieldGroup>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProjectJoinPage;
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
|
import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import { AlertCircle, MessageSquare, Pin, X } from 'lucide-react';
|
import { AlertCircle } from 'lucide-react';
|
||||||
import {
|
import {
|
||||||
useWsConnected,
|
useWsConnected,
|
||||||
getWsClient,
|
getWsClient,
|
||||||
@ -8,18 +8,17 @@ import {
|
|||||||
import {
|
import {
|
||||||
useRoom,
|
useRoom,
|
||||||
} from '@/contexts/room';
|
} from '@/contexts/room';
|
||||||
import { ProjectJoinBanner, useProjectLayout } from '@/app/project/layout';
|
import { useProjectLayout } from '@/app/project/layout';
|
||||||
import type { Message, ReactionGroup, Member, ThreadState } from '@/contexts/room';
|
import type { Message, ReactionGroup, Member, ThreadState } from '@/contexts/room';
|
||||||
import {
|
import {
|
||||||
ThreadPanel,
|
ThreadPanel,
|
||||||
PinPanel,
|
|
||||||
EditHistoryOverlay,
|
EditHistoryOverlay,
|
||||||
MessageList,
|
MessageList,
|
||||||
MessageInput,
|
MessageInput,
|
||||||
} from '@/components/channel';
|
} from '@/components/channel';
|
||||||
import { MentionBottomSheet } from '@/components/channel/mention';
|
import { MentionBottomSheet } from '@/components/channel/mention';
|
||||||
import type { MentionSelection, MentionEntityType } from '@/components/channel/mention/types';
|
import type { MentionSelection, MentionEntityType } from '@/components/channel/mention/types';
|
||||||
import { projectRepos, aiList, skillList, threadCreate, threadMessages } from '@/client/api';
|
import { projectRepos, aiList, skillList } from '@/client/api';
|
||||||
|
|
||||||
function safeGetClient() {
|
function safeGetClient() {
|
||||||
try { return getWsClient(); } catch { return null; }
|
try { return getWsClient(); } catch { return null; }
|
||||||
@ -32,8 +31,6 @@ function ChannelPageInner() {
|
|||||||
wsStatus,
|
wsStatus,
|
||||||
currentRoom,
|
currentRoom,
|
||||||
members,
|
members,
|
||||||
pinnedMessages,
|
|
||||||
threads,
|
|
||||||
messages,
|
messages,
|
||||||
isHistoryLoaded,
|
isHistoryLoaded,
|
||||||
isLoadingMore,
|
isLoadingMore,
|
||||||
@ -41,13 +38,11 @@ function ChannelPageInner() {
|
|||||||
sendMessage,
|
sendMessage,
|
||||||
editMessage,
|
editMessage,
|
||||||
revokeMessage,
|
revokeMessage,
|
||||||
removePin,
|
|
||||||
setThreads,
|
|
||||||
typingUsers,
|
typingUsers,
|
||||||
} = useRoom();
|
} = useRoom();
|
||||||
|
|
||||||
const isConnected = useWsConnected();
|
const isConnected = useWsConnected();
|
||||||
const { isProjectPreview, setCurrentRoomName } = useProjectLayout();
|
const { setCurrentRoomName } = useProjectLayout();
|
||||||
|
|
||||||
// Sync room name to layout Header
|
// Sync room name to layout Header
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -60,7 +55,6 @@ function ChannelPageInner() {
|
|||||||
const [replyToMessageId, setReplyToMessageId] = useState<string | null>(null);
|
const [replyToMessageId, setReplyToMessageId] = useState<string | null>(null);
|
||||||
const [emojiPickerMessageId, setEmojiPickerMessageId] = useState<string | null>(null);
|
const [emojiPickerMessageId, setEmojiPickerMessageId] = useState<string | null>(null);
|
||||||
const [activeThread, setActiveThread] = useState<ThreadState | null>(null);
|
const [activeThread, setActiveThread] = useState<ThreadState | null>(null);
|
||||||
const [sidePanel, setSidePanel] = useState<'pins' | 'threads' | null>(null);
|
|
||||||
const [editHistoryMessageId, setEditHistoryMessageId] = useState<string | null>(null);
|
const [editHistoryMessageId, setEditHistoryMessageId] = useState<string | null>(null);
|
||||||
const [uploading, setUploading] = useState(false);
|
const [uploading, setUploading] = useState(false);
|
||||||
|
|
||||||
@ -81,7 +75,7 @@ function ChannelPageInner() {
|
|||||||
|
|
||||||
// Fetch AI agents, repos, and skills in parallel when room opens
|
// Fetch AI agents, repos, and skills in parallel when room opens
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!roomIdParam || isProjectPreview) return;
|
if (!roomIdParam) return;
|
||||||
const projectName = window.location.pathname.split('/')[1];
|
const projectName = window.location.pathname.split('/')[1];
|
||||||
|
|
||||||
Promise.all([
|
Promise.all([
|
||||||
@ -106,7 +100,7 @@ function ChannelPageInner() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}, [isProjectPreview, roomIdParam]);
|
}, [roomIdParam]);
|
||||||
|
|
||||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
@ -119,10 +113,10 @@ function ChannelPageInner() {
|
|||||||
|
|
||||||
// Sync room name to layout Header
|
// Sync room name to layout Header
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isProjectPreview && wsStatus === 'connected' && isConnected) {
|
if (wsStatus === 'connected' && isConnected) {
|
||||||
loadHistory();
|
loadHistory();
|
||||||
}
|
}
|
||||||
}, [isProjectPreview, wsStatus, isConnected, loadHistory]);
|
}, [wsStatus, isConnected, loadHistory]);
|
||||||
|
|
||||||
// Load older messages when scrolling to top
|
// Load older messages when scrolling to top
|
||||||
const handleStartReached = useCallback(() => {
|
const handleStartReached = useCallback(() => {
|
||||||
@ -143,7 +137,6 @@ function ChannelPageInner() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
if (isProjectPreview) return;
|
|
||||||
const currentValue = e.target.value;
|
const currentValue = e.target.value;
|
||||||
setInputValue(currentValue);
|
setInputValue(currentValue);
|
||||||
|
|
||||||
@ -207,7 +200,7 @@ function ChannelPageInner() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSendMessage = () => {
|
const handleSendMessage = () => {
|
||||||
if (isProjectPreview || !inputValue.trim()) return;
|
if (!inputValue.trim()) return;
|
||||||
const content = resolveContent(inputValue);
|
const content = resolveContent(inputValue);
|
||||||
if (editingMessageId) {
|
if (editingMessageId) {
|
||||||
editMessage(editingMessageId, content);
|
editMessage(editingMessageId, content);
|
||||||
@ -353,98 +346,35 @@ function ChannelPageInner() {
|
|||||||
|
|
||||||
// ── Thread ──
|
// ── Thread ──
|
||||||
|
|
||||||
const normalizeThreadMessages = useCallback((parent: Message | null, threadMsgs: Message[]) => {
|
const openThread = useCallback(
|
||||||
const map = new Map<string, Message>();
|
async (msg: Message) => {
|
||||||
if (parent) map.set(parent.id, parent);
|
if (!roomIdParam || !msg.thread) return;
|
||||||
for (const msg of threadMsgs) map.set(msg.id, msg);
|
|
||||||
return [...map.values()].sort((a, b) => a.seq - b.seq);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const openThreadByState = useCallback(
|
|
||||||
async (thread: ThreadState, parentMessage?: Message | null) => {
|
|
||||||
if (isProjectPreview || !roomIdParam) return;
|
|
||||||
try {
|
try {
|
||||||
const res = await threadMessages(roomIdParam, thread.id, { limit: 100 });
|
const { threadMessages } = await import('@/client/api');
|
||||||
const threadMsgs: Message[] = (res.data?.data?.messages ?? []).map((r) => ({
|
const res = await threadMessages(roomIdParam, msg.thread);
|
||||||
...r,
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
_localReactions: [],
|
const threadMsgs: Message[] = (res.data?.data?.messages ?? []).map((r: any) => ({
|
||||||
is_streaming: false,
|
...r, _localReactions: [], is_streaming: false, isOptimistic: false, isOptimisticError: false, thinking_content: null,
|
||||||
isOptimistic: false,
|
|
||||||
isOptimisticError: false,
|
|
||||||
thinking_content: null,
|
|
||||||
}));
|
}));
|
||||||
const parent = parentMessage ?? messages.find((m) => m.seq === thread.parent) ?? null;
|
|
||||||
setActiveThread({
|
setActiveThread({
|
||||||
...thread,
|
id: msg.thread, parent: msg.seq, created_by: '', participants: [],
|
||||||
messages: normalizeThreadMessages(parent, threadMsgs),
|
last_message_at: new Date().toISOString(), last_message_preview: null,
|
||||||
isOpen: true,
|
created_at: '', messages: threadMsgs, isOpen: true,
|
||||||
});
|
});
|
||||||
setSidePanel(null);
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[ChannelPage] failed to open thread:', err);
|
console.error('[ChannelPage] failed to open thread:', err);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[isProjectPreview, messages, normalizeThreadMessages, roomIdParam],
|
[roomIdParam],
|
||||||
);
|
);
|
||||||
|
|
||||||
const openThread = useCallback(
|
|
||||||
async (msg: Message) => {
|
|
||||||
if (isProjectPreview || !roomIdParam) return;
|
|
||||||
const existing = threads.find((t) => t.id === msg.thread || t.parent === msg.seq);
|
|
||||||
if (existing) {
|
|
||||||
await openThreadByState(existing, msg);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await threadCreate(roomIdParam, { parent_seq: msg.seq });
|
|
||||||
const data = res.data?.data;
|
|
||||||
if (!data) return;
|
|
||||||
const nextThread: ThreadState = {
|
|
||||||
id: data.id,
|
|
||||||
parent: data.parent,
|
|
||||||
created_by: data.created_by,
|
|
||||||
participants: data.participants,
|
|
||||||
last_message_at: data.last_message_at,
|
|
||||||
last_message_preview: data.last_message_preview ?? null,
|
|
||||||
created_at: data.created_at,
|
|
||||||
messages: [msg],
|
|
||||||
isOpen: true,
|
|
||||||
};
|
|
||||||
setThreads((prev) => (prev.some((t) => t.id === nextThread.id) ? prev : [...prev, nextThread]));
|
|
||||||
setActiveThread(nextThread);
|
|
||||||
setSidePanel(null);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[ChannelPage] failed to create thread:', err);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[isProjectPreview, openThreadByState, roomIdParam, setThreads, threads],
|
|
||||||
);
|
|
||||||
|
|
||||||
const displayedThread = useMemo(() => {
|
|
||||||
if (!activeThread) return null;
|
|
||||||
const parent = messages.find((m) => m.seq === activeThread.parent) ?? null;
|
|
||||||
const liveThreadMessages = messages.filter((m) => m.thread === activeThread.id);
|
|
||||||
const merged = normalizeThreadMessages(parent, [...activeThread.messages, ...liveThreadMessages]);
|
|
||||||
return { ...activeThread, messages: merged };
|
|
||||||
}, [activeThread, messages, normalizeThreadMessages]);
|
|
||||||
|
|
||||||
const closeThread = () => setActiveThread(null);
|
const closeThread = () => setActiveThread(null);
|
||||||
|
|
||||||
const gotoMessage = useCallback((messageId: string) => {
|
|
||||||
setSidePanel(null);
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
const escape = window.CSS?.escape ?? ((value: string) => value.replace(/"/g, '\\"'));
|
|
||||||
const el = document.querySelector(`[data-message-id="${escape(messageId)}"]`);
|
|
||||||
el?.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// ── File upload ──
|
// ── File upload ──
|
||||||
|
|
||||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
if (isProjectPreview || !files || files.length === 0 || !roomIdParam) return;
|
if (!files || files.length === 0 || !roomIdParam) return;
|
||||||
setUploading(true);
|
setUploading(true);
|
||||||
try {
|
try {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
@ -494,45 +424,6 @@ function ChannelPageInner() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: '8px 16px', borderBottom: '1px solid var(--border-subtle)' }}>
|
|
||||||
<button
|
|
||||||
onClick={() => { setActiveThread(null); setSidePanel((prev) => (prev === 'pins' ? null : 'pins')); }}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 6,
|
|
||||||
padding: '5px 10px',
|
|
||||||
border: '1px solid var(--border-default)',
|
|
||||||
borderRadius: 8,
|
|
||||||
background: sidePanel === 'pins' ? 'var(--surface-elevated)' : 'transparent',
|
|
||||||
color: 'var(--text-secondary)',
|
|
||||||
fontSize: 12,
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Pin className="w-3 h-3" />
|
|
||||||
Pins {pinnedMessages.length}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => { setActiveThread(null); setSidePanel((prev) => (prev === 'threads' ? null : 'threads')); }}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 6,
|
|
||||||
padding: '5px 10px',
|
|
||||||
border: '1px solid var(--border-default)',
|
|
||||||
borderRadius: 8,
|
|
||||||
background: sidePanel === 'threads' ? 'var(--surface-elevated)' : 'transparent',
|
|
||||||
color: 'var(--text-secondary)',
|
|
||||||
fontSize: 12,
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MessageSquare className="w-3 h-3" />
|
|
||||||
Threads {threads.length}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MessageList
|
<MessageList
|
||||||
messages={messages}
|
messages={messages}
|
||||||
isLoadingHistory={isLoadingMore}
|
isLoadingHistory={isLoadingMore}
|
||||||
@ -547,7 +438,6 @@ function ChannelPageInner() {
|
|||||||
onShowEditHistory={setEditHistoryMessageId}
|
onShowEditHistory={setEditHistoryMessageId}
|
||||||
onStartReached={handleStartReached}
|
onStartReached={handleStartReached}
|
||||||
roomId={roomIdParam}
|
roomId={roomIdParam}
|
||||||
readOnly={isProjectPreview}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{mentionOpen && (
|
{mentionOpen && (
|
||||||
@ -573,98 +463,36 @@ function ChannelPageInner() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isProjectPreview ? (
|
<MessageInput
|
||||||
<div className="shrink-0 p-4">
|
value={inputValue}
|
||||||
<ProjectJoinBanner compact message="Join this project to send messages in channels." />
|
roomName={currentRoom?.room_name ?? roomIdParam}
|
||||||
</div>
|
isConnected={isConnected}
|
||||||
) : (
|
isEditing={!!editingMessageId}
|
||||||
<MessageInput
|
replyToMessageId={replyToMessageId}
|
||||||
value={inputValue}
|
uploading={uploading}
|
||||||
roomName={currentRoom?.room_name ?? roomIdParam}
|
inputRef={inputRef}
|
||||||
isConnected={isConnected}
|
fileInputRef={fileInputRef}
|
||||||
isEditing={!!editingMessageId}
|
onChange={handleInputChange}
|
||||||
replyToMessageId={replyToMessageId}
|
onKeyDown={handleKeyDown}
|
||||||
uploading={uploading}
|
onSend={handleSendMessage}
|
||||||
inputRef={inputRef}
|
onFileSelect={handleFileSelect}
|
||||||
fileInputRef={fileInputRef}
|
onCancelReply={() => setReplyToMessageId(null)}
|
||||||
onChange={handleInputChange}
|
onCancelEdit={() => { setEditingMessageId(null); setInputValue(''); pendingMentionsRef.current.clear(); }}
|
||||||
onKeyDown={handleKeyDown}
|
onMention={handleOpenMention}
|
||||||
onSend={handleSendMessage}
|
/>
|
||||||
onFileSelect={handleFileSelect}
|
|
||||||
onCancelReply={() => setReplyToMessageId(null)}
|
|
||||||
onCancelEdit={() => { setEditingMessageId(null); setInputValue(''); pendingMentionsRef.current.clear(); }}
|
|
||||||
onMention={handleOpenMention}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeThread && (
|
{activeThread && (
|
||||||
<ThreadPanel
|
<ThreadPanel
|
||||||
thread={displayedThread ?? activeThread}
|
thread={activeThread}
|
||||||
typingUsers={typingUsersList}
|
typingUsers={typingUsersList}
|
||||||
onClose={closeThread}
|
onClose={closeThread}
|
||||||
sendMessage={(content: string, opts?: { contentType?: string; thread?: string; inReplyTo?: string; attachmentIds?: string[] }) => sendMessage(content, opts)}
|
sendMessage={(content: string, opts?: { contentType?: string; thread?: string; inReplyTo?: string; attachmentIds?: string[] }) => sendMessage(content, opts)}
|
||||||
onTypingStart={() => { const c = safeGetClient(); if (c) c.sendTypingStart(roomIdParam); }}
|
onTypingStart={() => { const c = safeGetClient(); if (c) c.sendTypingStart(roomIdParam); }}
|
||||||
onTypingStop={() => { const c = safeGetClient(); if (c) c.sendTypingStop(roomIdParam); }}
|
onTypingStop={() => { const c = safeGetClient(); if (c) c.sendTypingStop(roomIdParam); }}
|
||||||
readOnly={isProjectPreview}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!activeThread && sidePanel === 'pins' && (
|
|
||||||
<PinPanel
|
|
||||||
pins={pinnedMessages}
|
|
||||||
messages={messages}
|
|
||||||
onClose={() => setSidePanel(null)}
|
|
||||||
onGotoMessage={gotoMessage}
|
|
||||||
onUnpin={isProjectPreview ? undefined : (messageId) => {
|
|
||||||
removePin(messageId).catch((err) => console.error('[ChannelPage] failed to unpin message:', err));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!activeThread && sidePanel === 'threads' && (
|
|
||||||
<div className="thread-panel">
|
|
||||||
<div className="thread-panel-header">
|
|
||||||
<div className="thread-panel-title">
|
|
||||||
<MessageSquare className="w-4 h-4" style={{ color: 'var(--text-primary)' }} />
|
|
||||||
<span style={{ color: 'var(--text-primary)', fontWeight: 600, fontSize: 14 }}>Threads</span>
|
|
||||||
</div>
|
|
||||||
<button onClick={() => setSidePanel(null)} className="thread-close-btn" title="Close Threads">
|
|
||||||
<X className="w-4 h-4" style={{ color: 'var(--text-muted)' }} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="thread-messages">
|
|
||||||
{threads.length === 0 ? (
|
|
||||||
<div style={{ color: 'var(--text-muted)', fontSize: 13, padding: 12 }}>
|
|
||||||
No threads yet. Use the message action menu to start one.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
threads.map((thread) => {
|
|
||||||
const parent = messages.find((msg) => msg.seq === thread.parent) ?? null;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={thread.id}
|
|
||||||
onClick={() => openThreadByState(thread, parent)}
|
|
||||||
className="thread-list-item"
|
|
||||||
disabled={isProjectPreview}
|
|
||||||
>
|
|
||||||
<span style={{ fontSize: 13, fontWeight: 600 }}>
|
|
||||||
{parent?.display_name ?? `Message #${thread.parent}`}
|
|
||||||
</span>
|
|
||||||
<span style={{ color: 'var(--text-secondary)', fontSize: 12, lineHeight: 1.4 }}>
|
|
||||||
{thread.last_message_preview ?? parent?.content ?? 'Thread has no replies yet.'}
|
|
||||||
</span>
|
|
||||||
<span style={{ color: 'var(--text-muted)', fontSize: 11 }}>
|
|
||||||
Updated {new Date(thread.last_message_at).toLocaleString()}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{editHistoryMessageId && (
|
{editHistoryMessageId && (
|
||||||
<EditHistoryOverlay
|
<EditHistoryOverlay
|
||||||
messageId={editHistoryMessageId}
|
messageId={editHistoryMessageId}
|
||||||
|
|||||||
@ -15,5 +15,3 @@ export { AccessSettings } from "./settings/AccessSettings";
|
|||||||
export { LabelsSettings } from "./settings/LabelsSettings";
|
export { LabelsSettings } from "./settings/LabelsSettings";
|
||||||
export { BillingSettings } from "./settings/BillingSettings";
|
export { BillingSettings } from "./settings/BillingSettings";
|
||||||
export { ProjectCreateMenuModal } from "./components/ProjectCreateMenuModal";
|
export { ProjectCreateMenuModal } from "./components/ProjectCreateMenuModal";
|
||||||
export { ProjectJoinPage } from "./ProjectJoinPage";
|
|
||||||
export { ProjectInvitationPage } from "./ProjectInvitationPage";
|
|
||||||
|
|||||||
@ -23,7 +23,6 @@ import { memo, useState, useMemo, useDeferredValue, useRef, useCallback } from "
|
|||||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||||
import { stripMarkdown, truncate } from "@/lib/utils";
|
import { stripMarkdown, truncate } from "@/lib/utils";
|
||||||
import type { IssueResponse, IssueLabelResponse } from "@/client/model";
|
import type { IssueResponse, IssueLabelResponse } from "@/client/model";
|
||||||
import { useProjectLayout } from "@/app/project/layout";
|
|
||||||
|
|
||||||
interface IssueRowProps {
|
interface IssueRowProps {
|
||||||
issue: IssueResponse;
|
issue: IssueResponse;
|
||||||
@ -109,7 +108,6 @@ const OVERSCAN = 5;
|
|||||||
export function IssuesPage() {
|
export function IssuesPage() {
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
const { projectName } = useParams<{ projectName: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { isProjectPreview } = useProjectLayout();
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open');
|
const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open');
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
@ -201,15 +199,13 @@ export function IssuesPage() {
|
|||||||
<h1 className={ISSUES_PAGE.pageTitle}>Issues</h1>
|
<h1 className={ISSUES_PAGE.pageTitle}>Issues</h1>
|
||||||
<p className={ISSUES_PAGE.pageSub}>Track and manage project tasks and bugs</p>
|
<p className={ISSUES_PAGE.pageSub}>Track and manage project tasks and bugs</p>
|
||||||
</div>
|
</div>
|
||||||
{!isProjectPreview && (
|
<button
|
||||||
<button
|
onClick={() => navigate(`/${projectName}/issues/new`)}
|
||||||
onClick={() => navigate(`/${projectName}/issues/new`)}
|
className={ISSUES_PAGE.newBtn}
|
||||||
className={ISSUES_PAGE.newBtn}
|
>
|
||||||
>
|
<Plus className="w-4 h-4" />
|
||||||
<Plus className="w-4 h-4" />
|
New issue
|
||||||
New issue
|
</button>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Toolbar */}
|
{/* Toolbar */}
|
||||||
@ -272,7 +268,7 @@ export function IssuesPage() {
|
|||||||
<p className="text-sm text-muted-foreground mt-1 mb-6 text-center max-w-[300px]">
|
<p className="text-sm text-muted-foreground mt-1 mb-6 text-center max-w-[300px]">
|
||||||
{searchQuery ? "Try adjusting your search or filters to find what you're looking for." : "You're all caught up! Create an issue to track new tasks."}
|
{searchQuery ? "Try adjusting your search or filters to find what you're looking for." : "You're all caught up! Create an issue to track new tasks."}
|
||||||
</p>
|
</p>
|
||||||
{!isProjectPreview && !searchQuery && activeTab === 'open' && (
|
{!searchQuery && activeTab === 'open' && (
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate(`/${projectName}/issues/new`)}
|
onClick={() => navigate(`/${projectName}/issues/new`)}
|
||||||
className={ISSUES_PAGE.newBtn}
|
className={ISSUES_PAGE.newBtn}
|
||||||
@ -311,4 +307,4 @@ export function IssuesPage() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default IssuesPage;
|
export default IssuesPage;
|
||||||
@ -11,12 +11,10 @@ import {
|
|||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
Info
|
Info
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { ProjectJoinBanner, useProjectLayout } from "@/app/project/layout";
|
|
||||||
|
|
||||||
export function NewIssuePage() {
|
export function NewIssuePage() {
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
const { projectName } = useParams<{ projectName: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { isProjectPreview } = useProjectLayout();
|
|
||||||
|
|
||||||
const [title, setTitle] = useState("");
|
const [title, setTitle] = useState("");
|
||||||
const [body, setBody] = useState("");
|
const [body, setBody] = useState("");
|
||||||
@ -24,16 +22,6 @@ export function NewIssuePage() {
|
|||||||
|
|
||||||
const createMutation = useCreateIssueMutation(projectName);
|
const createMutation = useCreateIssueMutation(projectName);
|
||||||
|
|
||||||
if (isProjectPreview) {
|
|
||||||
return (
|
|
||||||
<div className={ISSUES_PAGE.container}>
|
|
||||||
<div className="max-w-[800px] w-full mx-auto mt-8">
|
|
||||||
<ProjectJoinBanner message="Join this project before creating issues." />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!title.trim()) {
|
if (!title.trim()) {
|
||||||
|
|||||||
@ -1,24 +1,19 @@
|
|||||||
import { Link, Outlet, useMatch, useParams } from "react-router-dom";
|
import { Outlet, useMatch, useParams } from "react-router-dom";
|
||||||
import { createContext, useContext, useState } from "react";
|
import { useState } from "react";
|
||||||
import { Lock, PanelLeftOpen } from "lucide-react";
|
import { PanelLeftOpen } from "lucide-react";
|
||||||
import { ServerIconRail } from "@/components/layout/ServerIconRail";
|
import { ServerIconRail } from "@/components/layout/ServerIconRail";
|
||||||
import { ChannelSidebar } from "@/components/layout/ChannelSidebar";
|
import { ChannelSidebar } from "@/components/layout/ChannelSidebar";
|
||||||
import { Header } from "@/components/layout/Header";
|
import { Header } from "@/components/layout/Header";
|
||||||
import { MemberList } from "@/components/layout/MemberList";
|
import { MemberList } from "@/components/layout/MemberList";
|
||||||
import { RoomProvider } from "@/contexts/room";
|
import { RoomProvider } from "@/contexts/room";
|
||||||
|
import { createContext, useContext } from "react";
|
||||||
import { useIsMobile, useIsTablet } from "@/hooks/use-mobile";
|
import { useIsMobile, useIsTablet } from "@/hooks/use-mobile";
|
||||||
import { useProjectInfo } from "@/hooks/useProjectInfo";
|
|
||||||
import type { ProjectInfoRelational } from "@/client/model";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
interface ProjectContextType {
|
interface ProjectContextType {
|
||||||
showMembers: boolean;
|
showMembers: boolean;
|
||||||
setShowMembers: (v: boolean) => void;
|
setShowMembers: (v: boolean) => void;
|
||||||
currentRoomName: string | null;
|
currentRoomName: string | null;
|
||||||
setCurrentRoomName: (name: string | null) => void;
|
setCurrentRoomName: (name: string | null) => void;
|
||||||
projectInfo: ProjectInfoRelational | null;
|
|
||||||
isProjectMember: boolean;
|
|
||||||
isProjectPreview: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProjectContext = createContext<ProjectContextType>({
|
const ProjectContext = createContext<ProjectContextType>({
|
||||||
@ -26,78 +21,29 @@ const ProjectContext = createContext<ProjectContextType>({
|
|||||||
setShowMembers: () => {},
|
setShowMembers: () => {},
|
||||||
currentRoomName: null,
|
currentRoomName: null,
|
||||||
setCurrentRoomName: () => {},
|
setCurrentRoomName: () => {},
|
||||||
projectInfo: null,
|
|
||||||
isProjectMember: false,
|
|
||||||
isProjectPreview: false,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// eslint-disable-next-line react-refresh/only-export-components
|
// eslint-disable-next-line react-refresh/only-export-components
|
||||||
export const useProjectLayout = () => useContext(ProjectContext);
|
export const useProjectLayout = () => useContext(ProjectContext);
|
||||||
|
|
||||||
export function ProjectJoinBanner({
|
|
||||||
compact = false,
|
|
||||||
message = "Join this project to participate and use project tools.",
|
|
||||||
}: {
|
|
||||||
compact?: boolean;
|
|
||||||
message?: string;
|
|
||||||
}) {
|
|
||||||
const { projectInfo } = useProjectLayout();
|
|
||||||
const projectName = projectInfo?.name;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`flex ${compact ? "items-center justify-between gap-3 rounded-lg px-4 py-3" : "items-start justify-between gap-4 px-6 py-4"} border bg-muted/30`}
|
|
||||||
style={{ borderColor: "var(--border-subtle)" }}
|
|
||||||
>
|
|
||||||
<div className="flex min-w-0 items-start gap-3">
|
|
||||||
<div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
||||||
<Lock className="size-4" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="text-sm font-medium text-foreground">Preview mode</p>
|
|
||||||
<p className="text-sm text-muted-foreground">{message}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{projectName && (
|
|
||||||
<Button asChild size={compact ? "sm" : "default"} className="shrink-0">
|
|
||||||
<Link to={`/${projectName}/join`}>Apply to join</Link>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ProjectLayout() {
|
export function ProjectLayout() {
|
||||||
const [showMembers, setShowMembers] = useState(false);
|
const [showMembers, setShowMembers] = useState(false);
|
||||||
const [currentRoomName, setCurrentRoomName] = useState<string | null>(null);
|
const [currentRoomName, setCurrentRoomName] = useState<string | null>(null);
|
||||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
const { projectName } = useParams<{ projectName: string }>();
|
||||||
const { data: projectInfo = null } = useProjectInfo(projectName);
|
|
||||||
const channelMatch = useMatch("/:projectName/channel/:roomId");
|
const channelMatch = useMatch("/:projectName/channel/:roomId");
|
||||||
const chatMatch = useMatch("/:projectName/chat/*");
|
const chatMatch = useMatch("/:projectName/chat/*");
|
||||||
const roomId = channelMatch?.params.roomId ?? null;
|
const roomId = channelMatch?.params.roomId ?? null;
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
const isTablet = useIsTablet();
|
const isTablet = useIsTablet();
|
||||||
|
|
||||||
const isProjectMember = !!projectInfo?.role;
|
const canShowMembers = !isMobile && !isTablet;
|
||||||
const isProjectPreview = !!projectInfo && !projectInfo.role;
|
|
||||||
const canShowMembers = !isMobile && !isTablet && isProjectMember;
|
|
||||||
|
|
||||||
const mainShouldOwnScroll = !channelMatch && !chatMatch;
|
const mainShouldOwnScroll = !channelMatch && !chatMatch;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ProjectContext.Provider
|
<ProjectContext.Provider value={{ showMembers, setShowMembers, currentRoomName, setCurrentRoomName }}>
|
||||||
value={{
|
<RoomProvider roomId={roomId} projectName={projectName}>
|
||||||
showMembers,
|
|
||||||
setShowMembers,
|
|
||||||
currentRoomName,
|
|
||||||
setCurrentRoomName,
|
|
||||||
projectInfo,
|
|
||||||
isProjectMember,
|
|
||||||
isProjectPreview,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<RoomProvider roomId={isProjectMember ? roomId : null} projectName={projectName}>
|
|
||||||
<div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--surface-ground)" }}>
|
<div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--surface-ground)" }}>
|
||||||
{!isMobile && <ServerIconRail />}
|
{!isMobile && <ServerIconRail />}
|
||||||
|
|
||||||
@ -143,16 +89,6 @@ export function ProjectLayout() {
|
|||||||
style={{ backgroundColor: "var(--surface-ground)" }}
|
style={{ backgroundColor: "var(--surface-ground)" }}
|
||||||
>
|
>
|
||||||
<Header />
|
<Header />
|
||||||
{isProjectPreview && (
|
|
||||||
<ProjectJoinBanner
|
|
||||||
compact
|
|
||||||
message={
|
|
||||||
projectInfo?.is_public
|
|
||||||
? "This public project is read-only until you join."
|
|
||||||
: "You need to join before using project actions."
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<main
|
<main
|
||||||
className={mainShouldOwnScroll ? "flex-1 overflow-y-auto" : "flex-1 overflow-hidden min-h-0"}
|
className={mainShouldOwnScroll ? "flex-1 overflow-y-auto" : "flex-1 overflow-hidden min-h-0"}
|
||||||
style={{ backgroundColor: "var(--surface-ground)" }}
|
style={{ backgroundColor: "var(--surface-ground)" }}
|
||||||
|
|||||||
@ -1,560 +1,192 @@
|
|||||||
import { useMemo, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
import { Check, Copy, Loader2, Mail, Plus, Shield, Trash2, User, X } from "lucide-react";
|
|
||||||
import {
|
import {
|
||||||
projectCancelInvitation,
|
projectInvitations, projectInviteUser, projectCancelInvitation,
|
||||||
projectInvitations,
|
projectJoinSettings, projectUpdateJoinSettings,
|
||||||
projectInviteUser,
|
projectJoinRequests, projectProcessJoinRequest,
|
||||||
projectJoinAnswers,
|
|
||||||
projectJoinRequests,
|
|
||||||
projectJoinSettings,
|
|
||||||
projectProcessJoinRequest,
|
|
||||||
projectUpdateJoinSettings,
|
|
||||||
} from "@/client/api";
|
} from "@/client/api";
|
||||||
import type {
|
import type { InvitationResponse, JoinSettingsResponse, JoinRequestResponse, MemberRole, QuestionSchema } from "@/client/model";
|
||||||
InvitationResponse,
|
|
||||||
JoinAnswerResponse,
|
|
||||||
JoinRequestResponse,
|
|
||||||
JoinSettingsResponse,
|
|
||||||
MemberRole,
|
|
||||||
QuestionSchema,
|
|
||||||
} from "@/client/model";
|
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardAction,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
Empty,
|
|
||||||
EmptyDescription,
|
|
||||||
EmptyHeader,
|
|
||||||
EmptyMedia,
|
|
||||||
EmptyTitle,
|
|
||||||
} from "@/components/ui/empty";
|
|
||||||
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import {
|
import { Loader2, Mail, X, Check, Shield, User, EyeOff } from "lucide-react";
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectGroup,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
|
|
||||||
type ActionKey = `invite:${string}` | `request:${number}:${"approve" | "reject"}` | "settings" | null;
|
|
||||||
|
|
||||||
function parseQuestions(settings?: JoinSettingsResponse | null): QuestionSchema[] {
|
|
||||||
if (!settings || !Array.isArray(settings.questions)) return [];
|
|
||||||
return settings.questions
|
|
||||||
.map((item) => {
|
|
||||||
if (typeof item === "string") return { question: item };
|
|
||||||
if (item && typeof item === "object" && "question" in item) {
|
|
||||||
return { question: String((item as { question: unknown }).question ?? "") };
|
|
||||||
}
|
|
||||||
return { question: "" };
|
|
||||||
})
|
|
||||||
.filter((item) => item.question.trim().length > 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(value?: string | null) {
|
|
||||||
if (!value) return "Unknown";
|
|
||||||
return new Intl.DateTimeFormat(undefined, {
|
|
||||||
dateStyle: "medium",
|
|
||||||
timeStyle: "short",
|
|
||||||
}).format(new Date(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
function getInvitationUrl(projectName?: string) {
|
|
||||||
if (!projectName) return "";
|
|
||||||
return `${window.location.origin}/projects/${projectName}/invitations`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function JoinRequestAnswers({ projectName, requestId }: { projectName: string; requestId: number }) {
|
|
||||||
const { data = [], isLoading } = useQuery({
|
|
||||||
queryKey: ["project-join-answers", projectName, requestId],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await projectJoinAnswers(projectName, requestId);
|
|
||||||
return (res.data?.data?.answers ?? []) as JoinAnswerResponse[];
|
|
||||||
},
|
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
Loading answers...
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.length === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-2 rounded-lg bg-muted/30 p-3">
|
|
||||||
{data.map((answer) => (
|
|
||||||
<div key={`${answer.question}-${answer.created_at}`} className="flex flex-col gap-1">
|
|
||||||
<span className="text-xs font-medium text-muted-foreground">{answer.question}</span>
|
|
||||||
<span className="text-sm">{answer.answer}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AccessSettings() {
|
export function AccessSettings() {
|
||||||
const { projectName } = useParams<{ projectName: string }>();
|
const { projectName } = useParams<{ projectName: string }>();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [inviteForm, setInviteForm] = useState({ email: "", scope: "Member" as MemberRole });
|
|
||||||
const [requestRoles, setRequestRoles] = useState<Record<number, MemberRole>>({});
|
|
||||||
const [rejectReasons, setRejectReasons] = useState<Record<number, string>>({});
|
|
||||||
const [settingsDraft, setSettingsDraft] = useState<{
|
|
||||||
require_approval: boolean;
|
|
||||||
require_questions: boolean;
|
|
||||||
questions: QuestionSchema[];
|
|
||||||
} | null>(null);
|
|
||||||
const [actionKey, setActionKey] = useState<ActionKey>(null);
|
|
||||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
|
||||||
|
|
||||||
const invitationsQuery = useQuery({
|
// Invitations
|
||||||
|
const { data: invData, isLoading: invLoading } = useQuery({
|
||||||
queryKey: ["project-invitations", projectName],
|
queryKey: ["project-invitations", projectName],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await projectInvitations(projectName!, { page: 1, per_page: 50 });
|
const res = await projectInvitations(projectName!, {});
|
||||||
return (res.data?.data?.invitations ?? []) as InvitationResponse[];
|
return (res.data?.data?.invitations ?? []) as InvitationResponse[];
|
||||||
},
|
},
|
||||||
enabled: !!projectName,
|
enabled: !!projectName, staleTime: 30_000,
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const settingsQuery = useQuery({
|
// Join settings
|
||||||
|
const { data: joinSettings, isLoading: jsLoading } = useQuery({
|
||||||
queryKey: ["project-join-settings", projectName],
|
queryKey: ["project-join-settings", projectName],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await projectJoinSettings(projectName!);
|
const res = await projectJoinSettings(projectName!);
|
||||||
return res.data?.data as JoinSettingsResponse;
|
return res.data?.data as JoinSettingsResponse;
|
||||||
},
|
},
|
||||||
enabled: !!projectName,
|
enabled: !!projectName, staleTime: 30_000,
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const requestsQuery = useQuery({
|
// Join requests
|
||||||
|
const { data: joinReqs } = useQuery({
|
||||||
queryKey: ["project-join-requests", projectName],
|
queryKey: ["project-join-requests", projectName],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await projectJoinRequests(projectName!, { status: "pending", page: 1, per_page: 50 });
|
const res = await projectJoinRequests(projectName!, { status: "pending" });
|
||||||
return (res.data?.data?.requests ?? []) as JoinRequestResponse[];
|
return (res.data?.data?.requests ?? []) as JoinRequestResponse[];
|
||||||
},
|
},
|
||||||
enabled: !!projectName,
|
enabled: !!projectName, staleTime: 30_000,
|
||||||
staleTime: 30_000,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const currentSettings = useMemo(() => {
|
const [inviteForm, setInviteForm] = useState({ email: "", scope: "Member" as MemberRole });
|
||||||
if (!settingsQuery.data) return null;
|
const [sending, setSending] = useState(false);
|
||||||
return {
|
const [actionLoading, setActionLoading] = useState<string | number | null>(null);
|
||||||
require_approval: settingsQuery.data.require_approval,
|
const [jsSaving, setJsSaving] = useState(false);
|
||||||
require_questions: settingsQuery.data.require_questions,
|
const [msg, setMsg] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||||
questions: parseQuestions(settingsQuery.data),
|
|
||||||
};
|
|
||||||
}, [settingsQuery.data]);
|
|
||||||
|
|
||||||
const draft = settingsDraft ?? currentSettings;
|
|
||||||
const pendingInvitations = (invitationsQuery.data ?? []).filter((item) => !item.accepted && !item.rejected);
|
|
||||||
const pendingRequests = requestsQuery.data ?? [];
|
|
||||||
|
|
||||||
const invalidateAll = () => {
|
const invalidateAll = () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-invitations", projectName] });
|
queryClient.invalidateQueries({ queryKey: ["project-invitations", projectName] });
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-join-settings", projectName] });
|
queryClient.invalidateQueries({ queryKey: ["project-join-settings", projectName] });
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-join-requests", projectName] });
|
queryClient.invalidateQueries({ queryKey: ["project-join-requests", projectName] });
|
||||||
queryClient.invalidateQueries({ queryKey: ["project-members-grouped", projectName] });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleInvite = async () => {
|
const handleInvite = async () => {
|
||||||
if (!projectName || !inviteForm.email.trim()) return;
|
if (!inviteForm.email.trim()) return;
|
||||||
setActionKey("settings");
|
try { setSending(true); setMsg(null); await projectInviteUser(projectName!, { email: inviteForm.email.trim(), scope: inviteForm.scope }); setMsg({ type: "success", text: "Invitation sent" }); setInviteForm({ email: "", scope: "Member" }); invalidateAll(); }
|
||||||
setMessage(null);
|
catch { setMsg({ type: "error", text: "Failed to send invitation" }); }
|
||||||
try {
|
finally { setSending(false); }
|
||||||
await projectInviteUser(projectName, {
|
|
||||||
email: inviteForm.email.trim(),
|
|
||||||
scope: inviteForm.scope,
|
|
||||||
});
|
|
||||||
setInviteForm({ email: "", scope: "Member" });
|
|
||||||
setMessage({ type: "success", text: "Invitation sent." });
|
|
||||||
invalidateAll();
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to send invitation." });
|
|
||||||
} finally {
|
|
||||||
setActionKey(null);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancelInvite = async (userId: string) => {
|
const handleCancelInvite = async (userId: string) => {
|
||||||
if (!projectName) return;
|
try { setActionLoading(userId); await projectCancelInvitation(projectName!, userId); invalidateAll(); }
|
||||||
setActionKey(`invite:${userId}`);
|
catch { setMsg({ type: "error", text: "Failed to cancel invitation" }); }
|
||||||
setMessage(null);
|
finally { setActionLoading(null); }
|
||||||
try {
|
|
||||||
await projectCancelInvitation(projectName, userId);
|
|
||||||
setMessage({ type: "success", text: "Invitation cancelled." });
|
|
||||||
invalidateAll();
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to cancel invitation." });
|
|
||||||
} finally {
|
|
||||||
setActionKey(null);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleProcessRequest = async (request: JoinRequestResponse, approve: boolean) => {
|
const handleProcessRequest = async (reqId: number, approve: boolean) => {
|
||||||
if (!projectName) return;
|
try { setActionLoading(reqId); await projectProcessJoinRequest(projectName!, reqId, { approve, scope: "Member", reject_reason: approve ? null : "Rejected" }); setMsg({ type: "success", text: approve ? "Request approved" : "Request rejected" }); invalidateAll(); }
|
||||||
setActionKey(`request:${request.id}:${approve ? "approve" : "reject"}`);
|
catch { setMsg({ type: "error", text: "Failed to process request" }); }
|
||||||
setMessage(null);
|
finally { setActionLoading(null); }
|
||||||
try {
|
|
||||||
await projectProcessJoinRequest(projectName, request.id, {
|
|
||||||
approve,
|
|
||||||
scope: requestRoles[request.id] ?? "Member",
|
|
||||||
reject_reason: approve ? null : rejectReasons[request.id]?.trim() || "Rejected",
|
|
||||||
});
|
|
||||||
setMessage({ type: "success", text: approve ? "Join request approved." : "Join request rejected." });
|
|
||||||
invalidateAll();
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to process join request." });
|
|
||||||
} finally {
|
|
||||||
setActionKey(null);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveSettings = async () => {
|
const handleToggleApproval = async () => {
|
||||||
if (!projectName || !draft) return;
|
if (!joinSettings) return;
|
||||||
const questions = draft.require_questions
|
try { setJsSaving(true); await projectUpdateJoinSettings(projectName!, { require_approval: !joinSettings.require_approval, require_questions: joinSettings.require_questions, questions: (joinSettings.questions as QuestionSchema[]) || [] }); setMsg({ type: "success", text: "Join settings updated" }); invalidateAll(); }
|
||||||
? draft.questions.map((item) => ({ question: item.question.trim() })).filter((item) => item.question)
|
catch { setMsg({ type: "error", text: "Failed to update join settings" }); }
|
||||||
: [];
|
finally { setJsSaving(false); }
|
||||||
setActionKey("settings");
|
|
||||||
setMessage(null);
|
|
||||||
try {
|
|
||||||
await projectUpdateJoinSettings(projectName, {
|
|
||||||
require_approval: draft.require_approval,
|
|
||||||
require_questions: draft.require_questions,
|
|
||||||
questions,
|
|
||||||
});
|
|
||||||
setSettingsDraft(null);
|
|
||||||
setMessage({ type: "success", text: "Join settings saved." });
|
|
||||||
invalidateAll();
|
|
||||||
} catch {
|
|
||||||
setMessage({ type: "error", text: "Failed to save join settings." });
|
|
||||||
} finally {
|
|
||||||
setActionKey(null);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCopyInviteLink = async () => {
|
|
||||||
if (!projectName) return;
|
|
||||||
await navigator.clipboard.writeText(getInvitationUrl(projectName));
|
|
||||||
setMessage({ type: "success", text: "Invitation link copied." });
|
|
||||||
};
|
|
||||||
|
|
||||||
const isSettingsDirty = settingsDraft !== null;
|
|
||||||
const isSettingsSaving = actionKey === "settings";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-6">
|
<div className="space-y-8">
|
||||||
{message && (
|
{msg && <div className="text-[13px]" style={{ color: msg.type === "success" ? "var(--success)" : "var(--destructive)" }}>{msg.text}</div>}
|
||||||
<Alert variant={message.type === "error" ? "destructive" : "default"}>
|
|
||||||
<AlertDescription>{message.text}</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card>
|
{/* Invite */}
|
||||||
<CardHeader>
|
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||||
<CardTitle>Invite Member</CardTitle>
|
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>Invite Member</h2>
|
||||||
<CardDescription>Invite an existing user by email. The invitee can accept or reject from their invitations page.</CardDescription>
|
<div className="flex gap-2">
|
||||||
<CardAction>
|
<Input
|
||||||
<Button size="sm" variant="outline" onClick={handleCopyInviteLink}>
|
value={inviteForm.email}
|
||||||
<Copy data-icon="inline-start" />
|
onChange={e => setInviteForm(f => ({ ...f, email: e.target.value }))}
|
||||||
Copy invite link
|
placeholder="user@example.com"
|
||||||
</Button>
|
className="text-[14px] flex-1"
|
||||||
</CardAction>
|
style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)", color: "var(--text-primary)" }}
|
||||||
</CardHeader>
|
/>
|
||||||
<CardContent>
|
<select
|
||||||
<FieldGroup>
|
value={inviteForm.scope}
|
||||||
<Field>
|
onChange={e => setInviteForm(f => ({ ...f, scope: e.target.value as MemberRole }))}
|
||||||
<FieldLabel htmlFor="invite-email">Email</FieldLabel>
|
className="text-[14px] px-3 rounded-md"
|
||||||
<div className="flex flex-col gap-2 sm:flex-row">
|
style={{ backgroundColor: "var(--surface-ground)", border: "1px solid var(--border-default)", color: "var(--text-primary)" }}
|
||||||
<Input
|
>
|
||||||
id="invite-email"
|
<option value="Admin">Admin</option>
|
||||||
value={inviteForm.email}
|
<option value="Member">Member</option>
|
||||||
onChange={(event) => setInviteForm((current) => ({ ...current, email: event.target.value }))}
|
</select>
|
||||||
placeholder="user@example.com"
|
<Button size="sm" onClick={handleInvite} disabled={sending || !inviteForm.email.trim()} style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
|
||||||
type="email"
|
{sending ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Mail className="w-3.5 h-3.5 mr-1" />}
|
||||||
/>
|
Invite
|
||||||
<Select
|
</Button>
|
||||||
value={inviteForm.scope}
|
</div>
|
||||||
onValueChange={(value) => setInviteForm((current) => ({ ...current, scope: value as MemberRole }))}
|
</section>
|
||||||
>
|
|
||||||
<SelectTrigger className="w-full sm:w-36">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem value="Member">Member</SelectItem>
|
|
||||||
<SelectItem value="Admin">Admin</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<Button onClick={handleInvite} disabled={isSettingsSaving || !inviteForm.email.trim()}>
|
|
||||||
{isSettingsSaving ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Mail data-icon="inline-start" />}
|
|
||||||
Invite
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<FieldDescription>Copied invitation links open the invite decision page for this project.</FieldDescription>
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
{/* Pending Invitations */}
|
||||||
<CardHeader>
|
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||||
<CardTitle>Join Settings</CardTitle>
|
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
|
||||||
<CardDescription>Control whether users can apply to join and whether they must answer questions.</CardDescription>
|
Pending Invitations {invData ? `(${invData.filter(i => !i.accepted && !i.rejected).length})` : ""}
|
||||||
<CardAction>
|
</h2>
|
||||||
<Button size="sm" onClick={handleSaveSettings} disabled={!isSettingsDirty || isSettingsSaving}>
|
{invLoading ? <Loader2 className="w-4 h-4 animate-spin" /> :
|
||||||
{isSettingsSaving ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
|
!invData?.length ? <p className="text-[13px]" style={{ color: "var(--text-muted)" }}>No pending invitations</p> :
|
||||||
Save
|
<div className="space-y-1">
|
||||||
</Button>
|
{invData.filter(i => !i.accepted && !i.rejected).map(inv => (
|
||||||
</CardAction>
|
<div key={inv.user_uid} className="flex items-center justify-between py-2 px-3 rounded" style={{ backgroundColor: "var(--surface-ground)" }}>
|
||||||
</CardHeader>
|
<div className="flex items-center gap-2">
|
||||||
<CardContent>
|
{inv.scope === "Admin" ? <Shield className="w-4 h-4" style={{ color: "var(--role-orange)" }} /> : <User className="w-4 h-4" style={{ color: "var(--role-blue)" }} />}
|
||||||
{settingsQuery.isLoading || !draft ? (
|
<span className="text-[13px]" style={{ color: "var(--text-primary)" }}>{inv.user_uid}</span>
|
||||||
<div className="flex items-center justify-center py-10">
|
<span className="text-[11px] px-1.5 py-0.5 rounded" style={{ backgroundColor: "var(--hover-bg)", color: "var(--text-muted)" }}>{inv.scope}</span>
|
||||||
<Loader2 className="animate-spin" />
|
</div>
|
||||||
|
<Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--destructive)" }} onClick={() => handleCancelInvite(inv.user_uid)} disabled={actionLoading === inv.user_uid}>
|
||||||
|
{actionLoading === inv.user_uid ? <Loader2 className="w-3 h-3 animate-spin" /> : <X className="w-3 h-3" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
}
|
||||||
<FieldGroup>
|
</section>
|
||||||
<Field orientation="horizontal">
|
|
||||||
<Switch
|
|
||||||
checked={draft.require_approval}
|
|
||||||
onCheckedChange={(checked) =>
|
|
||||||
setSettingsDraft({ ...draft, require_approval: checked })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<FieldLabel>Require admin approval</FieldLabel>
|
|
||||||
<FieldDescription>Submitted join requests remain pending until an admin approves them.</FieldDescription>
|
|
||||||
</div>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field orientation="horizontal">
|
{/* Join Settings */}
|
||||||
<Switch
|
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||||
checked={draft.require_questions}
|
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>Join Settings</h2>
|
||||||
onCheckedChange={(checked) =>
|
{jsLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : joinSettings ? (
|
||||||
setSettingsDraft({
|
<div className="flex items-center justify-between">
|
||||||
...draft,
|
<div>
|
||||||
require_questions: checked,
|
<p className="text-[14px] font-medium" style={{ color: "var(--text-primary)" }}>
|
||||||
questions: checked && draft.questions.length === 0 ? [{ question: "" }] : draft.questions,
|
{joinSettings.require_approval ? "Approval required" : "Open access"}
|
||||||
})
|
</p>
|
||||||
}
|
<p className="text-[12px]" style={{ color: "var(--text-muted)" }}>
|
||||||
/>
|
{joinSettings.require_approval ? "New members must be approved by an admin" : "Anyone can join without approval"}
|
||||||
<div className="flex flex-col gap-1">
|
</p>
|
||||||
<FieldLabel>Require answers</FieldLabel>
|
</div>
|
||||||
<FieldDescription>Ask applicants to answer project-specific questions.</FieldDescription>
|
<Button size="sm" variant="outline" onClick={handleToggleApproval} disabled={jsSaving}>
|
||||||
</div>
|
{jsSaving ? <Loader2 className="w-3.5 h-3.5 mr-2 animate-spin" /> : joinSettings.require_approval ? <EyeOff className="w-3.5 h-3.5 mr-2" /> : <Check className="w-3.5 h-3.5 mr-2" />}
|
||||||
</Field>
|
{joinSettings.require_approval ? "Disable Approval" : "Require Approval"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
|
||||||
{draft.require_questions && (
|
{/* Pending Join Requests */}
|
||||||
<Field>
|
{joinSettings?.require_approval && (
|
||||||
<FieldLabel>Questions</FieldLabel>
|
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||||
<div className="flex flex-col gap-2">
|
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
|
||||||
{draft.questions.map((item, index) => (
|
Pending Join Requests {joinReqs ? `(${joinReqs.length})` : ""}
|
||||||
<div key={index} className="flex gap-2">
|
</h2>
|
||||||
<Input
|
{!joinReqs?.length ? <p className="text-[13px]" style={{ color: "var(--text-muted)" }}>No pending requests</p> :
|
||||||
value={item.question}
|
<div className="space-y-1">
|
||||||
onChange={(event) => {
|
{joinReqs.map(req => (
|
||||||
const nextQuestions = [...draft.questions];
|
<div key={req.id} className="flex items-center justify-between py-2 px-3 rounded" style={{ backgroundColor: "var(--surface-ground)" }}>
|
||||||
nextQuestions[index] = { question: event.target.value };
|
<div className="flex items-center gap-2">
|
||||||
setSettingsDraft({ ...draft, questions: nextQuestions });
|
<span className="text-[13px]" style={{ color: "var(--text-primary)" }}>{req.username}</span>
|
||||||
}}
|
{req.message && <span className="text-[12px] truncate max-w-[200px]" style={{ color: "var(--text-muted)" }}>{req.message}</span>}
|
||||||
placeholder="What do you want to ask?"
|
</div>
|
||||||
/>
|
<div className="flex items-center gap-1">
|
||||||
<Button
|
<Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--success)" }} onClick={() => handleProcessRequest(req.id, true)} disabled={actionLoading === req.id}>
|
||||||
type="button"
|
{actionLoading === req.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <Check className="w-3.5 h-3.5" />}
|
||||||
variant="outline"
|
</Button>
|
||||||
size="icon"
|
<Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--destructive)" }} onClick={() => handleProcessRequest(req.id, false)} disabled={actionLoading === req.id}>
|
||||||
onClick={() =>
|
{actionLoading === req.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <X className="w-3.5 h-3.5" />}
|
||||||
setSettingsDraft({
|
|
||||||
...draft,
|
|
||||||
questions: draft.questions.filter((_, questionIndex) => questionIndex !== index),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Trash2 />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setSettingsDraft({ ...draft, questions: [...draft.questions, { question: "" }] })}
|
|
||||||
>
|
|
||||||
<Plus data-icon="inline-start" />
|
|
||||||
Add question
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Field>
|
</div>
|
||||||
)}
|
))}
|
||||||
</FieldGroup>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Pending Invitations</CardTitle>
|
|
||||||
<CardDescription>Invitations that have not been accepted or rejected.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col gap-3">
|
|
||||||
{invitationsQuery.isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-10">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
</div>
|
</div>
|
||||||
) : pendingInvitations.length === 0 ? (
|
}
|
||||||
<Empty>
|
</section>
|
||||||
<EmptyHeader>
|
)}
|
||||||
<EmptyMedia variant="icon">
|
|
||||||
<Mail />
|
|
||||||
</EmptyMedia>
|
|
||||||
<EmptyTitle>No pending invitations</EmptyTitle>
|
|
||||||
<EmptyDescription>Invitations you send will be listed here.</EmptyDescription>
|
|
||||||
</EmptyHeader>
|
|
||||||
</Empty>
|
|
||||||
) : (
|
|
||||||
pendingInvitations.map((invitation) => {
|
|
||||||
const loading = actionKey === `invite:${invitation.user_uid}`;
|
|
||||||
return (
|
|
||||||
<Card key={invitation.user_uid} size="sm" className="bg-muted/20">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
{invitation.scope === "Admin" ? <Shield /> : <User />}
|
|
||||||
<span className="font-mono text-sm">{invitation.user_uid}</span>
|
|
||||||
<Badge variant="secondary">{invitation.scope}</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Invited by {invitation.invited_by_username ?? "Unknown"} on {formatDate(invitation.created_at)}
|
|
||||||
</CardDescription>
|
|
||||||
<CardAction>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handleCancelInvite(invitation.user_uid)}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <X data-icon="inline-start" />}
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</CardAction>
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Join Requests</CardTitle>
|
|
||||||
<CardDescription>Approve or reject users who requested project access.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col gap-3">
|
|
||||||
{requestsQuery.isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-10">
|
|
||||||
<Loader2 className="animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : pendingRequests.length === 0 ? (
|
|
||||||
<Empty>
|
|
||||||
<EmptyHeader>
|
|
||||||
<EmptyTitle>No pending requests</EmptyTitle>
|
|
||||||
<EmptyDescription>User applications will appear here.</EmptyDescription>
|
|
||||||
</EmptyHeader>
|
|
||||||
</Empty>
|
|
||||||
) : (
|
|
||||||
pendingRequests.map((request) => {
|
|
||||||
const approveLoading = actionKey === `request:${request.id}:approve`;
|
|
||||||
const rejectLoading = actionKey === `request:${request.id}:reject`;
|
|
||||||
return (
|
|
||||||
<Card key={request.id} size="sm" className="bg-muted/20">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
{request.username}
|
|
||||||
<Badge variant="secondary">pending</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Requested on {formatDate(request.created_at)}
|
|
||||||
{request.message ? ` · ${request.message}` : ""}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col gap-4">
|
|
||||||
{projectName && <JoinRequestAnswers projectName={projectName} requestId={request.id} />}
|
|
||||||
<div className="flex flex-col gap-3 md:flex-row md:items-end">
|
|
||||||
<Field className="md:max-w-40">
|
|
||||||
<FieldLabel>Approval role</FieldLabel>
|
|
||||||
<Select
|
|
||||||
value={requestRoles[request.id] ?? "Member"}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setRequestRoles((current) => ({ ...current, [request.id]: value as MemberRole }))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-full">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem value="Member">Member</SelectItem>
|
|
||||||
<SelectItem value="Admin">Admin</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</Field>
|
|
||||||
<Field className="flex-1">
|
|
||||||
<FieldLabel>Reject reason</FieldLabel>
|
|
||||||
<Textarea
|
|
||||||
value={rejectReasons[request.id] ?? ""}
|
|
||||||
onChange={(event) =>
|
|
||||||
setRejectReasons((current) => ({ ...current, [request.id]: event.target.value }))
|
|
||||||
}
|
|
||||||
rows={2}
|
|
||||||
placeholder="Optional reason shown in request history."
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
onClick={() => handleProcessRequest(request, true)}
|
|
||||||
disabled={approveLoading || rejectLoading}
|
|
||||||
>
|
|
||||||
{approveLoading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
|
|
||||||
Approve
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handleProcessRequest(request, false)}
|
|
||||||
disabled={approveLoading || rejectLoading}
|
|
||||||
>
|
|
||||||
{rejectLoading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <X data-icon="inline-start" />}
|
|
||||||
Reject
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -48,19 +48,11 @@ export const {
|
|||||||
projectRemoveMember,
|
projectRemoveMember,
|
||||||
projectInvitations,
|
projectInvitations,
|
||||||
projectInviteUser,
|
projectInviteUser,
|
||||||
projectMyInvitations,
|
|
||||||
projectAcceptInvitation,
|
|
||||||
projectRejectInvitation,
|
|
||||||
projectCancelInvitation,
|
projectCancelInvitation,
|
||||||
projectJoinSettings,
|
projectJoinSettings,
|
||||||
projectUpdateJoinSettings,
|
projectUpdateJoinSettings,
|
||||||
projectJoinRequests,
|
projectJoinRequests,
|
||||||
projectMyJoinRequests,
|
|
||||||
projectSubmitJoinRequest,
|
|
||||||
projectCancelJoinRequest,
|
|
||||||
projectProcessJoinRequest,
|
projectProcessJoinRequest,
|
||||||
projectJoinAnswers,
|
|
||||||
projectSubmitJoinAnswers,
|
|
||||||
projectRolePriorities,
|
projectRolePriorities,
|
||||||
projectUpsertRolePriority,
|
projectUpsertRolePriority,
|
||||||
projectDeleteRolePriority,
|
projectDeleteRolePriority,
|
||||||
@ -164,8 +156,6 @@ export const {
|
|||||||
categoryList,
|
categoryList,
|
||||||
categoryCreate,
|
categoryCreate,
|
||||||
participantList,
|
participantList,
|
||||||
pinAdd,
|
|
||||||
pinRemove,
|
|
||||||
pinList,
|
pinList,
|
||||||
threadList,
|
threadList,
|
||||||
threadCreate,
|
threadCreate,
|
||||||
|
|||||||
@ -21,7 +21,6 @@ interface Props {
|
|||||||
onSetEmojiPicker: (msgId: string | null) => void;
|
onSetEmojiPicker: (msgId: string | null) => void;
|
||||||
onShowEditHistory: (msgId: string) => void;
|
onShowEditHistory: (msgId: string) => void;
|
||||||
roomId: string;
|
roomId: string;
|
||||||
readOnly?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const COMMON_EMOJIS = ['👍', '❤️', '😄', '😭', '😡', '🎉', '🚀', '👀'];
|
const COMMON_EMOJIS = ['👍', '❤️', '😄', '😭', '😡', '🎉', '🚀', '👀'];
|
||||||
@ -38,16 +37,14 @@ export function MessageItem({
|
|||||||
onOpenThread,
|
onOpenThread,
|
||||||
onSetEmojiPicker,
|
onSetEmojiPicker,
|
||||||
onShowEditHistory,
|
onShowEditHistory,
|
||||||
readOnly = false,
|
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
const isRevoked = !!msg.revoked;
|
const isRevoked = !!msg.revoked;
|
||||||
const { addPin, removePin, pinnedMessages } = useRoom();
|
const { addPin, removePin, pinnedMessages } = useRoom();
|
||||||
const isPinned = pinnedMessages.some((p) => p.message === msg.id);
|
const isPinned = pinnedMessages.some((p) => p.message === msg.id);
|
||||||
const handleTogglePin = () => {
|
const handleTogglePin = () => {
|
||||||
if (readOnly) return;
|
if (isPinned) removePin(msg.id);
|
||||||
const action = isPinned ? removePin(msg.id) : addPin(msg.id);
|
else addPin(msg.id);
|
||||||
action.catch((err) => console.error('[MessageItem] failed to toggle pin:', err));
|
|
||||||
};
|
};
|
||||||
const isEdited = !!msg.edited_at;
|
const isEdited = !!msg.edited_at;
|
||||||
const isStreaming = msg.is_streaming === true;
|
const isStreaming = msg.is_streaming === true;
|
||||||
@ -56,7 +53,6 @@ export function MessageItem({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-message-id={msg.id}
|
|
||||||
style={{
|
style={{
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
padding: isCompact ? '1px 16px 1px' : '4px 16px 4px',
|
padding: isCompact ? '1px 16px 1px' : '4px 16px 4px',
|
||||||
@ -164,7 +160,7 @@ export function MessageItem({
|
|||||||
{reactions.map((reaction) => (
|
{reactions.map((reaction) => (
|
||||||
<button
|
<button
|
||||||
key={reaction.emoji}
|
key={reaction.emoji}
|
||||||
onClick={readOnly ? undefined : () => onReaction(msg.id, reaction.emoji)}
|
onClick={() => onReaction(msg.id, reaction.emoji)}
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@ -173,7 +169,7 @@ export function MessageItem({
|
|||||||
background: reaction.reacted_by_me ? 'var(--accent-muted)' : 'var(--surface-elevated)',
|
background: reaction.reacted_by_me ? 'var(--accent-muted)' : 'var(--surface-elevated)',
|
||||||
border: `1px solid ${reaction.reacted_by_me ? 'var(--accent)' : 'transparent'}`,
|
border: `1px solid ${reaction.reacted_by_me ? 'var(--accent)' : 'transparent'}`,
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
cursor: readOnly ? 'default' : 'pointer',
|
cursor: 'pointer',
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
transition: 'all 0.1s',
|
transition: 'all 0.1s',
|
||||||
}}
|
}}
|
||||||
@ -183,13 +179,13 @@ export function MessageItem({
|
|||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
<button
|
<button
|
||||||
onClick={readOnly ? undefined : () => onSetEmojiPicker(showPicker ? null : msg.id)}
|
onClick={() => onSetEmojiPicker(showPicker ? null : msg.id)}
|
||||||
style={{
|
style={{
|
||||||
padding: '2px 6px',
|
padding: '2px 6px',
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
border: '1px dashed var(--border-default)',
|
border: '1px dashed var(--border-default)',
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
cursor: readOnly ? 'default' : 'pointer',
|
cursor: 'pointer',
|
||||||
color: 'var(--text-muted)',
|
color: 'var(--text-muted)',
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
}}
|
}}
|
||||||
@ -234,7 +230,7 @@ export function MessageItem({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Thread badge */}
|
{/* Thread badge */}
|
||||||
{msg.thread && !readOnly && (
|
{msg.thread && (
|
||||||
<button
|
<button
|
||||||
onClick={() => onOpenThread(msg)}
|
onClick={() => onOpenThread(msg)}
|
||||||
style={{
|
style={{
|
||||||
@ -258,7 +254,7 @@ export function MessageItem({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Hover actions — Discord-style: button center aligns with message top edge */}
|
{/* Hover actions — Discord-style: button center aligns with message top edge */}
|
||||||
{isHovered && !isRevoked && !readOnly && (
|
{isHovered && !isRevoked && (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
@ -289,13 +285,6 @@ export function MessageItem({
|
|||||||
>
|
>
|
||||||
<Reply className="w-3 h-3" />
|
<Reply className="w-3 h-3" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
onClick={() => onOpenThread(msg)}
|
|
||||||
title={msg.thread ? 'Open thread' : 'Start thread'}
|
|
||||||
className={MESSAGE_ITEM.actionButton}
|
|
||||||
>
|
|
||||||
<MessageSquare className="w-3 h-3" />
|
|
||||||
</button>
|
|
||||||
{msg.sender_type !== 'ai' && (
|
{msg.sender_type !== 'ai' && (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
@ -313,16 +302,16 @@ export function MessageItem({
|
|||||||
>
|
>
|
||||||
<Trash2 className="w-3 h-3" />
|
<Trash2 className="w-3 h-3" />
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleTogglePin}
|
||||||
|
title={isPinned ? 'Unpin' : 'Pin'}
|
||||||
|
className={MESSAGE_ITEM.actionButton}
|
||||||
|
style={{ color: isPinned ? 'var(--text-primary)' : undefined }}
|
||||||
|
>
|
||||||
|
<Pin className="w-3 h-3" />
|
||||||
|
</button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<button
|
|
||||||
onClick={handleTogglePin}
|
|
||||||
title={isPinned ? 'Unpin' : 'Pin'}
|
|
||||||
className={MESSAGE_ITEM.actionButton}
|
|
||||||
style={{ color: isPinned ? 'var(--text-primary)' : undefined }}
|
|
||||||
>
|
|
||||||
<Pin className="w-3 h-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -41,7 +41,6 @@ interface Props {
|
|||||||
onShowEditHistory: (msgId: string) => void;
|
onShowEditHistory: (msgId: string) => void;
|
||||||
onStartReached?: () => void;
|
onStartReached?: () => void;
|
||||||
roomId: string;
|
roomId: string;
|
||||||
readOnly?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MessageList({
|
export function MessageList({
|
||||||
@ -58,7 +57,6 @@ export function MessageList({
|
|||||||
onShowEditHistory,
|
onShowEditHistory,
|
||||||
onStartReached,
|
onStartReached,
|
||||||
roomId,
|
roomId,
|
||||||
readOnly = false,
|
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const virtuosoRef = useRef<VirtuosoHandle>(null);
|
const virtuosoRef = useRef<VirtuosoHandle>(null);
|
||||||
const initialScrollDoneRef = useRef(false);
|
const initialScrollDoneRef = useRef(false);
|
||||||
@ -210,7 +208,6 @@ export function MessageList({
|
|||||||
onSetEmojiPicker={onSetEmojiPicker}
|
onSetEmojiPicker={onSetEmojiPicker}
|
||||||
onShowEditHistory={onShowEditHistory}
|
onShowEditHistory={onShowEditHistory}
|
||||||
roomId={roomId}
|
roomId={roomId}
|
||||||
readOnly={readOnly}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -1,18 +1,14 @@
|
|||||||
import { Pin, PinOff, X } from 'lucide-react';
|
import { Pin, X } from 'lucide-react';
|
||||||
import type { Message, PinnedMessage } from '@/contexts/room';
|
import type { PinnedMessage } from '@/contexts/room';
|
||||||
import { formatRelativeTime } from '@/contexts/room';
|
import { formatRelativeTime } from '@/contexts/room';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
pins: PinnedMessage[];
|
pins: PinnedMessage[];
|
||||||
messages: Message[];
|
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onGotoMessage: (messageId: string) => void;
|
onGotoMessage: (messageId: string) => void;
|
||||||
onUnpin?: (messageId: string) => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function PinPanel({ pins, messages, onClose, onGotoMessage, onUnpin }: Props) {
|
export function PinPanel({ pins, onClose, onGotoMessage }: Props) {
|
||||||
const messageById = new Map(messages.map((msg) => [msg.id, msg]));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pin-panel">
|
<div className="pin-panel">
|
||||||
<div className="pin-panel-header">
|
<div className="pin-panel-header">
|
||||||
@ -32,60 +28,23 @@ export function PinPanel({ pins, messages, onClose, onGotoMessage, onUnpin }: Pr
|
|||||||
No pinned messages yet.
|
No pinned messages yet.
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
pins.map((pin) => {
|
pins.map((pin) => (
|
||||||
const msg = messageById.get(pin.message);
|
<button
|
||||||
return (
|
key={pin.message}
|
||||||
<div key={pin.message} className="pin-item" style={{ alignItems: 'flex-start', gap: 8 }}>
|
className="pin-item"
|
||||||
<button
|
onClick={() => onGotoMessage(pin.message)}
|
||||||
onClick={() => onGotoMessage(pin.message)}
|
>
|
||||||
style={{
|
<Pin className="w-3 h-3" style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
|
||||||
flex: 1,
|
<span style={{ color: 'var(--text-muted)', fontSize: 12 }}>
|
||||||
minWidth: 0,
|
#{pin.message.slice(0, 8)}
|
||||||
display: 'flex',
|
</span>
|
||||||
flexDirection: 'column',
|
<span style={{ color: 'var(--text-muted)', fontSize: 11, marginLeft: 'auto' }}>
|
||||||
gap: 4,
|
{formatRelativeTime(pin.pinned_at)}
|
||||||
background: 'none',
|
</span>
|
||||||
border: 'none',
|
</button>
|
||||||
padding: 0,
|
))
|
||||||
textAlign: 'left',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span style={{ color: 'var(--text-primary)', fontSize: 13, fontWeight: 600 }}>
|
|
||||||
{msg?.display_name ?? msg?.sender_id ?? `#${pin.message.slice(0, 8)}`}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
color: msg ? 'var(--text-secondary)' : 'var(--text-muted)',
|
|
||||||
fontSize: 12,
|
|
||||||
lineHeight: 1.4,
|
|
||||||
overflow: 'hidden',
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 3,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{msg?.content ?? 'Pinned message is not loaded in the current history window.'}
|
|
||||||
</span>
|
|
||||||
<span style={{ color: 'var(--text-muted)', fontSize: 11 }}>
|
|
||||||
Pinned {formatRelativeTime(pin.pinned_at)}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{onUnpin && (
|
|
||||||
<button
|
|
||||||
onClick={() => onUnpin(pin.message)}
|
|
||||||
title="Unpin"
|
|
||||||
className="thread-close-btn"
|
|
||||||
style={{ flexShrink: 0 }}
|
|
||||||
>
|
|
||||||
<PinOff className="w-3 h-3" style={{ color: 'var(--text-muted)' }} />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -5,9 +5,6 @@ import type { Message } from '@/contexts/room';
|
|||||||
import { formatTime } from '@/contexts/room';
|
import { formatTime } from '@/contexts/room';
|
||||||
import { Avatar } from './Avatar';
|
import { Avatar } from './Avatar';
|
||||||
import { getWsClient } from '@/ws';
|
import { getWsClient } from '@/ws';
|
||||||
import { ProjectJoinBanner } from '@/app/project/layout';
|
|
||||||
import { IrRenderer } from '@/lib/ir/renderer';
|
|
||||||
import { extractIrNodes } from '@/lib/ir/parser';
|
|
||||||
|
|
||||||
function safeGetClient() {
|
function safeGetClient() {
|
||||||
try { return getWsClient(); } catch { return null; }
|
try { return getWsClient(); } catch { return null; }
|
||||||
@ -24,7 +21,6 @@ interface Props {
|
|||||||
sendMessage: (content: string, opts?: { thread?: string }) => void;
|
sendMessage: (content: string, opts?: { thread?: string }) => void;
|
||||||
onTypingStart: () => void;
|
onTypingStart: () => void;
|
||||||
onTypingStop: () => void;
|
onTypingStop: () => void;
|
||||||
readOnly?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const COMMON_EMOJIS = ['👍', '❤️', '😄', '😭', '😡', '🎉'];
|
const COMMON_EMOJIS = ['👍', '❤️', '😄', '😭', '😡', '🎉'];
|
||||||
@ -36,7 +32,6 @@ export function ThreadPanel({
|
|||||||
sendMessage,
|
sendMessage,
|
||||||
onTypingStart,
|
onTypingStart,
|
||||||
onTypingStop,
|
onTypingStop,
|
||||||
readOnly = false,
|
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
const [showReactionPicker, setShowReactionPicker] = useState<string | null>(null);
|
const [showReactionPicker, setShowReactionPicker] = useState<string | null>(null);
|
||||||
@ -48,7 +43,7 @@ export function ThreadPanel({
|
|||||||
}, [thread.messages]);
|
}, [thread.messages]);
|
||||||
|
|
||||||
const handleSend = () => {
|
const handleSend = () => {
|
||||||
if (readOnly || !inputValue.trim()) return;
|
if (!inputValue.trim()) return;
|
||||||
sendMessage(inputValue.trim(), { thread: thread.id });
|
sendMessage(inputValue.trim(), { thread: thread.id });
|
||||||
setInputValue('');
|
setInputValue('');
|
||||||
onTypingStop();
|
onTypingStop();
|
||||||
@ -56,7 +51,6 @@ export function ThreadPanel({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
if (readOnly) return;
|
|
||||||
setInputValue(e.target.value);
|
setInputValue(e.target.value);
|
||||||
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
|
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
|
||||||
onTypingStart();
|
onTypingStart();
|
||||||
@ -64,13 +58,11 @@ export function ThreadPanel({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleResolve = () => {
|
const handleResolve = () => {
|
||||||
if (readOnly) return;
|
|
||||||
const c = safeGetClient();
|
const c = safeGetClient();
|
||||||
if (c) c.resolveThread(thread.id);
|
if (c) c.resolveThread(thread.id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleArchive = () => {
|
const handleArchive = () => {
|
||||||
if (readOnly) return;
|
|
||||||
const c = safeGetClient();
|
const c = safeGetClient();
|
||||||
if (c) c.archiveThread(thread.id);
|
if (c) c.archiveThread(thread.id);
|
||||||
};
|
};
|
||||||
@ -126,7 +118,7 @@ export function ThreadPanel({
|
|||||||
{isRevoked ? (
|
{isRevoked ? (
|
||||||
<span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Message deleted</span>
|
<span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Message deleted</span>
|
||||||
) : (
|
) : (
|
||||||
<IrRenderer nodes={extractIrNodes(msg.content)} />
|
msg.content
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -144,11 +136,6 @@ export function ThreadPanel({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{readOnly ? (
|
|
||||||
<div className="thread-input-area">
|
|
||||||
<ProjectJoinBanner compact message="Join this project to reply in threads." />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="thread-input-area">
|
<div className="thread-input-area">
|
||||||
<button
|
<button
|
||||||
className="thread-reaction-btn"
|
className="thread-reaction-btn"
|
||||||
@ -177,7 +164,6 @@ export function ThreadPanel({
|
|||||||
<Send className="w-4 h-4" />
|
<Send className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -41,9 +41,8 @@ interface ChannelSidebarProps {
|
|||||||
export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: ChannelSidebarProps) {
|
export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: ChannelSidebarProps) {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const {projectName} = useParams<{ projectName: string }>();
|
const {projectName} = useParams<{ projectName: string }>();
|
||||||
|
const {data: roomsData, isLoading} = useRoomsQuery(projectName);
|
||||||
const {data: projectInfo} = useProjectInfo(projectName);
|
const {data: projectInfo} = useProjectInfo(projectName);
|
||||||
const isProjectMember = !!projectInfo?.role;
|
|
||||||
const {data: roomsData, isLoading} = useRoomsQuery(isProjectMember ? projectName : undefined);
|
|
||||||
const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
|
const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
|
||||||
|
|
||||||
const rooms = useMemo(() => roomsData?.rooms ?? [], [roomsData?.rooms]);
|
const rooms = useMemo(() => roomsData?.rooms ?? [], [roomsData?.rooms]);
|
||||||
@ -104,16 +103,14 @@ export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: Channel
|
|||||||
>
|
>
|
||||||
<Search className="w-[14px] h-[14px]"/>
|
<Search className="w-[14px] h-[14px]"/>
|
||||||
</button>
|
</button>
|
||||||
{isProjectMember && (
|
<button
|
||||||
<button
|
onClick={() => setIsCreateMenuOpen(true)}
|
||||||
onClick={() => setIsCreateMenuOpen(true)}
|
className={CHANNEL_SIDEBAR.iconButton}
|
||||||
className={CHANNEL_SIDEBAR.iconButton}
|
style={{color: "var(--text-secondary)"}}
|
||||||
style={{color: "var(--text-secondary)"}}
|
title="Create new..."
|
||||||
title="Create new..."
|
>
|
||||||
>
|
<Plus className="w-[14px] h-[14px]"/>
|
||||||
<Plus className="w-[14px] h-[14px]"/>
|
</button>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{onCollapse && (
|
{onCollapse && (
|
||||||
<button
|
<button
|
||||||
onClick={onCollapse}
|
onClick={onCollapse}
|
||||||
@ -181,7 +178,7 @@ export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: Channel
|
|||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isProjectMember ? null : isLoading ? (
|
{isLoading ? (
|
||||||
<div className="px-4 py-2 text-[var(--text-muted)]">Loading channels...</div>
|
<div className="px-4 py-2 text-[var(--text-muted)]">Loading channels...</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@ -39,7 +39,6 @@ const ME_NAV_SIBLINGS: BreadcrumbSibling[] = [
|
|||||||
{ label: "Stars", path: "/me/stars" },
|
{ label: "Stars", path: "/me/stars" },
|
||||||
{ label: "Following", path: "/me/following" },
|
{ label: "Following", path: "/me/following" },
|
||||||
{ label: "Followers", path: "/me/followers" },
|
{ label: "Followers", path: "/me/followers" },
|
||||||
{ label: "Invitations", path: "/me/invitations" },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
function getProjectNavSiblings(projectName: string): BreadcrumbSibling[] {
|
function getProjectNavSiblings(projectName: string): BreadcrumbSibling[] {
|
||||||
@ -168,7 +167,7 @@ const TOOLBAR_ICONS = [
|
|||||||
export const Header = memo(function Header() {
|
export const Header = memo(function Header() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { segments, projects } = useBreadcrumbs();
|
const { segments, projects } = useBreadcrumbs();
|
||||||
const { isProjectMember, showMembers, setShowMembers } = useProjectLayout();
|
const { showMembers, setShowMembers } = useProjectLayout();
|
||||||
const [showSettings, setShowSettings] = useState(false);
|
const [showSettings, setShowSettings] = useState(false);
|
||||||
const roomContext = useOptionalRoom();
|
const roomContext = useOptionalRoom();
|
||||||
|
|
||||||
@ -255,7 +254,7 @@ export const Header = memo(function Header() {
|
|||||||
<div className="flex items-center gap-1 shrink-0">
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
{location.pathname.startsWith("/me") ? null : (
|
{location.pathname.startsWith("/me") ? null : (
|
||||||
<>
|
<>
|
||||||
{isProjectMember && roomContext?.currentRoom && location.pathname.includes("/channel/") && (
|
{roomContext?.currentRoom && location.pathname.includes("/channel/") && (
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowSettings(true)}
|
onClick={() => setShowSettings(true)}
|
||||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors hover:bg-hover-bg"
|
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors hover:bg-hover-bg"
|
||||||
@ -265,34 +264,32 @@ export const Header = memo(function Header() {
|
|||||||
<Settings className="w-[18px] h-[18px]" />
|
<Settings className="w-[18px] h-[18px]" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{isProjectMember && (
|
<button
|
||||||
<button
|
onClick={() => setShowMembers(!showMembers)}
|
||||||
onClick={() => setShowMembers(!showMembers)}
|
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors"
|
||||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors"
|
style={
|
||||||
style={
|
showMembers
|
||||||
showMembers
|
? {
|
||||||
? {
|
color: "var(--text-primary)",
|
||||||
color: "var(--text-primary)",
|
backgroundColor: "var(--hover-bg-strong)",
|
||||||
backgroundColor: "var(--hover-bg-strong)",
|
}
|
||||||
}
|
: { color: "var(--text-secondary)" }
|
||||||
: { color: "var(--text-secondary)" }
|
}
|
||||||
}
|
>
|
||||||
|
<svg
|
||||||
|
className="w-[18px] h-[18px]"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
className="w-[18px] h-[18px]"
|
strokeLinecap="round"
|
||||||
fill="none"
|
strokeLinejoin="round"
|
||||||
stroke="currentColor"
|
strokeWidth={1.5}
|
||||||
viewBox="0 0 24 24"
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
>
|
/>
|
||||||
<path
|
</svg>
|
||||||
strokeLinecap="round"
|
</button>
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{TOOLBAR_ICONS.map((icon, i) => (
|
{TOOLBAR_ICONS.map((icon, i) => (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import {
|
|||||||
} from 'react';
|
} from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useWsEvent, useWsStatus, getWsClient, useRoomSubscription } from '@/ws';
|
import { useWsEvent, useWsStatus, getWsClient, useRoomSubscription } from '@/ws';
|
||||||
import { roomGet, participantList, pinAdd, pinRemove, pinList, threadList } from '@/client/api';
|
import { roomGet, participantList, pinList, threadList } from '@/client/api';
|
||||||
import type { AxiosResponse } from 'axios';
|
import type { AxiosResponse } from 'axios';
|
||||||
import type {
|
import type {
|
||||||
ApiResponseRoomResponse,
|
ApiResponseRoomResponse,
|
||||||
@ -74,8 +74,8 @@ export interface RoomContextValue {
|
|||||||
deleteAi: (agentId: string) => void;
|
deleteAi: (agentId: string) => void;
|
||||||
|
|
||||||
/** Pin management */
|
/** Pin management */
|
||||||
addPin: (messageId: string) => Promise<void>;
|
addPin: (messageId: string) => void;
|
||||||
removePin: (messageId: string) => Promise<void>;
|
removePin: (messageId: string) => void;
|
||||||
|
|
||||||
/** Member state */
|
/** Member state */
|
||||||
updateDoNotDisturb: (dnd: boolean) => Promise<void>;
|
updateDoNotDisturb: (dnd: boolean) => Promise<void>;
|
||||||
@ -199,18 +199,14 @@ export function RoomProvider({ roomId, projectName, children }: RoomProviderProp
|
|||||||
if (client && roomId) client.deleteAi(roomId, agentId);
|
if (client && roomId) client.deleteAi(roomId, agentId);
|
||||||
}, [roomId]);
|
}, [roomId]);
|
||||||
|
|
||||||
const addPin = useCallback(async (messageId: string) => {
|
const addPin = useCallback((messageId: string) => {
|
||||||
if (!roomId) return;
|
const client = safeGetClient();
|
||||||
const res = await pinAdd(roomId, messageId);
|
if (client && roomId) client.emitRaw('pin_add', { room: roomId, message: messageId });
|
||||||
const pin = res.data?.data;
|
|
||||||
if (!pin) return;
|
|
||||||
setPinnedMessages((prev) => (prev.some((p) => p.message === pin.message) ? prev : [...prev, pin]));
|
|
||||||
}, [roomId]);
|
}, [roomId]);
|
||||||
|
|
||||||
const removePin = useCallback(async (messageId: string) => {
|
const removePin = useCallback((messageId: string) => {
|
||||||
if (!roomId) return;
|
const client = safeGetClient();
|
||||||
await pinRemove(roomId, messageId);
|
if (client && roomId) client.emitRaw('pin_remove', { room: roomId, message: messageId });
|
||||||
setPinnedMessages((prev) => prev.filter((p) => p.message !== messageId));
|
|
||||||
}, [roomId]);
|
}, [roomId]);
|
||||||
|
|
||||||
const updateDoNotDisturb = useCallback(async (dnd: boolean) => {
|
const updateDoNotDisturb = useCallback(async (dnd: boolean) => {
|
||||||
@ -471,11 +467,7 @@ export function RoomProvider({ roomId, projectName, children }: RoomProviderProp
|
|||||||
useWsEvent('pin_added', (event) => {
|
useWsEvent('pin_added', (event) => {
|
||||||
if (event.room_id !== roomId) return;
|
if (event.room_id !== roomId) return;
|
||||||
const { room, message, pinned_by, pinned_at } = event.data;
|
const { room, message, pinned_by, pinned_at } = event.data;
|
||||||
setPinnedMessages((prev: PinnedMessage[]) => (
|
setPinnedMessages((prev: PinnedMessage[]) => [...prev, { room, message, pinned_by, pinned_at }]);
|
||||||
prev.some((p) => p.message === message)
|
|
||||||
? prev
|
|
||||||
: [...prev, { room, message, pinned_by, pinned_at }]
|
|
||||||
));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
useWsEvent('pin_removed', (event) => {
|
useWsEvent('pin_removed', (event) => {
|
||||||
|
|||||||
@ -36,254 +36,3 @@
|
|||||||
align-self: center;
|
align-self: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-panel,
|
|
||||||
.pin-panel {
|
|
||||||
width: min(380px, 42vw);
|
|
||||||
min-width: 320px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, color-mix(in oklch, var(--surface-elevated) 92%, var(--accent-bg)), var(--surface-ground) 180px),
|
|
||||||
var(--surface-ground);
|
|
||||||
border-left: 1px solid var(--border-subtle);
|
|
||||||
box-shadow: -12px 0 24px oklch(0 0 0 / 6%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-panel-header,
|
|
||||||
.pin-panel-header {
|
|
||||||
min-height: 52px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 0 14px 0 16px;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
background: color-mix(in oklch, var(--surface-elevated) 88%, transparent);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-panel-title,
|
|
||||||
.pin-panel-title {
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-preview-text {
|
|
||||||
max-width: 180px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-close-btn {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-muted);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-close-btn:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
border-color: var(--border-subtle);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-messages,
|
|
||||||
.pin-list {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-message {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: background 120ms ease, border-color 120ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-message:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
border-color: var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-list-item {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 14px;
|
|
||||||
background: color-mix(in oklch, var(--surface-elevated) 94%, var(--accent-bg));
|
|
||||||
color: var(--text-primary);
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-list-item:hover:not(:disabled) {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
border-color: var(--border-default);
|
|
||||||
background: var(--surface-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-list-item:disabled {
|
|
||||||
cursor: default;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-message-content {
|
|
||||||
min-width: 0;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-message-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-typing {
|
|
||||||
padding: 0 14px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-input-area {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
border-top: 1px solid var(--border-subtle);
|
|
||||||
background: color-mix(in oklch, var(--surface-elevated) 86%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-input {
|
|
||||||
min-height: 38px;
|
|
||||||
max-height: 120px;
|
|
||||||
flex: 1;
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid var(--border-default);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 9px 11px;
|
|
||||||
background: var(--input-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-input:focus {
|
|
||||||
border-color: var(--input-ring);
|
|
||||||
box-shadow: 0 0 0 3px color-mix(in oklch, var(--input-ring) 18%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-reaction-btn,
|
|
||||||
.thread-send-btn {
|
|
||||||
width: 38px;
|
|
||||||
height: 38px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid var(--border-default);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--surface-ground);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-send-btn {
|
|
||||||
background: var(--accent);
|
|
||||||
border-color: var(--accent);
|
|
||||||
color: var(--accent-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-send-btn:disabled {
|
|
||||||
opacity: 0.45;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-emoji-row {
|
|
||||||
position: absolute;
|
|
||||||
left: 12px;
|
|
||||||
bottom: 58px;
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 6px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--surface-overlay);
|
|
||||||
box-shadow: 0 10px 30px oklch(0 0 0 / 12%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-quick-btn {
|
|
||||||
border: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
background: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-quick-btn:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-item {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 14px;
|
|
||||||
background: color-mix(in oklch, var(--surface-elevated) 94%, var(--accent-bg));
|
|
||||||
box-shadow: 0 1px 0 oklch(1 0 0 / 35%) inset;
|
|
||||||
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-item:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
border-color: var(--border-default);
|
|
||||||
background: var(--surface-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-empty {
|
|
||||||
min-height: 160px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 860px) {
|
|
||||||
.thread-panel,
|
|
||||||
.pin-panel {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0 0 0 auto;
|
|
||||||
z-index: 30;
|
|
||||||
width: min(100%, 420px);
|
|
||||||
min-width: 0;
|
|
||||||
box-shadow: -18px 0 40px oklch(0 0 0 / 18%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -20,6 +20,43 @@ export default defineConfig({
|
|||||||
optimizeDeps: {
|
optimizeDeps: {
|
||||||
entries: ["src/**/*.{ts,tsx}"],
|
entries: ["src/**/*.{ts,tsx}"],
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks(id: string) {
|
||||||
|
if (id.includes("node_modules")) {
|
||||||
|
// React + deps that import React — keep together to avoid circular deps
|
||||||
|
if (id.includes("react-dom") || id.includes("react-router-dom") || id.includes("scheduler") || id.includes("@tanstack/react-query")) {
|
||||||
|
return "vendor-react";
|
||||||
|
}
|
||||||
|
if (id.includes("react-markdown") || id.includes("remark-gfm") || id.includes("rehype-raw") || id.includes("rehype-sanitize")) {
|
||||||
|
return "vendor-markdown";
|
||||||
|
}
|
||||||
|
if (id.includes("lucide-react")) {
|
||||||
|
return "vendor-lucide";
|
||||||
|
}
|
||||||
|
if (id.includes("motion")) {
|
||||||
|
return "vendor-motion";
|
||||||
|
}
|
||||||
|
if (id.includes("recharts")) {
|
||||||
|
return "vendor-recharts";
|
||||||
|
}
|
||||||
|
// Streamdown + diagram deps — keep together to avoid circular deps
|
||||||
|
if (id.includes("streamdown") || id.includes("@streamdown") || id.includes("cytoscape") || id.includes("d3-") || id.includes("dagre")) {
|
||||||
|
return "vendor-streamdown";
|
||||||
|
}
|
||||||
|
if (id.includes("@tanstack/react-table")) {
|
||||||
|
return "vendor-table";
|
||||||
|
}
|
||||||
|
if (id.includes("radix-ui")) {
|
||||||
|
return "vendor-radix";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chunkSizeWarningLimit: 400,
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"@": path.resolve(__dirname, "./src"),
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user