Refactor store context and improve responsiveness across the application

Refactored the `useStore` hook to be imported from a dedicated `StoreContext` to improve code organization and maintainability. Also, enhanced responsive design for better usability on various screen sizes, including tablet-specific adjustments for the sidebar and header.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 95e8aab4-f39f-4b48-aa57-a759ec15ba3d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/95e8aab4-f39f-4b48-aa57-a759ec15ba3d/A90CXrX

client/src/hooks/use-screen-size.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react'
+
+export type ScreenSize = 'mobile' | 'tablet' | 'desktop'
+
+export interface ScreenBreakpoints {
+  mobile: number
+  tablet: number
+  desktop: number
+}
+
+const defaultBreakpoints: ScreenBreakpoints = {
+  mobile: 768,
+  tablet: 1024, 
+  desktop: 1280
+}
+
+export function useScreenSize(breakpoints: ScreenBreakpoints = defaultBreakpoints) {
+  const [screenSize, setScreenSize] = useState<ScreenSize>('desktop')
+  const [dimensions, setDimensions] = useState({
+    width: typeof window !== 'undefined' ? window.innerWidth : 1200,
+    height: typeof window !== 'undefined' ? window.innerHeight : 800
+  })
+
+  useEffect(() => {
+    const getScreenSize = (width: number): ScreenSize => {
+      if (width < breakpoints.mobile) return 'mobile'
+      if (width <= breakpoints.tablet) return 'tablet' // Inclut 1024px comme tablette
+      return 'desktop'
+    }
+
+    const updateScreenSize = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      setDimensions({ width, height })
+      setScreenSize(getScreenSize(width))
+    }
+
+    // Set initial values
+    updateScreenSize()
+
+    // Add event listener
+    window.addEventListener('resize', updateScreenSize)
+    
+    // Cleanup
+    return () => window.removeEventListener('resize', updateScreenSize)
+  }, [breakpoints])
+
+  return {
+    screenSize,
+    dimensions,
+    isMobile: screenSize === 'mobile',
+    isTablet: screenSize === 'tablet', 
+    isDesktop: screenSize === 'desktop',
+    isMobileOrTablet: screenSize === 'mobile' || screenSize === 'tablet',
+    isTabletOrDesktop: screenSize === 'tablet' || screenSize === 'desktop'
+  }
+}