From 7e20098d14702e6a64f93517d141c24dda09269c Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Thu, 23 Oct 2025 14:02:46 -0400 Subject: [PATCH] feat: add API tests panel to sidebar navigation and UI components --- .../sidebar/nimbus-sidebar.component.ts | 10 ++ .../features/tests/tests-panel.component.ts | 121 ++++++++++-------- .../app-shell-nimbus.component.ts | 45 +++++-- vault/folder-5/file-5.md | 23 +--- .../{file-5.md.bak => test-add-properties.md} | 13 +- vault/folder-5/test-add-properties.md.bak | 0 vault/test-file.md | 20 +++ vault/test-file.md.bak | 3 + 8 files changed, 140 insertions(+), 95 deletions(-) rename vault/folder-5/{file-5.md.bak => test-add-properties.md} (54%) create mode 100644 vault/folder-5/test-add-properties.md.bak create mode 100644 vault/test-file.md create mode 100644 vault/test-file.md.bak diff --git a/src/app/features/sidebar/nimbus-sidebar.component.ts b/src/app/features/sidebar/nimbus-sidebar.component.ts index 20ad8a2..e196217 100644 --- a/src/app/features/sidebar/nimbus-sidebar.component.ts +++ b/src/app/features/sidebar/nimbus-sidebar.component.ts @@ -39,6 +39,11 @@ import { VaultService } from '../../../services/vault.service'; class="w-full text-left block text-sm px-2 py-1.5 rounded hover:bg-surface1 dark:hover:bg-card text-main dark:text-main hover:text-main dark:hover:text-gray-100"> Markdown Playground + @@ -154,6 +159,7 @@ export class NimbusSidebarComponent { @Output() tagSelected = new EventEmitter(); @Output() quickLinkSelected = new EventEmitter(); @Output() markdownPlaygroundSelected = new EventEmitter(); + @Output() testsPanelSelected = new EventEmitter(); @Output() helpPageSelected = new EventEmitter(); @Output() aboutSelected = new EventEmitter(); @@ -167,6 +173,10 @@ export class NimbusSidebarComponent { this.markdownPlaygroundSelected.emit(); } + onApiTestsPanelClick(): void { + this.testsPanelSelected.emit(); + } + trashNotes = () => this.vault.trashNotes(); trashCount = () => this.vault.counts().trash; trashHasContent = () => (this.vault.trashTree() || []).length > 0; diff --git a/src/app/features/tests/tests-panel.component.ts b/src/app/features/tests/tests-panel.component.ts index d196568..6e5bbf6 100644 --- a/src/app/features/tests/tests-panel.component.ts +++ b/src/app/features/tests/tests-panel.component.ts @@ -191,8 +191,10 @@ interface TestResult { max-width: 1200px; margin: 0 auto; padding: 20px; - font-family: 'Monaco', 'Menlo', monospace; + font-family: var(--font-mono), 'Monaco', 'Menlo', monospace; font-size: 14px; + color: var(--text-main); + background: var(--bg); } .panel-header { @@ -204,11 +206,12 @@ interface TestResult { margin: 0 0 10px 0; font-size: 24px; font-weight: 600; + color: var(--text-main); } .panel-description { margin: 0; - color: #666; + color: var(--text-muted); font-size: 16px; max-width: 600px; margin: 0 auto; @@ -225,17 +228,17 @@ interface TestResult { } .test-section { - border: 1px solid #e0e0e0; + border: 1px solid var(--border); border-radius: 8px; padding: 20px; - background: #fafafa; + background: var(--card); } .test-section h3 { margin: 0 0 15px 0; font-size: 18px; font-weight: 600; - color: #333; + color: var(--text-main); } .test-group { @@ -261,66 +264,66 @@ interface TestResult { } .test-btn--primary { - background: #007bff; + background: var(--primary); color: white; } .test-btn--primary:hover:not(:disabled) { - background: #0056b3; + background: color-mix(in srgb, var(--primary) 85%, black 15%); } .test-btn--secondary { - background: #6c757d; + background: var(--muted); color: white; } .test-btn--secondary:hover:not(:disabled) { - background: #545b62; + background: color-mix(in srgb, var(--muted) 85%, black 15%); } .test-btn--info { - background: #17a2b8; + background: var(--info); color: white; } .test-btn--info:hover:not(:disabled) { - background: #138496; + background: color-mix(in srgb, var(--info) 85%, black 15%); } .test-btn--warning { - background: #ffc107; - color: #212529; + background: var(--warning); + color: var(--text-main); } .test-btn--warning:hover:not(:disabled) { - background: #e0a800; + background: color-mix(in srgb, var(--warning) 85%, black 15%); } .test-btn--danger { - background: #dc3545; + background: var(--danger); color: white; } .test-btn--danger:hover:not(:disabled) { - background: #c82333; + background: color-mix(in srgb, var(--danger) 85%, black 15%); } .test-btn--accent { - background: #28a745; + background: var(--accent); color: white; } .test-btn--accent:hover:not(:disabled) { - background: #218838; + background: color-mix(in srgb, var(--accent) 85%, black 15%); } .test-btn--neutral { - background: #6f42c1; + background: var(--secondary); color: white; } .test-btn--neutral:hover:not(:disabled) { - background: #5a32a3; + background: color-mix(in srgb, var(--secondary) 85%, black 15%); } .file-test-form { @@ -335,29 +338,31 @@ interface TestResult { .form-row label { font-weight: 600; - color: #333; + color: var(--text-main); } .form-input, .form-textarea { padding: 8px 12px; - border: 1px solid #ccc; + border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 14px; + background: var(--card); + color: var(--text-main); } .form-input:focus, .form-textarea:focus { outline: none; - border-color: #007bff; - box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); + border-color: var(--ring); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent); } .results-panel { - border: 1px solid #e0e0e0; + border: 1px solid var(--border); border-radius: 8px; - background: white; + background: var(--card); } .results-header { @@ -365,18 +370,19 @@ interface TestResult { justify-content: space-between; align-items: center; padding: 20px; - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid var(--border); } .results-header h3 { margin: 0; font-size: 18px; font-weight: 600; + color: var(--text-main); } .clear-btn { padding: 6px 12px; - background: #dc3545; + background: var(--danger); color: white; border: none; border-radius: 4px; @@ -385,7 +391,7 @@ interface TestResult { } .clear-btn:hover { - background: #c82333; + background: color-mix(in srgb, var(--danger) 85%, black 15%); } .clear-btn:disabled { @@ -399,7 +405,7 @@ interface TestResult { } .result-item { - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--border); padding: 15px 20px; } @@ -408,23 +414,23 @@ interface TestResult { } .result-item--success { - background: #d4edda; - border-left: 4px solid #28a745; + background: color-mix(in srgb, var(--success) 15%, transparent); + border-left: 4px solid var(--success); } .result-item--error { - background: #f8d7da; - border-left: 4px solid #dc3545; + background: color-mix(in srgb, var(--danger) 15%, transparent); + border-left: 4px solid var(--danger); } .result-item--running { - background: #fff3cd; - border-left: 4px solid #ffc107; + background: color-mix(in srgb, var(--warning) 15%, transparent); + border-left: 4px solid var(--warning); } .result-item--pending { - background: #f8f9fa; - border-left: 4px solid #6c757d; + background: var(--surface-1); + border-left: 4px solid var(--muted); } .result-header { @@ -437,8 +443,8 @@ interface TestResult { .result-method { font-weight: bold; - color: #007bff; - background: #e7f3ff; + color: var(--primary); + background: color-mix(in srgb, var(--primary) 15%, transparent); padding: 2px 6px; border-radius: 3px; font-size: 12px; @@ -447,7 +453,7 @@ interface TestResult { .result-endpoint { font-family: monospace; font-size: 14px; - color: #333; + color: var(--text-main); flex: 1; } @@ -459,28 +465,28 @@ interface TestResult { } .result-item--success .result-status { - background: #d4edda; - color: #155724; + background: color-mix(in srgb, var(--success) 20%, transparent); + color: var(--success); } .result-item--error .result-status { - background: #f8d7da; - color: #721c24; + background: color-mix(in srgb, var(--danger) 20%, transparent); + color: var(--danger); } .result-item--running .result-status { - background: #fff3cd; - color: #856404; + background: color-mix(in srgb, var(--warning) 20%, transparent); + color: var(--warning); } .result-item--pending .result-status { - background: #f8f9fa; - color: #383d41; + background: var(--surface-1); + color: var(--muted); } .result-duration { font-size: 12px; - color: #666; + color: var(--text-muted); } .result-details { @@ -488,7 +494,7 @@ interface TestResult { } .result-json { - background: #f8f9fa; + background: var(--surface-1); padding: 10px; border-radius: 4px; font-size: 12px; @@ -497,12 +503,13 @@ interface TestResult { margin: 0; white-space: pre-wrap; word-break: break-word; + color: var(--text-main); } .no-results { text-align: center; padding: 40px 20px; - color: #666; + color: var(--text-muted); } .no-results p { @@ -513,7 +520,7 @@ interface TestResult { .sse-events { margin-top: 15px; padding: 15px; - background: #f8f9fa; + background: var(--surface-1); border-radius: 6px; } @@ -521,6 +528,7 @@ interface TestResult { margin: 0 0 10px 0; font-size: 14px; font-weight: 600; + color: var(--text-main); } .events-list { @@ -533,7 +541,7 @@ interface TestResult { gap: 10px; padding: 5px 0; font-size: 12px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--border); } .event-item:last-child { @@ -542,16 +550,17 @@ interface TestResult { .event-type { font-weight: bold; - color: #007bff; + color: var(--primary); } .event-data { flex: 1; font-family: monospace; + color: var(--text-main); } .event-time { - color: #666; + color: var(--text-muted); } `] }) 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 bd60fdf..c30ad39 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 @@ -16,13 +16,14 @@ import { NimbusSidebarComponent } from '../../features/sidebar/nimbus-sidebar.co import { QuickLinksComponent } from '../../features/quick-links/quick-links.component'; import { ScrollableOverlayDirective } from '../../shared/overlay-scrollbar/scrollable-overlay.directive'; import { MarkdownPlaygroundComponent } from '../../features/tests/markdown-playground/markdown-playground.component'; +import { TestsPanelComponent } from '../../features/tests/tests-panel.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, AboutPanelComponent], + imports: [CommonModule, FileExplorerComponent, NoteViewerComponent, AppBottomNavigationComponent, AppSidebarDrawerComponent, AppTocOverlayComponent, SwipeNavDirective, NotesListComponent, NimbusSidebarComponent, QuickLinksComponent, ScrollableOverlayDirective, MarkdownPlaygroundComponent, TestsPanelComponent, ParametersPage, AboutPanelComponent], template: `
@@ -64,6 +65,7 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component' (tagSelected)="onTagSelected($event)" (quickLinkSelected)="onQuickLink($event)" (markdownPlaygroundSelected)="onMarkdownPlaygroundSelected()" + (testsPanelSelected)="onTestsPanelSelected()" (helpPageSelected)="onHelpPageSelected()" (aboutSelected)="onAboutSelected()" /> @@ -127,22 +129,42 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component'
- +
- +
- - + +
- +
Empty
+ +
+
+
Tests
+
+ + +
+
+
@@ -172,7 +194,8 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component'
- + - + +
@@ -257,6 +281,7 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component' (tagSelected)="onTagSelected($event)" (quickLinkSelected)="onQuickLink($event)" (markdownPlaygroundSelected)="onMarkdownPlaygroundSelected()" + (testsPanelSelected)="onTestsPanelSelected()" (helpPageSelected)="onHelpPageSelected()" (aboutSelected)="onAboutSelected()" > @@ -276,6 +301,10 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component'
+ } @else if (activeView === 'tests-panel') { +
+ +
} @else {
@if (selectedNote) { diff --git a/vault/folder-5/file-5.md b/vault/folder-5/file-5.md index ea9e7b3..ab14678 100644 --- a/vault/folder-5/file-5.md +++ b/vault/folder-5/file-5.md @@ -1,22 +1 @@ ---- -titre: file-5 -auteur: Bruno Charest -creation_date: 2025-10-22T13:26:59-04:00 -modification_date: 2025-10-22T13:26:59-04:00 -catégorie: "" -tags: - - configuration - - tag2 - - bruno - - test2 - - tag3 -aliases: [] -status: en-cours -publish: false -favoris: false -template: false -task: false -archive: false -draft: false -private: false ---- +nouveau message !!! \ No newline at end of file diff --git a/vault/folder-5/file-5.md.bak b/vault/folder-5/test-add-properties.md similarity index 54% rename from vault/folder-5/file-5.md.bak rename to vault/folder-5/test-add-properties.md index 547a8a2..321eabb 100644 --- a/vault/folder-5/file-5.md.bak +++ b/vault/folder-5/test-add-properties.md @@ -1,9 +1,10 @@ --- -titre: file-5 +titre: test-add-properties auteur: Bruno Charest -creation_date: 2025-10-22T13:26:59-04:00 -modification_date: 2025-10-22T13:26:59-04:00 +creation_date: 2025-10-23T13:11:50-04:00 +modification_date: 2025-10-23T13:11:50-04:00 catégorie: "" +tags: [] aliases: [] status: en-cours publish: false @@ -13,10 +14,4 @@ task: false archive: false draft: false private: false -tags: - - configuration - - tag2 - - bruno - - test2 - - tag3 --- diff --git a/vault/folder-5/test-add-properties.md.bak b/vault/folder-5/test-add-properties.md.bak new file mode 100644 index 0000000..e69de29 diff --git a/vault/test-file.md b/vault/test-file.md new file mode 100644 index 0000000..cf577a2 --- /dev/null +++ b/vault/test-file.md @@ -0,0 +1,20 @@ +--- +titre: test-file +auteur: Bruno Charest +creation_date: 2025-10-23T13:00:42-04:00 +modification_date: 2025-10-23T13:00:42-04:00 +catégorie: "" +tags: [] +aliases: [] +status: en-cours +publish: false +favoris: false +template: false +task: false +archive: false +draft: false +private: false +--- +# Test File + +This is a test file for API testing. \ No newline at end of file diff --git a/vault/test-file.md.bak b/vault/test-file.md.bak new file mode 100644 index 0000000..1d825a7 --- /dev/null +++ b/vault/test-file.md.bak @@ -0,0 +1,3 @@ +# Test File + +This is a test file for API testing. \ No newline at end of file