Fix document name editable in readonly mode (#3911)

This PR prevents the document name input becoming editable in Readonly
mode, and also removes the rename menu item from the dropdown.

### 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. Open a shared project in read only mode
2. You shouldn't be able to edit the document name by clicking the
input, and the option to rename should not be visible in the dropdown.

### Release Notes

- Remove ability to rename document while in readonly mode

apps/dotcom/src/components/DocumentName/DocumentName.tsx

@@ -68,10 +68,11 @@ export const DocumentNameInner = track(function DocumentNameInner() {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const toasts = useToasts()
+	const isReadonly = editor.getInstanceState().isReadonly
 
 	return (
 		<div className="tlui-document-name__inner">
-			<DocumentNameEditor state={state} setState={setState} />
+			<DocumentNameEditor isReadonly={isReadonly} state={state} setState={setState} />
 			<TldrawUiDropdownMenuRoot id="document-name">
 				<TldrawUiDropdownMenuTrigger>
 					<TldrawUiButton
@@ -83,15 +84,17 @@ export const DocumentNameInner = track(function DocumentNameInner() {
 				</TldrawUiDropdownMenuTrigger>
 				<TldrawUiDropdownMenuContent align="end" alignOffset={4} sideOffset={6}>
 					<TldrawUiDropdownMenuGroup>
-						<TldrawUiDropdownMenuItem>
-							<TldrawUiButton
-								type="menu"
-								onClick={() => setState((prev) => ({ ...prev, isEditing: true }))}
-							>
-								{' '}
-								<span className={'tlui-button__label' as any}>{msg('action.rename')}</span>
-							</TldrawUiButton>
-						</TldrawUiDropdownMenuItem>
+						{!isReadonly && (
+							<TldrawUiDropdownMenuItem>
+								<TldrawUiButton
+									type="menu"
+									onClick={() => setState((prev) => ({ ...prev, isEditing: true }))}
+								>
+									{' '}
+									<span className={'tlui-button__label' as any}>{msg('action.rename')}</span>
+								</TldrawUiButton>
+							</TldrawUiDropdownMenuItem>
+						)}
 						<TldrawUiDropdownMenuItem>
 							<TldrawUiButton
 								type="menu"
@@ -214,9 +217,11 @@ function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
 const DocumentNameEditor = track(function DocumentNameEditor({
 	state,
 	setState,
+	isReadonly,
 }: {
 	state: NameState
 	setState: (update: SetStateAction<NameState>) => void
+	isReadonly: boolean
 }) {
 	const inputRef = useRef<HTMLInputElement>(null)
 	const editor = useEditor()
@@ -225,10 +230,13 @@ const DocumentNameEditor = track(function DocumentNameEditor({
 	const defaultDocumentName = msg('document.default-name')
 
 	useEffect(() => {
+		if (isReadonly) {
+			setState((prev) => ({ ...prev, isEditing: false }))
+		}
 		if (state.isEditing && inputRef.current) {
 			inputRef.current.select()
 		}
-	}, [state.isEditing])
+	}, [isReadonly, setState, state.isEditing])
 
 	useEffect(() => {
 		const save = () => {
@@ -315,6 +323,7 @@ const DocumentNameEditor = track(function DocumentNameEditor({
 				<div
 					className="tlui-document-name__text"
 					onDoubleClick={() => {
+						if (isReadonly) return
 						editor.setEditingShape(null)
 						setState((prev) => ({ ...prev, isEditing: true }))
 					}}