233 lines
8.3 KiB
HTML
233 lines
8.3 KiB
HTML
@if (debugging.enabled()) {
|
|
@if (showLauncher()) {
|
|
@if (launcherVariant() === 'floating') {
|
|
<button
|
|
type="button"
|
|
class="fixed bottom-4 right-4 z-[80] inline-flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-lg transition-colors hover:bg-secondary"
|
|
[class.bg-primary]="isOpen()"
|
|
[class.text-primary-foreground]="isOpen()"
|
|
[class.border-primary/50]="isOpen()"
|
|
(click)="toggleConsole()"
|
|
[attr.aria-expanded]="isOpen()"
|
|
aria-label="Toggle debug console"
|
|
title="Toggle debug console"
|
|
>
|
|
<ng-icon
|
|
name="lucideBug"
|
|
class="h-5 w-5"
|
|
/>
|
|
|
|
@if (badgeCount() > 0) {
|
|
<span
|
|
class="absolute -right-1 -top-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold shadow-sm"
|
|
[class.bg-destructive]="hasErrors()"
|
|
[class.text-destructive-foreground]="hasErrors()"
|
|
[class.bg-secondary]="!hasErrors()"
|
|
[class.text-foreground]="!hasErrors()"
|
|
>
|
|
{{ formatBadgeCount(badgeCount()) }}
|
|
</span>
|
|
}
|
|
</button>
|
|
} @else if (launcherVariant() === 'compact') {
|
|
<button
|
|
type="button"
|
|
class="relative inline-flex h-7 w-7 items-center justify-center rounded-lg transition-opacity hover:opacity-90"
|
|
[class.bg-primary/20]="isOpen()"
|
|
[class.text-primary]="isOpen()"
|
|
[class.bg-secondary]="!isOpen()"
|
|
[class.text-foreground]="!isOpen()"
|
|
(click)="toggleConsole()"
|
|
[attr.aria-expanded]="isOpen()"
|
|
aria-label="Toggle debug console"
|
|
title="Toggle debug console"
|
|
>
|
|
<ng-icon
|
|
name="lucideBug"
|
|
class="h-4 w-4"
|
|
/>
|
|
|
|
@if (badgeCount() > 0) {
|
|
<span
|
|
class="absolute -right-1 -top-1 rounded-full px-1 py-0 text-[9px] font-semibold leading-tight shadow-sm"
|
|
[class.bg-destructive]="hasErrors()"
|
|
[class.text-destructive-foreground]="hasErrors()"
|
|
[class.bg-secondary]="!hasErrors()"
|
|
[class.text-foreground]="!hasErrors()"
|
|
>
|
|
{{ formatBadgeCount(badgeCount()) }}
|
|
</span>
|
|
}
|
|
</button>
|
|
} @else {
|
|
<button
|
|
type="button"
|
|
class="relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:bg-secondary"
|
|
[class.bg-secondary]="isOpen()"
|
|
[class.text-foreground]="isOpen()"
|
|
[class.text-muted-foreground]="!isOpen()"
|
|
(click)="toggleConsole()"
|
|
[attr.aria-expanded]="isOpen()"
|
|
aria-label="Toggle debug console"
|
|
title="Toggle debug console"
|
|
>
|
|
<ng-icon
|
|
name="lucideBug"
|
|
class="h-4 w-4"
|
|
/>
|
|
|
|
@if (badgeCount() > 0) {
|
|
<span
|
|
class="absolute -right-1 -top-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none shadow-sm"
|
|
[class.bg-destructive]="hasErrors()"
|
|
[class.text-destructive-foreground]="hasErrors()"
|
|
[class.bg-secondary]="!hasErrors()"
|
|
[class.text-foreground]="!hasErrors()"
|
|
>
|
|
{{ formatBadgeCount(badgeCount()) }}
|
|
</span>
|
|
}
|
|
</button>
|
|
}
|
|
}
|
|
|
|
@if (showPanel() && isOpen()) {
|
|
<div class="pointer-events-none fixed inset-0 z-[79]">
|
|
<section
|
|
class="pointer-events-auto absolute flex min-h-0 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl"
|
|
[class.bottom-20]="!detached()"
|
|
[class.right-4]="!detached()"
|
|
[style.height.px]="panelHeight()"
|
|
[style.width.px]="panelWidth()"
|
|
[style.left.px]="detached() ? panelLeft() : null"
|
|
[style.top.px]="detached() ? panelTop() : null"
|
|
>
|
|
<!-- Left resize bar -->
|
|
<button
|
|
type="button"
|
|
class="group absolute inset-y-0 left-0 z-[1] w-3 cursor-col-resize bg-transparent"
|
|
(mousedown)="startLeftResize($event)"
|
|
aria-label="Resize debug console width"
|
|
>
|
|
<span
|
|
class="absolute left-1/2 top-1/2 h-20 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border/60 transition-colors group-hover:bg-primary/60"
|
|
></span>
|
|
</button>
|
|
|
|
<!-- Right resize bar -->
|
|
<button
|
|
type="button"
|
|
class="group absolute inset-y-0 right-0 z-[1] w-3 cursor-col-resize bg-transparent"
|
|
(mousedown)="startRightResize($event)"
|
|
aria-label="Resize debug console width from right"
|
|
>
|
|
<span
|
|
class="absolute left-1/2 top-1/2 h-20 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border/60 transition-colors group-hover:bg-primary/60"
|
|
></span>
|
|
</button>
|
|
|
|
<!-- Top resize bar -->
|
|
<button
|
|
type="button"
|
|
class="group relative h-3 w-full cursor-row-resize bg-transparent"
|
|
(mousedown)="startTopResize($event)"
|
|
aria-label="Resize debug console"
|
|
>
|
|
<span
|
|
class="absolute left-1/2 top-1/2 h-1 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border transition-colors group-hover:bg-primary/50"
|
|
></span>
|
|
</button>
|
|
|
|
@if (detached()) {
|
|
<button
|
|
type="button"
|
|
class="flex h-8 w-full cursor-move items-center justify-center border-b border-border bg-background/70 px-4 text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground transition-colors hover:bg-background"
|
|
(mousedown)="startDrag($event)"
|
|
aria-label="Move debug console"
|
|
>
|
|
Drag to move
|
|
</button>
|
|
}
|
|
|
|
<app-debug-console-toolbar
|
|
[activeTab]="activeTab()"
|
|
[detached]="detached()"
|
|
[searchTerm]="searchTerm()"
|
|
[selectedSource]="selectedSource()"
|
|
[sourceOptions]="sourceOptions()"
|
|
[levelState]="levelState()"
|
|
[levelCounts]="levelCounts()"
|
|
[visibleCount]="visibleCount()"
|
|
[autoScroll]="autoScroll()"
|
|
[networkSummary]="networkSummary()"
|
|
(activeTabChange)="setActiveTab($event)"
|
|
(detachToggled)="toggleDetached()"
|
|
(searchTermChange)="updateSearchTerm($event)"
|
|
(selectedSourceChange)="updateSelectedSource($event)"
|
|
(levelToggled)="toggleLevel($event)"
|
|
(autoScrollToggled)="toggleAutoScroll()"
|
|
(clearRequested)="clearLogs()"
|
|
(closeRequested)="closeConsole()"
|
|
(exportLogsRequested)="exportLogs($event)"
|
|
(exportNetworkRequested)="exportNetwork($event)"
|
|
/>
|
|
|
|
@if (activeTab() === 'logs') {
|
|
<app-debug-console-entry-list
|
|
class="min-h-0 flex-1 overflow-hidden"
|
|
[entries]="filteredEntries()"
|
|
[autoScroll]="autoScroll()"
|
|
/>
|
|
} @else {
|
|
<app-debug-console-network-map
|
|
class="min-h-0 flex-1 overflow-hidden"
|
|
[snapshot]="networkSnapshot()"
|
|
/>
|
|
}
|
|
|
|
<!-- Bottom resize bar -->
|
|
<button
|
|
type="button"
|
|
class="group relative h-3 w-full cursor-row-resize bg-transparent"
|
|
(mousedown)="startBottomResize($event)"
|
|
aria-label="Resize debug console height from bottom"
|
|
>
|
|
<span
|
|
class="absolute left-1/2 top-1/2 h-1 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border transition-colors group-hover:bg-primary/50"
|
|
></span>
|
|
</button>
|
|
|
|
<!-- Bottom-right corner drag handle -->
|
|
<button
|
|
type="button"
|
|
class="group absolute bottom-0 right-0 z-[2] flex h-5 w-5 cursor-nwse-resize items-center justify-center bg-transparent"
|
|
(mousedown)="startCornerResize($event)"
|
|
aria-label="Resize debug console from corner"
|
|
>
|
|
<svg
|
|
class="h-3 w-3 text-border/80 transition-colors group-hover:text-primary/70"
|
|
viewBox="0 0 10 10"
|
|
fill="currentColor"
|
|
>
|
|
<circle
|
|
cx="8"
|
|
cy="8"
|
|
r="1.2"
|
|
/>
|
|
<circle
|
|
cx="4"
|
|
cy="8"
|
|
r="1.2"
|
|
/>
|
|
<circle
|
|
cx="8"
|
|
cy="4"
|
|
r="1.2"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
</div>
|
|
}
|
|
}
|