Extract the HelpButton as a dedicated component

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>

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>