From 873231d89263303696236722e03b4362a78a6f9c Mon Sep 17 00:00:00 2001
From: Lu Wilson <l2wilson94@gmail.com>
Date: Mon, 27 Nov 2023 16:33:29 +0000
Subject: [PATCH] UX improvements (#12)

* more useful toolbar

* default prompt label

* default to large size style

* wording and formatting

* fix frame name editing

* reorder frame
---
 src/app/page.tsx                      | 40 ++++++++++++++++++++++++++-
 src/components/FrameLabelInput.tsx    | 14 +++-------
 src/components/LiveImageShapeUtil.tsx |  2 +-
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 64a60ed..cfd8c1f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,14 @@
 
 import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil'
 import * as fal from '@fal-ai/serverless-client'
-import { Editor, Tldraw, useEditor } from '@tldraw/tldraw'
+import {
+	DefaultSizeStyle,
+	Editor,
+	TLUiOverrides,
+	Tldraw,
+	toolbarItem,
+	useEditor,
+} from '@tldraw/tldraw'
 import { useEffect } from 'react'
 import { LiveImageTool, MakeLiveButton } from '../components/LiveImageTool'
 
@@ -12,6 +19,34 @@ fal.config({
 	}),
 })
 
+export const overrides: TLUiOverrides = {
+	tools(editor, tools) {
+		tools.liveImage = {
+			id: 'live-image',
+			icon: 'tool-frame',
+			label: 'Frame',
+			kbd: 'f',
+			readonlyOk: false,
+			onSelect: () => {
+				editor.setCurrentTool('live-image')
+			},
+		}
+		return tools
+	},
+	toolbar(_app, toolbar, { tools }) {
+		const frameIndex = toolbar.findIndex((item) => item.id === 'frame')
+		if (frameIndex !== -1) toolbar.splice(frameIndex, 1)
+		const highlighterIndex = toolbar.findIndex((item) => item.id === 'highlight')
+		if (highlighterIndex !== -1) {
+			const highlighterItem = toolbar[highlighterIndex]
+			toolbar.splice(highlighterIndex, 1)
+			toolbar.splice(3, 0, highlighterItem)
+		}
+		toolbar.splice(2, 0, toolbarItem(tools.liveImage))
+		return toolbar
+	},
+}
+
 const shapeUtils = [LiveImageShapeUtil]
 const tools = [LiveImageTool]
 
@@ -40,6 +75,8 @@ export default function Home() {
 				},
 			})
 		}
+
+		editor.setStyleForNextShapes(DefaultSizeStyle, 'xl', { ephemeral: true })
 	}
 
 	return (
@@ -51,6 +88,7 @@ export default function Home() {
 					shapeUtils={shapeUtils}
 					tools={tools}
 					shareZone={<MakeLiveButton />}
+					overrides={overrides}
 				>
 					<SneakySideEffects />
 				</Tldraw>
diff --git a/src/components/FrameLabelInput.tsx b/src/components/FrameLabelInput.tsx
index 7d7b744..133fa0a 100644
--- a/src/components/FrameLabelInput.tsx
+++ b/src/components/FrameLabelInput.tsx
@@ -1,9 +1,4 @@
-import {
-	TLFrameShape,
-	TLShapeId,
-	stopEventPropagation,
-	useEditor,
-} from '@tldraw/editor'
+import { TLFrameShape, TLShapeId, stopEventPropagation, useEditor } from '@tldraw/editor'
 import { forwardRef, useCallback } from 'react'
 
 export const FrameLabelInput = forwardRef<
@@ -72,9 +67,7 @@ export const FrameLabelInput = forwardRef<
 	)
 
 	return (
-		<div
-			className={`tl-frame-label ${isEditing ? 'tl-frame-label__editing' : ''}`}
-		>
+		<div className={`tl-frame-label ${isEditing ? 'tl-frame-label__editing' : ''}`}>
 			<input
 				className="tl-frame-name-input"
 				ref={ref}
@@ -84,8 +77,9 @@ export const FrameLabelInput = forwardRef<
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}
+				onPointerDown={stopEventPropagation}
 			/>
-			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}
+			{defaultEmptyAs(name, 'Double click prompt to edit') + String.fromCharCode(8203)}
 		</div>
 	)
 })
diff --git a/src/components/LiveImageShapeUtil.tsx b/src/components/LiveImageShapeUtil.tsx
index 28af9a2..d0f7917 100644
--- a/src/components/LiveImageShapeUtil.tsx
+++ b/src/components/LiveImageShapeUtil.tsx
@@ -65,7 +65,7 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
 		return {
 			w: 512,
 			h: 512,
-			name: 'a city skyline',
+			name: '',
 		}
 	}