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

feat(web): add comment composer with robust mention detection

Browse source
This commit is contained in:
CREDO23 2026-01-15 20:35:21 +02:00
parent 90a8a17c88
commit 8bfcfdd084
3 changed files with 396 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { CommentComposer } from "@/components/chat-comments/comment-composer/comment-composer";
import { MemberMentionPicker } from "@/components/chat-comments/member-mention-picker/member-mention-picker";
import type { MemberOption } from "@/components/chat-comments/member-mention-picker/types";
@ -40,10 +41,11 @@ const fakeMembersData: MemberOption[] = [
export default function ChatCommentsPreviewPage() {
const [highlightedIndex, setHighlightedIndex] = useState(0);
const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
const [submittedContent, setSubmittedContent] = useState<string | null>(null);
return (
<div className="min-h-screen bg-background p-8">
<div className="mx-auto max-w-4xl space-y-8">
<div className="mx-auto max-w-4xl space-y-12">
<div>
<h1 className="text-2xl font-bold">Chat Comments UI Preview</h1>
<p className="text-muted-foreground">
@ -51,76 +53,104 @@ export default function ChatCommentsPreviewPage() {
</p>
</div>
<div className="grid gap-8 md:grid-cols-2">
<section className="space-y-4">
<h2 className="text-lg font-semibold">After typing @</h2>
<p className="text-sm text-muted-foreground">Shows all members</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={fakeMembersData}
query=""
highlightedIndex={highlightedIndex}
onSelect={(member) => setSelectedMember(member)}
onHighlightChange={setHighlightedIndex}
/>
{/* Comment Composer Section */}
<section className="space-y-4">
<h2 className="text-xl font-semibold border-b pb-2">Comment Composer</h2>
<p className="text-sm text-muted-foreground">
Type @ to trigger mention picker. Use Tab/Shift+Tab/Arrow keys to navigate, Enter to select.
</p>
<div className="max-w-md rounded-lg border p-4">
<CommentComposer
members={fakeMembersData}
placeholder="Write a comment... (try typing @)"
onSubmit={(content) => setSubmittedContent(content)}
onCancel={() => setSubmittedContent(null)}
autoFocus
/>
</div>
{submittedContent && (
<div className="max-w-md rounded-md bg-muted p-3 text-sm">
<span className="font-medium">Submitted content: </span>
<code className="block mt-1 rounded bg-background p-2 whitespace-pre-wrap">
{submittedContent}
</code>
</div>
{selectedMember && (
<div className="rounded-md bg-muted p-3 text-sm">
<span className="font-medium">Selected: </span>
<code className="rounded bg-background px-1">
@[{selectedMember.id.slice(0, 8)}...]
</code>
<span className="text-muted-foreground">
{" → @"}
{selectedMember.displayName || selectedMember.email}
</span>
)}
</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>
<div className="grid gap-8 md:grid-cols-2">
<div className="space-y-4">
<h3 className="text-lg font-medium">After typing @</h3>
<p className="text-sm text-muted-foreground">Shows all members</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={fakeMembersData}
query=""
highlightedIndex={highlightedIndex}
onSelect={(member) => setSelectedMember(member)}
onHighlightChange={setHighlightedIndex}
/>
</div>
)}
</section>
<section className="space-y-4">
<h2 className="text-lg font-semibold">After typing @ali</h2>
<p className="text-sm text-muted-foreground">Filtered to matching members</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={fakeMembersData}
query="ali"
highlightedIndex={0}
onSelect={() => {}}
onHighlightChange={() => {}}
/>
{selectedMember && (
<div className="rounded-md bg-muted p-3 text-sm">
<span className="font-medium">Selected: </span>
<code className="rounded bg-background px-1">
@[{selectedMember.id.slice(0, 8)}...]
</code>
</div>
)}
</div>
</section>
<section className="space-y-4">
<h2 className="text-lg font-semibold">Loading State</h2>
<p className="text-sm text-muted-foreground">While fetching members</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={[]}
query=""
highlightedIndex={0}
isLoading={true}
onSelect={() => {}}
onHighlightChange={() => {}}
/>
<div className="space-y-4">
<h3 className="text-lg font-medium">After typing @ali</h3>
<p className="text-sm text-muted-foreground">Filtered to matching members</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={fakeMembersData}
query="ali"
highlightedIndex={0}
onSelect={() => {}}
onHighlightChange={() => {}}
/>
</div>
</div>
</section>
<section className="space-y-4">
<h2 className="text-lg font-semibold">No Results</h2>
<p className="text-sm text-muted-foreground">After typing @xyz (no match)</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={fakeMembersData}
query="xyz"
highlightedIndex={0}
onSelect={() => {}}
onHighlightChange={() => {}}
/>
<div className="space-y-4">
<h3 className="text-lg font-medium">Loading State</h3>
<p className="text-sm text-muted-foreground">While fetching members</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={[]}
query=""
highlightedIndex={0}
isLoading={true}
onSelect={() => {}}
onHighlightChange={() => {}}
/>
</div>
</div>
</section>
</div>
<div className="space-y-4">
<h3 className="text-lg font-medium">No Results</h3>
<p className="text-sm text-muted-foreground">After typing @xyz (no match)</p>
<div className="w-72 rounded-lg border bg-popover shadow-lg">
<MemberMentionPicker
members={fakeMembersData}
query="xyz"
highlightedIndex={0}
onSelect={() => {}}
onHighlightChange={() => {}}
/>
</div>
</div>
</div>
</section>
</div>
</div>
);