Remove a bit styles duplication

app/components/layout/ChatSidebar.module.css

@@ -1,15 +1,8 @@
-/** xxx: clean this up */
-
 .sidebar {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 	overflow: hidden;
-
-	/* reset negative margin from SideNav header inside chat sidebar */
-	& :global(.sideNavHeader) {
-		margin-inline: 0;
-	}
 }
 
 .sidebarHeader {
@@ -56,46 +49,11 @@
 }
 
 .roomItem {
-	display: flex;
-	align-items: center;
-	gap: var(--s-2);
 	padding: var(--s-2);
-	border-radius: var(--radius-field);
-	background: none;
-	border: none;
-	cursor: pointer;
-	text-align: left;
-	width: 100%;
-	transition: background-color 0.15s;
-	font-size: var(--font-xs);
-	color: var(--color-text);
-}
-
-.roomItem:hover {
-	background-color: var(--color-bg-high);
-}
-
-.roomInfo {
-	display: flex;
-	flex-direction: column;
-	gap: var(--s-0-5);
-	min-width: 0;
-	flex: 1;
 }
 
 .roomName {
 	font-weight: var(--weight-semi);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.roomLastMessage {
-	font-size: var(--font-2xs);
-	color: var(--color-text-high);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .roomTimestamp {
@@ -129,12 +87,6 @@
 	min-height: var(--layout-nav-height);
 }
 
-.iconContainer {
-	background-color: var(--color-bg-high);
-	border-radius: var(--radius-field);
-	padding: var(--s-1-5);
-}
-
 .backButton {
 	position: relative;
 	display: grid;

app/components/layout/ChatSidebar.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { ArrowLeft, MessageSquare, X } from "lucide-react";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
@@ -5,6 +6,7 @@ import { Link } from "react-router";
 import { Chat } from "~/features/chat/components/Chat";
 import { useChatContext } from "~/features/chat/useChatContext";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
+import sideNavStyles from "../SideNav.module.css";
 import styles from "./ChatSidebar.module.css";
 
 export function ChatSidebar({ onClose }: { onClose?: () => void }) {
@@ -28,7 +30,7 @@ function SidebarHeader({ onClose }: { onClose?: () => void }) {
 
 	return (
 		<div className={styles.sidebarHeader}>
-			<div className={styles.iconContainer}>
+			<div className={sideNavStyles.iconContainer}>
 				<MessageSquare size={18} />
 			</div>
 			<h2>{t("common:chat.sidebar.title")}</h2>
@@ -78,16 +80,23 @@ function RoomList({ onClose }: { onClose?: () => void }) {
 						return (
 							<Button
 								key={room.chatCode}
-								className={styles.roomItem}
+								className={clsx(sideNavStyles.listButton, styles.roomItem)}
 								onPress={() => {
 									chatContext.requestHistory(room.chatCode);
 									chatContext.setActiveRoom(room.chatCode);
 									chatContext.markAsRead(room.chatCode);
 								}}
 							>
-								<div className={styles.roomInfo}>
+								<div className={sideNavStyles.listLinkContent}>
-									<span className={styles.roomName}>{room.header}</span>
+									<span
-									<span className={styles.roomLastMessage}>
+										className={clsx(
+											sideNavStyles.listLinkTitle,
+											styles.roomName,
+										)}
+									>
+										{room.header}
+									</span>
+									<span className={sideNavStyles.listLinkSubtitle}>
 										{room.subtitle}
 									</span>
 								</div>

app/features/chat/ChatProvider.tsx

@@ -475,7 +475,6 @@ function ChatProviderInner({
 	);
 }
 
-// xxx: bug: room should close automatically if non-participant and leaves the route
 function useChatRouteSync({
 	rooms,
 	userId,