feat(front): dangerous button can be popoveritem

front/src/components/common/DangerousButton.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '~/components/ui/Button.vue'
 import Modal from '~/components/ui/Modal.vue'
+import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 
 interface Events {
   (e: 'confirm'): void
@@ -13,7 +14,8 @@ interface Events {
 const props = defineProps<{
   title?: string
   action?: () => void,
-  confirmColor?:'success' | 'danger'
+  confirmColor?:'success' | 'danger',
+  popoverItem?: true
 }>()
 
 const { t } = useI18n()
@@ -30,9 +32,10 @@ const confirm = () => {
 </script>
 
 <template>
-  <Button
+  <component :is="'popoverItem' in props ? PopoverItem : Button"
     destructive
     @click.prevent.stop="showModal = true"
+    v-bind="$attrs"
   >
     <slot />
 
@@ -58,5 +61,5 @@ const confirm = () => {
         </Button>
       </template>
     </Modal>
-  </Button>
+  </component>
 </template>

front/src/views/channels/DetailBase.vue

@@ -5,6 +5,7 @@ import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 import { computed, ref, reactive, watch, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
+import { useModal } from '~/ui/composables/useModal.ts'
 
 import axios from 'axios'
 
@@ -22,6 +23,7 @@ import RadioButton from '~/components/radios/Button.vue'
 
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
@@ -243,14 +245,15 @@ const updateSubscriptionCount = (delta: number) => {
                 @updated="object = $event"
               />
             <Layout flex class="header-buttons">
-              <Button
+              <Link
                 v-if="isOwner"
+                solid
                 primary
                 icon="bi-upload"
-                @click.prevent.stop="store.commit('channels/showUploadModal', {show: true, config: {channel: object}})"
+                :to="useModal('upload').to"
               >
                 {{ t('views.channels.DetailBase.button.upload') }}
-              </Button>
+              </Link>
               <PlayButton
                 :is-playable="isPlayable"
                 split
@@ -306,11 +309,12 @@ const updateSubscriptionCount = (delta: number) => {
                     </PopoverItem>
                     <dangerous-button
                       v-if="object"
-                      :title="t('views.channels.DetailBase.button.delete')"
+                      popover-item
+                      :title="t('views.channels.DetailBase.button.confirm')"
                       :is-loading="isLoading"
                       icon="bi-trash"
                       @confirm="remove()"
-                    >
+                    > {{ t('views.channels.DetailBase.button.confirm') }}
                       <template #modal-content>
                         {{ t('views.channels.DetailBase.modal.delete.content.warning') }}
                       </template>