fix(front): content form modals opening and closing

front/src/components/common/ContentForm.vue

@@ -7,7 +7,6 @@ import { useI18n } from 'vue-i18n'
 import useLogger from '~/composables/useLogger'
 
 import Textarea from '~/components/ui/Textarea.vue'
-import Button from '~/components/ui/Button.vue'
 
 interface Events {
   (e: 'update:modelValue', value: string): void
@@ -48,86 +47,16 @@ const labels = computed(() => ({
 
 const remainingChars = computed(() => props.charLimit - props.modelValue.length)
 
-const loadPreview = async () => {
-  isLoadingPreview.value = true
-  try {
-    const response = await axios.post('text-preview/', { text: value.value, permissive: props.permissive })
-    preview.value = response.data.rendered
-  } catch (error) {
-    logger.error(error)
-  }
-  isLoadingPreview.value = false
-}
-
-watchDebounced(value, async () => {
-  await loadPreview()
-}, { immediate: true, debounce: 500 })
-
-watchEffect(async () => {
-  if (isPreviewing.value) {
-    if (value.value && !preview.value && !isLoadingPreview.value) {
-      await loadPreview()
-    }
-  }
-})
-
-watch(isPreviewing, (to, from) => {
-  if (from === true) {
-    textarea.value.focus()
-  }
-}, { flush: 'post' })
-
-onMounted(async () => {
-  if (props.autofocus) {
-    await nextTick()
-    textarea.value.focus()
-  }
-})
 </script>
 
 <template>
-  <Button
+  <Textarea
-    @click.prevent="isPreviewing = false"
+    ref="textarea"
-    :aria-pressed="!isPreviewing"
+    v-model="value"
-    title="write"
+    :required="required || undefined"
-  >
+    :placeholder="labels.placeholder"
-    {{ t('components.common.ContentForm.button.write') }}
+    :autofocus = "autofocus || undefined"
-  </Button>
+  />
-  <Button
-    @click.prevent="isPreviewing = true"
-    :aria-pressed="!isPreviewing"
-    title="preview"
-  >
-    {{ t('components.common.ContentForm.button.preview') }}
-  </Button>
-  <template v-if="isPreviewing">
-    <div
-      v-if="isLoadingPreview"
-      class="ui placeholder"
-    >
-      <div class="paragraph">
-        <div class="line" />
-        <div class="line" />
-        <div class="line" />
-        <div class="line" />
-      </div>
-    </div>
-    <p v-else-if="!preview">
-      {{ t('components.common.ContentForm.empty.noContent') }}
-    </p>
-    <sanitized-html
-      v-else
-      :html="preview"
-    />
-  </template>
-  <template v-else>
-    <Textarea
-      ref="textarea"
-      v-model="value"
-      :required="required"
-      :placeholder="labels.placeholder"
-    />
-  </template>
   <span
     v-if="charLimit"
     :class="['right', 'floated', {'ui danger text': remainingChars < 0}]"

front/src/components/library/EditCard.vue

@@ -14,8 +14,9 @@ import axios from 'axios'
 import useEditConfigs from '~/composables/moderation/useEditConfigs'
 import useErrorHandler from '~/composables/useErrorHandler'
 
-import Button from '~/components/ui/Button.vue'
 import DangerousButton from '~/components/common/DangerousButton.vue'
+
+import Button from '~/components/ui/Button.vue'
 import Card from '~/components/ui/Card.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 

front/src/components/moderation/ReportModal.vue

@@ -7,8 +7,11 @@ import { computed, ref, watchEffect } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
+import ContentForm from '../common/ContentForm.vue'
+
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 interface ReportType {
   anonymous: boolean
@@ -238,9 +241,9 @@ watchEffect(async () => {
       </div>
     </div>
     <template #actions>
-      <Button
+      <Button destructive
         v-if="canSubmit"
-        :class="['ui', 'success', {loading: isLoading}, 'button']"
+        :is-loading="isLoading"
         type="submit"
         form="report-form"
       >

front/src/components/playlists/PlaylistModal.vue

@@ -78,13 +78,12 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
 }
 
 store.dispatch('playlists/fetchOwn')
-const playlistIsOpen = store.state.playlists.showModal
 </script>
 
 <template>
   <Modal
-    v-model=playlistIsOpen
+    v-model="store.state.playlists.showModal"
-    title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
+    :title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
   >
     <h4 class="header">
       <template v-if="track">

front/src/components/ui/textarea.scss

@@ -19,6 +19,7 @@
       order: 0;
       outline: none;
       border: none;
+      color: currentcolor;
     }
 
     overflow: hidden;

front/src/views/playlists/List.vue

@@ -115,11 +115,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
     <Header
       :h1="t('views.playlists.List.header.browse')"
       :action="{
-        onClick: () => store.commit('playlists/showModal', true),
+        onClick: () => { store.commit('playlists/showModal', true) },
         text: t('views.playlists.List.button.manage'),
       }"
       icon="bi-music-note-list"
       primary
+      :aria-pressed="store.state.playlists.showModal"
     />
     <Layout form flex
       :class="['ui', {'loading': isLoading}, 'form']"