Merge pull request #14 from fumeapp/redo-crumbs

✨ simpler breadcrumbs

.github/workflows/test.yml

@@ -6,16 +6,9 @@ jobs:
   test:
     if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
-    services:
-      mysql:
-        image: mysql:8.0
-        env:
-          MYSQL_DATABASE: bio-test
-          MYSQL_ROOT_PASSWORD: root
-        ports:
-          - 3306:3306
-        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
     steps:
+      - name: start mysql
+        run: sudo service mysql start
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:

app/components/header/HeaderMain.vue

@@ -12,19 +12,20 @@ const { crumbs, actions } = useCrumb()
     </template>
     <template #right>
       <div class="flex items-center space-x-2">
-        <header-auth />
+        <header-profile />
         <u-color-mode-button />
       </div>
     </template>
   </u-header>
   <div class="bg-gray-100 dark:bg-gray-950">
     <div class="py-2 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-      <div class="flex items-center justify-between space-x-2 py-2">
+      <div v-if="crumbs.length" class="flex items-center justify-between space-x-2 py-2">
         <u-breadcrumb :links="crumbs" />
         <u-button-group v-if="actions && actions[0]" :size="actions[0].size">
           <u-button v-for="action in actions" :key="action.label" v-bind="action" @click="action.click" />
         </u-button-group>
       </div>
+      <div v-else class="h-10" />
     </div>
   </div>
 </template>

app/components/header/HeaderAuth.vue → app/components/header/HeaderProfile.vue

@@ -1,55 +1,48 @@
 <script setup lang="ts">
 const { user, clear } = await useUserSession()
+const { fromLink } = useCrumb()
+
+const logout = async () => {
+  clear()
+  useApi().api('/api/logout')
+  await navigateTo('/')
+}
 const items = [
   [
     {
-      label: '',
+      email: user.value.email,
+      name: user.value.name,
       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,
-    },
+    { shortcuts: ['T'], ...fromLink('Tokens') },
+    { shortcuts: ['U'], disabled: !user.value.isAdmin, ...fromLink('Users') },
   ],
   [
     {
       label: 'Logout',
       icon: 'i-mdi-logout',
-      click: async () => {
-        clear()
-        useApi().api('/api/logout')
-        await navigateTo('/')
-      },
+      click: logout,
       shortcuts: ['L'],
     },
   ],
 ]
 </script>
 
 <template>
-  <u-dropdown v-if="user" :items="items">
+  <u-dropdown :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>
+    <template #account="{ item }">
       <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 class="font-semibold text-gray-800 dark:text-gray-300">{{ item.name }}</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">{{ item.email }}</div>
       </div>
     </template>
   </u-dropdown>

app/composables/crumb.ts

@@ -1,6 +1,6 @@
 import type { ButtonColor, ButtonSize } from '#ui/types'
 
-import { links } from '~/utils/shared'
+import { type HeaderIconLink, links } from '~/utils/shared'
 
 interface Button {
   label?: string
@@ -22,47 +22,20 @@ const crumbs = ref<HeaderIconLink[]>([])
 const actions = ref<Button[]>([])
 
 export const useCrumb = () => {
-  const action = (button: Button) => {
-    actions.value.push({ ...defaultAction, ...button })
-    return {
-      action,
-    }
-  }
-
-  const add = (label: string) => {
-    links.find(link => link.label === label ? crumbs.value.push(link) : null)
-    return {
-      add,
-      action,
-      // eslint-disable-next-line ts/no-use-before-define
-      custom,
-    }
-  }
-
-  const custom = (link: HeaderIconLink) => {
-    crumbs.value.push(link)
-    return {
-      add,
-      custom,
-      action,
-    }
-  }
-  const init = () => {
+  const set = (...crumbsArg: HeaderIconLink[]) => crumbs.value = crumbsArg
+  const action = (...actionsArg: Button[]) => actions.value = actionsArg.map(action => ({ ...defaultAction, ...action }))
+  const fromLink = (label: string): HeaderIconLink => links.find(link => label === link.label) as HeaderIconLink
+  const clear = () => {
     crumbs.value = []
     actions.value = []
-    return {
-      add,
-      action,
-      custom,
-    }
   }
 
   return {
-    crumbs,
-    actions,
+    set,
     action,
-    add,
-    custom,
-    init,
+    fromLink,
+    actions,
+    crumbs,
+    clear,
   }
 }

app/middleware/auth.global.ts

@@ -1,8 +1,6 @@
 export default defineNuxtRouteMiddleware(async (to, _from) => {
   const { loggedIn } = useUserSession()
 
-  useCrumb().init().add('Home')
-
   const gatedRoutes = [
     '/home',
     '/token',

app/pages/home.vue

@@ -2,6 +2,8 @@
 import type { Cartridge, Pen } from '@prisma/client'
 import type { MetapiResponse } from '~/types/metapi'
 
+useCrumb().clear()
+
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
 
 if (!page.value)

app/pages/tokens.vue

@@ -14,6 +14,12 @@ useSeoMeta({
   ogDescription: page.value.description,
 })
 
+const { set, fromLink } = useCrumb()
+set(
+  fromLink('Home'),
+  fromLink('Tokens'),
+)
+
 const { data: tokens, refresh } = await useFetch<MetapiResponse<Token[]>>('/api/token')
 </script>
 

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

@@ -6,25 +6,20 @@ import type { User } from '~/types/models'
 const route = useRoute()
 const penModal = ref(false)
 const cartridgeModal = ref(false)
-const { data: user } = await useFetch<MetapiResponse<User>>(`/api/user/${route.params.user}`)
+const { data: user } = await useFetch<MetapiResponse<User>>(`/api/all/user/${route.params.user}`)
 
-useCrumb()
-  .custom({
-    label: 'Users',
-    icon: 'i-mdi-account-multiple',
-    to: '/users',
-  },
-  )
-  .custom({
-    label: user.value?.data.name as string,
-    icon: 'i-mdi-account',
-  })
-  .custom({
-    label: 'Equipment',
-    icon: 'i-mdi-medical-bag',
-  })
-  .action({ label: 'Add a Pen', click: () => penModal.value = true })
-  .action({ label: 'Add a Cartridge', click: () => cartridgeModal.value = true })
+const { set, fromLink, action } = useCrumb()
+
+set(
+  fromLink('Home'),
+  fromLink('Users'),
+  { label: user.value?.data.name as string, icon: 'i-mdi-account' },
+  { label: 'Equipment', icon: 'i-mdi-medical-bag' },
+)
+action(
+  { label: 'Add a Pen', click: () => penModal.value = true },
+  { label: 'Add a Cartridge', click: () => cartridgeModal.value = true },
+)
 
 const { data: pens, refresh: penRefresh } = await useFetch<MetapiResponse<Pen[]>>(`/api/user/${route.params.user}/pen`)
 const { data: cartridges, refresh: cartRefresh } = await useFetch<MetapiResponse<Cartridge[]>>(`/api/user/${route.params.user}/cartridge`)

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

@@ -4,22 +4,16 @@ import type { Shot, User } from '~/types/models'
 import type { MetapiResponse } from '~/types/metapi'
 
 const route = useRoute()
-const { data: user } = await useFetch<MetapiResponse<User>>(`/api/user/${route.params.user}`)
-
-useCrumb()
-  .custom({
-    label: 'Users',
-    icon: 'i-mdi-account-multiple',
-    to: '/users',
-  })
-  .custom({
-    label: user.value?.data.name as string,
-    icon: 'i-mdi-account',
-  })
-  .custom({
-    label: 'Shots',
-    icon: 'i-mdi-syringe',
-  })
+const { data: user } = await useFetch<MetapiResponse<User>>(`/api/all/user/${route.params.user}`)
+
+const { set, fromLink } = useCrumb()
+
+set(
+  fromLink('Home'),
+  fromLink('Users'),
+  { label: user.value?.data.name as string, icon: 'i-mdi-account' },
+  fromLink('Shots'),
+)
 
 const columns = [
   { label: 'Cartridge', key: 'cartridge' },

app/pages/users/index.vue

@@ -3,7 +3,16 @@ import { formatDistance } from 'date-fns'
 import type { MetapiResponse } from '~/types/metapi'
 import type { User } from '~/types/models'
 
-useCrumb().add('Users')
+const { set, fromLink } = useCrumb()
+
+set(
+  fromLink('Home'),
+  {
+    label: 'Users',
+    icon: 'i-mdi-account-multiple',
+    to: '/users',
+  },
+)
 
 const columns = [
   {
@@ -28,7 +37,7 @@ const columns = [
   },
 ]
 
-const { data: users } = await useFetch<MetapiResponse<User>>('/api/resource/user')
+const { data: users } = await useFetch<MetapiResponse<User>>('/api/all/user')
 </script>
 
 <template>

app/utils/shared.ts

@@ -11,10 +11,19 @@ export const links: HeaderIconLink[] = [
     icon: 'i-heroicons-home',
     to: '/home',
   },
+  {
+    label: 'Tokens',
+    icon: 'i-mdi-key',
+    to: '/tokens',
+  },
+  {
+    label: 'Users',
+    icon: 'i-mdi-account-multiple',
+    to: '/users',
+  },
   {
     label: 'Shots',
     icon: 'i-mdi-syringe',
-    to: '/history',
   },
 ]
 

server/api/[...slug].ts

@@ -30,7 +30,7 @@ routing.apiResource('/pen', router, pen)
 routing.apiResource('/cartridge', router, cartridge)
 routing.apiResource('/shot', router, shot)
 
-routing.apiResource('/resource/user', router, user)
+routing.apiResource('/all/user', router, user)
 routing.apiResource('/user/:user/pen', router, pens)
 routing.apiResource('/user/:user/cartridge', router, cartridges)
 routing.apiResource('/user/:user/shot', router, shots)