Polishing and code clean-up

backend/pom.xml

@@ -7,7 +7,7 @@
     <parent>
         <artifactId>gameyfin</artifactId>
         <groupId>de.grimsi</groupId>
-        <version>0.0.1-SNAPSHOT</version>
+        <version>1.0.0</version>
     </parent>
 
     <artifactId>backend</artifactId>
@@ -15,13 +15,11 @@
     <properties>
         <java.version>18</java.version>
         <springdoc-openapi-ui.version>1.6.9</springdoc-openapi-ui.version>
-        <resilience4j-reactor.version>1.7.1</resilience4j-reactor.version>
+        <resilience4j.version>1.7.1</resilience4j.version>
         <commons-io.version>2.11.0</commons-io.version>
-        <protoc.plugin.version>3.11.4</protoc.plugin.version>
-        <protobuf-java.version>3.21.2</protobuf-java.version>
-        <gameyfin-frontend.version>0.0.1-SNAPSHOT</gameyfin-frontend.version>
         <commons-compress.version>1.21</commons-compress.version>
-        <java-jwt.version>4.0.0</java-jwt.version>
+        <protoc.plugin.version>3.11.4</protoc.plugin.version>
+        <protobuf-java.version>3.21.3</protobuf-java.version>
     </properties>
 
     <dependencies>
@@ -50,17 +48,17 @@
         <dependency>
             <groupId>io.github.resilience4j</groupId>
             <artifactId>resilience4j-reactor</artifactId>
-            <version>${resilience4j-reactor.version}</version>
+            <version>${resilience4j.version}</version>
         </dependency>
         <dependency>
             <groupId>io.github.resilience4j</groupId>
             <artifactId>resilience4j-ratelimiter</artifactId>
-            <version>${resilience4j-reactor.version}</version>
+            <version>${resilience4j.version}</version>
         </dependency>
         <dependency>
             <groupId>io.github.resilience4j</groupId>
             <artifactId>resilience4j-bulkhead</artifactId>
-            <version>${resilience4j-reactor.version}</version>
+            <version>${resilience4j.version}</version>
         </dependency>
 
         <!-- Security -->
@@ -123,6 +121,21 @@
     </dependencies>
 
     <build>
+        <resources>
+            <resource>
+                <directory>${basedir}/src/main/resources</directory>
+                <filtering>true</filtering>
+                <includes>
+                    <include>**/*.properties</include>
+                    <include>**/*.yml</include>
+                    <include>**/*.yaml</include>
+                    <include>**/*.txt</include>
+                    <include>**/*.js</include>
+                    <include>**/*.css</include>
+                    <include>**/*.html</include>
+                </includes>
+            </resource>
+        </resources>
         <plugins>
             <plugin>
                 <groupId>org.springframework.boot</groupId>

backend/src/main/java/de/grimsi/gameyfin/config/SecureProperties.java

@@ -0,0 +1,25 @@
+package de.grimsi.gameyfin.config;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.core.env.ConfigurableEnvironment;
+import org.springframework.core.env.PropertiesPropertySource;
+import org.springframework.core.io.ClassPathResource;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PropertiesLoaderUtils;
+
+import java.util.Objects;
+
+@Configuration
+public class SecureProperties {
+
+    @Autowired
+    public void setConfigurableEnvironment(ConfigurableEnvironment env) {
+        try {
+            Resource resource = new ClassPathResource("/config/secure.properties");
+            env.getPropertySources().addFirst(new PropertiesPropertySource(Objects.requireNonNull(resource.getFilename()), PropertiesLoaderUtils.loadProperties(resource)));
+        } catch (Exception ex) {
+            throw new RuntimeException(ex.getMessage(), ex);
+        }
+    }
+}

backend/src/main/java/de/grimsi/gameyfin/dto/AutocompleteSuggestionDto.java

@@ -0,0 +1,18 @@
+package de.grimsi.gameyfin.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.time.Instant;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class AutocompleteSuggestionDto {
+    private String slug;
+    private String title;
+    private Instant releaseDate;
+}

backend/src/main/java/de/grimsi/gameyfin/igdb/IgdbWrapper.java

@@ -2,7 +2,9 @@ package de.grimsi.gameyfin.igdb;
 
 import com.igdb.proto.Igdb;
 import de.grimsi.gameyfin.config.WebClientConfig;
+import de.grimsi.gameyfin.dto.AutocompleteSuggestionDto;
 import de.grimsi.gameyfin.igdb.dto.TwitchOAuthTokenDto;
+import de.grimsi.gameyfin.mapper.GameMapper;
 import io.github.resilience4j.reactor.bulkhead.operator.BulkheadOperator;
 import io.github.resilience4j.reactor.ratelimiter.operator.RateLimiterOperator;
 import lombok.extern.slf4j.Slf4j;
@@ -15,6 +17,7 @@ import org.springframework.web.util.UriComponentsBuilder;
 
 import javax.annotation.PostConstruct;
 import java.net.URI;
+import java.util.Collections;
 import java.util.List;
 import java.util.Optional;
 import java.util.regex.Matcher;
@@ -91,6 +94,18 @@ public class IgdbWrapper {
         return Optional.of(gameResult.getGames(0));
     }
 
+    public List<AutocompleteSuggestionDto> findPossibleMatchingTitles(String searchTerm, int limit) {
+        Igdb.GameResult gameResult = queryIgdbApi(
+                IgdbApiProperties.ENPOINT_GAMES_PROTOBUF,
+                "search \"%s\"; fields slug,name,first_release_date; where platforms = (%s); limit %d;".formatted(searchTerm, preferredPlatforms, limit),
+                Igdb.GameResult.class
+        );
+
+        if(gameResult == null) return Collections.emptyList();
+
+        return gameResult.getGamesList().stream().map(GameMapper::toAutocompleteSuggestionDto).toList();
+    }
+
     public Optional<Igdb.Game> searchForGameByTitle(String searchTerm) {
         Igdb.GameResult gameResult = queryIgdbApi(
                 IgdbApiProperties.ENPOINT_GAMES_PROTOBUF,

backend/src/main/java/de/grimsi/gameyfin/mapper/GameMapper.java

@@ -1,6 +1,7 @@
 package de.grimsi.gameyfin.mapper;
 
 import com.igdb.proto.Igdb;
+import de.grimsi.gameyfin.dto.AutocompleteSuggestionDto;
 import de.grimsi.gameyfin.dto.GameOverviewDto;
 import de.grimsi.gameyfin.entities.DetectedGame;
 import de.grimsi.gameyfin.service.LibraryService;
@@ -60,6 +61,14 @@ public class GameMapper {
                 .build();
     }
 
+    public static AutocompleteSuggestionDto toAutocompleteSuggestionDto(Igdb.Game game) {
+        return AutocompleteSuggestionDto.builder()
+                .slug(game.getSlug())
+                .title(game.getName())
+                .releaseDate(ProtobufUtil.toInstant(game.getFirstReleaseDate()))
+                .build();
+    }
+
     private static String getCoverId(Igdb.Game g) {
         String coverId = g.getCover().getImageId();
 

backend/src/main/java/de/grimsi/gameyfin/rest/LibraryController.java

@@ -3,6 +3,7 @@ package de.grimsi.gameyfin.rest;
 import de.grimsi.gameyfin.service.DownloadService;
 import de.grimsi.gameyfin.service.LibraryService;
 import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.MediaType;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -20,6 +21,7 @@ import java.util.List;
 @RequestMapping("/v1/library")
 @PreAuthorize("hasAuthority('ADMIN_API_ACCESS')")
 @RequiredArgsConstructor
+@Slf4j
 public class LibraryController {
 
     private final LibraryService libraryService;
@@ -37,6 +39,8 @@ public class LibraryController {
         downloadService.downloadGameCoversFromIgdb();
         downloadService.downloadGameScreenshotsFromIgdb();
         downloadService.downloadCompanyLogosFromIgdb();
+
+        log.info("Downloading images completed.");
     }
 
     @GetMapping(value = "/files", produces = MediaType.APPLICATION_JSON_VALUE)

backend/src/main/java/de/grimsi/gameyfin/rest/LibraryManagementController.java

@@ -1,12 +1,14 @@
 package de.grimsi.gameyfin.rest;
 
 
+import de.grimsi.gameyfin.dto.AutocompleteSuggestionDto;
 import de.grimsi.gameyfin.dto.PathToSlugDto;
 import de.grimsi.gameyfin.entities.DetectedGame;
 import de.grimsi.gameyfin.entities.UnmappableFile;
 import de.grimsi.gameyfin.repositories.DetectedGameRepository;
 import de.grimsi.gameyfin.service.DownloadService;
 import de.grimsi.gameyfin.service.GameService;
+import de.grimsi.gameyfin.service.LibraryService;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.MediaType;
 import org.springframework.security.access.prepost.PreAuthorize;
@@ -23,6 +25,8 @@ public class LibraryManagementController {
     private final GameService gameService;
     private final DownloadService downloadService;
 
+    private final LibraryService libraryService;
+
     @DeleteMapping(value = "/delete-game/{slug}", produces = MediaType.APPLICATION_JSON_VALUE)
     public void deleteGame(@PathVariable String slug) {
         gameService.deleteGame(slug);
@@ -53,4 +57,9 @@ public class LibraryManagementController {
     public List<UnmappableFile> getUnmappedFiles() {
         return gameService.getAllUnmappedFiles();
     }
+
+    @GetMapping(value = "/autocomplete-suggestions", produces = MediaType.APPLICATION_JSON_VALUE)
+    public List<AutocompleteSuggestionDto> getAutocompleteSuggestions(@RequestParam String searchTerm, @RequestParam(required = false, defaultValue = "10") int limit) {
+        return libraryService.getAutocompleteSuggestions(searchTerm, limit);
+    }
 }

backend/src/main/java/de/grimsi/gameyfin/service/LibraryService.java

@@ -1,12 +1,14 @@
 package de.grimsi.gameyfin.service;
 
 import com.igdb.proto.Igdb;
+import de.grimsi.gameyfin.dto.AutocompleteSuggestionDto;
 import de.grimsi.gameyfin.entities.DetectedGame;
 import de.grimsi.gameyfin.entities.UnmappableFile;
 import de.grimsi.gameyfin.igdb.IgdbWrapper;
 import de.grimsi.gameyfin.mapper.GameMapper;
 import de.grimsi.gameyfin.repositories.DetectedGameRepository;
 import de.grimsi.gameyfin.repositories.UnmappableFileRepository;
+import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
@@ -24,21 +26,15 @@ import static de.grimsi.gameyfin.util.FilenameUtil.hasGameArchiveExtension;
 
 @Slf4j
 @Service
+@RequiredArgsConstructor
 public class LibraryService {
 
     @Value("${gameyfin.root}")
     private String rootFolderPath;
 
-    @Value("${gameyfin.cache}")
-    private String cacheFolderPath;
-    @Autowired
-    private IgdbWrapper igdbWrapper;
-
-    @Autowired
-    private DetectedGameRepository detectedGameRepository;
-
-    @Autowired
-    private UnmappableFileRepository unmappableFileRepository;
+    private final IgdbWrapper igdbWrapper;
+    private final DetectedGameRepository detectedGameRepository;
+    private final UnmappableFileRepository unmappableFileRepository;
 
     public List<Path> getGameFiles() {
 
@@ -108,4 +104,8 @@ public class LibraryService {
         log.info("Scan finished in {} seconds: Found {} new games, deleted {} games, could not map {} files/folders, {} games total.",
                 (int) stopWatch.getTotalTimeSeconds(), newDetectedGames.size(), deletedGames.size() + deletedUnmappableFiles.size(), newUnmappedFilesCounter.get(), detectedGameRepository.count());
     }
+
+    public List<AutocompleteSuggestionDto> getAutocompleteSuggestions(String searchTerm, int limit) {
+        return igdbWrapper.findPossibleMatchingTitles(searchTerm, limit);
+    }
 }

backend/src/main/resources/application-dev.yml

@@ -1,15 +1,8 @@
 gameyfin:
   user: admin
-  password: 112
-  #root: C:\Projects\privat\gameyfin-library
-  root: \\NAS-Simon\Öffentlich\Spiele
+  password: password
   cache: ${gameyfin.root}\.gameyfin\cache
   db: ${gameyfin.root}\.gameyfin\db
-  #db: ./data
-  igdb:
-    api:
-      client-id: 23l3l5qshx4dwjuao6yb8jyf1qrd08
-      client-secret: hf4iivmkzgne552j17p2d64xm03die
 
 logging:
   level:

backend/src/main/resources/application.yml

@@ -1,34 +1,3 @@
-server:
-  port: 8080
-  error.include-stacktrace: never
-
-spring:
-  mvc:
-    async.request-timeout: -1
-  jackson.default-property-inclusion: non_null
-  datasource.db-name: gameyfin_db
-  datasource.url: jdbc:h2:file:${gameyfin.db}/${spring.datasource.db-name};AUTO_SERVER=TRUE
-  datasource.username: gfadmin
-  datasource.password: gameyfin
-  datasource.driverClassName: org.h2.Driver
-  jpa:
-    database-platform: org.hibernate.dialect.H2Dialect
-    hibernate.ddl-auto: update
-    open-in-view: true
-    properties:
-      hibernate:
-        event.merge.entity_copy_observer: allow
-
-gameyfin:
-  user: ""
-  password: ""
-  root: ""
-  cache: ${gameyfin.root}\.gameyfin\cache
-  db: ${gameyfin.root}\.gameyfin\db # Currently unused
-  file-extensions: iso, zip, rar, 7z, exe
-  igdb:
-    config:
-      preferred-platforms: 6
-    api:
-      client-id: ""
-      client-secret: ""
+# General
+logging.level:
+  root: info

backend/src/main/resources/banner.txt

@@ -0,0 +1,10 @@
+${AnsiColor.GREEN}
+  _____                            ___   _
+ / ___/ ___ _  __ _  ___   __ __  / _/  (_)  ___
+/ (_ / / _ `/ /  ' \/ -_) / // / / _/  / /  / _ \
+\___/  \_,_/ /_/_/_/\__/  \_, / /_/   /_/  /_//_/
+                         /___/
+${AnsiColor.WHITE}
+${application.name} ${application.version}
+Powered by Spring Boot ${spring-boot.version}
+

backend/src/main/resources/config/database.properties

@@ -0,0 +1,13 @@
+# This file contains properties related to the database configuration
+#
+#
+spring.jpa.properties.hibernate.enable_lazy_load_no_trans=true
+spring.datasource.db-name=gameyfin_db
+spring.datasource.url=jdbc:h2:file:${gameyfin.db}/${spring.datasource.db-name}
+spring.datasource.username=gfadmin
+spring.datasource.password=gameyfin
+spring.datasource.driverClassName=org.h2.Driver
+spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
+spring.jpa.hibernate.ddl-auto=update
+spring.jpa.open-in-view=true
+spring.jpa.properties.hibernate.event.merge.entity_copy_observer=allow

backend/src/main/resources/config/gameyfin.properties

@@ -0,0 +1,21 @@
+# This file contains properties related to the configuration of Gameyfin
+#
+#
+# Username and password for the web interface
+gameyfin.user=
+gameyfin.password=
+
+# Root folder of your game library
+gameyfin.root=
+# Folders where gameyfin will store cached images and the database
+gameyfin.cache=${gameyfin.root}\.gameyfin\cache
+gameyfin.db=${gameyfin.root}\.gameyfin\db
+
+# File extensions which gameyfin will recognize as game files
+gameyfin.file-extensions=iso, zip, rar, 7z, exe
+
+# List of IGDB platform enums to limit search results. FOr possible values see: https://api-docs.igdb.com/#platform
+gameyfin.igdb.config.preferred-platforms=6
+# Twitch Client ID and Client Secret
+gameyfin.igdb.api.client-id=
+gameyfin.igdb.api.client-secret=

backend/src/main/resources/config/secure.properties

@@ -0,0 +1,19 @@
+# This file contains properties that are *NOT* safe to override by the user
+# In theory a user should not be able to override them since they will be loaded from the classpath at launch, overriding existing user properties with the same key
+#
+#
+# System Info
+application.name=Gameyfin
+application.version=@project.version@
+# API
+server.servlet.context-path=/
+# Spring Actuator
+management.endpoints.enabled-by-default=false
+management.endpoint.health.enabled=true
+# Server
+server.error.include-stacktrace=never
+spring.mvc.async.request-timeout=-1
+# Jackson JSON Mapping
+spring.jackson.default-property-inclusion=non_null
+spring.jackson.mapper.accept-case-insensitive-enums=true
+spring.jackson.deserialization.fail-on-unknown-properties=false

frontend/pom.xml

@@ -5,7 +5,7 @@
   <parent>
     <artifactId>gameyfin</artifactId>
     <groupId>de.grimsi</groupId>
-    <version>0.0.1-SNAPSHOT</version>
+    <version>1.0.0</version>
   </parent>
   <modelVersion>4.0.0</modelVersion>
 

frontend/src/app/api/LibraryManagementApi.ts

@@ -2,6 +2,7 @@ import {PathToSlugDto} from "../models/dtos/PathToSlugDto";
 import {Observable} from "rxjs";
 import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
 import {UnmappedFileDto} from "../models/dtos/UnmappedFileDto";
+import {AutocompleteSuggestionDto} from "../models/dtos/AutocompleteSuggestionDto";
 
 export interface LibraryManagementApi {
   mapGame(pathToSlugDto: PathToSlugDto): Observable<DetectedGameDto>;
@@ -9,4 +10,5 @@ export interface LibraryManagementApi {
   confirmGameMapping(slug: string, confirm: boolean): Observable<DetectedGameDto>;
   deleteGame(slug: string): Observable<Response>;
   deleteUnmappedFile(id: number): Observable<Response>;
+  getAutocompleteSuggestions(searchTerm: string, limit: number): Observable<AutocompleteSuggestionDto[]>;
 }

frontend/src/app/app.component.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
-import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
+import {Component} from '@angular/core';
+import {NavigationEnd, Router} from "@angular/router";
+import {Config} from "./config/Config";
+import {Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-root',
@@ -7,16 +9,16 @@ import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'frontend';
-  mySubscription;
 
-  constructor(private router: Router, private activatedRoute: ActivatedRoute){
+  constructor(private router: Router, private title: Title) {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    this.mySubscription = this.router.events.subscribe((event) => {
+    this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         // Trick the Router into believing it's last link wasn't previously loaded
         this.router.navigated = false;
       }
     });
+
+    title.setTitle(Config.baseTitle);
   }
 }

frontend/src/app/app.module.ts

@@ -47,6 +47,8 @@ import { UnmappedFilesTableComponent } from './components/unmapped-files-table/u
 import {MatDividerModule} from "@angular/material/divider";
 import {MatListModule} from "@angular/material/list";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import { NgModelChangeDebouncedDirective } from './directives/ng-model-change-debounced.directive';
+import { FooterComponent } from './components/footer/footer.component';
 
 @NgModule({
   declarations: [
@@ -63,7 +65,9 @@ import {MatAutocompleteModule} from "@angular/material/autocomplete";
     LibraryManagementComponent,
     MapGameDialogComponent,
     MappedGamesTableComponent,
-    UnmappedFilesTableComponent
+    UnmappedFilesTableComponent,
+    NgModelChangeDebouncedDirective,
+    FooterComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/components/footer/footer.component.html

@@ -0,0 +1 @@
+<p>&copy; {{date| date:'yyyy'}} grimsi | <a href="{{githubUrl}}" target="_blank">GitHub</a></p>

frontend/src/app/components/footer/footer.component.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@import '../../theme/default-theme';
+
+a {
+  $config: mat.get-color-config($custom-theme);
+  $primary-palette: map.get($config, 'primary');
+  color: mat.get-color-from-palette($primary-palette, 500);
+}

frontend/src/app/components/footer/footer.component.spec.ts

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

frontend/src/app/components/footer/footer.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  githubUrl: string = "https://github.com/grimsi/gameyfin";
+  date: Date = new Date();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/header/header.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar style="position: sticky; top: 0; z-index: 99999">
+<mat-toolbar>
   <button mat-icon-button matTooltip="Home" (click)="goToLibraryScreen()" *ngIf="!onLibraryScreen()">
     <mat-icon>home</mat-icon>
   </button>

frontend/src/app/components/header/header.component.scss

@@ -1,27 +1,3 @@
-.menu-item-icon {
-  margin-right: 10px;
-}
-
-.logo {
-  width: 45px;
-  padding-right: 30px;
-  padding-left: 30px;
-}
-
-.drop-down {
-  float: right;
-}
-
-.mat-tab-nav-bar, .mat-tab-links, .mat-tab-link {
-  height: 64px;
-  user-select: none;
-}
-
 .spacer {
   flex: 1 1 auto;
 }
-
-#username {
-  margin-right: 10px;
-  user-select: none;
-}

frontend/src/app/components/header/header.component.ts

@@ -53,7 +53,12 @@ export class HeaderComponent {
 
   scanLibrary(): void {
     this.libraryService.scanLibrary().pipe(timeInterval()).subscribe({
-      next: value => this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval / 1000)} seconds.`, undefined, {duration: 2000}),
+      next: value => {
+        // Refresh the current page "angular style"
+        this.router.navigate([this.router.url]).then(() =>
+          this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval / 1000)} seconds.`, undefined, {duration: 5000})
+         )
+      },
       error: error => this.snackBar.open(`Error while scanning library: ${error.error.message}`, undefined, {duration: 5000})
     })
     this.snackBar.open('Library scan started in the background. This could take some time.\nYou will get another notification once it\'s done', undefined, {duration: 5000})

frontend/src/app/components/library-overview/library-overview.component.html

@@ -28,8 +28,8 @@
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="6px">
         <mat-icon matTooltip="Search for games by title">search</mat-icon>
         <mat-form-field fxFlex="80" class="filter-category-content">
-          <input type="text" matInput [matAutocomplete]="auto" [(ngModel)]="searchTerm" (ngModelChange)="filterGames()">
-          <mat-autocomplete #auto="matAutocomplete">
+          <input type="text" matInput [matAutocomplete]="librarySearchAutocomplete" [(ngModel)]="searchTerm" (ngModelChange)="filterGames()">
+          <mat-autocomplete #librarySearchAutocomplete="matAutocomplete">
             <mat-option *ngFor="let game of games" [value]="game.title">
               {{game.title}}
             </mat-option>

frontend/src/app/components/map-game-dialog/map-game-dialog.component.html

@@ -3,13 +3,28 @@
   <form fxLayout="column" fxLayoutAlign="space-evenly stretch">
 
     <p>Path: {{path}}</p>
+
     <mat-form-field>
-      <input matInput type="text" placeholder="IGDB Slug" [formControl]="newSlugInput" [value]="currentSlug"/>
+      <div fxLayout="row">
+        <input type="text" placeholder="IGDB Slug" matInput [matAutocomplete]="igdbSlugAutocomplete" [(ngModel)]="slug" (ngModelChangeDebounced)="loadSuggestions()" [ngModelOptions]="{standalone: true}">
+        <mat-spinner *ngIf="suggestionsLoading" [diameter]="16"></mat-spinner>
+      </div>
+
+      <mat-autocomplete #igdbSlugAutocomplete="matAutocomplete">
+        <mat-option *ngFor="let suggestion of autocompleteSuggestions" [value]="suggestion.slug">
+          {{suggestion.title}} ({{getFullYearFromTimestamp(suggestion.releaseDate)}})
+        </mat-option>
+      </mat-autocomplete>
     </mat-form-field>
 
   </form>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button mat-raised-button [mat-dialog-close]="false" color="accent">Cancel</button>
-  <button mat-raised-button (click)="submit()" [disabled]="newSlugInput?.value?.length < 1" color="primary">OK</button>
+  <button mat-raised-button [mat-dialog-close]="false" color="accent" [disabled]="submitLoading">Cancel</button>
+  <button mat-raised-button (click)="submit()" [disabled]="slug.length < 1 || submitLoading" color="primary">
+    <span *ngIf="!submitLoading">OK</span>
+    <div *ngIf="submitLoading" fxLayout="column" fxLayoutAlign="center center" style="height: 36px;">
+      <mat-spinner [diameter]="24"></mat-spinner>
+    </div>
+  </button>
 </mat-dialog-actions>

frontend/src/app/components/map-game-dialog/map-game-dialog.component.ts

@@ -1,8 +1,10 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {FormBuilder, FormControl} from "@angular/forms";
 import {LibraryManagementService} from "../../services/library-management.service";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {PathToSlugDto} from "../../models/dtos/PathToSlugDto";
+import {DialogService} from "../../services/dialog.service";
+import {ApiErrorResponse} from "../../models/dtos/ApiErrorResponse";
+import {AutocompleteSuggestionDto} from "../../models/dtos/AutocompleteSuggestionDto";
 
 @Component({
   selector: 'app-map-game-dialog',
@@ -12,26 +14,71 @@ import {PathToSlugDto} from "../../models/dtos/PathToSlugDto";
 export class MapGameDialogComponent implements OnInit {
 
   path: string;
-  currentSlug?: string;
-  newSlugInput: FormControl;
+  slug: string;
 
-  constructor(private fb: FormBuilder,
-              private libraryManagementService: LibraryManagementService,
+  autocompleteSuggestions: AutocompleteSuggestionDto[] = [];
+
+  submitLoading: boolean = false;
+  suggestionsLoading: boolean = false;
+
+  constructor(private libraryManagementService: LibraryManagementService,
+              private dialogService: DialogService,
               public dialogRef: MatDialogRef<MapGameDialogComponent>,
               @Inject(MAT_DIALOG_DATA) data: any) {
     this.path = data.path;
-    this.currentSlug = data.slug;
-    this.newSlugInput = new FormControl(this.currentSlug);
+    this.slug = data.slug ?? '';
   }
 
   ngOnInit() {
+    this.loadInitialSuggestions();
   }
 
   submit(): void {
-    this.libraryManagementService.mapGame(new PathToSlugDto(this.newSlugInput.value, this.path)).subscribe({
+    this.submitLoading = true;
+    this.libraryManagementService.mapGame(new PathToSlugDto(this.slug, this.path)).subscribe({
         next: () => this.dialogRef.close(true),
-        error: () => this.dialogRef.close(false)
+        error: (error: ApiErrorResponse) => {
+          this.dialogRef.close(false);
+          this.dialogService.showErrorDialog(error.error.message);
+        }
       }
     )
   }
+
+  loadInitialSuggestions(): void {
+    this.suggestionsLoading = true;
+
+    // Extract the last path element (folder name / file name)
+    let extractedTitleFromPath: string = this.path.match(/([^\\/]*)[\\/]*$/)![1];
+    // Match it until the first special characters
+    extractedTitleFromPath = extractedTitleFromPath.match(/^[a-zA-Z0-9:\- ]+/)![0];
+
+    if(extractedTitleFromPath == null) {
+      this.suggestionsLoading = false;
+      return;
+    }
+
+    this.libraryManagementService.getAutocompleteSuggestions(extractedTitleFromPath, 10).subscribe({
+      next: suggestions => {
+        this.autocompleteSuggestions = suggestions;
+        this.suggestionsLoading = false;
+      },
+      error: () => this.suggestionsLoading = false
+    })
+  }
+
+  loadSuggestions(): void {
+    this.suggestionsLoading = true;
+    this.libraryManagementService.getAutocompleteSuggestions(this.slug, 50).subscribe({
+      next: suggestions => {
+        this.autocompleteSuggestions = suggestions;
+        this.suggestionsLoading = false;
+      },
+      error: () => this.suggestionsLoading = false
+    })
+  }
+
+  getFullYearFromTimestamp(timestamp: number): number {
+    return new Date(timestamp).getFullYear();
+  }
 }

frontend/src/app/components/mapped-games-table/mapped-games-table.component.ts

@@ -74,7 +74,9 @@ export class MappedGamesTableComponent implements AfterViewInit, OnChanges {
   }
 
   openCorrectMappingDialog(mappedGame: DetectedGameDto): void {
-    this.dialogService.correctGameMappingDialog(mappedGame);
+    this.dialogService.correctGameMappingDialog(mappedGame).subscribe(gameSuccessfullyMapped => {
+      if (gameSuccessfullyMapped) this.refreshMappedGamesList();
+    })
   }
 
   private refreshData(newData: DetectedGameDto[]): void {

frontend/src/app/config/Config.ts

@@ -1,4 +1,4 @@
 export class Config {
-  public static baseTitle = 'Game-Radar';
+  public static baseTitle = 'Gameyfin';
   public static apiBasePath = '/v1';
 }

frontend/src/app/directives/ng-model-change-debounced.directive.spec.ts

@@ -0,0 +1,8 @@
+import { NgModelChangeDebouncedDirective } from './ng-model-change-debounced.directive';
+
+describe('NgModelChangeDebouncedDirective', () => {
+  it('should create an instance', () => {
+    const directive = new NgModelChangeDebouncedDirective();
+    expect(directive).toBeTruthy();
+  });
+});

frontend/src/app/directives/ng-model-change-debounced.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, EventEmitter, Input, OnDestroy, Output} from "@angular/core";
+import {debounceTime, distinctUntilChanged, skip, Subscription} from "rxjs";
+import {NgModel} from "@angular/forms";
+
+@Directive({
+  selector: '[ngModelChangeDebounced]',
+})
+export class NgModelChangeDebouncedDirective implements OnDestroy {
+  @Output()
+  ngModelChangeDebounced = new EventEmitter<any>();
+  @Input()
+  ngModelChangeDebounceTime = 500; // optional, 500 default
+
+  subscription: Subscription;
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  constructor(private ngModel: NgModel) {
+    this.subscription = this.ngModel.control.valueChanges.pipe(
+      skip(1), // skip initial value
+      distinctUntilChanged(),
+      debounceTime(this.ngModelChangeDebounceTime)
+    ).subscribe((value) => this.ngModelChangeDebounced.emit(value));
+  }
+}

frontend/src/app/layouts/navbar-layout/navbar-layout.component.ts

@@ -3,16 +3,23 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'app-navbar-layout',
   template: `
-    <div fxFlexFill>
-      <app-header></app-header>
-      <div fxLayout="column" fxLayoutAlign="space-around stretch">
-        <div fxFlex>
-          <router-outlet class="hidden-router"></router-outlet>
-        </div>
+    <div class="main-container" fxLayout="column">
+      <div fxFlex="none" style="position: sticky; top: 0; z-index: 99999">
+        <app-header></app-header>
+      </div>
+      <div fxFlex>
+        <router-outlet></router-outlet><!-- class="hidden-router" -->
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center">
+        <app-footer></app-footer>
       </div>
     </div>
   `,
-  styles: []
+  styles: [`
+    .main-container {
+      min-height: 100vh;
+    }
+  `]
 })
 export class NavbarLayoutComponent implements OnInit {
 

frontend/src/app/models/dtos/AutocompleteSuggestionDto.ts

@@ -0,0 +1,5 @@
+export class AutocompleteSuggestionDto {
+  slug!: string;
+  title!: string;
+  releaseDate!: number;
+}

frontend/src/app/services/library-management.service.ts

@@ -6,6 +6,7 @@ import {PathToSlugDto} from "../models/dtos/PathToSlugDto";
 import {UnmappedFileDto} from "../models/dtos/UnmappedFileDto";
 import {LibraryManagementApi} from "../api/LibraryManagementApi";
 import {GamesService} from "./games.service";
+import {AutocompleteSuggestionDto} from "../models/dtos/AutocompleteSuggestionDto";
 
 @Injectable({
   providedIn: 'root'
@@ -42,4 +43,11 @@ export class LibraryManagementService implements LibraryManagementApi {
     return this.http.delete<Response>(`${this.apiPath}/delete-unmapped-file/${id}`);
   }
 
+  getAutocompleteSuggestions(searchTerm: string, limit: number): Observable<AutocompleteSuggestionDto[]> {
+    let queryParams = new HttpParams();
+    queryParams = queryParams.append("searchTerm", searchTerm);
+    queryParams = queryParams.append("limit", limit);
+
+    return this.http.get<AutocompleteSuggestionDto[]>(`${this.apiPath}/autocomplete-suggestions`, {params:queryParams})
+  }
 }

frontend/tsconfig.json

@@ -29,6 +29,12 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "extendedDiagnostics": {
+      "checks": {
+        // Currently buggy, see https://github.com/angular/angular/issues/46918
+        "optionalChainNotNullable": "suppress"
+      }
+    }
   }
 }

pom.xml

@@ -5,7 +5,7 @@
 
 	<groupId>de.grimsi</groupId>
 	<artifactId>gameyfin</artifactId>
-	<version>0.0.1-SNAPSHOT</version>
+	<version>1.0.0</version>
 	<name>gameyfin</name>
 	<description>gameyfin</description>