- Added toggle-able log panel to mods-overview page.

- Log panel visibility preferences are serialized.
- Added option to open log from `profile-verification-modal`.

Author: lVlyke

src/app/components/app-log/app-log.component.html

@@ -0,0 +1,15 @@
+
+@for (logLine of logHistory; track $index) {
+    <div class="log-line" [attr.level]="logLine.level">
+        <span class="log-time">{{ logLine.timestamp | date:"mediumTime" }}</span>
+        <span class="log-level">[{{ logLine.level | titlecase }}]</span>
+        <span class="log-icon">
+            @if (logLine.level === "error" || logLine.level === "warn") {
+                <mat-icon>
+                    {{ logLine.level === "error" ? "cancel" : "warning" }}
+                </mat-icon>
+            }
+        </span>
+        <span class="log-text">{{ logLine.text }}</span>
+    </div>
+}

src/app/components/app-log/app-log.component.scss

@@ -0,0 +1,62 @@
+@use "../../../styles/mixins/" as mixins;
+
+:host {
+    font-family: monospace;
+
+    .log-line {
+        $text-indent: 1.5rem;
+        $text-padding: 0.5rem;
+
+        padding: $text-padding;
+        padding-left: $text-indent + $text-padding;
+        text-indent: -$text-indent;
+
+        &:nth-child(odd) {
+            background-color: rgba(#000, 0.1);
+        }
+
+        &[level="warn"] {
+            background-color: rgba(#ff0, 0.1);
+
+            .log-icon {
+                color: rgba(#ff0, 0.25);
+            }
+        }
+
+        &[level="error"] {
+            background-color: rgba(#f00, 0.1);
+
+            .log-icon {
+                color: rgba(#f00, 0.25);
+            }
+        }
+
+        .log-level {
+            font-weight: 600;
+            font-size: 1.1em;
+            margin-right: 0.5rem;
+        }
+
+        .log-time {
+            margin-right: 0.5rem;
+            opacity: 0.8;
+        }
+
+        .log-icon {
+            display: inline-flex;
+            align-items: center;
+            text-indent: 0;
+            margin-right: 0.5rem;
+            position: relative;
+            top: 0.25rem;
+
+            &:empty {
+                display: none;
+            }
+
+            mat-icon {
+                @include mixins.mat-icon-size(1.25rem);
+            }
+        }
+    }
+}

src/app/components/app-log/app-log.component.ts

@@ -0,0 +1,52 @@
+import _ from "lodash";
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core";
+import { ComponentState, OnDestroy } from "@lithiumjs/angular";
+import { Observable } from "rxjs";
+import { Hook, LogLevel, LogMessage } from "electron-log";
+import { BaseComponent } from "../../core/base-component";
+import { log } from "../../util/logger";
+
+interface LogEntry {
+    level: LogLevel;
+    text: string;
+    timestamp: Date
+}
+
+@Component({
+    selector: "app-log",
+    templateUrl: "./app-log.component.html",
+    styleUrls: ["./app-log.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        ComponentState.create(AppLogComponent),
+    ]
+})
+export class AppLogComponent extends BaseComponent {
+
+    protected readonly logHistory: LogEntry[] = [];
+
+    private readonly logHook: Hook = (message: LogMessage): LogMessage => {
+        this.logHistory.push({
+            level: message.level,
+            text: this.formatLogData(message.data),
+            timestamp: message.date
+        });
+        this.cdRef.markForCheck();
+        return message;
+    };
+
+    @OnDestroy()
+    private readonly onDestroy$!: Observable<void>;
+
+    constructor(private readonly cdRef: ChangeDetectorRef) {
+        super({ cdRef });
+
+        log.hooks.push(this.logHook);
+
+        this.onDestroy$.subscribe(() => _.remove<Hook>(log.hooks, this.logHook));
+    }
+
+    private formatLogData(logData?: any[]): string {
+        return logData?.map(data => typeof data === "object" ? JSON.stringify(data) : data.toString()).join(" ") ?? "";
+    }
+}

src/app/components/app-log/app-log.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MatIconModule } from "@angular/material/icon";
+import { AppLogComponent } from "./app-log.component";
+
+@NgModule({
+    declarations: [
+        AppLogComponent
+    ],
+    imports: [
+        CommonModule,
+
+        MatIconModule
+    ],
+    exports: [
+        AppLogComponent
+    ]
+})
+export class AppLogComponentModule { }

src/app/components/app-log/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-log.component";
+export * from "./app-log.module";

src/app/modals/profile-verification-results/profile-verification-results.modal.html

@@ -14,6 +14,12 @@
 
 <span matSnackBarActions>
     @if (errors.length > 0) {
+        @if (!(isLogPanelEnabled$ | async)) {
+            <button mat-button matSnackBarAction (click)="appManager.toggleLogPanel(); snackBarRef.dismissWithAction()">
+                Log
+            </button>
+        }
+
         <button mat-button matSnackBarAction (click)="snackBarRef.dismissWithAction()">
             Close
         </button>

src/app/modals/profile-verification-results/profile-verification-results.modal.ts

@@ -2,10 +2,14 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from "@
 import { MatButtonModule } from "@angular/material/button";
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule, MatSnackBarRef } from "@angular/material/snack-bar";
 import { CommonModule } from "@angular/common";
+import { Store } from "@ngxs/store";
+import { Observable } from "rxjs";
+import { AppState } from "../../state";
 import { log } from "../../util/logger";
+import { LangUtils } from "../../util/lang-utils";
 import { BaseComponent } from "../../core/base-component";
 import { AppProfile } from "../../models/app-profile";
-import { LangUtils } from "../../util/lang-utils";
+import { AppStateBehaviorManager } from "../../services/app-state-behavior-manager";
 
 @Component({
     templateUrl: "./profile-verification-results.modal.html",
@@ -58,15 +62,20 @@ export class AppProfileVerificationResultsModal extends BaseComponent {
 
     private static readonly BLACKLISTED_ERROR_KEYS: Array<string> = [];
 
+    public readonly isLogPanelEnabled$: Observable<boolean>;
+
     protected readonly errors: string[];
 
     constructor(
         cdRef: ChangeDetectorRef,
+        store: Store,
         protected readonly snackBarRef: MatSnackBarRef<AppProfileVerificationResultsModal>,
+        protected readonly appManager: AppStateBehaviorManager,
         @Inject(MAT_SNACK_BAR_DATA) verificationResults: AppProfile.VerificationResultRecord<string>
     ) {
         super({ cdRef });
 
+        this.isLogPanelEnabled$ = store.select(AppState.isLogPanelEnabled);
         this.errors = this.collectErrors(verificationResults);
     }
 
@@ -76,7 +85,7 @@ export class AppProfileVerificationResultsModal extends BaseComponent {
                 const errorText = this.mapVerificationResultToError(propertyKey, verificationResult);
 
                 if (errorText && !errors.includes(errorText)) {
-                    log.error(`Profile verification error:`, propertyKey, errorText, verificationResult);
+                    log.error(`Profile verification error:`, `"${propertyKey}"`, errorText);
 
                     if (!logOnly) {
                         errors.push(errorText);

src/app/models/app-data.ts

@@ -13,6 +13,7 @@ export interface AppData {
     modListColumns?: string[];
     deployInProgress?: boolean;
     steamCompatDataRoot?: string;
+    logPanelEnabled?: boolean;
 }
 
 export namespace AppData {

src/app/models/app-message.ts

@@ -193,6 +193,10 @@ export namespace AppMessage {
         };
     }
 
+    export interface ToggleLogPanel extends Base {
+        id: `${Prefix}:toggleLogPanel`;
+    }
+
     export interface CheckLinkSupported extends Base {
         id: `${Prefix}:checkLinkSupported`;
         data: {
@@ -234,6 +238,7 @@ export namespace AppMessage {
                            | FindBestProfileDefaults
                            | ShowAboutInfo
                            | ToggleModListColumn
+                           | ToggleLogPanel
                            | CheckLinkSupported
                            | ResolveResourceUrl;
 
@@ -616,6 +621,7 @@ export namespace AppMessage {
         "app:findBestProfileDefaults",
         "app:showAboutInfo",
         "app:toggleModListColumn",
+        "app:toggleLogPanel",
         "app:checkLinkSupported",
         "app:resolveResourceUrl",
 

src/app/models/app-settings-user-cfg.ts

@@ -7,4 +7,5 @@ export interface AppSettingsUserCfg {
     modListColumns?: string[];
     verifyProfileOnStart: boolean;
     steamCompatDataRoot?: string;
+    logPanelEnabled?: boolean;
 }