feat: f7 cleanup and user info route

app.vue

@@ -1,8 +1,15 @@
 <template>
-  <div>
+  <div style="width: 100%; height: 100%">
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </div>
 </template>
+
+<style>
+#__nuxt {
+  width: 100%;
+  height: 100%;
+}
+</style>

components/app/events/page.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { f7Page } from 'framework7-vue'
+</script>
+
+<template>
+  <f7Page>
+    Events view!
+  </f7Page>
+</template>

components/app/home/page.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { f7Button, f7Link, f7Navbar, f7Page } from 'framework7-vue'
+</script>
+
+<template>
+  <f7Page name="Home">
+    <f7Navbar title="Home" />
+    <f7Link href="/events">
+      to events
+    </f7Link>
+  </f7Page>
+</template>

nuxt.config.ts

@@ -9,12 +9,6 @@ export default defineNuxtConfig({
     'nuxt-vuefire',
   ],
 
-  css: [
-    'framework7/css/bundle',
-    'framework7-icons/css/framework7-icons.css',
-    'material-icons/iconfont/material-icons.css',
-  ],
-
   vuefire: {
     emulators: false,
 

pages/app.vue

@@ -1,24 +1,48 @@
 <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 { AppHomePage, LazyAppEventsPage } from '#components'
+
 Framework7.use(Framework7Vue)
+
+const appRoutes = [
+  {
+    path: '/',
+    component: AppHomePage,
+  },
+  {
+    path: '/events',
+    component: LazyAppEventsPage,
+  },
+]
+
+const route = useRoute()
+const url = (() => {
+  if (route.path.length === 4)
+    return '/'
+  return route.path.slice(4, route.path.length)
+})()
 </script>
 
 <template>
-  <f7App :routes="appRoutes">
+  <f7App
+    name="SSTAA"
+    theme="md"
+    dark-mode
+    :routes="appRoutes"
+  >
     <f7View
       main
-      browser-history
-      browser-history-separator=""
-      :browser-history-initial-match="true"
-      :browser-history-store-history="false"
-    >
-      <NuxtPage />
-    </f7View>
+      :url="url"
+    />
   </f7App>
 </template>

pages/app/events.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div>
-    hello from events!
-  </div>
+  <AppEventsPage />
 </template>

pages/app/index.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div>
-    hello!
-  </div>
+  <AppHomePage />
 </template>

server/api/user/[firebaseId].get.ts

@@ -0,0 +1,10 @@
+export default defineProtectedEventHandler(async (event) => {
+  if (event.context.firebaseId !== event.context.params!.firebaseId) {
+    throw createError({
+      status: 403,
+      statusMessage: 'Forbidden',
+    })
+  }
+
+  return event.context.user
+})

server/utils/handlers.ts

@@ -7,6 +7,7 @@ import type { User } from '~/server/db/schema'
 declare module 'h3' {
   interface H3EventContext {
     user?: User
+    firebaseId?: string
   }
 }
 
@@ -49,6 +50,7 @@ export function defineProtectedEventHandler<T extends EventHandlerRequest, D>(
     }
 
     event.context.user = user
+    event.context.firebaseId = sub
 
     return handler(event)
   })