feat: enhance chat and member item selection with previously selected state styling

This commit is contained in:
Yusuf İpek
2025-10-11 20:18:20 +03:00
parent 693ee684ab
commit d182a05b31
2 changed files with 46 additions and 4 deletions
+24 -4
View File
@@ -49,6 +49,7 @@ export default function DashboardPage() {
const [confirmUrl, setConfirmUrl] = useState<string | null>(null); const [confirmUrl, setConfirmUrl] = useState<string | null>(null);
const [superChatPulse, setSuperChatPulse] = useState(false); const [superChatPulse, setSuperChatPulse] = useState(false);
const [memberPulse, setMemberPulse] = useState(false); const [memberPulse, setMemberPulse] = useState(false);
const [previouslySelected, setPreviouslySelected] = useState<Set<string>>(new Set());
const prevSuperChatCountRef = useRef(0); const prevSuperChatCountRef = useRef(0);
const prevMemberCountRef = useRef(0); const prevMemberCountRef = useRef(0);
const hasInitializedRef = useRef(false); const hasInitializedRef = useRef(false);
@@ -66,6 +67,9 @@ export default function DashboardPage() {
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: message.id }) body: JSON.stringify({ id: message.id })
}); });
// Mark this message as previously selected
setPreviouslySelected(prev => new Set([...prev, message.id]));
} }
} catch (error) { } catch (error) {
console.error('Failed to select message', error); console.error('Failed to select message', error);
@@ -228,6 +232,7 @@ export default function DashboardPage() {
isSelected={selection?.id === message.id} isSelected={selection?.id === message.id}
onSelect={() => handleSelect(message)} onSelect={() => handleSelect(message)}
onLinkClick={handleLinkClick} onLinkClick={handleLinkClick}
isPreviouslySelected={previouslySelected.has(message.id)}
/> />
)} )}
emptyState={ emptyState={
@@ -252,6 +257,7 @@ export default function DashboardPage() {
isSelected={selection?.id === message.id} isSelected={selection?.id === message.id}
onSelect={() => handleSelect(message)} onSelect={() => handleSelect(message)}
onLinkClick={handleLinkClick} onLinkClick={handleLinkClick}
isPreviouslySelected={previouslySelected.has(message.id)}
/> />
)} )}
emptyState={ emptyState={
@@ -275,6 +281,7 @@ export default function DashboardPage() {
isSelected={selection?.id === message.id} isSelected={selection?.id === message.id}
onSelect={() => handleSelect(message)} onSelect={() => handleSelect(message)}
onLinkClick={handleLinkClick} onLinkClick={handleLinkClick}
isPreviouslySelected={previouslySelected.has(message.id)}
/> />
)} )}
emptyState={ emptyState={
@@ -511,6 +518,7 @@ type ChatItemProps = {
isSelected: boolean; isSelected: boolean;
onSelect: () => void; onSelect: () => void;
onLinkClick: (url: string) => void; onLinkClick: (url: string) => void;
isPreviouslySelected?: boolean;
}; };
function MessageText({ text, onLinkClick }: { text: string; onLinkClick: (url: string) => void }) { 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 { timezone } = useTimezone();
const className = [
'chatItem',
isSelected ? 'chatItem--active' : '',
isPreviouslySelected ? 'chatItem--previously-selected' : ''
].filter(Boolean).join(' ');
return ( return (
<button <button
className={isSelected ? 'chatItem chatItem--active' : 'chatItem'} className={className}
onClick={onSelect} onClick={onSelect}
> >
<div className="chatItem__header"> <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 { timezone } = useTimezone();
const className = [
'memberItem',
isSelected ? 'memberItem--active' : '',
isPreviouslySelected ? 'memberItem--previously-selected' : ''
].filter(Boolean).join(' ');
return ( return (
<button <button
className={isSelected ? 'memberItem memberItem--active' : 'memberItem'} className={className}
onClick={onSelect} onClick={onSelect}
> >
<div className="memberItem__header"> <div className="memberItem__header">
+22
View File
@@ -650,6 +650,17 @@ main {
filter: brightness(0.85); 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 { .chatItem__header {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
@@ -800,6 +811,17 @@ main {
filter: brightness(0.85); 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 { .memberItem__header {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;