Contributing Guidelines

# Fork the repository on GitHub, then:
git clone https://github.com/YOUR_USERNAME/sptfyin.git
cd sptfyin

# Create a focused feature branch from main
git checkout -b feat/your-feature-name

# Work in progress (can be squashed later)
git commit -m "wip: add user profile component structure"

# Stable checkpoint (incomplete)
git commit -m "checkpoint: profile page layout complete, styles pending"

# Complete feature
git commit -m "feat: add user profile page with avatar upload"

# Bug fix
git commit -m "fix: resolve login redirect issue"

# Maintenance
git commit -m "chore: update dependencies"

# Refactoring
git commit -m "refactor: extract auth logic to utility"

# Documentation
git commit -m "docs: update contributing guidelines"

# After 30 mins of work on a feature
git add -A && git commit -m "wip: add user profile component structure"

# Before switching to fix a bug
git add -A && git commit -m "checkpoint: profile page layout complete, styles pending"

# When feature is done
git add -A && git commit -m "feat: add user profile page with avatar upload"

# Build for production
pnpm build

# Run linters
pnpm lint

# (Optional) Run tests
vitest

# Push to your fork
git push origin feat/your-feature-name

## Summary

Brief description of what this PR does and why.

## Changes

- Change 1
- Change 2
- Change 3

## Testing

- [x] Tested locally with `pnpm dev`
- [x] Build passes (`pnpm build`)
- [x] Lint passes (`pnpm lint`)

## Screenshots (if UI changes)

<!-- Add screenshots here -->

<script>
	// ✅ Correct: Use $state()
	let count = $state(0);

	// ❌ Wrong: Do not use plain let
	let count = 0;
</script>

<script>
	let count = $state(0);

	// ✅ Correct: Use $derived()
	let doubled = $derived(count * 2);

	// ❌ Wrong: Do not use reactive statements
	$: doubled = count * 2;
</script>

<script>
	// ✅ Correct: Use $props()
	const { title, description } = $props();

	// ❌ Wrong: Do not use export let
	export let title;
	export let description;
</script>

<script>
	import { preventDefault } from 'svelte/legacy';

	function handleSubmit() {
		// Handle form submission
	}
</script>

<form onsubmit={preventDefault(handleSubmit)}>
	<!-- form fields -->
</form>

<script>
	// 1. Imports (framework first, then libraries, then local)
	import { onMount } from 'svelte';
	import { Button } from '$lib/components/ui/button';
	import { myUtil } from '$lib/utils';

	// 2. Props
	const { title, items = [] } = $props();

	// 3. State
	let isOpen = $state(false);

	// 4. Derived values
	let count = $derived(items.length);

	// 5. Lifecycle and effects
	onMount(() => {
		// Component mounted
	});

	// 6. Functions
	function handleClick() {
		isOpen = !isOpen;
	}
</script>

<!-- 7. Markup -->
<div>
	<h1>{title}</h1>
	<Button onclick={handleClick}>Toggle</Button>
</div>

<!-- 8. Styles (if needed) -->
<style>
	/* Component-scoped styles */
</style>

<script>
	// Use shadcn components from $lib/components/ui/
	import { Button } from '$lib/components/ui/button';
	import { Dialog, DialogContent } from '$lib/components/ui/dialog';

	// Use PocketBase from $lib/pocketbase.js
	import { pb } from '$lib/pocketbase';

	// Use Iconify icons
	import 'iconify-icon';
</script>

<Button>Click me</Button>
<iconify-icon icon="lucide:user" />

<script>
	import { pb } from '$lib/pocketbase';
	import { toast } from 'svelte-sonner';

	async function createLink() {
		try {
			const record = await pb.collection('random_short').create({
				slug: 'my-slug',
				url: 'https://example.com'
			});
			toast.success('Link created successfully!');
		} catch (error) {
			toast.error('Failed to create link', {
				description: error.message
			});
		}
	}
</script>

<script>
	import { AlertDialog, AlertDialogContent } from '$lib/components/ui/alert-dialog';

	let errorOpen = $state(false);
	let errorMessage = $state('');

	function handleError(error) {
		errorMessage = error.message;
		errorOpen = true;
	}
</script>

<AlertDialog bind:open={errorOpen}>
	<AlertDialogContent>
		<iconify-icon icon="lucide:alert-circle" />
		<h2>Error</h2>
		<p>{errorMessage}</p>
	</AlertDialogContent>
</AlertDialog>

import { describe, it, expect } from 'vitest';
import { formatDate } from '$lib/utils/formatDate';

describe('formatDate', () => {
	it('formats date correctly', () => {
		const date = new Date('2025-01-01');
		expect(formatDate(date)).toBe('January 1, 2025');
	});
});

vitest

# Show ready work (no blockers)
bd ready

# List all issues
bd list

# Create new issue
bd create "Issue title" -p 1 -t task

# Update issue status
bd update <id> --status in_progress
bd update <id> --status closed

# Close completed issue
bd close <id>

# Sync beads with git (run before push)
bd sync