feat: add API tests panel to sidebar navigation and UI components

This commit is contained in:
Bruno Charest 2025-10-23 14:02:46 -04:00
parent 69df390f58
commit 7e20098d14
8 changed files with 140 additions and 95 deletions

View File

@ -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
</button>
<button
(click)="onApiTestsPanelClick()"
class="mt-1 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">
API Tests Panel
</button>
</div>
</section>
@ -154,6 +159,7 @@ export class NimbusSidebarComponent {
@Output() tagSelected = new EventEmitter<string>();
@Output() quickLinkSelected = new EventEmitter<string>();
@Output() markdownPlaygroundSelected = new EventEmitter<void>();
@Output() testsPanelSelected = new EventEmitter<void>();
@Output() helpPageSelected = new EventEmitter<void>();
@Output() aboutSelected = new EventEmitter<void>();
@ -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;

View File

@ -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);
}
`]
})

View File

@ -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: `
<div class="relative h-screen flex flex-col bg-card dark:bg-main text-main dark:text-gray-100">
@ -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'
</ng-template>
</div>
<div *ngSwitchCase="'help'" class="p-3">
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onHelpPageSelected()">🆘 <span>Help Page</span></button>
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onHelpPageSelected(); $event.stopPropagation(); hoveredFlyout = null">🆘 <span>Help Page</span></button>
</div>
<div *ngSwitchCase="'about'" class="p-3">
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onAboutSelected()"> <span>About</span></button>
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onAboutSelected(); $event.stopPropagation(); hoveredFlyout = null"> <span>About</span></button>
</div>
<div *ngSwitchCase="'tests'" class="p-3">
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onTestsPanelSelected()">🔬 <span>API Tests Panel</span></button>
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onMarkdownPlaygroundSelected()">📝 <span>Markdown Playground</span></button>
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onTestsPanelSelected(); $event.stopPropagation(); hoveredFlyout = null">🔬 <span>API Tests Panel</span></button>
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onMarkdownPlaygroundSelected(); $event.stopPropagation(); hoveredFlyout = null">📝 <span>Markdown Playground</span></button>
</div>
<div *ngSwitchCase="'playground'" class="p-3">
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onMarkdownPlaygroundSelected()">🧪 <span>Markdown Playground</span></button>
<button type="button" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-surface1 dark:hover:bg-card" (click)="onMarkdownPlaygroundSelected(); $event.stopPropagation(); hoveredFlyout = null">🧪 <span>Markdown Playground</span></button>
</div>
<div *ngSwitchDefault class="p-3 text-sm text-muted">Empty</div>
</ng-container>
</div>
</div>
<!-- Tests section (visible when sidebar is open) -->
<div class="rounded-2xl border border-border/70 bg-card/85 px-3 py-3 shadow-subtle">
<div class="grid grid-cols-3 gap-2 sm:grid-cols-5">
<div class="text-xs font-semibold uppercase tracking-wide text-text-muted mb-1">Tests</div>
<div class="space-y-1">
<button
type="button"
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"
(click)="onMarkdownPlaygroundSelected()">
📝 Markdown Playground
</button>
<button
type="button"
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"
(click)="onTestsPanelSelected()">
🔬 API Tests Panel
</button>
</div>
</div>
</div>
</ng-template>
<!-- Left Resizer -->
@ -172,7 +194,8 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component'
<div class="note-content-area flex-1 overflow-y-auto px-4 py-4 lg:px-8" appScrollableOverlay>
<app-markdown-playground *ngIf="activeView === 'markdown-playground'"></app-markdown-playground>
<app-parameters *ngIf="activeView === 'parameters'"></app-parameters>
<app-note-viewer *ngIf="activeView !== 'markdown-playground' && activeView !== 'parameters'"
<app-tests-panel *ngIf="activeView === 'tests-panel'"></app-tests-panel>
<app-note-viewer *ngIf="activeView !== 'markdown-playground' && activeView !== 'parameters' && activeView !== 'tests-panel'"
[note]="selectedNote || null"
[noteHtmlContent]="renderedNoteContent"
[allNotes]="vault.allNotes()"
@ -239,7 +262,8 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component'
<div [hidden]="mobileNav.activeTab() !== 'page'" class="note-content-area h-full overflow-y-auto px-3 py-4" appScrollableOverlay>
<app-markdown-playground *ngIf="activeView === 'markdown-playground'"></app-markdown-playground>
<app-parameters *ngIf="activeView === 'parameters'"></app-parameters>
<app-note-viewer *ngIf="activeView !== 'markdown-playground' && activeView !== 'parameters'" [note]="selectedNote || null" [noteHtmlContent]="renderedNoteContent" [allNotes]="vault.allNotes()" (noteLinkClicked)="noteSelected.emit($event)" (tagClicked)="onTagSelected($event)" (wikiLinkActivated)="wikiLinkActivated.emit($event)" [fullScreenActive]="noteFullScreen" (fullScreenRequested)="toggleNoteFullScreen()" (legacyRequested)="ui.toggleUIMode()" (parametersRequested)="onParametersOpen()" (showToc)="mobileNav.toggleToc()" (directoryClicked)="onFolderSelected($event)" [tocOpen]="mobileNav.tocOpen()"></app-note-viewer>
<app-tests-panel *ngIf="activeView === 'tests-panel'"></app-tests-panel>
<app-note-viewer *ngIf="activeView !== 'markdown-playground' && activeView !== 'parameters' && activeView !== 'tests-panel'" [note]="selectedNote || null" [noteHtmlContent]="renderedNoteContent" [allNotes]="vault.allNotes()" (noteLinkClicked)="noteSelected.emit($event)" (tagClicked)="onTagSelected($event)" (wikiLinkActivated)="wikiLinkActivated.emit($event)" [fullScreenActive]="noteFullScreen" (fullScreenRequested)="toggleNoteFullScreen()" (legacyRequested)="ui.toggleUIMode()" (parametersRequested)="onParametersOpen()" (showToc)="mobileNav.toggleToc()" (directoryClicked)="onFolderSelected($event)" [tocOpen]="mobileNav.tocOpen()"></app-note-viewer>
</div>
</div>
</div>
@ -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()"
></app-sidebar-drawer>
@ -276,6 +301,10 @@ import { AboutPanelComponent } from '../../features/about/about-panel.component'
<div class="note-content-area h-full px-3 py-3 animate-fadeIn" style="overflow-y: auto !important;" appScrollableOverlay>
<app-markdown-playground></app-markdown-playground>
</div>
} @else if (activeView === 'tests-panel') {
<div class="note-content-area h-full px-3 py-3 animate-fadeIn" style="overflow-y: auto !important;" appScrollableOverlay>
<app-tests-panel></app-tests-panel>
</div>
} @else {
<div class="note-content-area h-full px-3 py-3 animate-fadeIn" style="overflow-y: auto !important;" appScrollableOverlay>
@if (selectedNote) {

View File

@ -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 !!!

View File

@ -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
---

20
vault/test-file.md Normal file
View File

@ -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.

3
vault/test-file.md.bak Normal file
View File

@ -0,0 +1,3 @@
# Test File
This is a test file for API testing.