From e4da6ba7358a88d98434be1524c6cfad1fc782be Mon Sep 17 00:00:00 2001
From: Teczer <mehdi.hattou1@gmail.com>
Date: Wed, 26 Nov 2025 11:37:43 +0100
Subject: [PATCH 1/4] :sparkles: :lipstick: feat(ui): integrate Radix UI
 components for drawer and select functionality; add loading spinner and
 mobile user list drawer

---
 apps/web/components/ui/drawer.tsx             | 118 +++++++++
 apps/web/components/ui/select.tsx             | 161 +++++++++++++
 .../connection-status.component.tsx           |   9 +-
 .../components/flash-button.component.tsx     |   2 +-
 .../components/game-controls.component.tsx    |   4 +-
 .../game/components/item-toggle.component.tsx |   2 +-
 .../components/loading-spinner.component.tsx  |  37 +++
 .../mobile-user-list-drawer.component.tsx     |  56 +++++
 .../components/mobile-user-list.component.tsx |  34 +++
 .../components/summoner-input.component.tsx   |  64 +++--
 .../timer-control-button.component.tsx        |   2 +-
 .../game/components/user-list.component.tsx   |   2 +-
 .../game/screens/game-multiplayer.screen.tsx  |  15 +-
 apps/web/package.json                         |   2 +
 pnpm-lock.yaml                                | 227 +++++++++++++++++-
 15 files changed, 683 insertions(+), 52 deletions(-)
 create mode 100644 apps/web/components/ui/drawer.tsx
 create mode 100644 apps/web/components/ui/select.tsx
 create mode 100644 apps/web/features/game/components/loading-spinner.component.tsx
 create mode 100644 apps/web/features/game/components/mobile-user-list-drawer.component.tsx
 create mode 100644 apps/web/features/game/components/mobile-user-list.component.tsx

diff --git a/apps/web/components/ui/drawer.tsx b/apps/web/components/ui/drawer.tsx
new file mode 100644
index 0000000..6a0ef53
--- /dev/null
+++ b/apps/web/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
new file mode 100644
index 0000000..6014d78
--- /dev/null
+++ b/apps/web/components/ui/select.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { FaCheck } from "react-icons/fa"
+import { HiChevronDown, HiChevronUp } from "react-icons/hi"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <HiChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <HiChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <HiChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <FaCheck className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
+
diff --git a/apps/web/features/game/components/connection-status.component.tsx b/apps/web/features/game/components/connection-status.component.tsx
index 3a642e5..031b6c5 100644
--- a/apps/web/features/game/components/connection-status.component.tsx
+++ b/apps/web/features/game/components/connection-status.component.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { memo } from 'react'
 import { cn } from '@/lib/utils'
+import { memo } from 'react'
 import { ImSpinner2 } from 'react-icons/im'
 
 interface IConnectionStatusProps {
@@ -14,7 +14,7 @@ const ConnectionStatusComponent = (props: IConnectionStatusProps) => {
 
   if (isConnected) {
     return (
-      <div className="fixed right-4 top-4 flex items-center gap-2 rounded-md bg-green-500/20 px-3 py-2 backdrop-blur-sm">
+      <div className="fixed right-4 top-4 hidden items-center gap-2 rounded-md bg-green-500/20 px-3 py-2 backdrop-blur-sm sm:flex">
         <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
         <span className="text-sm font-medium text-green-500">Connected</span>
       </div>
@@ -24,9 +24,9 @@ const ConnectionStatusComponent = (props: IConnectionStatusProps) => {
   return (
     <div
       className={cn(
-        'fixed right-4 top-4 flex items-center gap-2 rounded-md px-3 py-2 backdrop-blur-sm',
+        'fixed right-4 top-4 hidden items-center gap-2 rounded-md px-3 py-2 backdrop-blur-sm sm:flex',
         reconnectAttempts >= 3
-          ? 'bg-red-500/20 animate-pulse'
+          ? 'animate-pulse bg-red-500/20'
           : 'bg-yellow-500/20'
       )}
     >
@@ -67,4 +67,3 @@ export const ConnectionStatus = memo(
     )
   }
 )
-
diff --git a/apps/web/features/game/components/flash-button.component.tsx b/apps/web/features/game/components/flash-button.component.tsx
index 80a4c41..02878fa 100644
--- a/apps/web/features/game/components/flash-button.component.tsx
+++ b/apps/web/features/game/components/flash-button.component.tsx
@@ -45,7 +45,7 @@ const FlashButtonComponent = (props: IFlashButtonProps) => {
       <button
         onClick={onClick}
         className={cn(
-          'relative size-28 transition-all sm:size-64 sm:hover:scale-110',
+          'relative size-20 transition-all sm:size-64 sm:hover:scale-110',
           isDDragonIcon && 'size-12 sm:size-36',
           className
         )}
diff --git a/apps/web/features/game/components/game-controls.component.tsx b/apps/web/features/game/components/game-controls.component.tsx
index 6506ded..4e295c4 100644
--- a/apps/web/features/game/components/game-controls.component.tsx
+++ b/apps/web/features/game/components/game-controls.component.tsx
@@ -23,7 +23,7 @@ const GameControlsComponent = (props: IGameControlsProps) => {
     <>
       {/* Back Button */}
       <Button
-        className="absolute left-6 top-6 sm:left-20 sm:top-10"
+        className="absolute left-6 top-10 sm:left-20 sm:top-10"
         onClick={handleGoBack}
         variant="outline"
         size="icon"
@@ -34,7 +34,7 @@ const GameControlsComponent = (props: IGameControlsProps) => {
 
       {/* Volume Button */}
       <Button
-        className="absolute right-6 top-6 sm:left-20 sm:top-24"
+        className="absolute hidden sm:left-20 sm:top-24 sm:flex"
         onClick={onToggleVolume}
         variant="outline"
         size="icon"
diff --git a/apps/web/features/game/components/item-toggle.component.tsx b/apps/web/features/game/components/item-toggle.component.tsx
index e9a99f3..c91b60f 100644
--- a/apps/web/features/game/components/item-toggle.component.tsx
+++ b/apps/web/features/game/components/item-toggle.component.tsx
@@ -24,7 +24,7 @@ const ItemToggleComponent = (props: IItemToggleProps) => {
       <Image
         draggable={false}
         className={cn(
-          'size-12 rounded-full object-cover sm:size-20',
+          'size-8 rounded-full object-cover sm:size-20',
           isActive ? 'brightness-100' : 'brightness-50'
         )}
         width={200}
diff --git a/apps/web/features/game/components/loading-spinner.component.tsx b/apps/web/features/game/components/loading-spinner.component.tsx
new file mode 100644
index 0000000..f589718
--- /dev/null
+++ b/apps/web/features/game/components/loading-spinner.component.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { memo } from 'react'
+
+interface ILoadingSpinnerProps {
+  className?: string
+}
+
+const LoadingSpinnerComponent = (props: ILoadingSpinnerProps) => {
+  const { className } = props
+
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}
+
+export const LoadingSpinner = memo(LoadingSpinnerComponent)
+
diff --git a/apps/web/features/game/components/mobile-user-list-drawer.component.tsx b/apps/web/features/game/components/mobile-user-list-drawer.component.tsx
new file mode 100644
index 0000000..c583419
--- /dev/null
+++ b/apps/web/features/game/components/mobile-user-list-drawer.component.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+import { SummonerInput } from '@/features/game/components/summoner-input.component'
+import { memo } from 'react'
+import { HiOutlineMenuAlt4 } from 'react-icons/hi'
+import { MobileUserList } from './mobile-user-list.component'
+
+interface IMobileUserListDrawerProps {
+  users: string[]
+  onGameDataFetched: (data: any) => void
+}
+
+const MobileUserListDrawerComponent = (props: IMobileUserListDrawerProps) => {
+  const { users, onGameDataFetched } = props
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button
+          className="absolute right-6 top-10 flex sm:hidden"
+          variant="outline"
+          size="icon"
+          aria-label="Open user list drawer"
+        >
+          <HiOutlineMenuAlt4 className="h-4 w-4" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="border-x-0">
+        <DrawerTitle></DrawerTitle>
+        <DrawerHeader>
+          <SummonerInput onGameDataFetched={onGameDataFetched} />
+        </DrawerHeader>
+        <DrawerFooter className="mb-4">
+          <MobileUserList users={users} />
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export const MobileUserListDrawer = memo(
+  MobileUserListDrawerComponent,
+  (prev, next) => {
+    if (prev.users.length !== next.users.length) return false
+    return prev.users.every((user, index) => user === next.users[index])
+  }
+)
diff --git a/apps/web/features/game/components/mobile-user-list.component.tsx b/apps/web/features/game/components/mobile-user-list.component.tsx
new file mode 100644
index 0000000..6aa4411
--- /dev/null
+++ b/apps/web/features/game/components/mobile-user-list.component.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { memo } from 'react'
+
+interface IMobileUserListProps {
+  users: string[]
+}
+
+const MobileUserListComponent = (props: IMobileUserListProps) => {
+  const { users } = props
+
+  if (users.length === 0) return null
+
+  return (
+    <ul className="flex h-full w-full flex-row flex-wrap items-center justify-center gap-4">
+      {users.map((user, index) => (
+        <li
+          key={`${user}-${index}`}
+          className="flex w-auto items-center justify-center gap-x-2"
+        >
+          <span className="shadow-green h-2 w-2 animate-pulse rounded-full bg-green-600"></span>
+          <p className="textstroke w-full overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold text-white">
+            {user}
+          </p>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export const MobileUserList = memo(MobileUserListComponent, (prev, next) => {
+  if (prev.users.length !== next.users.length) return false
+  return prev.users.every((user, index) => user === next.users[index])
+})
diff --git a/apps/web/features/game/components/summoner-input.component.tsx b/apps/web/features/game/components/summoner-input.component.tsx
index c0d64fb..d492fd0 100644
--- a/apps/web/features/game/components/summoner-input.component.tsx
+++ b/apps/web/features/game/components/summoner-input.component.tsx
@@ -2,11 +2,19 @@
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { toast } from '@/hooks/use-toast.hook'
 import { fetchLiveGameData } from '@/lib/riot-api.service'
+import { cn } from '@/lib/utils'
 import type { RiotRegion } from '@loltimeflash/shared'
 import { useState } from 'react'
-import { toast } from '@/hooks/use-toast.hook'
+import { LoadingSpinner } from './loading-spinner.component'
 
 interface ISummonerInputProps {
   onGameDataFetched: (data: any) => void
@@ -82,17 +90,19 @@ export const SummonerInput = (props: ISummonerInputProps) => {
   return (
     <div
       className={cn(
-        'flex flex-col items-center gap-3 rounded-lg bg-black/30 p-4 backdrop-blur-sm sm:flex-row',
+        'bg-background/30 flex flex-col items-center gap-3 rounded-lg p-4 backdrop-blur-sm sm:flex-row',
         className
       )}
     >
       <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
         <Input
+          className="font-bold"
           type="text"
+          name="summoner-name"
+          autoComplete="on"
           placeholder="Summoner Name"
           value={summonerName}
           onChange={(e) => setSummonerName(e.target.value)}
-          className="w-full border-[#8B4513] bg-black/50 text-white placeholder:text-gray-400 sm:w-48"
           disabled={isLoading}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
@@ -101,47 +111,32 @@ export const SummonerInput = (props: ISummonerInputProps) => {
           }}
         />
 
-        <select
+        <Select
           value={region}
-          onChange={(e) => setRegion(e.target.value as RiotRegion)}
-          className="w-full rounded-md border border-[#8B4513] bg-black/50 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-[#8B4513] sm:w-32"
+          onValueChange={(value) => setRegion(value as RiotRegion)}
           disabled={isLoading}
         >
-          {REGIONS.map((r) => (
-            <option key={r.value} value={r.value} className="bg-black">
-              {r.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger className="w-full sm:w-32">
+            <SelectValue placeholder="Select region" />
+          </SelectTrigger>
+          <SelectContent>
+            {REGIONS.map((r) => (
+              <SelectItem key={r.value} value={r.value}>
+                {r.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
       <Button
         onClick={handleFetchLiveGame}
         disabled={isLoading || !summonerName.trim()}
-        className="w-full bg-[#8B4513] text-white hover:bg-[#A0522D] disabled:opacity-50 disabled:cursor-not-allowed sm:w-auto"
+        variant="secondary"
       >
         {isLoading ? (
           <span className="flex items-center gap-2">
-            <svg
-              className="h-4 w-4 animate-spin"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
+            <LoadingSpinner className="h-4 w-4 animate-spin" />
             Fetching...
           </span>
         ) : (
@@ -151,4 +146,3 @@ export const SummonerInput = (props: ISummonerInputProps) => {
     </div>
   )
 }
-
diff --git a/apps/web/features/game/components/timer-control-button.component.tsx b/apps/web/features/game/components/timer-control-button.component.tsx
index ccbde6c..33b6f07 100644
--- a/apps/web/features/game/components/timer-control-button.component.tsx
+++ b/apps/web/features/game/components/timer-control-button.component.tsx
@@ -38,7 +38,7 @@ const TimerControlButtonComponent = (props: ITimerControlButtonProps) => {
       aria-label={ariaLabel}
       type="button"
     >
-      <div className="relative h-12 w-12 sm:h-14 sm:w-14">
+      <div className="relative size-8 sm:size-14">
         <Image
           src={iconSrc}
           alt={ariaLabel}
diff --git a/apps/web/features/game/components/user-list.component.tsx b/apps/web/features/game/components/user-list.component.tsx
index 10414c9..937fdc9 100644
--- a/apps/web/features/game/components/user-list.component.tsx
+++ b/apps/web/features/game/components/user-list.component.tsx
@@ -10,7 +10,7 @@ const UserListComponent = (props: IUserListProps) => {
   if (users.length === 0) return null
 
   return (
-    <ul className="fixed bottom-4 left-10 z-50 flex h-auto w-1/6 flex-col items-center justify-center p-4 sm:bottom-auto sm:left-auto sm:right-10 sm:top-10">
+    <ul className="fixed bottom-4 left-10 z-50 hidden h-auto w-1/6 flex-col items-center justify-center p-4 sm:bottom-auto sm:left-auto sm:right-10 sm:top-10 sm:flex">
       {users.map((user, index) => (
         <li
           key={`${user}-${index}`}
diff --git a/apps/web/features/game/screens/game-multiplayer.screen.tsx b/apps/web/features/game/screens/game-multiplayer.screen.tsx
index 4391c9c..a6305fd 100644
--- a/apps/web/features/game/screens/game-multiplayer.screen.tsx
+++ b/apps/web/features/game/screens/game-multiplayer.screen.tsx
@@ -6,6 +6,7 @@ import { useEffect } from 'react'
 import { ConnectionStatus } from '../components/connection-status.component'
 import { GameControls } from '../components/game-controls.component'
 import { GameInfoDisplay } from '../components/game-info-display.component'
+import { MobileUserListDrawer } from '../components/mobile-user-list-drawer.component'
 import { RoleCard } from '../components/role-card.component'
 import { RoomInfo } from '../components/room-info.component'
 import { SummonerInput } from '../components/summoner-input.component'
@@ -13,7 +14,6 @@ import { UserList } from '../components/user-list.component'
 import { LEAGUE_ROLES } from '../constants/game.constants'
 import { GameProvider, useGameContext } from '../contexts/game.context'
 import type { TRole } from '../types/game.types'
-
 interface IMultiplayerContentProps {
   roomId: string
   username: string
@@ -131,8 +131,9 @@ const MultiplayerGameContent = (props: IMultiplayerContentProps) => {
   }
 
   return (
-    <main className="flex h-screen flex-col items-center justify-start gap-2 p-6 sm:gap-2 sm:p-10">
+    <main className="flex h-screen flex-col items-center justify-start gap-6 px-4 py-2 sm:gap-2 sm:p-10">
       {/* Connection Status */}
+
       <ConnectionStatus
         isConnected={isConnected}
         reconnectAttempts={reconnectAttempts}
@@ -141,6 +142,12 @@ const MultiplayerGameContent = (props: IMultiplayerContentProps) => {
       {/* Controls */}
       <GameControls volume={audio.volume} onToggleVolume={audio.toggleVolume} />
 
+      {/* Mobile User List Drawer */}
+      <MobileUserListDrawer
+        users={gameState.users}
+        onGameDataFetched={handleGameDataFetched}
+      />
+
       {/* User List & Room Info */}
       <div className="flex items-center justify-center gap-1">
         <UserList users={gameState.users} />
@@ -148,7 +155,9 @@ const MultiplayerGameContent = (props: IMultiplayerContentProps) => {
       </div>
 
       {/* Summoner Input */}
-      <SummonerInput onGameDataFetched={handleGameDataFetched} />
+      <div className="hidden sm:flex">
+        <SummonerInput onGameDataFetched={handleGameDataFetched} />
+      </div>
 
       {/* Game Info Display */}
       {gameState.gameId && gameState.gameStartTime && (
diff --git a/apps/web/package.json b/apps/web/package.json
index cac284b..324d73b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-toast": "^1.2.15",
     "@tanstack/react-query": "^5.90.8",
@@ -37,6 +38,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4f4d95..0c6b2a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ importers:
       '@radix-ui/react-icons':
         specifier: ^1.3.2
         version: 1.3.2(react@19.2.0)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.3)(react@19.2.0)
@@ -216,6 +219,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.18(tsx@4.20.6))
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       zustand:
         specifier: ^5.0.8
         version: 5.0.8(@types/react@19.2.3)(react@19.2.0)
@@ -1008,6 +1014,21 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
   '@grpc/grpc-js@1.14.1':
     resolution: {integrity: sha512-sPxgEWtPUR3EnRJCEtbGZG2iX8LQDUls2wUS3o27jg07KqJFMq6YDeWvMo1wfpmy3rqRdS0rivpLwhqQtEyCuQ==}
     engines: {node: '>=12.10.0'}
@@ -2162,9 +2183,25 @@ packages:
   '@protobufjs/utf8@1.1.0':
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -2209,6 +2246,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.11':
     resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
@@ -2258,6 +2304,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -2297,6 +2356,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -2373,6 +2445,33 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-visually-hidden@1.2.3':
     resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
     peerDependencies:
@@ -2386,6 +2485,9 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
@@ -2433,6 +2535,7 @@ packages:
   '@smithy/core@3.18.3':
     resolution: {integrity: sha512-qqpNskkbHOSfrbFbjhYj5o8VMXO26fvN1K/+HbCzUNlTuxgNcPRouUDNm+7D6CkN244WG7aK533Ne18UtJEgAA==}
     engines: {node: '>=18.0.0'}
+    deprecated: Please upgrade your lockfile to use the latest 3.x version of @smithy/core for various fixes, see https://github.com/smithy-lang/smithy-typescript/blob/main/packages/core/CHANGELOG.md
 
   '@smithy/credential-provider-imds@4.2.5':
     resolution: {integrity: sha512-BZwotjoZWn9+36nimwm/OLIcVe+KYRwzMjfhd4QT7QxPm9WY0HiOV8t/Wlh+HVUif0SBVV7ksq8//hPaBC/okQ==}
@@ -6885,6 +6988,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   walk-sync@0.2.7:
     resolution: {integrity: sha512-OH8GdRMowEFr0XSHQeX5fGweO6zSVHo7bG/0yJQx6LAj9Oukz0C8heI3/FYectT66gY0IPGe89kOvU410/UNpg==}
 
@@ -8725,6 +8834,23 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@floating-ui/utils@0.2.10': {}
+
   '@grpc/grpc-js@1.14.1':
     dependencies:
       '@grpc/proto-loader': 0.8.0
@@ -9964,8 +10090,19 @@ snapshots:
 
   '@protobufjs/utf8@1.1.0': {}
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.3
+      '@types/react-dom': 19.2.3(@types/react@19.2.3)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.3)(react@19.2.0)
@@ -10012,6 +10149,12 @@ snapshots:
       '@types/react': 19.2.3
       '@types/react-dom': 19.2.3(@types/react@19.2.3)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.3)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.3
+
   '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -10053,6 +10196,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.3
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.3
+      '@types/react-dom': 19.2.3(@types/react@19.2.3)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -10082,6 +10243,35 @@ snapshots:
       '@types/react': 19.2.3
       '@types/react-dom': 19.2.3(@types/react@19.2.3)
 
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.3)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.3
+      '@types/react-dom': 19.2.3(@types/react@19.2.3)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.2.3)(react@19.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.3)(react@19.2.0)
@@ -10150,6 +10340,26 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.3
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.3)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.3
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.3)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.3
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.3)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.3)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.3
+
   '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -10159,6 +10369,8 @@ snapshots:
       '@types/react': 19.2.3
       '@types/react-dom': 19.2.3(@types/react@19.2.3)
 
+  '@radix-ui/rect@1.1.1': {}
+
   '@rtsao/scc@1.1.0': {}
 
   '@scarf/scarf@1.4.0': {}
@@ -12409,7 +12621,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 7.0.1(eslint@8.57.1)
@@ -12450,7 +12662,7 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -12464,7 +12676,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -15655,6 +15867,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   walk-sync@0.2.7:
     dependencies:
       ensure-posix-path: 1.1.1

From 0fce2be11abed1cc67292908ebcb7e6e8487b187 Mon Sep 17 00:00:00 2001
From: Teczer <mehdi.hattou1@gmail.com>
Date: Wed, 26 Nov 2025 11:39:51 +0100
Subject: [PATCH 2/4] fix solo mode too

---
 apps/web/features/game/screens/game-solo.screen.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/features/game/screens/game-solo.screen.tsx b/apps/web/features/game/screens/game-solo.screen.tsx
index 1b8bf62..0efdc01 100644
--- a/apps/web/features/game/screens/game-solo.screen.tsx
+++ b/apps/web/features/game/screens/game-solo.screen.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { MobileUserListDrawer } from '@/features/game/components/mobile-user-list-drawer.component'
 import { mapEnemyParticipantsToRoles } from '@/lib/riot-role-mapping.util'
 import { GameControls } from '../components/game-controls.component'
 import { GameInfoDisplay } from '../components/game-info-display.component'
@@ -61,7 +62,15 @@ const SoloGameContent = () => {
       <GameControls volume={audio.volume} onToggleVolume={audio.toggleVolume} />
 
       {/* Summoner Input */}
-      <SummonerInput onGameDataFetched={handleGameDataFetched} />
+      <div className="hidden sm:flex">
+        <SummonerInput onGameDataFetched={handleGameDataFetched} />
+      </div>
+
+      {/* Mobile User List Drawer */}
+      <MobileUserListDrawer
+        users={[]}
+        onGameDataFetched={handleGameDataFetched}
+      />
 
       {/* Game Info Display */}
       {gameState.gameId && gameState.gameStartTime && (

From 3f77fa85d9387031c6b16d8d986f479cbffe3d6b Mon Sep 17 00:00:00 2001
From: Teczer <mehdi.hattou1@gmail.com>
Date: Wed, 26 Nov 2025 13:05:17 +0100
Subject: [PATCH 3/4] :wrench: refactor: remove unused game components and
 update import paths for better organization

---
 .../game-controls.component.tsx               |  0
 .../game/components/controls/index.ts         |  2 +
 .../{ => game}/flash-button.component.tsx     | 17 +++--
 .../features/game/components/game/index.ts    |  6 ++
 .../{ => game}/item-toggle.component.tsx      |  0
 .../{ => game}/role-card.component.tsx        |  4 +-
 .../timer-control-button.component.tsx        |  0
 .../{ => game}/timer-controls.component.tsx   |  0
 apps/web/features/game/components/index.ts    | 16 +++++
 .../features/game/components/room/index.ts    |  5 ++
 .../mobile-user-list-drawer.component.tsx     |  0
 .../{ => room}/mobile-user-list.component.tsx |  0
 .../{ => room}/room-info.component.tsx        |  0
 .../{ => room}/user-list.component.tsx        |  0
 .../connection-status.component.tsx           |  0
 .../game-info-display.component.tsx           |  0
 .../features/game/components/status/index.ts  |  3 +
 .../components/summoner-input.component.tsx   | 63 +++++--------------
 .../features/game/constants/game.constants.ts |  2 +-
 .../features/game/contexts/game.context.tsx   | 10 +--
 .../web/features/game/hooks/use-audio.hook.ts |  2 +-
 .../game/hooks/use-fetch-live-game.hook.ts    | 57 +++++++++++++++++
 .../game/hooks/use-flash-cooldown.hook.ts     |  4 +-
 .../game/hooks/use-game-timer.hook.ts         |  2 +-
 .../game/screens/game-multiplayer.screen.tsx  | 29 +++++----
 .../game/screens/game-solo.screen.tsx         | 19 +++---
 26 files changed, 151 insertions(+), 90 deletions(-)
 rename apps/web/features/game/components/{ => controls}/game-controls.component.tsx (100%)
 create mode 100644 apps/web/features/game/components/controls/index.ts
 rename apps/web/features/game/components/{ => game}/flash-button.component.tsx (86%)
 create mode 100644 apps/web/features/game/components/game/index.ts
 rename apps/web/features/game/components/{ => game}/item-toggle.component.tsx (100%)
 rename apps/web/features/game/components/{ => game}/role-card.component.tsx (94%)
 rename apps/web/features/game/components/{ => game}/timer-control-button.component.tsx (100%)
 rename apps/web/features/game/components/{ => game}/timer-controls.component.tsx (100%)
 create mode 100644 apps/web/features/game/components/index.ts
 create mode 100644 apps/web/features/game/components/room/index.ts
 rename apps/web/features/game/components/{ => room}/mobile-user-list-drawer.component.tsx (100%)
 rename apps/web/features/game/components/{ => room}/mobile-user-list.component.tsx (100%)
 rename apps/web/features/game/components/{ => room}/room-info.component.tsx (100%)
 rename apps/web/features/game/components/{ => room}/user-list.component.tsx (100%)
 rename apps/web/features/game/components/{ => status}/connection-status.component.tsx (100%)
 rename apps/web/features/game/components/{ => status}/game-info-display.component.tsx (100%)
 create mode 100644 apps/web/features/game/components/status/index.ts
 create mode 100644 apps/web/features/game/hooks/use-fetch-live-game.hook.ts

diff --git a/apps/web/features/game/components/game-controls.component.tsx b/apps/web/features/game/components/controls/game-controls.component.tsx
similarity index 100%
rename from apps/web/features/game/components/game-controls.component.tsx
rename to apps/web/features/game/components/controls/game-controls.component.tsx
diff --git a/apps/web/features/game/components/controls/index.ts b/apps/web/features/game/components/controls/index.ts
new file mode 100644
index 0000000..f486ccb
--- /dev/null
+++ b/apps/web/features/game/components/controls/index.ts
@@ -0,0 +1,2 @@
+export { GameControls } from './game-controls.component'
+
diff --git a/apps/web/features/game/components/flash-button.component.tsx b/apps/web/features/game/components/game/flash-button.component.tsx
similarity index 86%
rename from apps/web/features/game/components/flash-button.component.tsx
rename to apps/web/features/game/components/game/flash-button.component.tsx
index 02878fa..1da2721 100644
--- a/apps/web/features/game/components/flash-button.component.tsx
+++ b/apps/web/features/game/components/game/flash-button.component.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { cn } from '@/lib/utils'
-import Image from 'next/image'
-import { memo, useEffect, useState } from 'react'
 import {
   formatCooldown,
   getRemainingTime,
-} from '../hooks/use-flash-cooldown.hook'
-import type { TRole } from '../types/game.types'
+} from '@/features/game/hooks/use-flash-cooldown.hook'
+import type { TRole } from '@/features/game/types/game.types'
+import { cn } from '@/lib/utils'
+import Image from 'next/image'
+import { memo, useEffect, useState } from 'react'
 
 interface IFlashButtonProps {
   role: TRole
@@ -22,21 +22,18 @@ const FlashButtonComponent = (props: IFlashButtonProps) => {
   const { role, iconSrc, cooldown, onClick, summonerName, className } = props
   const isDDragonIcon = iconSrc.includes('ddragon.leagueoflegends.com')
 
-  // ✅ Force re-render every second to update countdown display
   const [tick, setTick] = useState(0)
 
   useEffect(() => {
-    // Only run interval if cooldown is active
     if (typeof cooldown === 'number') {
       const interval = setInterval(() => {
-        setTick((prev) => prev + 1) // Force re-render
-      }, 1000) // Update every second
+        setTick((prev) => prev + 1)
+      }, 1000)
 
       return () => clearInterval(interval)
     }
   }, [cooldown])
 
-  // ✅ Calculate remaining time dynamically from timestamp (recalculated on every tick)
   const remainingSeconds = getRemainingTime(cooldown)
   const isOnCooldown = remainingSeconds > 0
 
diff --git a/apps/web/features/game/components/game/index.ts b/apps/web/features/game/components/game/index.ts
new file mode 100644
index 0000000..d716a35
--- /dev/null
+++ b/apps/web/features/game/components/game/index.ts
@@ -0,0 +1,6 @@
+export { RoleCard } from './role-card.component'
+export { FlashButton } from './flash-button.component'
+export { TimerControls } from './timer-controls.component'
+export { TimerControlButton } from './timer-control-button.component'
+export { ItemToggle } from './item-toggle.component'
+
diff --git a/apps/web/features/game/components/item-toggle.component.tsx b/apps/web/features/game/components/game/item-toggle.component.tsx
similarity index 100%
rename from apps/web/features/game/components/item-toggle.component.tsx
rename to apps/web/features/game/components/game/item-toggle.component.tsx
diff --git a/apps/web/features/game/components/role-card.component.tsx b/apps/web/features/game/components/game/role-card.component.tsx
similarity index 94%
rename from apps/web/features/game/components/role-card.component.tsx
rename to apps/web/features/game/components/game/role-card.component.tsx
index 5f52125..b96f77a 100644
--- a/apps/web/features/game/components/role-card.component.tsx
+++ b/apps/web/features/game/components/game/role-card.component.tsx
@@ -2,8 +2,8 @@
 
 import { cn } from '@/lib/utils'
 import { memo } from 'react'
-import { getRemainingTime } from '../hooks/use-flash-cooldown.hook'
-import type { ILeagueRole, ISummonerData } from '../types/game.types'
+import { getRemainingTime } from '@/features/game/hooks/use-flash-cooldown.hook'
+import type { ILeagueRole, ISummonerData } from '@/features/game/types/game.types'
 import { FlashButton } from './flash-button.component'
 import { ItemToggle } from './item-toggle.component'
 import { TimerControls } from './timer-controls.component'
diff --git a/apps/web/features/game/components/timer-control-button.component.tsx b/apps/web/features/game/components/game/timer-control-button.component.tsx
similarity index 100%
rename from apps/web/features/game/components/timer-control-button.component.tsx
rename to apps/web/features/game/components/game/timer-control-button.component.tsx
diff --git a/apps/web/features/game/components/timer-controls.component.tsx b/apps/web/features/game/components/game/timer-controls.component.tsx
similarity index 100%
rename from apps/web/features/game/components/timer-controls.component.tsx
rename to apps/web/features/game/components/game/timer-controls.component.tsx
diff --git a/apps/web/features/game/components/index.ts b/apps/web/features/game/components/index.ts
new file mode 100644
index 0000000..20d5a03
--- /dev/null
+++ b/apps/web/features/game/components/index.ts
@@ -0,0 +1,16 @@
+// Game components
+export * from './game'
+
+// Room components
+export * from './room'
+
+// Status components
+export * from './status'
+
+// Controls components
+export * from './controls'
+
+// Direct components
+export { LoadingSpinner } from './loading-spinner.component'
+export { SummonerInput } from './summoner-input.component'
+
diff --git a/apps/web/features/game/components/room/index.ts b/apps/web/features/game/components/room/index.ts
new file mode 100644
index 0000000..c39f52b
--- /dev/null
+++ b/apps/web/features/game/components/room/index.ts
@@ -0,0 +1,5 @@
+export { RoomInfo } from './room-info.component'
+export { UserList } from './user-list.component'
+export { MobileUserList } from './mobile-user-list.component'
+export { MobileUserListDrawer } from './mobile-user-list-drawer.component'
+
diff --git a/apps/web/features/game/components/mobile-user-list-drawer.component.tsx b/apps/web/features/game/components/room/mobile-user-list-drawer.component.tsx
similarity index 100%
rename from apps/web/features/game/components/mobile-user-list-drawer.component.tsx
rename to apps/web/features/game/components/room/mobile-user-list-drawer.component.tsx
diff --git a/apps/web/features/game/components/mobile-user-list.component.tsx b/apps/web/features/game/components/room/mobile-user-list.component.tsx
similarity index 100%
rename from apps/web/features/game/components/mobile-user-list.component.tsx
rename to apps/web/features/game/components/room/mobile-user-list.component.tsx
diff --git a/apps/web/features/game/components/room-info.component.tsx b/apps/web/features/game/components/room/room-info.component.tsx
similarity index 100%
rename from apps/web/features/game/components/room-info.component.tsx
rename to apps/web/features/game/components/room/room-info.component.tsx
diff --git a/apps/web/features/game/components/user-list.component.tsx b/apps/web/features/game/components/room/user-list.component.tsx
similarity index 100%
rename from apps/web/features/game/components/user-list.component.tsx
rename to apps/web/features/game/components/room/user-list.component.tsx
diff --git a/apps/web/features/game/components/connection-status.component.tsx b/apps/web/features/game/components/status/connection-status.component.tsx
similarity index 100%
rename from apps/web/features/game/components/connection-status.component.tsx
rename to apps/web/features/game/components/status/connection-status.component.tsx
diff --git a/apps/web/features/game/components/game-info-display.component.tsx b/apps/web/features/game/components/status/game-info-display.component.tsx
similarity index 100%
rename from apps/web/features/game/components/game-info-display.component.tsx
rename to apps/web/features/game/components/status/game-info-display.component.tsx
diff --git a/apps/web/features/game/components/status/index.ts b/apps/web/features/game/components/status/index.ts
new file mode 100644
index 0000000..672c205
--- /dev/null
+++ b/apps/web/features/game/components/status/index.ts
@@ -0,0 +1,3 @@
+export { ConnectionStatus } from './connection-status.component'
+export { GameInfoDisplay } from './game-info-display.component'
+
diff --git a/apps/web/features/game/components/summoner-input.component.tsx b/apps/web/features/game/components/summoner-input.component.tsx
index d492fd0..94b54be 100644
--- a/apps/web/features/game/components/summoner-input.component.tsx
+++ b/apps/web/features/game/components/summoner-input.component.tsx
@@ -9,8 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { toast } from '@/hooks/use-toast.hook'
-import { fetchLiveGameData } from '@/lib/riot-api.service'
+import { useFetchLiveGame } from '@/features/game/hooks/use-fetch-live-game.hook'
 import { cn } from '@/lib/utils'
 import type { RiotRegion } from '@loltimeflash/shared'
 import { useState } from 'react'
@@ -44,48 +43,12 @@ export const SummonerInput = (props: ISummonerInputProps) => {
   const { onGameDataFetched, className } = props
   const [summonerName, setSummonerName] = useState('')
   const [region, setRegion] = useState<RiotRegion>('euw1')
-  const [isLoading, setIsLoading] = useState(false)
 
-  const handleFetchLiveGame = async () => {
-    if (!summonerName.trim()) {
-      toast({
-        title: '⚠️ Missing Information',
-        description: 'Please enter a summoner name (e.g., YourName#TAG)',
-        duration: 2000,
-      })
-      return
+  const { mutateAsync: fetchLiveGame, isPending: isLoading } = useFetchLiveGame(
+    {
+      onSuccess: onGameDataFetched,
     }
-
-    setIsLoading(true)
-
-    try {
-      const response = await fetchLiveGameData(summonerName, region)
-
-      if (response.success && response.data) {
-        const enemyCount = response.data.enemies?.length || 0
-        toast({
-          title: '✅ Success!',
-          description: `Found ${enemyCount} enemy champions in live game`,
-          duration: 2000,
-        })
-        onGameDataFetched(response.data)
-      } else {
-        toast({
-          title: '❌ Error',
-          description: response.error || 'Failed to fetch live game data',
-          duration: 3000,
-        })
-      }
-    } catch (error) {
-      toast({
-        title: '❌ Error',
-        description: 'Network error - please try again',
-        duration: 3000,
-      })
-    } finally {
-      setIsLoading(false)
-    }
-  }
+  )
 
   return (
     <div
@@ -104,25 +67,25 @@ export const SummonerInput = (props: ISummonerInputProps) => {
           value={summonerName}
           onChange={(e) => setSummonerName(e.target.value)}
           disabled={isLoading}
-          onKeyDown={(e) => {
+          onKeyDown={async (e) => {
             if (e.key === 'Enter') {
-              handleFetchLiveGame()
+              await fetchLiveGame({ summonerName, region })
             }
           }}
         />
 
         <Select
           value={region}
-          onValueChange={(value) => setRegion(value as RiotRegion)}
+          onValueChange={(value: RiotRegion) => setRegion(value)}
           disabled={isLoading}
         >
           <SelectTrigger className="w-full sm:w-32">
             <SelectValue placeholder="Select region" />
           </SelectTrigger>
           <SelectContent>
-            {REGIONS.map((r) => (
-              <SelectItem key={r.value} value={r.value}>
-                {r.label}
+            {REGIONS.map((region) => (
+              <SelectItem key={region.value} value={region.value}>
+                {region.label}
               </SelectItem>
             ))}
           </SelectContent>
@@ -130,7 +93,9 @@ export const SummonerInput = (props: ISummonerInputProps) => {
       </div>
 
       <Button
-        onClick={handleFetchLiveGame}
+        onClick={async () => {
+          await fetchLiveGame({ summonerName, region })
+        }}
         disabled={isLoading || !summonerName.trim()}
         variant="secondary"
       >
diff --git a/apps/web/features/game/constants/game.constants.ts b/apps/web/features/game/constants/game.constants.ts
index 39cde0a..5566269 100644
--- a/apps/web/features/game/constants/game.constants.ts
+++ b/apps/web/features/game/constants/game.constants.ts
@@ -1,4 +1,4 @@
-import type { IGameData, ILeagueRole, ISummonerData } from '../types/game.types'
+import type { IGameData, ILeagueRole, ISummonerData } from '@/features/game/types/game.types'
 
 /**
  * Flash cooldown durations in seconds
diff --git a/apps/web/features/game/contexts/game.context.tsx b/apps/web/features/game/contexts/game.context.tsx
index cd68708..de97c17 100644
--- a/apps/web/features/game/contexts/game.context.tsx
+++ b/apps/web/features/game/contexts/game.context.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import { createContext, useCallback, useContext, useState } from 'react'
-import { DEFAULT_GAME_DATA } from '../constants/game.constants'
-import { useAudio } from '../hooks/use-audio.hook'
-import { calculateFlashCooldown } from '../hooks/use-flash-cooldown.hook'
-import { useGameTimer } from '../hooks/use-game-timer.hook'
-import type { IChampionData, IGameData, TRole } from '../types/game.types'
+import { DEFAULT_GAME_DATA } from '@/features/game/constants/game.constants'
+import { useAudio } from '@/features/game/hooks/use-audio.hook'
+import { calculateFlashCooldown } from '@/features/game/hooks/use-flash-cooldown.hook'
+import { useGameTimer } from '@/features/game/hooks/use-game-timer.hook'
+import type { IChampionData, IGameData, TRole } from '@/features/game/types/game.types'
 
 interface IGameContextValue {
   gameState: IGameData
diff --git a/apps/web/features/game/hooks/use-audio.hook.ts b/apps/web/features/game/hooks/use-audio.hook.ts
index 2f2019d..2ffd0ad 100644
--- a/apps/web/features/game/hooks/use-audio.hook.ts
+++ b/apps/web/features/game/hooks/use-audio.hook.ts
@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect } from 'react'
-import { FLASH_AUDIO_PATH, AUDIO_VOLUME } from '../constants/game.constants'
+import { FLASH_AUDIO_PATH, AUDIO_VOLUME } from '@/features/game/constants/game.constants'
 
 interface IUseAudioReturn {
   play: () => Promise<void>
diff --git a/apps/web/features/game/hooks/use-fetch-live-game.hook.ts b/apps/web/features/game/hooks/use-fetch-live-game.hook.ts
new file mode 100644
index 0000000..4ee1cd6
--- /dev/null
+++ b/apps/web/features/game/hooks/use-fetch-live-game.hook.ts
@@ -0,0 +1,57 @@
+import { toast } from '@/hooks/use-toast.hook'
+import { fetchLiveGameData } from '@/lib/riot-api.service'
+import type { FetchLiveGameResponse, RiotRegion } from '@loltimeflash/shared'
+import { useMutation } from '@tanstack/react-query'
+
+interface IFetchLiveGameParams {
+  summonerName: string
+  region: RiotRegion
+}
+
+type TFetchLiveGameData = NonNullable<FetchLiveGameResponse['data']>
+
+interface IUseFetchLiveGameOptions {
+  onSuccess?: (data: TFetchLiveGameData) => void
+}
+
+interface IUseFetchLiveGameReturn {
+  mutate: (params: IFetchLiveGameParams) => void
+  mutateAsync: (params: IFetchLiveGameParams) => Promise<TFetchLiveGameData>
+  isPending: boolean
+}
+
+export const useFetchLiveGame = (
+  options?: IUseFetchLiveGameOptions
+): IUseFetchLiveGameReturn => {
+  const { mutate, mutateAsync, isPending } = useMutation({
+    mutationFn: async ({ summonerName, region }: IFetchLiveGameParams) => {
+      const response = await fetchLiveGameData(summonerName, region)
+      if (!response.success || !response.data) {
+        throw new Error(response.error || 'Failed to fetch live game data')
+      }
+      return response.data
+    },
+    onSuccess: (data) => {
+      const enemyCount = data.enemies?.length || 0
+      toast({
+        title: '✅ Success!',
+        description: `Found ${enemyCount} enemy champions in live game`,
+        duration: 2000,
+      })
+      options?.onSuccess?.(data)
+    },
+    onError: (error: Error) => {
+      toast({
+        title: '❌ Error',
+        description: error.message || 'Network error - please try again',
+        duration: 3000,
+      })
+    },
+  })
+
+  return {
+    mutate,
+    mutateAsync,
+    isPending,
+  }
+}
diff --git a/apps/web/features/game/hooks/use-flash-cooldown.hook.ts b/apps/web/features/game/hooks/use-flash-cooldown.hook.ts
index c0a1d0d..5d2b6c9 100644
--- a/apps/web/features/game/hooks/use-flash-cooldown.hook.ts
+++ b/apps/web/features/game/hooks/use-flash-cooldown.hook.ts
@@ -1,10 +1,10 @@
-import type { TRole, ISummonerData } from '../types/game.types'
+import type { TRole, ISummonerData } from '@/features/game/types/game.types'
 import {
   FLASH_BASE_COOLDOWN,
   FLASH_COOLDOWN_WITH_BOOTS,
   FLASH_COOLDOWN_WITH_RUNE,
   FLASH_COOLDOWN_WITH_BOTH,
-} from '../constants/game.constants'
+} from '@/features/game/constants/game.constants'
 
 interface ICalculateCooldownOptions {
   lucidityBoots: boolean
diff --git a/apps/web/features/game/hooks/use-game-timer.hook.ts b/apps/web/features/game/hooks/use-game-timer.hook.ts
index f639669..bca4b45 100644
--- a/apps/web/features/game/hooks/use-game-timer.hook.ts
+++ b/apps/web/features/game/hooks/use-game-timer.hook.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import type { IGameData, IRoleData } from '../types/game.types'
+import type { IGameData, IRoleData } from '@/features/game/types/game.types'
 
 interface IUseGameTimerOptions {
   gameState: IGameData
diff --git a/apps/web/features/game/screens/game-multiplayer.screen.tsx b/apps/web/features/game/screens/game-multiplayer.screen.tsx
index a6305fd..a8ff661 100644
--- a/apps/web/features/game/screens/game-multiplayer.screen.tsx
+++ b/apps/web/features/game/screens/game-multiplayer.screen.tsx
@@ -1,19 +1,26 @@
 'use client'
 
+import { GameControls } from '@/features/game/components/controls'
+import { RoleCard } from '@/features/game/components/game'
+import {
+  MobileUserListDrawer,
+  RoomInfo,
+  UserList,
+} from '@/features/game/components/room'
+import {
+  ConnectionStatus,
+  GameInfoDisplay,
+} from '@/features/game/components/status'
+import { SummonerInput } from '@/features/game/components/summoner-input.component'
+import { LEAGUE_ROLES } from '@/features/game/constants/game.constants'
+import {
+  GameProvider,
+  useGameContext,
+} from '@/features/game/contexts/game.context'
+import type { TRole } from '@/features/game/types/game.types'
 import { useSocket } from '@/hooks/use-socket.hook'
 import { mapEnemyParticipantsToRoles } from '@/lib/riot-role-mapping.util'
 import { useEffect } from 'react'
-import { ConnectionStatus } from '../components/connection-status.component'
-import { GameControls } from '../components/game-controls.component'
-import { GameInfoDisplay } from '../components/game-info-display.component'
-import { MobileUserListDrawer } from '../components/mobile-user-list-drawer.component'
-import { RoleCard } from '../components/role-card.component'
-import { RoomInfo } from '../components/room-info.component'
-import { SummonerInput } from '../components/summoner-input.component'
-import { UserList } from '../components/user-list.component'
-import { LEAGUE_ROLES } from '../constants/game.constants'
-import { GameProvider, useGameContext } from '../contexts/game.context'
-import type { TRole } from '../types/game.types'
 interface IMultiplayerContentProps {
   roomId: string
   username: string
diff --git a/apps/web/features/game/screens/game-solo.screen.tsx b/apps/web/features/game/screens/game-solo.screen.tsx
index 0efdc01..eb64852 100644
--- a/apps/web/features/game/screens/game-solo.screen.tsx
+++ b/apps/web/features/game/screens/game-solo.screen.tsx
@@ -1,14 +1,17 @@
 'use client'
 
-import { MobileUserListDrawer } from '@/features/game/components/mobile-user-list-drawer.component'
+import { GameControls } from '@/features/game/components/controls'
+import { RoleCard } from '@/features/game/components/game'
+import { MobileUserListDrawer } from '@/features/game/components/room'
+import { GameInfoDisplay } from '@/features/game/components/status'
+import { SummonerInput } from '@/features/game/components/summoner-input.component'
+import { LEAGUE_ROLES } from '@/features/game/constants/game.constants'
+import {
+  GameProvider,
+  useGameContext,
+} from '@/features/game/contexts/game.context'
+import type { TRole } from '@/features/game/types/game.types'
 import { mapEnemyParticipantsToRoles } from '@/lib/riot-role-mapping.util'
-import { GameControls } from '../components/game-controls.component'
-import { GameInfoDisplay } from '../components/game-info-display.component'
-import { RoleCard } from '../components/role-card.component'
-import { SummonerInput } from '../components/summoner-input.component'
-import { LEAGUE_ROLES } from '../constants/game.constants'
-import { GameProvider, useGameContext } from '../contexts/game.context'
-import type { TRole } from '../types/game.types'
 
 const SoloGameContent = () => {
   const {

From 8551be4bd9343aad137030baf59f5f3b0f050750 Mon Sep 17 00:00:00 2001
From: Teczer <mehdi.hattou1@gmail.com>
Date: Wed, 26 Nov 2025 13:07:43 +0100
Subject: [PATCH 4/4] bump version

---
 AGENTS.md    |  4 ++--
 README.md    |  2 +-
 VERSIONS.md  | 40 ++++++++++++++++++++++++++++++++++++++++
 package.json |  2 +-
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 2b0bac4..95c1a20 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1802,6 +1802,6 @@ For questions, issues, or contributions:
 
 ---
 
-**Last Updated**: November 24, 2025
-**Version**: 2.3.2 - Username Validation & Lobby Refactor
+**Last Updated**: November 26, 2025
+**Version**: 2.3.3 - Components Architecture Refactor
 **Status**: ✅ Production Ready (API + Web + Docker + Timer Sync + Calibration)
diff --git a/README.md b/README.md
index 8f5311a..624275a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 **League of Legends Website Tool: Easily Time and Communicate Summoner Spells - THE FLASH! 🌟**
 
-[![Version](https://img.shields.io/badge/version-2.3.2-brightgreen?style=flat)](https://github.com/yourusername/LolTimeFlash/releases)
+[![Version](https://img.shields.io/badge/version-2.3.3-brightgreen?style=flat)](https://github.com/yourusername/LolTimeFlash/releases)
 [![Next.js](https://img.shields.io/badge/Next.js-16.0.1-black?style=flat&logo=next.js)](https://nextjs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.7.2-blue?style=flat&logo=typescript)](https://www.typescriptlang.org/)
 [![Socket.IO](https://img.shields.io/badge/Socket.IO-4.8.1-010101?style=flat&logo=socket.io)](https://socket.io/)
diff --git a/VERSIONS.md b/VERSIONS.md
index 124f60d..7f123cf 100644
--- a/VERSIONS.md
+++ b/VERSIONS.md
@@ -7,6 +7,46 @@
 
 ## 📚 Version History
 
+### Version 2.3.3 - November 2025 (Components Architecture Refactor)
+
+**Refactoring** :
+
+- ♻️ **Components Organization** : Réorganisation des composants en dossiers logiques (`game/`, `room/`, `status/`, `controls/`)
+- 🔄 **Path Aliases Migration** : Migration de tous les imports relatifs vers des alias TypeScript (`@/features/game/...`)
+- 📁 **Simplified Structure** : Suppression des dossiers `ui/` et `input/` inutiles
+
+**Technical Changes** :
+
+**Frontend** :
+- Nouvelle structure : `components/game/`, `components/room/`, `components/status/`, `components/controls/`
+- Migration complète des imports relatifs vers `@/features/game/...`
+- Création de barrel exports (`index.ts`) pour chaque dossier
+- Amélioration du support IDE (autocomplete, refactoring)
+
+**Fichiers Modifiés** :
+
+| Fichier                                                      | Changements                                    |
+| ------------------------------------------------------------ | ---------------------------------------------- |
+| `apps/web/features/game/components/game/*`                  | Déplacés depuis root, imports mis à jour     |
+| `apps/web/features/game/components/room/*`                  | Déplacés depuis root, imports mis à jour     |
+| `apps/web/features/game/components/status/*`                | Déplacés depuis root, imports mis à jour     |
+| `apps/web/features/game/components/controls/*`              | Déplacés depuis root, imports mis à jour     |
+| `apps/web/features/game/components/*.tsx`                   | Imports mis à jour vers alias                 |
+| `apps/web/features/game/screens/*.tsx`                      | Imports mis à jour vers alias                 |
+| `apps/web/features/game/contexts/*.tsx`                     | Imports mis à jour vers alias                 |
+| `apps/web/features/game/hooks/*.ts`                         | Imports mis à jour vers alias                 |
+| `apps/web/features/game/constants/*.ts`                     | Imports mis à jour vers alias                 |
+
+**Impact** :
+
+- ✅ Organisation améliorée (composants groupés par fonctionnalité)
+- ✅ Imports cohérents (tous utilisent des alias)
+- ✅ Support IDE amélioré (autocomplete, refactoring)
+- ✅ Maintenabilité accrue (navigation facilitée)
+- ✅ Scalabilité améliorée (ajout de composants simplifié)
+
+---
+
 ### Version 2.3.2 - November 2025 (Username Validation & Lobby Refactor)
 
 **New Features** :
diff --git a/package.json b/package.json
index 94773fb..e8653de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "loltimeflash-monorepo",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "private": true,
   "description": "LolTimeFlash - Real-time Flash timer tracking for League of Legends",
   "author": "LolTimeFlash Team",