feat: implement pet archiving and unarchiving functionality in PetPanel and pet store

Author: gitcoder89431

src/lib/components/panels/PetPanel.svelte

@@ -5,6 +5,9 @@
 	import type { PetPanelData } from '$lib/types/Pet.js';
 
 	let pets: PetPanelData[] = [];
+	// Derived lists
+	$: activePets = pets.filter((p) => !p.archived);
+	$: archivedPets = pets.filter((p) => p.archived);
 	let selectedPetId: string | null = null;
 	let showCreateForm = false;
 	let imageInput: HTMLInputElement;
@@ -139,6 +142,14 @@
 		}
 	}
 
+	// Keyboard activate handler for elements with role="button"
+	function handleActivate(e: KeyboardEvent, action: () => void) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			action();
+		}
+	}
+
 	function validateForm() {
 		formErrors = {};
 
@@ -197,12 +208,16 @@
 		selectedPetHelpers.select(petId);
 	}
 
-	function handleActivate(e: KeyboardEvent, action: () => void) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			action();
-		}
-	}
+	function archivePet(petId: string) {
+        petHelpers.archive(petId);
+        if (selectedPetId === petId) {
+            selectedPetHelpers.clear();
+        }
+    }
+
+    function unarchivePet(petId: string) {
+        petHelpers.unarchive(petId);
+    }
 </script>
 
 <div class="pet-panel h-full" style="background: var(--petalytics-bg);">
@@ -338,16 +353,41 @@
 			<span class="ml-2" style="color: var(--petalytics-gold);">active_pets</span>
 		</div>
 
-		{#if pets.length === 0}
+		{#if activePets.length === 0}
 			<div class="px-2 py-4" style="color: var(--petalytics-subtle);">no pets yet — use add_pet to create one</div>
 		{:else}
-					{#each pets as pet}
+				{#each activePets as pet}
 						<div class="cli-row px-2 py-1" role="button" tabindex="0" data-selected={selectedPetId === pet.id} onclick={() => selectPet(pet.id)} onkeydown={(e) => handleActivate(e, () => selectPet(pet.id))}>
+ 						<span class="label" style="color: var(--petalytics-text);">{pet.name}</span>
+ 						<span class="value" style="color: var(--petalytics-subtle);">
+ 							{pet.species || 'pet'} | {pet.breed || '—'} | {pet.age}{pet.ageUnit === 'months' ? 'm' : pet.ageUnit === 'weeks' ? 'w' : 'y'}
+ 						</span>
+ 					</div>
+						<div class="px-2 pb-2 flex justify-end">
+                            <button class="arrow-btn" onclick={() => archivePet(pet.id)}>archive</button>
+                        </div>
+					{/each}
+ 		{/if}
+
+		<!-- Archived list -->
+		<div class="my-3"><div class="border-t" style="border-color: var(--petalytics-border);"></div></div>
+		<div class="cli-row px-2 py-1">
+			<span style="color: var(--petalytics-subtle);">#</span>
+			<span class="ml-2" style="color: var(--petalytics-gold);">archived_pets</span>
+		</div>
+		{#if archivedPets.length === 0}
+			<div class="px-2 py-2" style="color: var(--petalytics-subtle);">none</div>
+		{:else}
+			{#each archivedPets as pet}
+				<div class="cli-row px-2 py-1">
 					<span class="label" style="color: var(--petalytics-text);">{pet.name}</span>
 					<span class="value" style="color: var(--petalytics-subtle);">
 						{pet.species || 'pet'} | {pet.breed || '—'} | {pet.age}{pet.ageUnit === 'months' ? 'm' : pet.ageUnit === 'weeks' ? 'w' : 'y'}
 					</span>
 				</div>
+				<div class="px-2 pb-2 flex justify-end">
+					<button class="arrow-btn" onclick={() => unarchivePet(pet.id)}>unarchive</button>
+				</div>
 			{/each}
 		{/if}
 	</div>

src/lib/stores/pets.ts

@@ -36,6 +36,25 @@ export const petHelpers = {
 		}
 	},
 
+	// Archive pet
+	archive(petId: string) {
+		petStore.update((pets) => {
+			const updated = pets.map((pet) => (pet.id === petId ? { ...pet, archived: true } : pet));
+			this.save(updated);
+			// Clear selection if archived pet was selected
+			selectedPetStore.update((selectedId) => (selectedId === petId ? null : selectedId));
+			return updated;
+		});
+	},
+
+	unarchive(petId: string) {
+		petStore.update((pets) => {
+			const updated = pets.map((pet) => (pet.id === petId ? { ...pet, archived: false } : pet));
+			this.save(updated);
+			return updated;
+		});
+	},
+
 	// Save pets to localStorage
 	save(pets: PetPanelData[]) {
 		try {

src/lib/types/Pet.ts

@@ -30,6 +30,7 @@ export interface PetPanelData {
 	gender: 'male' | 'female' | 'unknown';
 	size?: 'tiny' | 'small' | 'medium' | 'large' | 'extra_large';
 	profileImageUrl?: string;
+	archived?: boolean;
 	createdAt: string;
 	journalEntries: PetJournalEntry[];
 }

src/lib/utils/ai-analysis.ts

@@ -20,14 +20,15 @@ export class AIAnalyzer {
 
 	async analyzeJournalEntry(pet: PetPanelData, entry: JournalEntry): Promise<AnalysisResult> {
 		const prompt = this.buildAnalysisPrompt(pet, entry);
+		const referer = typeof window !== 'undefined' ? window.location.origin : undefined;
 
 		try {
 			const response = await fetch(this.baseUrl, {
 				method: 'POST',
 				headers: {
 					Authorization: `Bearer ${this.apiKey}`,
 					'Content-Type': 'application/json',
-					'HTTP-Referer': window.location.origin,
+					...(referer ? { 'HTTP-Referer': referer } : {}),
 					'X-Title': 'Petalytics',
 				},
 				body: JSON.stringify({
@@ -118,12 +119,13 @@ Consider breed-specific traits, age-related needs, and behavioral patterns. Keep
 
 	async testConnection(): Promise<boolean> {
 		try {
+			const referer = typeof window !== 'undefined' ? window.location.origin : undefined;
 			const response = await fetch(this.baseUrl, {
 				method: 'POST',
 				headers: {
 					Authorization: `Bearer ${this.apiKey}`,
 					'Content-Type': 'application/json',
-					'HTTP-Referer': window.location.origin,
+					...(referer ? { 'HTTP-Referer': referer } : {}),
 					'X-Title': 'Petalytics',
 				},
 				body: JSON.stringify({