Enhance usability with mouseWheelZoom, mobile layout improvements, and live reload indicator

src/components/CustomEditor.tsx

@@ -21,11 +21,11 @@ const CustomEditor = ({ className, language }: CustomEditorProps) => {
    * remove line numbers when window
    * is bellow 640 (tailwind's sm value)
    */
-  const [showLineNumber, setShowLineNumbers]= useState(true)
- 
+  const [showLineNumber, setShowLineNumbers] = useState(true)
+
   useEffect(() => {
-    const handleResize = () => 
-    window.innerWidth <= 640 ? setShowLineNumbers(false) : setShowLineNumbers(true)
+    const handleResize = () =>
+      window.innerWidth <= 640 ? setShowLineNumbers(false) : setShowLineNumbers(true)
 
     window.addEventListener('resize', handleResize)
     handleResize()
@@ -66,6 +66,7 @@ const CustomEditor = ({ className, language }: CustomEditorProps) => {
           },
           wordWrap: 'on',
           tabSize: 2,
+          mouseWheelZoom: true
         }}
       />
     </div>

src/components/MEditor/index.tsx

@@ -44,11 +44,11 @@ export function MEditor({
   ]
 
   return (
-    <motion.div 
+    <motion.div
       className={classNames("w-screen h-screen overflow-hidden relative sm:flex grid", {
         [`grid-rows-2`]: !isFullscreen,
       })}>
-      <div className={isFullscreen ? `hidden` : `w-full flex flex-col h-full`}>
+      <div className={isFullscreen ? `hidden` : `w-full flex flex-col h-full order-2 sm:order-1`}>
         <nav className="flex items-center gap-1 py-1 px-0 sm:px-4 sm:py-2 bg-[#11111b]">
           {showLogo && (
             <a title="visit the open-source project" href="https://github.com/maykbrito/fronteditorv2" target="_blank" className="text-center px-4">

src/components/Preview/Header.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { X, Minus, CornersOut } from 'phosphor-react'
+import { X, Minus, CornersOut, ArrowsCounterClockwise } from 'phosphor-react'
 import { PointerEvent } from 'react'
 import { useToggle } from '../../hooks/useToggle'
 import { HeaderButton } from './HeaderButton'
@@ -35,6 +35,8 @@ export function Header({
     },
   })
 
+  const activationTitleLiveReload = isLiveReloadEnabled ? 'Desabilitar' : 'Habilitar'
+
   return (
     <header
       className={classNames('bg-zinc-100 w-full h-8 px-4 grid items-center relative', {
@@ -80,28 +82,39 @@ export function Header({
       )}
 
       <span
-      className={classNames('text-sm text-zinc-400 justify-self-start flex items-center gap-2', {
-        [`justify-self-center`]: isFloating,
-      })}
+        className={classNames('text-sm text-zinc-400 justify-self-start flex items-center gap-2', {
+          [`justify-self-center`]: isFloating,
+        })}
       >
         {windowIcon && (
           <img src={windowIcon} className='w-[16px] h-[16px] object-cover object-center' />
         )}
-         {windowTitle}
+        {windowTitle}
       </span>
 
-      <label 
-        title="Habilitar/desabilitar recarregamento automático"
-        htmlFor="live-reload" 
-        className="hover:opacity-[1] opacity-[0.4] flex gap-2 absolute right-3 top-2">
-        <span className="text-xs text-zinc-500 flex-1 flex justify-end cursor-pointer">Live reload?</span>
+      <label
+        title={`${activationTitleLiveReload} recarregamento automático`}
+        htmlFor="live-reload"
+        className="hover:opacity-[1] opacity-[0.4] flex gap-2 absolute right-3 top-2 items-center select-none"
+      >
+        <span className="text-xs text-zinc-500 flex-1 flex justify-end cursor-pointer">{`${activationTitleLiveReload} live reload?`}</span>
         <input
+          className="hidden"
           id="live-reload"
           type="checkbox"
           onChange={() => toggleLiveReload()}
           checked={isLiveReloadEnabled}
         />
+        <span className="grid place-items-center">
+          <ArrowsCounterClockwise size={18} />
+          <span className={classNames(
+            "absolute -right-0 top-0 size-1.5 rounded-full bg-red-600", {
+            hidden: !isLiveReloadEnabled
+          })}>
+            <span className="absolute size-full rounded-full bg-red-600 animate-ping"></span>
+          </span>
+        </span>
       </label>
-    </header>
+    </header >
   )
 }

src/components/Preview/index.tsx

@@ -77,14 +77,14 @@ export default function Preview({ isFloating = false, fullscreen = false }: Prev
       editorHotkeys.removeEventListener('save', renderPreview)
     }
   }, [renderPreview])
- 
+
   /**
    * Responsive
    * Reset the preview to 100% when window 
    * is bellow 640 (tailwind's sm value)
    */
   useEffect(() => {
-    const handleResize = () => 
+    const handleResize = () =>
       window.innerWidth <= 640 && previewWidth.set(100)
 
     window.addEventListener('resize', handleResize)
@@ -113,7 +113,7 @@ export default function Preview({ isFloating = false, fullscreen = false }: Prev
       * this calc is not working good
       * I wanna something that follows the mouse's pointer
       */
-      const newWidth = previewWidth.get() - info.delta.x / 8 
+      const newWidth = previewWidth.get() - info.delta.x / 8
       previewWidth.set(newWidth)
     },
     [previewWidth],
@@ -122,7 +122,7 @@ export default function Preview({ isFloating = false, fullscreen = false }: Prev
   return (
     <>
       <motion.div
-        className={classNames('bg-white flex flex-col', {
+        className={classNames('bg-white flex flex-col order-1 sm:order-2', {
           [`absolute z-10 rounded-t-lg overflow-auto shadow`]: isFloating,
           [`relative h-full rounded-none`]: !isFloating,
           [`h-8 w-28 overflow-hidden`]: previewWindowState === 'closed',