feat: add create pet form toggle functionality and update UI helpers for better pet management

Author: gitcoder89431

src/lib/components/panels/PetPanel.svelte

@@ -3,7 +3,7 @@
 	import { Upload, Terminal } from 'lucide-svelte';
 	import { petStore, selectedPetStore, petHelpers, selectedPetHelpers } from '$lib/stores/pets';
 	import type { PetPanelData } from '$lib/types/Pet.js';
-	import { rightPanelView, uiHelpers } from '$lib/stores/ui';
+	import { rightPanelView, uiHelpers, createPetFormOpen } from '$lib/stores/ui';
 
 	let pets: PetPanelData[] = [];
 	// Derived lists
@@ -92,6 +92,13 @@
 	let formErrors: Record<string, string> = {};
 
 	onMount(() => {
+		createPetFormOpen.subscribe((open) => {
+			if (open) {
+				showCreateForm = true;
+			} else {
+				// don't forcibly close if user opened manually; only close when toggled locally
+			}
+		});
 		petStore.subscribe((value) => {
 			pets = value;
 			// If no selected pet and we have pets, auto-select the first ACTIVE one
@@ -115,6 +122,7 @@
 		showCreateForm = !showCreateForm;
 		if (!showCreateForm) {
 			resetForm();
+			uiHelpers.closeCreatePetForm();
 		}
 	}
 
@@ -401,7 +409,7 @@
 			<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" style="opacity: 0.9;">
+				<div class="cli-row px-2 py-1" style="opacity: 0.9; cursor: default;">
 					<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'}

src/lib/components/panels/Viewport.svelte

@@ -138,14 +138,14 @@
 			<Skeleton height="h-6" />
 			<Skeleton height="h-4" />
 		</div>
-	{:else if !selectedPet}
+	{:else if !selectedPet && currentView !== 'memories'}
 		<EmptyState
 			icon="file-text"
 			title="No pet selected"
 			description="Select a pet from the left panel to view details, add journal entries, and see AI insights."
 			actionText="Add a Pet"
 			onAction={() => {
-				console.log('Add a Pet clicked');
+					uiHelpers.openCreatePetForm();
 			}}
 		/>
 	{:else}
@@ -167,32 +167,25 @@
 						</div>
 					</div>
 
-					<div class="flex space-x-2">
-						<button
-							on:click={() => uiHelpers.setView('dashboard')}
-							class="nav-button px-3 py-1 rounded-md text-sm"
-							class:active={currentView === 'dashboard'}
-							disabled={isArchived(selectedPet)}
-						>
-							Dashboard
-						</button>
-						<button
-							on:click={() => uiHelpers.setView('journal')}
-							class="nav-button px-3 py-1 rounded-md text-sm"
-							class:active={currentView === 'journal'}
-							disabled={isArchived(selectedPet)}
-						>
-							New Entry
-						</button>
-						<button
-							on:click={() => uiHelpers.setView('history')}
-							class="nav-button px-3 py-1 rounded-md text-sm"
-							class:active={currentView === 'history'}
-							disabled={isArchived(selectedPet)}
-						>
-							History
-						</button>
-					</div>
+					{#if currentView === 'memories'}
+						<div class="flex space-x-2">
+							<button
+								on:click={() => {
+									// return to dashboard; select first active pet if available
+									const firstActive = (pets || []).find((p) => !p.archived) || null;
+									if (firstActive) {
+										selectedPetHelpers.select(firstActive.id);
+									} else {
+										selectedPetHelpers.clear();
+									}
+									uiHelpers.setView('dashboard');
+								}}
+								class="nav-button px-3 py-1 rounded-md text-sm"
+							>
+								Back to Dashboard
+							</button>
+						</div>
+					{/if}
 				</div>
 			</div>
 
@@ -223,7 +216,7 @@
 							<div class="flex items-center justify-between">
 								<div>
 									<div class="text-base font-semibold" style="color: var(--petalytics-text);">Memories</div>
-									<div class="text-xs" style="color: var(--petalytics-subtle);">All archived pets</div>
+									<div class="text-xs" style="color: var(--petalytics-subtle);">Archived memories</div>
 								</div>
 								<div class="text-xs px-2 py-1 rounded" style="background: var(--petalytics-surface); color: var(--petalytics-subtle);">
 									{archivedPetsList().length} pets
@@ -261,7 +254,7 @@
 							{/each}
 						{/if}
 					</div>
-				{:else if currentView === 'dashboard'}
+				{:else if currentView === 'dashboard' && selectedPet}
 					<!-- Dashboard View -->
 					<div class="dashboard-grid space-y-4">
 						<!-- Stats Cards -->
@@ -381,7 +374,7 @@
 							</div>
 						</div>
 					</div>
-				{:else if currentView === 'journal'}
+				{:else if currentView === 'journal' && selectedPet}
 					<!-- Journal Entry Form -->
 					<div class="journal-form max-w-2xl mx-auto">
 						<div class="form-card p-6 rounded-lg" style="background: var(--petalytics-surface);">
@@ -479,7 +472,7 @@
 							</div>
 						</div>
 					</div>
-				{:else if currentView === 'history'}
+				{:else if currentView === 'history' && selectedPet}
 					<!-- History View -->
 					<div class="history-view max-w-4xl mx-auto">
 						<h3 class="text-xl font-semibold mb-4" style="color: var(--petalytics-text);">
@@ -551,12 +544,8 @@
 		transition: all 0.2s;
 	}
 
-	.nav-button.active {
-		background: var(--petalytics-accent);
-		color: var(--petalytics-bg);
-	}
-
-	.nav-button:hover:not(.active) {
+	.nav-button:hover {
 		opacity: 0.8;
+		background: var(--petalytics-highlight-low);
 	}
 </style>

src/lib/stores/ui.ts

@@ -4,8 +4,20 @@ export type RightPanelView = 'dashboard' | 'journal' | 'history' | 'memories' |
 
 export const rightPanelView = writable<RightPanelView>('dashboard');
 
+// Global flag to open the create-pet form from anywhere (e.g., right panel EmptyState)
+export const createPetFormOpen = writable<boolean>(false);
+
 export const uiHelpers = {
   setView(view: RightPanelView) {
     rightPanelView.set(view);
+  },
+  setCreatePetFormOpen(open: boolean) {
+    createPetFormOpen.set(open);
+  },
+  openCreatePetForm() {
+    createPetFormOpen.set(true);
+  },
+  closeCreatePetForm() {
+    createPetFormOpen.set(false);
   }
 };