From 40c7f7fc6bc2f1e1efed5f5f13e3eaf0e330cab6 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 11 Mar 2024 14:38:58 +0300
Subject: [PATCH] Update collection header

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../VCollectionHeader/VCollectionHeader.vue   | 133 +++++----
 frontend/src/components/VCollectionPage.vue   |   2 +-
 .../components/VMediaInfo/VByLine/VByLine.vue | 255 +----------------
 frontend/src/components/VScrollableLine.vue   | 267 ++++++++++++++++++
 frontend/src/locales/scripts/en.json5         |  17 +-
 frontend/test/locales/ar.json                 |  25 ++
 6 files changed, 396 insertions(+), 303 deletions(-)
 create mode 100644 frontend/src/components/VScrollableLine.vue

diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
index 71b667a342c..d121e0eee0b 100644
--- a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
+++ b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -1,13 +1,18 @@
 <template>
   <div
-    class="collection-header grid grid-cols-[1.5rem,1fr] gap-x-2 gap-y-4 md:grid-rows-[auto,auto] md:gap-y-8"
-    :class="
+    class="collection-header -m-1 grid auto-rows-auto gap-x-2 gap-y-2 overflow-hidden p-1 md:grid-rows-[auto,auto] md:gap-y-8"
+    :class="[
+      `collection-${collection}`,
       collection === 'tag'
-        ? 'tags grid-rows-[auto,auto] md:grid-cols-[2.5rem,1fr]'
-        : 'grid-rows-[auto,auto,auto] md:grid-cols-[2.5rem,1fr,auto]'
-    "
+        ? 'md:grid-cols-[2.5rem,1fr]'
+        : 'md:grid-cols-[2.5rem,1fr,auto]',
+    ]"
   >
-    <VIcon :name="iconName" :size="isMd ? 10 : 6" class="icon" />
+    <VIcon :name="iconName" :size="isMd ? 10 : 6" class="icon hidden md:flex" />
+    <span
+      class="collection-name label-regular flex text-dark-charcoal-70 md:hidden"
+      >{{ $t(`collection.heading.${collection}`) }}</span
+    >
     <h1 class="title text-3xl font-semibold leading-snug md:text-6xl">
       {{ title }}
     </h1>
@@ -16,7 +21,7 @@
       as="VLink"
       variant="filled-dark"
       size="medium"
-      class="button label-bold !flex-none md:ms-4 md:mt-1"
+      class="link label-bold !flex-none md:ms-4"
       has-icon-end
       show-external-icon
       :external-icon-size="6"
@@ -24,45 +29,49 @@
       @click="sendAnalyticsEvent"
       >{{ $t(`collection.link.${collection}`) }}</VButton
     >
-    <p
-      v-if="collectionParams.collection !== 'creator'"
-      class="results caption-regular md:label-regular mt-2 text-dark-charcoal-70 md:mt-0"
-    >
-      {{ resultsLabel }}
-    </p>
-
-    <p
-      v-else-if="
-        collectionParams.collection === 'creator' && resultsLabel.length === 2
-      "
-      class="results caption-regular md:label-regular mt-2 text-dark-charcoal-70 md:mt-0"
+    <div
+      class="results mt-6 flex flex-col gap-1 md:mt-0 md:flex-row md:items-center"
     >
-      {{ resultsLabel[0]
-      }}<VLink :href="source.link" class="!gap-x-1" show-external-icon>{{
-        source.name
-      }}</VLink
-      ><span v-if="resultsLabel[1]">{{ resultsLabel[1] }}</span>
-    </p>
+      <p class="label-regular w-max text-dark-charcoal-70 md:whitespace-nowrap">
+        {{ resultsLabel }}
+      </p>
+      <VScrollableLine
+        v-if="collection === 'creator'"
+        class="-mx-2 -my-1.5px w-[calc(100%-theme(space.2))]"
+      >
+        <VButton
+          as="VLink"
+          size="disabled"
+          variant="transparent-gray"
+          class="label-bold m-1.5px h-8 w-max gap-x-1 whitespace-nowrap p-1"
+          :href="sourceCollectionLink"
+          has-icon-start
+          ><VIcon name="institution" /><span class="w-max whitespace-nowrap">{{
+            source.name
+          }}</span></VButton
+        >
+      </VScrollableLine>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+import { computed, defineComponent, type PropType } from "vue"
 
-import { useUiStore } from "~/stores/ui"
-import type { CollectionParams } from "~/types/search"
 import { useAnalytics } from "~/composables/use-analytics"
 
+import { useMediaStore } from "~/stores/media"
 import { useProviderStore } from "~/stores/provider"
-import { SupportedMediaType } from "~/constants/media"
+import { useSearchStore } from "~/stores/search"
+import { useUiStore } from "~/stores/ui"
+import type { CollectionParams } from "~/types/search"
+import type { SupportedMediaType } from "~/constants/media"
 
 import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
 
-import { useMediaStore } from "~/stores/media"
-
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VButton from "~/components/VButton.vue"
-import VLink from "~/components/VLink.vue"
+import VScrollableLine from "~/components/VScrollableLine.vue"
 
 const icons = {
   tag: "tag",
@@ -75,7 +84,7 @@ const icons = {
  */
 export default defineComponent({
   name: "VCollectionHeader",
-  components: { VLink, VIcon, VButton },
+  components: { VScrollableLine, VIcon, VButton },
   props: {
     collectionParams: {
       type: Object as PropType<CollectionParams>,
@@ -92,6 +101,7 @@ export default defineComponent({
   setup(props) {
     const mediaStore = useMediaStore()
     const providerStore = useProviderStore()
+    const searchStore = useSearchStore()
     const uiStore = useUiStore()
 
     const iconName = computed(() => icons[props.collectionParams.collection])
@@ -133,6 +143,20 @@ export default defineComponent({
       }
       return source.value.link
     })
+
+    const sourceCollectionLink = computed(() => {
+      if (props.collectionParams.collection !== "creator") {
+        return ""
+      }
+      return searchStore.getCollectionPath({
+        type: props.mediaType,
+        collectionParams: {
+          collection: "source",
+          source: props.collectionParams.source,
+        },
+      })
+    })
+
     const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
 
     const resultsLabel = computed(() => {
@@ -140,22 +164,12 @@ export default defineComponent({
         return ""
       }
       const resultsCount = mediaStore.results[props.mediaType].count
-      const params =
-        props.collectionParams.collection === "creator"
-          ? { source: source.value.name }
-          : undefined
 
-      const label = getI18nCollectionResultCountLabel(
+      return getI18nCollectionResultCountLabel(
         resultsCount,
         props.mediaType,
-        props.collectionParams.collection,
-        params
+        props.collectionParams.collection
       )
-      if (props.collectionParams.collection === "creator") {
-        const splitLabel = label.split(source.value.name)
-        return splitLabel.length === 2 ? splitLabel : ["", ""]
-      }
-      return label
     })
 
     const isMd = computed(() => uiStore.isBreakpoint("md"))
@@ -183,6 +197,7 @@ export default defineComponent({
       resultsLabel,
       source,
       url,
+      sourceCollectionLink,
       iconName,
       isMd,
       sendAnalyticsEvent,
@@ -193,18 +208,26 @@ export default defineComponent({
 
 <style scoped>
 .collection-header {
-  grid-template-areas: "icon title" "button button" "results results";
+  @apply auto-rows-auto;
 }
-@screen md {
-  .collection-header {
-    grid-template-areas: "icon title button" "results results results";
-  }
+.collection-source {
+  grid-template-areas: "collection-name" "title" "link" "results";
+}
+.collection-creator {
+  grid-template-areas: "collection-name" "title" "link" "results";
 }
-.collection-header.tags {
-  grid-template-areas: "icon title" "results results";
+.collection-tag {
+  grid-template-areas: "collection-name" "title" "results";
 }
+
 @screen md {
-  .collection-header.tags {
+  .collection-source {
+    grid-template-areas: "icon title link" "results results results";
+  }
+  .collection-creator {
+    grid-template-areas: "icon title link" "results results results";
+  }
+  .collection-tag {
     grid-template-areas: "icon title" "results results";
   }
 }
@@ -214,8 +237,8 @@ export default defineComponent({
 .title {
   grid-area: title;
 }
-.button {
-  grid-area: button;
+.link {
+  grid-area: link;
 }
 .results {
   grid-area: results;
diff --git a/frontend/src/components/VCollectionPage.vue b/frontend/src/components/VCollectionPage.vue
index 6b70974b2cf..51f5cbf5019 100644
--- a/frontend/src/components/VCollectionPage.vue
+++ b/frontend/src/components/VCollectionPage.vue
@@ -5,7 +5,7 @@
       :collection-params="collectionParams"
       :creator-url="creatorUrl"
       :media-type="mediaType"
-      :class="mediaType === 'image' ? 'mb-4' : 'mb-2'"
+      :class="mediaType === 'image' ? 'mb-0 md:mb-4' : 'mb-2'"
     />
     <VAudioList
       v-if="results.type === 'audio'"
diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
index 46e9209597c..ff07a1bca23 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -1,69 +1,27 @@
 <template>
-  <div
-    ref="containerRef"
-    class="relative -my-1.5px flex max-w-full sm:-ms-1"
-    :class="{ 'pointer-events-none': !isInteractive }"
-  >
-    <div
-      class="max-w-full"
-      :class="{
-        'faded-overflow-s': showScrollButton.start,
-        'faded-overflow-e': showScrollButton.end,
-      }"
-    >
-      <div
-        ref="buttonsRef"
-        class="buttons flex justify-start gap-x-3 overflow-x-scroll p-1.5px sm:gap-x-1"
-        :class="{
-          'ms-11': showScrollButton.start,
-          'me-11': showScrollButton.end,
-        }"
-      >
-        <VSourceCreatorButton
-          v-if="showCreator && creatorHref && creator"
-          :href="creatorHref"
-          icon-name="person"
-          :title="creator"
-        />
-        <VSourceCreatorButton
-          :href="sourceHref"
-          icon-name="institution"
-          :title="sourceName"
-        />
-      </div>
-    </div>
-    <VScroller
-      v-show="showScrollButton.start"
-      class="start-0"
-      direction="back"
-      @click="scroll('start')"
+  <VScrollableLine>
+    <VSourceCreatorButton
+      v-if="showCreator && creatorHref && creator"
+      :href="creatorHref"
+      icon-name="person"
+      :title="creator"
     />
-    <VScroller
-      v-show="showScrollButton.end"
-      class="end-0"
-      direction="forward"
-      @click="scroll('end')"
+    <VSourceCreatorButton
+      :href="sourceHref"
+      icon-name="institution"
+      :title="sourceName"
     />
-  </div>
+  </VScrollableLine>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  PropType,
-  reactive,
-  ref,
-} from "vue"
-import { useElementSize, useScroll, watchDebounced } from "@vueuse/core"
+import { computed, defineComponent, type PropType } from "vue"
 
-import { useI18n } from "~/composables/use-i18n"
 import { useSearchStore } from "~/stores/search"
 import type { SupportedMediaType } from "~/constants/media"
 
 import VSourceCreatorButton from "~/components/VMediaInfo/VByLine/VSourceCreatorButton.vue"
-import VScroller from "~/components/VMediaInfo/VByLine/VScroller.vue"
+import VScrollableLine from "~/components/VScrollableLine.vue"
 
 /**
  * A link to a collection page, either a source or a creator.
@@ -71,7 +29,7 @@ import VScroller from "~/components/VMediaInfo/VByLine/VScroller.vue"
 export default defineComponent({
   name: "VByLine",
   components: {
-    VScroller,
+    VScrollableLine,
     VSourceCreatorButton,
   },
   props: {
@@ -92,136 +50,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const containerRef = ref<HTMLElement | null>(null)
-    const buttonsRef = ref<HTMLElement | null>(null)
-
     const showCreator = computed(() => {
       return Boolean(
         props.creator && props.creator.toLowerCase() !== "unidentified"
       )
     })
 
-    const i18n = useI18n()
-    const dir = computed(() => i18n.localeProperties.dir ?? "ltr")
-
-    const scrollStep = 150 // px to scroll on each click
-    const scrollMargin = 44 // px, button + margin
-    const shouldScroll = ref(false)
-
-    const { x } = useScroll(buttonsRef)
-    const { width: containerWidth } = useElementSize(containerRef)
-
-    const showScrollButton = reactive({
-      start: false,
-      end: false,
-    })
-    const setScrollable = () => {
-      shouldScroll.value = true
-      showScrollButton.start = false
-      showScrollButton.end = true
-    }
-
-    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 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 getDistToSide = (
-      to: "start" | "end",
-      dir: "ltr" | "rtl" | "auto",
-      el: HTMLElement
-    ) => {
-      return to === "start" ? getScrollStart(el) : getScrollEnd(el, dir)
-    }
-
-    const scroll = (to: "start" | "end") => {
-      if (!buttonsRef.value) {
-        return
-      }
-      const buttons = buttonsRef.value
-
-      showScrollButton[to === "start" ? "end" : "start"] = true
-
-      let distToSide = getDistToSide(to, dir.value, buttons)
-      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) {
-        hideScrollButton(to)
-        adjustedScrollStep = to === "start" ? distToSide : buttons.scrollWidth
-      } else if (distToSide < scrollStep * 2) {
-        adjustedScrollStep = distToSide / 2
-      }
-      if (dir.value === "rtl") {
-        adjustedScrollStep = -adjustedScrollStep
-      }
-
-      let left = to === "start" ? -adjustedScrollStep : adjustedScrollStep
-      buttons.scrollBy({ left, behavior: "smooth" })
-    }
-
-    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 }
-    )
-
     const searchStore = useSearchStore()
 
     const creatorHref = computed(() => {
@@ -249,71 +83,10 @@ export default defineComponent({
     })
 
     return {
-      containerRef,
-      buttonsRef,
-
       showCreator,
-      shouldScroll,
-      showScrollButton,
-
       creatorHref,
       sourceHref,
-
-      scroll,
-      isInteractive,
     }
   },
 })
 </script>
-
-<style scoped>
-.buttons::-webkit-scrollbar {
-  width: 0 !important;
-  height: 0 !important;
-}
-.buttons {
-  scrollbar-width: none;
-}
-
-.faded-overflow-e:dir(ltr),
-.faded-overflow-s:dir(rtl) {
-  mask-image: linear-gradient(
-    to left,
-    transparent 0,
-    transparent 44px,
-    #000 98px,
-    #000 100%
-  );
-}
-.faded-overflow-e:dir(rtl),
-.faded-overflow-s:dir(ltr) {
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    transparent 44px,
-    #000 98px,
-    #000 100%
-  );
-}
-
-.faded-overflow-e.faded-overflow-s {
-  mask-image: linear-gradient(
-      to right,
-      transparent 0,
-      transparent 44px,
-      #000 98px,
-      #000 50%,
-      transparent 50%,
-      transparent 100%
-    ),
-    linear-gradient(
-      to left,
-      transparent 0,
-      transparent 44px,
-      #000 98px,
-      #000 50%,
-      transparent 50%,
-      transparent 100%
-    );
-}
-</style>
diff --git a/frontend/src/components/VScrollableLine.vue b/frontend/src/components/VScrollableLine.vue
new file mode 100644
index 00000000000..f49fcb292f3
--- /dev/null
+++ b/frontend/src/components/VScrollableLine.vue
@@ -0,0 +1,267 @@
+<template>
+  <div
+    ref="containerRef"
+    class="container relative flex overflow-hidden"
+    :class="{ 'pointer-events-none': !isInteractive }"
+  >
+    <div
+      ref="innerContainerRef"
+      class="inner-container max-w-full"
+      :class="{
+        'faded-overflow-s': showScrollButton.start,
+        'faded-overflow-e': showScrollButton.end,
+      }"
+    >
+      <div
+        ref="buttonsRef"
+        class="buttons flex justify-start gap-x-3 overflow-x-scroll sm:gap-x-1"
+        :class="[
+          showScrollButton.start
+            ? showScrollButton.end
+              ? 'me-11 ms-11 w-[calc(100%_-_2_*_theme(spacing.11))]'
+              : 'ms-11 w-[calc(100%_-_theme(spacing.11))]'
+            : showScrollButton.end
+              ? 'me-11 w-[calc(100%_-_theme(spacing.11))]'
+              : '',
+        ]"
+      >
+        <slot />
+      </div>
+    </div>
+    <VScroller
+      v-show="showScrollButton.start"
+      class="start-0"
+      direction="back"
+      @click="scroll('start')"
+    />
+    <VScroller
+      v-show="showScrollButton.end"
+      class="end-0"
+      direction="forward"
+      @click="scroll('end')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, reactive, ref } from "vue"
+import { useElementSize, useScroll, watchDebounced } from "@vueuse/core"
+
+import { useI18n } from "~/composables/use-i18n"
+
+import VScroller from "~/components/VMediaInfo/VByLine/VScroller.vue"
+
+/**
+ * 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 i18n = useI18n()
+    const dir = computed(() => i18n.localeProperties.dir ?? "ltr")
+
+    const scrollStep = 150 // px to scroll on each click
+    const scrollMargin = 44 // px, button + margin
+    const shouldScroll = ref(false)
+
+    const { x } = useScroll(buttonsRef)
+    const { width: containerWidth } = useElementSize(containerRef)
+
+    const showScrollButton = reactive({
+      start: false,
+      end: false,
+    })
+    const setScrollable = () => {
+      shouldScroll.value = true
+      showScrollButton.start = false
+      showScrollButton.end = true
+    }
+
+    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 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 getDistToSide = (
+      to: "start" | "end",
+      dir: "ltr" | "rtl" | "auto",
+      el: HTMLElement
+    ) => {
+      return to === "start" ? getScrollStart(el) : getScrollEnd(el, dir)
+    }
+
+    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 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" })
+    }
+
+    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,
+
+      shouldScroll,
+      showScrollButton,
+
+      scroll,
+      isInteractive,
+    }
+  },
+})
+</script>
+
+<style scoped>
+.buttons::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+.buttons {
+  scrollbar-width: none;
+}
+
+.faded-overflow-e:dir(ltr),
+.faded-overflow-s:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    transparent 44px,
+    #000 98px,
+    #000 100%
+  );
+}
+.faded-overflow-e:dir(rtl),
+.faded-overflow-s:dir(ltr) {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    transparent 44px,
+    #000 98px,
+    #000 100%
+  );
+}
+
+.faded-overflow-e.faded-overflow-s {
+  mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      transparent 44px,
+      #000 98px,
+      #000 50%,
+      transparent 50%,
+      transparent 100%
+    ),
+    linear-gradient(
+      to left,
+      transparent 0,
+      transparent 44px,
+      #000 98px,
+      #000 50%,
+      transparent 50%,
+      transparent 100%
+    );
+}
+</style>
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index 6a79aaab831..bd548d490a1 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -775,6 +775,11 @@
     },
   },
   collection: {
+    heading: {
+      tag: "Tag",
+      creator: "Creator",
+      source: "Source",
+    },
     link: {
       source: "Open source site",
       creator: "Open creator page",
@@ -796,14 +801,14 @@
     resultCountLabel: {
       creator: {
         audio: {
-          zero: "No audio files by this creator in {source}",
-          count: "{count} audio file by this creator in {source}|{count} audio files by this creator in {source}",
-          countMore: "Over {count} audio files by this creator in {source}",
+          zero: "No audio files by this creator.",
+          count: "{count} audio file by this creator.|{count} audio files by this creator.",
+          countMore: "Over {count} audio files by this creator.",
         },
         image: {
-          zero: "No images by this creator in {source}",
-          count: "{count} image by this creator in {source}|{count} images by this creator in {source}",
-          countMore: "Over {count} images by this creator in {source}",
+          zero: "No images by this creator.",
+          count: "{count} image by this creator.|{count} images by this creator.",
+          countMore: "Over {count} images by this creator.",
         },
       },
       source: {
diff --git a/frontend/test/locales/ar.json b/frontend/test/locales/ar.json
index 2bdcd915e08..0f7677be5c4 100644
--- a/frontend/test/locales/ar.json
+++ b/frontend/test/locales/ar.json
@@ -701,6 +701,31 @@
     "none": "لا توجد عمليات بحث حديثة لعرضها.",
     "disclaimer": "لا يقوم Openverse بتخزين عمليات البحث الأخيرة ، يتم الاحتفاظ بهذه المعلومات محليًا في متصفحك."
   },
+  "collection": {
+    "heading": {
+      "tag": "الكلمات الدلالية",
+      "creator": "مبتدع",
+      "source": "منشأ"
+    },
+    "link": {
+      "source": "موقع مفتوح المصدر",
+      "creator": "افتح صفحة المنشئ"
+    },
+    "ariaLabel": {
+      "creator": {
+        "audio": "الملفات الصوتية بواسطة {creator}",
+        "image": "الصور عن طريق {creator}"
+      },
+      "source": {
+        "audio": "ملفات صوتية من {source}",
+        "image": "الصور عن طريق {source}"
+      },
+      "tag": {
+        "audio": "الملفات الصوتية مع العلامة {tag}",
+        "image": "الصور التي تحمل الوسم {tag}"
+      }
+    }
+  },
   "unknownError": {
     "heading": "عفوًا ، يبدو أنه حدث خطأ ما. حاول مرة اخرى."
   }