From 81839f70a5f13af3d7ef546931dd143a9d5ae256 Mon Sep 17 00:00:00 2001
From: taslangraham <gtaslan1@gmail.com>
Date: Wed, 9 Jul 2025 00:25:52 -0500
Subject: [PATCH 1/5] WIP: pkp/pkp-lib#11327 Implement public facing UI for
 user comments

---
 src/components/UserComment/UserComment.vue | 274 +++++++++++++++++++++
 1 file changed, 274 insertions(+)
 create mode 100644 src/components/UserComment/UserComment.vue

diff --git a/src/components/UserComment/UserComment.vue b/src/components/UserComment/UserComment.vue
new file mode 100644
index 000000000..3e36a9226
--- /dev/null
+++ b/src/components/UserComment/UserComment.vue
@@ -0,0 +1,274 @@
+<template>
+	<div v-if="!isLoading">
+		<h3>COMMENTS</h3>
+		<template v-if="currentUser">
+			<label for="comment-input">Add comment</label>
+			<div style="margin: 10px 0; display: flex; gap: 10px">
+				<input
+					id="comment-input"
+					v-model="commentText"
+					class="flex-1"
+					type="text"
+					placeholder="Write your comment here..."
+				/>
+				<PkpButton :is-primary="true" @click="addComment">Add</PkpButton>
+			</div>
+			<!--			<PkpForm v-bind="currentCommentForm"></PkpForm>-->
+		</template>
+		<template v-else>
+			<a :href="loginUrl" style="text-decoration: none">log in</a>
+			<span>&nbsp;to comment or report a comment</span>
+		</template>
+
+		<template v-if="comments.length">
+			<ul>
+				<li
+					v-for="comment in comments"
+					:key="comment.id"
+					class="mt-8 border-b border-b-light pb-2"
+				>
+					<div class="flex justify-between gap-4">
+						<span class="font-semibold">
+							{{ comment.commentText }}
+							<span
+								v-if="comment.isReported"
+								class="text-sm-light text-negative"
+							>
+								(Reported)
+							</span>
+						</span>
+
+						<!-- Any user(logged in or not), except the creator of the comment, can see option to report comment -->
+						<PkpButton
+							v-if="!currentUser || comment.userId !== currentUser?.id"
+							:is-warnable="true"
+							:is-disabled="!currentUser"
+							@click="reportComment(comment.id)"
+						>
+							Report
+						</PkpButton>
+					</div>
+					<span class="mb-2 opacity-55">by {{ comment.userName }}</span>
+				</li>
+			</ul>
+			<div class="mt-4">
+				<PkpButton
+					v-if="hasMoreComments"
+					:is-primary="true"
+					@click="fetchComments"
+				>
+					Load More Comments
+				</PkpButton>
+			</div>
+		</template>
+
+		<p v-else>There are no comments made for this publication version</p>
+	</div>
+</template>
+
+<script setup>
+import {cloneDeep} from 'lodash';
+
+import {computed, onMounted, ref} from 'vue';
+import PkpButton from '@/components/Button/Button.vue';
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+import {useFetchPaginated} from '@/composables/useFetchPaginated';
+import {useForm} from '@/composables/useForm';
+// import PkpForm from '@/components/Form/Form.vue';
+// import {useLocalize} from '@/composables/useLocalize';
+// const {t} = useLocalize();
+const props = defineProps({
+	data: {
+		type: String,
+		required: true,
+		validator(value) {
+			const parsed = JSON.parse(value);
+
+			if (!Object.prototype.hasOwnProperty.call(parsed, 'publicationId')) {
+				throw new Error('publicationId is missing in `data` json prop');
+			}
+
+			if (
+				!Object.prototype.hasOwnProperty.call(
+					parsed,
+					'articleLatestPublicationId',
+				)
+			) {
+				throw new Error(
+					'articleLatestPublicationId is missing in `data` json prop',
+				);
+			}
+
+			if (typeof parsed.publicationId !== 'number') {
+				throw new Error('publicationId must be a number in `data` json prop');
+			}
+
+			if (typeof parsed.articleLatestPublicationId !== 'number') {
+				throw new Error(
+					'articleLatestPublicationId must be a number in `data` json prop',
+				);
+			}
+
+			if (!Object.prototype.hasOwnProperty.call(parsed, 'itemsPerPage')) {
+				throw new Error('itemsPerPage is missing in `data` json prop');
+			}
+
+			if (typeof parsed.itemsPerPage !== 'number') {
+				throw new Error('itemsPerPage must be a number in `data` json prop');
+			}
+
+			if (
+				!Object.prototype.hasOwnProperty.call(parsed, 'userCommentForm') ||
+				!Object.prototype.hasOwnProperty.call(parsed, 'userCommentReportForm')
+			) {
+				throw new Error(
+					'userCommentForm or userCommentReportForm is missing in `data` json prop',
+				);
+			}
+
+			// userCommentForm and userCommentReportForm should be objects
+			if (
+				typeof parsed.userCommentForm !== 'object' ||
+				typeof parsed.userCommentReportForm !== 'object'
+			) {
+				throw new Error(
+					'userCommentForm and userCommentReportForm must be objects in `data` json prop',
+				);
+			}
+
+			if (typeof parsed.itemsPerPage !== 'number') {
+				throw new Error('itemsPerPage must be a number in `data` json prop');
+			}
+
+			return true;
+		},
+	},
+	articleLatestPublicationId: {
+		type: Number,
+		required: true,
+	},
+});
+const currentUser = ref();
+const commentText = ref('');
+let comments = ref([]);
+const currentPage = ref(0);
+const pageCount = ref(0);
+const currentReportForm = ref({});
+const {
+	publicationId,
+	articleLatestPublicationId,
+	userCommentForm,
+	userCommentReportForm,
+	itemsPerPage,
+} = JSON.parse(props.data);
+
+const isLoading = ref(true);
+const hasMoreComments = computed(() => pageCount.value > currentPage.value);
+
+const {form: currentCommentForm} = useForm(cloneDeep(userCommentForm));
+currentCommentForm.value.hiddenFields.publicationId = publicationId;
+
+function onCommentSaved(data) {
+	// Can be removed once PkpForm component is used
+	commentText.value = '';
+
+	// Add the new comment to the top of the comments list.
+	// Since comments require approval before being public, this is done to allow the person making the comment to see it immediately (it will not be there on page reload).
+	// It probably makes sense to remove this and instead show the user a message that the comment is pending approval.
+	comments.value.unshift(data);
+}
+
+async function addComment() {
+	if (articleLatestPublicationId !== publicationId) {
+		return;
+	}
+
+	// The logic below will no longer be needed once PkpForm component is used
+	const {apiUrl} = useUrl('comments');
+	const {
+		fetch: submitComment,
+		isSuccess,
+		data,
+	} = useFetch(apiUrl, {
+		method: 'POST',
+		body: {
+			publicationId,
+			commentText: commentText.value,
+		},
+	});
+	await submitComment();
+	if (isSuccess.value) {
+		onCommentSaved(data.value);
+	} else {
+		throw new Error('Error saving comment');
+	}
+}
+
+function onCommentReportSaved(commentId) {
+	comments.value.forEach((comment) => {
+		if (comment.id === commentId) {
+			comment.isReported = true;
+		}
+	});
+}
+
+function getCommentReportForm(comment) {
+	const preparedForm = cloneDeep(userCommentReportForm);
+	const {form, setAction} = useForm(preparedForm);
+
+	setAction(`${preparedForm.action}/${comment.id}/reports`);
+
+	return form;
+}
+
+async function reportComment(commentId) {
+	if (!currentUser.value) {
+		throw new Error('User must be logged in to report a comment');
+	}
+
+	currentReportForm.value = getCommentReportForm(
+		comments.value.find((comment) => comment.id === commentId),
+	);
+
+	// The report submission logic below will not be needed once pkpForm component is used
+	const {apiUrl} = useUrl(`comments/${commentId}/reports`);
+
+	const {fetch: postReport, isSuccess} = useFetch(apiUrl, {
+		method: 'POST',
+		body: {note: 'Inappropriate content'},
+	});
+	await postReport();
+
+	if (isSuccess.value) {
+		onCommentReportSaved(commentId);
+	} else {
+		throw new Error('Error reporting comment');
+	}
+}
+
+async function fetchComments() {
+	const {apiUrl} = useUrl(`comments/public?publicationIds=${publicationId}`);
+
+	currentPage.value += 1;
+	const {items, pagination, fetch} = useFetchPaginated(apiUrl, {
+		currentPage,
+		pageSize: itemsPerPage,
+	});
+
+	await fetch();
+	comments.value = [...comments.value, ...items.value];
+	pageCount.value = pagination.value.pageCount;
+}
+
+// Fetch comments after a short delay to ensure `pkp` global var and vue composables are loaded before use
+onMounted(() => {
+	setTimeout(async () => {
+		currentUser.value = pkp?.currentUser;
+		await fetchComments();
+		isLoading.value = false;
+	}, 500);
+});
+</script>
+
+<style scoped lang="less"></style>

From 3efa589742b8e06c7442fe3d8b1c5674bc0d4f70 Mon Sep 17 00:00:00 2001
From: taslangraham <gtaslan1@gmail.com>
Date: Wed, 13 Aug 2025 12:02:50 -0500
Subject: [PATCH 2/5] pkp/pkp-lib#11698 Add additional icons and components to
 frontend UI

---
 .../PkpAvatarInitials/pkpAvatarInitials.vue   | 101 ++++++++++++++++++
 .../components/PkpButton/PkpButton.vue        |  19 +++-
 src/frontend/components/PkpIcon/PkpIcon.vue   |   7 +-
 .../components/PkpIcon/icons/Error.vue        |   8 ++
 .../components/PkpIcon/icons/Help.vue         |  27 +++++
 .../components/PkpIcon/icons/User.vue         |  10 ++
 src/frontend/composables/load_frontend.js     |   3 +-
 src/frontend/composables/usePkpDate.js        |  17 +++
 8 files changed, 188 insertions(+), 4 deletions(-)
 create mode 100644 src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue
 create mode 100644 src/frontend/components/PkpIcon/icons/Error.vue
 create mode 100644 src/frontend/components/PkpIcon/icons/Help.vue
 create mode 100644 src/frontend/components/PkpIcon/icons/User.vue
 create mode 100644 src/frontend/composables/usePkpDate.js

diff --git a/src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue b/src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue
new file mode 100644
index 000000000..f146d68c9
--- /dev/null
+++ b/src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue
@@ -0,0 +1,101 @@
+<template>
+	<div :class="classes">
+		<span v-if="initials">{{ initials }}</span>
+		<PkpIcon
+			v-else
+			icon="User"
+			:class="
+				shrink ? 'avatar-initials__icon--small' : 'avatar-initials__icon--large'
+			"
+		/>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
+
+const props = defineProps({
+	isPrimary: {type: Boolean, default: true},
+	isSecondary: {type: Boolean, default: false},
+	isWarnable: {type: Boolean, default: false},
+	isDisabled: {type: Boolean, default: false},
+	shrink: {type: Boolean, default: false},
+	initials: {type: String, required: true},
+});
+
+const classes = computed(() => ({
+	'avatar-initials': true,
+	'avatar-initials--small': props.shrink,
+	'avatar-initials--large': !props.shrink,
+	'avatar-initials--primary':
+		props.isPrimary && !props.isSecondary && !props.isWarnable,
+	'avatar-initials--secondary': props.isSecondary,
+	'avatar-initials--warnable': props.isWarnable,
+	'avatar-initials--disabled': props.isDisabled,
+}));
+</script>
+
+<style scoped>
+.avatar-initials {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	vertical-align: middle;
+	border-radius: 50%;
+	padding: 0.25rem;
+	cursor: pointer;
+}
+
+.avatar-initials--large {
+	height: 3rem;
+	width: 3rem;
+	font-size: 1.25rem;
+	font-weight: 500;
+}
+
+.avatar-initials--small {
+	height: 2rem;
+	width: 2rem;
+	font-size: 1rem;
+	font-weight: 400;
+}
+
+.avatar-initials--primary {
+	background-color: var(--pkp-color-primary);
+	color: var(--pkp-text-color-on-dark);
+}
+
+.avatar-initials--primary:hover {
+	background-color: var(--pkp-color-hover);
+	color: var(--pkp-text-color-on-dark);
+}
+
+.avatar-initials--secondary {
+	background-color: var(--pkp-background-color-secondary);
+}
+
+.avatar-initials--secondary:not(.avatar-initials--disabled) {
+	color: var(--pkp-color-primary);
+}
+
+.avatar-initials--warnable {
+	background-color: var(--pkp-color-negative);
+	color: var(--pkp-text-color-on-dark);
+}
+
+.avatar-initials--disabled {
+	color: var(--pkp-background-color-disabled);
+}
+
+/* Icon sizes */
+.avatar-initials__icon--large {
+	height: 1.25rem;
+	width: 1.25rem;
+}
+
+.avatar-initials__icon--small {
+	height: 0.75rem;
+	width: 0.75rem;
+}
+</style>
diff --git a/src/frontend/components/PkpButton/PkpButton.vue b/src/frontend/components/PkpButton/PkpButton.vue
index f0d58f61c..32ce02b84 100644
--- a/src/frontend/components/PkpButton/PkpButton.vue
+++ b/src/frontend/components/PkpButton/PkpButton.vue
@@ -1,8 +1,14 @@
 <template>
-	<button :class="buttonClass" v-bind="$attrs">
+	<component
+		v-bind="$attrs"
+		:is="element"
+		:class="buttonClass"
+		:href="element === 'a' ? href : false"
+		:disabled="element === 'a' && !isDisabled ? undefined : isDisabled"
+	>
 		<slot name="left-icon" />
 		<slot />
-	</button>
+	</component>
 </template>
 
 <script setup>
@@ -13,6 +19,15 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/** Whether to use a `button` or `a` HTML tag. */
+	element: {
+		type: String,
+		default: 'button',
+	},
+	isDisabled: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const buttonClass = computed(() => {
diff --git a/src/frontend/components/PkpIcon/PkpIcon.vue b/src/frontend/components/PkpIcon/PkpIcon.vue
index de46669b5..03b7ad19b 100644
--- a/src/frontend/components/PkpIcon/PkpIcon.vue
+++ b/src/frontend/components/PkpIcon/PkpIcon.vue
@@ -2,10 +2,15 @@
 import {computed} from 'vue';
 import Cancel from './icons/Cancel.vue';
 import MoreOptions from './icons/MoreOptions.vue';
-
+import Error from './icons/Error.vue';
+import Help from './icons/Help.vue';
+import User from './icons/User.vue';
 const svgIcons = {
 	Cancel,
 	MoreOptions,
+	Error,
+	Help,
+	User,
 };
 
 const props = defineProps({
diff --git a/src/frontend/components/PkpIcon/icons/Error.vue b/src/frontend/components/PkpIcon/icons/Error.vue
new file mode 100644
index 000000000..9c74baf94
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/Error.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M12.8849 3.4905C12.5389 2.8365 11.4629 2.8365 11.1169 3.4905L2.11694 20.4905C2.03592 20.6429 1.99575 20.8136 2.00036 20.9861C2.00496 21.1586 2.05417 21.327 2.14319 21.4749C2.23221 21.6227 2.35801 21.7449 2.50833 21.8297C2.65865 21.9145 2.82837 21.9588 3.00094 21.9585H21.0009C21.1734 21.9589 21.343 21.9145 21.4932 21.8298C21.6434 21.7451 21.7691 21.6229 21.8581 21.4752C21.947 21.3274 21.9961 21.1591 22.0007 20.9867C22.0052 20.8144 21.965 20.6437 21.8839 20.4915L12.8849 3.4905ZM13.0009 18.9585H11.0009V16.9585H13.0009V18.9585ZM11.0009 14.9585V9.9585H13.0009L13.0019 14.9585H11.0009Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/Help.vue b/src/frontend/components/PkpIcon/icons/Help.vue
new file mode 100644
index 000000000..707dad45e
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/Help.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_3415_5808)">
+			<rect
+				x="1.5"
+				y="1.5"
+				width="15"
+				height="15"
+				rx="7.5"
+				stroke="currentColor"
+			/>
+			<path
+				d="M10.1556 6.49536C10.8447 6.49536 11.4033 5.93675 11.4033 5.24768C11.4033 4.5586 10.8447 4 10.1556 4C9.46656 4 8.90796 4.5586 8.90796 5.24768C8.90796 5.93675 9.46656 6.49536 10.1556 6.49536Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M11.4315 11.5578C11.397 11.5346 11.3583 11.5185 11.3175 11.5105C11.2767 11.5025 11.2348 11.5027 11.1941 11.5111C11.1534 11.5196 11.1148 11.536 11.0806 11.5596C11.0464 11.5831 11.0172 11.6133 10.9948 11.6482C10.6932 12.0948 10.3239 12.4915 9.89995 12.8242C9.79702 12.9021 9.41335 13.1985 9.25116 13.1361C9.13887 13.1018 9.20437 12.8803 9.2262 12.7867L9.39152 12.297C9.46014 12.0974 10.6548 8.55399 10.7858 8.14849C10.9792 7.55585 10.895 6.97256 10.0122 7.11292C9.77206 7.13787 7.33597 7.45291 7.2923 7.45603C7.25134 7.45869 7.2113 7.4694 7.17448 7.48753C7.13765 7.50567 7.10476 7.53088 7.07768 7.56173C7.0506 7.59257 7.02986 7.62845 7.01664 7.66732C7.00343 7.70618 6.998 7.74726 7.00066 7.78823C7.00332 7.82919 7.01403 7.86922 7.03216 7.90605C7.0503 7.94287 7.07551 7.97577 7.10635 8.00285C7.1372 8.02993 7.17308 8.05067 7.21194 8.06389C7.25081 8.0771 7.29189 8.08253 7.33285 8.07987C7.33285 8.07987 8.26861 7.95822 8.37154 7.94886C8.42427 7.94372 8.47736 7.95394 8.5244 7.97829C8.57145 8.00264 8.61044 8.04009 8.63668 8.08611C8.69319 8.26082 8.68545 8.44998 8.61484 8.61949C8.53374 8.93141 7.25175 12.5434 7.2112 12.7524C7.16771 12.9273 7.17979 13.1114 7.24575 13.2791C7.31171 13.4468 7.42829 13.5898 7.57927 13.6882C7.86265 13.8771 8.20007 13.968 8.53998 13.9471C8.87048 13.943 9.19734 13.8775 9.50381 13.7537C10.2805 13.4418 11.0915 12.6121 11.5188 11.9601C11.5556 11.8939 11.567 11.8165 11.551 11.7425C11.5349 11.6685 11.4924 11.6028 11.4315 11.5578Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_3415_5808">
+				<rect width="18" height="18" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/User.vue b/src/frontend/components/PkpIcon/icons/User.vue
new file mode 100644
index 000000000..41180c75d
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/User.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M5 21C5 17.134 8.13401 14 12 14C15.866 14 19 17.134 19 21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/frontend/composables/load_frontend.js b/src/frontend/composables/load_frontend.js
index 90593df18..eea405f0b 100644
--- a/src/frontend/composables/load_frontend.js
+++ b/src/frontend/composables/load_frontend.js
@@ -19,7 +19,7 @@ import * as useApp from '@/composables/useApp.js';
 import * as useUrl from '@/composables/useUrl.js';
 import * as usePkpFetch from '@/frontend/composables/usePkpFetch.js';
 import * as usePkpModal from '@/frontend/composables/usePkpModal.js';
-
+import * as usePkpDate from '@/frontend/composables/usePkpDate.js';
 // Directives
 import {stripUnsafeHtml} from '@/directives/stripUnsafeHtml';
 
@@ -85,6 +85,7 @@ export default {
 		useUrl,
 		usePkpFetch,
 		usePkpModal,
+		usePkpDate,
 	},
 	pkpCreateVueApp,
 	createApp,
diff --git a/src/frontend/composables/usePkpDate.js b/src/frontend/composables/usePkpDate.js
new file mode 100644
index 000000000..c95c359f6
--- /dev/null
+++ b/src/frontend/composables/usePkpDate.js
@@ -0,0 +1,17 @@
+import {formatShortDateTime} from '@/utils/dateUtils';
+
+/**
+ * Provides date formatting and calculation functions
+ * @returns {Object} Object containing date utility functions
+ */
+export function usePkpDate() {
+	return {
+		/**
+		 * Format a date with time in a short format according to user locale
+		 * @type {Function}
+		 * @param {Date|string} date - The date to format
+		 * @returns {string} Formatted date and time string
+		 */
+		formatShortDateTime,
+	};
+}

From 3358d825533e7488c9d79d53c5e8f6f8b14530d4 Mon Sep 17 00:00:00 2001
From: taslangraham <gtaslan1@gmail.com>
Date: Wed, 13 Aug 2025 21:32:41 -0500
Subject: [PATCH 3/5] pkp/pkp-lib#11327 Implement public comments UI

---
 src/components/UserComment/UserComment.vue    | 274 -------------
 .../components/PkpAccordion/PkpAccordion.vue  |   2 +-
 .../components/PkpButton/PkpButton.vue        |  19 +-
 .../PkpUserComment/PkpUserComment.vue         |  87 +++++
 .../PkpUserCommentReportModal.vue             |  83 ++++
 .../PkpUserComment/PkpUserCommentsList.vue    | 363 ++++++++++++++++++
 6 files changed, 536 insertions(+), 292 deletions(-)
 delete mode 100644 src/components/UserComment/UserComment.vue
 create mode 100644 src/frontend/components/PkpUserComment/PkpUserComment.vue
 create mode 100644 src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
 create mode 100644 src/frontend/components/PkpUserComment/PkpUserCommentsList.vue

diff --git a/src/components/UserComment/UserComment.vue b/src/components/UserComment/UserComment.vue
deleted file mode 100644
index 3e36a9226..000000000
--- a/src/components/UserComment/UserComment.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<template>
-	<div v-if="!isLoading">
-		<h3>COMMENTS</h3>
-		<template v-if="currentUser">
-			<label for="comment-input">Add comment</label>
-			<div style="margin: 10px 0; display: flex; gap: 10px">
-				<input
-					id="comment-input"
-					v-model="commentText"
-					class="flex-1"
-					type="text"
-					placeholder="Write your comment here..."
-				/>
-				<PkpButton :is-primary="true" @click="addComment">Add</PkpButton>
-			</div>
-			<!--			<PkpForm v-bind="currentCommentForm"></PkpForm>-->
-		</template>
-		<template v-else>
-			<a :href="loginUrl" style="text-decoration: none">log in</a>
-			<span>&nbsp;to comment or report a comment</span>
-		</template>
-
-		<template v-if="comments.length">
-			<ul>
-				<li
-					v-for="comment in comments"
-					:key="comment.id"
-					class="mt-8 border-b border-b-light pb-2"
-				>
-					<div class="flex justify-between gap-4">
-						<span class="font-semibold">
-							{{ comment.commentText }}
-							<span
-								v-if="comment.isReported"
-								class="text-sm-light text-negative"
-							>
-								(Reported)
-							</span>
-						</span>
-
-						<!-- Any user(logged in or not), except the creator of the comment, can see option to report comment -->
-						<PkpButton
-							v-if="!currentUser || comment.userId !== currentUser?.id"
-							:is-warnable="true"
-							:is-disabled="!currentUser"
-							@click="reportComment(comment.id)"
-						>
-							Report
-						</PkpButton>
-					</div>
-					<span class="mb-2 opacity-55">by {{ comment.userName }}</span>
-				</li>
-			</ul>
-			<div class="mt-4">
-				<PkpButton
-					v-if="hasMoreComments"
-					:is-primary="true"
-					@click="fetchComments"
-				>
-					Load More Comments
-				</PkpButton>
-			</div>
-		</template>
-
-		<p v-else>There are no comments made for this publication version</p>
-	</div>
-</template>
-
-<script setup>
-import {cloneDeep} from 'lodash';
-
-import {computed, onMounted, ref} from 'vue';
-import PkpButton from '@/components/Button/Button.vue';
-import {useFetch} from '@/composables/useFetch';
-import {useUrl} from '@/composables/useUrl';
-import {useFetchPaginated} from '@/composables/useFetchPaginated';
-import {useForm} from '@/composables/useForm';
-// import PkpForm from '@/components/Form/Form.vue';
-// import {useLocalize} from '@/composables/useLocalize';
-// const {t} = useLocalize();
-const props = defineProps({
-	data: {
-		type: String,
-		required: true,
-		validator(value) {
-			const parsed = JSON.parse(value);
-
-			if (!Object.prototype.hasOwnProperty.call(parsed, 'publicationId')) {
-				throw new Error('publicationId is missing in `data` json prop');
-			}
-
-			if (
-				!Object.prototype.hasOwnProperty.call(
-					parsed,
-					'articleLatestPublicationId',
-				)
-			) {
-				throw new Error(
-					'articleLatestPublicationId is missing in `data` json prop',
-				);
-			}
-
-			if (typeof parsed.publicationId !== 'number') {
-				throw new Error('publicationId must be a number in `data` json prop');
-			}
-
-			if (typeof parsed.articleLatestPublicationId !== 'number') {
-				throw new Error(
-					'articleLatestPublicationId must be a number in `data` json prop',
-				);
-			}
-
-			if (!Object.prototype.hasOwnProperty.call(parsed, 'itemsPerPage')) {
-				throw new Error('itemsPerPage is missing in `data` json prop');
-			}
-
-			if (typeof parsed.itemsPerPage !== 'number') {
-				throw new Error('itemsPerPage must be a number in `data` json prop');
-			}
-
-			if (
-				!Object.prototype.hasOwnProperty.call(parsed, 'userCommentForm') ||
-				!Object.prototype.hasOwnProperty.call(parsed, 'userCommentReportForm')
-			) {
-				throw new Error(
-					'userCommentForm or userCommentReportForm is missing in `data` json prop',
-				);
-			}
-
-			// userCommentForm and userCommentReportForm should be objects
-			if (
-				typeof parsed.userCommentForm !== 'object' ||
-				typeof parsed.userCommentReportForm !== 'object'
-			) {
-				throw new Error(
-					'userCommentForm and userCommentReportForm must be objects in `data` json prop',
-				);
-			}
-
-			if (typeof parsed.itemsPerPage !== 'number') {
-				throw new Error('itemsPerPage must be a number in `data` json prop');
-			}
-
-			return true;
-		},
-	},
-	articleLatestPublicationId: {
-		type: Number,
-		required: true,
-	},
-});
-const currentUser = ref();
-const commentText = ref('');
-let comments = ref([]);
-const currentPage = ref(0);
-const pageCount = ref(0);
-const currentReportForm = ref({});
-const {
-	publicationId,
-	articleLatestPublicationId,
-	userCommentForm,
-	userCommentReportForm,
-	itemsPerPage,
-} = JSON.parse(props.data);
-
-const isLoading = ref(true);
-const hasMoreComments = computed(() => pageCount.value > currentPage.value);
-
-const {form: currentCommentForm} = useForm(cloneDeep(userCommentForm));
-currentCommentForm.value.hiddenFields.publicationId = publicationId;
-
-function onCommentSaved(data) {
-	// Can be removed once PkpForm component is used
-	commentText.value = '';
-
-	// Add the new comment to the top of the comments list.
-	// Since comments require approval before being public, this is done to allow the person making the comment to see it immediately (it will not be there on page reload).
-	// It probably makes sense to remove this and instead show the user a message that the comment is pending approval.
-	comments.value.unshift(data);
-}
-
-async function addComment() {
-	if (articleLatestPublicationId !== publicationId) {
-		return;
-	}
-
-	// The logic below will no longer be needed once PkpForm component is used
-	const {apiUrl} = useUrl('comments');
-	const {
-		fetch: submitComment,
-		isSuccess,
-		data,
-	} = useFetch(apiUrl, {
-		method: 'POST',
-		body: {
-			publicationId,
-			commentText: commentText.value,
-		},
-	});
-	await submitComment();
-	if (isSuccess.value) {
-		onCommentSaved(data.value);
-	} else {
-		throw new Error('Error saving comment');
-	}
-}
-
-function onCommentReportSaved(commentId) {
-	comments.value.forEach((comment) => {
-		if (comment.id === commentId) {
-			comment.isReported = true;
-		}
-	});
-}
-
-function getCommentReportForm(comment) {
-	const preparedForm = cloneDeep(userCommentReportForm);
-	const {form, setAction} = useForm(preparedForm);
-
-	setAction(`${preparedForm.action}/${comment.id}/reports`);
-
-	return form;
-}
-
-async function reportComment(commentId) {
-	if (!currentUser.value) {
-		throw new Error('User must be logged in to report a comment');
-	}
-
-	currentReportForm.value = getCommentReportForm(
-		comments.value.find((comment) => comment.id === commentId),
-	);
-
-	// The report submission logic below will not be needed once pkpForm component is used
-	const {apiUrl} = useUrl(`comments/${commentId}/reports`);
-
-	const {fetch: postReport, isSuccess} = useFetch(apiUrl, {
-		method: 'POST',
-		body: {note: 'Inappropriate content'},
-	});
-	await postReport();
-
-	if (isSuccess.value) {
-		onCommentReportSaved(commentId);
-	} else {
-		throw new Error('Error reporting comment');
-	}
-}
-
-async function fetchComments() {
-	const {apiUrl} = useUrl(`comments/public?publicationIds=${publicationId}`);
-
-	currentPage.value += 1;
-	const {items, pagination, fetch} = useFetchPaginated(apiUrl, {
-		currentPage,
-		pageSize: itemsPerPage,
-	});
-
-	await fetch();
-	comments.value = [...comments.value, ...items.value];
-	pageCount.value = pagination.value.pageCount;
-}
-
-// Fetch comments after a short delay to ensure `pkp` global var and vue composables are loaded before use
-onMounted(() => {
-	setTimeout(async () => {
-		currentUser.value = pkp?.currentUser;
-		await fetchComments();
-		isLoading.value = false;
-	}, 500);
-});
-</script>
-
-<style scoped lang="less"></style>
diff --git a/src/frontend/components/PkpAccordion/PkpAccordion.vue b/src/frontend/components/PkpAccordion/PkpAccordion.vue
index 7d15fcbad..db50b5fd5 100644
--- a/src/frontend/components/PkpAccordion/PkpAccordion.vue
+++ b/src/frontend/components/PkpAccordion/PkpAccordion.vue
@@ -63,7 +63,7 @@ const accordionClass = computed(() => ['pkpAccordion']);
 	width: 100%;
 	padding: var(--pkp-spacing-2) var(--pkp-spacing-3);
 	background-color: var(--pkp-background-color-tertiary);
-	color: var(--pkp-text-color-secondary);
+	color: var(--pkp-text-color-heading);
 	font: var(--pkp-font-base-bold);
 	border: none;
 	cursor: pointer;
diff --git a/src/frontend/components/PkpButton/PkpButton.vue b/src/frontend/components/PkpButton/PkpButton.vue
index 32ce02b84..f0d58f61c 100644
--- a/src/frontend/components/PkpButton/PkpButton.vue
+++ b/src/frontend/components/PkpButton/PkpButton.vue
@@ -1,14 +1,8 @@
 <template>
-	<component
-		v-bind="$attrs"
-		:is="element"
-		:class="buttonClass"
-		:href="element === 'a' ? href : false"
-		:disabled="element === 'a' && !isDisabled ? undefined : isDisabled"
-	>
+	<button :class="buttonClass" v-bind="$attrs">
 		<slot name="left-icon" />
 		<slot />
-	</component>
+	</button>
 </template>
 
 <script setup>
@@ -19,15 +13,6 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-	/** Whether to use a `button` or `a` HTML tag. */
-	element: {
-		type: String,
-		default: 'button',
-	},
-	isDisabled: {
-		type: Boolean,
-		default: false,
-	},
 });
 
 const buttonClass = computed(() => {
diff --git a/src/frontend/components/PkpUserComment/PkpUserComment.vue b/src/frontend/components/PkpUserComment/PkpUserComment.vue
new file mode 100644
index 000000000..5340b8a4c
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpUserComment.vue
@@ -0,0 +1,87 @@
+<template>
+	<div id="pkpUserCommentsContainer">
+		<h3>{{ t('userComment.commentOnThisPublication') }}</h3>
+
+		<template v-for="id in publicationIds" :key="id">
+			<PkpAccordion
+				:title="getVersionTitle(id)"
+				:default-open="id === latestPublicationId"
+			>
+				<PkpButton
+					v-if="!currentUser && id === latestPublicationId"
+					class="userComments__loginButton"
+					@click="login"
+				>
+					{{ t('userComment.login') }}
+				</PkpButton>
+
+				<PkpUserCommentsList
+					:publication-id="id"
+					:items-per-page="itemsPerPage"
+					:is-latest-publication="id === latestPublicationId"
+					:total-publication-comments="commentsCountPerPublication[id] || 0"
+				/>
+			</PkpAccordion>
+		</template>
+	</div>
+</template>
+
+<script setup>
+import PkpUserCommentsList from '@/frontend/components/PkpUserComment/PkpUserCommentsList.vue';
+import PkpAccordion from '@/frontend/components/PkpAccordion/PkpAccordion.vue';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
+const props = defineProps({
+	latestPublicationId: {
+		type: Number,
+		required: true,
+	},
+	publicationId: {
+		type: Number,
+		required: true,
+	},
+	publicationIds: {
+		type: Array,
+		required: false,
+		default: () => [],
+	},
+	userCommentForm: {
+		type: Object,
+		required: true,
+	},
+	userCommentReportForm: {
+		type: Object,
+		required: true,
+	},
+	itemsPerPage: {},
+	loginUrl: {
+		type: String,
+		required: true,
+	},
+	commentsCountPerPublication: {
+		type: Object,
+		required: true,
+	},
+});
+const currentUser = pkp.currentUser;
+
+function getVersionTitle(id) {
+	return t('userComment.versionWithCount', {
+		version: id,
+		versionCommentsCount: props.commentsCountPerPublication[id],
+	});
+}
+
+function login() {
+	window.location = props.loginUrl;
+}
+</script>
+
+<style>
+.userComments__loginButton {
+	margin-top: 0.5rem;
+	margin-bottom: 1rem;
+}
+</style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue b/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
new file mode 100644
index 000000000..aa4f72f60
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
@@ -0,0 +1,83 @@
+<template>
+	<PkpModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<PkpModalLayoutBasic>
+			<span style="font-size: 0.875rem; color: #5a5a5a">
+				{{ t('userComment.reportComment') }} {{ comment.userName }}
+			</span>
+
+			<p
+				style="
+					margin-top: 0.5rem;
+					font-size: 1rem;
+					color: #000;
+					line-height: 1.5;
+				"
+			>
+				{{ comment.commentText }}
+			</p>
+
+			<strong style="display: block; margin-top: 1.5rem; color: #004165">
+				{{ t('userComment.report.reason') }}
+			</strong>
+
+			<PkpTextarea
+				:model-value="reportText"
+				@update:model-value="updateReportText"
+			></PkpTextarea>
+
+			<div class="pkpUserCommentReportModal____actions">
+				<PkpButton :is-secondary="true" @click="onCancel">
+					{{ t('common.cancel') }}
+				</PkpButton>
+				<PkpButton @click="onSubmit(comment, reportText)">
+					{{ t('userComment.report') }}
+				</PkpButton>
+			</div>
+		</PkpModalLayoutBasic>
+	</PkpModalBody>
+</template>
+<script setup>
+import PkpModalBody from '@/frontend/components/PkpModal/PkpModalBody.vue';
+import PkpModalLayoutBasic from '@/frontend/components/PkpModal/PkpModalLayoutBasic.vue';
+import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
+import {defineProps, ref} from 'vue';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+import {useLocalize} from '@/composables/useLocalize';
+const {t} = useLocalize();
+
+const reportText = ref('');
+defineProps({
+	title: {
+		type: String,
+		required: true,
+	},
+	comment: {
+		type: Object,
+		required: true,
+	},
+	onSubmit: {
+		type: Function,
+		required: true,
+	},
+	onCancel: {
+		type: Function,
+		required: true,
+	},
+});
+
+function updateReportText(value) {
+	reportText.value = value;
+}
+</script>
+
+<style>
+.pkpUserCommentReportModal____actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	margin-top: 1rem;
+}
+</style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
new file mode 100644
index 000000000..e6d8bc757
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
@@ -0,0 +1,363 @@
+<template>
+	<div>
+		<div v-if="!isLatestPublication" class="commentsList__commentNotAllowed">
+			<PkpIcon class="commentsList__errorIcon" icon="Error" />
+			<span>{{ t('userComment.discussionClosed') }}</span>
+		</div>
+
+		<div v-if="isLatestPublication && !!currentUser">
+			<PkpTextarea
+				placeholder="What do you think about this publication? Type your comments here."
+				:model-value="commentText"
+				@update:model-value="updateCommentText"
+			/>
+
+			<PkpButton
+				style="margin-top: 1.5rem"
+				:is-secondary="true"
+				:disabled="!commentText.trim()"
+				@click="addComment"
+			>
+				{{ t('form.submit') }}
+			</PkpButton>
+		</div>
+		<template v-if="comments.length">
+			<ul class="commentsList__items">
+				<li
+					v-for="comment in comments"
+					:key="comment.id"
+					class="commentsList__item"
+				>
+					<div class="commentsList__item--content">
+						<div
+							v-if="
+								currentUser &&
+								comment.userId === currentUser.id &&
+								!comment.isApproved
+							"
+							class="commentsList__item--approvalNotice"
+						>
+							<PkpIcon
+								icon="Help"
+								class="commentsList__item--helpIcon"
+							></PkpIcon>
+							{{ t('userComment.approvalNotice') }}
+						</div>
+
+						<div class="commentsList__item--actions">
+							<p class="commentsList__item--timestamp">
+								{{ formatShortDateTime(comment.createdAt) }}
+							</p>
+							<PkpDropdownActions
+								:items="getCommentActions(comment)"
+								@select="
+									(actionName) => commentActionMethods[actionName](comment)
+								"
+							></PkpDropdownActions>
+						</div>
+
+						<div
+							v-strip-unsafe-html="comment.commentText.trim()"
+							class="commentsList__item--commentText"
+						></div>
+
+						<div class="commentsList__item--author">
+							<PkpAvatarInitials :initials="comment.userInitials" />
+							<div class="commentsList__item--authorInfo">
+								<span class="commentsList__item--authorName">
+									{{ comment.userName }}
+								</span>
+								<span
+									v-if="comment.userOrcidDisplayValue"
+									class="commentsList__item--orcid"
+								>
+									{{ comment.userOrcidDisplayValue }}
+								</span>
+								<span
+									v-if="comment.userAffiliation"
+									class="commentsList__item--affiliation"
+								>
+									{{ comment.userAffiliation }}
+								</span>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ul>
+
+			<div class="commentsList__showMore">
+				<PkpButton v-if="hasMoreComments" @click="fetchComments">
+					{{ t('userComment.showMore', {count: showMoreCommentsCount}) }}
+				</PkpButton>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+import {computed, onMounted, ref} from 'vue';
+import {useFetchPaginated} from '@/composables/useFetchPaginated';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
+import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
+import PkpDropdownActions from '@/frontend/components/PkpDropdownActions/PkpDropdownActions.vue';
+import PkpUserCommentReportModal from '@/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue';
+import PkpAvatarInitials from '@/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue';
+import {usePkpModal} from '@/frontend/composables/usePkpModal';
+import {usePkpFetch} from '@/frontend/composables/usePkpFetch';
+import {useUrl} from '@/frontend/composables/usePkpUrl';
+import {usePkpDate} from '@/frontend/composables/usePkpDate';
+import {t} from '@/utils/i18n';
+
+const {openModal, closeModal, openDialogNetworkError} = usePkpModal();
+const {formatShortDateTime} = usePkpDate();
+const currentUser = pkp.currentUser;
+
+const props = defineProps({
+	publicationId: {
+		type: Number,
+		required: true,
+	},
+	isLatestPublication: {
+		type: Boolean,
+		default: false,
+		required: true,
+	},
+	itemsPerPage: {
+		type: Number,
+		required: true,
+	},
+	totalPublicationComments: {
+		type: Number,
+		required: true,
+		default: 0,
+	},
+});
+let comments = ref([]);
+
+const showMoreCommentsCount = ref(props.totalPublicationComments);
+
+const currentPage = ref(0);
+const pageCount = ref(0);
+
+const hasMoreComments = computed(() => pageCount.value > currentPage.value);
+const commentText = ref('');
+
+const commentActionMethods = {
+	commentReport,
+};
+
+function canReportComment(comment) {
+	return currentUser && currentUser.id !== comment.userId && comment.isApproved;
+}
+
+function updateCommentText(value) {
+	commentText.value = value;
+}
+
+function getCommentActions(comment) {
+	const actions = [];
+
+	if (!currentUser || currentUser.id !== comment.userId) {
+		actions.push({
+			label: 'Report',
+			name: 'commentReport',
+			disabled: !canReportComment(comment),
+		});
+	}
+	if (currentUser && currentUser.id === comment.userId) {
+		actions.push({
+			label: 'Delete',
+			name: 'deleteComment',
+		});
+	}
+	return actions;
+}
+
+function commentReport(comment) {
+	openModal(PkpUserCommentReportModal, {
+		title: 'Report Comment',
+		comment,
+		onSubmit: performCommentReport,
+		onCancel: () => closeModal(PkpUserCommentReportModal),
+	});
+}
+
+async function addComment() {
+	if (!props.isLatestPublication || !currentUser || !commentText.value.trim()) {
+		return;
+	}
+
+	// The logic below will no longer be needed once PkpForm component is used
+	const {apiUrl} = useUrl('comments');
+	const {
+		fetch: submitComment,
+		isSuccess,
+		data,
+	} = usePkpFetch(apiUrl, {
+		method: 'POST',
+		body: {
+			publicationId: props.publicationId,
+			commentText: commentText.value,
+		},
+	});
+	await submitComment();
+	if (isSuccess.value) {
+		onCommentSaved(data.value);
+	} else {
+		throw new Error('Error saving comment');
+	}
+}
+
+async function performCommentReport(comment, reportText) {
+	const commentId = comment.id;
+	if (!currentUser) {
+		throw new Error('User must be logged in to report a comment');
+	}
+
+	const {apiUrl} = useUrl(`comments/${commentId}/reports`);
+
+	const {fetch: postReport, isSuccess} = usePkpFetch(apiUrl, {
+		method: 'POST',
+		body: {
+			note: reportText,
+		},
+	});
+	await postReport();
+
+	if (!isSuccess.value) {
+		openDialogNetworkError();
+	} else {
+		comments.value.forEach((comment) => {
+			if (comment.id === commentId) {
+				comment.isReported = true;
+			}
+		});
+	}
+	closeModal(PkpUserCommentReportModal);
+}
+
+function onCommentSaved(data) {
+	commentText.value = '';
+
+	// Add the new comment to the top of the comments list.
+	comments.value.unshift(data);
+}
+
+async function fetchComments() {
+	const {apiUrl} = useUrl(
+		`comments/public?publicationIds=${props.publicationId}`,
+	);
+
+	currentPage.value += 1;
+	const {items, pagination, fetch} = useFetchPaginated(apiUrl, {
+		currentPage,
+		pageSize: props.itemsPerPage,
+	});
+
+	await fetch();
+	comments.value = [...comments.value, ...items.value];
+	pageCount.value = pagination.value.pageCount;
+	showMoreCommentsCount.value =
+		showMoreCommentsCount.value - props.itemsPerPage;
+}
+
+onMounted(() => fetchComments());
+</script>
+
+<style>
+.commentsList__item {
+	list-style-type: none;
+	margin-top: 2rem;
+}
+
+.commentsList__item--content {
+	background-color: var(--pkp-background-color-tertiary);
+	border-radius: var(--pkp-radius);
+
+	padding-bottom: 1rem;
+}
+
+.commentsList__item--commentText {
+	color: #222222;
+	font-size: 0.85rem;
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
+.commentsList__item--timestamp {
+	font-size: 0.75rem;
+	color: #7a7a7a;
+}
+
+.commentsList__item--author {
+	margin-top: 0.75rem;
+	margin-bottom: 2rem;
+	color: #000;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
+.commentsList__item--authorName {
+	font-weight: bold;
+}
+
+.commentsList__item--authorInfo {
+	display: flex;
+	flex-direction: column;
+}
+
+.commentsList__item--orcid {
+	color: var(--pkp-text-color-secondary);
+}
+
+.commentsList__item--orcid,
+.commentsList__item--affiliation {
+	font-size: 0.65rem;
+}
+
+.commentsList__item--helpIcon,
+.commentsList__errorIcon {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.commentsList__item--approvalNotice {
+	color: var(--pkp-color-primary);
+	display: flex;
+	gap: 0.5rem;
+	margin-top: 1rem;
+	align-items: center;
+	padding-left: 2rem;
+	padding-right: 2rem;
+	padding-top: 1rem;
+}
+
+.commentsList__commentNotAllowed {
+	background-color: #f9e1e173;
+	padding: 1.5rem;
+	border-radius: 0.65rem;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.commentsList__items {
+	padding: 0;
+	margin: 0;
+}
+
+.commentsList__item--actions {
+	display: flex;
+	justify-content: space-between;
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
+.commentsList__showMore {
+	margin-top: 2rem;
+}
+</style>

From 234a0ef6d63c3bdd67ac60175d2d291fff3dca06 Mon Sep 17 00:00:00 2001
From: taslangraham <gtaslan1@gmail.com>
Date: Wed, 13 Aug 2025 22:37:28 -0500
Subject: [PATCH 4/5] pkp/pkp-lib#11327 Allow user to delete comment

---
 .../components/PkpButton/PkpButton.vue        | 16 +++++++
 .../components/PkpModal/PkpDialog.vue         |  3 ++
 .../PkpUserComment/PkpUserComment.vue         |  4 --
 .../PkpUserComment/PkpUserCommentsList.vue    | 45 ++++++++++++++++++-
 4 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/src/frontend/components/PkpButton/PkpButton.vue b/src/frontend/components/PkpButton/PkpButton.vue
index f0d58f61c..eafd119ba 100644
--- a/src/frontend/components/PkpButton/PkpButton.vue
+++ b/src/frontend/components/PkpButton/PkpButton.vue
@@ -13,12 +13,15 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/** Use when this button represents an action such as delete, go back, revert or cancel. */
+	isWarnable: Boolean,
 });
 
 const buttonClass = computed(() => {
 	return [
 		'pkpButton',
 		props.isSecondary ? 'pkpButton--secondary' : 'pkpButton--primary',
+		props.isWarnable ? 'pkpButton--warnable' : '',
 	];
 });
 </script>
@@ -73,4 +76,17 @@ const buttonClass = computed(() => {
 	border-color: var(--pkp-text-color-disabled);
 	color: var(--pkp-text-color-disabled);
 }
+
+.pkpButton--warnable {
+	color: var(--pkp-color-negative);
+	border-color: var(--pkp-border-color-light);
+	background-color: var(--pkp-background-color-secondary);
+}
+
+.pkpButton--warnable:disabled {
+	color: var(--pkp-text-color-disabled);
+}
+.pkpButton--warnable:hover {
+	background-color: var(--pkp-background-color-secondary);
+}
 </style>
diff --git a/src/frontend/components/PkpModal/PkpDialog.vue b/src/frontend/components/PkpModal/PkpDialog.vue
index 19bf0dab6..5aeded165 100644
--- a/src/frontend/components/PkpModal/PkpDialog.vue
+++ b/src/frontend/components/PkpModal/PkpDialog.vue
@@ -68,6 +68,9 @@ import {
 } from 'reka-ui';
 import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
 
+import {useLocalize} from '@/composables/useLocalize';
+const {t} = useLocalize();
+
 const props = defineProps({
 	/** Used only internally, don't pass this prop via openDialog */
 	opened: {type: Boolean, default: false},
diff --git a/src/frontend/components/PkpUserComment/PkpUserComment.vue b/src/frontend/components/PkpUserComment/PkpUserComment.vue
index 5340b8a4c..ed807ee84 100644
--- a/src/frontend/components/PkpUserComment/PkpUserComment.vue
+++ b/src/frontend/components/PkpUserComment/PkpUserComment.vue
@@ -38,10 +38,6 @@ const props = defineProps({
 		type: Number,
 		required: true,
 	},
-	publicationId: {
-		type: Number,
-		required: true,
-	},
 	publicationIds: {
 		type: Array,
 		required: false,
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
index e6d8bc757..4ce18ac54 100644
--- a/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
@@ -107,7 +107,9 @@ import {usePkpModal} from '@/frontend/composables/usePkpModal';
 import {usePkpFetch} from '@/frontend/composables/usePkpFetch';
 import {useUrl} from '@/frontend/composables/usePkpUrl';
 import {usePkpDate} from '@/frontend/composables/usePkpDate';
-import {t} from '@/utils/i18n';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
 
 const {openModal, closeModal, openDialogNetworkError} = usePkpModal();
 const {formatShortDateTime} = usePkpDate();
@@ -145,8 +147,49 @@ const commentText = ref('');
 
 const commentActionMethods = {
 	commentReport,
+	deleteComment,
 };
 
+function deleteComment(comment) {
+	if (!currentUser || currentUser.id !== comment.userId) {
+		throw new Error('Only the comment author can delete the comment');
+	}
+
+	const {openDialog} = usePkpModal();
+	openDialog({
+		title: 'Delete Comment',
+		message: t('userComment.deleteCommentConfirm', {
+			comment: comment.commentText,
+		}),
+		actions: [
+			{
+				label: t('common.delete'),
+				isWarnable: true,
+				callback: async (close) => {
+					const {apiUrl} = useUrl(`comments/${comment.id}`);
+					const {fetch: deleteComment, isSuccess} = usePkpFetch(apiUrl, {
+						method: 'DELETE',
+					});
+					await deleteComment();
+					if (isSuccess.value) {
+						comments.value = comments.value.filter((c) => c.id !== comment.id);
+					} else {
+						openDialogNetworkError();
+					}
+
+					close();
+				},
+			},
+			{
+				label: t('common.cancel'),
+				callback: (close) => {
+					close();
+				},
+			},
+		],
+	});
+}
+
 function canReportComment(comment) {
 	return currentUser && currentUser.id !== comment.userId && comment.isApproved;
 }

From 39adda2c1745788079b1811b34ac3c905e1e9336 Mon Sep 17 00:00:00 2001
From: taslangraham <gtaslan1@gmail.com>
Date: Thu, 14 Aug 2025 14:27:58 -0500
Subject: [PATCH 5/5] pkp/pkp-lib#11327 Code cleanup and refactoring

---
 .../PkpAvatarInitials/pkpAvatarInitials.vue   | 101 -------
 src/frontend/components/PkpIcon/PkpIcon.vue   |   4 +
 .../components/PkpIcon/icons/Orcid.vue        |  19 ++
 .../PkpIcon/icons/OrcidUnauthenticated.vue    |  27 ++
 .../components/PkpModal/PkpDialog.vue         |   4 +-
 .../components/PkpModal/PkpModalBody.vue      |   7 +-
 .../components/PkpTextarea/PkpTextarea.vue    |  11 +-
 .../PkpUserComment/PkpScrollToComments.vue    |  70 +++++
 .../PkpUserComment/PkpUserComment.vue         |  38 ++-
 .../PkpUserCommentReportModal.vue             |  55 +++-
 .../PkpUserComment/PkpUserCommentsList.vue    | 262 +++++++++++-------
 src/frontend/composables/load_frontend.js     |   2 -
 src/frontend/composables/usePkpLocalize.js    |  43 +++
 src/frontend/styles/style.css                 |  31 +++
 14 files changed, 436 insertions(+), 238 deletions(-)
 delete mode 100644 src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue
 create mode 100644 src/frontend/components/PkpIcon/icons/Orcid.vue
 create mode 100644 src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue
 create mode 100644 src/frontend/components/PkpUserComment/PkpScrollToComments.vue
 create mode 100644 src/frontend/composables/usePkpLocalize.js
 create mode 100644 src/frontend/styles/style.css

diff --git a/src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue b/src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue
deleted file mode 100644
index f146d68c9..000000000
--- a/src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-	<div :class="classes">
-		<span v-if="initials">{{ initials }}</span>
-		<PkpIcon
-			v-else
-			icon="User"
-			:class="
-				shrink ? 'avatar-initials__icon--small' : 'avatar-initials__icon--large'
-			"
-		/>
-	</div>
-</template>
-
-<script setup>
-import {computed} from 'vue';
-import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
-
-const props = defineProps({
-	isPrimary: {type: Boolean, default: true},
-	isSecondary: {type: Boolean, default: false},
-	isWarnable: {type: Boolean, default: false},
-	isDisabled: {type: Boolean, default: false},
-	shrink: {type: Boolean, default: false},
-	initials: {type: String, required: true},
-});
-
-const classes = computed(() => ({
-	'avatar-initials': true,
-	'avatar-initials--small': props.shrink,
-	'avatar-initials--large': !props.shrink,
-	'avatar-initials--primary':
-		props.isPrimary && !props.isSecondary && !props.isWarnable,
-	'avatar-initials--secondary': props.isSecondary,
-	'avatar-initials--warnable': props.isWarnable,
-	'avatar-initials--disabled': props.isDisabled,
-}));
-</script>
-
-<style scoped>
-.avatar-initials {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	vertical-align: middle;
-	border-radius: 50%;
-	padding: 0.25rem;
-	cursor: pointer;
-}
-
-.avatar-initials--large {
-	height: 3rem;
-	width: 3rem;
-	font-size: 1.25rem;
-	font-weight: 500;
-}
-
-.avatar-initials--small {
-	height: 2rem;
-	width: 2rem;
-	font-size: 1rem;
-	font-weight: 400;
-}
-
-.avatar-initials--primary {
-	background-color: var(--pkp-color-primary);
-	color: var(--pkp-text-color-on-dark);
-}
-
-.avatar-initials--primary:hover {
-	background-color: var(--pkp-color-hover);
-	color: var(--pkp-text-color-on-dark);
-}
-
-.avatar-initials--secondary {
-	background-color: var(--pkp-background-color-secondary);
-}
-
-.avatar-initials--secondary:not(.avatar-initials--disabled) {
-	color: var(--pkp-color-primary);
-}
-
-.avatar-initials--warnable {
-	background-color: var(--pkp-color-negative);
-	color: var(--pkp-text-color-on-dark);
-}
-
-.avatar-initials--disabled {
-	color: var(--pkp-background-color-disabled);
-}
-
-/* Icon sizes */
-.avatar-initials__icon--large {
-	height: 1.25rem;
-	width: 1.25rem;
-}
-
-.avatar-initials__icon--small {
-	height: 0.75rem;
-	width: 0.75rem;
-}
-</style>
diff --git a/src/frontend/components/PkpIcon/PkpIcon.vue b/src/frontend/components/PkpIcon/PkpIcon.vue
index 03b7ad19b..7b15a3bfa 100644
--- a/src/frontend/components/PkpIcon/PkpIcon.vue
+++ b/src/frontend/components/PkpIcon/PkpIcon.vue
@@ -5,12 +5,16 @@ import MoreOptions from './icons/MoreOptions.vue';
 import Error from './icons/Error.vue';
 import Help from './icons/Help.vue';
 import User from './icons/User.vue';
+import Orcid from '@/frontend/components/PkpIcon/icons/Orcid.vue';
+import OrcidUnauthenticated from '@/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue';
 const svgIcons = {
 	Cancel,
 	MoreOptions,
 	Error,
 	Help,
 	User,
+	Orcid,
+	OrcidUnauthenticated,
 };
 
 const props = defineProps({
diff --git a/src/frontend/components/PkpIcon/icons/Orcid.vue b/src/frontend/components/PkpIcon/icons/Orcid.vue
new file mode 100644
index 000000000..01fe1647c
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/Orcid.vue
@@ -0,0 +1,19 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_11_315)">
+			<path
+				d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+				fill="#A6CE39"
+			/>
+			<path
+				d="M8.10938 17.4375H6.65625V7.40625H8.10938V17.4375ZM10.2188 7.40625H14.1094C17.8125 7.40625 19.4531 10.0781 19.4531 12.4219C19.4531 15 17.4375 17.4375 14.1094 17.4375H10.1719L10.2188 7.40625ZM11.6719 16.1719H13.9688C17.25 16.1719 18 13.6875 18 12.4688C18 10.4531 16.7344 8.76562 13.9219 8.76562H11.7188L11.6719 16.1719ZM8.34375 5.34375C8.34375 5.85938 7.92188 6.28125 7.40625 6.28125C6.89062 6.28125 6.46875 5.85938 6.46875 5.34375C6.46875 5.09511 6.56752 4.85665 6.74334 4.68084C6.91915 4.50502 7.15761 4.40625 7.40625 4.40625C7.92188 4.40625 8.34375 4.82812 8.34375 5.34375Z"
+				fill="white"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_11_315">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue b/src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue
new file mode 100644
index 000000000..8bfb03fd6
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="mr-2 inline-block w-6 align-middle"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
+			fill="#fff"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
+			fill="#7FAA26"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
+			fill="#7FAA26"
+		/>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpModal/PkpDialog.vue b/src/frontend/components/PkpModal/PkpDialog.vue
index 5aeded165..4bac55330 100644
--- a/src/frontend/components/PkpModal/PkpDialog.vue
+++ b/src/frontend/components/PkpModal/PkpDialog.vue
@@ -67,9 +67,9 @@ import {
 	DialogTitle,
 } from 'reka-ui';
 import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
 
-import {useLocalize} from '@/composables/useLocalize';
-const {t} = useLocalize();
+const {t} = usePkpLocalize();
 
 const props = defineProps({
 	/** Used only internally, don't pass this prop via openDialog */
diff --git a/src/frontend/components/PkpModal/PkpModalBody.vue b/src/frontend/components/PkpModal/PkpModalBody.vue
index 71fe0edb4..abcc87235 100644
--- a/src/frontend/components/PkpModal/PkpModalBody.vue
+++ b/src/frontend/components/PkpModal/PkpModalBody.vue
@@ -41,7 +41,7 @@
 						<div class="pkpModalBody__closeWrapper">
 							<DialogClose
 								ref="closeModalButton"
-								type="button"
+								as="button"
 								class="pkpModalBody__close"
 							>
 								<span class="pkpModalBody__srOnly">
@@ -78,8 +78,8 @@ import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
 import {focusFirstHeading} from '@/components/Modal/modalHelpers';
 
 const containerId = useId();
-import {useLocalize} from '@/composables/useLocalize';
-const {t} = useLocalize();
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+const {t} = usePkpLocalize();
 const closeModal = inject('closeModal');
 const closeModalButton = inject('closeModalButton');
 /* Initial focus */
@@ -230,6 +230,7 @@ function handleAutoFocus(event) {
 	position: relative;
 	outline: none;
 	background-color: var(--pkp-background-color-secondary);
+	cursor: pointer;
 }
 
 .pkpModalBody__close:hover {
diff --git a/src/frontend/components/PkpTextarea/PkpTextarea.vue b/src/frontend/components/PkpTextarea/PkpTextarea.vue
index 11a1889e5..8667f0e9e 100644
--- a/src/frontend/components/PkpTextarea/PkpTextarea.vue
+++ b/src/frontend/components/PkpTextarea/PkpTextarea.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="pkpTextarea">
-		<Label class="pkpTextarea__label" :for="textareaId">
+		<Label
+			class="pkpTextarea__label"
+			:class="{'-screenReader': isLabelSrOnly}"
+			:for="textareaId"
+		>
 			{{ props.label }}
 		</Label>
 		<textarea
@@ -35,6 +39,11 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	// Whether the label should be visually hidden but still accessible to screen readers
+	isLabelSrOnly: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 defineEmits(['update:modelValue']);
diff --git a/src/frontend/components/PkpUserComment/PkpScrollToComments.vue b/src/frontend/components/PkpUserComment/PkpScrollToComments.vue
new file mode 100644
index 000000000..24aacc084
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpScrollToComments.vue
@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<a
+			id="scrollToComments"
+			style="cursor: pointer"
+			@click.prevent="scrollToComments"
+		>
+			{{ t('userComment.allComments', {commentCount: allCommentsCount}) }}
+		</a>
+		<div style="margin-top: 1.5rem">
+			<a
+				v-if="!currentUser"
+				class="pkpScrollToComments__login"
+				:href="loginUrl"
+			>
+				{{ t('userComment.login') }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+
+const {t} = usePkpLocalize();
+const currentUser = pkp.currentUser;
+
+defineProps({
+	/** The total number of approved comments across all publication versions */
+	allCommentsCount: {
+		type: Number,
+		required: true,
+	},
+	/** The URL to the login page */
+	loginUrl: {
+		type: String,
+		required: true,
+	},
+});
+
+const scrollToComments = () => {
+	// Element with ID 'pkpUserCommentsContainer' is defined in the pkpUserComment component.
+	const commentsContainer = document.getElementById('pkpUserCommentsContainer');
+	if (commentsContainer) {
+		commentsContainer.scrollIntoView({behavior: 'smooth'});
+	}
+};
+</script>
+
+<style>
+.pkpScrollToComments__login {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--pkp-spacing-2) var(--pkp-spacing-4);
+	font: var(--pkp-font-base-bold);
+	border-radius: var(--pkp-radius);
+	cursor: pointer;
+	border: 1px solid var(--pkp-color-transparent);
+	gap: var(--pkp-spacing-2);
+	background-color: var(--pkp-color-primary);
+	color: var(--pkp-text-color-on-dark);
+	text-decoration: none;
+}
+
+.pkpScrollToComments__login:hover {
+	background-color: var(--pkp-color-hover);
+	color: var(--pkp-text-color-on-dark);
+}
+</style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserComment.vue b/src/frontend/components/PkpUserComment/PkpUserComment.vue
index ed807ee84..77558fbe7 100644
--- a/src/frontend/components/PkpUserComment/PkpUserComment.vue
+++ b/src/frontend/components/PkpUserComment/PkpUserComment.vue
@@ -9,7 +9,7 @@
 			>
 				<PkpButton
 					v-if="!currentUser && id === latestPublicationId"
-					class="userComments__loginButton"
+					class="pkpUserComments__loginButton"
 					@click="login"
 				>
 					{{ t('userComment.login') }}
@@ -19,7 +19,7 @@
 					:publication-id="id"
 					:items-per-page="itemsPerPage"
 					:is-latest-publication="id === latestPublicationId"
-					:total-publication-comments="commentsCountPerPublication[id] || 0"
+					:total-publication-comments="commentsCountPerPublication[id]"
 				/>
 			</PkpAccordion>
 		</template>
@@ -30,32 +30,36 @@
 import PkpUserCommentsList from '@/frontend/components/PkpUserComment/PkpUserCommentsList.vue';
 import PkpAccordion from '@/frontend/components/PkpAccordion/PkpAccordion.vue';
 import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
-import {useLocalize} from '@/composables/useLocalize';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
 
-const {t} = useLocalize();
+const {t} = usePkpLocalize();
 const props = defineProps({
+	/** The ID of the latest publication associated with the published item(article, book, etc.)*/
 	latestPublicationId: {
 		type: Number,
 		required: true,
 	},
+	/** An array of published publication IDs associated with the published item(article, book, etc.) */
 	publicationIds: {
 		type: Array,
 		required: false,
 		default: () => [],
 	},
-	userCommentForm: {
-		type: Object,
-		required: true,
-	},
-	userCommentReportForm: {
-		type: Object,
+	/** Number of comments get when fetching comments */
+	itemsPerPage: {
+		type: Number,
 		required: true,
 	},
-	itemsPerPage: {},
+	/**
+	 * URL to redirect the user to login page
+	 */
 	loginUrl: {
 		type: String,
 		required: true,
 	},
+	/**
+	 * An object where keys are publication IDs and values are the number of approved comments for that publication
+	 */
 	commentsCountPerPublication: {
 		type: Object,
 		required: true,
@@ -63,20 +67,28 @@ const props = defineProps({
 });
 const currentUser = pkp.currentUser;
 
+/**
+ * Returns the title for the accordion based on the publication ID and the number of comments.
+ * @param {number} id - The publication ID.
+ * @returns {string} The title for the accordion.
+ */
 function getVersionTitle(id) {
 	return t('userComment.versionWithCount', {
 		version: id,
-		versionCommentsCount: props.commentsCountPerPublication[id],
+		versionCommentsCount: props.commentsCountPerPublication[id] || 0,
 	});
 }
 
+/**
+ * Redirects the user to the login page.
+ */
 function login() {
 	window.location = props.loginUrl;
 }
 </script>
 
 <style>
-.userComments__loginButton {
+.pkpUserComments__loginButton {
 	margin-top: 0.5rem;
 	margin-bottom: 1rem;
 }
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue b/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
index aa4f72f60..789c3815b 100644
--- a/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
@@ -4,22 +4,28 @@
 			{{ title }}
 		</template>
 		<PkpModalLayoutBasic>
-			<span style="font-size: 0.875rem; color: #5a5a5a">
-				{{ t('userComment.reportComment') }} {{ comment.userName }}
+			<span class="pkpUserCommentReportModal____commentAuthor">
+				{{
+					`
+					${
+						comment.userAffiliation
+							? t('userComment.reportCommentByUserWithAffiliation', {
+									userName: comment.userName,
+									affiliation: comment.userAffiliation,
+								})
+							: t('userComment.reportCommentBy', {
+									userName: comment.userName,
+								})
+					}`
+				}}
 			</span>
 
 			<p
-				style="
-					margin-top: 0.5rem;
-					font-size: 1rem;
-					color: #000;
-					line-height: 1.5;
-				"
-			>
-				{{ comment.commentText }}
-			</p>
+				v-strip-unsafe-html="comment.commentText.trim()"
+				class="pkpUserCommentReportModal____commentText"
+			></p>
 
-			<strong style="display: block; margin-top: 1.5rem; color: #004165">
+			<strong class="pkpUserCommentReportModal____reportReason">
 				{{ t('userComment.report.reason') }}
 			</strong>
 
@@ -29,7 +35,7 @@
 			></PkpTextarea>
 
 			<div class="pkpUserCommentReportModal____actions">
-				<PkpButton :is-secondary="true" @click="onCancel">
+				<PkpButton :is-warnable="true" @click="onCancel">
 					{{ t('common.cancel') }}
 				</PkpButton>
 				<PkpButton @click="onSubmit(comment, reportText)">
@@ -45,23 +51,27 @@ import PkpModalLayoutBasic from '@/frontend/components/PkpModal/PkpModalLayoutBa
 import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
 import {defineProps, ref} from 'vue';
 import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
-import {useLocalize} from '@/composables/useLocalize';
-const {t} = useLocalize();
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+const {t} = usePkpLocalize();
 
 const reportText = ref('');
 defineProps({
+	/** The title of the modal */
 	title: {
 		type: String,
 		required: true,
 	},
+	/** The comment to be reported */
 	comment: {
 		type: Object,
 		required: true,
 	},
+	/** Function to be called when the report reason is submitted */
 	onSubmit: {
 		type: Function,
 		required: true,
 	},
+	/** Function to be called when the modal is cancelled */
 	onCancel: {
 		type: Function,
 		required: true,
@@ -80,4 +90,19 @@ function updateReportText(value) {
 	gap: 0.5rem;
 	margin-top: 1rem;
 }
+
+.pkpUserCommentReportModal____commentAuthor {
+	font-size: var(--pkp-text-base-light);
+	color: var(--pkp-text-color-secondary);
+}
+
+.pkpUserCommentReportModal____commentText {
+	font-weight: var(--pkp-text-base-light--font-weight);
+	font-size: var(--pkp-text-lg-normal);
+	color: var(--pkp-text-color-default);
+}
+
+.pkpUserCommentReportModal____reportReason {
+	color: var(--pkp-text-color-heading);
+}
 </style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
index 4ce18ac54..f2d686186 100644
--- a/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
@@ -1,54 +1,60 @@
 <template>
 	<div>
-		<div v-if="!isLatestPublication" class="commentsList__commentNotAllowed">
-			<PkpIcon class="commentsList__errorIcon" icon="Error" />
+		<div
+			v-if="!isLatestPublication"
+			class="pkpUserCommentsList__commentNotAllowed"
+		>
+			<PkpIcon class="pkpUserCommentsList__errorIcon" icon="Error" />
 			<span>{{ t('userComment.discussionClosed') }}</span>
 		</div>
 
 		<div v-if="isLatestPublication && !!currentUser">
 			<PkpTextarea
-				placeholder="What do you think about this publication? Type your comments here."
+				:placeholder="t('userComment.addYourComment')"
+				:label="t('userComment.addYourComment')"
+				:is-label-sr-only="true"
 				:model-value="commentText"
 				@update:model-value="updateCommentText"
 			/>
 
 			<PkpButton
-				style="margin-top: 1.5rem"
+				class="pkpUserCommentsList__submitButton"
 				:is-secondary="true"
 				:disabled="!commentText.trim()"
-				@click="addComment"
+				@click="commentAdd"
 			>
 				{{ t('form.submit') }}
 			</PkpButton>
 		</div>
 		<template v-if="comments.length">
-			<ul class="commentsList__items">
+			<ul class="pkpUserCommentsList__items">
 				<li
 					v-for="comment in comments"
 					:key="comment.id"
-					class="commentsList__item"
+					class="pkpUserCommentsList__item"
 				>
-					<div class="commentsList__item--content">
+					<div class="pkpUserCommentsList__item--content">
 						<div
 							v-if="
 								currentUser &&
 								comment.userId === currentUser.id &&
 								!comment.isApproved
 							"
-							class="commentsList__item--approvalNotice"
+							class="pkpUserCommentsList__item--approvalNotice"
 						>
 							<PkpIcon
 								icon="Help"
-								class="commentsList__item--helpIcon"
+								class="pkpUserCommentsList__item--helpIcon"
 							></PkpIcon>
-							{{ t('userComment.approvalNotice') }}
+							{{ t('userComment.awaitingApprovalNotice') }}
 						</div>
 
-						<div class="commentsList__item--actions">
-							<p class="commentsList__item--timestamp">
+						<div class="pkpUserCommentsList__item--actions">
+							<p class="pkpUserCommentsList__item--timestamp">
 								{{ formatShortDateTime(comment.createdAt) }}
 							</p>
 							<PkpDropdownActions
+								v-if="!!currentUser"
 								:items="getCommentActions(comment)"
 								@select="
 									(actionName) => commentActionMethods[actionName](comment)
@@ -58,24 +64,37 @@
 
 						<div
 							v-strip-unsafe-html="comment.commentText.trim()"
-							class="commentsList__item--commentText"
+							class="pkpUserCommentsList__item--commentText"
 						></div>
 
-						<div class="commentsList__item--author">
-							<PkpAvatarInitials :initials="comment.userInitials" />
-							<div class="commentsList__item--authorInfo">
-								<span class="commentsList__item--authorName">
+						<div class="pkpUserCommentsList__item--author">
+							<div class="pkpUserCommentsList__item--authorInfo">
+								<span class="pkpUserCommentsList__item--authorName">
 									{{ comment.userName }}
 								</span>
-								<span
+
+								<a
 									v-if="comment.userOrcidDisplayValue"
-									class="commentsList__item--orcid"
+									:href="comment.userOrcidDisplayValue"
+									target="_blank"
+									class="pkpUserCommentsList__item--orcid"
 								>
-									{{ comment.userOrcidDisplayValue }}
-								</span>
+									<span class="pkpUserCommentsList__item--orcidContainer">
+										<PkpIcon
+											:icon="
+												comment.isUserOrcidAuthenticated
+													? 'Orcid'
+													: 'OrcidUnauthenticated'
+											"
+											class="pkpUserCommentsList__item--orcidIcon"
+											style="height: 1rem; width: 1rem"
+										/>
+										{{ comment.userOrcidDisplayValue }}
+									</span>
+								</a>
 								<span
 									v-if="comment.userAffiliation"
-									class="commentsList__item--affiliation"
+									class="pkpUserCommentsList__item--affiliation"
 								>
 									{{ comment.userAffiliation }}
 								</span>
@@ -85,8 +104,8 @@
 				</li>
 			</ul>
 
-			<div class="commentsList__showMore">
-				<PkpButton v-if="hasMoreComments" @click="fetchComments">
+			<div class="pkpUserCommentsList__showMore">
+				<PkpButton v-if="hasMoreComments" @click="() => loadComments()">
 					{{ t('userComment.showMore', {count: showMoreCommentsCount}) }}
 				</PkpButton>
 			</div>
@@ -96,69 +115,79 @@
 
 <script setup>
 import {computed, onMounted, ref} from 'vue';
-import {useFetchPaginated} from '@/composables/useFetchPaginated';
 import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
 import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
 import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
 import PkpDropdownActions from '@/frontend/components/PkpDropdownActions/PkpDropdownActions.vue';
 import PkpUserCommentReportModal from '@/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue';
-import PkpAvatarInitials from '@/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue';
 import {usePkpModal} from '@/frontend/composables/usePkpModal';
 import {usePkpFetch} from '@/frontend/composables/usePkpFetch';
 import {useUrl} from '@/frontend/composables/usePkpUrl';
 import {usePkpDate} from '@/frontend/composables/usePkpDate';
-import {useLocalize} from '@/composables/useLocalize';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+import {useFetchPaginated} from '@/composables/useFetchPaginated';
 
-const {t} = useLocalize();
+const {t} = usePkpLocalize();
+const {openModal, closeModal} = usePkpModal();
 
-const {openModal, closeModal, openDialogNetworkError} = usePkpModal();
 const {formatShortDateTime} = usePkpDate();
 const currentUser = pkp.currentUser;
 
 const props = defineProps({
+	/** The ID of the publication version for which comments are being displayed */
 	publicationId: {
 		type: Number,
 		required: true,
 	},
+	/** Indicates if the publication is the latest version */
 	isLatestPublication: {
 		type: Boolean,
 		default: false,
 		required: true,
 	},
+	/** Number of comments to fetch per page */
 	itemsPerPage: {
 		type: Number,
 		required: true,
 	},
+	/** Total number of approved comments for this publication version*/
 	totalPublicationComments: {
 		type: Number,
 		required: true,
 		default: 0,
 	},
 });
-let comments = ref([]);
-
-const showMoreCommentsCount = ref(props.totalPublicationComments);
 
+let comments = ref([]);
+const showMoreCommentsCount = ref(0);
 const currentPage = ref(0);
 const pageCount = ref(0);
+const commentText = ref('');
 
 const hasMoreComments = computed(() => pageCount.value > currentPage.value);
-const commentText = ref('');
 
+/*
+ * Methods for handling comment actions
+ */
 const commentActionMethods = {
 	commentReport,
-	deleteComment,
+	commentDelete,
 };
 
-function deleteComment(comment) {
+/**
+ * Deletes a comment.
+ * @param comment - The comment to be deleted.
+ */
+function commentDelete(comment) {
 	if (!currentUser || currentUser.id !== comment.userId) {
 		throw new Error('Only the comment author can delete the comment');
 	}
 
-	const {openDialog} = usePkpModal();
+	const {openDialog, openDialogNetworkError} = usePkpModal();
+
 	openDialog({
-		title: 'Delete Comment',
-		message: t('userComment.deleteCommentConfirm', {
+		title: t('userComment.deleteComment'),
+		message: t('userComment.deleteCommentConfirmation', {
 			comment: comment.commentText,
 		}),
 		actions: [
@@ -172,6 +201,7 @@ function deleteComment(comment) {
 					});
 					await deleteComment();
 					if (isSuccess.value) {
+						// Remove the comment from the list
 						comments.value = comments.value.filter((c) => c.id !== comment.id);
 					} else {
 						openDialogNetworkError();
@@ -182,83 +212,99 @@ function deleteComment(comment) {
 			},
 			{
 				label: t('common.cancel'),
-				callback: (close) => {
-					close();
-				},
+				callback: (close) => close(),
 			},
 		],
 	});
 }
 
-function canReportComment(comment) {
-	return currentUser && currentUser.id !== comment.userId && comment.isApproved;
-}
-
+/**
+ * Updates the comment text.
+ * @param value
+ */
 function updateCommentText(value) {
 	commentText.value = value;
 }
 
+/**
+ * Returns the actions available for a comment.
+ * @param comment
+ * @returns {Array<{label: string, name: string, disabled?: boolean}>} - An array of available actions */
 function getCommentActions(comment) {
 	const actions = [];
 
-	if (!currentUser || currentUser.id !== comment.userId) {
+	if (currentUser && currentUser.id !== comment.userId) {
 		actions.push({
-			label: 'Report',
+			label: t('userComment.report'),
 			name: 'commentReport',
-			disabled: !canReportComment(comment),
 		});
 	}
+
 	if (currentUser && currentUser.id === comment.userId) {
 		actions.push({
-			label: 'Delete',
-			name: 'deleteComment',
+			label: t('userComment.deleteComment'),
+			name: 'commentDelete',
 		});
 	}
+
 	return actions;
 }
 
+/**
+ * Reports a comment.
+ * @param comment - The comment to be reported.
+ */
 function commentReport(comment) {
 	openModal(PkpUserCommentReportModal, {
-		title: 'Report Comment',
+		title: t('userComment.reportComment'),
 		comment,
 		onSubmit: performCommentReport,
 		onCancel: () => closeModal(PkpUserCommentReportModal),
 	});
 }
 
-async function addComment() {
+/**
+ * Creates a new comment for the publication.
+ */
+async function commentAdd() {
 	if (!props.isLatestPublication || !currentUser || !commentText.value.trim()) {
 		return;
 	}
 
-	// The logic below will no longer be needed once PkpForm component is used
+	const {openDialogNetworkError} = usePkpModal();
 	const {apiUrl} = useUrl('comments');
-	const {
-		fetch: submitComment,
-		isSuccess,
-		data,
-	} = usePkpFetch(apiUrl, {
+
+	const {fetch: submitComment, isSuccess} = usePkpFetch(apiUrl, {
 		method: 'POST',
 		body: {
 			publicationId: props.publicationId,
 			commentText: commentText.value,
 		},
 	});
+
 	await submitComment();
+
 	if (isSuccess.value) {
-		onCommentSaved(data.value);
+		commentText.value = '';
+		await loadComments(true);
 	} else {
-		throw new Error('Error saving comment');
+		openDialogNetworkError();
 	}
 }
 
+/**
+ * Performs the comment report action.
+ * @param comment - The comment to be reported.
+ * @param reportText - The text of the report.
+ */
 async function performCommentReport(comment, reportText) {
-	const commentId = comment.id;
-	if (!currentUser) {
-		throw new Error('User must be logged in to report a comment');
+	if (!currentUser || !reportText.trim()) {
+		return;
 	}
 
+	const commentId = comment.id;
 	const {apiUrl} = useUrl(`comments/${commentId}/reports`);
+	const {openDialogNetworkError} = usePkpModal();
 
 	const {fetch: postReport, isSuccess} = usePkpFetch(apiUrl, {
 		method: 'POST',
@@ -266,6 +312,7 @@ async function performCommentReport(comment, reportText) {
 			note: reportText,
 		},
 	});
+
 	await postReport();
 
 	if (!isSuccess.value) {
@@ -280,63 +327,62 @@ async function performCommentReport(comment, reportText) {
 	closeModal(PkpUserCommentReportModal);
 }
 
-function onCommentSaved(data) {
-	commentText.value = '';
-
-	// Add the new comment to the top of the comments list.
-	comments.value.unshift(data);
-}
-
-async function fetchComments() {
+/**
+ * Loads more comments for publication.
+ * @param refresh - Whether to refresh the comments list or append to it. When true, this will refresh the list with the first page of comments.
+ */
+async function loadComments(refresh = false) {
 	const {apiUrl} = useUrl(
 		`comments/public?publicationIds=${props.publicationId}`,
 	);
 
-	currentPage.value += 1;
+	currentPage.value = refresh ? 1 : currentPage.value + 1;
 	const {items, pagination, fetch} = useFetchPaginated(apiUrl, {
 		currentPage,
 		pageSize: props.itemsPerPage,
 	});
 
 	await fetch();
-	comments.value = [...comments.value, ...items.value];
+
+	comments.value = refresh ? items.value : [...comments.value, ...items.value];
+
 	pageCount.value = pagination.value.pageCount;
+
 	showMoreCommentsCount.value =
-		showMoreCommentsCount.value - props.itemsPerPage;
+		props.totalPublicationComments -
+		comments.value.filter((c) => c.isApproved).length;
 }
 
-onMounted(() => fetchComments());
+onMounted(() => loadComments());
 </script>
 
 <style>
-.commentsList__item {
+.pkpUserCommentsList__item {
 	list-style-type: none;
 	margin-top: 2rem;
 }
 
-.commentsList__item--content {
+.pkpUserCommentsList__item--content {
 	background-color: var(--pkp-background-color-tertiary);
-	border-radius: var(--pkp-radius);
-
+	border-radius: 15px;
 	padding-bottom: 1rem;
 }
 
-.commentsList__item--commentText {
-	color: #222222;
+.pkpUserCommentsList__item--commentText {
+	color: var(--pkp-text-color-default);
 	font-size: 0.85rem;
 	padding-left: 2rem;
 	padding-right: 2rem;
 }
 
-.commentsList__item--timestamp {
+.pkpUserCommentsList__item--timestamp {
 	font-size: 0.75rem;
-	color: #7a7a7a;
+	color: var(--pkp-text-color-secondary);
 }
 
-.commentsList__item--author {
-	margin-top: 0.75rem;
+.pkpUserCommentsList__item--author {
+	margin-top: 1.75rem;
 	margin-bottom: 2rem;
-	color: #000;
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
@@ -344,31 +390,34 @@ onMounted(() => fetchComments());
 	padding-right: 2rem;
 }
 
-.commentsList__item--authorName {
-	font-weight: bold;
+.pkpUserCommentsList__item--authorName {
+	font-size: var(--pkp-text-base-bold);
+	font-weight: var(--pkp-text-base-bold--font-weight);
+	margin-bottom: 0.25rem;
 }
 
-.commentsList__item--authorInfo {
+.pkpUserCommentsList__item--authorInfo {
 	display: flex;
 	flex-direction: column;
+	line-height: 1.25rem;
 }
 
-.commentsList__item--orcid {
+.pkpUserCommentsList__item--orcid {
 	color: var(--pkp-text-color-secondary);
 }
 
-.commentsList__item--orcid,
-.commentsList__item--affiliation {
-	font-size: 0.65rem;
+.pkpUserCommentsList__item--orcid,
+.pkpUserCommentsList__item--affiliation {
+	font-size: var(--pkp-text-sm-light);
 }
 
-.commentsList__item--helpIcon,
-.commentsList__errorIcon {
+.pkpUserCommentsList__item--helpIcon,
+.pkpUserCommentsList__errorIcon {
 	width: 1.25rem;
 	height: 1.25rem;
 }
 
-.commentsList__item--approvalNotice {
+.pkpUserCommentsList__item--approvalNotice {
 	color: var(--pkp-color-primary);
 	display: flex;
 	gap: 0.5rem;
@@ -377,9 +426,10 @@ onMounted(() => fetchComments());
 	padding-left: 2rem;
 	padding-right: 2rem;
 	padding-top: 1rem;
+	font-size: var(--pkp-text-sm-light);
 }
 
-.commentsList__commentNotAllowed {
+.pkpUserCommentsList__commentNotAllowed {
 	background-color: #f9e1e173;
 	padding: 1.5rem;
 	border-radius: 0.65rem;
@@ -388,19 +438,29 @@ onMounted(() => fetchComments());
 	align-items: center;
 }
 
-.commentsList__items {
+.pkpUserCommentsList__items {
 	padding: 0;
 	margin: 0;
 }
 
-.commentsList__item--actions {
+.pkpUserCommentsList__item--actions {
 	display: flex;
 	justify-content: space-between;
 	padding-left: 2rem;
 	padding-right: 2rem;
 }
 
-.commentsList__showMore {
+.pkpUserCommentsList__showMore {
 	margin-top: 2rem;
 }
+
+.pkpUserCommentsList__submitButton {
+	margin-top: 1.5rem;
+}
+
+.pkpUserCommentsList__item--orcidContainer {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.1rem;
+}
 </style>
diff --git a/src/frontend/composables/load_frontend.js b/src/frontend/composables/load_frontend.js
index eea405f0b..f06106fbe 100644
--- a/src/frontend/composables/load_frontend.js
+++ b/src/frontend/composables/load_frontend.js
@@ -19,7 +19,6 @@ import * as useApp from '@/composables/useApp.js';
 import * as useUrl from '@/composables/useUrl.js';
 import * as usePkpFetch from '@/frontend/composables/usePkpFetch.js';
 import * as usePkpModal from '@/frontend/composables/usePkpModal.js';
-import * as usePkpDate from '@/frontend/composables/usePkpDate.js';
 // Directives
 import {stripUnsafeHtml} from '@/directives/stripUnsafeHtml';
 
@@ -85,7 +84,6 @@ export default {
 		useUrl,
 		usePkpFetch,
 		usePkpModal,
-		usePkpDate,
 	},
 	pkpCreateVueApp,
 	createApp,
diff --git a/src/frontend/composables/usePkpLocalize.js b/src/frontend/composables/usePkpLocalize.js
new file mode 100644
index 000000000..03bd63536
--- /dev/null
+++ b/src/frontend/composables/usePkpLocalize.js
@@ -0,0 +1,43 @@
+import {t, localize} from '@/utils/i18n.js';
+
+/**
+ * Returns the translation key unchanged (helper for cases where you need the key itself)
+ * @param {string} translationKey - Translation key
+ * @returns {string} The unchanged translation key
+ */
+function tk(translationKey) {
+	return translationKey;
+}
+
+/**
+ * Provides internationalization functions for translating content
+ */
+export function usePkpLocalize() {
+	return {
+		/**
+		 * Translate a string using the translation keys
+		 * @type {Function}
+		 * @param {string} key - Translation key
+		 * @param {Object} [params] - Optional parameters for variable replacement
+		 * @returns {string} Translated string
+		 */
+		t,
+
+		/**
+		 * Returns a translation key unchanged
+		 * @type {Function}
+		 * @param {string} translationKey - Translation key
+		 * @returns {string} The unchanged translation key
+		 */
+		tk,
+
+		/**
+		 * Get localized content from a multilingual object
+		 * @type {Function}
+		 * @param {Object} multilingualObject - Object with locale keys
+		 * @param {string} [locale] - Specific locale to use
+		 * @returns {string} Localized content
+		 */
+		localize,
+	};
+}
diff --git a/src/frontend/styles/style.css b/src/frontend/styles/style.css
new file mode 100644
index 000000000..50218ab3f
--- /dev/null
+++ b/src/frontend/styles/style.css
@@ -0,0 +1,31 @@
+.-screenReader {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+.-screenReader:focus {
+    background-color: #fff;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    color: #000;
+    display: block;
+    font-size: var(--pkp-text-base-size);
+    height: auto;
+    line-height: normal;
+    padding: 1rem;
+    position: absolute;
+    left: 0.5rem;
+    top: 0.5rem;
+    text-decoration: none;
+    width: auto;
+    z-index: 100000;
+}