From 984bc156f18c3444eb63f592a21f501e457b54ad Mon Sep 17 00:00:00 2001 From: Enno Gelhaus Date: Fri, 19 Sep 2025 19:17:44 +0200 Subject: [PATCH 1/2] Update feedback button SVG icon size and color --- apps/frontend/src/components/new-layout/layout.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/frontend/src/components/new-layout/layout.component.tsx b/apps/frontend/src/components/new-layout/layout.component.tsx index 092e1c41..26fefec2 100644 --- a/apps/frontend/src/components/new-layout/layout.component.tsx +++ b/apps/frontend/src/components/new-layout/layout.component.tsx @@ -84,8 +84,8 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => { aria-label="Feedback" className="hover:text-newTextColor" > - - + + ); From cc3a8f7a12e98cf129dd68e415696d4dfbb4c1f2 Mon Sep 17 00:00:00 2001 From: Nevo David Date: Sat, 20 Sep 2025 00:25:38 +0700 Subject: [PATCH 2/2] Feat: fix sentry --- .../new-layout/layout.component.tsx | 45 ++-------------- .../new-layout/sentry.feedback.component.tsx | 53 +++++++++++++++++++ 2 files changed, 56 insertions(+), 42 deletions(-) create mode 100644 apps/frontend/src/components/new-layout/sentry.feedback.component.tsx diff --git a/apps/frontend/src/components/new-layout/layout.component.tsx b/apps/frontend/src/components/new-layout/layout.component.tsx index 26fefec2..5f0fccd4 100644 --- a/apps/frontend/src/components/new-layout/layout.component.tsx +++ b/apps/frontend/src/components/new-layout/layout.component.tsx @@ -1,7 +1,6 @@ 'use client'; -import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; -import * as Sentry from '@sentry/nextjs'; +import React, { ReactNode, useCallback } from 'react'; import { Logo } from '@gitroom/frontend/components/new-layout/logo'; import { Plus_Jakarta_Sans } from 'next/font/google'; const ModeComponent = dynamic( @@ -25,7 +24,6 @@ import { MediaSettingsLayout } from '@gitroom/frontend/components/launches/helpe import { Toaster } from '@gitroom/react/toaster/toaster'; import { ShowPostSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector'; import { NewSubscription } from '@gitroom/frontend/components/layout/new.subscription'; -import { Onboarding } from '@gitroom/frontend/components/onboarding/onboarding'; import { Support } from '@gitroom/frontend/components/layout/support'; import { ContinueProvider } from '@gitroom/frontend/components/layout/continue.provider'; import { ContextWrapper } from '@gitroom/frontend/components/layout/user.context'; @@ -40,6 +38,7 @@ import NotificationComponent from '@gitroom/frontend/components/notifications/no import { BillingAfter } from '@gitroom/frontend/components/new-layout/billing.after'; import { OrganizationSelector } from '@gitroom/frontend/components/layout/organization.selector'; import { PreConditionComponent } from '@gitroom/frontend/components/layout/pre-condition.component'; + import { AttachToFeedbackIcon } from '@gitroom/frontend/components/new-layout/sentry.feedback.component'; const jakartaSans = Plus_Jakarta_Sans({ weight: ['600', '500'], @@ -53,43 +52,6 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => { const { backendUrl, billingEnabled, isGeneral } = useVariables(); // Feedback icon component attaches Sentry feedback to a top-bar icon when DSN is present - function AttachToFeedbackIcon({ sentryDsn }: { sentryDsn?: string }) { - const [feedback, setFeedback] = useState(); - const buttonRef = useRef(null); - - useEffect(() => { - if (!sentryDsn) return; - try { - const fb = (Sentry as any).getFeedback?.(); - setFeedback(fb); - } catch (e) { - setFeedback(undefined); - } - }, [sentryDsn]); - - useEffect(() => { - if (feedback && buttonRef.current) { - const unsubscribe = feedback.attachTo(buttonRef.current); - return unsubscribe; - } - return () => {}; - }, [feedback]); - - if (!sentryDsn) return null; - - return ( - - ); - } const searchParams = useSearchParams(); const load = useCallback(async (path: string) => { return await (await fetch(path)).json(); @@ -158,8 +120,7 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
- {/* Feedback icon (icon-only) - only show when Sentry DSN is present */} - +
diff --git a/apps/frontend/src/components/new-layout/sentry.feedback.component.tsx b/apps/frontend/src/components/new-layout/sentry.feedback.component.tsx new file mode 100644 index 00000000..35b8f1f9 --- /dev/null +++ b/apps/frontend/src/components/new-layout/sentry.feedback.component.tsx @@ -0,0 +1,53 @@ +'use client'; + +import { FC, useEffect, useRef, useState } from 'react'; +import * as Sentry from '@sentry/nextjs'; +import { useVariables } from '@gitroom/react/helpers/variable.context'; + +export const AttachToFeedbackIcon: FC = () => { + const { sentryDsn } = useVariables(); + const [feedback, setFeedback] = useState(); + const buttonRef = useRef(null); + + useEffect(() => { + if (!sentryDsn) return; + try { + const fb = (Sentry as any).getFeedback?.(); + setFeedback(fb); + } catch (e) { + setFeedback(undefined); + } + }, [sentryDsn]); + + useEffect(() => { + if (feedback && buttonRef.current) { + const unsubscribe = feedback.attachTo(buttonRef.current); + return unsubscribe; + } + return () => {}; + }, [feedback]); + + if (!sentryDsn) return null; + + return ( + + ); +};