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

@@ -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>

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>
 	)
 })

src/components/LiveImageShapeUtil.tsx

@@ -65,7 +65,7 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
 		return {
 			w: 512,
 			h: 512,
-			name: 'a city skyline',
+			name: '',
 		}
 	}