fix(front): use link component in profile overview

front/src/views/auth/ProfileOverview.vue

@@ -8,9 +8,11 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
+import { useModal } from '~/ui/composables/useModal.ts'
 
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -28,7 +30,7 @@ const emit = defineEmits<Events>()
 defineProps<Props>()
 
 const step = ref(1)
-const showCreateModal = ref(false)
+const { isOpen, to } = useModal('createChannel')
 const loading = ref(false)
 const submittable = ref(false)
 const category = ref('podcast')
@@ -46,13 +48,14 @@ const createForm = ref()
           v-if="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
           class="actions"
         >
-          <a
+          <Link
-            href=""
+            icon="bi-plus"
-            @click.stop.prevent="showCreateModal = true"
+            thin-font
+            force-underline
+            :to="to"
           >
-            <i class="bi bi-plus" />
             {{ t('views.auth.ProfileOverview.link.addNew') }}
-          </a>
+          </Link>
         </div>
       </h2>
       <channels-widget :filters="{scope: `actor:${object?.full_username}`}" />
@@ -66,7 +69,7 @@ const createForm = ref()
       </library-widget>
     </div>
 
-    <Modal v-model="showCreateModal"
+    <Modal v-model="isOpen"
       :title="t(`views.auth.ProfileOverview.modal.createChannel.${
         step === 1 ?
           'header' :