Improve calendar view by adding a responsive list layout

Introduce a new component for a responsive calendar list view and update the existing calendar view to conditionally render based on screen size.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ER8Naji

client/src/hooks/use-media-query.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    
+    // Set initial value
+    setMatches(media.matches);
+
+    // Define callback for changes
+    const listener = (e: MediaQueryListEvent) => {
+      setMatches(e.matches);
+    };
+
+    // Modern browsers
+    if (media.addEventListener) {
+      media.addEventListener('change', listener);
+      return () => media.removeEventListener('change', listener);
+    } 
+    // Legacy browsers
+    else {
+      media.addListener(listener);
+      return () => media.removeListener(listener);
+    }
+  }, [query]);
+
+  return matches;
+}