Skip to content

Commit 9bf1a31

Browse files
YuurinBeeYuurinBee
committed
Refactor: UI for Relay Settings Popup + Theme Support
1 parent 8d889a0 commit 9bf1a31

11 files changed

Lines changed: 146 additions & 173 deletions

File tree

‎src/icons/disable.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/index.html‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -684,34 +684,28 @@ <h4>Capabilities</h4>
684684
<div class="relay-dialog-overlay" id="relay-info-overlay">
685685
<div class="relay-dialog relay-info-dialog">
686686
<div class="relay-dialog-header">
687-
<h3 id="relay-info-url">Relay URL</h3>
688-
<button class="relay-dialog-close" id="relay-info-close">&times;</button>
687+
<h3>Relay Settings</h3>
688+
<button class="relay-dialog-close" id="relay-info-close">&times;</button>
689689
</div>
690690
<div class="relay-dialog-content">
691-
<div class="relay-form-group">
692-
<label class="relay-form-label">Mode</label>
693-
<select id="relay-info-mode" class="relay-form-select">
694-
<option value="both">Read & Write</option>
695-
<option value="read">Read Only</option>
696-
<option value="write">Write Only</option>
697-
</select>
698-
</div>
699-
<div class="relay-metrics-section">
700-
<div class="relay-metrics-header">
701-
<h4>Connection Info</h4>
702-
<span class="relay-status relay-status-small" id="relay-info-status">connected</span>
691+
<div class="relay-info-header-row">
692+
<p id="relay-info-url"></p>
693+
<span class="relay-status relay-status-small" id="relay-info-status">connected</span>
694+
</div>
695+
<div class="relay-metrics-inline">
696+
<span class="relay-metric-inline-label">Ping</span>
697+
<span class="relay-metric-inline-value" id="relay-info-ping">--</span>
698+
<span class="relay-metric-inline-label relay-metric-inline-right">Last Check</span>
699+
<span class="relay-metric-inline-value" id="relay-info-last-check">--</span>
700+
</div>
701+
<div class="relay-form-group">
702+
<label class="relay-form-label">Mode</label>
703+
<select id="relay-info-mode" class="relay-form-select">
704+
<option value="both">Read & Write</option>
705+
<option value="read">Read Only</option>
706+
<option value="write">Write Only</option>
707+
</select>
703708
</div>
704-
<div class="relay-metrics-grid">
705-
<div class="relay-metric">
706-
<span class="relay-metric-value" id="relay-info-ping">--</span>
707-
<span class="relay-metric-label">Ping</span>
708-
</div>
709-
<div class="relay-metric">
710-
<span class="relay-metric-value" id="relay-info-last-check">--</span>
711-
<span class="relay-metric-label">Last Check</span>
712-
</div>
713-
</div>
714-
</div>
715709
<div class="relay-logs-section">
716710
<div class="relay-logs-header">
717711
<h4>Recent Activity</h4>
@@ -724,8 +718,11 @@ <h4>Recent Activity</h4>
724718
</ul>
725719
</div>
726720
<div class="relay-dialog-buttons">
727-
<button class="btn danger-btn" id="relay-info-disable">Disable Relay</button>
728-
<button class="btn primary-btn" id="relay-info-done">Done</button>
721+
<button class="btn danger-btn" id="relay-info-disable">
722+
<span class="icon icon-disable"></span>
723+
Disable
724+
</button>
725+
<button class="btn primary-btn" id="relay-info-done">Close</button>
729726
</div>
730727
</div>
731728
</div>

‎src/main.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3707,10 +3707,12 @@ async function refreshRelayInfoDialog() {
37073707
statusEl.className = `relay-status ${freshRelay.status}`;
37083708

37093709
// Update disable button text
3710-
const disableBtn = document.getElementById('relay-info-disable');
3711-
if (freshRelay.is_default) {
3712-
disableBtn.textContent = freshRelay.enabled ? 'Disable Relay' : 'Enable Relay';
3713-
}
3710+
const disableBtn = document.getElementById('relay-info-disable');
3711+
if (freshRelay.is_default) {
3712+
disableBtn.innerHTML = freshRelay.enabled
3713+
? '<span class="icon icon-disable"></span> Disable'
3714+
: '<span class="icon icon-disable"></span> Enable';
3715+
}
37143716
}
37153717
} catch (err) {
37163718
console.error('Failed to refresh relay data:', err);

‎src/styles.css‎

Lines changed: 101 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7565,6 +7565,11 @@ select:focus::-ms-value {
75657565
mask-size: contain;
75667566
}
75677567

7568+
.icon-disable {
7569+
mask-image: url("./icons/disable.svg");
7570+
-webkit-mask-image: url("./icons/disable.svg");
7571+
}
7572+
75687573
.icon-x-user {
75697574
mask-image: url("./icons/x-user.svg");
75707575
}
@@ -7910,6 +7915,22 @@ select:disabled:hover {
79107915
backdrop-filter: none;
79117916
border-color: var(--danger-color);
79127917
background-color: #00000000;
7918+
display: inline-flex;
7919+
align-items: center;
7920+
justify-content: center;
7921+
gap: 6px;
7922+
padding-top: 2px;
7923+
}
7924+
7925+
.danger-btn .icon-disable {
7926+
position: relative;
7927+
width: 16px;
7928+
height: 16px;
7929+
background-color: var(--danger-color);
7930+
flex-shrink: 0;
7931+
display: inline-block;
7932+
margin: 0;
7933+
margin-top: -2px;
79137934
}
79147935

79157936
.warning-icon {
@@ -9052,7 +9073,7 @@ select:disabled:hover {
90529073
.relay-status {
90539074
font-size: 12px;
90549075
font-weight: 600;
9055-
padding: 4px 12px;
9076+
padding: 2px 10px;
90569077
border-radius: 20px;
90579078
text-transform: uppercase;
90589079
letter-spacing: 0.5px;
@@ -9202,7 +9223,7 @@ select:disabled:hover {
92029223

92039224
.relay-dialog {
92049225
background: rgba(20, 20, 20, 0.95);
9205-
border: 1px solid rgba(255, 255, 255, 0.15);
9226+
border: 1px solid #262626;
92069227
border-radius: 16px;
92079228
width: min(420px, calc(100vw - 40px));
92089229
max-height: calc(100vh - 80px);
@@ -9215,12 +9236,13 @@ select:disabled:hover {
92159236
justify-content: space-between;
92169237
align-items: center;
92179238
padding: 15px 20px;
9218-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
9239+
border-bottom: 1px solid #333333;
9240+
background: #262626;
92199241
}
92209242

92219243
.relay-dialog-header h3 {
92229244
margin: 0;
9223-
font-size: 16px;
9245+
font-size: 18px;
92249246
color: #fff;
92259247
word-break: break-all;
92269248
padding-right: 10px;
@@ -9250,6 +9272,23 @@ select:disabled:hover {
92509272
transition: transform 0.25s ease;
92519273
}
92529274

9275+
#relay-info-url {
9276+
text-align: left;
9277+
color: var(--primary-color);
9278+
font-size: 16px;
9279+
margin: 0 0 16px 0;
9280+
}
9281+
9282+
.relay-info-header-row {
9283+
display: flex;
9284+
align-items: center;
9285+
justify-content: space-between;
9286+
}
9287+
9288+
.relay-info-header-row #relay-info-url {
9289+
margin: 0;
9290+
}
9291+
92539292
.relay-dialog-content {
92549293
padding: 20px;
92559294
display: flex;
@@ -9260,22 +9299,31 @@ select:disabled:hover {
92609299
}
92619300

92629301
.relay-form-group {
9263-
display: flex;
9264-
flex-direction: column;
9265-
gap: 6px;
9302+
display: flex;
9303+
flex-direction: row;
9304+
align-items: center;
9305+
justify-content: space-between;
9306+
gap: 10px;
9307+
}
9308+
9309+
.relay-form-group select {
9310+
width: 160px;
9311+
margin: 0;
9312+
margin-left: auto;
92669313
}
92679314

92689315
.relay-form-label {
92699316
font-size: 13px;
92709317
font-weight: 600;
92719318
color: rgba(255, 255, 255, 0.8);
9319+
flex-shrink: 0;
92729320
}
92739321

92749322
.relay-form-input,
92759323
.relay-form-select {
92769324
padding: 10px 12px;
92779325
background: rgba(0, 0, 0, 0.3);
9278-
border: 1px solid rgba(255, 255, 255, 0.15);
9326+
border: 1px solid #262626;
92799327
border-radius: 8px;
92809328
color: #fff;
92819329
font-size: 14px;
@@ -9285,17 +9333,21 @@ select:disabled:hover {
92859333
.relay-form-input:focus,
92869334
.relay-form-select:focus {
92879335
outline: none;
9336+
border-color: var(--primary-color);
92889337
}
92899338

92909339
.relay-form-select {
92919340
cursor: pointer;
92929341
appearance: none;
92939342
-webkit-appearance: none;
92949343
-moz-appearance: none;
9295-
padding-right: 36px;
92969344
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
92979345
background-repeat: no-repeat;
9298-
background-position: right 12px center;
9346+
background-position: right 8px center;
9347+
flex: none;
9348+
padding: 6px 24px 6px 14px;
9349+
font-size: 13px;
9350+
width: 160px;
92999351
}
93009352

93019353
.relay-form-select:disabled {
@@ -9320,6 +9372,10 @@ select:disabled:hover {
93209372
padding: 10px 15px;
93219373
}
93229374

9375+
.relay-dialog-buttons .primary-btn:hover {
9376+
opacity: 0.8;
9377+
}
9378+
93239379
/* Relay Info Dialog Specific */
93249380
.relay-metrics-section h4,
93259381
.relay-logs-section h4 {
@@ -9334,7 +9390,33 @@ select:disabled:hover {
93349390
display: flex;
93359391
align-items: center;
93369392
justify-content: space-between;
9337-
margin-bottom: 10px;
9393+
}
9394+
9395+
.relay-metrics-inline {
9396+
display: flex;
9397+
align-items: center;
9398+
gap: 4px;
9399+
font-size: 13px;
9400+
}
9401+
9402+
.relay-metric-inline-label {
9403+
color: rgba(255, 255, 255, 0.5);
9404+
font-size: 11px;
9405+
text-transform: uppercase;
9406+
letter-spacing: 0.5px;
9407+
}
9408+
9409+
.relay-metric-inline-value {
9410+
color: #59fcb3;
9411+
font-weight: 600;
9412+
}
9413+
9414+
.relay-metric-inline-divider {
9415+
color: rgba(255, 255, 255, 0.2);
9416+
}
9417+
9418+
.relay-metric-inline-right {
9419+
margin-left: auto;
93389420
}
93399421

93409422
.relay-status-small {
@@ -9370,23 +9452,14 @@ select:disabled:hover {
93709452
background-color: rgba(255, 255, 255, 0.8);
93719453
}
93729454

9373-
.relay-metrics-grid {
9374-
display: grid;
9375-
grid-template-columns: repeat(2, 1fr);
9376-
gap: 10px;
9377-
}
9378-
9379-
.relay-metric {
9380-
background: rgba(0, 0, 0, 0.3);
9381-
border-radius: 8px;
9382-
padding: 10px;
9383-
text-align: center;
9384-
}
9385-
93869455
.relay-metric-value {
93879456
display: block;
9388-
font-size: 18px;
9389-
font-weight: 600;
9457+
font-size: 16px;
9458+
font-weight: 500;
9459+
}
9460+
9461+
.relay-metric-inline-right {
9462+
margin-left: auto;
93909463
}
93919464

93929465
.relay-metric-label {
@@ -9405,10 +9478,11 @@ select:disabled:hover {
94059478
border-radius: 8px;
94069479
max-height: 150px;
94079480
overflow-y: auto;
9481+
margin-top: 10px;
94089482
}
94099483

94109484
.relay-logs-list li {
9411-
padding: 8px 12px;
9485+
padding: 6px 12px;
94129486
font-size: 12px;
94139487
color: rgba(255, 255, 255, 0.7);
94149488
border-bottom: 1px solid rgba(255, 255, 255, 0.05);

‎src/themes/chatstr/dark.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -196,10 +196,6 @@ input[type="checkbox"]:checked + .neon-toggle:hover {
196196
background-color: #b188e2;
197197
}
198198

199-
select:disabled {
200-
border-color: rgba(177, 136, 226, 0.3);
201-
}
202-
203199
.nav-icon {
204200
background-color: #b188e2;
205201
}
@@ -602,29 +598,12 @@ select:disabled {
602598
}
603599

604600
/* Relay Dialog */
605-
.relay-dialog {
606-
border-color: rgba(177, 136, 226, 0.25);
607-
}
608-
609-
.relay-dialog-header {
610-
background: linear-gradient(90deg, #b188e210 0%,#b188e2 75%, #5749E4 100%);
611-
}
612-
613-
.relay-form-input:focus,
614-
.relay-form-select:focus {
615-
border-color: #b188e2;
616-
}
617601

618602
.relay-dialog-buttons .primary-btn {
619603
background-color: #b188e2;
620604
color: #000;
621605
}
622606

623-
.relay-dialog-buttons .primary-btn:hover {
624-
color: #fff;
625-
background-color: #5749E4;
626-
}
627-
628607
.relay-metric-value {
629608
color: #b188e2;
630609
}

0 commit comments

Comments
 (0)