Merge pull request #131 from teambtcmap/issues-help

Add help links

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>
 
@@ -29,4 +29,13 @@
 	>
 		Edit
 	</a>
+{:else if id === 'helpLink' && value}
+	<a
+		href={value}
+		target="_blank"
+		rel="noreferrer"
+		class="text-link transition-colors hover:text-hover"
+	>
+		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,
@@ -34,6 +34,7 @@
 		type: string;
 		viewLink: string;
 		editLink: string;
+		helpLink: string | undefined;
 	};
 
 	let table: Readable<Table<IssueFormatted>> | undefined;
@@ -74,8 +75,9 @@
 				const id = issue.merchantId.split(':');
 				const viewLink = id[0] + '/' + id[1];
 				const editLink = id[0] + '=' + id[1];
+				const helpLink = getIssueHelpLink(issue.type);
 
-				return { icon, name, type, viewLink, editLink };
+				return { icon, name, type, viewLink, editLink, helpLink };
 			});
 
 		const columns: ColumnDef<IssueFormatted>[] = [
@@ -113,6 +115,13 @@
 				cell: (info) => flexRender(IssueCell, { id: 'editLink', value: info.getValue() }),
 				enableSorting: false,
 				enableGlobalFilter: false
+			},
+			{
+				accessorKey: 'helpLink',
+				header: '',
+				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;
 };