apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-26 01:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): add comment item component

Browse source
This commit is contained in:
CREDO23 2026-01-15 20:45:16 +02:00
parent 8bfcfdd084
commit 8a1e0fb013
4 changed files with 327 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

87
surfsense_web/app/preview/chat-comments/page.tsx
View file

@ -2,6 +2,8 @@
import { useState } from "react";
import { CommentComposer } from "@/components/chat-comments/comment-composer/comment-composer";
import { CommentItem } from "@/components/chat-comments/comment-item/comment-item";
import type { CommentData } from "@/components/chat-comments/comment-item/types";
import { MemberMentionPicker } from "@/components/chat-comments/member-mention-picker/member-mention-picker";
import type { MemberOption } from "@/components/chat-comments/member-mention-picker/types";
@ -38,6 +40,57 @@ const fakeMembersData: MemberOption[] = [
},
];
const fakeCommentsData: CommentData[] = [
{
id: 1,
content: "This is a great response! @Alice Smith can you review?",
contentRendered: "This is a great response! @Alice Smith can you review?",
author: {
id: "550e8400-e29b-41d4-a716-446655440002",
displayName: "Bob Johnson",
email: "bob.johnson@example.com",
avatarUrl: null,
},
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
isEdited: false,
canEdit: true,
canDelete: true,
},
{
id: 2,
content: "I checked this yesterday and it looks good.",
contentRendered: "I checked this yesterday and it looks good.",
author: {
id: "550e8400-e29b-41d4-a716-446655440001",
displayName: "Alice Smith",
email: "alice@example.com",
avatarUrl: null,
},
createdAt: new Date(Date.now() - 86400000).toISOString(),
updatedAt: new Date(Date.now() - 3600000).toISOString(),
isEdited: true,
canEdit: false,
canDelete: true,
},
{
id: 3,
content: "Thanks @Bob Johnson and @Alice Smith for the quick turnaround!",
contentRendered: "Thanks @Bob Johnson and @Alice Smith for the quick turnaround!",
author: {
id: "550e8400-e29b-41d4-a716-446655440004",
displayName: null,
email: "david.wilson@example.com",
avatarUrl: null,
},
createdAt: new Date(Date.now() - 3600000 * 3).toISOString(),
updatedAt: new Date(Date.now() - 3600000 * 3).toISOString(),
isEdited: false,
canEdit: true,
canDelete: false,
},
];
export default function ChatCommentsPreviewPage() {
const [highlightedIndex, setHighlightedIndex] = useState(0);
const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
@ -80,6 +133,40 @@ export default function ChatCommentsPreviewPage() {
)}
</section>
{/* Comment Item Section */}
<section className="space-y-4">
<h2 className="text-xl font-semibold border-b pb-2">Comment Item</h2>
<p className="text-sm text-muted-foreground">
Hover over comments to see the action menu. Mentions are highlighted.
</p>
<div className="max-w-lg space-y-4 rounded-lg border p-4">
{/* Comment with replies */}
<div className="space-y-3">
<CommentItem
comment={fakeCommentsData[0]}
onEdit={(id) => alert(`Edit comment ${id}`)}
onDelete={(id) => alert(`Delete comment ${id}`)}
onReply={(id) => alert(`Reply to comment ${id}`)}
/>
<CommentItem
comment={fakeCommentsData[1]}
isReply
onEdit={(id) => alert(`Edit reply ${id}`)}
onDelete={(id) => alert(`Delete reply ${id}`)}
/>
</div>
{/* Standalone comment */}
<CommentItem
comment={fakeCommentsData[2]}
onEdit={(id) => alert(`Edit comment ${id}`)}
onDelete={(id) => alert(`Delete comment ${id}`)}
onReply={(id) => alert(`Reply to comment ${id}`)}
/>
</div>
</section>
{/* Member Mention Picker Section */}
<section className="space-y-4">
<h2 className="text-xl font-semibold border-b pb-2">Member Mention Picker (Standalone)</h2>