From 84910b9bc05dfc245301855d2627b4255423b495 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 20 Jan 2025 18:23:03 +0100
Subject: [PATCH 01/13] feat: send content feedback plausible events

---
 src/components/docFeedback/index.tsx | 34 ++++++++++++++++++++++++++++
 src/components/docPage/index.tsx     |  3 +++
 src/hooks/usePlausibleEvent.tsx      |  4 ++++
 3 files changed, 41 insertions(+)
 create mode 100644 src/components/docFeedback/index.tsx

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
new file mode 100644
index 00000000000000..b5180cb237b6e0
--- /dev/null
+++ b/src/components/docFeedback/index.tsx
@@ -0,0 +1,34 @@
+'use client';
+import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
+
+type Props = {
+  pathname: string;
+};
+
+export function DocFeedback({pathname}: Props) {
+  const {emit} = usePlausibleEvent();
+
+  const handleFeedback = (helpful: boolean) => {
+    emit('Doc Feedback', {props: {page: pathname, helpful}});
+  };
+
+  return (
+    <div className="flex items-center gap-2 py-4 border-t border-[var(--gray-6)]">
+      <span className="text-sm">Was this helpful?</span>
+      <button
+        onClick={() => handleFeedback(true)}
+        className="w-10 h-10 py-2 px-2 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+        aria-label="Yes, this was helpful"
+      >
+        👍
+      </button>
+      <button
+        onClick={() => handleFeedback(false)}
+        className="w-10 h-10 py-2 px-2 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+        aria-label="No, this wasn't helpful"
+      >
+        👎
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
index 10da08e5c9ec1b..1797f7c7821878 100644
--- a/src/components/docPage/index.tsx
+++ b/src/components/docPage/index.tsx
@@ -12,6 +12,7 @@ import './type.scss';
 import {Banner} from '../banner';
 import {Breadcrumbs} from '../breadcrumbs';
 import {CodeContextProvider} from '../codeContext';
+import {DocFeedback} from '../docFeedback';
 import {GitHubCTA} from '../githubCTA';
 import {Header} from '../header';
 import Mermaid from '../mermaid';
@@ -91,6 +92,8 @@ export function DocPage({
                 <CodeContextProvider>{children}</CodeContextProvider>
               </div>
 
+              <DocFeedback pathname={pathname} />
+
               <div className="grid grid-cols-2 gap-4 not-prose mt-16">
                 <div className="col-span-1">
                   {previousPage && <PaginationNav node={previousPage} title="Previous" />}
diff --git a/src/hooks/usePlausibleEvent.tsx b/src/hooks/usePlausibleEvent.tsx
index 071eeb5fdf6ca2..8124e464908541 100644
--- a/src/hooks/usePlausibleEvent.tsx
+++ b/src/hooks/usePlausibleEvent.tsx
@@ -4,6 +4,10 @@ import {ReadProgressMilestone} from 'sentry-docs/types/plausible';
 
 // Adding custom events here will make them available via the hook
 type PlausibleEventProps = {
+  ['Doc Feedback']: {
+    helpful: boolean;
+    page: string;
+  };
   ['Read Progress']: {
     page: string;
     readProgress: ReadProgressMilestone;

From db3d320297b2e6a4e0833cdd23deaf64c8ee5488 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 20 Jan 2025 18:29:57 +0100
Subject: [PATCH 02/13] clearer buttons

---
 src/components/docFeedback/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index b5180cb237b6e0..b8f2f4ccf9e00f 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -17,17 +17,17 @@ export function DocFeedback({pathname}: Props) {
       <span className="text-sm">Was this helpful?</span>
       <button
         onClick={() => handleFeedback(true)}
-        className="w-10 h-10 py-2 px-2 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+        className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
         aria-label="Yes, this was helpful"
       >
-        👍
+        Yes 👍
       </button>
       <button
         onClick={() => handleFeedback(false)}
-        className="w-10 h-10 py-2 px-2 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+        className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
         aria-label="No, this wasn't helpful"
       >
-        👎
+        No 👎
       </button>
     </div>
   );

From 54cdff0cbceb68e8b89f36aa5ae8e0cabbe3bd3a Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 20 Jan 2025 19:48:10 +0100
Subject: [PATCH 03/13] collect content feedback using Sentry User Feedbak

---
 src/components/docFeedback/index.tsx | 115 +++++++++++++++++++++++----
 src/components/modal/index.tsx       | 100 +++++++++++++++++++++++
 2 files changed, 199 insertions(+), 16 deletions(-)
 create mode 100644 src/components/modal/index.tsx

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index b8f2f4ccf9e00f..7c7faf46520dd4 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -1,34 +1,117 @@
 'use client';
+import {Fragment, useState} from 'react';
+import * as Sentry from '@sentry/browser';
+
 import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
 
+import {Modal} from '../modal';
+
 type Props = {
   pathname: string;
 };
 
 export function DocFeedback({pathname}: Props) {
   const {emit} = usePlausibleEvent();
+  const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
 
   const handleFeedback = (helpful: boolean) => {
     emit('Doc Feedback', {props: {page: pathname, helpful}});
+
+    if (!helpful) {
+      setShowFeedbackModal(true);
+    }
+  };
+
+  const handleSubmitFeedback = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const comments = formData.get('comments') as string;
+
+    try {
+      Sentry.captureFeedback(
+        {message: comments},
+        {captureContext: {tags: {page: pathname}}}
+      );
+      setFeedbackSubmitted(true);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to submit feedback:', error);
+    }
   };
 
   return (
-    <div className="flex items-center gap-2 py-4 border-t border-[var(--gray-6)]">
-      <span className="text-sm">Was this helpful?</span>
-      <button
-        onClick={() => handleFeedback(true)}
-        className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-        aria-label="Yes, this was helpful"
-      >
-        Yes 👍
-      </button>
-      <button
-        onClick={() => handleFeedback(false)}
-        className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-        aria-label="No, this wasn't helpful"
+    <Fragment>
+      <div className="flex items-center gap-2 py-4 border-t border-[var(--gray-6)]">
+        <span className="text-sm">Was this helpful?</span>
+        <button
+          onClick={() => handleFeedback(true)}
+          className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+          aria-label="Yes, this was helpful"
+        >
+          Yes 👍
+        </button>
+        <button
+          onClick={() => handleFeedback(false)}
+          className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+          aria-label="No, this wasn't helpful"
+        >
+          No 👎
+        </button>
+      </div>
+
+      <Modal
+        isOpen={showFeedbackModal}
+        onClose={() => {
+          setShowFeedbackModal(false);
+          setFeedbackSubmitted(false);
+        }}
+        title="Help us improve"
       >
-        No 👎
-      </button>
-    </div>
+        {feedbackSubmitted ? (
+          <div className="text-center">
+            <h3 className="text-lg font-medium mb-2">Thank you for your feedback!</h3>
+            <p className="text-[var(--gray-11)] p-0 m-0">
+              We appreciate your help in making our documentation better.
+            </p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmitFeedback} className="space-y-4">
+            <p className="text-[var(--gray-11)] p-0 m-0">
+              We'd love to hear more about how we can improve this page. Your feedback
+              helps us make our documentation better for everyone.
+            </p>
+            <div>
+              <label htmlFor="comments" className="block text-sm font-medium mb-4">
+                What could we improve?
+              </label>
+              <textarea
+                id="comments"
+                name="comments"
+                required
+                rows={4}
+                className="w-full px-3 py-2 border border-[var(--gray-6)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)] bg-transparent"
+                placeholder="Please share your suggestions..."
+              />
+            </div>
+            <div className="flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={() => setShowFeedbackModal(false)}
+                className="px-4 py-2 text-sm hover:bg-[var(--gray-3)] rounded-lg"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="px-4 py-2 text-sm bg-[var(--accent-purple)] rounded-lg"
+              >
+                Submit feedback
+              </button>
+            </div>
+          </form>
+        )}
+      </Modal>
+    </Fragment>
   );
 }
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
new file mode 100644
index 00000000000000..d670b9230f0ab4
--- /dev/null
+++ b/src/components/modal/index.tsx
@@ -0,0 +1,100 @@
+'use client';
+import {useEffect, useRef} from 'react';
+
+type Props = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+};
+
+export function Modal({isOpen, onClose, children, title}: Props) {
+  const modalRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      modalRef.current?.showModal();
+      document.body.style.overflow = 'hidden';
+    } else {
+      modalRef.current?.close();
+      document.body.style.overflow = 'unset';
+    }
+  }, [isOpen]);
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === modalRef.current) {
+      handleClose();
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <dialog
+      ref={modalRef}
+      className="backdrop:bg-[var(--gray-12)]/50 backdrop:backdrop-blur-sm p-0 bg-transparent w-full max-w-lg m-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] duration-200 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-[var(--gray-1)] rounded-lg shadow-lg border border-[var(--gray-6)] motion-safe:animate-modal-enter px-4">
+        <div className="flex items-center justify-between py-4 border-b border-[var(--gray-6)] px-4">
+          <h2 className="text-lg font-medium">{title}</h2>
+          <button
+            onClick={handleClose}
+            className="p-2 hover:bg-[var(--gray-3)] rounded-full transition-colors"
+            aria-label="Close modal"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12">
+              <path
+                d="M6 4.586l4.293-4.293 1.414 1.414L7.414 6l4.293 4.293-1.414 1.414L6 7.414l-4.293 4.293-1.414-1.414L4.586 6 .293 1.707 1.707.293 6 4.586z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="p-4">{children}</div>
+      </div>
+
+      <style>{`
+        @keyframes modal-enter {
+          from {
+            opacity: 0;
+            transform: translate3d(0, -1rem, 0);
+          }
+          to {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+          }
+        }
+
+        .animate-modal-enter {
+          animation: modal-enter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        ::backdrop {
+          -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+          background: rgba(var(--gray-12-rgb), 0.5);
+          transition: all 0.2s ease-in-out;
+        }
+
+        dialog[open]::backdrop {
+          opacity: 1;
+        }
+
+        dialog:not([open])::backdrop {
+          opacity: 0;
+        }
+
+        dialog::backdrop {
+          opacity: 0;
+        }
+      `}</style>
+    </dialog>
+  );
+}

From 89c80faee03314abfa3db14a2fdf3bd706396b01 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 20 Jan 2025 19:56:43 +0100
Subject: [PATCH 04/13] improve spacing

---
 src/components/modal/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index d670b9230f0ab4..252f3acecd0094 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -42,8 +42,8 @@ export function Modal({isOpen, onClose, children, title}: Props) {
       onClick={handleBackdropClick}
     >
       <div className="bg-[var(--gray-1)] rounded-lg shadow-lg border border-[var(--gray-6)] motion-safe:animate-modal-enter px-4">
-        <div className="flex items-center justify-between py-4 border-b border-[var(--gray-6)] px-4">
-          <h2 className="text-lg font-medium">{title}</h2>
+        <div className="flex items-center justify-between py-5 border-b border-[var(--gray-6)] px-4">
+          <h2 className="text-lg font-medium p!-0 !m-0">{title}</h2>
           <button
             onClick={handleClose}
             className="p-2 hover:bg-[var(--gray-3)] rounded-full transition-colors"

From 3efa2c7fe38c1d2f34f35f2c100b3586cae91d78 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 20 Jan 2025 20:03:06 +0100
Subject: [PATCH 05/13] dedupe classanme

---
 src/components/modal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index 252f3acecd0094..4c343963986649 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -38,7 +38,7 @@ export function Modal({isOpen, onClose, children, title}: Props) {
   return (
     <dialog
       ref={modalRef}
-      className="backdrop:bg-[var(--gray-12)]/50 backdrop:backdrop-blur-sm p-0 bg-transparent w-full max-w-lg m-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] duration-200 p-4"
+      className="backdrop:bg-[var(--gray-12)]/50 backdrop:backdrop-blur-sm p-0 bg-transparent w-full max-w-lg m-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] duration-200"
       onClick={handleBackdropClick}
     >
       <div className="bg-[var(--gray-1)] rounded-lg shadow-lg border border-[var(--gray-6)] motion-safe:animate-modal-enter px-4">

From dce949602ad5a112b8a232f06ef5bbb611eb767e Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 13:23:14 +0100
Subject: [PATCH 06/13] make ui reflect reception of feedback

---
 src/components/docFeedback/index.tsx | 57 +++++++++++++++++++---------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index 7c7faf46520dd4..0ad33115aee298 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -1,5 +1,6 @@
 'use client';
-import {Fragment, useState} from 'react';
+import {Fragment, useEffect, useState} from 'react';
+import {CheckIcon as Check} from '@radix-ui/react-icons';
 import * as Sentry from '@sentry/browser';
 
 import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
@@ -15,10 +16,21 @@ export function DocFeedback({pathname}: Props) {
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
   const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
 
+  // Initialize feedback state from sessionStorage
+  useEffect(() => {
+    const storedFeedback = sessionStorage.getItem(`feedback_${pathname}`);
+    if (storedFeedback === 'submitted') {
+      setFeedbackSubmitted(true);
+    }
+  }, [pathname]);
+
   const handleFeedback = (helpful: boolean) => {
     emit('Doc Feedback', {props: {page: pathname, helpful}});
 
-    if (!helpful) {
+    if (helpful) {
+      setFeedbackSubmitted(true);
+      sessionStorage.setItem(`feedback_${pathname}`, 'submitted');
+    } else {
       setShowFeedbackModal(true);
     }
   };
@@ -34,6 +46,7 @@ export function DocFeedback({pathname}: Props) {
         {captureContext: {tags: {page: pathname}}}
       );
       setFeedbackSubmitted(true);
+      sessionStorage.setItem(`feedback_${pathname}`, 'submitted');
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error('Failed to submit feedback:', error);
@@ -43,21 +56,31 @@ export function DocFeedback({pathname}: Props) {
   return (
     <Fragment>
       <div className="flex items-center gap-2 py-4 border-t border-[var(--gray-6)]">
-        <span className="text-sm">Was this helpful?</span>
-        <button
-          onClick={() => handleFeedback(true)}
-          className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-          aria-label="Yes, this was helpful"
-        >
-          Yes 👍
-        </button>
-        <button
-          onClick={() => handleFeedback(false)}
-          className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-          aria-label="No, this wasn't helpful"
-        >
-          No 👎
-        </button>
+        {feedbackSubmitted ? (
+          <div className="flex items-center gap-2 text-sm text-[var(--gray-11)]">
+            <Check className="w-4 h-4" /> Thanks for your feedback
+          </div>
+        ) : (
+          <Fragment>
+            <span className="text-sm">Was this helpful?</span>
+            <button
+              onClick={() => {
+                handleFeedback(true);
+              }}
+              className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+              aria-label="Yes, this was helpful"
+            >
+              Yes 👍
+            </button>
+            <button
+              onClick={() => handleFeedback(false)}
+              className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+              aria-label="No, this wasn't helpful"
+            >
+              No 👎
+            </button>
+          </Fragment>
+        )}
       </div>
 
       <Modal

From b43503d460215922a14a4f763cc158011cdee761 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 13:29:54 +0100
Subject: [PATCH 07/13] adjust feedback modal copy

---
 src/components/docFeedback/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index 0ad33115aee298..b5d69379fd4a35 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -89,11 +89,10 @@ export function DocFeedback({pathname}: Props) {
           setShowFeedbackModal(false);
           setFeedbackSubmitted(false);
         }}
-        title="Help us improve"
+        title={feedbackSubmitted ? 'Thanks for your feedback!' : 'Help us improve'}
       >
         {feedbackSubmitted ? (
           <div className="text-center">
-            <h3 className="text-lg font-medium mb-2">Thank you for your feedback!</h3>
             <p className="text-[var(--gray-11)] p-0 m-0">
               We appreciate your help in making our documentation better.
             </p>

From 766ac4ea2a8923a13d52f3427fe55548cb26e522 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 13:31:16 +0100
Subject: [PATCH 08/13] auto close feedback modal after submission

---
 src/components/docFeedback/index.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index b5d69379fd4a35..436cd2eba68c7c 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -24,6 +24,17 @@ export function DocFeedback({pathname}: Props) {
     }
   }, [pathname]);
 
+  // Auto-close modal after feedback submission
+  useEffect(() => {
+    if (feedbackSubmitted && showFeedbackModal) {
+      const timer = setTimeout(() => {
+        setShowFeedbackModal(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [feedbackSubmitted, showFeedbackModal]);
+
   const handleFeedback = (helpful: boolean) => {
     emit('Doc Feedback', {props: {page: pathname, helpful}});
 

From 4c707c32dbc5434833ee35a0da5e09e4893560c7 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 13:32:15 +0100
Subject: [PATCH 09/13] capture feedback submission error

---
 src/components/docFeedback/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index 436cd2eba68c7c..ed895147f76cd8 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -59,8 +59,11 @@ export function DocFeedback({pathname}: Props) {
       setFeedbackSubmitted(true);
       sessionStorage.setItem(`feedback_${pathname}`, 'submitted');
     } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Failed to submit feedback:', error);
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.error('Failed to submit feedback:', error);
+      }
+      Sentry.captureException(error);
     }
   };
 

From f8261af2b00808464729d8f79a15227b9473c1da Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 13:40:17 +0100
Subject: [PATCH 10/13] move content feedback below next/prev navigation

---
 src/components/docPage/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
index 1797f7c7821878..5e7f93a7f1d8a0 100644
--- a/src/components/docPage/index.tsx
+++ b/src/components/docPage/index.tsx
@@ -92,8 +92,6 @@ export function DocPage({
                 <CodeContextProvider>{children}</CodeContextProvider>
               </div>
 
-              <DocFeedback pathname={pathname} />
-
               <div className="grid grid-cols-2 gap-4 not-prose mt-16">
                 <div className="col-span-1">
                   {previousPage && <PaginationNav node={previousPage} title="Previous" />}
@@ -103,6 +101,8 @@ export function DocPage({
                 </div>
               </div>
 
+              <DocFeedback pathname={pathname} />
+
               {hasGithub && <GitHubCTA />}
             </div>
           </div>

From 3a392a3382dc85fcfca846d8a993508ea2da53c9 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 13:47:37 +0100
Subject: [PATCH 11/13] change emojies

---
 src/components/docFeedback/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index ed895147f76cd8..ecbd11ac22bdde 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -84,14 +84,14 @@ export function DocFeedback({pathname}: Props) {
               className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
               aria-label="Yes, this was helpful"
             >
-              Yes 👍
+              Yes 🙂
             </button>
             <button
               onClick={() => handleFeedback(false)}
               className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
               aria-label="No, this wasn't helpful"
             >
-              No 👎
+              No 🙁
             </button>
           </Fragment>
         )}

From 0f70b5e3a53a63f40bf3de339c37031d4df0b310 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 24 Jan 2025 14:23:16 +0100
Subject: [PATCH 12/13] capture feedback comments for both types of feedback in
 an inline form

---
 src/components/docFeedback/index.tsx | 143 +++++++++++----------------
 src/components/modal/index.tsx       | 100 -------------------
 2 files changed, 55 insertions(+), 188 deletions(-)
 delete mode 100644 src/components/modal/index.tsx

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index ecbd11ac22bdde..96df12bd441d49 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -1,20 +1,22 @@
 'use client';
 import {Fragment, useEffect, useState} from 'react';
 import {CheckIcon as Check} from '@radix-ui/react-icons';
+import {Button} from '@radix-ui/themes';
 import * as Sentry from '@sentry/browser';
 
 import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
 
-import {Modal} from '../modal';
-
 type Props = {
   pathname: string;
 };
 
 export function DocFeedback({pathname}: Props) {
   const {emit} = usePlausibleEvent();
-  const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+  const [showFeedback, setShowFeedback] = useState(false);
   const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not_helpful' | null>(
+    null
+  );
 
   // Initialize feedback state from sessionStorage
   useEffect(() => {
@@ -24,26 +26,10 @@ export function DocFeedback({pathname}: Props) {
     }
   }, [pathname]);
 
-  // Auto-close modal after feedback submission
-  useEffect(() => {
-    if (feedbackSubmitted && showFeedbackModal) {
-      const timer = setTimeout(() => {
-        setShowFeedbackModal(false);
-      }, 3000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [feedbackSubmitted, showFeedbackModal]);
-
   const handleFeedback = (helpful: boolean) => {
     emit('Doc Feedback', {props: {page: pathname, helpful}});
-
-    if (helpful) {
-      setFeedbackSubmitted(true);
-      sessionStorage.setItem(`feedback_${pathname}`, 'submitted');
-    } else {
-      setShowFeedbackModal(true);
-    }
+    setFeedbackType(helpful ? 'helpful' : 'not_helpful');
+    setShowFeedback(true);
   };
 
   const handleSubmitFeedback = (e: React.FormEvent<HTMLFormElement>) => {
@@ -53,8 +39,10 @@ export function DocFeedback({pathname}: Props) {
 
     try {
       Sentry.captureFeedback(
-        {message: comments},
-        {captureContext: {tags: {page: pathname}}}
+        {
+          message: comments,
+        },
+        {captureContext: {tags: {page: pathname, type: feedbackType}}}
       );
       setFeedbackSubmitted(true);
       sessionStorage.setItem(`feedback_${pathname}`, 'submitted');
@@ -69,85 +57,64 @@ export function DocFeedback({pathname}: Props) {
 
   return (
     <Fragment>
-      <div className="flex items-center gap-2 py-4 border-t border-[var(--gray-6)]">
+      <div className="space-y-4 py-4 border-[var(--gray-6)]">
         {feedbackSubmitted ? (
           <div className="flex items-center gap-2 text-sm text-[var(--gray-11)]">
             <Check className="w-4 h-4" /> Thanks for your feedback
           </div>
         ) : (
           <Fragment>
-            <span className="text-sm">Was this helpful?</span>
-            <button
-              onClick={() => {
-                handleFeedback(true);
-              }}
-              className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-              aria-label="Yes, this was helpful"
-            >
-              Yes 🙂
-            </button>
-            <button
-              onClick={() => handleFeedback(false)}
-              className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-              aria-label="No, this wasn't helpful"
-            >
-              No 🙁
-            </button>
-          </Fragment>
-        )}
-      </div>
-
-      <Modal
-        isOpen={showFeedbackModal}
-        onClose={() => {
-          setShowFeedbackModal(false);
-          setFeedbackSubmitted(false);
-        }}
-        title={feedbackSubmitted ? 'Thanks for your feedback!' : 'Help us improve'}
-      >
-        {feedbackSubmitted ? (
-          <div className="text-center">
-            <p className="text-[var(--gray-11)] p-0 m-0">
-              We appreciate your help in making our documentation better.
-            </p>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmitFeedback} className="space-y-4">
-            <p className="text-[var(--gray-11)] p-0 m-0">
-              We'd love to hear more about how we can improve this page. Your feedback
-              helps us make our documentation better for everyone.
-            </p>
-            <div>
-              <label htmlFor="comments" className="block text-sm font-medium mb-4">
-                What could we improve?
-              </label>
-              <textarea
-                id="comments"
-                name="comments"
-                required
-                rows={4}
-                className="w-full px-3 py-2 border border-[var(--gray-6)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)] bg-transparent"
-                placeholder="Please share your suggestions..."
-              />
-            </div>
-            <div className="flex justify-end gap-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm">Was this helpful?</span>
               <button
-                type="button"
-                onClick={() => setShowFeedbackModal(false)}
-                className="px-4 py-2 text-sm hover:bg-[var(--gray-3)] rounded-lg"
+                onClick={() => handleFeedback(true)}
+                className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+                aria-label="Yes, this was helpful"
               >
-                Cancel
+                Yes 🙂
               </button>
               <button
-                type="submit"
-                className="px-4 py-2 text-sm bg-[var(--accent-purple)] rounded-lg"
+                onClick={() => handleFeedback(false)}
+                className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
+                aria-label="No, this wasn't helpful"
               >
-                Submit feedback
+                No 🙁
               </button>
             </div>
-          </form>
+
+            <div
+              className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                showFeedback ? 'max-h-[300px] opacity-100' : 'max-h-0 opacity-0'
+              }`}
+            >
+              <form onSubmit={handleSubmitFeedback} className="space-y-4">
+                <div>
+                  <label htmlFor="comments" className="block text-sm font-medium mb-4">
+                    {feedbackType === 'helpful'
+                      ? 'What did you like about this page?'
+                      : 'How can we improve this page?'}
+                  </label>
+                  <textarea
+                    id="comments"
+                    name="comments"
+                    required
+                    rows={2}
+                    className="w-[calc(100%-4px)] ml-[2px] px-3 py-2 border border-[var(--gray-6)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)] bg-transparent text-sm"
+                    placeholder="Please share your thoughts..."
+                  />
+                </div>
+                <Button
+                  type="submit"
+                  className="px-4 py-2 text-sm rounded-lg bg-[var(--accent-purple)]"
+                  size={'3'}
+                >
+                  Submit feedback
+                </Button>
+              </form>
+            </div>
+          </Fragment>
         )}
-      </Modal>
+      </div>
     </Fragment>
   );
 }
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
deleted file mode 100644
index 4c343963986649..00000000000000
--- a/src/components/modal/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client';
-import {useEffect, useRef} from 'react';
-
-type Props = {
-  children: React.ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-};
-
-export function Modal({isOpen, onClose, children, title}: Props) {
-  const modalRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      modalRef.current?.showModal();
-      document.body.style.overflow = 'hidden';
-    } else {
-      modalRef.current?.close();
-      document.body.style.overflow = 'unset';
-    }
-  }, [isOpen]);
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === modalRef.current) {
-      handleClose();
-    }
-  };
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <dialog
-      ref={modalRef}
-      className="backdrop:bg-[var(--gray-12)]/50 backdrop:backdrop-blur-sm p-0 bg-transparent w-full max-w-lg m-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] duration-200"
-      onClick={handleBackdropClick}
-    >
-      <div className="bg-[var(--gray-1)] rounded-lg shadow-lg border border-[var(--gray-6)] motion-safe:animate-modal-enter px-4">
-        <div className="flex items-center justify-between py-5 border-b border-[var(--gray-6)] px-4">
-          <h2 className="text-lg font-medium p!-0 !m-0">{title}</h2>
-          <button
-            onClick={handleClose}
-            className="p-2 hover:bg-[var(--gray-3)] rounded-full transition-colors"
-            aria-label="Close modal"
-          >
-            <svg width="12" height="12" viewBox="0 0 12 12">
-              <path
-                d="M6 4.586l4.293-4.293 1.414 1.414L7.414 6l4.293 4.293-1.414 1.414L6 7.414l-4.293 4.293-1.414-1.414L4.586 6 .293 1.707 1.707.293 6 4.586z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-        <div className="p-4">{children}</div>
-      </div>
-
-      <style>{`
-        @keyframes modal-enter {
-          from {
-            opacity: 0;
-            transform: translate3d(0, -1rem, 0);
-          }
-          to {
-            opacity: 1;
-            transform: translate3d(0, 0, 0);
-          }
-        }
-
-        .animate-modal-enter {
-          animation: modal-enter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        ::backdrop {
-          -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
-          background: rgba(var(--gray-12-rgb), 0.5);
-          transition: all 0.2s ease-in-out;
-        }
-
-        dialog[open]::backdrop {
-          opacity: 1;
-        }
-
-        dialog:not([open])::backdrop {
-          opacity: 0;
-        }
-
-        dialog::backdrop {
-          opacity: 0;
-        }
-      `}</style>
-    </dialog>
-  );
-}

From 4e96a487fe467491d394f469aa3566a3e99d2b0f Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Mon, 27 Jan 2025 12:37:43 +0100
Subject: [PATCH 13/13] improve styles

---
 src/components/docFeedback/index.tsx | 34 +++++++++++++++-------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx
index 96df12bd441d49..b0dd8704f29af6 100644
--- a/src/components/docFeedback/index.tsx
+++ b/src/components/docFeedback/index.tsx
@@ -64,22 +64,24 @@ export function DocFeedback({pathname}: Props) {
           </div>
         ) : (
           <Fragment>
-            <div className="flex items-center gap-2">
-              <span className="text-sm">Was this helpful?</span>
-              <button
-                onClick={() => handleFeedback(true)}
-                className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-                aria-label="Yes, this was helpful"
-              >
-                Yes 🙂
-              </button>
-              <button
-                onClick={() => handleFeedback(false)}
-                className="py-2 px-4 gap-4 hover:bg-[var(--gray-3)] rounded-full flex items-center justify-center"
-                aria-label="No, this wasn't helpful"
-              >
-                No 🙁
-              </button>
+            <div className="flex items-center gap-4 text-sm mt-8">
+              <span className="font-medium">Was this helpful?</span>
+              <div className="flex">
+                <button
+                  onClick={() => handleFeedback(true)}
+                  className="py-1 px-2 gap-4 hover:bg-[var(--gray-3)] rounded flex items-center justify-center"
+                  aria-label="Yes, this was helpful"
+                >
+                  Yes 👍
+                </button>
+                <button
+                  onClick={() => handleFeedback(false)}
+                  className="py-1 px-2 gap-4 hover:bg-[var(--gray-3)] rounded flex items-center justify-center"
+                  aria-label="No, this wasn't helpful"
+                >
+                  No 👎
+                </button>
+              </div>
             </div>
 
             <div