feat: add admin scaffolding

components/admin/home/page.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { f7, f7BlockTitle, f7Link, f7List, f7ListItem, f7NavLeft, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Searchbar, f7SkeletonBlock, f7SkeletonText } from 'framework7-vue'
+import type { Router } from 'framework7/types'
+import { useIsCurrentUserLoaded } from 'vuefire'
+
+defineProps<{
+  f7router: Router.Router
+}>()
+
+const auth = useCurrentUser()
+const authLoaded = useIsCurrentUserLoaded()
+
+const state = reactive({
+  showLoginScreen: false,
+})
+
+watch([authLoaded, auth], (values) => {
+  setTimeout(() => { // This shows too fast, so it's better to lag for 1 second to prevent jarring layout changes
+    state.showLoginScreen = values[0] && !values[1]
+  }, 1000)
+})
+</script>
+
+<template>
+  <f7Page>
+    <CommonLoginScreen v-model:opened="state.showLoginScreen" />
+    <f7Navbar large transparent :sliding="false">
+      <f7NavTitle sliding>
+        SSTAA Admin
+      </f7NavTitle>
+      <f7NavTitleLarge>
+        SSTAA Admin
+      </f7NavTitleLarge>
+    </f7Navbar>
+
+    <f7List inset class="space-y-8">
+      <div class="space-y-3">
+        <f7SkeletonBlock v-for="n in 3" :key="n" class="rounded-md" effect="fade" height="10rem" />
+      </div>
+    </f7List>
+  </f7Page>
+</template>

components/app/home/page.vue

@@ -25,7 +25,7 @@ watch([authLoaded, auth], (values) => {
 
 <template>
   <f7Page>
-    <AppLoginScreen v-model:opened="state.showLoginScreen" />
+    <CommonLoginScreen v-model:opened="state.showLoginScreen" />
     <f7Navbar large transparent :sliding="false">
       <f7NavTitle sliding>
         SSTAA

pages/admin/[...slug].vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import 'framework7/css/bundle'
+import 'framework7-icons/css/framework7-icons.css'
+import 'material-icons/iconfont/material-icons.css'
+
+// @ts-expect-error Missing types
+import Framework7 from 'framework7/lite-bundle'
+
+// @ts-expect-error Missing types
+import Framework7Vue from 'framework7-vue/bundle'
+import { f7App, f7View } from 'framework7-vue'
+
+import { AdminHomePage } from '#components'
+
+Framework7.use(Framework7Vue)
+
+const appRoutes = [
+  {
+    name: 'home',
+    path: '/admin',
+    component: AdminHomePage,
+  },
+]
+
+useSeoMeta({
+  description: 'SST Alumni App Admin',
+})
+
+useHeadSafe({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} - SSTAA Admin` : 'SSTAA Admin'
+  },
+  link: [
+    {
+      rel: 'icon',
+      href: '/favicon.ico',
+    },
+    {
+      rel: 'apple-touch-icon',
+      href: '/apple-touch-icon-180x180.png',
+      sizes: '180x180',
+    },
+    {
+      rel: 'mask-icon',
+      href: '/maskable-icon-512x512.png',
+      color: '#ffffff',
+    },
+  ],
+})
+
+const route = useRoute()
+</script>
+
+<template>
+  <VitePwaManifest />
+  <f7App name="SSTAA" theme="md" dark-mode :routes="appRoutes">
+    <f7View
+      main
+      class="safe-areas"
+      :url="route.path"
+      :master-detail-breakpoint="768"
+      ios-swipe-back
+      preload-previous-page
+    />
+  </f7App>
+</template>