feat: book import

Author: Angular2Guy

frontend/src/angular/src/app/book-import/book-import.component.html

@@ -1,3 +1,19 @@
+<mat-toolbar color="primary" class="custom-toolbar">
+  <div class="toolbar-content">
+    <div i18n="@@imageQueryHeading">Image Query</div>
+    <div class="example-fill-remaining-space"></div>
+    <div>
+      <button
+        mat-flat-button
+        color="primary"
+        (click)="logout()"
+        i18n="@@logout"
+      >
+        Logout
+      </button>
+    </div>
+  </div>
+</mat-toolbar>
 <input type="file" class="file-input"
        (change)="onFileSelected($event)" #fileUpload>
 

frontend/src/angular/src/app/book-import/book-import.component.scss

@@ -12,4 +12,25 @@
  */
 .file-input {
   display: none;
+}
+
+.example-fill-remaining-space {
+  // This fills the remaining space, by using flexbox.
+  // Every toolbar row uses a flexbox row layout.
+  flex: 1 1 auto;
+}
+
+.upload-spinner {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  margin: 10px;
+}
+
+.toolbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
 }

frontend/src/angular/src/app/book-import/book-import.component.ts

@@ -16,11 +16,13 @@ import { DocumentService } from '../service/document.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { tap } from 'rxjs';
 import { ChapterPages } from '../model/book';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-book-import',
   standalone: true,
-  imports: [MatIconModule],
+  imports: [MatIconModule,MatToolbarModule,MatButtonModule,],
   templateUrl: './book-import.component.html',
   styleUrl: './book-import.component.scss'
 })
@@ -31,6 +33,10 @@ export class BookImportComponent {
 
 	constructor(private documentService: DocumentService) {}
 
+	protected logout(): void {
+		console.log('logout');
+	}
+	
 	protected onFileSelected($event: Event): void {
 		const files = !$event.target
 		      ? null