From 698bfef3d8e4bc410522fc4ba1a7e9386837f391 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Wed, 22 Oct 2025 08:58:26 -0400 Subject: [PATCH] feat: add help and about pages with sidebar navigation buttons --- src/app.component.simple.html | 1 + src/app.component.ts | 13 ++ .../features/about/about-panel.component.ts | 131 ++++++++++++++++++ .../sidebar/app-sidebar-drawer.component.ts | 30 ++++ .../sidebar/nimbus-sidebar.component.ts | 20 +++ .../app-shell-nimbus.component.ts | 20 ++- src/core/logging/log.model.ts | 3 +- vault/help.md | 43 ++++++ vault/help.md.bak | 36 +++++ 9 files changed, 295 insertions(+), 2 deletions(-) create mode 100644 src/app/features/about/about-panel.component.ts create mode 100644 vault/help.md create mode 100644 vault/help.md.bak diff --git a/src/app.component.simple.html b/src/app.component.simple.html index 34c9718..11f9d32 100644 --- a/src/app.component.simple.html +++ b/src/app.component.simple.html @@ -29,6 +29,7 @@ (searchOptionsChange)="onHeaderSearchOptionsChange($event)" (markdownPlaygroundSelected)="setView('markdown-playground')" (parametersOpened)="setView('parameters')" + (helpPageRequested)="openHelpPage()" > } @else {
diff --git a/src/app.component.ts b/src/app.component.ts index 495cb8f..6984158 100644 --- a/src/app.component.ts +++ b/src/app.component.ts @@ -878,6 +878,19 @@ export class AppComponent implements OnInit, OnDestroy { } } + async openHelpPage(): Promise { + // Load the help.md file from the vault + const helpPath = 'help.md'; + await this.vaultService.ensureNoteLoadedByPath(helpPath); + const helpNoteId = this.vaultService.buildSlugIdFromPath(helpPath); + const helpNote = this.vaultService.getNoteById(helpNoteId); + + if (helpNote) { + this.selectNote(helpNote.id); + this.logService.log('HELP_PAGE_OPEN'); + } + } + async selectNote(noteId: string): Promise { let note = this.vaultService.getNoteById(noteId); if (!note) { diff --git a/src/app/features/about/about-panel.component.ts b/src/app/features/about/about-panel.component.ts new file mode 100644 index 0000000..b639d8c --- /dev/null +++ b/src/app/features/about/about-panel.component.ts @@ -0,0 +1,131 @@ +import { Component, EventEmitter, Output, ChangeDetectionStrategy, HostListener } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { trigger, transition, style, animate } from '@angular/animations'; + +@Component({ + selector: 'app-about-panel', + standalone: true, + imports: [CommonModule], + changeDetection: ChangeDetectionStrategy.OnPush, + animations: [ + trigger('fadeInOut', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('200ms ease-in', style({ opacity: 1 })) + ]), + transition(':leave', [ + animate('200ms ease-out', style({ opacity: 0 })) + ]) + ]), + trigger('scaleIn', [ + transition(':enter', [ + style({ opacity: 0, transform: 'scale(0.95)' }), + animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })) + ]), + transition(':leave', [ + animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.95)' })) + ]) + ]) + ], + template: ` + +
+ + +
+ + + + + +
+ +
+
+ 📖 +
+
+ + +
+

ObsiViewer

+

Version {{ version }}

+
+ + +

+ Visualiseur moderne et élégant pour vos notes Obsidian. + Explorez, éditez et organisez vos connaissances avec une interface intuitive. +

+ + +
+

+ Créé par Bruno Charest +

+
+ + +
+

Technologies utilisées

+
+ Angular 20 + TailwindCSS + CodeMirror 6 + Markdown-it + Lucide Icons +
+
+ + +
+ + + + + Voir sur GitHub + +
+
+
+
+ `, + styles: [` + :host { + display: block; + } + `] +}) +export class AboutPanelComponent { + @Output() close = new EventEmitter(); + + readonly version = '1.0.0'; + + @HostListener('document:keydown.escape') + onEscapeKey(): void { + this.close.emit(); + } + + onBackdropClick(): void { + this.close.emit(); + } +} diff --git a/src/app/features/sidebar/app-sidebar-drawer.component.ts b/src/app/features/sidebar/app-sidebar-drawer.component.ts index 72a255b..e75a7e3 100644 --- a/src/app/features/sidebar/app-sidebar-drawer.component.ts +++ b/src/app/features/sidebar/app-sidebar-drawer.component.ts @@ -105,6 +105,24 @@ import { TrashExplorerComponent } from '../../layout/sidebar/trash/trash-explore + + +
+
+ + +
+
@@ -136,6 +154,8 @@ export class AppSidebarDrawerComponent { @Output() tagSelected = new EventEmitter(); @Output() quickLinkSelected = new EventEmitter(); @Output() markdownPlaygroundSelected = new EventEmitter(); + @Output() helpPageSelected = new EventEmitter(); + @Output() aboutSelected = new EventEmitter(); open = { quick: true, folders: true, tags: false, trash: false, tests: true }; @@ -165,6 +185,16 @@ export class AppSidebarDrawerComponent { this.mobileNav.sidebarOpen.set(false); } + onHelpPageClick(): void { + this.helpPageSelected.emit(); + this.mobileNav.sidebarOpen.set(false); + } + + onAboutClick(): void { + this.aboutSelected.emit(); + this.mobileNav.sidebarOpen.set(false); + } + trashNotes = () => this.vault.trashNotes(); trashCount = () => this.vault.counts().trash; trashHasContent = () => (this.vault.trashTree() || []).length > 0; diff --git a/src/app/features/sidebar/nimbus-sidebar.component.ts b/src/app/features/sidebar/nimbus-sidebar.component.ts index c0d3467..01db22d 100644 --- a/src/app/features/sidebar/nimbus-sidebar.component.ts +++ b/src/app/features/sidebar/nimbus-sidebar.component.ts @@ -112,6 +112,24 @@ import { VaultService } from '../../../services/vault.service'; + + +
+
+ + +
+
@@ -131,6 +149,8 @@ export class NimbusSidebarComponent { @Output() tagSelected = new EventEmitter(); @Output() quickLinkSelected = new EventEmitter(); @Output() markdownPlaygroundSelected = new EventEmitter(); + @Output() helpPageSelected = new EventEmitter(); + @Output() aboutSelected = new EventEmitter(); env = environment; open = { quick: true, folders: true, tags: false, trash: false, tests: true }; 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 54e7900..f91e75f 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 @@ -17,11 +17,12 @@ import { QuickLinksComponent } from '../../features/quick-links/quick-links.comp import { ScrollableOverlayDirective } from '../../shared/overlay-scrollbar/scrollable-overlay.directive'; import { MarkdownPlaygroundComponent } from '../../features/tests/markdown-playground/markdown-playground.component'; import { ParametersPage } from '../../features/parameters/parameters.page'; +import { AboutPanelComponent } from '../../features/about/about-panel.component'; @Component({ selector: 'app-shell-nimbus-layout', standalone: true, - imports: [CommonModule, FileExplorerComponent, NoteViewerComponent, AppBottomNavigationComponent, AppSidebarDrawerComponent, AppTocOverlayComponent, SwipeNavDirective, NotesListComponent, NimbusSidebarComponent, QuickLinksComponent, ScrollableOverlayDirective, MarkdownPlaygroundComponent, ParametersPage], + imports: [CommonModule, FileExplorerComponent, NoteViewerComponent, AppBottomNavigationComponent, AppSidebarDrawerComponent, AppTocOverlayComponent, SwipeNavDirective, NotesListComponent, NimbusSidebarComponent, QuickLinksComponent, ScrollableOverlayDirective, MarkdownPlaygroundComponent, ParametersPage, AboutPanelComponent], template: `
@@ -62,6 +63,8 @@ import { ParametersPage } from '../../features/parameters/parameters.page'; (tagSelected)="onTagSelected($event)" (quickLinkSelected)="onQuickLink($event)" (markdownPlaygroundSelected)="onMarkdownPlaygroundSelected()" + (helpPageSelected)="onHelpPageSelected()" + (aboutSelected)="onAboutSelected()" /> @@ -209,6 +212,8 @@ import { ParametersPage } from '../../features/parameters/parameters.page'; (tagSelected)="onTagSelected($event)" (quickLinkSelected)="onQuickLink($event)" (markdownPlaygroundSelected)="onMarkdownPlaygroundSelected()" + (helpPageSelected)="onHelpPageSelected()" + (aboutSelected)="onAboutSelected()" > @if (mobileNav.activeTab() === 'list') { @@ -244,6 +249,9 @@ import { ParametersPage } from '../../features/parameters/parameters.page';
+ + + ` }) @@ -254,6 +262,7 @@ export class AppShellNimbusLayoutComponent { mobileNav = inject(MobileNavService); noteFullScreen = false; + showAboutPanel = false; @Input() vaultName = ''; @Input() effectiveFileTree: VaultNode[] = []; @@ -283,6 +292,7 @@ export class AppShellNimbusLayoutComponent { @Output() searchOptionsChange = new EventEmitter(); @Output() markdownPlaygroundSelected = new EventEmitter(); @Output() parametersOpened = new EventEmitter(); + @Output() helpPageRequested = new EventEmitter(); folderFilter: string | null = null; listQuery: string = ''; @@ -489,4 +499,12 @@ export class AppShellNimbusLayoutComponent { this.navigateHeading.emit(headingId); }, 100); } + + onHelpPageSelected(): void { + this.helpPageRequested.emit(); + } + + onAboutSelected(): void { + this.showAboutPanel = true; + } } diff --git a/src/core/logging/log.model.ts b/src/core/logging/log.model.ts index f492aaa..fce81ea 100644 --- a/src/core/logging/log.model.ts +++ b/src/core/logging/log.model.ts @@ -14,7 +14,8 @@ export type LogEvent = | 'CALENDAR_SEARCH_EXECUTED' | 'THEME_CHANGE' | 'THEME_MODE_CHANGE' - | 'LANGUAGE_CHANGE'; + | 'LANGUAGE_CHANGE' + | 'HELP_PAGE_OPEN'; export interface LogContext { route?: string; diff --git a/vault/help.md b/vault/help.md new file mode 100644 index 0000000..3aff179 --- /dev/null +++ b/vault/help.md @@ -0,0 +1,43 @@ +--- +titre: Guide d'utilisateur +auteur: Bruno Charest +creation_date: 2025-10-21 +modification_date: 2025-10-21T22:42:09-04:00 +catégorie: documentation +tags: + - aide + - guide +aliases: [] +status: publié +publish: false +favoris: false +template: false +task: false +archive: false +draft: false +private: false +--- +# 🧭 Guide d'utilisateur ObsiViewer + +Bienvenue dans **ObsiViewer** ! + +Ce guide vous aidera à comprendre les principales fonctionnalités : + +## 📂 Navigation +- La barre latérale permet d'accéder aux notes, favoris, tags et modèles. +- Les boutons en haut à droite donnent accès au mode édition, plein écran, et propriétés. + +## ✏️ Édition +- Le bouton ✏️ ouvre le **mode édition** basé sur CodeMirror 6. +- Toutes les modifications sont sauvegardées automatiquement. + +## 🏷️ Tags +- Cliquez sur un tag pour voir toutes les notes qui le contiennent. +- Utilisez l'icône 🏷️ à gauche pour modifier ou ajouter des tags. + +## ⚙️ Paramètres +- Les thèmes, langues et préférences sont gérés depuis le menu principal. + +--- + +💡 **Astuce :** vous pouvez mettre à jour ce guide directement depuis votre voute Markdown. diff --git a/vault/help.md.bak b/vault/help.md.bak new file mode 100644 index 0000000..27667ec --- /dev/null +++ b/vault/help.md.bak @@ -0,0 +1,36 @@ +--- +titre: Guide d'utilisateur +auteur: Bruno Charest +creation_date: 2025-10-21 +modification_date: 2025-10-21 +catégorie: documentation +tags: + - aide + - guide +status: publié +--- + +# 🧭 Guide d'utilisateur ObsiViewer + +Bienvenue dans **ObsiViewer** ! + +Ce guide vous aidera à comprendre les principales fonctionnalités : + +## 📂 Navigation +- La barre latérale permet d'accéder aux notes, favoris, tags et modèles. +- Les boutons en haut à droite donnent accès au mode édition, plein écran, et propriétés. + +## ✏️ Édition +- Le bouton ✏️ ouvre le **mode édition** basé sur CodeMirror 6. +- Toutes les modifications sont sauvegardées automatiquement. + +## 🏷️ Tags +- Cliquez sur un tag pour voir toutes les notes qui le contiennent. +- Utilisez l'icône 🏷️ à gauche pour modifier ou ajouter des tags. + +## ⚙️ Paramètres +- Les thèmes, langues et préférences sont gérés depuis le menu principal. + +--- + +💡 **Astuce :** vous pouvez mettre à jour ce guide directement depuis votre voute Markdown.