From af8b84e9754daca9dfa32c2763f44b72f8057c9c Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Mon, 8 Nov 2021 20:40:45 +0100
Subject: [PATCH 1/7] Add import ui layout

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src/app/app.module.ts            | 80 +++++++++++--------
 .../native-file-select.component.html         | 17 ++++
 .../native-file-select.component.scss         | 14 ++++
 .../native-file-select.component.spec.ts      | 25 ++++++
 .../native-file-select.component.ts           | 68 ++++++++++++++++
 .../home/files-tab/files-tab.component.html   |  2 +-
 .../home/files-tab/files-tab.component.scss   |  6 +-
 .../src/app/pages/home/home.component.html    |  3 +
 .../filesystem-import.component.html          | 19 +++++
 .../filesystem-import.component.scss          | 25 ++++++
 .../filesystem-import.component.spec.ts       | 25 ++++++
 .../filesystem-import.component.ts            | 21 +++++
 .../import-tab-sidebar.component.html         | 20 +++++
 .../import-tab-sidebar.component.scss         | 34 ++++++++
 .../import-tab-sidebar.component.spec.ts      | 25 ++++++
 .../import-tab-sidebar.component.ts           | 12 +++
 .../home/import-tab/import-tab.component.html |  8 ++
 .../home/import-tab/import-tab.component.scss | 22 +++++
 .../import-tab/import-tab.component.spec.ts   | 25 ++++++
 .../home/import-tab/import-tab.component.ts   | 18 +++++
 20 files changed, 428 insertions(+), 41 deletions(-)
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts

diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts
index f443a4e..d8956b4 100644
--- a/mediarepo-ui/src/app/app.module.ts
+++ b/mediarepo-ui/src/app/app.module.ts
@@ -49,6 +49,11 @@ import {FilesTabSidebarComponent} from './pages/home/files-tab/files-tab-sidebar
 import {MatExpansionModule} from "@angular/material/expansion";
 import {TagItemComponent} from './components/tag-item/tag-item.component';
 import { FileEditComponent } from './components/file-edit/file-edit.component';
+import { ImportTabComponent } from './pages/home/import-tab/import-tab.component';
+import { ImportTabSidebarComponent } from './pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component';
+import { NativeFileSelectComponent } from './components/inputs/native-file-select/native-file-select.component';
+import { FilesystemImportComponent } from './pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component';
+import {MatCheckboxModule} from "@angular/material/checkbox";
 
 @NgModule({
   declarations: [
@@ -69,42 +74,47 @@ import { FileEditComponent } from './components/file-edit/file-edit.component';
     FilesTabSidebarComponent,
     TagItemComponent,
     FileEditComponent,
+    ImportTabComponent,
+    ImportTabSidebarComponent,
+    NativeFileSelectComponent,
+    FilesystemImportComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatCardModule,
-    MatListModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatSnackBarModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatSidenavModule,
-    MatGridListModule,
-    MatProgressBarModule,
-    MatPaginatorModule,
-    ScrollingModule,
-    MatChipsModule,
-    MatIconModule,
-    MatAutocompleteModule,
-    MatTabsModule,
-    FlexModule,
-    GridModule,
-    MatRippleModule,
-    MatDialogModule,
-    MatSelectModule,
-    MatProgressSpinnerModule,
-    BlockUIModule,
-    PanelModule,
-    DragDropModule,
-    MatSliderModule,
-    MatTooltipModule,
-    MatMenuModule,
-    MatExpansionModule,
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatCardModule,
+        MatListModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatSnackBarModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        MatSidenavModule,
+        MatGridListModule,
+        MatProgressBarModule,
+        MatPaginatorModule,
+        ScrollingModule,
+        MatChipsModule,
+        MatIconModule,
+        MatAutocompleteModule,
+        MatTabsModule,
+        FlexModule,
+        GridModule,
+        MatRippleModule,
+        MatDialogModule,
+        MatSelectModule,
+        MatProgressSpinnerModule,
+        BlockUIModule,
+        PanelModule,
+        DragDropModule,
+        MatSliderModule,
+        MatTooltipModule,
+        MatMenuModule,
+        MatExpansionModule,
+        MatCheckboxModule,
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
new file mode 100644
index 0000000..6f9d654
--- /dev/null
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
@@ -0,0 +1,17 @@
+<div class="file-select-inner" fxLayout="row">
+
+  <mat-form-field appearance="fill" fxFlex fxFlexFill>
+    <mat-label>{{label}}</mat-label>
+    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)">
+  </mat-form-field>
+
+  <div class="buttons-native-select" fxFlex="6em">
+    <button (click)="openNativeFileSelectDialog(false)" mat-button>
+      <mat-icon>insert_drive_file</mat-icon>
+    </button>
+    <button (click)="openNativeFileSelectDialog(true)" mat-button>
+      <mat-icon>folder</mat-icon>
+    </button>
+  </div>
+
+</div>
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
new file mode 100644
index 0000000..e95ec32
--- /dev/null
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
@@ -0,0 +1,14 @@
+.file-select-inner, mat-form-field {
+  width: 100%;
+}
+
+.buttons-native-select {
+  display: flex;
+  flex-direction: row;
+  padding-top: 4px;
+  button {
+    width: 3em;
+    height: 3em;
+    margin-left: -10px;
+  }
+}
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts
new file mode 100644
index 0000000..6800d85
--- /dev/null
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NativeFileSelectComponent } from './native-file-select.component';
+
+describe('NativeFileSelectComponent', () => {
+  let component: NativeFileSelectComponent;
+  let fixture: ComponentFixture<NativeFileSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NativeFileSelectComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NativeFileSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
new file mode 100644
index 0000000..5a7dfc5
--- /dev/null
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
@@ -0,0 +1,68 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormControl} from "@angular/forms";
+import {dialog} from "@tauri-apps/api";
+import {DialogFilter} from "@tauri-apps/api/dialog";
+
+@Component({
+  selector: 'app-native-file-select',
+  templateUrl: './native-file-select.component.html',
+  styleUrls: ['./native-file-select.component.scss']
+})
+export class NativeFileSelectComponent implements OnInit{
+
+  @Input() label: string | undefined;
+  @Input() mode: "files" | "folders" | "all" = "all";
+  @Input() formControlName: string | undefined;
+  @Input() formControl: FormControl | undefined;
+  @Input() startPath: string | undefined;
+  @Input() multiSelect: boolean = true;
+  @Input() filters: DialogFilter[] = [];
+
+  @Output() fileSelect = new EventEmitter<string[]>();
+
+  public files: string[] = [];
+
+  constructor() { }
+
+  public ngOnInit(): void {
+    if (!this.label) {
+      switch (this.mode) {
+        case "all":
+          this.label = "Select Files or Folders";
+          break;
+        case "files":
+          this.label = "Select Files";
+          break;
+        case "folders":
+          this.label  = "Select a folder";
+          break;
+      }
+    }
+  }
+
+  public setFiles(filesExpr: string) {
+    this.files = filesExpr.split(",");
+    this.fileSelect.emit(this.files);
+  }
+
+  /**
+   * Opens the native dialog to select files or folders
+   * @param {boolean} folders
+   * @returns {Promise<void>}
+   */
+  public async openNativeFileSelectDialog(folders: boolean) {
+    const files = await dialog.open({
+      multiple: this.multiSelect,
+      directory: folders,
+      defaultPath: this.startPath,
+      filters: this.filters,
+    });
+    if (files instanceof Array) {
+      this.files = files;
+    } else {
+      this.files = [files];
+    }
+    this.fileSelect.emit(this.files);
+  }
+
+}
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html
index 1f9293f..d10c740 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html
+++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html
@@ -1,4 +1,4 @@
-<mat-drawer-container class="page">
+<mat-drawer-container>
   <mat-drawer disableClose mode="side" opened>
     <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false"
                            (searchStartEvent)="this.contentLoading = true"
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss
index a362e99..ece6467 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss
+++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss
@@ -16,6 +16,7 @@ mat-drawer-content {
 
 mat-drawer-container {
   height: 100%;
+  width: 100%;
   overflow: hidden;
 }
 
@@ -29,11 +30,6 @@ app-file-gallery, app-files-tab-sidebar {
   width: 100%;
 }
 
-.page {
-  height: 100%;
-  width: 100%;
-}
-
 .spinner-overlay {
   position: absolute;
   top: 0;
diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html
index 0aaa53c..8c9f604 100644
--- a/mediarepo-ui/src/app/pages/home/home.component.html
+++ b/mediarepo-ui/src/app/pages/home/home.component.html
@@ -6,5 +6,8 @@
     <mat-tab *ngIf="this.selectedRepository" label="Files">
       <app-files-tab></app-files-tab>
     </mat-tab>
+    <mat-tab *ngIf="this.selectedRepository" label="Import">
+      <app-import-tab></app-import-tab>
+    </mat-tab>
   </mat-tab-group>
 </div>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
new file mode 100644
index 0000000..73e5e0c
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
@@ -0,0 +1,19 @@
+<app-native-file-select (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
+<button mat-stroked-button class="filled-button">{{this.fileCount}} files found</button>
+
+<mat-divider></mat-divider>
+
+<button mat-flat-button class="filled-button">Tag parsing options</button>
+
+<section class="binary-import-options">
+  <mat-checkbox [checked]="this.importTagsFromTxt" (change)="this.importTagsFromTxt = $event.checked">Import tags from
+    adjacent .txt tag files
+  </mat-checkbox>
+  <mat-checkbox [checked]="this.deleteAfterImport" (change)="this.deleteAfterImport = $event.checked" color="warn">
+    Delete files from original location after import
+  </mat-checkbox>
+</section>
+
+<mat-divider></mat-divider>
+
+<button mat-flat-button color="primary" class="import-button">Import</button>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss
new file mode 100644
index 0000000..5bba0b1
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss
@@ -0,0 +1,25 @@
+app-native-file-select {
+  width: 100%;
+}
+
+button {
+  width: 100%;
+}
+
+mat-divider {
+  width: 100%;
+  height: 1px;
+  margin: 1em 0;
+}
+
+.filled-button {
+  background-color: #5c5c5c;
+}
+
+.binary-import-options {
+  margin-top: 1em;
+
+  mat-checkbox {
+    margin: 0.5em 0;
+  }
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts
new file mode 100644
index 0000000..6252f90
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilesystemImportComponent } from './filesystem-import.component';
+
+describe('FilesystemImportComponent', () => {
+  let component: FilesystemImportComponent;
+  let fixture: ComponentFixture<FilesystemImportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilesystemImportComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilesystemImportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
new file mode 100644
index 0000000..dc6c5db
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-filesystem-import',
+  templateUrl: './filesystem-import.component.html',
+  styleUrls: ['./filesystem-import.component.scss']
+})
+export class FilesystemImportComponent {
+
+  public fileCount: number = 0;
+  public paths: string[] = [];
+  public importTagsFromTxt = true;
+  public deleteAfterImport = false;
+
+  constructor() { }
+
+  public async setSelectedPaths(paths: string[]) {
+    this.paths = paths;
+    this.fileCount = paths.length;
+  }
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
new file mode 100644
index 0000000..f70ab28
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
@@ -0,0 +1,20 @@
+<div class="import-tab-inner">
+  <mat-tab-group headerPosition="below">
+    <mat-tab label="Import">
+      <div class="import-sidebar-tab-inner" fxLayout="column">
+        <div class="import-type-select-wrapper" fxFlex="6em">
+          <mat-form-field class="import-type-select">
+            <mat-label>Import Type</mat-label>
+            <mat-select value="filesystem">
+              <mat-option value="filesystem">Filesystem</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-divider></mat-divider>
+        </div>
+        <div class="import-configuration" fxFlex fxFlexFill>
+          <app-filesystem-import></app-filesystem-import>
+        </div>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss
new file mode 100644
index 0000000..7a59d9d
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss
@@ -0,0 +1,34 @@
+mat-tab-group, mat-tab {
+  width: 100%;
+  height: 100%;
+}
+
+
+.import-tab-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.import-type-select-wrapper {
+  width: 100%;
+
+  .import-type-select {
+    width: calc(100% - 2em);
+    height: calc(100% - 2em);
+    margin: 1em;
+    mat-select {
+      height: 100%;
+    }
+  }
+}
+
+.import-sidebar-tab-inner {
+  width: 100%;
+  height: 100%;
+}
+
+.import-configuration {
+  padding: 1em;
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts
new file mode 100644
index 0000000..1a67b9f
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportTabSidebarComponent } from './import-tab-sidebar.component';
+
+describe('ImportTabSidebarComponent', () => {
+  let component: ImportTabSidebarComponent;
+  let fixture: ComponentFixture<ImportTabSidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImportTabSidebarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportTabSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
new file mode 100644
index 0000000..e340819
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
@@ -0,0 +1,12 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatTabGroup} from "@angular/material/tabs";
+
+@Component({
+  selector: 'app-import-tab-sidebar',
+  templateUrl: './import-tab-sidebar.component.html',
+  styleUrls: ['./import-tab-sidebar.component.scss']
+})
+export class ImportTabSidebarComponent {
+
+  constructor() { }
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
new file mode 100644
index 0000000..8bf58a9
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
@@ -0,0 +1,8 @@
+<mat-drawer-container>
+  <mat-drawer disableClose="true" mode="side" opened>
+    <app-import-tab-sidebar></app-import-tab-sidebar>
+  </mat-drawer>
+  <mat-drawer-content>
+    <app-file-grid [files]="this.files" ></app-file-grid>
+  </mat-drawer-content>
+</mat-drawer-container>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
new file mode 100644
index 0000000..3f1ab9e
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
@@ -0,0 +1,22 @@
+mat-drawer-container {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+mat-drawer-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+}
+
+mat-drawer {
+  height: 100%;
+  width: 25%;
+}
+
+app-import-tab-sidebar {
+  height: 100%;
+  width: 100%;
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts
new file mode 100644
index 0000000..10d3571
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportTabComponent } from './import-tab.component';
+
+describe('ImportTabComponent', () => {
+  let component: ImportTabComponent;
+  let fixture: ComponentFixture<ImportTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImportTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
new file mode 100644
index 0000000..4346c41
--- /dev/null
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {File} from "../../../models/File";
+
+@Component({
+  selector: 'app-import-tab',
+  templateUrl: './import-tab.component.html',
+  styleUrls: ['./import-tab.component.scss']
+})
+export class ImportTabComponent implements OnInit {
+
+  public files: File[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

From b5dcc177232c818a07ace00c170b48a9f012edc1 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Mon, 8 Nov 2021 21:06:46 +0100
Subject: [PATCH 2/7] Improve import path select input

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../native-file-select.component.html         | 25 +++++++++++--------
 .../native-file-select.component.scss         | 16 +++++++++---
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
index 6f9d654..aab3dc1 100644
--- a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
@@ -1,17 +1,20 @@
 <div class="file-select-inner" fxLayout="row">
 
-  <mat-form-field appearance="fill" fxFlex fxFlexFill>
+  <mat-form-field appearance="fill">
     <mat-label>{{label}}</mat-label>
-    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)">
-  </mat-form-field>
+    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)" class="file-input">
 
-  <div class="buttons-native-select" fxFlex="6em">
-    <button (click)="openNativeFileSelectDialog(false)" mat-button>
-      <mat-icon>insert_drive_file</mat-icon>
-    </button>
-    <button (click)="openNativeFileSelectDialog(true)" mat-button>
-      <mat-icon>folder</mat-icon>
-    </button>
-  </div>
+    <div class="buttons-native-select">
+      <button *ngIf="mode === 'all'" (click)="openNativeFileSelectDialog(false)" mat-button>
+        <mat-icon>folder</mat-icon>
+      </button>
+      <button *ngIf="mode === 'files'" (click)="openNativeFileSelectDialog(false)" mat-button>
+        <mat-icon>insert_drive_file</mat-icon>
+      </button>
+      <button *ngIf="mode === 'folders'" (click)="openNativeFileSelectDialog(true)" mat-button>
+        <mat-icon>folder</mat-icon>
+      </button>
+    </div>
 
+  </mat-form-field>
 </div>
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
index e95ec32..10d05c5 100644
--- a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
@@ -2,13 +2,21 @@
   width: 100%;
 }
 
+
+.file-input {
+  width: calc(100% - 3em);
+  float: left;
+  text-overflow: ellipsis;
+}
+
 .buttons-native-select {
-  display: flex;
-  flex-direction: row;
-  padding-top: 4px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: -19px;
+
   button {
     width: 3em;
     height: 3em;
-    margin-left: -10px;
   }
 }

From d9fc378a1bd7fbf5fc0df9870eb0bd237db41784 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Tue, 9 Nov 2021 19:37:57 +0100
Subject: [PATCH 3/7] Add resolving of files when a path is selected

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src-tauri/Cargo.lock             | 30 ++++++++++-
 mediarepo-ui/src-tauri/Cargo.toml             |  2 +-
 .../native-file-select.component.html         |  5 +-
 .../native-file-select.component.ts           | 51 ++++++++++++-------
 mediarepo-ui/src/app/models/FileOsMetadata.ts |  7 +++
 .../filesystem-import.component.html          | 14 ++++-
 .../filesystem-import.component.ts            | 23 +++++++--
 .../services/import/import.service.spec.ts    | 16 ++++++
 .../src/app/services/import/import.service.ts | 15 ++++++
 9 files changed, 131 insertions(+), 32 deletions(-)
 create mode 100644 mediarepo-ui/src/app/models/FileOsMetadata.ts
 create mode 100644 mediarepo-ui/src/app/services/import/import.service.spec.ts
 create mode 100644 mediarepo-ui/src/app/services/import/import.service.ts

diff --git a/mediarepo-ui/src-tauri/Cargo.lock b/mediarepo-ui/src-tauri/Cargo.lock
index 0d1e8d8..2da5f3f 100644
--- a/mediarepo-ui/src-tauri/Cargo.lock
+++ b/mediarepo-ui/src-tauri/Cargo.lock
@@ -1580,12 +1580,13 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "mediarepo-api"
-version = "0.5.1"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=b6a287e200eeae1105466ae7851a3a9287efe34b#b6a287e200eeae1105466ae7851a3a9287efe34b"
+version = "0.5.3"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=827ae9613d18b773a66c80ee803c4e112ca987b9#827ae9613d18b773a66c80ee803c4e112ca987b9"
 dependencies = [
  "async-trait",
  "chrono",
  "directories",
+ "mime_guess",
  "parking_lot",
  "rmp-ipc",
  "serde",
@@ -1613,6 +1614,22 @@ dependencies = [
  "autocfg",
 ]
 
+[[package]]
+name = "mime"
+version = "0.3.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a60c7ce501c71e03a9c9c0d35b861413ae925bd979cc7a4e30d060069aaac8d"
+
+[[package]]
+name = "mime_guess"
+version = "2.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2684d4c2e97d99848d30b324b00c8fcc7e5c897b7cbb5819b09e7c90e8baf212"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
 [[package]]
 name = "minisign-verify"
 version = "0.1.8"
@@ -3388,6 +3405,15 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56dee185309b50d1f11bfedef0fe6d036842e3fb77413abef29f8f8d1c5d4c1c"
 
+[[package]]
+name = "unicase"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
+dependencies = [
+ "version_check",
+]
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.7"
diff --git a/mediarepo-ui/src-tauri/Cargo.toml b/mediarepo-ui/src-tauri/Cargo.toml
index efdf95f..b1217cc 100644
--- a/mediarepo-ui/src-tauri/Cargo.toml
+++ b/mediarepo-ui/src-tauri/Cargo.toml
@@ -30,7 +30,7 @@ features = ["env-filter"]
 
 [dependencies.mediarepo-api]
 git = "https://github.com/Trivernis/mediarepo-api.git"
-rev = "b6a287e200eeae1105466ae7851a3a9287efe34b"
+rev = "827ae9613d18b773a66c80ee803c4e112ca987b9"
 features = ["tauri-plugin"]
 
 [features]
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
index aab3dc1..5861d6d 100644
--- a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
@@ -2,12 +2,9 @@
 
   <mat-form-field appearance="fill">
     <mat-label>{{label}}</mat-label>
-    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)" class="file-input">
+    <input #filesInput matInput [value]="files.join(', ')" (change)="this.setFiles(filesInput.value)" class="file-input">
 
     <div class="buttons-native-select">
-      <button *ngIf="mode === 'all'" (click)="openNativeFileSelectDialog(false)" mat-button>
-        <mat-icon>folder</mat-icon>
-      </button>
       <button *ngIf="mode === 'files'" (click)="openNativeFileSelectDialog(false)" mat-button>
         <mat-icon>insert_drive_file</mat-icon>
       </button>
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
index 5a7dfc5..852ea45 100644
--- a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
@@ -1,4 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
 import {FormControl} from "@angular/forms";
 import {dialog} from "@tauri-apps/api";
 import {DialogFilter} from "@tauri-apps/api/dialog";
@@ -8,10 +16,10 @@ import {DialogFilter} from "@tauri-apps/api/dialog";
   templateUrl: './native-file-select.component.html',
   styleUrls: ['./native-file-select.component.scss']
 })
-export class NativeFileSelectComponent implements OnInit{
+export class NativeFileSelectComponent implements OnInit, OnChanges {
 
-  @Input() label: string | undefined;
-  @Input() mode: "files" | "folders" | "all" = "all";
+
+  @Input() mode: "files" | "folders" = "files";
   @Input() formControlName: string | undefined;
   @Input() formControl: FormControl | undefined;
   @Input() startPath: string | undefined;
@@ -21,22 +29,19 @@ export class NativeFileSelectComponent implements OnInit{
   @Output() fileSelect = new EventEmitter<string[]>();
 
   public files: string[] = [];
+  public label: string | undefined;
 
-  constructor() { }
+  constructor() {
+  }
 
   public ngOnInit(): void {
-    if (!this.label) {
-      switch (this.mode) {
-        case "all":
-          this.label = "Select Files or Folders";
-          break;
-        case "files":
-          this.label = "Select Files";
-          break;
-        case "folders":
-          this.label  = "Select a folder";
-          break;
-      }
+    this.setLabel();
+  }
+
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes["mode"]) {
+      this.setLabel();
     }
   }
 
@@ -59,10 +64,20 @@ export class NativeFileSelectComponent implements OnInit{
     });
     if (files instanceof Array) {
       this.files = files;
-    } else {
+    } else if (files) {
       this.files = [files];
     }
     this.fileSelect.emit(this.files);
   }
 
+  private setLabel(): void {
+    switch (this.mode) {
+      case "files":
+        this.label = "Select Files";
+        break;
+      case "folders":
+        this.label = "Select a folder";
+        break;
+    }
+  }
 }
diff --git a/mediarepo-ui/src/app/models/FileOsMetadata.ts b/mediarepo-ui/src/app/models/FileOsMetadata.ts
new file mode 100644
index 0000000..c218b02
--- /dev/null
+++ b/mediarepo-ui/src/app/models/FileOsMetadata.ts
@@ -0,0 +1,7 @@
+export type FileOsMetadata = {
+  name: string,
+  path: string,
+  mime_type: string,
+  created_at: Date,
+  modified_at: Date,
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
index 73e5e0c..033d485 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
@@ -1,5 +1,15 @@
-<app-native-file-select (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
-<button mat-stroked-button class="filled-button">{{this.fileCount}} files found</button>
+<mat-form-field>
+  <mat-label>Selection Type</mat-label>
+  <mat-select #selectionType value="files">
+    <mat-option value="folders">Folders</mat-option>
+    <mat-option value="files">Files</mat-option>
+  </mat-select>
+</mat-form-field>
+<app-native-file-select [mode]="selectionType.value" (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
+<button mat-stroked-button class="filled-button">
+  {{this.fileCount}} files found
+  <mat-progress-bar *ngIf="resolving" mode="indeterminate" color="primary"></mat-progress-bar>
+</button>
 
 <mat-divider></mat-divider>
 
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
index dc6c5db..fabc183 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
+import {FileOsMetadata} from "../../../../../models/FileOsMetadata";
+import {ImportService} from "../../../../../services/import/import.service";
+import {ErrorBrokerService} from "../../../../../services/error-broker/error-broker.service";
 
 @Component({
   selector: 'app-filesystem-import',
@@ -8,14 +11,24 @@ import { Component, OnInit } from '@angular/core';
 export class FilesystemImportComponent {
 
   public fileCount: number = 0;
-  public paths: string[] = [];
+  public files: FileOsMetadata[] = [];
   public importTagsFromTxt = true;
   public deleteAfterImport = false;
 
-  constructor() { }
+  public resolving = false;
+
+  constructor(private errorBroker: ErrorBrokerService, private importService: ImportService) {
+  }
 
   public async setSelectedPaths(paths: string[]) {
-    this.paths = paths;
-    this.fileCount = paths.length;
+    this.resolving = true;
+    try {
+      this.files = await this.importService.resolvePathsToFiles(paths);
+      this.fileCount = this.files.length;
+    } catch (err) {
+      console.log(err);
+      this.errorBroker.showError(err);
+    }
+    this.resolving = false;
   }
 }
diff --git a/mediarepo-ui/src/app/services/import/import.service.spec.ts b/mediarepo-ui/src/app/services/import/import.service.spec.ts
new file mode 100644
index 0000000..da66864
--- /dev/null
+++ b/mediarepo-ui/src/app/services/import/import.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ImportService } from './import.service';
+
+describe('ImportService', () => {
+  let service: ImportService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ImportService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/services/import/import.service.ts b/mediarepo-ui/src/app/services/import/import.service.ts
new file mode 100644
index 0000000..c089b6e
--- /dev/null
+++ b/mediarepo-ui/src/app/services/import/import.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import {FileOsMetadata} from "../../models/FileOsMetadata";
+import {invoke} from "@tauri-apps/api/tauri";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ImportService {
+
+  constructor() { }
+
+  public async resolvePathsToFiles(paths: string[]): Promise<FileOsMetadata[]> {
+    return await invoke<FileOsMetadata[]>("plugin:mediarepo|resolve_paths_to_files", {paths});
+  }
+}

From da169fc4e61b42ebbd48d3928000b625f9545f3a Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Tue, 9 Nov 2021 21:34:51 +0100
Subject: [PATCH 4/7] Implement importing itself

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src-tauri/Cargo.lock             |  8 ++---
 mediarepo-ui/src-tauri/Cargo.toml             |  2 +-
 mediarepo-ui/src/app/models/AddFileOptions.ts |  8 +++++
 .../filesystem-import.component.html          | 11 ++++---
 .../filesystem-import.component.ts            | 29 +++++++++++++++++--
 .../import-tab-sidebar.component.html         |  2 +-
 .../import-tab-sidebar.component.ts           | 10 ++++++-
 .../home/import-tab/import-tab.component.html |  2 +-
 .../home/import-tab/import-tab.component.scss |  3 +-
 .../home/import-tab/import-tab.component.ts   |  6 ++--
 .../src/app/services/import/import.service.ts | 17 +++++++++++
 11 files changed, 80 insertions(+), 18 deletions(-)
 create mode 100644 mediarepo-ui/src/app/models/AddFileOptions.ts

diff --git a/mediarepo-ui/src-tauri/Cargo.lock b/mediarepo-ui/src-tauri/Cargo.lock
index 2da5f3f..edc739a 100644
--- a/mediarepo-ui/src-tauri/Cargo.lock
+++ b/mediarepo-ui/src-tauri/Cargo.lock
@@ -1580,8 +1580,8 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "mediarepo-api"
-version = "0.5.3"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=827ae9613d18b773a66c80ee803c4e112ca987b9#827ae9613d18b773a66c80ee803c4e112ca987b9"
+version = "0.6.0"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=ddebf4bf0c3e96ede64182ff52bd84f134acc33a#ddebf4bf0c3e96ede64182ff52bd84f134acc33a"
 dependencies = [
  "async-trait",
  "chrono",
@@ -2524,9 +2524,9 @@ dependencies = [
 
 [[package]]
 name = "rmp-ipc"
-version = "0.9.0"
+version = "0.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f6e9a9202fb951b3ca3088a4edd351774ef154efabb759d6aac2911cc1ae60c1"
+checksum = "87d2b669d0332e1478b88fdecf4c03cc0c8ce1d977a79eba848f4532213567e6"
 dependencies = [
  "async-trait",
  "byteorder",
diff --git a/mediarepo-ui/src-tauri/Cargo.toml b/mediarepo-ui/src-tauri/Cargo.toml
index b1217cc..c7422e6 100644
--- a/mediarepo-ui/src-tauri/Cargo.toml
+++ b/mediarepo-ui/src-tauri/Cargo.toml
@@ -30,7 +30,7 @@ features = ["env-filter"]
 
 [dependencies.mediarepo-api]
 git = "https://github.com/Trivernis/mediarepo-api.git"
-rev = "827ae9613d18b773a66c80ee803c4e112ca987b9"
+rev = "ddebf4bf0c3e96ede64182ff52bd84f134acc33a"
 features = ["tauri-plugin"]
 
 [features]
diff --git a/mediarepo-ui/src/app/models/AddFileOptions.ts b/mediarepo-ui/src/app/models/AddFileOptions.ts
new file mode 100644
index 0000000..ef3c71c
--- /dev/null
+++ b/mediarepo-ui/src/app/models/AddFileOptions.ts
@@ -0,0 +1,8 @@
+export class AddFileOptions {
+  public read_tags_from_txt = false;
+  public delete_after_import = false;
+
+  constructor() {
+  }
+
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
index 033d485..4e6775f 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
@@ -7,7 +7,7 @@
 </mat-form-field>
 <app-native-file-select [mode]="selectionType.value" (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
 <button mat-stroked-button class="filled-button">
-  {{this.fileCount}} files found
+  {{resolving? "Searching for files..." : this.fileCount + " files found"}}
   <mat-progress-bar *ngIf="resolving" mode="indeterminate" color="primary"></mat-progress-bar>
 </button>
 
@@ -16,14 +16,17 @@
 <button mat-flat-button class="filled-button">Tag parsing options</button>
 
 <section class="binary-import-options">
-  <mat-checkbox [checked]="this.importTagsFromTxt" (change)="this.importTagsFromTxt = $event.checked">Import tags from
+  <mat-checkbox [checked]="this.importOptions.read_tags_from_txt" (change)="this.importOptions.read_tags_from_txt = $event.checked">Import tags from
     adjacent .txt tag files
   </mat-checkbox>
-  <mat-checkbox [checked]="this.deleteAfterImport" (change)="this.deleteAfterImport = $event.checked" color="warn">
+  <mat-checkbox [checked]="this.importOptions.delete_after_import" (change)="this.importOptions.delete_after_import = $event.checked" color="warn">
     Delete files from original location after import
   </mat-checkbox>
 </section>
 
 <mat-divider></mat-divider>
 
-<button mat-flat-button color="primary" class="import-button">Import</button>
+<button mat-flat-button color="primary" class="import-button" [disabled]="importing || this.fileCount === 0" (click)="import()">
+  {{importing? "Importing..." : "Import"}}
+</button>
+<mat-progress-bar *ngIf="importing" mode="determinate" color="primary" [value]="this.importingProgress"></mat-progress-bar>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
index fabc183..a470fdc 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
@@ -1,7 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {FileOsMetadata} from "../../../../../models/FileOsMetadata";
 import {ImportService} from "../../../../../services/import/import.service";
 import {ErrorBrokerService} from "../../../../../services/error-broker/error-broker.service";
+import {AddFileOptions} from "../../../../../models/AddFileOptions";
+import {File} from "../../../../../models/File";
 
 @Component({
   selector: 'app-filesystem-import',
@@ -10,12 +12,15 @@ import {ErrorBrokerService} from "../../../../../services/error-broker/error-bro
 })
 export class FilesystemImportComponent {
 
+  @Output() fileImported = new EventEmitter<File>();
+
   public fileCount: number = 0;
   public files: FileOsMetadata[] = [];
-  public importTagsFromTxt = true;
-  public deleteAfterImport = false;
+  public importOptions = new AddFileOptions();
 
   public resolving = false;
+  public importing = false;
+  public importingProgress = 0;
 
   constructor(private errorBroker: ErrorBrokerService, private importService: ImportService) {
   }
@@ -31,4 +36,22 @@ export class FilesystemImportComponent {
     }
     this.resolving = false;
   }
+
+  public async import() {
+    this.importing = true;
+
+      this.importingProgress = 0;
+      for (const file of this.files) {
+        try {
+        const resultFile = await this.importService.addLocalFile(file, this.importOptions);
+        this.fileImported.emit(resultFile);
+        } catch (err) {
+          console.log(err);
+          this.errorBroker.showError(err);
+        }
+        this.importingProgress++;
+      }
+
+    this.importing = false;
+  }
 }
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
index f70ab28..66497ec 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
@@ -12,7 +12,7 @@
           <mat-divider></mat-divider>
         </div>
         <div class="import-configuration" fxFlex fxFlexFill>
-          <app-filesystem-import></app-filesystem-import>
+          <app-filesystem-import (fileImported)="this.fileImported.emit($event)"></app-filesystem-import>
         </div>
       </div>
     </mat-tab>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
index e340819..673d98f 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
@@ -1,5 +1,12 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import {MatTabGroup} from "@angular/material/tabs";
+import {File} from "../../../../models/File";
 
 @Component({
   selector: 'app-import-tab-sidebar',
@@ -8,5 +15,6 @@ import {MatTabGroup} from "@angular/material/tabs";
 })
 export class ImportTabSidebarComponent {
 
+  @Output() fileImported = new EventEmitter<File>();
   constructor() { }
 }
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
index 8bf58a9..f9daa0c 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
@@ -1,6 +1,6 @@
 <mat-drawer-container>
   <mat-drawer disableClose="true" mode="side" opened>
-    <app-import-tab-sidebar></app-import-tab-sidebar>
+    <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
     <app-file-grid [files]="this.files" ></app-file-grid>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
index 3f1ab9e..5eeec16 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
@@ -16,7 +16,8 @@ mat-drawer {
   width: 25%;
 }
 
-app-import-tab-sidebar {
+app-import-tab-sidebar, app-file-gallery {
   height: 100%;
   width: 100%;
+  margin: 0;
 }
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
index 4346c41..db9d560 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
@@ -6,13 +6,15 @@ import {File} from "../../../models/File";
   templateUrl: './import-tab.component.html',
   styleUrls: ['./import-tab.component.scss']
 })
-export class ImportTabComponent implements OnInit {
+export class ImportTabComponent {
 
   public files: File[] = [];
 
   constructor() { }
 
-  ngOnInit(): void {
+  public addFileFromImport(file: File) {
+    this.files.push(file);
+    this.files = [...this.files];
   }
 
 }
diff --git a/mediarepo-ui/src/app/services/import/import.service.ts b/mediarepo-ui/src/app/services/import/import.service.ts
index c089b6e..e0c18a2 100644
--- a/mediarepo-ui/src/app/services/import/import.service.ts
+++ b/mediarepo-ui/src/app/services/import/import.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import {FileOsMetadata} from "../../models/FileOsMetadata";
 import {invoke} from "@tauri-apps/api/tauri";
+import {AddFileOptions} from "../../models/AddFileOptions";
+import {File} from "../../models/File";
 
 @Injectable({
   providedIn: 'root'
@@ -9,7 +11,22 @@ export class ImportService {
 
   constructor() { }
 
+  /**
+   * Resolves paths from the local file system into a list of files that can be imported
+   * @param {string[]} paths
+   * @returns {Promise<FileOsMetadata[]>}
+   */
   public async resolvePathsToFiles(paths: string[]): Promise<FileOsMetadata[]> {
     return await invoke<FileOsMetadata[]>("plugin:mediarepo|resolve_paths_to_files", {paths});
   }
+
+  /**
+   * Imports a file from the local file system
+   * @param {FileOsMetadata} metadata
+   * @param {AddFileOptions} options
+   * @returns {Promise<File>}
+   */
+  public async addLocalFile(metadata: FileOsMetadata, options: AddFileOptions): Promise<File> {
+    return await invoke<File>("plugin:mediarepo|add_local_file", {metadata, options});
+  }
 }

From c8cccf450066b5aa9cac2c54b1c6be9893876e95 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Wed, 10 Nov 2021 21:33:48 +0100
Subject: [PATCH 5/7] Fix performance issues with rendering on import

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src/app/models/AddFileOptions.ts |  2 +-
 .../filesystem-import.component.ts            | 24 ++++++++++++-------
 .../import-tab-sidebar.component.html         |  2 +-
 .../import-tab-sidebar.component.ts           |  2 ++
 .../home/import-tab/import-tab.component.html |  2 +-
 .../home/import-tab/import-tab.component.ts   | 24 +++++++++++++++----
 6 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/mediarepo-ui/src/app/models/AddFileOptions.ts b/mediarepo-ui/src/app/models/AddFileOptions.ts
index ef3c71c..120ac61 100644
--- a/mediarepo-ui/src/app/models/AddFileOptions.ts
+++ b/mediarepo-ui/src/app/models/AddFileOptions.ts
@@ -1,5 +1,5 @@
 export class AddFileOptions {
-  public read_tags_from_txt = false;
+  public read_tags_from_txt = true;
   public delete_after_import = false;
 
   constructor() {
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
index a470fdc..09459b2 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
@@ -13,6 +13,7 @@ import {File} from "../../../../../models/File";
 export class FilesystemImportComponent {
 
   @Output() fileImported = new EventEmitter<File>();
+  @Output() importFinished = new EventEmitter<void>();
 
   public fileCount: number = 0;
   public files: FileOsMetadata[] = [];
@@ -40,18 +41,23 @@ export class FilesystemImportComponent {
   public async import() {
     this.importing = true;
 
-      this.importingProgress = 0;
-      for (const file of this.files) {
-        try {
-        const resultFile = await this.importService.addLocalFile(file, this.importOptions);
+    this.importingProgress = 0;
+    let count = 0;
+
+    for (const file of this.files) {
+      try {
+        const resultFile = await this.importService.addLocalFile(file,
+          this.importOptions);
         this.fileImported.emit(resultFile);
-        } catch (err) {
-          console.log(err);
-          this.errorBroker.showError(err);
-        }
-        this.importingProgress++;
+      } catch (err) {
+        console.log(err);
+        this.errorBroker.showError(err);
       }
+      count++;
+      this.importingProgress = (count / this.fileCount) * 100;
+    }
 
     this.importing = false;
+    this.importFinished.emit();
   }
 }
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
index 66497ec..84de2f8 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
@@ -12,7 +12,7 @@
           <mat-divider></mat-divider>
         </div>
         <div class="import-configuration" fxFlex fxFlexFill>
-          <app-filesystem-import (fileImported)="this.fileImported.emit($event)"></app-filesystem-import>
+          <app-filesystem-import (fileImported)="this.fileImported.emit($event)" (importFinished)="importFinished.emit()"></app-filesystem-import>
         </div>
       </div>
     </mat-tab>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
index 673d98f..546476c 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
@@ -16,5 +16,7 @@ import {File} from "../../../../models/File";
 export class ImportTabSidebarComponent {
 
   @Output() fileImported = new EventEmitter<File>();
+  @Output() importFinished = new EventEmitter<void>();
+
   constructor() { }
 }
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
index f9daa0c..a512144 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
@@ -1,6 +1,6 @@
 <mat-drawer-container>
   <mat-drawer disableClose="true" mode="side" opened>
-    <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"></app-import-tab-sidebar>
+    <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
     <app-file-grid [files]="this.files" ></app-file-grid>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
index db9d560..f26b3c0 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 import {File} from "../../../models/File";
+import {FileService} from "../../../services/file/file.service";
 
 @Component({
   selector: 'app-import-tab',
@@ -10,11 +11,26 @@ export class ImportTabComponent {
 
   public files: File[] = [];
 
-  constructor() { }
+  constructor(private fileService: FileService) {
+  }
 
-  public addFileFromImport(file: File) {
+  /**
+   * Adds an imported file to the list of imported files
+   * @param {File} file
+   * @returns {Promise<void>}
+   */
+  public async addFileFromImport(file: File) {
     this.files.push(file);
-    this.files = [...this.files];
+    if (this.files.length % 50 === 0) {  // refresh every 50 pictures
+      this.refreshFileView();
+    }
   }
 
+  /**
+   * Refreshes the file view
+   * @returns {Promise<void>}
+   */
+  public refreshFileView() {
+    this.files = [...this.files];
+  }
 }

From 1956f2d0b0f4065aed401c05150d6f8a336f2e4f Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Thu, 11 Nov 2021 20:10:33 +0100
Subject: [PATCH 6/7] Fix resizing issues with filegrid and gallery

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../file-gallery/file-gallery.component.ts    | 39 +++++++++++++------
 .../file-grid/file-grid.component.ts          | 10 ++++-
 .../src/app/pages/home/home.component.html    |  2 +-
 .../src/app/pages/home/home.component.ts      | 14 +++++--
 .../home/import-tab/import-tab.component.html |  4 +-
 .../home/import-tab/import-tab.component.scss |  6 ++-
 .../home/import-tab/import-tab.component.ts   |  5 ++-
 .../src/app/services/tab/tab.service.spec.ts  | 16 ++++++++
 .../src/app/services/tab/tab.service.ts       | 15 +++++++
 9 files changed, 90 insertions(+), 21 deletions(-)
 create mode 100644 mediarepo-ui/src/app/services/tab/tab.service.spec.ts
 create mode 100644 mediarepo-ui/src/app/services/tab/tab.service.ts

diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
index 9e9c680..d924fe1 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
@@ -16,6 +16,7 @@ import {SafeResourceUrl} from "@angular/platform-browser";
 import {Selectable} from "../../models/Selectable";
 import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
 import {CdkDragMove} from "@angular/cdk/drag-drop";
+import {TabService} from "../../services/tab/tab.service";
 
 @Component({
   selector: 'app-file-gallery',
@@ -42,7 +43,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
   public imagePosition = {x: 0, y: 0};
   public mouseInImageView = false;
 
-  constructor(private fileService: FileService) {
+  constructor(private tabService: TabService, private fileService: FileService) {
+    tabService.selectedTab.subscribe(() => this.adjustElementSizes());
   }
 
   /**
@@ -56,25 +58,31 @@ export class FileGalleryComponent implements OnChanges, OnInit {
       this.selectedFile?.unselect();
       entry.select();
       this.selectedFile = entry;
-      const selectedIndex = this.entries.indexOf(entry);
-      //this.virtualScroll.scrollToIndex(, "smooth");
       await this.loadSelectedFile();
 
       if (this.virtualScroll) {
-        const viewportSize = this.virtualScroll.getViewportSize();
-        const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
-        this.virtualScroll.scrollToIndex(
-          Math.max(selectedIndex - indexAdjustment, 0), "smooth");
-
-        if (selectedIndex > indexAdjustment) {
-          this.virtualScroll.scrollToOffset(
-            this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
-        }
+        this.scrollToSelection();
       }
+
       this.fileSelectEvent.emit(this.selectedFile.data);
     }
   }
 
+  private scrollToSelection(): void {
+    if (this.selectedFile) {
+      const selectedIndex = this.entries.indexOf(this.selectedFile);
+      const viewportSize = this.virtualScroll.getViewportSize();
+      const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
+      this.virtualScroll.scrollToIndex(
+        Math.max(selectedIndex - indexAdjustment, 0), "smooth");
+
+      if (selectedIndex > indexAdjustment) {
+        this.virtualScroll.scrollToOffset(
+          this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
+      }
+    }
+  }
+
   /**
    * Loads the content url of the selected file
    * @returns {Promise<void>}
@@ -192,4 +200,11 @@ export class FileGalleryComponent implements OnChanges, OnInit {
     }
     return undefined;
   }
+
+  public adjustElementSizes(): void {
+    if (this.virtualScroll) {
+      this.virtualScroll.checkViewportSize();
+      this.scrollToSelection();
+    }
+  }
 }
diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts
index 004aa91..3e2e606 100644
--- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts
+++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts
@@ -14,6 +14,7 @@ import {File} from "../../models/File";
 import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component";
 import {GridEntry} from "./file-grid-entry/GridEntry";
 import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
+import {TabService} from "../../services/tab/tab.service";
 
 @Component({
   selector: 'app-file-grid',
@@ -38,7 +39,8 @@ export class FileGridComponent implements OnChanges, OnInit {
   private ctrlClicked = false;
   private gridEntries: GridEntry[] = []
 
-  constructor() {
+  constructor(private tabService: TabService) {
+    tabService.selectedTab.subscribe(() => this.adjustElementSizes());
   }
 
   public ngOnInit(): void {
@@ -181,4 +183,10 @@ export class FileGridComponent implements OnChanges, OnInit {
         break;
     }
   }
+
+  public adjustElementSizes(): void {
+    if (this.virtualScroll) {
+      this.virtualScroll.checkViewportSize();
+    }
+  }
 }
diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html
index 8c9f604..c8dc551 100644
--- a/mediarepo-ui/src/app/pages/home/home.component.html
+++ b/mediarepo-ui/src/app/pages/home/home.component.html
@@ -1,5 +1,5 @@
 <div id="content">
-  <mat-tab-group #tabGroup>
+  <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)">
     <mat-tab label="Repositories">
       <app-repositories-tab></app-repositories-tab>
     </mat-tab>
diff --git a/mediarepo-ui/src/app/pages/home/home.component.ts b/mediarepo-ui/src/app/pages/home/home.component.ts
index ba60124..8d3bfc3 100644
--- a/mediarepo-ui/src/app/pages/home/home.component.ts
+++ b/mediarepo-ui/src/app/pages/home/home.component.ts
@@ -1,8 +1,9 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {Repository} from "../../models/Repository";
 import {RepositoryService} from "../../services/repository/repository.service";
-import {MatTabGroup} from "@angular/material/tabs";
+import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
 import {TagService} from "../../services/tag/tag.service";
+import {TabService} from "../../services/tab/tab.service";
 
 @Component({
   selector: 'app-home',
@@ -16,8 +17,11 @@ export class HomeComponent implements OnInit {
   @ViewChild("tabGroup") tabGroup!: MatTabGroup;
 
 
-  constructor(private repoService: RepositoryService, private tagService: TagService) {
-  }
+  constructor(
+    private tabService: TabService,
+    private repoService: RepositoryService,
+    private tagService: TagService)
+  {}
 
   public async ngOnInit(): Promise<void> {
     this.selectedRepository = this.repoService.selectedRepository.getValue();
@@ -42,4 +46,8 @@ export class HomeComponent implements OnInit {
   async loadRepoData() {
     await this.tagService.loadTags();
   }
+
+  public onTabSelectionChange(event: MatTabChangeEvent): void {
+    this.tabService.setSelectedTab(event.index);
+  }
 }
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
index a512144..2a918d3 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
@@ -1,8 +1,8 @@
-<mat-drawer-container>
+<mat-drawer-container autosize>
   <mat-drawer disableClose="true" mode="side" opened>
     <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
-    <app-file-grid [files]="this.files" ></app-file-grid>
+    <app-file-grid #fileGrid [files]="this.files" ></app-file-grid>
   </mat-drawer-content>
 </mat-drawer-container>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
index 5eeec16..2fe967e 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
@@ -16,8 +16,12 @@ mat-drawer {
   width: 25%;
 }
 
-app-import-tab-sidebar, app-file-gallery {
+app-import-tab-sidebar, app-file-grid {
   height: 100%;
   width: 100%;
   margin: 0;
 }
+
+app-file-grid {
+  display: block;
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
index f26b3c0..cf8980f 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {File} from "../../../models/File";
 import {FileService} from "../../../services/file/file.service";
+import {FileGridComponent} from "../../../components/file-grid/file-grid.component";
 
 @Component({
   selector: 'app-import-tab',
@@ -11,6 +12,8 @@ export class ImportTabComponent {
 
   public files: File[] = [];
 
+  @ViewChild("fileGrid") fileGrid!: FileGridComponent;
+
   constructor(private fileService: FileService) {
   }
 
diff --git a/mediarepo-ui/src/app/services/tab/tab.service.spec.ts b/mediarepo-ui/src/app/services/tab/tab.service.spec.ts
new file mode 100644
index 0000000..6621cb9
--- /dev/null
+++ b/mediarepo-ui/src/app/services/tab/tab.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TabService } from './tab.service';
+
+describe('TabService', () => {
+  let service: TabService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TabService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/services/tab/tab.service.ts b/mediarepo-ui/src/app/services/tab/tab.service.ts
new file mode 100644
index 0000000..d6bfcf6
--- /dev/null
+++ b/mediarepo-ui/src/app/services/tab/tab.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TabService {
+
+  public selectedTab = new BehaviorSubject<number>(0);
+  constructor() { }
+
+  public setSelectedTab(index: number) {
+    this.selectedTab.next(index);
+  }
+}

From cf0caf33b542f28ae18b4f37f291acf6f9856d9d Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Thu, 11 Nov 2021 20:12:40 +0100
Subject: [PATCH 7/7] Remove tag parsing options (for now)

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../filesystem-import/filesystem-import.component.html        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
index 4e6775f..a4e989f 100644
--- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
+++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
@@ -6,15 +6,13 @@
   </mat-select>
 </mat-form-field>
 <app-native-file-select [mode]="selectionType.value" (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
-<button mat-stroked-button class="filled-button">
+<button mat-flat-button>
   {{resolving? "Searching for files..." : this.fileCount + " files found"}}
   <mat-progress-bar *ngIf="resolving" mode="indeterminate" color="primary"></mat-progress-bar>
 </button>
 
 <mat-divider></mat-divider>
 
-<button mat-flat-button class="filled-button">Tag parsing options</button>
-
 <section class="binary-import-options">
   <mat-checkbox [checked]="this.importOptions.read_tags_from_txt" (change)="this.importOptions.read_tags_from_txt = $event.checked">Import tags from
     adjacent .txt tag files