Hide drop to upload in notifications

And don't show notifications on top of the drawer with
show all notifications enabled

Fixes #386

app/src/stores/notifications.ts

@@ -31,13 +31,18 @@ export const useNotificationsStore = createStore({
 
 			return id;
 		},
+		hide(id: string) {
+			const toBeHidden = this.state.queue.find((n) => n.id === id);
+			if (!toBeHidden) return;
+
+			this.state.queue = this.state.queue.filter((n) => n.id !== id);
+			this.state.previous = [...this.state.previous, toBeHidden];
+		},
 		remove(id: string) {
 			const toBeRemoved = this.state.queue.find((n) => n.id === id);
-
 			if (!toBeRemoved) return;
 
 			this.state.queue = this.state.queue.filter((n) => n.id !== id);
-			this.state.previous = [...this.state.previous, toBeRemoved];
 		},
 		update(id: string, updates: Partial<Notification>) {
 			this.state.queue = this.state.queue.map(updateIfNeeded);

app/src/views/private/components/notifications-preview/notifications-preview.vue

@@ -3,7 +3,7 @@
 		<transition-expand tag="div">
 			<div v-if="active" class="inline">
 				<div class="padding-box">
-					<router-link class="link" :to="activityLink" :class="{ 'has-items': lastFour.length > 0 }">
+					<router-link class="link" to="/activity" :class="{ 'has-items': lastFour.length > 0 }">
 						{{ $t('show_all_activity') }}
 					</router-link>
 					<transition-group tag="div" name="notification" class="transition">
@@ -19,7 +19,7 @@
 
 		<drawer-button
 			:active="active"
-			@click="active = !active"
+			@click="$emit('input', !active)"
 			v-tooltip.left="$t('notifications')"
 			class="toggle"
 			icon="notifications"
@@ -37,28 +37,22 @@ import { useNotificationsStore } from '@/stores/';
 
 export default defineComponent({
 	components: { DrawerButton, NotificationItem },
+	model: {
+		prop: 'active',
+	},
 	props: {
 		drawerOpen: {
 			type: Boolean,
 			default: false,
 		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const notificationsStore = useNotificationsStore();
-
-		const activityLink = computed(() => `/activity`);
-		const active = ref(false);
-
-		watch(
-			() => props.drawerOpen,
-			(open: boolean) => {
-				if (open === false) {
-					active.value = false;
-				}
-			}
-		);
-
-		return { lastFour: notificationsStore.lastFour, activityLink, active };
+		return { lastFour: notificationsStore.lastFour };
 	},
 });
 </script>

app/src/views/private/private-view.vue

@@ -35,14 +35,14 @@
 
 				<div class="spacer" />
 
-				<notifications-preview :drawer-open="drawerOpen" />
+				<notifications-preview v-model="notificationsPreviewActive" :drawer-open="drawerOpen" />
 			</div>
 		</aside>
 
 		<v-overlay class="nav-overlay" :active="navOpen" @click="navOpen = false" />
 		<v-overlay class="drawer-overlay" :active="drawerOpen" @click="drawerOpen = false" />
 
-		<notifications-group :dense="drawerOpen === false" />
+		<notifications-group v-if="notificationsPreviewActive === false" :dense="drawerOpen === false" />
 
 		<template v-if="showDropEffect">
 			<div class="drop-border top" />
@@ -93,6 +93,8 @@ export default defineComponent({
 		const notificationsStore = useNotificationsStore();
 		const appStore = useAppStore();
 
+		const notificationsPreviewActive = ref(false);
+
 		const { drawerOpen } = toRefs(appStore.state);
 
 		const theme = computed(() => {
@@ -119,6 +121,7 @@ export default defineComponent({
 			dragging,
 			drawerOpen,
 			openDrawer,
+			notificationsPreviewActive,
 		};
 
 		function useFileUpload() {
@@ -237,10 +240,7 @@ export default defineComponent({
 				});
 
 				notificationsStore.remove(fileUploadNotificationID);
-
 				emitter.emit(Events.upload);
-
-				notificationsStore.remove(fileUploadNotificationID);
 			}
 		}