Addressed general feedback

apps/front/package.json

@@ -14,7 +14,6 @@
     "@heroicons/react": "^2.1.1",
     "@knucklebones/common": "workspace:*",
     "@radix-ui/react-toggle-group": "^1.0.4",
-    "@use-gesture/react": "^10.3.0",
     "clsx": "^2.1.0",
     "i18next": "^23.10.1",
     "qrcode.react": "^3.1.0",

apps/front/src/components/App.tsx

@@ -8,8 +8,6 @@ import { MainContent, SideBarContainer, SideBarLayout } from './SideBar'
 import { Theme } from './Theme'
 
 export function App() {
-  const mainContentRef = React.useRef<React.ElementRef<'div'>>(null)
-
   React.useEffect(() => {
     if (localStorage.getItem('playerId') === null) {
       localStorage.setItem('playerId', randomName())
@@ -21,7 +19,6 @@ export function App() {
       <div className='bg-slate-50 text-slate-900 transition-colors duration-150 ease-in-out dark:bg-slate-900 dark:text-slate-200'>
         <SideBarLayout>
           <SideBarContainer
-            swipeableAreaRef={mainContentRef}
             actions={
               <>
                 <Theme />
@@ -30,7 +27,7 @@ export function App() {
             }
           />
 
-          <MainContent ref={mainContentRef}>
+          <MainContent>
             <Router />
           </MainContent>
         </SideBarLayout>

apps/front/src/components/HomePage.tsx

@@ -19,7 +19,7 @@ export function HomePage() {
 
   return (
     <>
-      <div className='mx-4 flex flex-col items-center justify-center gap-4 md:gap-8'>
+      <div className='mx-4 flex flex-col items-center justify-center gap-8 md:gap-12'>
         <div className='flex flex-row items-center gap-2 md:gap-4'>
           <img
             src={KnucklebonesLogo}

apps/front/src/components/SideBar/SideBarContainer.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
+import { useClickAway } from 'react-use'
 import { ChevronRightIcon } from '@heroicons/react/24/outline'
 import { clsx } from 'clsx'
-import { useDrag } from '@use-gesture/react'
 import { useIsOnMobile } from '../../hooks/detectDevice'
 import KnucklebonesLogo from '../../svgs/logo.svg'
 import { IconButton } from '../IconButton'
@@ -11,48 +11,34 @@ import { SideBarActionContainer } from './SideBarActions'
 
 export interface SideBarContainerProps {
   actions: React.ReactNode
-  swipeableAreaRef: React.RefObject<HTMLDivElement>
 }
 
 // https://ui.shadcn.com/docs/components/sheet ?
-export function SideBarContainer({
-  actions,
-  swipeableAreaRef
-}: SideBarContainerProps) {
+export function SideBarContainer({ actions }: SideBarContainerProps) {
   // Always displayed by default
-  const [showToolbar, setShowToolbar] = React.useState(true)
+  const [show, setShow] = React.useState(true)
   const isOnMobile = useIsOnMobile()
 
-  // Makes it appear/disappear on mobile after scrolling left/right
-  useDrag(
-    ({ swipe: [xAxis], tap }) => {
-      if (xAxis === -1 || tap) {
-        setShowToolbar(false)
-      }
-      if (xAxis === 1) {
-        setShowToolbar(true)
-      }
-    },
-    {
-      enabled: isOnMobile,
-      target: swipeableAreaRef,
-      axis: 'x',
-      swipe: { duration: 1000 },
-      filterTaps: true
+  function close() {
+    if (isOnMobile) {
+      setShow(false)
     }
-  )
+  }
+
+  const sideBarRef = React.useRef<React.ElementRef<'div'>>(null)
+  useClickAway(sideBarRef, close)
 
   // Automatically closes it on mobile after 1,5 second
   React.useEffect(() => {
     if (isOnMobile) {
       const timeout = setTimeout(() => {
-        setShowToolbar(false)
+        setShow(false)
       }, 1500)
       return () => {
         clearTimeout(timeout)
       }
     } else {
-      setShowToolbar(true)
+      setShow(true)
     }
   }, [isOnMobile])
 
@@ -62,25 +48,26 @@ export function SideBarContainer({
         className={clsx(
           'pointer-events-none fixed inset-0 bg-slate-900/10 bg-opacity-75 transition-opacity duration-300 ease-in-out lg:hidden dark:bg-slate-50/10',
           {
-            'opacity-0': !showToolbar,
-            'opacity-100': showToolbar
+            'opacity-0': !show,
+            'opacity-100': show
           }
         )}
       ></div>
       <div
         className={clsx(
           'fixed left-0 top-0 transition-transform duration-300 ease-in-out lg:static lg:z-0',
           {
-            '-translate-x-64': !showToolbar,
-            'translate-x-0': showToolbar
+            '-translate-x-64': !show,
+            'translate-x-0': show
           }
         )}
       >
-        <div className='flex flex-row items-center gap-2'>
+        <div ref={sideBarRef} className='flex flex-row gap-2'>
           <div className='flex h-screen w-64 flex-col gap-12 border-r border-slate-300 bg-slate-50 p-2 pl-4 pt-4 shadow-lg transition-colors duration-150 ease-in-out lg:border-0 lg:shadow-none dark:border-slate-600 dark:bg-slate-900'>
             <Link
               to='/'
-              className='flex flex-row items-center gap-2 underline decoration-transparent decoration-4 underline-offset-2 transition-all duration-100 ease-in-out hover:decoration-slate-900'
+              onClick={close}
+              className='flex flex-row items-center gap-2 underline decoration-transparent decoration-4 underline-offset-2 transition-all duration-100 ease-in-out hover:decoration-slate-900 dark:hover:decoration-slate-50'
             >
               <img
                 src={KnucklebonesLogo}
@@ -97,15 +84,23 @@ export function SideBarContainer({
             <SideBarActionContainer>{actions}</SideBarActionContainer>
           </div>
           {isOnMobile && (
-            <IconButton
-              onClick={() => {
-                setShowToolbar((prev) => !prev)
-              }}
-              icon={<ChevronRightIcon />}
-              className={clsx('transition-transform duration-300 ease-in-out', {
-                'rotate-180': showToolbar
-              })}
-            />
+            <div className='flex items-center' onClick={close}>
+              <IconButton
+                onClick={(e) => {
+                  // Solution à revoir, c'est fonctionnel mais y a un mix entre
+                  // custom et useClickAway
+                  e.stopPropagation()
+                  setShow((prev) => !prev)
+                }}
+                icon={<ChevronRightIcon />}
+                className={clsx(
+                  'rounded-full p-1 transition duration-300 ease-in-out',
+                  {
+                    'rotate-180 bg-slate-50 dark:bg-slate-900': show
+                  }
+                )}
+              />
+            </div>
           )}
         </div>
       </div>

apps/worker/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "module": "./dist/index.mjs",
   "scripts": {
-    "dev": "NODE_ENV=development wrangler dev"
+    "dev": "NODE_ENV=development wrangler dev --show-interactive-dev-session false"
   },
   "dependencies": {
     "@knucklebones/common": "workspace:*",

package.json

@@ -12,7 +12,7 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240314.0",
+    "@cloudflare/workers-types": "^4.20240405.0",
     "@sentry/types": "^7.107.0",
     "@types/crypto-js": "^4.2.2",
     "@types/itty-router-extras": "^0.4.3",
@@ -45,7 +45,7 @@
     "turbo": "^1.12.5",
     "typescript": "^5.4.2",
     "vite": "^5.1.6",
-    "wrangler": "^3.34.2"
+    "wrangler": "^3.48.0"
   },
   "volta": {
     "node": "20.9.0"