Add archive/delete actions to file context menu

src/app/app.module.ts

@@ -97,6 +97,7 @@ import { isSingleTagPipe } from "./hydrus-tags";
 import { MatContextMenuTriggerDirective } from "./mat-context-menu-trigger";
 import { ImageListItemComponent } from './image-list-item/image-list-item.component';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
+import { FileContextMenuActionsComponent } from './file-context-menu-actions/file-context-menu-actions.component';
 
 
 const MAT_MODULES = [
@@ -175,6 +176,7 @@ const MAT_MODULES = [
     MatContextMenuTriggerDirective,
     ImageListItemComponent,
     ConfirmDialogComponent,
+    FileContextMenuActionsComponent,
   ],
   bootstrap: [AppComponent],
   imports: [

src/app/file-context-menu-actions/file-context-menu-actions.component.html

@@ -0,0 +1,47 @@
+<a mat-menu-item rel="noopener noreferrer" target="_blank" href="{{file().file_url}}">
+  <mat-icon>open_in_new</mat-icon>
+  <span>Open in New Tab</span>
+</a>
+@if (downloadService.canShare) {
+  <button mat-menu-item (click)="shareFile()">
+    <mat-icon>share</mat-icon>
+    <span>Share</span>
+  </button>
+}
+<button mat-menu-item (click)="saveFile()">
+  <mat-icon>get_app</mat-icon>
+  <span>Download</span>
+</button>
+<mat-divider></mat-divider>
+@if (fullFile$ | async; as fullFile) {
+
+  @if (fullFile.is_inbox) {
+    <button mat-menu-item (click)="archiveFile()">
+      <mat-icon>archive</mat-icon>
+      <span>Archive</span>
+    </button>
+  } @else {
+    <button mat-menu-item (click)="unarchiveFile()">
+      <mat-icon>move_to_inbox</mat-icon>
+      <span>Return to Inbox</span>
+    </button>
+  }
+  @if (!fullFile.is_trashed) {
+    <button mat-menu-item (click)="deleteFile()">
+      <mat-icon>delete</mat-icon>
+      <span>Delete</span>
+    </button>
+  } @else {
+    <button mat-menu-item (click)="undeleteFile()">
+      <mat-icon>restore_from_trash</mat-icon>
+      <span>Undelete</span>
+    </button>
+  }
+} @else {
+  <button mat-menu-item disabled>
+    <span>Loading...</span>
+  </button>
+  <button mat-menu-item disabled>
+    <span>Loading...</span>
+  </button>
+}

src/app/file-context-menu-actions/file-context-menu-actions.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileContextMenuActionsComponent } from './file-context-menu-actions.component';
+
+describe('FileContextMenuContentComponent', () => {
+  let component: FileContextMenuActionsComponent;
+  let fixture: ComponentFixture<FileContextMenuActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FileContextMenuActionsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FileContextMenuActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/file-context-menu-actions/file-context-menu-actions.component.ts

@@ -0,0 +1,95 @@
+import { Component, input } from '@angular/core';
+import { HydrusFileDownloadService } from '../hydrus-file-download.service';
+import { HydrusFilesService } from '../hydrus-files.service';
+import { HydrusBasicFile } from '../hydrus-file';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { firstValueFrom, switchMap } from 'rxjs';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ErrorService } from '../error.service';
+
+@Component({
+  selector: 'app-file-context-menu-actions',
+  templateUrl: './file-context-menu-actions.component.html',
+  styleUrl: './file-context-menu-actions.component.scss'
+})
+export class FileContextMenuActionsComponent {
+
+  constructor(
+    public downloadService: HydrusFileDownloadService,
+    private filesService: HydrusFilesService,
+    private snackbar: MatSnackBar,
+    private errorService: ErrorService
+  ) {
+  }
+
+  file = input.required<HydrusBasicFile>();
+
+  fullFile$ = toObservable(this.file).pipe(
+    switchMap(f => this.filesService.getFileByHash(f.hash))
+  )
+
+  saveFile() {
+    this.downloadService.saveFile(this.file());
+  }
+
+  shareFile() {
+    this.downloadService.shareFile(this.file());
+  }
+
+  async deleteFile(){
+    try {
+      await firstValueFrom(this.filesService.deleteFile(this.file().hash));
+      const snackbarRef = this.snackbar.open('File sent to trash', 'Undo', {
+        duration: 2000
+      });
+      snackbarRef.onAction().subscribe(() => {
+        this.undeleteFile()
+      })
+    } catch (error) {
+      this.errorService.handleHydrusError(error);
+    }
+  }
+
+  async undeleteFile(){
+    try {
+      await firstValueFrom(this.filesService.undeleteFile(this.file().hash));
+      const snackbarRef = this.snackbar.open('File removed from trash', 'Undo', {
+        duration: 2000
+      });
+      snackbarRef.onAction().subscribe(() => {
+        this.deleteFile()
+      })
+    } catch (error) {
+      this.errorService.handleHydrusError(error);
+    }
+  }
+
+  async archiveFile(){
+    try {
+      await firstValueFrom(this.filesService.archiveFile(this.file().hash))
+      const snackbarRef = this.snackbar.open('File archived', 'Undo', {
+        duration: 2000
+      });
+      snackbarRef.onAction().subscribe(() => {
+        this.unarchiveFile()
+      })
+    } catch (error) {
+      this.errorService.handleHydrusError(error);
+    }
+  }
+
+  async unarchiveFile(){
+    try {
+      await firstValueFrom(this.filesService.unarchiveFile(this.file().hash));
+      const snackbarRef = this.snackbar.open('File moved to inbox', 'Undo', {
+        duration: 2000
+      });
+      snackbarRef.onAction().subscribe(() => {
+        this.archiveFile()
+      })
+    } catch (error) {
+      this.errorService.handleHydrusError(error);
+    }
+  }
+
+}

src/app/image-list-item/image-list-item.component.html

@@ -5,7 +5,10 @@
   [matBadgeHidden]="!selected()"
   [ngClass]="{'selected' : selected()}"
 >
-  <div class="mdc-image-list__image image-list-image"
+  <div
+    class="mdc-image-list__image image-list-image"
     [ngStyle]="{'background-image':'url('+ file().thumbnail_url +')', 'background-color' : file().blurhash ? (file().blurhash | blurhashcolor) : '#c7c5cb'}"
-  [ngClass]="'file-id-' + file().file_id"></div>
+    [ngClass]="'file-id-' + file().file_id"
+  >
+  </div>
 </div>

src/app/image-list/image-list.component.html

@@ -39,22 +39,7 @@
       <span>File Info</span>
     </button>
     <mat-divider></mat-divider>
-    <a mat-menu-item rel="noopener noreferrer" target="_blank" href="{{file.file_url}}">
-      <mat-icon>open_in_new</mat-icon>
-      <span>Open file in new tab</span>
-    </a>
-    <button mat-menu-item [cdkCopyToClipboard]="file.hash">
-      <mat-icon>content_copy</mat-icon>
-      <span>Copy SHA256 hash</span>
-    </button>
-    <button mat-menu-item (click)="shareFile(file)">
-      <mat-icon>share</mat-icon>
-      <span>Share File</span>
-    </button>
-    <button mat-menu-item (click)="saveFile(file)">
-      <mat-icon>get_app</mat-icon>
-      <span>Download File</span>
-    </button>
+    <app-file-context-menu-actions [file]="file"></app-file-context-menu-actions>
   </ng-template>
 </mat-menu>
 

src/app/image-list/image-list.component.ts

@@ -21,6 +21,7 @@ import { FileInfoSheetComponent } from '../file-info-sheet/file-info-sheet.compo
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { HydrusFileDownloadService } from '../hydrus-file-download.service';
 import { difference, union } from 'set-utilities';
+import { HydrusFilesService } from '../hydrus-files.service';
 
 @Component({
   selector: 'app-image-list',
@@ -52,7 +53,7 @@ export class ImageListComponent implements OnInit, OnChanges {
     public photoswipe: PhotoswipeService,
     public cdr: ChangeDetectorRef,
     private bottomSheet: MatBottomSheet,
-    public downloadService: HydrusFileDownloadService,
+    public downloadService: HydrusFileDownloadService
   ) {
   }
 
@@ -95,14 +96,6 @@ export class ImageListComponent implements OnInit, OnChanges {
     FileInfoSheetComponent.open(this.bottomSheet, file)
   }
 
-  saveFile(file: HydrusBasicFile) {
-    this.downloadService.saveFile(file);
-  }
-
-  shareFile(file: HydrusBasicFile) {
-    this.downloadService.shareFile(file);
-  }
-
   select(file: HydrusBasicFile) {
     this.selected.update(s => union(s, new Set([file.file_id])))
   }
@@ -123,5 +116,4 @@ export class ImageListComponent implements OnInit, OnChanges {
 
 
 
-
 }