refactor: improve accessibility and code structure in UI components

Author: gitcoder89431

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
           node-version: '20'
           cache: 'npm'
       - run: npm ci
-      - run: npm audit --audit-level moderate
+      - run: npm audit --audit-level high
 
   deploy:
     needs: [test, security]

API.md

@@ -5,37 +5,39 @@
 Petalytics integrates directly with OpenRouter API for AI-powered pet insights.
 
 ### Authentication
+
 Users provide their own OpenRouter API key through the Guardian Panel.
 
 ### Analysis Request Format
+
 ```typescript
 interface AnalysisRequest {
-  pet: {
-    name: string;
-    breed: string;
-    age: number;
-    gender: 'male' | 'female';
-  };
-  entry: {
-    content: string;
-    date: string;
-    mood?: string;
-    activityLevel?: string;
-  };
-  recentHistory: JournalEntry[];
+	pet: {
+		name: string;
+		breed: string;
+		age: number;
+		gender: 'male' | 'female';
+	};
+	entry: {
+		content: string;
+		date: string;
+		mood?: string;
+		activityLevel?: string;
+	};
+	recentHistory: JournalEntry[];
 }
 ```
 
 ### Analysis Response Format
 
 ```typescript
 interface AnalysisResult {
-  summary: string;
-  moodTrend: 'improving' | 'stable' | 'concerning';
-  activityLevel: 'low' | 'normal' | 'high';
-  healthConcerns: string[];
-  recommendations: string[];
-  nextCheckupSuggestion?: string;
+	summary: string;
+	moodTrend: 'improving' | 'stable' | 'concerning';
+	activityLevel: 'low' | 'normal' | 'high';
+	healthConcerns: string[];
+	recommendations: string[];
+	nextCheckupSuggestion?: string;
 }
 ```
 
@@ -63,10 +65,10 @@ Each line contains a JSON object:
 
 ### Import Validation
 
-* File must have `.jsonl` extension
-* Version compatibility checking
-* Data structure validation
-* Duplicate handling
+- File must have `.jsonl` extension
+- Version compatibility checking
+- Data structure validation
+- Duplicate handling
 
 ## LocalStorage Schema
 
@@ -88,10 +90,13 @@ localStorage.setItem('petalytics-pets', JSON.stringify([
 ### Guardian Data
 
 ```javascript
-localStorage.setItem('petalytics-guardian', JSON.stringify({
-  name: string,
-  apiKey: string,
-  preferences: object,
-  apiKeyValid: boolean
-}));
-```
+localStorage.setItem(
+	'petalytics-guardian',
+	JSON.stringify({
+		name: string,
+		apiKey: string,
+		preferences: object,
+		apiKeyValid: boolean,
+	})
+);
+```

CONTRIBUTING.md

@@ -5,12 +5,14 @@ Thank you for your interest in contributing to Petalytics! This guide will help
 ## Development Setup
 
 1. **Fork and clone the repository**
+
    ```bash
    git clone https://github.com/YOUR_USERNAME/petalytics.git
    cd petalytics
    ```
 
 2. **Install dependencies**
+
    ```bash
    npm install
    ```
@@ -22,10 +24,10 @@ Thank you for your interest in contributing to Petalytics! This guide will help
 
 ## Code Style
 
-* **TypeScript** - Use TypeScript for all new code
-* **ESLint** - Follow the configured linting rules
-* **Prettier** - Code formatting is automated
-* **Conventional Commits** - Use conventional commit messages
+- **TypeScript** - Use TypeScript for all new code
+- **ESLint** - Follow the configured linting rules
+- **Prettier** - Code formatting is automated
+- **Conventional Commits** - Use conventional commit messages
 
 ### Example commit messages:
 
@@ -37,9 +39,9 @@ docs: update README with new features
 
 ## Testing
 
-* Write tests for new features
-* Run tests before submitting PRs: `npm test`
-* Ensure type checking passes: `npm run check`
+- Write tests for new features
+- Run tests before submitting PRs: `npm test`
+- Ensure type checking passes: `npm run check`
 
 ## Pull Request Process
 
@@ -51,13 +53,13 @@ docs: update README with new features
 
 ## Areas for Contribution
 
-* **AI Prompts** - Improve breed-specific analysis
-* **Themes** - Add new color schemes
-* **Mobile UX** - Enhance mobile experience
-* **Accessibility** - Improve screen reader support
-* **Testing** - Add more comprehensive tests
-* **Documentation** - Improve guides and examples
+- **AI Prompts** - Improve breed-specific analysis
+- **Themes** - Add new color schemes
+- **Mobile UX** - Enhance mobile experience
+- **Accessibility** - Improve screen reader support
+- **Testing** - Add more comprehensive tests
+- **Documentation** - Improve guides and examples
 
 ## Questions?
 
-Open an issue or reach out to the maintainers!
+Open an issue or reach out to the maintainers!

README.md

@@ -8,7 +8,7 @@
 ## ✨ Features
 
 - **🤖 AI-Powered Insights** - Get personalized care recommendations using OpenRouter API
-- **📝 Smart Journaling** - Record daily activities, mood, and behavior patterns  
+- **📝 Smart Journaling** - Record daily activities, mood, and behavior patterns
 - **🎨 Beautiful Themes** - 4 gorgeous themes (Everforest, Gruvbox Dark, Tokyo Night, Nord)
 - **📊 Health Tracking** - Monitor wellness trends over time
 - **🔒 Privacy First** - Your data stays local, export/import JSONL files
@@ -17,17 +17,20 @@
 ## 🚀 Quick Start
 
 ### 1. Get an OpenRouter API Key
+
 - Visit [OpenRouter.ai](https://openrouter.ai)
 - Sign up and get your API key
 - Copy the key (starts with `sk-or-`)
 
 ### 2. Use the App
+
 - Visit [Petalytics](https://petalytics.vercel.app)
 - Enter your API key in Guardian Settings
 - Create your first pet profile
 - Start journaling!
 
 ### 3. Local Development
+
 ```bash
 git clone https://github.com/gitcoder89431/petalytics.git
 cd petalytics
@@ -41,86 +44,86 @@ npm run dev
 
 ### Key Innovations
 
-* **BYOK Model** - No backend costs, users own their data
-* **Shell App Architecture** - Fully client-side with export/import
-* **Breed-Specific AI** - Tailored insights based on pet characteristics
-* **Beautiful 3-Panel Layout** - Inspired by modern desktop environments
+- **BYOK Model** - No backend costs, users own their data
+- **Shell App Architecture** - Fully client-side with export/import
+- **Breed-Specific AI** - Tailored insights based on pet characteristics
+- **Beautiful 3-Panel Layout** - Inspired by modern desktop environments
 
 ### Tech Highlights
 
-* SvelteKit + TypeScript for performance
-* Direct browser → OpenRouter API integration
-* Theme system extracted from omarchy-theme-builder
-* JSONL data portability
-* Zero database dependencies
+- SvelteKit + TypeScript for performance
+- Direct browser → OpenRouter API integration
+- Theme system extracted from omarchy-theme-builder
+- JSONL data portability
+- Zero database dependencies
 
 ## 📊 Usage
 
 ### 1. Guardian Setup (Top-Left Panel)
 
-* Configure your profile and API key
-* Choose from 4 beautiful themes
-* Set preferences and reminders
+- Configure your profile and API key
+- Choose from 4 beautiful themes
+- Set preferences and reminders
 
 ### 2. Pet Management (Bottom-Left Panel)
 
-* Create pet profiles with photos
-* Add breed, age, and basic info
-* Select active pet for journaling
+- Create pet profiles with photos
+- Add breed, age, and basic info
+- Select active pet for journaling
 
 ### 3. Main Dashboard (Right Panel)
 
-* View pet stats and recent activity
-* Write new journal entries
-* See AI analysis and recommendations
-* Browse journal history
+- View pet stats and recent activity
+- Write new journal entries
+- See AI analysis and recommendations
+- Browse journal history
 
 ## 🤖 AI Features
 
 The AI analyzes journal entries considering:
 
-* **Breed-specific traits** (Golden Retriever vs Persian Cat)
-* **Age-appropriate behavior** (puppy vs senior dog)
-* **Historical patterns** (mood trends over time)
-* **Health indicators** (activity level changes)
+- **Breed-specific traits** (Golden Retriever vs Persian Cat)
+- **Age-appropriate behavior** (puppy vs senior dog)
+- **Historical patterns** (mood trends over time)
+- **Health indicators** (activity level changes)
 
 Sample AI insights:
 
-* "Max seems more lethargic than usual for a young Golden Retriever"
-* "Consider increasing mental stimulation based on recent boredom signs"
-* "Schedule vet checkup - senior cats should be monitored closely"
+- "Max seems more lethargic than usual for a young Golden Retriever"
+- "Consider increasing mental stimulation based on recent boredom signs"
+- "Schedule vet checkup - senior cats should be monitored closely"
 
 ## 🔐 Privacy & Data
 
-* **Local First** - All data stored in browser localStorage
-* **No Backend** - Direct API calls to OpenRouter
-* **Export/Import** - Download JSONL backups anytime
-* **BYOK** - Bring your own API key, control your costs
+- **Local First** - All data stored in browser localStorage
+- **No Backend** - Direct API calls to OpenRouter
+- **Export/Import** - Download JSONL backups anytime
+- **BYOK** - Bring your own API key, control your costs
 
 ## 🎨 Themes
 
 Four beautiful themes extracted from omarchy-theme-builder:
 
-* **Everforest** - Comfortable green forest theme
-* **Gruvbox Dark** - Warm, retro-inspired colors
-* **Tokyo Night** - Modern dark with purple accents
-* **Nord** - Cool arctic-inspired palette
+- **Everforest** - Comfortable green forest theme
+- **Gruvbox Dark** - Warm, retro-inspired colors
+- **Tokyo Night** - Modern dark with purple accents
+- **Nord** - Cool arctic-inspired palette
 
 ## 📱 Responsive Design
 
-* **Desktop** - Full 3-panel layout with optimal workflow
-* **Tablet** - Adaptive layout with collapsible panels
-* **Mobile** - Stacked panels for touch-friendly navigation
+- **Desktop** - Full 3-panel layout with optimal workflow
+- **Tablet** - Adaptive layout with collapsible panels
+- **Mobile** - Stacked panels for touch-friendly navigation
 
 ## 🛠️ Development
 
 ### Tech Stack
 
-* **Frontend**: SvelteKit + TypeScript
-* **Styling**: Tailwind CSS + Custom themes
-* **AI**: OpenRouter API (Claude, GPT models)
-* **Deployment**: Vercel
-* **Data**: localStorage + JSONL export/import
+- **Frontend**: SvelteKit + TypeScript
+- **Styling**: Tailwind CSS + Custom themes
+- **AI**: OpenRouter API (Claude, GPT models)
+- **Deployment**: Vercel
+- **Data**: localStorage + JSONL export/import
 
 ### Scripts
 
@@ -160,10 +163,10 @@ MIT License - see [LICENSE](LICENSE) for details.
 
 ## 🙏 Acknowledgments
 
-* OpenRouter for providing accessible AI APIs
-* Omarchy theme system for beautiful color palettes
-* SvelteKit team for an amazing framework
-* Contest organizers for the opportunity
+- OpenRouter for providing accessible AI APIs
+- Omarchy theme system for beautiful color palettes
+- SvelteKit team for an amazing framework
+- Contest organizers for the opportunity
 
 ---
 

src/lib/components/panels/GuardianPanel.svelte

@@ -3,7 +3,7 @@
 	import ThemeSelector from '../ui/ThemeSelector.svelte';
 	import DataManager from '../ui/DataManager.svelte';
 	import { User, Key, Settings, CheckCircle, AlertCircle } from 'lucide-svelte';
-	import { guardianStore, guardianHelpers } from '$lib/stores/guardian.js';
+	import { guardianHelpers } from '$lib/stores/guardian.js';
 	import { aiAnalysisHelpers } from '$lib/stores/ai-analysis.js';
 
 	let apiKeyInput = '';
@@ -88,10 +88,15 @@
 	<div class="panel-content flex-1 p-4 space-y-4 overflow-y-auto">
 		<!-- Guardian Info -->
 		<div class="section">
-			<label class="block text-sm font-medium mb-2" style="color: var(--petalytics-subtle);">
+			<label
+				for="guardian-name"
+				class="block text-sm font-medium mb-2"
+				style="color: var(--petalytics-subtle);"
+			>
 				Your Name
 			</label>
 			<input
+				id="guardian-name"
 				type="text"
 				bind:value={guardianName}
 				on:blur={saveGuardianInfo}
@@ -139,10 +144,14 @@
 
 		<!-- Theme Selection -->
 		<div class="section">
-			<label class="block text-sm font-medium mb-2" style="color: var(--petalytics-subtle);">
+			<label
+				for="theme-selector"
+				class="block text-sm font-medium mb-2"
+				style="color: var(--petalytics-subtle);"
+			>
 				Theme
 			</label>
-			<ThemeSelector />
+			<ThemeSelector id="theme-selector" />
 		</div>
 
 		<!-- Settings -->