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/hooks/useTheme.ts

@@ -0,0 +1,32 @@
+// =============================================================================
+// useTheme Hook - Theme (dark/light mode) state management
+// =============================================================================
+
+import { useCallback, useEffect, useState } from "react";
+
+export type Theme = "light" | "dark";
+
+export interface UseThemeReturn {
+	theme: Theme;
+	toggleTheme: () => void;
+}
+
+export function useTheme(): UseThemeReturn {
+	const [theme, setTheme] = useState<Theme>(() => {
+		if (typeof window !== "undefined") {
+			return (localStorage.getItem("theme") as Theme) || "dark";
+		}
+		return "dark";
+	});
+
+	useEffect(() => {
+		document.documentElement.setAttribute("data-theme", theme);
+		localStorage.setItem("theme", theme);
+	}, [theme]);
+
+	const toggleTheme = useCallback(() => {
+		setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+	}, []);
+
+	return { theme, toggleTheme };
+}