lol

.agent/workflows/new-page.md

@@ -0,0 +1,235 @@
+---
+description: Create a new page in ThrillWiki following project conventions
+---
+
+# New Page Workflow
+
+Create a new page in ThrillWiki following all conventions and patterns.
+
+## Information Gathering
+
+Before creating the page, determine:
+
+1. **Route**: What URL should this page have?
+2. **Page Type**: 
+   - List page (shows multiple items)
+   - Detail page (shows single item)
+   - Form page (create/edit content)
+   - Static page (about, contact, etc.)
+3. **Data Requirements**: What data does this page need?
+4. **Authentication**: Public or authenticated only?
+5. **Related Components**: What existing components can be reused?
+
+## File Creation Steps
+
+### 1. Create the Page Component
+
+Location: `frontend/pages/[route].vue` or `frontend/pages/[folder]/[route].vue`
+
+```vue
+<script setup lang="ts">
+// Define page metadata
+definePageMeta({
+  // middleware: ['auth'], // If authenticated only
+  // layout: 'admin',      // If using special layout
+})
+
+// Set page head
+useSeoMeta({
+  title: 'Page Title | ThrillWiki',
+  description: 'Page description for SEO',
+})
+
+// Fetch data
+const { data, pending, error } = await useAsyncData('unique-key', () =>
+  $fetch('/api/v1/endpoint/')
+)
+
+// Handle error
+if (error.value) {
+  throw createError({
+    statusCode: error.value.statusCode || 500,
+    message: error.value.message
+  })
+}
+</script>
+
+<template>
+  <PageContainer>
+    <!-- Breadcrumbs (if applicable) -->
+    <Breadcrumbs :items="breadcrumbItems" />
+    
+    <!-- Page Header -->
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold">Page Title</h1>
+      <p class="text-muted-foreground mt-2">Page description</p>
+    </div>
+    
+    <!-- Loading State -->
+    <div v-if="pending" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <Skeleton v-for="i in 8" :key="i" class="h-64" />
+    </div>
+    
+    <!-- Content -->
+    <div v-else>
+      <!-- Page content here -->
+    </div>
+  </PageContainer>
+</template>
+```
+
+### 2. For List Pages - Add Filtering
+
+```vue
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+// Filter state from URL
+const filters = computed(() => ({
+  status: route.query.status as string || '',
+  search: route.query.search as string || '',
+  page: parseInt(route.query.page as string) || 1
+}))
+
+// Fetch with filters
+const { data, pending, refresh } = await useAsyncData(
+  `items-${JSON.stringify(filters.value)}`,
+  () => $fetch('/api/v1/items/', { params: filters.value }),
+  { watch: [filters] }
+)
+
+// Update filters
+function updateFilter(key: string, value: string) {
+  router.push({
+    query: { ...route.query, [key]: value || undefined, page: 1 }
+  })
+}
+</script>
+
+<template>
+  <!-- Filter Bar -->
+  <div class="flex gap-4 mb-6">
+    <Input 
+      :model-value="filters.search"
+      @update:model-value="updateFilter('search', $event)"
+      placeholder="Search..."
+    />
+    <Select
+      :model-value="filters.status"
+      @update:model-value="updateFilter('status', $event)"
+    >
+      <SelectOption value="">All</SelectOption>
+      <SelectOption value="operating">Operating</SelectOption>
+      <SelectOption value="closed">Closed</SelectOption>
+    </Select>
+  </div>
+  
+  <!-- Results -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <ItemCard v-for="item in data?.results" :key="item.id" :item="item" />
+  </div>
+  
+  <!-- Pagination -->
+  <Pagination 
+    :current-page="filters.page"
+    :total-pages="Math.ceil((data?.count || 0) / 20)"
+    @page-change="updateFilter('page', $event.toString())"
+  />
+</template>
+```
+
+### 3. For Detail Pages - Dynamic Route
+
+File: `frontend/pages/items/[slug].vue`
+
+```vue
+<script setup lang="ts">
+const route = useRoute()
+const slug = route.params.slug as string
+
+const { data: item, error } = await useAsyncData(
+  `item-${slug}`,
+  () => $fetch(`/api/v1/items/${slug}/`)
+)
+
+if (error.value) {
+  throw createError({
+    statusCode: 404,
+    message: 'Item not found'
+  })
+}
+
+useSeoMeta({
+  title: `${item.value?.name} | ThrillWiki`,
+  description: item.value?.description,
+})
+</script>
+```
+
+### 4. For Form Pages
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod'
+
+const schema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  description: z.string().optional(),
+})
+
+const form = reactive({
+  name: '',
+  description: '',
+})
+
+const errors = ref<Record<string, string[]>>({})
+const isSubmitting = ref(false)
+
+async function handleSubmit() {
+  // Validate
+  const result = schema.safeParse(form)
+  if (!result.success) {
+    errors.value = result.error.flatten().fieldErrors
+    return
+  }
+  
+  isSubmitting.value = true
+  try {
+    await $fetch('/api/v1/items/', {
+      method: 'POST',
+      body: form
+    })
+    await navigateTo('/items')
+  } catch (e) {
+    // Handle API errors
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+```
+
+## Checklist
+
+After creating the page, verify:
+
+- [ ] Page renders without errors
+- [ ] SEO meta tags are set
+- [ ] Loading states display correctly
+- [ ] Error states are handled
+- [ ] Page is responsive (mobile, tablet, desktop)
+- [ ] Keyboard navigation works
+- [ ] Data fetches efficiently (no N+1 issues)
+- [ ] URL parameters persist correctly (for list pages)
+- [ ] Authentication is enforced (if required)
+
+## Output
+
+Report what was created:
+```
+Created: frontend/pages/[path].vue
+Route: /[route]
+Type: [list/detail/form/static]
+Features: [list of features implemented]
+```