memory dashboard cleanup
3clyp50 committed
Jan 2, 2026 at 14:10 UTC
06e6d0d6f9e4abbf3f83d8e5887cbf9cc4d4fea0
1 file changed
-1002
webui/components/modals/memory/old/memory-dashboard-old.html
deleted
-1002
@@ -1,1002 +0,0 @@
1
-<html>
2
-
3
-<head>
4
- <title>Memory Dashboard</title>
5
- <script type="module">
6
- import { store } from "/components/settings/memory/memory-dashboard-store.js";
7
- </script>
8
-</head>
9
-
10
-<body>
11
- <div x-data>
12
- <template x-if="$store.memoryDashboardStore">
13
- <div x-create="$store.memoryDashboardStore.onOpen()" x-destroy="$store.memoryDashboardStore.cleanup()"
14
- class="memory-dashboard">
15
-
16
- <!-- Search and Filters Section -->
17
- <div class="memory-filters-header">
18
- <div class="filter-group-inline filter-memory-dir">
19
- <label for="memory-subdir-select">Memory Directory</label>
20
- <select id="memory-subdir-select" x-model="$store.memoryDashboardStore.selectedMemorySubdir"
21
- @change="$store.memoryDashboardStore.onMemorySubdirChange()"
22
- :disabled="$store.memoryDashboardStore.loadingSubdirs">
23
- <template x-for="subdir in $store.memoryDashboardStore.memorySubdirs" :key="subdir">
24
- <option :value="subdir" x-text="subdir"
25
- :selected="subdir === $store.memoryDashboardStore.selectedMemorySubdir">
26
- </option>
27
- </template>
28
- </select>
29
- </div>
30
-
31
- <div class="filter-group-inline filter-area">
32
- <label for="area-filter">Area</label>
33
- <select id="area-filter" x-model="$store.memoryDashboardStore.areaFilter">
34
- <option value="">All Areas</option>
35
- <option value="main">Main</option>
36
- <option value="fragments">Fragments</option>
37
- <option value="solutions">Solutions</option>
38
- <option value="instruments">Instruments</option>
39
- </select>
40
- </div>
41
-
42
- <div class="filter-group-inline filter-limit">
43
- <label for="limit-input">Limit:</label>
44
- <input type="number" id="limit-input" x-model.number="$store.memoryDashboardStore.limit"
45
- min="10" max="1000" step="10" />
46
- </div>
47
-
48
- <div class="filter-threshold">
49
- <label for="threshold-input">Threshold: <strong
50
- x-text="$store.memoryDashboardStore.threshold.toFixed(2)"></strong></label>
51
- <input type="range" id="threshold-input" x-model.number="$store.memoryDashboardStore.threshold"
52
- min="0" max="1" step="0.01" />
53
- </div>
54
-
55
- <input type="text" id="search-input" x-model="$store.memoryDashboardStore.searchQuery"
56
- placeholder="Search memory content..."
57
- @keyup.enter="$store.memoryDashboardStore.searchMemories()" />
58
-
59
- <button class="btn btn-ok btn-search" @click="$store.memoryDashboardStore.searchMemories()"
60
- :disabled="$store.memoryDashboardStore.loading || $store.memoryDashboardStore.loadingSubdirs">
61
- <span x-show="!$store.memoryDashboardStore.initializingMemory">Search</span>
62
- <span x-show="$store.memoryDashboardStore.initializingMemory">Init...</span>
63
- </button>
64
-
65
- <button class="btn btn-cancel btn-clear" @click="$store.memoryDashboardStore.clearSearch()">
66
- Clear
67
- </button>
68
- </div>
69
-
70
- <!-- Loading state -->
71
- <div x-show="$store.memoryDashboardStore.loading" class="loading-state">
72
- <div class="loading-spinner"></div>
73
- <span x-show="!$store.memoryDashboardStore.initializingMemory">Searching memories...</span>
74
- <span x-show="$store.memoryDashboardStore.initializingMemory">Initializing memory database...</span>
75
- </div>
76
-
77
- <!-- Error state -->
78
- <div x-show="$store.memoryDashboardStore.error" class="error-state">
79
- <span x-text="$store.memoryDashboardStore.error"></span>
80
- </div>
81
-
82
- <!-- Memory table -->
83
- <div x-show="!$store.memoryDashboardStore.loading && !$store.memoryDashboardStore.error"
84
- class="memory-table-container">
85
-
86
- <!-- Status Bar -->
87
- <div class="memory-status-bar" x-show="!$store.memoryDashboardStore.loading">
88
- <div class="status-info">
89
- <span class="status-item">
90
- <span class="material-symbols-outlined">database</span>
91
- Total: <strong x-text="$store.memoryDashboardStore.totalDbCount"></strong>
92
- </span>
93
- <span class="status-separator">•</span>
94
- <span class="status-item">
95
- Filtered: <strong x-text="$store.memoryDashboardStore.totalCount"></strong>
96
- </span>
97
- <span class="status-separator">•</span>
98
- <span class="status-item">
99
- Knowledge: <strong x-text="$store.memoryDashboardStore.knowledgeCount"></strong>
100
- </span>
101
- <span class="status-separator">•</span>
102
- <span class="status-item">
103
- Conversation: <strong x-text="$store.memoryDashboardStore.conversationCount"></strong>
104
- </span>
105
- </div>
106
-
107
- <!-- Pagination -->
108
- <div class="status-pagination" x-show="$store.memoryDashboardStore.totalPages > 1">
109
- <button class="btn btn-icon" @click="$store.memoryDashboardStore.prevPage()"
110
- :disabled="$store.memoryDashboardStore.currentPage === 1" title="Previous Page">
111
- <span class="material-symbols-outlined">chevron_left</span>
112
- </button>
113
- <div class="page-input-group">
114
- <label>Page</label>
115
- <input type="number" class="page-input"
116
- x-model.number="$store.memoryDashboardStore.currentPage"
117
- @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
118
- @keyup.enter="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
119
- :min="1" :max="$store.memoryDashboardStore.totalPages" />
120
- <span class="page-total">of <strong
121
- x-text="$store.memoryDashboardStore.totalPages"></strong></span>
122
- </div>
123
- <button class="btn btn-icon" @click="$store.memoryDashboardStore.nextPage()"
124
- :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages"
125
- title="Next Page">
126
- <span class="material-symbols-outlined">chevron_right</span>
127
- </button>
128
- </div>
129
- </div>
130
-
131
- <!-- Mass action toolbar -->
132
- <div x-show="$store.memoryDashboardStore.selectedCount > 0" class="mass-action-toolbar">
133
- <div class="selection-info">
134
- <span x-text="$store.memoryDashboardStore.selectedCount"></span> memories selected
135
- </div>
136
-
137
- <div class="mass-actions">
138
- <button class="btn btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
139
- title="Copy Selected Content">
140
- <span class="material-symbols-outlined">content_copy</span>
141
- Copy
142
- </button>
143
-
144
- <button class="btn btn-mass export"
145
- @click="$store.memoryDashboardStore.bulkExportMemories()"
146
- title="Export Selected Memories">
147
- <span class="material-symbols-outlined">download</span>
148
- Export
149
- </button>
150
-
151
- <button class="btn btn-mass delete"
152
- @click="$store.memoryDashboardStore.bulkDeleteMemories()"
153
- title="Delete Selected Memories">
154
- <span class="material-symbols-outlined">delete</span>
155
- Delete
156
- </button>
157
-
158
- <button class="btn btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
159
- title="Clear Selection">
160
- <span class="material-symbols-outlined">close</span>
161
- Clear
162
- </button>
163
- </div>
164
- </div>
165
-
166
- <div class="table-wrapper">
167
- <table class="memory-table">
168
- <thead>
169
- <tr>
170
- <th class="col-select">
171
- <input type="checkbox" :checked="$store.memoryDashboardStore.allSelected"
172
- :indeterminate="$store.memoryDashboardStore.someSelected && !$store.memoryDashboardStore.allSelected"
173
- @change="$store.memoryDashboardStore.toggleSelectAll()"
174
- title="Select/Deselect All" />
175
- </th>
176
- <th class="col-metadata">Metadata</th>
177
- <th class="col-preview">Preview</th>
178
- <th class="col-actions"></th>
179
- </tr>
180
- </thead>
181
- <tbody>
182
- <template x-for="memory in $store.memoryDashboardStore.paginatedMemories"
183
- :key="memory.id">
184
- <tr class="memory-row" :class="{'selected': memory.selected}"
185
- @click="$store.memoryDashboardStore.showMemoryDetails(memory)"
186
- style="cursor: pointer;">
187
- <!-- Selection checkbox -->
188
- <td class="select-cell" @click.stop="memory.selected = !memory.selected">
189
- <input type="checkbox" x-model="memory.selected" />
190
- </td>
191
-
192
- <!-- Metadata (merged Area, Timestamp, Source) -->
193
- <td class="metadata-cell">
194
- <div class="metadata-info">
195
- <div class="metadata-row">
196
- <span class="area-badge"
197
- :style="`background-color: ${$store.memoryDashboardStore.getAreaColor(memory.area)}`"
198
- x-text="(memory.area || 'UNKNOWN').toUpperCase()"></span>
199
- </div>
200
- <div class="metadata-row">
201
- <template x-if="memory.knowledge_source">
202
- <span class="source-type knowledge">Knowledge</span>
203
- </template>
204
- <template x-if="!memory.knowledge_source">
205
- <span class="source-type conversation">Conversation</span>
206
- </template>
207
- </div>
208
- <div class="metadata-row metadata-timestamp">
209
- <span
210
- x-text="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, true)"
211
- :title="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, false)"></span>
212
- </div>
213
-
214
- </div>
215
- </td>
216
-
217
- <!-- Content preview -->
218
- <td class="preview-cell">
219
- <div class="content-preview"
220
- x-text="memory.content_full.substring(0, 200) + (memory.content_full.length > 200 ? '...' : '')">
221
- </div>
222
- <div class="tags" x-show="memory.tags && memory.tags.length > 0">
223
- <template x-for="tag in memory.tags" :key="tag">
224
- <span class="tag" x-text="tag"></span>
225
- </template>
226
- </div>
227
- </td>
228
-
229
- <!-- Actions -->
230
- <td class="actions-cell" @click.stop>
231
- <div class="actions-wrapper">
232
- <button class="btn btn-action copy"
233
- @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy(memory))"
234
- title="Copy Memory">
235
- <span class="material-symbols-outlined">content_copy</span>
236
- </button>
237
-
238
- <button class="btn btn-action delete"
239
- @click="$confirmClick($event, () => $store.memoryDashboardStore.deleteMemory(memory))"
240
- title="Delete Memory">
241
- <span class="material-symbols-outlined">delete</span>
242
- </button>
243
- </div>
244
- </td>
245
- </tr>
246
- </template>
247
- </tbody>
248
- </table>
249
-
250
-
251
-
252
- </div>
253
-
254
- <!-- Mass action toolbar -->
255
- <div x-show="$store.memoryDashboardStore.selectedCount > 0" class="mass-action-toolbar">
256
- <div class="selection-info">
257
- <span x-text="$store.memoryDashboardStore.selectedCount"></span> memories selected
258
- </div>
259
-
260
- <div class="mass-actions">
261
- <button class="btn btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
262
- title="Copy Selected Content">
263
- <span class="material-symbols-outlined">content_copy</span>
264
- Copy
265
- </button>
266
-
267
- <button class="btn btn-mass export"
268
- @click="$store.memoryDashboardStore.bulkExportMemories()"
269
- title="Export Selected Memories">
270
- <span class="material-symbols-outlined">download</span>
271
- Export
272
- </button>
273
-
274
- <button class="btn btn-mass delete"
275
- @click="$store.memoryDashboardStore.bulkDeleteMemories()"
276
- title="Delete Selected Memories">
277
- <span class="material-symbols-outlined">delete</span>
278
- Delete
279
- </button>
280
-
281
- <button class="btn btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
282
- title="Clear Selection">
283
- <span class="material-symbols-outlined">close</span>
284
- Clear
285
- </button>
286
- </div>
287
- </div>
288
-
289
-
290
- <!-- Status Bar -->
291
- <div class="memory-status-bar" x-show="!$store.memoryDashboardStore.loading">
292
- <div class="status-info">
293
- <span class="status-item">
294
- <span class="material-symbols-outlined">database</span>
295
- Total: <strong x-text="$store.memoryDashboardStore.totalDbCount"></strong>
296
- </span>
297
- <span class="status-separator">•</span>
298
- <span class="status-item">
299
- Filtered: <strong x-text="$store.memoryDashboardStore.totalCount"></strong>
300
- </span>
301
- <span class="status-separator">•</span>
302
- <span class="status-item">
303
- Knowledge: <strong x-text="$store.memoryDashboardStore.knowledgeCount"></strong>
304
- </span>
305
- <span class="status-separator">•</span>
306
- <span class="status-item">
307
- Conversation: <strong x-text="$store.memoryDashboardStore.conversationCount"></strong>
308
- </span>
309
- </div>
310
-
311
- <!-- Pagination -->
312
- <div class="status-pagination" x-show="$store.memoryDashboardStore.totalPages > 1">
313
- <button class="btn btn-icon" @click="$store.memoryDashboardStore.prevPage()"
314
- :disabled="$store.memoryDashboardStore.currentPage === 1" title="Previous Page">
315
- <span class="material-symbols-outlined">chevron_left</span>
316
- </button>
317
- <div class="page-input-group">
318
- <label>Page</label>
319
- <input type="number" class="page-input"
320
- x-model.number="$store.memoryDashboardStore.currentPage"
321
- @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
322
- @keyup.enter="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
323
- :min="1" :max="$store.memoryDashboardStore.totalPages" />
324
- <span class="page-total">of <strong
325
- x-text="$store.memoryDashboardStore.totalPages"></strong></span>
326
- </div>
327
- <button class="btn btn-icon" @click="$store.memoryDashboardStore.nextPage()"
328
- :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages"
329
- title="Next Page">
330
- <span class="material-symbols-outlined">chevron_right</span>
331
- </button>
332
- </div>
333
- </div>
334
-
335
-
336
- <!-- No memories message -->
337
- <div x-show="$store.memoryDashboardStore.memories.length === 0 && !$store.memoryDashboardStore.message"
338
- class="no-memories">
339
- No memories found matching the current filters.
340
- </div>
341
-
342
- <!-- Initialization message -->
343
- <div x-show="$store.memoryDashboardStore.message" class="init-message">
344
- <span x-text="$store.memoryDashboardStore.message"></span>
345
- </div>
346
-
347
-
348
-
349
- </div>
350
-
351
-
352
-
353
- </div>
354
- </template>
355
- </div>
356
-
357
- <style>
358
- .modal-inner.modal-with-footer {
359
- display: flex;
360
- flex-direction: column;
361
- }
362
- .modal-inner.modal-with-footer .modal-scroll {
363
- flex: 1;
364
- min-height: 0;
365
- }
366
- .modal-inner.modal-with-footer .modal-footer {
367
- flex-shrink: 0;
368
- }
369
- .memory-filters-header {
370
- display: grid;
371
- grid-template-columns: 35% 25% 10% auto;
372
- grid-template-rows: auto auto;
373
- gap: 0.75rem;
374
- align-items: center;
375
- margin: 1rem 0;
376
- padding: 1rem;
377
- background: var(--color-panel);
378
- border: 1px solid var(--color-border);
379
- border-radius: 8px;
380
- }
381
-
382
- /* Grid positioning for desktop - 2 rows */
383
- .filter-memory-dir {
384
- grid-column: 1;
385
- grid-row: 1;
386
- }
387
- .filter-area {
388
- grid-column: 2;
389
- grid-row: 1;
390
- }
391
- .filter-limit {
392
- grid-column: 3;
393
- grid-row: 1;
394
- }
395
- .filter-threshold {
396
- grid-column: 4;
397
- grid-row: 2;
398
- }
399
- #search-input {
400
- grid-column: 1 / 3;
401
- grid-row: 2;
402
- }
403
- .btn-search {
404
- grid-column: 3;
405
- grid-row: 2;
406
- justify-content: center;
407
- }
408
- .btn-clear {
409
- grid-column: 4;
410
- grid-row: 1;
411
- justify-self: end;
412
- }
413
-
414
- .filter-group-inline {
415
- display: flex;
416
- flex: 1;
417
- align-items: center;
418
- gap: 0.5rem;
419
- }
420
- .filter-group-inline label {
421
- font-size: 0.85rem;
422
- font-weight: 600;
423
- color: var(--color-text);
424
- opacity: 0.8;
425
- white-space: nowrap;
426
- }
427
- .filter-group-inline select,
428
- .filter-group-inline input {
429
- border: 1px solid var(--color-border);
430
- flex: 0 auto;
431
- min-width: 0;
432
- }
433
- .filter-group-inline select:focus,
434
- .filter-group-inline input:focus {
435
- outline: none;
436
- border-color: var(--color-primary);
437
- background: var(--color-input-focus);
438
- }
439
- .filter-group-inline.filter-limit {
440
- flex: 0 0 auto;
441
- }
442
- .filter-limit input {
443
- flex: 0 0 150%;
444
- }
445
- #search-input {
446
- flex: 1;
447
- border: 1px solid var(--color-border);
448
- font-size: 0.9rem;
449
- height: 38px;
450
- }
451
- #search-input:focus {
452
- outline: none;
453
- border-color: var(--color-primary);
454
- background: var(--color-input-focus);
455
- }
456
- .filter-threshold label {
457
- font-size: 0.85rem;
458
- opacity: 0.8;
459
- }
460
-
461
- .memory-status-bar {
462
- display: flex;
463
- justify-content: space-between;
464
- align-items: center;
465
- padding: 0.75rem 1rem;
466
- background: var(--color-panel);
467
- border-bottom: 1px solid var(--color-border);
468
- border-radius: 8px;
469
- font-size: 0.9rem;
470
- }
471
- .status-info {
472
- display: flex;
473
- align-items: center;
474
- gap: 0.5rem;
475
- flex-wrap: wrap;
476
- }
477
- .status-item {
478
- display: flex;
479
- align-items: center;
480
- gap: 0.25rem;
481
- }
482
- .status-item strong {
483
- color: var(--color-primary);
484
- font-weight: 600;
485
- }
486
- .status-item .material-symbols-outlined {
487
- font-size: 18px;
488
- opacity: 0.6;
489
- }
490
- .status-separator {
491
- color: var(--color-border);
492
- margin: 0 0.25rem;
493
- }
494
- .status-pagination {
495
- display: flex;
496
- align-items: center;
497
- gap: 0.5rem;
498
- }
499
-
500
- .btn-icon {
501
- background: transparent;
502
- border: 1px solid var(--color-border);
503
- color: var(--color-text);
504
- padding: 0.25rem;
505
- display: flex;
506
- align-items: center;
507
- font-size: 0;
508
- }
509
- .btn-icon:hover:not(:disabled) {
510
- background: var(--color-panel);
511
- border-color: var(--color-primary);
512
- color: var(--color-text);
513
- }
514
- .btn-icon:disabled {
515
- opacity: 0.4;
516
- cursor: not-allowed;
517
- }
518
- .btn-icon .material-symbols-outlined {
519
- font-size: 20px;
520
- }
521
-
522
- .page-input-group {
523
- display: flex;
524
- align-items: center;
525
- gap: 0.5rem;
526
- }
527
- .page-input-group label {
528
- opacity: 0.8;
529
- }
530
- .page-total {
531
- color: var(--color-text);
532
- opacity: 0.8;
533
- font-size: 0.85rem;
534
- white-space: nowrap;
535
- }
536
- .page-total strong {
537
- color: var(--color-primary);
538
- font-weight: 600;
539
- }
540
- .page-input {
541
- width: 60px;
542
- padding: 0.25rem 0.5rem;
543
- text-align: center;
544
- border: 1px solid var(--color-border);
545
- background: var(--color-input);
546
- color: var(--color-text);
547
- border-radius: 4px;
548
- font-size: 0.85rem;
549
- height: 28px;
550
- }
551
- .page-input:focus {
552
- outline: none;
553
- border-color: var(--color-primary);
554
- background: var(--color-input-focus);
555
- }
556
-
557
- /* Remove spinner arrows */
558
- .page-input::-webkit-inner-spin-button,
559
- .page-input::-webkit-outer-spin-button {
560
- -webkit-appearance: none;
561
- margin: 0;
562
- }
563
- .page-input[type=number] {
564
- -moz-appearance: textfield;
565
- appearance: textfield;
566
- }
567
-
568
- .loading-state,
569
- .error-state,
570
- .no-memories,
571
- .init-message {
572
- text-align: center;
573
- padding: 2rem;
574
- color: var(--color-text);
575
- opacity: 0.8;
576
- background: var(--color-panel);
577
- border: 1px solid var(--color-border);
578
- border-radius: 8px;
579
- margin: 1rem 0;
580
- }
581
- .loading-state {
582
- display: grid;
583
- align-items: center;
584
- }
585
- .init-message {
586
- color: var(--color-primary);
587
- border-color: var(--color-primary);
588
- }
589
- .error-state {
590
- color: var(--color-accent);
591
- border-color: var(--color-accent);
592
- }
593
-
594
- .loading-spinner {
595
- width: 24px;
596
- height: 24px;
597
- min-width: 24px;
598
- min-height: 24px;
599
- max-width: 24px;
600
- max-height: 24px;
601
- border: 3px solid var(--color-border);
602
- border-top-color: var(--color-primary);
603
- border-radius: 50%;
604
- animation: spin 1s linear infinite;
605
- margin: 0 auto 0.5rem;
606
- flex-shrink: 0;
607
- flex-grow: 0;
608
- display: inline-block;
609
- position: relative;
610
- box-sizing: border-box;
611
- }
612
-
613
- @keyframes spin {
614
- to {
615
- transform: rotate(360deg);
616
- }
617
- }
618
-
619
- .memory-table-container {
620
- border: 1px solid var(--color-border);
621
- border-radius: 8px;
622
- }
623
- .memory-table {
624
- width: 100%;
625
- border-collapse: collapse;
626
- table-layout: fixed;
627
- }
628
-
629
- .col-select {
630
- width: 5%;
631
- }
632
- .col-metadata {
633
- width: 10em;
634
- }
635
- .col-actions {
636
- width: 4em;
637
- }
638
-
639
- .memory-table th,
640
- .memory-table td {
641
- padding: 1rem 0.75rem;
642
- text-align: left;
643
- vertical-align: top;
644
- border-bottom: 1px solid var(--color-border);
645
- overflow: hidden;
646
- }
647
-
648
- .metadata-cell {
649
- overflow: visible;
650
- white-space: normal;
651
- word-wrap: break-word;
652
- }
653
- .metadata-info {
654
- display: flex;
655
- flex-direction: column;
656
- gap: 0.5rem;
657
- }
658
- .metadata-row {
659
- display: flex;
660
- align-items: center;
661
- gap: 0.5rem;
662
- }
663
- .metadata-timestamp {
664
- font-size: 0.85rem;
665
- color: var(--color-text);
666
- font-family: monospace;
667
- }
668
-
669
- .area-badge {
670
- color: white;
671
- padding: 0.35rem 0.75rem;
672
- border-radius: 16px;
673
- font-size: 0.75rem;
674
- font-weight: bold;
675
- text-transform: uppercase;
676
- }
677
- .select-cell,
678
- .col-select {
679
- text-align: center;
680
- padding: 0.65rem 0.5rem !important;
681
- }
682
- .select-cell input[type="checkbox"],
683
- .col-select input[type="checkbox"] {
684
- cursor: pointer;
685
- transform: scale(1.2);
686
- }
687
- .memory-row.selected {
688
- background: var(--color-panel);
689
- border-left: 3px solid var(--color-primary);
690
- }
691
- .mass-action-toolbar {
692
- display: flex;
693
- justify-content: space-between;
694
- align-items: center;
695
- padding: 1rem;
696
- background: var(--color-panel);
697
- margin: 0;
698
- animation: slideDown 0.3s ease;
699
- }
700
- .btn-mass {
701
- align-items: center;
702
- border: 1px solid var(--color-border);
703
- gap: 0.25rem;
704
- display: flex;
705
- background: var(--color-background);
706
- color: var(--color-text);
707
- }
708
- .btn-mass:hover {
709
- border-color: var(--color-primary);
710
- color: var(--color-primary);
711
- }
712
- .btn-mass.delete:hover {
713
- border-color: var(--color-accent);
714
- color: var(--color-accent);
715
- }
716
- .selection-info {
717
- font-weight: 600;
718
- }
719
- .mass-actions {
720
- display: flex;
721
- gap: 0.5rem;
722
- }
723
- .btn-mass .material-symbols-outlined {
724
- font-size: 18px;
725
- }
726
- .btn-mass:hover {
727
- border-color: var(--color-primary);
728
- background: var(--color-panel);
729
- }
730
- .btn-mass.delete:hover {
731
- border-color: var(--color-accent);
732
- color: var(--color-accent);
733
- }
734
-
735
- @keyframes slideDown {
736
- from {
737
- opacity: 0;
738
- transform: translateY(-10px);
739
- }
740
-
741
- to {
742
- opacity: 1;
743
- transform: translateY(0);
744
- }
745
- }
746
-
747
- .memory-table th {
748
- background: var(--color-panel);
749
- font-weight: 600;
750
- color: var(--color-text);
751
- position: sticky;
752
- top: 0;
753
- z-index: 10;
754
- border-bottom: 2px solid var(--color-border);
755
- }
756
- .memory-table tbody tr {
757
- border-bottom: 1px solid var(--color-border);
758
- }
759
- .memory-table tbody tr:last-child {
760
- border-bottom: none;
761
- }
762
- .memory-table tbody tr.memory-row>td {
763
- height: 5em;
764
- }
765
-
766
- .source-type {
767
- padding: 0.25rem 0.5rem;
768
- border-radius: var(--border-radius);
769
- font-size: 0.75rem;
770
- font-weight: 500;
771
- text-align: center;
772
- border: 1px solid;
773
- white-space: nowrap;
774
- flex-shrink: 0;
775
- }
776
- .content-preview,
777
- .metadata-info {
778
- height: 5.5em;
779
- overflow: hidden;
780
- word-wrap: break-word;
781
- overflow-wrap: break-word;
782
- }
783
- .tags {
784
- display: flex;
785
- gap: 0.25rem;
786
- margin-top: 0.5rem;
787
- flex-wrap: wrap;
788
- }
789
- .tag {
790
- background: var(--color-panel);
791
- border: 1px solid var(--color-border);
792
- padding: 0.2rem 0.4rem;
793
- border-radius: 6px;
794
- font-size: 0.7rem;
795
- color: var(--color-text);
796
- opacity: 0.8;
797
- }
798
- .actions-cell {
799
- padding: 0 !important;
800
- position: relative;
801
- }
802
- .actions-wrapper {
803
- position: absolute;
804
- top: 0;
805
- left: 0;
806
- right: 0;
807
- bottom: 0;
808
- display: flex;
809
- gap: 0.375rem;
810
- margin-left: auto;
811
- flex-direction: column;
812
- align-items: center;
813
- justify-content: center;
814
- }
815
-
816
- /* Table action buttons - extends .btn */
817
- .btn-action {
818
- background: none;
819
- border: 1px solid var(--color-border);
820
- padding: 0.25rem;
821
- margin: 0 0.1rem;
822
- color: var(--color-text);
823
- opacity: 0.7;
824
- display: inline-flex;
825
- }
826
- .btn-action .material-symbols-outlined {
827
- font-size: 18px;
828
- }
829
- .btn-action:hover {
830
- opacity: 1;
831
- background: var(--color-panel);
832
- border-color: var(--color-primary);
833
- color: var(--color-primary);
834
- transform: translateY(-1px);
835
- }
836
- .btn-action.view:hover {
837
- background: var(--color-panel);
838
- border-color: var(--color-primary);
839
- color: var(--color-primary);
840
- }
841
- .btn-action.copy:hover {
842
- background: var(--color-panel);
843
- border-color: var(--color-primary);
844
- color: var(--color-primary);
845
- }
846
- .btn-action.delete:hover {
847
- background: var(--color-panel);
848
- border-color: var(--color-accent);
849
- color: var(--color-accent);
850
- }
851
-
852
- /* Responsive design */
853
- @media (max-width: 870px) {
854
- .memory-dashboard {
855
- padding: 0.5rem;
856
- }
857
- .memory-filters-header {
858
- padding: 0.75rem;
859
- }
860
- .memory-filters-header {
861
- display: flex;
862
- flex-wrap: wrap;
863
- gap: 0.75rem;
864
- }
865
- .content-preview,
866
- .metadata-info {
867
- height: 6em;
868
- }
869
-
870
- /* Reset grid positioning */
871
- .filter-memory-dir,
872
- .filter-area,
873
- .filter-limit,
874
- .filter-threshold,
875
- #search-input,
876
- .btn-search,
877
- .btn-clear {
878
- grid-column: auto;
879
- grid-row: auto;
880
- }
881
- .filter-group-inline {
882
- width: 100%;
883
- flex-direction: row;
884
- align-items: center;
885
- gap: 0.5rem;
886
- }
887
- .filter-group-inline label {
888
- font-size: 0.9rem;
889
- margin-bottom: 0.25rem;
890
- }
891
- .filter-group-inline select,
892
- .filter-group-inline input {
893
- height: 42px;
894
- font-size: 1rem;
895
- }
896
- .filter-group-inline.filter-limit {
897
- flex: 33%;
898
- }
899
- .filter-limit input {
900
- flex: 1;
901
- }
902
-
903
- /* Mobile order and layout - force items to specific widths */
904
- .filter-memory-dir {
905
- order: 1;
906
- flex: 1 1 100%;
907
- }
908
- .filter-area {
909
- order: 2;
910
- flex: 1 1 100%;
911
- }
912
- .filter-limit {
913
- order: 3;
914
- flex: 1 1 100%;
915
- }
916
- .btn-clear {
917
- order: 6;
918
- flex: 40%;
919
- min-width: 80px;
920
- padding: 0;
921
- height: 42px;
922
- justify-content: center;
923
- }
924
- #search-input {
925
- order: 5;
926
- flex: auto;
927
- width: 100%;
928
- height: 42px;
929
- }
930
-
931
- /* Search button and threshold on same row */
932
- .btn-search {
933
- order: 7;
934
- flex: 40%;
935
- height: 42px;
936
- padding: 0 1rem;
937
- min-width: 80px;
938
- }
939
- .filter-threshold {
940
- order: 4;
941
- flex: 40%;
942
- flex-direction: column;
943
- align-items: stretch;
944
- gap: 0.5rem;
945
- padding: 0;
946
- }
947
- .filter-threshold label {
948
- font-size: 0.9rem;
949
- width: 100%;
950
- display: flex;
951
- justify-content: space-between;
952
- }
953
- .filter-threshold input[type="range"] {
954
- width: 100%;
955
- }
956
- .memory-status-bar {
957
- flex-direction: column;
958
- gap: 0.75rem;
959
- }
960
- .status-info {
961
- width: 100%;
962
- justify-content: center;
963
- flex-wrap: wrap;
964
- gap: 0.5rem 1rem;
965
- }
966
- .status-info .material-symbols-outlined {
967
- font-size: 18px;
968
- }
969
- .status-pagination {
970
- width: 100%;
971
- justify-content: center;
972
- padding-top: 0.5rem;
973
- border-top: 1px solid var(--color-border);
974
- }
975
-
976
- .memory-table th,
977
- .memory-table td {
978
- padding: 0.5rem 0.25rem;
979
- font-size: 0.85rem;
980
- }
981
- .actions-cell {
982
- min-width: 60px;
983
- width: 60px;
984
- }
985
- .col-select {
986
- width: 8%;
987
- }
988
- .col-metadata {
989
- width: 27%;
990
- }
991
- .col-preview {
992
- width: 55%;
993
- }
994
- .col-actions {
995
- width: 10%;
996
- }
997
- }
998
- </style>
999
- </template>
1000
- </div>
1001
-</body>
1002
-</html>
\ No newline at end of file