From 1c7c2ff4a8d99f7092053c662a08e1d792731fe3 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Wed, 21 Aug 2024 21:48:58 +0300
Subject: [PATCH] Convert single result page components (#4781)

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../components/VMediaInfo/VByLine/VByLine.vue |  71 ++---
 .../VMediaInfo/VByLine/VScroller.vue          |  54 ++--
 .../VByLine/VSourceCreatorButton.vue          |  27 +-
 .../VMediaInfo/VCollapsibleTagSection.vue     | 285 ++++++++----------
 .../components/VMediaInfo/VCopyLicense.vue    |  69 ++---
 .../components/VMediaInfo/VGetMediaButton.vue |  45 +--
 .../VMediaInfo/VLicenseTabPanel.vue           |  76 ++---
 .../src/components/VMediaInfo/VMediaInfo.vue  |  17 +-
 .../components/VMediaInfo/VMediaLicense.vue   |  69 ++---
 .../src/components/VMediaInfo/VMediaReuse.vue |  15 +-
 .../src/components/VMediaInfo/VMediaTags.vue  |  67 ++--
 .../src/components/VMediaInfo/VMetadata.vue   |  74 ++---
 .../components/VMediaInfo/VMetadataValue.vue  |  25 +-
 .../components/VMediaInfo/VRelatedMedia.vue   |  94 +++---
 .../VMediaInfo/VSourceProviderTooltip.vue     |  47 +--
 .../VSafeBrowsing/VSafeBrowsing.vue           | 104 +++----
 .../components/VSafetyWall/VSafetyWall.vue    |  65 ++--
 frontend/src/components/VScrollableLine.vue   | 281 ++++++++---------
 18 files changed, 579 insertions(+), 906 deletions(-)

diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
index 3ae2441f0d6..d31d23fca39 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -1,5 +1,5 @@
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import { useSearchStore } from "~/stores/search"
 import type { AudioDetail, ImageDetail } from "~/types/media"
@@ -10,51 +10,34 @@ import VScrollableLine from "~/components/VScrollableLine.vue"
 /**
  * A link to a collection page, either a source or a creator.
  */
-export default defineComponent({
-  name: "VByLine",
-  components: {
-    VScrollableLine,
-    VSourceCreatorButton,
-  },
-  props: {
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const searchStore = useSearchStore()
-
-    const creator = computed(() => {
-      if (props.media.creator && props.media.creator !== "unidentified") {
-        const href = searchStore.getCollectionPath({
-          type: props.media.frontendMediaType,
-          collectionParams: {
-            collection: "creator",
-            source: props.media.source,
-            creator: props.media.creator,
-          },
-        })
-        return { name: props.media.creator, href }
-      }
-      return null
-    })
+const props = defineProps<{
+  media: AudioDetail | ImageDetail
+}>()
+const searchStore = useSearchStore()
 
-    const sourceHref = computed(() => {
-      return searchStore.getCollectionPath({
-        type: props.media.frontendMediaType,
-        collectionParams: {
-          collection: "source",
-          source: props.media.source,
-        },
-      })
+const creator = computed(() => {
+  if (props.media.creator && props.media.creator !== "unidentified") {
+    const href = searchStore.getCollectionPath({
+      type: props.media.frontendMediaType,
+      collectionParams: {
+        collection: "creator",
+        source: props.media.source,
+        creator: props.media.creator,
+      },
     })
+    return { name: props.media.creator, href }
+  }
+  return null
+})
 
-    return {
-      creator,
-      sourceHref,
-    }
-  },
+const sourceHref = computed(() => {
+  return searchStore.getCollectionPath({
+    type: props.media.frontendMediaType,
+    collectionParams: {
+      collection: "source",
+      source: props.media.source,
+    },
+  })
 })
 </script>
 
diff --git a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
index a169d7568ac..f5e27c242b3 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
@@ -1,43 +1,27 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
-
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-export default defineComponent({
-  name: "VScroller",
-  components: { VIconButton },
-  props: {
-    direction: {
-      type: String as PropType<"forward" | "back">,
-      required: true,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup(props) {
-    const { t } = useI18n({ useScope: "global" })
-    const iconName = computed(() =>
-      props.direction === "forward" ? "chevron-forward" : "chevron-back"
-    )
-    const label = computed(() =>
-      t(
-        props.direction === "forward"
-          ? "mediaDetails.scroll.forward"
-          : "mediaDetails.scroll.back"
-      )
-    )
-
-    return {
-      iconName,
-      label,
-    }
-  },
-})
+const props = defineProps<{ direction: "forward" | "back" }>()
+
+defineEmits<{ click: [] }>()
+
+const { t } = useI18n({ useScope: "global" })
+
+const iconName = computed(() =>
+  props.direction === "forward" ? "chevron-forward" : "chevron-back"
+)
+
+const label = computed(() =>
+  t(
+    props.direction === "forward"
+      ? "mediaDetails.scroll.forward"
+      : "mediaDetails.scroll.back"
+  )
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
index 0d07ac6c7e9..663fb638682 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
@@ -1,27 +1,12 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
+<script setup lang="ts">
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VSourceCreatorButton",
-  components: { VButton, VIcon },
-  props: {
-    href: {
-      type: String,
-      required: true,
-    },
-    iconName: {
-      type: String as PropType<"person" | "institution">,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-  },
-})
+defineProps<{
+  href: string
+  iconName: "person" | "institution"
+  title: string
+}>()
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue b/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
index 7d133f5544a..bec84c836be 100644
--- a/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
+++ b/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
@@ -1,14 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  type PropType,
-  ref,
-} from "vue"
+import { computed, nextTick, onMounted, ref } from "vue"
 
 import { useResizeObserver, watchDebounced } from "@vueuse/core"
 
@@ -25,175 +18,147 @@ import VIcon from "~/components/VIcon/VIcon.vue"
 // The number of rows to display before collapsing the tags
 const ROWS_TO_DISPLAY = 3
 
-export default defineComponent({
-  name: "VCollapsibleTagSection",
-  components: { VIcon, VButton, VTag },
-  props: {
-    tags: {
-      type: Array as PropType<Tag[]>,
-      required: true,
-    },
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const tagsContainerRef = ref<HTMLElement>()
+const props = defineProps<{
+  tags: Tag[]
+  mediaType: SupportedMediaType
+}>()
 
-    const searchStore = useSearchStore()
-    const { $sendCustomEvent } = useNuxtApp()
+const tagsContainerRef = ref<HTMLElement>()
 
-    const localizedTagPath = (tag: string) => {
-      return searchStore.getCollectionPath({
-        type: props.mediaType,
-        collectionParams: { collection: "tag", tag },
-      })
-    }
+const searchStore = useSearchStore()
+const { $sendCustomEvent } = useNuxtApp()
 
-    const normalizedTags = computed(() => {
-      return Array.from(new Set(props.tags.map((tag) => tag.name)))
-    })
+const localizedTagPath = (tag: string) => {
+  return searchStore.getCollectionPath({
+    type: props.mediaType,
+    collectionParams: { collection: "tag", tag },
+  })
+}
 
-    const collapsibleRowsStartAt = ref<number>()
-    const { localeProperties } = useI18n({ useScope: "global" })
-    const dir = computed(() => {
-      return localeProperties.value.dir
-    })
+const normalizedTags = computed(() => {
+  return Array.from(new Set(props.tags.map((tag) => tag.name)))
+})
 
-    function isFurtherInline(previous: HTMLElement, current: HTMLElement) {
-      if (dir.value === "rtl") {
-        return previous.offsetLeft < current.offsetLeft
-      }
-      return previous.offsetLeft > current.offsetLeft
-    }
+const collapsibleRowsStartAt = ref<number>()
+const { localeProperties } = useI18n({ useScope: "global" })
+const dir = computed(() => {
+  return localeProperties.value.dir
+})
 
-    function findRowStartsAt(parent: HTMLElement) {
-      const children = Array.from(parent.children)
-      if (!children.length) {
-        return 0
-      }
-      let rowCount = 0
-      for (let i = 0; i < children.length; i++) {
-        const child = children[i] as HTMLElement
-        const previous = child.previousElementSibling as HTMLElement
-        if (!previous) {
-          rowCount++
-        } else if (isFurtherInline(previous, child)) {
-          rowCount++
-        }
-        if (rowCount === ROWS_TO_DISPLAY + 1) {
-          return i
-        }
-      }
-      return children.length
+function isFurtherInline(previous: HTMLElement, current: HTMLElement) {
+  if (dir.value === "rtl") {
+    return previous.offsetLeft < current.offsetLeft
+  }
+  return previous.offsetLeft > current.offsetLeft
+}
+
+function findRowStartsAt(parent: HTMLElement) {
+  const children = Array.from(parent.children)
+  if (!children.length) {
+    return 0
+  }
+  let rowCount = 0
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i] as HTMLElement
+    const previous = child.previousElementSibling as HTMLElement
+    if (!previous) {
+      rowCount++
+    } else if (isFurtherInline(previous, child)) {
+      rowCount++
     }
+    if (rowCount === ROWS_TO_DISPLAY + 1) {
+      return i
+    }
+  }
+  return children.length
+}
+
+/**
+ * Only the first 3 rows of tags are visible by default.
+ * If we hide the tags using CSS only, they will be tabbable,
+ * even though they are not visible.
+ */
+const visibleTags = computed<string[]>(() => {
+  return collapsibleRowsStartAt.value && buttonStatus.value === "show"
+    ? normalizedTags.value.slice(0, collapsibleRowsStartAt.value)
+    : normalizedTags.value
+})
 
-    /**
-     * Only the first 3 rows of tags are visible by default.
-     * If we hide the tags using CSS only, they will be tabbable,
-     * even though they are not visible.
-     */
-    const visibleTags = computed<string[]>(() => {
-      return collapsibleRowsStartAt.value && buttonStatus.value === "show"
-        ? normalizedTags.value.slice(0, collapsibleRowsStartAt.value)
-        : normalizedTags.value
-    })
+const hasOverflow = computed(() => {
+  return (
+    collapsibleRowsStartAt.value &&
+    collapsibleRowsStartAt.value < normalizedTags.value.length
+  )
+})
 
-    const hasOverflow = computed(() => {
-      return (
-        collapsibleRowsStartAt.value &&
-        collapsibleRowsStartAt.value < normalizedTags.value.length
-      )
-    })
+onMounted(() => {
+  /**
+   * Find the index of the first item after the third row of tags. This is used
+   * to determine which tags to hide.
+   */
+  if (tagsContainerRef.value) {
+    collapsibleRowsStartAt.value = findRowStartsAt(tagsContainerRef.value)
+  }
+})
 
-    onMounted(() => {
-      /**
-       * Find the index of the first item after the third row of tags. This is used
-       * to determine which tags to hide.
-       */
-      if (tagsContainerRef.value) {
-        collapsibleRowsStartAt.value = findRowStartsAt(tagsContainerRef.value)
+const buttonStatus = ref<"show" | "hide">("show")
+/**
+ * Toggles the text for the "Show more" button. When showing more tags, we also
+ * focus the first tag in the newly-opened row for a11y.
+ */
+const handleClick = () => {
+  buttonStatus.value = buttonStatus.value === "show" ? "hide" : "show"
+  $sendCustomEvent("TOGGLE_TAG_EXPANSION", {
+    toState: buttonStatus.value === "show" ? "collapsed" : "expanded",
+  })
+  if (buttonStatus.value === "hide" && collapsibleRowsStartAt.value) {
+    nextTick(() => {
+      if (!collapsibleRowsStartAt.value) {
+        return
       }
+      const firstTagInFourthRow = tagsContainerRef.value?.children.item(
+        collapsibleRowsStartAt.value
+      ) as HTMLElement
+      focusElement(firstTagInFourthRow?.querySelector("a"))
     })
+  }
+}
+
+const heightClass = computed(() => {
+  if (!hasOverflow.value) {
+    return "max-h-none"
+  }
+  /**
+   * Height is 3 rows of tags, gaps, and a padding for the focus rings.
+   * 3 * 2rem (tags) + 2 * 0.75rem (2 gaps) + 0.1875rem (margin for the focus ring)
+   */
+  return buttonStatus.value === "show" ? "max-h-[7.6875rem]" : "mah-h-none"
+})
 
-    const buttonStatus = ref<"show" | "hide">("show")
-    /**
-     * Toggles the text for the "Show more" button. When showing more tags, we also
-     * focus the first tag in the newly-opened row for a11y.
-     */
-    const handleClick = () => {
-      buttonStatus.value = buttonStatus.value === "show" ? "hide" : "show"
-      $sendCustomEvent("TOGGLE_TAG_EXPANSION", {
-        toState: buttonStatus.value === "show" ? "collapsed" : "expanded",
-      })
-      if (buttonStatus.value === "hide" && collapsibleRowsStartAt.value) {
-        nextTick(() => {
-          if (!collapsibleRowsStartAt.value) {
-            return
-          }
-          const firstTagInFourthRow = tagsContainerRef.value?.children.item(
-            collapsibleRowsStartAt.value
-          ) as HTMLElement
-          focusElement(firstTagInFourthRow?.querySelector("a"))
-        })
-      }
+const listWidth = ref<number>()
+useResizeObserver(tagsContainerRef, (entries) => {
+  listWidth.value = entries[0].contentRect.width
+})
+
+watchDebounced(
+  listWidth,
+  (newWidth, oldWidth) => {
+    if (!tagsContainerRef.value) {
+      return
     }
+    const isWidening = oldWidth && newWidth && newWidth > oldWidth
 
-    const heightClass = computed(() => {
-      if (!hasOverflow.value) {
-        return "max-h-none"
+    if (isWidening) {
+      collapsibleRowsStartAt.value = normalizedTags.value.length
+    }
+    nextTick(() => {
+      if (tagsContainerRef.value) {
+        collapsibleRowsStartAt.value = findRowStartsAt(tagsContainerRef.value)
       }
-      /**
-       * Height is 3 rows of tags, gaps, and a padding for the focus rings.
-       * 3 * 2rem (tags) + 2 * 0.75rem (2 gaps) + 0.1875rem (margin for the focus ring)
-       */
-      return buttonStatus.value === "show" ? "max-h-[7.6875rem]" : "mah-h-none"
-    })
-
-    const listWidth = ref<number>()
-    useResizeObserver(tagsContainerRef, (entries) => {
-      listWidth.value = entries[0].contentRect.width
     })
-
-    watchDebounced(
-      listWidth,
-      (newWidth, oldWidth) => {
-        if (!tagsContainerRef.value) {
-          return
-        }
-        const isWidening = oldWidth && newWidth && newWidth > oldWidth
-
-        if (isWidening) {
-          collapsibleRowsStartAt.value = normalizedTags.value.length
-        }
-        nextTick(() => {
-          if (tagsContainerRef.value) {
-            collapsibleRowsStartAt.value = findRowStartsAt(
-              tagsContainerRef.value
-            )
-          }
-        })
-      },
-      { debounce: 300 }
-    )
-
-    return {
-      tagsContainerRef,
-
-      localizedTagPath,
-
-      normalizedTags,
-      visibleTags,
-
-      hasOverflow,
-      buttonStatus,
-      heightClass,
-
-      handleClick,
-    }
   },
-})
+  { debounce: 300 }
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VCopyLicense.vue b/frontend/src/components/VMediaInfo/VCopyLicense.vue
index 49d863508e8..2a1435fb956 100644
--- a/frontend/src/components/VMediaInfo/VCopyLicense.vue
+++ b/frontend/src/components/VMediaInfo/VCopyLicense.vue
@@ -1,11 +1,10 @@
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useI18n, useNuxtApp } from "#imports"
 
-import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from "vue"
+import { onBeforeUnmount, onMounted, ref } from "vue"
 
 import { AttributionOptions, getAttribution } from "~/utils/attribution-html"
 import type { Media } from "~/types/media"
-import { useAnalytics } from "~/composables/use-analytics"
 
 import VTabs from "~/components/VTabs/VTabs.vue"
 import VTab from "~/components/VTabs/VTab.vue"
@@ -13,53 +12,35 @@ import VLicenseTabPanel from "~/components/VMediaInfo/VLicenseTabPanel.vue"
 
 const tabs = ["rich", "html", "plain", "xml"] as const
 
-export default defineComponent({
-  name: "VCopyLicense",
-  components: { VTabs, VTab, VLicenseTabPanel },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const richRef = ref<HTMLElement | null>(null)
+const props = defineProps<{ media: Media }>()
 
-    const i18n = useI18n({ useScope: "global" })
-    const getAttributionMarkup = (options?: AttributionOptions) =>
-      getAttribution(props.media, i18n, options)
+const richRef = ref<HTMLElement | null>(null)
 
-    const { sendCustomEvent } = useAnalytics()
+const i18n = useI18n({ useScope: "global" })
+const getAttributionMarkup = (options?: AttributionOptions) =>
+  getAttribution(props.media, i18n, options)
 
-    const sendAnalyticsEvent = (event: MouseEvent) => {
-      if (!event.currentTarget) {
-        return
-      }
+const { $sendCustomEvent } = useNuxtApp()
 
-      const url = (event.currentTarget as HTMLAnchorElement).href
-      sendCustomEvent("EXTERNAL_LINK_CLICK", { url })
-    }
+const sendAnalyticsEvent = (event: MouseEvent) => {
+  if (!event.currentTarget) {
+    return
+  }
 
-    onMounted(() => {
-      richRef.value?.querySelectorAll("a").forEach((link) => {
-        link.addEventListener("click", sendAnalyticsEvent)
-      })
-    })
+  const url = (event.currentTarget as HTMLAnchorElement).href
+  $sendCustomEvent("EXTERNAL_LINK_CLICK", { url })
+}
 
-    onBeforeUnmount(() => {
-      richRef.value?.querySelectorAll("a").forEach((link) => {
-        link.removeEventListener("click", sendAnalyticsEvent)
-      })
-    })
-
-    return {
-      richRef,
-
-      tabs,
+onMounted(() => {
+  richRef.value?.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", sendAnalyticsEvent)
+  })
+})
 
-      getAttributionMarkup,
-    }
-  },
+onBeforeUnmount(() => {
+  richRef.value?.querySelectorAll("a").forEach((link) => {
+    link.removeEventListener("click", sendAnalyticsEvent)
+  })
 })
 </script>
 
diff --git a/frontend/src/components/VMediaInfo/VGetMediaButton.vue b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
index daaa58f068f..6ccdfa785c4 100644
--- a/frontend/src/components/VMediaInfo/VGetMediaButton.vue
+++ b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
@@ -1,40 +1,25 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import type { SupportedMediaType } from "~/constants/media"
 import type { Media } from "~/types/media"
 
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VGetMediaButton",
-  components: { VButton },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
+const props = defineProps<{
+  media: Media
+  mediaType: SupportedMediaType
+}>()
 
-    const sendGetMediaEvent = () => {
-      sendCustomEvent("GET_MEDIA", {
-        id: props.media.id,
-        provider: props.media.provider,
-        mediaType: props.mediaType,
-      })
-    }
-    return {
-      sendGetMediaEvent,
-    }
-  },
-})
+const { $sendCustomEvent } = useNuxtApp()
+
+const sendGetMediaEvent = () => {
+  $sendCustomEvent("GET_MEDIA", {
+    id: props.media.id,
+    provider: props.media.provider,
+    mediaType: props.mediaType,
+  })
+}
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue b/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue
index d95095ec0b4..42246199093 100644
--- a/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue
+++ b/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue
@@ -1,58 +1,36 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import type { MediaType } from "~/constants/media"
 
-import { useAnalytics } from "~/composables/use-analytics"
-
 import VCopyButton from "~/components/VCopyButton.vue"
 import VTabPanel from "~/components/VTabs/VTabPanel.vue"
 
-export default defineComponent({
-  name: "VLicenseTabPanel",
-  components: {
-    VCopyButton,
-    VTabPanel,
-  },
-  props: {
-    /**
-     * The kind of attribution shown in the tab.
-     */
-    tab: {
-      type: String as PropType<"rich" | "html" | "plain" | "xml">,
-      required: true,
-    },
-    /**
-     * The ID of the media for which the attribution is generated.
-     * Used for analytics.
-     */
-    mediaId: {
-      type: String,
-      required: true,
-    },
-    /**
-     * The media type of the media for which the attribution is generated.
-     * Used for analytics.
-     */
-    mediaType: {
-      type: String as PropType<MediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
-    const handleCopy = () => {
-      sendCustomEvent("COPY_ATTRIBUTION", {
-        id: props.mediaId,
-        format: props.tab,
-        mediaType: props.mediaType,
-      })
-    }
-    return {
-      handleCopy,
-    }
-  },
-})
+const props = defineProps<{
+  /**
+   * The kind of attribution shown in the tab.
+   */
+  tab: "rich" | "html" | "plain" | "xml"
+  /**
+   * The ID of the media for which the attribution is generated.
+   * Used for analytics.
+   */
+  mediaId: string
+  /**
+   * The media type of the media for which the attribution is generated.
+   * Used for analytics.
+   */
+  mediaType: MediaType
+}>()
+
+const { $sendCustomEvent } = useNuxtApp()
+const handleCopy = () => {
+  $sendCustomEvent("COPY_ATTRIBUTION", {
+    id: props.mediaId,
+    format: props.tab,
+    mediaType: props.mediaType,
+  })
+}
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VMediaInfo.vue b/frontend/src/components/VMediaInfo/VMediaInfo.vue
index 80ebd4c0436..f3f314593cc 100644
--- a/frontend/src/components/VMediaInfo/VMediaInfo.vue
+++ b/frontend/src/components/VMediaInfo/VMediaInfo.vue
@@ -1,22 +1,9 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
+<script setup lang="ts">
 import type { Media } from "~/types/media"
 
 import VByLine from "~/components/VMediaInfo/VByLine/VByLine.vue"
 
-import type { PropType } from "vue"
-
-export default defineComponent({
-  name: "VMediaInfo",
-  components: { VByLine },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-  },
-})
+defineProps<{ media: Media }>()
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VMediaLicense.vue b/frontend/src/components/VMediaInfo/VMediaLicense.vue
index b846cbd61f2..de4dc19fa02 100644
--- a/frontend/src/components/VMediaInfo/VMediaLicense.vue
+++ b/frontend/src/components/VMediaInfo/VMediaLicense.vue
@@ -1,61 +1,38 @@
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useI18n, useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import { getFullLicenseName, isLicense as isLicenseFn } from "~/utils/license"
-import { useAnalytics } from "~/composables/use-analytics"
 
 import type { License, LicenseVersion } from "~/constants/license"
 
 import VLicenseElements from "~/components/VLicense/VLicenseElements.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VMediaLicense",
-  components: { VLicenseElements, VLink },
-  props: {
-    license: {
-      type: String as PropType<License>,
-      required: true,
-    },
-    licenseVersion: {
-      type: String as PropType<LicenseVersion>,
-      required: true,
-    },
-    licenseUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n({ useScope: "global" })
-    const { sendCustomEvent } = useAnalytics()
+const props = defineProps<{
+  license: License
+  licenseVersion: LicenseVersion
+  licenseUrl: string
+}>()
 
-    const isLicense = computed(() => isLicenseFn(props.license))
-    const headerText = computed(() => {
-      const licenseOrTool = isLicense.value ? "license" : "tool"
-      return i18n.t(`mediaDetails.reuse.${licenseOrTool}Header`)
-    })
-    const fullLicenseName = computed(() =>
-      getFullLicenseName(props.license, props.licenseVersion, i18n)
-    )
+const i18n = useI18n({ useScope: "global" })
+const { $sendCustomEvent } = useNuxtApp()
 
-    const sendVisitLicensePage = () => {
-      sendCustomEvent("VISIT_LICENSE_PAGE", {
-        license: props.license,
-      })
-    }
-
-    return {
-      isLicense,
-      headerText,
-      fullLicenseName,
-
-      sendVisitLicensePage,
-    }
-  },
+const isLicense = computed(() => isLicenseFn(props.license))
+const headerText = computed(() => {
+  const licenseOrTool = isLicense.value ? "license" : "tool"
+  return i18n.t(`mediaDetails.reuse.${licenseOrTool}Header`)
 })
+const fullLicenseName = computed(() =>
+  getFullLicenseName(props.license, props.licenseVersion, i18n)
+)
+
+const sendVisitLicensePage = () => {
+  $sendCustomEvent("VISIT_LICENSE_PAGE", {
+    license: props.license,
+  })
+}
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VMediaReuse.vue b/frontend/src/components/VMediaInfo/VMediaReuse.vue
index 31cdc2ed003..7e0a43bed77 100644
--- a/frontend/src/components/VMediaInfo/VMediaReuse.vue
+++ b/frontend/src/components/VMediaInfo/VMediaReuse.vue
@@ -1,21 +1,10 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
+<script setup lang="ts">
 import type { Media } from "~/types/media"
 
 import VCopyLicense from "~/components/VMediaInfo/VCopyLicense.vue"
 import VMediaLicense from "~/components/VMediaInfo/VMediaLicense.vue"
 
-export default defineComponent({
-  name: "VMediaReuse",
-  components: { VCopyLicense, VMediaLicense },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-  },
-})
+defineProps<{ media: Media }>()
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
index aac042c97f5..023b073a304 100644
--- a/frontend/src/components/VMediaInfo/VMediaTags.vue
+++ b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useLocalePath } from "#imports"
 
-import { computed, defineComponent, type PropType } from "vue"
+import { computed } from "vue"
 
 import type { SupportedMediaType } from "~/constants/media"
 import type { Tag } from "~/types/media"
@@ -9,52 +9,31 @@ import type { Tag } from "~/types/media"
 import VCollapsibleTagSection from "~/components/VMediaInfo/VCollapsibleTagSection.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VMediaTags",
-  components: { VCollapsibleTagSection, VLink },
-  props: {
-    tags: {
-      type: Array as PropType<Tag[]>,
-      required: true,
-    },
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-    provider: {
-      type: String as PropType<string>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const tagsByType = computed(() => {
-      const generatedTags = []
-      const sourceTags = []
-      for (const tag of props.tags) {
-        if (
-          tag.unstable__provider &&
-          tag.unstable__provider !== props.provider
-        ) {
-          generatedTags.push(tag)
-        } else {
-          sourceTags.push(tag)
-        }
-      }
-      return { generated: generatedTags, source: sourceTags }
-    })
+const props = defineProps<{
+  tags: Tag[]
+  mediaType: SupportedMediaType
+  provider: string
+}>()
 
-    const hasSourceTags = computed(() => tagsByType.value.source.length > 0)
-    const hasGeneratedTags = computed(
-      () => tagsByType.value.generated.length > 0
-    )
+const tagsByType = computed(() => {
+  const generatedTags = []
+  const sourceTags = []
+  for (const tag of props.tags) {
+    if (tag.unstable__provider && tag.unstable__provider !== props.provider) {
+      generatedTags.push(tag)
+    } else {
+      sourceTags.push(tag)
+    }
+  }
+  return { generated: generatedTags, source: sourceTags }
+})
 
-    const localePath = useLocalePath()
+const hasSourceTags = computed(() => tagsByType.value.source.length > 0)
+const hasGeneratedTags = computed(() => tagsByType.value.generated.length > 0)
 
-    const tagsPagePath = computed(() => localePath("/tags"))
+const localePath = useLocalePath()
 
-    return { tagsPagePath, tagsByType, hasSourceTags, hasGeneratedTags }
-  },
-})
+const tagsPagePath = computed(() => localePath("/tags"))
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index 6cc8509ce20..811efea715a 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { firstParam, useNuxtApp, useRoute } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { Metadata } from "~/types/media"
 import { useUiStore } from "~/stores/ui"
@@ -9,54 +9,36 @@ import { useUiStore } from "~/stores/ui"
 import VMetadataValue from "~/components/VMediaInfo/VMetadataValue.vue"
 import VSourceProviderTooltip from "~/components/VMediaInfo/VSourceProviderTooltip.vue"
 
-export default defineComponent({
-  name: "VMetadata",
-  components: { VSourceProviderTooltip, VMetadataValue },
-  props: {
-    metadata: {
-      type: Array as PropType<Metadata[]>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const route = useRoute()
-    const uiStore = useUiStore()
+const props = defineProps<{
+  metadata: Metadata[]
+}>()
 
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
-    const tooltipId = (datum: Metadata): "source" | "provider" | "" => {
-      if (
-        datum.name &&
-        (datum.name === "source" || datum.name === "provider")
-      ) {
-        return datum.name
-      }
-      return ""
-    }
+const route = useRoute()
+const uiStore = useUiStore()
 
-    const columnCount = computed(() => ({
-      "--column-count": props.metadata.length,
-    }))
+const isSm = computed(() => uiStore.isBreakpoint("sm"))
+const tooltipId = (datum: Metadata): "source" | "provider" | "" => {
+  if (datum.name && (datum.name === "source" || datum.name === "provider")) {
+    return datum.name
+  }
+  return ""
+}
 
-    const { $sendCustomEvent } = useNuxtApp()
-    const sendVisitSourceLinkEvent = (source?: string) => {
-      const mediaId = firstParam(route?.params.id)
-      if (!source || !mediaId) {
-        return
-      }
-      $sendCustomEvent("VISIT_SOURCE_LINK", {
-        id: mediaId,
-        source,
-      })
-    }
+const columnCount = computed(() => ({
+  "--column-count": props.metadata.length,
+}))
 
-    return {
-      sendVisitSourceLinkEvent,
-      tooltipId,
-      isSm,
-      columnCount,
-    }
-  },
-})
+const { $sendCustomEvent } = useNuxtApp()
+const sendVisitSourceLinkEvent = (source?: string) => {
+  const mediaId = firstParam(route?.params.id)
+  if (!source || !mediaId) {
+    return
+  }
+  $sendCustomEvent("VISIT_SOURCE_LINK", {
+    id: mediaId,
+    source,
+  })
+}
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VMetadataValue.vue b/frontend/src/components/VMediaInfo/VMetadataValue.vue
index 077abb86dac..9cb4f459d14 100644
--- a/frontend/src/components/VMediaInfo/VMetadataValue.vue
+++ b/frontend/src/components/VMediaInfo/VMetadataValue.vue
@@ -1,27 +1,16 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { Metadata } from "~/types/media"
 
-import { defineEvent } from "~/types/emits"
-
 import VLink from "~/components/VLink.vue"
-
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-import type { PropType } from "vue"
+defineProps<{
+  datum: Metadata
+}>()
 
-export default {
-  name: "VMetadataValue",
-  components: { VIcon, VLink },
-  props: {
-    datum: {
-      type: Object as PropType<Metadata>,
-      required: true,
-    },
-  },
-  emits: {
-    click: defineEvent<[string | undefined]>(),
-  },
-}
+defineEmits<{
+  click: [string | undefined]
+}>()
 </script>
 
 <template>
diff --git a/frontend/src/components/VMediaInfo/VRelatedMedia.vue b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
index 4466a68f17a..9446df3d9aa 100644
--- a/frontend/src/components/VMediaInfo/VRelatedMedia.vue
+++ b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useRoute, useI18n, firstParam } from "#imports"
 
-import { computed, defineComponent, PropType, watch } from "vue"
+import { computed, watch } from "vue"
 
 import { useRelatedMediaStore } from "~/stores/media/related-media"
 
@@ -10,69 +10,47 @@ import type { AudioResults, ImageResults } from "~/types/result"
 
 import VMediaCollection from "~/components/VSearchResultsGrid/VMediaCollection.vue"
 
-export default defineComponent({
-  name: "VRelatedMedia",
-  components: { VMediaCollection },
-  props: {
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-    relatedTo: {
-      type: String as PropType<string>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const relatedMediaStore = useRelatedMediaStore()
-
-    const route = useRoute()
+const props = defineProps<{
+  mediaType: SupportedMediaType
+  relatedTo: string
+}>()
 
-    const results = computed(() => {
-      const media = relatedMediaStore.media ?? []
-      return { type: props.mediaType, items: media } as
-        | ImageResults
-        | AudioResults
-    })
-    watch(
-      route,
-      async (newRoute) => {
-        const mediaId = firstParam(newRoute?.params.id)
-        if (mediaId && mediaId !== relatedMediaStore.mainMediaId) {
-          await relatedMediaStore.fetchMedia(props.mediaType, mediaId)
-        }
-      },
-      { immediate: true }
-    )
+const relatedMediaStore = useRelatedMediaStore()
 
-    const isFetching = computed(() => relatedMediaStore.fetchState.isFetching)
-    const showRelated = computed(
-      () => results.value.items.length > 0 || isFetching.value
-    )
+const route = useRoute()
 
-    const searchTerm = computed(() => {
-      return firstParam(route?.query.q) ?? ""
-    })
+const results = computed(() => {
+  const media = relatedMediaStore.media ?? []
+  return { type: props.mediaType, items: media } as ImageResults | AudioResults
+})
+watch(
+  route,
+  async (newRoute) => {
+    const mediaId = firstParam(newRoute?.params.id)
+    if (mediaId && mediaId !== relatedMediaStore.mainMediaId) {
+      await relatedMediaStore.fetchMedia(props.mediaType, mediaId)
+    }
+  },
+  { immediate: true }
+)
 
-    const { t } = useI18n({ useScope: "global" })
+const isFetching = computed(() => relatedMediaStore.fetchState.isFetching)
+const showRelated = computed(
+  () => results.value.items.length > 0 || isFetching.value
+)
 
-    const collectionLabel = computed(() => {
-      const key =
-        props.mediaType === "audio"
-          ? "audioDetails.relatedAudios"
-          : "imageDetails.relatedImages"
-      return t(key)
-    })
+const searchTerm = computed(() => {
+  return firstParam(route?.query.q) ?? ""
+})
 
-    return {
-      results,
-      showRelated,
-      isFetching,
+const { t } = useI18n({ useScope: "global" })
 
-      searchTerm,
-      collectionLabel,
-    }
-  },
+const collectionLabel = computed(() => {
+  const key =
+    props.mediaType === "audio"
+      ? "audioDetails.relatedAudios"
+      : "imageDetails.relatedImages"
+  return t(key)
 })
 </script>
 
diff --git a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
index 0e71054817d..13ca24280c7 100644
--- a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
+++ b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
@@ -1,42 +1,27 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import { Metadata } from "~/types/media"
 
 import VTooltip from "~/components/VTooltip/VTooltip.vue"
 
-export default defineComponent({
-  name: "VSourceProviderTooltip",
-  components: { VTooltip },
-  props: {
-    datum: {
-      type: Object as PropType<Metadata>,
-      required: true,
-    },
-    describedBy: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { t } = useI18n({ useScope: "global" })
-    const description = computed(() => {
-      if (!props.datum.name) {
-        return ""
-      }
-      return t(
-        props.datum.name === "source"
-          ? "mediaDetails.sourceDescription"
-          : "mediaDetails.providerDescription"
-      )
-    })
+const props = defineProps<{
+  datum: Metadata
+  describedBy: string
+}>()
 
-    return {
-      description,
-    }
-  },
+const { t } = useI18n({ useScope: "global" })
+const description = computed(() => {
+  if (!props.datum.name) {
+    return ""
+  }
+  return t(
+    props.datum.name === "source"
+      ? "mediaDetails.sourceDescription"
+      : "mediaDetails.providerDescription"
+  )
 })
 </script>
 
diff --git a/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue b/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
index 0953de715a3..4a4bafdfb1c 100644
--- a/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
+++ b/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
@@ -1,79 +1,63 @@
-<script lang="ts">
-import { useLocalePath } from "#imports"
+<script setup lang="ts">
+/**
+ * Contains toggles to determine the users preferences towards fetching results
+ * that may contain sensitive content and subsequently blurring them to prevent
+ * accidental exposure or showing them directly.
+ */
+import { useLocalePath, useNuxtApp } from "#imports"
 
-import { computed, defineComponent } from "vue"
+import { computed } from "vue"
 
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useUiStore } from "~/stores/ui"
-import { useAnalytics } from "~/composables/use-analytics"
 import { ON, OFF } from "~/constants/feature-flag"
 
 import VCheckbox, { CheckboxAttrs } from "~/components/VCheckbox/VCheckbox.vue"
 import VLink from "~/components/VLink.vue"
 
-/**
- * Contains toggles to determine the users preferences towards fetching results
- * that may contain sensitive content and subsequently blurring them to prevent
- * accidental exposure or showing them directly.
- */
-export default defineComponent({
-  name: "VSafeBrowsing",
-  components: { VCheckbox, VLink },
-  setup() {
-    const localePath = useLocalePath()
-
-    const sensitivityPath = computed(() => localePath("/sensitive-content"))
-
-    const featureFlagStore = useFeatureFlagStore()
-    const { sendCustomEvent } = useAnalytics()
+const localePath = useLocalePath()
 
-    let fetchSensitive = computed(() =>
-      featureFlagStore.isOn("fetch_sensitive")
-    )
-    let setFetchSensitive = (data: Omit<CheckboxAttrs, "disabled">) => {
-      const checked = data.checked ?? false
-      featureFlagStore.toggleFeature("fetch_sensitive", checked ? ON : OFF)
-      sendCustomEvent("TOGGLE_FETCH_SENSITIVE", { checked })
+const sensitivityPath = computed(() => localePath("/sensitive-content"))
 
-      if (!checked) {
-        // If sensitive content is not fetched, there is nothing to blur/unblur.
-        // In this case, we reset blurring to its default value.
-        setBlurSensitive({ checked: true })
-      }
-    }
+const featureFlagStore = useFeatureFlagStore()
+const { $sendCustomEvent } = useNuxtApp()
 
-    const uiStore = useUiStore()
-    let blurSensitive = computed(() => uiStore.shouldBlurSensitive)
-    let setBlurSensitive = (data: { checked?: boolean }) => {
-      const checked = data.checked ?? false
-      uiStore.setShouldBlurSensitive(checked)
-      sendCustomEvent("TOGGLE_BLUR_SENSITIVE", { checked })
-    }
+let fetchSensitive = computed(() => featureFlagStore.isOn("fetch_sensitive"))
+let setFetchSensitive = (data: Omit<CheckboxAttrs, "disabled">) => {
+  const checked = data.checked ?? false
+  featureFlagStore.toggleFeature("fetch_sensitive", checked ? ON : OFF)
+  $sendCustomEvent("TOGGLE_FETCH_SENSITIVE", { checked })
 
-    const toggles = [
-      {
-        name: "fetchSensitive",
-        state: fetchSensitive,
-        switchFn: setFetchSensitive,
-      },
-      {
-        name: "blurSensitive",
-        state: blurSensitive,
-        switchFn: setBlurSensitive,
-      },
-    ]
+  if (!checked) {
+    // If sensitive content is not fetched, there is nothing to blur/unblur.
+    // In this case, we reset blurring to its default value.
+    setBlurSensitive({ checked: true })
+  }
+}
 
-    const isDisabled = (name: string) =>
-      name === "blurSensitive" && !fetchSensitive.value
+const uiStore = useUiStore()
+let blurSensitive = computed(() => uiStore.shouldBlurSensitive)
+let setBlurSensitive = (data: { checked?: boolean }) => {
+  const checked = data.checked ?? false
+  uiStore.setShouldBlurSensitive(checked)
+  $sendCustomEvent("TOGGLE_BLUR_SENSITIVE", { checked })
+}
 
-    return {
-      sensitivityPath,
-
-      toggles,
-      isDisabled,
-    }
+const toggles = [
+  {
+    name: "fetchSensitive",
+    state: fetchSensitive,
+    switchFn: setFetchSensitive,
+  },
+  {
+    name: "blurSensitive",
+    state: blurSensitive,
+    switchFn: setBlurSensitive,
   },
-})
+]
+
+const isDisabled = (name: string) =>
+  name === "blurSensitive" && !fetchSensitive.value
 </script>
 
 <template>
diff --git a/frontend/src/components/VSafetyWall/VSafetyWall.vue b/frontend/src/components/VSafetyWall/VSafetyWall.vue
index 0b875626855..1b306c69cb9 100644
--- a/frontend/src/components/VSafetyWall/VSafetyWall.vue
+++ b/frontend/src/components/VSafetyWall/VSafetyWall.vue
@@ -1,56 +1,37 @@
-<script lang="ts">
-import { PropType, computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 import { useSearchStore } from "~/stores/search"
-import { useAnalytics } from "~/composables/use-analytics"
 import { camelCase } from "~/utils/case"
 import type { AudioDetail, ImageDetail } from "~/types/media"
 
-import { defineEvent } from "~/types/emits"
-
 import VLink from "~/components/VLink.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VSafetyWall",
-  components: {
-    VButton,
-    VIcon,
-    VLink,
-  },
-  props: {
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-  },
-  emits: {
-    reveal: defineEvent(),
-  },
-  setup(props, { emit }) {
-    const searchStore = useSearchStore()
-    const backToSearchPath = computed(() => searchStore.backToSearchPath)
+const props = defineProps<{
+  media: AudioDetail | ImageDetail
+}>()
+
+const emit = defineEmits<{
+  reveal: []
+}>()
 
-    const { sendCustomEvent } = useAnalytics()
-    const handleBack = () => {
-      sendCustomEvent("GO_BACK_FROM_SENSITIVE_RESULT", {
-        id: props.media.id,
-        sensitivities: props.media.sensitivity.join(","),
-      })
-    }
-    const handleShow = () => {
-      emit("reveal")
-    }
+const searchStore = useSearchStore()
+const backToSearchPath = computed(() => searchStore.backToSearchPath)
 
-    return {
-      backToSearchPath,
-      handleBack,
-      handleShow,
-      camelCase,
-    }
-  },
-})
+const { $sendCustomEvent } = useNuxtApp()
+const handleBack = () => {
+  $sendCustomEvent("GO_BACK_FROM_SENSITIVE_RESULT", {
+    id: props.media.id,
+    sensitivities: props.media.sensitivity.join(","),
+  })
+}
+const handleShow = () => {
+  emit("reveal")
+}
 </script>
 
 <template>
diff --git a/frontend/src/components/VScrollableLine.vue b/frontend/src/components/VScrollableLine.vue
index 2bd4b00472e..3af5625269a 100644
--- a/frontend/src/components/VScrollableLine.vue
+++ b/frontend/src/components/VScrollableLine.vue
@@ -1,172 +1,153 @@
-<script lang="ts">
-import { useI18n } from "#imports"
-
-import { computed, defineComponent, onMounted, reactive, ref } from "vue"
-import { useElementSize, useScroll, watchDebounced } from "@vueuse/core"
-
-import VScroller from "~/components/VMediaInfo/VByLine/VScroller.vue"
-
+<script setup lang="ts">
 /**
  * A link to a collection page, either a source or a creator.
  */
-export default defineComponent({
-  name: "VScrollableLine",
-  components: {
-    VScroller,
-  },
-  setup() {
-    const containerRef = ref<HTMLElement | null>(null)
-    const buttonsRef = ref<HTMLElement | null>(null)
-    const innerContainerRef = ref<HTMLElement | null>(null)
-
-    const { localeProperties } = useI18n({ useScope: "global" })
-    const dir = computed(() => localeProperties.value.dir ?? "ltr")
-
-    const scrollStep = 150 // px to scroll on each click
-    const scrollMargin = 44 // px, button + margin
-    const shouldScroll = ref(false)
+import { useI18n } from "#imports"
 
-    const { x } = useScroll(buttonsRef)
-    const { width: containerWidth } = useElementSize(containerRef)
+import { computed, onMounted, reactive, ref } from "vue"
+import { useElementSize, useScroll, watchDebounced } from "@vueuse/core"
 
-    const showScrollButton = reactive({
-      start: false,
-      end: false,
-    })
-    const setScrollable = () => {
-      shouldScroll.value = true
-      showScrollButton.start = false
-      showScrollButton.end = true
-    }
+import VScroller from "~/components/VMediaInfo/VByLine/VScroller.vue"
 
-    const hideScrollButton = (side: "start" | "end") => {
-      showScrollButton[side] = false
-      isInteractive.value = false
-      setTimeout(() => {
-        isInteractive.value = true
-      }, 500)
-    }
-    const isInteractive = ref(true)
+const containerRef = ref<HTMLElement | null>(null)
+const buttonsRef = ref<HTMLElement | null>(null)
+const innerContainerRef = ref<HTMLElement | null>(null)
 
-    watchDebounced(
-      containerWidth,
-      (cWidth) => {
-        const buttonsScrollWidth = buttonsRef.value?.scrollWidth ?? 0
-        const hasOverflow = buttonsScrollWidth >= cWidth
-        if (hasOverflow && !shouldScroll.value) {
-          setScrollable()
-        } else if (!hasOverflow && shouldScroll.value) {
-          shouldScroll.value = false
-          showScrollButton.start = false
-          showScrollButton.end = false
-        }
-      },
-      { debounce: 500 }
-    )
+const { localeProperties } = useI18n({ useScope: "global" })
+const dir = computed(() => localeProperties.value.dir ?? "ltr")
 
-    onMounted(() => {
-      if (!buttonsRef.value || !containerRef.value) {
-        return
-      }
-      if (buttonsRef.value?.scrollWidth > containerRef.value.scrollWidth) {
-        setScrollable()
-      }
-    })
+const scrollStep = 150 // px to scroll on each click
+const scrollMargin = 44 // px, button + margin
+const shouldScroll = ref(false)
 
-    const getScrollEnd = (el: HTMLElement, dir: "ltr" | "rtl" | "auto") => {
-      return (
-        el.scrollWidth -
-        el.clientWidth -
-        (dir === "rtl" ? -el.scrollLeft : el.scrollLeft)
-      )
-    }
-    const getScrollStart = (el: HTMLElement) => {
-      return Math.abs(el.scrollLeft)
-    }
+const { x } = useScroll(buttonsRef)
+const { width: containerWidth } = useElementSize(containerRef)
 
-    const getDistToSide = (
-      to: "start" | "end",
-      dir: "ltr" | "rtl" | "auto",
-      el: HTMLElement
-    ) => {
-      return to === "start" ? getScrollStart(el) : getScrollEnd(el, dir)
-    }
+const showScrollButton = reactive({
+  start: false,
+  end: false,
+})
+const setScrollable = () => {
+  shouldScroll.value = true
+  showScrollButton.start = false
+  showScrollButton.end = true
+}
 
-    const scrollToSide = ({ side }: { side: "start" | "end" }) => {
-      hideScrollButton(side)
-      if (!buttonsRef.value) {
-        return
-      }
-      const left =
-        side === "start"
-          ? 0
-          : dir.value === "ltr"
-            ? buttonsRef.value.scrollWidth
-            : -buttonsRef.value.scrollWidth
-      buttonsRef.value.scrollTo({ left, behavior: "smooth" })
+const hideScrollButton = (side: "start" | "end") => {
+  showScrollButton[side] = false
+  isInteractive.value = false
+  setTimeout(() => {
+    isInteractive.value = true
+  }, 500)
+}
+const isInteractive = ref(true)
+
+watchDebounced(
+  containerWidth,
+  (cWidth) => {
+    const buttonsScrollWidth = buttonsRef.value?.scrollWidth ?? 0
+    const hasOverflow = buttonsScrollWidth >= cWidth
+    if (hasOverflow && !shouldScroll.value) {
+      setScrollable()
+    } else if (!hasOverflow && shouldScroll.value) {
+      shouldScroll.value = false
+      showScrollButton.start = false
+      showScrollButton.end = false
     }
+  },
+  { debounce: 500 }
+)
+
+onMounted(() => {
+  if (!buttonsRef.value || !containerRef.value) {
+    return
+  }
+  if (buttonsRef.value?.scrollWidth > containerRef.value.scrollWidth) {
+    setScrollable()
+  }
+})
 
-    const scroll = (to: "start" | "end") => {
-      if (!buttonsRef.value || !innerContainerRef.value) {
-        return
-      }
-      const innerContainer = innerContainerRef.value
-
-      showScrollButton[to === "start" ? "end" : "start"] = true
-
-      let distToSide = getDistToSide(to, dir.value, innerContainer)
-      let adjustedScrollStep = scrollStep
-
-      // If the scroll step is larger than the distance to the side, scroll
-      // to the side and hide the scroll button.
-      // If the distance to the side is less than twice the scroll step, scroll
-      // half the distance to the side to prevent a very small scroll at the end.
-      const isLastScroll = distToSide - scrollMargin <= scrollStep
-      if (isLastScroll) {
-        scrollToSide({ side: to })
-        return
-      }
-      if (distToSide < scrollStep * 2) {
-        adjustedScrollStep = distToSide / 2
-      }
-      if (dir.value === "rtl") {
-        adjustedScrollStep = -adjustedScrollStep
-      }
+const getScrollEnd = (el: HTMLElement, dir: "ltr" | "rtl" | "auto") => {
+  return (
+    el.scrollWidth -
+    el.clientWidth -
+    (dir === "rtl" ? -el.scrollLeft : el.scrollLeft)
+  )
+}
+const getScrollStart = (el: HTMLElement) => {
+  return Math.abs(el.scrollLeft)
+}
 
-      let left = to === "start" ? -adjustedScrollStep : adjustedScrollStep
-      buttonsRef.value?.scrollBy({ left, behavior: "smooth" })
-    }
+const getDistToSide = (
+  to: "start" | "end",
+  dir: "ltr" | "rtl" | "auto",
+  el: HTMLElement
+) => {
+  return to === "start" ? getScrollStart(el) : getScrollEnd(el, dir)
+}
 
-    watchDebounced(
-      x,
-      (xValue) => {
-        if (!buttonsRef.value) {
-          return
-        }
-        // This is necessary for handling both RTL and LTR.
-        const distFromStart = Math.abs(xValue)
-        const distFromEnd =
-          buttonsRef.value.scrollWidth -
-          distFromStart -
-          buttonsRef.value.clientWidth
-        showScrollButton.start = distFromStart >= scrollMargin
-        showScrollButton.end = distFromEnd >= scrollMargin
-      },
-      { debounce: 100 }
-    )
-    return {
-      containerRef,
-      buttonsRef,
-      innerContainerRef,
+const scrollToSide = ({ side }: { side: "start" | "end" }) => {
+  hideScrollButton(side)
+  if (!buttonsRef.value) {
+    return
+  }
+  const left =
+    side === "start"
+      ? 0
+      : dir.value === "ltr"
+        ? buttonsRef.value.scrollWidth
+        : -buttonsRef.value.scrollWidth
+  buttonsRef.value.scrollTo({ left, behavior: "smooth" })
+}
 
-      shouldScroll,
-      showScrollButton,
+const scroll = (to: "start" | "end") => {
+  if (!buttonsRef.value || !innerContainerRef.value) {
+    return
+  }
+  const innerContainer = innerContainerRef.value
+
+  showScrollButton[to === "start" ? "end" : "start"] = true
+
+  let distToSide = getDistToSide(to, dir.value, innerContainer)
+  let adjustedScrollStep = scrollStep
+
+  // If the scroll step is larger than the distance to the side, scroll
+  // to the side and hide the scroll button.
+  // If the distance to the side is less than twice the scroll step, scroll
+  // half the distance to the side to prevent a very small scroll at the end.
+  const isLastScroll = distToSide - scrollMargin <= scrollStep
+  if (isLastScroll) {
+    scrollToSide({ side: to })
+    return
+  }
+  if (distToSide < scrollStep * 2) {
+    adjustedScrollStep = distToSide / 2
+  }
+  if (dir.value === "rtl") {
+    adjustedScrollStep = -adjustedScrollStep
+  }
+
+  let left = to === "start" ? -adjustedScrollStep : adjustedScrollStep
+  buttonsRef.value?.scrollBy({ left, behavior: "smooth" })
+}
 
-      scroll,
-      isInteractive,
+watchDebounced(
+  x,
+  (xValue) => {
+    if (!buttonsRef.value) {
+      return
     }
+    // This is necessary for handling both RTL and LTR.
+    const distFromStart = Math.abs(xValue)
+    const distFromEnd =
+      buttonsRef.value.scrollWidth -
+      distFromStart -
+      buttonsRef.value.clientWidth
+    showScrollButton.start = distFromStart >= scrollMargin
+    showScrollButton.end = distFromEnd >= scrollMargin
   },
-})
+  { debounce: 100 }
+)
 </script>
 
 <template>