From 01be5958c41b6eaac6e2f05498e69baca9a6584e Mon Sep 17 00:00:00 2001
From: Nico Ismaili <nico@ismaili.de>
Date: Sat, 30 Dec 2023 14:33:04 +0100
Subject: [PATCH] fix: auto focus mobile

---
 src/components/Shell/Shell.tsx                | 12 ++++++------
 src/hooks/useMobileDetect/useMobileDetect.tsx |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 9cc107b..14922a0 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -3,7 +3,7 @@ import { Clear } from '@/components/Cli/cmd/clear';
 import { PromptPrefix } from '@/components/Shell/PromptPrefix';
 import { PromptHistoryContext } from '@/context/PromptHistoryContext/PromptHistoryContext';
 import { PromptHistoryEntry } from '@/context/PromptHistoryContext/types';
-import { useMobileDetect } from '@/hooks';
+import { useTouchDetect } from '@/hooks';
 import { CustomEvents, RunEvent, SearchParams } from '@/util/types';
 import { useLocation } from '@reach/router';
 import {
@@ -28,7 +28,7 @@ export const Shell = ({ username, domain }: Readonly<ShellProps>) => {
   const [currentPrompt, setCurrentPrompt] = useState<string>(``);
   const [tmpPrompt, setTmpPrompt] = useState<string>(``); // used for arrow up/down
   const [isStandaloneOpen, setIsStandaloneOpen] = useState(false);
-  const isMobile = useMobileDetect();
+  const isTouch = useTouchDetect();
 
   const location = useLocation();
 
@@ -43,11 +43,11 @@ export const Shell = ({ username, domain }: Readonly<ShellProps>) => {
         setHistory((history) => [...history, cmdResTuple]);
         updateCmdSearchParam(cmdResTuple.prompt);
       }
-      if (!isMobile) {
+      if (!isTouch) {
         textAreaRef.current?.focus();
       }
     },
-    [setHistory],
+    [isTouch, setHistory],
   );
 
   const handleClearEvent = useCallback(() => {
@@ -185,7 +185,7 @@ export const Shell = ({ username, domain }: Readonly<ShellProps>) => {
         if (
           e.target instanceof HTMLDivElement &&
           e.target.nodeName === `MAIN` &&
-          !isMobile
+          !isTouch
         ) {
           textAreaRef.current?.focus();
         }
@@ -213,7 +213,7 @@ export const Shell = ({ username, domain }: Readonly<ShellProps>) => {
             <textarea
               id="prompt"
               rows={1}
-              autoFocus={!isMobile}
+              autoFocus={!isTouch}
               ref={textAreaRef}
               onKeyDown={handleUserTextAreaKeyDown}
               onChange={handleUserTextValueChange}
diff --git a/src/hooks/useMobileDetect/useMobileDetect.tsx b/src/hooks/useMobileDetect/useMobileDetect.tsx
index eb48db7..b319c3f 100644
--- a/src/hooks/useMobileDetect/useMobileDetect.tsx
+++ b/src/hooks/useMobileDetect/useMobileDetect.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
-export const useMobileDetect = () => {
-  const [isMobile, setIsMobile] = useState(false);
+export const useTouchDetect = () => {
+  const [isMobile, setIsMobile] = useState(true);
 
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth < 768); // 768px is a common breakpoint for mobile devices
+      setIsMobile(`ontouchstart` in window);
     };
 
     window.addEventListener(`resize`, handleResize);