Interface conversion, search bar layout

src-angular/app/components/browse/chart-sidebar/chart-sidebar-instrument/chart-sidebar-instrument.component.html

@@ -0,0 +1,9 @@
+<div class="bg-neutral rounded-md">
+	<div class="text-center text-neutral-content">
+		{{ getEMHXString() }}
+	</div>
+	<div class="indicator">
+		<img class="w-12 m-2 mt-0" src="assets/images/instruments/{{ instrument }}.png" />
+		<span class="indicator-item indicator-bottom indicator-start badge badge-error badge-md ml-4 mb-4 font-bold">{{ getDiff() }}</span>
+	</div>
+</div>

src-angular/app/components/browse/chart-sidebar/chart-sidebar-instrument/chart-sidebar-instrument.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from '@angular/core'
+
+import { capitalize } from 'lodash'
+import { Instrument } from 'scan-chart'
+import { ChartData } from 'src-shared/interfaces/search.interface'
+import { instrumentToDiff } from 'src-shared/UtilFunctions'
+
+@Component({
+	selector: 'app-chart-sidebar-instrument',
+	templateUrl: './chart-sidebar-instrument.component.html',
+})
+export class ChartSidebarInstrumentComponent {
+
+	@Input() chart: ChartData
+	@Input() instrument: Instrument | 'vocals'
+
+	getDiff() {
+		const diff = this.chart[instrumentToDiff(this.instrument)]
+		return diff === null || diff < 0 ? '?' : diff
+	}
+
+	getEMHXString() {
+		if (this.instrument === 'vocals') { return 'Vocals' }
+
+		const difficulties = this.chart.notesData.noteCounts
+			.filter(nc => nc.instrument === this.instrument && nc.count > 0)
+			.map(nc => nc.difficulty)
+
+		if (difficulties.length === 1) {
+			return capitalize(difficulties[0])
+		}
+
+		let str = ''
+		if (difficulties.includes('easy')) { str += 'E' }
+		if (difficulties.includes('medium')) { str += 'M' }
+		if (difficulties.includes('hard')) { str += 'H' }
+		if (difficulties.includes('expert')) { str += 'X' }
+
+		return str
+	}
+}