feat: add reset stream button and move clear selection button inline

This commit is contained in:
Yusuf İpek
2025-10-05 04:53:24 +03:00
parent 53a5b01bfd
commit d2a99639b7
2 changed files with 56 additions and 9 deletions
+8 -6
View File
@@ -98,12 +98,20 @@ export default function DashboardPage() {
<div className="tab">
Members <span className="tab__count">{newMembers.length}</span>
</div>
<button className="btn-reset" onClick={disconnect} title="Reset stream connection">
🔄
</button>
</header>
<section className="dashboard__grid">
<div className="panel panel--chat">
<div className="panel__header">
<h2>💬 CHAT MESSAGES</h2>
{selection && (
<button className="btn-clear-inline" onClick={handleClear}>
CLEAR
</button>
)}
</div>
<ChatListPanel
messages={regularMessages}
@@ -169,12 +177,6 @@ export default function DashboardPage() {
</div>
</div>
</section>
{selection && (
<button className="btn-clear-fixed" onClick={handleClear}>
CLEAR
</button>
)}
</>
)}
</main>
+48 -3
View File
@@ -444,9 +444,10 @@ main {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 0.875rem;
padding-bottom: 0;
border-bottom: none;
gap: 1rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid #2a2a2a;
background: #141414;
flex-shrink: 0;
}
@@ -487,6 +488,25 @@ main {
transform: translateY(-1px);
}
.btn-clear-inline {
padding: 0.35rem 0.75rem;
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 6px;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 150ms ease;
margin-left: auto;
}
.btn-clear-inline:hover {
background: rgba(239, 68, 68, 0.25);
transform: translateY(-1px);
}
.btn-clear-fixed {
position: fixed;
bottom: 2rem;
@@ -511,6 +531,31 @@ main {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}
.btn-reset {
padding: 0.35rem 0.5rem;
background: #2a2a2a;
color: #e5e7eb;
border: 1px solid #3a3a3a;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: all 200ms ease;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.btn-reset:hover {
background: #3a3a3a;
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.btn-reset:active {
transform: scale(0.95);
}
.chatList {
display: flex;
flex-direction: column;