phantomknight287/saturn

public

The operating system for your freelance business.

update ui, split settings page into smaller subsections and increase precision of member rates0ca99815 months ago258 lines · 7.2 KB

1	'use client'
2
3	import { formatDistanceToNow } from 'date-fns'
4	import {
5	CheckCircle2,
6	ChevronDown,
7	ChevronRight,
8	MessageSquare,
9	Send,
10	} from 'lucide-react'
11	import { useRouter }
12	import { useAction }
13	import { useState }
14	import { toast }
15	import { Avatar, AvatarFallback
16	import { Badge }
17	import { Button }
18	import { Textarea }
19	import { addThreadReplyAction }
20	import type { Thread,
21
22	function MessageBubble({ message
23	return (
24	<div className='flex items-start gap-3
25	<Avatar className='
26	<AvatarImage
27	alt={message.authorName
28	src={message.authorImage
29	/>
30	<AvatarFallback className='
31	{(message.authorName
32	</AvatarFallback>
33	</Avatar>
34	<div className='min-w-0 flex-1
35	<div className='flex items-center gap-2
36	<span className='font-medium text-sm
37	{message.authorName \|\|
38	</span>
39	<span className='text-muted-foreground text-xs
40	{formatDistanceToNow(new Date
41	addSuffix: true,
42	})}
43	</span>
44	</div>
45	<p className='text-muted-foreground text-sm
46	</div>
47	</div>
48	)
49	}
50
51	function ThreadItem({
52	thread,
53	orgSlug,
54	projectId,
55	entityId,
56	onSubmit,
57	onResolve,
58	isSending = false,
59	}: {
60	thread: Thread
61	orgSlug: string
62	projectId: string
63	entityId: string
64	onSubmit?: (
65	onResolve?: (
66	isSending?: boolean
67	}) {
68	const router =
69	const [expanded,
70	const [replyText,
71	const [showReply,
72
73	const { execute:
74	onSuccess() {
75	setReplyText('')
76	setShowReply(false)
77	toast.success('Reply added
78	router.refresh()
79	},
80	onError({ error
81	toast.error(error
82	},
83	})
84
85	const handleReply =
86	if (!replyText.trim
87	return
88	}
89	if (onSubmit) {
90	onSubmit(replyText.trim
91	setReplyText('')
92	return
93	}
94	executeReply({
95	threadId: thread.id
96	orgSlug,
97	replyBody: replyText.trim
98	projectId,
99	requirementId: entityId,
100	})
101	}
102
103	const replyCount =
104
105	return (
106	<div className='rounded-lg border
107	<button
108	className='flex w-full items-start gap-3 px-4 py-3 text-left hover:bg-muted/50'
109	onClick={() =>
110	type='button'
111	>
112	<div className='mt-0.5 shrink-0 text-muted-foreground
113	{expanded ? (
114	<ChevronDown className='
115	) : (
116	<ChevronRight className='
117	)}
118	</div>
119	<div className='min-w-0 flex-1
120	<div className='flex items-center gap-2
121	<span className='line-clamp-1 font-medium text-sm
122	“{thread.selectedText
123	</span>
124	<Badge
125	className='shrink-0 text-xs capitalize'
126	variant={thread.status
127	>
128	{thread.status}
129	</Badge>
130	</div>
131	<div className='mt-0.5 flex items-center gap-2 text-muted-foreground text-xs
132	<span>{thread.createdByName
133	<span>·</span>
134	<span>
135	{formatDistanceToNow(new Date
136	addSuffix: true,
137	})}
138	</span>
139	{replyCount > 0
140	<>
141	<span>·</span>
142	<span>
143	{replyCount} {replyCount
144	</span>
145	</>
146	)}
147	</div>
148	</div>
149	</button>
150
151	{expanded && (
152	<div className='border-t px-4 py-3
153	<div className='space-y-4
154	{thread.messages.map
155	<MessageBubble key={
156	))}
157	</div>
158
159	{showReply ? (
160	<div className='mt-4 space-y-2
161	<Textarea
162	autoFocus
163	className='min-h-[80px]'
164	onChange={(e)
165	onKeyDown={(e)
166	if (e.key
167	handleReply()
168	}
169	}}
170	placeholder='Write a reply...'
171	value={replyText}
172	/>
173	<div className='flex justify-end gap-2
174	<Button
175	onClick={() =>
176	setShowReply(false)
177	setReplyText('')
178	}}
179	variant='outline'
180	>
181	Cancel
182	</Button>
183	<Button
184	disabled={!replyText.
185	loading={isPending \|\|
186	onClick={handleReply}
187	>
188	<Send className='
189	Reply
190	</Button>
191	</div>
192	</div>
193	) : (
194	<div className='mt-3 flex items-center gap-2
195	<Button onClick={
196	<MessageSquare className='
197	Reply
198	</Button>
199	{onResolve && thread
200	<Button onClick={
201	<CheckCircle2 className='
202	Resolve
203	</Button>
204	)}
205	</div>
206	)}
207	</div>
208	)}
209	</div>
210	)
211	}
212
213	interface ThreadsPanelProps {
214	entityId: string
215	isSending?: boolean
216	onResolve?: (threadId
217	onSubmit?: (replyBody
218	orgSlug: string
219	projectId: string
220	threads: Thread
221	}
222
223	export default function ThreadsPanel
224	threads,
225	orgSlug,
226	projectId,
227	entityId,
228	onSubmit,
229	onResolve,
230	isSending = false,
231	}: ThreadsPanelProps)
232	if (threads.length
233	return null
234	}
235
236	return (
237	<div className='mt-8
238	<h3 className='mb-4 flex items-center gap-2 font-medium text-sm
239	<MessageSquare className='
240	Threads ({threads.length})
241	</h3>
242	<div className='space-y-3
243	{threads.map((
244	<ThreadItem
245	entityId={entityId}
246	isSending={isSending}
247	key={thread.id
248	onResolve={onResolve}
249	onSubmit={onSubmit}
250	orgSlug={orgSlug}
251	projectId={projectId}
252	thread={thread}
253	/>
254	))}
255	</div>
256	</div>
257	)
258	}