✨ organizational progress

app/components/header/HeaderAuth.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
 const { user } = useApi()
-const { authModal } = useAuth()
+
 const items = [
-  [{
-    label: '',
-    slot: 'account',
-    disabled: true,
-  }],
-  [{
-    label: 'Tokens',
-    icon: 'i-mdi-key',
-    shortcuts: ['T'],
-    to: '/tokens',
-  }],
+  [
+    {
+      label: '',
+      slot: 'account',
+      disabled: true,
+    },
+  ],
+  [
+    {
+      label: 'Tokens',
+      icon: 'i-mdi-key',
+      shortcuts: ['T'],
+      to: '/tokens',
+    },
+    {
+      label: 'Users',
+      icon: 'i-mdi-account-multiple',
+      to: '/users',
+      shortcuts: ['U'],
+      disabled: !user.value?.isAdmin,
+    },
+  ],
   [
     {
       label: 'Logout',
@@ -25,27 +36,20 @@ const items = [
 </script>
 
 <template>
-  <client-only>
-    <u-dropdown v-if="user" :items="items">
-      <u-avatar
-        v-if="user"
-        :src="user.avatar"
-        size="sm"
-        icon="i-mdi-account-circle"
-        :ui="{ rounded: 'bg-gray-200 dark:bg-gray-800' }"
-      />
-      <template #account>
-        <div class="flex flex-col items-start">
-          <div class="font-semibold text-gray-800 dark:text-gray-300">{{ user.name }}</div>
-          <div class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</div>
-        </div>
-      </template>
-    </u-dropdown>
-    <u-button v-else icon="i-mdi-login" label="Sign in" color="gray" @click="authModal = true" />
-    <template #fallback>
-      <u-skeleton class="w-20 h-8" />
+  <u-dropdown v-if="user" :items="items">
+    <u-avatar
+      :src="user.avatar"
+      size="sm"
+      icon="i-mdi-account-circle"
+      :ui="{ rounded: 'bg-gray-200 dark:bg-gray-800' }"
+    />
+    <template #account>
+      <div class="flex flex-col items-start">
+        <div class="font-semibold text-gray-800 dark:text-gray-300">{{ user.name }}</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</div>
+      </div>
     </template>
-  </client-only>
+  </u-dropdown>
 </template>
 
 <style scoped></style>

app/components/header/HeaderMain.vue

@@ -8,21 +8,18 @@ const { crumbs, actions } = useCrumb()
   <u-header :links="links">
     <template #logo>
       <div class="flex items-center">
-        <div class="relative w-12 h-12">
-          <header-logo />
-          <u-icon name="i-mdi-test-tube" class="w-6 h-6 text-primary-100 absolute bottom-1.5 right-0.5" />
-        </div>
-        <div class="font-extrabold text-3xl pr-1 text-primary-900 dark:text-primary-100">fume</div>
-        <div class="font-extrabold text-3xl pr-1 text-primary-600 dark:text-primary-300 -ml-1">bio</div>
+        <logo-bio class="w-12 h-12" />
+        <logo-text class="text-3xl" />
       </div>
     </template>
     <template #right>
       <div class="flex items-center space-x-2">
-        <header-auth />
         <client-only>
+          <header-auth />
           <u-color-mode-button />
           <template #fallback>
             <u-skeleton class="w-8 h-8 rounded-full" />
+            <u-skeleton class="w-8 h-8 rounded-full" />
           </template>
         </client-only>
       </div>

app/components/layout/LayoutLogin.vue

@@ -62,6 +62,7 @@ async function handleMessage(evt: { data: { user: User, token: string } }) {
   useApi().success('logged in')
   emit('login')
   await refreshNuxtData()
+  await navigateTo('/home')
 }
 
 function messageHandler(add: boolean): void {
@@ -82,6 +83,5 @@ if (import.meta.client) {
     title="Sign in / Join"
     :providers="providers"
     :loading="loading"
-    :fields="[{ name: 'email', type: 'email', label: 'Email', placeholder: 'Enter your email' }]"
   />
 </template>

app/components/logo/LogoBio.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="relative">
+    <logo-fume />
+    <u-icon name="i-mdi-test-tube" class="w-1/2 h-1/2 text-primary-100 absolute bottom-[10%] right-[1%]" />
+  </div>
+</template>
+
+<style scoped></style>

app/components/logo/LogoText.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center">
+    <div class="font-extrabold text-primary-900 dark:text-primary-100">fume</div>
+    <div class="font-extrabold text-primary-600 dark:text-primary-300 -ml-1">bio</div>
+  </div>
+</template>

app/composables/crumb.ts

@@ -62,6 +62,7 @@ export const useCrumb = () => {
     actions,
     action,
     add,
+    custom,
     init,
   }
 }

app/layouts/bare.vue

@@ -1,5 +1,36 @@
 <template>
-  <div class="w-screen h-screen overflow-hidden bg-white">
-    <slot />
+  <div class="w-screen h-screen overflow-hidden bg-white dark:bg-gray-950">
+    <u-main class="bg-gray-100 dark:bg-gray-950 overlay flex flex-col w-full">
+      <slot />
+    </u-main>
   </div>
 </template>
+
+<style scoped>
+.gradient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--color-primary-500) / 0.25) 0, #FFF 100%);
+}
+
+.dark {
+  .gradient {
+    background: radial-gradient(50% 50% at 50% 50%, rgb(var(--color-primary-400) / 0.1) 0, rgb(var(--color-gray-950)) 100%);
+  }
+}
+
+.overlay {
+  background-size: 100px 100px;
+  background-image:
+    linear-gradient(to right, rgb(var(--color-gray-200)) 0.5px, transparent 0.5px),
+    linear-gradient(to bottom, rgb(var(--color-gray-200)) 0.5px, transparent 0.5px);
+}
+.dark {
+  .overlay {
+    background-image:
+      linear-gradient(to right, rgb(var(--color-gray-900)) 0.5px, transparent 0.5px),
+      linear-gradient(to bottom, rgb(var(--color-gray-900)) 0.5px, transparent 0.5px);
+  }
+}
+</style>

app/middleware/auth.global.ts

@@ -5,6 +5,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
   useCrumb().init().add('Home')
 
   const gatedRoutes = [
+    '/home',
     '/token',
     '/pen',
     '/cartridge',

app/pages/history.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useCrumb().add('Shots')
+</script>
+
+<template>
+  <div>
+    Page: history
+  </div>
+</template>
+
+<style scoped></style>

app/pages/home.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Cartridge, Pen } from '@prisma/client'
+import type { MetapiResponse } from '~/types/metapi'
+
+const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+if (!page.value)
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+
+useSeoMeta({
+  titleTemplate: '',
+  title: page.value.title,
+  ogTitle: page.value.title,
+  description: page.value.description,
+  ogDescription: page.value.description,
+})
+
+const { user } = useApi()
+
+const { data: pens, refresh: pensRefresh } = await useApi().api<MetapiResponse<Pen[]>>('/api/pen')
+const { data: cartridges, refresh: cartridgesRefresh } = await useApi().api<MetapiResponse<Cartridge[]>>('/api/cartridge')
+
+const reload = async () => {
+  await pensRefresh()
+  await cartridgesRefresh()
+}
+</script>
+
+<template>
+  <client-only>
+    <div v-if="user && pens?.data.length === 0" class="w-full max-w-md mx-auto">
+      <u-alert
+        icon="i-mdi-clock"
+        title="Awaiting Implementation"
+        description="We are still setting up your account, check back soon!"
+        :actions="[{ label: 'Refresh', icon: 'i-mdi-refresh', onClick: reload, variant: 'solid' }]"
+      />
+    </div>
+    <pen-list v-else-if="pens && cartridges" :pens="pens?.data" :cartridges="cartridges?.data" readonly />
+  </client-only>
+</template>

app/pages/index.vue

@@ -1,46 +1,21 @@
 <script setup lang="ts">
-import type { Cartridge, Pen } from '@prisma/client'
-import type { MetapiResponse } from '~/types/metapi'
-
 const { authModal } = useAuth()
-
-const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
-if (!page.value)
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-
-useSeoMeta({
-  titleTemplate: '',
-  title: page.value.title,
-  ogTitle: page.value.title,
-  description: page.value.description,
-  ogDescription: page.value.description,
-})
-
+definePageMeta({ layout: 'bare' })
 const { user } = useApi()
-
-const { data: pens, refresh: pensRefresh } = await useApi().api<MetapiResponse<Pen[]>>('/api/pen')
-const { data: cartridges, refresh: cartridgesRefresh } = await useApi().api<MetapiResponse<Cartridge[]>>('/api/cartridge')
-
-const reload = async () => {
-  await pensRefresh()
-  await cartridgesRefresh()
-}
 </script>
 
 <template>
-  <div v-if="!user" class="flex items-center justify-center pt-12">
-    <u-button icon="i-mdi-login" label="Sign in" color="gray" size="xl" @click="authModal = true" />
+  <div class="flex flex-col w-screen h-screen items-center justify-center">
+    <logo-bio class="w-64 h-64" />
+    <logo-text class="text-5xl mb-8" />
+    <client-only>
+      <u-button v-if="!user" icon="i-mdi-login" label="Sign in" color="gray" size="lg" @click="authModal = true" />
+      <u-button v-else icon="i-mdi-home" label="Home" to="/home" color="gray" />
+      <template #fallback>
+        <u-skeleton class="w-20 h-8" />
+      </template>
+    </client-only>
   </div>
-  <div
-    v-else-if="user && pens?.data.length === 0"
-    class="w-full max-w-md mx-auto"
-  >
-    <u-alert
-      icon="i-mdi-clock"
-      title="Awaiting Implementation"
-      description="We are still setting up your account, check back soon!"
-      :actions="[{ label: 'Refresh', icon: 'i-mdi-refresh', onClick: reload, variant: 'solid' }]"
-    />
-  </div>
-  <pen-list v-else-if="pens && cartridges" :pens="pens?.data" :cartridges="cartridges?.data" readonly />
 </template>
+
+<style scoped></style>

app/pages/users/[user]/equipment.vue

@@ -9,7 +9,12 @@ const cartridgeModal = ref(false)
 const { data: user } = await useApi().api<MetapiResponse<User>>(`/api/user/${route.params.user}`)
 
 useCrumb()
-  .add('Users')
+  .custom({
+    label: 'Users',
+    icon: 'i-mdi-account-multiple',
+    to: '/users',
+  },
+  )
   .custom({
     label: user.value.data.name as string,
     icon: 'i-mdi-account',

app/utils/shared.ts

@@ -9,13 +9,14 @@ export const links: HeaderIconLink[] = [
   {
     label: 'Home',
     icon: 'i-heroicons-home',
-    to: '/',
+    to: '/home',
   },
   {
-    label: 'Users',
-    icon: 'i-mdi-account-group',
-    to: '/users',
+    label: 'Shots',
+    icon: 'i-mdi-syringe',
+    to: '/history',
   },
+
   /*
   {
     label: 'Pens',

server/routes/shots.ts

@@ -1,5 +1,4 @@
 import { z } from 'zod'
-import { penColors } from '~/utils/shared'
 
 const index = defineEventHandler(async (event) => {
   if (!middleware.requireAdmin()) return metapi().notFound(event)

server/utils/prisma.ts

@@ -10,12 +10,17 @@ const prismaClientSingleton = () => {
 declare const globalThis: {
   prismaGlobal: ReturnType<typeof prismaClientSingleton>
 }
+const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
+  .$extends(user.admin)
+  .$extends(token.client)
+/*
 const prisma = import.meta.client
   ? undefined
   : globalThis.prismaGlobal ?? prismaClientSingleton()
     .$extends(user.admin)
     .$extends(token.client)
-/*
+/
+
 for (const key in mutators)
   if (Object.prototype.hasOwnProperty.call(mutators, key))
     if (typeof mutators[key] === 'function')