small tweaks

packages/obsidian/src/main.ts

@@ -21,7 +21,7 @@ import { LegacyApiKeysModal } from 'packages/obsidian/src/modals/LegacyApiKeysMo
 import { PropertyMapper } from 'packages/obsidian/src/settings/PropertyMapper';
 import { PropertyMappingModel } from 'packages/obsidian/src/settings/PropertyMapping';
 import type { MediaDbPluginSettings } from 'packages/obsidian/src/settings/Settings';
-import { MediaDbSettingTab } from 'packages/obsidian/src/settings/Settings';
+import { LEGACY_API_KEY_SETTINGS, MediaDbSettingTab } from 'packages/obsidian/src/settings/Settings';
 import { getDefaultSettings } from 'packages/obsidian/src/settings/Settings';
 import { BulkImportHelper } from 'packages/obsidian/src/utils/BulkImportHelper';
 import { DateFormatter } from 'packages/obsidian/src/utils/DateFormatter';
@@ -171,14 +171,14 @@ export default class MediaDbPlugin extends Plugin {
 	}
 
 	private getLegacyApiKeyEntries(diskSettings: Record<string, unknown>): LegacyApiKeyEntry[] {
-		return this.settings.LegacyApiKeys.filter(key => typeof diskSettings[key] === 'string' && diskSettings[key].length > 0).map(key => ({
+		return LEGACY_API_KEY_SETTINGS.filter(key => typeof diskSettings[key] === 'string' && diskSettings[key].length > 0).map(key => ({
 			key,
 			value: diskSettings[key] as string,
 		}));
 	}
 
 	private removeLegacyApiKeys(settings: Record<string, unknown>): void {
-		for (const key of this.settings.LegacyApiKeys) {
+		for (const key of LEGACY_API_KEY_SETTINGS) {
 			delete settings[key];
 		}
 	}

packages/obsidian/src/modals/LegacyApiKeysModal.ts

@@ -30,19 +30,14 @@ export class LegacyApiKeysModal extends Modal {
 		});
 
 		intro.createEl('p', {
-			text: 'The new keychain-backed system will be used instead. The plugin will not be usable until the old plaintext keys have been deleted.',
+			text: 'You will need to re-add your API keys using Obsidians encrypted Keychain storage in the plugins settings.',
 		});
 
-		const textarea = wrapper.createEl('textarea', {
+		const pre = wrapper.createEl('pre', { cls: 'media-db-plugin-legacy-keys-pre' });
-			cls: 'media-db-plugin-legacy-keys-textarea',
+		const code = pre.createEl('code');
-			attr: {
-				readonly: 'true',
-				spellcheck: 'false',
-			},
-		});
 
-		textarea.value = this.entries.map(e => `${e.key}: ${e.value}`).join('\n');
+		code.innerText = this.entries.map(e => `${e.key}: ${e.value}`).join('\n');
-		textarea.addClass('media-db-plugin-hidden');
+		pre.addClass('media-db-plugin-hidden');
 
 		contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
 
@@ -51,7 +46,7 @@ export class LegacyApiKeysModal extends Modal {
 		bottomSettingRow.addButton(btn => {
 			btn.setButtonText('Copy');
 			btn.onClick(async () => {
-				await navigator.clipboard.writeText(textarea.value);
+				await navigator.clipboard.writeText(code.innerText);
 				new Notice('Legacy API keys copied to clipboard.');
 			});
 			btn.buttonEl.addClass('media-db-plugin-button');
@@ -61,12 +56,12 @@ export class LegacyApiKeysModal extends Modal {
 			btn.setButtonText('Show keys');
 
 			btn.onClick(() => {
-				const isHidden = textarea.hasClass('media-db-plugin-hidden');
+				const isHidden = pre.hasClass('media-db-plugin-hidden');
 				if (isHidden) {
-					textarea.removeClass('media-db-plugin-hidden');
+					pre.removeClass('media-db-plugin-hidden');
 					btn.setButtonText('Hide keys');
 				} else {
-					textarea.addClass('media-db-plugin-hidden');
+					pre.addClass('media-db-plugin-hidden');
 					btn.setButtonText('Show keys');
 				}
 			});
@@ -76,14 +71,12 @@ export class LegacyApiKeysModal extends Modal {
 
 		bottomSettingRow.addButton(btn => {
 			btn.setButtonText('Delete plaintext keys');
-			btn.setCta();
+			btn.setWarning();
 			btn.onClick(() => {
 				this.close();
 				this.onConfirm();
 			});
 			btn.buttonEl.addClass('media-db-plugin-button');
-			btn.buttonEl.addClass('mod-warning');
-			btn.buttonEl.addClass('mod-danger');
 		});
 	}
 

packages/obsidian/src/settings/Settings.ts

@@ -11,6 +11,8 @@ import { MediaType } from 'packages/obsidian/src/utils/MediaType';
 import { MEDIA_TYPES } from 'packages/obsidian/src/utils/MediaTypeManager';
 import { unCamelCase } from 'packages/obsidian/src/utils/Utils';
 
+export const LEGACY_API_KEY_SETTINGS: readonly string[] = ['OMDbKey', 'TMDBKey', 'MobyGamesKey', 'GiantBombKey', 'ComicVineKey', 'BoardgameGeekKey'];
+
 function createDateFormatDescription(preview: string): DocumentFragment {
 	return createFragment(frag => {
 		const container = frag.createDiv();
@@ -58,8 +60,6 @@ export interface MediaDbPluginSettings {
 	ComicVineKeyId: string;
 	BoardgameGeekKeyId: string;
 
-	LegacyApiKeys: readonly ['OMDbKey', 'TMDBKey', 'MobyGamesKey', 'GiantBombKey', 'ComicVineKey', 'BoardgameGeekKey'];
-
 	sfwFilter: boolean;
 	templates: boolean;
 	customDateFormat: string;
@@ -319,8 +319,6 @@ const DEFAULT_SETTINGS: MediaDbPluginSettings = {
 	ComicVineKeyId: '',
 	BoardgameGeekKeyId: '',
 
-	LegacyApiKeys: ['OMDbKey', 'TMDBKey', 'MobyGamesKey', 'GiantBombKey', 'ComicVineKey', 'BoardgameGeekKey'],
-
 	sfwFilter: true,
 	templates: true,
 	customDateFormat: 'L',

packages/obsidian/src/styles.css

@@ -312,23 +312,16 @@ small.media-db-plugin-list-text {
 	max-width: 100%;
 }
 
-.media-db-plugin-legacy-keys-textarea {
+.media-db-plugin-legacy-keys-pre {
 	width: 100%;
 	max-width: 100%;
-	min-height: var(--size-4-5);
-	min-width: var(--size-4-7);
-	box-sizing: border-box;
-	resize: vertical;
-	padding: var(--size-4-3);
 	border-radius: var(--radius-s);
-	border: 1px solid var(--background-modifier-border);
+	background: var(--code-background);
-	background: var(--background-primary);
 	color: var(--text-normal);
-	font-family: var(--font-monospace);
+	margin: 0;
-	font-size: var(--font-ui-smaller);
+	padding: var(--size-4-3) var(--size-4-4);
-	line-height: 1.5;
-	white-space: pre;
 }
+
 .media-db-plugin-hidden {
 	display: none;
 }