Add sensitivity toggles in filter sidebar and modal (#2672)

Co-authored-by: Zack Krida <[email protected]>

frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue

@@ -25,7 +25,7 @@
     <div v-show="audio.thumbnail && isOk" class="thumbnail absolute inset-0">
       <img
         ref="imgEl"
-        class="h-full w-full overflow-clip object-cover object-center"
+        class="h-full w-full overflow-clip object-cover object-center duration-200 motion-safe:transition-[filter,transform]"
         :class="{ 'scale-150 blur-image': shouldBlur }"
         :src="audio.thumbnail"
         :alt="helpText"

frontend/src/components/VCheckbox/VCheckbox.vue

@@ -146,7 +146,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const localCheckedState = ref(props.checked || false)
     const labelClasses = computed(() =>
-      props.disabled ? "text-dark-charcoal-70" : "text-dark-charcoal"
+      props.disabled ? "text-dark-charcoal-40" : "text-dark-charcoal"
     )
     const inputAttrs = computed<CheckboxAttrs>(() => {
       const attrs: CheckboxAttrs = {

frontend/src/components/VFilters/VSearchGridFilter.vue

@@ -42,7 +42,6 @@ import { watchDebounced } from "@vueuse/core"
 import { useSearchStore } from "~/stores/search"
 import { areQueriesEqual, ApiQueryParams } from "~/utils/search-query-transform"
 import type { NonMatureFilterCategory } from "~/constants/filters"
-import { defineEvent } from "~/types/emits"
 import { useI18n } from "~/composables/use-i18n"
 import { useAnalytics } from "~/composables/use-analytics"
 
@@ -74,9 +73,6 @@ export default defineComponent({
       default: true,
     },
   },
-  emits: {
-    close: defineEvent(),
-  },
   setup() {
     const searchStore = useSearchStore()
 

frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -49,11 +49,17 @@
           @select="$emit('select', $event)"
         />
       </VTabPanel>
-      <VTabPanel v-if="showFilters" id="filters">
+      <!-- Horizontal padding removed to display divider. -->
+      <VTabPanel v-if="showFilters" id="filters" class="px-0">
         <VSearchGridFilter
+          class="px-6"
           :show-filter-header="false"
           :change-tab-order="false"
         />
+        <VSafeBrowsing
+          v-if="isSensitiveContentEnabled"
+          class="border-t border-dark-charcoal-20 px-6 pt-6"
+        />
       </VTabPanel>
     </VTabs>
     <footer
@@ -77,6 +83,7 @@
 import { computed, defineComponent, PropType, ref } from "vue"
 
 import { useSearchStore } from "~/stores/search"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import useSearchType from "~/composables/use-search-type"
 
@@ -92,12 +99,14 @@ import VShowResultsButton from "~/components/VHeader/VHeaderMobile/VShowResultsB
 import VTab from "~/components/VTabs/VTab.vue"
 import VTabPanel from "~/components/VTabs/VTabPanel.vue"
 import VTabs from "~/components/VTabs/VTabs.vue"
+import VSafeBrowsing from "~/components/VSafeBrowsing/VSafeBrowsing.vue"
 
 type ContentSettingsTab = "content-settings" | "filters"
 
 export default defineComponent({
   name: "VContentSettingsModalContent",
   components: {
+    VSafeBrowsing,
     VCloseButton,
     VIcon,
     VModalContent,
@@ -158,7 +167,14 @@ export default defineComponent({
       searchStore.clearFilters()
     }
 
+    const featureStore = useFeatureFlagStore()
+    const isSensitiveContentEnabled = computed(() =>
+      featureStore.isOn("sensitive_content")
+    )
+
     return {
+      isSensitiveContentEnabled,
+
       searchType,
 
       selectedTab,

frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue

@@ -0,0 +1,110 @@
+<template>
+  <section id="safe-browsing" aria-labelledby="safe-browsing-heading">
+    <header class="relative mb-6 flex items-center justify-between">
+      <h4 id="safe-browsing-heading" class="caption-bold uppercase">
+        {{ $t("filters.safeBrowsing.title") }}
+      </h4>
+    </header>
+    <i18n tag="p" path="filters.safeBrowsing.desc" class="label-regular">
+      <template #sensitive>
+        <VLink :href="sensitivityPath">{{
+          $t("filters.safeBrowsing.sensitive")
+        }}</VLink>
+      </template>
+    </i18n>
+    <form class="safe-browsing-form">
+      <fieldset class="mb-10 mt-8 flex flex-col gap-8">
+        <div v-for="toggle in toggles" :key="toggle.name">
+          <VCheckbox
+            :id="toggle.name"
+            class="flex-row-reverse justify-between"
+            :value="toggle.name"
+            :checked="toggle.state.value"
+            :disabled="isDisabled(toggle.name)"
+            is-switch
+            @change="toggle.switchFn"
+          >
+            <span class="label-bold">{{
+              $t(`filters.safeBrowsing.toggles.${toggle.name}.title`)
+            }}</span>
+          </VCheckbox>
+          <p
+            class="label-regular mt-2"
+            :class="{ 'text-dark-charcoal-40': isDisabled(toggle.name) }"
+          >
+            {{ $t(`filters.safeBrowsing.toggles.${toggle.name}.desc`) }}
+          </p>
+        </div>
+      </fieldset>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue"
+import { useContext } from "@nuxtjs/composition-api"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useUiStore } from "~/stores/ui"
+import { ON, OFF } from "~/constants/feature-flag"
+
+import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
+import VLink from "~/components/VLink.vue"
+
+/**
+ * Contains toggles to determine the users preferences towards fetching results
+ * that may contain sensitive content and subsequently blurring them to prevent
+ * accidental exposure or showing them directly.
+ */
+export default defineComponent({
+  name: "VSafeBrowsing",
+  components: { VCheckbox, VLink },
+  setup() {
+    const { app } = useContext()
+
+    const sensitivityPath = computed(() => app.localePath("/about")) // TODO: Issue#2550
+
+    const featureFlagStore = useFeatureFlagStore()
+    let fetchSensitive = computed(() =>
+      featureFlagStore.isOn("fetch_sensitive")
+    )
+    let setFetchSensitive = ({ checked }: { checked: boolean }) => {
+      featureFlagStore.toggleFeature("fetch_sensitive", checked ? ON : OFF)
+      if (!checked) {
+        // If sensitive content is not fetched, there is nothing to blur/unblur.
+        // In this case, we reset blurring to its default value.
+        setBlurSensitive({ checked: true })
+      }
+    }
+
+    const uiStore = useUiStore()
+    let blurSensitive = computed(() => uiStore.shouldBlurSensitive)
+    let setBlurSensitive = ({ checked }: { checked: boolean }) => {
+      uiStore.shouldBlurSensitive = checked
+    }
+
+    const toggles = [
+      {
+        name: "fetchSensitive",
+        state: fetchSensitive,
+        switchFn: setFetchSensitive,
+      },
+      {
+        name: "blurSensitive",
+        state: blurSensitive,
+        switchFn: setBlurSensitive,
+      },
+    ]
+
+    const isDisabled = (name: string) =>
+      name === "blurSensitive" && !fetchSensitive.value
+
+    return {
+      sensitivityPath,
+
+      toggles,
+      isDisabled,
+    }
+  },
+})
+</script>

frontend/src/components/VSafeBrowsing/meta/VSafeBrowsing.stories.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Description, Meta, Story } from "@storybook/addon-docs"
+
+import VSafeBrowsing from "~/components/VSafeBrowsing/VSafeBrowsing.vue"
+
+<Meta title="Components/VSafeBrowsing" component={VSafeBrowsing} />
+
+export const Template = (args) => ({
+  template: `<VSafeBrowsing v-bind="args" />`,
+  components: { VSafeBrowsing },
+  setup() {
+    return { args }
+  },
+})
+
+# VSafeBrowsing
+
+<Description of={VSafeBrowsing} />
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      viewport: { defaultViewport: "xs" }, // because it is present in the sidebar
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

frontend/src/components/VSearchResultsGrid/VImageCell.vue

@@ -19,7 +19,7 @@
         <img
           ref="img"
           loading="lazy"
-          class="block w-full rounded-sm object-cover"
+          class="block w-full rounded-sm object-cover duration-200 motion-safe:transition-[filter,transform]"
           :class="[
             isSquare ? 'h-full' : 'margin-auto',
             { 'scale-150 blur-image': shouldBlur },

frontend/src/layouts/search-layout.vue

@@ -30,7 +30,11 @@
         v-if="isSidebarVisible"
         class="sidebar end-0 z-10 h-full overflow-y-auto border-s border-dark-charcoal-20 bg-dark-charcoal-06"
       >
-        <VSearchGridFilter class="px-10 pb-10 pt-8" @close="closeSidebar" />
+        <VSearchGridFilter class="px-10 py-8" />
+        <VSafeBrowsing
+          v-if="isSensitiveContentEnabled"
+          class="border-t border-dark-charcoal-20 px-10 py-8"
+        />
       </aside>
 
       <div
@@ -100,6 +104,9 @@ export default defineComponent({
     onMounted(() => {
       featureStore.initFromSession()
     })
+    const isSensitiveContentEnabled = computed(() =>
+      featureStore.isOn("sensitive_content")
+    )
 
     const { updateBreakpoint } = useLayout()
 
@@ -126,10 +133,6 @@ export default defineComponent({
         isDesktopLayout.value
     )
 
-    const closeSidebar = () => {
-      uiStore.setFiltersState(false)
-    }
-
     const isHeaderScrolled = ref(false)
     const showScrollButton = ref(false)
 
@@ -161,6 +164,8 @@ export default defineComponent({
     )
 
     return {
+      isSensitiveContentEnabled,
+
       mainPageRef,
       headerRef,
 
@@ -170,8 +175,6 @@ export default defineComponent({
       breakpoint,
 
       headerBorder,
-
-      closeSidebar,
     }
   },
   head() {

frontend/src/locales/scripts/en.json5

@@ -337,6 +337,21 @@
       title: "Search Settings",
       enable: "Enable Mature Content",
     },
+    safeBrowsing: {
+      title: "Safe Browsing",
+      desc: "Content marked as {sensitive} is not shown by default.",
+      sensitive: "sensitive",
+      toggles: {
+        fetchSensitive: {
+          title: "Sensitive results",
+          desc: "Show results marked as sensitive in the results area.",
+        },
+        blurSensitive: {
+          title: "Blur content",
+          desc: "Blur images and texts to prevent seeing sensitive material.",
+        },
+      },
+    },
     lengths: {
       title: "Duration",
       shortest: "< 30 sec",