Open share menu when navigating from create new shared project button (#3898)

This PR ensures that the share menu is open when navigating from the
create new shared project button.

This could be achieved by calling ```editor.addOpenMenu('share-menu')```
after ```navigate('/new')``` , but that opens the menu on the local
editor first so you get a flash of that before the multiplayer editor
loads.

Instead I've used the state prop on the Navigate component/function to
pass a property called shouldOpenShareMenu.

If the user presses the back button to return to the local editor
instance then the open state of the share menu is preserved, which is
actually something we don't want in this case. Not sure how to deal with
that without adding a ton more complexity, is it worth it?

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Click create new shared project from the file menu
2. Share menu should open after navigating to the new room

### Release Notes

- Open share menu when navigating from the create new shared project
button.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

apps/dotcom/src/components/ShareMenu.tsx

@@ -21,8 +21,6 @@ import { createQRCodeImageDataString } from '../utils/qrcode'
 import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
 import { ShareButton } from './ShareButton'
 
-const COPY_LINK_TIMEOUT = 1000
-
 const SHARE_CURRENT_STATE = {
 	OFFLINE: 'offline',
 	SHARED_READ_WRITE: 'shared-read-write',
@@ -126,9 +124,6 @@ export const ShareMenu = React.memo(function ShareMenu() {
 	const currentQrCodeUrl = isReadOnlyLink
 		? shareState.readonlyQrCodeDataUrl
 		: shareState.qrCodeDataUrl
-	const [didCopy, setDidCopy] = useState(false)
-	const [didCopyReadonlyLink, setDidCopyReadonlyLink] = useState(false)
-	const [didCopySnapshotLink, setDidCopySnapshotLink] = useState(false)
 	const toasts = useToasts()
 
 	useEffect(() => {
@@ -207,8 +202,6 @@ export const ShareMenu = React.memo(function ShareMenu() {
 									)}
 									onClick={() => {
 										if (!currentShareLinkUrl) return
-										setDidCopy(true)
-										setTimeout(() => setDidCopy(false), COPY_LINK_TIMEOUT)
 										navigator.clipboard.writeText(currentShareLinkUrl)
 										toasts.addToast({
 											title: msg('share-menu.copied'),
@@ -221,13 +214,11 @@ export const ShareMenu = React.memo(function ShareMenu() {
 									{shareState.state === SHARE_CURRENT_STATE.SHARED_READ_WRITE && (
 										<TldrawUiMenuItem
 											id="copy-to-clipboard"
-											readonlyOk
+											readonlyOk={false}
-											icon={didCopy ? 'clipboard-copied' : 'clipboard-copy'}
 											label="share-menu.copy-link"
+											icon="clipboard-copy"
 											onSelect={() => {
 												if (!shareState.url) return
-												setDidCopy(true)
-												setTimeout(() => setDidCopy(false), COPY_LINK_TIMEOUT)
 												navigator.clipboard.writeText(shareState.url)
 												toasts.addToast({
 													title: msg('share-menu.copied'),
@@ -239,12 +230,10 @@ export const ShareMenu = React.memo(function ShareMenu() {
 									<TldrawUiMenuItem
 										id="copy-readonly-to-clipboard"
 										readonlyOk
-										icon={didCopyReadonlyLink ? 'clipboard-copied' : 'clipboard-copy'}
 										label="share-menu.copy-readonly-link"
+										icon="clipboard-copy"
 										onSelect={() => {
 											if (!shareState.readonlyUrl) return
-											setDidCopyReadonlyLink(true)
-											setTimeout(() => setDidCopyReadonlyLink(false), COPY_LINK_TIMEOUT)
 											navigator.clipboard.writeText(shareState.readonlyUrl)
 											toasts.addToast({
 												title: msg('share-menu.copied'),
@@ -260,13 +249,11 @@ export const ShareMenu = React.memo(function ShareMenu() {
 								<TldrawUiMenuGroup id="snapshot">
 									<TldrawUiMenuItem
 										{...shareSnapshot}
-										icon={didCopySnapshotLink ? 'clipboard-copied' : 'clipboard-copy'}
+										icon="clipboard-copy"
 										onSelect={async () => {
 											setIsUploadingSnapshot(true)
 											await shareSnapshot.onSelect('share-menu')
 											setIsUploadingSnapshot(false)
-											setDidCopySnapshotLink(true)
-											setTimeout(() => setDidCopySnapshotLink(false), COPY_LINK_TIMEOUT)
 										}}
 										spinner={isUploadingSnapshot}
 									/>
@@ -306,14 +293,12 @@ export const ShareMenu = React.memo(function ShareMenu() {
 									<TldrawUiMenuItem
 										id="copy-snapshot-link"
 										readonlyOk
-										icon={didCopySnapshotLink ? 'clipboard-copied' : 'clipboard-copy'}
+										icon="clipboard-copy"
 										label={unwrapLabel(shareSnapshot.label)}
 										onSelect={async () => {
 											setIsUploadingSnapshot(true)
 											await shareSnapshot.onSelect('share-menu')
 											setIsUploadingSnapshot(false)
-											setDidCopySnapshotLink(true)
-											setTimeout(() => setDidCopySnapshotLink(false), COPY_LINK_TIMEOUT)
 										}}
 										spinner={isUploadingSnapshot}
 									/>

apps/dotcom/src/hooks/useShareMenuOpen.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
 import { atom, useMenuIsOpen, useValue } from 'tldraw'
 
 // When people click the 'create shared project' in the share menu we want to make sure that
@@ -12,17 +13,22 @@ export function useShareMenuIsOpen() {
 	const isOpen = useValue('is menu open', () => persistentShareMenuOpenAtom.get(), [])
 	const [isShareMenuOpen, onOpenChange] = useMenuIsOpen('share menu')
 	// on initial render the persistent option takes effect
-
+	const location = useLocation()
 	const isFirst = useRef(true)
 
 	useEffect(() => {
 		if (isFirst.current) {
 			isFirst.current = false
+			if (location.state?.shouldOpenShareMenu) {
+				// if we are navigating from the new shared project button then
+				// we always open the share menu
+				persistentShareMenuOpenAtom.set(true)
+			}
 			onOpenChange(persistentShareMenuOpenAtom.get())
 		} else {
 			persistentShareMenuOpenAtom.set(isShareMenuOpen)
 		}
-	}, [isShareMenuOpen, onOpenChange])
+	}, [isShareMenuOpen, location.state, onOpenChange])
 
 	return [isOpen, onOpenChange] as const
 }

apps/dotcom/src/pages/new.tsx

@@ -35,5 +35,14 @@ export function Component() {
 				}}
 			/>
 		)
-	return <Navigate replace to={`/${ROOM_PREFIX}/${data.slug}`} />
+
+	return (
+		<Navigate
+			replace
+			state={{
+				shouldOpenShareMenu: true,
+			}}
+			to={`/${ROOM_PREFIX}/${data.slug}`}
+		/>
+	)
 }

assets/translations/main.json

@@ -256,18 +256,18 @@
 	"share-menu.fork-note": "Create a new shared project based on this snapshot.",
 	"share-menu.share-project": "Share this project",
 	"share-menu.default-project-name": "Shared Project",
-	"share-menu.copy-link": "Copy share link",
+	"share-menu.copy-link": "Copy editor link",
 	"share-menu.readonly-link": "Read-only",
 	"share-menu.create-snapshot-link": "Copy snapshot link",
 	"share-menu.snapshot-link-note": "Capture and share this project as a read-only snapshot link.",
-	"share-menu.copy-readonly-link": "Copy read-only link",
+	"share-menu.copy-readonly-link": "Copy viewer link",
 	"share-menu.offline-note": "Create a new shared project based on your current project.",
 	"share-menu.copy-link-note": "Anyone with the link will be able to view and edit this project.",
 	"share-menu.copy-readonly-link-note": "Anyone with the link will be able to access this project.",
 	"share-menu.project-too-large": "Sorry, this project can't be shared because it's too large. We're working on it!",
 	"share-menu.upload-failed": "Sorry, we couldn't upload your project at the moment. Please try again or let us know if the problem persists.",
 	"share-menu.creating-project": "Creating the new project…",
-	"share-menu.copied": "Copied link!",
+	"share-menu.copied": "Copied link",
 	"status.offline": "Offline",
 	"status.online": "Online",
 	"people-menu.title": "People",

packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -260,11 +260,11 @@ export const DEFAULT_TRANSLATION = {
 	'share-menu.fork-note': 'Create a new shared project based on this snapshot.',
 	'share-menu.share-project': 'Share this project',
 	'share-menu.default-project-name': 'Shared Project',
-	'share-menu.copy-link': 'Copy share link',
+	'share-menu.copy-link': 'Copy editor link',
 	'share-menu.readonly-link': 'Read-only',
 	'share-menu.create-snapshot-link': 'Copy snapshot link',
 	'share-menu.snapshot-link-note': 'Capture and share this project as a read-only snapshot link.',
-	'share-menu.copy-readonly-link': 'Copy read-only link',
+	'share-menu.copy-readonly-link': 'Copy viewer link',
 	'share-menu.offline-note': 'Create a new shared project based on your current project.',
 	'share-menu.copy-link-note': 'Anyone with the link will be able to view and edit this project.',
 	'share-menu.copy-readonly-link-note': 'Anyone with the link will be able to access this project.',
@@ -273,7 +273,7 @@ export const DEFAULT_TRANSLATION = {
 	'share-menu.upload-failed':
 		"Sorry, we couldn't upload your project at the moment. Please try again or let us know if the problem persists.",
 	'share-menu.creating-project': 'Creating the new project…',
-	'share-menu.copied': 'Copied link!',
+	'share-menu.copied': 'Copied link',
 	'status.offline': 'Offline',
 	'status.online': 'Online',
 	'people-menu.title': 'People',