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 ChangePasswordPage = lazy(() => import("@/app/auth/change-password").then(m => ({ default: m.ChangePasswordPage })));
|
||||
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 ExplorePage = lazy(() => import("@/app/explore/ExplorePage").then(m => ({ default: m.ExplorePage })));
|
||||
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 SkillDetailPage = lazy(() => import("@/app/project").then(m => ({ default: m.SkillDetailPage })));
|
||||
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 MembersSettings = lazy(() => import("@/app/project").then(m => ({ default: m.MembersSettings })));
|
||||
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/following" 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/:conversationId" element={<ChatPage scope="personal" />} />
|
||||
<Route path="/explore" element={<ExplorePage />} />
|
||||
@ -121,9 +117,6 @@ export default function App() {
|
||||
{/* Channel-based routes if any */}
|
||||
</Route>
|
||||
|
||||
<Route path="/projects/:projectName/invitations" element={<ProjectInvitationPage />} />
|
||||
<Route path="/:projectName/join" element={<ProjectJoinPage />} />
|
||||
|
||||
<Route path="/:projectName" element={<ProjectLayout />}>
|
||||
<Route index element={<Navigate to="repos" replace />} />
|
||||
<Route path="repos" element={<ReposPage />} />
|
||||
|
||||
@ -10,7 +10,6 @@ import { useProjectInfo } from "@/hooks/useProjectInfo";
|
||||
import { useConversationQuery } from "@/hooks/useAiChatQuery";
|
||||
import { CodePreviewPanel } from "@/components/chat/CodePreviewPanel";
|
||||
import { CodePreviewProvider, type CodePreviewPayload } from "@/components/chat/CodePreviewContext";
|
||||
import { ProjectJoinBanner, useProjectLayout } from "@/app/project/layout";
|
||||
|
||||
interface ChatPageProps {
|
||||
scope: "personal" | "project";
|
||||
@ -28,7 +27,6 @@ export function ChatPage({ scope }: ChatPageProps) {
|
||||
const [userModel, setSelectedModel] = useState<SelectedModel | null>(null);
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
|
||||
const [activeCode, setActiveCode] = useState<CodePreviewPayload | null>(null);
|
||||
const { isProjectPreview } = useProjectLayout();
|
||||
|
||||
const { data: conversation } = useConversationQuery(selectedConversationId || "");
|
||||
|
||||
@ -133,36 +131,24 @@ export function ChatPage({ scope }: ChatPageProps) {
|
||||
{selectedConversationId ? (
|
||||
<>
|
||||
<ChatMessageList conversationId={selectedConversationId} setIsStreaming={setIsStreaming} />
|
||||
{scope === "project" && isProjectPreview ? (
|
||||
<div className="shrink-0 px-4 pb-4">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<ProjectJoinBanner compact message="Join this project to start project chat." />
|
||||
</div>
|
||||
</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="w-full max-w-3xl">
|
||||
<ChatMessageList conversationId={null} setIsStreaming={setIsStreaming} />
|
||||
<div className="mt-4">
|
||||
{scope === "project" && isProjectPreview ? (
|
||||
<ProjectJoinBanner compact message="Join this project to start project chat." />
|
||||
) : (
|
||||
<ChatMessageInput
|
||||
conversationId={null}
|
||||
isStreaming={isStreaming}
|
||||
setIsStreaming={setIsStreaming}
|
||||
onSelectConversation={handleSelectConversation}
|
||||
/>
|
||||
)}
|
||||
</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,
|
||||
MessageSquare,
|
||||
Bell,
|
||||
Mail,
|
||||
PanelLeftClose
|
||||
} from "lucide-react";
|
||||
import type { ComponentType } from "react";
|
||||
@ -54,11 +53,6 @@ const ME_NAV_ITEMS: NavItem[] = [
|
||||
name: "Notifications",
|
||||
icon: Bell,
|
||||
},
|
||||
{
|
||||
path: "/me/invitations",
|
||||
name: "Invitations",
|
||||
icon: Mail,
|
||||
},
|
||||
{
|
||||
path: "/me/stars",
|
||||
name: "Stars",
|
||||
|
||||
@ -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 { useParams } from 'react-router-dom';
|
||||
import { AlertCircle, MessageSquare, Pin, X } from 'lucide-react';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import {
|
||||
useWsConnected,
|
||||
getWsClient,
|
||||
@ -8,18 +8,17 @@ import {
|
||||
import {
|
||||
useRoom,
|
||||
} 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 {
|
||||
ThreadPanel,
|
||||
PinPanel,
|
||||
EditHistoryOverlay,
|
||||
MessageList,
|
||||
MessageInput,
|
||||
} from '@/components/channel';
|
||||
import { MentionBottomSheet } from '@/components/channel/mention';
|
||||
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() {
|
||||
try { return getWsClient(); } catch { return null; }
|
||||
@ -32,8 +31,6 @@ function ChannelPageInner() {
|
||||
wsStatus,
|
||||
currentRoom,
|
||||
members,
|
||||
pinnedMessages,
|
||||
threads,
|
||||
messages,
|
||||
isHistoryLoaded,
|
||||
isLoadingMore,
|
||||
@ -41,13 +38,11 @@ function ChannelPageInner() {
|
||||
sendMessage,
|
||||
editMessage,
|
||||
revokeMessage,
|
||||
removePin,
|
||||
setThreads,
|
||||
typingUsers,
|
||||
} = useRoom();
|
||||
|
||||
const isConnected = useWsConnected();
|
||||
const { isProjectPreview, setCurrentRoomName } = useProjectLayout();
|
||||
const { setCurrentRoomName } = useProjectLayout();
|
||||
|
||||
// Sync room name to layout Header
|
||||
useEffect(() => {
|
||||
@ -60,7 +55,6 @@ function ChannelPageInner() {
|
||||
const [replyToMessageId, setReplyToMessageId] = useState<string | null>(null);
|
||||
const [emojiPickerMessageId, setEmojiPickerMessageId] = useState<string | 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 [uploading, setUploading] = useState(false);
|
||||
|
||||
@ -81,7 +75,7 @@ function ChannelPageInner() {
|
||||
|
||||
// Fetch AI agents, repos, and skills in parallel when room opens
|
||||
useEffect(() => {
|
||||
if (!roomIdParam || isProjectPreview) return;
|
||||
if (!roomIdParam) return;
|
||||
const projectName = window.location.pathname.split('/')[1];
|
||||
|
||||
Promise.all([
|
||||
@ -106,7 +100,7 @@ function ChannelPageInner() {
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [isProjectPreview, roomIdParam]);
|
||||
}, [roomIdParam]);
|
||||
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
@ -119,10 +113,10 @@ function ChannelPageInner() {
|
||||
|
||||
// Sync room name to layout Header
|
||||
useEffect(() => {
|
||||
if (!isProjectPreview && wsStatus === 'connected' && isConnected) {
|
||||
if (wsStatus === 'connected' && isConnected) {
|
||||
loadHistory();
|
||||
}
|
||||
}, [isProjectPreview, wsStatus, isConnected, loadHistory]);
|
||||
}, [wsStatus, isConnected, loadHistory]);
|
||||
|
||||
// Load older messages when scrolling to top
|
||||
const handleStartReached = useCallback(() => {
|
||||
@ -143,7 +137,6 @@ function ChannelPageInner() {
|
||||
}, []);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
if (isProjectPreview) return;
|
||||
const currentValue = e.target.value;
|
||||
setInputValue(currentValue);
|
||||
|
||||
@ -207,7 +200,7 @@ function ChannelPageInner() {
|
||||
};
|
||||
|
||||
const handleSendMessage = () => {
|
||||
if (isProjectPreview || !inputValue.trim()) return;
|
||||
if (!inputValue.trim()) return;
|
||||
const content = resolveContent(inputValue);
|
||||
if (editingMessageId) {
|
||||
editMessage(editingMessageId, content);
|
||||
@ -353,98 +346,35 @@ function ChannelPageInner() {
|
||||
|
||||
// ── Thread ──
|
||||
|
||||
const normalizeThreadMessages = useCallback((parent: Message | null, threadMsgs: Message[]) => {
|
||||
const map = new Map<string, Message>();
|
||||
if (parent) map.set(parent.id, parent);
|
||||
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;
|
||||
const openThread = useCallback(
|
||||
async (msg: Message) => {
|
||||
if (!roomIdParam || !msg.thread) return;
|
||||
try {
|
||||
const res = await threadMessages(roomIdParam, thread.id, { limit: 100 });
|
||||
const threadMsgs: Message[] = (res.data?.data?.messages ?? []).map((r) => ({
|
||||
...r,
|
||||
_localReactions: [],
|
||||
is_streaming: false,
|
||||
isOptimistic: false,
|
||||
isOptimisticError: false,
|
||||
thinking_content: null,
|
||||
const { threadMessages } = await import('@/client/api');
|
||||
const res = await threadMessages(roomIdParam, msg.thread);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const threadMsgs: Message[] = (res.data?.data?.messages ?? []).map((r: any) => ({
|
||||
...r, _localReactions: [], is_streaming: false, isOptimistic: false, isOptimisticError: false, thinking_content: null,
|
||||
}));
|
||||
const parent = parentMessage ?? messages.find((m) => m.seq === thread.parent) ?? null;
|
||||
setActiveThread({
|
||||
...thread,
|
||||
messages: normalizeThreadMessages(parent, threadMsgs),
|
||||
isOpen: true,
|
||||
id: msg.thread, parent: msg.seq, created_by: '', participants: [],
|
||||
last_message_at: new Date().toISOString(), last_message_preview: null,
|
||||
created_at: '', messages: threadMsgs, isOpen: true,
|
||||
});
|
||||
setSidePanel(null);
|
||||
} catch (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 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 ──
|
||||
|
||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (isProjectPreview || !files || files.length === 0 || !roomIdParam) return;
|
||||
if (!files || files.length === 0 || !roomIdParam) return;
|
||||
setUploading(true);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
@ -494,45 +424,6 @@ function ChannelPageInner() {
|
||||
</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
|
||||
messages={messages}
|
||||
isLoadingHistory={isLoadingMore}
|
||||
@ -547,7 +438,6 @@ function ChannelPageInner() {
|
||||
onShowEditHistory={setEditHistoryMessageId}
|
||||
onStartReached={handleStartReached}
|
||||
roomId={roomIdParam}
|
||||
readOnly={isProjectPreview}
|
||||
/>
|
||||
|
||||
{mentionOpen && (
|
||||
@ -573,11 +463,6 @@ function ChannelPageInner() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isProjectPreview ? (
|
||||
<div className="shrink-0 p-4">
|
||||
<ProjectJoinBanner compact message="Join this project to send messages in channels." />
|
||||
</div>
|
||||
) : (
|
||||
<MessageInput
|
||||
value={inputValue}
|
||||
roomName={currentRoom?.room_name ?? roomIdParam}
|
||||
@ -595,76 +480,19 @@ function ChannelPageInner() {
|
||||
onCancelEdit={() => { setEditingMessageId(null); setInputValue(''); pendingMentionsRef.current.clear(); }}
|
||||
onMention={handleOpenMention}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{activeThread && (
|
||||
<ThreadPanel
|
||||
thread={displayedThread ?? activeThread}
|
||||
thread={activeThread}
|
||||
typingUsers={typingUsersList}
|
||||
onClose={closeThread}
|
||||
sendMessage={(content: string, opts?: { contentType?: string; thread?: string; inReplyTo?: string; attachmentIds?: string[] }) => sendMessage(content, opts)}
|
||||
onTypingStart={() => { const c = safeGetClient(); if (c) c.sendTypingStart(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 && (
|
||||
<EditHistoryOverlay
|
||||
messageId={editHistoryMessageId}
|
||||
|
||||
@ -15,5 +15,3 @@ export { AccessSettings } from "./settings/AccessSettings";
|
||||
export { LabelsSettings } from "./settings/LabelsSettings";
|
||||
export { BillingSettings } from "./settings/BillingSettings";
|
||||
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 { stripMarkdown, truncate } from "@/lib/utils";
|
||||
import type { IssueResponse, IssueLabelResponse } from "@/client/model";
|
||||
import { useProjectLayout } from "@/app/project/layout";
|
||||
|
||||
interface IssueRowProps {
|
||||
issue: IssueResponse;
|
||||
@ -109,7 +108,6 @@ const OVERSCAN = 5;
|
||||
export function IssuesPage() {
|
||||
const { projectName } = useParams<{ projectName: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { isProjectPreview } = useProjectLayout();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@ -201,7 +199,6 @@ export function IssuesPage() {
|
||||
<h1 className={ISSUES_PAGE.pageTitle}>Issues</h1>
|
||||
<p className={ISSUES_PAGE.pageSub}>Track and manage project tasks and bugs</p>
|
||||
</div>
|
||||
{!isProjectPreview && (
|
||||
<button
|
||||
onClick={() => navigate(`/${projectName}/issues/new`)}
|
||||
className={ISSUES_PAGE.newBtn}
|
||||
@ -209,7 +206,6 @@ export function IssuesPage() {
|
||||
<Plus className="w-4 h-4" />
|
||||
New issue
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
@ -272,7 +268,7 @@ export function IssuesPage() {
|
||||
<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."}
|
||||
</p>
|
||||
{!isProjectPreview && !searchQuery && activeTab === 'open' && (
|
||||
{!searchQuery && activeTab === 'open' && (
|
||||
<button
|
||||
onClick={() => navigate(`/${projectName}/issues/new`)}
|
||||
className={ISSUES_PAGE.newBtn}
|
||||
|
||||
@ -11,12 +11,10 @@ import {
|
||||
ArrowLeft,
|
||||
Info
|
||||
} from "lucide-react";
|
||||
import { ProjectJoinBanner, useProjectLayout } from "@/app/project/layout";
|
||||
|
||||
export function NewIssuePage() {
|
||||
const { projectName } = useParams<{ projectName: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { isProjectPreview } = useProjectLayout();
|
||||
|
||||
const [title, setTitle] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
@ -24,16 +22,6 @@ export function NewIssuePage() {
|
||||
|
||||
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) => {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) {
|
||||
|
||||
@ -1,24 +1,19 @@
|
||||
import { Link, Outlet, useMatch, useParams } from "react-router-dom";
|
||||
import { createContext, useContext, useState } from "react";
|
||||
import { Lock, PanelLeftOpen } from "lucide-react";
|
||||
import { Outlet, useMatch, useParams } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import { PanelLeftOpen } from "lucide-react";
|
||||
import { ServerIconRail } from "@/components/layout/ServerIconRail";
|
||||
import { ChannelSidebar } from "@/components/layout/ChannelSidebar";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { MemberList } from "@/components/layout/MemberList";
|
||||
import { RoomProvider } from "@/contexts/room";
|
||||
import { createContext, useContext } from "react";
|
||||
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 {
|
||||
showMembers: boolean;
|
||||
setShowMembers: (v: boolean) => void;
|
||||
currentRoomName: string | null;
|
||||
setCurrentRoomName: (name: string | null) => void;
|
||||
projectInfo: ProjectInfoRelational | null;
|
||||
isProjectMember: boolean;
|
||||
isProjectPreview: boolean;
|
||||
}
|
||||
|
||||
const ProjectContext = createContext<ProjectContextType>({
|
||||
@ -26,78 +21,29 @@ const ProjectContext = createContext<ProjectContextType>({
|
||||
setShowMembers: () => {},
|
||||
currentRoomName: null,
|
||||
setCurrentRoomName: () => {},
|
||||
projectInfo: null,
|
||||
isProjectMember: false,
|
||||
isProjectPreview: false,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
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() {
|
||||
const [showMembers, setShowMembers] = useState(false);
|
||||
const [currentRoomName, setCurrentRoomName] = useState<string | null>(null);
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||
const { projectName } = useParams<{ projectName: string }>();
|
||||
const { data: projectInfo = null } = useProjectInfo(projectName);
|
||||
const channelMatch = useMatch("/:projectName/channel/:roomId");
|
||||
const chatMatch = useMatch("/:projectName/chat/*");
|
||||
const roomId = channelMatch?.params.roomId ?? null;
|
||||
const isMobile = useIsMobile();
|
||||
const isTablet = useIsTablet();
|
||||
|
||||
const isProjectMember = !!projectInfo?.role;
|
||||
const isProjectPreview = !!projectInfo && !projectInfo.role;
|
||||
const canShowMembers = !isMobile && !isTablet && isProjectMember;
|
||||
const canShowMembers = !isMobile && !isTablet;
|
||||
|
||||
const mainShouldOwnScroll = !channelMatch && !chatMatch;
|
||||
|
||||
return (
|
||||
<ProjectContext.Provider
|
||||
value={{
|
||||
showMembers,
|
||||
setShowMembers,
|
||||
currentRoomName,
|
||||
setCurrentRoomName,
|
||||
projectInfo,
|
||||
isProjectMember,
|
||||
isProjectPreview,
|
||||
}}
|
||||
>
|
||||
<RoomProvider roomId={isProjectMember ? roomId : null} projectName={projectName}>
|
||||
<ProjectContext.Provider value={{ showMembers, setShowMembers, currentRoomName, setCurrentRoomName }}>
|
||||
<RoomProvider roomId={roomId} projectName={projectName}>
|
||||
<div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--surface-ground)" }}>
|
||||
{!isMobile && <ServerIconRail />}
|
||||
|
||||
@ -143,16 +89,6 @@ export function ProjectLayout() {
|
||||
style={{ backgroundColor: "var(--surface-ground)" }}
|
||||
>
|
||||
<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
|
||||
className={mainShouldOwnScroll ? "flex-1 overflow-y-auto" : "flex-1 overflow-hidden min-h-0"}
|
||||
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 { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Check, Copy, Loader2, Mail, Plus, Shield, Trash2, User, X } from "lucide-react";
|
||||
import {
|
||||
projectCancelInvitation,
|
||||
projectInvitations,
|
||||
projectInviteUser,
|
||||
projectJoinAnswers,
|
||||
projectJoinRequests,
|
||||
projectJoinSettings,
|
||||
projectProcessJoinRequest,
|
||||
projectUpdateJoinSettings,
|
||||
projectInvitations, projectInviteUser, projectCancelInvitation,
|
||||
projectJoinSettings, projectUpdateJoinSettings,
|
||||
projectJoinRequests, projectProcessJoinRequest,
|
||||
} from "@/client/api";
|
||||
import type {
|
||||
InvitationResponse,
|
||||
JoinAnswerResponse,
|
||||
JoinRequestResponse,
|
||||
JoinSettingsResponse,
|
||||
MemberRole,
|
||||
QuestionSchema,
|
||||
} from "@/client/model";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { InvitationResponse, JoinSettingsResponse, JoinRequestResponse, MemberRole, QuestionSchema } from "@/client/model";
|
||||
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 {
|
||||
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>
|
||||
);
|
||||
}
|
||||
import { Loader2, Mail, X, Check, Shield, User, EyeOff } from "lucide-react";
|
||||
|
||||
export function AccessSettings() {
|
||||
const { projectName } = useParams<{ projectName: string }>();
|
||||
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],
|
||||
queryFn: async () => {
|
||||
const res = await projectInvitations(projectName!, { page: 1, per_page: 50 });
|
||||
const res = await projectInvitations(projectName!, {});
|
||||
return (res.data?.data?.invitations ?? []) as InvitationResponse[];
|
||||
},
|
||||
enabled: !!projectName,
|
||||
staleTime: 30_000,
|
||||
enabled: !!projectName, staleTime: 30_000,
|
||||
});
|
||||
|
||||
const settingsQuery = useQuery({
|
||||
// Join settings
|
||||
const { data: joinSettings, isLoading: jsLoading } = useQuery({
|
||||
queryKey: ["project-join-settings", projectName],
|
||||
queryFn: async () => {
|
||||
const res = await projectJoinSettings(projectName!);
|
||||
return res.data?.data as JoinSettingsResponse;
|
||||
},
|
||||
enabled: !!projectName,
|
||||
staleTime: 30_000,
|
||||
enabled: !!projectName, staleTime: 30_000,
|
||||
});
|
||||
|
||||
const requestsQuery = useQuery({
|
||||
// Join requests
|
||||
const { data: joinReqs } = useQuery({
|
||||
queryKey: ["project-join-requests", projectName],
|
||||
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[];
|
||||
},
|
||||
enabled: !!projectName,
|
||||
staleTime: 30_000,
|
||||
enabled: !!projectName, staleTime: 30_000,
|
||||
});
|
||||
|
||||
const currentSettings = useMemo(() => {
|
||||
if (!settingsQuery.data) return null;
|
||||
return {
|
||||
require_approval: settingsQuery.data.require_approval,
|
||||
require_questions: settingsQuery.data.require_questions,
|
||||
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 [inviteForm, setInviteForm] = useState({ email: "", scope: "Member" as MemberRole });
|
||||
const [sending, setSending] = useState(false);
|
||||
const [actionLoading, setActionLoading] = useState<string | number | null>(null);
|
||||
const [jsSaving, setJsSaving] = useState(false);
|
||||
const [msg, setMsg] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
|
||||
const invalidateAll = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["project-invitations", projectName] });
|
||||
queryClient.invalidateQueries({ queryKey: ["project-join-settings", projectName] });
|
||||
queryClient.invalidateQueries({ queryKey: ["project-join-requests", projectName] });
|
||||
queryClient.invalidateQueries({ queryKey: ["project-members-grouped", projectName] });
|
||||
};
|
||||
|
||||
const handleInvite = async () => {
|
||||
if (!projectName || !inviteForm.email.trim()) return;
|
||||
setActionKey("settings");
|
||||
setMessage(null);
|
||||
try {
|
||||
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);
|
||||
}
|
||||
if (!inviteForm.email.trim()) return;
|
||||
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(); }
|
||||
catch { setMsg({ type: "error", text: "Failed to send invitation" }); }
|
||||
finally { setSending(false); }
|
||||
};
|
||||
|
||||
const handleCancelInvite = async (userId: string) => {
|
||||
if (!projectName) return;
|
||||
setActionKey(`invite:${userId}`);
|
||||
setMessage(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);
|
||||
}
|
||||
try { setActionLoading(userId); await projectCancelInvitation(projectName!, userId); invalidateAll(); }
|
||||
catch { setMsg({ type: "error", text: "Failed to cancel invitation" }); }
|
||||
finally { setActionLoading(null); }
|
||||
};
|
||||
|
||||
const handleProcessRequest = async (request: JoinRequestResponse, approve: boolean) => {
|
||||
if (!projectName) return;
|
||||
setActionKey(`request:${request.id}:${approve ? "approve" : "reject"}`);
|
||||
setMessage(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 handleProcessRequest = async (reqId: number, approve: boolean) => {
|
||||
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(); }
|
||||
catch { setMsg({ type: "error", text: "Failed to process request" }); }
|
||||
finally { setActionLoading(null); }
|
||||
};
|
||||
|
||||
const handleSaveSettings = async () => {
|
||||
if (!projectName || !draft) return;
|
||||
const questions = draft.require_questions
|
||||
? draft.questions.map((item) => ({ question: item.question.trim() })).filter((item) => item.question)
|
||||
: [];
|
||||
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 handleToggleApproval = async () => {
|
||||
if (!joinSettings) return;
|
||||
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(); }
|
||||
catch { setMsg({ type: "error", text: "Failed to update join settings" }); }
|
||||
finally { setJsSaving(false); }
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="flex flex-col gap-6">
|
||||
{message && (
|
||||
<Alert variant={message.type === "error" ? "destructive" : "default"}>
|
||||
<AlertDescription>{message.text}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<div className="space-y-8">
|
||||
{msg && <div className="text-[13px]" style={{ color: msg.type === "success" ? "var(--success)" : "var(--destructive)" }}>{msg.text}</div>}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Invite Member</CardTitle>
|
||||
<CardDescription>Invite an existing user by email. The invitee can accept or reject from their invitations page.</CardDescription>
|
||||
<CardAction>
|
||||
<Button size="sm" variant="outline" onClick={handleCopyInviteLink}>
|
||||
<Copy data-icon="inline-start" />
|
||||
Copy invite link
|
||||
</Button>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="invite-email">Email</FieldLabel>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
{/* Invite */}
|
||||
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>Invite Member</h2>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="invite-email"
|
||||
value={inviteForm.email}
|
||||
onChange={(event) => setInviteForm((current) => ({ ...current, email: event.target.value }))}
|
||||
onChange={e => setInviteForm(f => ({ ...f, email: e.target.value }))}
|
||||
placeholder="user@example.com"
|
||||
type="email"
|
||||
className="text-[14px] flex-1"
|
||||
style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)", color: "var(--text-primary)" }}
|
||||
/>
|
||||
<Select
|
||||
<select
|
||||
value={inviteForm.scope}
|
||||
onValueChange={(value) => setInviteForm((current) => ({ ...current, scope: value as MemberRole }))}
|
||||
onChange={e => setInviteForm(f => ({ ...f, scope: e.target.value as MemberRole }))}
|
||||
className="text-[14px] px-3 rounded-md"
|
||||
style={{ backgroundColor: "var(--surface-ground)", border: "1px solid var(--border-default)", color: "var(--text-primary)" }}
|
||||
>
|
||||
<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" />}
|
||||
<option value="Admin">Admin</option>
|
||||
<option value="Member">Member</option>
|
||||
</select>
|
||||
<Button size="sm" onClick={handleInvite} disabled={sending || !inviteForm.email.trim()} style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
|
||||
{sending ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Mail className="w-3.5 h-3.5 mr-1" />}
|
||||
Invite
|
||||
</Button>
|
||||
</div>
|
||||
<FieldDescription>Copied invitation links open the invite decision page for this project.</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Join Settings</CardTitle>
|
||||
<CardDescription>Control whether users can apply to join and whether they must answer questions.</CardDescription>
|
||||
<CardAction>
|
||||
<Button size="sm" onClick={handleSaveSettings} disabled={!isSettingsDirty || isSettingsSaving}>
|
||||
{isSettingsSaving ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
|
||||
Save
|
||||
</Button>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{settingsQuery.isLoading || !draft ? (
|
||||
<div className="flex items-center justify-center py-10">
|
||||
<Loader2 className="animate-spin" />
|
||||
{/* Pending Invitations */}
|
||||
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
|
||||
Pending Invitations {invData ? `(${invData.filter(i => !i.accepted && !i.rejected).length})` : ""}
|
||||
</h2>
|
||||
{invLoading ? <Loader2 className="w-4 h-4 animate-spin" /> :
|
||||
!invData?.length ? <p className="text-[13px]" style={{ color: "var(--text-muted)" }}>No pending invitations</p> :
|
||||
<div className="space-y-1">
|
||||
{invData.filter(i => !i.accepted && !i.rejected).map(inv => (
|
||||
<div key={inv.user_uid} className="flex items-center justify-between py-2 px-3 rounded" style={{ backgroundColor: "var(--surface-ground)" }}>
|
||||
<div className="flex items-center gap-2">
|
||||
{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)" }} />}
|
||||
<span className="text-[13px]" style={{ color: "var(--text-primary)" }}>{inv.user_uid}</span>
|
||||
<span className="text-[11px] px-1.5 py-0.5 rounded" style={{ backgroundColor: "var(--hover-bg)", color: "var(--text-muted)" }}>{inv.scope}</span>
|
||||
</div>
|
||||
) : (
|
||||
<FieldGroup>
|
||||
<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">
|
||||
<Switch
|
||||
checked={draft.require_questions}
|
||||
onCheckedChange={(checked) =>
|
||||
setSettingsDraft({
|
||||
...draft,
|
||||
require_questions: checked,
|
||||
questions: checked && draft.questions.length === 0 ? [{ question: "" }] : draft.questions,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<FieldLabel>Require answers</FieldLabel>
|
||||
<FieldDescription>Ask applicants to answer project-specific questions.</FieldDescription>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
{draft.require_questions && (
|
||||
<Field>
|
||||
<FieldLabel>Questions</FieldLabel>
|
||||
<div className="flex flex-col gap-2">
|
||||
{draft.questions.map((item, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
value={item.question}
|
||||
onChange={(event) => {
|
||||
const nextQuestions = [...draft.questions];
|
||||
nextQuestions[index] = { question: event.target.value };
|
||||
setSettingsDraft({ ...draft, questions: nextQuestions });
|
||||
}}
|
||||
placeholder="What do you want to ask?"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
setSettingsDraft({
|
||||
...draft,
|
||||
questions: draft.questions.filter((_, questionIndex) => questionIndex !== index),
|
||||
})
|
||||
}
|
||||
>
|
||||
<Trash2 />
|
||||
<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>
|
||||
))}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setSettingsDraft({ ...draft, questions: [...draft.questions, { question: "" }] })}
|
||||
>
|
||||
<Plus data-icon="inline-start" />
|
||||
Add question
|
||||
</Button>
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
</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>
|
||||
) : pendingInvitations.length === 0 ? (
|
||||
<Empty>
|
||||
<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 }))
|
||||
</section>
|
||||
|
||||
{/* Join Settings */}
|
||||
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>Join Settings</h2>
|
||||
{jsLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : joinSettings ? (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[14px] font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
{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"}
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={handleToggleApproval} disabled={jsSaving}>
|
||||
{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" />}
|
||||
{joinSettings.require_approval ? "Disable Approval" : "Require Approval"}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
{/* Pending Join Requests */}
|
||||
{joinSettings?.require_approval && (
|
||||
<section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
|
||||
<h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
|
||||
Pending Join Requests {joinReqs ? `(${joinReqs.length})` : ""}
|
||||
</h2>
|
||||
{!joinReqs?.length ? <p className="text-[13px]" style={{ color: "var(--text-muted)" }}>No pending requests</p> :
|
||||
<div className="space-y-1">
|
||||
{joinReqs.map(req => (
|
||||
<div key={req.id} className="flex items-center justify-between py-2 px-3 rounded" style={{ backgroundColor: "var(--surface-ground)" }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<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>}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--success)" }} onClick={() => handleProcessRequest(req.id, true)} disabled={actionLoading === req.id}>
|
||||
{actionLoading === req.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <Check className="w-3.5 h-3.5" />}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--destructive)" }} onClick={() => handleProcessRequest(req.id, false)} disabled={actionLoading === req.id}>
|
||||
{actionLoading === req.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <X className="w-3.5 h-3.5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
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>
|
||||
);
|
||||
})
|
||||
</section>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -48,19 +48,11 @@ export const {
|
||||
projectRemoveMember,
|
||||
projectInvitations,
|
||||
projectInviteUser,
|
||||
projectMyInvitations,
|
||||
projectAcceptInvitation,
|
||||
projectRejectInvitation,
|
||||
projectCancelInvitation,
|
||||
projectJoinSettings,
|
||||
projectUpdateJoinSettings,
|
||||
projectJoinRequests,
|
||||
projectMyJoinRequests,
|
||||
projectSubmitJoinRequest,
|
||||
projectCancelJoinRequest,
|
||||
projectProcessJoinRequest,
|
||||
projectJoinAnswers,
|
||||
projectSubmitJoinAnswers,
|
||||
projectRolePriorities,
|
||||
projectUpsertRolePriority,
|
||||
projectDeleteRolePriority,
|
||||
@ -164,8 +156,6 @@ export const {
|
||||
categoryList,
|
||||
categoryCreate,
|
||||
participantList,
|
||||
pinAdd,
|
||||
pinRemove,
|
||||
pinList,
|
||||
threadList,
|
||||
threadCreate,
|
||||
|
||||
@ -21,7 +21,6 @@ interface Props {
|
||||
onSetEmojiPicker: (msgId: string | null) => void;
|
||||
onShowEditHistory: (msgId: string) => void;
|
||||
roomId: string;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
const COMMON_EMOJIS = ['👍', '❤️', '😄', '😭', '😡', '🎉', '🚀', '👀'];
|
||||
@ -38,16 +37,14 @@ export function MessageItem({
|
||||
onOpenThread,
|
||||
onSetEmojiPicker,
|
||||
onShowEditHistory,
|
||||
readOnly = false,
|
||||
}: Props) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const isRevoked = !!msg.revoked;
|
||||
const { addPin, removePin, pinnedMessages } = useRoom();
|
||||
const isPinned = pinnedMessages.some((p) => p.message === msg.id);
|
||||
const handleTogglePin = () => {
|
||||
if (readOnly) return;
|
||||
const action = isPinned ? removePin(msg.id) : addPin(msg.id);
|
||||
action.catch((err) => console.error('[MessageItem] failed to toggle pin:', err));
|
||||
if (isPinned) removePin(msg.id);
|
||||
else addPin(msg.id);
|
||||
};
|
||||
const isEdited = !!msg.edited_at;
|
||||
const isStreaming = msg.is_streaming === true;
|
||||
@ -56,7 +53,6 @@ export function MessageItem({
|
||||
|
||||
return (
|
||||
<div
|
||||
data-message-id={msg.id}
|
||||
style={{
|
||||
position: 'relative',
|
||||
padding: isCompact ? '1px 16px 1px' : '4px 16px 4px',
|
||||
@ -164,7 +160,7 @@ export function MessageItem({
|
||||
{reactions.map((reaction) => (
|
||||
<button
|
||||
key={reaction.emoji}
|
||||
onClick={readOnly ? undefined : () => onReaction(msg.id, reaction.emoji)}
|
||||
onClick={() => onReaction(msg.id, reaction.emoji)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -173,7 +169,7 @@ export function MessageItem({
|
||||
background: reaction.reacted_by_me ? 'var(--accent-muted)' : 'var(--surface-elevated)',
|
||||
border: `1px solid ${reaction.reacted_by_me ? 'var(--accent)' : 'transparent'}`,
|
||||
borderRadius: 12,
|
||||
cursor: readOnly ? 'default' : 'pointer',
|
||||
cursor: 'pointer',
|
||||
fontSize: 13,
|
||||
transition: 'all 0.1s',
|
||||
}}
|
||||
@ -183,13 +179,13 @@ export function MessageItem({
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={readOnly ? undefined : () => onSetEmojiPicker(showPicker ? null : msg.id)}
|
||||
onClick={() => onSetEmojiPicker(showPicker ? null : msg.id)}
|
||||
style={{
|
||||
padding: '2px 6px',
|
||||
background: 'transparent',
|
||||
border: '1px dashed var(--border-default)',
|
||||
borderRadius: 12,
|
||||
cursor: readOnly ? 'default' : 'pointer',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-muted)',
|
||||
fontSize: 13,
|
||||
}}
|
||||
@ -234,7 +230,7 @@ export function MessageItem({
|
||||
)}
|
||||
|
||||
{/* Thread badge */}
|
||||
{msg.thread && !readOnly && (
|
||||
{msg.thread && (
|
||||
<button
|
||||
onClick={() => onOpenThread(msg)}
|
||||
style={{
|
||||
@ -258,7 +254,7 @@ export function MessageItem({
|
||||
</div>
|
||||
|
||||
{/* Hover actions — Discord-style: button center aligns with message top edge */}
|
||||
{isHovered && !isRevoked && !readOnly && (
|
||||
{isHovered && !isRevoked && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@ -289,13 +285,6 @@ export function MessageItem({
|
||||
>
|
||||
<Reply className="w-3 h-3" />
|
||||
</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' && (
|
||||
<>
|
||||
<button
|
||||
@ -313,8 +302,6 @@ export function MessageItem({
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={handleTogglePin}
|
||||
title={isPinned ? 'Unpin' : 'Pin'}
|
||||
@ -323,6 +310,8 @@ export function MessageItem({
|
||||
>
|
||||
<Pin className="w-3 h-3" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,6 @@ interface Props {
|
||||
onShowEditHistory: (msgId: string) => void;
|
||||
onStartReached?: () => void;
|
||||
roomId: string;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
export function MessageList({
|
||||
@ -58,7 +57,6 @@ export function MessageList({
|
||||
onShowEditHistory,
|
||||
onStartReached,
|
||||
roomId,
|
||||
readOnly = false,
|
||||
}: Props) {
|
||||
const virtuosoRef = useRef<VirtuosoHandle>(null);
|
||||
const initialScrollDoneRef = useRef(false);
|
||||
@ -210,7 +208,6 @@ export function MessageList({
|
||||
onSetEmojiPicker={onSetEmojiPicker}
|
||||
onShowEditHistory={onShowEditHistory}
|
||||
roomId={roomId}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
import { Pin, PinOff, X } from 'lucide-react';
|
||||
import type { Message, PinnedMessage } from '@/contexts/room';
|
||||
import { Pin, X } from 'lucide-react';
|
||||
import type { PinnedMessage } from '@/contexts/room';
|
||||
import { formatRelativeTime } from '@/contexts/room';
|
||||
|
||||
interface Props {
|
||||
pins: PinnedMessage[];
|
||||
messages: Message[];
|
||||
onClose: () => void;
|
||||
onGotoMessage: (messageId: string) => void;
|
||||
onUnpin?: (messageId: string) => void;
|
||||
}
|
||||
|
||||
export function PinPanel({ pins, messages, onClose, onGotoMessage, onUnpin }: Props) {
|
||||
const messageById = new Map(messages.map((msg) => [msg.id, msg]));
|
||||
|
||||
export function PinPanel({ pins, onClose, onGotoMessage }: Props) {
|
||||
return (
|
||||
<div className="pin-panel">
|
||||
<div className="pin-panel-header">
|
||||
@ -32,58 +28,21 @@ export function PinPanel({ pins, messages, onClose, onGotoMessage, onUnpin }: Pr
|
||||
No pinned messages yet.
|
||||
</div>
|
||||
) : (
|
||||
pins.map((pin) => {
|
||||
const msg = messageById.get(pin.message);
|
||||
return (
|
||||
<div key={pin.message} className="pin-item" style={{ alignItems: 'flex-start', gap: 8 }}>
|
||||
pins.map((pin) => (
|
||||
<button
|
||||
key={pin.message}
|
||||
className="pin-item"
|
||||
onClick={() => onGotoMessage(pin.message)}
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 4,
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
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)}`}
|
||||
<Pin className="w-3 h-3" style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
|
||||
<span style={{ color: 'var(--text-muted)', fontSize: 12 }}>
|
||||
#{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 style={{ color: 'var(--text-muted)', fontSize: 11, marginLeft: 'auto' }}>
|
||||
{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>
|
||||
|
||||
@ -5,9 +5,6 @@ import type { Message } from '@/contexts/room';
|
||||
import { formatTime } from '@/contexts/room';
|
||||
import { Avatar } from './Avatar';
|
||||
import { getWsClient } from '@/ws';
|
||||
import { ProjectJoinBanner } from '@/app/project/layout';
|
||||
import { IrRenderer } from '@/lib/ir/renderer';
|
||||
import { extractIrNodes } from '@/lib/ir/parser';
|
||||
|
||||
function safeGetClient() {
|
||||
try { return getWsClient(); } catch { return null; }
|
||||
@ -24,7 +21,6 @@ interface Props {
|
||||
sendMessage: (content: string, opts?: { thread?: string }) => void;
|
||||
onTypingStart: () => void;
|
||||
onTypingStop: () => void;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
const COMMON_EMOJIS = ['👍', '❤️', '😄', '😭', '😡', '🎉'];
|
||||
@ -36,7 +32,6 @@ export function ThreadPanel({
|
||||
sendMessage,
|
||||
onTypingStart,
|
||||
onTypingStop,
|
||||
readOnly = false,
|
||||
}: Props) {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [showReactionPicker, setShowReactionPicker] = useState<string | null>(null);
|
||||
@ -48,7 +43,7 @@ export function ThreadPanel({
|
||||
}, [thread.messages]);
|
||||
|
||||
const handleSend = () => {
|
||||
if (readOnly || !inputValue.trim()) return;
|
||||
if (!inputValue.trim()) return;
|
||||
sendMessage(inputValue.trim(), { thread: thread.id });
|
||||
setInputValue('');
|
||||
onTypingStop();
|
||||
@ -56,7 +51,6 @@ export function ThreadPanel({
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
if (readOnly) return;
|
||||
setInputValue(e.target.value);
|
||||
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
|
||||
onTypingStart();
|
||||
@ -64,13 +58,11 @@ export function ThreadPanel({
|
||||
};
|
||||
|
||||
const handleResolve = () => {
|
||||
if (readOnly) return;
|
||||
const c = safeGetClient();
|
||||
if (c) c.resolveThread(thread.id);
|
||||
};
|
||||
|
||||
const handleArchive = () => {
|
||||
if (readOnly) return;
|
||||
const c = safeGetClient();
|
||||
if (c) c.archiveThread(thread.id);
|
||||
};
|
||||
@ -126,7 +118,7 @@ export function ThreadPanel({
|
||||
{isRevoked ? (
|
||||
<span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Message deleted</span>
|
||||
) : (
|
||||
<IrRenderer nodes={extractIrNodes(msg.content)} />
|
||||
msg.content
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -144,11 +136,6 @@ export function ThreadPanel({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{readOnly ? (
|
||||
<div className="thread-input-area">
|
||||
<ProjectJoinBanner compact message="Join this project to reply in threads." />
|
||||
</div>
|
||||
) : (
|
||||
<div className="thread-input-area">
|
||||
<button
|
||||
className="thread-reaction-btn"
|
||||
@ -177,7 +164,6 @@ export function ThreadPanel({
|
||||
<Send className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -41,9 +41,8 @@ interface ChannelSidebarProps {
|
||||
export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: ChannelSidebarProps) {
|
||||
const location = useLocation();
|
||||
const {projectName} = useParams<{ projectName: string }>();
|
||||
const {data: roomsData, isLoading} = useRoomsQuery(projectName);
|
||||
const {data: projectInfo} = useProjectInfo(projectName);
|
||||
const isProjectMember = !!projectInfo?.role;
|
||||
const {data: roomsData, isLoading} = useRoomsQuery(isProjectMember ? projectName : undefined);
|
||||
const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
|
||||
|
||||
const rooms = useMemo(() => roomsData?.rooms ?? [], [roomsData?.rooms]);
|
||||
@ -104,7 +103,6 @@ export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: Channel
|
||||
>
|
||||
<Search className="w-[14px] h-[14px]"/>
|
||||
</button>
|
||||
{isProjectMember && (
|
||||
<button
|
||||
onClick={() => setIsCreateMenuOpen(true)}
|
||||
className={CHANNEL_SIDEBAR.iconButton}
|
||||
@ -113,7 +111,6 @@ export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: Channel
|
||||
>
|
||||
<Plus className="w-[14px] h-[14px]"/>
|
||||
</button>
|
||||
)}
|
||||
{onCollapse && (
|
||||
<button
|
||||
onClick={onCollapse}
|
||||
@ -181,7 +178,7 @@ export const ChannelSidebar = memo(function ChannelSidebar({onCollapse}: Channel
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!isProjectMember ? null : isLoading ? (
|
||||
{isLoading ? (
|
||||
<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: "Following", path: "/me/following" },
|
||||
{ label: "Followers", path: "/me/followers" },
|
||||
{ label: "Invitations", path: "/me/invitations" },
|
||||
];
|
||||
|
||||
function getProjectNavSiblings(projectName: string): BreadcrumbSibling[] {
|
||||
@ -168,7 +167,7 @@ const TOOLBAR_ICONS = [
|
||||
export const Header = memo(function Header() {
|
||||
const location = useLocation();
|
||||
const { segments, projects } = useBreadcrumbs();
|
||||
const { isProjectMember, showMembers, setShowMembers } = useProjectLayout();
|
||||
const { showMembers, setShowMembers } = useProjectLayout();
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const roomContext = useOptionalRoom();
|
||||
|
||||
@ -255,7 +254,7 @@ export const Header = memo(function Header() {
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{location.pathname.startsWith("/me") ? null : (
|
||||
<>
|
||||
{isProjectMember && roomContext?.currentRoom && location.pathname.includes("/channel/") && (
|
||||
{roomContext?.currentRoom && location.pathname.includes("/channel/") && (
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors hover:bg-hover-bg"
|
||||
@ -265,7 +264,6 @@ export const Header = memo(function Header() {
|
||||
<Settings className="w-[18px] h-[18px]" />
|
||||
</button>
|
||||
)}
|
||||
{isProjectMember && (
|
||||
<button
|
||||
onClick={() => setShowMembers(!showMembers)}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors"
|
||||
@ -292,7 +290,6 @@ export const Header = memo(function Header() {
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{TOOLBAR_ICONS.map((icon, i) => (
|
||||
<button
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
} from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
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 {
|
||||
ApiResponseRoomResponse,
|
||||
@ -74,8 +74,8 @@ export interface RoomContextValue {
|
||||
deleteAi: (agentId: string) => void;
|
||||
|
||||
/** Pin management */
|
||||
addPin: (messageId: string) => Promise<void>;
|
||||
removePin: (messageId: string) => Promise<void>;
|
||||
addPin: (messageId: string) => void;
|
||||
removePin: (messageId: string) => void;
|
||||
|
||||
/** Member state */
|
||||
updateDoNotDisturb: (dnd: boolean) => Promise<void>;
|
||||
@ -199,18 +199,14 @@ export function RoomProvider({ roomId, projectName, children }: RoomProviderProp
|
||||
if (client && roomId) client.deleteAi(roomId, agentId);
|
||||
}, [roomId]);
|
||||
|
||||
const addPin = useCallback(async (messageId: string) => {
|
||||
if (!roomId) return;
|
||||
const res = await pinAdd(roomId, messageId);
|
||||
const pin = res.data?.data;
|
||||
if (!pin) return;
|
||||
setPinnedMessages((prev) => (prev.some((p) => p.message === pin.message) ? prev : [...prev, pin]));
|
||||
const addPin = useCallback((messageId: string) => {
|
||||
const client = safeGetClient();
|
||||
if (client && roomId) client.emitRaw('pin_add', { room: roomId, message: messageId });
|
||||
}, [roomId]);
|
||||
|
||||
const removePin = useCallback(async (messageId: string) => {
|
||||
if (!roomId) return;
|
||||
await pinRemove(roomId, messageId);
|
||||
setPinnedMessages((prev) => prev.filter((p) => p.message !== messageId));
|
||||
const removePin = useCallback((messageId: string) => {
|
||||
const client = safeGetClient();
|
||||
if (client && roomId) client.emitRaw('pin_remove', { room: roomId, message: messageId });
|
||||
}, [roomId]);
|
||||
|
||||
const updateDoNotDisturb = useCallback(async (dnd: boolean) => {
|
||||
@ -471,11 +467,7 @@ export function RoomProvider({ roomId, projectName, children }: RoomProviderProp
|
||||
useWsEvent('pin_added', (event) => {
|
||||
if (event.room_id !== roomId) return;
|
||||
const { room, message, pinned_by, pinned_at } = event.data;
|
||||
setPinnedMessages((prev: PinnedMessage[]) => (
|
||||
prev.some((p) => p.message === message)
|
||||
? prev
|
||||
: [...prev, { room, message, pinned_by, pinned_at }]
|
||||
));
|
||||
setPinnedMessages((prev: PinnedMessage[]) => [...prev, { room, message, pinned_by, pinned_at }]);
|
||||
});
|
||||
|
||||
useWsEvent('pin_removed', (event) => {
|
||||
|
||||
@ -36,254 +36,3 @@
|
||||
align-self: center;
|
||||
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: {
|
||||
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: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user