Add help messages for new users

src/components/HelpMessage.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { browser } from '$app/environment'
+	import { faLightbulb } from '@fortawesome/free-solid-svg-icons'
+	import type { Snippet } from 'svelte'
+	import Fa from 'svelte-fa'
+
+	type Props = {
+		id: string
+		children: Snippet
+	}
+
+	let { id, children }: Props = $props()
+
+	let show_message = $derived(browser && !window.localStorage.getItem(`help:${id}`))
+
+	function hide_message() {
+		show_message = false
+		if (!browser) return
+		window.localStorage.setItem(`help:${id}`, 'hide')
+	}
+</script>
+
+{#if show_message}
+	<div class="message">
+		<Fa icon={faLightbulb} color="var(--accent-color)" />&nbsp;
+		{@render children()}
+		<button onclick={hide_message}>Hide this message</button>
+	</div>
+{/if}
+
+<style>
+	.message {
+		margin-block: 1rem;
+		font-size: 1rem;
+		background-color: var(--secondary-bg-color);
+		padding: 0.5rem 1rem;
+		border-radius: 1rem;
+	}
+
+	button {
+		text-decoration: underline;
+	}
+</style>

src/routes/category-implications/+page.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { browser } from '$app/environment'
+	import HelpMessage from '$components/HelpMessage.svelte'
 	import ImplicationList from '$components/ImplicationList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SearchFilter from '$components/SearchFilter.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
 	import { normalize_text, pluralize } from '$lib/client/utils'
+	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+	import Fa from 'svelte-fa'
 
 	let { data } = $props()
 
@@ -47,6 +50,10 @@
 	})}
 </p>
 
+<HelpMessage id="implication-link">
+	New here? Click any <Fa icon={faInfoCircle} /> icon to view the proof for that implication.
+</HelpMessage>
+
 <ImplicationList implications={filtered_implications} />
 
 <p class="hint">

src/routes/category-property/[id]/+page.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	import CategoryList from '$components/CategoryList.svelte'
+	import HelpMessage from '$components/HelpMessage.svelte'
 	import ImplicationList from '$components/ImplicationList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
 	import { pluralize } from '$lib/client/utils'
 	import { get_property_url } from '$lib/commons/property.url'
+	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+	import Fa from 'svelte-fa'
 
 	let { data } = $props()
 </script>
@@ -56,6 +59,10 @@
 	</ul>
 {/if}
 
+<HelpMessage id="implication-link">
+	New here? Click any <Fa icon={faInfoCircle} /> icon to view the proof for that implication.
+</HelpMessage>
+
 <h3 class="sticky-heading">Relevant implications</h3>
 
 <ImplicationList

src/routes/category/[id]/+page.svelte

@@ -7,9 +7,10 @@
 	import TextWithReason from '$components/TextWithReason.svelte'
 	import { filter_by_tag, pluralize } from '$lib/client/utils'
 	import CategoryList from '$components/CategoryList.svelte'
-	import { faQuestion } from '@fortawesome/free-solid-svg-icons'
+	import { faCommentDots, faQuestion } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import HelpMessage from '$components/HelpMessage.svelte'
 
 	let { data } = $props()
 
@@ -80,6 +81,11 @@
 	{/if}
 </section>
 
+<HelpMessage id="proof-bubble">
+	New here? Click any <Fa icon={faCommentDots} scale={0.825} /> icon to view the proof for
+	that property.
+</HelpMessage>
+
 <div class="two-columns">
 	<section>
 		<h3 class="sticky-heading">Satisfied Properties</h3>