diff --git a/app/components/layout/ChatSidebar.module.css b/app/components/layout/ChatSidebar.module.css index 86bedcdb7..8dc60e7f6 100644 --- a/app/components/layout/ChatSidebar.module.css +++ b/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; diff --git a/app/components/layout/ChatSidebar.tsx b/app/components/layout/ChatSidebar.tsx index 0d143beff..16f1ba711 100644 --- a/app/components/layout/ChatSidebar.tsx +++ b/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 (
-
+

{t("common:chat.sidebar.title")}

@@ -78,16 +80,23 @@ function RoomList({ onClose }: { onClose?: () => void }) { return (