From d182a05b31bc776e0bc84ead7b15778eeb79789a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sat, 11 Oct 2025 20:18:20 +0300
Subject: [PATCH] feat: enhance chat and member item selection with previously
 selected state styling

---
 client/app/dashboard/page.tsx | 28 ++++++++++++++++++++++++----
 client/app/globals.css        | 22 ++++++++++++++++++++++
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/client/app/dashboard/page.tsx b/client/app/dashboard/page.tsx
index 3c4b8b1..10696ca 100644
--- a/client/app/dashboard/page.tsx
+++ b/client/app/dashboard/page.tsx
@@ -49,6 +49,7 @@ export default function DashboardPage() {
   const [confirmUrl, setConfirmUrl] = useState<string | null>(null);
   const [superChatPulse, setSuperChatPulse] = useState(false);
   const [memberPulse, setMemberPulse] = useState(false);
+  const [previouslySelected, setPreviouslySelected] = useState<Set<string>>(new Set());
   const prevSuperChatCountRef = useRef(0);
   const prevMemberCountRef = useRef(0);
   const hasInitializedRef = useRef(false);
@@ -66,6 +67,9 @@ export default function DashboardPage() {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ id: message.id })
           });
+          
+          // Mark this message as previously selected
+          setPreviouslySelected(prev => new Set([...prev, message.id]));
         }
       } catch (error) {
         console.error('Failed to select message', error);
@@ -228,6 +232,7 @@ export default function DashboardPage() {
                     isSelected={selection?.id === message.id}
                     onSelect={() => handleSelect(message)}
                     onLinkClick={handleLinkClick}
+                    isPreviouslySelected={previouslySelected.has(message.id)}
                   />
                 )}
                 emptyState={
@@ -252,6 +257,7 @@ export default function DashboardPage() {
                       isSelected={selection?.id === message.id}
                       onSelect={() => handleSelect(message)}
                       onLinkClick={handleLinkClick}
+                      isPreviouslySelected={previouslySelected.has(message.id)}
                     />
                   )}
                   emptyState={
@@ -275,6 +281,7 @@ export default function DashboardPage() {
                       isSelected={selection?.id === message.id}
                       onSelect={() => handleSelect(message)}
                       onLinkClick={handleLinkClick}
+                      isPreviouslySelected={previouslySelected.has(message.id)}
                     />
                   )}
                   emptyState={
@@ -511,6 +518,7 @@ type ChatItemProps = {
   isSelected: boolean;
   onSelect: () => void;
   onLinkClick: (url: string) => void;
+  isPreviouslySelected?: boolean;
 };
 
 function MessageText({ text, onLinkClick }: { text: string; onLinkClick: (url: string) => void }) {
@@ -583,12 +591,18 @@ function ChatListPanel({ messages, renderItem, emptyState }: ChatListPanelProps)
   );
 }
 
-function ChatItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProps) {
+function ChatItem({ message, isSelected, onSelect, onLinkClick, isPreviouslySelected }: ChatItemProps) {
   const { timezone } = useTimezone();
   
+  const className = [
+    'chatItem',
+    isSelected ? 'chatItem--active' : '',
+    isPreviouslySelected ? 'chatItem--previously-selected' : ''
+  ].filter(Boolean).join(' ');
+  
   return (
     <button
-      className={isSelected ? 'chatItem chatItem--active' : 'chatItem'}
+      className={className}
       onClick={onSelect}
     >
       <div className="chatItem__header">
@@ -640,12 +654,18 @@ function ChatItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProps)
   );
 }
 
-function MemberItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProps) {
+function MemberItem({ message, isSelected, onSelect, onLinkClick, isPreviouslySelected }: ChatItemProps) {
   const { timezone } = useTimezone();
   
+  const className = [
+    'memberItem',
+    isSelected ? 'memberItem--active' : '',
+    isPreviouslySelected ? 'memberItem--previously-selected' : ''
+  ].filter(Boolean).join(' ');
+  
   return (
     <button
-      className={isSelected ? 'memberItem memberItem--active' : 'memberItem'}
+      className={className}
       onClick={onSelect}
     >
       <div className="memberItem__header">
diff --git a/client/app/globals.css b/client/app/globals.css
index d25a2b4..1dd8c70 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -650,6 +650,17 @@ main {
   filter: brightness(0.85);
 }
 
+.chatItem--previously-selected {
+  filter: brightness(0.6);
+  opacity: 0.7;
+}
+
+/* Ensure active state overrides previously selected state */
+.chatItem--active.chatItem--previously-selected {
+  filter: brightness(0.85);
+  opacity: 1;
+}
+
 .chatItem__header {
   display: flex;
   gap: 0.75rem;
@@ -800,6 +811,17 @@ main {
   filter: brightness(0.85);
 }
 
+.memberItem--previously-selected {
+  filter: brightness(0.6);
+  opacity: 0.7;
+}
+
+/* Ensure active state overrides previously selected state */
+.memberItem--active.memberItem--previously-selected {
+  filter: brightness(0.85);
+  opacity: 1;
+}
+
 .memberItem__header {
   display: flex;
   gap: 0.75rem;