Let a room tile in the settings sheet actually reach its room

Every drawer in the room is a URL param, so closing one is itself a router
push. The switcher tiles closed the sheet AND followed their own href, which
fired two router pushes from a single click — the query-param one won, and the
room never changed. Tapping a tile did nothing at all.

Nothing closes the sheet now. The targets carry no `settings` param, so
arriving is what closes it, and one click means one navigation.

The strip had no tap coverage at all: the earlier fix proved it could be
scrolled, never that a tile worked. The new spec fails on both projects
without this change.

Author: 0xkkonrad

apps/web/e2e/switcher-tap.spec.ts

@@ -0,0 +1,70 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Tapping a tile in the other-rooms strip has to actually go to that room.
+ *
+ * Scrolling the strip was fixed by handing horizontal panning back to the browser
+ * (`data-vaul-no-drag` + `touch-action: pan-x`). This spec covers the other half of the
+ * gesture — the tap — which nothing asserted before, and which was broken: the tile also
+ * closed the sheet, and because the sheet is a URL param that close was a second router
+ * push in the same click. It won, and the room never changed.
+ */
+
+test.use({ extraHTTPHeaders: { 'x-forwarded-for': '198.51.100.77' } })
+
+async function createRoom(page: import('@playwright/test').Page, name: string) {
+    await page.goto('/new')
+    await page.getByTestId('room-name').fill(name)
+    await page.getByTestId('creator-name').fill('Ana')
+    await page.getByTestId('create-room').click()
+    await expect(page.getByTestId('room-link')).toBeVisible({ timeout: 15_000 })
+    await page.getByTestId('go-to-room').click()
+    await expect(page.getByTestId('open-room-settings')).toBeVisible({ timeout: 15_000 })
+    return new URL(page.url()).pathname.split('/')[2]
+}
+
+test('tapping a room tile navigates to that room', async ({ page }) => {
+    const alpha = await createRoom(page, 'Alpha')
+    const beta = await createRoom(page, 'Beta')
+    expect(beta).not.toBe(alpha)
+
+    await page.getByTestId('open-room-settings').click()
+    await expect(page.getByTestId('settings-sheet')).toBeVisible({ timeout: 10_000 })
+    await page.waitForTimeout(600)
+
+    const tile = page.locator(`[data-testid="room-switcher-tile"][data-slug="${alpha}"]`)
+    await expect(tile).toBeVisible()
+
+    await tile.click()
+    await expect(page).toHaveURL(new RegExp(`/r/${alpha}$`), { timeout: 10_000 })
+    // Arriving is what closes the sheet — nothing calls onClose.
+    await expect(page.getByTestId('settings-sheet')).toBeHidden({ timeout: 10_000 })
+    await expect(page.locator('h1').first()).toHaveText('Alpha')
+})
+
+test('the all-rooms tile leaves the room', async ({ page }) => {
+    await createRoom(page, 'Alpha')
+    await createRoom(page, 'Beta')
+
+    await page.getByTestId('open-room-settings').click()
+    await expect(page.getByTestId('settings-sheet')).toBeVisible({ timeout: 10_000 })
+    await page.waitForTimeout(600)
+
+    await page.getByTestId('room-switcher-all').click()
+    await expect(page).toHaveURL(/\/$/, { timeout: 10_000 })
+})
+
+test('tapping a theme swatch repaints the room', async ({ page }) => {
+    await createRoom(page, 'Palette')
+
+    await page.getByTestId('open-room-settings').click()
+    await expect(page.getByTestId('settings-sheet')).toBeVisible({ timeout: 10_000 })
+    await page.waitForTimeout(600)
+
+    const swatch = page.locator('[data-testid="theme-swatch"]').nth(2)
+    const key = await swatch.getAttribute('data-theme')
+    await swatch.click()
+    await page.waitForTimeout(2_000)
+    await expect(swatch).toHaveAttribute('aria-pressed', 'true')
+    expect(key).toBeTruthy()
+})

apps/web/src/components/room/RoomSwitcher.tsx

@@ -19,8 +19,14 @@ import { themeFor } from '@/lib/themes'
  * `readRecentRooms()` also returns `[]` when storage is blocked, which is the
  * same branch and the same right answer: a device that cannot remember rooms has
  * no list to offer.
+ *
+ * Nothing here closes the sheet, and that is deliberate. Every drawer in the room
+ * is a URL param (`?settings=1`), so closing one is itself a router push — and a
+ * tile that both closed the sheet and followed its `href` fired two router pushes
+ * from one click, where the query-param one won and the room never changed. The
+ * targets carry no `settings` param, so arriving is what closes the sheet.
  */
-export function RoomSwitcher({ currentSlug, onNavigate }: { currentSlug: string; onNavigate: () => void }) {
+export function RoomSwitcher({ currentSlug }: { currentSlug: string }) {
     const t = useTranslations('room.header')
     // Read after mount: the list is localStorage, and rendering it during the
     // server pass would be a hydration mismatch on every device that has one.
@@ -51,7 +57,6 @@ export function RoomSwitcher({ currentSlug, onNavigate }: { currentSlug: string;
                     <li key={room.slug}>
                         <Link
                             href={`/r/${room.slug}`}
-                            onClick={onNavigate}
                             data-testid="room-switcher-tile"
                             data-slug={room.slug}
                             // Inline for the same reason the theme picker does it:
@@ -70,7 +75,6 @@ export function RoomSwitcher({ currentSlug, onNavigate }: { currentSlug: string;
                         page that owns the full list and the paste-a-link recovery. */}
                     <Link
                         href="/"
-                        onClick={onNavigate}
                         data-testid="room-switcher-all"
                         className="flex w-24 shrink-0 flex-col items-center gap-1 rounded-sm border border-dashed border-n-1 bg-white p-2 transition-transform duration-100 active:translate-y-[2px]"
                     >

apps/web/src/components/room/SettingsSheet.tsx

@@ -201,7 +201,7 @@ export function SettingsSheet({
                         <CloseButton onClick={onClose} label={t('close')} data-testid="close-room-settings" />
                     </DrawerHeader>
                     <DrawerBody>
-                        <RoomSwitcher currentSlug={room.slug} onNavigate={onClose} />
+                        <RoomSwitcher currentSlug={room.slug} />
 
                         <section
                             data-testid="room-card"