feat: middleware for non supported screens

apps/web/middleware/valid-screen.ts

@@ -0,0 +1,14 @@
+enum ScreenSize {
+    WIDTH = 1820,
+    HEIGHT = 1080,
+}
+
+export default defineNuxtRouteMiddleware(() => {
+    const { width } = useWindowSize();
+
+    const isValidResolutions = width.value >= ScreenSize.WIDTH;
+
+    if (!isValidResolutions) {
+        return navigateTo('/non-supported-screen');
+    }
+});

apps/web/pages/admin/index.vue

@@ -5,7 +5,12 @@
     } from '~~/interfaces/profile.interface';
 
     definePageMeta({
-        middleware: ['authenticated', 'empty-profile', 'is-admin'],
+        middleware: [
+            'authenticated',
+            'empty-profile',
+            'is-admin',
+            'valid-screen',
+        ],
     });
 
     useServerSeoMeta({

apps/web/pages/auth/processing.vue

@@ -3,6 +3,9 @@
         title: 'NuChat | Processing',
         description: 'Just a chat app built with Nuxt 3 and Supabase',
     });
+    definePageMeta({
+        middleware: ['valid-screen'],
+    });
     preloadRouteComponents('/chats');
     setTimeout(() => {
         navigateTo('/chats');

apps/web/pages/auth/sign-in.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
     definePageMeta({
-        middleware: ['already-authenticated'],
+        middleware: ['already-authenticated', 'valid-screen'],
     });
 
     useServerSeoMeta({

apps/web/pages/chats/[id]/messages.vue

@@ -2,7 +2,7 @@
     import { Profile } from '~~/interfaces/profile.interface';
 
     definePageMeta({
-        middleware: ['authenticated', 'empty-profile'],
+        middleware: ['authenticated', 'empty-profile', 'valid-screen'],
         layout: 'chats',
     });
 

apps/web/pages/chats/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
     definePageMeta({
-        middleware: ['authenticated', 'empty-profile'],
+        middleware: ['authenticated', 'empty-profile', 'valid-screen'],
         layout: 'chats',
     });
     useSeoMeta({

apps/web/pages/index.vue

@@ -3,6 +3,9 @@
         title: 'NuChat | Home',
         description: 'Just a chat app built with Nuxt 3 and Supabase',
     });
+    definePageMeta({
+        middleware: ['valid-screen'],
+    });
 </script>
 
 <template>

apps/web/pages/non-supported-screen.vue

@@ -0,0 +1,44 @@
+<template>
+    <main>
+        <div>;-;</div>
+        <h1>Non supported screen</h1>
+        <p>Sorry, NuChat is not supported on this screen size yet.</p>
+    </main>
+</template>
+
+<style lang="scss" scoped>
+    main {
+        width: 80%;
+        height: 100vh;
+        margin: 0 auto;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+
+        div {
+            font-size: 10rem;
+            font-weight: 700;
+            color: #ccc;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            color: $primary;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        p {
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: #333;
+            text-align: center;
+            width: 50%;
+            margin-bottom: 1rem;
+        }
+    }
+</style>

apps/web/pages/profile/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
     definePageMeta({
-        middleware: ['empty-profile', 'authenticated'],
+        middleware: ['empty-profile', 'authenticated', 'valid-screen'],
     });
 
     useServerSeoMeta({

apps/web/pages/profile/new.vue

@@ -3,6 +3,9 @@
         title: 'NuChat | Complete your profile',
         description: 'Create a new profile',
     });
+    definePageMeta({
+        middleware: ['valid-screen'],
+    });
 </script>
 
 <template>