chore: update Angular cache and TypeScript build info

This commit is contained in:
Bruno Charest 2025-10-03 08:20:08 -04:00
parent ce67d6e0de
commit 2dfe827759
32 changed files with 374 additions and 182 deletions

File diff suppressed because one or more lines are too long

View File

@ -198,7 +198,7 @@
<span>🔖</span>
<span class="truncate">#{{ tagFilter }}</span>
</div>
<button class="text-xs text-obs-l-text-muted transition hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:text-obs-d-text-main" (click)="clearTagFilter()">Effacer</button>
<button class="btn-standard-xs" (click)="clearTagFilter()">Effacer</button>
</div>
}
<h3 class="px-2 py-1 text-sm font-semibold text-obs-l-text-muted dark:text-obs-d-text-muted">{{ searchResults().length }} résultats</h3>
@ -297,7 +297,7 @@
}
<button
(click)="clearCalendarResults()"
class="rounded-lg border border-transparent p-1.5 text-obs-l-text-muted transition hover:border-obs-l-border/60 hover:bg-obs-l-bg-main/80 hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:border-obs-d-border/60 dark:hover:bg-obs-d-bg-main/70 dark:hover:text-obs-d-text-main"
class="btn-standard-icon"
aria-label="Fermer les résultats du calendrier"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
@ -412,18 +412,6 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
}
</button>
<button
(click)="toggleOutline()"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary"
[attr.aria-expanded]="isOutlineOpen()"
aria-label="Basculer la barre latérale droite"
>
@if (isOutlineOpen()) {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
} @else {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>
}
</button>
</div>
</div>
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-6">
@ -439,18 +427,6 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
}
</button>
<button
(click)="toggleOutline()"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary"
[attr.aria-expanded]="isOutlineOpen()"
aria-label="Basculer le calendrier"
>
@if (isOutlineOpen()) {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
} @else {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>
}
</button>
</div>
<div class="relative w-full lg:flex-1 lg:max-w-none lg:min-w-0">
<app-search-input-with-assistant
@ -546,20 +522,6 @@
title="Outline">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" /></svg>
</button>
<button
type="button"
(click)="setOutlineTab('settings')"
(keydown.enter)="setOutlineTab('settings')"
(keydown.space)="setOutlineTab('settings'); $event.preventDefault()"
[class.opacity-100]="outlineTab() === 'settings'"
[class.opacity-60]="outlineTab() !== 'settings'"
class="rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-obs-l-accent dark:focus:ring-obs-d-accent"
aria-label="Ouvrir les réglages du graphe"
[attr.aria-pressed]="outlineTab() === 'settings'"
title="Graph-View Settings">
<!-- gear/network icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
</button>
</div>
<div class="text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">{{ outlineTab() | titlecase }}</div>
</div>

View File

@ -202,7 +202,7 @@
</div>
@if (activeTagDisplay(); as tagDisplay) {
<div class="flex items-center justify-between rounded-lg border border-border bg-card px-3 py-2">
<div class="flex items-center gap-2 text-sm font-medium text-text-main">
<div class="flex items-center gap-2 text-sm font-small text-text-main">
<span>🔖</span>
<span class="truncate">{{ tagDisplay }}</span>
</div>
@ -528,6 +528,7 @@
<app-note-viewer
[note]="note"
[noteHtmlContent]="renderedNoteContent()"
[allNotes]="vaultService.allNotes()"
(noteLinkClicked)="selectNote($event)"
(tagClicked)="handleTagClick($event)"
(wikiLinkActivated)="handleWikiLink($event)"

View File

@ -53,7 +53,7 @@ interface TocEntry {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnDestroy {
private vaultService = inject(VaultService);
readonly vaultService = inject(VaultService);
private markdownService = inject(MarkdownService);
private markdownViewerService = inject(MarkdownViewerService);
private downloadService = inject(DownloadService);

View File

@ -14,23 +14,48 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
],
template: `
<div class="flex flex-col gap-3">
<!-- Header row for inline panel (optional small actions) -->
<!-- Header row for inline panel (actions aligned right) -->
<div class="flex items-center justify-between">
<h3 class="text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Graph settings</h3>
<button
type="button"
(click)="resetAll()"
class="rounded-lg p-1.5 text-obs-l-text-muted hover:bg-obs-l-bg-main/70 dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-main/60"
title="Reset all settings">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
<div class="flex items-center gap-2">
<!-- Expand all -->
<button
type="button"
class="btn-standard-icon"
title="Expand all"
(click)="accordion?.expandAll()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16M12 4v16" />
</svg>
</button>
<!-- Collapse all -->
<button
type="button"
class="btn-standard-icon"
title="Collapse all"
(click)="accordion?.collapseAll()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16" />
</svg>
</button>
<!-- Reset all -->
<button
type="button"
(click)="resetAll()"
class="btn-standard-icon"
title="Reset all settings">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</div>
</div>
<ov-graph-settings-accordion
#accordion
[config]="config()"
[showCollapseToggle]="true"
(configChange)="onConfigChange($event)"
(animateRequested)="animateRequested.emit()"
></ov-graph-settings-accordion>

View File

@ -84,7 +84,7 @@ import { GraphConfig, GRAPH_CONFIG_BOUNDS } from '../../graph-settings.types';
<button
type="button"
(click)="animateRequested.emit()"
class="w-full px-4 py-2 text-sm font-medium bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors shadow-sm">
class="btn-standard-primary w-full">
Animate
</button>
</div>

View File

@ -35,7 +35,7 @@ import { GraphConfig, GraphColorGroup, intToHex, createGraphColor } from '../../
<button
type="button"
(click)="onDuplicate($index)"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
class="btn-standard-icon"
title="Duplicate">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
@ -45,7 +45,7 @@ import { GraphConfig, GraphColorGroup, intToHex, createGraphColor } from '../../
<button
type="button"
(click)="onDelete($index)"
class="p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
class="btn-standard-icon !text-red-500 hover:!text-red-700 dark:!text-red-400 dark:hover:!text-red-300"
title="Delete">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@ -60,7 +60,7 @@ import { GraphConfig, GraphColorGroup, intToHex, createGraphColor } from '../../
<button
type="button"
(click)="onAddGroup()"
class="w-full px-4 py-2 text-sm font-medium bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors shadow-sm">
class="btn-standard-primary w-full">
New group
</button>

View File

@ -21,10 +21,32 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
<div class="panel-header">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Graph settings</h2>
<div class="flex items-center gap-2">
<!-- Expand all -->
<button
type="button"
class="btn-standard-icon"
title="Expand all"
(click)="accordion?.expandAll()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16M12 4v16" />
</svg>
</button>
<!-- Collapse all -->
<button
type="button"
class="btn-standard-icon"
title="Collapse all"
(click)="accordion?.collapseAll()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16" />
</svg>
</button>
<button
type="button"
(click)="onResetAll()"
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
class="btn-standard-icon"
title="Reset all settings">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
@ -35,7 +57,7 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
type="button"
(click)="close.emit()"
(keydown.escape)="close.emit()"
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
class="btn-standard-icon"
aria-label="Close settings"
title="Close">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -47,8 +69,8 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
<div class="panel-body">
<ov-graph-settings-accordion
#accordion
[config]="config()"
[showCollapseToggle]="true"
(configChange)="onConfigChange($event)"
(animateRequested)="animateRequested.emit()">
</ov-graph-settings-accordion>

View File

@ -6,7 +6,7 @@
<div class="flex items-center gap-2">
<button
type="button"
class="btn btn-sm btn-primary"
class="btn-standard-sm"
(click)="createGroup()"
title="Créer un groupe">
+ Group
@ -29,7 +29,7 @@
@if (searchTerm()) {
<button
(click)="onSearchChange('')"
class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
class="btn-standard-icon absolute right-2 top-1/2 -translate-y-1/2"
title="Clear search">
</button>
@ -51,7 +51,7 @@
<span class="text-sm text-red-700 dark:text-red-300 flex-1">{{ error() }}</span>
<button
(click)="clearError()"
class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200"
class="btn-standard-icon !text-red-600 dark:!text-red-400 hover:!text-red-800 dark:hover:!text-red-200"
title="Dismiss">
</button>
@ -132,12 +132,12 @@
<div class="flex gap-3">
<button
(click)="resolveConflictReload()"
class="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
class="btn-standard-primary flex-1">
Reload from file
</button>
<button
(click)="resolveConflictOverwrite()"
class="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors">
class="btn-standard-danger flex-1">
Overwrite file
</button>
</div>

View File

@ -130,17 +130,7 @@ interface AccordionSection {
}
</cdk-accordion>
<!-- Optional: Collapse All / Expand All Toggle -->
@if (showCollapseToggle()) {
<div class="collapse-toggle-container">
<button
type="button"
class="collapse-toggle-button"
(click)="toggleAll()">
{{ allExpanded() ? 'Collapse all' : 'Expand all' }}
</button>
</div>
}
`,
styles: [`
/* Container */
@ -155,7 +145,8 @@ interface AccordionSection {
border-radius: 1rem;
border: 1px solid rgba(113, 113, 122, 0.3);
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
/* Important: allow inner popovers (search options) to overflow */
overflow: visible;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@ -260,17 +251,27 @@ interface AccordionSection {
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
/* Keep hidden while collapsed to preserve animation */
overflow: hidden;
transition: grid-template-rows 0.2s ease-out;
}
.accordion-panel-expanded {
grid-template-rows: 1fr;
/* Critical: allow popovers to escape the panel box */
overflow: visible;
}
/* Allow popovers to extend outside the panel when expanded */
.accordion-panel-expanded .accordion-panel-inner {
overflow: visible;
}
.accordion-panel-inner {
min-height: 0;
padding: 0 1.25rem;
/* Ensure inner content doesn't clip popovers */
overflow: visible;
}
.accordion-panel-expanded .accordion-panel-inner {
@ -288,35 +289,6 @@ interface AccordionSection {
display: flex;
justify-content: center;
}
.collapse-toggle-button {
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
background: transparent;
border: 1px solid rgba(113, 113, 122, 0.3);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
.collapse-toggle-button:hover {
color: #374151;
border-color: rgba(113, 113, 122, 0.5);
background: rgba(249, 250, 251, 0.5);
}
:host-context(.dark) .collapse-toggle-button {
color: #9ca3af;
border-color: rgba(82, 82, 91, 0.5);
}
:host-context(.dark) .collapse-toggle-button:hover {
color: #d1d5db;
border-color: rgba(113, 113, 122, 0.6);
background: rgba(39, 39, 42, 0.5);
}
`]
})
export class GraphSettingsAccordionComponent {
@ -329,7 +301,7 @@ export class GraphSettingsAccordionComponent {
/** Animate requested output */
animateRequested = output<void>();
/** Show collapse/expand all toggle */
/** Show collapse/expand all toggle (no longer used in UI) */
showCollapseToggle = input<boolean>(false);
private settingsService = inject(GraphSettingsService);
@ -424,24 +396,28 @@ export class GraphSettingsAccordionComponent {
if (shouldExpandAll) {
// Expand all
const allIds = new Set(sections.map(s => s.id));
this.openSectionsSet.set(allIds);
// Persist all as expanded
sections.forEach(section => {
this.persistState(section.id, true);
});
this.expandAll();
} else {
// Collapse all
this.openSectionsSet.set(new Set());
// Persist all as collapsed
sections.forEach(section => {
this.persistState(section.id, false);
});
this.collapseAll();
}
}
/** Expand all sections */
expandAll(): void {
const sections = this.sections();
const allIds = new Set(sections.map(s => s.id));
this.openSectionsSet.set(allIds);
sections.forEach(section => this.persistState(section.id, true));
}
/** Collapse all sections */
collapseAll(): void {
const sections = this.sections();
this.openSectionsSet.set(new Set());
sections.forEach(section => this.persistState(section.id, false));
}
/**
* Persist section state to GraphSettingsService
*/

View File

@ -67,9 +67,7 @@ import { SearchOptions } from '../../core/search/search-parser.types';
(click)="toggleCaseSensitivity()"
[class.bg-accent]="caseSensitive()"
[class.text-white]="caseSensitive()"
[class.hover:bg-bg-muted]="!caseSensitive()"
[class.dark:hover:bg-gray-700]="!caseSensitive()"
class="px-2 py-1 rounded text-xs font-semibold transition-colors border border-border dark:border-gray-600"
class="btn-standard-xs"
[title]="caseSensitive() ? 'Case sensitive' : 'Case insensitive'"
aria-label="Toggle case sensitivity"
>
@ -82,9 +80,7 @@ import { SearchOptions } from '../../core/search/search-parser.types';
(click)="toggleRegexMode()"
[class.bg-accent]="regexMode()"
[class.text-white]="regexMode()"
[class.hover:bg-bg-muted]="!regexMode()"
[class.dark:hover:bg-gray-700]="!regexMode()"
class="px-2 py-1 rounded text-xs font-mono transition-colors border border-border dark:border-gray-600"
class="btn-standard-xs font-mono"
[title]="regexMode() ? 'Regex mode enabled' : 'Regex mode disabled'"
aria-label="Toggle regex mode"
>
@ -96,10 +92,10 @@ import { SearchOptions } from '../../core/search/search-parser.types';
*ngIf="query"
type="button"
(click)="clear()"
class="p-1 rounded-full hover:bg-bg-muted dark:hover:bg-gray-700 transition-colors"
class="btn-standard-icon"
aria-label="Clear search"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-text-muted dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>

View File

@ -36,6 +36,7 @@ type NavigationItem =
<div
#popover
class="absolute top-full left-0 right-0 mt-1 bg-bg-primary dark:bg-gray-800 border border-border dark:border-gray-700 rounded-xl shadow-2xl z-50 overflow-hidden max-h-[360px]"
style="z-index: 9999;"
(click)="$event.stopPropagation()"
>
<!-- Search Options -->

View File

@ -71,7 +71,7 @@ type SortOption = 'relevance' | 'name' | 'modified';
<!-- Expand/Collapse all -->
<button
(click)="toggleAllGroups()"
class="text-xs px-2 py-1 rounded hover:bg-bg-muted dark:hover:bg-gray-700 text-text-muted dark:text-gray-400"
class="btn-standard-xs"
title="Expand/Collapse all"
>
{{ allExpanded() ? 'Collapse all' : 'Expand all' }}
@ -134,7 +134,7 @@ type SortOption = 'relevance' | 'name' | 'modified';
<!-- Open button -->
<button
(click)="openNote(group.noteId, $event)"
class="ml-2 p-1.5 rounded hover:bg-bg-primary dark:hover:bg-gray-700 text-text-muted dark:text-gray-400"
class="btn-standard-icon ml-2"
title="Open note"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

View File

@ -15,6 +15,7 @@ import { CommonModule } from '@angular/common';
import { Note } from '../../../types';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { NotePreviewService, PreviewData } from '../../../services/note-preview.service';
import { Subscription } from 'rxjs';
import mermaid from 'mermaid';
type MermaidLib = typeof mermaid;
@ -131,7 +132,7 @@ interface MetadataEntry {
@if (metadataEntries().length > maxMetadataPreviewItems) {
<div class="mt-3">
<button type="button" class="btn btn-secondary" (click)="toggleMetadataPanel()">
<button type="button" class="btn-standard-sm" (click)="toggleMetadataPanel()">
{{ metadataExpanded() ? translate('metadata.collapse') : translate('metadata.showAll') }}
</button>
</div>
@ -201,6 +202,8 @@ export class NoteViewerComponent implements OnDestroy {
private readonly metadataKeysToExclude = new Set(['tags', 'tag', 'keywords']);
private attachmentErrorCleanup: (() => void) | null = null;
private attachmentHandlersScheduled = false;
private wikiLinkHandlersScheduled = false;
private previewOpenSub: Subscription | null = null;
readonly metadataExpanded = signal(false);
readonly maxMetadataPreviewItems = 3;
@ -265,6 +268,7 @@ export class NoteViewerComponent implements OnDestroy {
this.scheduleMermaidRender();
this.scheduleAttachmentHandlers();
this.scheduleMathRender();
this.scheduleWikiLinkHoverHandlers();
});
afterNextRender(() => {
@ -320,7 +324,8 @@ export class NoteViewerComponent implements OnDestroy {
this.scheduleMermaidRender();
this.scheduleAttachmentHandlers();
this.scheduleMathRender();
this.setupWikiLinkHoverHandlers();
this.scheduleWikiLinkHoverHandlers();
this.subscribeToPreviewOpens();
});
}
@ -333,37 +338,77 @@ export class NoteViewerComponent implements OnDestroy {
this.attachmentErrorCleanup?.();
this.attachmentErrorCleanup = null;
this.previewService.hidePreviewImmediately();
this.previewOpenSub?.unsubscribe();
this.previewOpenSub = null;
}
private subscribeToPreviewOpens(): void {
if (this.previewOpenSub) return;
this.previewOpenSub = this.previewService.openNoteRequested$.subscribe(noteId => {
if (!noteId) return;
console.log('[NoteViewer] Preview open requested for note:', noteId);
this.noteLinkClicked.emit(noteId);
});
}
private setupWikiLinkHoverHandlers(): void {
const hostElement = this.elementRef.nativeElement as HTMLElement;
const wikiLinks = hostElement.querySelectorAll<HTMLAnchorElement>('a.md-wiki-link');
console.log('[NoteViewer] Setting up hover handlers for', wikiLinks.length, 'wiki links');
wikiLinks.forEach(link => {
if (link.dataset.previewHoverBound === 'true') {
console.log('[NoteViewer] Link already bound, skipping:', link.textContent);
return;
}
link.dataset.previewHoverBound = 'true';
link.addEventListener('mouseenter', () => {
const targetValue = link.getAttribute('data-target') ?? '';
console.log('[NoteViewer] Mouse enter on link:', targetValue);
const previewData = this.buildPreviewData(targetValue);
if (previewData) {
console.log('[NoteViewer] Showing preview for:', targetValue, previewData);
this.previewService.showPreview(targetValue, link, previewData);
} else {
console.warn('[NoteViewer] No preview data found for:', targetValue);
}
});
link.addEventListener('mouseleave', () => {
console.log('[NoteViewer] Mouse leave, hiding preview');
this.previewService.hidePreview();
});
});
}
private scheduleWikiLinkHoverHandlers(): void {
if (this.wikiLinkHandlersScheduled) return;
this.wikiLinkHandlersScheduled = true;
queueMicrotask(() => {
this.wikiLinkHandlersScheduled = false;
this.setupWikiLinkHoverHandlers();
});
}
private buildPreviewData(noteTarget: string): PreviewData | null {
const allNotes = this.allNotes();
console.log('[NoteViewer] Building preview for target:', noteTarget, 'from', allNotes.length, 'notes');
const targetNote = allNotes.find(n =>
n.id.toLowerCase() === noteTarget.toLowerCase() ||
n.title.toLowerCase() === noteTarget.toLowerCase() ||
n.fileName?.replace(/\.md$/, '').toLowerCase() === noteTarget.toLowerCase()
);
if (!targetNote) return null;
if (!targetNote) {
console.warn('[NoteViewer] Target note not found:', noteTarget);
return null;
}
console.log('[NoteViewer] Found target note:', targetNote.title);
// Extraire un extrait (3-5 premières lignes)
const lines = targetNote.content.split('\n').filter(line => line.trim());

View File

@ -54,13 +54,34 @@ interface TagSection {
:host-context(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--tv-scroll-thumb-dark);
}
/* Remove blue focus rectangle and native search decorations */
#tag-search,
#tag-search:focus,
#tag-search:focus-visible {
outline: none !important;
box-shadow: none !important;
}
#tag-search {
appearance: none;
-webkit-appearance: none;
border: 0;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
`,
],
template: `
<div class="flex h-full flex-col gap-4 p-3 bg-card">
<div class="rounded-xl border border-border bg-card px-3 py-2 shadow-subtle">
<div class="w-full rounded-full border border-border bg-card px-3 py-1.5 shadow-subtle focus-within:outline-none focus-within:ring-0">
<label class="sr-only" for="tag-search">Rechercher des tags</label>
<div class="flex items-center gap-2 text-text-muted">
<div class="flex items-center gap-2.5 text-text-muted">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-5.2-5.2m0 0A7 7 0 105.8 5.8a7 7 0 0010 10z" />
</svg>
@ -70,20 +91,8 @@ interface TagSection {
[value]="searchTerm()"
(input)="onSearchChange($event.target?.value ?? '')"
placeholder="Rechercher un tag..."
class="w-full bg-transparent text-sm text-text-main placeholder:text-text-muted focus:outline-none"
class="w-full border-0 bg-transparent text-sm text-text-main placeholder:text-text-muted outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0"
/>
@if (searchTerm(); as value) {
@if (value.length > 0) {
<button
type="button"
class="btn btn-sm btn-ghost px-2 py-1 text-xs"
aria-label="Effacer la recherche"
(click)="clearSearch()"
>
Effacer
</button>
}
}
</div>
</div>
@ -105,7 +114,7 @@ interface TagSection {
@for (tag of section.tags; track tag.name) {
<button
type="button"
class="chip justify-between px-3 py-1.5 text-sm"
class="chip justify-between px-2 py-0.5 text-[0.7rem]"
(click)="tagSelected.emit(tag.name)"
>
<span class="flex items-center gap-2 text-text-main">
@ -124,7 +133,7 @@ interface TagSection {
Aucun tag ne correspond à votre recherche.
</div>
}
</div>
</div>
<nav class="custom-scrollbar sticky top-0 flex h-full w-12 flex-col items-center justify-start gap-2 self-start rounded-lg border border-border bg-card px-2 py-3 text-[0.7rem] font-medium text-text-muted shadow-subtle overflow-y-auto">
<span class="text-[0.6rem] uppercase tracking-wide text-text-muted/70">AZ</span>

View File

@ -1,6 +1,7 @@
import { Injectable, ComponentRef, inject, ApplicationRef, createComponent, EnvironmentInjector } from '@angular/core';
import { Injectable, ComponentRef, inject, ApplicationRef, EnvironmentInjector } from '@angular/core';
import { Overlay, OverlayRef, OverlayPositionBuilder, ConnectedPosition } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { Observable, Subject } from 'rxjs';
export interface PreviewData {
title: string;
@ -61,6 +62,9 @@ export class NotePreviewService {
private showTimeout?: number;
private hideTimeout?: number;
private currentNoteId?: string;
private readonly openNoteSubject = new Subject<string>();
readonly openNoteRequested$: Observable<string> = this.openNoteSubject.asObservable();
/**
* Affiche l'aperçu d'une note avec un délai de 300ms
@ -246,8 +250,7 @@ export class NotePreviewService {
private handleOpenNote(noteId: string): void {
this.hidePreviewImmediately();
// L'événement de navigation sera géré par le composant parent
// via un service de routing ou un event emitter
this.openNoteSubject.next(noteId);
}
/**

View File

@ -205,6 +205,11 @@
--task-checkbox-checked-border: #22c55e;
--task-checkbox-checked-bg: #22c55e;
--task-checkbox-done-text: #94a3b8;
--btn-border-color: color-mix(in srgb, var(--border) 65%, transparent);
--btn-border-strong: var(--border);
--btn-hover-background: color-mix(in srgb, var(--bg-muted) 42%, transparent);
--btn-focus-ring: color-mix(in srgb, var(--border) 45%, transparent);
--btn-muted-text: var(--text-muted);
}
.dark {
@ -214,6 +219,11 @@
--task-checkbox-checked-border: #22c55e;
--task-checkbox-checked-bg: #15803d;
--task-checkbox-done-text: #64748b;
--btn-border-color: color-mix(in srgb, var(--border) 70%, transparent);
--btn-border-strong: color-mix(in srgb, var(--border) 88%, transparent);
--btn-hover-background: color-mix(in srgb, var(--bg-muted) 36%, transparent);
--btn-focus-ring: color-mix(in srgb, var(--border) 55%, transparent);
--btn-muted-text: var(--text-muted);
}
@media (min-width: 1024px) {
@ -284,4 +294,101 @@
/* @apply hidden; */
display: none;
}
/* Standardized Button Styles - Based on "Collapse all" design */
.btn-standard,
.btn-standard-sm,
.btn-standard-xs,
.btn-standard-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 1px solid var(--btn-border-color);
background-color: transparent;
color: var(--text-main);
font-weight: 500;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
outline: none;
}
.btn-standard,
.btn-standard-primary,
.btn-standard-danger {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
}
.btn-standard-sm {
padding: 0.5rem 1rem;
border-radius: 0.75rem;
font-size: 0.85rem;
}
.btn-standard-xs {
padding: 0.375rem 0.875rem;
border-radius: 0.625rem;
font-size: 0.75rem;
}
.btn-standard-icon {
padding: 0.5rem;
border-radius: 0.625rem;
color: var(--btn-muted-text);
gap: 0.25rem;
min-width: auto;
}
.btn-standard:hover,
.btn-standard-sm:hover,
.btn-standard-xs:hover,
.btn-standard-icon:hover {
background-color: var(--btn-hover-background);
border-color: var(--btn-border-strong);
color: var(--text-main);
}
.btn-standard:focus-visible,
.btn-standard-sm:focus-visible,
.btn-standard-xs:focus-visible,
.btn-standard-icon:focus-visible {
box-shadow: 0 0 0 2px var(--btn-focus-ring);
}
.btn-standard-primary {
border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
background-color: color-mix(in srgb, var(--brand) 15%, transparent);
color: color-mix(in srgb, var(--brand) 90%, #ffffff);
}
.btn-standard-primary:hover {
background-color: color-mix(in srgb, var(--brand) 25%, transparent);
border-color: var(--brand);
}
.btn-standard-primary:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent);
}
.btn-standard-danger {
border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent);
background-color: color-mix(in srgb, var(--danger) 12%, transparent);
color: color-mix(in srgb, var(--danger) 92%, #ffffff);
}
.btn-standard-danger:hover {
background-color: color-mix(in srgb, var(--danger) 22%, transparent);
border-color: var(--danger);
}
.btn-standard-danger:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 38%, transparent);
}
.btn-standard-icon:hover {
color: var(--text-main);
}
}

View File

@ -122,14 +122,20 @@
.chip {
@apply inline-flex items-center gap-2 rounded-full border border-app px-3 py-1 text-sm font-medium;
min-height: 3rem;
min-height: 2.25rem;
background-color: color-mix(in srgb, var(--bg-muted) 88%, transparent);
color: var(--text-main);
}
.chip:hover {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 28%, transparent);
color: var(--text-main);
}
.chip-selected {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 25%, transparent);
background-color: color-mix(in srgb, var(--accent) 32%, transparent);
color: var(--text-main);
}

View File

@ -1,18 +1,26 @@
{
"collapse-filter": false,
"collapse-filter": true,
"search": "",
"showTags": false,
"showAttachments": false,
"hideUnresolved": false,
"showOrphans": false,
"collapse-color-groups": true,
"colorGroups": [],
"collapse-display": true,
"colorGroups": [
{
"query": "tag:test",
"color": {
"a": 1,
"rgb": 11657324
}
}
],
"collapse-display": false,
"showArrow": false,
"textFadeMultiplier": 0,
"nodeSizeMultiplier": 1,
"lineSizeMultiplier": 1,
"collapse-forces": true,
"collapse-forces": false,
"centerStrength": 0.5,
"repelStrength": 10,
"linkStrength": 1,

View File

@ -1,18 +1,26 @@
{
"collapse-filter": false,
"collapse-filter": true,
"search": "",
"showTags": false,
"showAttachments": false,
"hideUnresolved": false,
"showOrphans": true,
"showOrphans": false,
"collapse-color-groups": true,
"colorGroups": [],
"collapse-display": true,
"colorGroups": [
{
"query": "tag:test",
"color": {
"a": 1,
"rgb": 11657324
}
}
],
"collapse-display": false,
"showArrow": false,
"textFadeMultiplier": 0,
"nodeSizeMultiplier": 1,
"lineSizeMultiplier": 1,
"collapse-forces": true,
"collapse-forces": false,
"centerStrength": 0.5,
"repelStrength": 10,
"linkStrength": 1,

View File

@ -11,10 +11,14 @@
"id": "17cca9c5f5a7401d",
"type": "leaf",
"state": {
"type": "empty",
"state": {},
"type": "markdown",
"state": {
"file": "HOME.md",
"mode": "source",
"source": false
},
"icon": "lucide-file",
"title": "New tab"
"title": "HOME"
}
}
]
@ -70,8 +74,7 @@
"title": "Bookmarks"
}
}
],
"currentTab": 1
]
}
],
"direction": "horizontal",
@ -91,6 +94,7 @@
"state": {
"type": "backlink",
"state": {
"file": "HOME.md",
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical",
@ -100,7 +104,7 @@
"unlinkedCollapsed": true
},
"icon": "links-coming-in",
"title": "Backlinks"
"title": "Backlinks for HOME"
}
},
{
@ -109,11 +113,12 @@
"state": {
"type": "outgoing-link",
"state": {
"file": "HOME.md",
"linksCollapsed": false,
"unlinkedCollapsed": true
},
"icon": "links-going-out",
"title": "Outgoing links"
"title": "Outgoing links from HOME"
}
},
{
@ -137,12 +142,13 @@
"state": {
"type": "outline",
"state": {
"file": "HOME.md",
"followCursor": false,
"showSearch": false,
"searchQuery": ""
},
"icon": "lucide-list",
"title": "Outline"
"title": "Outline of HOME"
}
},
{
@ -150,7 +156,9 @@
"type": "leaf",
"state": {
"type": "footnotes",
"state": {},
"state": {
"file": "HOME.md"
},
"icon": "lucide-file-signature",
"title": "Footnotes"
}
@ -173,9 +181,13 @@
"bases:Create new base": false
}
},
"active": "6be1f25c351d6c9f",
"active": "17cca9c5f5a7401d",
"lastOpenFiles": [
"test.md",
"folder1/test2.md",
"folder2/test2.md",
"folder2",
"folder1",
"NonExistentNote.md",
"tata/titi-coco.md",
"folder/test2.md",

View File

@ -6,10 +6,12 @@ tags:
- home
- accueil
- configuration
- test
attachements-path: attachements/
---
Page principal - IT
[[Voute_IT.png]]
[[test.md]]
[[test]]
[[test2]]

4
vault/folder1/test2.md Normal file
View File

@ -0,0 +1,4 @@
---
tag: testTag
---
Ceci est la page 1

3
vault/folder2/test2.md Normal file
View File

@ -0,0 +1,3 @@
ceci est la page 2

View File

@ -17,7 +17,7 @@ image: https://images.unsplash.com/photo-1675789652575-0a5d2425b6c2?ixlib=rb-4.0
---
#tag1 #tag2 #test #test2
# Page de test Markdown
# Test 1 Markdown
## Titres
@ -33,6 +33,10 @@ image: https://images.unsplash.com/photo-1675789652575-0a5d2425b6c2?ixlib=rb-4.0
###### Niveau 6
[[test2]]
[[folder2/test2|test2]]
## Mise en emphase
*Italique* et _italique_
@ -55,9 +59,6 @@ Citation en ligne : « > Ceci est une citation »
Le Markdown peut inclure des notes de bas de page[^1].
[^1]: Ceci est un exemple de note de bas de page.
## Listes
- Élément non ordonné 1
@ -172,6 +173,7 @@ $$
> [!note]
> Ceci est une note informative.
---
> [!tip]
@ -243,4 +245,4 @@ Host: localhost:4000
Fin de la page de test.
[^1]: Ceci est un exemple de note de bas de page.