From 83d9caaeefc2e1a3572452fe8b2a3c3ec6716a14 Mon Sep 17 00:00:00 2001
From: Inrixia <Inrixia@gmail.com>
Date: Sun, 23 Jun 2024 02:04:45 +1200
Subject: [PATCH] Fix - Downloader Settings, TidalTags Settings order,
 sharedStorage db close on undefined

---
 plugins/SongDownloader/src/Settings.ts    | 14 ++++++++------
 plugins/SongDownloader/src/index.ts       |  3 ++-
 plugins/TidalTags/src/Settings.ts         |  4 ++--
 plugins/_lib/components/DropdownSelect.ts | 17 +++++++++++++++++
 plugins/_lib/sharedStorage.ts             |  2 +-
 5 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 plugins/_lib/components/DropdownSelect.ts

diff --git a/plugins/SongDownloader/src/Settings.ts b/plugins/SongDownloader/src/Settings.ts
index 8148db16..47445516 100644
--- a/plugins/SongDownloader/src/Settings.ts
+++ b/plugins/SongDownloader/src/Settings.ts
@@ -1,17 +1,19 @@
 import { html } from "@neptune/voby";
 import { getSettings } from "@inrixia/lib/storage";
 import { AudioQualityInverse, AudioQuality, validQualitiesSettings } from "@inrixia/lib/AudioQualityTypes";
+import { DropdownSelect } from "@inrixia/lib/components/DropdownSelect";
 
 export const settings = getSettings({
 	desiredDownloadQuality: AudioQuality.HiRes,
 	defaultDownloadPath: "",
 });
-export const Settings = () => html`<div">
-	<h3 class="settings-header">Download Quality</h3>
-	<p class="settings-explainer">Select the desired max download quality:</p>
-	<select id="qualityDropdown" onChange=${(event: { target: { value: unknown } }) => (settings.desiredDownloadQuality = <AudioQuality>event.target.value)}>
-		${validQualitiesSettings.map((quality) => html`<option value=${quality} selected=${settings.desiredDownloadQuality === quality}>${AudioQualityInverse[quality]}</option>`)}
-	</select>
+export const Settings = () => html`<div>
+	<${DropdownSelect}
+		selected=${settings.desiredDownloadQuality}
+		onSelected=${(selected: AudioQuality) => (settings.desiredDownloadQuality = selected)}
+		options=${validQualitiesSettings}
+		title="Download Quality"
+	/>
 
 	<h3 class="settings-header">Download Path</h3>
 	<p class="settings-explainer">System path to save to. Doing so will disable download prompt</p>
diff --git a/plugins/SongDownloader/src/index.ts b/plugins/SongDownloader/src/index.ts
index 595aca55..09d5a21a 100644
--- a/plugins/SongDownloader/src/index.ts
+++ b/plugins/SongDownloader/src/index.ts
@@ -16,8 +16,9 @@ import { TrackItemCache } from "@inrixia/lib/Caches/TrackItemCache";
 import { Tracer } from "@inrixia/lib/trace";
 const trace = Tracer("[SongDownloader]");
 
-import { settings } from "./Settings";
 import safeUnload from "@inrixia/lib/safeUnload";
+
+import { settings } from "./Settings";
 export { Settings } from "./Settings";
 
 type DownloadButtoms = Record<string, HTMLButtonElement>;
diff --git a/plugins/TidalTags/src/Settings.ts b/plugins/TidalTags/src/Settings.ts
index 52ca0fb9..466e03f8 100644
--- a/plugins/TidalTags/src/Settings.ts
+++ b/plugins/TidalTags/src/Settings.ts
@@ -14,6 +14,6 @@ export const Settings = () => html`<div>
 	<${SwitchSetting} checked=${settings.showTags} onClick=${() => (settings.showTags = !settings.showTags)} title="Display tags" />
 	<${SwitchSetting} checked=${settings.showAtmosQuality} onClick=${() => (settings.showAtmosQuality = !settings.showAtmosQuality)} title="Display atmos tags" />
 	<${SwitchSetting} checked=${settings.showFLACInfoBorder} onClick=${() => (settings.showFLACInfoBorder = !settings.showFLACInfoBorder)} title="Display a border around the FLAC Info" />
-	<${SwitchSetting} checked=${settings.infoColumnColors} onClick=${() => (settings.infoColumnColors = !settings.infoColumnColors)} title="Display FLAC info columns" />
-	<${SwitchSetting} checked=${settings.displayInfoColumns} onClick=${() => (settings.displayInfoColumns = !settings.displayInfoColumns)} title="Display FLAC info columns in color" />
+	<${SwitchSetting} checked=${settings.displayInfoColumns} onClick=${() => (settings.displayInfoColumns = !settings.displayInfoColumns)} title="Display FLAC info columns" />
+	<${SwitchSetting} checked=${settings.infoColumnColors} onClick=${() => (settings.infoColumnColors = !settings.infoColumnColors)} title="Display FLAC info columns in color" />
 </div>`;
diff --git a/plugins/_lib/components/DropdownSelect.ts b/plugins/_lib/components/DropdownSelect.ts
new file mode 100644
index 00000000..555c5448
--- /dev/null
+++ b/plugins/_lib/components/DropdownSelect.ts
@@ -0,0 +1,17 @@
+import { html } from "@neptune/voby";
+
+type DropdownSelectProps = { selected: string; onSelect?: (selected: string) => void; options: string[]; title: string };
+export const DropdownSelect = ({ selected, onSelect, options, title }: DropdownSelectProps) => {
+	const onChange = (event: Event) => {
+		const target = event.target as HTMLSelectElement;
+		if (onSelect) onSelect(target.value);
+	};
+	return html`
+		<div style="margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;">
+			<label for="dropdown-${title}" style="font-size: 1.2em;margin-right: 10px;">${title}</label>
+			<select id="dropdown-${title}" value=${selected} onChange=${onChange} style="flex-grow: 1;">
+				${options.map((option) => html`<option value=${option} selected=${option === selected}>${option}</option>`)}
+			</select>
+		</div>
+	`;
+};
diff --git a/plugins/_lib/sharedStorage.ts b/plugins/_lib/sharedStorage.ts
index 31f79858..105f125c 100644
--- a/plugins/_lib/sharedStorage.ts
+++ b/plugins/_lib/sharedStorage.ts
@@ -30,7 +30,7 @@ export class SharedObjectStore<K extends IDBValidKey, V> {
 		}
 	}
 	public static close() {
-		return this.db.then((db) => db.close());
+		return this.db?.then((db) => db.close());
 	}
 
 	private readonly _memCache = new Map<K, V>();