From d6abfe0974d2c13e5b7e4f2105998c836abab351 Mon Sep 17 00:00:00 2001
From: Rudra Prasad <rudraprasad.email@gmail.com>
Date: Fri, 9 Jan 2026 00:28:24 +0530
Subject: [PATCH 1/3] Fix : Added Styling for Selected-State

---
 .../RoomListPanel/_RoomListItemView.pcss      | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
index 7ce62803317..87873b9e6af 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
@@ -93,7 +93,46 @@
 }
 
 .mx_RoomListItemView_selected {
-    background-color: var(--cpd-color-bg-action-secondary-pressed);
+    position: relative;
+    background-color: transparent;
+    border-left: none; 
+    border-radius: 0 8px 8px 0;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: calc(100% - 16px);
+    padding-left: var(--cpd-space-3x);
+    
+    /* The curved left indicator */
+    &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background-color: #007a61;
+        border-radius: 0 8px 8px 0;
+        z-index: 0;
+    }
+    
+    /* Background that starts after the gap */
+    &::after {
+        content: "";
+        position: absolute;
+        left: 8px;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #e1e6ec;
+        border-radius: 8px; /* Curve all corners */
+        z-index: 0;
+    }
+    
+    /* Ensure content appears above backgrounds */
+    > * {
+        position: relative;
+        z-index: 1;
+    }
 }
 
 .mx_RoomListItemView_bold .mx_RoomListItemView_roomName {

From 3517ee1a1c3562118d0fccd361aef7f28298a9bb Mon Sep 17 00:00:00 2001
From: Rudra Prasad <rudraprasad.email@gmail.com>
Date: Fri, 9 Jan 2026 00:42:49 +0530
Subject: [PATCH 2/3] Fix : Added Styling for Hover-State

---
 .../RoomListPanel/_RoomListItemView.pcss      | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
index 87873b9e6af..f44eb77fcdc 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
@@ -27,23 +27,33 @@
 
     padding-left: var(--cpd-space-3x);
     font: var(--cpd-font-body-md-regular);
+    transition: all 0.2s ease;
 
     /*  Hide the menu by default  */
     .mx_RoomListItemView_menu {
         display: none;
     }
 
-    &:hover,
-    &:focus-visible,
+    &:hover:not(.mx_RoomListItemView_selected),
+    &:focus-visible:not(.mx_RoomListItemView_selected),
     /* When the context menu is opened  */
-    &[data-state="open"],
+    &[data-state="open"]:not(.mx_RoomListItemView_selected),
     /*  When the options and notifications menu are opened */
-    &:has(.mx_RoomListItemMenuView > button[data-state="open"]) {
+    &:has(.mx_RoomListItemMenuView > button[data-state="open"]):not(.mx_RoomListItemView_selected) {
         background-color: var(--cpd-color-bg-action-secondary-hovered);
 
         .mx_RoomListItemView_menu {
             display: flex;
         }
+        
+        /* Shift avatar and content to the left on hover */
+        > :first-child {
+            transform: translateX(-8px);
+        }
+        
+        .mx_RoomListItemView_content {
+            transform: translateX(-8px);
+        }
 
         &.mx_RoomListItemView_has_menu {
             /**
@@ -71,6 +81,7 @@
         box-sizing: border-box;
         min-width: 0;
         padding-right: var(--cpd-space-5x);
+        transition: transform 0.2s ease;
 
         .mx_RoomListItemView_text {
             min-width: 0;
@@ -124,7 +135,7 @@
         right: 0;
         bottom: 0;
         background-color: #e1e6ec;
-        border-radius: 8px; /* Curve all corners */
+        border-radius: 8px;
         z-index: 0;
     }
     

From 19d1d0587b111d45427088c407b04ce78d58120e Mon Sep 17 00:00:00 2001
From: Rudra Prasad <rudraprasad.email@gmail.com>
Date: Fri, 9 Jan 2026 01:25:55 +0530
Subject: [PATCH 3/3] Fix : Handles Both Light And Dark Theme

---
 res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
index f44eb77fcdc..1c0ed425459 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
@@ -113,7 +113,7 @@
     width: calc(100% - 16px);
     padding-left: var(--cpd-space-3x);
     
-    /* The curved left indicator */
+    /* The curved left indicator - Uses Compound accent color (green) */
     &::before {
         content: "";
         position: absolute;
@@ -121,12 +121,12 @@
         top: 0;
         bottom: 0;
         width: 4px;
-        background-color: #007a61;
+        background-color: var(--cpd-color-text-action-accent);
         border-radius: 0 8px 8px 0;
         z-index: 0;
     }
     
-    /* Background that starts after the gap */
+    /* Background that starts after the gap - Uses Compound subtle secondary color */
     &::after {
         content: "";
         position: absolute;
@@ -134,7 +134,7 @@
         top: 0;
         right: 0;
         bottom: 0;
-        background-color: #e1e6ec;
+        background-color: var(--cpd-color-bg-subtle-secondary);
         border-radius: 8px;
         z-index: 0;
     }