From 27f5e60ef781a816476eff0ed6f7799269a45e31 Mon Sep 17 00:00:00 2001
From: Ajit Kumar <dellevenjack@gmail>
Date: Wed, 23 Sep 2026 02:39:22 +0530
Subject: [PATCH] feat: review button in plugin page

---
 src/pages/plugin/plugin.scss    | 42 +++++++++++++++++++++++++++++++++
 src/pages/plugin/plugin.view.js | 38 +++++++++++++++++++----------
 2 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/src/pages/plugin/plugin.scss b/src/pages/plugin/plugin.scss
index 68c1bc211..304cd6afc 100644
--- a/src/pages/plugin/plugin.scss
+++ b/src/pages/plugin/plugin.scss
@@ -7,6 +7,48 @@
   margin: 0 auto;
   box-sizing: border-box;
 
+  &.has-reviews-button #plugin-tab .tab-content {
+    padding-bottom: calc(88px + env(safe-area-inset-bottom));
+  }
+
+  .plugin-reviews-button {
+    position: fixed;
+    inset-inline-end: calc(20px + max(env(safe-area-inset-left), env(safe-area-inset-right)));
+    bottom: calc(20px + env(safe-area-inset-bottom));
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 48px;
+    min-height: 48px;
+    max-width: calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 24px;
+    background: var(--button-background-color);
+    color: var(--button-text-color);
+    box-shadow: 0 4px 12px var(--box-shadow-color);
+    font: inherit;
+    font-weight: 500;
+    line-height: 1.25;
+    text-transform: capitalize;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--button-background-color);
+      outline-offset: 4px;
+    }
+
+    .icon {
+      flex: 0 0 20px;
+      width: 20px;
+      height: 20px;
+      font-size: 20px;
+    }
+  }
+
   .plugin-header {
     display: grid;
     grid-template-columns: auto 1fr auto;
diff --git a/src/pages/plugin/plugin.view.js b/src/pages/plugin/plugin.view.js
index ed0cc0e53..ef957d30f 100644
--- a/src/pages/plugin/plugin.view.js
+++ b/src/pages/plugin/plugin.view.js
@@ -92,6 +92,7 @@ export default (props) => {
 		rating === "unrated" ? strings["plugin-review:unrated"] : rating;
 	const ratingValueRef = Ref();
 	const commentCountRef = Ref();
+	const hasReviews = votesUp !== undefined;
 
 	const keywords =
 		typeof keywordsRaw === "string" ? JSON.parse(keywordsRaw) : keywordsRaw;
@@ -108,6 +109,13 @@ export default (props) => {
 		ratingValueRef.className = getRatingClass(rating);
 		commentCountRef.textContent = reviewStats.commentCount;
 	};
+	const openReviews = () =>
+		showReviews({
+			pluginId: id,
+			author,
+			stats: reviewStats,
+			onStatsChange: applyReviewStats,
+		});
 
 	const formatUpdatedDate = (dateString) => {
 		if (!dateString) return null;
@@ -124,7 +132,10 @@ export default (props) => {
 	};
 
 	return (
-		<div className="main" id="plugin">
+		<div
+			className={`main${hasReviews ? " has-reviews-button" : ""}`}
+			id="plugin"
+		>
 			<div className="plugin-header">
 				<div
 					className="plugin-icon"
@@ -170,7 +181,7 @@ export default (props) => {
 							{license || "Unknown"}
 						</span>
 					</div>
-					{votesUp !== undefined ? (
+					{hasReviews ? (
 						<div className="metrics-row">
 							<div className="metric">
 								<span className="icon save_alt"></span>
@@ -189,17 +200,7 @@ export default (props) => {
 									{getRatingText()}
 								</span>
 							</div>
-							<div
-								className="metric"
-								onclick={() =>
-									showReviews({
-										pluginId: id,
-										author,
-										stats: reviewStats,
-										onStatsChange: applyReviewStats,
-									})
-								}
-							>
+							<div className="metric" onclick={openReviews}>
 								<i className="icon chat_bubble"></i>
 								<span ref={commentCountRef} className="metric-value">
 									{reviewStats.commentCount}
@@ -305,6 +306,17 @@ export default (props) => {
 					></div>
 				</div>
 			</TabView>
+			{hasReviews ? (
+				<button
+					type="button"
+					className="plugin-reviews-button"
+					aria-label={strings["plugin-review:dialog-label"]}
+					onclick={openReviews}
+				>
+					<span className="icon chat_bubble" aria-hidden="true"></span>
+					<span>{strings.reviews}</span>
+				</button>
+			) : null}
 		</div>
 	);
 };