Quality of Coding

src/lib/components/ItemList.svelte

@@ -1,29 +1,4 @@
 <script context="module" lang="ts">
-	export type columnType<T> = {
-		enabled: boolean;
-		order: number;
-		label: string;
-		hover: string;
-		key: string;
-		sortable: (a: T, b: T) => number;
-		parser: (item: T) => string;
-		classes: string;
-		span: number;
-		sorted?: 0 | 1 | -1;
-		sortedHidden?: boolean;
-	};
-</script>
-
-<script lang="ts">
-	import { settings } from '$lib/settings';
-	import type { classTypes } from '$lib/data/contentManager';
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	export let items: classTypes[keyof classTypes][] = [];
-	export let selected = items[0];
-	export let columns: columnType<any>[];
-
 	/*
 	[
 		{
@@ -49,6 +24,31 @@
 	];
 	*/
 
+	export type columnType<T> = {
+		enabled: boolean;
+		order: number;
+		label: string;
+		hover: string;
+		key: string;
+		sortable: (a: T, b: T) => number;
+		parser: (item: T) => string;
+		classes: string;
+		span: number;
+		sorted?: 0 | 1 | -1;
+		sortedHidden?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import { settings } from '$lib/settings';
+	import type { classTypes } from '$lib/data/contentManager';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	export let items: classTypes[keyof classTypes][] = [];
+	export let selected = items[0];
+	export let columns: columnType<any>[];
+
 	let remainingSpan = Math.max(
 		1,
 		columns.filter((col) => col.enabled).reduce((a, b) => Math.max(a, 0) - Math.max(b.span, 0), 24)
@@ -76,15 +76,20 @@
 		});
 	}
 
-	// Set the selected item to the "real" first item on the list, as the list might be filtered or sorted by default.
+	function findByHash(hash: string) {
+		if (hash.includes('#')) hash = hash.split('#')[1];
+		return items.find((item) => item.hash === hash);
+	}
+
 	onMount(() => {
+		// If there is a hash, set the selected item to the item with the same title as the hash.
 		if ($page.url.hash) {
-			const hash = decodeURI($page.url.hash).replace('#', '');
-			const found = items.find((item) => item.title === hash);
+			const found = findByHash($page.url.hash);
 			if (found) selected = found;
 		} else {
+			// Set the selected item to the "real" first item on the list, as the list might be filtered or sorted by default.
 			selected = filteredItems[0];
-			if (selected) goto(`#${encodeURI(selected.title)}`);
+			if (selected) goto(`#${selected.hash}`);
 		}
 	});
 
@@ -106,8 +111,9 @@
 	}
 
 	function hashChange(event: HashChangeEvent & { currentTarget: EventTarget & Window }) {
-		const hash = decodeURI(event.newURL.split('#')[1]).replace('#', '');
-		const found = items.find((item) => item.title === hash);
+		const hash = event.newURL.split('#')[1]?.replace('#', '');
+		if (!hash) return;
+		const found = findByHash(hash);
 		if (found) selected = found;
 	}
 
@@ -179,7 +185,7 @@
 				class:active={selected === item}
 				on:click={() => {
 					if (selected !== item) selected = item;
-					goto(`#${encodeURI(item.title)}`);
+					goto(`#${item.hash}`);
 				}}
 			>
 				{#each columns

src/lib/data/classes/documentClass.ts

@@ -23,6 +23,10 @@ class Document<T extends dataTypesWithoutSource> {
 		return this.name.primary + (this.name.specifier ? `; ${this.name.specifier}` : '');
 	}
 
+	get hash(): string {
+		return encodeURI(this.title + '_' + this.source.ID);
+	}
+
 	get sourceData() {
 		return (
 			contentManager._source.find((src) => src.ID === this.source.ID) ?? {

src/lib/data/classes/homebrewSourceClass.ts

@@ -86,6 +86,10 @@ class HomebrewSource {
 		return this.fullTitle;
 	}
 
+	get hash(): string {
+		return encodeURI(this.title + '_' + this.ID);
+	}
+
 	get official(): boolean {
 		return false;
 	}

src/lib/data/classes/sourceClass.ts

@@ -18,6 +18,10 @@ class Source {
 		return this.name.full;
 	}
 
+	get hash(): string {
+		return encodeURI(this.title + '_' + this.ID);
+	}
+
 	get official(): boolean {
 		return this.tags?.misc?.Official || this.data.publisher?.includes('Paizo') || false;
 	}