From 53ee9e0cc598fd82abe9b376c60a738f17565f1f Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Tue, 3 Jan 2023 16:54:07 +0100
Subject: [PATCH] Extract the HelpButton as a dedicated component

---
 ui/src/lib/components/Header.svelte | 12 +++---------
 ui/src/lib/components/Help.svelte   | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/lib/components/Help.svelte

diff --git a/ui/src/lib/components/Header.svelte b/ui/src/lib/components/Header.svelte
index 101fead..cd3ab49 100644
--- a/ui/src/lib/components/Header.svelte
+++ b/ui/src/lib/components/Header.svelte
@@ -15,6 +15,7 @@
  } from 'sveltestrap';
 
  import { logout as APILogout } from '$lib/api/user';
+ import HelpButton from '$lib/components/Help.svelte';
  import Logo from '$lib/components/Logo.svelte';
  import { userSession, refreshUserSession } from '$lib/stores/usersession';
  import { toasts } from '$lib/stores/toasts';
@@ -98,18 +99,11 @@
         <Logo />
     </NavbarBrand>
     <Nav class="ms-auto" navbar>
-        <Button
+        <HelpButton
             href={helpLink}
-            target="_blank"
-            color="primary"
             size={$userSession?"sm":undefined}
             class={$userSession?"my-2":"me-2"}
-        >
-            <Icon
-                name="question-circle-fill"
-                title={$t('common.help')}
-            />
-        </Button>
+        />
         {#if $userSession}
             <Dropdown nav inNavbar>
                 <DropdownToggle nav caret>
diff --git a/ui/src/lib/components/Help.svelte b/ui/src/lib/components/Help.svelte
new file mode 100644
index 0000000..c80b3cd
--- /dev/null
+++ b/ui/src/lib/components/Help.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+ import { page } from '$app/stores'
+
+ import {
+     Button,
+     Icon,
+ } from 'sveltestrap';
+
+ import { t, locale } from '$lib/translations';
+
+ export { className as class };
+ let className = '';
+ export let color = "primary"
+ export let href: string;
+ export let size: string | null;
+</script>
+
+<Button
+    {href}
+    target="_blank"
+    {color}
+    {size}
+    class={className}
+>
+    <Icon
+        name="question-circle-fill"
+        title={$t('common.help')}
+    />
+</Button>