From 4e6faee4c28d45b752563b415cf1d99cd50ec533 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 22 May 2026 18:33:14 +0300
Subject: [PATCH 1/4] Add "Was this helpful?" feedback prompt to doc pages

Posts feedback (yes/no, reason, free-text, page path) to Formspree
form mjgzrgwn as JSON. Mounted in the right sidebar on pages with a
TOC and inline at the bottom of MarkdownContent on TOC-less doc pages
(mobile-only fallback when TOC is present). Hidden on splash pages
and on landing/overview pages with a hero block in frontmatter, since
those aggregate links rather than carry actionable content.
---
 src/components/starlight/FeedbackPrompt.astro | 397 ++++++++++++++++++
 .../starlight/MarkdownContent.astro           |  24 ++
 src/components/starlight/PageSidebar.astro    |   2 +
 3 files changed, 423 insertions(+)
 create mode 100644 src/components/starlight/FeedbackPrompt.astro

diff --git a/src/components/starlight/FeedbackPrompt.astro b/src/components/starlight/FeedbackPrompt.astro
new file mode 100644
index 0000000000..39207816f2
--- /dev/null
+++ b/src/components/starlight/FeedbackPrompt.astro
@@ -0,0 +1,397 @@
+---
+import Icon from '~/components/starlight/Icon.astro';
+
+const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mjgzrgwn';
+
+const questions = {
+	yes: [
+		['Accurate', 'accurate'],
+		['Easy to understand', 'easy-to-understand'],
+		['Solved my problem', 'solved-my-problem'],
+		['Helped me decide to use the product', 'helped-me-decide-to-use-the-product'],
+		['Other', 'other-yes'],
+	],
+	no: [
+		['Hard to understand', 'hard-to-understand'],
+		['Incorrect information', 'incorrect-information'],
+		['Missing the information', 'missing-the-information'],
+		['Other', 'other-no'],
+	],
+} as const;
+
+const options = ['yes', 'no'] as const;
+---
+
+<div class="feedback-prompt not-content" data-feedback-root data-endpoint={FORMSPREE_ENDPOINT}>
+	<p class="feedback-title" data-feedback-title>Was this helpful?</p>
+
+	<div class="feedback-buttons" data-feedback-buttons>
+		<button type="button" class="feedback-btn" data-option="yes">
+			<Icon name="tabler:thumb-up" size="1.5rem" />
+			<span>Yes</span>
+		</button>
+		<button type="button" class="feedback-btn" data-option="no">
+			<Icon name="tabler:thumb-down" size="1.5rem" />
+			<span>No</span>
+		</button>
+	</div>
+
+	<form class="feedback-form" data-feedback-form hidden novalidate>
+
+		{
+			options.map((opt) => (
+				<fieldset class="feedback-fieldset" data-option-fieldset={opt} hidden>
+					<legend class="sr-only">
+						{opt === 'yes' ? 'What did you like?' : 'What went wrong?'}
+					</legend>
+					<div class="feedback-reasons">
+						{questions[opt].map(([label, value]) => (
+							<label class="feedback-reason">
+								<input
+									type="radio"
+									name="reason"
+									value={value}
+									class="feedback-reason-input"
+								/>
+								<span class="feedback-reason-ring">
+									<span class="feedback-reason-dot" />
+								</span>
+								<span class="feedback-reason-label">{label}</span>
+							</label>
+						))}
+					</div>
+				</fieldset>
+			))
+		}
+
+		<textarea
+			class="feedback-textarea"
+			name="info"
+			rows="2"
+			placeholder="Tell us more about your experience."></textarea>
+
+		<input
+			type="text"
+			name="_gotcha"
+			tabindex="-1"
+			autocomplete="off"
+			class="feedback-honeypot"
+			aria-hidden="true"
+		/>
+
+		<button type="submit" class="feedback-submit" disabled>Submit</button>
+	</form>
+
+	<div class="feedback-success" data-feedback-success hidden>
+		<Icon name="tabler:circle-check-filled" size="1.125rem" />
+		<span>Thank you for your feedback!</span>
+	</div>
+</div>
+
+<script>
+	type FeedbackOption = 'yes' | 'no';
+
+	function bind(root: HTMLElement) {
+		if (root.dataset.bound) return;
+		root.dataset.bound = '1';
+
+		const endpoint = root.dataset.endpoint;
+		const title = root.querySelector<HTMLElement>('[data-feedback-title]');
+		const buttons = root.querySelector<HTMLElement>('[data-feedback-buttons]');
+		const form = root.querySelector<HTMLFormElement>('[data-feedback-form]');
+		const success = root.querySelector<HTMLElement>('[data-feedback-success]');
+		const submit = form?.querySelector<HTMLButtonElement>('button[type="submit"]');
+		if (!endpoint || !title || !buttons || !form || !success || !submit) return;
+
+		let chosen: FeedbackOption | null = null;
+
+		buttons.addEventListener('click', (e) => {
+			const btn = (e.target as HTMLElement).closest<HTMLElement>('[data-option]');
+			if (!btn) return;
+			chosen = btn.dataset.option as FeedbackOption;
+			title.textContent = chosen === 'yes' ? 'What did you like?' : 'What went wrong?';
+			buttons.hidden = true;
+			form.hidden = false;
+			root.querySelectorAll<HTMLElement>('[data-option-fieldset]').forEach((fs) => {
+				fs.hidden = fs.dataset.optionFieldset !== chosen;
+			});
+		});
+
+		form.addEventListener('change', (e) => {
+			if ((e.target as HTMLInputElement).name === 'reason') submit.disabled = false;
+		});
+
+		form.addEventListener('submit', async (e) => {
+			e.preventDefault();
+			if (!chosen) return;
+			submit.disabled = true;
+			try {
+				await fetch(endpoint, {
+					method: 'POST',
+					headers: { Accept: 'application/json' },
+					body: JSON.stringify({
+						...Object.fromEntries(new FormData(form)),
+						option: chosen,
+						page: location.pathname,
+					}),
+				});
+			} catch {
+				/* Fail silently — Formspree may be unreachable; user has moved on. */
+			}
+			title.hidden = true;
+			form.hidden = true;
+			success.hidden = false;
+		});
+	}
+
+	const init = () =>
+		document.querySelectorAll<HTMLElement>('[data-feedback-root]').forEach(bind);
+
+	document.addEventListener('astro:page-load', init);
+	if (document.readyState !== 'loading') init();
+</script>
+
+<style lang="scss">
+	/* HTML5 [hidden] is just `display: none` at user-agent level;
+	   any class with `display: flex/grid` would override it, so force it. */
+	.feedback-prompt [hidden] {
+		display: none !important;
+	}
+
+	.feedback-prompt {
+		container-type: inline-size;
+		max-width: var(--feedback-max-width, 18rem);
+		margin: 2rem 0 1.5rem;
+		padding-top: 1.25rem;
+		border-top: 1px solid var(--sl-color-hairline);
+	}
+
+	.feedback-title {
+		margin: 0;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--sl-color-gray-3);
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.feedback-buttons {
+		display: flex;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	.feedback-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		height: 2.25rem;
+		padding: 0 0.875rem;
+		border: 1px solid var(--sl-color-hairline);
+		border-radius: 0.5rem;
+		background: var(--sl-color-bg-nav);
+		color: var(--sl-color-text);
+		font: inherit;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease;
+	}
+
+	.feedback-btn:hover {
+		border-color: var(--sl-color-gray-3);
+		background: var(--sl-color-gray-6, var(--sl-color-bg));
+	}
+
+	.feedback-btn :global(svg) {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 1.5rem;
+		opacity: 0.75;
+	}
+
+	.feedback-success :global(svg) {
+		width: 1.25rem;
+		height: 1.25rem;
+		font-size: 1.25rem;
+		flex-shrink: 0;
+	}
+
+	.feedback-form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	.feedback-fieldset {
+		margin: 0;
+		padding: 0;
+		border: 0;
+	}
+
+	.feedback-reasons {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.feedback-reason {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		padding: 0.5rem 0.625rem;
+		border: 1px solid var(--sl-color-hairline);
+		border-radius: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--sl-color-text);
+		cursor: pointer;
+		user-select: none;
+		transition: border-color 0.15s ease, background-color 0.15s ease;
+	}
+
+	.feedback-reason:hover {
+		border-color: var(--sl-color-gray-3);
+		background: var(--sl-color-bg-nav);
+	}
+
+	.feedback-reason:has(.feedback-reason-input:checked) {
+		border-color: var(--sl-color-text-accent);
+	}
+
+	.feedback-reason:has(.feedback-reason-input:focus-visible) {
+		outline: 2px solid var(--sl-color-text-accent);
+		outline-offset: 2px;
+	}
+
+	.feedback-reason-input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		cursor: pointer;
+		margin: 0;
+	}
+
+	.feedback-reason-ring {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 1rem;
+		height: 1rem;
+		border: 1px solid var(--sl-color-gray-3);
+		border-radius: 50%;
+		transition: border-color 0.15s ease, border-width 0.15s ease;
+	}
+
+	.feedback-reason:has(.feedback-reason-input:checked) .feedback-reason-ring {
+		border-color: var(--sl-color-text-accent);
+		border-width: 2px;
+	}
+
+	.feedback-reason-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		background: var(--sl-color-text-accent);
+		transform: scale(0);
+		transition: transform 0.15s ease;
+	}
+
+	.feedback-reason:has(.feedback-reason-input:checked) .feedback-reason-dot {
+		transform: scale(1);
+	}
+
+	.feedback-reason-label {
+		line-height: 1.3;
+	}
+
+	.feedback-textarea {
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--sl-color-hairline);
+		border-radius: 0.5rem;
+		background: var(--sl-color-bg);
+		color: var(--sl-color-text);
+		font: inherit;
+		font-size: 0.8125rem;
+		resize: vertical;
+		min-height: 4rem;
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+	}
+
+	.feedback-textarea::placeholder {
+		color: var(--sl-color-gray-3);
+	}
+
+	.feedback-textarea:focus {
+		outline: none;
+		border-color: var(--sl-color-text-accent);
+		box-shadow: 0 0 0 1px var(--sl-color-text-accent);
+	}
+
+	.feedback-honeypot {
+		position: absolute;
+		left: -9999px;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.feedback-submit {
+		align-self: flex-start;
+		height: 2rem;
+		padding: 0 1rem;
+		border: 0;
+		border-radius: 0.5rem;
+		background: var(--sl-color-text-accent);
+		color: var(--sl-color-bg);
+		font: inherit;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: opacity 0.15s ease;
+	}
+
+	.feedback-submit:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.feedback-submit:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.feedback-success {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+		padding: 0.625rem 0.75rem;
+		border-radius: 0.5rem;
+		background: #ecfdf5;
+		color: #047857;
+		font-size: 0.8125rem;
+	}
+
+	:global([data-theme='dark']) .feedback-success {
+		background: rgba(16, 185, 129, 0.12);
+		color: #6ee7b7;
+	}
+</style>
diff --git a/src/components/starlight/MarkdownContent.astro b/src/components/starlight/MarkdownContent.astro
index c9fdb47e1c..e005e884b4 100644
--- a/src/components/starlight/MarkdownContent.astro
+++ b/src/components/starlight/MarkdownContent.astro
@@ -6,8 +6,14 @@ import DeployGuidesNav from '../DeployGuidesNav.astro';
 import MediaGuidesNav from '../MediaGuidesNav.astro';
 import IntegrationsNav from '../IntegrationsNav.astro';
 import MigrationGuidesNav from '../MigrationGuidesNav.astro';
+import FeedbackPrompt from './FeedbackPrompt.astro';
 
 const { entry } = Astro.locals.starlightRoute;
+const hasToc = !!Astro.locals.starlightRoute.toc;
+const hasSidebar = !!Astro.locals.starlightRoute.hasSidebar;
+// Landing / overview pages (those with a hero block in frontmatter) aggregate
+// links to sub-pages — feedback isn't actionable there.
+const showFeedback = hasSidebar && !entry.data.hero;
 ---
 
 <div class="sl-markdown-content">
@@ -63,6 +69,14 @@ const { entry } = Astro.locals.starlightRoute;
 	}
 </div>
 
+{
+	showFeedback && (
+		<div class:list={['feedback-mount', { 'feedback-mount--mobile-only': hasToc }]}>
+			<FeedbackPrompt />
+		</div>
+	)
+}
+
 <script>
 	function initAnchorCopy() {
 		document.querySelectorAll<HTMLElement>('.sl-heading-wrapper').forEach((wrapper) => {
@@ -90,6 +104,16 @@ const { entry } = Astro.locals.starlightRoute;
 		--sl-content-width: 72rem;
 	}
 
+	.feedback-mount {
+		--feedback-max-width: none;
+	}
+
+	@media (min-width: 72rem) {
+		.feedback-mount--mobile-only {
+			display: none;
+		}
+	}
+
 	.sl-markdown-content table:not(:where(.not-content *)) {
 		display: block;
 		overflow-x: auto;
diff --git a/src/components/starlight/PageSidebar.astro b/src/components/starlight/PageSidebar.astro
index 8b1d0768c1..a393917470 100644
--- a/src/components/starlight/PageSidebar.astro
+++ b/src/components/starlight/PageSidebar.astro
@@ -1,4 +1,5 @@
 ---
+import FeedbackPrompt from './FeedbackPrompt.astro';
 import MobileTableOfContents from './MobileTableOfContents.astro';
 import TableOfContents from './TableOfContents.astro';
 ---
@@ -12,6 +13,7 @@ import TableOfContents from './TableOfContents.astro';
 			<div class="right-sidebar-panel sl-hidden lg:sl-block">
 				<div class="sl-container">
 					<TableOfContents />
+					<FeedbackPrompt />
 				</div>
 			</div>
 		</>

From 04b74e5acdbcf248f7109dfca9918b601bf30ab3 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 22 May 2026 18:46:19 +0300
Subject: [PATCH 2/4] Address PR review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Content-Type: application/json header so Formspree picks the JSON
  parser instead of falling back to text/plain
- Move focus to the first radio when the form opens so keyboard users
  get a clear next step after picking Yes/No
- Add role="status" to the success block so assistive tech announces
  "Thank you for your feedback!" when it appears
- Persist a per-pathname flag in sessionStorage + dispatch a custom
  event after submit, so the second (sidebar/inline) instance on the
  same page is kept in sync and revisits skip straight to success
- Rename reason "Missing the information" → "Missing information"
---
 src/components/starlight/FeedbackPrompt.astro | 55 ++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/components/starlight/FeedbackPrompt.astro b/src/components/starlight/FeedbackPrompt.astro
index 39207816f2..b97a21661c 100644
--- a/src/components/starlight/FeedbackPrompt.astro
+++ b/src/components/starlight/FeedbackPrompt.astro
@@ -14,7 +14,7 @@ const questions = {
 	no: [
 		['Hard to understand', 'hard-to-understand'],
 		['Incorrect information', 'incorrect-information'],
-		['Missing the information', 'missing-the-information'],
+		['Missing information', 'missing-information'],
 		['Other', 'other-no'],
 	],
 } as const;
@@ -82,7 +82,7 @@ const options = ['yes', 'no'] as const;
 		<button type="submit" class="feedback-submit" disabled>Submit</button>
 	</form>
 
-	<div class="feedback-success" data-feedback-success hidden>
+	<div class="feedback-success" data-feedback-success role="status" hidden>
 		<Icon name="tabler:circle-check-filled" size="1.125rem" />
 		<span>Thank you for your feedback!</span>
 	</div>
@@ -91,6 +91,26 @@ const options = ['yes', 'no'] as const;
 <script>
 	type FeedbackOption = 'yes' | 'no';
 
+	const STORAGE_PREFIX = 'feedback-submitted:';
+	const SUBMITTED_EVENT = 'feedback:submitted';
+
+	const isSubmitted = () => {
+		try {
+			return sessionStorage.getItem(STORAGE_PREFIX + location.pathname) === '1';
+		} catch {
+			return false;
+		}
+	};
+
+	const markSubmitted = () => {
+		try {
+			sessionStorage.setItem(STORAGE_PREFIX + location.pathname, '1');
+		} catch {
+			/* Storage may be disabled; in-page custom event still syncs siblings. */
+		}
+		document.dispatchEvent(new CustomEvent(SUBMITTED_EVENT));
+	};
+
 	function bind(root: HTMLElement) {
 		if (root.dataset.bound) return;
 		root.dataset.bound = '1';
@@ -103,6 +123,20 @@ const options = ['yes', 'no'] as const;
 		const submit = form?.querySelector<HTMLButtonElement>('button[type="submit"]');
 		if (!endpoint || !title || !buttons || !form || !success || !submit) return;
 
+		const showSuccess = () => {
+			title.hidden = true;
+			buttons.hidden = true;
+			form.hidden = true;
+			success.hidden = false;
+		};
+
+		if (isSubmitted()) {
+			showSuccess();
+			return;
+		}
+
+		document.addEventListener(SUBMITTED_EVENT, showSuccess);
+
 		let chosen: FeedbackOption | null = null;
 
 		buttons.addEventListener('click', (e) => {
@@ -115,6 +149,11 @@ const options = ['yes', 'no'] as const;
 			root.querySelectorAll<HTMLElement>('[data-option-fieldset]').forEach((fs) => {
 				fs.hidden = fs.dataset.optionFieldset !== chosen;
 			});
+			root
+				.querySelector<HTMLInputElement>(
+					`[data-option-fieldset="${chosen}"] .feedback-reason-input`
+				)
+				?.focus();
 		});
 
 		form.addEventListener('change', (e) => {
@@ -128,7 +167,10 @@ const options = ['yes', 'no'] as const;
 			try {
 				await fetch(endpoint, {
 					method: 'POST',
-					headers: { Accept: 'application/json' },
+					headers: {
+						Accept: 'application/json',
+						'Content-Type': 'application/json',
+					},
 					body: JSON.stringify({
 						...Object.fromEntries(new FormData(form)),
 						option: chosen,
@@ -136,11 +178,10 @@ const options = ['yes', 'no'] as const;
 					}),
 				});
 			} catch {
-				/* Fail silently — Formspree may be unreachable; user has moved on. */
+				/* Submission is analytics-only — failures fail silently. */
 			}
-			title.hidden = true;
-			form.hidden = true;
-			success.hidden = false;
+			markSubmitted();
+			showSuccess();
 		});
 	}
 

From 94d3b83d14cac84b6308c8afe96e4d869b250482 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 26 May 2026 11:02:38 +0300
Subject: [PATCH 3/4] Address PR review feedback

- Hide feedback prompt on splash/hero landing pages
- Show success only on actual submission success (HTTP 200)
- Move SUBMITTED event listener to module scope to avoid View Transitions leaks
- Announce success via aria-live region to fix screen reader silence
- Replace hardcoded success colors with Starlight theme tokens
---
 src/components/starlight/FeedbackPrompt.astro | 57 ++++++++++++-------
 src/components/starlight/PageSidebar.astro    |  8 ++-
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/starlight/FeedbackPrompt.astro b/src/components/starlight/FeedbackPrompt.astro
index b97a21661c..48c4a3a983 100644
--- a/src/components/starlight/FeedbackPrompt.astro
+++ b/src/components/starlight/FeedbackPrompt.astro
@@ -82,10 +82,12 @@ const options = ['yes', 'no'] as const;
 		<button type="submit" class="feedback-submit" disabled>Submit</button>
 	</form>
 
-	<div class="feedback-success" data-feedback-success role="status" hidden>
+	<div class="feedback-success" data-feedback-success hidden>
 		<Icon name="tabler:circle-check-filled" size="1.125rem" />
 		<span>Thank you for your feedback!</span>
 	</div>
+
+	<div class="sr-only" role="status" aria-live="polite" data-feedback-announce></div>
 </div>
 
 <script>
@@ -111,6 +113,27 @@ const options = ['yes', 'no'] as const;
 		document.dispatchEvent(new CustomEvent(SUBMITTED_EVENT));
 	};
 
+	const showSuccessFor = (root: HTMLElement, announce: boolean) => {
+		const title = root.querySelector<HTMLElement>('[data-feedback-title]');
+		const buttons = root.querySelector<HTMLElement>('[data-feedback-buttons]');
+		const form = root.querySelector<HTMLFormElement>('[data-feedback-form]');
+		const success = root.querySelector<HTMLElement>('[data-feedback-success]');
+		const announceEl = root.querySelector<HTMLElement>('[data-feedback-announce]');
+		if (!title || !buttons || !form || !success) return;
+		title.hidden = true;
+		buttons.hidden = true;
+		form.hidden = true;
+		success.hidden = false;
+		if (announce && announceEl) announceEl.textContent = 'Thank you for your feedback!';
+	};
+
+	// Single module-scope listener so View Transitions don't accumulate one per page navigation.
+	document.addEventListener(SUBMITTED_EVENT, () => {
+		document
+			.querySelectorAll<HTMLElement>('[data-feedback-root]')
+			.forEach((root) => showSuccessFor(root, false));
+	});
+
 	function bind(root: HTMLElement) {
 		if (root.dataset.bound) return;
 		root.dataset.bound = '1';
@@ -123,20 +146,11 @@ const options = ['yes', 'no'] as const;
 		const submit = form?.querySelector<HTMLButtonElement>('button[type="submit"]');
 		if (!endpoint || !title || !buttons || !form || !success || !submit) return;
 
-		const showSuccess = () => {
-			title.hidden = true;
-			buttons.hidden = true;
-			form.hidden = true;
-			success.hidden = false;
-		};
-
 		if (isSubmitted()) {
-			showSuccess();
+			showSuccessFor(root, false);
 			return;
 		}
 
-		document.addEventListener(SUBMITTED_EVENT, showSuccess);
-
 		let chosen: FeedbackOption | null = null;
 
 		buttons.addEventListener('click', (e) => {
@@ -164,8 +178,9 @@ const options = ['yes', 'no'] as const;
 			e.preventDefault();
 			if (!chosen) return;
 			submit.disabled = true;
+			let ok = false;
 			try {
-				await fetch(endpoint, {
+				const response = await fetch(endpoint, {
 					method: 'POST',
 					headers: {
 						Accept: 'application/json',
@@ -177,11 +192,16 @@ const options = ['yes', 'no'] as const;
 						page: location.pathname,
 					}),
 				});
+				ok = response.ok;
 			} catch {
-				/* Submission is analytics-only — failures fail silently. */
+				/* Network failure — fall through with ok=false. */
+			}
+			if (!ok) {
+				submit.disabled = false;
+				return;
 			}
 			markSubmitted();
-			showSuccess();
+			showSuccessFor(root, true);
 		});
 	}
 
@@ -426,13 +446,8 @@ const options = ['yes', 'no'] as const;
 		margin-top: 0.75rem;
 		padding: 0.625rem 0.75rem;
 		border-radius: 0.5rem;
-		background: #ecfdf5;
-		color: #047857;
+		background: var(--sl-color-green-low);
+		color: var(--sl-color-green-high);
 		font-size: 0.8125rem;
 	}
-
-	:global([data-theme='dark']) .feedback-success {
-		background: rgba(16, 185, 129, 0.12);
-		color: #6ee7b7;
-	}
 </style>
diff --git a/src/components/starlight/PageSidebar.astro b/src/components/starlight/PageSidebar.astro
index a393917470..592b180a97 100644
--- a/src/components/starlight/PageSidebar.astro
+++ b/src/components/starlight/PageSidebar.astro
@@ -2,10 +2,14 @@
 import FeedbackPrompt from './FeedbackPrompt.astro';
 import MobileTableOfContents from './MobileTableOfContents.astro';
 import TableOfContents from './TableOfContents.astro';
+
+const { entry, toc, hasSidebar } = Astro.locals.starlightRoute;
+// Match MarkdownContent.astro: hide feedback on splash and hero/landing pages.
+const showFeedback = hasSidebar && !entry.data.hero;
 ---
 
 {
-	Astro.locals.starlightRoute.toc && (
+	toc && (
 		<>
 			<div class="lg:sl-hidden">
 				<MobileTableOfContents />
@@ -13,7 +17,7 @@ import TableOfContents from './TableOfContents.astro';
 			<div class="right-sidebar-panel sl-hidden lg:sl-block">
 				<div class="sl-container">
 					<TableOfContents />
-					<FeedbackPrompt />
+					{showFeedback && <FeedbackPrompt />}
 				</div>
 			</div>
 		</>

From 3537065632bc4507ff892b09d3c01140f1662d7c Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 4 Jun 2026 15:09:49 +0300
Subject: [PATCH 4/4] Extract shared shouldShowFeedback helper for feedback
 prompt visibility

---
 src/components/starlight/MarkdownContent.astro |  6 ++----
 src/components/starlight/PageSidebar.astro     |  6 +++---
 src/util/shouldShowFeedback.ts                 | 13 +++++++++++++
 3 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/util/shouldShowFeedback.ts

diff --git a/src/components/starlight/MarkdownContent.astro b/src/components/starlight/MarkdownContent.astro
index e005e884b4..cd8e8c05ed 100644
--- a/src/components/starlight/MarkdownContent.astro
+++ b/src/components/starlight/MarkdownContent.astro
@@ -7,13 +7,11 @@ import MediaGuidesNav from '../MediaGuidesNav.astro';
 import IntegrationsNav from '../IntegrationsNav.astro';
 import MigrationGuidesNav from '../MigrationGuidesNav.astro';
 import FeedbackPrompt from './FeedbackPrompt.astro';
+import { shouldShowFeedback } from '~/util/shouldShowFeedback';
 
 const { entry } = Astro.locals.starlightRoute;
 const hasToc = !!Astro.locals.starlightRoute.toc;
-const hasSidebar = !!Astro.locals.starlightRoute.hasSidebar;
-// Landing / overview pages (those with a hero block in frontmatter) aggregate
-// links to sub-pages — feedback isn't actionable there.
-const showFeedback = hasSidebar && !entry.data.hero;
+const showFeedback = shouldShowFeedback(Astro.locals.starlightRoute);
 ---
 
 <div class="sl-markdown-content">
diff --git a/src/components/starlight/PageSidebar.astro b/src/components/starlight/PageSidebar.astro
index 592b180a97..4b6ef971df 100644
--- a/src/components/starlight/PageSidebar.astro
+++ b/src/components/starlight/PageSidebar.astro
@@ -2,10 +2,10 @@
 import FeedbackPrompt from './FeedbackPrompt.astro';
 import MobileTableOfContents from './MobileTableOfContents.astro';
 import TableOfContents from './TableOfContents.astro';
+import { shouldShowFeedback } from '~/util/shouldShowFeedback';
 
-const { entry, toc, hasSidebar } = Astro.locals.starlightRoute;
-// Match MarkdownContent.astro: hide feedback on splash and hero/landing pages.
-const showFeedback = hasSidebar && !entry.data.hero;
+const { toc } = Astro.locals.starlightRoute;
+const showFeedback = shouldShowFeedback(Astro.locals.starlightRoute);
 ---
 
 {
diff --git a/src/util/shouldShowFeedback.ts b/src/util/shouldShowFeedback.ts
new file mode 100644
index 0000000000..b24288142b
--- /dev/null
+++ b/src/util/shouldShowFeedback.ts
@@ -0,0 +1,13 @@
+import type { StarlightRouteData } from '@astrojs/starlight/route-data';
+
+/**
+ * Single source of truth for the "Was this helpful?" feedback prompt visibility.
+ * Used by both mount points (`PageSidebar.astro` and `MarkdownContent.astro`).
+ *
+ * Hidden on splash pages (no sidebar) and on landing / overview pages (those
+ * with a hero block in frontmatter) — they aggregate links to sub-pages, so
+ * feedback isn't actionable there.
+ */
+export function shouldShowFeedback(route: StarlightRouteData): boolean {
+	return !!route.hasSidebar && !route.entry.data.hero;
+}