RED-9856: wip; save this for future purposes.

apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.html

@@ -0,0 +1,14 @@
+<div [class.full-width]="isExpanded()" class="container">
+    <p><strong [translate]="'revert-manual-changes-dialog.details.original'"></strong></p>
+    <div class="col-span">
+        <p>{{ redaction().value }}</p>
+        <p>{{ redaction().typeLabel }}</p>
+        <p>{{ redaction().legalBasis }}</p>
+    </div>
+    <p><strong [translate]="'revert-manual-changes-dialog.details.title'"></strong></p>
+    <redaction-selected-annotations-table
+        [data]="data()"
+        [columns]="columns"
+        [headerHasBackground]="true"
+    ></redaction-selected-annotations-table>
+</div>

apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.scss

@@ -0,0 +1,48 @@
+:host {
+    width: 100%;
+}
+
+.container {
+    padding: 8px;
+    width: calc(100% - 28px);
+
+    &.full-width {
+        width: 100%;
+    }
+}
+
+p {
+    margin: 4px 0;
+}
+
+.col-span {
+    display: inline-flex;
+    width: calc(100% - 16px);
+
+    p:nth-child(n + 2) {
+        padding-left: 8px;
+    }
+
+    p {
+        flex: 1;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        list-style-position: inside;
+        overflow: hidden;
+
+        padding-right: 8px;
+        line-height: 1.5;
+    }
+
+    p:last-child {
+        padding-right: 0;
+    }
+}
+
+redaction-selected-annotations-table {
+    ::ng-deep .table {
+        padding: 0;
+        width: calc(100% - 16px);
+    }
+}

apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.ts

@@ -0,0 +1,28 @@
+import { Component, computed, input } from '@angular/core';
+import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { SelectedAnnotationsTableComponent, ValueColumn } from '../selected-annotations-table/selected-annotations-table.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'redaction-manual-changes',
+    standalone: true,
+    imports: [SelectedAnnotationsTableComponent, TranslateModule],
+    templateUrl: './manual-changes.component.html',
+    styleUrl: './manual-changes.component.scss',
+})
+export class ManualChangesComponent {
+    readonly redaction = input<AnnotationWrapper>();
+    readonly isExpanded = input<boolean>();
+
+    readonly columns = [{ label: 'Action' }, { label: 'Date' }, { label: 'User' }];
+    readonly data = computed(() =>
+        this.redaction().entry.manualChanges.map(
+            change =>
+                [
+                    { label: change.manualRedactionType },
+                    { label: change.requestedDate, componentType: 'date' },
+                    { label: change.userId, componentType: 'avatar' },
+                ] as ValueColumn[],
+        ),
+    );
+}