From 758730b523d81357a650b109aa25de5a4c110289 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Fri, 6 Jun 2025 23:14:37 +0200
Subject: [PATCH] a lot of ui fixes

---
 src/Components/AppShell/NavBar.tsx            |   2 +-
 src/Components/Input/RichTextEditor.tsx       |   1 -
 src/Components/Input/TextEditorMenu.tsx       |  94 +++++----
 .../PopupStartEndInput.tsx                    |   4 +-
 .../ItemPopupComponents/PopupTextInput.tsx    |   2 +-
 src/Components/Profile/ProfileForm.tsx        |   4 +-
 src/Components/Profile/ProfileView.tsx        |   2 +-
 .../Profile/Subcomponents/ProfileTextForm.tsx |   4 +-
 .../Profile/Subcomponents/TagsWidget.tsx      |   4 +-
 src/Components/Profile/Templates/TabsForm.tsx | 197 +++++++-----------
 src/Components/Profile/Templates/TabsView.tsx |  26 +--
 src/Components/Templates/Tabs.tsx             |  65 ++++++
 12 files changed, 208 insertions(+), 197 deletions(-)
 create mode 100644 src/Components/Templates/Tabs.tsx

diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index d8631fa2..51f521b9 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -38,7 +38,7 @@ export default function NavBar({ appName }: { appName: string }) {
           <div className='tw:flex-1 tw:mr-2'>
             <div
               className={'tw:flex-1 tw:truncate tw:grid tw:grid-flow-col'}
-              style={{ maxWidth: nameWidth + 60 }}
+              style={{ maxWidth: nameWidth + 62 }}
             >
               <Link
                 className='tw:btn tw:btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate'
diff --git a/src/Components/Input/RichTextEditor.tsx b/src/Components/Input/RichTextEditor.tsx
index f3890625..78f06147 100644
--- a/src/Components/Input/RichTextEditor.tsx
+++ b/src/Components/Input/RichTextEditor.tsx
@@ -13,7 +13,6 @@ interface RichTextEditorProps {
   labelTitle?: string
   labelStyle?: string
   containerStyle?: string
-  inputStyle?: string
   defaultValue: string
   placeholder?: string
   required?: boolean
diff --git a/src/Components/Input/TextEditorMenu.tsx b/src/Components/Input/TextEditorMenu.tsx
index ff1059b8..67cca170 100644
--- a/src/Components/Input/TextEditorMenu.tsx
+++ b/src/Components/Input/TextEditorMenu.tsx
@@ -6,13 +6,14 @@ import H3Icon from '@heroicons/react/24/solid/H3Icon'
 import ItalicIcon from '@heroicons/react/24/solid/ItalicIcon'
 import ListBulletIcon from '@heroicons/react/24/solid/ListBulletIcon'
 import NumberedListIcon from '@heroicons/react/24/solid/NumberedListIcon'
-import { Editor, useEditorState } from '@tiptap/react'
+import { useEditorState } from '@tiptap/react'
 import { FaQuoteLeft } from 'react-icons/fa6'
 import { MdUndo, MdRedo, MdHorizontalRule } from 'react-icons/md'
+import { LiaTextHeightSolid } from 'react-icons/lia'
+
+import type { Editor } from '@tiptap/react'
 
 export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
-
-
   const editorState = useEditorState({
     editor,
     selector: (ctx) => {
@@ -57,10 +58,10 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
 
   return (
     <>
-      <ul className='tw:menu tw:menu-horizontal tw:flex-none tw:bg-base-200 tw:rounded-box tw:w-full tw:rounded-b-none'>
+      <ul className='tw:menu tw:p-1 tw:menu-horizontal tw:flex-none tw:bg-base-200 tw:rounded-box tw:w-full tw:rounded-b-none'>
         <li>
           <div
-            className={`tw:tooltip ${editorState.canUndo ? '' : 'tw:opacity-50'}`}
+            className={`tw:tooltip tw:px-1 ${editorState.canUndo ? '' : 'tw:opacity-50'}`}
             data-tip='Undo'
             onClick={() => editor.chain().focus().undo().run()}
           >
@@ -69,7 +70,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip ${editorState.canRedo ? '' : 'tw:opacity-50'}`}
+            className={`tw:tooltip tw:px-1 ${editorState.canRedo ? '' : 'tw:opacity-50'}`}
             data-tip='Redo'
             onClick={() => editor.chain().focus().redo().run()}
           >
@@ -78,7 +79,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip ${editorState.isBold ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:tooltip tw:px-1 ${editorState.isBold ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Bold'
             onClick={() => editor.chain().focus().toggleBold().run()}
           >
@@ -87,7 +88,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip ${editorState.isItalic ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:tooltip tw:px-1 ${editorState.isItalic ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Italic'
             onClick={() => editor.chain().focus().toggleItalic().run()}
           >
@@ -95,35 +96,45 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
           </div>
         </li>
         <li>
-          <div
-            className={`tw:tooltip ${editorState.isHeading1 ? 'tw:bg-base-content/10' : ''}`}
-            data-tip='Heading 1'
-            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-          >
-            <H1Icon className='tw:w-5 tw:h-5' />
-          </div>
+          <details className='tw:z-10000'>
+            <summary>
+              <LiaTextHeightSolid className='tw:w-5 tw:h-5' />
+            </summary>
+            <ul>
+              <li>
+                <div
+                  className={`tw:tooltip tw:px-1 ${editorState.isHeading1 ? 'tw:bg-base-content/10' : ''}`}
+                  data-tip='Heading 1'
+                  onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                >
+                  <H1Icon className='tw:w-5 tw:h-5' />
+                </div>
+              </li>
+              <li>
+                <div
+                  className={`tw:tooltip tw:px-1 ${editorState.isHeading2 ? 'tw:bg-base-content/10' : ''}`}
+                  data-tip='Heading 2'
+                  onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                >
+                  <H2Icon className='tw:w-5 tw:h-5' />
+                </div>
+              </li>
+              <li>
+                <div
+                  className={`tw:tooltip tw:px-1 ${editorState.isHeading3 ? 'tw:bg-base-content/10' : ''}`}
+                  data-tip='Heading 3'
+                  onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+                >
+                  <H3Icon className='tw:w-5 tw:h-5' />
+                </div>
+              </li>
+            </ul>
+          </details>
         </li>
+
         <li>
           <div
-            className={`tw:tooltip ${editorState.isHeading2 ? 'tw:bg-base-content/10' : ''}`}
-            data-tip='Heading 2'
-            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-          >
-            <H2Icon className='tw:w-5 tw:h-5' />
-          </div>
-        </li>
-        <li>
-          <div
-            className={`tw:tooltip ${editorState.isHeading3 ? 'tw:bg-base-content/10' : ''}`}
-            data-tip='Heading 3'
-            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-          >
-            <H3Icon className='tw:w-5 tw:h-5' />
-          </div>
-        </li>
-        <li>
-          <div
-            className={`tw:tooltip ${editorState.isBulletList ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:tooltip tw:px-1 ${editorState.isBulletList ? 'tw:bg-base-content/10' : ''}`}
             data-tip='List'
             onClick={() => editor.chain().focus().toggleBulletList().run()}
           >
@@ -132,7 +143,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip ${editorState.isOrderedList ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:tooltip tw:px-1 ${editorState.isOrderedList ? 'tw:bg-base-content/10' : ''}`}
             data-tip='List'
             onClick={() => editor.chain().focus().toggleOrderedList().run()}
           >
@@ -141,16 +152,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip ${editorState.isCodeBlock ? 'tw:bg-base-content/10' : ''}`}
-            data-tip='Code'
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-          >
-            <CodeBracketIcon className='tw:w-5 tw:h-5' />
-          </div>
-        </li>
-        <li>
-          <div
-            className={`tw:tooltip ${editorState.isBlockquote ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:tooltip tw:px-1 ${editorState.isBlockquote ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Quote'
             onClick={() => editor.chain().focus().toggleBlockquote().run()}
           >
@@ -159,7 +161,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className='tw:tooltip'
+            className='tw:tooltip tw:px-1'
             data-tip='Horizontal Line'
             onClick={() => editor.chain().focus().setHorizontalRule().run()}
           >
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index 1106184d..88405f1f 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -26,7 +26,7 @@ export const PopupStartEndInput = ({
         placeholder='start'
         dataField='start'
         inputStyle='tw:text-sm tw:px-2'
-        labelTitle={showLabels ? 'start' : ''}
+        labelTitle={showLabels ? 'Start' : ''}
         defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
         autocomplete='one-time-code'
         updateFormValue={updateStartValue}
@@ -36,7 +36,7 @@ export const PopupStartEndInput = ({
         placeholder='end'
         dataField='end'
         inputStyle='tw:text-sm tw:px-2'
-        labelTitle={showLabels ? 'end' : ''}
+        labelTitle={showLabels ? 'End' : ''}
         defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
         autocomplete='one-time-code'
         updateFormValue={updateEndValue}
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
index e2472fab..be0331df 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
@@ -23,7 +23,7 @@ export const PopupTextInput = ({
       placeholder={placeholder}
       inputStyle={style}
       type='text'
-      containerStyle={'tw:mt-4'}
+      containerStyle={'tw:mt-4 tw:mb-2'}
     ></TextInput>
   )
 }
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index 86327112..def9836f 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -158,7 +158,7 @@ export function ProfileForm() {
     <>
       <MapOverlayPage
         backdrop
-        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0 tw:flex tw:flex-col tw:max-h-[calc(1200px)]'
+        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0 tw:flex tw:flex-col tw:max-h-[calc(1000px)]'
       >
         <form
           className='tw:flex tw:flex-col tw:flex-1 tw:min-h-0'
@@ -204,7 +204,7 @@ export function ProfileForm() {
               ></TabsForm>
             )}
 
-            <div className='tw:mb-4 tw:mt-6 tw:flex-none'>
+            <div className='tw:mt-6 tw:flex-none'>
               <button
                 className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
                 type='submit'
diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx
index 6a1d1fe6..498f0347 100644
--- a/src/Components/Profile/ProfileView.tsx
+++ b/src/Components/Profile/ProfileView.tsx
@@ -174,7 +174,7 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
       {item && (
         <MapOverlayPage
           key={item.id}
-          className={`tw:p-0! tw:overflow-scroll tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'}`}
+          className={`tw:p-0! tw:overflow-scroll tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'} tw:max-h-[1000px]`}
         >
           <>
             <div className={'tw:px-6 tw:pt-6'}>
diff --git a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
index e8ba5352..6df91ef6 100644
--- a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@@ -38,7 +38,7 @@ export const ProfileTextForm = ({
 
   return (
     <div
-      className={`tw:min-h-32 tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1' : 'tw:h-32 tw:flex-none'}`}
+      className={`tw:min-h-36 tw:max-h-156 tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1' : 'tw:h-36 tw:flex-none'}`}
     >
       <div className='tw:flex tw:justify-between tw:items-center'>
         <label
@@ -60,7 +60,7 @@ export const ProfileTextForm = ({
           }))
         }
         labelStyle={hideInputLabel ? 'tw:hidden' : ''}
-        containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-28 tw:flex-none'}
+        containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-32 tw:flex-none'}
         required={required}
       />
     </div>
diff --git a/src/Components/Profile/Subcomponents/TagsWidget.tsx b/src/Components/Profile/Subcomponents/TagsWidget.tsx
index 0faa26bc..193a6cbb 100644
--- a/src/Components/Profile/Subcomponents/TagsWidget.tsx
+++ b/src/Components/Profile/Subcomponents/TagsWidget.tsx
@@ -33,6 +33,9 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
   }
 
   const onKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+    }
     const { key } = e
     const trimmedInput = input.trim()
 
@@ -42,7 +45,6 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
       // eslint-disable-next-line react/prop-types
       !defaultTags.some((tag) => tag.name.toLocaleLowerCase() === trimmedInput.toLocaleLowerCase())
     ) {
-      e.preventDefault()
       const newTag = tags.find((t) => t.name === trimmedInput.toLocaleLowerCase())
       newTag && onUpdate([...currentTags, newTag])
       !newTag &&
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index 375caa76..d722fd25 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -6,7 +6,6 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable react/prop-types */
-import { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { RichTextEditor } from '#components/Input/RichTextEditor'
@@ -15,6 +14,7 @@ import { PopupStartEndInput, TextView } from '#components/Map/Subcomponents/Item
 import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton'
 import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView'
 import { TagsWidget } from '#components/Profile/Subcomponents/TagsWidget'
+import { Tabs } from '#components/Templates/Tabs'
 
 export const TabsForm = ({
   item,
@@ -26,114 +26,70 @@ export const TabsForm = ({
   loading,
   setUrlParams,
 }) => {
-  const [activeTab, setActiveTab] = useState<number>(1)
-  const navigate = useNavigate()
   const updateItem = useUpdateItem()
-
-  const updateActiveTab = useCallback(
-    (id: number) => {
-      setActiveTab(id)
-
-      const params = new URLSearchParams(window.location.search)
-
-      params.set('tab', `${id}`)
-      const newUrl = location.pathname + '?' + params.toString()
-      window.history.pushState({}, '', newUrl)
-      setUrlParams(params)
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [location.pathname],
-  )
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const urlTab = params.get('tab')
-    setActiveTab(urlTab ? Number(urlTab) : 1)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.search])
+  const navigate = useNavigate()
 
   return (
-    <div className='tw:grow tw:flex tw:flex-col tw:min-h-0'>
-      <div role='tablist' className='tw:tabs tw:flex tw:flex-1 tw:min-h-0 tw:tabs-lift tw:mt-3'>
-        <input
-          type='radio'
-          name='my_tabs_2'
-          role='tab'
-          className={'tw:tab'}
-          aria-label='Info'
-          checked={activeTab === 1 && true}
-          onChange={() => updateActiveTab(1)}
-        />
-        <div
-          role='tabpanel'
-          className='tw:!flex tw:!flex-col tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:!h-[calc(100%-48px)] tw:min-h-56 tw:border-none'
-        >
-          <div
-            className={`tw:flex tw:flex-col tw:flex-1 tw:min-h-0 ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`}
-          >
-            {item.layer.itemType.show_start_end_input && (
-              <PopupStartEndInput
-                item={item}
-                showLabels={false}
-                updateEndValue={(e) =>
-                  setState((prevState) => ({
-                    ...prevState,
-                    end: e,
-                  }))
-                }
-                updateStartValue={(s) =>
-                  setState((prevState) => ({
-                    ...prevState,
-                    start: s,
-                  }))
-                }
-              ></PopupStartEndInput>
-            )}
+    <div className='tw:flex tw:flex-col tw:flex-1 tw:min-h-0 tw:mt-4'>
+      <Tabs
+        setUrlParams={setUrlParams}
+        items={[
+          {
+            title: 'Info',
+            component: (
+              <div
+                className={`tw:flex tw:flex-col tw:flex-1 tw:min-h-0 ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`}
+              >
+                {item.layer.itemType.show_start_end_input && (
+                  <PopupStartEndInput
+                    item={item}
+                    showLabels={true}
+                    updateEndValue={(e) =>
+                      setState((prevState) => ({
+                        ...prevState,
+                        end: e,
+                      }))
+                    }
+                    updateStartValue={(s) =>
+                      setState((prevState) => ({
+                        ...prevState,
+                        start: s,
+                      }))
+                    }
+                  ></PopupStartEndInput>
+                )}
 
-            <RichTextEditor
-              labelTitle='About me'
-              placeholder='about ...'
-              defaultValue={item?.text ? item.text : ''}
-              updateFormValue={(v) =>
-                setState((prevState) => ({
-                  ...prevState,
-                  text: v,
-                }))
-              }
-              containerStyle='tw:pt-2 tw:grow'
-              inputStyle={`tw:h-full  ${!item.layer.itemType.show_start_end_input && 'tw:border-t-0 tw:rounded-tl-none'}`}
-            />
-            <RichTextEditor
-              labelTitle='Contact Info'
-              placeholder='contact info ...'
-              defaultValue={state.contact || ''}
-              updateFormValue={(c) =>
-                setState((prevState) => ({
-                  ...prevState,
-                  contact: c,
-                }))
-              }
-              inputStyle=''
-              containerStyle='tw:pt-2 tw:h-36 tw:flex-none'
-              required={false}
-            />
-          </div>
-        </div>
-        {item.layer?.itemType.offers_and_needs && (
-          <>
-            <input
-              type='radio'
-              name='my_tabs_2'
-              role='tab'
-              className={'tw:tab tw:min-w-[10em]  '}
-              aria-label='Offers & Needs'
-              checked={activeTab === 3 && true}
-              onChange={() => updateActiveTab(3)}
-            />
-            <div
-              role='tabpanel'
-              className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:!h-[calc(100%-48px)] tw:min-h-56 tw:border-none'
-            >
+                <RichTextEditor
+                  labelTitle='About'
+                  placeholder='about ...'
+                  defaultValue={item?.text ? item.text : ''}
+                  updateFormValue={(v) =>
+                    setState((prevState) => ({
+                      ...prevState,
+                      text: v,
+                    }))
+                  }
+                  containerStyle='tw:pt-2 tw:flex-1 tw:min-h-36 tw:max-h-136'
+                />
+                <RichTextEditor
+                  labelTitle='Contact Info'
+                  placeholder='contact info ...'
+                  defaultValue={state.contact || ''}
+                  updateFormValue={(c) =>
+                    setState((prevState) => ({
+                      ...prevState,
+                      contact: c,
+                    }))
+                  }
+                  containerStyle='tw:pt-2 tw:h-36 tw:flex-none'
+                  required={false}
+                />
+              </div>
+            ),
+          },
+          {
+            title: 'Offers & Needs',
+            component: (
               <div className='tw:h-full'>
                 <div className='tw:w-full tw:h-[calc(50%-0.75em)] tw:mb-4'>
                   <TagsWidget
@@ -162,24 +118,11 @@ export const TabsForm = ({
                   />
                 </div>
               </div>
-            </div>
-          </>
-        )}
-        {item.layer?.itemType.relations && (
-          <>
-            <input
-              type='radio'
-              name='my_tabs_2'
-              role='tab'
-              className='tw:tab  '
-              aria-label='Links'
-              checked={activeTab === 7 && true}
-              onChange={() => updateActiveTab(7)}
-            />
-            <div
-              role='tabpanel'
-              className='tw:tab-content tw:rounded-box tw:!h-[calc(100%-48px)] tw:overflow-y-auto tw:pt-4 tw:overflow-x-hidden fade'
-            >
+            ),
+          },
+          {
+            title: 'Links',
+            component: (
               <div className='tw:h-full'>
                 <div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:mb-4'>
                   {state.relations &&
@@ -211,10 +154,10 @@ export const TabsForm = ({
                   )}
                 </div>
               </div>
-            </div>
-          </>
-        )}
-      </div>
+            ),
+          },
+        ]}
+      ></Tabs>
     </div>
   )
 }
diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx
index 5dce43a4..626a0b8f 100644
--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@@ -91,9 +91,9 @@ export const TabsView = ({
         name='my_tabs_2'
         role='tab'
         className={'tw:tab tw:font-bold tw:ps-2! tw:pe-2! '}
-        aria-label={`${item.layer?.itemType.icon_as_labels && activeTab !== 1 ? '📝' : '📝\u00A0Info'}`}
-        checked={activeTab === 1 && true}
-        onChange={() => updateActiveTab(1)}
+        aria-label={`${item.layer?.itemType.icon_as_labels && activeTab !== 0 ? '📝' : '📝\u00A0Info'}`}
+        checked={activeTab === 0 && true}
+        onChange={() => updateActiveTab(0)}
       />
       <div
         role='tabpanel'
@@ -115,9 +115,9 @@ export const TabsView = ({
             name='my_tabs_2'
             role='tab'
             className={'tw:tab tw:font-bold tw:ps-2! tw:pe-2!'}
-            aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '❤️' : '❤️\u00A0Trust'}`}
-            checked={activeTab === 2 && true}
-            onChange={() => updateActiveTab(2)}
+            aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 3 ? '❤️' : '❤️\u00A0Trust'}`}
+            checked={activeTab === 3 && true}
+            onChange={() => updateActiveTab(3)}
           />
           <div
             role='tabpanel'
@@ -197,10 +197,10 @@ export const TabsView = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className={`tw:tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} `}
-            aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 3 ? '♻️' : '♻️\u00A0Offers & Needs'}`}
-            checked={activeTab === 3 && true}
-            onChange={() => updateActiveTab(3)}
+            className={`tw:tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 1) && 'tw:min-w-[10.4em]'} `}
+            aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 1 ? '♻️' : '♻️\u00A0Offers & Needs'}`}
+            checked={activeTab === 1 && true}
+            onChange={() => updateActiveTab(1)}
           />
           <div
             role='tabpanel'
@@ -251,9 +251,9 @@ export const TabsView = ({
             name='my_tabs_2'
             role='tab'
             className='tw:tab tw:font-bold tw:ps-2! tw:pe-2! '
-            aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 7 ? '🔗' : '🔗\u00A0Links'}`}
-            checked={activeTab === 7 && true}
-            onChange={() => updateActiveTab(7)}
+            aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '🔗' : '🔗\u00A0Links'}`}
+            checked={activeTab === 2 && true}
+            onChange={() => updateActiveTab(2)}
           />
           <div
             role='tabpanel'
diff --git a/src/Components/Templates/Tabs.tsx b/src/Components/Templates/Tabs.tsx
new file mode 100644
index 00000000..70021f91
--- /dev/null
+++ b/src/Components/Templates/Tabs.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable security/detect-object-injection */
+import { useState, useEffect, useCallback } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+interface TabItem {
+  title: string
+  component: React.ReactNode
+}
+
+interface TabsProps {
+  items: TabItem[]
+  setUrlParams: (params: URLSearchParams) => void
+}
+
+export const Tabs: React.FC<TabsProps> = ({ items, setUrlParams }: TabsProps) => {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const [activeIndex, setActiveIndex] = useState<number>(0)
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    const urlTab = params.get('tab')
+    if (urlTab !== null && !isNaN(Number(urlTab))) {
+      const index = Number(urlTab)
+      if (index >= 0 && index < items.length) {
+        setActiveIndex(index)
+      }
+    }
+  }, [items.length, location.search])
+
+  const updateActiveTab = useCallback(
+    (index: number) => {
+      setActiveIndex(index)
+
+      const params = new URLSearchParams(location.search)
+      params.set('tab', `${index}`)
+      setUrlParams(params)
+      const newUrl = location.pathname + '?' + params.toString()
+
+      navigate(newUrl, { replace: false })
+    },
+    [location, navigate],
+  )
+
+  return (
+    <div className='tw:flex tw:flex-col tw:flex-1 tw:min-h-0'>
+      <div role='tablist' className='tw:tabs tw:tabs-lift tw:flex-none'>
+        {items.map((item, index) => (
+          <div
+            key={index}
+            role='tab'
+            className={`tw:tab ${index === activeIndex ? 'tw:tab-active' : ''}`}
+            onClick={() => updateActiveTab(index)}
+          >
+            {item.title}
+          </div>
+        ))}
+      </div>
+      <div className='tw:flex-1 tw:flex tw:flex-col tw:min-h-0'>
+        {items[activeIndex]?.component}
+      </div>
+    </div>
+  )
+}