Moved categories to its own configuration file

app/HomeScreen.tsx

@@ -2,6 +2,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Notifications from "expo-notifications";
 import React, { useEffect, useState } from "react";
 import { Linking, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { Category, categories, categoryKeys, categoryTitles } from "types/Category";
 import { Item } from "types/Item";
 import { usePushNotifications } from "../hooks/usePushNotifications";
 import { styles } from "./HomeScreen.styles";
@@ -9,8 +10,6 @@ import { styles } from "./HomeScreen.styles";
 const API_URL = "https://notifier.gansejunge.com";
 const STORAGE_KEY = "notifications";
 
-type Category = "home" | "royal-road" | "podcasts" | "mixtapes";
-
 export default function HomeScreen() {
 	const [data, setData] = useState<Item[]>([]);
 	const [selected, setSelected] = useState<Category>("home");
@@ -42,9 +41,8 @@ export default function HomeScreen() {
 	// Listen for incoming notifications
 	useEffect(() => {
 		const subscription = Notifications.addNotificationReceivedListener(notification => {
-			// Try to extract category from push payload
 			const rawCategory = notification.request.content.data?.category as Category | undefined;
-			const category: Category = rawCategory && ["royal-road", "podcasts", "mixtapes"].includes(rawCategory)
+			const category: Category = rawCategory && categoryKeys.includes(rawCategory)
 				? rawCategory
 				: "home";
 
@@ -58,7 +56,7 @@ export default function HomeScreen() {
 
 			setData(prev => {
 				const updated = [...prev, item].sort((a, b) => b.timestamp - a.timestamp);
-				AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated)); // persist
+				AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
 				return updated;
 			});
 		});
@@ -69,12 +67,7 @@ export default function HomeScreen() {
 	// Filtered view: home shows everything
 	const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);
 
-	const menuItems: { label: string; key: Category }[] = [
-		{ label: "Home", key: "home" },
-		{ label: "Royal Road", key: "royal-road" },
-		{ label: "Podcasts", key: "podcasts" },
-		{ label: "Mixtapes", key: "mixtapes" },
-	];
+	const menuItems = categories;
 
 	return (
 		<SafeAreaView style={styles.container}>
@@ -100,12 +93,7 @@ export default function HomeScreen() {
 					<Text style={styles.menuButtonText}>☰</Text>
 				</TouchableOpacity>
 
-				<Text style={styles.title}>
-					{selected === "home" && "Welcome to Home!"}
-					{selected === "royal-road" && "Royal Road Updates"}
-					{selected === "podcasts" && "Latest Podcasts"}
-					{selected === "mixtapes" && "New Mixtapes"}
-				</Text>
+				<Text style={styles.title}>{categoryTitles[selected]}</Text>
 
 				<ScrollView style={styles.dataContainer}>
 					{filteredData.length === 0 ? (

app/MainContent.tsx

@@ -1,34 +1,26 @@
 import React from 'react';
 import { Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Category, categoryTitles } from 'types/Category';
 import { Item } from 'types/Item';
 
 type MainContentProps = {
-	selected: string;
+	selected: Category;
 	onToggleMenu: () => void;
 	data: Item[];
 };
 
 export default function MainContent({ selected, onToggleMenu, data }: MainContentProps) {
-	const getTitle = () => {
-		switch (selected) {
-			case 'home': return 'Welcome to Home!';
-			case 'royal-road': return 'Royal Road Updates';
-			case 'podcasts': return 'Latest Podcasts';
-			case 'mixtapes': return 'Mixtapes';
-			default: return '';
-		}
-	};
-
 	return (
 		<View style={styles.mainContent}>
 			<TouchableOpacity style={styles.menuButton} onPress={onToggleMenu}>
 				<Text style={styles.menuButtonText}>☰</Text>
 			</TouchableOpacity>
-			<Text style={styles.title}>{getTitle()}</Text>
+
+			<Text style={styles.title}>{categoryTitles[selected]}</Text>
 
 			<ScrollView style={styles.dataContainer}>
 				{data.map(item => (
-					<TouchableOpacity key={item.timestamp} onPress={() => Linking.openURL(item.link)}>
+					<TouchableOpacity key={`${item.timestamp}-${item.title}`} onPress={() => Linking.openURL(item.link)}>
 						<View style={styles.dataItem}>
 							<Text style={styles.dataTitle}>{item.title}</Text>
 							<Text style={styles.dataDescription}>{item.info}</Text>