feat: cards

Author: mtdvlpr

.github/copilot-instructions.md

@@ -0,0 +1,76 @@
+## Purpose
+
+This file contains targeted, repository-specific guidance for AI coding agents working on the `bible-time` Nuxt 4 application. Use it to discover the architecture, developer workflows, conventions, and integration points that matter for code changes.
+
+## Quick overview
+
+- Tech: Nuxt 4 (Vue 3), TypeScript, Pinia, Nuxt UI (component library), Supabase (server & client), @nuxtjs/i18n, Zod.
+- Frontend lives in `app/` (pages, components, composables, stores). Server endpoints live in `server/api/`.
+- Shared TypeScript types live under `shared/` and generated Supabase types are placed at `shared/types/database-generated.types.ts` (see `package.json` script `supabase:types`).
+
+## Important files to open first
+
+- `nuxt.config.ts` — modules, aliases (`#server` -> `./server`), i18n config, sitemap sources, supabase types link.
+- `package.json` — dev scripts: `pnpm dev`, `pnpm build`, `pnpm preview`, `pnpm lint`, `pnpm typecheck`, and `pnpm supabase:types`.
+- `app/utils/supabase.ts` and `server/utils/supabase.ts` — central supabase helpers (error handling). Mirror patterns when adding new server/api code.
+- `shared/types/` — shared type contracts (database types and general types).
+- `server/api/` — server endpoints. Example files: `customers.ts`, `members.ts`, `mails.ts`, `notifications.ts`, `__sitemap__/urls.ts`.
+
+## Architecture notes & common patterns
+
+- Data flow: client pages (in `app/pages/`) and composables call server endpoints (`server/api/*`) which use Supabase utilities in `server/utils/supabase.ts`. Shared types in `shared/` are the contract between client and server.
+- Supabase types are generated with the `supabase` CLI and kept under `shared/types/`. Keep `nuxt.config.ts` setting `supabase.types` in sync if moving files.
+- Server routes follow Nuxt server API conventions. Add `server/api/yourname.get.ts` or `.post.ts` and use `defineEventHandler` / `createError` patterns (see `supabaseService.handleError`).
+- UI: components use Nuxt UI and composables live under `app/composables/`. Pinia stores are in `app/stores/`.
+
+### UI library (Nuxt UI)
+
+- This project uses Nuxt UI as its primary component library (installed as `@nuxt/ui` in `nuxt.config.ts`). Nuxt UI components are auto-registered and commonly use a `U` prefix (for example `UButton`, `UDropdownMenu`).
+- Local, app-specific components live under `app/components/` (see `app/components/home/*` and `app/components/people/*`). Prefer reusing Nuxt UI primitives and compose them into local components when you need project-specific behavior.
+- Use `.client` / `.server` component suffixes when you need to split rendering between server and client (this repo already contains examples: `app/components/home/HomeChart.client.vue` and `HomeChart.server.vue`).
+- When typing or interacting with Nuxt UI components in TypeScript, prefer using lightweight Vue `Component` types or the library's own types if available; avoid `any`.
+
+## Developer workflows & commands
+
+- Install: `pnpm install` (pnpm v10+ required per `package.json`).
+- Dev server: `pnpm dev` (runs `nuxt dev` and serves on http://localhost:3000).
+- Build: `pnpm build` then `pnpm preview` to locally preview the production build.
+- Linting: `pnpm lint` and auto-fix with `pnpm lint:fix`.
+- Typecheck: `pnpm typecheck` (uses `nuxt typecheck` / `vue-tsc`).
+- Generate Supabase types: `pnpm supabase:types` (invokes `supabase gen types` and writes to `shared/types/database-generated.types.ts`).
+
+## Conventions to follow (observed in repo)
+
+- TypeScript everywhere; avoid `any` where possible. When a temporary `any` is needed, prefer creating a narrow typed interface and add a TODO to refine.
+- Linter conventions: unused variables should be prefixed with `_` to satisfy the project's ESLint rules (e.g. `_unusedVar`). Avoid leaving declared-but-unused symbols.
+- Components use `<script setup lang="ts">` and Vue composition API patterns (see `eslint.config.mjs` rules).
+- Centralize Supabase error handling via `supabaseService.handleError` to ensure consistent HTTP errors.
+
+## Integration points & external dependencies
+
+- Supabase: configured via `@nuxtjs/supabase` (see `nuxt.config.ts`) — runtime auth redirect options and types configured there.
+- Sitemap: generated from server APIs: `/api/__sitemap__/urls?type=events` and `?type=people`.
+- i18n: uses `@nuxtjs/i18n` with `langDir: 'locales'` and `restructureDir: 'app'`. Adding pages/components must consider route prefixing for locales.
+
+## Troubleshooting & debugging tips
+
+- If runtime types are inconsistent, re-run `pnpm supabase:types` and `pnpm prepare` / `pnpm install` to refresh generated types and `.nuxt` artifacts.
+- To debug server endpoints, inspect `server/api/*` and `server/utils/supabase.ts`. Server logs appear in the terminal running `pnpm dev`.
+- For UI issues, check `app/components/`, `app/composables/`, and `app/stores/` in that order — composables often encapsulate data logic used across pages.
+
+## Where to add new functionality
+
+- New pages: `app/pages/your-page.vue` or nested route folders. Use `pages/<name>/index.vue` or dynamic `[slug].vue` as shown in `app/pages/people/[slug].vue`.
+- New API routes: create `server/api/<name>.get.ts` or `.post.ts`. Reuse `supabaseService.handleError`.
+- New shared types: add to `shared/types/` and, if needed, update generated supabase types.
+
+## Quick examples
+
+- Add a GET API route: `server/api/hello.get.ts` -> export default defineEventHandler(async () => { return { hello: 'world' } })
+- Use supabase error handler in server code:
+  - import { supabaseService } from '#server/utils/supabase'
+  - on PostgrestError: `supabaseService.handleError(error, 500, 'Supabase error')`
+
+---
+
+If anything above is unclear or you want more details about a particular area (build, auth flow, data model, or test setup), tell me which area to expand and I will update this file accordingly.

app/components/TeamsMenu.vue app/components/AppLogo.vueapp/components/TeamsMenu.vue renamed to app/components/AppLogo.vue

@@ -3,7 +3,7 @@
     <UInput
       v-model="globalFilter"
       class="max-w-sm"
-      icon="i-lucide-search"
+      icon="i-lucide:search"
       :placeholder="searchLabel ? searchLabel : $t('general.search')"
     />
 
@@ -34,7 +34,7 @@
           color="neutral"
           variant="outline"
           :label="$t('general.display')"
-          trailing-icon="i-lucide-settings-2"
+          trailing-icon="i-lucide:settings-2"
         />
       </UDropdownMenu>
       <UButton

app/components/DataTable.vue

@@ -13,7 +13,7 @@
       class="data-[state=open]:bg-elevated"
       :ui="{ trailingIcon: 'text-dimmed' }"
       :label="collapsed ? undefined : user.display_name"
-      :trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
+      :trailing-icon="collapsed ? undefined : 'i-lucide:chevrons-up-down'"
     />
 
     <template #chip-leading="{ item }">
@@ -68,13 +68,13 @@ const items = computed<DropdownMenuItem[][]>(() => [
   ],
   [
     {
-      icon: 'i-lucide-user',
+      icon: 'i-lucide:user',
       label: t('settings.profile'),
       to: localePath('/settings/profile')
     },
     {
       exact: true,
-      icon: 'i-lucide-settings',
+      icon: 'i-lucide:settings',
       label: t('settings.title'),
       to: localePath('/settings')
     }
@@ -92,15 +92,15 @@ const items = computed<DropdownMenuItem[][]>(() => [
         slot: 'flag',
         type: 'checkbox'
       })),
-      icon: 'i-lucide-globe',
+      icon: 'i-lucide:globe',
       label: t('settings.language')
     },
     appearanceDropdownItem.value,
     {
       children: [
-        { icon: 'i-lucide-monitor', key: 'system', label: t('settings.system') },
-        { icon: 'i-lucide-sun', key: 'light', label: t('settings.light') },
-        { icon: 'i-lucide-moon', key: 'dark', label: t('settings.dark') }
+        { icon: 'i-lucide:monitor', key: 'system', label: t('settings.system') },
+        { icon: 'i-lucide:sun', key: 'light', label: t('settings.light') },
+        { icon: 'i-lucide:moon', key: 'dark', label: t('settings.dark') }
       ].map((item) => ({
         checked: colorMode.preference === item.key,
         icon: item.icon,
@@ -111,13 +111,13 @@ const items = computed<DropdownMenuItem[][]>(() => [
         },
         type: 'checkbox'
       })),
-      icon: 'i-lucide-sun-moon',
+      icon: 'i-lucide:sun-moon',
       label: t('settings.theme')
     }
   ],
   [
     {
-      icon: 'i-lucide-log-out',
+      icon: 'i-lucide:log-out',
       label: t('settings.log-out'),
       onSelect: () => {
         userStore.signOut()

app/components/NotificationsSlideover.vue

@@ -1,6 +1,6 @@
 <template>
   <UModal v-model:open="open" title="New customer" description="Add a new customer to the database">
-    <UButton icon="i-lucide-plus" label="New customer" />
+    <UButton icon="i-lucide:plus" label="New customer" />
 
     <template #body>
       <UForm :state="state" :schema="schema" class="space-y-4" @submit="onSubmit">

app/components/UserMenu.vue

@@ -0,0 +1,46 @@
+<template>
+  <UCard>
+    <h3 class="text-sm font-semibold mb-2">{{ $t('people.related-events') }}</h3>
+    <div class="space-y-2">
+      <div v-if="events.length === 0" class="text-sm text-zinc-500">
+        {{ $t('people.no-related-events') }}
+      </div>
+      <ul v-else class="space-y-2">
+        <li v-for="(e, idx) in events" :key="e?.slug || idx">
+          <ULink :to="localePath(`/events/${e.slug}`)">
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex items-center gap-3">
+                <img
+                  v-if="e?.cover_url"
+                  alt=""
+                  :src="e.cover_url"
+                  class="w-12 h-8 rounded object-cover"
+                />
+                <div>
+                  <div class="text-sm font-medium">
+                    {{ i18nStore.translate(String(e?.title)) }}
+                  </div>
+                </div>
+              </div>
+              <div>
+                <span class="inline-block text-xs px-2 py-0.5 rounded bg-zinc-100 text-zinc-700">
+                  {{ e.relation_kind }}
+                </span>
+              </div>
+            </div>
+          </ULink>
+        </li>
+      </ul>
+    </div>
+  </UCard>
+</template>
+<script setup lang="ts">
+defineProps<{
+  events: (Pick<Tables<'events'>, 'cover_url' | 'slug' | 'title'> & {
+    relation_kind: Enums<'event_relation'>
+  })[]
+}>()
+
+const i18nStore = useI18nStore()
+const localePath = useLocalePath()
+</script>