feat: add toast notification

Rule-34 · May 22, 2023 · 5617c48 · 5617c48
1 parent 5adc560
commit 5617c48
Show file tree

Hide file tree

Showing 8 changed files with 341 additions and 352 deletions.
diff --git a/components/pages/posts/post/PostDownload.vue b/components/pages/posts/post/PostDownload.vue
@@ -1,6 +1,7 @@
 <script setup>
   import { ArrowDownTrayIcon } from '@heroicons/vue/24/outline'
   import { ProxyHelper } from 'assets/js/ProxyHelper'
+  import { toast } from 'vue-sonner'
 
   const props = defineProps({
     mediaName: {
@@ -18,8 +19,8 @@
 
   async function downloadMedia() {
     if (!isPremium.value) {
-      // TODO: Toast
-      // return
+      toast.error('You have found a Premium feature! Subscribe to use it.')
+      return
     }
 
     const proxiedUrl = ProxyHelper.proxyUrl(props.mediaUrl)
@@ -28,8 +29,8 @@
       responseType: 'blob',
 
       onResponseError(context) {
-        // TODO: Toast
-        throw new Error(context.error)
+        toast.error(`Failed to download media: ${context.error.message}`)
+        throw context.error
       }
     })
 

diff --git a/composables/usePosts.js b/composables/usePosts.js
@@ -1,5 +1,6 @@
 import { computed, ref } from 'vue'
 import { useUserSettings } from '~/composables/useUserSettings'
+import { toast } from 'vue-sonner'
 
 const userSettings = useUserSettings()
 
@@ -80,7 +81,7 @@ export function usePosts(initialPostsPage) {
       //
       .catch((error) => {
         console.error(error)
-        // TODO: Toast
+        toast.error(`Failed to load next posts: "${error.message}"`)
       })
 
     loadedPostsPages.value.push(postsPage)

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,84 +1,86 @@
 <script setup>
-import { Touch } from 'vuetify/directives'
-import Toasts from '~/components/layout/Toasts.vue'
-
-const vTouch = Touch
-
-const appStatistics = useAppStatistics()
-
-const userSettings = useUserSettings()
-const { value: isMenuActive, toggle: toggleMenu } = useMenu()
-const { value: isSearchMenuActive, toggle: toggleSearchMenu } = useSearchMenu()
-
-function touchHandler(direction, event) {
-	if (!userSettings.navigationTouchGestures) {
-		console.debug('Gestures setting is disabled, skipping...')
-		return
-	}
-
-	const touchThreshold = screen.availWidth * 0.25
-	// console.debug(touchThreshold, event)
-
-	switch (direction) {
-		case 'right':
-			if (event.touchstartX > touchThreshold) {
-				console.debug('Insufficient touch threshold')
-				return
-			}
-
-			if (isSearchMenuActive) {
-				toggleSearchMenu(false)
-
-				//
-			} else {
-				toggleMenu(true)
-			}
-			break
-
-		case 'left':
-			if (event.touchstartX < screen.availWidth - touchThreshold) {
-				console.debug('Insufficient touch threshold')
-				return
-			}
-
-			if (!isSearchMenuActive) {
-				toggleSearchMenu(true)
-
-				//
-			} else {
-				toggleMenu(false)
-			}
-			break
-	}
-}
-
-console.info(
-	'%cWe ❤︎ open source!',
-	'font-size:32px;font-weight:bold;letter-spacing:0.02em;color:hsl(205, 78%, 62%);background-color:white;padding:8px 16px;'
-)
-console.info(
-	'%cContribute: https://redirect.r34.app/github\nJoin our discord: https://redirect.r34.app/discord',
-	'background-color:hsl(0, 0%, 7%);padding:4px 8px;font-size:16px;color:white;'
-)
+  import { Touch } from 'vuetify/directives'
+
+  const vTouch = Touch
+
+  const appStatistics = useAppStatistics()
+
+  const userSettings = useUserSettings()
+  const { value: isMenuActive, toggle: toggleMenu } = useMenu()
+  const { value: isSearchMenuActive, toggle: toggleSearchMenu } = useSearchMenu()
+
+  function touchHandler(direction, event) {
+    if (!userSettings.navigationTouchGestures) {
+      console.debug('Gestures setting is disabled, skipping...')
+      return
+    }
+
+    const touchThreshold = screen.availWidth * 0.25
+    // console.debug(touchThreshold, event)
+
+    switch (direction) {
+      case 'right':
+        if (event.touchstartX > touchThreshold) {
+          console.debug('Insufficient touch threshold')
+          return
+        }
+
+        if (isSearchMenuActive) {
+          toggleSearchMenu(false)
+
+          //
+        } else {
+          toggleMenu(true)
+        }
+        break
+
+      case 'left':
+        if (event.touchstartX < screen.availWidth - touchThreshold) {
+          console.debug('Insufficient touch threshold')
+          return
+        }
+
+        if (!isSearchMenuActive) {
+          toggleSearchMenu(true)
+
+          //
+        } else {
+          toggleMenu(false)
+        }
+        break
+    }
+  }
+
+  console.info(
+    '%cWe ❤︎ open source!',
+    'font-size:32px;font-weight:bold;letter-spacing:0.02em;color:hsl(205, 78%, 62%);background-color:white;padding:8px 16px;'
+  )
+  console.info(
+    '%cContribute: https://redirect.r34.app/github\nJoin our discord: https://redirect.r34.app/discord',
+    'background-color:hsl(0, 0%, 7%);padding:4px 8px;font-size:16px;color:white;'
+  )
 </script>
 
 <template>
-	<!--  TODO: Fix not working when z-10 is used -->
-	<div
-		v-touch="{
-			left: (e) => touchHandler('left', e),
-			right: (e) => touchHandler('right', e)
-		}"
-	>
-		<!-- Notifications -->
-		<Toasts />
-
-		<Sidebar />
-
-		<Navbar />
-
-		<!-- Layout content -->
-		<!-- TODO: Create container component: https://tailwindui.com/components/application-ui/layout/containers -->
-		<slot />
-	</div>
+  <!--  TODO: Fix not working when z-10 is used -->
+  <div
+    v-touch="{
+      left: (e) => touchHandler('left', e),
+      right: (e) => touchHandler('right', e)
+    }"
+  >
+    <Toaster
+      close-button
+      position="top-center"
+      theme="dark"
+    />
+
+    <Sidebar />
+
+    <Navbar />
+
+    <!-- Layout content -->
+    <!-- TODO: Create container component: https://tailwindui.com/components/application-ui/layout/containers -->
+    <slot />
+  </div>
 </template>