KungRaseri
b192cd53ba
- Add comprehensive project overview and core philosophy - Document file structure reference for the codebase - Create key files reference table for task-specific guidance - Include multi-tenant guidelines and site resolution flow
80 lines
2.3 KiB
Markdown
80 lines
2.3 KiB
Markdown
---
|
|
description: 'Scaffold a new admin page for The Collective Hub. Generates +page.server.ts (auth guard, load data, form actions) and +page.svelte (Svelte 5, form, Tailwind).'
|
|
agent: 'agent'
|
|
---
|
|
|
|
Scaffold a new admin page at `admin/{section}/` for The Collective Hub.
|
|
|
|
Follow all conventions in:
|
|
- [admin-panel.instructions.md](.github/instructions/admin-panel.instructions.md)
|
|
- [auth-and-roles.instructions.md](.github/instructions/auth-and-roles.instructions.md)
|
|
- [svelte5.instructions.md](.github/instructions/svelte5.instructions.md)
|
|
- [server-ts.instructions.md](.github/instructions/server-ts.instructions.md)
|
|
|
|
## What to Create
|
|
|
|
### 1. `+page.server.ts`
|
|
|
|
```ts
|
|
import { fail, redirect } from '@sveltejs/kit';
|
|
import { db } from '$lib/server/db';
|
|
import { siteSettings } from '$lib/server/db/schema';
|
|
import { eq } from 'drizzle-orm';
|
|
import type { Actions, PageServerLoad } from './$types';
|
|
|
|
export const load: PageServerLoad = async ({ locals }) => {
|
|
if (!locals.user) redirect(302, '/login');
|
|
|
|
// Load current data
|
|
return {
|
|
settings: locals.siteSettings,
|
|
// Add more data as needed
|
|
};
|
|
};
|
|
|
|
export const actions: Actions = {
|
|
default: async ({ locals, request }) => {
|
|
if (!locals.user) return fail(401, { error: 'Unauthorized' });
|
|
|
|
const form = await request.formData();
|
|
// const value = form.get('fieldName') as string;
|
|
|
|
// Validate
|
|
// if (!value) return fail(400, { error: 'Field is required' });
|
|
|
|
// Save to DB (scoped by locals.site.id)
|
|
// await db.update(siteSettings)...
|
|
|
|
return { success: true, message: 'Saved' };
|
|
},
|
|
};
|
|
```
|
|
|
|
### 2. `+page.svelte`
|
|
|
|
```svelte
|
|
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
let { data, form }: { data: PageData; form: import('./$types').ActionData | null } = $props();
|
|
</script>
|
|
|
|
<div class="max-w-2xl mx-auto p-6">
|
|
<h1 class="text-2xl font-bold mb-6">Page Title</h1>
|
|
|
|
<form method="POST" class="space-y-4">
|
|
<!-- Form fields -->
|
|
|
|
{#if form?.error}
|
|
<p class="text-red-500 text-sm">{form.error}</p>
|
|
{/if}
|
|
{#if form?.success}
|
|
<p class="text-green-500 text-sm">{form.message}</p>
|
|
{/if}
|
|
|
|
<button type="submit" class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
|
|
Save Changes
|
|
</button>
|
|
</form>
|
|
</div>
|
|
```
|