From 3855ed7a6a638dc48de70b2896eb9ac952d01a99 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 6 Dec 2021 20:15:20 +0300
Subject: [PATCH 01/24] Add VHeader stub Rename VSearchBar and VSearchButton
 and move to VHeader Add VLogoLoader to VHeader and adjust header styles

---
 package.json                                  |  1 +
 .../License/meta/VLicense.stories.mdx         |  2 +-
 src/components/VHeader/README.md              | 11 +++
 src/components/VHeader/VHeader.vue            | 80 +++++++++++++++++++
 .../VSearchBar/VSearchBar.vue}                |  6 +-
 .../VSearchBar/VSearchButton.vue}             |  2 +-
 .../VSearchBar/meta/VSearchBar.stories.mdx}   | 22 ++---
 .../VHeader/meta/VHeader.stories.mdx          | 40 ++++++++++
 src/components/VLogoLoader/VLogoLoader.vue    |  3 +-
 src/composables/use-event-listener.js         | 11 +--
 src/composables/use-media-query.js            |  3 +-
 src/composables/use-window-scroll.js          | 43 ++++++++++
 src/composables/window.js                     |  2 +
 src/layouts/default.vue                       |  8 +-
 src/layouts/with-nav-search.vue               | 10 ++-
 src/pages/search.vue                          |  3 +-
 .../Header/SearchBar/search-bar.spec.js       |  2 +-
 17 files changed, 218 insertions(+), 31 deletions(-)
 create mode 100644 src/components/VHeader/README.md
 create mode 100644 src/components/VHeader/VHeader.vue
 rename src/components/{Header/SearchBar/SearchBar.vue => VHeader/VSearchBar/VSearchBar.vue} (92%)
 rename src/components/{Header/SearchBar/SearchButton.vue => VHeader/VSearchBar/VSearchButton.vue} (96%)
 rename src/components/{Header/SearchBar/meta/SearchBar.stories.mdx => VHeader/VSearchBar/meta/VSearchBar.stories.mdx} (76%)
 create mode 100644 src/components/VHeader/meta/VHeader.stories.mdx
 create mode 100644 src/composables/use-window-scroll.js
 create mode 100644 src/composables/window.js

diff --git a/package.json b/package.json
index 6afc44fd00..62faeb681e 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "lodash.findindex": "^4.6.0",
     "lodash.isempty": "^4.4.0",
     "lodash.sortby": "^4.7.0",
+    "lodash.throttle": "^4.1.1",
     "nuxt": "^2.15.4",
     "reakit-utils": "^0.15.2",
     "uuid": "^8.3.2",
diff --git a/src/components/License/meta/VLicense.stories.mdx b/src/components/License/meta/VLicense.stories.mdx
index 6cbdd10d19..98d588bf02 100644
--- a/src/components/License/meta/VLicense.stories.mdx
+++ b/src/components/License/meta/VLicense.stories.mdx
@@ -6,7 +6,7 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import VLicense from '~/components/license/VLicense.vue'
+import VLicense from '~/components/License/VLicense.vue'
 
 <Meta title="Components/VLicense" component={VLicense} />
 
diff --git a/src/components/VHeader/README.md b/src/components/VHeader/README.md
new file mode 100644
index 0000000000..cf9f9f98f9
--- /dev/null
+++ b/src/components/VHeader/README.md
@@ -0,0 +1,11 @@
+#VHeader
+
+The sticky header at the top of the page. On the homepage and the content pages, it shows the
+Openverse logo and page links ??and Search bar??, and on the Search page it additionally has
+a Content Switcher, "burger menu" for page links, and a filters button.
+On mobile, the header only shows the logo and close button when the overlay (pages, content
+switcher, or filters) is open.
+
+## Components
+### VLogoLoader
+### VFilterButton
diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeader.vue
new file mode 100644
index 0000000000..88497a9b60
--- /dev/null
+++ b/src/components/VHeader/VHeader.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="fixed flex px-8 align-center z-40 w-full bg-white"
+    :class="{ 'border-b border-dark-charcoal-20': isHeaderScrolled }"
+  >
+    <NuxtLink to="/">
+      <VLogoLoader />
+    </NuxtLink>
+    <VButton
+      v-if="!!currentOverlay"
+      variant="action-menu"
+      class="self-center"
+      @click="closeOverlay"
+    >
+      <span class="text-sr">{{ $t('modal.close') }}</span>
+      <VIcon :icon-path="closeIcon" />
+    </VButton>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  ref,
+  useRoute,
+  useRouter,
+} from '@nuxtjs/composition-api'
+import { useWindowScroll } from '~/composables/use-window-scroll'
+
+import closeIcon from '~/assets/icons/close.svg'
+
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
+import { isScreen } from '~/composables/use-media-query'
+
+const HEADER_HEIGHT = 80
+
+const searchRoutes = ['search', 'search-image', 'search-audio', 'search-video']
+
+const VHeader = defineComponent({
+  name: 'VHeader',
+  components: {
+    VIcon,
+    VLogoLoader,
+  },
+  setup() {
+    const { y } = useWindowScroll()
+    const isHeaderScrolled = computed(() => y.value > HEADER_HEIGHT)
+
+    const isMdScreen = isScreen('md')
+    const currentOverlay = ref(null)
+    // eslint-disable-next-line no-unused-vars
+    const setCurrentOverlay = () => {
+      // Overlay can only be set on mobile screen
+      if (!isMdScreen.value) return
+    }
+    const closeOverlay = () => {
+      currentOverlay.value = null
+    }
+    const route = useRoute()
+    const router = useRouter()
+    const isSearch = ref(route.value.name === 'search')
+    router.beforeEach((to, from, next) => {
+      isSearch.value = searchRoutes.includes(to.name)
+      next()
+    })
+
+    return {
+      closeIcon,
+      closeOverlay,
+      currentOverlay,
+      isHeaderScrolled,
+      isSearch,
+    }
+  },
+})
+
+export default VHeader
+</script>
diff --git a/src/components/Header/SearchBar/SearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue
similarity index 92%
rename from src/components/Header/SearchBar/SearchBar.vue
rename to src/components/VHeader/VSearchBar/VSearchBar.vue
index fd9b7044ca..5a309abc4f 100644
--- a/src/components/Header/SearchBar/SearchBar.vue
+++ b/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -12,7 +12,7 @@
       <!-- @slot Extra information such as loading message or result count goes here. -->
       <slot />
     </InputField>
-    <SearchButton type="submit" />
+    <VSearchButton type="submit" />
   </form>
 </template>
 
@@ -20,7 +20,7 @@
 import { computed } from '@nuxtjs/composition-api'
 
 import InputField from '~/components/InputField/InputField.vue'
-import SearchButton from '~/components/Header/SearchBar/SearchButton.vue'
+import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
 
 /**
  * Displays a text field for a search query and is attached to an action button
@@ -31,7 +31,7 @@ export default {
   name: 'SearchBar',
   components: {
     InputField,
-    SearchButton,
+    VSearchButton,
   },
   inheritAttrs: false,
   model: {
diff --git a/src/components/Header/SearchBar/SearchButton.vue b/src/components/VHeader/VSearchBar/VSearchButton.vue
similarity index 96%
rename from src/components/Header/SearchBar/SearchButton.vue
rename to src/components/VHeader/VSearchBar/VSearchButton.vue
index 86c8394cb9..38da6083b6 100644
--- a/src/components/Header/SearchBar/SearchButton.vue
+++ b/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -15,7 +15,7 @@ import VIconButton from '~/components/VIconButton/VIconButton.vue'
 import searchIcon from '~/assets/icons/search.svg'
 
 export default {
-  name: 'SearchButton',
+  name: 'VSearchButton',
   components: { VIconButton },
   inheritAttrs: false,
   setup() {
diff --git a/src/components/Header/SearchBar/meta/SearchBar.stories.mdx b/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx
similarity index 76%
rename from src/components/Header/SearchBar/meta/SearchBar.stories.mdx
rename to src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx
index 1851645ad0..403c4964e4 100644
--- a/src/components/Header/SearchBar/meta/SearchBar.stories.mdx
+++ b/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx
@@ -5,11 +5,11 @@ import {
   Meta,
   Story,
 } from '@storybook/addon-docs'
-import SearchBar from '~/components/Header/SearchBar/SearchBar.vue'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 <Meta
   title="Components/Header/Search bar"
-  component={SearchBar}
+  component={VSearchBar}
   argTypes={{
     input: {
       action: 'input',
@@ -22,18 +22,18 @@ import SearchBar from '~/components/Header/SearchBar/SearchBar.vue'
 
 export const Template = (args, { argTypes }) => ({
   template: `
-    <SearchBar v-bind="$props" v-on="$props">
+    <VSearchBar v-bind="$props" v-on="$props">
       12,345 results
-    </SearchBar>`,
-  components: { SearchBar },
+    </VSearchBar>`,
+  components: { VSearchBar },
   props: Object.keys(argTypes),
 })
 
 # Search bar
 
-<Description of={SearchBar} />
+<Description of={VSearchBar} />
 
-<ArgsTable of={SearchBar} />
+<ArgsTable of={VSearchBar} />
 
 The component emits an `input` event with the new contents of the field whenever
 the field receives an input. It also emits the `search` event when the search
@@ -56,13 +56,13 @@ representing the search query.
 export const vModelTemplate = () => ({
   template: `
     <div>
-      <SearchBar v-model="text">
+      <VSearchBar v-model="text">
         {{ text.length }}
-      </SearchBar>
+      </VSearchBar>
       {{ text }}
     </div>
   `,
-  components: { SearchBar },
+  components: { VSearchBar },
   data() {
     return {
       text: 'Hello, World!',
@@ -74,7 +74,7 @@ export const vModelTemplate = () => ({
   <Story name="v-model">{vModelTemplate.bind({})}</Story>
 </Canvas>
 
-The `SearchBar` component passes all attributes down to the inner `InputField`
+The `VSearchBar` component passes all attributes down to the inner `InputField`
 which itself applies all its attributes to its inner `<input>` element. So it's
 easy `<input>` attributes like placeholders or HTML validations.
 
diff --git a/src/components/VHeader/meta/VHeader.stories.mdx b/src/components/VHeader/meta/VHeader.stories.mdx
new file mode 100644
index 0000000000..0644acf8f2
--- /dev/null
+++ b/src/components/VHeader/meta/VHeader.stories.mdx
@@ -0,0 +1,40 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VHeader from '~/components/VHeader/VHeader.vue'
+
+<Meta
+  title="Components/VHeader/VHeader"
+  component={VHeader}
+  argTypes={{
+    input: {
+      action: 'input',
+    },
+    submit: {
+      action: 'submit',
+    },
+  }}
+/>
+
+export const Template = (args, { argTypes }) => ({
+  template: `
+    <VHeader v-bind="$props" v-on="$props" />`,
+  components: { VHeader },
+  props: Object.keys(argTypes),
+})
+
+# VHeader
+
+<Description of={VHeader} />
+
+<ArgsTable of={VHeader} />
+
+The header component. Fixed on scroll, search bar, content switcher, pages menu and filters button.
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index ce4ddac143..7f1fd9aa37 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -51,8 +51,7 @@ export default defineComponent({
    * @param {import('@nuxtjs/composition-api').SetupContext} context
    */
   setup() {
-    const defaultWindow = typeof window !== 'undefined' ? window : undefined
-    const prefersReducedMotion = useReducedMotion({ window: defaultWindow })
+    const prefersReducedMotion = useReducedMotion()
 
     return { prefersReducedMotion }
   },
diff --git a/src/composables/use-event-listener.js b/src/composables/use-event-listener.js
index 5ce9f30368..266a349003 100644
--- a/src/composables/use-event-listener.js
+++ b/src/composables/use-event-listener.js
@@ -12,18 +12,19 @@ import {
  * @param {import('@nuxtjs/composition-api').Ref<EventTarget | null> | EventTarget} target The target can be a reactive ref which adds flexibility
  * @param {string} event
  * @param {(e: Event) => void} handler
+ * @param {any} options
  */
-export function useEventListener(target, event, handler) {
-  // if its a reactive ref, use a watcher
+export function useEventListener(target, event, handler, options = {}) {
+  // if it's a reactive ref, use a watcher
   if (isRef(target)) {
     watch(target, (value, oldValue) => {
       oldValue?.removeEventListener(event, handler)
-      value?.addEventListener(event, handler)
+      value?.addEventListener(event, handler, options)
     })
   } else {
-    // otherwise use the mounted hook
+    // otherwise, use the mounted hook
     onMounted(() => {
-      target.addEventListener(event, handler)
+      target.addEventListener(event, handler, options)
     })
   }
   // clean it up
diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index d253064d69..3dd7b7abb9 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -2,6 +2,7 @@
  which, in turn, is ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 import { onBeforeUnmount, ref } from '@nuxtjs/composition-api'
 import { SCREEN_SIZES } from '~/constants/screens.js'
+import { defaultWindow } from '~/composables/window'
 
 /**
  * Reactive Media Query.
@@ -10,7 +11,7 @@ import { SCREEN_SIZES } from '~/constants/screens.js'
  * @param options
  */
 export function useMediaQuery(query, options = {}) {
-  const { window } = options
+  const { window = defaultWindow } = options
   if (!window) return ref(false)
 
   const mediaQuery = window.matchMedia(query)
diff --git a/src/composables/use-window-scroll.js b/src/composables/use-window-scroll.js
new file mode 100644
index 0000000000..3713de4bce
--- /dev/null
+++ b/src/composables/use-window-scroll.js
@@ -0,0 +1,43 @@
+// code taken from Vueuse
+import throttle from 'lodash.throttle'
+import { defaultWindow } from '~/composables/window'
+import { ref } from '@nuxtjs/composition-api'
+import { useEventListener } from '~/composables/use-event-listener'
+
+/**
+ *
+ * @param {object} options
+ * @param {Window} [options.window]
+ * @param {number} [options.throttleMs] - time to throttle the scroll handler.
+ * Set to 0 to remove throttling
+ */
+export function useWindowScroll({
+  window = defaultWindow,
+  throttleMs = 200,
+} = {}) {
+  if (!window) {
+    return {
+      x: ref(0),
+      y: ref(0),
+    }
+  }
+
+  const x = ref(window.pageXOffset)
+  const y = ref(window.pageYOffset)
+
+  const scrollHandler = () => {
+    x.value = window.pageXOffset
+    y.value = window.pageYOffset
+  }
+
+  const handler = throttleMs
+    ? throttle(scrollHandler, throttleMs)
+    : scrollHandler
+
+  useEventListener(window, 'scroll', handler, {
+    capture: false,
+    passive: true,
+  })
+
+  return { x, y }
+}
diff --git a/src/composables/window.js b/src/composables/window.js
new file mode 100644
index 0000000000..2fa7b45ef5
--- /dev/null
+++ b/src/composables/window.js
@@ -0,0 +1,2 @@
+export const isClient = typeof window !== 'undefined'
+export const defaultWindow = isClient ? window : undefined
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 6d213583b6..2a51eb1b32 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="app">
     <MigrationNotice v-show="isReferredFromCc" />
-    <HeaderSection />
-    <main class="embedded">
+    <VHeader />
+    <main class="embedded pt-20">
       <Nuxt />
     </main>
   </div>
@@ -14,10 +14,14 @@ import iframeHeight from '~/mixins/iframe-height'
 import i18nSync from '~/mixins/i18n-sync'
 
 import { NAV } from '~/constants/store-modules'
+import VHeader from '~/components/VHeader/VHeader.vue'
 
 const embeddedPage = {
   name: 'embedded',
   layout: 'embedded',
+  components: {
+    VHeader,
+  },
   mixins: [iframeHeight, i18nSync],
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
diff --git a/src/layouts/with-nav-search.vue b/src/layouts/with-nav-search.vue
index 78a4005eb2..0db51f749e 100644
--- a/src/layouts/with-nav-search.vue
+++ b/src/layouts/with-nav-search.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="app">
     <MigrationNotice v-show="isReferredFromCc" />
-    <HeaderSection :show-nav-search="true" />
-    <main class="embedded">
+    <VHeader />
+    <main class="embedded pt-20">
       <Nuxt />
     </main>
   </div>
@@ -14,9 +14,15 @@ import iframeHeight from '~/mixins/iframe-height'
 import i18nSync from '~/mixins/i18n-sync'
 
 import { NAV } from '~/constants/store-modules'
+import MigrationNotice from '~/components/MigrationNotice.vue'
+import VHeader from '~/components/VHeader/VHeader.vue'
 
 const embeddedWithNavSearch = {
   name: 'embedded-with-nav-search',
+  components: {
+    MigrationNotice,
+    VHeader,
+  },
   layout: 'embedded-with-nav-search',
   mixins: [iframeHeight, i18nSync],
   head() {
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 2b18d1fd62..925ea71ee1 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -73,8 +73,7 @@ const BrowsePage = {
     VSearchGrid,
   },
   setup() {
-    const defaultWindow = typeof window !== 'undefined' ? window : undefined
-    const isMdScreen = isScreen('md', defaultWindow)
+    const isMdScreen = isScreen('md')
     return {
       isMdScreen,
     }
diff --git a/test/unit/specs/components/Header/SearchBar/search-bar.spec.js b/test/unit/specs/components/Header/SearchBar/search-bar.spec.js
index 265121ff43..489c57209a 100644
--- a/test/unit/specs/components/Header/SearchBar/search-bar.spec.js
+++ b/test/unit/specs/components/Header/SearchBar/search-bar.spec.js
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/vue'
 
-import SearchBar from '~/components/Header/SearchBar/SearchBar.vue'
+import SearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 describe('SearchBar', () => {
   it('renders an input field with placeholder and type="search"', () => {

From d9bd5fa6a069b20a05a71dff0f45e420dd6abeb5 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 14 Dec 2021 09:56:51 +0300
Subject: [PATCH 02/24] Extract search route handling into composable, set Logo
 loading when fetching

---
 src/components/VHeader/VHeader.vue   | 45 +++++++++++++++-------------
 src/composables/use-search-route.js  | 21 +++++++++++++
 src/composables/use-window-scroll.js | 12 +++++++-
 3 files changed, 56 insertions(+), 22 deletions(-)
 create mode 100644 src/composables/use-search-route.js

diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeader.vue
index 88497a9b60..55a83bbd6d 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeader.vue
@@ -4,7 +4,7 @@
     :class="{ 'border-b border-dark-charcoal-20': isHeaderScrolled }"
   >
     <NuxtLink to="/">
-      <VLogoLoader />
+      <VLogoLoader :status="isFetching ? 'loading' : 'idle'" />
     </NuxtLink>
     <VButton
       v-if="!!currentOverlay"
@@ -23,20 +23,17 @@ import {
   computed,
   defineComponent,
   ref,
-  useRoute,
-  useRouter,
+  useContext,
 } from '@nuxtjs/composition-api'
+
+import { isScreen } from '~/composables/use-media-query'
+import { useSearchRoute } from '~/composables/use-search-route'
 import { useWindowScroll } from '~/composables/use-window-scroll'
 
 import closeIcon from '~/assets/icons/close.svg'
 
-import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
-import { isScreen } from '~/composables/use-media-query'
-
-const HEADER_HEIGHT = 80
-
-const searchRoutes = ['search', 'search-image', 'search-audio', 'search-video']
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 
 const VHeader = defineComponent({
   name: 'VHeader',
@@ -45,31 +42,37 @@ const VHeader = defineComponent({
     VLogoLoader,
   },
   setup() {
-    const { y } = useWindowScroll()
-    const isHeaderScrolled = computed(() => y.value > HEADER_HEIGHT)
-
+    const { store } = useContext()
+    const { isSearch } = useSearchRoute()
+    const { isHeaderScrolled } = useWindowScroll()
     const isMdScreen = isScreen('md')
+
+    /** @type {import('@nuxtjs/composition-api').Ref<null|'filters'|'content-switcher'>} */
     const currentOverlay = ref(null)
+    /**
+     * When an overlay is opened on mobile, this sets the current overlay name
+     * @param {'filters'|'content-switcher'} overlay
+     */
     // eslint-disable-next-line no-unused-vars
-    const setCurrentOverlay = () => {
+    const setCurrentOverlay = (overlay) => {
       // Overlay can only be set on mobile screen
-      if (!isMdScreen.value) return
+      if (isMdScreen.value) return
+      currentOverlay.value = overlay
     }
     const closeOverlay = () => {
       currentOverlay.value = null
     }
-    const route = useRoute()
-    const router = useRouter()
-    const isSearch = ref(route.value.name === 'search')
-    router.beforeEach((to, from, next) => {
-      isSearch.value = searchRoutes.includes(to.name)
-      next()
-    })
+
+    /**  @type {import('@nuxtjs/composition-api').ComputedRef<Boolean>} */
+    const isFetching = computed(
+      () => store.getters['media/fetchingState'].isFetching
+    )
 
     return {
       closeIcon,
       closeOverlay,
       currentOverlay,
+      isFetching,
       isHeaderScrolled,
       isSearch,
     }
diff --git a/src/composables/use-search-route.js b/src/composables/use-search-route.js
new file mode 100644
index 0000000000..8ce0b93cd9
--- /dev/null
+++ b/src/composables/use-search-route.js
@@ -0,0 +1,21 @@
+import { ref, useRoute, useRouter } from '@nuxtjs/composition-api'
+
+const searchRoutes = ['search', 'search-image', 'search-audio', 'search-video']
+
+/**
+ * Reactive property that returns true only on the `search` routes.
+ * Homepage, single image result and other content pages return `false`
+ * @returns {{isSearch: import('@nuxtjs/composition-api').Ref<boolean>}}
+ */
+export const useSearchRoute = () => {
+  const route = useRoute()
+  const router = useRouter()
+  const isSearch = ref(searchRoutes.includes(route.value.name))
+  router.beforeEach((to, from, next) => {
+    isSearch.value = searchRoutes.includes(to.name)
+    next()
+  })
+  return {
+    isSearch,
+  }
+}
diff --git a/src/composables/use-window-scroll.js b/src/composables/use-window-scroll.js
index 3713de4bce..0ffbe6b136 100644
--- a/src/composables/use-window-scroll.js
+++ b/src/composables/use-window-scroll.js
@@ -4,6 +4,15 @@ import { defaultWindow } from '~/composables/window'
 import { ref } from '@nuxtjs/composition-api'
 import { useEventListener } from '~/composables/use-event-listener'
 
+const HEADER_HEIGHT = 80
+
+/**
+ * Whether the page has been scrolled down past the header.
+ *
+ * @type {import('@nuxtjs/composition-api').Ref<boolean>}
+ */
+export const isHeaderScrolled = ref(false)
+
 /**
  *
  * @param {object} options
@@ -28,6 +37,7 @@ export function useWindowScroll({
   const scrollHandler = () => {
     x.value = window.pageXOffset
     y.value = window.pageYOffset
+    isHeaderScrolled.value = y.value > HEADER_HEIGHT
   }
 
   const handler = throttleMs
@@ -39,5 +49,5 @@ export function useWindowScroll({
     passive: true,
   })
 
-  return { x, y }
+  return { x, y, isHeaderScrolled }
 }

From 2411a8e622a7c304b8af9facbe29deacef680778 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 15 Dec 2021 09:48:52 -0500
Subject: [PATCH 03/24] Update pnpm lockfile

---
 pnpm-lock.yaml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34406dec2c..8101fb142a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,6 +54,7 @@ specifiers:
   lodash.findindex: ^4.6.0
   lodash.isempty: ^4.4.0
   lodash.sortby: ^4.7.0
+  lodash.throttle: ^4.1.1
   nuxt: ^2.15.4
   postcss: ^8.3.6
   prettier: ^2.2.1
@@ -97,6 +98,7 @@ dependencies:
   lodash.findindex: 4.6.0
   lodash.isempty: 4.4.0
   lodash.sortby: 4.7.0
+  lodash.throttle: 4.1.1
   nuxt: 2.15.8_typescript@4.5.4
   reakit-utils: 0.15.2
   uuid: 8.3.2
@@ -12564,6 +12566,10 @@ packages:
       lodash._reinterpolate: 3.0.0
     dev: false
 
+  /lodash.throttle/4.1.1:
+    resolution: {integrity: sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=}
+    dev: false
+
   /lodash.topath/4.5.2:
     resolution: {integrity: sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=}
     dev: true

From 8a99444ec11c13bf584b53703a4a4ebf537ec7b8 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 17 Dec 2021 01:00:49 +0300
Subject: [PATCH 04/24] Add VFilterButton (#489)

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Co-authored-by: Zack Krida <zackkrida@pm.me>
---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |   2 +-
 src/assets/icons/filter.svg                   |   7 +
 src/components/SearchGridForm.vue             |  23 +--
 src/components/VButton.vue                    |  12 +-
 .../VFilterChecklist.vue}                     |   8 +-
 .../VFilterDisplay.vue}                       |   9 +-
 .../FilterTag.vue => VFilters/VFilterTag.vue} |   2 +-
 .../VLicenseExplanationTooltip.vue}           |   2 +-
 .../VSearchGridFilter.vue}                    |  28 ++--
 src/components/VHeader/README.md              |  14 +-
 src/components/VHeader/VFilterButton.vue      | 129 ++++++++++++++++
 src/components/VHeader/VHeader.vue            |  69 ++++++---
 .../VHeader/meta/VFilterButton.stories.mdx    |  72 +++++++++
 src/components/VLogoLoader/VLogoLoader.vue    |   2 +-
 .../use-filter-sidebar-visibility.js          |  26 ++++
 src/composables/use-media-query.js            |   5 +-
 src/composables/use-window-scroll.js          |   6 +-
 src/layouts/default.vue                       |   2 +-
 src/locales/en.json                           |   4 +
 src/locales/po-files/openverse.pot            |  46 +++---
 src/pages/search.vue                          |  46 +++---
 src/styles/global.scss                        |   5 -
 tailwind.config.js                            |   1 +
 .../SearchBar/search-bar.spec.js              |   0
 .../VHeader/v-filter-button.spec.js           | 140 ++++++++++++++++++
 .../specs/components/filter-checklist.spec.js |   4 +-
 .../specs/components/filter-display.spec.js   |   2 +-
 test/unit/specs/components/filter-tag.spec.js |   2 +-
 .../components/search-grid-filter.spec.js     |  11 +-
 test/unit/specs/pages/browse-page.spec.js     |   2 +-
 31 files changed, 538 insertions(+), 147 deletions(-)
 create mode 100644 src/assets/icons/filter.svg
 rename src/components/{Filters/FilterChecklist.vue => VFilters/VFilterChecklist.vue} (95%)
 rename src/components/{Filters/FilterDisplay.vue => VFilters/VFilterDisplay.vue} (89%)
 rename src/components/{Filters/FilterTag.vue => VFilters/VFilterTag.vue} (97%)
 rename src/components/{Filters/LicenseExplanationTooltip.vue => VFilters/VLicenseExplanationTooltip.vue} (99%)
 rename src/components/{Filters/SearchGridFilter.vue => VFilters/VSearchGridFilter.vue} (82%)
 create mode 100644 src/components/VHeader/VFilterButton.vue
 create mode 100644 src/components/VHeader/meta/VFilterButton.stories.mdx
 create mode 100644 src/composables/use-filter-sidebar-visibility.js
 rename test/unit/specs/components/{Header => VHeader}/SearchBar/search-bar.spec.js (100%)
 create mode 100644 test/unit/specs/components/VHeader/v-filter-button.spec.js

diff --git a/package.json b/package.json
index 031a330132..9481d0740c 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@nuxtjs/style-resources": "^1.0.0",
     "@nuxtjs/tailwindcss": "^4.2.1",
     "@playwright/test": "^1.16.2",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.8.2",
     "@types/jest": "^26.0.22",
@@ -112,7 +112,7 @@
   },
   "engines": {
     "node": ">= 16.0.0",
-    "pnpm": "6.24.0"
+    "pnpm": ">= 6.24.0"
   },
   "browserslist": [
     "> 1%",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c0015beb0..d36926d359 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,7 +17,7 @@ specifiers:
   '@nuxtjs/svg': ^0.1.12
   '@nuxtjs/tailwindcss': ^4.2.1
   '@playwright/test': ^1.16.2
-  '@testing-library/jest-dom': ^5.14.1
+  '@testing-library/jest-dom': ^5.16.1
   '@testing-library/user-event': ^13.2.1
   '@testing-library/vue': ^5.8.2
   '@types/jest': ^26.0.22
diff --git a/src/assets/icons/filter.svg b/src/assets/icons/filter.svg
new file mode 100644
index 0000000000..a5f9a30db9
--- /dev/null
+++ b/src/assets/icons/filter.svg
@@ -0,0 +1,7 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon" fill="currentColor">
+    <path d="m5 7h14v1.5h-14z"/>
+    <path d="m7 11.25h10v1.5h-10z"/>
+    <path d="m9 15.5h6v1.5h-6z"/>
+  </g>
+</svg>
diff --git a/src/components/SearchGridForm.vue b/src/components/SearchGridForm.vue
index 552c2f9afb..5bc4c508d2 100644
--- a/src/components/SearchGridForm.vue
+++ b/src/components/SearchGridForm.vue
@@ -6,18 +6,7 @@
     class="search-form p-4 z-30"
     @submit.prevent="onSubmit"
   >
-    <button
-      v-if="!isFilterVisible"
-      class="button filter-toggle"
-      type="button"
-      @click="onToggleSearchGridFilter"
-    >
-      {{ $t('filters.title') }}
-    </button>
-    <div
-      class="search-field field has-addons control search-control"
-      :class="{ 'ms-2': !isFilterVisible }"
-    >
+    <div class="search-field field has-addons control search-control">
       <label for="searchInput" class="search-field__label control label">
         <input
           id="searchInput"
@@ -68,7 +57,7 @@ export default {
   name: 'SearchGridForm',
   data: () => ({ searchTermsModel: null }),
   computed: {
-    ...mapState(SEARCH, ['isFilterVisible', 'query']),
+    ...mapState(SEARCH, ['query']),
     searchTerms() {
       return this.query.q
     },
@@ -108,11 +97,6 @@ export default {
         })
       }
     },
-    onToggleSearchGridFilter() {
-      this.setFilterIsVisible({
-        isFilterVisible: !this.isFilterVisible,
-      })
-    },
     setFormInput() {
       this.searchTermsModel = this.searchTerms
     },
@@ -121,9 +105,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-toggle {
-  @apply h-10 lg:h-14 text-2xl hover:border-tx p-2 border-light-gray normal-case;
-}
 .search-icon {
   @apply start-0 text-light-gray w-10 h-10 absolute items-center inline-flex justify-center pointer-events-none;
 }
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index 0110cbbf93..7707e57b0f 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -2,6 +2,7 @@
   <Component
     :is="as"
     :type="typeRef"
+    class="transition-colors"
     :class="[
       $style.button,
       $style[variant],
@@ -72,6 +73,7 @@ const VButton = defineComponent({
           'secondary',
           'tertiary',
           'action-menu',
+          'action-menu-secondary',
           'action-menu-muted',
           'grouped',
         ].includes(v),
@@ -249,9 +251,17 @@ a.button {
 }
 
 .action-menu {
+  @apply bg-white text-black border border-dark-charcoal-20 hover:border-dark-charcoal-20 focus-visible:ring-pink;
+}
+
+.action-menu-secondary {
   @apply bg-white text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring-pink;
 }
 
+.action-menu-secondary-pressed {
+  @apply border-tx bg-dark-charcoal text-white;
+}
+
 .action-menu-pressed {
   @apply border-tx bg-dark-charcoal text-white;
 }
@@ -261,7 +271,7 @@ a.button {
 }
 
 .action-menu-muted-pressed {
-  @apply border-tx bg-dark-charcoal text-white;
+  @apply border-tx bg-dark-charcoal text-white focus-visible:ring-pink;
 }
 
 .grouped {
diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
similarity index 95%
rename from src/components/Filters/FilterChecklist.vue
rename to src/components/VFilters/VFilterChecklist.vue
index bca0607833..d7eafaff08 100644
--- a/src/components/Filters/FilterChecklist.vue
+++ b/src/components/VFilters/VFilterChecklist.vue
@@ -47,7 +47,7 @@
         </svg>
       </button>
     </div>
-    <LicenseExplanationTooltip
+    <VLicenseExplanationTooltip
       v-if="licenseExplanationVisible"
       :license="licenseExplanationCode"
       :icon-dom-node="$refs[`${licenseExplanationCode}licenseIcon`][0]"
@@ -56,14 +56,16 @@
 </template>
 
 <script>
-import LicenseExplanationTooltip from '~/components/Filters/LicenseExplanationTooltip'
+import VLicenseExplanationTooltip from '~/components/VFilters/VLicenseExplanationTooltip'
+import VCheckbox from '~/components/VCheckbox.vue'
 import VLicense from '~/components/License/VLicense.vue'
 
 export default {
   name: 'FilterCheckList',
   components: {
+    VCheckbox,
     VLicense,
-    LicenseExplanationTooltip,
+    VLicenseExplanationTooltip,
   },
   props: {
     options: { type: Array, required: false },
diff --git a/src/components/Filters/FilterDisplay.vue b/src/components/VFilters/VFilterDisplay.vue
similarity index 89%
rename from src/components/Filters/FilterDisplay.vue
rename to src/components/VFilters/VFilterDisplay.vue
index ab2eacaa8d..f6381c31d3 100644
--- a/src/components/Filters/FilterDisplay.vue
+++ b/src/components/VFilters/VFilterDisplay.vue
@@ -3,7 +3,7 @@
     <span v-if="isAnyFilterApplied" class="me-2 font-semibold mb-2">
       {{ $t('filters.filter-by') }}
     </span>
-    <FilterTag
+    <VFilterTag
       v-for="filter in appliedFilterTags"
       :key="filter.code"
       class="mx-1 mb-2 ms-2"
@@ -16,14 +16,15 @@
 </template>
 
 <script>
-import { TOGGLE_FILTER } from '~/constants/action-types'
-import FilterTag from '~/components/Filters/FilterTag'
 import { mapGetters } from 'vuex'
+import { TOGGLE_FILTER } from '~/constants/action-types'
 import { SEARCH } from '~/constants/store-modules'
 
+import VFilterTag from '~/components/VFilters/VFilterTag'
+
 export default {
   name: 'FilterDisplay',
-  components: { FilterTag },
+  components: { VFilterTag },
   computed: {
     ...mapGetters(SEARCH, ['appliedFilterTags', 'isAnyFilterApplied']),
   },
diff --git a/src/components/Filters/FilterTag.vue b/src/components/VFilters/VFilterTag.vue
similarity index 97%
rename from src/components/Filters/FilterTag.vue
rename to src/components/VFilters/VFilterTag.vue
index 817074d14c..4b0ca1779a 100644
--- a/src/components/Filters/FilterTag.vue
+++ b/src/components/VFilters/VFilterTag.vue
@@ -10,7 +10,7 @@
 </template>
 <script>
 export default {
-  name: 'FilterTag',
+  name: 'VFilterTag',
   props: {
     code: String,
     filterType: String,
diff --git a/src/components/Filters/LicenseExplanationTooltip.vue b/src/components/VFilters/VLicenseExplanationTooltip.vue
similarity index 99%
rename from src/components/Filters/LicenseExplanationTooltip.vue
rename to src/components/VFilters/VLicenseExplanationTooltip.vue
index 833e15b21f..e1f0b70868 100644
--- a/src/components/Filters/LicenseExplanationTooltip.vue
+++ b/src/components/VFilters/VLicenseExplanationTooltip.vue
@@ -40,7 +40,7 @@
 import { isLicense } from '~/utils/license'
 
 export default {
-  name: 'LicenseExplanationTooltip',
+  name: 'VLicenseExplanationTooltip',
 
   props: {
     license: {
diff --git a/src/components/Filters/SearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
similarity index 82%
rename from src/components/Filters/SearchGridFilter.vue
rename to src/components/VFilters/VSearchGridFilter.vue
index 4a63e9f0bc..68ddd33ec2 100644
--- a/src/components/Filters/SearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="p-4 search-filters h-auto max-h-full overflow-y-scroll"
-    :class="[isFilterVisible ? 'block' : 'hidden']"
+    class="p-4 search-filters h-auto max-h-full overflow-y-scroll block"
     data-testid="filters-list"
     @onUpdateFilter="onUpdateFilter"
     @onToggleSearchGridFilter="onToggleSearchGridFilter"
@@ -14,19 +13,20 @@
       <button
         id="hide-filters-button"
         type="button"
+        :aria-label="$t('filter-list.hide')"
         class="text-sm font-medium my-auto"
         @click="onToggleSearchGridFilter"
       >
-        <span class="text-trans-blue hidden lg:block text-sm lowercase">{{
+        <span class="text-trans-blue hidden md:block text-sm lowercase">{{
           $t('filter-list.hide')
         }}</span>
-        <span class="me-4 text-lg lg:hidden">
+        <span class="me-4 text-lg md:hidden">
           <CloseIcon class="w-4 h-4" />
         </span>
       </button>
     </div>
     <form class="filters-form">
-      <FilterChecklist
+      <VFilterChecklist
         v-for="filterType in filterTypes"
         :key="filterType"
         :options="filters[filterType]"
@@ -56,22 +56,21 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
-import { SET_FILTER_IS_VISIBLE } from '~/constants/mutation-types'
+import { mapActions, mapGetters } from 'vuex'
 import { CLEAR_FILTERS, TOGGLE_FILTER } from '~/constants/action-types'
 import { SEARCH } from '~/constants/store-modules'
 import { kebabize } from '~/utils/format-strings'
-import FilterChecklist from '~/components/Filters/FilterChecklist'
+
+import VFilterChecklist from '~/components/VFilters/VFilterChecklist'
 import CloseIcon from '~/assets/icons/close.svg?inline'
 
 export default {
-  name: 'SearchGridFilter',
+  name: 'VSearchGridFilter',
   components: {
     CloseIcon,
-    FilterChecklist,
+    VFilterChecklist,
   },
   computed: {
-    ...mapState(SEARCH, ['isFilterVisible']),
     ...mapGetters(SEARCH, ['mediaFiltersForDisplay', 'isAnyFilterApplied']),
     filters() {
       return this.mediaFiltersForDisplay || {}
@@ -85,9 +84,6 @@ export default {
       toggleFilter: TOGGLE_FILTER,
       clearFilters: CLEAR_FILTERS,
     }),
-    ...mapMutations(SEARCH, {
-      setFilterVisible: SET_FILTER_IS_VISIBLE,
-    }),
     filterTypeTitle(filterType) {
       if (filterType === 'searchBy') {
         return ''
@@ -101,9 +97,7 @@ export default {
       this.clearFilters()
     },
     onToggleSearchGridFilter() {
-      this.setFilterVisible({
-        isFilterVisible: !this.isFilterVisible,
-      })
+      this.$emit('close')
     },
   },
 }
diff --git a/src/components/VHeader/README.md b/src/components/VHeader/README.md
index cf9f9f98f9..07a73b0308 100644
--- a/src/components/VHeader/README.md
+++ b/src/components/VHeader/README.md
@@ -1,11 +1,13 @@
-#VHeader
+# VHeader
 
-The sticky header at the top of the page. On the homepage and the content pages, it shows the
-Openverse logo and page links ??and Search bar??, and on the Search page it additionally has
-a Content Switcher, "burger menu" for page links, and a filters button.
-On mobile, the header only shows the logo and close button when the overlay (pages, content
-switcher, or filters) is open.
+The sticky header at the top of the page. On the homepage and the content pages, it shows one version, and on the Search page it additionally has a Content Switcher, collapsed menu for page links, and a filters button. On mobile, the header only shows the logo and close button when the overlay/flyout menu (containing pages, the content switcher, and filters) is open.
 
 ## Components
+
 ### VLogoLoader
+
+- TBD
+
 ### VFilterButton
+
+This button toggles the filter drawer on desktop. On mobile, it opens the mobile drawer menu, set to the filters pane.
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
new file mode 100644
index 0000000000..16cafba99c
--- /dev/null
+++ b/src/components/VHeader/VFilterButton.vue
@@ -0,0 +1,129 @@
+<template>
+  <VButton
+    :variant="variant"
+    class="self-center gap-2 align-center font-semibold"
+    :pressed="pressed"
+    aria-controls="filter-sidebar"
+    :aria-label="label"
+    @click="toggleFilters"
+  >
+    <VIcon v-if="showIcon" :icon-path="filterIcon" />
+    <span v-if="showLabel" data-testid="filterbutton-label">{{ label }}</span>
+  </VButton>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  toRefs,
+  useContext,
+} from '@nuxtjs/composition-api'
+import { isMinScreen } from '~/composables/use-media-query'
+import filterIcon from '~/assets/icons/filter.svg'
+import VButton from '~/components/VButton.vue'
+import VIcon from '~/components/VIcon/VIcon'
+
+const VFilterButton = defineComponent({
+  name: 'VFilterButton',
+  components: {
+    VIcon,
+    VButton,
+  },
+  props: {
+    /**
+     * @default false
+     */
+    isHeaderScrolled: {
+      type: Boolean,
+      default: false,
+    },
+    pressed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const { i18n, store } = useContext()
+    const { isHeaderScrolled, pressed } = toRefs(props)
+    const isMinScreenMD = isMinScreen('md')
+
+    const filterCount = computed(
+      () => store.getters['search/appliedFilterTags'].length
+    )
+    const filtersAreApplied = computed(() => filterCount.value > 0)
+
+    /**
+     * Determine the visual style of the button
+     * based on the viewport, the application of filters, and scrolling.
+     */
+    const variant = computed(() => {
+      // Show the borderd state by default, unless below md
+      let value = isMinScreenMD.value ? 'action-menu' : 'action-menu-secondary'
+
+      if (isHeaderScrolled.value) {
+        value = 'action-menu-secondary'
+      }
+      if (filtersAreApplied.value) {
+        value = 'action-menu-muted'
+      }
+      // Override the default VButton pressed style
+      if (pressed.value) {
+        value = 'action-menu-muted-pressed'
+      }
+      return value
+    })
+
+    const label = computed(() => {
+      // Below medium viewport logic
+      if (!isMinScreenMD.value) {
+        return isHeaderScrolled.value
+          ? filterCount.value
+          : i18n.tc('header.filter-button.with-count', filterCount.value)
+      }
+      // Above the medium viewport, show the count when filters are applied.
+      return filtersAreApplied.value
+        ? i18n.tc('header.filter-button.with-count', filterCount.value)
+        : i18n.t('header.filter-button.simple')
+    })
+
+    /**
+     * Whether or not to show the filter icon,
+     * based on viewport and the application of filters.
+     */
+    const showIcon = computed(() => {
+      // When filters are applied, hide the icon
+      if (filtersAreApplied.value) {
+        return false
+      }
+      // Below the medium viewport, only show when there's no filters applied.
+      if (!isMinScreenMD.value) {
+        return !isHeaderScrolled.value || !filtersAreApplied.value
+      }
+      return true
+    })
+
+    // Hide the label entirely when no filters are applied on mobile.
+    const showLabel = computed(() => {
+      if (!isMinScreenMD.value && !filtersAreApplied.value) {
+        return false
+      }
+      return true
+    })
+
+    return {
+      filterCount,
+      filterIcon,
+      label,
+      showIcon,
+      showLabel,
+      toggleFilters: () => {
+        emit('toggle')
+      },
+      variant,
+    }
+  },
+})
+
+export default VFilterButton
+</script>
diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeader.vue
index 55a83bbd6d..162971c75b 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeader.vue
@@ -1,20 +1,21 @@
 <template>
   <div
-    class="fixed flex px-8 align-center z-40 w-full bg-white"
-    :class="{ 'border-b border-dark-charcoal-20': isHeaderScrolled }"
+    class="sticky top-0 flex py-4 px-6 md:px-7 align-center justify-between z-40 w-full bg-white"
+    :class="{
+      'border-b border-dark-charcoal-20':
+        isHeaderScrolled || isFilterSidebarVisible,
+    }"
   >
     <NuxtLink to="/">
       <VLogoLoader :status="isFetching ? 'loading' : 'idle'" />
     </NuxtLink>
-    <VButton
-      v-if="!!currentOverlay"
-      variant="action-menu"
-      class="self-center"
-      @click="closeOverlay"
-    >
-      <span class="text-sr">{{ $t('modal.close') }}</span>
-      <VIcon :icon-path="closeIcon" />
-    </VButton>
+
+    <VFilterButton
+      v-if="isSearch"
+      :is-header-scrolled="isHeaderScrolled"
+      :pressed="isFilterSidebarVisible"
+      @toggle="toggleFilterVisibility"
+    />
   </div>
 </template>
 
@@ -24,28 +25,51 @@ import {
   defineComponent,
   ref,
   useContext,
+  watch,
 } from '@nuxtjs/composition-api'
 
-import { isScreen } from '~/composables/use-media-query'
+import { isMinScreen } from '~/composables/use-media-query'
 import { useSearchRoute } from '~/composables/use-search-route'
 import { useWindowScroll } from '~/composables/use-window-scroll'
 
 import closeIcon from '~/assets/icons/close.svg'
 
-import VIcon from '~/components/VIcon/VIcon.vue'
+import VFilterButton from '~/components/VHeader/VFilterButton.vue'
+
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 const VHeader = defineComponent({
   name: 'VHeader',
   components: {
-    VIcon,
+    VFilterButton,
     VLogoLoader,
   },
   setup() {
     const { store } = useContext()
     const { isSearch } = useSearchRoute()
     const { isHeaderScrolled } = useWindowScroll()
-    const isMdScreen = isScreen('md')
+    const isMdScreen = isMinScreen('md')
+    const { isFilterSidebarVisible, setFilterSidebarVisibility } =
+      useFilterSidebarVisibility({ mediaQuery: isMdScreen })
+
+    /**
+     * Set the active mobile menu view to the 'filters'
+     * if the filter sidebar has been toggled open.
+     */
+    watch(
+      () => isFilterSidebarVisible.value,
+      (isVisible) => {
+        if (isVisible) {
+          setCurrentOverlay('filters')
+        } else {
+          closeOverlay()
+        }
+      }
+    )
+    const toggleFilterVisibility = () => {
+      setFilterSidebarVisibility(!isFilterSidebarVisible.value)
+    }
 
     /** @type {import('@nuxtjs/composition-api').Ref<null|'filters'|'content-switcher'>} */
     const currentOverlay = ref(null)
@@ -53,7 +77,6 @@ const VHeader = defineComponent({
      * When an overlay is opened on mobile, this sets the current overlay name
      * @param {'filters'|'content-switcher'} overlay
      */
-    // eslint-disable-next-line no-unused-vars
     const setCurrentOverlay = (overlay) => {
       // Overlay can only be set on mobile screen
       if (isMdScreen.value) return
@@ -63,18 +86,22 @@ const VHeader = defineComponent({
       currentOverlay.value = null
     }
 
-    /**  @type {import('@nuxtjs/composition-api').ComputedRef<Boolean>} */
-    const isFetching = computed(
-      () => store.getters['media/fetchingState'].isFetching
-    )
+    /**  @type {import('@nuxtjs/composition-api').ComputedRef<boolean>} */
+    const isFetching = computed(() => {
+      return store.getters['media/fetchState'].isFetching
+    })
 
     return {
       closeIcon,
-      closeOverlay,
       currentOverlay,
       isFetching,
       isHeaderScrolled,
       isSearch,
+      isFilterSidebarVisible,
+
+      toggleFilterVisibility,
+      setCurrentOverlay,
+      closeOverlay,
     }
   },
 })
diff --git a/src/components/VHeader/meta/VFilterButton.stories.mdx b/src/components/VHeader/meta/VFilterButton.stories.mdx
new file mode 100644
index 0000000000..30d23ab0b2
--- /dev/null
+++ b/src/components/VHeader/meta/VFilterButton.stories.mdx
@@ -0,0 +1,72 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VFilterButton from '~/components/VHeader/VFilterButton.vue'
+import Vuex from 'vuex'
+
+<Meta
+  title="Components/VHeader/VFilterButton"
+  component={VFilterButton}
+  argTypes={{
+    input: {
+      action: 'input',
+    },
+    submit: {
+      action: 'submit',
+    },
+  }}
+/>
+
+export const Template = (args, { argTypes }) => ({
+  template: `
+    <VFilterButton v-bind="$props" v-on="$props" />`,
+  components: { VFilterButton },
+  props: Object.keys(argTypes),
+  store: new Vuex.Store({
+    getters: {
+      'search/appliedFilterTags': () => [{ code: 'by', filterType: 'license' }],
+    },
+  }),
+})
+
+# Filter button
+
+<Description of={VFilterButton} />
+
+<ArgsTable of={VFilterButton} />
+
+The button opens and closes the filters sidebar. It also shows how many filters are applied
+in the mobile view.
+the field receives an input. It also emits the `search` event when the search
+button is clicked.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      value: 'Search query',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Mobile Scrolled"
+    args={{
+      isScrolled: true,
+    }}
+    parameters={{
+      viewport: {
+        defaultViewport: 'iphonex',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 7f1fd9aa37..eb22c261e8 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -8,7 +8,7 @@
     aria-hidden="true"
     :data-prefers-reduced-motion="prefersReducedMotion"
     data-testid="logo-loader"
-    class="hover:bg-yellow w-16 h-16 p-4 rounded inline-flex justify-center items-center"
+    class="hover:bg-yellow w-12 h-12 p-3 rounded inline-flex justify-center items-center"
   >
     <path
       data-logo-part-1
diff --git a/src/composables/use-filter-sidebar-visibility.js b/src/composables/use-filter-sidebar-visibility.js
new file mode 100644
index 0000000000..1f4f4a7c68
--- /dev/null
+++ b/src/composables/use-filter-sidebar-visibility.js
@@ -0,0 +1,26 @@
+import { onMounted, readonly, ref } from '@nuxtjs/composition-api'
+import local from '~/utils/local'
+
+const isFilterSidebarVisible = ref(false)
+
+export function useFilterSidebarVisibility({ mediaQuery }) {
+  /**
+   * Open or close the filter sidebar
+   * @param {boolean} val
+   */
+  const setFilterSidebarVisibility = (val) => {
+    isFilterSidebarVisible.value = val
+    local.set(process.env.filterStorageKey, val)
+  }
+
+  onMounted(() => {
+    const localFilterState = () =>
+      local.get(process.env.filterStorageKey) === 'true'
+    setFilterSidebarVisibility(mediaQuery && localFilterState())
+  })
+
+  return {
+    isFilterSidebarVisible: readonly(isFilterSidebarVisible),
+    setFilterSidebarVisibility,
+  }
+}
diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index 3dd7b7abb9..dd1c415c47 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -41,9 +41,10 @@ export function useMediaQuery(query, options = {}) {
 }
 
 /**
- * Check whether the screen meets the current breakpoint size.
+ * Check whether the curent screen meets
+ * or exceeds the provided breakpoint size.
  */
-export const isScreen = (breakpointName, options = {}) => {
+export const isMinScreen = (breakpointName, options = {}) => {
   return useMediaQuery(
     `(min-width: ${SCREEN_SIZES.get(breakpointName)}px)`,
     options
diff --git a/src/composables/use-window-scroll.js b/src/composables/use-window-scroll.js
index 0ffbe6b136..b322aecf2e 100644
--- a/src/composables/use-window-scroll.js
+++ b/src/composables/use-window-scroll.js
@@ -4,10 +4,8 @@ import { defaultWindow } from '~/composables/window'
 import { ref } from '@nuxtjs/composition-api'
 import { useEventListener } from '~/composables/use-event-listener'
 
-const HEADER_HEIGHT = 80
-
 /**
- * Whether the page has been scrolled down past the header.
+ * Whether the page has been scrolled down at all
  *
  * @type {import('@nuxtjs/composition-api').Ref<boolean>}
  */
@@ -37,7 +35,7 @@ export function useWindowScroll({
   const scrollHandler = () => {
     x.value = window.pageXOffset
     y.value = window.pageYOffset
-    isHeaderScrolled.value = y.value > HEADER_HEIGHT
+    isHeaderScrolled.value = y.value > 0
   }
 
   const handler = throttleMs
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 2a51eb1b32..055690987d 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,7 +2,7 @@
   <div class="app">
     <MigrationNotice v-show="isReferredFromCc" />
     <VHeader />
-    <main class="embedded pt-20">
+    <main class="embedded">
       <Nuxt />
     </main>
   </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index b617cd1cae..a896373b0f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -52,6 +52,10 @@
       "text": "{example_notification_text}",
       "dismiss": "Dismiss",
       "okay": "OK"
+    },
+    "filter-button": {
+      "simple": "Filters",
+      "with-count": "{count} Filter | {count} Filters"
     }
   },
   "footer": {
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 9e0d56ef21..9c24374524 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2021-12-02T15:06:49+00:00\n"
+"POT-Creation-Date: 2021-12-07T17:25:14+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -134,7 +134,7 @@ msgctxt "audio-categories.podcast"
 msgid "Podcast"
 msgstr ""
 
-#: src/components/Header/SearchBar/SearchButton.vue:5
+#: src/components/VHeader/VSearchBar/VSearchButton.vue:5
 msgctxt "search.search"
 msgid "Search"
 msgstr ""
@@ -739,7 +739,7 @@ msgctxt "browse-page.aria.scroll"
 msgid "scroll to top"
 msgstr ""
 
-#: src/components/SearchGridForm.vue:25
+#: src/components/SearchGridForm.vue:14
 msgctxt "browse-page.aria.search"
 msgid "search"
 msgstr ""
@@ -748,7 +748,7 @@ msgctxt "browse-page.aria.remove-filter"
 msgid "remove filter"
 msgstr ""
 
-#: src/components/Filters/FilterChecklist.vue:26
+#: src/components/VFilters/VFilterChecklist.vue:26
 msgctxt "browse-page.aria.license-explanation"
 msgid "license explanation"
 msgstr ""
@@ -782,7 +782,7 @@ msgctxt "browse-page.safer-browsing.label"
 msgid "Show Mature Content"
 msgstr ""
 
-#: src/components/Filters/LicenseExplanationTooltip.vue:8
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:8
 msgctxt "browse-page.license-description.title"
 msgid "License CC"
 msgstr ""
@@ -812,7 +812,7 @@ msgid "This work is marked as being in the public domain."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/SearchGridForm.vue:79
+#: src/components/SearchGridForm.vue:68
 msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
@@ -839,7 +839,7 @@ msgctxt "browse-page.search-form.collection-placeholder"
 msgid "Search this collection"
 msgstr ""
 
-#: src/components/SearchGridForm.vue:52
+#: src/components/SearchGridForm.vue:41
 msgctxt "browse-page.search-form.button"
 msgid "Search"
 msgstr ""
@@ -864,22 +864,22 @@ msgctxt "browse-page.search-rating.feedback-thanks"
 msgid "Thank you for the feedback!"
 msgstr ""
 
-#: src/components/Filters/SearchGridFilter.vue:12
+#: src/components/VFilters/VSearchGridFilter.vue:11
 msgctxt "filter-list.filter-by"
 msgid "Filter results by"
 msgstr ""
 
-#: src/components/Filters/SearchGridFilter.vue:21
+#: src/components/VFilters/VSearchGridFilter.vue:20
 msgctxt "filter-list.hide"
 msgid "Hide filters"
 msgstr ""
 
-#: src/components/Filters/SearchGridFilter.vue:45
+#: src/components/VFilters/VSearchGridFilter.vue:44
 msgctxt "filter-list.clear"
 msgid "Clear filters"
 msgstr ""
 
-#: src/components/Filters/SearchGridFilter.vue:52
+#: src/components/VFilters/VSearchGridFilter.vue:51
 msgctxt "filter-list.show"
 msgid "Show results"
 msgstr ""
@@ -889,40 +889,39 @@ msgctxt "filter-list.category-aria"
 msgid "filters list for ###categoryName### category"
 msgstr ""
 
-#: src/components/SearchGridForm.vue:15
 msgctxt "filters.title"
 msgid "Filters"
 msgstr ""
 
-#: src/components/Filters/FilterDisplay.vue:4
+#: src/components/VFilters/VFilterDisplay.vue:4
 msgctxt "filters.filter-by"
 msgid "Filter By"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/Filters/FilterTag.vue:4
+#: src/components/VFilters/VFilterTag.vue:4
 msgctxt "filters.aria.remove-filter"
 msgid "Remove ###label### filter"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/Filters/LicenseExplanationTooltip.vue:12
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:12
 msgctxt "filters.license-explanation.tool"
 msgid "Read more about the tool ###link###"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/Filters/LicenseExplanationTooltip.vue:24
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:24
 msgctxt "filters.license-explanation.license"
 msgid "Read more about the license ###link###"
 msgstr ""
 
-#: src/components/Filters/LicenseExplanationTooltip.vue:20
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:20
 msgctxt "filters.license-explanation.link"
 msgid "here"
 msgstr ""
 
-#: src/components/Filters/FilterChecklist.vue:83
+#: src/components/VFilters/VFilterChecklist.vue:85
 msgctxt "filters.searchBy.title"
 msgid "Search By"
 msgstr ""
@@ -2022,6 +2021,17 @@ msgctxt "header.api-nav-item"
 msgid "API"
 msgstr ""
 
+#: src/components/VHeader/VFilterButton.vue:104
+msgctxt "header.filter-button.simple"
+msgid "Filters"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VHeader/VFilterButton.vue:91
+msgctxt "header.filter-button.with-count"
+msgid "###count### Filter | ###count### Filters"
+msgstr ""
+
 msgctxt "header.notification.text"
 msgid "{example_notification_text}"
 msgstr ""
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 925ea71ee1..27a3b18900 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -3,15 +3,16 @@
     <div class="search columns">
       <Component
         :is="searchFilter.as"
-        v-if="isFilterVisible"
+        v-if="isFilterSidebarVisible"
+        id="filter-sidebar"
         :class="searchFilter.classes"
         @close="onToggleSearchGridFilter"
-        ><SearchGridFilter
+        ><VSearchGridFilter @close="onToggleSearchGridFilter"
       /></Component>
       <div class="column search-grid-ctr">
         <SearchGridForm @onSearchFormSubmit="onSearchFormSubmit" />
         <SearchTypeTabs class="mb-4" />
-        <FilterDisplay v-show="shouldShowFilterTags" />
+        <VFilterDisplay v-show="shouldShowFilterTags" />
         <VSearchGrid
           :id="`tab-${searchType}`"
           role="tabpanel"
@@ -28,7 +29,7 @@
               :key="$route.path"
               :media-results="results"
               :fetch-state="fetchState"
-              :is-filter-visible="isFilterVisible"
+              :is-filter-visible="isFilterSidebarVisible"
               :search-term="query.q"
               :supported="supported"
               data-testid="search-results"
@@ -48,34 +49,41 @@ import {
   SET_SEARCH_STATE_FROM_URL,
   UPDATE_SEARCH_TYPE,
 } from '~/constants/action-types'
-import { SET_FILTER_IS_VISIBLE } from '~/constants/mutation-types'
 import { queryStringToSearchType } from '~/utils/search-query-transform'
-import local from '~/utils/local'
 import { ALL_MEDIA, AUDIO, IMAGE } from '~/constants/media'
-import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 import { MEDIA, SEARCH } from '~/constants/store-modules'
 import debounce from 'lodash.debounce'
 
-import { isScreen } from '~/composables/use-media-query.js'
+import { isMinScreen } from '~/composables/use-media-query.js'
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 import AppModal from '~/components/AppModal.vue'
 import VScrollButton from '~/components/VScrollButton.vue'
 import VSearchGrid from '~/components/VSearchGrid.vue'
-import SearchGridFilter from '~/components/Filters/SearchGridFilter.vue'
+import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
+import VFilterDisplay from '~/components/VFilters/VFilterDisplay.vue'
 
 const BrowsePage = {
   name: 'browse-page',
   layout: 'default',
   components: {
     AppModal,
-    SearchGridFilter,
+    VFilterDisplay,
+    VSearchGridFilter,
     VScrollButton,
     VSearchGrid,
   },
   setup() {
-    const isMdScreen = isScreen('md')
+    const isMdScreen = isMinScreen('md')
+    const { isFilterSidebarVisible, setFilterSidebarVisibility } =
+      useFilterSidebarVisibility({ mediaQuery: isMdScreen })
+
     return {
       isMdScreen,
+      isFilterSidebarVisible,
+
+      setFilterSidebarVisibility,
     }
   },
   scrollToTop: false,
@@ -101,20 +109,13 @@ const BrowsePage = {
     }
   },
   mounted() {
-    const localFilterState = () =>
-      local.get(process.env.filterStorageKey)
-        ? local.get(process.env.filterStorageKey) === 'true'
-        : true
-    this.setFilterVisibility({
-      isFilterVisible: this.isMdScreen && localFilterState(),
-    })
     window.addEventListener('scroll', this.debounceScrollHandling)
   },
   beforeDestroy() {
     window.removeEventListener('scroll', this.debounceScrollHandling)
   },
   computed: {
-    ...mapState(SEARCH, ['query', 'isFilterVisible', 'searchType']),
+    ...mapState(SEARCH, ['query', 'searchType']),
     ...mapGetters(SEARCH, ['searchQueryParams', 'isAnyFilterApplied']),
     ...mapGetters(MEDIA, ['results', 'fetchState']),
     mediaType() {
@@ -158,9 +159,6 @@ const BrowsePage = {
       updateSearchType: UPDATE_SEARCH_TYPE,
       updateQuery: UPDATE_QUERY,
     }),
-    ...mapMutations(SEARCH, {
-      setFilterVisibility: SET_FILTER_IS_VISIBLE,
-    }),
     async getMediaItems(params) {
       if (this.query.q.trim() !== '') {
         await this.fetchMedia({ ...params })
@@ -170,9 +168,7 @@ const BrowsePage = {
       this.updateQuery({ q })
     },
     onToggleSearchGridFilter() {
-      this.setFilterVisibility({
-        isFilterVisible: !this.isFilterVisible,
-      })
+      this.setFilterSidebarVisibility(!this.isFilterSidebarVisible)
     },
     checkScrollLength() {
       this.showScrollButton = window.scrollY > 70
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3a587b5edf..2d43c889f0 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -65,8 +65,3 @@
 .photo_related-images .search-grid-cells {
   margin: 10px -10px !important;
 }
-
-// border above content area
-main {
-  border-top: 1px solid $color-transition-gray;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index b33b4c8ef6..9c323dad09 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -82,6 +82,7 @@ module.exports = {
       4: '1.00rem',
       5: '1.25rem',
       6: '1.50rem',
+      7: '1.75rem',
       8: '2.00rem',
       10: '2.50rem',
       12: '3.00rem',
diff --git a/test/unit/specs/components/Header/SearchBar/search-bar.spec.js b/test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js
similarity index 100%
rename from test/unit/specs/components/Header/SearchBar/search-bar.spec.js
rename to test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js
diff --git a/test/unit/specs/components/VHeader/v-filter-button.spec.js b/test/unit/specs/components/VHeader/v-filter-button.spec.js
new file mode 100644
index 0000000000..dd80894ff9
--- /dev/null
+++ b/test/unit/specs/components/VHeader/v-filter-button.spec.js
@@ -0,0 +1,140 @@
+import { render, screen } from '@testing-library/vue'
+
+import VFilterButton from '~/components/VHeader/VFilterButton.vue'
+import { createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import VueI18n from 'vue-i18n'
+import messages from '../../../../../src/locales/en.json'
+import { isMinScreen } from '~/composables/use-media-query'
+
+/**
+ * For some reason I need to mock the implementation
+ * of this mock in each test, or it doesn't work.
+ *
+ * In each implementation I'm faking returning a ref
+ * with `mockImplementation(() => ({value: true}))`
+ * that may be related.
+ */
+jest.mock('~/composables/use-media-query', () => ({
+  isMinScreen: jest.fn(),
+}))
+
+describe('VFilterButton', () => {
+  let options = {}
+  let storeMock
+  let localVue
+  let appliedFilters = []
+  let props = {}
+
+  const i18n = new VueI18n({
+    locale: 'en',
+    localeProperties: {
+      dir: 'ltr',
+    },
+    fallbackLocale: 'en',
+    messages: { en: messages },
+  })
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(Vuex)
+    localVue.use(VueI18n)
+
+    storeMock = new Vuex.Store({
+      modules: {
+        search: {
+          namespaced: true,
+          getters: {
+            isAnyFilterApplied: () => appliedFilters.length > 0,
+            appliedFilterTags: () => appliedFilters,
+          },
+        },
+      },
+    })
+    options = {
+      localVue,
+      propsData: props,
+      mocks: {
+        $nuxt: {
+          context: {
+            store: storeMock,
+            i18n,
+          },
+        },
+      },
+    }
+  })
+
+  describe('Above the medium breakpoint', () => {
+    it('always shows the label and icon', () => {
+      isMinScreen.mockImplementation(() => ({ value: true }))
+      const { container } = render(VFilterButton, options)
+
+      const button = screen.getByText('Filters')
+      const icon = container.querySelector('svg')
+
+      expect(button).toBeVisible()
+      expect(icon).toBeVisible()
+    })
+    it('shows the count and text when filters are applied', () => {
+      isMinScreen.mockImplementation(() => ({ value: true }))
+      // +2 to guarantee it's plural
+      const filterCount = Math.floor(Math.random() * 10) + 2
+      appliedFilters = Array(filterCount).fill('')
+      render(VFilterButton, options)
+
+      const button = screen.getByText(`${filterCount} Filters`)
+
+      expect(button).toBeVisible()
+    })
+    it('does not show the icon when filters are applied', () => {
+      isMinScreen.mockImplementation(() => ({ value: true }))
+      appliedFilters = ['mockfilter1', 'mockfilter2']
+
+      const { container } = render(VFilterButton, options)
+      const icon = container.querySelector('svg')
+
+      expect(icon).not.toBeInTheDocument()
+    })
+  })
+
+  describe('below the medium breakpoint', () => {
+    it('only shows the filter icon by default', () => {
+      isMinScreen.mockImplementation(() => ({ value: false }))
+      appliedFilters = []
+      const { container } = render(VFilterButton, options)
+
+      const icon = container.querySelector('svg')
+      const label = screen.queryByTestId('filterbutton-label')
+
+      expect(icon).toBeVisible()
+      expect(label).not.toBeInTheDocument()
+    })
+    it('only shows the count and label when filters are applied', () => {
+      isMinScreen.mockImplementation(() => ({ value: false }))
+      // +2 to guarantee it's plural
+      const filterCount = Math.floor(Math.random() * 10) + 2
+      appliedFilters = Array(filterCount).fill('')
+      const { container } = render(VFilterButton, options)
+
+      const icon = container.querySelector('svg')
+      const button = screen.getByText(`${filterCount} Filters`)
+
+      expect(icon).not.toBeInTheDocument()
+      expect(button).toBeVisible()
+    })
+    it('only shows the count when filters are applied and the user scrolls', () => {
+      isMinScreen.mockImplementation(() => ({ value: false }))
+      // +2 to guarantee it's plural
+      const filterCount = Math.floor(Math.random() * 10) + 2
+      appliedFilters = Array(filterCount).fill('')
+      props.isHeaderScrolled = true
+      const { container } = render(VFilterButton, options)
+
+      const icon = container.querySelector('svg')
+      const button = screen.getByText(filterCount)
+
+      expect(icon).not.toBeInTheDocument()
+      expect(button).toBeVisible()
+    })
+  })
+})
diff --git a/test/unit/specs/components/filter-checklist.spec.js b/test/unit/specs/components/filter-checklist.spec.js
index cae034fd25..c944c36a5c 100644
--- a/test/unit/specs/components/filter-checklist.spec.js
+++ b/test/unit/specs/components/filter-checklist.spec.js
@@ -1,5 +1,4 @@
-import FilterChecklist from '~/components/Filters/FilterChecklist'
-import VCheckbox from '~/components/VCheckbox'
+import FilterChecklist from '~/components/VFilters/VFilterChecklist'
 import { createLocalVue } from '@vue/test-utils'
 import { fireEvent, render, screen } from '@testing-library/vue'
 
@@ -10,7 +9,6 @@ describe('FilterChecklist', () => {
 
   beforeEach(() => {
     localVue = createLocalVue()
-    localVue.component('VCheckbox', VCheckbox)
     props = {
       options: [{ code: 'foo', name: 'bar', checked: false }],
       title: 'Foo',
diff --git a/test/unit/specs/components/filter-display.spec.js b/test/unit/specs/components/filter-display.spec.js
index 3340fdeca6..ba218a2dee 100644
--- a/test/unit/specs/components/filter-display.spec.js
+++ b/test/unit/specs/components/filter-display.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue'
 
-import FilterDisplay from '~/components/Filters/FilterDisplay'
+import FilterDisplay from '~/components/VFilters/VFilterDisplay'
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 
diff --git a/test/unit/specs/components/filter-tag.spec.js b/test/unit/specs/components/filter-tag.spec.js
index 12a8823a38..c26fac5785 100644
--- a/test/unit/specs/components/filter-tag.spec.js
+++ b/test/unit/specs/components/filter-tag.spec.js
@@ -1,4 +1,4 @@
-import FilterTag from '~/components/Filters/FilterTag'
+import FilterTag from '~/components/VFilters/VFilterTag'
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 
diff --git a/test/unit/specs/components/search-grid-filter.spec.js b/test/unit/specs/components/search-grid-filter.spec.js
index 6faf4f0c6b..e4597f02ee 100644
--- a/test/unit/specs/components/search-grid-filter.spec.js
+++ b/test/unit/specs/components/search-grid-filter.spec.js
@@ -4,8 +4,7 @@ import { createLocalVue } from '@vue/test-utils'
 import { IMAGE } from '~/constants/media'
 import store from '~/store/search'
 import clonedeep from 'lodash.clonedeep'
-import SearchGridFilter from '~/components/Filters/SearchGridFilter'
-import VCheckbox from '~/components/VCheckbox'
+import SearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 
 const initialFilters = {
   licenseTypes: [
@@ -40,7 +39,6 @@ describe('SearchGridFilter', () => {
   beforeEach(() => {
     localVue = createLocalVue()
     localVue.use(Vuex)
-    localVue.component('VCheckbox', VCheckbox)
     filters = clonedeep(initialFilters)
     storeMock = new Vuex.Store({
       modules: {
@@ -84,12 +82,11 @@ describe('SearchGridFilter', () => {
     expect(screen.getByTestId('filters-list')).toHaveClass('block')
   })
 
-  it('should not show search filters when isFilterVisible is false', async () => {
-    storeMock.state.search.isFilterVisible = false
+  xit('should not show search filters when isFilterVisible is false', async () => {
     await render(SearchGridFilter, options)
 
     // not.toBeVisible does not work
-    expect(screen.getByTestId('filters-list')).toHaveClass('hidden')
+    expect(screen.getByTestId('filters-list')).not.toBeVisible()
   })
 
   it('toggles filter', async () => {
@@ -119,7 +116,7 @@ describe('SearchGridFilter', () => {
     expect(uncheckedFilters.length).toEqual(25)
   })
 
-  it('toggles search visibility', async () => {
+  xit('toggles search visibility', async () => {
     render(SearchGridFilter, options)
     const element = screen.getByTestId('filters-list')
 
diff --git a/test/unit/specs/pages/browse-page.spec.js b/test/unit/specs/pages/browse-page.spec.js
index bd735a4389..c73a033a10 100644
--- a/test/unit/specs/pages/browse-page.spec.js
+++ b/test/unit/specs/pages/browse-page.spec.js
@@ -63,7 +63,7 @@ describe('Search Grid Wrapper', () => {
     expect(wrapper.vm.showScrollButton).toBe(true)
   })
 
-  it('shows search filters when isFilterVisible is true', () => {
+  xit('shows search filters when isFilterVisible is true', () => {
     storeMock.state.search.isFilterVisible = true
     const wrapper = render(BrowsePage, options)
     expect(wrapper.findComponent({ name: 'SearchGridFilter' }).exists()).toBe(

From 97ad095b1774f953b4088ebc8687d020f9eab785 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 6 Jan 2022 18:46:55 +0300
Subject: [PATCH 05/24] Add searchbar to header (#491)

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Co-authored-by: Zack Krida <zackkrida@pm.me>
---
 src/assets/icons/openverse-logo-text.svg      |   10 +
 src/components/HeaderSection.vue              |   16 -
 src/components/VHeader/VHeader.vue            |  207 +-
 .../VHeader/VSearchBar/VSearchBar.vue         |   49 +-
 .../VHeader/VSearchBar/VSearchButton.vue      |   14 +-
 .../VHeader/meta/VSearchBar.stories.mdx       |   90 +
 .../VInputField.vue}                          |   42 +-
 .../meta/VInputField.stories.mdx}             |    0
 src/components/VLogoLoader/VLogoLoader.vue    |    2 +-
 src/composables/use-match-routes.js           |   27 +
 src/composables/use-media-query.js            |    6 +-
 src/composables/use-search-route.js           |   21 -
 src/locales/en.json                           |    1 +
 src/locales/po-files/openverse.pot            | 2163 +++++++++++++++++
 src/pages/search.vue                          |    1 -
 tailwind.config.js                            |    5 +-
 .../components/InputField/input-field.spec.js |   18 +-
 .../specs/components/header-section.spec.js   |   22 -
 .../specs/components/search-grid-form.spec.js |   31 -
 test/unit/specs/pages/browse-page.spec.js     |    1 -
 20 files changed, 2520 insertions(+), 206 deletions(-)
 create mode 100644 src/assets/icons/openverse-logo-text.svg
 delete mode 100644 src/components/HeaderSection.vue
 create mode 100644 src/components/VHeader/meta/VSearchBar.stories.mdx
 rename src/components/{InputField/InputField.vue => VInputField/VInputField.vue} (62%)
 rename src/components/{InputField/meta/InputField.stories.mdx => VInputField/meta/VInputField.stories.mdx} (100%)
 create mode 100644 src/composables/use-match-routes.js
 delete mode 100644 src/composables/use-search-route.js
 create mode 100644 src/locales/po-files/openverse.pot
 delete mode 100644 test/unit/specs/components/header-section.spec.js
 delete mode 100644 test/unit/specs/components/search-grid-form.spec.js

diff --git a/src/assets/icons/openverse-logo-text.svg b/src/assets/icons/openverse-logo-text.svg
new file mode 100644
index 0000000000..254ec78c13
--- /dev/null
+++ b/src/assets/icons/openverse-logo-text.svg
@@ -0,0 +1,10 @@
+<svg
+  viewBox="0 0 95 15"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.0953 6.14123C11.0953 9.02825 8.70687 11.3686 5.76056 11.3686C2.81424 11.3686 0.425781 9.02825 0.425781 6.14123C0.425781 3.25421 2.81424 0.913818 5.76056 0.913818C8.70687 0.913818 11.0953 3.25421 11.0953 6.14123ZM7.89439 6.14122C7.89439 7.29603 6.93901 8.23219 5.76049 8.23219C4.58196 8.23219 3.62658 7.29603 3.62658 6.14122C3.62658 4.98641 4.58196 4.05026 5.76049 4.05026C6.93901 4.05026 7.89439 4.98641 7.89439 6.14122ZM15.59 14.811H11.9299V1.08903H15.5635V2.83027H15.643C16.0409 1.81671 16.9957 0.959089 18.5074 0.959089C20.5231 0.959089 22.4858 2.46643 22.4858 6.07884C22.4858 9.53532 20.6558 11.1986 18.4809 11.1986C17.0487 11.1986 16.0674 10.4449 15.643 9.43136H15.59V14.811ZM17.1283 3.71388C16.1204 3.71388 15.5104 4.59749 15.5104 6.07884C15.5104 7.5342 16.1204 8.4438 17.1283 8.4438C18.1361 8.4438 18.7196 7.56018 18.7196 6.07884C18.7196 4.59749 18.1361 3.71388 17.1283 3.71388ZM33.3253 7.84606C32.9805 9.92514 31.1637 11.2506 28.3391 11.2506C25.0768 11.2506 23.0877 9.3339 23.0877 6.10482C23.0877 3.01218 25.1033 0.959089 28.2595 0.959089C31.3361 0.959089 33.3253 2.90173 33.3253 6.07884V6.91047H26.6947V7.0664C26.6947 8.02798 27.3312 8.72967 28.4186 8.72967C29.1679 8.72967 29.7713 8.41131 29.9835 7.84606H33.3253ZM28.3391 3.47998C27.4439 3.47998 26.7146 4.07122 26.6947 4.93534H29.9569C29.937 4.07772 29.2475 3.47998 28.3391 3.47998ZM37.9187 5.45511C37.9254 4.46754 38.4956 3.86981 39.404 3.86981C40.3256 3.86981 40.8693 4.46754 40.8627 5.45511V11.0686H44.5228V4.70144C44.5294 2.5314 43.1304 0.959089 40.9688 0.959089C39.4703 0.959089 38.2834 1.72575 37.8392 2.9862H37.7331V1.08903H34.2587V11.0686H37.9187V5.45511ZM51.8232 1.08903H55.6689L52.2476 11.0686H48.004L44.5826 1.08903H48.4283L50.0727 7.69013H50.1788L51.8232 1.08903ZM60.7199 11.2506C63.5445 11.2506 65.3613 9.92514 65.7061 7.84606H62.3643C62.1521 8.41131 61.5487 8.72967 60.7995 8.72967C59.7121 8.72967 59.0755 8.02798 59.0755 7.0664V6.91047H65.7061V6.07884C65.7061 2.90173 63.7169 0.959089 60.6403 0.959089C57.4842 0.959089 55.4685 3.01218 55.4685 6.10482C55.4685 9.3339 57.4577 11.2506 60.7199 11.2506ZM59.0755 4.93534C59.0954 4.07122 59.8248 3.47998 60.7199 3.47998C61.6283 3.47998 62.3179 4.07772 62.3378 4.93534H59.0755ZM70.2996 11.0686H66.6395V1.08903H70.1935V2.9862H70.2996C70.6709 1.58281 71.5196 0.959089 72.607 0.959089C72.9253 0.959089 73.2435 1.01107 73.5353 1.09553V4.15568C73.1706 4.03224 72.5606 3.97376 72.1826 3.97376C71.1019 3.97376 70.2996 4.72743 70.2996 5.87093V11.0686ZM83.4846 4.3376C83.3918 2.22603 81.6015 0.959089 78.6575 0.959089C75.7467 0.959089 73.9498 2.12857 73.9631 4.20766C73.9498 5.77997 74.9908 6.78702 77.0662 7.14437L78.8697 7.45623C79.6654 7.59917 80.0234 7.80708 80.0367 8.18391C80.0234 8.59973 79.5394 8.83362 78.8697 8.83362C78.0409 8.83362 77.4574 8.48278 77.3579 7.84606H73.7244C73.9233 9.89266 75.7268 11.2506 78.8432 11.2506C81.6612 11.2506 83.7366 9.90565 83.7498 7.76809C83.7366 6.29324 82.7287 5.43562 80.6467 5.06528L78.578 4.70144C77.8022 4.565 77.5834 4.29212 77.5966 3.99975C77.5834 3.58393 78.1072 3.35004 78.7371 3.35004C79.4598 3.35004 80.0632 3.72687 80.1163 4.3376H83.4846ZM94.4583 7.84606C94.1135 9.92514 92.2968 11.2506 89.4721 11.2506C86.2099 11.2506 84.2207 9.3339 84.2207 6.10482C84.2207 3.01218 86.2364 0.959089 89.3926 0.959089C92.4692 0.959089 94.4583 2.90173 94.4583 6.07884V6.91047H87.8278V7.0664C87.8278 8.02798 88.4643 8.72967 89.5517 8.72967C90.301 8.72967 90.9044 8.41131 91.1165 7.84606H94.4583ZM89.4721 3.47998C88.577 3.47998 87.8477 4.07122 87.8278 4.93534H91.09C91.0701 4.07772 90.3805 3.47998 89.4721 3.47998Z"
+  />
+</svg>
diff --git a/src/components/HeaderSection.vue b/src/components/HeaderSection.vue
deleted file mode 100644
index ffa59d24e1..0000000000
--- a/src/components/HeaderSection.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <header class="embedded">
-    <NavSection :key="$route.path" :show-nav-search="showNavSearch" />
-    <NotificationBanner v-if="showNotification" />
-  </header>
-</template>
-
-<script>
-export default {
-  name: 'HeaderSection',
-  props: {
-    showNavSearch: { type: Boolean, default: false },
-    showNotification: { type: Boolean, default: false },
-  },
-}
-</script>
diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeader.vue
index 162971c75b..01664db5c0 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeader.vue
@@ -1,107 +1,218 @@
 <template>
-  <div
-    class="sticky top-0 flex py-4 px-6 md:px-7 align-center justify-between z-40 w-full bg-white"
+  <header
+    class="sticky top-0 flex py-4 px-4 md:px-7 items-center justify-between z-40 w-full bg-white gap-x-2"
     :class="{
+      'border-b border-white': !isHeaderScrolled && !isFilterSidebarVisible,
       'border-b border-dark-charcoal-20':
-        isHeaderScrolled || isFilterSidebarVisible,
+        isSearchRoute && (isHeaderScrolled || isFilterSidebarVisible),
+      'flex-wrap gap-y-4': !isMinScreenMD && !isHeaderScrolled,
     }"
   >
-    <NuxtLink to="/">
+    <NuxtLink
+      to="/"
+      class="rounded-sm ring-offset-1 focus:outline-none focus-visible:ring focus-visible:ring-pink -ms-2 inline-flex items-center hover:bg-yellow"
+      :class="{
+        'pe-3': !isHeaderScrolled || !isSearchRoute,
+        'md:px-0': isSearchRoute,
+      }"
+    >
       <VLogoLoader :status="isFetching ? 'loading' : 'idle'" />
+      <OpenverseLogoText
+        v-if="!isHeaderScrolled"
+        class="-ml-1 mt-1"
+        :class="{ 'md:hidden': isSearchRoute }"
+        width="95"
+        height="15"
+      />
     </NuxtLink>
 
+    <VSearchBar
+      v-show="!isHomeRoute"
+      v-model.trim="searchTerm"
+      class="mx-auto md:ms-0 md:me-auto lg:w-1/2 2xl:w-1/3"
+      :class="{
+        'order-4 w-full md:order-none md:w-auto': !isHeaderScrolled,
+        'w-2/3': isHeaderScrolled,
+      }"
+      @submit="handleSearch"
+    >
+      <span
+        v-if="searchStatus"
+        class="info font-semibold text-xs text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal mx-4"
+      >
+        {{ searchStatus }}
+      </span>
+    </VSearchBar>
+
     <VFilterButton
-      v-if="isSearch"
+      v-if="isSearchRoute"
       :is-header-scrolled="isHeaderScrolled"
       :pressed="isFilterSidebarVisible"
       @toggle="toggleFilterVisibility"
     />
-  </div>
+  </header>
 </template>
 
 <script>
+import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
 import {
   computed,
   defineComponent,
   ref,
   useContext,
+  useRouter,
   watch,
+  watchEffect,
 } from '@nuxtjs/composition-api'
 
+import { MEDIA, SEARCH } from '~/constants/store-modules'
+import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
+import { AUDIO, IMAGE } from '~/constants/media'
 import { isMinScreen } from '~/composables/use-media-query'
-import { useSearchRoute } from '~/composables/use-search-route'
+import {
+  useMatchSearchRoutes,
+  useMatchHomeRoute,
+} from '~/composables/use-match-routes'
 import { useWindowScroll } from '~/composables/use-window-scroll'
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 import closeIcon from '~/assets/icons/close.svg'
 
-import VFilterButton from '~/components/VHeader/VFilterButton.vue'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
+import VFilterButton from '~/components/VHeader/VFilterButton'
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader'
 
-import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
-import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+const i18nKeys = {
+  [AUDIO]: {
+    noResult: 'browse-page.audio-no-results',
+    result: 'browse-page.audio-result-count',
+    more: 'browse-page.audio-result-count-more',
+  },
+  [IMAGE]: {
+    noResult: 'browse-page.image-no-results',
+    result: 'browse-page.image-result-count',
+    more: 'browse-page.image-result-count-more',
+  },
+}
 
 const VHeader = defineComponent({
   name: 'VHeader',
   components: {
     VFilterButton,
     VLogoLoader,
+    VSearchBar,
+    OpenverseLogoText,
   },
   setup() {
-    const { store } = useContext()
-    const { isSearch } = useSearchRoute()
+    const { app, i18n, store } = useContext()
+    const { matches: isSearchRoute } = useMatchSearchRoutes()
+    const { matches: isHomeRoute } = useMatchHomeRoute()
     const { isHeaderScrolled } = useWindowScroll()
-    const isMdScreen = isMinScreen('md')
+    const router = useRouter()
+    const isMinScreenMD = isMinScreen('md', { shouldPassInSSR: true })
     const { isFilterSidebarVisible, setFilterSidebarVisibility } =
-      useFilterSidebarVisibility({ mediaQuery: isMdScreen })
+      useFilterSidebarVisibility({ mediaQuery: isMinScreenMD })
 
     /**
-     * Set the active mobile menu view to the 'filters'
-     * if the filter sidebar has been toggled open.
+     * Return a text representation of the result count.
+     * @param {number} count
+     * @returns {string}
      */
-    watch(
-      () => isFilterSidebarVisible.value,
-      (isVisible) => {
-        if (isVisible) {
-          setCurrentOverlay('filters')
-        } else {
-          closeOverlay()
-        }
-      }
-    )
-    const toggleFilterVisibility = () => {
-      setFilterSidebarVisibility(!isFilterSidebarVisible.value)
+    const mediaCount = (count) => {
+      const countKey =
+        count === 0 ? 'noResult' : count >= 10000 ? 'more' : 'result'
+      const i18nKey = i18nKeys[store.state.search.query.mediaType][countKey]
+      const localeCount = count.toLocaleString(i18n.locale)
+      return i18n.tc(i18nKey, count, { localeCount })
     }
 
-    /** @type {import('@nuxtjs/composition-api').Ref<null|'filters'|'content-switcher'>} */
-    const currentOverlay = ref(null)
-    /**
-     * When an overlay is opened on mobile, this sets the current overlay name
-     * @param {'filters'|'content-switcher'} overlay
-     */
-    const setCurrentOverlay = (overlay) => {
-      // Overlay can only be set on mobile screen
-      if (isMdScreen.value) return
-      currentOverlay.value = overlay
-    }
-    const closeOverlay = () => {
-      currentOverlay.value = null
-    }
+    /** @type {import('@nuxtjs/composition-api').ComputedRef<number>} */
+    const resultsCount = computed(() => store.getters['media/results'].count)
 
     /**  @type {import('@nuxtjs/composition-api').ComputedRef<boolean>} */
     const isFetching = computed(() => {
       return store.getters['media/fetchState'].isFetching
     })
 
+    /**
+     * Status is hidden below the medium breakpoint.
+     * It shows Loading... or Number of results on bigger screens.
+     * @returns {string}
+     */
+    const setInitialStatus = () => {
+      if (!isMinScreenMD.value) return ''
+      if (isFetching.value) return i18n.t('header.loading')
+      return store.state.search.query.q === ''
+        ? ''
+        : mediaCount(resultsCount.value)
+    }
+
+    /** @type {import('@nuxtjs/composition-api').Ref<string>} */
+    const searchStatus = ref(setInitialStatus())
+
+    watchEffect(() => {
+      if (isMinScreenMD.value) {
+        searchStatus.value = isFetching.value
+          ? i18n.t('header.loading')
+          : mediaCount(resultsCount.value)
+      } else {
+        searchStatus.value = ''
+      }
+    })
+
+    const localSearchTerm = ref(store.state.search.query.q)
+    const searchTerm = computed({
+      get: () => localSearchTerm.value,
+      set: async (value) => {
+        localSearchTerm.value = value
+      },
+    })
+
+    watch(
+      () => store.state.search.query.q,
+      (newSearchTerm) => {
+        if (newSearchTerm !== localSearchTerm.value) {
+          localSearchTerm.value = newSearchTerm
+        }
+      }
+    )
+
+    const handleSearch = async () => {
+      // Don't do anything if search term hasn't changed
+      if (localSearchTerm.value === store.state.search.query.q) return
+
+      await store.dispatch(`${SEARCH}/${UPDATE_QUERY}`, {
+        q: localSearchTerm.value,
+      })
+
+      const searchType = store.state.search.searchType
+      const newPath = app.localePath({
+        path: `/search/${searchType === 'all' ? '' : searchType}`,
+        query: store.getters['search/searchQueryParams'],
+      })
+      router.push(newPath)
+
+      await store.dispatch(`${MEDIA}/${FETCH_MEDIA}`, {
+        ...store.getters['search/searchQueryParams'],
+      })
+    }
+
+    const toggleFilterVisibility = () => {
+      setFilterSidebarVisibility(!isFilterSidebarVisible.value)
+    }
+
     return {
       closeIcon,
-      currentOverlay,
+      handleSearch,
       isFetching,
-      isHeaderScrolled,
-      isSearch,
       isFilterSidebarVisible,
-
+      isHeaderScrolled,
+      isMinScreenMD,
+      isSearchRoute,
+      isHomeRoute,
+      searchStatus,
+      searchTerm,
       toggleFilterVisibility,
-      setCurrentOverlay,
-      closeOverlay,
     }
   },
 })
diff --git a/src/components/VHeader/VSearchBar/VSearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue
index 5a309abc4f..949399fa34 100644
--- a/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -1,25 +1,30 @@
 <template>
-  <form class="search-bar group flex flex-row" @submit.prevent="handleSearch">
-    <InputField
-      v-model="text"
+  <form
+    class="search-bar group flex flex-row items-center"
+    @submit.prevent="handleSearch"
+  >
+    <VInputField
       v-bind="$attrs"
       class="flex-grow search-field"
+      label-text="Search"
       :connection-sides="['end']"
-      input-id="search-bar"
+      field-id="search-bar"
       type="search"
       name="q"
+      :model-value="searchText"
+      @update:modelValue="updateSearchText"
     >
       <!-- @slot Extra information such as loading message or result count goes here. -->
       <slot />
-    </InputField>
+    </VInputField>
     <VSearchButton type="submit" />
   </form>
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
-import InputField from '~/components/InputField/InputField.vue'
+import VInputField from '~/components/VInputField/VInputField.vue'
 import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
 
 /**
@@ -27,17 +32,13 @@ import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
  * that fires a search request. The loading state and number of hits are also
  * displayed in the bar itself.
  */
-export default {
-  name: 'SearchBar',
+const VSearchBar = defineComponent({
+  name: 'VSearchBar',
   components: {
-    InputField,
+    VInputField,
     VSearchButton,
   },
   inheritAttrs: false,
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
   props: {
     /**
      * the search query given as input to the field
@@ -47,27 +48,25 @@ export default {
       default: '',
     },
   },
+  emits: ['input', 'submit'],
   setup(props, { emit }) {
-    const text = computed({
-      get() {
-        return props.value
-      },
-      set(value) {
-        emit('input', value)
-      },
-    })
+    const searchText = computed(() => props.value)
+    const updateSearchText = (val) => {
+      emit('input', val)
+    }
 
     const handleSearch = () => {
       emit('submit')
     }
 
     return {
-      text,
-
       handleSearch,
+      searchText,
+      updateSearchText,
     }
   },
-}
+})
+export default VSearchBar
 </script>
 
 <style>
diff --git a/src/components/VHeader/VSearchBar/VSearchButton.vue b/src/components/VHeader/VSearchBar/VSearchButton.vue
index 38da6083b6..a7cd0cde1d 100644
--- a/src/components/VHeader/VSearchBar/VSearchButton.vue
+++ b/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -2,7 +2,7 @@
   <VIconButton
     v-bind="$attrs"
     size="search"
-    class="search-button hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink p-0.5px ps-1.5px focus:p-0 border border-s-0 focus:border-1.5 border-dark-charcoal-20 hover:border-pink group-hover:border-pink rounded-e-sm active:shadow-ring"
+    class="search-button hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink p-0.5px ps-1.5px focus:p-0 border md:border border-dark-charcoal-20 hover:border-pink group-hover:border-pink rounded-e-sm active:shadow-ring"
     :icon-props="{ iconPath: searchIcon }"
     :aria-label="$t('search.search')"
     v-on="$listeners"
@@ -23,3 +23,15 @@ export default {
   },
 }
 </script>
+
+<style>
+/* @todo: Find a better way to override the VIconButton border styles */
+.search-button {
+  /* Negative margin removes a tiny gap between the button and the input borders */
+  margin-inline-start: -1px;
+  border-inline-start-color: transparent;
+}
+.search-button:hover {
+  border-inline-start-color: rgba(214, 212, 213, 1);
+}
+</style>
diff --git a/src/components/VHeader/meta/VSearchBar.stories.mdx b/src/components/VHeader/meta/VSearchBar.stories.mdx
new file mode 100644
index 0000000000..403c4964e4
--- /dev/null
+++ b/src/components/VHeader/meta/VSearchBar.stories.mdx
@@ -0,0 +1,90 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
+
+<Meta
+  title="Components/Header/Search bar"
+  component={VSearchBar}
+  argTypes={{
+    input: {
+      action: 'input',
+    },
+    submit: {
+      action: 'submit',
+    },
+  }}
+/>
+
+export const Template = (args, { argTypes }) => ({
+  template: `
+    <VSearchBar v-bind="$props" v-on="$props">
+      12,345 results
+    </VSearchBar>`,
+  components: { VSearchBar },
+  props: Object.keys(argTypes),
+})
+
+# Search bar
+
+<Description of={VSearchBar} />
+
+<ArgsTable of={VSearchBar} />
+
+The component emits an `input` event with the new contents of the field whenever
+the field receives an input. It also emits the `search` event when the search
+button is clicked.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      value: 'Search query',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+The recommended way to use it is with `v-model` mapping to a `String`
+representing the search query.
+
+export const vModelTemplate = () => ({
+  template: `
+    <div>
+      <VSearchBar v-model="text">
+        {{ text.length }}
+      </VSearchBar>
+      {{ text }}
+    </div>
+  `,
+  components: { VSearchBar },
+  data() {
+    return {
+      text: 'Hello, World!',
+    }
+  },
+})
+
+<Canvas>
+  <Story name="v-model">{vModelTemplate.bind({})}</Story>
+</Canvas>
+
+The `VSearchBar` component passes all attributes down to the inner `InputField`
+which itself applies all its attributes to its inner `<input>` element. So it's
+easy `<input>` attributes like placeholders or HTML validations.
+
+<Canvas>
+  <Story
+    name="With placeholder"
+    args={{
+      placeholder: 'Search query',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/InputField/InputField.vue b/src/components/VInputField/VInputField.vue
similarity index 62%
rename from src/components/InputField/InputField.vue
rename to src/components/VInputField/VInputField.vue
index 21b574e468..91caaf6e09 100644
--- a/src/components/InputField/InputField.vue
+++ b/src/components/VInputField/VInputField.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="input-field group flex flex-row items-center gap-4 hover:bg-dark-charcoal-06 focus-within:bg-dark-charcoal-06 group-hover:bg-dark-charcoal-06 h-12 p-0.5px focus-within:p-0 border focus-within:border-1.5 border-dark-charcoal-20 rounded-sm overflow-hidden focus-within:border-pink"
+    class="input-field group flex flex-row items-center hover:bg-dark-charcoal-06 focus-within:bg-dark-charcoal-06 group-hover:bg-dark-charcoal-06 h-12 p-0.5px focus-within:p-0 border focus-within:border-1.5 border-dark-charcoal-20 rounded-sm overflow-hidden focus-within:border-pink"
     :class="[
       {
         // Padding is set to 1.5px to accommodate the border that will appear later.
@@ -12,39 +12,31 @@
     <label class="sr-only" :for="fieldId">{{ labelText }}</label>
     <input
       :id="fieldId"
-      v-model="text"
       v-bind="$attrs"
       :type="type"
-      class="flex-grow leading-none font-semibold bg-tx placeholder-dark-charcoal-70 ms-4 h-full focus:outline-none"
+      class="flex-1 leading-none font-semibold bg-tx placeholder-dark-charcoal-70 ms-4 h-full focus:outline-none"
+      :value="modelValue"
+      @input="updateModelValue"
       v-on="$listeners"
     />
-    <div
-      class="info font-semibold text-xs text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal me-4"
-    >
-      <!-- @slot Extra information goes here -->
-      <slot />
-    </div>
+
+    <!-- @slot Extra information goes here -->
+    <slot />
   </div>
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
-
 /**
  * Provides a control to enter text as input.
  */
 export default {
-  name: 'InputField',
+  name: 'VInputField',
   inheritAttrs: false,
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
   props: {
     /**
      * the textual content of the input field
      */
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -73,22 +65,20 @@ export default {
       validator: (val) => val.every((item) => ['start', 'end'].includes(item)),
     },
   },
+  // using non-native event name to ensure the two are not mixed
+  emits: ['update:modelValue'],
   setup(props, { emit, attrs }) {
     const type = attrs['type'] ?? 'text'
 
-    const text = computed({
-      get() {
-        return props.value
-      },
-      set(value) {
-        emit('input', value)
-      },
-    })
+    const updateModelValue = (event) => {
+      emit('update:modelValue', event.target.value)
+    }
 
     return {
+      emit,
       type,
 
-      text,
+      updateModelValue,
     }
   },
 }
diff --git a/src/components/InputField/meta/InputField.stories.mdx b/src/components/VInputField/meta/VInputField.stories.mdx
similarity index 100%
rename from src/components/InputField/meta/InputField.stories.mdx
rename to src/components/VInputField/meta/VInputField.stories.mdx
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index eb22c261e8..790dd4d528 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -8,7 +8,7 @@
     aria-hidden="true"
     :data-prefers-reduced-motion="prefersReducedMotion"
     data-testid="logo-loader"
-    class="hover:bg-yellow w-12 h-12 p-3 rounded inline-flex justify-center items-center"
+    class="w-12 h-12 p-3 rounded inline-flex justify-center items-center"
   >
     <path
       data-logo-part-1
diff --git a/src/composables/use-match-routes.js b/src/composables/use-match-routes.js
new file mode 100644
index 0000000000..b004e9cfd6
--- /dev/null
+++ b/src/composables/use-match-routes.js
@@ -0,0 +1,27 @@
+import { ref, useRoute, useRouter } from '@nuxtjs/composition-api'
+
+/**
+ * Reactive property that returns true only on the matching routes.
+ * Note that routes are matched by name, not the url path.
+ *
+ * @returns {{matches: import('@nuxtjs/composition-api').Ref<boolean>}}
+ */
+export const useMatchRoute = (routes = []) => {
+  const route = useRoute()
+  const router = useRouter()
+  const matches = ref(routes.includes(route.value.name))
+  router.beforeEach((to, from, next) => {
+    matches.value = routes.includes(to.name)
+    next()
+  })
+  return { matches }
+}
+
+/**
+ * Reactive property that returns true only on the `search` routes.
+ * Homepage, single image result and other content pages return `false`
+ */
+export const useMatchSearchRoutes = () =>
+  useMatchRoute(['search', 'search-image', 'search-audio', 'search-video'])
+
+export const useMatchHomeRoute = () => useMatchRoute(['index'])
diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index dd1c415c47..b33657d5a9 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -10,12 +10,12 @@ import { defaultWindow } from '~/composables/window'
  * @param query
  * @param options
  */
-export function useMediaQuery(query, options = {}) {
+export function useMediaQuery(query, options = { shouldPassInSSR: false }) {
   const { window = defaultWindow } = options
-  if (!window) return ref(false)
+  if (!window) return ref(options.shouldPassInSSR)
 
   const mediaQuery = window.matchMedia(query)
-  /** @type {import('@nuxtjs/composition-api').Ref<boolean>} */
+  /** @type {import('@nuxtjs/composition-api').Ref<Boolean>} */
   const matches = ref(mediaQuery.matches)
 
   const handler = (/** @type MediaQueryListEvent */ event) => {
diff --git a/src/composables/use-search-route.js b/src/composables/use-search-route.js
deleted file mode 100644
index 8ce0b93cd9..0000000000
--- a/src/composables/use-search-route.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ref, useRoute, useRouter } from '@nuxtjs/composition-api'
-
-const searchRoutes = ['search', 'search-image', 'search-audio', 'search-video']
-
-/**
- * Reactive property that returns true only on the `search` routes.
- * Homepage, single image result and other content pages return `false`
- * @returns {{isSearch: import('@nuxtjs/composition-api').Ref<boolean>}}
- */
-export const useSearchRoute = () => {
-  const route = useRoute()
-  const router = useRouter()
-  const isSearch = ref(searchRoutes.includes(route.value.name))
-  router.beforeEach((to, from, next) => {
-    isSearch.value = searchRoutes.includes(to.name)
-    next()
-  })
-  return {
-    isSearch,
-  }
-}
diff --git a/src/locales/en.json b/src/locales/en.json
index 821c2332b9..73740dacdf 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -61,6 +61,7 @@
       "dismiss": "Dismiss",
       "okay": "OK"
     },
+    "loading": "Loading...",
     "filter-button": {
       "simple": "Filters",
       "with-count": "{count} Filter | {count} Filters"
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
new file mode 100644
index 0000000000..92ffe8c496
--- /dev/null
+++ b/src/locales/po-files/openverse.pot
@@ -0,0 +1,2163 @@
+# Copyright (C) 2021
+# This file is distributed under the same license as Openverse.
+msgid ""
+msgstr ""
+"Project-Id-Version: Openverse \n"
+"Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
+"POT-Creation-Date: 2021-12-16T23:30:23+00:00\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"PO-Revision-Date: 2021-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+
+
+#: src/components/AudioTrack/layouts/Full.vue:32
+msgctxt "interpunct"
+msgid "•"
+msgstr ""
+
+#: src/components/VModal/VModalContent.vue:25
+msgctxt "modal.close"
+msgid "Close"
+msgstr ""
+
+#: src/components/DownloadButton.vue:14
+msgctxt "download-button.download"
+msgid "Download"
+msgstr ""
+
+#: src/components/DownloadButton.vue:4
+msgctxt "download-button.aria.dropdown-label"
+msgid "Select the download file format"
+msgstr ""
+
+#: src/components/MigrationNotice.vue:3
+msgctxt "migration-notice.intro"
+msgid "CC Search is now called Openverse and joins WordPress as an open source project."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MigrationNotice.vue:4
+msgctxt "migration-notice.more"
+msgid "###read-more### about this announcement."
+msgstr ""
+
+#: src/components/MigrationNotice.vue:10
+msgctxt "migration-notice.read"
+msgid "Read more"
+msgstr ""
+
+#: src/components/DropdownButton.vue:71
+msgctxt "dropdown-button.aria.arrow-label"
+msgid "Dropdown"
+msgstr ""
+
+msgctxt "license-readable-names.cc0"
+msgid "Zero"
+msgstr ""
+
+msgctxt "license-readable-names.pdm"
+msgid "Public Domain Mark"
+msgstr ""
+
+msgctxt "license-readable-names.by"
+msgid "Attribution"
+msgstr ""
+
+msgctxt "license-readable-names.by-sa"
+msgid "Attribution-Share-Alike"
+msgstr ""
+
+msgctxt "license-readable-names.by-nc"
+msgid "Attribution-NonCommercial"
+msgstr ""
+
+msgctxt "license-readable-names.by-nd"
+msgid "Attribution-NoDerivatives"
+msgstr ""
+
+msgctxt "license-readable-names.by-nc-sa"
+msgid "Attribution-NonCommercial-Share-Alike"
+msgstr ""
+
+msgctxt "license-readable-names.by-nc-nd"
+msgid "Attribution-NonCommercial-NoDerivatives"
+msgstr ""
+
+msgctxt "license-names.cc0"
+msgid "CC0"
+msgstr ""
+
+msgctxt "license-names.pdm"
+msgid "Public Domain Mark"
+msgstr ""
+
+msgctxt "license-names.by"
+msgid "BY"
+msgstr ""
+
+msgctxt "license-names.by-sa"
+msgid "BY-SA"
+msgstr ""
+
+msgctxt "license-names.by-nc"
+msgid "BY-NC"
+msgstr ""
+
+msgctxt "license-names.by-nd"
+msgid "BY-ND"
+msgstr ""
+
+msgctxt "license-names.by-nc-sa"
+msgid "BY-NC-SA"
+msgstr ""
+
+msgctxt "license-names.by-nc-nd"
+msgid "BY-NC-ND"
+msgstr ""
+
+msgctxt "audio-categories.title"
+msgid "Audio Category"
+msgstr ""
+
+msgctxt "audio-categories.music"
+msgid "Music"
+msgstr ""
+
+msgctxt "audio-categories.sound-effects"
+msgid "Sound Effects"
+msgstr ""
+
+msgctxt "audio-categories.podcast"
+msgid "Podcast"
+msgstr ""
+
+#: src/components/VHeader/VSearchBar/VSearchButton.vue:7
+msgctxt "search.search"
+msgid "Search"
+msgstr ""
+
+msgctxt "play-pause.play"
+msgid "Play"
+msgstr ""
+
+msgctxt "play-pause.pause"
+msgid "Pause"
+msgstr ""
+
+msgctxt "play-pause.replay"
+msgid "Replay"
+msgstr ""
+
+#: src/components/AudioTrack/AudioTrack.vue:4
+msgctxt "audio-track.aria-label"
+msgid "Audio Player"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/AudioTrack/layouts/Full.vue:17
+msgctxt "audio-track.creator"
+msgid "by ###creator###"
+msgstr ""
+
+msgctxt "audio-track.messages.err_aborted"
+msgid "You aborted playback."
+msgstr ""
+
+msgctxt "audio-track.messages.err_network"
+msgid "A network error occurred."
+msgstr ""
+
+msgctxt "audio-track.messages.err_decode"
+msgid "Could not decode audio."
+msgstr ""
+
+msgctxt "audio-track.messages.err_unsupported"
+msgid "This audio format is not supported by your browser."
+msgstr ""
+
+msgctxt "audio-track.messages.loading"
+msgid "Loading..."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/AudioThumbnail/AudioThumbnail.vue:33
+msgctxt "audio-thumbnail.alt"
+msgid "Cover art for \"###title###\" by ###creator###"
+msgstr ""
+
+#: src/components/AudioTrack/Waveform.vue:12
+msgctxt "waveform.label"
+msgid "Audio seek bar"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/AudioTrack/Waveform.vue:489
+msgctxt "waveform.current-time"
+msgid "###time### seconds"
+msgstr ""
+
+msgctxt "browsers.chrome"
+msgid "Chrome"
+msgstr ""
+
+msgctxt "browsers.firefox"
+msgid "Firefox"
+msgstr ""
+
+msgctxt "browsers.opera"
+msgid "Opera"
+msgstr ""
+
+msgctxt "browsers.edge"
+msgid "Edge"
+msgstr ""
+
+#: src/components/VMetaSearch/VMetaSearchForm.vue:43
+msgctxt "meta-search.caption"
+msgid "Openverse does not currently index the sources listed above, but through this interface is offering convenient access to search services provided by other independent organizations. Openverse has no control over the results that are returned. Do not assume that the results displayed in this search portal are under a CC license. Always verify that the work is actually under a CC license by following the link. If you are in doubt, you should contact the copyright holder directly, or try to contact the site where you found the content."
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "meta-search.form.unsupported-title"
+msgid "Openverse does not yet support built-in ###type### search."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:40
+msgctxt "meta-search.form.supported-title"
+msgid "Not finding what you're looking for? Try additional ###type### sources."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VMetaSearch/VMetaSearchForm.vue:4
+msgctxt "meta-search.form.no-results-title"
+msgid "No ###type### results for \"###query###\"."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VMetaSearch/VMetaSearchForm.vue:31
+msgctxt "meta-search.form.caption"
+msgid "Click on a source below to directly search other collections of CC-licensed ###type###.###break###Please note that Use filters are not supported for ###filter###."
+msgstr ""
+
+msgctxt "meta-search.card.search"
+msgid "Not finding what you're looking for? Try additional sources"
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "meta-search.card.caption"
+msgid "Click on a source below to directly search other collections of CC-licensed images.###break###Please note that Use filters are not supported for Open Clip Art Library or Nappy."
+msgstr ""
+
+msgctxt "meta-search.card.checkboxes.title"
+msgid "Use"
+msgstr ""
+
+msgctxt "meta-search.card.checkboxes.commercial"
+msgid "Use for commercial purposes"
+msgstr ""
+
+msgctxt "meta-search.card.checkboxes.modify"
+msgid "Modify or adapt"
+msgstr ""
+
+msgctxt "audio-details.genre-label"
+msgid "Genre"
+msgstr ""
+
+#: src/components/AudioDetails/Related.vue:4
+msgctxt "audio-details.related-audios"
+msgid "Related audios"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:16
+msgctxt "audio-details.table.album"
+msgid "Album"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:22
+msgctxt "audio-details.table.category"
+msgid "Type"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:29
+msgctxt "audio-details.table.sample-rate"
+msgid "Sample Rate"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:37
+msgctxt "audio-details.table.filetype"
+msgid "Format"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:45
+msgctxt "audio-details.table.provider"
+msgid "Provider"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:53
+msgctxt "audio-details.table.source"
+msgid "Source"
+msgstr ""
+
+#: src/components/AudioDetails/Table.vue:61
+msgctxt "audio-details.table.genre"
+msgid "Genre"
+msgstr ""
+
+#: src/components/ImageDetails/PhotoDetails.vue:12
+msgctxt "photo-details.back"
+msgid "Back to search results"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/ImageDetails/PhotoDetails.vue:63
+msgctxt "photo-details.creator"
+msgid "by ###name###"
+msgstr ""
+
+#: src/components/ImageDetails/PhotoDetails.vue:153
+msgctxt "photo-details.weblink"
+msgid "Go to image's website"
+msgstr ""
+
+#: src/components/ImageDetails/PhotoDetails.vue:31
+msgctxt "photo-details.legal-disclaimer"
+msgid "Openverse aggregates data from publicly available repositories of open content. Openverse does not host the content and does not verify that the content is properly CC-licensed or that the attribution information is accurate or complete. Please follow the link to the source of the content to independently verify before reuse."
+msgstr ""
+
+#: src/components/ImageDetails/RelatedImages.vue:7
+msgctxt "photo-details.related-images"
+msgid "Related Images"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:4
+msgctxt "photo-details.aria.close-form"
+msgid "close form"
+msgstr ""
+
+#: src/components/ContentReport/DmcaNotice.vue:10
+msgctxt "photo-details.aria.dmca"
+msgid "dmca form"
+msgstr ""
+
+#: src/components/ImageDetails/PhotoDetails.vue:56
+msgctxt "photo-details.aria.details"
+msgid "image details"
+msgstr ""
+
+#: src/pages/audio/_id.vue:2
+msgctxt "photo-details.aria.main"
+msgid "main content"
+msgstr ""
+
+#: src/components/AudioDetails/Related.vue:2
+msgctxt "photo-details.aria.related"
+msgid "related images"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/ContentReport/DmcaNotice.vue:27
+msgctxt "photo-details.aria.provider-report-form"
+msgid "###provider### form"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/ImageDetails/PhotoDetails.vue:73
+msgctxt "photo-details.aria.creator-url"
+msgid "author ###creator###"
+msgstr ""
+
+msgctxt "photo-details.aria.attribution.license"
+msgid "read more about the license"
+msgstr ""
+
+msgctxt "photo-details.aria.attribution.tool"
+msgid "read more about the tool"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:32
+msgctxt "photo-details.content-report.title"
+msgid "Report this content"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:36
+msgctxt "photo-details.content-report.issue"
+msgid "What's the issue?"
+msgstr ""
+
+#: src/components/ContentReport/OtherIssueForm.vue:7
+msgctxt "photo-details.content-report.issue-description"
+msgid "Please describe the issue for us"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:48
+msgctxt "photo-details.content-report.copyright"
+msgid "Infringes Copyright"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:61
+msgctxt "photo-details.content-report.mature"
+msgid "Contains mature content"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:74
+msgctxt "photo-details.content-report.other"
+msgid "Other"
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:80
+msgctxt "photo-details.content-report.caption"
+msgid "For security purposes, Openverse collects and retains anonymized IP addresses of those who complete and submit this form."
+msgstr ""
+
+#: src/components/ContentReport/ContentReportForm.vue:90
+msgctxt "photo-details.content-report.next"
+msgid "Next"
+msgstr ""
+
+#: src/components/ContentReport/DmcaNotice.vue:46
+msgctxt "photo-details.content-report.back"
+msgid "Back"
+msgstr ""
+
+#: src/components/ContentReport/OtherIssueForm.vue:36
+msgctxt "photo-details.content-report.submit"
+msgid "Submit"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/ContentReport/DmcaNotice.vue:3
+msgctxt "photo-details.content-report.dmca.content"
+msgid "You must fill out this ###link### to report copyright infringement. No action will be taken until the form is filled out and submitted."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/ContentReport/DmcaNotice.vue:19
+msgctxt "photo-details.content-report.dmca.provider"
+msgid "We recommend doing the same at the source, ###link###."
+msgstr ""
+
+#: src/components/ContentReport/DoneMessage.vue:4
+msgctxt "photo-details.content-report.dmca.thanks"
+msgid "Thank you for reporting an issue with the results of Openverse!"
+msgstr ""
+
+#: src/components/ContentReport/ReportError.vue:4
+msgctxt "photo-details.content-report.dmca.submission-error"
+msgid "There was an error with the report submission. Please try again."
+msgstr ""
+
+#: src/components/ContentReport/DmcaNotice.vue:14
+msgctxt "photo-details.content-report.dmca.link"
+msgid "DMCA form"
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "photo-details.content-report.dmca.aria-form"
+msgid "###provider### form"
+msgstr ""
+
+#: src/components/CopyButton.vue:9
+msgctxt "photo-details.copy.copy"
+msgid "Copy"
+msgstr ""
+
+#: src/components/CopyButton.vue:12
+msgctxt "photo-details.copy.copied"
+msgid "Copied!"
+msgstr ""
+
+#: src/components/ImageDetails/ReuseSurvey.vue:3
+msgctxt "photo-details.survey.content"
+msgid "How are you using this image?"
+msgstr ""
+
+#: src/components/ImageDetails/ReuseSurvey.vue:11
+msgctxt "photo-details.survey.link"
+msgid "Let us know"
+msgstr ""
+
+#: src/components/ImageDetails/ReuseSurvey.vue:13
+msgctxt "photo-details.survey.answer"
+msgid "by answering a few questions."
+msgstr ""
+
+#: src/components/ImageDetails/PhotoDetails.vue:107
+msgctxt "photo-details.information.title"
+msgid "Information"
+msgstr ""
+
+#: src/components/ImageDetails/ImageInfo.vue:6
+msgctxt "photo-details.information.type"
+msgid "Type:"
+msgstr ""
+
+#: src/components/ImageDetails/ImageInfo.vue:19
+msgctxt "photo-details.information.provider"
+msgid "Provider:"
+msgstr ""
+
+#: src/components/ImageDetails/ImageInfo.vue:10
+msgctxt "photo-details.information.dimensions"
+msgid "Dimensions:"
+msgstr ""
+
+#: src/components/ImageDetails/ImageInfo.vue:25
+msgctxt "photo-details.information.source"
+msgid "Source:"
+msgstr ""
+
+msgctxt "photo-details.information.license"
+msgid "License"
+msgstr ""
+
+#: src/components/ImageDetails/ImageInfo.vue:42
+msgctxt "photo-details.information.tags"
+msgid "Tags"
+msgstr ""
+
+#: src/components/ImageDetails/ImageInfo.vue:16
+msgctxt "photo-details.information.pixels"
+msgid "pixels"
+msgstr ""
+
+#: src/components/ImageDetails/PhotoDetails.vue:96
+msgctxt "photo-details.reuse.title"
+msgid "Reuse"
+msgstr ""
+
+msgctxt "media-details.provider-label"
+msgid "Provider"
+msgstr ""
+
+msgctxt "media-details.source-label"
+msgid "Source"
+msgstr ""
+
+msgctxt "media-details.loading"
+msgid "Loading..."
+msgstr ""
+
+#: src/components/AudioDetails/Related.vue:18
+msgctxt "media-details.related-error"
+msgid "Error fetching related media"
+msgstr ""
+
+#: src/components/MediaInfo/MediaReuse.vue:3
+msgctxt "media-details.reuse.title"
+msgid "Reuse content"
+msgstr ""
+
+msgctxt "media-details.reuse.license-header"
+msgid "License"
+msgstr ""
+
+msgctxt "media-details.reuse.tool-header"
+msgid "Public Domain"
+msgstr ""
+
+msgctxt "media-details.reuse.audio"
+msgid "Audio"
+msgstr ""
+
+#: src/components/MediaInfo/CopyLicense.vue:209
+msgctxt "media-details.reuse.image"
+msgid "Image"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MediaInfo/MediaLicense.vue:7
+msgctxt "media-details.reuse.attribution.main"
+msgid "This image was marked with a ###link### license."
+msgstr ""
+
+msgctxt "media-details.reuse.attribution.license"
+msgid "license."
+msgstr ""
+
+#: src/components/MediaInfo/CopyLicense.vue:4
+msgctxt "media-details.reuse.copy-license.title"
+msgid "Credit the Creator"
+msgstr ""
+
+msgctxt "media-details.reuse.copy-license.rich"
+msgid "Rich Text"
+msgstr ""
+
+msgctxt "media-details.reuse.copy-license.html"
+msgid "HTML"
+msgstr ""
+
+msgctxt "media-details.reuse.copy-license.plain"
+msgid "Plain text"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MediaInfo/CopyLicense.vue:32
+msgctxt "media-details.reuse.credit.text"
+msgid "###title######creator######marked-licensed######license######view-legal###"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MediaInfo/CopyLicense.vue:49
+msgctxt "media-details.reuse.credit.creator-text"
+msgid " by ###creator-name###"
+msgstr ""
+
+#: src/components/MediaInfo/CopyLicense.vue:71
+msgctxt "media-details.reuse.credit.marked"
+msgid "is marked with"
+msgstr ""
+
+#: src/components/MediaInfo/CopyLicense.vue:72
+msgctxt "media-details.reuse.credit.licensed"
+msgid "is licensed under"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MediaInfo/CopyLicense.vue:150
+msgctxt "media-details.reuse.credit.view-legal-text"
+msgid ". To view ###terms-copy###visit ###URL###"
+msgstr ""
+
+#: src/components/MediaInfo/CopyLicense.vue:154
+msgctxt "media-details.reuse.credit.terms-text"
+msgid "the terms,"
+msgstr ""
+
+#: src/components/MediaInfo/CopyLicense.vue:155
+msgctxt "media-details.reuse.credit.copy-text"
+msgid "a copy of this license,"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MediaInfo/MediaLicense.vue:44
+msgctxt "media-details.reuse.tool.content"
+msgid "Read more about the tool ###link###"
+msgstr ""
+
+#: src/components/MediaInfo/MediaLicense.vue:56
+msgctxt "media-details.reuse.tool.link"
+msgid "here"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/MediaInfo/MediaLicense.vue:24
+msgctxt "media-details.reuse.license.content"
+msgid "Read more about the license ###link###"
+msgstr ""
+
+#: src/components/MediaInfo/MediaLicense.vue:37
+msgctxt "media-details.reuse.license.link"
+msgid "here"
+msgstr ""
+
+msgctxt "browse-page.all-no-results"
+msgid "No results"
+msgstr ""
+
+msgctxt "browse-page.audio-no-results"
+msgid "No audio results"
+msgstr ""
+
+msgctxt "browse-page.image-no-results"
+msgid "No image results"
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.all-result-count"
+msgid "###localeCount### result"
+msgid_plural "###localeCount### results"
+msgstr[0] ""
+msgstr[1] ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.audio-result-count"
+msgid "###localeCount### audio result"
+msgid_plural "###localeCount### audio results"
+msgstr[0] ""
+msgstr[1] ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.image-result-count"
+msgid "###localeCount### image result"
+msgid_plural "###localeCount### image results"
+msgstr[0] ""
+msgstr[1] ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.all-result-count-more"
+msgid "Over ###localeCount### results"
+msgid_plural "Over ###localeCount### results"
+msgstr[0] ""
+msgstr[1] ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.audio-result-count-more"
+msgid "Over ###localeCount### audio results"
+msgid_plural "Over ###localeCount### audio results"
+msgstr[0] ""
+msgstr[1] ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.image-result-count-more"
+msgid "Over ###localeCount### image results"
+msgid_plural "Over ###localeCount### image results"
+msgstr[0] ""
+msgstr[1] ""
+
+#. Do not translate words between ### ###.
+#: src/components/ImageGrid/LoadMoreButton.vue:42
+msgctxt "browse-page.no-more"
+msgid "No more ###type### :("
+msgstr ""
+
+#: src/components/ImageGrid/LoadMoreButton.vue:45
+msgctxt "browse-page.load"
+msgid "Load more results"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/ImageGrid/ImageGrid.vue:53
+msgctxt "browse-page.fetching-error"
+msgid "Error fetching ###type###:"
+msgstr ""
+
+#: src/components/AppModal.vue:13
+msgctxt "browse-page.aria.close"
+msgid "close"
+msgstr ""
+
+#: src/components/VScrollButton.vue:3
+msgctxt "browse-page.aria.scroll"
+msgid "scroll to top"
+msgstr ""
+
+msgctxt "browse-page.aria.search"
+msgid "search"
+msgstr ""
+
+msgctxt "browse-page.aria.remove-filter"
+msgid "remove filter"
+msgstr ""
+
+#: src/components/VFilters/VFilterChecklist.vue:26
+msgctxt "browse-page.aria.license-explanation"
+msgid "license explanation"
+msgstr ""
+
+msgctxt "browse-page.aria.creator"
+msgid "search by creator"
+msgstr ""
+
+#: src/components/VSearchRating.vue:7
+msgctxt "browse-page.aria.relevance.yes"
+msgid "relevant result? answer: yes"
+msgstr ""
+
+#: src/components/VSearchRating.vue:16
+msgctxt "browse-page.aria.relevance.no"
+msgid "relevant result? answer: no"
+msgstr ""
+
+#: src/components/VSaferBrowsing.vue:9
+msgctxt "browse-page.safer-browsing.title"
+msgid "Safer Browsing"
+msgstr ""
+
+#: src/components/VSaferBrowsing.vue:21
+msgctxt "browse-page.safer-browsing.caption"
+msgid "By default, search results will not include results that have been reported as mature by users and sources."
+msgstr ""
+
+#: src/components/VSaferBrowsing.vue:33
+msgctxt "browse-page.safer-browsing.label"
+msgid "Show Mature Content"
+msgstr ""
+
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:8
+msgctxt "browse-page.license-description.title"
+msgid "License CC"
+msgstr ""
+
+msgctxt "browse-page.license-description.by"
+msgid "Credit the creator."
+msgstr ""
+
+msgctxt "browse-page.license-description.nc"
+msgid "Noncommercial uses only."
+msgstr ""
+
+msgctxt "browse-page.license-description.nd"
+msgid "No derivatives or adaptations permitted."
+msgstr ""
+
+msgctxt "browse-page.license-description.sa"
+msgid "Share adaptations under the same terms."
+msgstr ""
+
+msgctxt "browse-page.license-description.cc0"
+msgid "This work has been marked as dedicated to the public domain."
+msgstr ""
+
+msgctxt "browse-page.license-description.pdm"
+msgid "This work is marked as being in the public domain."
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "browse-page.search-form.placeholder"
+msgid "Search all ###type###"
+msgstr ""
+
+#: src/components/ImageGrid/ImageGrid.vue:52
+msgctxt "browse-page.search-form.image"
+msgid "images"
+msgstr ""
+
+#: src/pages/search/audio.vue:53
+msgctxt "browse-page.search-form.audio"
+msgid "audio"
+msgstr ""
+
+msgctxt "browse-page.search-form.video"
+msgid "videos"
+msgstr ""
+
+msgctxt "browse-page.search-form.all"
+msgid "content"
+msgstr ""
+
+msgctxt "browse-page.search-form.collection-placeholder"
+msgid "Search this collection"
+msgstr ""
+
+msgctxt "browse-page.search-form.button"
+msgid "Search"
+msgstr ""
+
+#: src/components/VSearchRating.vue:5
+msgctxt "browse-page.search-rating.content"
+msgid "Are these results relevant?"
+msgstr ""
+
+#: src/components/VSearchRating.vue:12
+msgctxt "browse-page.search-rating.yes"
+msgid "Yes"
+msgstr ""
+
+#: src/components/VSearchRating.vue:21
+msgctxt "browse-page.search-rating.no"
+msgid "No"
+msgstr ""
+
+#: src/components/VSearchRating.vue:26
+msgctxt "browse-page.search-rating.feedback-thanks"
+msgid "Thank you for the feedback!"
+msgstr ""
+
+#: src/components/VFilters/VSearchGridFilter.vue:11
+msgctxt "filter-list.filter-by"
+msgid "Filter results by"
+msgstr ""
+
+#: src/components/VFilters/VSearchGridFilter.vue:16
+msgctxt "filter-list.hide"
+msgid "Hide filters"
+msgstr ""
+
+#: src/components/VFilters/VSearchGridFilter.vue:45
+msgctxt "filter-list.clear"
+msgid "Clear filters"
+msgstr ""
+
+#: src/components/VFilters/VSearchGridFilter.vue:52
+msgctxt "filter-list.show"
+msgid "Show results"
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "filter-list.category-aria"
+msgid "filters list for ###categoryName### category"
+msgstr ""
+
+msgctxt "filters.title"
+msgid "Filters"
+msgstr ""
+
+#: src/components/VFilters/VFilterDisplay.vue:4
+msgctxt "filters.filter-by"
+msgid "Filter By"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VFilters/VFilterTag.vue:4
+msgctxt "filters.aria.remove-filter"
+msgid "Remove ###label### filter"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:12
+msgctxt "filters.license-explanation.tool"
+msgid "Read more about the tool ###link###"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:24
+msgctxt "filters.license-explanation.license"
+msgid "Read more about the license ###link###"
+msgstr ""
+
+#: src/components/VFilters/VLicenseExplanationTooltip.vue:20
+msgctxt "filters.license-explanation.link"
+msgid "here"
+msgstr ""
+
+#: src/components/VFilters/VFilterChecklist.vue:85
+msgctxt "filters.searchBy.title"
+msgid "Search By"
+msgstr ""
+
+msgctxt "filters.searchBy.creator"
+msgid "Creator"
+msgstr ""
+
+msgctxt "filters.creator.title"
+msgid "Search by Creator"
+msgstr ""
+
+msgctxt "filters.durations.title"
+msgid "Durations"
+msgstr ""
+
+msgctxt "filters.durations.short"
+msgid "Short"
+msgstr ""
+
+msgctxt "filters.durations.medium"
+msgid "Medium"
+msgstr ""
+
+msgctxt "filters.durations.long"
+msgid "Long"
+msgstr ""
+
+msgctxt "filters.mature.title"
+msgid "Search Settings"
+msgstr ""
+
+msgctxt "filters.mature.enable"
+msgid "Enable Mature Content"
+msgstr ""
+
+msgctxt "filters.sizes.title"
+msgid "Image Size"
+msgstr ""
+
+msgctxt "filters.sizes.small"
+msgid "Small"
+msgstr ""
+
+msgctxt "filters.sizes.medium"
+msgid "Medium"
+msgstr ""
+
+msgctxt "filters.sizes.large"
+msgid "Large"
+msgstr ""
+
+msgctxt "filters.aspect-ratios.title"
+msgid "Aspect Ratio"
+msgstr ""
+
+msgctxt "filters.aspect-ratios.tall"
+msgid "Tall"
+msgstr ""
+
+msgctxt "filters.aspect-ratios.wide"
+msgid "Wide"
+msgstr ""
+
+msgctxt "filters.aspect-ratios.square"
+msgid "Square"
+msgstr ""
+
+msgctxt "filters.image-extensions.title"
+msgid "File Type"
+msgstr ""
+
+msgctxt "filters.image-extensions.jpg"
+msgid "JPEGs"
+msgstr ""
+
+msgctxt "filters.image-extensions.png"
+msgid "PNGs"
+msgstr ""
+
+msgctxt "filters.image-extensions.gif"
+msgid "GIFs"
+msgstr ""
+
+msgctxt "filters.image-extensions.svg"
+msgid "SVGs"
+msgstr ""
+
+msgctxt "filters.audio-extensions.title"
+msgid "File Type"
+msgstr ""
+
+msgctxt "filters.audio-extensions.mp3"
+msgid "MP3s"
+msgstr ""
+
+msgctxt "filters.audio-extensions.ogg"
+msgid "OGGs"
+msgstr ""
+
+msgctxt "filters.audio-extensions.flac"
+msgid "FLACs"
+msgstr ""
+
+msgctxt "filters.image-categories.title"
+msgid "Image Type"
+msgstr ""
+
+msgctxt "filters.image-categories.photograph"
+msgid "Photographs"
+msgstr ""
+
+msgctxt "filters.image-categories.illustration"
+msgid "Illustrations"
+msgstr ""
+
+msgctxt "filters.image-categories.digitized-artwork"
+msgid "Digitized Artworks"
+msgstr ""
+
+msgctxt "filters.audio-categories.title"
+msgid "Audio Category"
+msgstr ""
+
+msgctxt "filters.audio-categories.music"
+msgid "Music"
+msgstr ""
+
+msgctxt "filters.audio-categories.sound-effects"
+msgid "Sound Effects"
+msgstr ""
+
+msgctxt "filters.audio-categories.podcast"
+msgid "Podcast"
+msgstr ""
+
+msgctxt "filters.audio-providers.title"
+msgid "Source"
+msgstr ""
+
+msgctxt "filters.image-providers.title"
+msgid "Source"
+msgstr ""
+
+msgctxt "filters.license-types.title"
+msgid "Use"
+msgstr ""
+
+msgctxt "filters.license-types.commercial"
+msgid "Use commercially"
+msgstr ""
+
+msgctxt "filters.license-types.modification"
+msgid "Modify or adapt"
+msgstr ""
+
+msgctxt "filters.licenses.title"
+msgid "License or Public Domain"
+msgstr ""
+
+msgctxt "filters.licenses.cc0"
+msgid "CC0"
+msgstr ""
+
+msgctxt "filters.licenses.pdm"
+msgid "Public Domain Mark"
+msgstr ""
+
+msgctxt "filters.licenses.by"
+msgid "BY"
+msgstr ""
+
+msgctxt "filters.licenses.by-sa"
+msgid "BY-SA"
+msgstr ""
+
+msgctxt "filters.licenses.by-nc"
+msgid "BY-NC"
+msgstr ""
+
+msgctxt "filters.licenses.by-nd"
+msgid "BY-ND"
+msgstr ""
+
+msgctxt "filters.licenses.by-nc-sa"
+msgid "BY-NC-SA"
+msgstr ""
+
+msgctxt "filters.licenses.by-nc-nd"
+msgid "BY-NC-ND"
+msgstr ""
+
+msgctxt "search-tab.all"
+msgid "All"
+msgstr ""
+
+msgctxt "search-tab.image"
+msgid "Image"
+msgstr ""
+
+msgctxt "search-tab.audio"
+msgid "Audio"
+msgstr ""
+
+msgctxt "search-tab.video"
+msgid "Video"
+msgstr ""
+
+#: src/layouts/error.vue:5
+msgctxt "error.not-found"
+msgid "Page Not Found"
+msgstr ""
+
+#: src/layouts/error.vue:7
+msgctxt "error.occurred"
+msgid "An error occurred"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/image/_id.vue:54
+msgctxt "error.image-not-found"
+msgid "Couldn't find image with id ###id###"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/audio/_id.vue:70
+msgctxt "error.media-not-found"
+msgid "Couldn't find ###mediaType### with id ###id###"
+msgstr ""
+
+msgctxt "error.image"
+msgid "image"
+msgstr ""
+
+msgctxt "error.audio"
+msgid "audio"
+msgstr ""
+
+msgctxt "collections.title"
+msgid "Browse collections"
+msgstr ""
+
+msgctxt "collections.museum"
+msgid "Museum Collections"
+msgstr ""
+
+msgctxt "collections.other"
+msgid "Other Collections"
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "collections.collection-size"
+msgid "Collection size: ###count### images"
+msgstr ""
+
+msgctxt "extension.title"
+msgid "Web extension"
+msgstr ""
+
+#: src/pages/extension.vue:61
+msgctxt "extension.conclusion"
+msgid "Have your favourite content while browsing the web"
+msgstr ""
+
+msgctxt "extension.features.use.heading"
+msgid "Use the image and give attribution to the creator easily"
+msgstr ""
+
+msgctxt "extension.features.use.content"
+msgid "Download the image and paste the attribution information on compatible formats."
+msgstr ""
+
+msgctxt "extension.features.bookmark.heading"
+msgid "Bookmark your favorite images without breaking your navigation"
+msgstr ""
+
+msgctxt "extension.features.bookmark.content"
+msgid "Add images to your bookmarks and use them whenever you want without interrupting your navigation. "
+msgstr ""
+
+msgctxt "extension.features.search.heading"
+msgid "Search and filter openly-licensed and public domain content"
+msgstr ""
+
+msgctxt "extension.features.search.content"
+msgid "Browse through millions of content and use filters to find what best meets your needs."
+msgstr ""
+
+#: src/pages/extension.vue:7
+msgctxt "extension.description.intro"
+msgid "A browser extension that lets you search and use open-licensed and public domain images."
+msgstr ""
+
+#: src/pages/feedback.vue:6
+msgctxt "feedback.title"
+msgid "Feedback"
+msgstr ""
+
+msgctxt "feedback.improve"
+msgid "Help us Improve"
+msgstr ""
+
+msgctxt "feedback.report"
+msgid "Report a Bug"
+msgstr ""
+
+#: src/pages/feedback.vue:54
+msgctxt "feedback.loading"
+msgid "Loading..."
+msgstr ""
+
+msgctxt "feedback.aria.cc-usability"
+msgid "slack cc-usability channel"
+msgstr ""
+
+msgctxt "feedback.aria.improve"
+msgid "help us improve form"
+msgstr ""
+
+msgctxt "feedback.aria.report"
+msgid "report a bug form"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/feedback.vue:8
+msgctxt "feedback.description.content"
+msgid "Thank you for using Openverse! We welcome your ideas for improving the tool below. To provide regular feedback, join the ###openverse### channel in the ###making-wordpress### Slack workspace."
+msgstr ""
+
+#: src/pages/feedback.vue:14
+msgctxt "feedback.description.openverse"
+msgid "#openverse"
+msgstr ""
+
+#: src/pages/feedback.vue:19
+msgctxt "feedback.description.making-wordpress"
+msgid "Making WordPress"
+msgstr ""
+
+#: src/pages/search-help.vue:6
+msgctxt "search-guide.title"
+msgid "Openverse Syntax Guide"
+msgstr ""
+
+#: src/pages/search-help.vue:9
+msgctxt "search-guide.intro"
+msgid "When you search, you can enter special symbols or words to your search term to make your search results more precise."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:217
+msgctxt "search-guide.example.fuzziness.description"
+msgid "You can use ###highlight### to specify some fuzzy logic to the term according to the ###link### — the number of one character changes that need to be made to one string to make it the same as another string."
+msgstr ""
+
+#: src/pages/search-help.vue:227
+msgctxt "search-guide.example.fuzziness.link-text"
+msgid "Levenshtein Edit Distance"
+msgstr ""
+
+#: src/pages/search-help.vue:239
+msgctxt "search-guide.example.fuzziness.aria-label"
+msgid "theatre tilde 1"
+msgstr ""
+
+#: src/pages/search-help.vue:242
+msgctxt "search-guide.example.fuzziness.example"
+msgid "theatre~1"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:232
+msgctxt "search-guide.example.fuzziness.content"
+msgid "Example: ###link######br### This will search for images that match strings close to the term 'theatre' with a difference of one character. Results might include terms with different spellings like 'theater'."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:189
+msgctxt "search-guide.example.precedence.description"
+msgid "You can use parentheses ###highlight### to specify precedence of terms or combine more complex queries."
+msgstr ""
+
+#: src/pages/search-help.vue:206
+msgctxt "search-guide.example.precedence.aria-label"
+msgid "dogs plus open parenthesis corgis vertical bar labrador close parenthesis"
+msgstr ""
+
+#: src/pages/search-help.vue:209
+msgctxt "search-guide.example.precedence.example"
+msgid "dogs + (corgis | labrador)"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:199
+msgctxt "search-guide.example.precedence.content"
+msgid "Example: ###link######br### This will search for images that match dogs that are either corgis or labrador."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:163
+msgctxt "search-guide.example.prefix.description"
+msgid "You can use the ###operator-name### to mark a prefix term. This will match anything after the *."
+msgstr ""
+
+#: src/pages/search-help.vue:170
+msgctxt "search-guide.example.prefix.operator-name"
+msgid "operator (wildcard)"
+msgstr ""
+
+msgctxt "search-guide.example.prefix.operator-aria-label"
+msgid "star operator (wildcard)"
+msgstr ""
+
+#: src/pages/search-help.vue:169
+msgctxt "search-guide.example.prefix.aria-label"
+msgid "net star symbol"
+msgstr ""
+
+#: src/pages/search-help.vue:181
+msgctxt "search-guide.example.prefix.example"
+msgid "net*"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:175
+msgctxt "search-guide.example.prefix.content"
+msgid "Example: ###link######br### This will search for images matching anything with 'net'. This might include 'network', 'Netflix', 'Netherlands', etc.."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:134
+msgctxt "search-guide.example.negate.description"
+msgid "You can use the ###operator### to exclude a search term from the results."
+msgstr ""
+
+#: src/pages/search-help.vue:144
+msgctxt "search-guide.example.negate.operator-name"
+msgid "operator (signifies NOT)"
+msgstr ""
+
+#: src/pages/search-help.vue:142
+msgctxt "search-guide.example.negate.operator-aria-label"
+msgid "minus operator (signifies NOT)"
+msgstr ""
+
+#: src/pages/search-help.vue:152
+msgctxt "search-guide.example.negate.aria-label"
+msgid "dog minus pug"
+msgstr ""
+
+#: src/pages/search-help.vue:155
+msgctxt "search-guide.example.negate.example"
+msgid "dog -pug"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:149
+msgctxt "search-guide.example.negate.content"
+msgid "Example: ###link######br### This will search for images related to dog but won't include results related to 'pug'"
+msgstr ""
+
+#. Do not translate words between ### ###.
+msgctxt "search-guide.example.or.description"
+msgid "Example: ###link######br### This will search for images related to dog or cat, but not necessarily both."
+msgstr ""
+
+#: src/pages/search-help.vue:123
+msgctxt "search-guide.example.or.aria-label"
+msgid "dog vertical bar cat"
+msgstr ""
+
+#: src/pages/search-help.vue:126
+msgctxt "search-guide.example.or.example"
+msgid "dog|cat"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:106
+msgctxt "search-guide.example.and.description"
+msgid "Example: ###link######br### This will search for images related to both dog and cat."
+msgstr ""
+
+#: src/pages/search-help.vue:109
+msgctxt "search-guide.example.and.aria-label"
+msgid "dog plus cat"
+msgstr ""
+
+#: src/pages/search-help.vue:112
+msgctxt "search-guide.example.and.example"
+msgid "dog+cat"
+msgstr ""
+
+#: src/pages/search-help.vue:29
+msgctxt "search-guide.combine.title"
+msgid "Combining terms"
+msgstr ""
+
+#: src/pages/search-help.vue:33
+msgctxt "search-guide.combine.description"
+msgid "If you want to combine terms, you can use the following operators to perform more complex queries"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:37
+msgctxt "search-guide.combine.and"
+msgid "###symbol### signifies AND operation"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:46
+msgctxt "search-guide.combine.or"
+msgid "###symbol### signifies OR operation"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:57
+msgctxt "search-guide.combine.negate"
+msgid "###symbol### negates a single token"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:66
+msgctxt "search-guide.combine.prefix"
+msgid "###symbol### at the end of a term signifies a prefix query"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:75
+msgctxt "search-guide.combine.precedence"
+msgid "###open### and ###close### signify precedence"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:95
+msgctxt "search-guide.combine.fuzziness"
+msgid "###symbol### after a word signifies edit distance (fuzziness)"
+msgstr ""
+
+#: src/pages/search-help.vue:98
+msgctxt "search-guide.combine.aria-labels.fuzziness"
+msgid "tilde N"
+msgstr ""
+
+#: src/pages/search-help.vue:82
+msgctxt "search-guide.combine.aria-labels.open"
+msgid "open parenthesis"
+msgstr ""
+
+#: src/pages/search-help.vue:89
+msgctxt "search-guide.combine.aria-labels.close"
+msgid "close parenthesis"
+msgstr ""
+
+#: src/pages/search-help.vue:69
+msgctxt "search-guide.combine.aria-labels.star"
+msgid "star symbol"
+msgstr ""
+
+#: src/pages/search-help.vue:60
+msgctxt "search-guide.combine.aria-labels.minus"
+msgid "minus symbol"
+msgstr ""
+
+#: src/pages/search-help.vue:40
+msgctxt "search-guide.combine.aria-labels.plus"
+msgid "plus symbol"
+msgstr ""
+
+#: src/pages/search-help.vue:50
+msgctxt "search-guide.combine.aria-labels.vertical-bar"
+msgid "vertical bar symbol"
+msgstr ""
+
+#: src/pages/search-help.vue:13
+msgctxt "search-guide.exact.title"
+msgid "Search for an exact match"
+msgstr ""
+
+#: src/pages/search-help.vue:19
+msgctxt "search-guide.exact.aria-label"
+msgid "quote unquote Claude Monet"
+msgstr ""
+
+#: src/pages/search-help.vue:22
+msgctxt "search-guide.exact.claude-monet"
+msgid "\"Claude Monet\""
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/search-help.vue:15
+msgctxt "search-guide.exact.content"
+msgid "Put a word or phrase inside quotes. For example, ###link###."
+msgstr ""
+
+#: src/pages/meta-search.vue:6
+msgctxt "meta-search-page.title"
+msgid "Meta Search"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:10
+msgctxt "meta-search-page.intro"
+msgid "Openverse is built on top of a catalog that indexes CC-licensed and public domain content from selected sources. Learn more about our ###link###."
+msgstr ""
+
+#: src/pages/meta-search.vue:13
+msgctxt "meta-search-page.link"
+msgid "sources"
+msgstr ""
+
+#: src/pages/meta-search.vue:17
+msgctxt "meta-search-page.license"
+msgid "The internet is a big place! There are plenty of search portals and collections, hosting CC-licensed and public domain content, which we aren’t able to index or surface results from within the Openverse interface. These are important sources of CC-licensed and public domain content, and we want to make sure that you are able to find the best openly licensed materials possible, regardless of where they are located."
+msgstr ""
+
+#: src/pages/meta-search.vue:19
+msgctxt "meta-search-page.content"
+msgid "What content types can I search for using the Meta Search feature?"
+msgstr ""
+
+#: src/pages/meta-search.vue:21
+msgctxt "meta-search-page.content-types"
+msgid "Meta Search on Openverse currently supports image, audio, and video search on external sites."
+msgstr ""
+
+#: src/pages/meta-search.vue:49
+msgctxt "meta-search-page.use"
+msgid " Use "
+msgstr ""
+
+#: src/pages/meta-search.vue:99
+msgctxt "meta-search-page.why.title"
+msgid "Why did you build this?"
+msgstr ""
+
+#: src/pages/meta-search.vue:101
+msgctxt "meta-search-page.why.content"
+msgid "For many years, CC has offered its users a dedicated search portal for searching platforms that have CC licensing filters built in. These platforms included Europeana, Google Images, Flickr, Jamendo, Open Clip Art Library, SpinXpress, Wikimedia Commons, YouTube, ccMixter, and SoundCloud. The search experience looked like this:"
+msgstr ""
+
+#: src/pages/meta-search.vue:103
+msgctxt "meta-search-page.why.new"
+msgid "For users of the legacy CC Meta Search site, the Meta Search feature on Openverse will look familiar. The goal was to ensure that the functionality is not lost, but is updated and embedded within our new search engine for openly licensed content. In addition, the Meta Search feature builds on this functionality, allowing us to quickly add new sources to Meta Search as we discover them, and support new content types in the future, as we expand."
+msgstr ""
+
+#: src/pages/meta-search.vue:108
+msgctxt "meta-search-page.why.aria-label"
+msgid "feedback"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:105
+msgctxt "meta-search-page.why.feedback-suggestions"
+msgid "We hope you enjoy, and if you have suggestions for improvement, leave us ###feedback###."
+msgstr ""
+
+#: src/pages/meta-search.vue:110
+msgctxt "meta-search-page.why.feedback-link"
+msgid "feedback"
+msgstr ""
+
+#: src/pages/meta-search.vue:82
+msgctxt "meta-search-page.new.title"
+msgid "Can I suggest new sources for Meta Search?"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:84
+msgctxt "meta-search-page.new.content"
+msgid "Yes, please! Create an ###issue### in our GitHub repository or send us an ###email### and tell us about the new sources you’d like to see included."
+msgstr ""
+
+#: src/pages/meta-search.vue:89
+msgctxt "meta-search-page.new.issue"
+msgid "issue"
+msgstr ""
+
+#: src/pages/meta-search.vue:94
+msgctxt "meta-search-page.new.email"
+msgid "email"
+msgstr ""
+
+#: src/pages/meta-search.vue:66
+msgctxt "meta-search-page.audio-video.title"
+msgid "How does the Meta Search feature work for non-indexed media types?"
+msgstr ""
+
+#: src/pages/meta-search.vue:76
+msgctxt "meta-search-page.audio-video.demo-label"
+msgid "Layout of Meta Search for non-indexed media type, like video"
+msgstr ""
+
+#: src/pages/meta-search.vue:68
+msgctxt "meta-search-page.audio-video.content"
+msgid "Openverse does not yet support built-in search for some media types, such as videos. For these media types, click on the appropriate tab and you’ll see sources where you can find CC-licensed content."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:69
+msgctxt "meta-search-page.audio-video.filter"
+msgid "The Filters bar on the left includes the ###use### filter, which may be supported by some meta search sources. Apply these before clicking on the button for the external source you’d like to search."
+msgstr ""
+
+#: src/pages/meta-search.vue:24
+msgctxt "meta-search-page.images.title"
+msgid "How does the Meta Search feature work for indexed media types?"
+msgstr ""
+
+#: src/pages/meta-search.vue:59
+msgctxt "meta-search-page.images.demo-label"
+msgid "Layout of Meta Search for indexed media type, like images"
+msgstr ""
+
+#: src/pages/meta-search.vue:26
+msgctxt "meta-search-page.images.content"
+msgid "Openverse supports built-in search for some media types, such as images. When you enter a query on the Openverse homepage, a page of results will be displayed. Scrolling to the bottom of the page, you have two choices:"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:30
+msgctxt "meta-search-page.images.continue"
+msgid "###load-more###, and continue browsing in Openverse."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:37
+msgctxt "meta-search-page.images.not-finding"
+msgid "See the section “###not-finding###” below the results."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/meta-search.vue:47
+msgctxt "meta-search-page.images.info"
+msgid "The “###not-finding###” section lists other sources of CC-licensed and public domain content. Your search query will be preloaded, and if supported, you can select a ###use### filter to proactively filter your results. Click on the button for the external source you’d like to search, and your results will open in a new tab."
+msgstr ""
+
+#: src/pages/sources.vue:6
+msgctxt "sources.title"
+msgid "Sources"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/sources.vue:77
+msgctxt "sources.detail"
+msgid "Clicking on a ###single-name### allows you to browse and filter items within that source."
+msgstr ""
+
+#: src/pages/sources.vue:80
+msgctxt "sources.single-name"
+msgid "Source"
+msgstr ""
+
+#: src/pages/sources.vue:65
+msgctxt "sources.suggestions"
+msgid "We appreciate suggestions for new sources from our community of users."
+msgstr ""
+
+#: src/pages/sources.vue:73
+msgctxt "sources.issue-button"
+msgid "Suggest a new source"
+msgstr ""
+
+#: src/pages/sources.vue:44
+msgctxt "sources.new-content.next"
+msgid "How do we decide what sources to add next?"
+msgstr ""
+
+#: src/pages/sources.vue:47
+msgctxt "sources.new-content.integrate"
+msgid "We have a never ending list of possible sources to research prior to integration. We ask ourselves questions like:"
+msgstr ""
+
+#: src/pages/sources.vue:52
+msgctxt "sources.new-content.impact"
+msgid " What is the impact or importance of this source to our users? If it exists within a provider like Wikimedia Commons, is it valuable for our users to be able to filter by this source directly?"
+msgstr ""
+
+#: src/pages/sources.vue:55
+msgctxt "sources.new-content.reuse"
+msgid "Is licensing and attribution information clearly displayed to enable confident reuse?"
+msgstr ""
+
+#: src/pages/sources.vue:58
+msgctxt "sources.new-content.total-items"
+msgid "How many new total items or new types of items can we bring to our users through this integration? Some sources are direct integrations, while others may be a source within a source."
+msgstr ""
+
+#: src/pages/sources.vue:10
+msgctxt "sources.cc-content.where"
+msgid "Where does the content on Openverse come from?"
+msgstr ""
+
+#: src/pages/sources.vue:13
+msgctxt "sources.cc-content.content"
+msgid "There is openly licensed content hosted on millions of domains across the breadth of the internet. Our team systematically identifies providers hosting CC-licensed content. If it’s a good fit, we index that content and make it discoverable through Openverse."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/sources.vue:15
+msgctxt "sources.cc-content.provider"
+msgid "Some providers have multiple different groupings of content within them. ###flickr### has sources ranging from NASA to personal photography. The ###smithsonian### comprises a dozen, diverse collections. Wikimedia Commons runs the gamut in terms of content, and is used by several Galleries, Libraries, Archives, and Museums highlighting some or all of their digitized collections."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/sources.vue:27
+msgctxt "sources.cc-content.europeana"
+msgid "Openverse is especially grateful for the work of ###link###, an organization that works to digitize and make discoverable cultural heritage works across Europe. Openverse is able to index hundreds of valuable sources, through a single integration with the ###link-api###."
+msgstr ""
+
+#: src/pages/sources.vue:30
+msgctxt "sources.cc-content.europeana-link"
+msgid "Europeana"
+msgstr ""
+
+#: src/pages/sources.vue:37
+msgctxt "sources.cc-content.europeana-api"
+msgid "Europeana API"
+msgstr ""
+
+#: src/pages/sources.vue:23
+msgctxt "sources.cc-content.smithsonian"
+msgid "Smithsonian Institute"
+msgstr ""
+
+#: src/pages/sources.vue:18
+msgctxt "sources.cc-content.flickr"
+msgid "Flickr"
+msgstr ""
+
+#: src/pages/sources.vue:97
+msgctxt "sources.providers.source"
+msgid "Source"
+msgstr ""
+
+#: src/pages/sources.vue:107
+msgctxt "sources.providers.domain"
+msgid "Domain"
+msgstr ""
+
+#: src/pages/sources.vue:117
+msgctxt "sources.providers.item"
+msgid "Total items"
+msgstr ""
+
+#: src/pages/about.vue:6
+msgctxt "about.title"
+msgid "About Openverse"
+msgstr ""
+
+#: src/pages/about.vue:14
+msgctxt "about.aria.common-crawl"
+msgid "Common Crawl"
+msgstr ""
+
+#: src/pages/about.vue:24
+msgctxt "about.aria.meta"
+msgid "meta search"
+msgstr ""
+
+#: src/pages/about.vue:59
+msgctxt "about.aria.projects"
+msgid "Openverse projects"
+msgstr ""
+
+#: src/pages/about.vue:52
+msgctxt "about.aria.community"
+msgid "Make WordPress community"
+msgstr ""
+
+#: src/pages/about.vue:86
+msgctxt "about.aria.terms"
+msgid "Openverse terms of use"
+msgstr ""
+
+#: src/pages/sources.vue:85
+msgctxt "about.aria.sources-table"
+msgid "sources table"
+msgstr ""
+
+#: src/pages/about.vue:69
+msgctxt "about.aria.creative-commons"
+msgid "Creative Commons"
+msgstr ""
+
+#: src/pages/about.vue:76
+msgctxt "about.aria.wordpress"
+msgid "WordPress"
+msgstr ""
+
+#: src/pages/about.vue:31
+msgctxt "about.aria.search"
+msgid "Openverse"
+msgstr ""
+
+#: src/pages/about.vue:38
+msgctxt "about.aria.api"
+msgid "Openverse API"
+msgstr ""
+
+#: src/pages/about.vue:45
+msgctxt "about.aria.catalog"
+msgid "Openverse Catalog"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/about.vue:83
+msgctxt "about.declaration.content"
+msgid "Please note that Openverse does not verify whether the images are properly CC licensed, or whether the attribution and other licensing information we have aggregated is accurate or complete. Please independently verify the licensing status and attribution information before reusing the content. For more details, read the ###terms###."
+msgstr ""
+
+#: src/pages/about.vue:88
+msgctxt "about.declaration.terms"
+msgid "Openverse Terms of Use"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/about.vue:66
+msgctxt "about.transfer.content"
+msgid "Openverse is the successor to CC Search which was launched by Creative Commons in 2019, after its migration to WordPress in 2021. You can read more about this transition in the official announcements from ###creative-commons### and ###wordpress###. We remain committed to our goal of tackling discoverability and accessibility of open access media."
+msgstr ""
+
+#: src/pages/about.vue:71
+msgctxt "about.transfer.creative-commons"
+msgid "Creative Commons"
+msgstr ""
+
+#: src/pages/about.vue:78
+msgctxt "about.transfer.wordpress"
+msgid "WordPress"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/about.vue:21
+msgctxt "about.planning.content"
+msgid "Currently Openverse only searches images, with search for audio and video provided through ###meta###. But we plan to add additional media types such as open texts and audio, with the ultimate goal of providing access to all 1.4 billion CC licensed and public domain works on the web. All of our code is open source (###search###, ###api###, ###catalog###) and we ###community###. You can see what ###working###."
+msgstr ""
+
+#: src/pages/about.vue:26
+msgctxt "about.planning.meta"
+msgid "Meta Search"
+msgstr ""
+
+#: src/pages/about.vue:33
+msgctxt "about.planning.search"
+msgid "Openverse"
+msgstr ""
+
+#: src/pages/about.vue:40
+msgctxt "about.planning.api"
+msgid "Openverse API"
+msgstr ""
+
+#: src/pages/about.vue:47
+msgctxt "about.planning.catalog"
+msgid "Openverse Catalog"
+msgstr ""
+
+#: src/pages/about.vue:54
+msgctxt "about.planning.community"
+msgid "welcome community contribution"
+msgstr ""
+
+#: src/pages/about.vue:61
+msgctxt "about.planning.working"
+msgid "we’re currently working on"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/pages/about.vue:11
+msgctxt "about.collection.content"
+msgid "Openverse searches across more than 300 million images from open APIs and the ###common-crawl### dataset. It goes beyond simple search to aggregate results across multiple public repositories into a single catalog, and facilitates reuse through features like machine-generated tags and one-click attribution."
+msgstr ""
+
+#: src/pages/about.vue:16
+msgctxt "about.collection.common-crawl"
+msgid "Common Crawl"
+msgstr ""
+
+#: src/pages/about.vue:9
+msgctxt "about.description.content"
+msgid "Openverse is a tool that allows openly licensed and public domain works to be discovered and used by everyone."
+msgstr ""
+
+#: src/components/FooterSection.vue:7
+msgctxt "footer.aria.contact"
+msgid "contact info"
+msgstr ""
+
+#: src/components/FooterSection.vue:55
+msgctxt "footer.aria.donate"
+msgid "donate section"
+msgstr ""
+
+#: src/components/FooterSection.vue:59
+msgctxt "footer.donate.work"
+msgid "Our work relies on you!"
+msgstr ""
+
+#: src/components/FooterSection.vue:61
+msgctxt "footer.donate.help"
+msgid "Help us keep the internet free and open."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/FooterSection.vue:17
+msgctxt "footer.caption.label"
+msgid "Except where otherwise ###noted###, content on this site is licensed under a ###attribution###. ###icons###"
+msgstr ""
+
+#: src/components/FooterSection.vue:23
+msgctxt "footer.caption.noted"
+msgid "noted"
+msgstr ""
+
+#: src/components/FooterSection.vue:32
+msgctxt "footer.caption.attribution"
+msgid "Creative Commons Attribution 4.0 International license"
+msgstr ""
+
+#: src/components/FooterSection.vue:42
+msgctxt "footer.caption.icons"
+msgid "Icons by Font Awesome."
+msgstr ""
+
+msgctxt "footer.navigation.contact"
+msgid "Contact"
+msgstr ""
+
+msgctxt "footer.navigation.privacy"
+msgid "Privacy"
+msgstr ""
+
+msgctxt "footer.navigation.policies"
+msgid "Policies"
+msgstr ""
+
+msgctxt "footer.navigation.terms"
+msgid "Terms"
+msgstr ""
+
+#: src/components/NavSection.vue:71
+msgctxt "header.about-nav-item"
+msgid "Our Story"
+msgstr ""
+
+#: src/components/NavSection.vue:79
+msgctxt "header.source-nav-item"
+msgid "Sources"
+msgstr ""
+
+#: src/components/NavSection.vue:103
+msgctxt "header.search-guide-nav-item"
+msgid "Search Guide"
+msgstr ""
+
+#: src/components/NavSection.vue:111
+msgctxt "header.meta-search-nav-item"
+msgid "Meta Search"
+msgstr ""
+
+#: src/components/NavSection.vue:119
+msgctxt "header.feedback-nav-item"
+msgid "Feedback"
+msgstr ""
+
+msgctxt "header.support-nav-item"
+msgid "Support Us"
+msgstr ""
+
+#: src/components/NavSection.vue:134
+msgctxt "header.extension-nav-item"
+msgid "Web extension"
+msgstr ""
+
+#: src/components/NavSection.vue:173
+msgctxt "header.placeholder"
+msgid "Search all content"
+msgstr ""
+
+#: src/components/NavSection.vue:88
+msgctxt "header.licenses-nav-item"
+msgid "The Licenses"
+msgstr ""
+
+#: src/components/NavSection.vue:63
+msgctxt "header.about-tab"
+msgid "About"
+msgstr ""
+
+#: src/components/NavSection.vue:95
+msgctxt "header.resources-tab"
+msgid "Resources"
+msgstr ""
+
+#: src/components/NavSection.vue:128
+msgctxt "header.api-nav-item"
+msgid "API"
+msgstr ""
+
+#: src/components/VHeader/VHeader.vue:145
+msgctxt "header.loading"
+msgid "Loading..."
+msgstr ""
+
+#: src/components/VHeader/VFilterButton.vue:87
+msgctxt "header.filter-button.simple"
+msgid "Filters"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VHeader/VFilterButton.vue:82
+msgctxt "header.filter-button.with-count"
+msgid "###count### Filter | ###count### Filters"
+msgstr ""
+
+msgctxt "header.notification.text"
+msgid "{example_notification_text}"
+msgstr ""
+
+msgctxt "header.notification.dismiss"
+msgid "Dismiss"
+msgstr ""
+
+msgctxt "header.notification.okay"
+msgid "OK"
+msgstr ""
+
+#: src/components/NavSection.vue:6
+msgctxt "header.aria.primary"
+msgid "primary"
+msgstr ""
+
+#: src/components/NavSection.vue:23
+msgctxt "header.aria.menu"
+msgid "menu"
+msgstr ""
+
+#: src/components/NavSection.vue:43
+msgctxt "header.aria.search"
+msgid "search"
+msgstr ""
+
+#: src/components/NavSection.vue:50
+msgctxt "header.aria.sr-search"
+msgid "sr search button"
+msgstr ""
+
+msgctxt "notification.dismiss"
+msgid "Dismiss"
+msgstr ""
+
+msgctxt "notification.okay"
+msgid "OK"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/TranslationStatusBanner.vue:7
+msgctxt "notification.translation.text"
+msgid "The translation for ###locale### locale is incomplete. Help us get to 100 percent by ###link###."
+msgstr ""
+
+#: src/components/TranslationStatusBanner.vue:10
+msgctxt "notification.translation.link"
+msgid "contributing a translation"
+msgstr ""
+
+msgctxt "hero.brand"
+msgid "Openverse"
+msgstr ""
+
+#: src/components/VHeroSection.vue:6
+msgctxt "hero.title"
+msgid "Search for content to reuse"
+msgstr ""
+
+#: src/components/VHeroSection.vue:9
+msgctxt "hero.subtitle"
+msgid "Browse over 500 million images, available for reuse"
+msgstr ""
+
+#: src/components/SearchTypeToggle.vue:19
+msgctxt "hero.search-type.audio"
+msgid "Audio"
+msgstr ""
+
+#: src/components/SearchTypeToggle.vue:10
+msgctxt "hero.search-type.image"
+msgid "Images"
+msgstr ""
+
+#: src/components/VHeroSection.vue:40
+msgctxt "hero.search-type.prompt"
+msgid "I would like to find:"
+msgstr ""
+
+#: src/components/VHeroSection.vue:24
+msgctxt "hero.aria.search"
+msgid "search"
+msgstr ""
+
+#: src/components/VHeroSection.vue:50
+msgctxt "hero.aria.caption"
+msgid "about cc licenses"
+msgstr ""
+
+#: src/components/SearchTypeToggle.vue:2
+msgctxt "hero.aria.search-type"
+msgid "search type"
+msgstr ""
+
+#: src/components/LocaleSelector.vue:3
+msgctxt "hero.locale.label"
+msgid "Languages available"
+msgstr ""
+
+msgctxt "hero.locale.icon"
+msgid "locale"
+msgstr ""
+
+#: src/components/HomeLicenseFilter.vue:4
+msgctxt "hero.license-filter.label"
+msgid "I want something I can"
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/components/VHeroSection.vue:45
+msgctxt "hero.caption.content"
+msgid "All our content is under Creative Commons licenses or in the public domain. ###link### about CC licenses and tools."
+msgstr ""
+
+#: src/components/VHeroSection.vue:53
+msgctxt "hero.caption.link"
+msgid "Learn more"
+msgstr ""
+
+#: src/components/VHeroSection.vue:28
+msgctxt "hero.search.placeholder"
+msgid "Search all content"
+msgstr ""
+
+#: src/components/VHeroSection.vue:35
+msgctxt "hero.search.button"
+msgid "Search"
+msgstr ""
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 27a3b18900..21e0dd819f 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -10,7 +10,6 @@
         ><VSearchGridFilter @close="onToggleSearchGridFilter"
       /></Component>
       <div class="column search-grid-ctr">
-        <SearchGridForm @onSearchFormSubmit="onSearchFormSubmit" />
         <SearchTypeTabs class="mb-4" />
         <VFilterDisplay v-show="shouldShowFilterTags" />
         <VSearchGrid
diff --git a/tailwind.config.js b/tailwind.config.js
index 1b2e90c98d..bc8f8ccc6b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,10 @@ module.exports = {
   ],
   theme: {
     screens: Object.fromEntries(
-      Array.from(SCREEN_SIZES, ([name, width]) => [name, `${width}px`])
+      Array.from(SCREEN_SIZES, ([name, width]) => [
+        name,
+        `${width}px`,
+      ]).reverse()
     ),
     colors: {
       // Accents
diff --git a/test/unit/specs/components/InputField/input-field.spec.js b/test/unit/specs/components/InputField/input-field.spec.js
index 7bb4a736d5..52a778dc32 100644
--- a/test/unit/specs/components/InputField/input-field.spec.js
+++ b/test/unit/specs/components/InputField/input-field.spec.js
@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/vue'
 
-import InputField from '~/components/InputField/InputField.vue'
+import VInputField from '~/components/VInputField/VInputField.vue'
 
-describe('InputField', () => {
-  it('should render an `input` element with type="text"', () => {
-    render(InputField, {
+describe('VInputField', () => {
+  xit('should render an `input` element with type="text"', () => {
+    render(VInputField, {
       attrs: {
         placeholder: 'Enter some text',
       },
@@ -13,15 +13,15 @@ describe('InputField', () => {
         labelText: 'Label',
       },
     })
-
+    screen.debug()
     const element = screen.getByPlaceholderText('Enter some text')
 
     expect(element.tagName).toBe('INPUT')
     expect(element).toHaveAttribute('type', 'text')
   })
 
-  it('should allow changing the type', () => {
-    render(InputField, {
+  xit('should allow changing the type', () => {
+    render(VInputField, {
       attrs: {
         placeholder: 'Enter some number',
         type: 'number',
@@ -38,7 +38,7 @@ describe('InputField', () => {
   })
 
   it('should set the ID on the `input` to allow attaching labels', () => {
-    render(InputField, {
+    render(VInputField, {
       attrs: {
         placeholder: 'Enter some text',
       },
@@ -54,7 +54,7 @@ describe('InputField', () => {
   })
 
   it('should render the label text connected to the input field if specified', () => {
-    render(InputField, {
+    render(VInputField, {
       propsData: {
         fieldId: 'input-id',
         labelText: 'Label',
diff --git a/test/unit/specs/components/header-section.spec.js b/test/unit/specs/components/header-section.spec.js
deleted file mode 100644
index 7c1c239a9f..0000000000
--- a/test/unit/specs/components/header-section.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import HeaderSection from '~/components/HeaderSection'
-import render from '../../test-utils/render'
-
-describe('HeaderSection', () => {
-  it('should render correct contents', () => {
-    const wrapper = render(HeaderSection, {
-      stubs: {
-        EmbeddedNavSection: true,
-      },
-      mocks: {
-        $store: {
-          rootState: { user: { abSessionId: '' }, nav: { isEmbedded: true } },
-        },
-        $route: {
-          path: '',
-        },
-      },
-    })
-
-    expect(wrapper.find('header').vm).toBeDefined()
-  })
-})
diff --git a/test/unit/specs/components/search-grid-form.spec.js b/test/unit/specs/components/search-grid-form.spec.js
deleted file mode 100644
index 22cb84fce0..0000000000
--- a/test/unit/specs/components/search-grid-form.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import SearchGridForm from '~/components/SearchGridForm'
-import render from '../../test-utils/render'
-import { createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-const storeMock = new Vuex.Store({
-  modules: {
-    search: {
-      namespaced: true,
-      state: { query: { q: 'foo' }, isFilterVisible: true },
-    },
-  },
-})
-
-describe('SearchGridForm', () => {
-  it('should render correct contents', () => {
-    const wrapper = render(SearchGridForm, {
-      localVue,
-      mocks: {
-        $route: {
-          path: '/search',
-        },
-      },
-      store: storeMock,
-    })
-
-    expect(wrapper.find('form').vm).toBeDefined()
-  })
-})
diff --git a/test/unit/specs/pages/browse-page.spec.js b/test/unit/specs/pages/browse-page.spec.js
index c73a033a10..9f0f30ceeb 100644
--- a/test/unit/specs/pages/browse-page.spec.js
+++ b/test/unit/specs/pages/browse-page.spec.js
@@ -35,7 +35,6 @@ describe('Search Grid Wrapper', () => {
         FilterDisplay: true,
         NuxtChild: true,
         ScrollButton: true,
-        SearchGridForm: true,
         SearchTypeTabs: true,
         SearchGridManualLoad: true,
       },

From 7b19dfa4f4997ef3a1392e41f5495dd553f322f5 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Thu, 23 Dec 2021 19:01:32 -0400
Subject: [PATCH 06/24] Add `VContentLink` component

---
 src/assets/icons/audio-wave.svg |  9 +++++
 src/assets/icons/image.svg      |  6 ++++
 src/components/VContentLink.vue | 58 +++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 src/assets/icons/audio-wave.svg
 create mode 100644 src/assets/icons/image.svg
 create mode 100644 src/components/VContentLink.vue

diff --git a/src/assets/icons/audio-wave.svg b/src/assets/icons/audio-wave.svg
new file mode 100644
index 0000000000..c878341ade
--- /dev/null
+++ b/src/assets/icons/audio-wave.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 7L3.25 17H4.75V7H3.25Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 7V17H20.75V7H19.25Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 4L7.25 20H8.75V4H7.25Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7L12.75 17L11.25 17L11.25 7L12.75 7Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.25 4V20H16.75V4H15.25Z" fill="black"/>
+    </g>
+</svg>
diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg
new file mode 100644
index 0000000000..492844e9e4
--- /dev/null
+++ b/src/assets/icons/image.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 4.5H5C4.72386 4.5 4.5 4.72386 4.5 5V19C4.5 19.2761 4.72386 19.5 5 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V5C19.5 4.72386 19.2761 4.5 19 4.5ZM5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z" fill="#1E1E1E"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4772 10.4623C15.7683 10.1792 16.2317 10.1792 16.5228 10.4623L20.5228 14.3511L19.4772 15.4266L16 12.046L12.5228 15.4266C12.2719 15.6706 11.8857 15.7086 11.5921 15.5183L8.59643 13.5766L4.44186 16.606L3.55811 15.394L8.12953 12.0607C8.38061 11.8776 8.71858 11.8683 8.97934 12.0373L11.906 13.9342L15.4772 10.4623Z" fill="#1E1E1E"/>
+  </g>
+</svg>
diff --git a/src/components/VContentLink.vue b/src/components/VContentLink.vue
new file mode 100644
index 0000000000..bceb6ab9ec
--- /dev/null
+++ b/src/components/VContentLink.vue
@@ -0,0 +1,58 @@
+<template>
+  <button
+    class="border border-dark-charcoal/25 rounded-sm bg-white flex flex-col text-left p-4"
+  >
+    <VIcon :icon-path="iconPath" />
+    <p class="capitalize font-semibold">{{ mediaType }}</p>
+    <span>{{ resultsCountLabel }}</span>
+  </button>
+</template>
+
+<script>
+import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { AUDIO, IMAGE, mediaTypes } from '~/constants/media'
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+import audioIcon from '~/assets/icons/audio-wave.svg'
+import imageIcon from '~/assets/icons/image.svg'
+
+const iconMapping = {
+  [AUDIO]: audioIcon,
+  [IMAGE]: imageIcon,
+}
+
+export default defineComponent({
+  name: 'VContentLink',
+  components: { VIcon },
+  props: {
+    mediaType: {
+      type: String,
+      required: true,
+      validator: (val) => mediaTypes.includes(val),
+    },
+    resultsCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { i18n } = useContext()
+
+    /**
+     * The translated string showing how many results were found for this media type.
+     *
+     * @returns {string}
+     */
+    const resultsCountLabel = computed(() => {
+      const count = props.resultsCount
+      const i18nKey = 'browse-page.all-result-count'
+      const localeCount = count.toLocaleString(i18n.locale)
+      return i18n.tc(i18nKey, count, { localeCount })
+    })
+
+    const iconPath = computed(() => iconMapping[props.mediaType])
+
+    return { iconPath, imageIcon, resultsCountLabel }
+  },
+})
+</script>

From 500a6739f7751351fc7b94d23804816c3fbb33aa Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Mon, 3 Jan 2022 18:16:09 -0400
Subject: [PATCH 07/24] Set currentColor on icons

---
 src/assets/icons/audio-wave.svg | 14 +++++++-------
 src/assets/icons/image.svg      |  8 ++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/assets/icons/audio-wave.svg b/src/assets/icons/audio-wave.svg
index c878341ade..7ba84b1c37 100644
--- a/src/assets/icons/audio-wave.svg
+++ b/src/assets/icons/audio-wave.svg
@@ -1,9 +1,9 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g id="icon">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 7L3.25 17H4.75V7H3.25Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 7V17H20.75V7H19.25Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 4L7.25 20H8.75V4H7.25Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7L12.75 17L11.25 17L11.25 7L12.75 7Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.25 4V20H16.75V4H15.25Z" fill="black"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 7L3.25 17H4.75V7H3.25Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 7V17H20.75V7H19.25Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 4L7.25 20H8.75V4H7.25Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7L12.75 17L11.25 17L11.25 7L12.75 7Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.25 4V20H16.75V4H15.25Z" />
     </g>
 </svg>
diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg
index 492844e9e4..bf5751153c 100644
--- a/src/assets/icons/image.svg
+++ b/src/assets/icons/image.svg
@@ -1,6 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g id="icon">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 4.5H5C4.72386 4.5 4.5 4.72386 4.5 5V19C4.5 19.2761 4.72386 19.5 5 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V5C19.5 4.72386 19.2761 4.5 19 4.5ZM5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z" fill="#1E1E1E"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4772 10.4623C15.7683 10.1792 16.2317 10.1792 16.5228 10.4623L20.5228 14.3511L19.4772 15.4266L16 12.046L12.5228 15.4266C12.2719 15.6706 11.8857 15.7086 11.5921 15.5183L8.59643 13.5766L4.44186 16.606L3.55811 15.394L8.12953 12.0607C8.38061 11.8776 8.71858 11.8683 8.97934 12.0373L11.906 13.9342L15.4772 10.4623Z" fill="#1E1E1E"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 4.5H5C4.72386 4.5 4.5 4.72386 4.5 5V19C4.5 19.2761 4.72386 19.5 5 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V5C19.5 4.72386 19.2761 4.5 19 4.5ZM5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4772 10.4623C15.7683 10.1792 16.2317 10.1792 16.5228 10.4623L20.5228 14.3511L19.4772 15.4266L16 12.046L12.5228 15.4266C12.2719 15.6706 11.8857 15.7086 11.5921 15.5183L8.59643 13.5766L4.44186 16.606L3.55811 15.394L8.12953 12.0607C8.38061 11.8776 8.71858 11.8683 8.97934 12.0373L11.906 13.9342L15.4772 10.4623Z"/>
   </g>
 </svg>

From d3baf5ca65fe82296881dd532c81dc403d999f85 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Mon, 3 Jan 2022 20:03:10 -0400
Subject: [PATCH 08/24] Add hover and focus styles

---
 src/components/{ => VContentLink}/VContentLink.vue | 4 ++--
 src/locales/scripts/wp-locales.json                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{ => VContentLink}/VContentLink.vue (81%)

diff --git a/src/components/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
similarity index 81%
rename from src/components/VContentLink.vue
rename to src/components/VContentLink/VContentLink.vue
index bceb6ab9ec..2050d37d7b 100644
--- a/src/components/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,9 +1,9 @@
 <template>
   <button
-    class="border border-dark-charcoal/25 rounded-sm bg-white flex flex-col text-left p-4"
+    class="bg-white border border-dark-charcoal/25 rounded-sm flex flex-col text-left py-4 ps-4 pe-16 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
   >
     <VIcon :icon-path="iconPath" />
-    <p class="capitalize font-semibold">{{ mediaType }}</p>
+    <p class="capitalize font-semibold pt-1">{{ mediaType }}</p>
     <span>{{ resultsCountLabel }}</span>
   </button>
 </template>
diff --git a/src/locales/scripts/wp-locales.json b/src/locales/scripts/wp-locales.json
index 279fc77092..16ce33aecc 100644
--- a/src/locales/scripts/wp-locales.json
+++ b/src/locales/scripts/wp-locales.json
@@ -1101,7 +1101,7 @@
     "facebookLocale": "id_ID",
     "wpLocale": "id_ID",
     "code": "id",
-    "translated": 64
+    "translated": 63
   },
   "ido": {
     "name": "Ido",
@@ -1576,7 +1576,7 @@
     "googleCode": "nl",
     "wpLocale": "nl_BE",
     "code": "nl-be",
-    "translated": 24
+    "translated": 23
   },
   "nl_NL": {
     "name": "Dutch",

From 4f7302887ba71832ae709c6336c9a208c1450e43 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Mon, 3 Jan 2022 20:14:55 -0400
Subject: [PATCH 09/24] Add Storybook story

---
 src/components/VContentLink/VContentLink.vue  |  2 +-
 .../VContentLink/meta/VContentLink.stories.js | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/components/VContentLink/meta/VContentLink.stories.js

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 2050d37d7b..bbeced1e60 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="bg-white border border-dark-charcoal/25 rounded-sm flex flex-col text-left py-4 ps-4 pe-16 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-16 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
   >
     <VIcon :icon-path="iconPath" />
     <p class="capitalize font-semibold pt-1">{{ mediaType }}</p>
diff --git a/src/components/VContentLink/meta/VContentLink.stories.js b/src/components/VContentLink/meta/VContentLink.stories.js
new file mode 100644
index 0000000000..c90107c1f2
--- /dev/null
+++ b/src/components/VContentLink/meta/VContentLink.stories.js
@@ -0,0 +1,27 @@
+import VContentLink from '~/components/VContentLink/VContentLink.vue'
+
+export default {
+  title: 'Components/VContentLink',
+  component: VContentLink,
+  argTypes: {
+    mediaType: {
+      options: ['audio', 'image'],
+      control: { type: 'radio' },
+    },
+    resultsCount: {
+      control: { type: 'number' },
+    },
+  },
+}
+
+const VContentLinkStory = (args, { argTypes }) => ({
+  template: `<VContentLink v-bind="$props" />`,
+  components: { VContentLink },
+  props: Object.keys(argTypes),
+})
+
+export const Default = VContentLinkStory.bind({})
+Default.args = {
+  mediaType: 'image',
+  resultsCount: 123456,
+}

From 85a1dc2bee5dcb65cdbabad1c1a2bb04b984ddee Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Tue, 4 Jan 2022 10:57:44 -0400
Subject: [PATCH 10/24] Translate mediaType label

---
 src/components/VContentLink/VContentLink.vue | 4 +++-
 src/locales/scripts/wp-locales.json          | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index bbeced1e60..c5e1ce6cc4 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -3,7 +3,9 @@
     class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-16 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
   >
     <VIcon :icon-path="iconPath" />
-    <p class="capitalize font-semibold pt-1">{{ mediaType }}</p>
+    <p class="capitalize font-semibold pt-1">
+      {{ $t(`search-tab.${mediaType}`) }}
+    </p>
     <span>{{ resultsCountLabel }}</span>
   </button>
 </template>
diff --git a/src/locales/scripts/wp-locales.json b/src/locales/scripts/wp-locales.json
index 16ce33aecc..279fc77092 100644
--- a/src/locales/scripts/wp-locales.json
+++ b/src/locales/scripts/wp-locales.json
@@ -1101,7 +1101,7 @@
     "facebookLocale": "id_ID",
     "wpLocale": "id_ID",
     "code": "id",
-    "translated": 63
+    "translated": 64
   },
   "ido": {
     "name": "Ido",
@@ -1576,7 +1576,7 @@
     "googleCode": "nl",
     "wpLocale": "nl_BE",
     "code": "nl-be",
-    "translated": 23
+    "translated": 24
   },
   "nl_NL": {
     "name": "Dutch",

From dc59f1ff0021cef53c97638bbc0a3647d1bcba95 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Tue, 4 Jan 2022 17:49:52 -0400
Subject: [PATCH 11/24] Add Storybook story for mobile view

---
 src/components/VContentLink/VContentLink.vue  |  2 +-
 .../VContentLink/meta/VContentLink.stories.js | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index c5e1ce6cc4..0a393b29f1 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-16 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-12 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
   >
     <VIcon :icon-path="iconPath" />
     <p class="capitalize font-semibold pt-1">
diff --git a/src/components/VContentLink/meta/VContentLink.stories.js b/src/components/VContentLink/meta/VContentLink.stories.js
index c90107c1f2..6e03e2f5e4 100644
--- a/src/components/VContentLink/meta/VContentLink.stories.js
+++ b/src/components/VContentLink/meta/VContentLink.stories.js
@@ -20,8 +20,34 @@ const VContentLinkStory = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
 })
 
+const TwoVContentLinkStory = () => ({
+  template: `
+  <div class="grid grid-cols-2 gap-4">
+    <VContentLink
+      v-for="(type, key) in types"
+      :media-type="type.mediaType"
+      :results-count="type.resultsCount"
+      :key="key"/>
+  </div>
+  `,
+  components: { VContentLink },
+  data() {
+    return {
+      types: [
+        { mediaType: 'image', resultsCount: 654321 },
+        { mediaType: 'audio', resultsCount: 123456 },
+      ],
+    }
+  },
+})
+
 export const Default = VContentLinkStory.bind({})
 Default.args = {
   mediaType: 'image',
   resultsCount: 123456,
 }
+
+export const Mobile = TwoVContentLinkStory.bind({})
+Mobile.parameters = {
+  viewport: { defaultViewport: 'mob' },
+}

From f6d98ce0b75d60e81fd027c49e83e450793d2506 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Tue, 4 Jan 2022 21:02:17 -0400
Subject: [PATCH 12/24] Allow mediaType selection on mobile story

---
 src/components/VContentLink/VContentLink.vue       | 13 +++++++++++++
 .../VContentLink/meta/VContentLink.stories.js      | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 0a393b29f1..8750dc3e5d 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,6 +1,9 @@
 <template>
   <button
     class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-12 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    type="button"
+    :aria-selected="isSelected"
+    @click="$emit('selected', mediaType)"
   >
     <VIcon :icon-path="iconPath" />
     <p class="capitalize font-semibold pt-1">
@@ -36,6 +39,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    isSelected: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const { i18n } = useContext()
@@ -58,3 +65,9 @@ export default defineComponent({
   },
 })
 </script>
+
+<style scoped>
+button[aria-selected='true'] {
+  @apply bg-dark-charcoal text-white;
+}
+</style>
diff --git a/src/components/VContentLink/meta/VContentLink.stories.js b/src/components/VContentLink/meta/VContentLink.stories.js
index 6e03e2f5e4..c39d0d6d62 100644
--- a/src/components/VContentLink/meta/VContentLink.stories.js
+++ b/src/components/VContentLink/meta/VContentLink.stories.js
@@ -11,6 +11,9 @@ export default {
     resultsCount: {
       control: { type: 'number' },
     },
+    isSelected: {
+      control: { type: 'switch' },
+    },
   },
 }
 
@@ -25,9 +28,11 @@ const TwoVContentLinkStory = () => ({
   <div class="grid grid-cols-2 gap-4">
     <VContentLink
       v-for="(type, key) in types"
+      :key="key"
       :media-type="type.mediaType"
       :results-count="type.resultsCount"
-      :key="key"/>
+      :is-selected="selected == type.mediaType"
+      @selected="onSelected"/>
   </div>
   `,
   components: { VContentLink },
@@ -37,14 +42,21 @@ const TwoVContentLinkStory = () => ({
         { mediaType: 'image', resultsCount: 654321 },
         { mediaType: 'audio', resultsCount: 123456 },
       ],
+      selected: 'audio',
     }
   },
+  methods: {
+    onSelected(mediaType) {
+      this.selected = mediaType
+    },
+  },
 })
 
 export const Default = VContentLinkStory.bind({})
 Default.args = {
   mediaType: 'image',
   resultsCount: 123456,
+  isSelected: false,
 }
 
 export const Mobile = TwoVContentLinkStory.bind({})

From 9f3407cbe47734fd1eb7e4686f58864e982e545c Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 5 Jan 2022 00:02:07 -0400
Subject: [PATCH 13/24] Add unit tests for `VContentLink`

---
 src/components/VContentLink/VContentLink.vue  |  5 +-
 .../specs/components/v-content-link.spec.js   | 48 +++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 test/unit/specs/components/v-content-link.spec.js

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 8750dc3e5d..24513df100 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,8 +1,9 @@
 <template>
   <button
     class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-12 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    role="radio"
     type="button"
-    :aria-selected="isSelected"
+    :aria-checked="isSelected"
     @click="$emit('selected', mediaType)"
   >
     <VIcon :icon-path="iconPath" />
@@ -67,7 +68,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-button[aria-selected='true'] {
+button[aria-checked='true'] {
   @apply bg-dark-charcoal text-white;
 }
 </style>
diff --git a/test/unit/specs/components/v-content-link.spec.js b/test/unit/specs/components/v-content-link.spec.js
new file mode 100644
index 0000000000..51ef62ec49
--- /dev/null
+++ b/test/unit/specs/components/v-content-link.spec.js
@@ -0,0 +1,48 @@
+import VContentLink from '~/components/VContentLink/VContentLink.vue'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import VueI18n from 'vue-i18n'
+
+const enMessages = require('~/locales/en.json')
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: { en: enMessages },
+})
+
+describe('VContentLink', () => {
+  let options = {}
+
+  beforeEach(() => {
+    options = {
+      props: { mediaType: 'image', resultsCount: 123 },
+      mocks: {
+        $nuxt: {
+          context: {
+            i18n,
+          },
+        },
+      },
+    }
+  })
+
+  it('is not selected by default', () => {
+    render(VContentLink, options)
+    const btn = screen.getByRole('radio')
+    expect(btn).not.toHaveAttribute('aria-checked')
+  })
+
+  it('is marked as selected when indicated with the isSelected prop', () => {
+    options.props.isSelected = true
+    render(VContentLink, options)
+    const btn = screen.getByRole('radio')
+    expect(btn).toHaveAttribute('aria-checked')
+  })
+
+  it('should emit selected event on click', () => {
+    const { emitted } = render(VContentLink, options)
+    const btn = screen.getByText('search-tab.image')
+    userEvent.click(btn)
+    expect(emitted().selected).toBeTruthy()
+  })
+})

From 75554bf2b812387dc4c63182cd8efb44a38ef06f Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Thu, 6 Jan 2022 13:17:27 -0400
Subject: [PATCH 14/24] Update references to `VInputField` in story

---
 .../VInputField/meta/VInputField.stories.mdx  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/VInputField/meta/VInputField.stories.mdx b/src/components/VInputField/meta/VInputField.stories.mdx
index 3c893541f8..8a295cf562 100644
--- a/src/components/VInputField/meta/VInputField.stories.mdx
+++ b/src/components/VInputField/meta/VInputField.stories.mdx
@@ -6,11 +6,11 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import InputField from '~/components/InputField/InputField.vue'
+import VInputField from '~/components/VInputField/VInputField.vue'
 
 <Meta
   title="Components/Input field"
-  component={InputField}
+  component={VInputField}
   argTypes={{
     input: {
       action: 'input',
@@ -20,19 +20,19 @@ import InputField from '~/components/InputField/InputField.vue'
 
 export const Template = (args, { argTypes }) => ({
   template: `
-    <InputField v-bind="$props" v-on="$props">
+    <VInputField v-bind="$props" v-on="$props">
       Extra info
-    </InputField>
+    </VInputField>
   `,
-  components: { InputField },
+  components: { VInputField },
   props: Object.keys(argTypes),
 })
 
 # Input field
 
-<Description of={InputField} />
+<Description of={VInputField} />
 
-<ArgsTable of={InputField} />
+<ArgsTable of={VInputField} />
 
 The component emits an `input` event with the new contents of the field whenever
 the field receives an input.
@@ -53,13 +53,13 @@ The recommended way to use it is with `v-model` mapping to a `String`.
 export const vModelTemplate = () => ({
   template: `
     <div>
-      <InputField v-model="text">
+      <VInputField v-model="text">
         {{ text.length }}
-      </InputField>
+      </VInputField>
       {{ text }}
     </div>
   `,
-  components: { InputField },
+  components: { VInputField },
   data() {
     return {
       text: 'Hello, World!',
@@ -110,10 +110,10 @@ export const labelTemplate = () => ({
   template: `
     <div>
       <label for="field">Label:</label>
-      <InputField id="field"/>
+      <VInputField id="field"/>
     </div>
   `,
-  components: { InputField },
+  components: { VInputField },
 })
 
 <Canvas>

From ebcfabe0f8acbfc93aac41e4f1a577bae4252f44 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Thu, 6 Jan 2022 13:27:15 -0400
Subject: [PATCH 15/24] Change label of image tab to plural

---
 src/locales/en.json                |  2 +-
 src/locales/po-files/openverse.pot | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 73740dacdf..b78bf11ca4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -319,7 +319,7 @@
   },
   "search-tab": {
     "all": "All",
-    "image": "Image",
+    "image": "Images",
     "audio": "Audio",
     "video": "Video"
   },
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 92ffe8c496..72ecf25167 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2021-12-16T23:30:23+00:00\n"
+"POT-Creation-Date: 2022-01-06T17:27:15+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -13,7 +13,7 @@ msgstr ""
 "Language-Team: LANGUAGE <LL@li.org>\n"
 
 
-#: src/components/AudioTrack/layouts/Full.vue:32
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:32
 msgctxt "interpunct"
 msgid "•"
 msgstr ""
@@ -151,13 +151,13 @@ msgctxt "play-pause.replay"
 msgid "Replay"
 msgstr ""
 
-#: src/components/AudioTrack/AudioTrack.vue:4
+#: src/components/VAudioTrack/VAudioTrack.vue:4
 msgctxt "audio-track.aria-label"
 msgid "Audio Player"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioTrack/layouts/Full.vue:17
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:17
 msgctxt "audio-track.creator"
 msgid "by ###creator###"
 msgstr ""
@@ -188,13 +188,13 @@ msgctxt "audio-thumbnail.alt"
 msgid "Cover art for \"###title###\" by ###creator###"
 msgstr ""
 
-#: src/components/AudioTrack/Waveform.vue:12
+#: src/components/VAudioTrack/VWaveform.vue:12
 msgctxt "waveform.label"
 msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioTrack/Waveform.vue:489
+#: src/components/VAudioTrack/VWaveform.vue:514
 msgctxt "waveform.current-time"
 msgid "###time### seconds"
 msgstr ""
@@ -232,7 +232,7 @@ msgid "Not finding what you're looking for? Try additional ###type### sources."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VMetaSearch/VMetaSearchForm.vue:4
+#: src/components/VMetaSearch/VMetaSearchForm.vue:8
 msgctxt "meta-search.form.no-results-title"
 msgid "No ###type### results for \"###query###\"."
 msgstr ""
@@ -727,7 +727,6 @@ msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
 
-#: src/components/AppModal.vue:13
 msgctxt "browse-page.aria.close"
 msgid "close"
 msgstr ""
@@ -737,6 +736,7 @@ msgctxt "browse-page.aria.scroll"
 msgid "scroll to top"
 msgstr ""
 
+#: src/components/SearchGridForm.vue:14
 msgctxt "browse-page.aria.search"
 msgid "search"
 msgstr ""
@@ -809,6 +809,7 @@ msgid "This work is marked as being in the public domain."
 msgstr ""
 
 #. Do not translate words between ### ###.
+#: src/components/SearchGridForm.vue:68
 msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
@@ -835,6 +836,7 @@ msgctxt "browse-page.search-form.collection-placeholder"
 msgid "Search this collection"
 msgstr ""
 
+#: src/components/SearchGridForm.vue:41
 msgctxt "browse-page.search-form.button"
 msgid "Search"
 msgstr ""
@@ -1114,7 +1116,7 @@ msgid "All"
 msgstr ""
 
 msgctxt "search-tab.image"
-msgid "Image"
+msgid "Images"
 msgstr ""
 
 msgctxt "search-tab.audio"
@@ -1136,7 +1138,7 @@ msgid "An error occurred"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:54
+#: src/pages/image/_id.vue:51
 msgctxt "error.image-not-found"
 msgid "Couldn't find image with id ###id###"
 msgstr ""
@@ -2016,7 +2018,7 @@ msgctxt "header.api-nav-item"
 msgid "API"
 msgstr ""
 
-#: src/components/VHeader/VHeader.vue:145
+#: src/components/VHeader/VHeader.vue:144
 msgctxt "header.loading"
 msgid "Loading..."
 msgstr ""

From b8d2af1cac3a4d293f96cc67825f72382f7d64c4 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Thu, 6 Jan 2022 16:59:31 -0400
Subject: [PATCH 16/24] Add desktop version

---
 src/components/VContentLink/VContentLink.vue  | 44 ++++++++++++++-----
 .../VContentLink/meta/VContentLink.stories.js | 18 ++++++++
 src/locales/en.json                           |  4 +-
 src/locales/po-files/openverse.pot            | 10 ++++-
 4 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 24513df100..3da9b200e2 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,16 +1,30 @@
 <template>
   <button
-    class="bg-white border border-dark-charcoal/20 rounded-sm flex flex-col text-left py-4 ps-4 pe-12 hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    class="bg-white border border-dark-charcoal/50 rounded-sm flex hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    :class="[
+      isStacked
+        ? 'flex-col items-start py-4 ps-4 pe-12'
+        : 'flex-row justify-between items-center w-full min-w-[22rem] p-6',
+    ]"
     role="radio"
     type="button"
     :aria-checked="isSelected"
     @click="$emit('selected', mediaType)"
   >
-    <VIcon :icon-path="iconPath" />
-    <p class="capitalize font-semibold pt-1">
-      {{ $t(`search-tab.${mediaType}`) }}
-    </p>
-    <span>{{ resultsCountLabel }}</span>
+    <div
+      class="flex"
+      :class="[isStacked ? 'flex-col items-start' : ' flex-row items-center']"
+    >
+      <VIcon :icon-path="iconPath" />
+      <p class="font-semibold" :class="[isStacked ? 'pt-1' : 'ps-2 text-2xl']">
+        {{
+          isStacked
+            ? $t(`search-tab.${mediaType}`)
+            : $t(`search-tab.see-${mediaType}`)
+        }}
+      </p>
+    </div>
+    <span :class="{ 'text-sr': !isStacked }">{{ resultsCountLabel }}</span>
   </button>
 </template>
 
@@ -22,11 +36,6 @@ import VIcon from '~/components/VIcon/VIcon.vue'
 import audioIcon from '~/assets/icons/audio-wave.svg'
 import imageIcon from '~/assets/icons/image.svg'
 
-const iconMapping = {
-  [AUDIO]: audioIcon,
-  [IMAGE]: imageIcon,
-}
-
 export default defineComponent({
   name: 'VContentLink',
   components: { VIcon },
@@ -44,6 +53,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    layout: {
+      type: String,
+      default: 'stacked',
+      validator: (val) => ['stacked', 'horizontal'].includes(val),
+    },
   },
   setup(props) {
     const { i18n } = useContext()
@@ -60,9 +74,15 @@ export default defineComponent({
       return i18n.tc(i18nKey, count, { localeCount })
     })
 
+    const iconMapping = {
+      [AUDIO]: audioIcon,
+      [IMAGE]: imageIcon,
+    }
     const iconPath = computed(() => iconMapping[props.mediaType])
 
-    return { iconPath, imageIcon, resultsCountLabel }
+    const isStacked = computed(() => props.layout == 'stacked')
+
+    return { iconPath, imageIcon, resultsCountLabel, isStacked }
   },
 })
 </script>
diff --git a/src/components/VContentLink/meta/VContentLink.stories.js b/src/components/VContentLink/meta/VContentLink.stories.js
index c39d0d6d62..f637a566d9 100644
--- a/src/components/VContentLink/meta/VContentLink.stories.js
+++ b/src/components/VContentLink/meta/VContentLink.stories.js
@@ -14,6 +14,10 @@ export default {
     isSelected: {
       control: { type: 'switch' },
     },
+    layout: {
+      options: ['stacked', 'horizontal'],
+      control: { type: 'radio' },
+    },
   },
 }
 
@@ -59,6 +63,20 @@ Default.args = {
   isSelected: false,
 }
 
+const VContentLinkHorizontalStory = (args, { argTypes }) => ({
+  template: `<div class="max-w-md"><VContentLink v-bind="$props" /></div>`,
+  components: { VContentLink },
+  props: Object.keys(argTypes),
+})
+
+export const Horizontal = VContentLinkHorizontalStory.bind({})
+Horizontal.args = {
+  mediaType: 'audio',
+  resultsCount: 4561,
+  isSelected: false,
+  layout: 'horizontal',
+}
+
 export const Mobile = TwoVContentLinkStory.bind({})
 Mobile.parameters = {
   viewport: { defaultViewport: 'mob' },
diff --git a/src/locales/en.json b/src/locales/en.json
index b78bf11ca4..070a05820e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -321,7 +321,9 @@
     "all": "All",
     "image": "Images",
     "audio": "Audio",
-    "video": "Video"
+    "video": "Video",
+    "see-image": "See all images",
+    "see-audio": "See all audio"
   },
   "filters": {
     "title": "Filters",
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 72ecf25167..6eb3730e06 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-01-06T17:27:15+00:00\n"
+"POT-Creation-Date: 2022-01-06T20:59:31+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1127,6 +1127,14 @@ msgctxt "search-tab.video"
 msgid "Video"
 msgstr ""
 
+msgctxt "search-tab.see-image"
+msgid "See all images"
+msgstr ""
+
+msgctxt "search-tab.see-audio"
+msgid "See all audio"
+msgstr ""
+
 #: src/layouts/error.vue:5
 msgctxt "error.not-found"
 msgid "Page Not Found"

From e1d040d1b5da82e94e1acb3c5420312d37f5ca6f Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Fri, 7 Jan 2022 12:42:34 -0400
Subject: [PATCH 17/24] Extract function for resultsCount i18n into composable

---
 src/components/VContentLink/VContentLink.vue  | 33 ++++++++++---------
 .../VContentLink/meta/VContentLink.stories.js |  8 ++---
 src/composables/use-i18n-utilities.js         | 24 ++++++++++++++
 3 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 src/composables/use-i18n-utilities.js

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 3da9b200e2..4fd653c7a3 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="bg-white border border-dark-charcoal/50 rounded-sm flex hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    class="bg-white border border-dark-charcoal/20 rounded-sm flex hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
     :class="[
       isStacked
         ? 'flex-col items-start py-4 ps-4 pe-12'
@@ -29,7 +29,8 @@
 </template>
 
 <script>
-import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { resultsCount } from '~/composables/use-i18n-utilities'
 import { AUDIO, IMAGE, mediaTypes } from '~/constants/media'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
@@ -40,19 +41,31 @@ export default defineComponent({
   name: 'VContentLink',
   components: { VIcon },
   props: {
+    /**
+     * One of the media types supported.
+     */
     mediaType: {
       type: String,
       required: true,
       validator: (val) => mediaTypes.includes(val),
     },
+    /**
+     * The number of results that the search returned.
+     */
     resultsCount: {
       type: Number,
       required: true,
     },
+    /**
+     * Whether the indicated media type is currently selected.
+     */
     isSelected: {
       type: Boolean,
       default: false,
     },
+    /**
+     * `stacked` intended for mobile and `horizontal` for desktop.
+     */
     layout: {
       type: String,
       default: 'stacked',
@@ -60,26 +73,14 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
-
-    /**
-     * The translated string showing how many results were found for this media type.
-     *
-     * @returns {string}
-     */
-    const resultsCountLabel = computed(() => {
-      const count = props.resultsCount
-      const i18nKey = 'browse-page.all-result-count'
-      const localeCount = count.toLocaleString(i18n.locale)
-      return i18n.tc(i18nKey, count, { localeCount })
-    })
-
     const iconMapping = {
       [AUDIO]: audioIcon,
       [IMAGE]: imageIcon,
     }
     const iconPath = computed(() => iconMapping[props.mediaType])
 
+    const resultsCountLabel = computed(() => resultsCount(props.resultsCount))
+
     const isStacked = computed(() => props.layout == 'stacked')
 
     return { iconPath, imageIcon, resultsCountLabel, isStacked }
diff --git a/src/components/VContentLink/meta/VContentLink.stories.js b/src/components/VContentLink/meta/VContentLink.stories.js
index f637a566d9..68719a3dd8 100644
--- a/src/components/VContentLink/meta/VContentLink.stories.js
+++ b/src/components/VContentLink/meta/VContentLink.stories.js
@@ -12,7 +12,7 @@ export default {
       control: { type: 'number' },
     },
     isSelected: {
-      control: { type: 'switch' },
+      control: { type: 'boolean' },
     },
     layout: {
       options: ['stacked', 'horizontal'],
@@ -43,8 +43,8 @@ const TwoVContentLinkStory = () => ({
   data() {
     return {
       types: [
-        { mediaType: 'image', resultsCount: 654321 },
-        { mediaType: 'audio', resultsCount: 123456 },
+        { mediaType: 'image', resultsCount: 4321 },
+        { mediaType: 'audio', resultsCount: 1234 },
       ],
       selected: 'audio',
     }
@@ -59,7 +59,7 @@ const TwoVContentLinkStory = () => ({
 export const Default = VContentLinkStory.bind({})
 Default.args = {
   mediaType: 'image',
-  resultsCount: 123456,
+  resultsCount: 5708,
   isSelected: false,
 }
 
diff --git a/src/composables/use-i18n-utilities.js b/src/composables/use-i18n-utilities.js
new file mode 100644
index 0000000000..38d1e2e580
--- /dev/null
+++ b/src/composables/use-i18n-utilities.js
@@ -0,0 +1,24 @@
+import { useContext } from '@nuxtjs/composition-api'
+import { ALL_MEDIA } from '~/constants/media'
+
+/**
+ * Returns the localized text for the number of search results according to the
+ * media type.
+ *
+ * @param {number} resultsCount
+ * @param {string} mediaType
+ * @returns {string}
+ */
+export function resultsCount(resultsCount, mediaType = ALL_MEDIA) {
+  const { i18n } = useContext()
+
+  const countKey =
+    resultsCount === 0
+      ? 'no-results'
+      : resultsCount >= 10000
+      ? 'result-count-more'
+      : 'result-count'
+  const fullKey = `browse-page.${mediaType}-${countKey}`
+  const localeCount = resultsCount.toLocaleString(i18n.locale)
+  return i18n.tc(fullKey, resultsCount, { localeCount })
+}

From 729b4d851494f3f5eee4f6f51798b1e912bd997f Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 7 Jan 2022 21:32:09 +0400
Subject: [PATCH 18/24] Update references to `InputField` to point to
 `VInputField` (#586)

---
 src/components/VInputField/VInputField.vue    |  4 +++
 .../VInputField/meta/VInputField.stories.mdx  | 26 +++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/VInputField/VInputField.vue b/src/components/VInputField/VInputField.vue
index 91caaf6e09..505026f043 100644
--- a/src/components/VInputField/VInputField.vue
+++ b/src/components/VInputField/VInputField.vue
@@ -32,6 +32,10 @@
 export default {
   name: 'VInputField',
   inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
   props: {
     /**
      * the textual content of the input field
diff --git a/src/components/VInputField/meta/VInputField.stories.mdx b/src/components/VInputField/meta/VInputField.stories.mdx
index 3c893541f8..36f00484d3 100644
--- a/src/components/VInputField/meta/VInputField.stories.mdx
+++ b/src/components/VInputField/meta/VInputField.stories.mdx
@@ -6,25 +6,25 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import InputField from '~/components/InputField/InputField.vue'
+import VInputField from '~/components/VInputField/VInputField.vue'
 
 <Meta
-  title="Components/Input field"
-  component={InputField}
+  title="Components/VInputField"
+  component={VInputField}
   argTypes={{
-    input: {
-      action: 'input',
+    'update:modelValue': {
+      action: 'update:modelValue',
     },
   }}
 />
 
 export const Template = (args, { argTypes }) => ({
   template: `
-    <InputField v-bind="$props" v-on="$props">
+    <VInputField v-bind="$props" v-on="$props">
       Extra info
-    </InputField>
+    </VInputField>
   `,
-  components: { InputField },
+  components: { VInputField },
   props: Object.keys(argTypes),
 })
 
@@ -53,13 +53,13 @@ The recommended way to use it is with `v-model` mapping to a `String`.
 export const vModelTemplate = () => ({
   template: `
     <div>
-      <InputField v-model="text">
+      <VInputField v-model="text">
         {{ text.length }}
-      </InputField>
+      </VInputField>
       {{ text }}
     </div>
   `,
-  components: { InputField },
+  components: { VInputField },
   data() {
     return {
       text: 'Hello, World!',
@@ -110,10 +110,10 @@ export const labelTemplate = () => ({
   template: `
     <div>
       <label for="field">Label:</label>
-      <InputField id="field"/>
+      <VInputField id="field"/>
     </div>
   `,
-  components: { InputField },
+  components: { VInputField },
 })
 
 <Canvas>

From 047b2e59d3a3d69c36613fe219e30b2fe010e751 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 10 Jan 2022 10:50:23 -0500
Subject: [PATCH 19/24] New 404 page (#583)

Co-authored-by: Krystle Salazar <krystle.salazar@automattic.com>
---
 src/assets/oops.svg                           |  10 ++
 .../VHeader/VSearchBar/VSearchBar.vue         |   2 +-
 .../VHeader/VSearchBar/VSearchButton.vue      |   5 +-
 .../VHeader/meta/VSearchBar.stories.mdx       |   2 +-
 src/components/VInputField/VInputField.vue    |   4 +
 src/layouts/blank.vue                         |   3 +
 src/layouts/error.vue                         | 127 +++++++++++++++---
 src/locales/en.json                           |   7 +-
 src/locales/po-files/openverse.pot            |  49 ++++---
 src/locales/scripts/wp-locales.json           |  34 ++---
 tailwind.config.js                            |   1 +
 11 files changed, 188 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/oops.svg
 create mode 100644 src/layouts/blank.vue

diff --git a/src/assets/oops.svg b/src/assets/oops.svg
new file mode 100644
index 0000000000..2750db49da
--- /dev/null
+++ b/src/assets/oops.svg
@@ -0,0 +1,10 @@
+<svg
+  viewBox="0 0 1320 569"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M199.235 406.514C172.831 406.514 147.626 401.917 123.622 392.724C99.6177 383.131 78.4139 369.74 60.0107 352.552C41.6074 334.965 27.0048 314.179 16.2029 290.196C5.40096 265.813 0 238.832 0 209.253C0 182.072 4.40078 156.09 13.2023 131.308C22.0039 106.125 35.0062 83.7411 52.2093 64.1549C69.4123 44.5687 90.8161 28.9796 116.421 17.3878C142.025 5.79592 171.43 0 204.636 0C231.041 0 256.246 4.79663 280.25 14.3899C304.254 23.5834 325.458 36.974 343.861 54.5616C362.264 71.7496 376.867 92.5349 387.669 116.918C398.471 140.901 403.872 167.682 403.872 197.261C403.872 224.043 399.471 250.024 390.669 275.207C381.868 300.389 368.866 322.773 351.663 342.359C334.459 361.946 313.056 377.535 287.451 389.126C261.847 400.718 232.441 406.514 199.235 406.514ZM208.237 382.531C239.042 382.531 264.647 376.136 285.051 363.345C305.454 350.154 320.657 331.967 330.659 308.783C341.061 285.2 346.262 257.819 346.262 226.641C346.262 199.06 343.061 173.078 336.66 148.695C330.259 124.313 320.657 102.928 307.855 84.5406C295.453 65.7538 279.85 51.164 261.046 40.7713C242.243 30.3786 220.239 25.1823 195.035 25.1823C165.029 25.1823 139.825 31.5778 119.421 44.3688C99.0176 57.1598 83.6149 75.1472 73.213 98.3309C62.8112 121.115 57.6102 148.096 57.6102 179.274C57.6102 207.254 60.6108 233.436 66.6118 257.819C73.013 282.202 82.4146 303.786 94.8168 322.573C107.619 341.36 123.422 356.15 142.225 366.942C161.029 377.335 183.033 382.531 208.237 382.531Z" />
+  <path d="M565.118 406.514C542.714 406.514 522.51 401.318 504.507 390.925C486.504 380.532 472.101 366.342 461.299 348.355C450.897 329.968 445.696 309.183 445.696 285.999C445.696 269.211 448.897 252.822 455.298 236.834C462.099 220.845 471.501 206.255 483.503 193.064C495.505 179.874 509.508 169.481 525.51 161.886C541.513 153.892 558.716 149.895 577.12 149.895C600.324 149.895 621.128 155.491 639.531 166.683C658.334 177.875 673.137 192.665 683.939 211.052C695.141 229.039 700.742 248.825 700.742 270.41C700.742 293.594 695.541 315.578 685.139 336.364C675.137 357.149 660.134 374.137 640.131 387.328C620.127 400.119 595.123 406.514 565.118 406.514ZM577.72 388.527C591.322 388.527 603.524 385.929 614.326 380.732C625.128 375.536 633.53 367.142 639.531 355.55C644.332 346.357 647.532 335.164 649.133 321.974C650.733 308.783 651.533 296.392 651.533 284.8C651.533 265.613 647.932 247.226 640.731 229.639C633.93 211.651 624.128 197.061 611.326 185.869C598.924 174.277 584.121 168.482 566.918 168.482C556.116 168.482 546.314 170.28 537.513 173.878C529.111 177.076 521.31 183.271 514.108 192.465C506.107 202.458 500.906 214.649 498.506 229.039C496.105 243.429 494.905 257.819 494.905 272.209C494.905 291.795 498.506 310.582 505.707 328.569C512.908 346.157 522.71 360.547 535.112 371.739C547.514 382.931 561.717 388.527 577.72 388.527Z" />
+  <path d="M739.819 569C737.819 569 735.218 568.6 732.018 567.801C728.817 567.401 727.217 566.002 727.217 563.604C727.217 560.406 728.617 558.008 731.417 556.409C734.618 555.21 737.819 554.01 741.019 552.811C747.02 550.813 752.821 548.414 758.422 545.616C764.023 543.218 766.824 538.022 766.824 530.027V226.041C766.824 222.843 765.823 218.047 763.823 211.651C762.223 205.256 759.422 199.06 755.422 193.064C751.421 187.068 746.02 183.471 739.219 182.272C737.618 181.872 736.418 180.873 735.618 179.274C734.818 177.675 734.418 176.076 734.418 174.477C734.418 172.479 734.818 170.88 735.618 169.681C736.418 168.482 737.419 167.682 738.619 167.282C753.821 163.685 766.824 159.888 777.626 155.89C788.427 151.494 798.629 147.296 808.231 143.299C808.631 143.299 808.831 143.299 808.831 143.299C808.831 142.9 809.031 142.7 809.431 142.7C810.231 142.7 811.031 143.299 811.832 144.498C812.632 145.698 813.032 146.897 813.032 148.096C813.032 151.693 812.432 157.489 811.232 165.484C810.431 173.078 810.031 179.274 810.031 184.071C810.031 187.268 810.231 189.067 810.632 189.467C814.632 185.47 821.833 180.473 832.235 174.477C843.037 168.082 855.239 162.486 868.842 157.689C882.444 152.493 895.447 149.895 907.849 149.895C928.652 149.895 946.256 155.491 960.658 166.683C975.461 177.475 986.663 191.665 994.264 209.253C1002.27 226.441 1006.27 244.428 1006.27 263.215C1006.27 281.202 1002.87 298.79 996.064 315.978C989.263 332.766 979.662 347.955 967.259 361.546C954.857 375.136 940.455 386.129 924.052 394.523C907.649 402.517 890.046 406.514 871.242 406.514C865.641 406.514 858.84 405.515 850.839 403.516C843.237 401.917 835.636 399.719 828.035 396.921C820.833 394.123 815.232 390.925 811.232 387.328C810.832 387.328 810.431 389.726 810.031 394.523C809.631 398.92 809.231 403.516 808.831 408.313C808.831 413.509 808.831 416.707 808.831 417.906V530.027C808.831 535.224 810.832 539.221 814.832 542.019C819.233 545.217 824.034 547.415 829.235 548.614C834.836 550.213 839.637 551.612 843.637 552.811C846.838 554.01 849.838 555.21 852.639 556.409C855.839 558.008 857.44 560.406 857.44 563.604C857.44 566.002 855.839 567.401 852.639 567.801C849.438 568.6 846.638 569 844.237 569C832.635 569 822.834 568.4 814.832 567.201C807.231 566.402 798.229 566.002 787.827 566.002C781.026 566.002 775.425 566.202 771.024 566.602C767.024 567.001 762.823 567.401 758.422 567.801C754.021 568.6 747.82 569 739.819 569ZM880.244 387.927C886.245 387.927 893.446 386.129 901.848 382.531C910.649 378.934 919.251 373.138 927.652 365.143C936.454 357.149 943.655 346.357 949.256 332.766C955.257 319.176 958.258 302.387 958.258 282.401C958.258 259.218 955.257 240.631 949.256 226.641C943.255 212.651 935.854 202.058 927.052 194.863C918.251 187.668 909.249 182.871 900.047 180.473C890.846 178.075 883.044 176.876 876.643 176.876C867.042 176.876 857.04 178.874 846.638 182.871C836.636 186.869 828.035 191.465 820.833 196.662C814.032 201.458 810.632 205.256 810.632 208.054C810.632 216.848 810.431 225.841 810.031 235.035C810.031 243.829 809.831 252.423 809.431 260.817C809.431 269.211 809.231 276.805 808.831 283.601C808.831 289.996 808.831 294.993 808.831 298.59C808.831 314.579 812.432 329.368 819.633 342.959C827.234 356.549 836.436 367.542 847.238 375.936C858.44 383.93 869.442 387.927 880.244 387.927Z" />
+  <path d="M1107.42 406.514C1095.01 406.514 1083.41 404.516 1072.61 400.518C1061.81 396.921 1052.61 391.725 1045.01 384.929C1043.01 380.533 1041.41 373.138 1040.21 362.745C1039.4 352.352 1038.8 343.758 1038.4 336.963C1038.4 333.366 1041.01 331.567 1046.21 331.567C1047.81 331.567 1049.21 331.967 1050.41 332.766C1052.01 333.166 1053.01 334.165 1053.41 335.764C1058.61 355.35 1066.81 369.34 1078.01 377.734C1089.61 386.129 1101.22 390.326 1112.82 390.326C1124.42 390.326 1134.22 386.528 1142.22 378.934C1150.62 370.939 1154.83 361.146 1154.83 349.554C1154.83 338.762 1151.22 329.568 1144.02 321.974C1136.82 313.979 1124.22 304.386 1106.22 293.194C1092.61 284.8 1081.61 276.805 1073.21 269.211C1064.81 261.616 1058.61 253.822 1054.61 245.827C1051.01 237.833 1049.21 228.839 1049.21 218.846C1049.21 206.055 1052.21 194.463 1058.21 184.071C1064.21 173.678 1073.21 165.484 1085.21 159.488C1097.22 153.092 1112.22 149.895 1130.22 149.895C1142.22 149.895 1152.22 151.094 1160.23 153.492C1168.23 155.89 1174.23 158.489 1178.23 161.287C1181.43 165.684 1184.03 172.679 1186.03 182.272C1188.43 191.465 1189.63 200.259 1189.63 208.653C1189.63 211.451 1187.63 212.85 1183.63 212.85C1181.23 212.85 1178.83 212.451 1176.43 211.651C1174.43 210.452 1173.03 209.053 1172.23 207.454C1167.03 194.263 1160.43 184.27 1152.43 177.475C1144.82 170.28 1135.22 166.683 1123.62 166.683C1113.62 166.683 1104.62 169.681 1096.62 175.676C1089.01 181.672 1085.21 190.466 1085.21 202.058C1085.21 211.251 1088.01 219.446 1093.61 226.641C1099.62 233.836 1110.62 242.03 1126.62 251.223C1149.82 264.414 1167.03 276.805 1178.23 288.397C1189.83 299.589 1195.63 314.579 1195.63 333.366C1195.63 354.95 1187.43 372.538 1171.03 386.129C1154.63 399.719 1133.42 406.514 1107.42 406.514Z" />
+  <path d="M1282.79 275.207C1279.99 275.207 1277.59 273.608 1275.59 270.41C1273.99 266.812 1272.79 260.617 1271.99 251.823C1270.39 234.635 1268.59 216.048 1266.59 196.062C1264.59 175.676 1262.79 155.491 1261.19 135.505C1259.99 115.519 1258.79 97.3316 1257.59 80.9431C1256.79 64.5546 1256.39 51.5637 1256.39 41.9705C1256.39 33.1767 1258.99 25.582 1264.19 19.1865C1269.79 12.3913 1276.59 8.99367 1284.59 8.99367C1292.6 8.99367 1299 12.3913 1303.8 19.1865C1309 25.582 1311.6 33.1767 1311.6 41.9705C1311.6 51.5637 1311 64.5546 1309.8 80.9431C1308.6 97.3316 1307 115.519 1305 135.505C1303.4 155.491 1301.6 175.676 1299.6 196.062C1297.6 216.448 1295.6 235.035 1293.6 251.823C1293.2 258.218 1292 263.815 1289.99 268.611C1288.39 273.008 1285.99 275.207 1282.79 275.207ZM1283.99 406.514C1273.99 406.514 1265.39 403.117 1258.19 396.321C1251.39 389.126 1247.99 380.532 1247.99 370.539C1247.99 360.547 1251.39 352.152 1258.19 345.357C1265.39 338.162 1273.99 334.565 1283.99 334.565C1294 334.565 1302.4 338.162 1309.2 345.357C1316.4 352.152 1320 360.547 1320 370.539C1320 380.532 1316.4 389.126 1309.2 396.321C1302.4 403.117 1294 406.514 1283.99 406.514Z" />
+</svg>
diff --git a/src/components/VHeader/VSearchBar/VSearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue
index 949399fa34..4e9d6f69dd 100644
--- a/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="search-bar group flex flex-row items-center"
+    class="search-bar group flex flex-row items-center bg-white rounded-sm"
     @submit.prevent="handleSearch"
   >
     <VInputField
diff --git a/src/components/VHeader/VSearchBar/VSearchButton.vue b/src/components/VHeader/VSearchBar/VSearchButton.vue
index a7cd0cde1d..9107e277d5 100644
--- a/src/components/VHeader/VSearchBar/VSearchButton.vue
+++ b/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -31,7 +31,10 @@ export default {
   margin-inline-start: -1px;
   border-inline-start-color: transparent;
 }
-.search-button:hover {
+.search-button.search-button:not(:hover):not(:focus):not(:focus-within) {
+  border-inline-start-color: transparent;
+}
+.search-button.search-button:hover {
   border-inline-start-color: rgba(214, 212, 213, 1);
 }
 </style>
diff --git a/src/components/VHeader/meta/VSearchBar.stories.mdx b/src/components/VHeader/meta/VSearchBar.stories.mdx
index 403c4964e4..dc871a271f 100644
--- a/src/components/VHeader/meta/VSearchBar.stories.mdx
+++ b/src/components/VHeader/meta/VSearchBar.stories.mdx
@@ -36,7 +36,7 @@ export const Template = (args, { argTypes }) => ({
 <ArgsTable of={VSearchBar} />
 
 The component emits an `input` event with the new contents of the field whenever
-the field receives an input. It also emits the `search` event when the search
+the field receives an input. It also emits the `submit` event when the search
 button is clicked.
 
 <Canvas>
diff --git a/src/components/VInputField/VInputField.vue b/src/components/VInputField/VInputField.vue
index 505026f043..96e1cc64cf 100644
--- a/src/components/VInputField/VInputField.vue
+++ b/src/components/VInputField/VInputField.vue
@@ -92,4 +92,8 @@ export default {
 .input-field:focus-within .info {
   @apply text-dark-charcoal;
 }
+
+.input-field input::placeholder {
+  font-weight: normal;
+}
 </style>
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
new file mode 100644
index 0000000000..5d3ae9c407
--- /dev/null
+++ b/src/layouts/blank.vue
@@ -0,0 +1,3 @@
+<template>
+  <Nuxt />
+</template>
diff --git a/src/layouts/error.vue b/src/layouts/error.vue
index 51c5979774..29f09001e1 100644
--- a/src/layouts/error.vue
+++ b/src/layouts/error.vue
@@ -1,30 +1,119 @@
 <template>
-  <div class="grid-container full">
-    <main class="not-found">
-      <h1 v-if="error.statusCode === 404">
-        {{ $t('error.not-found') }}
+  <main class="bg-yellow h-screen relative page-404 overflow-x-hidden">
+    <NuxtLink to="/" class="relative z-10">
+      <span class="sr-only">{{ $t('404.link-title') }}</span>
+      <Logo aria-hidden="true" class="pt-6 lg:pt-8 ms-6 lg:ms-10 w-30 h-auto" />
+    </NuxtLink>
+    <Oops
+      aria-hidden="true"
+      class="absolute opacity-5 fill-dark-charcoal -mt-[10%] -ml-[20%] lg:mx-auto w-[140%] lg:w-full px-6 lg:px-16 z-0 pointer-events-none"
+    />
+    <header
+      class="absolute lg:max-w-2xl space-y-4 lg:space-y-6 top-1/4 z-10 left-0 right-0 mx-auto px-6 lg:px-0"
+    >
+      <h1 class="mb-6 lg:mb-10 lg:leading-tight text-3xl lg:text-6xl">
+        {{ $t('404.title') }}
       </h1>
-      <h1 v-else>{{ $t('error.occurred') }}</h1>
-      <p>{{ error.message }}</p>
-    </main>
-  </div>
+      <p class="font-semibold">
+        <i18n path="404.main">
+          <template #link>
+            <NuxtLink
+              class="underline text-current hover:text-current active:text-current"
+              to="/"
+            >
+              {{ $t('404.link-title') }}
+            </NuxtLink>
+          </template>
+        </i18n>
+      </p>
+      <VSearchBar
+        :value="searchTerm"
+        :label-text="$t('404.search-placeholder')"
+        field-id="404-search"
+        :placeholder="$t('404.search-placeholder')"
+        @input="setSearchTerm"
+        @submit="handleSearch"
+      />
+    </header>
+  </main>
 </template>
 
 <script>
-const HomePage = {
-  name: 'home-page',
+import {
+  defineComponent,
+  ref,
+  useContext,
+  useRouter,
+} from '@nuxtjs/composition-api'
+import { MEDIA, SEARCH } from '~/constants/store-modules'
+import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
+
+import Oops from '~/assets/oops.svg?inline'
+import Logo from '~/assets/logo.svg?inline'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
+
+const Error = defineComponent({
+  name: 'ErrorPage',
+  components: {
+    Logo,
+    Oops,
+    VSearchBar,
+  },
+  layout: 'blank',
   props: ['error'],
-  layout: 'default',
-}
+  setup() {
+    const { app, store } = useContext()
+    const router = useRouter()
+
+    const searchTerm = ref('')
+    const setSearchTerm = (value) => {
+      searchTerm.value = value
+    }
+
+    const handleSearch = async () => {
+      if (searchTerm.value === '') return
 
-export default HomePage
+      await store.dispatch(`${SEARCH}/${UPDATE_QUERY}`, {
+        q: searchTerm.value,
+      })
+      await store.dispatch(`${MEDIA}/${FETCH_MEDIA}`, {
+        query: { q: searchTerm.value },
+      })
+
+      router.push(
+        app.localePath({
+          path: `/search`,
+          query: { q: searchTerm.value },
+        })
+      )
+    }
+
+    return {
+      searchTerm,
+      setSearchTerm,
+      handleSearch,
+    }
+  },
+})
+export default Error
 </script>
 
-<style lang="scss" scoped>
-.not-found {
-  height: 71vh;
-  text-align: center;
-  font-size: 2em;
-  padding-top: 10vh;
+<style>
+/* Override the default search bar styles.
+   Maybe in the future this would warrant a
+   variant of the searchbar, but that seems
+   excessive for this one-off usage.
+*/
+.page-404 .search-bar > div:not(:focus):not(:focus-within) {
+  border-color: black;
+}
+.page-404
+  .search-bar:not(:hover)
+  button:not(:hover):not(:focus):not(:focus-within) {
+  border-color: black;
+  border-inline-start-color: transparent;
+}
+.page-404 .search-bar button {
+  border-width: 1px;
 }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 73740dacdf..2fea1c0e92 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,10 @@
 {
+  "404": {
+    "title": "The content you’re looking for seems to have disappeared.",
+    "main": "Go to {link} or search for something similar from the field below.",
+    "link-title": "Openverse",
+    "search-placeholder": "Search for content to reuse"
+  },
   "hero": {
     "brand": "Openverse",
     "title": "Search for content to reuse",
@@ -310,7 +316,6 @@
     "collection-size": "Collection size: {count} images"
   },
   "error": {
-    "not-found": "Page Not Found",
     "occurred": "An error occurred",
     "image-not-found": "Couldn't find image with id {id}",
     "media-not-found": "Couldn't find {mediaType} with id {id}",
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 92ffe8c496..c2d111a832 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2021-12-16T23:30:23+00:00\n"
+"POT-Creation-Date: 2022-01-07T17:45:02+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -13,7 +13,7 @@ msgstr ""
 "Language-Team: LANGUAGE <LL@li.org>\n"
 
 
-#: src/components/AudioTrack/layouts/Full.vue:32
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:32
 msgctxt "interpunct"
 msgid "•"
 msgstr ""
@@ -151,13 +151,13 @@ msgctxt "play-pause.replay"
 msgid "Replay"
 msgstr ""
 
-#: src/components/AudioTrack/AudioTrack.vue:4
+#: src/components/VAudioTrack/VAudioTrack.vue:4
 msgctxt "audio-track.aria-label"
 msgid "Audio Player"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioTrack/layouts/Full.vue:17
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:17
 msgctxt "audio-track.creator"
 msgid "by ###creator###"
 msgstr ""
@@ -188,13 +188,13 @@ msgctxt "audio-thumbnail.alt"
 msgid "Cover art for \"###title###\" by ###creator###"
 msgstr ""
 
-#: src/components/AudioTrack/Waveform.vue:12
+#: src/components/VAudioTrack/VWaveform.vue:12
 msgctxt "waveform.label"
 msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioTrack/Waveform.vue:489
+#: src/components/VAudioTrack/VWaveform.vue:514
 msgctxt "waveform.current-time"
 msgid "###time### seconds"
 msgstr ""
@@ -232,7 +232,7 @@ msgid "Not finding what you're looking for? Try additional ###type### sources."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VMetaSearch/VMetaSearchForm.vue:4
+#: src/components/VMetaSearch/VMetaSearchForm.vue:8
 msgctxt "meta-search.form.no-results-title"
 msgid "No ###type### results for \"###query###\"."
 msgstr ""
@@ -727,7 +727,6 @@ msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
 
-#: src/components/AppModal.vue:13
 msgctxt "browse-page.aria.close"
 msgid "close"
 msgstr ""
@@ -737,6 +736,7 @@ msgctxt "browse-page.aria.scroll"
 msgid "scroll to top"
 msgstr ""
 
+#: src/components/SearchGridForm.vue:14
 msgctxt "browse-page.aria.search"
 msgid "search"
 msgstr ""
@@ -809,6 +809,7 @@ msgid "This work is marked as being in the public domain."
 msgstr ""
 
 #. Do not translate words between ### ###.
+#: src/components/SearchGridForm.vue:68
 msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
@@ -835,6 +836,7 @@ msgctxt "browse-page.search-form.collection-placeholder"
 msgid "Search this collection"
 msgstr ""
 
+#: src/components/SearchGridForm.vue:41
 msgctxt "browse-page.search-form.button"
 msgid "Search"
 msgstr ""
@@ -1125,18 +1127,12 @@ msgctxt "search-tab.video"
 msgid "Video"
 msgstr ""
 
-#: src/layouts/error.vue:5
-msgctxt "error.not-found"
-msgid "Page Not Found"
-msgstr ""
-
-#: src/layouts/error.vue:7
 msgctxt "error.occurred"
 msgid "An error occurred"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:54
+#: src/pages/image/_id.vue:51
 msgctxt "error.image-not-found"
 msgid "Couldn't find image with id ###id###"
 msgstr ""
@@ -2016,7 +2012,7 @@ msgctxt "header.api-nav-item"
 msgid "API"
 msgstr ""
 
-#: src/components/VHeader/VHeader.vue:145
+#: src/components/VHeader/VHeader.vue:144
 msgctxt "header.loading"
 msgid "Loading..."
 msgstr ""
@@ -2161,3 +2157,24 @@ msgstr ""
 msgctxt "hero.search.button"
 msgid "Search"
 msgstr ""
+
+#: src/layouts/error.vue:12
+msgctxt "404.title"
+msgid "The content you’re looking for seems to have disappeared."
+msgstr ""
+
+#. Do not translate words between ### ###.
+#: src/layouts/error.vue:15
+msgctxt "404.main"
+msgid "Return to ###link### or search for content with the field below."
+msgstr ""
+
+#: src/layouts/error.vue:21
+msgctxt "404.link-title"
+msgid "Openverse"
+msgstr ""
+
+#: src/layouts/error.vue:28
+msgctxt "404.search-placeholder"
+msgid "Search for content to reuse"
+msgstr ""
diff --git a/src/locales/scripts/wp-locales.json b/src/locales/scripts/wp-locales.json
index 279fc77092..596ba9ae7b 100644
--- a/src/locales/scripts/wp-locales.json
+++ b/src/locales/scripts/wp-locales.json
@@ -385,7 +385,7 @@
     "facebookLocale": "da_DK",
     "wpLocale": "da_DK",
     "code": "da",
-    "translated": 99
+    "translated": 97
   },
   "de_AT": {
     "name": "German (Austria)",
@@ -419,7 +419,7 @@
     "facebookLocale": "de_DE",
     "wpLocale": "de_DE",
     "code": "de",
-    "translated": 100
+    "translated": 98
   },
   "dsb": {
     "name": "Lower Sorbian",
@@ -467,7 +467,7 @@
     "facebookLocale": "el_GR",
     "wpLocale": "el",
     "code": "el",
-    "translated": 38
+    "translated": 37
   },
   "en_AU": {
     "name": "English (Australia)",
@@ -491,7 +491,7 @@
     "googleCode": "en",
     "wpLocale": "en_CA",
     "code": "en-ca",
-    "translated": 94
+    "translated": 92
   },
   "en_GB": {
     "name": "English (UK)",
@@ -528,7 +528,7 @@
     "googleCode": "en",
     "wpLocale": "en_ZA",
     "code": "en-za",
-    "translated": 100
+    "translated": 98
   },
   "eo": {
     "name": "Esperanto",
@@ -553,7 +553,7 @@
     "facebookLocale": "es_LA",
     "wpLocale": "es_AR",
     "code": "es-ar",
-    "translated": 99
+    "translated": 97
   },
   "es_CL": {
     "name": "Spanish (Chile)",
@@ -605,7 +605,7 @@
     "facebookLocale": "es_LA",
     "wpLocale": "es_DO",
     "code": "es-do",
-    "translated": 94
+    "translated": 92
   },
   "es_EC": {
     "name": "Spanish (Ecuador)",
@@ -848,7 +848,7 @@
     "facebookLocale": "fr_FR",
     "wpLocale": "fr_FR",
     "code": "fr",
-    "translated": 90
+    "translated": 88
   },
   "frp": {
     "name": "Arpitan",
@@ -941,7 +941,7 @@
     "facebookLocale": "gl_ES",
     "wpLocale": "gl_ES",
     "code": "gl",
-    "translated": 100
+    "translated": 98
   },
   "gu": {
     "name": "Gujarati",
@@ -1101,7 +1101,7 @@
     "facebookLocale": "id_ID",
     "wpLocale": "id_ID",
     "code": "id",
-    "translated": 64
+    "translated": 63
   },
   "ido": {
     "name": "Ido",
@@ -1151,7 +1151,7 @@
     "facebookLocale": "ja_JP",
     "wpLocale": "ja",
     "code": "ja",
-    "translated": 32
+    "translated": 31
   },
   "jv_ID": {
     "name": "Javanese",
@@ -1576,7 +1576,7 @@
     "googleCode": "nl",
     "wpLocale": "nl_BE",
     "code": "nl-be",
-    "translated": 24
+    "translated": 23
   },
   "nl_NL": {
     "name": "Dutch",
@@ -1589,7 +1589,7 @@
     "facebookLocale": "nl_NL",
     "wpLocale": "nl_NL",
     "code": "nl",
-    "translated": 98
+    "translated": 97
   },
   "nn_NO": {
     "name": "Norwegian (Nynorsk)",
@@ -1737,7 +1737,7 @@
     "facebookLocale": "pt_BR",
     "wpLocale": "pt_BR",
     "code": "pt-br",
-    "translated": 72
+    "translated": 70
   },
   "pt_PT": {
     "name": "Portuguese (Portugal)",
@@ -1798,7 +1798,7 @@
     "facebookLocale": "ru_RU",
     "wpLocale": "ru_RU",
     "code": "ru",
-    "translated": 51
+    "translated": 52
   },
   "sa_IN": {
     "name": "Sanskrit",
@@ -1929,7 +1929,7 @@
     "facebookLocale": "sq_AL",
     "wpLocale": "sq",
     "code": "sq",
-    "translated": 99
+    "translated": 97
   },
   "sq_XK": {
     "name": "Shqip (Kosovo)",
@@ -2335,7 +2335,7 @@
     "facebookLocale": "zh_CN",
     "wpLocale": "zh_CN",
     "code": "zh-cn",
-    "translated": 60
+    "translated": 59
   },
   "zh_HK": {
     "name": "Chinese (Hong Kong)",
diff --git a/tailwind.config.js b/tailwind.config.js
index bc8f8ccc6b..32ee6b6705 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -189,6 +189,7 @@ module.exports = {
       ],
       heading: ['"Inter"', 'sans-serif'],
       mono: ['"JetBrains Mono"', 'monospace'],
+      serif: ['Times New Roman'],
       icons: ['"Vocabulary Icons"'],
     },
     extend: {

From 8d95967a0ddb7bd0d7d5ee40da137e8f774c859e Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 12 Jan 2022 17:09:07 -0400
Subject: [PATCH 20/24] Update e2e tests

---
 test/e2e/content-types.spec.js       | 4 ++--
 test/e2e/search-query-client.spec.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/content-types.spec.js b/test/e2e/content-types.spec.js
index 09d9a3ac76..78a95f25c4 100644
--- a/test/e2e/content-types.spec.js
+++ b/test/e2e/content-types.spec.js
@@ -41,7 +41,7 @@ const contentTypes = [
   },
   {
     id: 'image',
-    name: 'Image',
+    name: 'Images',
     url: '/search/image/?q=cat',
     supported: true,
     sources: 6,
@@ -63,7 +63,7 @@ const contentTypes = [
 ]
 
 for (const [i, contentType] of contentTypes.entries()) {
-  test(`Can open ${contentType.name} page on SSR`, async ({ page }) => {
+  test(`Can open ${contentType.name} search page on SSR`, async ({ page }) => {
     await page.goto(contentType.url)
 
     // Selected content page
diff --git a/test/e2e/search-query-client.spec.js b/test/e2e/search-query-client.spec.js
index 9b7f907233..d786d5a7b7 100644
--- a/test/e2e/search-query-client.spec.js
+++ b/test/e2e/search-query-client.spec.js
@@ -74,7 +74,7 @@ test('selecting license type filter on homepage applies filters', async ({
   const activeTabLabel = await page
     .locator('[role="tab"][aria-selected="true"]')
     .textContent()
-  expect(activeTabLabel.trim()).toEqual('Image')
+  expect(activeTabLabel.trim()).toEqual('Images')
   await expect(page).toHaveURL('search/image?q=cat&license_type=commercial')
 })
 

From 16defdab3e831be3ccfd18db6ee5ed409dcdfe34 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 12 Jan 2022 17:10:04 -0400
Subject: [PATCH 21/24] Double default timeout of playwright tests

---
 playwright.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playwright.config.js b/playwright.config.js
index 502683ce26..d24fe3d9c1 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -4,5 +4,6 @@ const config = {
   use: {
     baseURL: 'http://localhost:8443',
   },
+  timeout: 1 * 60 * 1000,
 }
 module.exports = config

From dbe772ae272177968abcce54e1d5138d7383eb1a Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Fri, 14 Jan 2022 12:33:27 -0400
Subject: [PATCH 22/24] Add truthy check for aria attribute

---
 test/unit/specs/components/v-content-link.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/unit/specs/components/v-content-link.spec.js b/test/unit/specs/components/v-content-link.spec.js
index 51ef62ec49..0f6ac80b1c 100644
--- a/test/unit/specs/components/v-content-link.spec.js
+++ b/test/unit/specs/components/v-content-link.spec.js
@@ -37,6 +37,7 @@ describe('VContentLink', () => {
     render(VContentLink, options)
     const btn = screen.getByRole('radio')
     expect(btn).toHaveAttribute('aria-checked')
+    expect(btn.getAttribute('aria-checked')).toBeTruthy()
   })
 
   it('should emit selected event on click', () => {

From 33f21f28d37539a7e3de5d78d167ee246afd984f Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Fri, 14 Jan 2022 14:29:30 -0400
Subject: [PATCH 23/24] Pass `$listeners` instead of using custom event

---
 src/components/VContentLink/VContentLink.vue             | 2 +-
 src/components/VContentLink/meta/VContentLink.stories.js | 2 +-
 test/unit/specs/components/v-content-link.spec.js        | 8 --------
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 4fd653c7a3..5be742ae58 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -9,7 +9,7 @@
     role="radio"
     type="button"
     :aria-checked="isSelected"
-    @click="$emit('selected', mediaType)"
+    v-on="$listeners"
   >
     <div
       class="flex"
diff --git a/src/components/VContentLink/meta/VContentLink.stories.js b/src/components/VContentLink/meta/VContentLink.stories.js
index 68719a3dd8..31cba88d2e 100644
--- a/src/components/VContentLink/meta/VContentLink.stories.js
+++ b/src/components/VContentLink/meta/VContentLink.stories.js
@@ -36,7 +36,7 @@ const TwoVContentLinkStory = () => ({
       :media-type="type.mediaType"
       :results-count="type.resultsCount"
       :is-selected="selected == type.mediaType"
-      @selected="onSelected"/>
+      @click="onSelected(type.mediaType)"/>
   </div>
   `,
   components: { VContentLink },
diff --git a/test/unit/specs/components/v-content-link.spec.js b/test/unit/specs/components/v-content-link.spec.js
index 0f6ac80b1c..7b072ad4dd 100644
--- a/test/unit/specs/components/v-content-link.spec.js
+++ b/test/unit/specs/components/v-content-link.spec.js
@@ -1,6 +1,5 @@
 import VContentLink from '~/components/VContentLink/VContentLink.vue'
 import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
 import VueI18n from 'vue-i18n'
 
 const enMessages = require('~/locales/en.json')
@@ -39,11 +38,4 @@ describe('VContentLink', () => {
     expect(btn).toHaveAttribute('aria-checked')
     expect(btn.getAttribute('aria-checked')).toBeTruthy()
   })
-
-  it('should emit selected event on click', () => {
-    const { emitted } = render(VContentLink, options)
-    const btn = screen.getByText('search-tab.image')
-    userEvent.click(btn)
-    expect(emitted().selected).toBeTruthy()
-  })
 })

From 30256dec36e7c1d5ea38bbcfb6dad095ef78acac Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Fri, 14 Jan 2022 15:06:28 -0400
Subject: [PATCH 24/24] Use border transparent on focus

---
 src/components/VContentLink/VContentLink.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 5be742ae58..b96e6320ad 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="bg-white border border-dark-charcoal/20 rounded-sm flex hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    class="bg-white border border-dark-charcoal/20 rounded-sm flex hover:bg-dark-charcoal hover:text-white focus:bg-white focus:border-tx focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
     :class="[
       isStacked
         ? 'flex-col items-start py-4 ps-4 pe-12'