Refactor medication and purchase state management functions for improved clarity and consistency

Author: Michael-Obele

src/routes/apps/(app)/medication-tracker/MedicationList.svelte

@@ -381,7 +381,7 @@
 							{medicationFrequency || 'Select frequency'}
 						</Select.Trigger>
 						<Select.Content>
-							{#each medState.frequencyPresets as preset (preset)}
+							{#each medState.getFrequencyPresets() as preset (preset)}
 								<Select.Item value={preset} label={preset}>
 									{preset}
 								</Select.Item>
@@ -468,7 +468,7 @@
 							{medicationFrequency || 'Select frequency'}
 						</Select.Trigger>
 						<Select.Content>
-							{#each medState.frequencyPresets as preset (preset)}
+							{#each medState.getFrequencyPresets() as preset (preset)}
 								<Select.Item value={preset} label={preset}>
 									{preset}
 								</Select.Item>

src/routes/apps/(app)/medication-tracker/states.svelte.ts

@@ -62,19 +62,21 @@ export const medicationColors = [
 ];
 
 // Frequency presets
-export const frequencyPresets = [
-	'Once daily',
-	'Twice daily',
-	'Three times daily',
-	'Four times daily',
-	'Every 4 hours',
-	'Every 6 hours',
-	'Every 8 hours',
-	'Every 12 hours',
-	'As needed',
-	'Weekly',
-	'Custom'
-];
+export function getFrequencyPresets() {
+	return [
+		'Once daily',
+		'Twice daily',
+		'Three times daily',
+		'Four times daily',
+		'Every 4 hours',
+		'Every 6 hours',
+		'Every 8 hours',
+		'Every 12 hours',
+		'As needed',
+		'Weekly',
+		'Custom'
+	];
+}
 
 // Persisted state for treatment sessions
 export const treatmentSessions = new PersistedState<TreatmentSession[]>(

src/routes/apps/(app)/purchase-tracker/+page.svelte

@@ -191,7 +191,7 @@
 	let availableCategories = $derived(purchaseState.getAllCategories());
 
 	// Get currency options
-	let currencyOptions = $derived(purchaseState.supportedCurrencies);
+	let currencyOptions = $derived(purchaseState.getSupportedCurrencies());
 
 	// Handle adding new item
 	function handleAddItem() {

src/routes/apps/(app)/purchase-tracker/AddEditItemDialog.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Content class="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
+	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-[500px]">
 		<Dialog.Header class="space-y-3 pb-4">
 			<Dialog.Title>{editingItem ? 'Edit Item' : 'Add New Item'}</Dialog.Title>
 			<Dialog.Description>
@@ -64,7 +64,7 @@
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content class="w-full">
 						{#each availableCategories as category}
-					<DropdownMenu.Item onclick={() => itemCategory = category.id}>
+							<DropdownMenu.Item onclick={() => (itemCategory = category.id)}>
 								{category.icon}
 								{category.name}
 							</DropdownMenu.Item>
@@ -96,7 +96,7 @@
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content>
 							{#each currencyOptions as currency}
-								<DropdownMenu.Item onclick={() => itemDefaultCurrency = currency.code}>
+								<DropdownMenu.Item onclick={() => (itemDefaultCurrency = currency.code)}>
 									{#if currency.icon}
 										<img src={currency.icon} alt={currency.symbol} class="mr-2 inline h-4 w-4" />
 									{:else}
@@ -111,12 +111,10 @@
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button variant="outline" onclick={onCancel}>
-				Cancel
-			</Button>
+			<Button variant="outline" onclick={onCancel}>Cancel</Button>
 			<Button onclick={onSave}>
 				{editingItem ? 'Update Item' : 'Add Item'}
 			</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
-</Dialog.Root>
+</Dialog.Root>

src/routes/apps/(app)/purchase-tracker/AddEditPurchaseDialog.svelte

@@ -51,7 +51,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Content class="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
+	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-[500px]">
 		<Dialog.Header class="space-y-3 pb-4">
 			<Dialog.Title>
 				{editingPurchase ? 'Edit Purchase Record' : 'Add Purchase Record'}
@@ -118,7 +118,7 @@
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content>
 							{#each currencyOptions as currency}
-								<DropdownMenu.Item onclick={() => purchaseCurrency = currency.code}>
+								<DropdownMenu.Item onclick={() => (purchaseCurrency = currency.code)}>
 									{#if currency.icon}
 										<img src={currency.icon} alt={currency.symbol} class="mr-2 inline h-4 w-4" />
 									{:else}
@@ -160,12 +160,10 @@
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button variant="outline" onclick={onCancel}>
-				Cancel
-			</Button>
+			<Button variant="outline" onclick={onCancel}>Cancel</Button>
 			<Button onclick={onSave}>
 				{editingPurchase ? 'Update Purchase' : 'Add Purchase'}
 			</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
-</Dialog.Root>
+</Dialog.Root>

src/routes/apps/(app)/purchase-tracker/PurchaseRecord.svelte

@@ -74,4 +74,4 @@
 			</Button>
 		</div>
 	</CardContent>
-</Card>
+</Card>

src/routes/apps/(app)/purchase-tracker/states.svelte.ts

@@ -1,3 +1,4 @@
+// @wc-ignore-file
 import { PersistedState } from 'runed';
 import icons from 'currency-icons';
 
@@ -34,37 +35,31 @@ export interface PurchaseCategory {
 }
 
 // Default categories
-export const defaultCategories: PurchaseCategory[] = [
-	{ id: 'fuel', name: 'Fuel', color: '#ef4444', icon: '⛽' },
-	{ id: 'groceries', name: 'Groceries', color: '#22c55e', icon: '🛒' },
-	{ id: 'dining', name: 'Dining Out', color: '#f59e0b', icon: '🍽️' },
-	{ id: 'utilities', name: 'Utilities', color: '#3b82f6', icon: '⚡' },
-	{ id: 'entertainment', name: 'Entertainment', color: '#8b5cf6', icon: '🎬' },
-	{ id: 'shopping', name: 'Shopping', color: '#ec4899', icon: '🛍️' },
-	{ id: 'healthcare', name: 'Healthcare', color: '#06b6d4', icon: '🏥' },
-	{ id: 'transportation', name: 'Transportation', color: '#84cc16', icon: '🚗' },
-	{ id: 'other', name: 'Other', color: '#6b7280', icon: '📦' }
-];
+export function getDefaultCategories(): PurchaseCategory[] {
+	return [
+		{ id: 'fuel', name: 'Fuel', color: '#ef4444', icon: '⛽' },
+		{ id: 'groceries', name: 'Groceries', color: '#22c55e', icon: '🛒' },
+		{ id: 'dining', name: 'Dining Out', color: '#f59e0b', icon: '🍽️' },
+		{ id: 'utilities', name: 'Utilities', color: '#3b82f6', icon: '⚡' },
+		{ id: 'entertainment', name: 'Entertainment', color: '#8b5cf6', icon: '🎬' },
+		{ id: 'shopping', name: 'Shopping', color: '#ec4899', icon: '🛍️' },
+		{ id: 'healthcare', name: 'Healthcare', color: '#06b6d4', icon: '🏥' },
+		{ id: 'transportation', name: 'Transportation', color: '#84cc16', icon: '🚗' },
+		{ id: 'other', name: 'Other', color: '#6b7280', icon: '📦' }
+	];
+}
 
 // Supported currencies - using currency-icons package
-export const supportedCurrencies = [
-	'USD',
-	'EUR',
-	'GBP',
-	'JPY',
-	'CAD',
-	'AUD',
-	'CHF',
-	'CNY',
-	'INR',
-	'BRL',
-	'NGN'
-].map((code) => ({
-	code,
-	symbol: icons[code]?.symbol || code,
-	name: icons[code]?.name || code,
-	icon: icons[code]?.icon || ''
-}));
+export function getSupportedCurrencies() {
+	return ['USD', 'EUR', 'GBP', 'JPY', 'CAD', 'AUD', 'CHF', 'CNY', 'INR', 'BRL', 'NGN'].map(
+		(code) => ({
+			code,
+			symbol: icons[code]?.symbol || code,
+			name: icons[code]?.name || code,
+			icon: icons[code]?.icon || ''
+		})
+	);
+}
 
 // Create persisted states
 const itemsState = new PersistedState<Item[]>('purchase-items', [], {
@@ -230,12 +225,12 @@ export function deleteCustomCategory(id: string) {
 
 // Get all categories (default + custom)
 export function getAllCategories(): PurchaseCategory[] {
-	return [...defaultCategories, ...customCategoriesState.current];
+	return [...getDefaultCategories(), ...customCategoriesState.current];
 }
 
 // Get currency info
 export function getCurrencyInfo(code: string) {
-	return supportedCurrencies.find((c) => c.code === code);
+	return getSupportedCurrencies().find((c) => c.code === code);
 }
 
 // Calculate statistics

src/routes/apps/(app)/purchase-tracker/states.test.ts

@@ -175,11 +175,11 @@ describe('Purchase Tracker State Management', () => {
 	});
 
 	it('should have supported currencies with proper structure', () => {
-		expect(purchaseState.supportedCurrencies).toBeDefined();
-		expect(Array.isArray(purchaseState.supportedCurrencies)).toBe(true);
-		expect(purchaseState.supportedCurrencies.length).toBeGreaterThan(0);
+		expect(purchaseState.getSupportedCurrencies()).toBeDefined();
+		expect(Array.isArray(purchaseState.getSupportedCurrencies())).toBe(true);
+		expect(purchaseState.getSupportedCurrencies().length).toBeGreaterThan(0);
 
-		const usdCurrency = purchaseState.supportedCurrencies.find((c) => c.code === 'USD');
+		const usdCurrency = purchaseState.getSupportedCurrencies().find((c) => c.code === 'USD');
 		expect(usdCurrency).toBeDefined();
 		expect(usdCurrency?.code).toBe('USD');
 		expect(usdCurrency?.symbol).toBe('$');
@@ -221,7 +221,7 @@ describe('Purchase Tracker State Management', () => {
 		const customCategoryId = purchaseState.addCustomCategory('Custom Category', '#ff0000', '🔥');
 
 		const allCategories = purchaseState.getAllCategories();
-		expect(allCategories.length).toBeGreaterThan(purchaseState.defaultCategories.length);
+		expect(allCategories.length).toBeGreaterThan(purchaseState.getDefaultCategories().length);
 
 		const customCategory = allCategories.find((c) => c.id === customCategoryId);
 		expect(customCategory).toBeDefined();

src/routes/apps/(app)/smoke-free-tracker/+page.svelte

@@ -77,7 +77,9 @@
 	);
 
 	let randomQuote = $derived(
-		smokeState.motivationalQuotes[Math.floor(Math.random() * smokeState.motivationalQuotes.length)]
+		smokeState.getMotivationalQuotes()[
+			Math.floor(Math.random() * smokeState.getMotivationalQuotes().length)
+		]
 	);
 
 	// Initialize

src/routes/apps/(app)/smoke-free-tracker/MilestonesView.svelte

@@ -4,7 +4,7 @@
 	import { Badge } from '@/ui/badge';
 	import { Progress } from '@/ui/progress';
 	import type { SmokingAttempt } from './states.svelte';
-	import { defaultMilestones, getStreakMinutes } from './states.svelte';
+	import { getDefaultMilestones, getStreakMinutes } from './states.svelte';
 
 	interface Props {
 		statistics: {
@@ -18,7 +18,7 @@
 	let { statistics, attempt }: Props = $props();
 
 	let allMilestones = $derived(
-		defaultMilestones.map((m) => {
+		getDefaultMilestones().map((m) => {
 			const achieved = statistics.achievedMilestones.some((am) => am.id === m.id);
 			const isNext = statistics.nextMilestone?.id === m.id;
 			const progress =
@@ -78,12 +78,12 @@
 								{/if}
 							</div>
 
-							<p class="text-sm text-muted-foreground">{milestone.description}</p>
+							<p class="text-muted-foreground text-sm">{milestone.description}</p>
 
 							{#if !milestone.achieved && milestone.isNext}
 								<div class="mt-3">
 									<Progress value={milestone.progress} class="h-2" />
-									<p class="mt-1 text-xs text-muted-foreground">
+									<p class="text-muted-foreground mt-1 text-xs">
 										{milestone.progress.toFixed(0)}% complete
 									</p>
 								</div>