+++ {{ i + 1 }}{{ line }} + +
-
-
-
-
-
+
-
+
+
-
-
+
+
-
+
+ {{ (path || '').split('/').pop() }}
+
+
+ Aucun fichier
+
+
+
+
+
+ {{ dirty() ? 'Non sauvegardé' : 'Sauvegardé' }}
+
+
+
@@ -120,9 +108,6 @@
@@ -134,7 +119,7 @@
('info');
hasConflict = signal(false);
isFullscreen = signal(false);
+ // Header menus & helpers (ported from Test Excalidraw)
+ openPicker = signal(false);
+ openExport = signal(false);
+ excalidrawFiles = signal>([]);
+ private saveTimer: any = null;
private saveSub: Subscription | null = null;
private dirtyCheckSub: Subscription | null = null;
@@ -79,6 +88,77 @@ export class DrawingsEditorComponent implements OnInit, AfterViewInit, OnDestroy
}
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['path'] && !changes['path'].firstChange) {
+ // Reset state and reload when the selected file changes
+ this.error.set(null);
+ this.hasConflict.set(false);
+ this.isLoading.set(true);
+ this.dirty.set(false);
+ this.reloadFromDisk();
+ }
+ }
+
+ // ===== Test-page parity helpers =====
+ refreshFileList(): void {
+ try {
+ const notes = this.vault.allNotes();
+ const list = notes
+ .filter(n => /\.excalidraw\.md$/i.test(n.filePath || ''))
+ .map(n => ({ filePath: n.filePath }));
+ this.excalidrawFiles.set(list);
+ } catch {}
+ }
+
+ toggleOpenPicker(): void {
+ this.openPicker.update(v => !v);
+ if (this.openPicker()) this.refreshFileList();
+ }
+
+ toggleExport(): void {
+ this.openExport.update(v => !v);
+ }
+
+ async createNew(): Promise {
+ const now = new Date();
+ const y = now.getFullYear();
+ const m = String(now.getMonth() + 1).padStart(2, '0');
+ const d = String(now.getDate()).padStart(2, '0');
+ const hh = String(now.getHours()).padStart(2, '0');
+ const mm = String(now.getMinutes()).padStart(2, '0');
+ const base = `Drawing-${y}${m}${d}-${hh}${mm}`;
+ const name = prompt('Nom du fichier', `${base}.excalidraw.md`);
+ if (!name) return;
+ const file = name.endsWith('.excalidraw.md') ? name : `${name}.excalidraw.md`;
+ const path = file.replace(/^\/+/, '');
+ const scene: ExcalidrawScene = { elements: [], appState: {}, files: {} };
+ const fm = `---\nexcalidraw-plugin: parsed\ncreated: "${now.toISOString()}"\nupdated: "${now.toISOString()}"\ntitle: "${(file || '').replace(/\.excalidraw\.md$/i,'')}"\n---`;
+ const md = this.excalIo.toObsidianMd(scene as any, fm);
+ await firstValueFrom(this.files.putText(path, md));
+ this.path = path;
+ this.dirty.set(false);
+ this.openPicker.set(false);
+ this.reloadFromDisk();
+ }
+
+ openFile(path: string): void {
+ this.path = path;
+ this.openPicker.set(false);
+ this.dirty.set(false);
+ this.reloadFromDisk();
+ }
+
+ closeFile(): void {
+ this.path = '';
+ this.scene.set({ elements: [], appState: { viewBackgroundColor: '#1e1e1e', theme: this.themeName() }, files: {} } as any);
+ this.dirty.set(false);
+ }
+
+ async saveDebounced(): Promise {
+ if (this.saveTimer) clearTimeout(this.saveTimer);
+ this.saveTimer = setTimeout(() => this.saveNow(), 800);
+ }
+
private waitForNextSceneChange(host: any, timeoutMs = 300): Promise {
return new Promise((resolve) => {
let done = false;
@@ -719,6 +799,7 @@ export class DrawingsEditorComponent implements OnInit, AfterViewInit, OnDestroy
ngOnDestroy(): void {
this.saveSub?.unsubscribe();
+ if (this.saveTimer) clearTimeout(this.saveTimer);
// Clean up fullscreen listener
document.removeEventListener('fullscreenchange', () => {
this.isFullscreen.set(!!document.fullscreenElement);
diff --git a/src/app/features/list/notes-list.component.ts b/src/app/features/list/notes-list.component.ts
index d7c4dd1..f39924e 100644
--- a/src/app/features/list/notes-list.component.ts
+++ b/src/app/features/list/notes-list.component.ts
@@ -12,6 +12,7 @@ import { NoteContextMenuService } from '../../services/note-context-menu.service
import { UrlStateService } from '../../services/url-state.service';
import { EditorStateService } from '../../../services/editor-state.service';
import { VaultService } from '../../../services/vault.service';
+import { FileTypeDetectorService } from '../../../services/file-type-detector.service';
@Component({
selector: 'app-notes-list',
@@ -79,6 +80,11 @@ import { VaultService } from '../../../services/vault.service';
title="Mode d'affichage">
+
+
+
+ {{ kindIcon(kindFilter()!) }}
+
-
-
@@ -103,17 +109,23 @@ import { VaultService } from '../../../services/vault.service';
-
-
-
- {{ stats.duration }}ms
-
-
-
- {{ stats.duration }}ms
-
+
+
@@ -166,12 +178,14 @@ import { VaultService } from '../../../services/vault.service';
+
+
+ {{ filtered().length }}
+
+
+
+
+
+ {{ stats.duration }}ms
+
+
+
+ {{ stats.duration }}ms
+
+
+ {{ typeIcon(n) }}
{{ n.title }}
+ {{ typeIcon(n) }}
{{ n.title }}
@@ -181,6 +195,7 @@ import { VaultService } from '../../../services/vault.service';
+ {{ typeIcon(n) }}
(null);
quickLinkFilter = input<'favoris' | 'publish' | 'draft' | 'template' | 'task' | 'private' | 'archive' | null>(null);
selectedId = input(null);
+ kindFilter = input<'image' | 'video' | 'pdf' | 'markdown' | 'excalidraw' | 'code' | 'all' | null>(null);
@Output() openNote = new EventEmitter();
@Output() queryChange = new EventEmitter();
@@ -482,6 +498,7 @@ export class NotesListComponent {
private pendingSelectId = signal(null);
private editorState = inject(EditorStateService);
private vault = inject(VaultService);
+ private fileTypes = inject(FileTypeDetectorService);
// Delete warning modal state
deleteWarningOpen = signal(false);
@@ -539,6 +556,80 @@ export class NotesListComponent {
}, 10);
});
+ private buildUnifiedList(): Note[] {
+ const notes = this.notes();
+ const notePaths = new Set(notes.map(n => (n.filePath || '').toLowerCase().replace(/\\/g, '/')));
+ const otherFiles = this.collectFilesFromFastTree()
+ .filter(f => !notePaths.has(f.filePath.toLowerCase().replace(/\\/g, '/')))
+ .map(f => this.asNoteLike(f));
+ return [...notes, ...otherFiles];
+ }
+
+ private collectFilesFromFastTree(): Array<{ id: string; filePath: string; fileName: string; originalPath: string }> {
+ const out: Array<{ id: string; filePath: string; fileName: string; originalPath: string }> = [];
+ const visit = (nodes: any[], parentPath: string = '') => {
+ for (const n of nodes || []) {
+ if (n.type === 'folder') {
+ visit(n.children, n.path || parentPath);
+ } else if (n.type === 'file') {
+ const filePath = (n.path || '').replace(/^\/+/, '');
+ const fileName = n.name || filePath.split('/').pop() || '';
+ const originalPath = (n.path || '').split('/').slice(0, -1).join('/');
+ out.push({ id: n.id || filePath, filePath, fileName, originalPath });
+ }
+ }
+ };
+ try { visit(this.vault.fastFileTree()); } catch {}
+ return out;
+ }
+
+ private asNoteLike(f: { id: string; filePath: string; fileName: string; originalPath: string }): Note {
+ return {
+ id: f.id,
+ title: f.fileName,
+ content: '',
+ rawContent: '',
+ tags: [],
+ frontmatter: {} as any,
+ backlinks: [],
+ mtime: 0,
+ fileName: f.fileName,
+ filePath: f.filePath,
+ originalPath: f.originalPath,
+ } as Note;
+ }
+
+ kindIcon(k: 'image'|'video'|'pdf'|'markdown'|'excalidraw'|'code'|'all'): string {
+ switch (k) {
+ case 'markdown': return '📝';
+ case 'excalidraw': return '✏️';
+ case 'pdf': return '📄';
+ case 'image': return '🖼️';
+ case 'video': return '🎬';
+ case 'code': return '';
+ default: return '✨';
+ }
+ }
+
+ private matchesKind(n: Note, kind: 'image' | 'video' | 'pdf' | 'markdown' | 'excalidraw' | 'code' | 'all'): boolean {
+ if (!kind || kind === 'all') return true;
+ const t = this.fileTypes.getViewerType(n.filePath, n.rawContent ?? n.content);
+ return t === kind;
+ }
+
+ typeIcon(n: Note): string {
+ const t = this.fileTypes.getViewerType(n.filePath, n.rawContent ?? n.content);
+ switch (t) {
+ case 'markdown': return '📝';
+ case 'excalidraw': return '✏️';
+ case 'pdf': return '📄';
+ case 'image': return '🖼️';
+ case 'video': return '🎬';
+ case 'code': return '';
+ default: return '📎';
+ }
+ }
+
private scrollToSelectedEffect = effect(() => {
const id = this.selectedId() || this.pendingSelectId();
if (!id) return;
@@ -592,8 +683,10 @@ export class NotesListComponent {
const folder = (this.folderFilter() || '').toLowerCase().replace(/^\/+|\/+$/g, '');
const tag = (this.activeTag() || '').toLowerCase();
const quickLink = this.quickLinkFilter();
+ const kind = this.kindFilter();
const sortBy = this.state.sortBy();
- let list = this.notes();
+ // Build source list: notes + other files (images, pdf, video, code, etc.)
+ let list = this.buildUnifiedList();
if (folder !== '.trash') {
list = list.filter(n => {
@@ -635,6 +728,11 @@ export class NotesListComponent {
});
}
+ // Kind filter (file type)
+ if (kind && kind !== 'all') {
+ list = list.filter(n => this.matchesKind(n, kind));
+ }
+
const parseDate = (s?: string) => (s ? Date.parse(s) : 0) || 0;
return [...list].sort((a, b) => {
switch (sortBy) {
diff --git a/src/app/features/note-view/components/code-renderer/code-renderer.component.ts b/src/app/features/note-view/components/code-renderer/code-renderer.component.ts
new file mode 100644
index 0000000..646291d
--- /dev/null
+++ b/src/app/features/note-view/components/code-renderer/code-renderer.component.ts
@@ -0,0 +1,89 @@
+import { Component, Input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import python from 'highlight.js/lib/languages/python';
+import java from 'highlight.js/lib/languages/java';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import bash from 'highlight.js/lib/languages/bash';
+import yaml from 'highlight.js/lib/languages/yaml';
+import sql from 'highlight.js/lib/languages/sql';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('sql', sql);
+
+@Component({
+ selector: 'app-code-renderer',
+ standalone: true,
+ imports: [CommonModule],
+ styles: [`
+ :host { display:block; }
+ .root { border: 1px solid var(--border); background: var(--card); border-radius: 1rem; overflow: hidden; }
+ .header { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; font-size:.75rem; color: var(--text-muted); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--card) 92%, black 8%); }
+ .title { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color: var(--text-main); }
+ .title svg { width: 16px; height: 16px; color: var(--accent, #9b87f5); }
+ .lang { margin-left:auto; padding:.125rem .5rem; border:1px solid var(--border); border-radius:.5rem; font-weight:600; color: var(--text-main); }
+ pre { margin:0; padding: .75rem 1rem; font-family: var(--font-mono, ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace); font-size:.875rem; line-height:1.5; overflow:auto; }
+ code { display:block; }
+ .hljs { color: var(--text-main); }
+ `],
+ template: `
+ ();
+}
diff --git a/src/app/features/note-view/components/image-viewer/image-viewer.component.ts b/src/app/features/note-view/components/image-viewer/image-viewer.component.ts
new file mode 100644
index 0000000..51b44a1
--- /dev/null
+++ b/src/app/features/note-view/components/image-viewer/image-viewer.component.ts
@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-image-viewer',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ (() => this.sanitizer.bypassSecurityTrustResourceUrl(this.src || ''));
+
+ fileName = computed(() => {
+ const p = this.path || this.src || '';
+ try {
+ const u = decodeURI(p);
+ return u.split('/').pop() || u.split('\\').pop() || 'document.pdf';
+ } catch {
+ return p.split('/').pop() || p.split('\\').pop() || 'document.pdf';
+ }
+ });
+
+}
diff --git a/src/app/features/note-view/components/video-player/video-player.component.ts b/src/app/features/note-view/components/video-player/video-player.component.ts
new file mode 100644
index 0000000..2f42941
--- /dev/null
+++ b/src/app/features/note-view/components/video-player/video-player.component.ts
@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-video-player',
+ standalone: true,
+ imports: [CommonModule],
+ styles: [`
+ :host { display:block; height:100%; }
+ .root { height:100%; display:flex; align-items:center; justify-content:center; background: var(--card); border-radius: 12px; overflow:hidden; border:1px solid var(--border); }
+ video { width: 100%; height: 100%; max-height: 90vh; background: black; }
+ `],
+ template: `
+
{{ n.title }}
@@ -466,6 +481,7 @@ export class NotesListComponent {
tagFilter = input
+
+ `
+})
+export class CodeRendererComponent {
+ @Input() path: string = '';
+ @Input() content: string = '';
+
+ fileName = computed(() => {
+ const p = this.path || '';
+ return p.split('/').pop() || p.split('\\').pop() || 'code';
+ });
+
+ languageLabel = computed(() => {
+ const src = this.content || '';
+ if (!src.trim()) return 'TEXT';
+ try {
+ const res = hljs.highlightAuto(src);
+ return (res.language || 'text').toUpperCase();
+ } catch {
+ return 'TEXT';
+ }
+ });
+
+ highlighted = computed(() => {
+ const src = this.content || '';
+ try {
+ if (!src.trim()) { return hljs.highlightAuto('').value; }
+ const res = hljs.highlightAuto(src);
+ return res.value;
+ } catch {
+ return hljs.highlightAuto(src).value;
+ }
+ });
+}
diff --git a/src/app/features/note-view/components/file-info-panel/file-info-panel.component.ts b/src/app/features/note-view/components/file-info-panel/file-info-panel.component.ts
new file mode 100644
index 0000000..c9c3c13
--- /dev/null
+++ b/src/app/features/note-view/components/file-info-panel/file-info-panel.component.ts
@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, Output, computed, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface FileMetadataView {
+ type: string;
+ size?: number;
+ sizeHuman?: string;
+ path: string;
+ createdAt?: string;
+ modifiedAt?: string;
+ dimensions?: { width: number; height: number };
+ duration?: string;
+ codec?: string;
+ frameRate?: number;
+ dataRate?: number;
+}
+
+@Component({
+ selector: 'app-file-info-panel',
+ standalone: true,
+ imports: [CommonModule],
+ styles: [`
+ :host { display:block; }
+ .panel { position: absolute; top: 0; right: 0; height: 100%; width: min(88vw, 320px); background: var(--card); border-left: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .25s ease, opacity .25s ease; opacity: .98; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
+ .panel.open { transform: translateX(0); }
+ .header { height: 44px; display:flex; align-items:center; gap:.5rem; padding: 0 .75rem; border-bottom:1px solid var(--border); }
+ .content { padding: .75rem .75rem 1rem; font-size: .875rem; }
+ .row { display:flex; align-items:flex-start; gap:.5rem; padding:.4rem 0; border-bottom:1px dashed var(--border); }
+ .row:last-child { border-bottom: 0; }
+ .k { color: var(--text-muted); width: 120px; flex: 0 0 auto; }
+ .v { color: var(--text-main); word-break: break-word; }
+ .close { margin-left:auto; border-radius:8px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
+ .close:hover { background: color-mix(in oklab, var(--card) 90%, black 10%); }
+ `],
+ template: `
+
+
+
+ code
+
+ {{ languageLabel() }}
+
+
+
+ `
+})
+export class FileInfoPanelComponent {
+ @Input() visible: boolean = false;
+ @Input() data: FileMetadataView | null = null;
+ @Output() close = new EventEmitter
+ Détails
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Type
{{ data?.type || '—' }}
Taille
{{ data!.size | number }} o ({{ data!.sizeHuman }})
Chemin
{{ data?.path }}
Créé
{{ data!.createdAt | date:'medium' }}
Modifié
{{ data!.modifiedAt | date:'medium' }}
Dimensions
{{ data!.dimensions!.width }} × {{ data!.dimensions!.height }} px
Durée
{{ data!.duration }}
Frame rate
{{ data!.frameRate }} fps
Codec
{{ data!.codec }}
+ ![]()
+
+ `,
+ styles: [`
+ :host { display:block; height:100%; }
+ .img-root { height:100%; display:flex; align-items:center; justify-content:center; padding: 1rem; }
+ .media { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.16); }
+ `]
+})
+export class ImageViewerComponent {
+ @Input() src: string = '';
+ @Input() alt: string = '';
+ @Output() dimensions = new EventEmitter<{ width: number; height: number }>();
+
+ onLoad(ev: Event) {
+ const el = ev.target as HTMLImageElement | null;
+ if (!el) return;
+ this.dimensions.emit({ width: el.naturalWidth || el.width || 0, height: el.naturalHeight || el.height || 0 });
+ }
+}
diff --git a/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.html b/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.html
new file mode 100644
index 0000000..8fadc3d
--- /dev/null
+++ b/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.html
@@ -0,0 +1,8 @@
+
+
+
+
+
diff --git a/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.scss b/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.scss
new file mode 100644
index 0000000..5f8fb79
--- /dev/null
+++ b/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.scss
@@ -0,0 +1,6 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.ts b/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.ts
new file mode 100644
index 0000000..6319f4a
--- /dev/null
+++ b/src/app/features/note-view/components/pdf-viewer/pdf-viewer.component.ts
@@ -0,0 +1,76 @@
+import { Component, Input, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+ selector: 'app-pdf-viewer',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+
+
+ `,
+ styles: [`
+ :host { display:flex; flex:1 1 auto; width:100%; min-width:0; min-height:0; padding: 0; }
+ .pdf-container {
+ flex:1 1 auto;
+ display:flex;
+ flex-direction:column;
+ min-height:0;
+ border-radius: 0.5rem;
+ border: 1px solid var(--border);
+ background: var(--card);
+ overflow: hidden;
+ }
+ .pdf-header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid var(--border);
+ background: color-mix(in srgb, var(--card) 95%, var(--text-main) 5%);
+ font-size: 0.875rem;
+ }
+ .pdf-icon { font-size: 1.25rem; }
+ .pdf-title {
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-muted);
+ }
+ .pdf-filename {
+ margin-left: auto;
+ font-weight: 500;
+ color: var(--text-main);
+ max-width: 50%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .viewer { flex:1 1 auto; display:block; width:100%; height:100%; border:0; min-height:0; }
+ `]
+})
+export class PdfViewerComponent {
+ @Input() src: string = '';
+ @Input() path: string = '';
+ private sanitizer = inject(DomSanitizer);
+
+ safeSrc = computed
+
+ PDF
+ {{ fileName() }}
+
+
+
+
+
+ `
+})
+export class VideoPlayerComponent {
+ @Input() src: string = '';
+ @Output() metadata = new EventEmitter<{ width: number; height: number; duration: number }>();
+
+ onMeta(ev: Event) {
+ const v = ev.target as HTMLVideoElement | null;
+ if (!v) return;
+ this.metadata.emit({ width: v.videoWidth || 0, height: v.videoHeight || 0, duration: isFinite(v.duration) ? v.duration : 0 });
+ }
+}
diff --git a/src/app/features/note/components/properties-popover/properties-popover.component.html b/src/app/features/note/components/properties-popover/properties-popover.component.html
index 5577e60..6367771 100644
--- a/src/app/features/note/components/properties-popover/properties-popover.component.html
+++ b/src/app/features/note/components/properties-popover/properties-popover.component.html
@@ -10,6 +10,24 @@
+
+
+
+
+
Infos fichier
+-
+
- Type +
- {{ fi.type }} +
- Taille +
- {{ fi.size || 0 | number }} o ({{ fi.sizeHuman }}) +
- Chemin +
- {{ fi.path }} +
- Créé le +
- {{ formatDate(fi.createdAt) }} +
- Modifié le +
- {{ formatDate(fi.modifiedAt) }} +
-
diff --git a/src/app/features/note/components/properties-popover/properties-popover.component.ts b/src/app/features/note/components/properties-popover/properties-popover.component.ts
index 25f06ca..6d9d010 100644
--- a/src/app/features/note/components/properties-popover/properties-popover.component.ts
+++ b/src/app/features/note/components/properties-popover/properties-popover.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { Component, EventEmitter, Input, Output, inject, OnChanges, SimpleChanges, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StateChipComponent } from '../state-chip/state-chip.component';
import {
@@ -9,6 +9,7 @@ import {
} from '../../shared/note-properties.model';
import { VaultService } from '../../../../../services/vault.service';
import { FrontmatterPropertiesService } from '../../shared/frontmatter-properties.service';
+import { FileTypeDetectorService } from '../../../../../services/file-type-detector.service';
@Component({
selector: 'app-properties-popover',
@@ -16,14 +17,63 @@ import { FrontmatterPropertiesService } from '../../shared/frontmatter-propertie
imports: [CommonModule, StateChipComponent],
templateUrl: './properties-popover.component.html'
})
-export class PropertiesPopoverComponent {
+export class PropertiesPopoverComponent implements OnChanges {
@Input() props: NoteProperties | null = null;
- @Input() noteId: string | null = null;
+ private _noteId: string | null = null;
+ @Input() set noteId(value: string | null) {
+ this._noteId = value;
+ // Trigger refresh when input is assigned programmatically by overlay
+ this.refreshFileInfo();
+ }
+ get noteId(): string | null { return this._noteId; }
@Output() requestClose = new EventEmitter
+ ();
env = environment;
- open = { quick: true, folders: false, tags: false, trash: false, tests: false };
+ open = { quick: true, folders: true, tags: false, trash: false, tests: false };
private vault = inject(VaultService);
+ urlState = inject(UrlStateService);
@ViewChild('foldersExplorer') private foldersExplorer?: FileExplorerComponent;
ngOnChanges(changes: SimpleChanges): void {
@@ -245,4 +273,14 @@ export class NimbusSidebarComponent implements OnChanges {
this.folderSelected.emit('.trash');
}
}
+
+ setKind(kind: 'image'|'video'|'pdf'|'markdown'|'excalidraw'|'code'|'all') {
+ this.urlState.filterByKind(kind);
+ }
+
+ chipClass(active: boolean): string {
+ return active
+ ? 'bg-primary/15 text-primary ring-1 ring-primary/40'
+ : 'bg-surface1/50 text-muted hover:bg-surface1 dark:hover:bg-card';
+ }
}
diff --git a/src/app/layout/app-shell-nimbus/app-shell-nimbus.component.ts b/src/app/layout/app-shell-nimbus/app-shell-nimbus.component.ts
index b04c0b4..a772b15 100644
--- a/src/app/layout/app-shell-nimbus/app-shell-nimbus.component.ts
+++ b/src/app/layout/app-shell-nimbus/app-shell-nimbus.component.ts
@@ -35,7 +35,7 @@ import { InPageSearchOverlayComponent } from '../../shared/search/in-page-search
+
+
+
+
+
+
+
+
-
+
-
+
-
-
+
-
}
@if (mobileNav.activeTab() === 'page') {
@if (activeView === 'parameters') {
-
+
+
+
+
+
@if (selectedNote) {
;
+}
+
+@Injectable({ providedIn: 'root' })
+export class FileViewerRegistry {
+ constructor(private readonly detector: FileTypeDetectorService) {}
+
+ getViewerKind(path: string, content: string): ViewerKind {
+ return this.detector.getViewerType(path, content) as ViewerKind;
+ }
+
+ /**
+ * Optional registry map for future plugin-style viewers. Not used by current UI, but available.
+ */
+ getDefaultEntries(): Record {
+ return {
+ markdown: { kind: 'markdown', load: async () => (await import('../../components/markdown-viewer/markdown-viewer.component')).MarkdownViewerComponent },
+ excalidraw: { kind: 'excalidraw', load: async () => (await import('../features/drawings/drawings-editor.component')).DrawingsEditorComponent },
+ image: { kind: 'image' },
+ video: { kind: 'video' },
+ pdf: { kind: 'pdf' },
+ code: { kind: 'code', load: async () => (await import('../features/code-viewer/code-viewer.component')).CodeViewerComponent },
+ text: { kind: 'text' },
+ unknown: { kind: 'unknown' }
+ };
+ }
+}
+
+/**
+ * Hook to register viewer-related providers. Current services are providedIn: 'root',
+ * so this returns an empty list to keep bootstrap code explicit and future-proof.
+ */
+export function provideViewers(): Provider[] {
+ return [];
+}
diff --git a/src/app/services/url-state.service.ts b/src/app/services/url-state.service.ts
index cf59bca..6210654 100644
--- a/src/app/services/url-state.service.ts
+++ b/src/app/services/url-state.service.ts
@@ -15,6 +15,7 @@ export interface UrlState {
folder?: string; // Dossier de filtrage
quick?: string; // Quick link de filtrage
search?: string; // Terme de recherche
+ kind?: 'image' | 'video' | 'pdf' | 'markdown' | 'excalidraw' | 'code' | 'all';
}
export interface UrlStateChangeEvent {
@@ -120,6 +121,15 @@ export class UrlStateService implements OnDestroy {
return search;
});
+ /**
+ * Filtre de type de fichier actif
+ */
+ readonly activeKind = computed(() => {
+ const k = this.currentStateSignal().kind || null;
+ console.log('🧩 activeKind():', k);
+ return k;
+ });
+
// ========================================
// CONSTRUCTOR & LIFECYCLE
// ========================================
@@ -138,6 +148,7 @@ export class UrlStateService implements OnDestroy {
const v = qpm.get(k);
if (v !== null) params[k] = v;
}
+
// Fallback: at first load with certain servers, Router may expose empty params
if (Object.keys(params).length === 0 && typeof window !== 'undefined') {
const sp = new URLSearchParams(window.location.search || '');
@@ -164,6 +175,26 @@ export class UrlStateService implements OnDestroy {
this.previousStateSignal.set(previousState);
this.currentStateSignal.set(newState);
this.stateChangeSubject.next({ previous: previousState, current: newState, changed });
+
+ // If the active list section changed (tag/folder/quick), normalize URL:
+ // - Keep only the new section key
+ // - Clear others (including search), reset kind to 'all', and clear opened note
+ const prevSection = this.getActiveSection(previousState);
+ const nextSection = this.getActiveSection(newState);
+ if (prevSection !== nextSection && nextSection !== null) {
+ // Schedule to avoid interfering within the same router tick
+ setTimeout(() => {
+ const partial: Partial = {
+ tag: nextSection === 'tag' ? newState.tag! : null,
+ folder: nextSection === 'folder' ? newState.folder! : null,
+ quick: nextSection === 'quick' ? newState.quick! : null,
+ search: null,
+ kind: 'all',
+ note: null,
+ };
+ this.updateUrl(partial);
+ }, 0);
+ }
} else if (!previousState || Object.keys(previousState).length === 0) {
// Première initialisation si nécessaire
console.log('🌐 UrlStateService - first initialization');
@@ -233,6 +264,16 @@ export class UrlStateService implements OnDestroy {
console.log('✅ parseUrlParams - search set:', state.search);
}
+ // Kind (toujours en plus)
+ if (params['kind']) {
+ const raw = decodeURIComponent(params['kind']).toLowerCase();
+ const allowed = ['image','video','pdf','markdown','excalidraw','code','all'];
+ if (allowed.includes(raw)) {
+ state.kind = raw as UrlState['kind'];
+ console.log('✅ parseUrlParams - kind set:', state.kind);
+ }
+ }
+
console.log('🎯 parseUrlParams final state:', state);
return state;
}
@@ -243,7 +284,7 @@ export class UrlStateService implements OnDestroy {
private detectChanges(previous: UrlState, current: UrlState): (keyof UrlState)[] {
const changed: (keyof UrlState)[] = [];
- const keys: (keyof UrlState)[] = ['note', 'tag', 'folder', 'quick', 'search'];
+ const keys: (keyof UrlState)[] = ['note', 'tag', 'folder', 'quick', 'search', 'kind'];
for (const key of keys) {
if (previous[key] !== current[key]) {
@@ -254,6 +295,16 @@ export class UrlStateService implements OnDestroy {
return changed;
}
+ /**
+ * Retourne la section active parmi tag/folder/quick, sinon null
+ */
+ private getActiveSection(state: UrlState): 'tag' | 'folder' | 'quick' | null {
+ if (state.tag) return 'tag';
+ if (state.folder) return 'folder';
+ if (state.quick) return 'quick';
+ return null;
+ }
+
// ========================================
// STATE UPDATES
// ========================================
@@ -348,6 +399,14 @@ export class UrlStateService implements OnDestroy {
await this.updateUrl({ search: searchTerm || undefined });
}
+ /**
+ * Filtrer par type de fichier (image, video, pdf, markdown, excalidraw, code, all)
+ */
+ async filterByKind(kind: UrlState['kind']): Promise {
+ const normalized = (kind || 'all');
+ await this.updateUrl({ kind: normalized });
+ }
+
/**
* Définir la note et optionnellement le dossier (pour création de note)
* Utilise merge pour conserver les autres paramètres (search, etc.)
@@ -418,6 +477,7 @@ export class UrlStateService implements OnDestroy {
if (stateToShare.folder) params.set('folder', stateToShare.folder);
if (stateToShare.quick) params.set('quick', stateToShare.quick);
if (stateToShare.search) params.set('search', stateToShare.search);
+ if (stateToShare.kind) params.set('kind', stateToShare.kind);
const baseUrl = window.location.origin + window.location.pathname;
return `${baseUrl}?${params.toString()}`;
@@ -436,6 +496,13 @@ export class UrlStateService implements OnDestroy {
}
}
+ /**
+ * Show all files and clear contextual filters/search so the next search applies globally.
+ */
+ async showAllAndReset(): Promise {
+ await this.updateUrl({ tag: null, folder: null, quick: null, search: null, kind: 'all', note: null });
+ }
+
// ========================================
// OBSERVABLES & EVENTS
// ========================================
@@ -488,6 +555,13 @@ export class UrlStateService implements OnDestroy {
return this.currentStateSignal().quick === quickLink;
}
+ /**
+ * Vérifier si un type est actif
+ */
+ isKindActive(kind: UrlState['kind']): boolean {
+ return (this.currentStateSignal().kind || 'all') === (kind || 'all');
+ }
+
/**
* Obtenir l'état actuel (snapshot)
*/
diff --git a/src/components/smart-file-viewer/smart-file-viewer.component.ts b/src/components/smart-file-viewer/smart-file-viewer.component.ts
index 5755aea..4cc6651 100644
--- a/src/components/smart-file-viewer/smart-file-viewer.component.ts
+++ b/src/components/smart-file-viewer/smart-file-viewer.component.ts
@@ -1,9 +1,14 @@
-import { Component, Input, OnChanges, SimpleChanges, signal, computed, inject, CUSTOM_ELEMENTS_SCHEMA, ViewContainerRef, ComponentRef, ViewChild, effect } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, signal, computed, inject, CUSTOM_ELEMENTS_SCHEMA, ViewContainerRef, ComponentRef, ViewChild, effect, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MarkdownViewerComponent } from '../markdown-viewer/markdown-viewer.component';
import { FileTypeDetectorService } from '../../services/file-type-detector.service';
import { Note } from '../../types';
import { EditorStateService } from '../../services/editor-state.service';
+import { DrawingsEditorComponent } from '../../app/features/drawings/drawings-editor.component';
+import { PdfViewerComponent } from '../../app/features/note-view/components/pdf-viewer/pdf-viewer.component';
+import { CodeRendererComponent } from '../../app/features/note-view/components/code-renderer/code-renderer.component';
+import { ImageViewerComponent } from '../../app/features/note-view/components/image-viewer/image-viewer.component';
+import { VideoPlayerComponent } from '../../app/features/note-view/components/video-player/video-player.component';
/**
* Composant intelligent qui détecte automatiquement le type de fichier
@@ -22,7 +27,7 @@ import { EditorStateService } from '../../services/editor-state.service';
@Component({
selector: 'app-smart-file-viewer',
standalone: true,
- imports: [CommonModule, MarkdownViewerComponent],
+ imports: [CommonModule, MarkdownViewerComponent, DrawingsEditorComponent, PdfViewerComponent, CodeRendererComponent, ImageViewerComponent, VideoPlayerComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
@@ -31,41 +36,53 @@ import { EditorStateService } from '../../services/editor-state.service';
+ (editModeRequested)="onEditModeRequested($event)"
+ class="animate-fadeIn">
+
+
+
+
-
- ![]()
+
+
-
-
+
+
+
+
+
+
+
+
+
+
-
-
{{ content }}
+
- {{ resolvedContent() }}
+