Add feedback component.

Signed-off-by: bgravenorst <[email protected]>

src/components/PageFeedback/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { trackFeedbackForGA } from '../../utils/analytics'
+import { trackFeedbackForGA } from '../../lib/feedbackAnalytics'
 import styles from './styles.module.scss'
 
 export default function PageFeedback() {
@@ -27,12 +27,12 @@ export default function PageFeedback() {
   }
 
   const handleReasonSubmit = (r: string) => {
-    const finalReason = r === 'other' ? otherReason.trim() : r
-    console.log(`💭 User selected reason: "${finalReason}"`)
+    console.log(`💭 User selected reason: "${r}"`)
 
     const data = {
       positive: false,
-      reason: finalReason,
+      reason: r,
+      ...(r === 'other' && otherReason.trim() && { response: otherReason.trim() }),
       locale: navigator.language,
     }
     trackFeedbackForGA(data)
@@ -121,7 +121,7 @@ export default function PageFeedback() {
             Outdated content
           </button>
           <button className={styles.reasonButton} onClick={() => setReason('other')}>
-            Other
+            Other (include response)
           </button>
         </div>
       </div>

src/components/PageFeedback/styles.module.scss

@@ -134,6 +134,10 @@
   gap: 1rem;
   max-width: 500px;
   margin: 1.5rem 0;
+
+  @media (min-width: 768px) {
+    margin-left: auto;
+  }
 }
 
 .reasonButton {
@@ -187,6 +191,10 @@
   resize: vertical;
   margin-bottom: 0.75rem;
 
+  @media (min-width: 768px) {
+    margin-left: auto;
+  }
+
   @media (prefers-color-scheme: dark) {
     color: var(--ifm-color-content);
   }
@@ -212,6 +220,10 @@
   width: 100%;
   max-width: 500px;
   margin-top: 0.5rem;
+
+  @media (min-width: 768px) {
+    margin-left: auto;
+  }
 }
 
 .charCount {

src/utils/analytics.ts → src/lib/feedbackAnalytics.ts

@@ -1,28 +1,81 @@
 interface FeedbackData {
   positive: boolean
   reason?: string
+  response?: string
   locale?: string
   timestamp?: number
+  device_type?: string
+}
+
+/**
+ * Detect device type based on user agent and screen size
+ */
+const getDeviceType = (): string => {
+  if (typeof window === 'undefined') return 'unknown'
+
+  const userAgent = navigator.userAgent.toLowerCase()
+  const screenWidth = window.screen.width
+
+  // Mobile devices
+  if (/android|webos|iphone|ipod|blackberry|iemobile|opera mini/i.test(userAgent)) {
+    return 'mobile'
+  }
+
+  // Tablet devices
+  if (
+    /ipad|android(?!.*mobile)|tablet/i.test(userAgent) ||
+    (screenWidth >= 768 && screenWidth <= 1024)
+  ) {
+    return 'tablet'
+  }
+
+  // Desktop devices
+  if (screenWidth > 1024) {
+    return 'desktop'
+  }
+
+  // Fallback based on screen size
+  if (screenWidth <= 768) {
+    return 'mobile'
+  }
+
+  return 'desktop'
 }
 
 /**
  * Track feedback events for Google Analytics 4
  * Sends feedback data to GA4 using gtag() or dataLayer fallback
  */
-export const trackFeedbackForGA = ({ positive, reason, locale, timestamp }: FeedbackData): void => {
+export const trackFeedbackForGA = ({
+  positive,
+  reason,
+  response,
+  locale,
+  timestamp,
+  device_type,
+}: FeedbackData): void => {
   if (typeof window === 'undefined') {
     console.warn('Window object not available - feedback tracking skipped')
     return
   }
 
+  const detectedDeviceType = device_type || getDeviceType()
+
   const eventData = {
     feedback_type: positive ? 'positive' : 'negative',
     ...(reason && { reason }),
+    ...(response && { response }),
     locale: locale || navigator.language,
     page_path: window.location.pathname,
     timestamp: timestamp || Date.now(),
+    device_type: detectedDeviceType,
   }
 
+  // Console log for demo purposes
+  console.log(
+    `📱 Device detected as: ${detectedDeviceType} (screen: ${window.screen.width}x${window.screen.height})`
+  )
+
   // Try gtag first (preferred method)
   if (typeof window.gtag === 'function') {
     try {