further css centralization and footer injection
- mobile breakpoint change for mem dashboard (800=>960px) - css cleanup and globalization - final css cleanup
Alessandro committed
Sep 26, 2025 at 15:18 UTC
b81ed66743774d7f12a8b77bbe1d6ed05dd0ba6d
5 files changed
+409
-1175
webui/components/settings/memory/memory-dashboard.html
+143
-905
@@ -11,12 +11,31 @@
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">
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
+ })">
36
16
- <!-- Unified Filter Section -->
37
+ <!-- Search and Filters Section -->
38
<div class="memory-filters-header">
18
- <div class="filter-container-unified">
19
- <!-- All elements in single container for flexible layout -->
39
<div class="filter-group-inline filter-memory-dir">
40
<label for="memory-subdir-select">Memory Directory</label>
41
<select id="memory-subdir-select" x-model="$store.memoryDashboardStore.selectedMemorySubdir"
@@ -57,16 +76,15 @@
76
placeholder="Search memory content..."
77
@keyup.enter="$store.memoryDashboardStore.searchMemories()" />
78
60
- <button class="btn primary btn-search" @click="$store.memoryDashboardStore.searchMemories()"
79
+ <button class="btn btn-ok btn-search" @click="$store.memoryDashboardStore.searchMemories()"
80
:disabled="$store.memoryDashboardStore.loading || $store.memoryDashboardStore.loadingSubdirs">
81
<span x-show="!$store.memoryDashboardStore.initializingMemory">Search</span>
82
<span x-show="$store.memoryDashboardStore.initializingMemory">Init...</span>
83
</button>
84
66
- <button class="btn btn-clear" @click="$store.memoryDashboardStore.clearSearch()">
85
+ <button class="btn btn-cancel btn-clear" @click="$store.memoryDashboardStore.clearSearch()">
86
Clear
87
</button>
69
- </div>
88
</div>
89
90
<!-- Loading state -->
@@ -85,7 +103,7 @@
103
<div x-show="!$store.memoryDashboardStore.loading && !$store.memoryDashboardStore.error"
104
class="memory-table-container">
105
88
- <!-- Compact Status Bar -->
106
+ <!-- Status Bar -->
107
<div class="memory-status-bar" x-show="!$store.memoryDashboardStore.loading">
108
<div class="status-info">
109
<span class="status-item">
@@ -106,9 +124,9 @@
124
</span>
125
</div>
126
109
- <!-- Compact Pagination -->
127
+ <!-- Pagination -->
128
<div class="status-pagination" x-show="$store.memoryDashboardStore.totalPages > 1">
111
- <button class="btn-icon" @click="$store.memoryDashboardStore.prevPage()"
129
+ <button class="btn btn-icon" @click="$store.memoryDashboardStore.prevPage()"
130
:disabled="$store.memoryDashboardStore.currentPage === 1"
131
title="Previous Page">
132
<span class="material-symbols-outlined">chevron_left</span>
@@ -122,8 +140,9 @@
140
@keyup.enter="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
141
:min="1"
142
:max="$store.memoryDashboardStore.totalPages" />
143
+ <span class="page-total">of <strong x-text="$store.memoryDashboardStore.totalPages"></strong></span>
144
</div>
126
- <button class="btn-icon" @click="$store.memoryDashboardStore.nextPage()"
145
+ <button class="btn btn-icon" @click="$store.memoryDashboardStore.nextPage()"
146
:disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages"
147
title="Next Page">
148
<span class="material-symbols-outlined">chevron_right</span>
@@ -138,25 +157,25 @@
157
</div>
158
159
<div class="mass-actions">
141
- <button class="btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
160
+ <button class="btn btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
161
title="Copy Selected Content">
162
<span class="material-symbols-outlined">content_copy</span>
163
Copy
164
</button>
165
147
- <button class="btn-mass export" @click="$store.memoryDashboardStore.bulkExportMemories()"
166
+ <button class="btn btn-mass export" @click="$store.memoryDashboardStore.bulkExportMemories()"
167
title="Export Selected Memories">
168
<span class="material-symbols-outlined">download</span>
169
Export
170
</button>
171
153
- <button class="btn-mass delete" @click="$store.memoryDashboardStore.bulkDeleteMemories()"
172
+ <button class="btn btn-mass delete" @click="$store.memoryDashboardStore.bulkDeleteMemories()"
173
title="Delete Selected Memories">
174
<span class="material-symbols-outlined">delete</span>
175
Delete
176
</button>
177
159
- <button class="btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
178
+ <button class="btn btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
179
title="Clear Selection">
180
<span class="material-symbols-outlined">close</span>
181
Clear
@@ -227,13 +246,13 @@
246
<!-- Actions -->
247
<td class="actions-cell" @click.stop>
248
<div class="actions-wrapper">
230
- <button class="btn-action copy"
249
+ <button class="btn btn-action copy"
250
@click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy(memory))"
251
title="Copy Memory">
252
<span class="material-symbols-outlined">content_copy</span>
253
</button>
254
236
- <button class="btn-action delete"
255
+ <button class="btn btn-action delete"
256
@click="$store.memoryDashboardStore.deleteMemory(memory)"
257
title="Delete Memory">
258
<span class="material-symbols-outlined">delete</span>
@@ -262,12 +281,6 @@
281
282
283
265
- <!-- Export button -->
266
- <div class="export-section">
267
- <button class="btn primary" @click="$store.memoryDashboardStore.exportMemories()">
268
- Export Memories (JSON)
269
- </button>
270
- </div>
284
</div>
285
286
@@ -277,33 +290,31 @@
290
</div>
291
292
<style>
280
- [x-cloak] {
281
- display: none !important;
293
+ .modal-inner.modal-with-footer {
294
+ display: flex;
295
+ flex-direction: column;
296
}
283
-
284
- .memory-dashboard {
285
- padding: 1rem;
286
- margin: 0 auto;
287
- background: var(--color-background);
288
- color: var(--color-text);
297
+
298
+ .modal-inner.modal-with-footer .modal-scroll {
299
+ flex: 1;
300
+ min-height: 0;
301
}
290
-
291
- /* Compact Linear Filter Layout */
292
- .memory-filters-header {
293
- margin-bottom: 1rem;
294
- padding: 1rem;
295
- background: var(--color-panel);
296
- border: 1px solid var(--color-border);
297
- border-radius: 8px;
302
+
303
+ .modal-inner.modal-with-footer .modal-footer {
304
+ flex-shrink: 0;
305
}
306
300
- /* Unified container using CSS Grid for desktop layout */
301
- .filter-container-unified {
307
+ .memory-filters-header {
308
display: grid;
309
grid-template-columns: 35% 25% 10% auto;
310
grid-template-rows: auto auto;
311
gap: 0.75rem;
312
align-items: center;
313
+ margin: 1rem 0;
314
+ padding: 1rem;
315
+ background: var(--color-panel);
316
+ border: 1px solid var(--color-border);
317
+ border-radius: 8px;
318
}
319
320
/* Grid positioning for desktop - 2 rows */
@@ -313,7 +324,7 @@
324
.filter-threshold { grid-column: 4; grid-row: 2; }
325
326
#search-input { grid-column: 1 / 3; grid-row: 2; }
316
- .btn-search { grid-column: 3; grid-row: 2; }
327
+ .btn-search { grid-column: 3; grid-row: 2; justify-content: center; }
328
.btn-clear {
329
grid-column: 4;
330
grid-row: 1;
@@ -322,9 +333,9 @@
333
334
.filter-group-inline {
335
display: flex;
336
+ flex: 1;
337
align-items: center;
338
gap: 0.5rem;
327
- flex: 1;
339
}
340
341
.filter-group-inline label {
@@ -337,13 +348,7 @@
348
349
.filter-group-inline select,
350
.filter-group-inline input {
340
- padding: 0.4rem 0.6rem;
351
border: 1px solid var(--color-border);
342
- background: var(--color-input);
343
- color: var(--color-text);
344
- border-radius: 4px;
345
- font-size: 0.9rem;
346
- height: 36px;
352
flex: 0 auto;
353
min-width: 0;
354
}
@@ -360,17 +365,13 @@
365
}
366
367
.filter-limit input {
363
- flex: 0 0 200%;
368
+ flex: 0 0 150%;
369
}
370
371
372
#search-input {
373
flex: 1;
369
- padding: 0.5rem 0.75rem;
374
border: 1px solid var(--color-border);
371
- background: var(--color-input);
372
- color: var(--color-text);
373
- border-radius: 4px;
375
font-size: 0.9rem;
376
height: 38px;
377
}
@@ -381,63 +382,18 @@
382
background: var(--color-input-focus);
383
}
384
384
- .filter-threshold {
385
- display: flex;
386
- align-items: center;
387
- gap: 0.75rem;
388
- padding: 0 0.5rem;
389
- }
390
-
385
.filter-threshold label {
386
font-size: 0.85rem;
393
- color: var(--color-text);
387
opacity: 0.8;
395
- white-space: nowrap;
396
- }
397
-
398
- .filter-threshold strong {
399
- color: var(--color-primary);
400
- font-weight: 600;
401
- min-width: 3ch;
402
- display: inline-block;
403
- }
404
-
405
- .filter-threshold input[type="range"] {
406
- height: 4px;
407
- -webkit-appearance: none;
408
- appearance: none;
409
- background: var(--color-border);
410
- border-radius: 2px;
411
- outline: none;
412
- }
413
-
414
- .filter-threshold input[type="range"]::-webkit-slider-thumb {
415
- -webkit-appearance: none;
416
- appearance: none;
417
- width: 16px;
418
- height: 16px;
419
- background: var(--color-primary);
420
- border-radius: 50%;
421
- cursor: pointer;
422
- }
423
-
424
- .filter-threshold input[type="range"]::-moz-range-thumb {
425
- width: 16px;
426
- height: 16px;
427
- background: var(--color-primary);
428
- border-radius: 50%;
429
- cursor: pointer;
430
- border: none;
388
}
389
433
- /* Compact Status Bar */
390
.memory-status-bar {
391
display: flex;
392
justify-content: space-between;
393
align-items: center;
394
padding: 0.75rem 1rem;
395
background: var(--color-panel);
440
- border: 1px solid var(--color-border);
396
+ border-bottom: 1px solid var(--color-border);
397
border-radius: 8px;
398
margin-bottom: 1rem;
399
font-size: 0.9rem;
@@ -454,8 +410,6 @@
410
display: flex;
411
align-items: center;
412
gap: 0.25rem;
457
- color: var(--color-text);
458
- opacity: 0.8;
413
}
414
415
.status-item strong {
@@ -482,18 +436,17 @@
436
.btn-icon {
437
background: transparent;
438
border: 1px solid var(--color-border);
485
- border-radius: 4px;
486
- padding: 0.25rem;
487
- cursor: pointer;
439
color: var(--color-text);
440
+ padding: 0.25rem;
441
display: flex;
442
align-items: center;
491
- transition: all 0.2s;
443
+ font-size: 0;
444
}
445
446
.btn-icon:hover:not(:disabled) {
447
background: var(--color-panel);
448
border-color: var(--color-primary);
449
+ color: var(--color-text);
450
}
451
452
.btn-icon:disabled {
@@ -509,14 +462,24 @@
462
display: flex;
463
align-items: center;
464
gap: 0.5rem;
512
- font-size: 0.85rem;
513
- color: var(--color-text);
465
}
466
467
.page-input-group label {
468
opacity: 0.8;
469
}
470
471
+ .page-total {
472
+ color: var(--color-text);
473
+ opacity: 0.8;
474
+ font-size: 0.85rem;
475
+ white-space: nowrap;
476
+ }
477
+
478
+ .page-total strong {
479
+ color: var(--color-primary);
480
+ font-weight: 600;
481
+ }
482
+
483
.page-input {
484
width: 60px;
485
padding: 0.25rem 0.5rem;
@@ -535,7 +498,7 @@
498
background: var(--color-input-focus);
499
}
500
538
- /* Remove spinner arrows for cleaner look */
501
+ /* Remove spinner arrows */
502
.page-input::-webkit-inner-spin-button,
503
.page-input::-webkit-outer-spin-button {
504
-webkit-appearance: none;
@@ -547,13 +510,6 @@
510
appearance: textfield;
511
}
512
550
- .loading-text {
551
- font-size: 0.85rem;
552
- color: var(--color-text);
553
- opacity: 0.7;
554
- font-style: italic;
555
- }
556
-
513
.loading-state,
514
.error-state,
515
.no-memories,
@@ -568,6 +524,11 @@
524
margin: 1rem 0;
525
}
526
527
+ .loading-state {
528
+ display: grid;
529
+ align-items: center;
530
+ }
531
+
532
.init-message {
533
color: var(--color-primary);
534
border-color: var(--color-primary);
@@ -604,16 +565,8 @@
565
}
566
567
.memory-table-container {
607
- background: var(--color-background);
568
border: 1px solid var(--color-border);
569
border-radius: 8px;
610
- overflow: hidden;
611
- margin-bottom: 1rem;
612
- }
613
-
614
- .table-wrapper {
615
- width: 100%;
616
- overflow-x: auto;
570
}
571
572
.memory-table {
@@ -622,7 +575,6 @@
575
table-layout: fixed;
576
}
577
625
- /* Fixed column widths for proper fit */
578
.col-select {
579
width: 5%;
580
}
@@ -648,7 +600,6 @@
600
overflow: hidden;
601
}
602
651
- /* Metadata cell styling */
603
.metadata-cell {
604
overflow: visible;
605
white-space: normal;
@@ -673,17 +624,19 @@
624
font-family: monospace;
625
}
626
676
- .source-type {
677
- font-size: 0.8rem;
678
- color: var(--color-text);
679
- font-weight: 500;
680
- }
627
+ .area-badge {
628
+ color: white;
629
+ padding: 0.35rem 0.75rem;
630
+ border-radius: 16px;
631
+ font-size: 0.75rem;
632
+ font-weight: bold;
633
+ text-transform: uppercase;
634
+ }
635
682
- /* Selection column styling */
636
.select-cell,
637
.col-select {
638
text-align: center;
686
- padding: 0.5rem !important;
639
+ padding: 0.65rem 0.5rem !important;
640
}
641
642
.select-cell input[type="checkbox"],
@@ -692,30 +645,44 @@
645
transform: scale(1.2);
646
}
647
695
- /* Selected row styling */
648
.memory-row.selected {
697
- background: rgba(115, 122, 129, 0.2);
649
+ background: var(--color-panel);
650
border-left: 3px solid var(--color-primary);
651
}
652
701
-
702
- /* Mass action toolbar */
653
.mass-action-toolbar {
654
display: flex;
655
justify-content: space-between;
656
align-items: center;
657
padding: 1rem;
708
- background: rgba(115, 122, 129, 0.2);
658
+ background: var(--color-panel);
659
border: 1px solid var(--color-primary);
660
border-radius: 8px;
661
margin: 1rem 0;
662
animation: slideDown 0.3s ease;
663
}
664
665
+ .btn-mass {
666
+ align-items: center;
667
+ border: 1px solid var(--color-border);
668
+ gap: 0.25rem;
669
+ display: flex;
670
+ background: var(--color-background);
671
+ color: var(--color-text);
672
+ }
673
+
674
+ .btn-mass:hover {
675
+ border-color: var(--color-primary);
676
+ color: var(--color-primary);
677
+ }
678
+
679
+ .btn-mass.delete:hover {
680
+ border-color: var(--color-accent);
681
+ color: var(--color-accent);
682
+ }
683
684
.selection-info {
685
font-weight: 600;
718
- color: var(--color-primary);
686
}
687
688
.mass-actions {
@@ -723,21 +690,6 @@
690
gap: 0.5rem;
691
}
692
726
- .btn-mass {
727
- display: flex;
728
- align-items: center;
729
- gap: 0.25rem;
730
- padding: 0.4rem 0.8rem;
731
- border: 1px solid var(--color-border);
732
- background: var(--color-background);
733
- color: var(--color-text);
734
- border-radius: 4px;
735
- cursor: pointer;
736
- font-size: 0.85rem;
737
- font-weight: 500;
738
- transition: all 0.2s ease;
739
- }
740
-
693
.btn-mass .material-symbols-outlined {
694
font-size: 18px;
695
}
@@ -747,32 +699,16 @@
699
background: var(--color-panel);
700
}
701
750
- .btn-mass.copy:hover {
751
- border-color: var(--color-primary);
752
- color: var(--color-primary);
753
- }
754
-
755
- .btn-mass.export:hover {
756
- border-color: var(--color-primary);
757
- color: var(--color-primary);
758
- }
759
-
702
.btn-mass.delete:hover {
703
border-color: var(--color-accent);
704
color: var(--color-accent);
705
}
706
765
- .btn-mass.clear:hover {
766
- border-color: var(--color-primary);
767
- color: var(--color-primary);
768
- }
769
-
707
@keyframes slideDown {
708
from {
709
opacity: 0;
710
transform: translateY(-10px);
711
}
775
-
712
to {
713
opacity: 1;
714
transform: translateY(0);
@@ -806,37 +742,9 @@
742
border-bottom: none;
743
}
744
809
- .area-badge {
810
- padding: 0.25rem 0.5rem;
811
- border-radius: 12px;
812
- color: white;
813
- font-size: 0.75rem;
814
- font-weight: bold;
815
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
816
- border: 1px solid rgba(255, 255, 255, 0.1);
817
- }
818
-
819
-
820
- .timestamp-cell {
821
- font-size: 0.85rem;
822
- color: var(--color-text);
823
- opacity: 0.7;
824
- white-space: normal;
825
- word-break: break-word;
826
- font-family: monospace;
827
- line-height: 1.2;
828
- }
829
-
830
- .source-info {
831
- display: flex;
832
- flex-direction: column;
833
- gap: 0.25rem;
834
- align-items: flex-start;
835
- }
836
-
745
.source-type {
746
padding: 0.25rem 0.5rem;
839
- border-radius: 6px;
747
+ border-radius: var(--border-radius);
748
font-size: 0.75rem;
749
font-weight: 500;
750
text-align: center;
@@ -845,43 +753,10 @@
753
flex-shrink: 0;
754
}
755
848
- .source-type.knowledge {
849
- background: rgba(115, 122, 129, 0.2);
850
- color: var(--color-primary);
851
- border-color: var(--color-primary);
852
- }
853
-
854
-
855
- .source-type.conversation {
856
- background: rgba(101, 101, 101, 0.2);
857
- color: var(--color-text);
858
- opacity: 0.8;
859
- border-color: var(--color-border);
860
- }
861
-
862
-
863
- .source-file {
864
- font-size: 0.7rem;
865
- color: var(--color-text);
866
- opacity: 0.7;
867
- font-family: monospace;
868
- background: var(--color-panel);
869
- padding: 0.2rem 0.4rem;
870
- border-radius: 4px;
871
- border: 1px solid var(--color-border);
872
- word-break: break-all;
873
- white-space: normal;
874
- max-width: 100%;
875
- overflow-wrap: break-word;
876
- }
877
-
756
.content-preview {
757
line-height: 1.4;
880
- font-size: 0.9rem;
881
- color: var(--color-text);
758
word-wrap: break-word;
759
overflow-wrap: break-word;
884
- max-width: 100%;
760
overflow: hidden;
761
text-overflow: ellipsis;
762
}
@@ -904,10 +779,7 @@
779
}
780
781
.actions-cell {
907
- min-width: 60px;
908
- width: 60px;
782
padding: 0 !important;
910
- height: 60px;
783
position: relative;
784
}
785
@@ -923,28 +795,15 @@
795
justify-content: center;
796
}
797
926
- .actions-cell .btn-action {
927
- display: block;
928
- margin: 0.1rem 0;
929
- width: 28px;
930
- height: 28px;
931
- }
932
-
798
+ /* Table action buttons - extends .btn */
799
.btn-action {
800
background: none;
801
border: 1px solid var(--color-border);
802
padding: 0.25rem;
803
margin: 0 0.1rem;
938
- cursor: pointer;
939
- border-radius: 4px;
804
color: var(--color-text);
805
opacity: 0.7;
942
- transition: all 0.2s ease;
806
display: inline-flex;
944
- align-items: center;
945
- justify-content: center;
946
- min-width: 28px;
947
- height: 28px;
807
}
808
809
.btn-action .material-symbols-outlined {
@@ -977,389 +836,48 @@
836
color: var(--color-accent);
837
}
838
839
+ /* Responsive design */
840
+ @media (max-width: 870px) {
841
+ .memory-dashboard {
842
+ padding: 0.5rem;
843
+ }
844
845
+ .memory-filters-header {
846
+ padding: 0.75rem;
847
+ }
848
982
- .pagination-info-inline {
983
- color: var(--color-text);
984
- opacity: 0.7;
985
- font-size: 0.9rem;
986
- }
849
+ .memory-filters-header {
850
+ display: flex;
851
+ flex-wrap: wrap;
852
+ gap: 0.75rem;
853
+ }
854
+
855
+ /* Reset grid positioning */
856
+ .filter-memory-dir,
857
+ .filter-area,
858
+ .filter-limit,
859
+ .filter-threshold,
860
+ #search-input,
861
+ .btn-search,
862
+ .btn-clear {
863
+ grid-column: auto;
864
+ grid-row: auto;
865
+ }
866
988
- .pagination-controls {
989
- display: flex;
990
- align-items: center;
991
- gap: 0.5rem;
992
- }
867
+ .filter-group-inline {
868
+ width: 100%;
869
+ flex-direction: row;
870
+ align-items: center;
871
+ gap: 0.5rem;
872
+ }
873
994
- .page-select {
995
- background: var(--color-background);
996
- border: 1px solid var(--color-border);
997
- color: var(--color-text);
998
- padding: 0.5rem 0.75rem;
999
- border-radius: 6px;
1000
- font-size: 0.9rem;
1001
- cursor: pointer;
1002
- min-width: 120px;
1003
- }
1004
-
1005
- .page-select:focus {
1006
- outline: none;
1007
- border-color: var(--color-primary);
1008
- box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.2);
1009
- background: var(--color-input-focus);
1010
- }
1011
-
1012
-
1013
-
1014
-
1015
- .export-section {
1016
- text-align: center;
1017
- margin-top: 1rem;
1018
- padding: 1rem;
1019
- background: var(--color-panel);
1020
- border: 1px solid var(--color-border);
1021
- border-radius: 8px;
1022
- border-top: 1px solid var(--color-border);
1023
- }
1024
-
1025
- .modal-enter {
1026
- transition: all 0.3s ease;
1027
- }
1028
-
1029
- .modal-enter-start {
1030
- opacity: 0;
1031
- }
1032
-
1033
- .modal-enter-end {
1034
- opacity: 1;
1035
- }
1036
-
1037
- .modal-leave {
1038
- transition: all 0.2s ease;
1039
- }
1040
-
1041
- .modal-leave-start {
1042
- opacity: 1;
1043
- }
1044
-
1045
- .modal-leave-end {
1046
- opacity: 0;
1047
- }
1048
-
1049
- .memory-detail-modal {
1050
- background: var(--color-background);
1051
- border: 1px solid var(--color-border);
1052
- border-radius: 16px;
1053
- width: 95%;
1054
- max-width: 1200px;
1055
- max-height: 90vh;
1056
- min-height: 60vh;
1057
- overflow: hidden;
1058
- display: flex;
1059
- flex-direction: column;
1060
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1061
- animation: modalSlideIn 0.3s ease-out;
1062
- margin: 0 auto;
1063
- }
1064
-
1065
- @keyframes modalSlideIn {
1066
- from {
1067
- transform: translateY(20px) scale(0.95);
1068
- opacity: 0;
1069
- }
1070
-
1071
- to {
1072
- transform: translateY(0) scale(1);
1073
- opacity: 1;
1074
- }
1075
- }
1076
-
1077
- .header-left {
1078
- flex: 1;
1079
- }
1080
-
1081
- .memory-title {
1082
- display: flex;
1083
- align-items: center;
1084
- gap: 1rem;
1085
- margin-bottom: 0.75rem;
1086
- }
1087
-
1088
- .memory-title h3 {
1089
- margin: 0;
1090
- font-size: 1.5rem;
1091
- font-weight: 600;
1092
- color: var(--color-text);
1093
- }
1094
-
1095
- .area-badge-large {
1096
- padding: 0.5rem 1rem;
1097
- border-radius: 20px;
1098
- color: white;
1099
- font-size: 0.75rem;
1100
- font-weight: 700;
1101
- text-transform: uppercase;
1102
- letter-spacing: 0.5px;
1103
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1104
- }
1105
-
1106
- .memory-meta-quick {
1107
- display: flex;
1108
- gap: 0.75rem;
1109
- align-items: center;
1110
- flex-wrap: wrap;
1111
- }
1112
-
1113
- .timestamp-badge {
1114
- background: var(--color-panel);
1115
- border: 1px solid var(--color-border);
1116
- color: var(--color-text);
1117
- opacity: 0.8;
1118
- padding: 0.25rem 0.75rem;
1119
- border-radius: 12px;
1120
- font-size: 0.8rem;
1121
- font-weight: 500;
1122
- }
1123
-
1124
- .source-badge {
1125
- padding: 0.25rem 0.75rem;
1126
- border-radius: 12px;
1127
- font-size: 0.8rem;
1128
- font-weight: 500;
1129
- border: 1px solid;
1130
- }
1131
-
1132
- .source-badge.knowledge {
1133
- background: rgba(115, 122, 129, 0.1);
1134
- color: var(--color-primary);
1135
- border-color: var(--color-primary);
1136
- }
1137
-
1138
- .source-badge.conversation {
1139
- background: rgba(101, 101, 101, 0.1);
1140
- color: var(--color-text);
1141
- opacity: 0.8;
1142
- border-color: var(--color-border);
1143
- }
1144
-
1145
- .header-actions {
1146
- display: flex;
1147
- gap: 0.5rem;
1148
- align-items: flex-start;
1149
- }
1150
-
1151
- .btn-action-header {
1152
- background: var(--color-background);
1153
- border: 1px solid var(--color-border);
1154
- padding: 0.75rem;
1155
- border-radius: 12px;
1156
- cursor: pointer;
1157
- color: var(--color-secondary);
1158
- transition: all 0.2s ease;
1159
- display: flex;
1160
- align-items: center;
1161
- justify-content: center;
1162
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1163
- }
1164
-
1165
- .btn-action-header:hover {
1166
- background: rgba(255, 255, 255, 0.1);
1167
- border-color: var(--color-primary);
1168
- transform: translateY(-1px);
1169
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1170
- }
1171
-
1172
- .btn-action-header.copy:hover {
1173
- background: rgba(76, 175, 80, 0.05);
1174
- border-color: #4CAF50;
1175
- color: #4CAF50;
1176
- }
1177
-
1178
- .btn-action-header.delete:hover {
1179
- background: rgba(244, 67, 54, 0.05);
1180
- border-color: #f44336;
1181
- color: #f44336;
1182
- }
1183
-
1184
- .btn-close-enhanced {
1185
- background: rgba(207, 102, 121, 0.1);
1186
- border: 1px solid var(--color-accent);
1187
- padding: 0.75rem;
1188
- border-radius: 12px;
1189
- cursor: pointer;
1190
- color: var(--color-accent);
1191
- transition: all 0.2s ease;
1192
- display: flex;
1193
- align-items: center;
1194
- justify-content: center;
1195
- }
1196
-
1197
- .btn-close-enhanced:hover {
1198
- background: rgba(207, 102, 121, 0.15);
1199
- border-color: var(--color-accent);
1200
- transform: translateY(-1px);
1201
- }
1202
-
1203
- .modal-body-enhanced {
1204
- display: flex;
1205
- flex: 1;
1206
- overflow: hidden;
1207
- min-height: 0;
1208
- }
1209
-
1210
- .content-section-main {
1211
- flex: 2;
1212
- padding: 2rem;
1213
- overflow-y: auto;
1214
- background: var(--color-background);
1215
- }
1216
-
1217
- .metadata-sidebar {
1218
- flex: 1;
1219
- min-width: 320px;
1220
- background: var(--color-panel);
1221
- border-left: 1px solid var(--color-border);
1222
- padding: 2rem;
1223
- overflow-y: auto;
1224
- }
1225
-
1226
- .section-header {
1227
- margin-bottom: 1.5rem;
1228
- }
1229
-
1230
- .section-header h4 {
1231
- margin: 0;
1232
- font-size: 1.1rem;
1233
- font-weight: 600;
1234
- color: var(--color-text);
1235
- display: flex;
1236
- align-items: center;
1237
- gap: 0.5rem;
1238
- }
1239
-
1240
- .content-display {
1241
- background: var(--color-background);
1242
- border: 1px solid var(--color-border);
1243
- border-radius: 12px;
1244
- padding: 1.5rem;
1245
- font-size: 0.95rem;
1246
- line-height: 1.6;
1247
- color: var(--color-text);
1248
- white-space: pre-wrap;
1249
- max-height: 60vh;
1250
- overflow-y: auto;
1251
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
1252
- }
1253
-
1254
- .metadata-grid {
1255
- display: flex;
1256
- flex-direction: column;
1257
- gap: 1.25rem;
1258
- }
1259
-
1260
- .metadata-item {
1261
- display: flex;
1262
- flex-direction: column;
1263
- gap: 0.5rem;
1264
- }
1265
-
1266
- .metadata-item label {
1267
- font-size: 0.8rem;
1268
- font-weight: 600;
1269
- color: var(--color-secondary);
1270
- text-transform: uppercase;
1271
- letter-spacing: 0.5px;
1272
- }
1273
-
1274
- .metadata-item value {
1275
- font-size: 0.9rem;
1276
- color: var(--color-text);
1277
- background: var(--color-background);
1278
- padding: 0.75rem;
1279
- border-radius: 8px;
1280
- border: 1px solid var(--color-border);
1281
- word-break: break-all;
1282
- }
1283
-
1284
- .metadata-item value.monospace {
1285
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1286
- font-size: 0.85rem;
1287
- }
1288
-
1289
- .consolidation-badge {
1290
- background: var(--color-accent) !important;
1291
- color: white !important;
1292
- padding: 0.5rem 1rem !important;
1293
- border-radius: 20px !important;
1294
- font-weight: 600 !important;
1295
- text-transform: capitalize !important;
1296
- border: none !important;
1297
- }
1298
-
1299
- .tags-display {
1300
- display: flex;
1301
- flex-wrap: wrap;
1302
- gap: 0.5rem;
1303
- background: var(--color-background);
1304
- padding: 0.75rem;
1305
- border-radius: 8px;
1306
- border: 1px solid var(--color-border);
1307
- }
1308
-
1309
- .tag-pill {
1310
- background: var(--color-primary);
1311
- color: white;
1312
- padding: 0.25rem 0.75rem;
1313
- border-radius: 12px;
1314
- font-size: 0.75rem;
1315
- font-weight: 500;
1316
- }
1317
-
1318
- /* Responsive design */
1319
- @media (max-width: 768px) {
1320
- .memory-dashboard {
1321
- padding: 0.5rem;
1322
- }
1323
-
1324
- .memory-filters-header {
1325
- padding: 0.75rem;
1326
- }
1327
-
1328
- /* Transform grid to flex on mobile for reordering */
1329
- .filter-container-unified {
1330
- display: flex;
1331
- flex-wrap: wrap;
1332
- gap: 0.75rem;
1333
- }
1334
-
1335
- /* Reset grid positioning */
1336
- .filter-memory-dir,
1337
- .filter-area,
1338
- .filter-limit,
1339
- .filter-threshold,
1340
- #search-input,
1341
- .btn-search,
1342
- .btn-clear {
1343
- grid-column: auto;
1344
- grid-row: auto;
1345
- }
1346
-
1347
- .filter-group-inline {
1348
- width: 100%;
1349
- flex-direction: row;
1350
- align-items: center;
1351
- gap: 0.5rem;
1352
- }
1353
-
1354
- .filter-group-inline label {
1355
- font-size: 0.9rem;
1356
- margin-bottom: 0.25rem;
1357
- }
874
+ .filter-group-inline label {
875
+ font-size: 0.9rem;
876
+ margin-bottom: 0.25rem;
877
+ }
878
879
.filter-group-inline select,
880
.filter-group-inline input {
1361
- width: 100%;
1362
- max-width: 100%;
881
height: 42px;
882
font-size: 1rem;
883
}
@@ -1369,7 +887,6 @@
887
}
888
889
.filter-limit input {
1372
- width: 100%;
890
flex: 1;
891
}
892
@@ -1399,7 +916,6 @@
916
flex: auto;
917
width: 100%;
918
height: 42px;
1402
- font-size: 1rem;
919
}
920
921
/* Search button and threshold on same row */
@@ -1434,8 +950,6 @@
950
.memory-status-bar {
951
flex-direction: column;
952
gap: 0.75rem;
1437
- padding: 0.75rem;
1438
- text-align: center;
953
}
954
955
.status-info {
@@ -1482,288 +996,12 @@
996
.col-actions {
997
width: 10%;
998
}
1485
-
1486
- .memory-detail-modal {
1487
- width: 98%;
1488
- max-height: 95vh;
1489
- min-height: 50vh;
1490
- margin: 0;
1491
- }
1492
-
1493
- .modal-body-enhanced {
1494
- flex-direction: column;
1495
- }
1496
-
1497
- .metadata-sidebar {
1498
- min-width: unset;
1499
- border-left: none;
1500
- border-top: 1px solid var(--color-border);
1501
- }
1502
-
1503
- .modal-header-enhanced {
1504
- padding: 1rem;
1505
- }
1506
-
1507
- .memory-title {
1508
- flex-direction: column;
1509
- align-items: flex-start;
1510
- gap: 0.5rem;
1511
- }
1512
-
1513
- .content-section-main,
1514
- .metadata-sidebar {
1515
- padding: 1rem;
1516
- }
1517
-
1518
-
1519
-
1520
- .pagination-controls {
1521
- flex-wrap: wrap;
1522
- }
1523
- }
1524
-
1525
- /* Memory Detail Modal Styles */
1526
- .modal-header-enhanced {
1527
- display: flex;
1528
- justify-content: space-between;
1529
- align-items: flex-start;
1530
- padding: 1.5rem;
1531
- border-bottom: 2px solid var(--color-border);
1532
- background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
1533
- }
1534
-
1535
- .memory-title {
1536
- display: flex;
1537
- align-items: center;
1538
- gap: 1rem;
1539
- margin-bottom: 0.5rem;
1540
- }
1541
-
1542
- .area-badge-large {
1543
- color: white;
1544
- padding: 0.5rem 1rem;
1545
- border-radius: 20px;
1546
- font-size: 0.8rem;
1547
- font-weight: bold;
1548
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
1549
- }
1550
-
1551
- .memory-meta-quick {
1552
- display: flex;
1553
- gap: 1rem;
1554
- align-items: center;
999
}
1000
1557
- .timestamp-badge,
1558
- .source-badge {
1559
- padding: 0.25rem 0.75rem;
1560
- border-radius: 12px;
1561
- font-size: 0.75rem;
1562
- font-weight: 500;
1563
- background: var(--color-panel);
1564
- border: 1px solid var(--color-border);
1565
- }
1566
-
1567
- .source-badge.knowledge {
1568
- background: rgba(115, 122, 129, 0.1);
1569
- color: var(--color-primary);
1570
- border-color: var(--color-primary);
1571
- }
1572
-
1573
- .source-badge.conversation {
1574
- background: rgba(101, 101, 101, 0.1);
1575
- color: var(--color-text);
1576
- opacity: 0.8;
1577
- border-color: var(--color-border);
1578
- }
1579
-
1580
- .header-actions {
1581
- display: flex;
1582
- gap: 0.5rem;
1583
- }
1584
-
1585
- .btn-action-header {
1586
- background: var(--color-background);
1587
- border: 1px solid var(--color-border);
1588
- color: var(--color-text);
1589
- padding: 0.5rem;
1590
- border-radius: 8px;
1591
- cursor: pointer;
1592
- transition: all 0.2s ease;
1593
- }
1594
-
1595
- .btn-action-header:hover {
1596
- border-color: var(--color-primary);
1597
- background: rgba(115, 122, 129, 0.1);
1598
- }
1599
-
1600
- .modal-body-enhanced {
1601
- display: flex;
1602
- min-height: 60vh;
1603
- max-height: 70vh;
1604
- }
1605
-
1606
- .content-section-main {
1607
- flex: 1;
1608
- padding: 1.5rem;
1609
- overflow-y: auto;
1610
- }
1611
-
1612
- .content-block {
1613
- margin-bottom: 2rem;
1614
- }
1615
-
1616
- .content-block h4 {
1617
- margin: 0 0 1rem 0;
1618
- color: var(--color-primary);
1619
- font-size: 1.1rem;
1620
- font-weight: 600;
1621
- border-bottom: 1px solid var(--color-border);
1622
- padding-bottom: 0.5rem;
1623
- }
1624
-
1625
- .memory-content-display {
1626
- background: var(--color-panel);
1627
- border: 1px solid var(--color-border);
1628
- border-radius: 8px;
1629
- padding: 1.5rem;
1630
- line-height: 1.6;
1631
- color: var(--color-text);
1632
- white-space: pre-wrap;
1633
- word-break: break-word;
1634
- max-height: 300px;
1635
- overflow-y: auto;
1636
- }
1637
-
1638
- .tags-display {
1639
- display: flex;
1640
- flex-wrap: wrap;
1641
- gap: 0.5rem;
1642
- }
1643
-
1644
- .tag-display {
1645
- background: var(--color-primary);
1646
- color: white;
1647
- padding: 0.25rem 0.75rem;
1648
- border-radius: 12px;
1649
- font-size: 0.75rem;
1650
- font-weight: 500;
1651
- }
1652
-
1653
- .metadata-sidebar {
1654
- min-width: 300px;
1655
- max-width: 350px;
1656
- background: var(--color-panel);
1657
- border-left: 1px solid var(--color-border);
1658
- padding: 1.5rem;
1659
- overflow-y: auto;
1660
- }
1661
-
1662
- .metadata-sidebar h4 {
1663
- margin: 0 0 1rem 0;
1664
- color: var(--color-primary);
1665
- font-size: 1.1rem;
1666
- font-weight: 600;
1667
- }
1668
-
1669
- .metadata-group {
1670
- margin-bottom: 1.5rem;
1671
- }
1672
-
1673
- .metadata-group h5 {
1674
- margin: 0 0 0.75rem 0;
1675
- color: var(--color-text);
1676
- opacity: 0.7;
1677
- font-size: 0.9rem;
1678
- font-weight: 600;
1679
- text-transform: uppercase;
1680
- letter-spacing: 0.5px;
1681
- }
1682
-
1683
- .metadata-item {
1684
- display: flex;
1685
- flex-direction: column;
1686
- gap: 0.25rem;
1687
- margin-bottom: 0.75rem;
1688
- padding: 0.5rem;
1689
- background: var(--color-background);
1690
- border: 1px solid var(--color-border);
1691
- border-radius: 6px;
1692
- }
1693
-
1694
- .metadata-label {
1695
- font-size: 0.8rem;
1696
- font-weight: 600;
1697
- color: var(--color-text);
1698
- opacity: 0.7;
1699
- text-transform: uppercase;
1700
- letter-spacing: 0.3px;
1701
- }
1702
-
1703
- .metadata-value {
1704
- font-size: 0.9rem;
1705
- color: var(--color-text);
1706
- word-break: break-all;
1707
- line-height: 1.4;
1708
- }
1709
-
1710
- .source-file-display {
1711
- font-family: monospace;
1712
- background: var(--color-panel);
1713
- padding: 0.5rem;
1714
- border-radius: 4px;
1715
- border: 1px solid var(--color-border);
1716
- }
1717
-
1718
- .metadata-actions {
1719
- display: flex;
1720
- flex-direction: column;
1721
- gap: 0.5rem;
1722
- }
1723
-
1724
- .metadata-actions .btn {
1725
- display: flex;
1726
- align-items: center;
1727
- gap: 0.5rem;
1728
- justify-content: flex-start;
1729
- font-size: 0.9rem;
1730
- }
1731
-
1732
-
1733
- /* Responsive design for modal */
1734
- @media (max-width: 768px) {
1735
- .modal-body-enhanced {
1736
- flex-direction: column;
1737
- max-height: 80vh;
1738
- }
1739
-
1740
- .metadata-sidebar {
1741
- min-width: unset;
1742
- max-width: unset;
1743
- border-left: none;
1744
- border-top: 1px solid var(--color-border);
1745
- }
1746
-
1747
- .modal-header-enhanced {
1748
- padding: 1rem;
1749
- }
1750
-
1751
- .memory-title {
1752
- flex-direction: column;
1753
- align-items: flex-start;
1754
- gap: 0.5rem;
1755
- }
1756
-
1757
- .content-section-main,
1758
- .metadata-sidebar {
1759
- padding: 1rem;
1760
- }
1761
- }
1001
</style>
1002
1003
</template>
1004
</div>
1005
</body>
1006
1768
-</html>
1007
</html>
\ No newline at end of file
webui/components/settings/memory/memory-detail-modal.html
+228
-258
@@ -4,266 +4,17 @@
4
<title>Memory Details</title>
5
</head>
6
7
-<style>
8
- /* Compact Modal Header */
9
- .modal-header-compact {
10
- display: flex;
11
- justify-content: space-between;
12
- align-items: center;
13
- padding: 1rem 1.5rem;
14
- border-bottom: 1px solid var(--color-border);
15
- background: var(--color-panel);
16
- position: sticky;
17
- top: 0;
18
- z-index: 100;
19
- }
20
-
21
- .header-info {
22
- display: flex;
23
- align-items: center;
24
- gap: 0.5rem;
25
- font-size: 0.9rem;
26
- }
27
-
28
- .area-badge {
29
- color: white;
30
- padding: 0.35rem 0.75rem;
31
- border-radius: 16px;
32
- font-size: 0.75rem;
33
- font-weight: bold;
34
- text-transform: uppercase;
35
- }
36
-
37
- .header-separator {
38
- color: var(--color-border);
39
- opacity: 0.6;
40
- }
41
-
42
- .timestamp-text,
43
- .source-text {
44
- color: var(--color-text);
45
- opacity: 0.8;
46
- font-size: 0.75rem;
47
- padding: 0.25rem 0.6rem;
48
- background: var(--color-background);
49
- border: 1px solid var(--color-border);
50
- border-radius: 12px;
51
- }
52
-
53
- .header-actions {
54
- display: flex;
55
- gap: 0.5rem;
56
- }
57
-
58
- .btn-action-header {
59
- background: transparent;
60
- border: 1px solid var(--color-border);
61
- color: var(--color-text);
62
- padding: 0.4rem 0.6rem;
63
- border-radius: 4px;
64
- cursor: pointer;
65
- transition: all 0.2s ease;
66
- display: flex;
67
- align-items: center;
68
- gap: 0.25rem;
69
- font-size: 0.85rem;
70
- }
71
-
72
- .btn-action-header:hover {
73
- border-color: var(--color-primary);
74
- background: var(--color-panel);
75
- }
76
-
77
- .btn-action-header .material-symbols-outlined {
78
- font-size: 18px;
79
- }
80
-
81
- .btn-action-header.delete:hover {
82
- border-color: var(--color-accent);
83
- color: var(--color-accent);
84
- }
85
-
86
- .modal-body-enhanced {
87
- display: flex;
88
- min-height: 60vh;
89
- max-height: 70vh;
90
- }
91
-
92
- .content-section-main {
93
- flex: 1;
94
- padding: 1.5rem;
95
- overflow-y: auto;
96
- }
97
-
98
- .content-block {
99
- margin-bottom: 2rem;
100
- }
101
-
102
- .content-block h4 {
103
- margin: 0 0 1rem 0;
104
- color: var(--color-text);
105
- font-size: 1.1rem;
106
- font-weight: 600;
107
- border-bottom: 1px solid var(--color-border);
108
- padding-bottom: 0.5rem;
109
- }
110
-
111
- .memory-content-display {
112
- background: var(--color-panel);
113
- border: 1px solid var(--color-border);
114
- border-radius: 8px;
115
- padding: 1.5rem;
116
- line-height: 1.6;
117
- color: var(--color-text);
118
- white-space: pre-wrap;
119
- word-break: break-word;
120
- max-height: 300px;
121
- overflow-y: auto;
122
- }
123
-
124
- .tags-display {
125
- display: flex;
126
- flex-wrap: wrap;
127
- gap: 0.5rem;
128
- }
129
-
130
- .tag-display {
131
- background: var(--color-primary);
132
- color: white;
133
- padding: 0.25rem 0.75rem;
134
- border-radius: 12px;
135
- font-size: 0.75rem;
136
- font-weight: 500;
137
- }
138
-
139
- .metadata-sidebar {
140
- min-width: 300px;
141
- max-width: 350px;
142
- background: var(--color-panel);
143
- border-left: 1px solid var(--color-border);
144
- padding: 1.5rem;
145
- overflow-y: auto;
146
- }
147
-
148
- .metadata-sidebar h4 {
149
- margin: 0 0 1rem 0;
150
- color: var(--color-text);
151
- font-size: 1.1rem;
152
- font-weight: 600;
153
- }
154
-
155
- .metadata-group {
156
- margin-bottom: 1.5rem;
157
- }
158
-
159
- .metadata-group h5 {
160
- margin: 0 0 0.75rem 0;
161
- color: var(--color-text);
162
- opacity: 0.7;
163
- font-size: 0.9rem;
164
- font-weight: 600;
165
- text-transform: uppercase;
166
- letter-spacing: 0.5px;
167
- }
168
-
169
- .metadata-item {
170
- display: flex;
171
- flex-direction: column;
172
- gap: 0.25rem;
173
- margin-bottom: 0.75rem;
174
- padding: 0.5rem;
175
- background: var(--color-background);
176
- border: 1px solid var(--color-border);
177
- border-radius: 6px;
178
- }
179
-
180
- .metadata-label {
181
- font-size: 0.8rem;
182
- font-weight: 600;
183
- color: var(--color-text);
184
- opacity: 0.7;
185
- text-transform: uppercase;
186
- letter-spacing: 0.3px;
187
- }
188
-
189
- .metadata-value {
190
- font-size: 0.9rem;
191
- color: var(--color-text);
192
- word-break: break-all;
193
- line-height: 1.4;
194
- }
195
-
196
- .source-file-display {
197
- font-family: monospace;
198
- background: var(--color-panel);
199
- padding: 0.5rem;
200
- border-radius: 4px;
201
- border: 1px solid var(--color-border);
202
- }
203
-
204
- .metadata-actions {
205
- display: flex;
206
- flex-direction: column;
207
- gap: 0.5rem;
208
- }
209
-
210
- .metadata-actions .btn {
211
- display: flex;
212
- align-items: center;
213
- gap: 0.5rem;
214
- justify-content: flex-start;
215
- font-size: 0.9rem;
216
- }
217
-
218
- /* Wider modal for better readability */
219
- .modal-inner.modal-wide {
220
- max-width: 1200px;
221
- }
222
-
223
- /* Responsive design for modal */
224
- @media (max-width: 768px) {
225
- .modal-body-enhanced {
226
- flex-direction: column;
227
- max-height: 80vh;
228
- }
229
-
230
- .metadata-sidebar {
231
- min-width: unset;
232
- max-width: unset;
233
- border-left: none;
234
- border-top: 1px solid var(--color-border);
235
- }
236
-
237
- .modal-header-compact {
238
- padding: 0.75rem 1rem;
239
- flex-wrap: wrap;
240
- gap: 0.75rem;
241
- }
242
-
243
- .header-info {
244
- flex-wrap: wrap;
245
- }
246
-
247
- .content-section-main,
248
- .metadata-sidebar {
249
- padding: 1rem;
250
- }
251
- }
252
-</style>
253
-
7
<body>
8
<div x-data>
9
<template x-if="$store.memoryDashboardStore && $store.memoryDashboardStore.detailMemory">
257
- <div>
10
+ <div class="memory-detail-container">
11
<!-- Compact Modal Header -->
259
- <div class="modal-header-compact">
12
+ <div class="modal-header modal-header-compact">
13
<div class="header-info">
14
<span class="area-badge"
15
:style="`background-color: ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)}`"
16
x-text="$store.memoryDashboardStore.detailMemory?.area?.toUpperCase() || 'UNKNOWN'"></span>
264
- <span class="header-separator">•</span>
17
<span class="timestamp-text" x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.detailMemory?.timestamp, true)"></span>
266
- <span class="header-separator">•</span>
18
<span class="source-text" x-text="$store.memoryDashboardStore.detailMemory?.knowledge_source ? 'Knowledge' : 'Conversation'"></span>
19
</div>
20
<div class="header-actions">
@@ -271,20 +22,20 @@
22
<template x-if="!$store.memoryDashboardStore.editMode">
23
<div style="display: flex; gap: 0.5rem;">
24
274
- <button class="btn-action-header copy-all" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy($store.memoryDashboardStore.detailMemory))"
25
+ <button class="btn btn-action-header copy-all" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy($store.memoryDashboardStore.detailMemory))"
26
title="Copy Complete Memory with Metadata">
27
<span class="material-symbols-outlined">copy_all</span> All
28
</button>
278
- <button class="btn-action-header copy-content" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.detailMemory?.content_full)"
29
+ <button class="btn btn-action-header copy-content" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.detailMemory?.content_full)"
30
title="Copy Content Only">
31
<span class="material-symbols-outlined">content_copy</span> Content
32
</button>
33
<div style="width:2em"></div>
283
- <button class="btn-action-header edit" @click="$store.memoryDashboardStore.enableEditMode()"
34
+ <button class="btn btn-action-header edit" @click="$store.memoryDashboardStore.enableEditMode()"
35
title="Edit Memory">
36
<span class="material-symbols-outlined">edit_document</span>
37
</button>
287
- <button class="btn-action-header delete danger" @click="$store.memoryDashboardStore.deleteMemory($store.memoryDashboardStore.detailMemory)"
38
+ <button class="btn btn-action-header delete danger" @click="$store.memoryDashboardStore.deleteMemory($store.memoryDashboardStore.detailMemory)"
39
title="Delete Memory">
40
<span class="material-symbols-outlined">delete</span>
41
</button>
@@ -293,11 +44,11 @@
44
<!-- Edit Mode Buttons -->
45
<template x-if="$store.memoryDashboardStore.editMode">
46
<div style="display: flex; gap: 0.5rem;">
296
- <button class="btn-action-header cancel" @click="$store.memoryDashboardStore.cancelEditMode()"
47
+ <button class="btn btn-action-header cancel" @click="$store.memoryDashboardStore.cancelEditMode()"
48
title="Cancel Edit">
49
<span class="material-symbols-outlined">close</span>
50
</button>
300
- <button class="btn-action-header confirm" @click="$store.memoryDashboardStore.confirmEditMode()"
51
+ <button class="btn btn-action-header confirm" @click="$store.memoryDashboardStore.confirmEditMode()"
52
title="Confirm Changes">
53
<span class="material-symbols-outlined">check</span>
54
</button>
@@ -308,7 +59,7 @@
59
</div>
60
61
<!-- Modal Body -->
311
- <div class="modal-body-enhanced">
62
+ <div class="modal-body">
63
<!-- Main Content Section -->
64
<div class="content-section-main">
65
<div class="content-block">
@@ -384,6 +135,225 @@
135
</div>
136
</div>
137
</template>
138
+ <style>
139
+ .modal-header-compact {
140
+ background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
141
+ position: sticky;
142
+ top: 0;
143
+ z-index: 100;
144
+ }
145
+
146
+ .header-info {
147
+ display: flex;
148
+ align-items: center;
149
+ gap: 0.5rem;
150
+ font-size: 0.9rem;
151
+ }
152
+
153
+ .timestamp-text,
154
+ .source-text {
155
+ color: var(--color-text);
156
+ opacity: 0.8;
157
+ padding: 0.25rem 0.5rem;
158
+ border-radius: var(--border-radius);
159
+ font-size: 0.75rem;
160
+ font-weight: 500;
161
+ border: 1px solid;
162
+ }
163
+
164
+ .btn-action-header {
165
+ padding: 0.4rem 0.6rem;
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 0.25rem;
169
+ }
170
+
171
+ .btn-action-header .material-symbols-outlined {
172
+ font-size: 18px;
173
+ }
174
+
175
+ .btn-action-header.delete:hover {
176
+ border-color: var(--color-accent);
177
+ color: var(--color-accent);
178
+ }
179
+
180
+ .btn-action-header.copy-all:hover,
181
+ .btn-action-header.copy-content:hover,
182
+ .btn-action-header.edit:hover {
183
+ border-color: var(--color-primary);
184
+ color: var(--color-primary);
185
+ }
186
+
187
+ .btn-action-header.confirm:hover {
188
+ border-color: #4CAF50;
189
+ color: #4CAF50;
190
+ background: var(--color-background);
191
+ }
192
+
193
+ .btn-action-header.cancel:hover {
194
+ border-color: var(--color-accent);
195
+ color: var(--color-accent);
196
+ background: var(--color-background);
197
+ }
198
+
199
+ .modal-body {
200
+ display: flex;
201
+ min-height: 60vh;
202
+ max-height: 70vh;
203
+ }
204
+
205
+ .content-section-main {
206
+ flex: 1;
207
+ padding: 1.5rem;
208
+ overflow-y: auto;
209
+ }
210
+
211
+ .content-block {
212
+ margin-bottom: 3rem;
213
+ }
214
+
215
+ .content-block h4 {
216
+ margin: 0 0 1rem 0;
217
+ color: var(--color-text);
218
+ font-size: 1.1rem;
219
+ font-weight: 600;
220
+ border-bottom: 1px solid var(--color-border);
221
+ padding-bottom: 0.5rem;
222
+ }
223
+
224
+ .memory-content-display {
225
+ background: var(--color-panel);
226
+ border: 1px solid var(--color-border);
227
+ border-radius: 8px;
228
+ padding: 1.5rem;
229
+ line-height: 1.6;
230
+ color: var(--color-text);
231
+ white-space: pre-wrap;
232
+ word-break: break-word;
233
+ max-height: 300px;
234
+ overflow-y: auto;
235
+ }
236
+
237
+ .tags-display {
238
+ display: flex;
239
+ flex-wrap: wrap;
240
+ gap: 0.5rem;
241
+ background: var(--color-background);
242
+ padding: 0.75rem;
243
+ border-radius: 8px;
244
+ border: 1px solid var(--color-border);
245
+ }
246
+
247
+ .tag-display {
248
+ background: var(--color-primary);
249
+ color: white;
250
+ padding: 0.25rem 0.75rem;
251
+ border-radius: 12px;
252
+ font-size: 0.75rem;
253
+ font-weight: 500;
254
+ }
255
+
256
+ .metadata-sidebar {
257
+ min-width: 300px;
258
+ max-width: 350px;
259
+ background: var(--color-panel);
260
+ border-left: 1px solid var(--color-border);
261
+ padding: 1.5rem;
262
+ overflow-y: auto;
263
+ }
264
+
265
+ .metadata-sidebar h4 {
266
+ margin: 0 0 1rem 0;
267
+ color: var(--color-text);
268
+ font-size: 1.1rem;
269
+ font-weight: 600;
270
+ }
271
+
272
+ .metadata-group {
273
+ margin-bottom: 1.5rem;
274
+ }
275
+
276
+ .metadata-group h5 {
277
+ margin: 0 0 0.75rem 0;
278
+ color: var(--color-text);
279
+ opacity: 0.7;
280
+ font-size: 0.9rem;
281
+ font-weight: 600;
282
+ text-transform: uppercase;
283
+ letter-spacing: 0.5px;
284
+ }
285
+
286
+ .metadata-item {
287
+ display: flex;
288
+ flex-direction: column;
289
+ gap: 0.25rem;
290
+ margin-bottom: 0.75rem;
291
+ padding: 0.5rem;
292
+ background: var(--color-background);
293
+ border: 1px solid var(--color-border);
294
+ border-radius: 6px;
295
+ }
296
+
297
+ .metadata-label {
298
+ font-size: 0.8rem;
299
+ font-weight: 600;
300
+ color: var(--color-text);
301
+ opacity: 0.7;
302
+ text-transform: uppercase;
303
+ letter-spacing: 0.3px;
304
+ }
305
+
306
+ .metadata-value {
307
+ font-size: 0.9rem;
308
+ color: var(--color-text);
309
+ word-break: break-all;
310
+ line-height: 1.4;
311
+ }
312
+
313
+ .source-file-display {
314
+ font-family: monospace;
315
+ background: var(--color-panel);
316
+ padding: 0.5rem;
317
+ border-radius: 4px;
318
+ border: 1px solid var(--color-border);
319
+ }
320
+
321
+ .memory-detail-container {
322
+ display: flex;
323
+ flex-direction: column;
324
+ height: 100%;
325
+ }
326
+
327
+ /* Responsive design for modal */
328
+ @media (max-width: 870px) {
329
+ .modal-body {
330
+ flex-direction: column;
331
+ max-height: 80vh;
332
+ }
333
+
334
+ .metadata-sidebar {
335
+ min-width: unset;
336
+ max-width: unset;
337
+ border-left: none;
338
+ border-top: 1px solid var(--color-border);
339
+ }
340
+
341
+ .modal-header-compact {
342
+ padding: 0.75rem 1rem;
343
+ flex-wrap: wrap;
344
+ gap: 0.75rem;
345
+ }
346
+
347
+ .header-info {
348
+ flex-wrap: wrap;
349
+ }
350
+
351
+ .content-section-main,
352
+ .metadata-sidebar {
353
+ padding: 1rem;
354
+ }
355
+ }
356
+ </style>
357
</div>
358
</body>
359
webui/css/modals.css
+37
@@ -475,3 +475,40 @@
475
.toolbar-button:disabled:hover {
476
background-color: transparent;
477
}
478
+
479
+/* Range Input Styles */
480
+
481
+input[type="range"] {
482
+ width: 100%;
483
+ cursor: pointer;
484
+ height: 4px;
485
+ -webkit-appearance: none;
486
+ appearance: none;
487
+ background: var(--color-border);
488
+ border-radius: 2px;
489
+ outline: none;
490
+}
491
+
492
+input[type="range"]::-webkit-slider-thumb {
493
+ -webkit-appearance: none;
494
+ appearance: none;
495
+ width: 16px;
496
+ height: 16px;
497
+ background: var(--color-text);
498
+ border-radius: 50%;
499
+ cursor: pointer;
500
+}
501
+
502
+input[type="range"]::-moz-range-thumb {
503
+ width: 16px;
504
+ height: 16px;
505
+ background: var(--color-text);
506
+ border-radius: 50%;
507
+ cursor: pointer;
508
+ border: none;
509
+}
510
+
511
+.range-value {
512
+ min-width: 3em;
513
+ text-align: right;
514
+}
\ No newline at end of file
webui/css/modals2.css
+1
-1
@@ -34,7 +34,7 @@ display: flex;
34
transform: translate(-50%, -50%);
35
background-color: var(--color-background-light);
36
width: 90%;
37
- max-width: 800px;
37
+ max-width: 960px;
38
max-height: 90vh;
39
border-radius: 8px;
40
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
webui/css/settings.css
-11
@@ -128,17 +128,6 @@ input:checked + .toggler:before {
128
transform: translateX(26px);
129
}
130
131
-/* Range Input Styles */
132
-input[type="range"] {
133
- width: 100%;
134
- cursor: grab;
135
-}
136
-
137
-.range-value {
138
- min-width: 3em;
139
- text-align: right;
140
-}
141
-
131
/* Select Styles */
132
select {
133
cursor: pointer;