Rename comments --> notes

src-ui/src/app/app.module.ts

@@ -70,7 +70,7 @@ import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
 import { ColorSliderModule } from 'ngx-color/slider'
 import { ColorComponent } from './components/common/input/color/color.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DocumentCommentsComponent } from './components/document-comments/document-comments.component'
+import { DocumentNotesComponent } from './components/document-notes/document-notes.component'
 import { PermissionsGuard } from './guards/permissions.guard'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
 import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
@@ -196,7 +196,7 @@ function initializeApp(settings: SettingsService) {
     DateComponent,
     ColorComponent,
     DocumentAsnComponent,
-    DocumentCommentsComponent,
+    DocumentNotesComponent,
     TasksComponent,
     UserEditDialogComponent,
     GroupEditDialogComponent,

src-ui/src/app/components/document-comments/document-comments.component.ts

@@ -1,99 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
-import { DocumentCommentsService } from 'src/app/services/rest/document-comments.service'
-import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
-import { FormControl, FormGroup } from '@angular/forms'
-import { first } from 'rxjs/operators'
-import { ToastService } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
-
-@Component({
-  selector: 'app-document-comments',
-  templateUrl: './document-comments.component.html',
-  styleUrls: ['./document-comments.component.scss'],
-})
-export class DocumentCommentsComponent extends ComponentWithPermissions {
-  commentForm: FormGroup = new FormGroup({
-    newComment: new FormControl(''),
-  })
-
-  networkActive = false
-  newCommentError: boolean = false
-
-  @Input()
-  documentId: number
-
-  @Input()
-  comments: PaperlessDocumentComment[] = []
-
-  @Output()
-  updated: EventEmitter<PaperlessDocumentComment[]> = new EventEmitter()
-
-  constructor(
-    private commentsService: DocumentCommentsService,
-    private toastService: ToastService
-  ) {
-    super()
-  }
-
-  addComment() {
-    const comment: string = this.commentForm
-      .get('newComment')
-      .value.toString()
-      .trim()
-    if (comment.length == 0) {
-      this.newCommentError = true
-      return
-    }
-    this.newCommentError = false
-    this.networkActive = true
-    this.commentsService.addComment(this.documentId, comment).subscribe({
-      next: (result) => {
-        this.comments = result
-        this.commentForm.get('newComment').reset()
-        this.networkActive = false
-        this.updated.emit(this.comments)
-      },
-      error: (e) => {
-        this.networkActive = false
-        this.toastService.showError(
-          $localize`Error saving comment: ${e.toString()}`
-        )
-      },
-    })
-  }
-
-  deleteComment(commentId: number) {
-    this.commentsService.deleteComment(this.documentId, commentId).subscribe({
-      next: (result) => {
-        this.comments = result
-        this.networkActive = false
-        this.updated.emit(this.comments)
-      },
-      error: (e) => {
-        this.networkActive = false
-        this.toastService.showError(
-          $localize`Error deleting comment: ${e.toString()}`
-        )
-      },
-    })
-  }
-
-  displayName(comment: PaperlessDocumentComment): string {
-    if (!comment.user) return ''
-    let nameComponents = []
-    if (comment.user.first_name) nameComponents.unshift(comment.user.first_name)
-    if (comment.user.last_name) nameComponents.unshift(comment.user.last_name)
-    if (comment.user.username) {
-      if (nameComponents.length > 0)
-        nameComponents.push(`(${comment.user.username})`)
-      else nameComponents.push(comment.user.username)
-    }
-    return nameComponents.join(' ')
-  }
-
-  commentFormKeydown(event: KeyboardEvent) {
-    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-      this.addComment()
-    }
-  }
-}

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -171,10 +171,10 @@
                     </ng-template>
                 </li>
 
-                <li [ngbNavItem]="DocumentDetailNavIDs.Comments" *ngIf="commentsEnabled">
-                    <a ngbNavLink i18n>Comments <span *ngIf="document?.comments.length" class="badge text-bg-secondary ms-1">{{document.comments.length}}</span></a>
+                <li [ngbNavItem]="DocumentDetailNavIDs.Notes" *ngIf="notesEnabled">
+                    <a ngbNavLink i18n>Notes <span *ngIf="document?.notes.length" class="badge text-bg-secondary ms-1">{{document.notes.length}}</span></a>
                     <ng-template ngbNavContent>
-                        <app-document-comments [documentId]="documentId" [comments]="document?.comments" (updated)="commentsUpdated($event)"></app-document-comments>
+                        <app-document-notes [documentId]="documentId" [notes]="document?.notes" (updated)="notesUpdated($event)"></app-document-notes>
                     </ng-template>
                 </li>
 

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -42,14 +42,14 @@ import {
 } from 'src/app/services/permissions.service'
 import { PaperlessUser } from 'src/app/data/paperless-user'
 import { UserService } from 'src/app/services/rest/user.service'
-import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
+import { PaperlessDocumentNote } from 'src/app/data/paperless-document-note'
 
 enum DocumentDetailNavIDs {
   Details = 1,
   Content = 2,
   Metadata = 3,
   Preview = 4,
-  Comments = 5,
+  Notes = 5,
   Permissions = 6,
 }
 
@@ -658,9 +658,9 @@ export class DocumentDetailComponent
     }
   }
 
-  get commentsEnabled(): boolean {
+  get notesEnabled(): boolean {
     return (
-      this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED) &&
+      this.settings.get(SETTINGS_KEYS.NOTES_ENABLED) &&
       this.permissionsService.currentUserCan(
         PermissionAction.View,
         PermissionType.Document
@@ -668,8 +668,8 @@ export class DocumentDetailComponent
     )
   }
 
-  commentsUpdated(comments: PaperlessDocumentComment[]) {
-    this.document.comments = comments
+  notesUpdated(notes: PaperlessDocumentNote[]) {
+    this.document.notes = notes
     this.openDocumentService.refreshDocument(this.documentId)
   }
 

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -26,7 +26,7 @@
         </div>
         <p class="card-text">
           <span *ngIf="document.__search_hit__ && document.__search_hit__.highlights" [innerHtml]="document.__search_hit__.highlights"></span>
-          <span *ngFor="let highlight of searchCommentHighlights" class="d-block">
+          <span *ngFor="let highlight of searchNoteHighlights" class="d-block">
             <svg width="1em" height="1em" fill="currentColor" class="me-2">
               <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
             </svg>
@@ -67,11 +67,11 @@
 
 
           <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
-            <button routerLink="/documents/{{document.id}}/comments" *ngIf="document.comments.length" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="View comments" i18n-title>
+            <button *ngIf="notesEnabled && document.notes.length" routerLink="/documents/{{document.id}}/notes" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="View notes" i18n-title>
               <svg class="metadata-icon me-2 text-muted" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
               </svg>
-              <small i18n>{{document.comments.length}} Comments</small>
+              <small i18n>{{document.notes.length}} Notes</small>
             </button>
             <button *ngIf="document.document_type" type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by document type" i18n-title
              (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -73,16 +73,14 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
     }
   }
 
-  get searchCommentHighlights() {
+  get searchNoteHighlights() {
     let highlights = []
     if (
       this.document['__search_hit__'] &&
-      this.document['__search_hit__'].comment_highlights
+      this.document['__search_hit__'].note_highlights
     ) {
-      // only show comments with a match
-      highlights = (
-        this.document['__search_hit__'].comment_highlights as string
-      )
+      // only show notes with a match
+      highlights = (this.document['__search_hit__'].note_highlights as string)
         .split(',')
         .filter((higlight) => higlight.includes('<span'))
     }
@@ -136,4 +134,8 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
       (this.document.content.length > 500 ? '...' : '')
     )
   }
+
+  get notesEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
+  }
 }

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -13,20 +13,20 @@
       <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6">
         <app-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Toggle tag filter" i18n-linkTitle></app-tag>
         <div *ngIf="moreTags">
-          <span class="badge badge-secondary">+ {{moreTags}}</span>
+          <span class="badge text-dark">+ {{moreTags}}</span>
         </div>
       </div>
     </div>
 
-    <a routerLink="/documents/{{document.id}}/comments" *ngIf="document.comments.length" class="document-card-comments py-2 px-1">
+    <a *ngIf="notesEnabled && document.notes.length" routerLink="/documents/{{document.id}}/notes" class="document-card-notes py-2 px-1">
       <span class="badge rounded-pill bg-light border text-primary">
       <svg class="metadata-icon ms-1 me-1" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
       </svg>
-      {{document.comments.length}}</span>
+      {{document.notes.length}}</span>
     </a>
 
-    <div class="card-body p-2">
+    <div class="card-body bg-light p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">
           <a title="Toggle correspondent filter" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>:

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -34,10 +34,10 @@
   display: block;
 }
 
-.document-card-comments {
+.document-card-notes {
   position: absolute;
   right: 0;
-  bottom: 170px;
+  top: 142px;
 }
 
 .card-selected {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -74,7 +74,7 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
   }
 
   getTagsLimited$() {
-    const limit = this.document.comments.length > 0 ? 6 : 7
+    const limit = this.document.notes.length > 0 ? 6 : 7
     return this.document.tags$.pipe(
       map((tags) => {
         if (tags.length > limit) {
@@ -111,4 +111,8 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
   mouseLeaveCard() {
     this.popover.close()
   }
+
+  get notesEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
+  }
 }

src-ui/src/app/components/document-list/document-list.component.html

@@ -139,12 +139,12 @@
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Title</th>
-      <th class="d-none d-xl-table-cell"
-        appSortable="num_comments"
+      <th *ngIf="notesEnabled" class="d-none d-xl-table-cell"
+        appSortable="num_notes"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
-        i18n>Comments</th>
+        i18n>Notes</th>
       <th class="d-none d-xl-table-cell"
         appSortable="document_type__name"
         [currentSortField]="list.sortField"
@@ -190,13 +190,13 @@
           <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
           <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
         </td>
-        <td class="d-none d-xl-table-cell">
-          <a routerLink="/documents/{{d.id}}/comments" *ngIf="d.comments.length" class="btn btn-sm p-0">
+        <td *ngIf="notesEnabled" class="d-none d-xl-table-cell">
+          <a *ngIf="d.notes.length" routerLink="/documents/{{d.id}}/notes" class="btn btn-sm p-0">
             <span class="badge rounded-pill bg-light border text-primary">
             <svg class="metadata-icon ms-1 me-1" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
             </svg>
-            {{d.comments.length}}</span>
+            {{d.notes.length}}</span>
           </a>
         </td>
         <td class="d-none d-xl-table-cell">

src-ui/src/app/components/document-list/document-list.component.ts

@@ -17,6 +17,7 @@ import {
 import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import {
   SortableDirective,
   SortEvent,
@@ -29,6 +30,7 @@ import {
   DOCUMENT_SORT_FIELDS_FULLTEXT,
 } from 'src/app/services/rest/document.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import { FilterEditorComponent } from './filter-editor/filter-editor.component'
@@ -51,7 +53,8 @@ export class DocumentListComponent
     private toastService: ToastService,
     private modalService: NgbModal,
     private consumerStatusService: ConsumerStatusService,
-    public openDocumentsService: OpenDocumentsService
+    public openDocumentsService: OpenDocumentsService,
+    private settingsService: SettingsService
   ) {
     super()
   }
@@ -289,4 +292,8 @@ export class DocumentListComponent
   trackByDocumentId(index, item: PaperlessDocument) {
     return item.id
   }
+
+  get notesEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
+  }
 }

src-ui/src/app/components/document-notes/document-notes.component.html

@@ -1,28 +1,28 @@
-<div *ngIf="comments">
-    <form [formGroup]="commentForm" class="needs-validation mt-3" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Comment }" novalidate>
+<div *ngIf="notes">
+    <form [formGroup]="noteForm" class="needs-validation mt-3" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Note }" novalidate>
         <div class="form-group">
-            <textarea class="form-control form-control-sm" [class.is-invalid]="newCommentError" rows="3" formControlName="newComment" placeholder="Enter comment" i18n-placeholder (keydown)="commentFormKeydown($event)" required></textarea>
+            <textarea class="form-control form-control-sm" [class.is-invalid]="newNoteError" rows="3" formControlName="newNote" placeholder="Enter note" i18n-placeholder (keydown)="noteFormKeydown($event)" required></textarea>
             <div class="invalid-feedback" i18n>
-                Please enter a comment.
+                Please enter a note.
             </div>
         </div>
         <div class="form-group mt-2 d-flex justify-content-end align-items-center">
             <div *ngIf="networkActive" class="spinner-border spinner-border-sm fw-normal me-auto" role="status"></div>
-            <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
+            <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive" (click)="addNote()" i18n>Add note</button>
         </div>
     </form>
     <hr>
-    <div *ngFor="let comment of comments" class="card border mb-3">
+    <div *ngFor="let note of notes" class="card border mb-3">
         <div class="card-body text-dark">
-            <p class="card-text">{{comment.comment}}</p>
+            <p class="card-text">{{note.note}}</p>
         </div>
         <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
-            <span>{{displayName(comment)}} - {{ comment.created | customDate}}</span>
-            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete comment" i18n-title (click)="deleteComment(comment.id)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Comment }">
+            <span>{{displayName(note)}} - {{ note.created | customDate}}</span>
+            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
                 <svg width="13" height="13" fill="currentColor">
                     <use xlink:href="assets/bootstrap-icons.svg#trash" />
                 </svg>
-                <span class="visually-hidden" i18n>Delete comment</span>
+                <span class="visually-hidden" i18n>Delete note</span>
             </button>
         </div>
     </div>

src-ui/src/app/components/document-notes/document-notes.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { DocumentNotesService } from 'src/app/services/rest/document-notes.service'
+import { PaperlessDocumentNote } from 'src/app/data/paperless-document-note'
+import { FormControl, FormGroup } from '@angular/forms'
+import { first } from 'rxjs/operators'
+import { ToastService } from 'src/app/services/toast.service'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { UserService } from 'src/app/services/rest/user.service'
+import { PaperlessUser } from 'src/app/data/paperless-user'
+
+@Component({
+  selector: 'app-document-notes',
+  templateUrl: './document-notes.component.html',
+  styleUrls: ['./document-notes.component.scss'],
+})
+export class DocumentNotesComponent extends ComponentWithPermissions {
+  noteForm: FormGroup = new FormGroup({
+    newNote: new FormControl(''),
+  })
+
+  networkActive = false
+  newNoteError: boolean = false
+
+  @Input()
+  documentId: number
+
+  @Input()
+  notes: PaperlessDocumentNote[] = []
+
+  @Output()
+  updated: EventEmitter<PaperlessDocumentNote[]> = new EventEmitter()
+  users: PaperlessUser[]
+
+  constructor(
+    private notesService: DocumentNotesService,
+    private toastService: ToastService,
+    private usersService: UserService
+  ) {
+    super()
+    this.usersService.listAll().subscribe({
+      next: (users) => {
+        this.users = users.results
+      },
+    })
+  }
+
+  addNote() {
+    const note: string = this.noteForm.get('newNote').value.toString().trim()
+    if (note.length == 0) {
+      this.newNoteError = true
+      return
+    }
+    this.newNoteError = false
+    this.networkActive = true
+    this.notesService.addNote(this.documentId, note).subscribe({
+      next: (result) => {
+        this.notes = result
+        this.noteForm.get('newNote').reset()
+        this.networkActive = false
+        this.updated.emit(this.notes)
+      },
+      error: (e) => {
+        this.networkActive = false
+        this.toastService.showError(
+          $localize`Error saving note: ${e.toString()}`
+        )
+      },
+    })
+  }
+
+  deleteNote(noteId: number) {
+    this.notesService.deleteNote(this.documentId, noteId).subscribe({
+      next: (result) => {
+        this.notes = result
+        this.networkActive = false
+        this.updated.emit(this.notes)
+      },
+      error: (e) => {
+        this.networkActive = false
+        this.toastService.showError(
+          $localize`Error deleting note: ${e.toString()}`
+        )
+      },
+    })
+  }
+
+  displayName(note: PaperlessDocumentNote): string {
+    if (!note.user) return ''
+    const user = this.users.find((u) => u.id === note.user)
+    if (!user) return ''
+    const nameComponents = []
+    if (user.first_name) nameComponents.unshift(user.first_name)
+    if (user.last_name) nameComponents.unshift(user.last_name)
+    if (user.username) {
+      if (nameComponents.length > 0) nameComponents.push(`(${user.username})`)
+      else nameComponents.push(user.username)
+    }
+    return nameComponents.join(' ')
+  }
+
+  noteFormKeydown(event: KeyboardEvent) {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      this.addNote()
+    }
+  }
+}

src-ui/src/app/components/manage/settings/settings.component.html

@@ -156,11 +156,11 @@
           </div>
         </div>
 
-        <h4 class="mt-4" i18n>Comments</h4>
+        <h4 class="mt-4" i18n>Notes</h4>
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <app-input-check i18n-title title="Enable comments" formControlName="commentsEnabled"></app-input-check>
+            <app-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></app-input-check>
           </div>
         </div>
 

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -85,7 +85,7 @@ export class SettingsComponent
     displayLanguage: new FormControl(null),
     dateLocale: new FormControl(null),
     dateFormat: new FormControl(null),
-    commentsEnabled: new FormControl(null),
+    notesEnabled: new FormControl(null),
     updateCheckingEnabled: new FormControl(null),
 
     notificationsConsumerNewDocument: new FormControl(null),
@@ -196,7 +196,7 @@ export class SettingsComponent
       displayLanguage: this.settings.getLanguage(),
       dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
       dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
-      commentsEnabled: this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED),
+      notesEnabled: this.settings.get(SETTINGS_KEYS.NOTES_ENABLED),
       updateCheckingEnabled: this.settings.get(
         SETTINGS_KEYS.UPDATE_CHECKING_ENABLED
       ),
@@ -552,8 +552,8 @@ export class SettingsComponent
       this.settingsForm.value.notificationsConsumerSuppressOnDashboard
     )
     this.settings.set(
-      SETTINGS_KEYS.COMMENTS_ENABLED,
-      this.settingsForm.value.commentsEnabled
+      SETTINGS_KEYS.NOTES_ENABLED,
+      this.settingsForm.value.notesEnabled
     )
     this.settings.set(
       SETTINGS_KEYS.UPDATE_CHECKING_ENABLED,

src-ui/src/app/data/paperless-document-comment.ts

@@ -1,8 +0,0 @@
-import { ObjectWithId } from './object-with-id'
-import { PaperlessUser } from './paperless-user'
-
-export interface PaperlessDocumentComment extends ObjectWithId {
-  created?: Date
-  comment?: string
-  user?: PaperlessUser
-}

src-ui/src/app/data/paperless-document-note.ts

@@ -0,0 +1,7 @@
+import { ObjectWithId } from './object-with-id'
+
+export interface PaperlessDocumentNote extends ObjectWithId {
+  created?: Date
+  note?: string
+  user?: number // PaperlessUser
+}

src-ui/src/app/data/paperless-document.ts

@@ -4,14 +4,14 @@ import { PaperlessDocumentType } from './paperless-document-type'
 import { Observable } from 'rxjs'
 import { PaperlessStoragePath } from './paperless-storage-path'
 import { ObjectWithPermissions } from './object-with-permissions'
-import { PaperlessDocumentComment } from './paperless-document-comment'
+import { PaperlessDocumentNote } from './paperless-document-note'
 
 export interface SearchHit {
   score?: number
   rank?: number
 
   highlights?: string
-  comment_highlights?: string
+  note_highlights?: string
 }
 
 export interface PaperlessDocument extends ObjectWithPermissions {
@@ -55,7 +55,7 @@ export interface PaperlessDocument extends ObjectWithPermissions {
 
   archive_serial_number?: number
 
-  comments?: PaperlessDocumentComment[]
+  notes?: PaperlessDocumentNote[]
 
   __search_hit__?: SearchHit
 }

src-ui/src/app/data/paperless-uisettings.ts

@@ -34,7 +34,7 @@ export const SETTINGS_KEYS = {
     'general-settings:notifications:consumer-failed',
   NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD:
     'general-settings:notifications:consumer-suppress-on-dashboard',
-  COMMENTS_ENABLED: 'general-settings:comments-enabled',
+  NOTES_ENABLED: 'general-settings:notes-enabled',
   SLIM_SIDEBAR: 'general-settings:slim-sidebar',
   UPDATE_CHECKING_ENABLED: 'general-settings:update-checking:enabled',
   UPDATE_CHECKING_BACKEND_SETTING:
@@ -125,7 +125,7 @@ export const SETTINGS: PaperlessUiSetting[] = [
     default: true,
   },
   {
-    key: SETTINGS_KEYS.COMMENTS_ENABLED,
+    key: SETTINGS_KEYS.NOTES_ENABLED,
     type: 'boolean',
     default: true,
   },

src-ui/src/app/services/permissions.service.ts

@@ -18,7 +18,7 @@ export enum PermissionType {
   SavedView = '%s_savedview',
   PaperlessTask = '%s_paperlesstask',
   UISettings = '%s_uisettings',
-  Comment = '%s_comment',
+  Note = '%s_note',
   MailAccount = '%s_mailaccount',
   MailRule = '%s_mailrule',
   User = '%s_user',

src-ui/src/app/services/rest/document-comments.service.ts

@@ -1,37 +0,0 @@
-import { Injectable } from '@angular/core'
-import { HttpClient, HttpParams } from '@angular/common/http'
-import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
-import { AbstractPaperlessService } from './abstract-paperless-service'
-import { Observable } from 'rxjs'
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DocumentCommentsService extends AbstractPaperlessService<PaperlessDocumentComment> {
-  constructor(http: HttpClient) {
-    super(http, 'documents')
-  }
-
-  getComments(documentId: number): Observable<PaperlessDocumentComment[]> {
-    return this.http.get<PaperlessDocumentComment[]>(
-      this.getResourceUrl(documentId, 'comments')
-    )
-  }
-
-  addComment(id: number, comment): Observable<PaperlessDocumentComment[]> {
-    return this.http.post<PaperlessDocumentComment[]>(
-      this.getResourceUrl(id, 'comments'),
-      { comment: comment }
-    )
-  }
-
-  deleteComment(
-    documentId: number,
-    commentId: number
-  ): Observable<PaperlessDocumentComment[]> {
-    return this.http.delete<PaperlessDocumentComment[]>(
-      this.getResourceUrl(documentId, 'comments'),
-      { params: new HttpParams({ fromString: `id=${commentId}` }) }
-    )
-  }
-}

src-ui/src/app/services/rest/document-notes.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { PaperlessDocumentNote } from 'src/app/data/paperless-document-note'
+import { AbstractPaperlessService } from './abstract-paperless-service'
+import { Observable } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DocumentNotesService extends AbstractPaperlessService<PaperlessDocumentNote> {
+  constructor(http: HttpClient) {
+    super(http, 'documents')
+  }
+
+  getNotes(documentId: number): Observable<PaperlessDocumentNote[]> {
+    return this.http.get<PaperlessDocumentNote[]>(
+      this.getResourceUrl(documentId, 'notes')
+    )
+  }
+
+  addNote(id: number, note: string): Observable<PaperlessDocumentNote[]> {
+    return this.http.post<PaperlessDocumentNote[]>(
+      this.getResourceUrl(id, 'notes'),
+      { note: note }
+    )
+  }
+
+  deleteNote(
+    documentId: number,
+    noteId: number
+  ): Observable<PaperlessDocumentNote[]> {
+    return this.http.delete<PaperlessDocumentNote[]>(
+      this.getResourceUrl(documentId, 'notes'),
+      { params: new HttpParams({ fromString: `id=${noteId}` }) }
+    )
+  }
+}

src-ui/src/app/services/rest/document.service.ts

@@ -22,6 +22,7 @@ export const DOCUMENT_SORT_FIELDS = [
   { field: 'created', name: $localize`Created` },
   { field: 'added', name: $localize`Added` },
   { field: 'modified', name: $localize`Modified` },
+  { field: 'num_notes', name: $localize`Notes` },
 ]
 
 export const DOCUMENT_SORT_FIELDS_FULLTEXT = [

src-ui/src/theme.scss

@@ -137,6 +137,10 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     border-color: rgba(0,0,0,0) !important;
   }
 
+  .document-card .card-body.bg-light {
+    background-color: var(--bs-body-bg);
+  }
+
   .doc-img {
     mix-blend-mode: normal;
     border-radius: 0;