Restructure; use DaisyUI

2026-04-11 14:19:38 +00:00 · 2023-11-28 19:50:45 -06:00
parent 49c3f38f99
commit 2eef4d0bee
727 changed files with 1283 additions and 298840 deletions
--- a/src-angular/app/app.component.ts
+++ b/src-angular/app/app.component.ts
@@ -11,7 +11,7 @@ export class AppComponent {

 	settingsLoaded = false

-	constructor(private settingsService: SettingsService) {
+	constructor(settingsService: SettingsService) {
 		// Ensure settings are loaded before rendering the application
 		settingsService.loadSettings().then(() => this.settingsLoaded = true)
 	}
--- a/src-angular/app/components/browse/browse.component.ts
+++ b/src-angular/app/components/browse/browse.component.ts
@@ -1,6 +1,7 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
+
+import { SearchService } from 'src-angular/app/core/services/search.service'

-import { SearchService } from 'src/app/core/services/search.service'
 import { ChartSidebarComponent } from './chart-sidebar/chart-sidebar.component'
 import { ResultTableComponent } from './result-table/result-table.component'
 import { StatusBarComponent } from './status-bar/status-bar.component'
@@ -10,7 +11,7 @@ import { StatusBarComponent } from './status-bar/status-bar.component'
 	templateUrl: './browse.component.html',
 	styleUrls: ['./browse.component.scss'],
 })
-export class BrowseComponent implements AfterViewInit {
+export class BrowseComponent {

 	@ViewChild('resultTable', { static: true }) resultTable: ResultTableComponent
 	@ViewChild('chartSidebar', { static: true }) chartSidebar: ChartSidebarComponent
@@ -18,18 +19,19 @@ export class BrowseComponent implements AfterViewInit {

 	constructor(private searchService: SearchService) { }

-	ngAfterViewInit() {
-		const $tableColumn = $('#table-column')
-		$tableColumn.on('scroll', () => {
-			const pos = $tableColumn[0].scrollTop + $tableColumn[0].offsetHeight
-			const max = $tableColumn[0].scrollHeight
-			if (pos >= max - 5) {
-				this.searchService.updateScroll()
-			}
-		})
+	// TODO
+	// ngAfterViewInit() {
+	// 	const $tableColumn = $('#table-column')
+	// 	$tableColumn.on('scroll', () => {
+	// 		const pos = $tableColumn[0].scrollTop + $tableColumn[0].offsetHeight
+	// 		const max = $tableColumn[0].scrollHeight
+	// 		if (pos >= max - 5) {
+	// 			this.searchService.updateScroll()
+	// 		}
+	// 	})

-		this.searchService.onNewSearch(() => {
-			$tableColumn.scrollTop(0)
-		})
-	}
+	// 	this.searchService.onNewSearch(() => {
+	// 		$tableColumn.scrollTop(0)
+	// 	})
+	// }
 }
--- a/src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.html
+++ b/src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.html
@@ -11,9 +11,9 @@
 	<div id="textPanel" class="content">
 		<span class="header">{{ selectedVersion.chartName }}</span>
 		<div class="description">
-			<div *ngIf="songResult.album === null"><b>Album:</b> {{ selectedVersion.album }} ({{ selectedVersion.year }})</div>
-			<div *ngIf="songResult.album !== null"><b>Year:</b> {{ selectedVersion.year }}</div>
-			<div *ngIf="songResult.genre === null"><b>Genre:</b> {{ selectedVersion.genre }}</div>
+			<div *ngIf="songResult!.album === null"><b>Album:</b> {{ selectedVersion.album }} ({{ selectedVersion.year }})</div>
+			<div *ngIf="songResult!.album !== null"><b>Year:</b> {{ selectedVersion.year }}</div>
+			<div *ngIf="songResult!.genre === null"><b>Genre:</b> {{ selectedVersion.genre }}</div>
 			<div>
 				<b>{{ charterPlural }}</b> {{ selectedVersion.charters }}
 			</div>
--- a/src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.ts
+++ b/src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.ts
@@ -1,14 +1,13 @@
 import { Component, OnInit } from '@angular/core'
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser'
+import { SafeUrl } from '@angular/platform-browser'

-import { SearchService } from 'src/app/core/services/search.service'
-import { SettingsService } from 'src/app/core/services/settings.service'
-import { groupBy } from 'src/electron/shared/UtilFunctions'
-import { SongResult } from '../../../../electron/shared/interfaces/search.interface'
-import { ChartedDifficulty, getInstrumentIcon, Instrument, VersionResult } from '../../../../electron/shared/interfaces/songDetails.interface'
-import { AlbumArtService } from '../../../core/services/album-art.service'
+import { SearchService } from 'src-angular/app/core/services/search.service'
+import { SettingsService } from 'src-angular/app/core/services/settings.service'
+
+import { SongResult } from '../../../../../src-shared/interfaces/search.interface'
+import { ChartedDifficulty, getInstrumentIcon, Instrument, VersionResult } from '../../../../../src-shared/interfaces/songDetails.interface'
+import { groupBy } from '../../../../../src-shared/UtilFunctions'
 import { DownloadService } from '../../../core/services/download.service'
-import { ElectronService } from '../../../core/services/electron.service'

 interface Difficulty {
 	instrument: string
@@ -23,7 +22,7 @@ interface Difficulty {
 })
 export class ChartSidebarComponent implements OnInit {

-	songResult: SongResult
+	songResult: SongResult | undefined
 	selectedVersion: VersionResult
 	charts: VersionResult[][]

@@ -34,11 +33,8 @@ export class ChartSidebarComponent implements OnInit {
 	downloadButtonText: string

 	constructor(
-		private electronService: ElectronService,
-		private albumArtService: AlbumArtService,
 		private downloadService: DownloadService,
 		private searchService: SearchService,
-		private sanitizer: DomSanitizer,
 		public settingsService: SettingsService
 	) { }

@@ -53,16 +49,13 @@ export class ChartSidebarComponent implements OnInit {
 	 * Displays the information for the selected song.
 	 */
 	async onRowClicked(result: SongResult) {
-		if (this.songResult == undefined || result.id != this.songResult.id) { // Clicking the same row again will not reload
+		if (this.songResult === undefined || result.id !== this.songResult.id) { // Clicking the same row again will not reload
 			this.songResult = result
-			const albumArt = this.albumArtService.getImage(result.id)
-			const results = await this.electronService.invoke('song-details', result.id)
+			const results = await window.electron.invoke.getSongDetails(result.id)
 			this.charts = groupBy(results, 'chartID').sort((v1, v2) => v1[0].chartName.length - v2[0].chartName.length)
 			this.sortCharts()
 			await this.selectChart(this.charts[0][0].chartID)
 			this.initChartDropdown()
-
-			this.updateAlbumArtSrc(await albumArt)
 		}
 	}

@@ -79,37 +72,27 @@ export class ChartSidebarComponent implements OnInit {
 		}
 	}

-	/**
-	 * Updates the sidebar to display the album art.
-	 */
-	updateAlbumArtSrc(albumArtBase64String?: string) {
-		if (albumArtBase64String) {
-			this.albumArtSrc = this.sanitizer.bypassSecurityTrustUrl('data:image/jpg;base64,' + albumArtBase64String)
-		} else {
-			this.albumArtSrc = null
-		}
-	}
-
 	/**
 	 * Initializes the chart dropdown from `this.charts` (or removes it if there's only one chart).
 	 */
 	private initChartDropdown() {
-		const values = this.charts.map(chart => {
-			const version = chart[0]
-			return {
-				value: version.chartID,
-				text: version.chartName,
-				name: `${version.chartName} <b>[${version.charters}]</b>`,
-			}
-		})
-		const $chartDropdown = $('#chartDropdown')
-		$chartDropdown.dropdown('setup menu', { values })
-		$chartDropdown.dropdown('setting', 'onChange', (chartID: number) => this.selectChart(chartID))
-		$chartDropdown.dropdown('set selected', values[0].value)
+		// TODO
+		// const values = this.charts.map(chart => {
+		// 	const version = chart[0]
+		// 	return {
+		// 		value: version.chartID,
+		// 		text: version.chartName,
+		// 		name: `${version.chartName} <b>[${version.charters}]</b>`,
+		// 	}
+		// })
+		// const $chartDropdown = $('#chartDropdown')
+		// $chartDropdown.dropdown('setup menu', { values })
+		// $chartDropdown.dropdown('setting', 'onChange', (chartID: number) => this.selectChart(chartID))
+		// $chartDropdown.dropdown('set selected', values[0].value)
 	}

 	private async selectChart(chartID: number) {
-		const chart = this.charts.find(chart => chart[0].chartID == chartID)
+		const chart = this.charts.find(chart => chart[0].chartID === chartID)!
 		await this.selectVersion(chart[0])
 		this.initVersionDropdown()
 	}
@@ -117,11 +100,11 @@ export class ChartSidebarComponent implements OnInit {
 	/**
 	 * Updates the sidebar to display the metadata for `selectedVersion`.
 	 */
-	async selectVersion(selectedVersion: VersionResult) {
-		this.selectedVersion = selectedVersion
+	async selectVersion(selectedVersion: VersionResult | undefined) {
+		this.selectedVersion = selectedVersion!
 		await new Promise<void>(resolve => setTimeout(() => resolve(), 0)) // Wait for *ngIf to update DOM

-		if (this.selectedVersion != undefined) {
+		if (this.selectedVersion !== undefined) {
 			this.updateCharterPlural()
 			this.updateSongLength()
 			this.updateDifficultiesList()
@@ -133,7 +116,7 @@ export class ChartSidebarComponent implements OnInit {
 	 * Chooses to display 'Charter:' or 'Charters:'.
 	 */
 	private updateCharterPlural() {
-		this.charterPlural = this.selectedVersion.charterIDs.split('&').length == 1 ? 'Charter:' : 'Charters:'
+		this.charterPlural = this.selectedVersion.charterIDs.split('&').length === 1 ? 'Charter:' : 'Charters:'
 	}

 	/**
@@ -141,7 +124,7 @@ export class ChartSidebarComponent implements OnInit {
 	 */
 	private updateSongLength() {
 		let seconds = this.selectedVersion.songLength
-		if (seconds < 60) { this.songLength = `${seconds} second${seconds == 1 ? '' : 's'}`; return }
+		if (seconds < 60) { this.songLength = `${seconds} second${seconds === 1 ? '' : 's'}`; return }
 		let minutes = Math.floor(seconds / 60)
 		let hours = 0
 		while (minutes > 59) {
@@ -149,7 +132,7 @@ export class ChartSidebarComponent implements OnInit {
 			minutes -= 60
 		}
 		seconds = Math.floor(seconds % 60)
-		this.songLength = `${hours == 0 ? '' : hours + ':'}${minutes == 0 ? '' : minutes + ':'}${seconds < 10 ? '0' + seconds : seconds}`
+		this.songLength = `${hours === 0 ? '' : hours + ':'}${minutes === 0 ? '' : minutes + ':'}${seconds < 10 ? '0' + seconds : seconds}`
 	}

 	/**
@@ -159,7 +142,7 @@ export class ChartSidebarComponent implements OnInit {
 		const instruments = Object.keys(this.selectedVersion.chartData.noteCounts) as Instrument[]
 		this.difficultiesList = []
 		for (const instrument of instruments) {
-			if (instrument != 'undefined') {
+			if (instrument !== 'undefined') {
 				this.difficultiesList.push({
 					instrument: getInstrumentIcon(instrument),
 					diffNumber: this.getDiffNumber(instrument),
@@ -173,8 +156,9 @@ export class ChartSidebarComponent implements OnInit {
 	 * @returns a string describing the difficulty number in the selected version.
 	 */
 	private getDiffNumber(instrument: Instrument) {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		const diffNumber: number = (this.selectedVersion as any)[`diff_${instrument}`]
-		return diffNumber == -1 || diffNumber == undefined ? 'Unknown' : String(diffNumber)
+		return diffNumber === -1 || diffNumber === undefined ? 'Unknown' : String(diffNumber)
 	}

 	/**
@@ -182,7 +166,7 @@ export class ChartSidebarComponent implements OnInit {
 	 */
 	private getChartedDifficultiesText(instrument: Instrument) {
 		const difficulties = Object.keys(this.selectedVersion.chartData.noteCounts[instrument]) as ChartedDifficulty[]
-		if (difficulties.length == 4) { return 'Full Difficulty' }
+		if (difficulties.length === 4) { return 'Full Difficulty' }
 		const difficultyNames = []
 		if (difficulties.includes('x')) { difficultyNames.push('Expert') }
 		if (difficulties.includes('h')) { difficultyNames.push('Hard') }
@@ -204,7 +188,7 @@ export class ChartSidebarComponent implements OnInit {
 		}

 		if (this.getSelectedChartVersions().length > 1) {
-			if (this.selectedVersion.versionID == this.selectedVersion.latestVersionID) {
+			if (this.selectedVersion.versionID === this.selectedVersion.latestVersionID) {
 				this.downloadButtonText += ' (Latest)'
 			} else {
 				this.downloadButtonText += ` (${this.getLastModifiedText(this.selectedVersion.lastModified)})`
@@ -216,26 +200,27 @@ export class ChartSidebarComponent implements OnInit {
 	 * Initializes the version dropdown from `this.selectedVersion` (or removes it if there's only one version).
 	 */
 	private initVersionDropdown() {
-		const $versionDropdown = $('#versionDropdown')
-		const versions = this.getSelectedChartVersions()
-		const values = versions.map(version => ({
-			value: version.versionID,
-			text: 'Uploaded ' + this.getLastModifiedText(version.lastModified),
-			name: 'Uploaded ' + this.getLastModifiedText(version.lastModified),
-		}))
+		// TODO
+		// const $versionDropdown = $('#versionDropdown')
+		// const versions = this.getSelectedChartVersions()
+		// const values = versions.map(version => ({
+		// 	value: version.versionID,
+		// 	text: 'Uploaded ' + this.getLastModifiedText(version.lastModified),
+		// 	name: 'Uploaded ' + this.getLastModifiedText(version.lastModified),
+		// }))

-		$versionDropdown.dropdown('setup menu', { values })
-		$versionDropdown.dropdown('setting', 'onChange', (versionID: number) => {
-			this.selectVersion(versions.find(version => version.versionID == versionID))
-		})
-		$versionDropdown.dropdown('set selected', values[0].value)
+		// $versionDropdown.dropdown('setup menu', { values })
+		// $versionDropdown.dropdown('setting', 'onChange', (versionID: number) => {
+		// 	this.selectVersion(versions.find(version => version.versionID === versionID))
+		// })
+		// $versionDropdown.dropdown('set selected', values[0].value)
 	}

 	/**
 	 * Returns the list of versions for the selected chart, sorted by `lastModified`.
 	 */
 	getSelectedChartVersions() {
-		return this.charts.find(chart => chart[0].chartID == this.selectedVersion.chartID)
+		return this.charts.find(chart => chart[0].chartID === this.selectedVersion.chartID)!
 	}

 	/**
@@ -255,7 +240,7 @@ export class ChartSidebarComponent implements OnInit {
 	 */
 	onSourceLinkClicked() {
 		const source = this.selectedVersion.driveData.source
-		this.electronService.sendIPC('open-url', source.proxyLink ?? `https://drive.google.com/drive/folders/${source.sourceDriveID}`)
+		window.electron.emit.openUrl(source.proxyLink ?? `https://drive.google.com/drive/folders/${source.sourceDriveID}`)
 	}

 	/**
@@ -263,14 +248,14 @@ export class ChartSidebarComponent implements OnInit {
 	 */
 	shownFolderButton() {
 		const driveData = this.selectedVersion.driveData
-		return driveData.source.proxyLink || driveData.source.sourceDriveID != driveData.folderID
+		return driveData.source.proxyLink || driveData.source.sourceDriveID !== driveData.folderID
 	}

 	/**
 	 * Opens the chart folder in the default browser.
 	 */
 	onFolderButtonClicked() {
-		this.electronService.sendIPC('open-url', `https://drive.google.com/drive/folders/${this.selectedVersion.driveData.folderID}`)
+		window.electron.emit.openUrl(`https://drive.google.com/drive/folders/${this.selectedVersion.driveData.folderID}`)
 	}

 	/**
@@ -280,7 +265,7 @@ export class ChartSidebarComponent implements OnInit {
 		this.downloadService.addDownload(
 			this.selectedVersion.versionID, {
 			chartName: this.selectedVersion.chartName,
-			artist: this.songResult.artist,
+			artist: this.songResult!.artist,
 			charter: this.selectedVersion.charters,
 			driveData: this.selectedVersion.driveData,
 		})
--- a/src-angular/app/components/browse/result-table/result-table-row/result-table-row.component.ts
+++ b/src-angular/app/components/browse/result-table/result-table-row/result-table-row.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'

-import { SongResult } from '../../../../../electron/shared/interfaces/search.interface'
+import { SongResult } from '../../../../../../src-shared/interfaces/search.interface'
 import { SelectionService } from '../../../../core/services/selection.service'

@Component({
@@ -22,19 +22,20 @@ export class ResultTableRowComponent implements AfterViewInit {
 	ngAfterViewInit() {
 		this.selectionService.onSelectionChanged(this.songID, isChecked => {
 			if (isChecked) {
-				$(this.checkbox.nativeElement).checkbox('check')
+				// TODO
+				// $(this.checkbox.nativeElement).checkbox('check')
 			} else {
-				$(this.checkbox.nativeElement).checkbox('uncheck')
+				// $(this.checkbox.nativeElement).checkbox('uncheck')
 			}
 		})

-		$(this.checkbox.nativeElement).checkbox({
-			onChecked: () => {
-				this.selectionService.selectSong(this.songID)
-			},
-			onUnchecked: () => {
-				this.selectionService.deselectSong(this.songID)
-			},
-		})
+		// $(this.checkbox.nativeElement).checkbox({
+		// 	onChecked: () => {
+		// 		this.selectionService.selectSong(this.songID)
+		// 	},
+		// 	onUnchecked: () => {
+		// 		this.selectionService.deselectSong(this.songID)
+		// 	},
+		// })
 	}
 }
--- a/src-angular/app/components/browse/result-table/result-table.component.ts
+++ b/src-angular/app/components/browse/result-table/result-table.component.ts
@@ -1,9 +1,9 @@
 import { Component, EventEmitter, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'

 import Comparators from 'comparators'
+import { SettingsService } from 'src-angular/app/core/services/settings.service'

-import { SettingsService } from 'src/app/core/services/settings.service'
-import { SongResult } from '../../../../electron/shared/interfaces/search.interface'
+import { SongResult } from '../../../../../src-shared/interfaces/search.interface'
 import { CheckboxDirective } from '../../../core/directives/checkbox.directive'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
@@ -22,7 +22,7 @@ export class ResultTableComponent implements OnInit {
 	@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>

 	results: SongResult[] = []
-	activeRowID: number = null
+	activeRowID: number | null = null
 	sortDirection: 'ascending' | 'descending' = 'descending'
 	sortColumn: 'name' | 'artist' | 'album' | 'genre' | null = null

@@ -54,11 +54,11 @@ export class ResultTableComponent implements OnInit {
 	}

 	onColClicked(column: 'name' | 'artist' | 'album' | 'genre') {
-		if (this.results.length == 0) { return }
-		if (this.sortColumn != column) {
+		if (this.results.length === 0) { return }
+		if (this.sortColumn !== column) {
 			this.sortColumn = column
 			this.sortDirection = 'descending'
-		} else if (this.sortDirection == 'descending') {
+		} else if (this.sortDirection === 'descending') {
 			this.sortDirection = 'ascending'
 		} else {
 			this.sortDirection = 'descending'
@@ -67,8 +67,8 @@ export class ResultTableComponent implements OnInit {
 	}

 	private updateSort() {
-		if (this.sortColumn != null) {
-			this.results.sort(Comparators.comparing(this.sortColumn, { reversed: this.sortDirection == 'ascending' }))
+		if (this.sortColumn !== null) {
+			this.results.sort(Comparators.comparing(this.sortColumn, { reversed: this.sortDirection === 'ascending' }))
 		}
 	}

--- a/src-angular/app/components/browse/search-bar/search-bar.component.ts
+++ b/src-angular/app/components/browse/search-bar/search-bar.component.ts
@@ -1,7 +1,8 @@
 import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'

-import { SearchService } from 'src/app/core/services/search.service'
-import { getDefaultSearch } from 'src/electron/shared/interfaces/search.interface'
+import { SearchService } from 'src-angular/app/core/services/search.service'
+
+import { getDefaultSearch } from '../../../../../src-shared/interfaces/search.interface'

@Component({
 	selector: 'app-search-bar',
@@ -23,22 +24,23 @@ export class SearchBarComponent implements AfterViewInit {
 	constructor(public searchService: SearchService) { }

 	ngAfterViewInit() {
-		$(this.searchIcon.nativeElement).popup({
-			onShow: () => this.isError, // Only show the popup if there is an error
-		})
+		// TODO
+		// $(this.searchIcon.nativeElement).popup({
+		// 	onShow: () => this.isError, // Only show the popup if there is an error
+		// })
 		this.searchService.onSearchErrorStateUpdate(isError => {
 			this.isError = isError
 		})
-		$(this.quantityDropdown.nativeElement).dropdown({
-			onChange: (value: string) => {
-				this.searchSettings.quantity = value as 'all' | 'any'
-			},
-		})
-		$(this.similarityDropdown.nativeElement).dropdown({
-			onChange: (value: string) => {
-				this.searchSettings.similarity = value as 'similar' | 'exact'
-			},
-		})
+		// $(this.quantityDropdown.nativeElement).dropdown({
+		// 	onChange: (value: string) => {
+		// 		this.searchSettings.quantity = value as 'all' | 'any'
+		// 	},
+		// })
+		// $(this.similarityDropdown.nativeElement).dropdown({
+		// 	onChange: (value: string) => {
+		// 		this.searchSettings.similarity = value as 'similar' | 'exact'
+		// 	},
+		// })
 	}

 	onSearch(query: string) {
@@ -53,17 +55,18 @@ export class SearchBarComponent implements AfterViewInit {

 		if (!this.sliderInitialized) {
 			setTimeout(() => { // Initialization requires this element to not be collapsed
-				$(this.diffSlider.nativeElement).slider({
-					min: 0,
-					max: 6,
-					start: 0,
-					end: 6,
-					step: 1,
-					onChange: (_length: number, min: number, max: number) => {
-						this.searchSettings.minDiff = min
-						this.searchSettings.maxDiff = max
-					},
-				})
+				// TODO
+				// $(this.diffSlider.nativeElement).slider({
+				// 	min: 0,
+				// 	max: 6,
+				// 	start: 0,
+				// 	end: 6,
+				// 	step: 1,
+				// 	onChange: (_length: number, min: number, max: number) => {
+				// 		this.searchSettings.minDiff = min
+				// 		this.searchSettings.maxDiff = max
+				// 	},
+				// })
 			}, 50)
 			this.sliderInitialized = true
 		}
--- a/src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html
+++ b/src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html
@@ -9,7 +9,7 @@
 			<span style="flex-grow: 1">{{ download.header }}</span>
 			<span *ngIf="!download.isLink" class="description">{{ download.description }}</span>
 			<span *ngIf="download.isLink" class="description">
-				<a (click)="openFolder(download.description)">{{ download.description }}</a>
+				<a (click)="showFile(download.description)">{{ download.description }}</a>
 			</span>
 		</div>

--- a/src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts
+++ b/src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts
@@ -1,8 +1,7 @@
 import { ChangeDetectorRef, Component } from '@angular/core'

-import { DownloadProgress } from '../../../../../electron/shared/interfaces/download.interface'
+import { DownloadProgress } from '../../../../../../src-shared/interfaces/download.interface'
 import { DownloadService } from '../../../../core/services/download.service'
-import { ElectronService } from '../../../../core/services/electron.service'

@Component({
 	selector: 'app-downloads-modal',
@@ -13,16 +12,16 @@ export class DownloadsModalComponent {

 	downloads: DownloadProgress[] = []

-	constructor(private electronService: ElectronService, private downloadService: DownloadService, ref: ChangeDetectorRef) {
-		electronService.receiveIPC('queue-updated', order => {
+	constructor(private downloadService: DownloadService, ref: ChangeDetectorRef) {
+		window.electron.on.queueUpdated(order => {
 			this.downloads.sort((a, b) => order.indexOf(a.versionID) - order.indexOf(b.versionID))
 		})

 		downloadService.onDownloadUpdated(download => {
-			const index = this.downloads.findIndex(thisDownload => thisDownload.versionID == download.versionID)
-			if (download.type == 'cancel') {
-				this.downloads = this.downloads.filter(thisDownload => thisDownload.versionID != download.versionID)
-			} else if (index == -1) {
+			const index = this.downloads.findIndex(thisDownload => thisDownload.versionID === download.versionID)
+			if (download.type === 'cancel') {
+				this.downloads = this.downloads.filter(thisDownload => thisDownload.versionID !== download.versionID)
+			} else if (index === -1) {
 				this.downloads.push(download)
 			} else {
 				this.downloads[index] = download
@@ -50,7 +49,7 @@ export class DownloadsModalComponent {
 		}
 	}

-	openFolder(filepath: string) {
-		this.electronService.showFolder(filepath)
+	showFile(filepath: string) {
+		window.electron.emit.showFile(filepath)
 	}
 }
--- a/src-angular/app/components/browse/status-bar/status-bar.component.ts
+++ b/src-angular/app/components/browse/status-bar/status-bar.component.ts
@@ -1,9 +1,8 @@
 import { ChangeDetectorRef, Component } from '@angular/core'

-import { VersionResult } from '../../../../electron/shared/interfaces/songDetails.interface'
-import { groupBy } from '../../../../electron/shared/UtilFunctions'
+import { VersionResult } from '../../../../../src-shared/interfaces/songDetails.interface'
+import { groupBy } from '../../../../../src-shared/UtilFunctions'
 import { DownloadService } from '../../../core/services/download.service'
-import { ElectronService } from '../../../core/services/electron.service'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'

@@ -23,7 +22,6 @@ export class StatusBarComponent {
 	chartGroups: VersionResult[][]

 	constructor(
-		private electronService: ElectronService,
 		private downloadService: DownloadService,
 		private searchService: SearchService,
 		private selectionService: SelectionService,
@@ -53,25 +51,26 @@ export class StatusBarComponent {
 	}

 	showDownloads() {
-		$('#downloadsModal').modal('show')
+		// TODO
+		// $('#downloadsModal').modal('show')
 	}

 	async downloadSelected() {
 		this.chartGroups = []
-		this.batchResults = await this.electronService.invoke('batch-song-details', this.selectedResults.map(result => result.id))
+		this.batchResults = await window.electron.invoke.getBatchSongDetails(this.selectedResults.map(result => result.id))
 		const versionGroups = groupBy(this.batchResults, 'songID')
 		for (const versionGroup of versionGroups) {
-			if (versionGroup.findIndex(version => version.chartID != versionGroup[0].chartID) != -1) {
+			if (versionGroup.findIndex(version => version.chartID !== versionGroup[0].chartID) !== -1) {
 				// Must have multiple charts of this song
-				this.chartGroups.push(versionGroup.filter(version => version.versionID == version.latestVersionID))
+				this.chartGroups.push(versionGroup.filter(version => version.versionID === version.latestVersionID))
 			}
 		}

-		if (this.chartGroups.length == 0) {
+		if (this.chartGroups.length === 0) {
 			for (const versions of versionGroups) {
 				this.searchService.sortChart(versions)
 				const downloadVersion = versions[0]
-				const downloadSong = this.selectedResults.find(song => song.id == downloadVersion.songID)
+				const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
 				this.downloadService.addDownload(
 					downloadVersion.versionID, {
 					chartName: downloadVersion.chartName,
@@ -81,7 +80,8 @@ export class StatusBarComponent {
 				})
 			}
 		} else {
-			$('#selectedModal').modal('show')
+			// TODO
+			// $('#selectedModal').modal('show')
 			// [download all charts for each song] [deselect these songs] [X]
 		}
 	}
@@ -91,7 +91,7 @@ export class StatusBarComponent {
 		for (const chart of songChartGroups) {
 			this.searchService.sortChart(chart)
 			const downloadVersion = chart[0]
-			const downloadSong = this.selectedResults.find(song => song.id == downloadVersion.songID)
+			const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
 			this.downloadService.addDownload(
 				downloadVersion.versionID, {
 				chartName: downloadVersion.chartName,
--- a/src-angular/app/components/settings/settings.component.html
+++ b/src-angular/app/components/settings/settings.component.html
@@ -15,13 +15,6 @@
 	</div>
 </div>

-<h3 class="ui header">Cache</h3>
-<div>
-	Current Cache Size:
-	<div class="ui label" style="margin-left: 1em">{{ cacheSize }}</div>
-</div>
-<button style="margin-top: 0.5em" (click)="clearCache()" class="ui button">Clear Cache</button>
-
 <h3 class="ui header">Downloads</h3>
 <div class="ui form">
 	<div class="field">
--- a/src-angular/app/components/settings/settings.component.ts
+++ b/src-angular/app/components/settings/settings.component.ts
@@ -1,8 +1,7 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

-import { CheckboxDirective } from 'src/app/core/directives/checkbox.directive'
-import { ElectronService } from 'src/app/core/services/electron.service'
-import { SettingsService } from 'src/app/core/services/settings.service'
+import { CheckboxDirective } from 'src-angular/app/core/directives/checkbox.directive'
+import { SettingsService } from 'src-angular/app/core/services/settings.service'

@Component({
 	selector: 'app-settings',
@@ -13,8 +12,7 @@ export class SettingsComponent implements OnInit, AfterViewInit {
 	@ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
 	@ViewChild(CheckboxDirective, { static: true }) videoCheckbox: CheckboxDirective

-	cacheSize = 'Calculating...'
-	updateAvailable = false
+	updateAvailable: boolean | null = false
 	loginClicked = false
 	downloadUpdateText = 'Update available'
 	retryUpdateText = 'Failed to check for update'
@@ -25,74 +23,66 @@ export class SettingsComponent implements OnInit, AfterViewInit {

 	constructor(
 		public settingsService: SettingsService,
-		private electronService: ElectronService,
 		private ref: ChangeDetectorRef
 	) { }

 	async ngOnInit() {
-		this.electronService.receiveIPC('update-available', result => {
-			this.updateAvailable = result != null
+		window.electron.on.updateAvailable(result => {
+			this.updateAvailable = result !== null
 			this.updateRetrying = false
-			if (this.updateAvailable) {
+			if (result !== null) {
 				this.downloadUpdateText = `Update available (${result.version})`
 			}
 			this.ref.detectChanges()
 		})
-		this.electronService.receiveIPC('update-error', (err: Error) => {
+		window.electron.on.updateError(err => {
 			console.log(err)
 			this.updateAvailable = null
 			this.updateRetrying = false
-			this.retryUpdateText = `Failed to check for update: ${err.message}`
+			this.retryUpdateText = `Failed to check for update: ${err}`
 			this.ref.detectChanges()
 		})
-		this.electronService.invoke('get-current-version', undefined).then(version => {
+		window.electron.invoke.getCurrentVersion().then(version => {
 			this.currentVersion = `v${version}`
 			this.ref.detectChanges()
 		})
-		this.electronService.invoke('get-update-available', undefined).then(isAvailable => {
+		window.electron.invoke.getUpdateAvailable().then(isAvailable => {
 			this.updateAvailable = isAvailable
 			this.ref.detectChanges()
 		})
-
-		const cacheSize = await this.settingsService.getCacheSize()
-		this.cacheSize = Math.round(cacheSize / 1000000) + ' MB'
 	}

 	ngAfterViewInit() {
-		$(this.themeDropdown.nativeElement).dropdown({
-			onChange: (_value: string, text: string) => {
-				this.settingsService.theme = text
-			},
-		})
+		// TODO
+		// $(this.themeDropdown.nativeElement).dropdown({
+		// 	onChange: (_value: string, text: string) => {
+		// 		this.settingsService.theme = text
+		// 	},
+		// })

 		this.videoCheckbox.check(this.settingsService.downloadVideos)
 	}

-	async clearCache() {
-		this.cacheSize = 'Please wait...'
-		await this.settingsService.clearCache()
-		this.cacheSize = 'Cleared!'
-	}
-
 	async downloadVideos(isChecked: boolean) {
 		this.settingsService.downloadVideos = isChecked
 	}

 	async getLibraryDirectory() {
-		const result = await this.electronService.showOpenDialog({
+		const result = await window.electron.invoke.showOpenDialog({
 			title: 'Choose library folder',
-			buttonLabel: 'This is where my charts are!',
 			defaultPath: this.settingsService.libraryDirectory || '',
 			properties: ['openDirectory'],
 		})

-		if (result.canceled == false) {
+		if (result.canceled === false) {
 			this.settingsService.libraryDirectory = result.filePaths[0]
 		}
 	}

 	openLibraryDirectory() {
-		this.electronService.openFolder(this.settingsService.libraryDirectory)
+		if (this.settingsService.libraryDirectory) {
+			window.electron.emit.showFolder(this.settingsService.libraryDirectory)
+		}
 	}

 	changeRateLimit(event: Event) {
@@ -102,16 +92,16 @@ export class SettingsComponent implements OnInit, AfterViewInit {

 	downloadUpdate() {
 		if (this.updateDownloaded) {
-			this.electronService.sendIPC('quit-and-install', undefined)
+			window.electron.emit.quitAndInstall()
 		} else if (!this.updateDownloading) {
 			this.updateDownloading = true
-			this.electronService.sendIPC('download-update', undefined)
+			window.electron.emit.downloadUpdate()
 			this.downloadUpdateText = 'Downloading... (0%)'
-			this.electronService.receiveIPC('update-progress', result => {
+			window.electron.on.updateProgress(result => {
 				this.downloadUpdateText = `Downloading... (${result.percent.toFixed(0)}%)`
 				this.ref.detectChanges()
 			})
-			this.electronService.receiveIPC('update-downloaded', () => {
+			window.electron.on.updateDownloaded(() => {
 				this.downloadUpdateText = 'Quit and install update'
 				this.updateDownloaded = true
 				this.ref.detectChanges()
@@ -120,21 +110,15 @@ export class SettingsComponent implements OnInit, AfterViewInit {
 	}

 	retryUpdate() {
-		if (this.updateRetrying == false) {
+		if (this.updateRetrying === false) {
 			this.updateRetrying = true
 			this.retryUpdateText = 'Retrying...'
 			this.ref.detectChanges()
-			this.electronService.sendIPC('retry-update', undefined)
+			window.electron.emit.retryUpdate()
 		}
 	}

 	toggleDevTools() {
-		const toolsOpened = this.electronService.currentWindow.webContents.isDevToolsOpened()
-
-		if (toolsOpened) {
-			this.electronService.currentWindow.webContents.closeDevTools()
-		} else {
-			this.electronService.currentWindow.webContents.openDevTools()
-		}
+		window.electron.emit.toggleDevTools()
 	}
 }
--- a/src-angular/app/components/toolbar/toolbar.component.html
+++ b/src-angular/app/components/toolbar/toolbar.component.html
@@ -1,15 +1,15 @@
-<div class="ui top menu">
-	<a class="item" routerLinkActive="active" routerLink="/browse">Browse</a>
+<div class="navbar bg-base-100">
+	<button class="btn btn-square btn-ghost" routerLinkActive="active" routerLink="/browse">Browse</button>
 	<!-- TODO <a class="item" routerLinkActive="active" routerLink="/library">Library</a> -->
-	<a class="item" routerLinkActive="active" routerLink="/settings">
+	<button class="btn btn-square btn-ghost" routerLinkActive="active" routerLink="/settings">
 		<i *ngIf="updateAvailable" class="teal small circle icon"></i>
 		<i *ngIf="updateAvailable === null" class="small yellow exclamation triangle icon"></i>
 		Settings
-	</a>
+	</button>

 	<div class="right menu">
-		<a class="item traffic-light" (click)="minimize()"><i class="minus icon"></i></a>
-		<a class="item traffic-light" (click)="toggleMaximized()"><i class="icon window" [ngClass]="isMaximized ? 'restore' : 'maximize'"></i></a>
-		<a class="item traffic-light close" (click)="close()"><i class="x icon"></i></a>
+		<a class="item traffic-light" (click)="minimize()"><i class="bi bi-dash-lg"></i></a>
+		<a class="item traffic-light" (click)="toggleMaximized()"><i class="bi" [ngClass]="isMaximized ? 'bi-window-stack' : 'bi-window'"></i></a>
+		<a class="item traffic-light close" (click)="close()"><i class="bi bi-x"></i></a>
 	</div>
 </div>
--- a/src-angular/app/components/toolbar/toolbar.component.ts
+++ b/src-angular/app/components/toolbar/toolbar.component.ts
@@ -1,7 +1,5 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core'

-import { ElectronService } from '../../core/services/electron.service'
-
@Component({
 	selector: 'app-toolbar',
 	templateUrl: './toolbar.component.html',
@@ -10,47 +8,47 @@ import { ElectronService } from '../../core/services/electron.service'
 export class ToolbarComponent implements OnInit {

 	isMaximized: boolean
-	updateAvailable = false
+	updateAvailable: boolean | null = false

-	constructor(private electronService: ElectronService, private ref: ChangeDetectorRef) { }
+	constructor(private ref: ChangeDetectorRef) { }

 	async ngOnInit() {
-		this.isMaximized = this.electronService.currentWindow.isMaximized()
-		this.electronService.currentWindow.on('unmaximize', () => {
+		this.isMaximized = await window.electron.invoke.isMaximized()
+		window.electron.on.minimized(() => {
 			this.isMaximized = false
 			this.ref.detectChanges()
 		})
-		this.electronService.currentWindow.on('maximize', () => {
+		window.electron.on.maximized(() => {
 			this.isMaximized = true
 			this.ref.detectChanges()
 		})

-		this.electronService.receiveIPC('update-available', result => {
-			this.updateAvailable = result != null
+		window.electron.on.updateAvailable(result => {
+			this.updateAvailable = result !== null
 			this.ref.detectChanges()
 		})
-		this.electronService.receiveIPC('update-error', () => {
+		window.electron.on.updateError(() => {
 			this.updateAvailable = null
 			this.ref.detectChanges()
 		})
-		this.updateAvailable = await this.electronService.invoke('get-update-available', undefined)
+		this.updateAvailable = await window.electron.invoke.getUpdateAvailable()
 		this.ref.detectChanges()
 	}

 	minimize() {
-		this.electronService.currentWindow.minimize()
+		window.electron.emit.minimize()
 	}

-	toggleMaximized() {
-		if (this.isMaximized) {
-			this.electronService.currentWindow.restore()
+	async toggleMaximized() {
+		if (await window.electron.invoke.isMaximized()) {
+			window.electron.emit.restore()
 		} else {
-			this.electronService.currentWindow.maximize()
+			window.electron.emit.maximize()
 		}
 		this.isMaximized = !this.isMaximized
 	}

 	close() {
-		this.electronService.quit()
+		window.electron.emit.quit()
 	}
 }
--- a/src-angular/app/core/directives/checkbox.directive.ts
+++ b/src-angular/app/core/directives/checkbox.directive.ts
@@ -1,34 +1,35 @@
-import { AfterViewInit, Directive, ElementRef, EventEmitter, Output } from '@angular/core'
+import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'

@Directive({
 	selector: '[appCheckbox]',
 })
-export class CheckboxDirective implements AfterViewInit {
+export class CheckboxDirective {
 	@Output() checked = new EventEmitter<boolean>()

 	_isChecked = false

 	constructor(private checkbox: ElementRef) { }

-	ngAfterViewInit() {
-		$(this.checkbox.nativeElement).checkbox({
-			onChecked: () => {
-				this.checked.emit(true)
-				this._isChecked = true
-			},
-			onUnchecked: () => {
-				this.checked.emit(false)
-				this._isChecked = false
-			},
-		})
-	}
+	// ngAfterViewInit() {
+	// TODO
+	// $(this.checkbox.nativeElement).checkbox({
+	// 	onChecked: () => {
+	// 		this.checked.emit(true)
+	// 		this._isChecked = true
+	// 	},
+	// 	onUnchecked: () => {
+	// 		this.checked.emit(false)
+	// 		this._isChecked = false
+	// 	},
+	// })
+	// }

 	check(isChecked: boolean) {
 		this._isChecked = isChecked
 		if (isChecked) {
-			$(this.checkbox.nativeElement).checkbox('check')
+			this.checkbox.nativeElement.checked = true
 		} else {
-			$(this.checkbox.nativeElement).checkbox('uncheck')
+			this.checkbox.nativeElement.checked = false
 		}
 	}

--- a/src-angular/app/core/directives/progress-bar.directive.ts
+++ b/src-angular/app/core/directives/progress-bar.directive.ts
@@ -1,7 +1,5 @@
 import { Directive, ElementRef, Input } from '@angular/core'

-import * as _ from 'lodash'
-
@Directive({
 	selector: '[appProgressBar]',
 })
@@ -17,13 +15,14 @@ export class ProgressBarDirective {
 	}

 	constructor(private element: ElementRef) {
-		this.progress = _.throttle((percent: number) => this.$progressBar.progress('set').percent(percent), 100)
+		// TODO
+		// this.progress = throttle((percent: number) => this.$progressBar.progress('set').percent(percent), 100)
 	}

-	private get $progressBar() {
-		if (!this._$progressBar) {
-			this._$progressBar = $(this.element.nativeElement)
-		}
-		return this._$progressBar
-	}
+	// private get $progressBar() {
+	// 	if (!this._$progressBar) {
+	// 		this._$progressBar = $(this.element.nativeElement)
+	// 	}
+	// 	return this._$progressBar
+	// }
 }
--- a/src-angular/app/core/services/album-art.service.ts
+++ b/src-angular/app/core/services/album-art.service.ts
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core'
-
-import { ElectronService } from './electron.service'
-
-@Injectable({
-	providedIn: 'root',
-})
-export class AlbumArtService {
-
-	private imageCache: { [songID: number]: string } = {}
-
-	constructor(private electronService: ElectronService) { }
-
-	async getImage(songID: number): Promise<string | null> {
-		if (this.imageCache[songID] == undefined) {
-			const albumArtResult = await this.electronService.invoke('album-art', songID)
-			if (albumArtResult) {
-				this.imageCache[songID] = albumArtResult.base64Art
-			} else {
-				this.imageCache[songID] = null
-			}
-		}
-
-		return this.imageCache[songID]
-	}
-}
--- a/src-angular/app/core/services/download.service.ts
+++ b/src-angular/app/core/services/download.service.ts
@@ -1,7 +1,6 @@
 import { EventEmitter, Injectable } from '@angular/core'

-import { DownloadProgress, NewDownload } from '../../../electron/shared/interfaces/download.interface'
-import { ElectronService } from './electron.service'
+import { DownloadProgress, NewDownload } from '../../../../src-shared/interfaces/download.interface'

@Injectable({
 	providedIn: 'root',
@@ -11,13 +10,13 @@ export class DownloadService {
 	private downloadUpdatedEmitter = new EventEmitter<DownloadProgress>()
 	private downloads: DownloadProgress[] = []

-	constructor(private electronService: ElectronService) {
-		this.electronService.receiveIPC('download-updated', result => {
+	constructor() {
+		window.electron.on.downloadUpdated(result => {
 			// Update <this.downloads> with result
-			const thisDownloadIndex = this.downloads.findIndex(download => download.versionID == result.versionID)
-			if (result.type == 'cancel') {
-				this.downloads = this.downloads.filter(download => download.versionID != result.versionID)
-			} else if (thisDownloadIndex == -1) {
+			const thisDownloadIndex = this.downloads.findIndex(download => download.versionID === result.versionID)
+			if (result.type === 'cancel') {
+				this.downloads = this.downloads.filter(download => download.versionID !== result.versionID)
+			} else if (thisDownloadIndex === -1) {
 				this.downloads.push(result)
 			} else {
 				this.downloads[thisDownloadIndex] = result
@@ -32,7 +31,7 @@ export class DownloadService {
 	}

 	get completedCount() {
-		return this.downloads.filter(download => download.type == 'done').length
+		return this.downloads.filter(download => download.type === 'done').length
 	}

 	get totalDownloadingPercent() {
@@ -48,15 +47,15 @@ export class DownloadService {
 	}

 	get anyErrorsExist() {
-		return this.downloads.find(download => download.type == 'error') ? true : false
+		return this.downloads.find(download => download.type === 'error') ? true : false
 	}

 	addDownload(versionID: number, newDownload: NewDownload) {
-		if (!this.downloads.find(download => download.versionID == versionID)) { // Don't download something twice
-			if (this.downloads.every(download => download.type == 'done')) { // Reset overall progress bar if it finished
+		if (!this.downloads.find(download => download.versionID === versionID)) { // Don't download something twice
+			if (this.downloads.every(download => download.type === 'done')) { // Reset overall progress bar if it finished
 				this.downloads.forEach(download => download.stale = true)
 			}
-			this.electronService.sendIPC('download', { action: 'add', versionID, data: newDownload })
+			window.electron.emit.download({ action: 'add', versionID, data: newDownload })
 		}
 	}

@@ -65,25 +64,25 @@ export class DownloadService {
 	}

 	cancelDownload(versionID: number) {
-		const removedDownload = this.downloads.find(download => download.versionID == versionID)
+		const removedDownload = this.downloads.find(download => download.versionID === versionID)!
 		if (['error', 'done'].includes(removedDownload.type)) {
-			this.downloads = this.downloads.filter(download => download.versionID != versionID)
+			this.downloads = this.downloads.filter(download => download.versionID !== versionID)
 			removedDownload.type = 'cancel'
 			this.downloadUpdatedEmitter.emit(removedDownload)
 		} else {
-			this.electronService.sendIPC('download', { action: 'cancel', versionID })
+			window.electron.emit.download({ action: 'cancel', versionID })
 		}
 	}

 	cancelCompleted() {
 		for (const download of this.downloads) {
-			if (download.type == 'done') {
+			if (download.type === 'done') {
 				this.cancelDownload(download.versionID)
 			}
 		}
 	}

 	retryDownload(versionID: number) {
-		this.electronService.sendIPC('download', { action: 'retry', versionID })
+		window.electron.emit.download({ action: 'retry', versionID })
 	}
 }
--- a/src-angular/app/core/services/electron.service.ts
+++ b/src-angular/app/core/services/electron.service.ts
@@ -1,81 +0,0 @@
-import { Injectable } from '@angular/core'
-
-// If you import a module but never use any of the imported values other than as TypeScript types,
-// the resulting javascript file will look as if you never imported the module at all.
-import * as electron from 'electron'
-
-import { IPCEmitEvents, IPCInvokeEvents } from '../../../electron/shared/IPCHandler'
-
-const { app, getCurrentWindow, dialog, session } = window.require('@electron/remote')
-
-@Injectable({
-	providedIn: 'root',
-})
-export class ElectronService {
-	electron: typeof electron
-
-	get isElectron() {
-		return !!(window && window.process && window.process.type)
-	}
-
-	constructor() {
-		if (this.isElectron) {
-			this.electron = window.require('electron')
-			this.receiveIPC('log', results => results.forEach(result => console.log(result)))
-		}
-	}
-
-	get currentWindow() {
-		return getCurrentWindow()
-	}
-
-	/**
-	 * Calls an async function in the main process.
-	 * @param event The name of the IPC event to invoke.
-	 * @param data The data object to send across IPC.
-	 * @returns A promise that resolves to the output data.
-	 */
-	async invoke<E extends keyof IPCInvokeEvents>(event: E, data: IPCInvokeEvents[E]['input']) {
-		return this.electron.ipcRenderer.invoke(event, data) as Promise<IPCInvokeEvents[E]['output']>
-	}
-
-	/**
-	 * Sends an IPC message to the main process.
-	 * @param event The name of the IPC event to send.
-	 * @param data The data object to send across IPC.
-	 */
-	sendIPC<E extends keyof IPCEmitEvents>(event: E, data: IPCEmitEvents[E]) {
-		this.electron.ipcRenderer.send(event, data)
-	}
-
-	/**
-	 * Receives an IPC message from the main process.
-	 * @param event The name of the IPC event to receive.
-	 * @param callback The data object to receive across IPC.
-	 */
-	receiveIPC<E extends keyof IPCEmitEvents>(event: E, callback: (result: IPCEmitEvents[E]) => void) {
-		this.electron.ipcRenderer.on(event, (_event, ...results) => {
-			callback(results[0])
-		})
-	}
-
-	quit() {
-		app.exit()
-	}
-
-	openFolder(filepath: string) {
-		this.electron.shell.openPath(filepath)
-	}
-
-	showFolder(filepath: string) {
-		this.electron.shell.showItemInFolder(filepath)
-	}
-
-	showOpenDialog(options: Electron.OpenDialogOptions) {
-		return dialog.showOpenDialog(this.currentWindow, options)
-	}
-
-	get defaultSession() {
-		return session.defaultSession
-	}
-}
--- a/src-angular/app/core/services/search.service.ts
+++ b/src-angular/app/core/services/search.service.ts
@@ -1,8 +1,7 @@
 import { EventEmitter, Injectable } from '@angular/core'

-import { SongResult, SongSearch } from 'src/electron/shared/interfaces/search.interface'
-import { VersionResult } from 'src/electron/shared/interfaces/songDetails.interface'
-import { ElectronService } from './electron.service'
+import { SongResult, SongSearch } from '../../../../src-shared/interfaces/search.interface'
+import { VersionResult } from '../../../../src-shared/interfaces/songDetails.interface'

@Injectable({
 	providedIn: 'root',
@@ -17,14 +16,12 @@ export class SearchService {
 	private currentQuery: SongSearch
 	private _allResultsVisible = true

-	constructor(private electronService: ElectronService) { }
-
 	async newSearch(query: SongSearch) {
 		if (this.awaitingResults) { return }
 		this.awaitingResults = true
 		this.currentQuery = query
 		try {
-			this.results = this.trimLastChart(await this.electronService.invoke('song-search', this.currentQuery))
+			this.results = this.trimLastChart(await window.electron.invoke.songSearch(this.currentQuery))
 			this.errorStateEmitter.emit(false)
 		} catch (err) {
 			this.results = []
@@ -74,7 +71,7 @@ export class SearchService {
 		if (!this.awaitingResults && !this._allResultsVisible) {
 			this.awaitingResults = true
 			this.currentQuery.offset += 50
-			this.results.push(...this.trimLastChart(await this.electronService.invoke('song-search', this.currentQuery)))
+			this.results.push(...this.trimLastChart(await window.electron.invoke.songSearch(this.currentQuery)))
 			this.awaitingResults = false

 			this.resultsChangedEmitter.emit(this.results)
@@ -105,7 +102,7 @@ export class SearchService {
 		versionResults.forEach(version => dates[version.versionID] = new Date(version.lastModified).getTime())
 		versionResults.sort((v1, v2) => {
 			const diff = dates[v2.versionID] - dates[v1.versionID]
-			if (Math.abs(diff) < 6.048e+8 && v1.driveData.inChartPack != v2.driveData.inChartPack) {
+			if (Math.abs(diff) < 6.048e+8 && v1.driveData.inChartPack !== v2.driveData.inChartPack) {
 				if (v1.driveData.inChartPack) {
 					return 1 // prioritize v2
 				} else {
--- a/src-angular/app/core/services/selection.service.ts
+++ b/src-angular/app/core/services/selection.service.ts
@@ -1,6 +1,6 @@
 import { EventEmitter, Injectable } from '@angular/core'

-import { SongResult } from '../../../electron/shared/interfaces/search.interface'
+import { SongResult } from '../../../../src-shared/interfaces/search.interface'
 import { SearchService } from './search.service'

 // Note: this class prevents event cycles by only emitting events if the checkbox changes
@@ -35,7 +35,7 @@ export class SelectionService {
 	}

 	getSelectedResults() {
-		return this.searchResults.filter(result => this.selections[result.id] == true)
+		return this.searchResults.filter(result => this.selections[result.id] === true)
 	}

 	onSelectAllChanged(callback: (selected: boolean) => void) {
--- a/src-angular/app/core/services/settings.service.ts
+++ b/src-angular/app/core/services/settings.service.ts
@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core'

-import { Settings } from 'src/electron/shared/Settings'
-import { ElectronService } from './electron.service'
+import { Settings } from '../../../../src-shared/Settings'

@Injectable({
 	providedIn: 'root',
@@ -12,22 +11,20 @@ export class SettingsService {
 	private settings: Settings
 	private currentThemeLink: HTMLLinkElement

-	constructor(private electronService: ElectronService) { }
-
 	async loadSettings() {
-		this.settings = await this.electronService.invoke('get-settings', undefined)
-		if (this.settings.theme != this.builtinThemes[0]) {
+		this.settings = await window.electron.invoke.getSettings()
+		if (this.settings.theme !== this.builtinThemes[0]) {
 			this.changeTheme(this.settings.theme)
 		}
 	}

 	saveSettings() {
-		this.electronService.sendIPC('set-settings', this.settings)
+		window.electron.emit.setSettings(this.settings)
 	}

 	changeTheme(theme: string) {
-		if (this.currentThemeLink != undefined) this.currentThemeLink.remove()
-		if (theme == 'Default') { return }
+		if (this.currentThemeLink !== undefined) this.currentThemeLink.remove()
+		if (theme === 'Default') { return }

 		const link = document.createElement('link')
 		link.type = 'text/css'
@@ -36,21 +33,11 @@ export class SettingsService {
 		this.currentThemeLink = document.head.appendChild(link)
 	}

-	async getCacheSize() {
-		return this.electronService.defaultSession.getCacheSize()
-	}
-
-	async clearCache() {
-		this.saveSettings()
-		await this.electronService.defaultSession.clearCache()
-		await this.electronService.invoke('clear-cache', undefined)
-	}
-
 	// Individual getters/setters
 	get libraryDirectory() {
 		return this.settings.libraryPath
 	}
-	set libraryDirectory(newValue: string) {
+	set libraryDirectory(newValue: string | undefined) {
 		this.settings.libraryPath = newValue
 		this.saveSettings()
 	}
--- a/src-angular/app/core/tab-persist.strategy.ts
+++ b/src-angular/app/core/tab-persist.strategy.ts
@@ -13,15 +13,15 @@ export class TabPersistStrategy extends RouteReuseStrategy {
 	}
 	store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) {
 		if (route.data.shouldReuse) {
-			this.handles[route.routeConfig.path] = handle
+			this.handles[route.routeConfig!.path!] = handle
 		}
 	}
 	shouldAttach(route: ActivatedRouteSnapshot) {
-		return !!route.routeConfig && !!this.handles[route.routeConfig.path]
+		return !!route.routeConfig && !!this.handles[route.routeConfig!.path!]
 	}
 	retrieve(route: ActivatedRouteSnapshot) {
 		if (!route.routeConfig) return null
-		return this.handles[route.routeConfig.path]
+		return this.handles[route.routeConfig!.path!]
 	}
 	shouldReuseRoute(future: ActivatedRouteSnapshot) {
 		return future.data.shouldReuse || false