mirror of
https://github.com/yusufipk/YTChatHub.git
synced 2026-09-11 19:06:14 +00:00
feat: enhance chat and member item selection with previously selected state styling
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user