memory dashboard design polishing
frdel committed
Sep 29, 2025 at 17:59 UTC
06c0dc97dc51ccd59f6f453939ec777546596307
2 files changed
+90
-28
webui/components/settings/memory/memory-dashboard.html
+89
-27
@@ -11,28 +11,7 @@
11
<div x-data>
12
<template x-if="$store.memoryDashboardStore">
13
<div x-create="$store.memoryDashboardStore.onOpen()"
14
- x-destroy="$store.memoryDashboardStore.cleanup()" class="memory-dashboard" x-init="
15
- // Inject footer into modal structure after component loads
16
- $nextTick(() => {
17
- const modalInner = $el.closest('.modal-inner');
18
- if (modalInner && !modalInner.querySelector('.modal-footer')) {
19
- const footer = document.createElement('div');
20
- footer.className = 'modal-footer';
21
- footer.innerHTML = `
22
- <div id='buttons-container'>
23
- <button class='btn btn-ok' @click='$store.memoryDashboardStore.exportMemories()'>
24
- Export Memories (JSON)
25
- </button>
26
- </div>
27
- `;
28
- modalInner.appendChild(footer);
29
- // Re-compile Alpine for the new footer
30
- Alpine.initTree(footer);
31
-
32
- // Add class to modal-inner for styling
33
- modalInner.classList.add('modal-with-footer');
34
- }
35
- })">
14
+ x-destroy="$store.memoryDashboardStore.cleanup()" class="memory-dashboard">
15
16
<!-- Search and Filters Section -->
17
<div class="memory-filters-header">
@@ -205,7 +184,7 @@
184
@click="$store.memoryDashboardStore.showMemoryDetails(memory)"
185
style="cursor: pointer;">
186
<!-- Selection checkbox -->
208
- <td class="select-cell" @click.stop>
187
+ <td class="select-cell" @click.stop="memory.selected = !memory.selected">
188
<input type="checkbox" x-model="memory.selected" />
189
</td>
190
@@ -268,6 +247,88 @@
247
248
</div>
249
250
+ <!-- Mass action toolbar -->
251
+ <div x-show="$store.memoryDashboardStore.selectedCount > 0" class="mass-action-toolbar">
252
+ <div class="selection-info">
253
+ <span x-text="$store.memoryDashboardStore.selectedCount"></span> memories selected
254
+ </div>
255
+
256
+ <div class="mass-actions">
257
+ <button class="btn btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
258
+ title="Copy Selected Content">
259
+ <span class="material-symbols-outlined">content_copy</span>
260
+ Copy
261
+ </button>
262
+
263
+ <button class="btn btn-mass export" @click="$store.memoryDashboardStore.bulkExportMemories()"
264
+ title="Export Selected Memories">
265
+ <span class="material-symbols-outlined">download</span>
266
+ Export
267
+ </button>
268
+
269
+ <button class="btn btn-mass delete" @click="$store.memoryDashboardStore.bulkDeleteMemories()"
270
+ title="Delete Selected Memories">
271
+ <span class="material-symbols-outlined">delete</span>
272
+ Delete
273
+ </button>
274
+
275
+ <button class="btn btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
276
+ title="Clear Selection">
277
+ <span class="material-symbols-outlined">close</span>
278
+ Clear
279
+ </button>
280
+ </div>
281
+ </div>
282
+
283
+
284
+ <!-- Status Bar -->
285
+ <div class="memory-status-bar" x-show="!$store.memoryDashboardStore.loading">
286
+ <div class="status-info">
287
+ <span class="status-item">
288
+ <span class="material-symbols-outlined">database</span>
289
+ Total: <strong x-text="$store.memoryDashboardStore.totalDbCount"></strong>
290
+ </span>
291
+ <span class="status-separator">•</span>
292
+ <span class="status-item">
293
+ Filtered: <strong x-text="$store.memoryDashboardStore.totalCount"></strong>
294
+ </span>
295
+ <span class="status-separator">•</span>
296
+ <span class="status-item">
297
+ Knowledge: <strong x-text="$store.memoryDashboardStore.knowledgeCount"></strong>
298
+ </span>
299
+ <span class="status-separator">•</span>
300
+ <span class="status-item">
301
+ Conversation: <strong x-text="$store.memoryDashboardStore.conversationCount"></strong>
302
+ </span>
303
+ </div>
304
+
305
+ <!-- Pagination -->
306
+ <div class="status-pagination" x-show="$store.memoryDashboardStore.totalPages > 1">
307
+ <button class="btn btn-icon" @click="$store.memoryDashboardStore.prevPage()"
308
+ :disabled="$store.memoryDashboardStore.currentPage === 1"
309
+ title="Previous Page">
310
+ <span class="material-symbols-outlined">chevron_left</span>
311
+ </button>
312
+ <div class="page-input-group">
313
+ <label>Page</label>
314
+ <input type="number"
315
+ class="page-input"
316
+ x-model.number="$store.memoryDashboardStore.currentPage"
317
+ @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
318
+ @keyup.enter="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
319
+ :min="1"
320
+ :max="$store.memoryDashboardStore.totalPages" />
321
+ <span class="page-total">of <strong x-text="$store.memoryDashboardStore.totalPages"></strong></span>
322
+ </div>
323
+ <button class="btn btn-icon" @click="$store.memoryDashboardStore.nextPage()"
324
+ :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages"
325
+ title="Next Page">
326
+ <span class="material-symbols-outlined">chevron_right</span>
327
+ </button>
328
+ </div>
329
+ </div>
330
+
331
+
332
<!-- No memories message -->
333
<div x-show="$store.memoryDashboardStore.memories.length === 0 && !$store.memoryDashboardStore.message"
334
class="no-memories">
@@ -395,7 +456,7 @@
456
background: var(--color-panel);
457
border-bottom: 1px solid var(--color-border);
458
border-radius: 8px;
398
- margin-bottom: 1rem;
459
+ /* margin-bottom: 1rem; */
460
font-size: 0.9rem;
461
}
462
@@ -656,9 +717,10 @@
717
align-items: center;
718
padding: 1rem;
719
background: var(--color-panel);
659
- border: 1px solid var(--color-primary);
660
- border-radius: 8px;
661
- margin: 1rem 0;
720
+ /* border: 1px solid var(--color-primary); */
721
+ /* border-radius: 8px; */
722
+ /* margin: 1rem 0; */
723
+ margin:0;
724
animation: slideDown 0.3s ease;
725
}
726
webui/css/modals.css
+1
-1
@@ -276,7 +276,7 @@
276
}
277
278
.btn:disabled {
279
- background: #ccc;
279
+ /* background: #ccc; */
280
cursor: not-allowed;
281
}
282