Rename to library

src-angular/app/components/library/library-bar/library-bar.component.html

@@ -1,22 +1,22 @@
 <div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full justify-between">
 	<div class="flex items-center gap-[8px]">
-		{{ (this.playlistService.tracks$ | async)?.length ?? 0 }} Songs
+		{{ (this.libraryService.tracks$ | async)?.length ?? 0 }} Songs
 
-		@if ((this.playlistService.selectedSongs$ | async)!.length > 0) {
+		@if ((this.libraryService.selectedSongs$ | async)!.length > 0) {
 			<button class="btn btn-sm btn-primary" (click)="exportSelected()">Export Selected</button>
 		} @else {
 			<button class="btn btn-sm btn-primary" (click)="exportPlaylist()">Export</button>
 		}
 		<button class="btn btn-sm btn-primary" (click)="importPlaylist()">Import</button>
-		<input type="file" #fileInput accept=".setlist" class="hidden" (change)="onFileSelected($event)" />
+		<input type="file" #fileInput accept=".library" class="hidden" (change)="onFileSelected($event)" />
 
-		@if ((this.playlistService.selectedSongs$ | async)!.length === 0) {
-			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.clearPlaylist()">
+		@if ((this.libraryService.selectedSongs$ | async)!.length === 0) {
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.libraryService.clearPlaylist()">
 				<i class="bi bi-trash"></i>
 				Delete all
 			</button>
 		} @else {
-			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.removeFromPlaylist()">
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.libraryService.removeFromPlaylist()">
 				<i class="bi bi-trash"></i>
 				Delete selected
 			</button>

src-angular/app/components/library/library-bar/library-bar.component.ts

@@ -1,27 +1,27 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
-import { PlaylistService } from 'src-angular/app/core/services/playlist.service'
 import { DownloadService } from '../../../core/services/download.service'
+import { LibraryService } from 'src-angular/app/core/services/library.service'
 
 @Component({
-	selector: 'app-playlist-bar',
-	templateUrl: './playlist-bar.component.html',
+	selector: 'app-library-bar',
+	templateUrl: './library-bar.component.html',
 	standalone: false,
 })
-export class PlaylistBarComponent {
-	@ViewChild('fileInput', { static: false }) fileInput: ElementRef<HTMLInputElement>
+export class LibraryBarComponent {
+	@ViewChild('fileInput', { static: false }) libraryfileInput: ElementRef<HTMLInputElement>
 
-	constructor(public playlistService: PlaylistService, public downloadService: DownloadService) { }
+	constructor(public libraryService: LibraryService, public downloadService: DownloadService) { }
 
 	exportPlaylist() {
-		this.playlistService.storePlaylist()
+		this.libraryService.storeLibrary()
 	}
 
 	exportSelected() {
-		this.playlistService.storeSelectedSongs()
+		this.libraryService.storeSelectedSongs()
 	}
 
 	importPlaylist() {
-		this.fileInput.nativeElement.click()
+		this.libraryfileInput.nativeElement.click()
 	}
 
 	onFileSelected(event: Event) {
@@ -34,7 +34,7 @@ export class PlaylistBarComponent {
 				try {
 					const importedTracks = JSON.parse(reader.result as string)
 					if (Array.isArray(importedTracks)) {
-						this.playlistService.downloadPlaylist(importedTracks)
+						this.libraryService.downloadLibrary(importedTracks)
 					} else {
 						console.error('Invalid file format')
 					}

src-angular/app/components/library/library-table/library-table.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnInit, OnDestroy } from '@angular/core'
-import { PlaylistService } from 'src-angular/app/core/services/playlist.service'
 import { SelectionService } from 'src-angular/app/core/services/selection.service'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 import { SettingsService } from '../../../core/services/settings.service'
 import { Subscription } from 'rxjs'
+import { LibraryService } from 'src-angular/app/core/services/library.service'
 
 type SortColumn = 'name' | 'artist' | 'album' | 'genre' | 'year' | 'charter' | 'length' | 'modifiedTime' | null
 
 @Component({
-	selector: 'app-playlist-table',
-	templateUrl: './playlist-table.component.html',
+	selector: 'app-library-table',
+	templateUrl: './library-table.component.html',
 	standalone: false,
 })
-export class PlaylistTableComponent implements OnInit, OnDestroy {
+export class LibraryTableComponent implements OnInit, OnDestroy {
 	songs: ChartData[] = []
 	sortDirection: 'asc' | 'desc' = 'asc'
 	sortColumn: SortColumn = null
@@ -23,7 +23,7 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 	selectedSongs: ChartData[] = []
 
 	constructor(
-		public playlistService: PlaylistService,
+		public libraryService: LibraryService,
 		public settingsService: SettingsService,
 		private selectionService: SelectionService
 	) { }
@@ -42,7 +42,7 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 
 	ngOnInit(): void {
 		this.subscriptions.push(
-			this.playlistService.tracks$
+			this.libraryService.tracks$
 				.subscribe(tracks => {
 					this.songs = tracks
 					this.filterSongs()
@@ -50,9 +50,10 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 		)
 		this.filteredSongs = [...this.songs]
 		this.subscriptions.push(
-			this.playlistService.selectedSongs$.subscribe(songs =>
-				this.selectedSongs = songs
-			)
+			this.libraryService.selectedSongs$
+				.subscribe(songs =>
+					this.selectedSongs = songs
+				)
 		)
 	}
 
@@ -69,10 +70,6 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 		)
 	}
 
-	trackByFn(index: number): number {
-		return index
-	}
-
 	onColClicked(column: SortColumn) {
 		if (this.filteredSongs.length === 0) { return }
 
@@ -105,19 +102,23 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 	onCheckboxChange(song: ChartData, target?: EventTarget): void {
 		const input = target as HTMLInputElement
 		if (input.checked) {
-			this.playlistService.addToSelectedSongs(song)
+			this.libraryService.addToSelectedSongs(song)
 		} else {
-			this.playlistService.removeFromSelectedSongs(song)
+			this.libraryService.removeFromSelectedSongs(song)
 		}
 	}
 
+	trackByFn(index: number): number {
+		return index
+	}
+
 	toggleSelectAll(): void {
 		this.allRowsSelected = !this.allRowsSelected
 
 		if (this.allRowsSelected) {
-			this.filteredSongs.forEach(song => this.playlistService.addToSelectedSongs(song))
+			this.filteredSongs.forEach(song => this.libraryService.addToSelectedSongs(song))
 		} else {
-			this.playlistService.clearSelectedSongs()
+			this.libraryService.clearSelectedSongs()
 		}
 	}
 

src-angular/app/components/library/library.component.html

@@ -0,0 +1,4 @@
+<div class="overflow-hidden">
+	<app-library-table></app-library-table>
+</div>
+<app-library-bar></app-library-bar>

src-angular/app/components/library/library.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+	selector: 'app-library',
+	templateUrl: './library.component.html',
+	standalone: false,
+})
+export class LibraryComponent {
+
+}

src-angular/app/components/playlist/playlist.component.html

@@ -1,4 +0,0 @@
-<div class="overflow-hidden">
-	<app-playlist-table></app-playlist-table>
-</div>
-<app-playlist-bar></app-playlist-bar>

src-angular/app/components/playlist/playlist.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-	selector: 'app-playlist',
-	templateUrl: './playlist.component.html',
-	standalone: false,
-})
-export class PlaylistComponent {
-
-}

src-angular/app/components/toolbar/toolbar.component.html

@@ -1,8 +1,8 @@
 <div class="navbar p-0 min-h-0 bg-base-100" style="-webkit-app-region: drag">
 	<div style="-webkit-app-region: no-drag">
 		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
+		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/library">Library</button>
 		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/tools">Tools</button>
-		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/playlist">Playlist</button>
 		<button class="btn btn-ghost rounded-none flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
 			<i *ngIf="updateAvailable === 'error'" class="bi bi-exclamation-triangle-fill text-warning"></i>
 			Settings