add doc links to each page

Signed-off-by: RonniSkansing <rskansing@gmail.com>

frontend/src/lib/components/Headline.svelte

@@ -1,5 +1,27 @@
-<h1
-	class="text-3xl text-gray-600 dark:text-gray-300 font-bold uppercase transition-colors duration-200"
->
-	<slot />
-</h1>
+<script>
+	import { guideURL } from '$lib/consts/docs';
+
+	// When set, a help icon linking to the matching guide page is shown.
+	export let docSlug = '';
+	export let docAnchor = '';
+</script>
+
+<div class="flex items-start gap-2">
+	<h1
+		class="text-3xl text-gray-600 dark:text-gray-300 font-bold uppercase transition-colors duration-200"
+	>
+		<slot />
+	</h1>
+	{#if docSlug}
+		<a
+			class="mt-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-gray-300 text-[10px] font-medium leading-none text-gray-400 hover:border-gray-500 hover:text-gray-600 dark:border-gray-600 dark:text-gray-500 dark:hover:border-gray-400 dark:hover:text-gray-300 transition-colors duration-200"
+			href={guideURL(docSlug, docAnchor)}
+			target="_blank"
+			rel="noopener noreferrer"
+			title="Open the documentation for this page"
+			aria-label="Open the documentation for this page"
+		>
+			?
+		</a>
+	{/if}
+</div>

frontend/src/lib/consts/docs.js

@@ -0,0 +1,8 @@
+// Public documentation guide location.
+export const DOCS_BASE = 'https://phishing.club/guide';
+
+// Build a link to a guide page. The anchor is optional.
+export function guideURL(slug, anchor) {
+	const base = `${DOCS_BASE}/${slug}/`;
+	return anchor ? `${base}#${anchor}` : base;
+}

frontend/src/routes/api-sender/+page.svelte

@@ -364,7 +364,7 @@
 
 <HeadTitle title="API Senders" />
 <main>
-	<Headline>API Senders</Headline>
+	<Headline docSlug="api-senders">API Senders</Headline>
 	<BigButton on:click={openCreateModal}>New API sender</BigButton>
 	<BulkActionBar
 		count={$selection.size}

frontend/src/routes/asset/+page.svelte

@@ -53,7 +53,7 @@
 
 <HeadTitle title="Assets" />
 <main>
-	<Headline>Asset by domains</Headline>
+	<Headline docSlug="assets">Asset by domains</Headline>
 	{#if !contextCompanyID}
 		<BigButton
 			on:click={() => {

frontend/src/routes/asset/[domain]/+page.svelte

@@ -446,7 +446,7 @@
 
 <HeadTitle title="Assets ({isCompanyFolder ? 'company' : $page.params.domain})" />
 <main>
-	<Headline>
+	<Headline docSlug="assets">
 		{#if isCompanyFolder}
 			Company assets
 		{:else}

frontend/src/routes/attachment/+page.svelte

@@ -294,7 +294,7 @@
 
 <HeadTitle title="Attachments" />
 <main>
-	<Headline>Attachments</Headline>
+	<Headline docSlug="attachments">Attachments</Headline>
 	<BigButton on:click={openCreateModal}>New attachment</BigButton>
 	<BulkActionBar
 		count={$selection.size}

frontend/src/routes/campaign-template/+page.svelte

@@ -658,7 +658,7 @@
 <HeadTitle title="Campaigns templates" />
 
 <main>
-	<Headline>Campaigns templates</Headline>
+	<Headline docSlug="templates">Campaigns templates</Headline>
 	<BigButton on:click={openCreateModal}>New template</BigButton>
 
 	<BulkActionBar

frontend/src/routes/campaign/+page.svelte

@@ -1641,7 +1641,7 @@
 
 <main>
 	<div class="flex justify-between">
-		<Headline>Campaigns</Headline>
+		<Headline docSlug="campaigns">Campaigns</Headline>
 		<div class="flex gap-4 items-center">
 			<CheckboxField
 				bind:value={includeTestCampaigns}

frontend/src/routes/campaign/[id]/+page.svelte

@@ -1651,7 +1651,7 @@
 	{#if initialPageLoadComplete}
 		<div class="relative">
 			<div class="flex justify-between">
-				<Headline>
+				<Headline docSlug="campaigns">
 					<span class="select-text">Campaign: {campaign.name ?? ''}</span>
 					{#if campaign.isTest}
 						<TestLabel />

frontend/src/routes/company/+page.svelte

@@ -134,7 +134,7 @@
 
 <HeadTitle title="companies" />
 <main>
-	<Headline>Companies</Headline>
+	<Headline docSlug="settings">Companies</Headline>
 	<BigButton on:click={openCreateModal}>New company</BigButton>
 	<BigButton on:click={openExportSharedModal}>Export shared</BigButton>
 	<Table

frontend/src/routes/dashboard/+page.svelte

@@ -198,7 +198,7 @@
 
 <HeadTitle title="Dashboard" />
 <main>
-	<Headline>Dashboard</Headline>
+	<Headline docSlug="dashboard">Dashboard</Headline>
 
 	<DashboardNav />
 

frontend/src/routes/dashboard/campaigns/+page.svelte

@@ -201,7 +201,7 @@
 
 <HeadTitle title="Dashboard - Campaigns" />
 <main>
-	<Headline>Dashboard</Headline>
+	<Headline docSlug="dashboard">Dashboard</Headline>
 
 	<DashboardNav />
 

frontend/src/routes/dashboard/events/+page.svelte

@@ -126,7 +126,7 @@
 
 <HeadTitle title="Dashboard - Events" />
 <main>
-	<Headline>Dashboard</Headline>
+	<Headline docSlug="dashboard">Dashboard</Headline>
 
 	<DashboardNav />
 

frontend/src/routes/domain/+page.svelte

@@ -642,7 +642,7 @@
 <HeadTitle title="Domains" />
 <main>
 	<div class="flex justify-between">
-		<Headline>Domains</Headline>
+		<Headline docSlug="domains">Domains</Headline>
 	</div>
 	<BigButton on:click={openCreateModal}>New domain</BigButton>
 	<Table

frontend/src/routes/email/+page.svelte

@@ -445,7 +445,7 @@
 
 <HeadTitle title="Emails" />
 <main>
-	<Headline>Emails</Headline>
+	<Headline docSlug="emails">Emails</Headline>
 	<BigButton on:click={async () => await openCreateModal()}>New Email</BigButton>
 	<BulkActionBar
 		count={$selection.size}

frontend/src/routes/email/[id]/attachments/+page.svelte

@@ -206,7 +206,7 @@
 
 <HeadTitle title="Email attachment ({emailName})" />
 <main>
-	<Headline>Attachments: {emailName}</Headline>
+	<Headline docSlug="attachments">Attachments: {emailName}</Headline>
 	<BigButton on:click={openModal}>Add attachement</BigButton>
 	<Table
 		columns={['Name', 'Description', 'Filename', { column: 'Inline', alignText: 'center' }]}

frontend/src/routes/filter/+page.svelte

@@ -457,7 +457,7 @@
 
 <HeadTitle title="Filter" />
 <main>
-	<Headline>Filters</Headline>
+	<Headline docSlug="filtering">Filters</Headline>
 	<BigButton on:click={openCreateModal}>New filter</BigButton>
 	<BulkActionBar
 		count={$selection.size}

frontend/src/routes/oauth-provider/+page.svelte

@@ -518,7 +518,7 @@
 
 <HeadTitle title="OAuth" />
 <main>
-	<Headline>OAuth</Headline>
+	<Headline docSlug="oauth-providers">OAuth</Headline>
 	<div class="flex gap-2 mb-4">
 		<BigButton on:click={openCreateModal}>New OAuth</BigButton>
 		<BigButton on:click={openImportModal}>Import Token</BigButton>

frontend/src/routes/page/+page.svelte

@@ -338,7 +338,7 @@
 <HeadTitle title="Pages" />
 <main>
 	<div class="flex justify-between">
-		<Headline>Pages</Headline>
+		<Headline docSlug="pages">Pages</Headline>
 		<AutoRefresh
 			isLoading={false}
 			onRefresh={() => {

frontend/src/routes/profile/+page.svelte

@@ -352,7 +352,7 @@
 
 <HeadTitle title="Profile" />
 <main class="pb-8">
-	<Headline>Profile</Headline>
+	<Headline docSlug="settings">Profile</Headline>
 	{#if isInitiallyLoaded}
 		<div class="max-w-7xl pt-4 space-y-8">
 			<!-- Profile and Password Section -->

frontend/src/routes/proxy/+page.svelte

@@ -668,7 +668,7 @@ portal.example.com:
 <main>
 	<div class="flex justify-between">
 		<div class="flex items-center gap-2">
-			<Headline>Proxies</Headline>
+			<Headline docSlug="proxies">Proxies</Headline>
 		</div>
 		<AutoRefresh
 			isLoading={false}

frontend/src/routes/recipient/+page.svelte

@@ -450,7 +450,7 @@
 
 <HeadTitle title="Recipients" />
 <section>
-	<Headline>Recipients</Headline>
+	<Headline docSlug="recipients">Recipients</Headline>
 
 	<div class="flex gap-3">
 		<BigButton on:click={openCreateModal}>New recipient</BigButton>

frontend/src/routes/recipient/[id]/+page.svelte

@@ -142,7 +142,7 @@
 <HeadTitle title="Recipients" />
 <section>
 	<div class="flex justify-between">
-		<Headline>
+		<Headline docSlug="recipients">
 			<span class="select-text">{recipient.email}</span>
 		</Headline>
 		<AutoRefresh

frontend/src/routes/recipient/group/+page.svelte

@@ -368,7 +368,7 @@
 
 <HeadTitle title="Groups" />
 <main>
-	<Headline>Groups</Headline>
+	<Headline docSlug="groups">Groups</Headline>
 	<div class="flex gap-3">
 		<BigButton on:click={openCreateModal}>New group</BigButton>
 		<BigButton on:click={openDynamicCreateModal}>New dynamic group</BigButton>

frontend/src/routes/recipient/group/[id]/+page.svelte

@@ -401,7 +401,7 @@
 
 <HeadTitle title="Group ({groupValues.name}" />
 <main>
-	<Headline>Group Recipients</Headline>
+	<Headline docSlug="groups">Group Recipients</Headline>
 	<SubHeadline>
 		{#if groupValues.isDynamic}
 			<DynamicLabel />

frontend/src/routes/recipient/orphaned/+page.svelte

@@ -118,7 +118,7 @@
 <HeadTitle title="Orphaned Recipients" />
 
 <section>
-	<Headline>Orphaned Recipients</Headline>
+	<Headline docSlug="recipients">Orphaned Recipients</Headline>
 
 	<div class="flex gap-4 mb-4">
 		<BigButton on:click={() => goto('/recipient/')}>View recipients</BigButton>

frontend/src/routes/remote-browser/+page.svelte

@@ -285,7 +285,7 @@ s.keepAlive();
 <div class="col-start-1 col-end-13 row-start-1 px-4">
 	<div class="flex justify-between items-center">
 		<div class="flex items-center gap-3">
-			<Headline>Remote Browsers</Headline>
+			<Headline docSlug="remote-browser">Remote Browsers</Headline>
 			<span
 				class="px-2 py-0.5 text-xs font-medium rounded bg-slate-200 text-slate-500 dark:bg-slate-700 dark:text-slate-400"
 				>Experimental</span

frontend/src/routes/script/+page.svelte

@@ -267,7 +267,7 @@
 
 <HeadTitle title="Scripts" />
 <main>
-	<Headline>Scripts</Headline>
+	<Headline docSlug="scripts">Scripts</Headline>
 
 	{#if featureDisabled}
 		<div class="mt-6 max-w-xl rounded-lg border border-slate-700 bg-slate-800/50 px-6 py-8">

frontend/src/routes/sessions/+page.svelte

@@ -125,7 +125,7 @@
 
 <HeadTitle title="Sessions" />
 <main>
-	<Headline>Sessions</Headline>
+	<Headline docSlug="settings">Sessions</Headline>
 	<BigButton on:click={openDeleteAllSessionsAlert}>Delete all sessions</BigButton>
 	<Table
 		columns={[

frontend/src/routes/settings/+page.svelte

@@ -66,7 +66,7 @@
 
 <HeadTitle title="Settings" />
 <main class="pb-8">
-	<Headline>Settings</Headline>
+	<Headline docSlug="settings">Settings</Headline>
 
 	<nav class="mt-4 mb-6 border-b border-gray-200 dark:border-gray-700">
 		<div class="flex items-center justify-between">

frontend/src/routes/settings/update/+page.svelte

@@ -73,7 +73,7 @@
 
 <HeadTitle title="Update - Settings" />
 <main class="pb-8">
-	<Headline>Update</Headline>
+	<Headline docSlug="management">Update</Headline>
 	<div class="pt-4">
 		<div
 			class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 transition-colors duration-200"

frontend/src/routes/smtp-configuration/+page.svelte

@@ -451,7 +451,7 @@
 
 <HeadTitle title="SMTP configurations" />
 <main>
-	<Headline>SMTP Configurations</Headline>
+	<Headline docSlug="smtp-configurations">SMTP Configurations</Headline>
 	<BigButton on:click={openCreateModal}>New configuration</BigButton>
 	<BulkActionBar
 		count={$selection.size}

frontend/src/routes/user/+page.svelte

@@ -242,7 +242,7 @@
 
 <HeadTitle title="Users" />
 <main>
-	<Headline>Users</Headline>
+	<Headline docSlug="settings">Users</Headline>
 	<BigButton on:click={openCreateModal}>New user</BigButton>
 
 	<Table

frontend/src/routes/webhook/+page.svelte

@@ -306,7 +306,7 @@
 
 <HeadTitle title="Webhooks" />
 <main>
-	<Headline>Webhooks</Headline>
+	<Headline docSlug="webhooks">Webhooks</Headline>
 	<BigButton on:click={openCreateModal}>New webhook</BigButton>
 	<BulkActionBar
 		count={$selection.size}