yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(comments-pane): refactor comments display logic for improved asset and comment pane management

Browse Source
This commit is contained in:
Yusuf İpek
2026-03-08 18:50:09 +03:00
parent 4746085fc3
commit 14b2809aed
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/video-page/comments-pane.tsx
+34 -28
View File
@@ -276,30 +276,35 @@ export const CommentsPane = memo(function CommentsPane({
)} )}
</div> </div>
<div className="flex-1 overflow-y-auto p-4 space-y-3"> <div className="flex-1 overflow-y-auto">
{activePane === 'assets' ? assetsPane : filteredComments.length === 0 ? ( <div className={cn(activePane === 'assets' ? 'block p-4' : 'hidden')} aria-hidden={activePane !== 'assets'}>
<div className="text-center py-8 text-muted-foreground"> {assetsPane}
<MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" /> </div>
<p>No comments yet</p>
<p className="text-sm">Be the first to leave feedback!</p> <div className={cn(activePane === 'comments' ? 'block p-4 space-y-3' : 'hidden')} aria-hidden={activePane !== 'comments'}>
</div> {filteredComments.length === 0 ? (
) : ( <div className="text-center py-8 text-muted-foreground">
sortedComments.map((comment) => { <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
const authorName = <p>No comments yet</p>
comment.author?.name || comment.guestName || 'Anonymous'; <p className="text-sm">Be the first to leave feedback!</p>
const isEditing = editingCommentId === comment.id; </div>
const isReplying = replyingTo === comment.id; ) : (
const canEditComment = comment.canEdit ?? (comment.author?.id === currentUserId); sortedComments.map((comment) => {
const canDeleteComment = comment.canDelete ?? (comment.author?.id === currentUserId || projectOwnerId === currentUserId); const authorName =
const canManageComment = canEditComment || canDeleteComment; comment.author?.name || comment.guestName || 'Anonymous';
return ( const isEditing = editingCommentId === comment.id;
<div const isReplying = replyingTo === comment.id;
key={comment.id} const canEditComment = comment.canEdit ?? (comment.author?.id === currentUserId);
className={cn( const canDeleteComment = comment.canDelete ?? (comment.author?.id === currentUserId || projectOwnerId === currentUserId);
'group rounded-lg border p-3 transition-colors hover:bg-accent/50', const canManageComment = canEditComment || canDeleteComment;
comment.isResolved && 'opacity-60' return (
)} <div
> key={comment.id}
className={cn(
'group rounded-lg border p-3 transition-colors hover:bg-accent/50',
comment.isResolved && 'opacity-60'
)}
>
<div className="flex items-start justify-between gap-2 mb-2"> <div className="flex items-start justify-between gap-2 mb-2">
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
<Avatar className="h-6 w-6 shrink-0"> <Avatar className="h-6 w-6 shrink-0">
@@ -884,10 +889,11 @@ export const CommentsPane = memo(function CommentsPane({
Reply Reply
</button> </button>
)} )}
</div> </div>
); );
}) })
)} )}
</div>
</div> </div>
{activePane === 'comments' ? composer : null} {activePane === 'comments' ? composer : null}