Use inline SVG for avatar placeholders

Replace external default avatar URLs with a base64 inline SVG to ensure consistent fallback across pet panels and the data manager.
Add image onerror handlers to revert to the placeholder when loading fails.
Convert Svelte on:click directives to standard onclick attributes for uniform event binding.

Author: gitcoder89431

src/lib/components/panels/PetPanel.svelte

@@ -241,7 +241,7 @@
 			ageUnit: normalizeAgeUnit(newPet.ageUnit),
 			gender: normalizeGender(newPet.gender),
 			size: normalizeSize(newPet.size),
-			profileImageUrl: newPet.profileImageUrl || '/images/default-pet.png',
+			profileImageUrl: newPet.profileImageUrl || '',
 			createdAt: new Date().toISOString(),
 			journalEntries: [],
 		};

src/lib/components/panels/Viewport.svelte

@@ -14,6 +14,10 @@
 	import type { PetPanelData } from '$lib/types/Pet';
 	import type { JournalEntry } from '$lib/types/JournalEntry';
 
+	// Inline placeholder avatar (rounded square with simple mark)
+	const AVATAR_PLACEHOLDER =
+		'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSIxNiIgZmlsbD0iI0Q2REM2RSIvPjx0ZXh0IHg9IjI0IiB5PSIyOSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFwcGxlIENvbG9yIEVtb2ppIiBmb250LXNpemU9IjE2IiBmaWxsPSIjRkZGIj7wn5i98J+YvTwvdGV4dD48L3N2Zz4=';
+
 	let selectedPet: PetPanelData | null = null;
 	let selectedPetId: string | null = null;
 	let pets: PetPanelData[] = [];
@@ -187,9 +191,12 @@
 					<div class="flex items-center space-x-3">
 						{#if selectedPet}
 							<img
-								src={selectedPet.profileImageUrl || '/images/default-pet.png'}
+								src={selectedPet.profileImageUrl || AVATAR_PLACEHOLDER}
 								alt={selectedPet.name}
 								class="w-12 h-12 rounded-full object-cover"
+								onerror={(e) => {
+									(e.target as HTMLImageElement).src = AVATAR_PLACEHOLDER;
+								}}
 							/>
 						{/if}
 						<div>
@@ -217,7 +224,7 @@
 					{#if currentView === 'memories' || currentView === 'dataManager'}
 						<div class="flex space-x-2">
 							<button
-								on:click={() => {
+								onclick={() => {
 									// return to dashboard; select first active pet if available
 									const firstActive = (pets || []).find((p) => !p.archived) || null;
 									if (firstActive) {
@@ -238,23 +245,23 @@
 								class="nav-button px-3 py-1 rounded-md text-sm"
 								data-active={currentView === 'dashboard'}
 								disabled={!selectedPet || isArchived(selectedPet)}
-								on:click={() => uiHelpers.setView('dashboard')}
+								onclick={() => uiHelpers.setView('dashboard')}
 							>
 								Dashboard
 							</button>
 							<button
 								class="nav-button px-3 py-1 rounded-md text-sm"
 								data-active={currentView === 'journal'}
 								disabled={!selectedPet || isArchived(selectedPet)}
-								on:click={() => uiHelpers.setView('journal')}
+								onclick={() => uiHelpers.setView('journal')}
 							>
 								New Entry
 							</button>
 							<button
 								class="nav-button px-3 py-1 rounded-md text-sm"
 								data-active={currentView === 'history'}
 								disabled={!selectedPet || isArchived(selectedPet)}
-								on:click={() => uiHelpers.setView('history')}
+								onclick={() => uiHelpers.setView('history')}
 							>
 								History
 							</button>
@@ -273,12 +280,12 @@
 						</h3>
 						<p>Mark {selectedPet?.name} as passed away?</p>
 						<div class="flex justify-end gap-2">
-							<button class="button-secondary" on:click={() => uiHelpers.setView('dashboard')}
+							<button class="button-secondary" onclick={() => uiHelpers.setView('dashboard')}
 								>Cancel</button
 							>
 							<button
 								class="button"
-								on:click={() => {
+								onclick={() => {
 									if (selectedPet) {
 										petHelpers.archive(selectedPet.id);
 										if (selectedPetId === selectedPet.id) {
@@ -587,14 +594,14 @@
 								<!-- Actions -->
 								<div class="flex justify-end space-x-3">
 									<button
-										on:click={() => uiHelpers.setView('dashboard')}
+										onclick={() => uiHelpers.setView('dashboard')}
 										class="button-secondary"
 										disabled={isSubmitting}
 									>
 										Cancel
 									</button>
 									<button
-										on:click={submitJournalEntry}
+										onclick={submitJournalEntry}
 										class="button flex items-center space-x-2"
 										disabled={!journalInput.trim() || isSubmitting}
 									>
@@ -623,7 +630,7 @@
 							<div class="empty-state text-center py-12">
 								<Calendar size={48} style="color: var(--petalytics-subtle);" class="mx-auto mb-4" />
 								<p class="text-lg mb-2" style="color: var(--petalytics-text);">No entries yet</p>
-								<button on:click={() => uiHelpers.setView('journal')} class="button">
+								<button onclick={() => uiHelpers.setView('journal')} class="button">
 									Write First Entry
 								</button>
 							</div>

src/lib/components/ui/DataManager.svelte

@@ -106,12 +106,12 @@
 							<div class="cli-row px-2 py-2">
 								<div class="flex items-center gap-2">
 									<img
-										src={pet.profileImageUrl || '/images/default-pet.png'}
+										src={pet.profileImageUrl || 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSIxNiIgZmlsbD0iI0YzNEY0RiIvPjxzdmcgeD0iOCIgeT0iOCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTUuMjUgNEM0LjU1OTY0IDQgNCA0LjU1OTY0IDQgNS4yNVYxMC43NUM0IDExLjQ0MDQgNC41NTk2NCAxMiA1LjI1IDEySDEwLjc1QzExLjQ0MDQgMTIgMTIgMTEuNDQwNCAxMiAxMC43NVY1LjI1QzEyIDQuNTU5NjQgMTEuNDQwNCA0IDEwLjc1IDRINS4yNVoiLz48L3N2Zz48L3N2Zz4='}
 										alt={pet.name}
 										class="w-8 h-8 rounded-full object-cover"
 										onerror={(e) => {
 											(e.target as HTMLImageElement).src =
-												'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iMTYiIGZpbGw9IiNGMzRGNEYiLz4KPHN2ZyB4PSI4IiB5PSI4IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIj4KICA8cGF0aCBkPSJNNS4yNSA0QzQuNTU5NjQgNCA0IDQuNTU5NjQgNCA1LjI1VjEwLjc1QzQgMTEuNDQwNCA0LjU1OTY0IDEyIDUuMjUgMTJIMTAuNzVDMTEuNDQwNCAxMiAxMiAxMS40NDA0IDEyIDEwLjc1VjUuMjVDMTIgNC41NTk2NCAxMS40NDA0IDQgMTAuNzUgNEg1LjI1WiIvPgo8L3N2Zz4KPC9zdmc+';
+												'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSIxNiIgZmlsbD0iI0YzNEY0RiIvPjxzdmcgeD0iOCIgeT0iOCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTUuMjUgNEM0LjU1OTY0IDQgNCA0LjU1OTY0IDQgNS4yNVYxMC43NUM0IDExLjQ0MDQgNC41NTk2NCAxMiA1LjI1IDEySDEwLjc1QzExLjQ0MDQgMTIgMTIgMTEuNDQwNCAxMiAxMC43NVY1LjI1QzEyIDQuNTU5NjQgMTEuNDQwNCA0IDEwLjc1IDRINS4yNVoiLz48L3N2Zz48L3N2Zz4=';
 										}}
 									/>
 									<div>