From 56e22d539d94d69ea6abc31dc323fef87977f32d Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Mon, 8 Jul 2024 08:01:47 +0200
Subject: [PATCH] Hide thumbnails setting

Prevents downloading thumbnails, due to a known issue where certain image downloads will crash the Codex node.
---
 src/App.vue                           |  12 +-
 src/components/AppNav.vue             | 235 +------------------
 src/components/MainMenu.vue           | 315 ++++++++++++++++++++++++++
 src/components/NotificationCentre.vue |  27 ++-
 src/components/StorageRequests.vue    |   5 +-
 src/views/RequestsView.vue            |   5 +-
 6 files changed, 356 insertions(+), 243 deletions(-)
 create mode 100644 src/components/MainMenu.vue

diff --git a/src/App.vue b/src/App.vue
index a5e8900..b4e369c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,16 +51,24 @@ async function detectRunningCodexDevnet() {
     return false
   }
 }
+const hideThumbnails = ref(false)
+function onToggleHideThumbnails(override) {
+  if (override !== undefined) {
+    hideThumbnails.value = override
+  } else {
+    hideThumbnails.value = !hideThumbnails.value
+  }
+}
 </script>
 
 <template>
   <div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
     <header class="sticky top-0 z-10 w-full text-center border-b p-4 flex-none">
-      <AppNav />
+      <AppNav :hideThumbnails="hideThumbnails" @toggle-hide-thumbnails="onToggleHideThumbnails" />
     </header>
     <main class="grow flex flex-col mx-auto max-w-screen-xl w-full p-4">
       <NavBreadcrumb class="mb-4"></NavBreadcrumb>
-      <RouterView />
+      <RouterView :hideThumbnails="hideThumbnails" />
     </main>
     <footer class="w-full sticky bottom-0 border-t p-4 mt-4 flex-none flex justify-between">
       <div class="flex flex-col space-y-1">
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 58a71d0..1d14a6f 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -1,82 +1,14 @@
 <script setup>
-import { initDrawers, Drawer } from 'flowbite'
-import { onMounted, onUnmounted, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import NotificationCentre from './NotificationCentre.vue'
 import { useEventsStore } from '@/stores/events'
 import { storeToRefs } from 'pinia'
+import MainMenu from './MainMenu.vue'
+import { useAttrs } from 'vue'
 
 const eventsStore = useEventsStore()
 const { events } = storeToRefs(eventsStore)
-
-let drawer
-onMounted(() => {
-  // initDrawers()
-  // set the drawer menu element
-  const $targetEl = document.getElementById('drawer-navigation')
-  // options with default values
-  const options = {
-    placement: 'left',
-    backdrop: true,
-    bodyScrolling: false,
-    edge: false,
-    edgeOffset: '',
-    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-0'
-  }
-
-  // instance options object
-  const instanceOptions = {
-    id: 'drawer-navigation',
-    override: true
-  }
-
-  /*
-   * $targetEl (required)
-   * options (optional)
-   * instanceOptions (optional)
-   */
-  drawer = new Drawer($targetEl, options, instanceOptions)
-
-  var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
-  var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon')
-
-  // Change the icons inside the button based on previous settings
-  if (
-    localStorage.getItem('color-theme') === 'dark' ||
-    (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
-    themeToggleLightIcon.classList.remove('hidden')
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-    themeToggleDarkIcon.classList.remove('hidden')
-  }
-
-  var themeToggleBtn = document.getElementById('theme-toggle')
-
-  themeToggleBtn.addEventListener('click', function () {
-    // toggle icons inside button
-    themeToggleDarkIcon.classList.toggle('hidden')
-    themeToggleLightIcon.classList.toggle('hidden')
-
-    if (document.documentElement.classList.contains('dark')) {
-      document.documentElement.classList.remove('dark')
-      localStorage.setItem('color-theme', 'light')
-    } else {
-      document.documentElement.classList.add('dark')
-      localStorage.setItem('color-theme', 'dark')
-    }
-  })
-  document.documentElement.addEventListener('click', hideDrawer)
-})
-function hideDrawer() {
-  if (drawer.isVisible) {
-    drawer.hide()
-  }
-}
-onUnmounted(() => {
-  document.documentElement.removeEventListener('click', hideDrawer)
-})
+const attrs = useAttrs()
 </script>
 
 <template>
@@ -95,163 +27,12 @@ onUnmounted(() => {
           v-model="events"
           @clear-events="eventsStore.clearEvents"
           @clear-event="eventsStore.clearEvent"
+          :hideThumbnails="attrs.hideThumbnails"
         ></NotificationCentre>
-        <button
-          type="button"
-          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-          @click.stop="drawer.toggle()"
-        >
-          <span class="sr-only">Open main menu</span>
-          <svg
-            class="w-5 h-5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 17 14"
-          >
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M1 1h15M1 7h15M1 13h15"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-
-    <!-- drawer component -->
-    <div
-      id="drawer-navigation"
-      class="fixed top-0 left-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white dark:bg-gray-800"
-      tabindex="-1"
-      aria-labelledby="drawer-navigation-label"
-    >
-      <h5
-        id="drawer-navigation-label"
-        class="text-base text-left font-semibold text-gray-500 uppercase dark:text-gray-400"
-      >
-        Menu
-      </h5>
-      <button
-        @click="drawer.hide()"
-        type="button"
-        data-drawer-hide="drawer-navigation"
-        aria-controls="drawer-navigation"
-        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-      >
-        <svg
-          aria-hidden="true"
-          class="w-5 h-5"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-        <span class="sr-only">Close menu</span>
-      </button>
-      <div class="py-4 overflow-y-auto">
-        <ul class="space-y-2 font-medium">
-          <li>
-            <RouterLink
-              to="/moderate"
-              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
-              @click="drawer.hide()"
-            >
-              <svg
-                class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 22 21"
-              >
-                <path
-                  d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"
-                />
-                <path
-                  d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"
-                />
-              </svg>
-              <span class="ms-3">Moderate</span>
-            </RouterLink>
-          </li>
-          <li>
-            <a
-              href="https://github.com/codex-storage/ethcc-demo"
-              target="_blank"
-              class="flex text-left items-center text-gray-900 p-2 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
-              @click="drawer.hide()"
-            >
-              <svg
-                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 18 18"
-              >
-                <path
-                  d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
-                />
-              </svg>
-              <span class="flex-1 ms-3 whitespace-nowrap">Instructions</span>
-              <svg
-                class="w-6 h-6 text-gray-900 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-        <ul class="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700">
-          <li>
-            <button
-              id="theme-toggle"
-              type="button"
-              class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
-            >
-              <svg
-                id="theme-toggle-dark-icon"
-                class="hidden w-5 h-5"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-              </svg>
-              <svg
-                id="theme-toggle-light-icon"
-                class="hidden w-5 h-5"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                ></path>
-              </svg>
-            </button>
-          </li>
-        </ul>
+        <MainMenu
+          :hideThumbnails="attrs.hideThumbnails"
+          @toggle-hide-thumbnails="attrs.onToggleHideThumbnails"
+        ></MainMenu>
       </div>
     </div>
   </nav>
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
new file mode 100644
index 0000000..c0898b1
--- /dev/null
+++ b/src/components/MainMenu.vue
@@ -0,0 +1,315 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { initDrawers, Drawer } from 'flowbite'
+
+const props = defineProps({
+  hideThumbnails: Boolean
+})
+const emit = defineEmits(['toggle-hide-thumbnails'])
+
+let drawer
+onMounted(() => {
+  // initDrawers()
+  // set the drawer menu element
+  const $targetEl = document.getElementById('drawer-navigation')
+  // options with default values
+  const options = {
+    placement: 'left',
+    backdrop: true,
+    bodyScrolling: false,
+    edge: false,
+    edgeOffset: '',
+    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-0'
+  }
+
+  // instance options object
+  const instanceOptions = {
+    id: 'drawer-navigation',
+    override: true
+  }
+
+  /*
+   * $targetEl (required)
+   * options (optional)
+   * instanceOptions (optional)
+   */
+  drawer = new Drawer($targetEl, options, instanceOptions)
+
+  document.documentElement.addEventListener('click', hideDrawer)
+
+  themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
+  themeToggleLightIcon = document.getElementById('theme-toggle-light-icon')
+  thumbnailToggle = document.getElementById('thumbnail-toggle')
+  loadDarkModeFromLocalStorage()
+  loadHideThumbnailsFromLocalStorage()
+})
+
+var themeToggleDarkIcon
+var themeToggleLightIcon
+var thumbnailToggle
+
+function loadDarkModeFromLocalStorage() {
+  // Change the icons inside the button based on previous settings
+  if (
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    themeToggleLightIcon.classList.remove('hidden')
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+    themeToggleDarkIcon.classList.remove('hidden')
+  }
+}
+function loadHideThumbnailsFromLocalStorage() {
+  // Change the icons inside the button based on previous settings
+  if (localStorage.getItem('hideThumbnails') === 'true') {
+    thumbnailToggle.checked = true
+    emit('toggle-hide-thumbnails', true)
+  }
+}
+function toggleDarkMode() {
+  // toggle icons inside button
+  themeToggleDarkIcon.classList.toggle('hidden')
+  themeToggleLightIcon.classList.toggle('hidden')
+
+  if (document.documentElement.classList.contains('dark')) {
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('color-theme', 'light')
+  } else {
+    document.documentElement.classList.add('dark')
+    localStorage.setItem('color-theme', 'dark')
+  }
+}
+function toggleHideThumbnails(event) {
+  emit('toggle-hide-thumbnails')
+  localStorage.setItem('hideThumbnails', event.target.checked)
+}
+function hideDrawer() {
+  if (drawer.isVisible) {
+    drawer.hide()
+  }
+}
+onUnmounted(() => {
+  document.documentElement.removeEventListener('click', hideDrawer)
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+    @click.stop="drawer.toggle()"
+  >
+    <span class="sr-only">Open main menu</span>
+    <svg
+      class="w-5 h-5"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 17 14"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M1 1h15M1 7h15M1 13h15"
+      />
+    </svg>
+  </button>
+  <!-- drawer component -->
+  <div
+    id="drawer-navigation"
+    class="fixed top-0 left-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white dark:bg-gray-800"
+    tabindex="-1"
+    aria-labelledby="drawer-navigation-label"
+  >
+    <h5
+      id="drawer-navigation-label"
+      class="text-base text-left font-semibold text-gray-500 uppercase dark:text-gray-400"
+    >
+      Menu
+    </h5>
+    <button
+      @click="drawer.hide()"
+      type="button"
+      data-drawer-hide="drawer-navigation"
+      aria-controls="drawer-navigation"
+      class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+      <span class="sr-only">Close menu</span>
+    </button>
+    <div class="py-4 overflow-y-auto">
+      <ul class="space-y-2 font-medium">
+        <li>
+          <RouterLink
+            to="/moderate"
+            class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+            @click="drawer.hide()"
+          >
+            <svg
+              class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M9 2a1 1 0 0 0-1 1H6a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2a1 1 0 0 0-1-1H9Zm1 2h4v2h1a1 1 0 1 1 0 2H9a1 1 0 0 1 0-2h1V4Zm5.707 8.707a1 1 0 0 0-1.414-1.414L11 14.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+
+            <span class="ms-3">Moderate</span>
+          </RouterLink>
+        </li>
+        <li>
+          <a
+            href="https://github.com/codex-storage/ethcc-demo"
+            target="_blank"
+            class="flex text-left items-center text-gray-900 p-2 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+            @click="drawer.hide()"
+          >
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Zm4.996 2a1 1 0 0 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM11 8a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-6Zm-4.004 3a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM11 11a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-6Zm-4.004 3a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM11 14a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-6Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+
+            <span class="flex-1 ms-3 whitespace-nowrap">Instructions</span>
+            <svg
+              class="w-6 h-6 text-gray-900 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"
+              />
+            </svg>
+          </a>
+        </li>
+      </ul>
+
+      <ul class="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700">
+        <li>
+          <h6
+            id="drawer-navigation-label"
+            class="text-sm text-left font-semibold text-gray-500 uppercase dark:text-gray-400"
+          >
+            Settings
+          </h6>
+        </li>
+        <li>
+          <label class="inline-flex items-center cursor-pointer">
+            <span class="me-3 text-sm font-light text-gray-900 dark:text-gray-300"
+              >Download thumbnails</span
+            >
+            <input
+              id="thumbnail-toggle"
+              type="checkbox"
+              value=""
+              class="sr-only peer"
+              @input="toggleHideThumbnails"
+            />
+            <div
+              class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+            ></div>
+          </label>
+          <button
+            type="button"
+            class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
+          >
+            <svg
+              id="thumbnail-toggle-enabled"
+              class="hidden w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+            <svg
+              id="thumbnail-toggle-disabled"
+              class="hidden w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </li>
+        <li>
+          <button
+            id="theme-toggle"
+            type="button"
+            class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
+            @click="toggleDarkMode"
+          >
+            <svg
+              id="theme-toggle-dark-icon"
+              class="hidden w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+            <svg
+              id="theme-toggle-light-icon"
+              class="hidden w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/src/components/NotificationCentre.vue b/src/components/NotificationCentre.vue
index e6f19a3..4937a38 100644
--- a/src/components/NotificationCentre.vue
+++ b/src/components/NotificationCentre.vue
@@ -15,12 +15,12 @@ const router = useRouter()
 
 const events = defineModel()
 const emit = defineEmits(['clearEvents', 'clearEvent'])
+defineProps({
+  hideThumbnails: Boolean
+})
 function request(requestId) {
   return requests.value[requestId]
 }
-const eventsFiltered = computed(() => {
-  return Object.values(events.value).filter((event) => event !== null)
-})
 const showNotifCentre = ref(false)
 function toggleNotifCentre() {
   showNotifCentre.value = !showNotifCentre.value
@@ -54,20 +54,24 @@ const eventsOrdered = computed(() => {
 
 <template>
   <div class="relative">
-    <button @click.stop="toggleNotifCentre">
+    <button
+      @click.stop="toggleNotifCentre"
+      class="focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 rounded-lg"
+    >
       <svg
-        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
         :class="buttonClass"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
         fill="currentColor"
-        viewBox="0 0 22 21"
+        viewBox="0 0 24 24"
       >
         <path
-          d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"
-        />
-        <path
-          d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"
+          fill-rule="evenodd"
+          d="M18.458 3.11A1 1 0 0 1 19 4v16a1 1 0 0 1-1.581.814L12 16.944V7.056l5.419-3.87a1 1 0 0 1 1.039-.076ZM22 12c0 1.48-.804 2.773-2 3.465v-6.93c1.196.692 2 1.984 2 3.465ZM10 8H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6V8Zm0 9H5v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3Z"
+          clip-rule="evenodd"
         />
       </svg>
     </button>
@@ -100,8 +104,9 @@ const eventsOrdered = computed(() => {
               @click="dismissAndRedirect(requestId)"
             >
               <div class="flex items-center">
-                <div class="flex-shrink-0">
+                <div v-if="!hideThumbnails" class="flex-shrink-0">
                   <CodexImage
+                    v-if="request(requestId)?.request"
                     :cid="request(requestId).request.content.cid"
                     :moderated="moderated"
                     class="w-8 h-8 rounded-full mt-1"
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index 7bf3236..93783ad 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -31,7 +31,8 @@ defineProps({
   enableModeration: {
     type: Boolean,
     default: false
-  }
+  },
+  hideThumbnails: Boolean
 })
 
 onMounted(() => {
@@ -175,7 +176,7 @@ onMounted(() => {
               class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
             >
               <CodexImage
-                v-if="fetched.request"
+                v-if="fetched.request && !hideThumbnails"
                 :cid="request.content.cid"
                 :moderated="moderated"
                 class="w-10 h-10 rounded-full mt-1"
diff --git a/src/views/RequestsView.vue b/src/views/RequestsView.vue
index c335069..0a2d117 100644
--- a/src/views/RequestsView.vue
+++ b/src/views/RequestsView.vue
@@ -6,11 +6,14 @@ import SkeletonLoading from '@/components/SkeletonLoading.vue'
 
 const requestsStore = useRequestsStore()
 const { loading } = storeToRefs(requestsStore)
+defineProps({
+  hideThumbnails: Boolean
+})
 </script>
 
 <template>
   <div>
     <SkeletonLoading v-if="loading.past" type="text" />
-    <StorageRequests v-else />
+    <StorageRequests v-else :hideThumbnails="hideThumbnails" />
   </div>
 </template>