alert icon in mobile menu

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=1a9ada603e8d364a",
+    "/chunks/request.js": "/chunks/request.js?id=f5a2c854bb7d7457",
     "/chunks/request-upload.js": "/chunks/request-upload.js?id=35b65503f01ef52c",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
     "/chunks/status-check.js": "/chunks/status-check.js?id=c7d5cfeb0120db76",
@@ -9,13 +9,13 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=fc3886e258b9a9b9",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=7bae302e249c73a1",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=309dc20e668952e6",
-    "/chunks/shared.js": "/chunks/shared.js?id=c1bd69381de51386",
+    "/chunks/shared.js": "/chunks/shared.js?id=d92943b9a1c8cdd2",
     "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=7d78c21314593e88",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=af632a9bdc82be95",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=c303bb3ce8a22918",
     "/chunks/not-found.js": "/chunks/not-found.js?id=5fbc874846003a91",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=9c283755ffea5e90",
-    "/chunks/admin.js": "/chunks/admin.js?id=2872d2125afadd0f",
+    "/chunks/admin.js": "/chunks/admin.js?id=35b06ddc77e91737",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=3cb0b23a8ab78cbb",
     "/chunks/invoices.js": "/chunks/invoices.js?id=f89964a5a55ace45",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=62582c26b6288d7d",
@@ -57,12 +57,12 @@
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=d87ef46a15b3a4c3",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=63bc2a81117cee2f",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=b7d1b17596c771c3",
-    "/chunks/settings.js": "/chunks/settings.js?id=2c8f1d93e56030e0",
+    "/chunks/settings.js": "/chunks/settings.js?id=0be4a28092747772",
     "/chunks/profile.js": "/chunks/profile.js?id=baa99177b1a788a2",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=29034c929a287e2a",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=80bca2eb75da275d",
     "/chunks/billing.js": "/chunks/billing.js?id=9008d99558ed20a5",
-    "/chunks/platform.js": "/chunks/platform.js?id=9b210e9d35286856",
+    "/chunks/platform.js": "/chunks/platform.js?id=595ebf8df2edae41",
     "/chunks/files.js": "/chunks/files.js?id=535a172eef59e2f4",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=a6d8378911b23390",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ebfebefef781b070",

resources/js/components/FilesView/MobileToolbar.vue

@@ -15,7 +15,7 @@
             <!--More Actions-->
             <div class="flex items-center relative mr-[4px]">
 
-				<div @click="showMobileNavigation" class="cursor-pointer pr-1.5">
+				<div @click="showMobileNavigation" class="cursor-pointer p-1.5 -m-1.5">
 					<menu-icon size="17" class="vue-feather dark:text-gray-100" />
 				</div>
             </div>

resources/js/components/Notifications/Notification.vue

@@ -138,6 +138,7 @@ export default {
 		},
         closeCenter() {
             this.$store.commit('CLOSE_NOTIFICATION_CENTER')
+			this.$closePopup()
         },
     },
 	created() {

resources/js/components/Notifications/NotificationCenter.vue

@@ -15,7 +15,7 @@
 				</b>
 
 				<div class="px-2.5">
-					<MobileActionButton v-if="readNotifications.length || unreadNotifications.length" @click.native="deleteAllNotifications" icon="check-square" class="mb-2 dark:!bg-4x-dark-foreground">
+					<MobileActionButton v-if="readNotifications.length || unreadNotifications.length" @click.native="$store.dispatch('deleteAllNotifications')" icon="check-square" class="mb-2 dark:!bg-4x-dark-foreground">
 						{{ $t('Clear all') }}
 					</MobileActionButton>
 
@@ -71,18 +71,9 @@ export default {
 			if (this.isVisibleNotificationCenter)
 				this.$store.commit('CLOSE_NOTIFICATION_CENTER')
 		},
-		deleteAllNotifications() {
-			axios.delete('/api/user/notifications')
-				.then(() => {
-					this.$store.commit('FLUSH_NOTIFICATIONS')
-				})
-		}
 	},
 	created() {
-		axios.post('/api/user/notifications/read')
+		this.$store.dispatch('readAllNotifications')
-			.then(() => {
-				this.$store.commit('UPDATE_NOTIFICATION_COUNT', 0)
-			})
 	}
 }
 </script>

resources/js/components/Others/NotificationsPopup.vue

@@ -0,0 +1,94 @@
+<template>
+    <PopupWrapper name="notifications-mobile">
+        <!--Title-->
+        <PopupHeader :title="$t('Notifications')" icon="bell" />
+
+        <!--Content-->
+        <PopupContent>
+			<MobileActionButton
+				v-if="readNotifications.length || unreadNotifications.length"
+				@click.native="$store.dispatch('deleteAllNotifications')"
+				icon="check-square"
+				class="mb-2 dark:!bg-4x-dark-foreground"
+			>
+				{{ $t('Clear all') }}
+			</MobileActionButton>
+
+			<p v-if="!readNotifications.length && !unreadNotifications.length" class="text-sm text-gray-500">
+				{{ $t("There aren't any notifications.") }}
+			</p>
+
+            <b
+                v-if="unreadNotifications.length"
+                class="dark-text-theme mt-1.5 mb-2.5 block px-2.5 text-xs text-gray-400"
+            >
+                {{ $t('Unread') }}
+            </b>
+
+            <Notification
+                :notification="notification"
+                v-for="notification in unreadNotifications"
+                :key="notification.id"
+            />
+
+            <b v-if="readNotifications.length" class="dark-text-theme mt-2.5 mb-2.5 block px-2.5 text-xs text-gray-400">
+                {{ $t('Read') }}
+            </b>
+
+            <Notification
+                :notification="notification"
+                v-for="notification in readNotifications"
+                :key="notification.id"
+            />
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('Close') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import MobileActionButton from '../FilesView/MobileActionButton'
+import Notification from '../Notifications/Notification'
+import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from './Popup/PopupWrapper'
+import PopupActions from './Popup/PopupActions'
+import PopupContent from './Popup/PopupContent'
+import PopupHeader from './Popup/PopupHeader'
+import vClickOutside from 'v-click-outside'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'NotificationsPopup',
+    components: {
+        MobileActionButton,
+        Notification,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        ButtonBase,
+    },
+    directives: {
+        clickOutside: vClickOutside.directive,
+    },
+    computed: {
+        ...mapGetters(['user', 'config']),
+        readNotifications() {
+            return this.user?.data.relationships.readNotifications.data
+        },
+        unreadNotifications() {
+            return this.user?.data.relationships.unreadNotifications.data
+        },
+    },
+    methods: {
+        clickOutside() {
+            if (this.isVisibleNotificationCenter) this.$store.commit('CLOSE_NOTIFICATION_CENTER')
+        },
+    },
+}
+</script>

resources/js/components/Others/Popup/PopupHeader.vue

@@ -10,6 +10,7 @@
                 <users-icon v-if="icon === 'users'" size="18" class="vue-feather text-theme" />
                 <user-plus-icon v-if="icon === 'user-plus'" size="18" class="vue-feather text-theme" />
                 <credit-card-icon v-if="icon === 'credit-card'" size="18" class="vue-feather text-theme" />
+                <bell-icon v-if="icon === 'bell'" size="18" class="vue-feather text-theme" />
             </div>
 
             <b class="text-base font-bold">
@@ -24,6 +25,7 @@
 
 <script>
 import {
+	BellIcon,
 	UploadCloudIcon,
     CreditCardIcon,
     KeyIcon,
@@ -41,6 +43,7 @@ export default {
     name: 'PopupHeader',
     props: ['title', 'icon'],
     components: {
+		BellIcon,
 		UploadCloudIcon,
         CornerDownRightIcon,
         CreditCardIcon,

resources/js/components/Sidebar/UserHeadline.vue

@@ -1,38 +1,39 @@
 <template>
-	<div class="flex items-center justify-between">
+    <div class="flex items-center justify-between">
-		<div class="flex items-center leading-none">
+        <div class="flex items-center leading-none">
-			<MemberAvatar :size="52" :is-border="false" :member="user" />
+            <MemberAvatar :size="52" :is-border="false" :member="user" />
-			<div class="pl-4">
+            <div class="pl-4">
-				<b class="mb-1 block font-bold leading-none">
+                <b class="mb-1 block font-bold leading-none">
-					{{ user.data.relationships.settings.data.attributes.name }}
+                    {{ user.data.relationships.settings.data.attributes.name }}
-				</b>
+                </b>
-				<span class="text-theme text-sm font-semibold leading-none">
+                <span class="text-theme text-sm font-semibold leading-none">
-					{{ user.data.attributes.email }}
+                    {{ user.data.attributes.email }}
-				</span>
+                </span>
-			</div>
+            </div>
-		</div>
+        </div>
-		<NotificationBell @click="openNotificationPopup" />
+        <NotificationBell @click.native="openNotificationPopup" />
-	</div>
+    </div>
 </template>
 
 <script>
 import MemberAvatar from '../FilesView/MemberAvatar'
+import NotificationBell from './NotificationBell'
+import { events } from '../../bus'
 import { mapGetters } from 'vuex'
-import NotificationBell from "./NotificationBell";
 
 export default {
     name: 'UserHeadline',
     components: {
-		NotificationBell,
+        NotificationBell,
         MemberAvatar,
     },
     computed: {
         ...mapGetters(['user']),
     },
-	methods: {
+    methods: {
-		openNotificationPopup() {
+        openNotificationPopup() {
-
+            events.$emit('popup:open', { name: 'notifications-mobile' })
-		}
+        },
-	}
+    },
 }
 </script>

resources/js/store/modules/userAuth.js

@@ -116,10 +116,21 @@ const actions = {
             .post(getters.api + '/folders/favourites/' + folder.data.id, {
                 _method: 'delete',
             })
-            .catch(() => {
+            .catch(() => Vue.prototype.$isSomethingWrong())
-                Vue.prototype.$isSomethingWrong()
+    },
+    readAllNotifications: ({ commit }) => {
+        axios.post('/api/user/notifications/read')
+            .then(() => {
+                commit('UPDATE_NOTIFICATION_COUNT', 0)
             })
     },
+    deleteAllNotifications: ({ commit }) => {
+        axios.delete('/api/user/notifications')
+            .then(() => {
+                commit('FLUSH_NOTIFICATIONS')
+            })
+            .catch(() => Vue.prototype.$isSomethingWrong())
+    },
 }
 
 const mutations = {

resources/js/views/Platform.vue

@@ -15,6 +15,7 @@
         <ShareEditPopup />
 
         <CreateUploadRequestPopup />
+		<NotificationsPopup />
         <CreateFolderPopup />
         <RenameItemPopup />
         <MoveItemPopup />
@@ -77,10 +78,12 @@ import InfoSidebar from '../components/FilesView/InfoSidebar'
 import { events } from '../bus'
 import { mapGetters } from 'vuex'
 import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
+import NotificationsPopup from "../components/Others/NotificationsPopup";
 
 export default {
     name: 'Platform',
     components: {
+		NotificationsPopup,
 		CreateUploadRequestPopup,
         CreateTeamFolderPopup,
         PanelNavigationFiles,

src/App/Console/Commands/SetupDevEnvironment.php

@@ -74,6 +74,7 @@ class SetupDevEnvironment extends Command
         $this->create_share_records();
         $this->generate_traffic();
 
+        $this->generateCommonNotification();
         $this->generateTeamInvitationNotification();
         $this->generateFileRequestFilledNotification();
 
@@ -90,6 +91,28 @@ class SetupDevEnvironment extends Command
         $this->info('Everything is done, congratulations! 🥳🥳🥳');
     }
 
+    private function generateCommonNotification()
+    {
+        $howdy = User::whereEmail('howdy@hi5ve.digital')
+            ->first();
+
+        DB::table('notifications')
+            ->insert([
+                'id'              => Str::uuid(),
+                'type'            => 'App\Users\Notifications\RegistrationBonusAddedNotification',
+                'notifiable_type' => 'App\Users\Models\User',
+                'notifiable_id'   => $howdy->id,
+                'data'            => json_encode([
+                    'category'        => 'gift',
+                    'title'           => 'You Received $10.00',
+                    'description'     => 'You received credit bonus $10.00 for your registration. Happy spending!',
+                ]),
+                'read_at'         => now()->subMinutes(5),
+                'created_at'      => now()->subMinutes(5),
+                'updated_at'      => now()->subMinutes(5),
+            ]);
+    }
+
     private function generateTeamInvitationNotification()
     {
         $alice = User::whereEmail('alice@hi5ve.digital')

src/App/Providers/AppServiceProvider.php

@@ -2,6 +2,7 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Schema;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -21,9 +22,11 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot()
     {
+        Schema::defaultStringLength(191);
+
         try {
             $app_locale = get_settings('language') ?? 'en';
-        } catch (\PDOException $exception) {
+        } catch (\PDOException $e) {
             $app_locale = 'en';
         }