refactor and add to other issues view

src/components/IssueCell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { IssueIcon } from '$lib/comp';
 
-	export let id: 'icon' | 'name' | 'type' | 'viewLink' | 'editLink';
+	export let id: 'icon' | 'name' | 'type' | 'viewLink' | 'editLink' | 'helpLink';
 	export let value: string;
 </script>
 
@@ -36,6 +36,6 @@
 		rel="noreferrer"
 		class="text-link transition-colors hover:text-hover"
 	>
-		How to fix?
+		Help
 	</a>
 {/if}

src/components/IssueIcon.svelte

@@ -4,7 +4,7 @@
 	export let icon: IssueIcon | string;
 </script>
 
-<div class="w-3">
+<div class="w-3 flex-shrink-0">
 	{#if icon === 'fa-calendar-days'}
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"
 			><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path

src/components/IssuesTable.svelte

@@ -2,7 +2,7 @@
 	import { IssueCell } from '$lib/comp';
 	import { theme } from '$lib/store';
 	import type { Issues } from '$lib/types';
-	import { debounce, detectTheme, getIssueIcon, isEven } from '$lib/utils';
+	import { debounce, detectTheme, getIssueHelpLink, getIssueIcon, isEven } from '$lib/utils';
 	import { rankItem } from '@tanstack/match-sorter-utils';
 	import type {
 		ColumnDef,
@@ -75,17 +75,7 @@
 				const id = issue.merchantId.split(':');
 				const viewLink = id[0] + '/' + id[1];
 				const editLink = id[0] + '=' + id[1];
-
-				let helpLink: string | undefined;
-
-				switch (issue.description) {
-					case 'Out of date':
-					case 'Not verified':
-						helpLink = 'https://wiki.btcmap.org/general/outdated';
-						break;
-					default:
-						helpLink = undefined;
-				}
+				const helpLink = getIssueHelpLink(issue.type);
 
 				return { icon, name, type, viewLink, editLink, helpLink };
 			});
@@ -113,23 +103,23 @@
 				enableGlobalFilter: false
 			},
 			{
-				accessorKey: 'helpLink',
+				accessorKey: 'viewLink',
 				header: '',
-				cell: (info) => flexRender(IssueCell, { id: 'helpLink', value: info.getValue() }),
+				cell: (info) => flexRender(IssueCell, { id: 'viewLink', value: info.getValue() }),
 				enableSorting: false,
 				enableGlobalFilter: false
 			},
 			{
-				accessorKey: 'viewLink',
+				accessorKey: 'editLink',
 				header: '',
-				cell: (info) => flexRender(IssueCell, { id: 'viewLink', value: info.getValue() }),
+				cell: (info) => flexRender(IssueCell, { id: 'editLink', value: info.getValue() }),
 				enableSorting: false,
 				enableGlobalFilter: false
 			},
 			{
-				accessorKey: 'editLink',
+				accessorKey: 'helpLink',
 				header: '',
-				cell: (info) => flexRender(IssueCell, { id: 'editLink', value: info.getValue() }),
+				cell: (info) => flexRender(IssueCell, { id: 'helpLink', value: info.getValue() }),
 				enableSorting: false,
 				enableGlobalFilter: false
 			}

src/components/TaggingIssues.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { CloseButton, IssueIcon } from '$lib/comp';
 	import { taggingIssues } from '$lib/store';
-	import { getIssueIcon } from '$lib/utils';
+	import { getIssueHelpLink, getIssueIcon } from '$lib/utils';
 	import OutClick from 'svelte-outclick';
 	import { fly } from 'svelte/transition';
 
@@ -25,6 +25,16 @@
 						<div class="flex items-center space-x-2">
 							<IssueIcon icon={getIssueIcon(issue.type)} />
 							<p>{issue.description}</p>
+							{#if getIssueHelpLink(issue.type)}
+								<a
+									href={getIssueHelpLink(issue.type)}
+									target="_blank"
+									rel="noreferrer"
+									class="text-link transition-colors hover:text-hover"
+								>
+									Help
+								</a>
+							{/if}
 						</div>
 					{/each}
 				{:else}

src/lib/utils.ts

@@ -131,6 +131,22 @@ export const getIssueIcon = (type: IssueType): IssueIcon => {
 	}
 };
 
+export const getIssueHelpLink = (type: IssueType) => {
+	switch (type) {
+		case 'out_of_date':
+		case 'out_of_date_soon':
+		case 'not_verified':
+			return 'https://wiki.btcmap.org/general/outdated';
+		case 'date_format':
+			return 'https://wiki.btcmap.org/general/tagging-instructions#verified-tags---more-information';
+		case 'misspelled_tag':
+			return 'https://wiki.btcmap.org/general/tagging-instructions#required-tags';
+		case 'missing_icon':
+		default:
+			return undefined;
+	}
+};
+
 export const isEven = (number: number) => {
 	return number % 2 === 0;
 };