refactor(frontend): modularize App.tsx into components, pages, hooks, and context (#60)

- Extract App.tsx from 764 lines to ~404 lines
- Create reusable components: MedDetailModal, MobileEditModal, ShareDialog, etc.
- Add AppContext for global state management
- Split pages: DashboardPage, MedicationsPage, SchedulePage, SettingsPage, PlannerPage
- Create custom hooks: useAuth, useMedications, useSettings, useDoses, useSchedule
- Add utility functions in separate modules
- Fix stock status logic (>30 days = green/normal)
- Fix reminder threshold calculation (use reminderDaysBefore not lowStockDays)
- Fix takenBy validation (send [] instead of null)
- Fix datetime format for blister start times (add Z suffix)
- Style 'All OK' status as green/bold

BREAKING: None - all existing functionality preserved

frontend/src/components/MedicationAvatar.tsx

@@ -0,0 +1,19 @@
+// =============================================================================
+// MedicationAvatar Component
+// =============================================================================
+
+export type MedicationAvatarProps = {
+	name: string;
+	imageUrl?: string | null;
+	size?: "sm" | "md" | "lg";
+};
+
+export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvatarProps) {
+	const initials = name.split(" ").map(w => w[0]).join("").toUpperCase().slice(0, 2) || "?";
+	const sizeClass = `med-avatar med-avatar-${size}`;
+	
+	if (imageUrl) {
+		return <img src={`/api/images/${imageUrl}`} alt={name} className={sizeClass} />;
+	}
+	return <div className={`${sizeClass} med-avatar-initials`}>{initials}</div>;
+}