feat(ui): Community rooms (#372)

* chore(vim): disable eslint.experimental.useFlatConfig

https://github.com/neoclide/coc-eslint/issues/41#issuecomment-563879603

* feat(ui): implement community rooms

* feat(ui): remove old community room link

* feat(ui): improve room label

.vim/coc-settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": false
+}

src/config/communityRooms.ts

@@ -0,0 +1,10 @@
+export const communityRoomNames = [
+  'buy-and-sell',
+  'crypto',
+  'hacking',
+  'leaks',
+  'news',
+  'organize',
+  'politics',
+  'resist',
+]

src/pages/About/About.tsx

@@ -57,10 +57,6 @@ When you connect with a peer, Chitchatter automatically attempts to use [public-
 
 All public and private keys are generated locally. Your private key is never sent to any peer or server.
 
-##### Community rooms
-
-There is [a public list of community rooms](https://github.com/jeremyckahn/chitchatter/wiki/Chitchatter-Community-Rooms) that you can join to discuss various topics.
-
 ##### Conversation backfilling
 
 Conversation transcripts are erased from local memory as soon as you close the page or navigate away from the room. Conversations are only ever held in volatile memory and never persisted to any disk by Chitchatter.

src/pages/Home/CommunityRoomSelector.tsx

@@ -0,0 +1,67 @@
+import { useState, SyntheticEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Autocomplete from '@mui/material/Autocomplete'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { communityRoomNames } from 'config/communityRooms'
+
+export const CommunityRoomSelector = () => {
+  const navigate = useNavigate()
+  const [selectedRoom, setSelectedRoom] = useState<string | null>(null)
+
+  const handleRoomNameChange = (
+    _event: SyntheticEvent<Element, Event>,
+    roomName: string | null
+  ) => {
+    setSelectedRoom(roomName)
+  }
+
+  const handleJoinClick = () => {
+    navigate(`/public/${selectedRoom}`)
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel1-content"
+        id="panel1-header"
+        sx={{
+          fontWeight: 'bold',
+        }}
+      >
+        Community rooms
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography variant="body1">
+          You can also chat in a public community room. You'll be anonymous, but
+          be careful what information you choose to share.
+        </Typography>
+        <Box display="flex" mt={2} gap={1}>
+          <Autocomplete
+            disablePortal
+            options={communityRoomNames}
+            value={selectedRoom}
+            renderInput={params => <TextField {...params} label="Room" />}
+            onChange={handleRoomNameChange}
+            sx={{ flexGrow: 1 }}
+          />
+          <Button
+            variant="contained"
+            disabled={selectedRoom === null}
+            onClick={handleJoinClick}
+          >
+            Join
+          </Button>
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  )
+}

src/pages/Home/Home.tsx

@@ -22,6 +22,7 @@ import { Form, Main } from 'components/Elements'
 import Logo from 'img/logo.svg?react'
 
 import { EmbedCodeDialog } from './EmbedCodeDialog'
+import { CommunityRoomSelector } from './CommunityRoomSelector'
 
 const StyledLogo = styled(Logo)({})
 
@@ -100,7 +101,7 @@ export function Home({ userId }: HomeProps) {
           </Typography>
           <FormControl fullWidth>
             <TextField
-              label="Room name (generated client-side)"
+              label="Room name (generated on your device)"
               variant="outlined"
               value={roomName}
               onChange={handleRoomNameChange}
@@ -162,6 +163,10 @@ export function Home({ userId }: HomeProps) {
         </Form>
       </Main>
       <Divider sx={{ my: 2 }} />
+      <Box maxWidth={theme.breakpoints.values.sm} mx="auto" px={2}>
+        <CommunityRoomSelector />
+      </Box>
+      <Divider sx={{ my: 2 }} />
       <Box
         sx={{
           maxWidth: theme.breakpoints.values.sm,