feat: batch announcements

frontend/src/App.vue

@@ -1,13 +1,29 @@
 <template>
-  <DesktopLayout>
-    <router-view />
-  </DesktopLayout>
-  <Dialogs />
-  <Toasts />
+	<Layout>
+		<router-view />
+	</Layout>
+	<Dialogs />
+	<Toasts />
 </template>
-
 <script setup>
-  import DesktopLayout from '@/components/DesktopLayout.vue'
-  import { Toasts } from 'frappe-ui'
-  import { Dialogs } from '@/utils/dialogs'
+import { Toasts } from 'frappe-ui'
+import { Dialogs } from '@/utils/dialogs'
+import { computed, defineAsyncComponent } from 'vue'
+import { useScreenSize } from './utils/composables'
+
+const screenSize = useScreenSize()
+const MobileLayout = defineAsyncComponent(() =>
+	import('@/components/MobileLayout.vue')
+)
+const DesktopLayout = defineAsyncComponent(() =>
+	import('@/components/DesktopLayout.vue')
+)
+
+const Layout = computed(() => {
+	if (screenSize.width < 640) {
+		return MobileLayout
+	} else {
+		return DesktopLayout
+	}
+})
 </script>