refactor: migrate from Next.js to SolidJS and GraphQL

- Converted web application from Next.js to SolidJS with Vite
- Replaced React components with SolidJS components
- Implemented GraphQL client using URQL
- Added authentication, room, and chat components
- Updated project structure and configuration files
- Removed unnecessary Next.js and docs-related files
- Added Docker support for web and API applications

apps/web/src/components/room-list.tsx

@@ -0,0 +1,89 @@
+import { createSignal, createEffect, For, Show } from 'solid-js';
+import { gql } from '@urql/core';
+import { createQuery, createSubscription } from '@urql/solid';
+import { Room } from '../types';
+
+const ROOMS_QUERY = gql`
+  query GetRooms {
+    rooms {
+      id
+      name
+      description
+      isPrivate
+      createdAt
+    }
+  }
+`;
+
+const ROOM_ADDED_SUBSCRIPTION = gql`
+  subscription OnRoomAdded {
+    roomAdded {
+      id
+      name
+      description
+      isPrivate
+      createdAt
+    }
+  }
+`;
+
+interface RoomListProps {
+  onSelectRoom: (roomId: string) => void;
+  selectedRoomId?: string;
+}
+
+export function RoomList(props: RoomListProps) {
+  const [rooms, setRooms] = createSignal<Room[]>([]);
+
+  // Query rooms
+  const [roomsQuery] = createQuery({
+    query: ROOMS_QUERY,
+  });
+
+  // Subscribe to new rooms
+  const [roomAddedSubscription] = createSubscription({
+    query: ROOM_ADDED_SUBSCRIPTION,
+  });
+
+  // Load initial rooms
+  createEffect(() => {
+    const result = roomsQuery;
+    if (result.data?.rooms) {
+      setRooms(result.data.rooms);
+    }
+  });
+
+  // Handle new rooms from subscription
+  createEffect(() => {
+    const result = roomAddedSubscription;
+    if (result.data?.roomAdded) {
+      const newRoom = result.data.roomAdded;
+      setRooms((prev) => {
+        // Check if room already exists
+        if (prev.some((room) => room.id === newRoom.id)) {
+          return prev;
+        }
+        return [...prev, newRoom];
+      });
+    }
+  });
+
+  return (
+    <div class='room-list'>
+      <h2>Chat Rooms</h2>
+      <Show when={!roomsQuery.fetching} fallback={<div>Loading rooms...</div>}>
+        <For each={rooms()}>
+          {(room) => (
+            <div
+              class={`room-item ${props.selectedRoomId === room.id ? 'selected' : ''}`}
+              onClick={() => props.onSelectRoom(room.id)}
+            >
+              <div class='room-name'>{room.name}</div>
+              <div class='room-description'>{room.description}</div>
+            </div>
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}