🚸 Add keyboard shortcuts and correct fab states

components/pages/Constellation.tsx

@@ -16,7 +16,7 @@ import {
 } from '@ionic/react'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { add, starOutline } from 'ionicons/icons'
-import { useCallback, useRef } from 'react'
+import { RefObject, useCallback, useEffect, useRef } from 'react'
 import { db } from '../db'
 import { useCreateStarRoleModal } from '../starRoles/create/useCreateStarRoleModal'
 
@@ -25,7 +25,7 @@ export default function Constellation() {
 	const isLoading = starRoles === undefined
 
 	const fab = useRef<HTMLIonFabElement>(null)
-	const [presentCreateStarRoleModal, dismiss] = useCreateStarRoleModal()
+	const [presentCreateStarRoleModal, _dismiss] = useCreateStarRoleModal()
 	const openCreateStarRoleModal = useCallback(() => {
 		presentCreateStarRoleModal({
 			onWillDismiss: () => {
@@ -34,6 +34,8 @@ export default function Constellation() {
 		})
 	}, [fab, presentCreateStarRoleModal])
 
+	useGlobalKeyboardShortcuts(fab, openCreateStarRoleModal)
+
 	return (
 		<IonPage>
 			<IonHeader>
@@ -92,3 +94,24 @@ export default function Constellation() {
 		</IonPage>
 	)
 }
+
+function useGlobalKeyboardShortcuts(
+	fab: RefObject<HTMLIonFabElement>,
+	openCreateStarRoleModal: any,
+) {
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.target !== document.body) return
+
+			if (event.key === 'c') {
+				event.preventDefault()
+				openCreateStarRoleModal()
+				if (fab.current) fab.current.activated = true
+			}
+		}
+		document.addEventListener('keydown', handleKeyDown)
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	}, [fab, openCreateStarRoleModal])
+}

components/pages/Home.tsx

@@ -1,4 +1,3 @@
-import { SyncStatePhase } from 'dexie-cloud-addon'
 import { menuController } from '@ionic/core/components'
 import {
 	IonButton,
@@ -86,7 +85,7 @@ const Home = () => {
 	const contentRef = useRef<HTMLIonContentElement>(null)
 	const searchbarRef = useRef<HTMLIonSearchbarElement>(null)
 
-	useGlobalKeyboardShortcuts(contentRef, searchbarRef, openCreateTodoModal)
+	useGlobalKeyboardShortcuts(contentRef, searchbarRef, fab, openCreateTodoModal)
 
 	const [enablePagination, setEnablePagination] = useState(false)
 
@@ -875,13 +874,6 @@ export const Searchbar = forwardRef<HTMLIonSearchbarElement>(
 		return (
 			<IonSearchbar
 				ref={searchbarRef}
-				onKeyDown={event => {
-					if (event.key === 'Escape') {
-						event.preventDefault()
-						const target = event.target as HTMLIonSearchbarElement
-						target.getElementsByTagName('input')[0].blur()
-					}
-				}}
 				debounce={100}
 				onIonInput={event => {
 					const target = event.target as HTMLIonSearchbarElement
@@ -925,6 +917,7 @@ function matchesQuery(query: string, todo: Todo) {
 function useGlobalKeyboardShortcuts(
 	contentRef: RefObject<HTMLIonContentElement>,
 	searchbarRef: RefObject<HTMLIonSearchbarElement>,
+	fab: RefObject<HTMLIonFabElement>,
 	openCreateTodoModal: any,
 ) {
 	useEffect(() => {
@@ -945,6 +938,7 @@ function useGlobalKeyboardShortcuts(
 			if (event.key === 'c') {
 				event.preventDefault()
 				openCreateTodoModal()
+				if (fab.current) fab.current.activated = true
 			} else if (event.key === 's') {
 				event.preventDefault()
 				contentRef.current?.scrollToBottom(500)
@@ -954,5 +948,5 @@ function useGlobalKeyboardShortcuts(
 		return () => {
 			document.removeEventListener('keydown', handleKeyDown)
 		}
-	}, [contentRef, openCreateTodoModal, searchbarRef])
+	}, [contentRef, fab, openCreateTodoModal, searchbarRef])
 }

components/todos/TodoModal.tsx

@@ -79,6 +79,7 @@ export default function TodoModal({
 			</IonHeader>
 			<IonContent className="space-y-4 ion-padding">
 				<IonInput
+					autoFocus
 					fill="outline"
 					ref={titleInput}
 					type="text"