diff --git a/src/modules/nostr-feed/components/SubmissionComment.vue b/src/modules/nostr-feed/components/SubmissionComment.vue index b1e4b09..5914a0a 100644 --- a/src/modules/nostr-feed/components/SubmissionComment.vue +++ b/src/modules/nostr-feed/components/SubmissionComment.vue @@ -4,9 +4,9 @@ * Displays a single comment with vote controls and nested replies */ -import { computed } from 'vue' +import { computed, ref } from 'vue' import { formatDistanceToNow } from 'date-fns' -import { ChevronUp, ChevronDown, Reply, Flag, MoreHorizontal } from 'lucide-vue-next' +import { ChevronUp, ChevronDown, Reply, Flag, MoreHorizontal, Send, X } from 'lucide-vue-next' import VoteControls from './VoteControls.vue' import type { SubmissionComment as CommentType } from '../types/submission' @@ -17,18 +17,49 @@ interface Props { getDisplayName: (pubkey: string) => string isAuthenticated: boolean currentUserPubkey?: string | null + replyingToId?: string | null + isSubmittingReply?: boolean } interface Emits { (e: 'toggle-collapse', commentId: string): void (e: 'reply', comment: CommentType): void + (e: 'cancel-reply'): void + (e: 'submit-reply', commentId: string, text: string): void (e: 'upvote', comment: CommentType): void (e: 'downvote', comment: CommentType): void } -const props = defineProps() +const props = withDefaults(defineProps(), { + replyingToId: null, + isSubmittingReply: false +}) const emit = defineEmits() +// Local reply text +const replyText = ref('') + +// Is this comment being replied to +const isBeingRepliedTo = computed(() => props.replyingToId === props.comment.id) + +// Handle reply click +function onReplyClick() { + emit('reply', props.comment) +} + +// Submit the reply +function submitReply() { + if (!replyText.value.trim()) return + emit('submit-reply', props.comment.id, replyText.value.trim()) + replyText.value = '' +} + +// Cancel reply +function cancelReply() { + replyText.value = '' + emit('cancel-reply') +} + // Is this comment collapsed const isCollapsed = computed(() => props.collapsedComments.has(props.comment.id)) @@ -168,7 +199,8 @@ const isOwnComment = computed(() => + +
+
+