From 12aba6a67eda1277d99731a68a663f63253ff0c7 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>
Date: Fri, 4 Jul 2025 08:36:11 +0200
Subject: [PATCH 1/4] fix(lib): fix labels (#278)

* fix labels

* more lables

* and the rest of the lables

* updated snapshots

* fix linting
---
 lib/src/Components/Input/InputLabel.tsx       |   9 +
 lib/src/Components/Input/RichTextEditor.tsx   |  10 +-
 lib/src/Components/Input/TextAreaInput.tsx    |  12 +-
 lib/src/Components/Input/TextInput.tsx        |  12 +-
 .../__snapshots__/TextAreaInput.spec.tsx.snap |   5 +-
 .../__snapshots__/TextInput.spec.tsx.snap     |   5 +-
 lib/src/Components/Input/index.tsx            |   2 +
 .../PopupStartEndInput.tsx                    |   4 -
 .../Profile/Subcomponents/ContactInfoForm.tsx |  16 +-
 .../Subcomponents/CrowdfundingForm.tsx        |   9 +-
 .../Profile/Subcomponents/GalleryForm.tsx     |  11 +-
 .../Subcomponents/GroupSubheaderForm.tsx      |  15 +-
 .../Profile/Subcomponents/ProfileTextForm.tsx |  14 +-
 .../__snapshots__/GalleryForm.spec.tsx.snap   | 408 ++++++++++--------
 .../Components/Profile/Templates/TabsForm.tsx |   2 -
 15 files changed, 268 insertions(+), 266 deletions(-)
 create mode 100644 lib/src/Components/Input/InputLabel.tsx

diff --git a/lib/src/Components/Input/InputLabel.tsx b/lib/src/Components/Input/InputLabel.tsx
new file mode 100644
index 00000000..a8283b6b
--- /dev/null
+++ b/lib/src/Components/Input/InputLabel.tsx
@@ -0,0 +1,9 @@
+export const InputLabel = ({ label }: { label: string }) => {
+  return (
+    <label className='tw:label tw:pb-1'>
+      <span className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'>
+        {label}:
+      </span>
+    </label>
+  )
+}
diff --git a/lib/src/Components/Input/RichTextEditor.tsx b/lib/src/Components/Input/RichTextEditor.tsx
index 268cbe04..539ad28b 100644
--- a/lib/src/Components/Input/RichTextEditor.tsx
+++ b/lib/src/Components/Input/RichTextEditor.tsx
@@ -10,6 +10,7 @@ import { StarterKit } from '@tiptap/starter-kit'
 import { useEffect } from 'react'
 import { Markdown } from 'tiptap-markdown'
 
+import { InputLabel } from './InputLabel'
 import { TextEditorMenu } from './TextEditorMenu'
 
 interface RichTextEditorProps {
@@ -27,7 +28,6 @@ interface RichTextEditorProps {
  */
 export function RichTextEditor({
   labelTitle,
-  labelStyle,
   containerStyle,
   defaultValue,
   placeholder,
@@ -88,13 +88,7 @@ export function RichTextEditor({
     <div
       className={`tw:form-control tw:w-full tw:flex tw:flex-col tw:min-h-0 ${containerStyle ?? ''}`}
     >
-      {labelTitle ? (
-        <label className='tw:label tw:pb-1'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
       <div
         className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
       >
diff --git a/lib/src/Components/Input/TextAreaInput.tsx b/lib/src/Components/Input/TextAreaInput.tsx
index 2ab53264..6a880b84 100644
--- a/lib/src/Components/Input/TextAreaInput.tsx
+++ b/lib/src/Components/Input/TextAreaInput.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 
+import { InputLabel } from './InputLabel'
+
 interface TextAreaProps {
   labelTitle?: string
-  labelStyle?: string
   containerStyle?: string
   dataField?: string
   inputStyle?: string
@@ -18,7 +19,6 @@ interface TextAreaProps {
 export function TextAreaInput({
   labelTitle,
   dataField,
-  labelStyle,
   containerStyle,
   inputStyle,
   defaultValue,
@@ -43,13 +43,7 @@ export function TextAreaInput({
 
   return (
     <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
       <textarea
         required={required}
         ref={ref}
diff --git a/lib/src/Components/Input/TextInput.tsx b/lib/src/Components/Input/TextInput.tsx
index 0feab982..b28e5dc3 100644
--- a/lib/src/Components/Input/TextInput.tsx
+++ b/lib/src/Components/Input/TextInput.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 
+import { InputLabel } from './InputLabel'
+
 interface InputTextProps {
   labelTitle?: string
-  labelStyle?: string
   type?: string
   dataField?: string
   containerStyle?: string
@@ -20,7 +21,6 @@ interface InputTextProps {
  */
 export function TextInput({
   labelTitle,
-  labelStyle,
   type,
   dataField,
   containerStyle,
@@ -48,13 +48,7 @@ export function TextInput({
 
   return (
     <div className={`tw:form-control ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
       <input
         required={required}
         pattern={pattern}
diff --git a/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap b/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
index 75a82c0f..32f944a3 100644
--- a/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -5,12 +5,13 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
   class="tw:form-control tw:w-full "
 >
   <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
   >
     <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
     >
       My Title
+      :
     </span>
   </label>
   <textarea
diff --git a/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap b/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
index 2c914699..4a239a49 100644
--- a/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
+++ b/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
@@ -5,12 +5,13 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
   class="tw:form-control "
 >
   <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
   >
     <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
     >
       My Title
+      :
     </span>
   </label>
   <input
diff --git a/lib/src/Components/Input/index.tsx b/lib/src/Components/Input/index.tsx
index 2c0c2064..cc50996c 100644
--- a/lib/src/Components/Input/index.tsx
+++ b/lib/src/Components/Input/index.tsx
@@ -1,2 +1,4 @@
 export { TextAreaInput } from './TextAreaInput'
 export { TextInput } from './TextInput'
+export { InputLabel } from './InputLabel'
+export { RichTextEditor } from './RichTextEditor'
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index 41097025..672855a8 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -6,7 +6,6 @@ import type { Item } from '#types/Item'
 export interface StartEndInputProps {
   item?: Item
   showLabels?: boolean
-  labelStyle?: string
   updateStartValue?: (value: string) => void
   updateEndValue?: (value: string) => void
   containerStyle?: string
@@ -18,7 +17,6 @@ export interface StartEndInputProps {
 export const PopupStartEndInput = ({
   item,
   showLabels = true,
-  labelStyle,
   updateStartValue,
   updateEndValue,
   containerStyle,
@@ -31,7 +29,6 @@ export const PopupStartEndInput = ({
         dataField='start'
         inputStyle='tw:text-sm tw:px-2'
         labelTitle={showLabels ? 'Start' : ''}
-        labelStyle={labelStyle}
         defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
         autocomplete='one-time-code'
         updateFormValue={updateStartValue}
@@ -42,7 +39,6 @@ export const PopupStartEndInput = ({
         dataField='end'
         inputStyle='tw:text-sm tw:px-2'
         labelTitle={showLabels ? 'End' : ''}
-        labelStyle={labelStyle}
         defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
         autocomplete='one-time-code'
         updateFormValue={updateEndValue}
diff --git a/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
index 693cbd79..62fde8fd 100644
--- a/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { InputLabel, TextInput } from '#components/Input'
 
 import type { FormState } from '#types/FormState'
 
@@ -12,12 +12,7 @@ export const ContactInfoForm = ({
   return (
     <div className='tw:mt-2 tw:space-y-2'>
       <div>
-        <label
-          htmlFor='email'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Email-Adresse (Kontakt):
-        </label>
+        <InputLabel label='Email-Adresse (Kontakt)' />
         <TextInput
           placeholder='Email'
           type='email'
@@ -33,12 +28,7 @@ export const ContactInfoForm = ({
       </div>
 
       <div>
-        <label
-          htmlFor='telephone'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Telefonnummer (Kontakt):
-        </label>
+        <InputLabel label='Telefonnummer (Kontakt)' />
         <TextInput
           placeholder='Telefonnummer'
           type='tel'
diff --git a/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx b/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
index 2fca373c..ac3ee144 100644
--- a/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { TextInput, InputLabel } from '#components/Input'
 
 import type { FormState } from '#types/FormState'
 
@@ -12,12 +12,7 @@ export const CrowdfundingForm = ({
   return (
     <div className='tw:mt-4 tw:space-y-4'>
       <div>
-        <label
-          htmlFor='OpenCollectiveSlug'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Open Collective Slug:
-        </label>
+        <InputLabel label='Open Collective Slug' />
         <TextInput
           placeholder='Open Collective Slug'
           type='text'
diff --git a/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx b/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
index ee5586bc..a199bae3 100644
--- a/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
@@ -5,6 +5,7 @@ import { useDropzone } from 'react-dropzone'
 import { BiSolidImage } from 'react-icons/bi'
 
 import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { InputLabel } from '#components/Input/InputLabel'
 import DialogModal from '#components/Templates/DialogModal'
 import { getImageDimensions } from '#utils/getImageDimensions'
 
@@ -13,6 +14,7 @@ import type { FormState } from '#types/FormState'
 interface Props {
   state: FormState
   setState: React.Dispatch<React.SetStateAction<FormState>>
+  hideInputLabel?: boolean
 }
 
 const compressionOptions = {
@@ -21,7 +23,7 @@ const compressionOptions = {
   useWebWorker: true,
 }
 
-export const GalleryForm = ({ state, setState }: Props) => {
+export const GalleryForm = ({ state, setState, hideInputLabel = false }: Props) => {
   const appState = useAppState()
 
   const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
@@ -96,8 +98,9 @@ export const GalleryForm = ({ state, setState }: Props) => {
   }
 
   return (
-    <>
-      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
+    <div className='tw:mt-3'>
+      {!hideInputLabel && <InputLabel label='Media' />}
+      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4'>
         {images.map((image, index) => (
           <div key={index} className='tw:relative'>
             <img
@@ -161,6 +164,6 @@ export const GalleryForm = ({ state, setState }: Props) => {
           </div>
         </div>
       </DialogModal>
-    </>
+    </div>
   )
 }
diff --git a/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx b/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
index fa37db9a..4493035c 100644
--- a/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { useEffect } from 'react'
 
+import { InputLabel } from '#components/Input'
 import ComboBoxInput from '#components/Input/ComboBoxInput'
 
 import type { FormState } from '#types/FormState'
@@ -51,12 +52,7 @@ export const GroupSubheaderForm = ({
   return (
     <div className='tw:grid tw:grid-cols-1 tw:@sm:grid-cols-2 tw:gap-2'>
       <div>
-        <label
-          htmlFor='status'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenstatus:
-        </label>
+        <InputLabel label='Gruppenstatus' />
         <ComboBoxInput
           id='status'
           options={groupStates || []}
@@ -70,12 +66,7 @@ export const GroupSubheaderForm = ({
         />
       </div>
       <div>
-        <label
-          htmlFor='groupType'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenart:
-        </label>
+        <InputLabel label='Gruppenart' />
         <ComboBoxInput
           id='groupType'
           options={groupTypes?.map((gt) => gt.groupTypes_id.name) || []}
diff --git a/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx b/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
index f98b5c39..4dddfdce 100644
--- a/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react'
 
-import { RichTextEditor } from '#components/Input/RichTextEditor'
+import { InputLabel, RichTextEditor } from '#components/Input'
 
 import { MarkdownHint } from './MarkdownHint'
 
@@ -13,11 +13,9 @@ import type { FormState } from '#types/FormState'
 export const ProfileTextForm = ({
   state,
   setState,
-  // Is this really used?
   dataField,
   heading,
   size,
-  hideInputLabel,
 }: {
   state: FormState
   setState: React.Dispatch<React.SetStateAction<FormState>>
@@ -36,15 +34,10 @@ export const ProfileTextForm = ({
 
   return (
     <div
-      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-28 tw:flex-none'}`}
+      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-3 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-30 tw:flex-none'}`}
     >
       <div className='tw:flex tw:justify-between tw:items-center'>
-        <label
-          htmlFor='nextAppointment'
-          className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'
-        >
-          {heading || 'Text'}:
-        </label>
+        <InputLabel label={heading || 'Text'} />
         <MarkdownHint />
       </div>
       <RichTextEditor
@@ -58,7 +51,6 @@ export const ProfileTextForm = ({
           }))
         }
         showMenu={size === 'full'}
-        labelStyle={hideInputLabel ? 'tw:hidden' : ''}
         containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-24 tw:flex-none'}
       />
     </div>
diff --git a/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap b/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
index 0eb344e5..3dfc5585 100644
--- a/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
+++ b/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
@@ -3,99 +3,113 @@
 exports[`GalleryForm > with previous images > renders 1`] = `
 <div>
   <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
   >
-    <div
-      class="tw:relative"
+    <label
+      class="tw:label tw:pb-1"
     >
-      <img
-        alt="Gallery image 1"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
-        src="undefined1.jpg"
-      />
-      <button
-        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
-        type="button"
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
       >
-        <svg
-          aria-hidden="true"
-          class="tw:h-5 tw:w-5"
-          data-slot="icon"
-          data-testid="trash"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
+        Media
+        :
+      </span>
+    </label>
     <div
-      class="tw:relative"
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
     >
-      <img
-        alt="Gallery image 2"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
-        src="undefined2.jpg"
-      />
-      <button
-        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
-        type="button"
+      <div
+        class="tw:relative"
       >
-        <svg
-          aria-hidden="true"
-          class="tw:h-5 tw:w-5"
-          data-slot="icon"
-          data-testid="trash"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
+        <img
+          alt="Gallery image 1"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+          src="undefined1.jpg"
+        />
+        <button
+          class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+          type="button"
         >
-          <path
-            clip-rule="evenodd"
-            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
-    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+          <svg
+            aria-hidden="true"
+            class="tw:h-5 tw:w-5"
+            data-slot="icon"
+            data-testid="trash"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 2"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+          src="undefined2.jpg"
+        />
+        <button
+          class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+          type="button"
         >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
-        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+          <svg
+            aria-hidden="true"
+            class="tw:h-5 tw:w-5"
+            data-slot="icon"
+            data-testid="trash"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -105,77 +119,91 @@ exports[`GalleryForm > with previous images > renders 1`] = `
 exports[`GalleryForm > with uploading images > renders 1`] = `
 <div>
   <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
   >
-    <div
-      class="tw:relative"
+    <label
+      class="tw:label tw:pb-1"
     >
-      <img
-        alt="Gallery image 1"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
       <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
     <div
-      class="tw:relative"
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
     >
-      <img
-        alt="Gallery image 2"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
-      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
-    <div
-      class="tw:relative"
-    >
-      <img
-        alt="Gallery image 3"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
-      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
-    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 1"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
         <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 2"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
+        <span
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 3"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
+        <span
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -185,41 +213,55 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
 exports[`GalleryForm > without previous images > renders 1`] = `
 <div>
   <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
   >
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
+    <label
+      class="tw:label tw:pb-1"
     >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
-        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
+    <div
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
+    >
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/lib/src/Components/Profile/Templates/TabsForm.tsx b/lib/src/Components/Profile/Templates/TabsForm.tsx
index 272db754..be28d2bc 100644
--- a/lib/src/Components/Profile/Templates/TabsForm.tsx
+++ b/lib/src/Components/Profile/Templates/TabsForm.tsx
@@ -44,7 +44,6 @@ export const TabsForm = ({
                   <PopupStartEndInput
                     item={item}
                     showLabels={true}
-                    labelStyle={'tw:text-base-content/50'}
                     updateEndValue={(e) =>
                       setState((prevState) => ({
                         ...prevState,
@@ -62,7 +61,6 @@ export const TabsForm = ({
 
                 <RichTextEditor
                   labelTitle='About'
-                  labelStyle={'tw:text-base-content/50'}
                   placeholder='about ...'
                   defaultValue={item?.text ? item.text : ''}
                   updateFormValue={(v) =>

From 855ef3de293dda73358a494c3fadb6fcd5c38707 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>
Date: Fri, 4 Jul 2025 08:39:13 +0200
Subject: [PATCH 2/4] fix(lib): base layer config (#276)

* add close button to custom info modal

* added attribution

* fix build examples workflow

* fix pending tests

* Revert "add close button to custom info modal"

This reverts commit 835c661009abbdc5c095a6bc86bbd6890e080e5f.
---
 .github/workflows/test.build.lib.yml      |  2 +-
 app/src/pages/MapContainer.tsx            |  2 ++
 lib/src/Components/Map/UtopiaMap.tsx      |  8 +++++++
 lib/src/Components/Map/UtopiaMapInner.tsx | 11 +++++++--
 lib/src/assets/css/leaflet.css            | 27 +++++++++++++++++++++--
 lib/src/types/UtopiaMapProps.d.ts         |  2 ++
 6 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/test.build.lib.yml b/.github/workflows/test.build.lib.yml
index 00e82f3b..99b3cd50 100644
--- a/.github/workflows/test.build.lib.yml
+++ b/.github/workflows/test.build.lib.yml
@@ -37,7 +37,7 @@ jobs:
   build-examples:
     if: needs.files-changed.outputs.build == 'true'
     name: Test Example Apps
-    needs: [build, files-changed]
+    needs: [files-changed, build]
     runs-on: ubuntu-latest
     strategy:
       matrix:
diff --git a/app/src/pages/MapContainer.tsx b/app/src/pages/MapContainer.tsx
index 14d96c71..fe3140a1 100644
--- a/app/src/pages/MapContainer.tsx
+++ b/app/src/pages/MapContainer.tsx
@@ -84,6 +84,8 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         defaultTheme={map.default_theme}
         showZoomControl={map.show_zoom_control}
         expandLayerControl={map.expand_layer_control}
+        tileServerUrl={map.tile_server_url}
+        tileServerAttribution={map.tile_server_attribution}
       >
         {layers &&
           apis &&
diff --git a/lib/src/Components/Map/UtopiaMap.tsx b/lib/src/Components/Map/UtopiaMap.tsx
index da909e3b..3ca2a6e3 100644
--- a/lib/src/Components/Map/UtopiaMap.tsx
+++ b/lib/src/Components/Map/UtopiaMap.tsx
@@ -56,6 +56,8 @@ function UtopiaMap({
   defaultTheme,
   donationWidget,
   expandLayerControl,
+  tileServerUrl,
+  tileServerAttribution,
 }: {
   /** height of the map (default '500px') */
   height?: string
@@ -85,6 +87,10 @@ function UtopiaMap({
   donationWidget?: boolean
   /** open layer control on map initialisation */
   expandLayerControl?: boolean
+  /** configure a custom tile server */
+  tileServerUrl?: string
+  /** configure a custom tile server attribution */
+  tileServerAttribution?: string
 }) {
   return (
     <ContextWrapper>
@@ -104,6 +110,8 @@ function UtopiaMap({
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}
           expandLayerControl={expandLayerControl}
+          tileServerUrl={tileServerUrl}
+          tileServerAttribution={tileServerAttribution}
         >
           {children}
         </UtopiaMapInner>
diff --git a/lib/src/Components/Map/UtopiaMapInner.tsx b/lib/src/Components/Map/UtopiaMapInner.tsx
index ba7f02cc..d197f92a 100644
--- a/lib/src/Components/Map/UtopiaMapInner.tsx
+++ b/lib/src/Components/Map/UtopiaMapInner.tsx
@@ -55,6 +55,8 @@ export function UtopiaMapInner({
   defaultTheme = '',
   donationWidget,
   expandLayerControl,
+  tileServerUrl,
+  tileServerAttribution,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -65,6 +67,8 @@ export function UtopiaMapInner({
   showThemeControl?: boolean
   defaultTheme?: string
   expandLayerControl?: boolean
+  tileServerUrl?: string
+  tileServerAttribution?: string
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -278,8 +282,11 @@ export function UtopiaMapInner({
       </Control>
       <TileLayer
         maxZoom={19}
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url='https://tile.osmand.net/hd/{z}/{x}/{y}.png'
+        attribution={
+          tileServerAttribution ??
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }
+        url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
       />
       <MarkerClusterGroup
         ref={(r) => setClusterRef(r as any)}
diff --git a/lib/src/assets/css/leaflet.css b/lib/src/assets/css/leaflet.css
index d8fab67f..af2364c1 100644
--- a/lib/src/assets/css/leaflet.css
+++ b/lib/src/assets/css/leaflet.css
@@ -1,6 +1,29 @@
- .leaflet-control-attribution {
-     display: none;
+ .leaflet-control-attribution{
+    color: #000 !important;
+    background-color: white/50 !important;
+    border-radius: 4px;
+    padding: 0 4px;
+    z-index: 400 !important;
+    font-size: 10px;
+    opacity: 0.5;
+}
+
+ .leaflet-control-attribution a{
+    color: #000 !important;
  }
+ 
+ .leaflet-attribution-flag {
+display: none !important;
+ }
+
+ .leaflet-control-attribution a:not([href*="openstreetmap"]) {
+    display: none !important;
+  }
+  
+  /* 2) Entfernt den Trenner “|” (liegt im span[aria-hidden]) */
+  .leaflet-control-attribution span[aria-hidden="true"] {
+    display: none !important;
+  }
 
  .leaflet-control-locate {
      display: none;
diff --git a/lib/src/types/UtopiaMapProps.d.ts b/lib/src/types/UtopiaMapProps.d.ts
index 3d85374e..b5aec550 100644
--- a/lib/src/types/UtopiaMapProps.d.ts
+++ b/lib/src/types/UtopiaMapProps.d.ts
@@ -18,4 +18,6 @@ export interface UtopiaMapProps {
   donationWidget?: boolean
   defaultTheme?: string
   expandLayerControl?: boolean
+  tileServerUrl?: string
+  tileServerAttribution?: string
 }

From 1e7320b8954ad292d04ecbfc15a7141bf72af9d5 Mon Sep 17 00:00:00 2001
From: Max <maxharz@gmail.com>
Date: Fri, 11 Jul 2025 13:37:05 +0200
Subject: [PATCH 3/4] feat(app): qR invites (#267)

* Add component to show invite link (WIP)

* Show invite link with copy functionality and QR-Code, add tests

* Query secrets

* Update directus collections

* Add config and invite api

* Let vite resolve paths using tsconfig

* Redeem invite link when logged in or after logging in

* Redirect to inviting profile when redeeming

* Fix some logic with login and redeeming

* Use correct redeem flow

* Hide missing form error

* Add basic relations view

* Pass profile to redeem Api and adapt to changed redeem flow

* Remove unnecessary aliases in vite config

* Remove dead import

* gitignore mac specific file

* Remove lazy loading

* Fix linting

* add InviteApi import

* Change case of file name (tbd)

* Don't toast error if user profile was not loaded yet

* Fix casing

* avoid app crash when profile of a new item is opened

---------

Co-authored-by: Anton Tranelis <mail@antontranelis.de>
---
 app/.env                                      |  5 +-
 app/.eslintrc.cjs                             |  2 +-
 app/.gitignore                                |  1 +
 app/package-lock.json                         | 50 +++++++++++-
 app/package.json                              |  1 +
 app/src/App.tsx                               | 17 ++--
 app/src/api/directus.ts                       |  6 ++
 app/src/api/inviteApi.ts                      | 79 +++++++++++++++++++
 app/src/api/itemsApi.ts                       |  1 +
 app/src/api/userApi.ts                        |  4 +-
 app/src/config/index.ts                       | 12 +++
 app/tsconfig.json                             | 42 +++++++---
 app/vite.config.ts                            | 40 ++++------
 lib/package-lock.json                         | 20 +++++
 lib/package.json                              |  1 +
 lib/rollup.config.js                          |  1 +
 lib/src/Components/Auth/LoginPage.tsx         | 49 ++++++++++--
 lib/src/Components/Auth/useAuth.tsx           | 34 +++++---
 lib/src/Components/Map/hooks/useMyProfile.ts  | 20 +++++
 lib/src/Components/Onboarding/InvitePage.tsx  | 75 ++++++++++++++++++
 lib/src/Components/Onboarding/index.ts        |  1 +
 .../Subcomponents/InviteLinkView.spec.tsx     | 75 ++++++++++++++++++
 .../Profile/Subcomponents/InviteLinkView.tsx  | 38 +++++++++
 .../Profile/Subcomponents/RelationsView.tsx   | 37 +++++++++
 .../InviteLinkView.spec.tsx.snap              | 62 +++++++++++++++
 .../Components/Profile/Templates/FlexForm.tsx |  1 +
 .../Components/Profile/Templates/FlexView.tsx |  4 +
 lib/src/index.tsx                             |  1 +
 lib/src/types/InviteApi.d.ts                  |  4 +
 lib/src/types/Item.d.ts                       |  5 ++
 30 files changed, 623 insertions(+), 65 deletions(-)
 create mode 100644 app/src/api/inviteApi.ts
 create mode 100644 app/src/config/index.ts
 create mode 100644 lib/src/Components/Map/hooks/useMyProfile.ts
 create mode 100644 lib/src/Components/Onboarding/InvitePage.tsx
 create mode 100644 lib/src/Components/Onboarding/index.ts
 create mode 100644 lib/src/Components/Profile/Subcomponents/InviteLinkView.spec.tsx
 create mode 100644 lib/src/Components/Profile/Subcomponents/InviteLinkView.tsx
 create mode 100644 lib/src/Components/Profile/Subcomponents/RelationsView.tsx
 create mode 100644 lib/src/Components/Profile/Subcomponents/__snapshots__/InviteLinkView.spec.tsx.snap
 create mode 100644 lib/src/types/InviteApi.d.ts

diff --git a/app/.env b/app/.env
index cb285291..4d364d32 100644
--- a/app/.env
+++ b/app/.env
@@ -1 +1,4 @@
-VITE_OPEN_COLLECTIVE_API_KEY=your_key
\ No newline at end of file
+VITE_OPEN_COLLECTIVE_API_KEY=your_key
+VITE_API_URL=https://api.utopia-lab.org
+VITE_VALIDATE_INVITE_FLOW_ID=01d61db0-25aa-4bfa-bc24-c6a8f208a455
+VITE_REDEEM_INVITE_FLOW_ID=cc80ec73-ecf5-4789-bee5-1127fb1a6ed4
diff --git a/app/.eslintrc.cjs b/app/.eslintrc.cjs
index 287f4b5d..af43f19b 100644
--- a/app/.eslintrc.cjs
+++ b/app/.eslintrc.cjs
@@ -82,7 +82,7 @@ module.exports = {
     'import/no-relative-parent-imports': [
       'error',
       {
-        ignore: ['#[src,types,root,components,utils,assets]/*'],
+        ignore: ['#[src,types,root,components,utils,assets]/*', '@/config/*'],
       },
     ],
     'import/no-self-import': 'error',
diff --git a/app/.gitignore b/app/.gitignore
index b9470778..3bdd52eb 100644
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.DS_Store
diff --git a/app/package-lock.json b/app/package-lock.json
index f6897356..7bc582bd 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -18,7 +18,8 @@
         "react-dom": "^18.2.0",
         "react-rnd": "^10.4.1",
         "react-router-dom": "^6.23.0",
-        "utopia-ui": "^3.0.111"
+        "utopia-ui": "^3.0.111",
+        "vite-tsconfig-paths": "^5.1.4"
       },
       "devDependencies": {
         "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
@@ -6740,6 +6741,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -10984,6 +10991,26 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/tsconfck": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "license": "MIT",
+      "bin": {
+        "tsconfck": "bin/tsconfck.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -11147,7 +11174,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -11621,6 +11648,25 @@
         }
       }
     },
+    "node_modules/vite-tsconfig-paths": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz",
+      "integrity": "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
diff --git a/app/package.json b/app/package.json
index 1f1ca1d3..1c6e9e38 100644
--- a/app/package.json
+++ b/app/package.json
@@ -20,6 +20,7 @@
     "react-dom": "^18.2.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.23.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "utopia-ui": "^3.0.111"
   },
   "devDependencies": {
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 9b789c5e..39b07772 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -20,6 +20,7 @@ import {
   Content,
   AuthProvider,
   Modal,
+  InvitePage,
   LoginPage,
   SignupPage,
   Quests,
@@ -33,8 +34,8 @@ import {
   MarketView,
   SVG,
   LoadingMapOverlay,
-  ProfileView,
   ProfileForm,
+  ProfileView,
   UserSettings,
 } from 'utopia-ui'
 
@@ -48,11 +49,16 @@ import { itemsApi } from './api/itemsApi'
 import { layersApi } from './api/layersApi'
 import { mapApi } from './api/mapApi'
 import { permissionsApi } from './api/permissionsApi'
-import { userApi } from './api/userApi'
+import { UserApi } from './api/userApi'
 import { ModalContent } from './ModalContent'
 import { Landingpage } from './pages/Landingpage'
 import MapContainer from './pages/MapContainer'
 import { getBottomRoutes, routes } from './routes/sidebar'
+import { config } from '@/config'
+import { InviteApi } from './api/inviteApi'
+
+const userApi = new UserApi()
+const inviteApi = new InviteApi(userApi)
 
 function App() {
   const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>()
@@ -140,12 +146,12 @@ function App() {
   if (map && layers)
     return (
       <div className='App tw:overflow-x-hidden'>
-        <AuthProvider userApi={new userApi()}>
+        <AuthProvider userApi={userApi} inviteApi={inviteApi}>
           <AppShell
             assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
             appName={map.name}
             embedded={embedded}
-            openCollectiveApiKey={import.meta.env.VITE_OPEN_COLLECTIVE_API_KEY}
+            openCollectiveApiKey={config.openCollectiveApiKey}
           >
             <Permissions
               api={permissionsApiInstance}
@@ -160,7 +166,8 @@ function App() {
               <Quests />
               <Routes>
                 <Route path='/*' element={<MapContainer map={map} layers={layers} />}>
-                  <Route path='login' element={<LoginPage />} />
+                  <Route path='invite/:id' element={<InvitePage inviteApi={inviteApi} />} />
+                  <Route path='login' element={<LoginPage inviteApi={inviteApi} />} />
                   <Route path='signup' element={<SignupPage />} />
                   <Route
                     path='reset-password'
diff --git a/app/src/api/directus.ts b/app/src/api/directus.ts
index c49a10f5..7b32f8b4 100644
--- a/app/src/api/directus.ts
+++ b/app/src/api/directus.ts
@@ -51,6 +51,11 @@ interface CustomUserFields {
   position: Point
 }
 
+interface ItemSecret {
+  secret: string
+  item: string
+}
+
 export interface MyCollections {
   places: Place[]
   events: Event[]
@@ -58,6 +63,7 @@ export interface MyCollections {
   tags: Tag[]
   projects: Project[]
   directus_users: CustomUserFields[]
+  item_secrets: ItemSecret[]
   items: Item[]
   team: any[]
   features: any[]
diff --git a/app/src/api/inviteApi.ts b/app/src/api/inviteApi.ts
new file mode 100644
index 00000000..7a6d2c24
--- /dev/null
+++ b/app/src/api/inviteApi.ts
@@ -0,0 +1,79 @@
+/* @eslint-disable-next-line import/no-relative-parent-imports */
+import { config } from '@/config'
+
+import type { UserApi } from 'utopia-ui'
+
+type InvitingProfileResponse = [
+  {
+    item: string
+  },
+]
+
+export class InviteApi {
+  userApi: UserApi
+
+  constructor(userApi: UserApi) {
+    this.userApi = userApi
+  }
+
+  async validateInvite(inviteId: string): Promise<string | null> {
+    try {
+      const response = await fetch(
+        `${config.apiUrl}/flows/trigger/${config.validateInviteFlowId}?secret=${inviteId}`,
+        {
+          method: 'GET',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      )
+
+      if (!response.ok) return null
+
+      const data = (await response.json()) as InvitingProfileResponse
+
+      return data[0].item
+    } catch (error: unknown) {
+      // eslint-disable-next-line no-console
+      console.error('Error fetching inviting profile:', error)
+      if (error instanceof Error && error.message) {
+        throw new Error(error.message)
+      } else {
+        throw new Error('An unknown error occurred while fetching the inviting profile.')
+      }
+    }
+  }
+
+  async redeemInvite(inviteId: string, itemId: string): Promise<string | null> {
+    try {
+      const token = await this.userApi.getToken()
+
+      if (!token) {
+        throw new Error('User is not authenticated. Cannot redeem invite.')
+      }
+
+      const response = await fetch(`${config.apiUrl}/flows/trigger/${config.redeemInviteFlowId}`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ secret: inviteId, item: itemId }),
+      })
+
+      if (!response.ok) return null
+
+      return (await response.json()) as string
+    } catch (error: unknown) {
+      // eslint-disable-next-line no-console
+      console.error('Error fetching inviting profile:', error)
+      if (error instanceof Error && error.message) {
+        throw new Error(error.message)
+      } else {
+        throw new Error('An unknown error occurred while fetching the inviting profile.')
+      }
+    }
+  }
+}
diff --git a/app/src/api/itemsApi.ts b/app/src/api/itemsApi.ts
index 854734ab..defb7c99 100644
--- a/app/src/api/itemsApi.ts
+++ b/app/src/api/itemsApi.ts
@@ -45,6 +45,7 @@ export class itemsApi<T> implements ItemsApi<T> {
         readItems(this.collectionName as never, {
           fields: [
             '*',
+            'secrets.*',
             'to.*',
             'relations.*',
             'user_created.*',
diff --git a/app/src/api/userApi.ts b/app/src/api/userApi.ts
index 8876e02f..c63e1baa 100644
--- a/app/src/api/userApi.ts
+++ b/app/src/api/userApi.ts
@@ -8,7 +8,7 @@ import { createUser, passwordRequest, passwordReset, readMe, updateMe } from '@d
 
 import { directusClient } from './directus'
 
-import type { UserApi, UserItem } from 'utopia-ui'
+import type { UserItem } from 'utopia-ui'
 
 interface DirectusError {
   errors: {
@@ -17,7 +17,7 @@ interface DirectusError {
   }[]
 }
 
-export class userApi implements UserApi {
+export class UserApi {
   async register(email: string, password: string, userName: string): Promise<any> {
     try {
       return await directusClient.request(createUser({ email, password, first_name: userName }))
diff --git a/app/src/config/index.ts b/app/src/config/index.ts
new file mode 100644
index 00000000..28ab494c
--- /dev/null
+++ b/app/src/config/index.ts
@@ -0,0 +1,12 @@
+export const config = {
+  apiUrl: String(import.meta.env.VITE_API_URL ?? 'https://api.utopia-lab.org'),
+  validateInviteFlowId: String(
+    import.meta.env.VITE_VALIDATE_INVITE_FLOW_ID ?? '01d61db0-25aa-4bfa-bc24-c6a8f208a455',
+  ),
+  redeemInviteFlowId: String(
+    import.meta.env.VITE_REDEEM_INVITE_FLOW_ID ?? 'cc80ec73-ecf5-4789-bee5-1127fb1a6ed4',
+  ),
+  openCollectiveApiKey: String(import.meta.env.VITE_OPEN_COLLECTIVE_API_KEY ?? ''),
+}
+
+export type Config = typeof config
diff --git a/app/tsconfig.json b/app/tsconfig.json
index 5469587c..95a0cf49 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -10,16 +10,40 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
     "paths": {
-      "utopia-ui": ["../lib/src"],
-      "#components/*": ["../lib/src/Components/*"],
-      "#utils/*":      ["../lib/src/Utils/*"],
-      "#types/*":      ["../lib/src/types/*"],
-      "#assets/*":     ["../lib/src/assets/*"],
-      "#src/*":        ["../lib/src/*"],
-      "#root/*":       ["../lib/*"]
+      "@/*": [
+        "src/*"
+      ],
+      "utopia-ui": [
+        "../lib/src"
+      ],
+      "#components/*": [
+        "../lib/src/Components/*"
+      ],
+      "#utils/*": [
+        "../lib/src/Utils/*"
+      ],
+      "#types/*": [
+        "../lib/src/types/*"
+      ],
+      "#assets/*": [
+        "../lib/src/assets/*"
+      ],
+      "#src/*": [
+        "../lib/src/*"
+      ],
+      "#root/*": [
+        "../lib/*"
+      ]
     }
   },
-  "include": ["src"], 
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 0bb7f880..2be6ed48 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -1,11 +1,12 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
-import fs from 'fs';
-import path from 'path';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import fs from 'fs'
+import path from 'path'
+import tsConfigPaths from 'vite-tsconfig-paths'
 
 // __dirname-Ersatz für ESModules
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
 
 export default defineConfig({
   server: {
@@ -18,21 +19,9 @@ export default defineConfig({
      * },
      */
   },
-  plugins: [
-    react(),
-    tailwindcss(),
-  ],
+  plugins: [react(), tailwindcss(), tsConfigPaths()],
   resolve: {
     dedupe: ['react', 'react-dom', 'react-router-dom'],
-    alias: {
-      'utopia-ui': path.resolve(__dirname, '../lib/src'),
-      '#components': path.resolve(__dirname, '../lib/src/Components'),
-      '#utils':      path.resolve(__dirname, '../lib/src/Utils'),
-      '#types':      path.resolve(__dirname, '../lib/src/types'),
-      '#assets':     path.resolve(__dirname, '../lib/src/assets'),
-      '#src':        path.resolve(__dirname, '../lib/src'),
-      '#root':       path.resolve(__dirname, '../lib'),
-    }
   },
   build: {
     sourcemap: true,
@@ -44,21 +33,20 @@ export default defineConfig({
           }
           if (id.includes('node_modules')) {
             if (id.includes('react')) {
-              return 'react';
+              return 'react'
             }
             if (id.includes('tiptap')) {
-              return 'tiptap';
+              return 'tiptap'
             }
             if (id.includes('leaflet')) {
-              return 'leaflet';
+              return 'leaflet'
             }
             if (id.includes('lib/node_modules')) {
               return 'utopia-ui-vendor'
-            }
-            else return 'vendor';
+            } else return 'vendor'
           }
-        }
+        },
       },
     },
   },
-});
+})
diff --git a/lib/package-lock.json b/lib/package-lock.json
index d6cd9828..4dbba735 100644
--- a/lib/package-lock.json
+++ b/lib/package-lock.json
@@ -37,6 +37,7 @@
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
         "react-photo-album": "^3.0.2",
+        "react-qr-code": "^2.0.16",
         "react-router-dom": "^6.23.0",
         "react-toastify": "^9.1.3",
         "remark-breaks": "^4.0.0",
@@ -11103,6 +11104,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==",
+      "license": "MIT"
+    },
     "node_modules/qs": {
       "version": "6.13.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz",
@@ -11319,6 +11326,19 @@
         }
       }
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.16.tgz",
+      "integrity": "sha512-8f54aTOo7DxYr1LB47pMeclV5SL/zSbJxkXHIS2a+QnAIa4XDVIdmzYRC+CBCJeDLSCeFHn8gHtltwvwZGJD/w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
diff --git a/lib/package.json b/lib/package.json
index 0601b494..0a1fe6bc 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -125,6 +125,7 @@
     "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^9.0.1",
     "react-photo-album": "^3.0.2",
+    "react-qr-code": "^2.0.16",
     "react-router-dom": "^6.23.0",
     "react-toastify": "^9.1.3",
     "remark-breaks": "^4.0.0",
diff --git a/lib/rollup.config.js b/lib/rollup.config.js
index a68ba830..25e90725 100644
--- a/lib/rollup.config.js
+++ b/lib/rollup.config.js
@@ -47,6 +47,7 @@ export default [
           /node_modules\/tiptap-markdown/,
           /node_modules\/markdown-it-task-lists/,
           /node_modules\/classnames/,
+          /node_modules\/react-qr-code/,
         ],
         requireReturnsDefault: 'auto',
       }),
diff --git a/lib/src/Components/Auth/LoginPage.tsx b/lib/src/Components/Auth/LoginPage.tsx
index b3a835a1..a87bdd01 100644
--- a/lib/src/Components/Auth/LoginPage.tsx
+++ b/lib/src/Components/Auth/LoginPage.tsx
@@ -1,28 +1,65 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
+import { useMyProfile } from '#components/Map/hooks/useMyProfile'
 import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+import type { InviteApi } from '#types/InviteApi'
+
+interface Props {
+  inviteApi: InviteApi
+}
+
 /**
  * @category Auth
  */
-export function LoginPage() {
+export function LoginPage({ inviteApi }: Props) {
   const [email, setEmail] = useState<string>('')
   const [password, setPassword] = useState<string>('')
 
   const { login, loading } = useAuth()
 
+  const { myProfile, isMyProfileLoaded } = useMyProfile()
+
   const navigate = useNavigate()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onLogin = async () => {
+  const redeemInvite = useCallback(
+    async (inviteCode: string): Promise<string | null> => {
+      if (!isMyProfileLoaded) return null
+
+      if (!myProfile) {
+        toast.error('Could not find your profile to redeem the invite.')
+        return null
+      }
+
+      const invitingProfileId = await inviteApi.redeemInvite(inviteCode, myProfile.id)
+      localStorage.removeItem('inviteCode') // Clear invite code after redeeming
+      return invitingProfileId
+    },
+    [inviteApi, isMyProfileLoaded, myProfile],
+  )
+
+  const handleSuccess = useCallback(async () => {
+    const inviteCode = localStorage.getItem('inviteCode')
+    let invitingProfileId: string | null = null
+    if (inviteCode) {
+      invitingProfileId = await redeemInvite(inviteCode)
+    }
+    if (invitingProfileId) {
+      navigate(`/item/${invitingProfileId}`)
+    } else {
+      navigate('/')
+    }
+  }, [navigate, redeemInvite])
+
+  const onLogin = useCallback(async () => {
     await toast.promise(login({ email, password }), {
       success: {
         render({ data }) {
-          navigate('/')
+          void handleSuccess()
           return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
         },
         // other options
@@ -36,7 +73,7 @@ export function LoginPage() {
       },
       pending: 'logging in ...',
     })
-  }
+  }, [email, handleSuccess, login, password])
 
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
diff --git a/lib/src/Components/Auth/useAuth.tsx b/lib/src/Components/Auth/useAuth.tsx
index 83c416b0..413e88f5 100644
--- a/lib/src/Components/Auth/useAuth.tsx
+++ b/lib/src/Components/Auth/useAuth.tsx
@@ -1,10 +1,12 @@
-import { createContext, useState, useContext, useEffect } from 'react'
+import { createContext, useState, useContext, useEffect, useCallback } from 'react'
 
+import type { InviteApi } from '#types/InviteApi'
 import type { UserApi } from '#types/UserApi'
 import type { UserItem } from '#types/UserItem'
 
 interface AuthProviderProps {
   userApi: UserApi
+  inviteApi: InviteApi
   children?: React.ReactNode
 }
 
@@ -16,6 +18,7 @@ interface AuthCredentials {
 
 interface AuthContextProps {
   isAuthenticated: boolean
+  isInitialized: boolean
   user: UserItem | null
   login: (credentials: AuthCredentials) => Promise<UserItem | undefined>
   register: (credentials: AuthCredentials, userName: string) => Promise<UserItem | undefined>
@@ -29,6 +32,7 @@ interface AuthContextProps {
 
 const AuthContext = createContext<AuthContextProps>({
   isAuthenticated: false,
+  isInitialized: false,
   user: null,
   login: () => Promise.reject(Error('Unimplemented')),
   register: () => Promise.reject(Error('Unimplemented')),
@@ -47,17 +51,10 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
   const [user, setUser] = useState<UserItem | null>(null)
   const [token, setToken] = useState<string>()
   const [loading, setLoading] = useState<boolean>(false)
+  const [isInitialized, setIsInitialized] = useState<boolean>(false)
   const isAuthenticated = !!user
 
-  useEffect(() => {
-    setLoading(true)
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    loadUser()
-    setLoading(false)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  async function loadUser(): Promise<UserItem | undefined> {
+  const loadUser: () => Promise<UserItem | undefined> = useCallback(async () => {
     try {
       const token = await userApi.getToken()
       setToken(token)
@@ -66,20 +63,30 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
         setUser(me)
         setLoading(false)
         return me
-      } else return undefined
+      } else {
+        return undefined
+      }
       // eslint-disable-next-line no-catch-all/no-catch-all
     } catch (error) {
       setLoading(false)
       return undefined
+    } finally {
+      setIsInitialized(true)
     }
-  }
+  }, [userApi])
+
+  useEffect(() => {
+    void loadUser()
+  }, [loadUser])
 
   const login = async (credentials: AuthCredentials): Promise<UserItem | undefined> => {
     setLoading(true)
     try {
       const user = await userApi.login(credentials.email, credentials.password)
       setToken(user?.access_token)
-      return await loadUser()
+      const fullUser = await loadUser()
+
+      return fullUser
     } catch (error) {
       setLoading(false)
       throw error
@@ -150,6 +157,7 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
     <AuthContext.Provider
       value={{
         isAuthenticated,
+        isInitialized,
         user,
         login,
         register,
diff --git a/lib/src/Components/Map/hooks/useMyProfile.ts b/lib/src/Components/Map/hooks/useMyProfile.ts
new file mode 100644
index 00000000..e94c82ed
--- /dev/null
+++ b/lib/src/Components/Map/hooks/useMyProfile.ts
@@ -0,0 +1,20 @@
+import { useAuth } from '#components/Auth/useAuth'
+
+import { useItems, useAllItemsLoaded } from './useItems'
+
+export const useMyProfile = () => {
+  const items = useItems()
+  const allItemsLoaded = useAllItemsLoaded()
+
+  const user = useAuth().user
+
+  // allItemsLoaded is not reliable, so we check if items.length > 0
+  const isMyProfileLoaded = allItemsLoaded && items.length > 0 && !!user
+
+  // Find the user's profile item
+  const myProfile = items.find(
+    (item) => item.layer?.userProfileLayer && item.user_created?.id === user?.id,
+  )
+
+  return { myProfile, isMyProfileLoaded }
+}
diff --git a/lib/src/Components/Onboarding/InvitePage.tsx b/lib/src/Components/Onboarding/InvitePage.tsx
new file mode 100644
index 00000000..800766a8
--- /dev/null
+++ b/lib/src/Components/Onboarding/InvitePage.tsx
@@ -0,0 +1,75 @@
+import { useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { useAuth } from '#components/Auth/useAuth'
+import { useMyProfile } from '#components/Map/hooks/useMyProfile'
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
+import type { InviteApi } from '#types/InviteApi'
+
+interface Props {
+  inviteApi: InviteApi
+}
+
+/**
+ * @category Onboarding
+ */
+export function InvitePage({ inviteApi }: Props) {
+  const { isAuthenticated, isInitialized: isAuthenticationInitialized } = useAuth()
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+
+  const { myProfile, isMyProfileLoaded } = useMyProfile()
+
+  if (!id) throw new Error('Invite ID is required')
+
+  useEffect(() => {
+    async function redeemInvite() {
+      if (!id) throw new Error('Invite ID is required')
+
+      if (!isMyProfileLoaded) return
+
+      if (!myProfile) {
+        toast.error('Could not find your profile to redeem the invite.')
+        return
+      }
+
+      const invitingProfileId = await inviteApi.redeemInvite(id, myProfile.id)
+
+      if (invitingProfileId) {
+        toast.success('Invite redeemed successfully!')
+        navigate(`/item/${invitingProfileId}`)
+      } else {
+        toast.error('Failed to redeem invite')
+        navigate('/')
+      }
+    }
+
+    if (!isAuthenticationInitialized) return
+
+    if (isAuthenticated) {
+      void redeemInvite()
+    } else {
+      // Save invite code in local storage
+      localStorage.setItem('inviteCode', id)
+
+      // Redirect to login page
+      navigate('/login')
+    }
+  }, [
+    id,
+    isAuthenticated,
+    inviteApi,
+    navigate,
+    isAuthenticationInitialized,
+    myProfile,
+    isMyProfileLoaded,
+  ])
+
+  return (
+    <MapOverlayPage backdrop className='tw:max-w-xs tw:h-fit'>
+      <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>Invitation</h2>
+    </MapOverlayPage>
+  )
+}
diff --git a/lib/src/Components/Onboarding/index.ts b/lib/src/Components/Onboarding/index.ts
new file mode 100644
index 00000000..852a6f18
--- /dev/null
+++ b/lib/src/Components/Onboarding/index.ts
@@ -0,0 +1 @@
+export { InvitePage } from './InvitePage'
diff --git a/lib/src/Components/Profile/Subcomponents/InviteLinkView.spec.tsx b/lib/src/Components/Profile/Subcomponents/InviteLinkView.spec.tsx
new file mode 100644
index 00000000..ece8b690
--- /dev/null
+++ b/lib/src/Components/Profile/Subcomponents/InviteLinkView.spec.tsx
@@ -0,0 +1,75 @@
+import { render, fireEvent } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import { InviteLinkView } from './InviteLinkView'
+
+import type { Item } from '#types/Item'
+
+const itemWithSecret: Item = {
+  secrets: [
+    {
+      secret: 'secret1',
+    },
+  ],
+  id: '1',
+  name: 'Test Item',
+}
+
+const itemWithoutSecret: Item = {
+  secrets: [],
+  id: '2',
+  name: 'Test Item Without Secret',
+}
+
+const itemWithUndefinedSecrets: Item = {
+  id: '3',
+  name: 'Test Item With Undefined Secrets',
+}
+
+describe('<InviteLinkView />', () => {
+  let wrapper: ReturnType<typeof render>
+
+  const Wrapper = ({ item }: { item: Item }) => {
+    return render(<InviteLinkView item={item} />)
+  }
+
+  describe('when item does not have secrets', () => {
+    it('does not render anything', () => {
+      wrapper = Wrapper({ item: itemWithoutSecret })
+      expect(wrapper.container.firstChild).toBeNull()
+    })
+  })
+
+  describe('when item has secrets undefined', () => {
+    it('does not render anything', () => {
+      wrapper = Wrapper({ item: itemWithUndefinedSecrets })
+      expect(wrapper.container.firstChild).toBeNull()
+    })
+  })
+
+  describe('when item has secrets', () => {
+    beforeEach(() => {
+      wrapper = Wrapper({ item: itemWithSecret })
+    })
+
+    it('renders the secret', () => {
+      expect(wrapper.getByDisplayValue('secret1', { exact: false })).toBeInTheDocument()
+    })
+
+    it('matches the snapshot', () => {
+      expect(wrapper.container.firstChild).toMatchSnapshot()
+    })
+
+    it('copies the secret to clipboard when button is clicked', () => {
+      const copyButton = wrapper.getByRole('button')
+      expect(copyButton).toBeInTheDocument()
+
+      const clipboardSpy = vi.spyOn(navigator.clipboard, 'writeText')
+
+      fireEvent.click(copyButton)
+
+      // TODO Implement in a way that the URL stays consistent on CI
+      expect(clipboardSpy).toHaveBeenCalledWith('http://localhost:3000/invite/secret1')
+    })
+  })
+})
diff --git a/lib/src/Components/Profile/Subcomponents/InviteLinkView.tsx b/lib/src/Components/Profile/Subcomponents/InviteLinkView.tsx
new file mode 100644
index 00000000..34bf615b
--- /dev/null
+++ b/lib/src/Components/Profile/Subcomponents/InviteLinkView.tsx
@@ -0,0 +1,38 @@
+import { ClipboardIcon } from '@heroicons/react/24/outline'
+import QRCode from 'react-qr-code'
+import { toast } from 'react-toastify'
+
+import type { Item } from '#types/Item'
+
+export const InviteLinkView = ({ item }: { item: Item }) => {
+  // Only show if user has permission to view secrets.
+  if (!item.secrets || item.secrets.length === 0) return
+
+  const link = `${window.location.origin}/invite/${item.secrets[0].secret}`
+
+  const copyToClipboard = () => {
+    void navigator.clipboard
+      .writeText(link)
+      .then(() => toast.success('Invite link copied to clipboard!'))
+  }
+
+  return (
+    <div className='tw:my-10 tw:mt-2 tw:px-6'>
+      <h2 className='tw:text-lg tw:font-semibold'>Invite</h2>
+      <div className='tw:mt-2 tw:text-sm tw:flex tw:gap-2 tw:mb-2'>
+        <input
+          type='text'
+          value={link}
+          readOnly
+          className='tw:w-full tw:p-2 tw:border tw:rounded'
+        />
+        <button onClick={copyToClipboard} className='btn btn-circle btn-primary'>
+          <ClipboardIcon className='w-6 h-6' />
+        </button>
+      </div>
+      <div className='tw:bg-white tw:p-2 tw:w-fit'>
+        <QRCode value={link} size={128} />
+      </div>
+    </div>
+  )
+}
diff --git a/lib/src/Components/Profile/Subcomponents/RelationsView.tsx b/lib/src/Components/Profile/Subcomponents/RelationsView.tsx
new file mode 100644
index 00000000..2348b646
--- /dev/null
+++ b/lib/src/Components/Profile/Subcomponents/RelationsView.tsx
@@ -0,0 +1,37 @@
+import { useItems } from '#components/Map/hooks/useItems'
+
+import type { Item } from '#types/Item'
+
+interface Props {
+  item: Item
+  relation: string
+}
+
+export const RelationsView = ({ item, relation }: Props) => {
+  const items = useItems()
+
+  if (!item.relations) return
+
+  const relationsOfRightType = item.relations.filter((r) => r.type === relation)
+
+  const relatedItems = items.filter((i) => relationsOfRightType.some((r) => r.id === i.id))
+
+  const hasRelatedItems = relatedItems.length > 0
+
+  return (
+    <div>
+      <h2>{relation}</h2>
+      {hasRelatedItems ? (
+        <ul>
+          {relatedItems.map((relatedItem) => (
+            <li key={relatedItem.id}>
+              <a href={`/item/${relatedItem.id}`}>{relatedItem.name}</a>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No related items found.</p>
+      )}
+    </div>
+  )
+}
diff --git a/lib/src/Components/Profile/Subcomponents/__snapshots__/InviteLinkView.spec.tsx.snap b/lib/src/Components/Profile/Subcomponents/__snapshots__/InviteLinkView.spec.tsx.snap
new file mode 100644
index 00000000..0340551f
--- /dev/null
+++ b/lib/src/Components/Profile/Subcomponents/__snapshots__/InviteLinkView.spec.tsx.snap
@@ -0,0 +1,62 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<InviteLinkView /> > when item has secrets > matches the snapshot 1`] = `
+<div
+  class="tw:my-10 tw:mt-2 tw:px-6"
+>
+  <h2
+    class="tw:text-lg tw:font-semibold"
+  >
+    Invite
+  </h2>
+  <div
+    class="tw:mt-2 tw:text-sm tw:flex tw:gap-2 tw:mb-2"
+  >
+    <input
+      class="tw:w-full tw:p-2 tw:border tw:rounded"
+      readonly=""
+      type="text"
+      value="http://localhost:3000/invite/secret1"
+    />
+    <button
+      class="btn btn-circle btn-primary"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-6 h-6"
+        data-slot="icon"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    class="tw:bg-white tw:p-2 tw:w-fit"
+  >
+    <svg
+      height="128"
+      viewBox="0 0 29 29"
+      width="128"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="       M 7 0 l 1 0 0 1 -1 0 Z  M 9 0 l 1 0 0 1 -1 0 Z  M 11 0 l 1 0 0 1 -1 0 Z   M 14 0 l 1 0 0 1 -1 0 Z  M 16 0 l 1 0 0 1 -1 0 Z     M 21 0 l 1 0 0 1 -1 0 Z         M 1 1 l 1 0 0 1 -1 0 Z M 2 1 l 1 0 0 1 -1 0 Z M 3 1 l 1 0 0 1 -1 0 Z M 4 1 l 1 0 0 1 -1 0 Z M 5 1 l 1 0 0 1 -1 0 Z  M 7 1 l 1 0 0 1 -1 0 Z M 8 1 l 1 0 0 1 -1 0 Z      M 14 1 l 1 0 0 1 -1 0 Z M 15 1 l 1 0 0 1 -1 0 Z   M 18 1 l 1 0 0 1 -1 0 Z M 19 1 l 1 0 0 1 -1 0 Z M 20 1 l 1 0 0 1 -1 0 Z M 21 1 l 1 0 0 1 -1 0 Z  M 23 1 l 1 0 0 1 -1 0 Z M 24 1 l 1 0 0 1 -1 0 Z M 25 1 l 1 0 0 1 -1 0 Z M 26 1 l 1 0 0 1 -1 0 Z M 27 1 l 1 0 0 1 -1 0 Z   M 1 2 l 1 0 0 1 -1 0 Z    M 5 2 l 1 0 0 1 -1 0 Z  M 7 2 l 1 0 0 1 -1 0 Z    M 11 2 l 1 0 0 1 -1 0 Z M 12 2 l 1 0 0 1 -1 0 Z M 13 2 l 1 0 0 1 -1 0 Z M 14 2 l 1 0 0 1 -1 0 Z M 15 2 l 1 0 0 1 -1 0 Z  M 17 2 l 1 0 0 1 -1 0 Z  M 19 2 l 1 0 0 1 -1 0 Z  M 21 2 l 1 0 0 1 -1 0 Z  M 23 2 l 1 0 0 1 -1 0 Z    M 27 2 l 1 0 0 1 -1 0 Z   M 1 3 l 1 0 0 1 -1 0 Z    M 5 3 l 1 0 0 1 -1 0 Z  M 7 3 l 1 0 0 1 -1 0 Z    M 11 3 l 1 0 0 1 -1 0 Z  M 13 3 l 1 0 0 1 -1 0 Z     M 18 3 l 1 0 0 1 -1 0 Z  M 20 3 l 1 0 0 1 -1 0 Z M 21 3 l 1 0 0 1 -1 0 Z  M 23 3 l 1 0 0 1 -1 0 Z    M 27 3 l 1 0 0 1 -1 0 Z   M 1 4 l 1 0 0 1 -1 0 Z    M 5 4 l 1 0 0 1 -1 0 Z  M 7 4 l 1 0 0 1 -1 0 Z  M 9 4 l 1 0 0 1 -1 0 Z M 10 4 l 1 0 0 1 -1 0 Z   M 13 4 l 1 0 0 1 -1 0 Z   M 16 4 l 1 0 0 1 -1 0 Z M 17 4 l 1 0 0 1 -1 0 Z M 18 4 l 1 0 0 1 -1 0 Z   M 21 4 l 1 0 0 1 -1 0 Z  M 23 4 l 1 0 0 1 -1 0 Z    M 27 4 l 1 0 0 1 -1 0 Z   M 1 5 l 1 0 0 1 -1 0 Z M 2 5 l 1 0 0 1 -1 0 Z M 3 5 l 1 0 0 1 -1 0 Z M 4 5 l 1 0 0 1 -1 0 Z M 5 5 l 1 0 0 1 -1 0 Z  M 7 5 l 1 0 0 1 -1 0 Z M 8 5 l 1 0 0 1 -1 0 Z M 9 5 l 1 0 0 1 -1 0 Z   M 12 5 l 1 0 0 1 -1 0 Z  M 14 5 l 1 0 0 1 -1 0 Z M 15 5 l 1 0 0 1 -1 0 Z     M 20 5 l 1 0 0 1 -1 0 Z M 21 5 l 1 0 0 1 -1 0 Z  M 23 5 l 1 0 0 1 -1 0 Z M 24 5 l 1 0 0 1 -1 0 Z M 25 5 l 1 0 0 1 -1 0 Z M 26 5 l 1 0 0 1 -1 0 Z M 27 5 l 1 0 0 1 -1 0 Z         M 7 6 l 1 0 0 1 -1 0 Z  M 9 6 l 1 0 0 1 -1 0 Z  M 11 6 l 1 0 0 1 -1 0 Z  M 13 6 l 1 0 0 1 -1 0 Z  M 15 6 l 1 0 0 1 -1 0 Z  M 17 6 l 1 0 0 1 -1 0 Z  M 19 6 l 1 0 0 1 -1 0 Z  M 21 6 l 1 0 0 1 -1 0 Z        M 0 7 l 1 0 0 1 -1 0 Z M 1 7 l 1 0 0 1 -1 0 Z M 2 7 l 1 0 0 1 -1 0 Z M 3 7 l 1 0 0 1 -1 0 Z M 4 7 l 1 0 0 1 -1 0 Z M 5 7 l 1 0 0 1 -1 0 Z M 6 7 l 1 0 0 1 -1 0 Z M 7 7 l 1 0 0 1 -1 0 Z M 8 7 l 1 0 0 1 -1 0 Z M 9 7 l 1 0 0 1 -1 0 Z  M 11 7 l 1 0 0 1 -1 0 Z  M 13 7 l 1 0 0 1 -1 0 Z M 14 7 l 1 0 0 1 -1 0 Z M 15 7 l 1 0 0 1 -1 0 Z   M 18 7 l 1 0 0 1 -1 0 Z M 19 7 l 1 0 0 1 -1 0 Z  M 21 7 l 1 0 0 1 -1 0 Z M 22 7 l 1 0 0 1 -1 0 Z M 23 7 l 1 0 0 1 -1 0 Z M 24 7 l 1 0 0 1 -1 0 Z M 25 7 l 1 0 0 1 -1 0 Z M 26 7 l 1 0 0 1 -1 0 Z M 27 7 l 1 0 0 1 -1 0 Z M 28 7 l 1 0 0 1 -1 0 Z     M 4 8 l 1 0 0 1 -1 0 Z M 5 8 l 1 0 0 1 -1 0 Z  M 7 8 l 1 0 0 1 -1 0 Z  M 9 8 l 1 0 0 1 -1 0 Z     M 14 8 l 1 0 0 1 -1 0 Z M 15 8 l 1 0 0 1 -1 0 Z M 16 8 l 1 0 0 1 -1 0 Z      M 22 8 l 1 0 0 1 -1 0 Z M 23 8 l 1 0 0 1 -1 0 Z    M 27 8 l 1 0 0 1 -1 0 Z    M 2 9 l 1 0 0 1 -1 0 Z   M 5 9 l 1 0 0 1 -1 0 Z M 6 9 l 1 0 0 1 -1 0 Z M 7 9 l 1 0 0 1 -1 0 Z M 8 9 l 1 0 0 1 -1 0 Z M 9 9 l 1 0 0 1 -1 0 Z  M 11 9 l 1 0 0 1 -1 0 Z    M 15 9 l 1 0 0 1 -1 0 Z  M 17 9 l 1 0 0 1 -1 0 Z M 18 9 l 1 0 0 1 -1 0 Z  M 20 9 l 1 0 0 1 -1 0 Z     M 25 9 l 1 0 0 1 -1 0 Z M 26 9 l 1 0 0 1 -1 0 Z M 27 9 l 1 0 0 1 -1 0 Z   M 1 10 l 1 0 0 1 -1 0 Z   M 4 10 l 1 0 0 1 -1 0 Z M 5 10 l 1 0 0 1 -1 0 Z  M 7 10 l 1 0 0 1 -1 0 Z       M 14 10 l 1 0 0 1 -1 0 Z M 15 10 l 1 0 0 1 -1 0 Z  M 17 10 l 1 0 0 1 -1 0 Z  M 19 10 l 1 0 0 1 -1 0 Z  M 21 10 l 1 0 0 1 -1 0 Z   M 24 10 l 1 0 0 1 -1 0 Z M 25 10 l 1 0 0 1 -1 0 Z   M 28 10 l 1 0 0 1 -1 0 Z  M 1 11 l 1 0 0 1 -1 0 Z   M 4 11 l 1 0 0 1 -1 0 Z  M 6 11 l 1 0 0 1 -1 0 Z     M 11 11 l 1 0 0 1 -1 0 Z M 12 11 l 1 0 0 1 -1 0 Z M 13 11 l 1 0 0 1 -1 0 Z M 14 11 l 1 0 0 1 -1 0 Z M 15 11 l 1 0 0 1 -1 0 Z M 16 11 l 1 0 0 1 -1 0 Z M 17 11 l 1 0 0 1 -1 0 Z M 18 11 l 1 0 0 1 -1 0 Z  M 20 11 l 1 0 0 1 -1 0 Z M 21 11 l 1 0 0 1 -1 0 Z     M 26 11 l 1 0 0 1 -1 0 Z M 27 11 l 1 0 0 1 -1 0 Z          M 8 12 l 1 0 0 1 -1 0 Z   M 11 12 l 1 0 0 1 -1 0 Z  M 13 12 l 1 0 0 1 -1 0 Z   M 16 12 l 1 0 0 1 -1 0 Z  M 18 12 l 1 0 0 1 -1 0 Z M 19 12 l 1 0 0 1 -1 0 Z  M 21 12 l 1 0 0 1 -1 0 Z M 22 12 l 1 0 0 1 -1 0 Z M 23 12 l 1 0 0 1 -1 0 Z M 24 12 l 1 0 0 1 -1 0 Z   M 27 12 l 1 0 0 1 -1 0 Z M 28 12 l 1 0 0 1 -1 0 Z M 0 13 l 1 0 0 1 -1 0 Z M 1 13 l 1 0 0 1 -1 0 Z   M 4 13 l 1 0 0 1 -1 0 Z M 5 13 l 1 0 0 1 -1 0 Z M 6 13 l 1 0 0 1 -1 0 Z M 7 13 l 1 0 0 1 -1 0 Z M 8 13 l 1 0 0 1 -1 0 Z M 9 13 l 1 0 0 1 -1 0 Z M 10 13 l 1 0 0 1 -1 0 Z   M 13 13 l 1 0 0 1 -1 0 Z    M 17 13 l 1 0 0 1 -1 0 Z M 18 13 l 1 0 0 1 -1 0 Z   M 21 13 l 1 0 0 1 -1 0 Z  M 23 13 l 1 0 0 1 -1 0 Z M 24 13 l 1 0 0 1 -1 0 Z M 25 13 l 1 0 0 1 -1 0 Z M 26 13 l 1 0 0 1 -1 0 Z      M 3 14 l 1 0 0 1 -1 0 Z M 4 14 l 1 0 0 1 -1 0 Z M 5 14 l 1 0 0 1 -1 0 Z       M 12 14 l 1 0 0 1 -1 0 Z  M 14 14 l 1 0 0 1 -1 0 Z M 15 14 l 1 0 0 1 -1 0 Z  M 17 14 l 1 0 0 1 -1 0 Z M 18 14 l 1 0 0 1 -1 0 Z  M 20 14 l 1 0 0 1 -1 0 Z  M 22 14 l 1 0 0 1 -1 0 Z  M 24 14 l 1 0 0 1 -1 0 Z     M 0 15 l 1 0 0 1 -1 0 Z   M 3 15 l 1 0 0 1 -1 0 Z  M 5 15 l 1 0 0 1 -1 0 Z M 6 15 l 1 0 0 1 -1 0 Z M 7 15 l 1 0 0 1 -1 0 Z M 8 15 l 1 0 0 1 -1 0 Z M 9 15 l 1 0 0 1 -1 0 Z   M 12 15 l 1 0 0 1 -1 0 Z M 13 15 l 1 0 0 1 -1 0 Z  M 15 15 l 1 0 0 1 -1 0 Z M 16 15 l 1 0 0 1 -1 0 Z M 17 15 l 1 0 0 1 -1 0 Z M 18 15 l 1 0 0 1 -1 0 Z M 19 15 l 1 0 0 1 -1 0 Z M 20 15 l 1 0 0 1 -1 0 Z M 21 15 l 1 0 0 1 -1 0 Z  M 23 15 l 1 0 0 1 -1 0 Z  M 25 15 l 1 0 0 1 -1 0 Z M 26 15 l 1 0 0 1 -1 0 Z  M 28 15 l 1 0 0 1 -1 0 Z M 0 16 l 1 0 0 1 -1 0 Z  M 2 16 l 1 0 0 1 -1 0 Z   M 5 16 l 1 0 0 1 -1 0 Z  M 7 16 l 1 0 0 1 -1 0 Z M 8 16 l 1 0 0 1 -1 0 Z  M 10 16 l 1 0 0 1 -1 0 Z M 11 16 l 1 0 0 1 -1 0 Z  M 13 16 l 1 0 0 1 -1 0 Z  M 15 16 l 1 0 0 1 -1 0 Z  M 17 16 l 1 0 0 1 -1 0 Z  M 19 16 l 1 0 0 1 -1 0 Z M 20 16 l 1 0 0 1 -1 0 Z  M 22 16 l 1 0 0 1 -1 0 Z   M 25 16 l 1 0 0 1 -1 0 Z M 26 16 l 1 0 0 1 -1 0 Z  M 28 16 l 1 0 0 1 -1 0 Z M 0 17 l 1 0 0 1 -1 0 Z   M 3 17 l 1 0 0 1 -1 0 Z M 4 17 l 1 0 0 1 -1 0 Z  M 6 17 l 1 0 0 1 -1 0 Z M 7 17 l 1 0 0 1 -1 0 Z  M 9 17 l 1 0 0 1 -1 0 Z  M 11 17 l 1 0 0 1 -1 0 Z M 12 17 l 1 0 0 1 -1 0 Z M 13 17 l 1 0 0 1 -1 0 Z   M 16 17 l 1 0 0 1 -1 0 Z M 17 17 l 1 0 0 1 -1 0 Z  M 19 17 l 1 0 0 1 -1 0 Z M 20 17 l 1 0 0 1 -1 0 Z  M 22 17 l 1 0 0 1 -1 0 Z  M 24 17 l 1 0 0 1 -1 0 Z M 25 17 l 1 0 0 1 -1 0 Z   M 28 17 l 1 0 0 1 -1 0 Z  M 1 18 l 1 0 0 1 -1 0 Z M 2 18 l 1 0 0 1 -1 0 Z  M 4 18 l 1 0 0 1 -1 0 Z     M 9 18 l 1 0 0 1 -1 0 Z M 10 18 l 1 0 0 1 -1 0 Z M 11 18 l 1 0 0 1 -1 0 Z M 12 18 l 1 0 0 1 -1 0 Z     M 17 18 l 1 0 0 1 -1 0 Z M 18 18 l 1 0 0 1 -1 0 Z M 19 18 l 1 0 0 1 -1 0 Z   M 22 18 l 1 0 0 1 -1 0 Z  M 24 18 l 1 0 0 1 -1 0 Z   M 27 18 l 1 0 0 1 -1 0 Z M 28 18 l 1 0 0 1 -1 0 Z M 0 19 l 1 0 0 1 -1 0 Z M 1 19 l 1 0 0 1 -1 0 Z  M 3 19 l 1 0 0 1 -1 0 Z   M 6 19 l 1 0 0 1 -1 0 Z      M 12 19 l 1 0 0 1 -1 0 Z    M 16 19 l 1 0 0 1 -1 0 Z  M 18 19 l 1 0 0 1 -1 0 Z      M 24 19 l 1 0 0 1 -1 0 Z M 25 19 l 1 0 0 1 -1 0 Z  M 27 19 l 1 0 0 1 -1 0 Z M 28 19 l 1 0 0 1 -1 0 Z M 0 20 l 1 0 0 1 -1 0 Z    M 4 20 l 1 0 0 1 -1 0 Z   M 7 20 l 1 0 0 1 -1 0 Z   M 10 20 l 1 0 0 1 -1 0 Z M 11 20 l 1 0 0 1 -1 0 Z M 12 20 l 1 0 0 1 -1 0 Z   M 15 20 l 1 0 0 1 -1 0 Z            M 27 20 l 1 0 0 1 -1 0 Z M 28 20 l 1 0 0 1 -1 0 Z M 0 21 l 1 0 0 1 -1 0 Z M 1 21 l 1 0 0 1 -1 0 Z M 2 21 l 1 0 0 1 -1 0 Z M 3 21 l 1 0 0 1 -1 0 Z M 4 21 l 1 0 0 1 -1 0 Z M 5 21 l 1 0 0 1 -1 0 Z M 6 21 l 1 0 0 1 -1 0 Z M 7 21 l 1 0 0 1 -1 0 Z  M 9 21 l 1 0 0 1 -1 0 Z M 10 21 l 1 0 0 1 -1 0 Z M 11 21 l 1 0 0 1 -1 0 Z M 12 21 l 1 0 0 1 -1 0 Z M 13 21 l 1 0 0 1 -1 0 Z M 14 21 l 1 0 0 1 -1 0 Z M 15 21 l 1 0 0 1 -1 0 Z  M 17 21 l 1 0 0 1 -1 0 Z    M 21 21 l 1 0 0 1 -1 0 Z M 22 21 l 1 0 0 1 -1 0 Z M 23 21 l 1 0 0 1 -1 0 Z             M 7 22 l 1 0 0 1 -1 0 Z M 8 22 l 1 0 0 1 -1 0 Z   M 11 22 l 1 0 0 1 -1 0 Z M 12 22 l 1 0 0 1 -1 0 Z M 13 22 l 1 0 0 1 -1 0 Z  M 15 22 l 1 0 0 1 -1 0 Z      M 21 22 l 1 0 0 1 -1 0 Z  M 23 22 l 1 0 0 1 -1 0 Z   M 26 22 l 1 0 0 1 -1 0 Z  M 28 22 l 1 0 0 1 -1 0 Z  M 1 23 l 1 0 0 1 -1 0 Z M 2 23 l 1 0 0 1 -1 0 Z M 3 23 l 1 0 0 1 -1 0 Z M 4 23 l 1 0 0 1 -1 0 Z M 5 23 l 1 0 0 1 -1 0 Z  M 7 23 l 1 0 0 1 -1 0 Z M 8 23 l 1 0 0 1 -1 0 Z  M 10 23 l 1 0 0 1 -1 0 Z     M 15 23 l 1 0 0 1 -1 0 Z M 16 23 l 1 0 0 1 -1 0 Z M 17 23 l 1 0 0 1 -1 0 Z    M 21 23 l 1 0 0 1 -1 0 Z M 22 23 l 1 0 0 1 -1 0 Z M 23 23 l 1 0 0 1 -1 0 Z  M 25 23 l 1 0 0 1 -1 0 Z M 26 23 l 1 0 0 1 -1 0 Z M 27 23 l 1 0 0 1 -1 0 Z   M 1 24 l 1 0 0 1 -1 0 Z    M 5 24 l 1 0 0 1 -1 0 Z  M 7 24 l 1 0 0 1 -1 0 Z M 8 24 l 1 0 0 1 -1 0 Z M 9 24 l 1 0 0 1 -1 0 Z   M 12 24 l 1 0 0 1 -1 0 Z M 13 24 l 1 0 0 1 -1 0 Z M 14 24 l 1 0 0 1 -1 0 Z  M 16 24 l 1 0 0 1 -1 0 Z   M 19 24 l 1 0 0 1 -1 0 Z      M 25 24 l 1 0 0 1 -1 0 Z  M 27 24 l 1 0 0 1 -1 0 Z M 28 24 l 1 0 0 1 -1 0 Z  M 1 25 l 1 0 0 1 -1 0 Z    M 5 25 l 1 0 0 1 -1 0 Z  M 7 25 l 1 0 0 1 -1 0 Z  M 9 25 l 1 0 0 1 -1 0 Z M 10 25 l 1 0 0 1 -1 0 Z  M 12 25 l 1 0 0 1 -1 0 Z  M 14 25 l 1 0 0 1 -1 0 Z   M 17 25 l 1 0 0 1 -1 0 Z M 18 25 l 1 0 0 1 -1 0 Z M 19 25 l 1 0 0 1 -1 0 Z M 20 25 l 1 0 0 1 -1 0 Z  M 22 25 l 1 0 0 1 -1 0 Z    M 26 25 l 1 0 0 1 -1 0 Z M 27 25 l 1 0 0 1 -1 0 Z   M 1 26 l 1 0 0 1 -1 0 Z    M 5 26 l 1 0 0 1 -1 0 Z  M 7 26 l 1 0 0 1 -1 0 Z  M 9 26 l 1 0 0 1 -1 0 Z M 10 26 l 1 0 0 1 -1 0 Z M 11 26 l 1 0 0 1 -1 0 Z  M 13 26 l 1 0 0 1 -1 0 Z  M 15 26 l 1 0 0 1 -1 0 Z M 16 26 l 1 0 0 1 -1 0 Z      M 22 26 l 1 0 0 1 -1 0 Z  M 24 26 l 1 0 0 1 -1 0 Z  M 26 26 l 1 0 0 1 -1 0 Z M 27 26 l 1 0 0 1 -1 0 Z   M 1 27 l 1 0 0 1 -1 0 Z M 2 27 l 1 0 0 1 -1 0 Z M 3 27 l 1 0 0 1 -1 0 Z M 4 27 l 1 0 0 1 -1 0 Z M 5 27 l 1 0 0 1 -1 0 Z  M 7 27 l 1 0 0 1 -1 0 Z  M 9 27 l 1 0 0 1 -1 0 Z  M 11 27 l 1 0 0 1 -1 0 Z   M 14 27 l 1 0 0 1 -1 0 Z M 15 27 l 1 0 0 1 -1 0 Z M 16 27 l 1 0 0 1 -1 0 Z M 17 27 l 1 0 0 1 -1 0 Z M 18 27 l 1 0 0 1 -1 0 Z   M 21 27 l 1 0 0 1 -1 0 Z M 22 27 l 1 0 0 1 -1 0 Z  M 24 27 l 1 0 0 1 -1 0 Z  M 26 27 l 1 0 0 1 -1 0 Z  M 28 27 l 1 0 0 1 -1 0 Z        M 7 28 l 1 0 0 1 -1 0 Z   M 10 28 l 1 0 0 1 -1 0 Z  M 12 28 l 1 0 0 1 -1 0 Z M 13 28 l 1 0 0 1 -1 0 Z M 14 28 l 1 0 0 1 -1 0 Z M 15 28 l 1 0 0 1 -1 0 Z  M 17 28 l 1 0 0 1 -1 0 Z  M 19 28 l 1 0 0 1 -1 0 Z  M 21 28 l 1 0 0 1 -1 0 Z M 22 28 l 1 0 0 1 -1 0 Z M 23 28 l 1 0 0 1 -1 0 Z  M 25 28 l 1 0 0 1 -1 0 Z M 26 28 l 1 0 0 1 -1 0 Z  M 28 28 l 1 0 0 1 -1 0 Z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M 0 0 l 1 0 0 1 -1 0 Z M 1 0 l 1 0 0 1 -1 0 Z M 2 0 l 1 0 0 1 -1 0 Z M 3 0 l 1 0 0 1 -1 0 Z M 4 0 l 1 0 0 1 -1 0 Z M 5 0 l 1 0 0 1 -1 0 Z M 6 0 l 1 0 0 1 -1 0 Z  M 8 0 l 1 0 0 1 -1 0 Z  M 10 0 l 1 0 0 1 -1 0 Z  M 12 0 l 1 0 0 1 -1 0 Z M 13 0 l 1 0 0 1 -1 0 Z  M 15 0 l 1 0 0 1 -1 0 Z  M 17 0 l 1 0 0 1 -1 0 Z M 18 0 l 1 0 0 1 -1 0 Z M 19 0 l 1 0 0 1 -1 0 Z M 20 0 l 1 0 0 1 -1 0 Z  M 22 0 l 1 0 0 1 -1 0 Z M 23 0 l 1 0 0 1 -1 0 Z M 24 0 l 1 0 0 1 -1 0 Z M 25 0 l 1 0 0 1 -1 0 Z M 26 0 l 1 0 0 1 -1 0 Z M 27 0 l 1 0 0 1 -1 0 Z M 28 0 l 1 0 0 1 -1 0 Z M 0 1 l 1 0 0 1 -1 0 Z      M 6 1 l 1 0 0 1 -1 0 Z   M 9 1 l 1 0 0 1 -1 0 Z M 10 1 l 1 0 0 1 -1 0 Z M 11 1 l 1 0 0 1 -1 0 Z M 12 1 l 1 0 0 1 -1 0 Z M 13 1 l 1 0 0 1 -1 0 Z   M 16 1 l 1 0 0 1 -1 0 Z M 17 1 l 1 0 0 1 -1 0 Z     M 22 1 l 1 0 0 1 -1 0 Z      M 28 1 l 1 0 0 1 -1 0 Z M 0 2 l 1 0 0 1 -1 0 Z  M 2 2 l 1 0 0 1 -1 0 Z M 3 2 l 1 0 0 1 -1 0 Z M 4 2 l 1 0 0 1 -1 0 Z  M 6 2 l 1 0 0 1 -1 0 Z  M 8 2 l 1 0 0 1 -1 0 Z M 9 2 l 1 0 0 1 -1 0 Z M 10 2 l 1 0 0 1 -1 0 Z      M 16 2 l 1 0 0 1 -1 0 Z  M 18 2 l 1 0 0 1 -1 0 Z  M 20 2 l 1 0 0 1 -1 0 Z  M 22 2 l 1 0 0 1 -1 0 Z  M 24 2 l 1 0 0 1 -1 0 Z M 25 2 l 1 0 0 1 -1 0 Z M 26 2 l 1 0 0 1 -1 0 Z  M 28 2 l 1 0 0 1 -1 0 Z M 0 3 l 1 0 0 1 -1 0 Z  M 2 3 l 1 0 0 1 -1 0 Z M 3 3 l 1 0 0 1 -1 0 Z M 4 3 l 1 0 0 1 -1 0 Z  M 6 3 l 1 0 0 1 -1 0 Z  M 8 3 l 1 0 0 1 -1 0 Z M 9 3 l 1 0 0 1 -1 0 Z M 10 3 l 1 0 0 1 -1 0 Z  M 12 3 l 1 0 0 1 -1 0 Z  M 14 3 l 1 0 0 1 -1 0 Z M 15 3 l 1 0 0 1 -1 0 Z M 16 3 l 1 0 0 1 -1 0 Z M 17 3 l 1 0 0 1 -1 0 Z  M 19 3 l 1 0 0 1 -1 0 Z   M 22 3 l 1 0 0 1 -1 0 Z  M 24 3 l 1 0 0 1 -1 0 Z M 25 3 l 1 0 0 1 -1 0 Z M 26 3 l 1 0 0 1 -1 0 Z  M 28 3 l 1 0 0 1 -1 0 Z M 0 4 l 1 0 0 1 -1 0 Z  M 2 4 l 1 0 0 1 -1 0 Z M 3 4 l 1 0 0 1 -1 0 Z M 4 4 l 1 0 0 1 -1 0 Z  M 6 4 l 1 0 0 1 -1 0 Z  M 8 4 l 1 0 0 1 -1 0 Z   M 11 4 l 1 0 0 1 -1 0 Z M 12 4 l 1 0 0 1 -1 0 Z  M 14 4 l 1 0 0 1 -1 0 Z M 15 4 l 1 0 0 1 -1 0 Z    M 19 4 l 1 0 0 1 -1 0 Z M 20 4 l 1 0 0 1 -1 0 Z  M 22 4 l 1 0 0 1 -1 0 Z  M 24 4 l 1 0 0 1 -1 0 Z M 25 4 l 1 0 0 1 -1 0 Z M 26 4 l 1 0 0 1 -1 0 Z  M 28 4 l 1 0 0 1 -1 0 Z M 0 5 l 1 0 0 1 -1 0 Z      M 6 5 l 1 0 0 1 -1 0 Z    M 10 5 l 1 0 0 1 -1 0 Z M 11 5 l 1 0 0 1 -1 0 Z  M 13 5 l 1 0 0 1 -1 0 Z   M 16 5 l 1 0 0 1 -1 0 Z M 17 5 l 1 0 0 1 -1 0 Z M 18 5 l 1 0 0 1 -1 0 Z M 19 5 l 1 0 0 1 -1 0 Z   M 22 5 l 1 0 0 1 -1 0 Z      M 28 5 l 1 0 0 1 -1 0 Z M 0 6 l 1 0 0 1 -1 0 Z M 1 6 l 1 0 0 1 -1 0 Z M 2 6 l 1 0 0 1 -1 0 Z M 3 6 l 1 0 0 1 -1 0 Z M 4 6 l 1 0 0 1 -1 0 Z M 5 6 l 1 0 0 1 -1 0 Z M 6 6 l 1 0 0 1 -1 0 Z  M 8 6 l 1 0 0 1 -1 0 Z  M 10 6 l 1 0 0 1 -1 0 Z  M 12 6 l 1 0 0 1 -1 0 Z  M 14 6 l 1 0 0 1 -1 0 Z  M 16 6 l 1 0 0 1 -1 0 Z  M 18 6 l 1 0 0 1 -1 0 Z  M 20 6 l 1 0 0 1 -1 0 Z  M 22 6 l 1 0 0 1 -1 0 Z M 23 6 l 1 0 0 1 -1 0 Z M 24 6 l 1 0 0 1 -1 0 Z M 25 6 l 1 0 0 1 -1 0 Z M 26 6 l 1 0 0 1 -1 0 Z M 27 6 l 1 0 0 1 -1 0 Z M 28 6 l 1 0 0 1 -1 0 Z           M 10 7 l 1 0 0 1 -1 0 Z  M 12 7 l 1 0 0 1 -1 0 Z    M 16 7 l 1 0 0 1 -1 0 Z M 17 7 l 1 0 0 1 -1 0 Z   M 20 7 l 1 0 0 1 -1 0 Z         M 0 8 l 1 0 0 1 -1 0 Z M 1 8 l 1 0 0 1 -1 0 Z M 2 8 l 1 0 0 1 -1 0 Z M 3 8 l 1 0 0 1 -1 0 Z   M 6 8 l 1 0 0 1 -1 0 Z  M 8 8 l 1 0 0 1 -1 0 Z  M 10 8 l 1 0 0 1 -1 0 Z M 11 8 l 1 0 0 1 -1 0 Z M 12 8 l 1 0 0 1 -1 0 Z M 13 8 l 1 0 0 1 -1 0 Z    M 17 8 l 1 0 0 1 -1 0 Z M 18 8 l 1 0 0 1 -1 0 Z M 19 8 l 1 0 0 1 -1 0 Z M 20 8 l 1 0 0 1 -1 0 Z M 21 8 l 1 0 0 1 -1 0 Z   M 24 8 l 1 0 0 1 -1 0 Z M 25 8 l 1 0 0 1 -1 0 Z M 26 8 l 1 0 0 1 -1 0 Z  M 28 8 l 1 0 0 1 -1 0 Z M 0 9 l 1 0 0 1 -1 0 Z M 1 9 l 1 0 0 1 -1 0 Z  M 3 9 l 1 0 0 1 -1 0 Z M 4 9 l 1 0 0 1 -1 0 Z      M 10 9 l 1 0 0 1 -1 0 Z  M 12 9 l 1 0 0 1 -1 0 Z M 13 9 l 1 0 0 1 -1 0 Z M 14 9 l 1 0 0 1 -1 0 Z  M 16 9 l 1 0 0 1 -1 0 Z   M 19 9 l 1 0 0 1 -1 0 Z  M 21 9 l 1 0 0 1 -1 0 Z M 22 9 l 1 0 0 1 -1 0 Z M 23 9 l 1 0 0 1 -1 0 Z M 24 9 l 1 0 0 1 -1 0 Z    M 28 9 l 1 0 0 1 -1 0 Z M 0 10 l 1 0 0 1 -1 0 Z  M 2 10 l 1 0 0 1 -1 0 Z M 3 10 l 1 0 0 1 -1 0 Z   M 6 10 l 1 0 0 1 -1 0 Z  M 8 10 l 1 0 0 1 -1 0 Z M 9 10 l 1 0 0 1 -1 0 Z M 10 10 l 1 0 0 1 -1 0 Z M 11 10 l 1 0 0 1 -1 0 Z M 12 10 l 1 0 0 1 -1 0 Z M 13 10 l 1 0 0 1 -1 0 Z   M 16 10 l 1 0 0 1 -1 0 Z  M 18 10 l 1 0 0 1 -1 0 Z  M 20 10 l 1 0 0 1 -1 0 Z  M 22 10 l 1 0 0 1 -1 0 Z M 23 10 l 1 0 0 1 -1 0 Z   M 26 10 l 1 0 0 1 -1 0 Z M 27 10 l 1 0 0 1 -1 0 Z  M 0 11 l 1 0 0 1 -1 0 Z  M 2 11 l 1 0 0 1 -1 0 Z M 3 11 l 1 0 0 1 -1 0 Z  M 5 11 l 1 0 0 1 -1 0 Z  M 7 11 l 1 0 0 1 -1 0 Z M 8 11 l 1 0 0 1 -1 0 Z M 9 11 l 1 0 0 1 -1 0 Z M 10 11 l 1 0 0 1 -1 0 Z         M 19 11 l 1 0 0 1 -1 0 Z   M 22 11 l 1 0 0 1 -1 0 Z M 23 11 l 1 0 0 1 -1 0 Z M 24 11 l 1 0 0 1 -1 0 Z M 25 11 l 1 0 0 1 -1 0 Z   M 28 11 l 1 0 0 1 -1 0 Z M 0 12 l 1 0 0 1 -1 0 Z M 1 12 l 1 0 0 1 -1 0 Z M 2 12 l 1 0 0 1 -1 0 Z M 3 12 l 1 0 0 1 -1 0 Z M 4 12 l 1 0 0 1 -1 0 Z M 5 12 l 1 0 0 1 -1 0 Z M 6 12 l 1 0 0 1 -1 0 Z M 7 12 l 1 0 0 1 -1 0 Z  M 9 12 l 1 0 0 1 -1 0 Z M 10 12 l 1 0 0 1 -1 0 Z  M 12 12 l 1 0 0 1 -1 0 Z  M 14 12 l 1 0 0 1 -1 0 Z M 15 12 l 1 0 0 1 -1 0 Z  M 17 12 l 1 0 0 1 -1 0 Z   M 20 12 l 1 0 0 1 -1 0 Z     M 25 12 l 1 0 0 1 -1 0 Z M 26 12 l 1 0 0 1 -1 0 Z     M 2 13 l 1 0 0 1 -1 0 Z M 3 13 l 1 0 0 1 -1 0 Z        M 11 13 l 1 0 0 1 -1 0 Z M 12 13 l 1 0 0 1 -1 0 Z  M 14 13 l 1 0 0 1 -1 0 Z M 15 13 l 1 0 0 1 -1 0 Z M 16 13 l 1 0 0 1 -1 0 Z   M 19 13 l 1 0 0 1 -1 0 Z M 20 13 l 1 0 0 1 -1 0 Z  M 22 13 l 1 0 0 1 -1 0 Z     M 27 13 l 1 0 0 1 -1 0 Z M 28 13 l 1 0 0 1 -1 0 Z M 0 14 l 1 0 0 1 -1 0 Z M 1 14 l 1 0 0 1 -1 0 Z M 2 14 l 1 0 0 1 -1 0 Z    M 6 14 l 1 0 0 1 -1 0 Z M 7 14 l 1 0 0 1 -1 0 Z M 8 14 l 1 0 0 1 -1 0 Z M 9 14 l 1 0 0 1 -1 0 Z M 10 14 l 1 0 0 1 -1 0 Z M 11 14 l 1 0 0 1 -1 0 Z  M 13 14 l 1 0 0 1 -1 0 Z   M 16 14 l 1 0 0 1 -1 0 Z   M 19 14 l 1 0 0 1 -1 0 Z  M 21 14 l 1 0 0 1 -1 0 Z  M 23 14 l 1 0 0 1 -1 0 Z  M 25 14 l 1 0 0 1 -1 0 Z M 26 14 l 1 0 0 1 -1 0 Z M 27 14 l 1 0 0 1 -1 0 Z M 28 14 l 1 0 0 1 -1 0 Z  M 1 15 l 1 0 0 1 -1 0 Z M 2 15 l 1 0 0 1 -1 0 Z  M 4 15 l 1 0 0 1 -1 0 Z      M 10 15 l 1 0 0 1 -1 0 Z M 11 15 l 1 0 0 1 -1 0 Z   M 14 15 l 1 0 0 1 -1 0 Z        M 22 15 l 1 0 0 1 -1 0 Z  M 24 15 l 1 0 0 1 -1 0 Z   M 27 15 l 1 0 0 1 -1 0 Z   M 1 16 l 1 0 0 1 -1 0 Z  M 3 16 l 1 0 0 1 -1 0 Z M 4 16 l 1 0 0 1 -1 0 Z  M 6 16 l 1 0 0 1 -1 0 Z   M 9 16 l 1 0 0 1 -1 0 Z   M 12 16 l 1 0 0 1 -1 0 Z  M 14 16 l 1 0 0 1 -1 0 Z  M 16 16 l 1 0 0 1 -1 0 Z  M 18 16 l 1 0 0 1 -1 0 Z   M 21 16 l 1 0 0 1 -1 0 Z  M 23 16 l 1 0 0 1 -1 0 Z M 24 16 l 1 0 0 1 -1 0 Z   M 27 16 l 1 0 0 1 -1 0 Z   M 1 17 l 1 0 0 1 -1 0 Z M 2 17 l 1 0 0 1 -1 0 Z   M 5 17 l 1 0 0 1 -1 0 Z   M 8 17 l 1 0 0 1 -1 0 Z  M 10 17 l 1 0 0 1 -1 0 Z    M 14 17 l 1 0 0 1 -1 0 Z M 15 17 l 1 0 0 1 -1 0 Z   M 18 17 l 1 0 0 1 -1 0 Z   M 21 17 l 1 0 0 1 -1 0 Z  M 23 17 l 1 0 0 1 -1 0 Z   M 26 17 l 1 0 0 1 -1 0 Z M 27 17 l 1 0 0 1 -1 0 Z  M 0 18 l 1 0 0 1 -1 0 Z   M 3 18 l 1 0 0 1 -1 0 Z  M 5 18 l 1 0 0 1 -1 0 Z M 6 18 l 1 0 0 1 -1 0 Z M 7 18 l 1 0 0 1 -1 0 Z M 8 18 l 1 0 0 1 -1 0 Z     M 13 18 l 1 0 0 1 -1 0 Z M 14 18 l 1 0 0 1 -1 0 Z M 15 18 l 1 0 0 1 -1 0 Z M 16 18 l 1 0 0 1 -1 0 Z    M 20 18 l 1 0 0 1 -1 0 Z M 21 18 l 1 0 0 1 -1 0 Z  M 23 18 l 1 0 0 1 -1 0 Z  M 25 18 l 1 0 0 1 -1 0 Z M 26 18 l 1 0 0 1 -1 0 Z     M 2 19 l 1 0 0 1 -1 0 Z  M 4 19 l 1 0 0 1 -1 0 Z M 5 19 l 1 0 0 1 -1 0 Z  M 7 19 l 1 0 0 1 -1 0 Z M 8 19 l 1 0 0 1 -1 0 Z M 9 19 l 1 0 0 1 -1 0 Z M 10 19 l 1 0 0 1 -1 0 Z M 11 19 l 1 0 0 1 -1 0 Z  M 13 19 l 1 0 0 1 -1 0 Z M 14 19 l 1 0 0 1 -1 0 Z M 15 19 l 1 0 0 1 -1 0 Z  M 17 19 l 1 0 0 1 -1 0 Z  M 19 19 l 1 0 0 1 -1 0 Z M 20 19 l 1 0 0 1 -1 0 Z M 21 19 l 1 0 0 1 -1 0 Z M 22 19 l 1 0 0 1 -1 0 Z M 23 19 l 1 0 0 1 -1 0 Z   M 26 19 l 1 0 0 1 -1 0 Z    M 1 20 l 1 0 0 1 -1 0 Z M 2 20 l 1 0 0 1 -1 0 Z M 3 20 l 1 0 0 1 -1 0 Z  M 5 20 l 1 0 0 1 -1 0 Z M 6 20 l 1 0 0 1 -1 0 Z  M 8 20 l 1 0 0 1 -1 0 Z M 9 20 l 1 0 0 1 -1 0 Z    M 13 20 l 1 0 0 1 -1 0 Z M 14 20 l 1 0 0 1 -1 0 Z  M 16 20 l 1 0 0 1 -1 0 Z M 17 20 l 1 0 0 1 -1 0 Z M 18 20 l 1 0 0 1 -1 0 Z M 19 20 l 1 0 0 1 -1 0 Z M 20 20 l 1 0 0 1 -1 0 Z M 21 20 l 1 0 0 1 -1 0 Z M 22 20 l 1 0 0 1 -1 0 Z M 23 20 l 1 0 0 1 -1 0 Z M 24 20 l 1 0 0 1 -1 0 Z M 25 20 l 1 0 0 1 -1 0 Z M 26 20 l 1 0 0 1 -1 0 Z           M 8 21 l 1 0 0 1 -1 0 Z        M 16 21 l 1 0 0 1 -1 0 Z  M 18 21 l 1 0 0 1 -1 0 Z M 19 21 l 1 0 0 1 -1 0 Z M 20 21 l 1 0 0 1 -1 0 Z    M 24 21 l 1 0 0 1 -1 0 Z M 25 21 l 1 0 0 1 -1 0 Z M 26 21 l 1 0 0 1 -1 0 Z M 27 21 l 1 0 0 1 -1 0 Z M 28 21 l 1 0 0 1 -1 0 Z M 0 22 l 1 0 0 1 -1 0 Z M 1 22 l 1 0 0 1 -1 0 Z M 2 22 l 1 0 0 1 -1 0 Z M 3 22 l 1 0 0 1 -1 0 Z M 4 22 l 1 0 0 1 -1 0 Z M 5 22 l 1 0 0 1 -1 0 Z M 6 22 l 1 0 0 1 -1 0 Z   M 9 22 l 1 0 0 1 -1 0 Z M 10 22 l 1 0 0 1 -1 0 Z    M 14 22 l 1 0 0 1 -1 0 Z  M 16 22 l 1 0 0 1 -1 0 Z M 17 22 l 1 0 0 1 -1 0 Z M 18 22 l 1 0 0 1 -1 0 Z M 19 22 l 1 0 0 1 -1 0 Z M 20 22 l 1 0 0 1 -1 0 Z  M 22 22 l 1 0 0 1 -1 0 Z  M 24 22 l 1 0 0 1 -1 0 Z M 25 22 l 1 0 0 1 -1 0 Z  M 27 22 l 1 0 0 1 -1 0 Z  M 0 23 l 1 0 0 1 -1 0 Z      M 6 23 l 1 0 0 1 -1 0 Z   M 9 23 l 1 0 0 1 -1 0 Z  M 11 23 l 1 0 0 1 -1 0 Z M 12 23 l 1 0 0 1 -1 0 Z M 13 23 l 1 0 0 1 -1 0 Z M 14 23 l 1 0 0 1 -1 0 Z    M 18 23 l 1 0 0 1 -1 0 Z M 19 23 l 1 0 0 1 -1 0 Z M 20 23 l 1 0 0 1 -1 0 Z    M 24 23 l 1 0 0 1 -1 0 Z    M 28 23 l 1 0 0 1 -1 0 Z M 0 24 l 1 0 0 1 -1 0 Z  M 2 24 l 1 0 0 1 -1 0 Z M 3 24 l 1 0 0 1 -1 0 Z M 4 24 l 1 0 0 1 -1 0 Z  M 6 24 l 1 0 0 1 -1 0 Z    M 10 24 l 1 0 0 1 -1 0 Z M 11 24 l 1 0 0 1 -1 0 Z    M 15 24 l 1 0 0 1 -1 0 Z  M 17 24 l 1 0 0 1 -1 0 Z M 18 24 l 1 0 0 1 -1 0 Z  M 20 24 l 1 0 0 1 -1 0 Z M 21 24 l 1 0 0 1 -1 0 Z M 22 24 l 1 0 0 1 -1 0 Z M 23 24 l 1 0 0 1 -1 0 Z M 24 24 l 1 0 0 1 -1 0 Z  M 26 24 l 1 0 0 1 -1 0 Z   M 0 25 l 1 0 0 1 -1 0 Z  M 2 25 l 1 0 0 1 -1 0 Z M 3 25 l 1 0 0 1 -1 0 Z M 4 25 l 1 0 0 1 -1 0 Z  M 6 25 l 1 0 0 1 -1 0 Z  M 8 25 l 1 0 0 1 -1 0 Z   M 11 25 l 1 0 0 1 -1 0 Z  M 13 25 l 1 0 0 1 -1 0 Z  M 15 25 l 1 0 0 1 -1 0 Z M 16 25 l 1 0 0 1 -1 0 Z     M 21 25 l 1 0 0 1 -1 0 Z  M 23 25 l 1 0 0 1 -1 0 Z M 24 25 l 1 0 0 1 -1 0 Z M 25 25 l 1 0 0 1 -1 0 Z   M 28 25 l 1 0 0 1 -1 0 Z M 0 26 l 1 0 0 1 -1 0 Z  M 2 26 l 1 0 0 1 -1 0 Z M 3 26 l 1 0 0 1 -1 0 Z M 4 26 l 1 0 0 1 -1 0 Z  M 6 26 l 1 0 0 1 -1 0 Z  M 8 26 l 1 0 0 1 -1 0 Z    M 12 26 l 1 0 0 1 -1 0 Z  M 14 26 l 1 0 0 1 -1 0 Z   M 17 26 l 1 0 0 1 -1 0 Z M 18 26 l 1 0 0 1 -1 0 Z M 19 26 l 1 0 0 1 -1 0 Z M 20 26 l 1 0 0 1 -1 0 Z M 21 26 l 1 0 0 1 -1 0 Z  M 23 26 l 1 0 0 1 -1 0 Z  M 25 26 l 1 0 0 1 -1 0 Z   M 28 26 l 1 0 0 1 -1 0 Z M 0 27 l 1 0 0 1 -1 0 Z      M 6 27 l 1 0 0 1 -1 0 Z  M 8 27 l 1 0 0 1 -1 0 Z  M 10 27 l 1 0 0 1 -1 0 Z  M 12 27 l 1 0 0 1 -1 0 Z M 13 27 l 1 0 0 1 -1 0 Z      M 19 27 l 1 0 0 1 -1 0 Z M 20 27 l 1 0 0 1 -1 0 Z   M 23 27 l 1 0 0 1 -1 0 Z  M 25 27 l 1 0 0 1 -1 0 Z  M 27 27 l 1 0 0 1 -1 0 Z  M 0 28 l 1 0 0 1 -1 0 Z M 1 28 l 1 0 0 1 -1 0 Z M 2 28 l 1 0 0 1 -1 0 Z M 3 28 l 1 0 0 1 -1 0 Z M 4 28 l 1 0 0 1 -1 0 Z M 5 28 l 1 0 0 1 -1 0 Z M 6 28 l 1 0 0 1 -1 0 Z  M 8 28 l 1 0 0 1 -1 0 Z M 9 28 l 1 0 0 1 -1 0 Z  M 11 28 l 1 0 0 1 -1 0 Z     M 16 28 l 1 0 0 1 -1 0 Z  M 18 28 l 1 0 0 1 -1 0 Z  M 20 28 l 1 0 0 1 -1 0 Z    M 24 28 l 1 0 0 1 -1 0 Z   M 27 28 l 1 0 0 1 -1 0 Z "
+        fill="#000000"
+      />
+    </svg>
+  </div>
+</div>
+`;
diff --git a/lib/src/Components/Profile/Templates/FlexForm.tsx b/lib/src/Components/Profile/Templates/FlexForm.tsx
index 87a5dca1..59406070 100644
--- a/lib/src/Components/Profile/Templates/FlexForm.tsx
+++ b/lib/src/Components/Profile/Templates/FlexForm.tsx
@@ -17,6 +17,7 @@ const componentMap = {
   startEnd: ProfileStartEndForm,
   crowdfundings: CrowdfundingForm,
   gallery: GalleryForm,
+  inviteLinks: () => null, // Not needed for now
   // weitere Komponenten hier
 }
 
diff --git a/lib/src/Components/Profile/Templates/FlexView.tsx b/lib/src/Components/Profile/Templates/FlexView.tsx
index 845898c3..e3024c45 100644
--- a/lib/src/Components/Profile/Templates/FlexView.tsx
+++ b/lib/src/Components/Profile/Templates/FlexView.tsx
@@ -4,8 +4,10 @@ import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoVi
 import { CrowdfundingView } from '#components/Profile/Subcomponents/CrowdfundingView'
 import { GalleryView } from '#components/Profile/Subcomponents/GalleryView'
 import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
+import { InviteLinkView } from '#components/Profile/Subcomponents/InviteLinkView'
 import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
 import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
+import { RelationsView } from '#components/Profile/Subcomponents/RelationsView'
 
 import type { Item } from '#types/Item'
 import type { Key } from 'react'
@@ -17,6 +19,8 @@ const componentMap = {
   startEnd: ProfileStartEndView,
   gallery: GalleryView,
   crowdfundings: CrowdfundingView,
+  inviteLinks: InviteLinkView,
+  relations: RelationsView,
   // weitere Komponenten hier
 }
 
diff --git a/lib/src/index.tsx b/lib/src/index.tsx
index 8a9d5e89..f3239c11 100644
--- a/lib/src/index.tsx
+++ b/lib/src/index.tsx
@@ -8,6 +8,7 @@ export * from './Components/Gaming'
 export * from './Components/Templates'
 export * from './Components/Input'
 export * from './Components/Item'
+export * from './Components/Onboarding'
 export * from './Components/Profile'
 
 declare global {
diff --git a/lib/src/types/InviteApi.d.ts b/lib/src/types/InviteApi.d.ts
new file mode 100644
index 00000000..a4a335c6
--- /dev/null
+++ b/lib/src/types/InviteApi.d.ts
@@ -0,0 +1,4 @@
+export interface InviteApi {
+  validateInvite(inviteId: string): Promise<string | null>
+  redeemInvite(inviteId: string, itemId: string): Promise<string | null>
+}
diff --git a/lib/src/types/Item.d.ts b/lib/src/types/Item.d.ts
index 7dd9dcf1..12d4b8e2 100644
--- a/lib/src/types/Item.d.ts
+++ b/lib/src/types/Item.d.ts
@@ -18,6 +18,10 @@ interface GalleryItem {
     | string
 }
 
+interface ItemSecret {
+  secret: string
+}
+
 /**
  * @category Types
  */
@@ -55,6 +59,7 @@ export interface Item {
   next_appointment?: string
   gallery?: GalleryItem[]
   openCollectiveSlug?: string
+  secrets?: ItemSecret[]
 
   // {
   // coordinates: [number, number]

From 7e0d44dac801a38252bc47d906bdb638f29e0acc Mon Sep 17 00:00:00 2001
From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>
Date: Wed, 16 Jul 2025 20:57:21 +0200
Subject: [PATCH 4/4] fix(app): add close button to custom info modal (#275)

* add close button to custom info modal

* update workflow

* fixes workflow

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 .github/workflows/test.build.lib.yml | 8 +++++++-
 app/src/ModalContent.tsx             | 8 ++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/test.build.lib.yml b/.github/workflows/test.build.lib.yml
index 99b3cd50..f47d03b2 100644
--- a/.github/workflows/test.build.lib.yml
+++ b/.github/workflows/test.build.lib.yml
@@ -1,6 +1,12 @@
 name: build:lib
 
-on: push
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   files-changed:
diff --git a/app/src/ModalContent.tsx b/app/src/ModalContent.tsx
index 61ba2a6e..65e849dc 100644
--- a/app/src/ModalContent.tsx
+++ b/app/src/ModalContent.tsx
@@ -17,6 +17,14 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
       {map.custom_text ? (
         <>
           <TextView rawText={map.custom_text}></TextView>
+          <div className='tw:grid'>
+            <label
+              className='tw:btn tw:btn-primary tw:place-self-end tw:mt-4'
+              onClick={() => clickAction1()}
+            >
+              Close
+            </label>
+          </div>
         </>
       ) : (
         <>