[stacked pr]: add local elections view with ballot information

apps/expo/package.json

@@ -23,6 +23,7 @@
     "@expo-google-fonts/inria-serif": "^0.4.1",
     "@expo/vector-icons": "^14.1.0",
     "@legendapp/list": "^2.0.19",
+    "@react-native-async-storage/async-storage": "^3.1.0",
     "@ronradtke/react-native-markdown-display": "^8.1.0",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",

apps/expo/src/app/(tabs)/index.tsx

@@ -15,6 +15,7 @@ import Fuse from "fuse.js";
 import type { VideoPost } from "@acme/api";
 
 import type { Theme } from "~/styles";
+import { ElectionBanner } from "~/components/ElectionBanner";
 import { Text, View } from "~/components/Themed";
 import {
   buttons,
@@ -31,6 +32,7 @@ import {
   useTheme,
 } from "~/styles";
 import { trpc } from "~/utils/api";
+import { daysUntil, isWithinDays } from "~/utils/dates";
 
 interface ContentCard {
   id: string;
@@ -199,10 +201,17 @@ const TAB_CONFIG: { key: VideoPost["type"] | "all"; label: string }[] = [
 export default function BrowseScreen() {
   const insets = useSafeAreaInsets();
   const { theme } = useTheme();
+  const router = useRouter();
   const [selectedTab, setSelectedTab] = useState<VideoPost["type"] | "all">(
     "all",
   );
   const [searchQuery, setSearchQuery] = useState("");
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const electionsQuery = useQuery(trpc.civic.getElections.queryOptions());
+  const upcomingElection = electionsQuery.data?.find((e) =>
+    isWithinDays(e.electionDay, 30),
+  );
 
   const {
     data: content,
@@ -265,6 +274,16 @@ export default function BrowseScreen() {
         ))}
       </View>
 
+      {/* Election banner */}
+      {upcomingElection && !bannerDismissed && (
+        <ElectionBanner
+          daysUntil={daysUntil(upcomingElection.electionDay)}
+          electionName={upcomingElection.name}
+          onPress={() => router.push("/local-elections")}
+          onDismiss={() => setBannerDismissed(true)}
+        />
+      )}
+
       <ScrollView
         style={styles.scrollView}
         showsVerticalScrollIndicator={false}

apps/expo/src/app/local-elections.tsx

@@ -0,0 +1,106 @@
+import { ScrollView, StyleSheet, TouchableOpacity } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
+import { FontAwesome } from "@expo/vector-icons";
+import { useQuery } from "@tanstack/react-query";
+
+import type { Contest } from "@acme/api";
+
+import { BallotMeasuresSection } from "~/components/BallotMeasuresSection";
+import { CandidatesSection } from "~/components/CandidatesSection";
+import { KeyDatesSection } from "~/components/KeyDatesSection";
+import { LocalBillsSection } from "~/components/LocalBillsSection";
+import { MyBallotSection } from "~/components/MyBallotSection";
+import { Text, View } from "~/components/Themed";
+import { useUserAddress } from "~/hooks/useUserAddress";
+import { colors, fontDisplay, fontSize, sp, useTheme } from "~/styles";
+import { trpc } from "~/utils/api";
+
+export default function LocalElectionsScreen() {
+  const { theme } = useTheme();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { address, setAddress, clearAddress } = useUserAddress();
+
+  const electionsQuery = useQuery(trpc.civic.getElections.queryOptions());
+  const upcomingElection = electionsQuery.data?.[0];
+
+  const voterInfoQuery = useQuery({
+    ...trpc.civic.getVoterInfo.queryOptions({ address: address ?? "" }),
+    enabled: !!address,
+  });
+
+  const contests = voterInfoQuery.data?.contests ?? [];
+  const measures = contests.filter((c: Contest) => c.referendumTitle);
+  const candidateContests = contests.filter(
+    (c: Contest) => c.candidates && c.candidates.length > 0,
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.background }]}>
+      <View style={[styles.header, { paddingTop: insets.top + sp[3] }]}>
+        <TouchableOpacity
+          onPress={() => router.back()}
+          style={styles.backButton}
+        >
+          <FontAwesome name="arrow-left" size={18} color={colors.white} />
+        </TouchableOpacity>
+        <Text style={styles.title}>Local Elections</Text>
+        <View style={styles.placeholder} />
+      </View>
+
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <MyBallotSection
+          address={address}
+          onAddressSubmit={setAddress}
+          onEditAddress={clearAddress}
+        />
+
+        {upcomingElection && (
+          <KeyDatesSection electionDate={upcomingElection.electionDay} />
+        )}
+
+        <BallotMeasuresSection measures={measures} />
+
+        <CandidatesSection contests={candidateContests} />
+
+        <LocalBillsSection />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: sp[4],
+    paddingBottom: sp[4],
+  },
+  backButton: {
+    padding: sp[3],
+    marginLeft: -sp[3],
+  },
+  title: {
+    fontFamily: fontDisplay.bold,
+    fontSize: fontSize.xl,
+    color: colors.white,
+  },
+  placeholder: {
+    width: 34,
+  },
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: sp[5],
+  },
+});

apps/expo/src/components/BallotMeasuresSection.tsx

@@ -0,0 +1,140 @@
+import { StyleSheet, TouchableOpacity } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
+
+import type { Contest } from "@acme/api";
+
+import { Text, View } from "~/components/Themed";
+import { fontBody, fontEditorial, fontSize, rd, sp, useTheme } from "~/styles";
+
+interface BallotMeasuresSectionProps {
+  measures: Contest[];
+  onMeasurePress?: (measure: Contest) => void;
+}
+
+export function BallotMeasuresSection({
+  measures,
+  onMeasurePress,
+}: BallotMeasuresSectionProps) {
+  const { theme } = useTheme();
+
+  if (measures.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.sectionTitle}>Ballot Measures</Text>
+      {measures.map((measure, index) => (
+        <TouchableOpacity
+          key={index}
+          style={[styles.card, { backgroundColor: theme.card }]}
+          onPress={() => onMeasurePress?.(measure)}
+          activeOpacity={0.8}
+        >
+          <View style={styles.badge}>
+            <Text style={styles.badgeText}>MEASURE</Text>
+          </View>
+          <Text style={styles.title} numberOfLines={2}>
+            {measure.referendumTitle ?? "Ballot Measure"}
+          </Text>
+          {measure.referendumSubtitle && (
+            <Text style={styles.subtitle} numberOfLines={2}>
+              {measure.referendumSubtitle}
+            </Text>
+          )}
+          {(measure.referendumProStatement ??
+            measure.referendumConStatement) && (
+            <View style={styles.arguments}>
+              {measure.referendumProStatement && (
+                <Text style={styles.argument} numberOfLines={1}>
+                  <Text style={styles.argumentLabel}>Yes: </Text>
+                  {measure.referendumProStatement}
+                </Text>
+              )}
+              {measure.referendumConStatement && (
+                <Text style={styles.argument} numberOfLines={1}>
+                  <Text style={styles.argumentLabel}>No: </Text>
+                  {measure.referendumConStatement}
+                </Text>
+              )}
+            </View>
+          )}
+          <FontAwesome
+            name="chevron-right"
+            size={14}
+            color={colors.textMuted}
+            style={styles.chevron}
+          />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
+const colors = {
+  white: "#FFFFFF",
+  civicBlue: "#4A7CFF",
+  textMuted: "#8A8FA0",
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: sp[4],
+    marginBottom: sp[6],
+  },
+  sectionTitle: {
+    fontFamily: fontEditorial.bold,
+    fontSize: fontSize.lg,
+    color: colors.white,
+    marginBottom: sp[3],
+  },
+  card: {
+    padding: sp[4],
+    borderRadius: rd.md,
+    marginBottom: sp[3],
+  },
+  badge: {
+    backgroundColor: colors.civicBlue,
+    alignSelf: "flex-start",
+    paddingVertical: 2,
+    paddingHorizontal: sp[3],
+    borderRadius: 4,
+    marginBottom: sp[3],
+  },
+  badgeText: {
+    fontFamily: fontBody.semibold,
+    fontSize: 10,
+    color: colors.white,
+    textTransform: "uppercase",
+  },
+  title: {
+    fontFamily: fontBody.semibold,
+    fontSize: fontSize.base,
+    color: colors.white,
+    marginBottom: sp[2],
+  },
+  subtitle: {
+    fontFamily: fontBody.regular,
+    fontSize: fontSize.sm,
+    color: colors.textMuted,
+    marginBottom: sp[3],
+  },
+  arguments: {
+    marginTop: sp[2],
+  },
+  argument: {
+    fontFamily: fontBody.regular,
+    fontSize: fontSize.xs,
+    color: colors.textMuted,
+    marginBottom: 2,
+  },
+  argumentLabel: {
+    fontFamily: fontBody.semibold,
+    color: colors.white,
+  },
+  chevron: {
+    position: "absolute",
+    right: sp[4],
+    top: "50%",
+  },
+});