refactor(front): [WIP] layout for collapsible description fields

front/src/components/common/RenderedDescription.vue

@@ -10,7 +10,6 @@ import clip from 'text-clipper'
 
 import Button from '~/components/ui/Button.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Link from '~/components/ui/Link.vue'
 
 interface Events {
   (e: 'updated', data: unknown): void
@@ -53,6 +52,8 @@ const truncatedHtml = computed(() => clip(props.content?.html ?? '', props.trunc
 }))
 
 const showMore = ref(false)
+
+// Truncated or full Html or an empty string
 const html = computed(() => props.fetchHtml
   ? preview.value
   : props.truncateLength > 0 && !showMore.value
@@ -88,9 +89,13 @@ const submit = async () => {
 </script>
 
 <template>
-  <div>
   <template v-if="content && !isUpdating">
+    <!-- Render the truncated or full description -->
+
     <sanitized-html :html="html" />
+
+    <!-- Display the `show more` / `show less` button -->
+
     <template v-if="isTruncated">
       <a
         v-if="showMore === false"
@@ -115,6 +120,10 @@ const submit = async () => {
   <span v-else-if="!isUpdating">
     {{ t('components.common.RenderedDescription.empty.noDescription') }}
   </span>
+
+  <!-- [DISABLED] Display an edit form -->
+  <!-- TODO: Check if we want to revive in-situ editing here -->
+
   <form
     v-if="isUpdating"
     @submit.prevent="submit()"
@@ -156,5 +165,4 @@ const submit = async () => {
       {{ t('components.common.RenderedDescription.button.update') }}
     </Button>
   </form>
-  </div>
 </template>