96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { Component, EventEmitter, Output, computed, signal, effect } from '@angular/core';
|
|
import { input } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import type { Note } from '../../../types';
|
|
import { ScrollableOverlayDirective } from '../../shared/overlay-scrollbar/scrollable-overlay.directive';
|
|
|
|
@Component({
|
|
selector: 'app-notes-list',
|
|
standalone: true,
|
|
imports: [CommonModule, ScrollableOverlayDirective],
|
|
template: `
|
|
<div class="h-full flex flex-col">
|
|
<div class="p-2 border-b border-gray-200 dark:border-gray-800">
|
|
<input type="text"
|
|
[value]="query()"
|
|
(input)="onQuery($any($event.target).value)"
|
|
placeholder="Rechercher..."
|
|
class="w-full rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2 text-sm" />
|
|
</div>
|
|
<div class="flex-1 min-h-0 overflow-y-auto list-scroll" appScrollableOverlay>
|
|
<ul class="divide-y divide-gray-100 dark:divide-gray-800">
|
|
<li *ngFor="let n of filtered()" class="p-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer" (click)="openNote.emit(n.id)">
|
|
<div class="text-sm font-semibold truncate">{{ n.title }}</div>
|
|
<div class="text-xs text-gray-500 truncate">{{ n.filePath }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
min-height: 0; /* critical for nested flex scrolling */
|
|
}
|
|
|
|
/* Smooth, bounded vertical scrolling only on the list area */
|
|
.list-scroll {
|
|
overscroll-behavior: contain; /* prevent parent scroll chaining */
|
|
-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
|
|
scroll-behavior: smooth; /* smooth programmatic scrolls */
|
|
scrollbar-gutter: stable both-edges; /* avoid layout shift when scrollbar shows */
|
|
max-height: 100%; /* cap to available space within the central section */
|
|
contain: content; /* small perf win for large lists */
|
|
}
|
|
`]
|
|
})
|
|
export class NotesListComponent {
|
|
notes = input<Note[]>([]);
|
|
folderFilter = input<string | null>(null); // like "folder/subfolder"
|
|
query = input<string>('');
|
|
tagFilter = input<string | null>(null);
|
|
|
|
@Output() openNote = new EventEmitter<string>();
|
|
@Output() queryChange = new EventEmitter<string>();
|
|
|
|
private q = signal('');
|
|
private syncQuery = effect(() => {
|
|
this.q.set(this.query() || '');
|
|
});
|
|
|
|
filtered = computed(() => {
|
|
const q = (this.q() || '').toLowerCase().trim();
|
|
const folder = (this.folderFilter() || '').toLowerCase();
|
|
const tag = (this.tagFilter() || '').toLowerCase();
|
|
let list = this.notes();
|
|
|
|
if (folder) {
|
|
list = list.filter(n => (n.originalPath || '').toLowerCase().startsWith(folder));
|
|
}
|
|
|
|
if (tag) {
|
|
list = list.filter(n => Array.isArray(n.tags) && n.tags.some(t => (t || '').toLowerCase() === tag));
|
|
}
|
|
|
|
// Apply query if present
|
|
if (q) {
|
|
list = list.filter(n => {
|
|
const title = (n.title || '').toLowerCase();
|
|
const filePath = (n.filePath || '').toLowerCase();
|
|
return title.includes(q) || filePath.includes(q);
|
|
});
|
|
}
|
|
|
|
// Sort by most recent first (mtime desc; fallback updatedAt/createdAt)
|
|
const parseDate = (s?: string) => (s ? Date.parse(s) : 0) || 0;
|
|
const score = (n: Note) => n.mtime || parseDate(n.updatedAt) || parseDate(n.createdAt) || 0;
|
|
return [...list].sort((a, b) => (score(b) - score(a)));
|
|
});
|
|
|
|
onQuery(v: string) {
|
|
this.q.set(v);
|
|
this.queryChange.emit(v);
|
|
}
|
|
}
|