personal memory agent
support: warm empty states, tab badge, and feedback icon
Switch default tab to help & guidance when no tickets exist, add a rich
empty state with icon + heading + hint + action button, show a count
badge on the tickets tab when viewing other tabs, and prepend a chat
icon to the feedback intro text.
+78
-3
+78
-3
apps/support/workspace.html
+78
-3
apps/support/workspace.html
···
7
7
padding-bottom: 0.5rem;
8
8
}
9
9
.support-nav button {
10
+
position: relative;
10
11
background: none;
11
12
border: none;
12
13
padding: 0.5rem 1rem;
···
146
147
.support-empty {
147
148
text-align: center;
148
149
padding: 3rem 1rem;
150
+
}
151
+
.support-empty-icon {
152
+
font-size: 3rem;
153
+
margin-bottom: 1rem;
154
+
opacity: 0.5;
155
+
}
156
+
.support-empty-heading {
157
+
font-size: 1.1rem;
158
+
margin-bottom: 0.5rem;
159
+
}
160
+
.support-empty-hint {
161
+
font-size: 0.9rem;
149
162
color: var(--muted, #595959);
163
+
margin-bottom: 1.5rem;
164
+
}
165
+
.support-empty-action {
166
+
background: var(--facet-color, #3b82f6);
167
+
color: #fff;
168
+
border: none;
169
+
padding: 0.5rem 1.25rem;
170
+
border-radius: 6px;
171
+
cursor: pointer;
172
+
font-size: 0.9rem;
173
+
font-weight: 500;
174
+
}
175
+
.support-empty-action:hover { opacity: 0.9; }
176
+
177
+
.support-tab-badge {
178
+
position: absolute;
179
+
top: 2px;
180
+
right: 2px;
181
+
background: var(--facet-color, #3b82f6);
182
+
color: #fff;
183
+
font-size: 0.7rem;
184
+
font-weight: 600;
185
+
min-width: 1.1rem;
186
+
height: 1.1rem;
187
+
line-height: 1.1rem;
188
+
border-radius: 1rem;
189
+
text-align: center;
190
+
display: none;
150
191
}
192
+
151
193
.support-disabled {
152
194
text-align: center;
153
195
padding: 3rem 1rem;
···
260
302
261
303
<!-- Section: Feedback -->
262
304
<div id="section-feedback" class="support-section" role="tabpanel" aria-labelledby="tab-feedback">
263
-
<p style="margin-bottom:1rem;">Share your impressions, ideas, or anything on your mind. Your feedback shapes the product.</p>
305
+
<p style="margin-bottom:1rem;">💬 Share your impressions, ideas, or anything on your mind. Your feedback shapes the product.</p>
264
306
<div class="support-feedback-form">
265
307
<form id="feedback-form" novalidate>
266
308
<label for="feedback-text">your feedback</label>
···
304
346
305
347
<script>
306
348
(function() {
349
+
let ticketCount = 0;
350
+
307
351
// Tab navigation
308
352
function activateTab(sectionName) {
309
353
document.querySelectorAll('.support-nav button').forEach(b => {
···
318
362
if (sectionName === 'tickets') {
319
363
document.getElementById('ticket-detail').classList.remove('active');
320
364
document.getElementById('tickets-list').style.display = '';
365
+
}
366
+
// Update tab badge visibility
367
+
const badge = document.getElementById('tab-tickets-badge');
368
+
if (badge) {
369
+
badge.style.display = (sectionName !== 'tickets' && ticketCount > 0) ? '' : 'none';
321
370
}
322
371
}
323
372
···
360
409
const tickets = await resp.json();
361
410
362
411
if (!tickets.length) {
363
-
list.innerHTML = '<div class="support-empty"><p>No tickets yet.</p><p style="font-size:0.85rem;">File one by saying "I need help" in the chat bar, or use <code>sol call support create</code>.</p></div>';
412
+
ticketCount = 0;
413
+
list.innerHTML = '<div class="support-empty">' +
414
+
'<div class="support-empty-icon">🛟</div>' +
415
+
'<div class="support-empty-heading">no tickets yet — that\'s a good thing</div>' +
416
+
'<div class="support-empty-hint">if something comes up, check the help tab for ways to get support</div>' +
417
+
'<button class="support-empty-action" id="empty-help-btn">browse help & guidance</button>' +
418
+
'</div>';
419
+
const helpBtn = document.getElementById('empty-help-btn');
420
+
if (helpBtn) helpBtn.addEventListener('click', () => activateTab('help'));
421
+
activateTab('help');
364
422
return;
365
423
}
366
424
···
391
449
}
392
450
});
393
451
});
452
+
// Update ticket count and inject badge
453
+
ticketCount = tickets.length;
454
+
let badge = document.getElementById('tab-tickets-badge');
455
+
if (!badge) {
456
+
badge = document.createElement('span');
457
+
badge.id = 'tab-tickets-badge';
458
+
badge.className = 'support-tab-badge';
459
+
document.getElementById('tab-tickets').appendChild(badge);
460
+
}
461
+
badge.textContent = ticketCount;
462
+
// Show badge if user already switched away from tickets tab
463
+
const activeTab = document.querySelector('.support-nav button.active');
464
+
badge.style.display = (activeTab && activeTab.dataset.section !== 'tickets') ? '' : 'none';
394
465
} catch (e) {
395
-
list.innerHTML = '<div class="support-empty"><p>Unable to load tickets.</p></div>';
466
+
list.innerHTML = '<div class="support-empty">' +
467
+
'<div class="support-empty-icon">⚠️</div>' +
468
+
'<div class="support-empty-heading">unable to load tickets</div>' +
469
+
'<div class="support-empty-hint">check your connection and try refreshing</div>' +
470
+
'</div>';
396
471
}
397
472
}
398
473