Adapt rooms page to small screens.

src/modules/room/RoomChat.tsx

@@ -50,6 +50,7 @@ const RoomChatInner: FC<Props> = ({ loginUserName, room }) => {
   );
 };
 
+// TODO: Back button on small-enough screens (below `md`).
 const RoomChat: FC<Props> = ({ loginUserName, room }) => {
   const dispatch = useDispatch();
 

src/modules/room/RoomList.tsx

@@ -3,9 +3,13 @@ import { useDispatch } from "react-redux";
 
 import SearchableList from "components/SearchableList";
 import RoomListEntry from "modules/room/RoomListEntry";
-import { RoomSliceState, roomGetAll } from "modules/room/slice";
+import { RoomMap, roomGetAll } from "modules/room/slice";
 
-const RoomList: FC<RoomSliceState> = ({ rooms }) => {
+interface Props {
+  rooms: RoomMap;
+}
+
+const RoomList: FC<Props> = ({ rooms }) => {
   const dispatch = useDispatch();
 
   const onRefresh: ReactEventHandler = (event) => {

src/modules/room/RoomsPane.tsx

@@ -5,58 +5,82 @@ import { Switch, Route } from "react-router-dom";
 
 import { decode } from "modules/base64";
 import { selectLogin } from "modules/login/slice";
-import { RoomMap, selectAllRooms } from "modules/room/slice";
+import { RoomState, selectAllRooms } from "modules/room/slice";
 import RoomBanner from "modules/room/RoomBanner";
 import RoomChat from "modules/room/RoomChat";
 import RoomList from "modules/room/RoomList";
 
 interface ChatProps {
   loginUserName: string;
-  rooms: RoomMap;
+  roomName?: string;
+  room?: RoomState;
 }
 
-interface UrlParams {
-  roomId: string;
-}
-
-const RoomChatPane: FC<ChatProps> = ({ loginUserName, rooms }) => {
-  const { roomId } = useParams<UrlParams>();
-
-  if (roomId === undefined) {
+const RoomChatPane: FC<ChatProps> = ({ loginUserName, roomName, room }) => {
+  if (roomName === undefined) {
     return <RoomBanner title="Select a room" />;
   }
 
-  const name = decode(roomId);
-  const room = rooms[name];
   if (room === undefined) {
-    return <RoomBanner title={`Room ${name} not found`} />;
+    return <RoomBanner title={`Room ${roomName} not found`} />;
   }
 
   return <RoomChat loginUserName={loginUserName} room={room} />;
 };
 
-const RoomsPane: FC<{}> = () => {
-  const { path } = useRouteMatch();
+interface UrlParams {
+  roomId: string;
+}
+
+const RoomsPaneInner: FC<{}> = () => {
   const login = useSelector(selectLogin);
   const rooms = useSelector(selectAllRooms);
+  const { roomId } = useParams<UrlParams>();
+
+  // When we have not chosen a room, we always show the list. For small screens
+  // it takes up the whole width, whereas for larger screens it is on the left.
+  let listClass = "w-full md:w-80 h-full";
+
+  let name;
+  let room;
+  if (roomId !== undefined) {
+    name = decode(roomId);
+    room = rooms[name];
+
+    // When we have chosen a room (even if it does not exist), and the screen is
+    // not large enough, then we hide the list and show only the chat.
+    listClass += " hidden md:block";
+  }
 
   return (
     <div className="h-full w-full flex">
-      <div className="w-80 h-full">
+      <div className={listClass}>
         <RoomList rooms={rooms} />
       </div>
       <div className="flex-1 overflow-auto">
-        <Switch>
-          <Route exact path={path}>
-            <RoomChatPane rooms={rooms} loginUserName={login.username!} />
-          </Route>
-          <Route path={`${path}/:roomId`}>
-            <RoomChatPane rooms={rooms} loginUserName={login.username!} />
-          </Route>
-        </Switch>
+        <RoomChatPane
+          roomName={name}
+          room={room}
+          loginUserName={login.username!}
+        />
       </div>
     </div>
   );
 };
 
+const RoomsPane: FC<{}> = () => {
+  const { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route exact path={path}>
+        <RoomsPaneInner />
+      </Route>
+      <Route path={`${path}/:roomId`}>
+        <RoomsPaneInner />
+      </Route>
+    </Switch>
+  );
+};
+
 export default RoomsPane;