feat(dotcom): add checkbox to include current file link in feedback (tldraw#8807)

In order to give people control over whether their current file URL is
shared when they submit feedback, this PR adds a one-line "Include link
to current file" checkbox to the signed-in feedback dialog. The checkbox
is checked by default, preserving today's behaviour, and unchecking it
sends an empty URL. Closes tldraw#8806.

The submit-feedback worker now omits the `URL: ...` line in the Discord
embed and Plain thread when the URL is empty, so feedback messages stay
tidy when the user opts out.

### Change type

- [x] `feature`

### Test plan

1. Run `yarn dev-app`, sign in, and open Help menu → Send feedback.
2. Verify the dialog shows a checkbox labeled "Include link to current
file" between the textarea and the footer, checked by default.
3. Submit feedback with the checkbox checked. Confirm the Discord/Plain
message includes the page URL.
4. Submit feedback with the checkbox unchecked. Confirm the
Discord/Plain message does not include a `URL:` line.

### Release notes

- Add an option to include or omit the current file link when submitting
feedback from tldraw.com.

### Code changes

| Section | LOC change |
| --- | --- |
| Apps | +41 / -7 |

Author: steveruizok

apps/dotcom/client/public/tla/locales-compiled/en.json

@@ -153,6 +153,12 @@
       "value": "My files"
     }
   ],
+  "2e2b3c700b": [
+    {
+      "type": 0,
+      "value": "Include link to current file"
+    }
+  ],
   "31246941ad": [
     {
       "type": 0,

apps/dotcom/client/public/tla/locales/en.json

@@ -74,6 +74,9 @@
   "2c3ef76333": {
     "translation": "My files"
   },
+  "2e2b3c700b": {
+    "translation": "Include link to current file"
+  },
   "31246941ad": {
     "translation": "You need to sign in to view this file."
   },

apps/dotcom/client/src/tla/components/dialogs/SubmitFeedbackDialog.tsx

@@ -1,9 +1,10 @@
 import { useAuth } from '@clerk/clerk-react'
 import { addBreadcrumb, withScope } from '@sentry/react'
 import { SubmitFeedbackRequestBody } from '@tldraw/dotcom-shared'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import {
 	TldrawUiButton,
+	TldrawUiButtonCheck,
 	TldrawUiButtonLabel,
 	TldrawUiDialogBody,
 	TldrawUiDialogCloseButton,
@@ -74,6 +75,7 @@ function SignedOutSubmitFeedbackDialog() {
 
 function SignedInSubmitFeedbackDialog({ onClose }: { onClose(): void }) {
 	const rInput = useRef<HTMLTextAreaElement>(null)
+	const [includeFileLink, setIncludeFileLink] = useState(true)
 	const toasts = useToasts()
 	const intl = useIntl()
 	const onSubmit = useCallback(async () => {
@@ -83,7 +85,9 @@ function SignedInSubmitFeedbackDialog({ onClose }: { onClose(): void }) {
 			body: JSON.stringify({
 				allowContact: true,
 				description: rInput.current.value.trim(),
-				url: window.location.href.replace('https', 'https-please-be-mindful'),
+				url: includeFileLink
+					? window.location.href.replace('https', 'https-please-be-mindful')
+					: '',
 			} satisfies SubmitFeedbackRequestBody),
 		})
 			.then((r) => {
@@ -105,7 +109,7 @@ function SignedInSubmitFeedbackDialog({ onClose }: { onClose(): void }) {
 			title: intl.formatMessage(messages.submitted),
 			description: intl.formatMessage(messages.thanks),
 		})
-	}, [intl, onClose, toasts])
+	}, [includeFileLink, intl, onClose, toasts])
 
 	// Focus the input when the dialog opens, select all text
 	useEffect(() => {
@@ -163,6 +167,18 @@ function SignedInSubmitFeedbackDialog({ onClose }: { onClose(): void }) {
 				/>
 			</TldrawUiDialogBody>
 			<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
+				<div className="tlui-dialog__footer__file-link-checkbox">
+					<TldrawUiButton
+						type="normal"
+						onClick={() => setIncludeFileLink((v) => !v)}
+						className={styles.feedbackDialogCheckbox}
+					>
+						<TldrawUiButtonCheck checked={includeFileLink} />
+						<TldrawUiButtonLabel>
+							<F defaultMessage="Include link to current file" />
+						</TldrawUiButtonLabel>
+					</TldrawUiButton>
+				</div>
 				<TldrawUiButton type="normal" onClick={onClose}>
 					<TldrawUiButtonLabel>
 						<F defaultMessage="Cancel" />

apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css

@@ -35,6 +35,10 @@
 	color: var(--tl-color-text-3);
 }
 
+.feedbackDialogCheckbox {
+	margin-right: auto;
+}
+
 /* --------------------- Cookie --------------------- */
 
 .cookieConsent {

apps/dotcom/client/src/tla/styles/tla.css

@@ -338,3 +338,7 @@
 	.tla-primary-button:not(.tlui-button):focus-visible {
 	outline-offset: 0;
 }
+
+.tlui-dialog__footer__file-link-checkbox {
+	flex: 2;
+}

apps/dotcom/sync-worker/src/routes/submitFeedback.ts

@@ -50,9 +50,13 @@ export async function submitFeedback(req: IRequest, env: Environment) {
 		}
 	}
 
-	const embedDescription = plainThreadUrl
-		? `${description}\n\nURL: ${url}\nPlain: ${plainThreadUrl}`
-		: `${description}\n\nURL: ${url}`
+	const extraLines = [
+		url ? `URL: ${url}` : null,
+		plainThreadUrl ? `Plain: ${plainThreadUrl}` : null,
+	].filter(Boolean)
+	const embedDescription = extraLines.length
+		? `${description}\n\n${extraLines.join('\n')}`
+		: description
 
 	const payload = {
 		username: `Feedback (${env.WORKER_NAME ?? 'localhost'})`,
@@ -195,7 +199,9 @@ async function createPlainThread(
 				customerIdentifier: { customerId },
 				title: 'tldraw.com feedback',
 				description: description.length > 200 ? description.slice(0, 200) + '…' : description,
-				components: [{ componentText: { text: `${description}\n\nURL: ${url}` } }],
+				components: [
+					{ componentText: { text: url ? `${description}\n\nURL: ${url}` : description } },
+				],
 				...(env.PLAIN_LABEL_TYPE_ID && { labelTypeIds: [env.PLAIN_LABEL_TYPE_ID] }),
 			},
 		},