All: Use Lerna to manage monorepo

packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { _ } from '@joplinapp/lib/locale';
+import CommandService from '@joplinapp/lib/services/CommandService';
+import { ChangeEvent, useCallback } from 'react';
+import NoteToolbar from '../../NoteToolbar/NoteToolbar';
+import { buildStyle } from '@joplinapp/lib/theme';
+import time from '@joplinapp/lib/time';
+
+interface Props {
+	themeId: number,
+	noteUserUpdatedTime: number,
+	noteTitle: string,
+	noteIsTodo: number,
+	isProvisional: boolean,
+	titleInputRef: any,
+	onTitleChange(event: ChangeEvent<HTMLInputElement>):void,
+}
+
+function styles_(props: Props) {
+	return buildStyle(['NoteEditorTitleBar'], props.themeId, (theme: any) => {
+		return {
+			root: {
+				display: 'flex', flexDirection: 'row', alignItems: 'center', height: theme.topRowHeight,
+			},
+			titleInput: {
+				flex: 1,
+				display: 'inline-block',
+				paddingTop: 5,
+				minHeight: 35,
+				boxSizing: 'border-box',
+				fontWeight: 'bold',
+				paddingBottom: 5,
+				paddingLeft: 0,
+				paddingRight: 8,
+				marginLeft: 5,
+				color: theme.textStyle.color,
+				fontSize: Math.round(theme.textStyle.fontSize * 1.5),
+				backgroundColor: theme.backgroundColor,
+				border: 'none',
+			},
+
+			titleDate: {
+				...theme.textStyle,
+				color: theme.colorFaded,
+				paddingLeft: 10,
+				paddingRight: 10,
+			},
+			toolbarStyle: {
+				marginBottom: 0,
+			},
+		};
+	});
+}
+
+export default function NoteTitleBar(props:Props) {
+	const styles = styles_(props);
+
+	const onTitleKeydown = useCallback((event:any) => {
+		const keyCode = event.keyCode;
+
+		if (keyCode === 9) { // TAB
+			event.preventDefault();
+
+			if (event.shiftKey) {
+				CommandService.instance().execute('focusElement', 'noteList');
+			} else {
+				CommandService.instance().execute('focusElement', 'noteBody');
+			}
+		}
+	}, []);
+
+	function renderTitleBarDate() {
+		return <span style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;
+	}
+
+	function renderNoteToolbar() {
+		return <NoteToolbar
+			themeId={props.themeId}
+			style={styles.toolbarStyle}
+		/>;
+	}
+
+	return (
+		<div style={styles.root}>
+			<input
+				type="text"
+				ref={props.titleInputRef}
+				placeholder={props.isProvisional ? _('Creating new %s...', props.noteIsTodo ? _('to-do') : _('note')) : ''}
+				style={styles.titleInput}
+				onChange={props.onTitleChange}
+				onKeyDown={onTitleKeydown}
+				value={props.noteTitle}
+			/>
+			{renderTitleBarDate()}
+			{renderNoteToolbar()}
+		</div>
+	);
+}