feat(front): add podcast channel button to podcasts header

front/src/components/library/Podcasts.vue

@@ -15,7 +15,7 @@ import { useModal } from '~/ui/composables/useModal.ts'
 import axios from 'axios'
 
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import Card from '~/components/ui/Card.vue'
+import ChannelForm from '~/components/audio/ChannelForm.vue'
 import ArtistCard from '~/components/artist/Card.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -23,17 +23,20 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 import useLogger from '~/composables/useLogger'
+import { useRouter } from 'vue-router'
 import { useTags } from '~/ui/composables/useTags.ts'
 
-import Pagination from '~/components/ui/Pagination.vue'
+
 import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Loader from '~/components/ui/Loader.vue'
 import Header from '~/components/ui/Header.vue'
+import Card from '~/components/ui/Card.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
-import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 import Modal from '~/components/ui/Modal.vue'
 
 interface Props extends OrderingProps {
@@ -50,6 +53,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 const page = usePage()
 
+const createForm = ref()
+const step = ref(1)
+const category = ref('podcast')
+const modalContent = ref()
+const submittable = ref(false)
+
 const tags = useRouteQuery<string[]>('tag', [])
 
 const tagList = useTags(tags)
@@ -70,6 +79,7 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['name', 'name']
 ]
 
+const router = useRouter()
 const logger = useLogger()
 const sharedLabels = useSharedLabels()
 
@@ -110,7 +120,7 @@ const fetchData = async () => {
 
 const store = useStore()
 watch(() => store.state.moderation.lastUpdate, fetchData)
-watch([page, tags, q], fetchData)
+watch([page, tags, q, ordering, orderingDirection], fetchData)
 fetchData()
 
 const search = () => {
@@ -132,6 +142,7 @@ const labels = computed(() => ({
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
 
 const { isOpen: subscribeIsOpen, to: subscribe } = useModal('subscribe')
+const { isOpen: channelIsOpen, to: channel } = useModal('channel')
 const { to: upload } = useModal('upload')
 </script>
 
@@ -143,6 +154,12 @@ const { to: upload } = useModal('upload')
     <Header
       page-heading
       :h1="t('components.library.Podcasts.header.browse')"
+      :action="{
+        text: t('views.channels.SubscriptionsList.link.addNew'),
+        onClick: ()=> channelIsOpen = true,
+        icon: 'bi-plus',
+        primary: true
+      }"
     />
     <Layout
       form
@@ -321,5 +338,61 @@ const { to: upload } = useModal('upload')
         </Button>
       </template>
     </Modal>
+
+    <Modal
+      v-model="channelIsOpen"
+      :title="
+        step === 1
+          ? t('views.auth.ProfileOverview.modal.createChannel.header')
+          : category === 'podcast'
+            ? t('views.auth.ProfileOverview.modal.createChannel.podcast.header')
+            : t('views.auth.ProfileOverview.modal.createChannel.artist.header')
+      "
+    >
+      <channel-form
+        ref="createForm"
+        :object="null"
+        :step="step"
+        @loading="isLoading = $event"
+        @submittable="submittable = $event"
+        @category="category = $event"
+        @errored="modalContent.scrollTop = 0"
+        @created="router.push({name: 'channels.detail', params: {id: $event.actor.preferred_username}})"
+      />
+      <template #actions>
+        <Button
+          secondary
+          autofocus
+          @click="channelIsOpen = false"
+        >
+          {{ t('views.auth.ProfileOverview.button.cancel') }}
+        </Button>
+        <Spacer grow />
+        <Button
+          v-if="step > 1"
+          secondary
+          @click.stop.prevent="step -= 1"
+        >
+          {{ t('views.auth.ProfileOverview.button.previous') }}
+        </Button>
+        <Button
+          v-if="step === 1"
+          primary
+          @click.stop.prevent="step += 1"
+        >
+          {{ t('views.auth.ProfileOverview.button.next') }}
+        </Button>
+        <Button
+          v-if="step === 2"
+          primary
+          type="submit"
+          :disabled="!submittable && !isLoading"
+          :is-loading="isLoading"
+          @click.prevent.stop="createForm.submit"
+        >
+          {{ t('views.auth.ProfileOverview.button.createChannel') }}
+        </Button>
+      </template>
+    </Modal>
   </Layout>
 </template>