add link to new beta (#1065)

apps/www/components/BetaNotification.tsx

@@ -0,0 +1,78 @@
+import React, { useLayoutEffect } from 'react'
+
+const STORAGE_KEY = 'tldraw_dismiss_beta_notification_2'
+
+export function BetaNotification() {
+  const [isDismissed, setIsDismissed] = React.useState(true)
+
+  useLayoutEffect(() => {
+    try {
+      const storageIsDismissed = localStorage.getItem(STORAGE_KEY)
+
+      if (storageIsDismissed !== null) {
+        return
+      } else {
+        setIsDismissed(false)
+      }
+    } catch (err) {
+      setIsDismissed(false)
+    }
+  }, [])
+
+  const handleDismiss = React.useCallback(() => {
+    setIsDismissed(true)
+    localStorage.setItem(STORAGE_KEY, 'true')
+  }, [])
+
+  if (isDismissed) return null
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 40,
+        left: 0,
+        zIndex: 999,
+        display: 'flex',
+        fontSize: 'var(--fontSizes-2)',
+        fontFamily: 'var(--fonts-ui)',
+        color: '#fff',
+        mixBlendMode: 'difference',
+      }}
+    >
+      <a
+        href="https://beta.tldraw.com"
+        style={{
+          height: '48px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 8,
+          fontSize: 'inherit',
+          color: 'inherit',
+        }}
+        title="Try the new tldraw at beta.tldraw.com"
+      >
+        Try the new tldraw!
+      </a>
+      <button
+        style={{
+          height: '48px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 4,
+          color: 'inherit',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          opacity: 0.8,
+        }}
+        title="Dismiss"
+        onClick={handleDismiss}
+      >
+        ×
+      </button>
+    </div>
+  )
+}

apps/www/components/Editor.tsx

@@ -2,6 +2,7 @@ import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw'
 import * as React from 'react'
 import { useUploadAssets } from '~hooks/useUploadAssets'
 import * as gtag from '~utils/gtag'
+import { BetaNotification } from './BetaNotification'
 
 declare const window: Window & { app: TldrawApp }
 
@@ -39,6 +40,7 @@ const Editor = ({ id = 'home', ...rest }: EditorProps & Partial<TldrawProps>) =>
         {...fileSystemEvents}
         {...rest}
       />
+      <BetaNotification />
     </div>
   )
 }

apps/www/components/MultiplayerEditor.tsx

@@ -5,6 +5,7 @@ import { useMultiplayerState } from '~hooks/useMultiplayerState'
 import { useUploadAssets } from '~hooks/useUploadAssets'
 import { styled } from '~styles'
 import { RoomProvider } from '~utils/liveblocks'
+import { BetaNotification } from './BetaNotification'
 
 interface Props {
   roomId: string
@@ -53,6 +54,7 @@ function Editor({ roomId }: Props) {
         {...fileSystemEvents}
         {...events}
       />
+      <BetaNotification />
     </div>
   )
 }

packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx

@@ -1,5 +1,6 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
+  ExternalLinkIcon,
   GitHubLogoIcon,
   HeartFilledIcon,
   QuestionMarkIcon,
@@ -65,6 +66,7 @@ const LanguageMenuDropdown = () => {
 }
 
 const linksData = [
+  { id: 'tldraw-beta', icon: ExternalLinkIcon, url: 'https://beta.tldraw.com' },
   { id: 'github', icon: GitHubLogoIcon, url: 'https://github.com/tldraw/tldraw' },
   { id: 'twitter', icon: TwitterLogoIcon, url: 'https://twitter.com/tldraw' },
   { id: 'discord', icon: DiscordIcon, url: 'https://discord.gg/SBBEVCA4PG' },

packages/tldraw/src/translations/main.json

@@ -123,5 +123,6 @@
   "dialog.cancel": "Cancel",
   "dialog.no": "No",
   "dialog.yes": "Yes",
-  "enter.file.name": "Enter file name"
+  "enter.file.name": "Enter file name",
+  "tldraw-beta": "Try the new tldraw"
 }