This shit aint working but juuuust incase I need the code I'll keep it here

.gitignore

@@ -44,5 +44,3 @@ app-example
 
 
 google-services.json
-build-*
-*.apk

README.md

@@ -1,119 +1,50 @@
-# Notifier app
+# Welcome to your Expo app 👋
 
-A React Native mobile application for receiving push notifications.
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
 
-## Features
+## Get started
 
-- **Secure API Authentication** - API key-based authentication to connect to the `backend-api`
+1. Install dependencies
-- **Notification Storage** - Notifications are saved locally and deleted after 60 days
-- **Category Organization** - Notifications are organized into categories and a complete history is displayed in Home
-- **Drawer Navigation** - Easy navigation between different notification categories
-- **Interactive Links** - Tap on notification links to open them in your device's browser
-- **Logout Functionality** - Securely unregister your device and clear all local data
 
-<p align="center">
+   ```bash
-  <img src="assets/images/main_menu.jpg" alt="Main Menu" width="30%"/>
+   npm install
-  <img src="assets/images/sidemenu.jpg" alt="Side Menu" width="30%"/>
+   ```
-  <img src="assets/images/rr_category.jpg" alt="RR Category" width="30%"/>
-</p>
 
-## Prerequisites
+2. Start the app
 
-- Node.js (v14 or higher)
+   ```bash
-- Firebase account with google-services.json
+   npx expo start
-- Expo account with Firebase Admin SDK private key imported
+   ```
-- Installed eas-cli
-- Android SDK 36
-- Physical Android device (push notifications don't work on simulators/emulators)
-- API key
 
+In the output, you'll find options to open the app in a
 
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
 
-## Building from scratch
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
 
-1. Clone the repository:
 ```bash
-git clone <repository-url>
+npm run reset-project
-cd <project-directory>
 ```
 
-2. Install dependencies:
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
-```bash
-npm install
-```
 
-3. Copy google-services.json to root directory and delete .gitignore file (or comment out google-services.json)
+## Learn more
 
-4. Use EAS to build and follow along
+To learn more about developing your project with Expo, look at the following resources:
-```bash
-eas build --profile release --local --platform android
-```
 
-## Configuration
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
 
-### Backend URL
+## Join the community
 
-The app connects to the notification backend at:
+Join our community of developers creating universal apps.
-```
-https://notifier.gansejunge.com
-```
 
-To change this, modify the `API_URL` constant in `index.tsx`.
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
-### Categories
-
-Categories are defined in `types/Category.ts`. Special categories:
-- **Home** - View all notifications
-- **Utility** - Default category for uncategorized notifications
-
-
-
-## Technical Details
-
-### Notification Data Structure
-
-Notifications should include the following data fields from your backend:
-
-```json
-{
-  "title": "Notification Title",
-  "body": "Notification message text",
-  "data": {
-    "category": "utility",
-    "link": "https://example.com",
-    "timestamp": 1760734800
-  }
-}
-```
-
-- `category` - Optional. Defaults to "utility" if not provided
-- `link` - Optional. Set to "#" if no link should be shown
-- `timestamp` - Optional. Defaults to when the notification was received when empty
-
-
-## Project Structure
-
-```
-├── index.tsx                      # Main app component
-├── hooks/
-│   ├── usePushNotifications.ts    # Push notification registration
-│   └── useNotificationListener.ts # Notification receiving and storage
-├── types/
-│   ├── Category.ts                # Category definitions
-│   └── Item.ts                    # Notification item type
-└── styles/
-    └── styles.ts                  # App styling
-```
-
-
-## API Endpoints
-
-The app communicates with these backend endpoints:
-
-- **POST /register-token** - Register device for push notifications
-  - Headers: `X-API-Key: <your-api-key>`
-  - Body: `{ token, platform, app_ver, locale, topics }`
-
-- **POST /unregister-token** - Unregister device
-  - Headers: `X-API-Key: <your-api-key>`
-  - Body: `{ token, platform, app_ver, locale, topics }`

app.json

@@ -1,30 +1,44 @@
 {
   "expo": {
-    "name": "Notifier",
+    "name": "my-drawer-app",
-    "slug": "notifier",
+    "slug": "my-drawer-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "notifier",
+    "scheme": "mydrawerapp",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.mydrawerapp",
+      "buildNumber": "1.0.0",
+      "infoPlist": {
+        "UIBackgroundModes": [
+          "remote-notification"
+        ],
+        "NSUserTrackingUsageDescription": "This identifier will be used to deliver personalized notifications.",
+        "NSUserNotificationUsageDescription": "This app uses notifications to keep you informed."
+      }
     },
     "android": {
-      "useNextNotificationsApi": true,
+      "adaptiveIcon": {
-      "googleServicesFile": "./google-services.json",
+        "backgroundColor": "#E6F4FE",
-        "adaptiveIcon": {
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
-          "backgroundColor": "#E6F4FE",
+        "backgroundImage": "./assets/images/android-icon-background.png",
-          "foregroundImage": "./assets/images/icon.png"
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
-        },
+      },
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false,
-      "package": "com.gansejunge.notifier"
+      "package": "com.anonymous.mydrawerapp",
+      "versionCode": 1,
+      "permissions": [
+        "NOTIFICATIONS"
+      ],
+      "googleServicesFile": "./google-services.json"
     },
     "web": {
       "output": "static",
-      "favicon": "./assets/images/icon.png"
+      "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
       "expo-router",
@@ -39,6 +53,15 @@
             "backgroundColor": "#000000"
           }
         }
+      ],
+      [
+        "expo-notifications",
+        {
+          "icon": "./assets/images/notification-icon.png",
+          "color": "#000000",
+          "androidMode": "default",
+          "androidCollapsedTitle": "New notification"
+        }
       ]
     ],
     "experiments": {
@@ -48,7 +71,7 @@
     "extra": {
       "router": {},
       "eas": {
-        "projectId": "361036ad-f0cf-41d1-ba27-d3f39f6019dc"
+        "projectId": "630e211b-f7de-4a82-a863-5962a593f5aa"
       }
     }
   }

app/CustomDrawerContent.tsx

@@ -0,0 +1,28 @@
+// CustomDrawerContent.tsx
+import { DrawerContentScrollView } from '@react-navigation/drawer';
+import React from 'react';
+import { Category, categories } from '../types/Category';
+import { SideMenu } from './SideMenu';
+
+type CustomDrawerContentProps = {
+	selected: Category;
+	setSelected: (key: Category) => void;
+	handleLogout: () => void;
+};
+
+export function CustomDrawerContent({
+	selected,
+	setSelected,
+	handleLogout,
+}: CustomDrawerContentProps) {
+	return (
+		<DrawerContentScrollView style={{ flex: 1, paddingTop: 0 }}>
+			<SideMenu
+				menuItems={categories.map(c => ({ key: c.key as Category, label: c.label }))}
+				selected={selected}
+				onSelect={key => setSelected(key)}
+				onLogout={handleLogout}
+			/>
+		</DrawerContentScrollView>
+	);
+}

app/HomeScreen.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Category } from 'types/Category';
+import { Item } from 'types/Item';
+import { styles } from '../styles/HomeScreen.styles';
+
+type HomeScreenProps = {
+	selectedCategory?: Category;
+	onSelectCategory?: (key: Category) => void;
+	data?: Item[];
+	apiKey?: string | null;
+	setApiKey?: (key: string) => void;
+	tempKey?: string;
+	setTempKey?: (key: string) => void;
+};
+
+export default function HomeScreen({
+	selectedCategory = 'home',
+	data = [],
+}: HomeScreenProps) {
+	const filteredData = selectedCategory === 'home'
+		? data
+		: data.filter(item => item.category === selectedCategory);
+
+	return (
+		<SafeAreaView style={styles.container}>
+			<View style={styles.mainContent}>
+				<Text style={styles.title}>{selectedCategory}</Text>
+				<ScrollView style={styles.dataContainer}>
+					{filteredData.length === 0 ? (
+						<Text style={{ textAlign: 'center', marginTop: 20 }}>No items yet</Text>
+					) : (
+						filteredData.map(item => (
+							<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
+								<Text style={styles.dataTitle}>{item.title}</Text>
+								<Text style={styles.dataDescription}>{item.info}</Text>
+							</View>
+						))
+					)}
+				</ScrollView>
+			</View>
+		</SafeAreaView>
+	);
+}

app/MainContent.tsx

@@ -0,0 +1,83 @@
+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: Category;
+	onToggleMenu: () => void;
+	data: Item[];
+};
+
+export default function MainContent({ selected, onToggleMenu, data }: MainContentProps) {
+	return (
+		<View style={styles.mainContent}>
+			<TouchableOpacity style={styles.menuButton} onPress={onToggleMenu}>
+				<Text style={styles.menuButtonText}>☰</Text>
+			</TouchableOpacity>
+
+			<Text style={styles.title}>{categoryTitles[selected]}</Text>
+
+			<ScrollView style={styles.dataContainer}>
+				{data.map(item => (
+					<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>
+						</View>
+					</TouchableOpacity>
+				))}
+			</ScrollView>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	mainContent: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		position: 'relative',
+		backgroundColor: '#f2f2f2',
+	},
+	menuButton: {
+		position: 'absolute',
+		top: 40,
+		left: 16,
+		zIndex: 1,
+		backgroundColor: '#333',
+		borderRadius: 20,
+		padding: 8,
+	},
+	menuButtonText: {
+		color: '#fff',
+		fontSize: 24,
+	},
+	title: {
+		fontSize: 24,
+		fontWeight: 'bold',
+		color: '#333',
+		marginTop: 60,
+		marginBottom: 16,
+	},
+	dataContainer: {
+		width: '90%',
+	},
+	dataItem: {
+		backgroundColor: '#fff',
+		borderRadius: 8,
+		padding: 16,
+		marginBottom: 12,
+		boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+	},
+	dataTitle: {
+		fontSize: 18,
+		fontWeight: 'bold',
+		color: '#222',
+		marginBottom: 4,
+	},
+	dataDescription: {
+		fontSize: 15,
+		color: '#555',
+	},
+});

app/SideMenu.tsx

@@ -0,0 +1,70 @@
+//SideMenu.tsx
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Category } from "../types/Category";
+
+export type MenuItem = {
+	label: string;
+	key: Category;
+};
+
+type SideMenuProps = {
+	menuItems: MenuItem[];
+	selected: Category;
+	onSelect: (key: Category) => void;
+	onLogout?: () => void;
+};
+
+
+export function SideMenu({ menuItems, selected, onSelect, onLogout }: SideMenuProps) {
+	return (
+		<View style={styles.sideMenu}>
+			{menuItems.map(item => (
+				<TouchableOpacity
+					key={item.key}
+					style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
+					onPress={() => onSelect(item.key)}>
+					<Text style={styles.menuText}>{item.label}</Text>
+				</TouchableOpacity>
+			))}
+
+			{onLogout && (
+				<TouchableOpacity
+					style={[styles.menuItem, styles.logoutButton]}
+					onPress={onLogout}>
+					<Text style={[styles.menuText, { color: '#fff' }]}>Logout</Text>
+				</TouchableOpacity>
+			)}
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	sideMenu: {
+		backgroundColor: '#333',
+		paddingTop: 40,
+		paddingHorizontal: 16,
+	},
+	menuItem: {
+		paddingVertical: 16,
+		borderRadius: 4,
+		marginBottom: 8,
+	},
+	menuItemSelected: {
+		backgroundColor: '#555',
+	},
+	menuText: {
+		color: '#fff',
+		fontSize: 18,
+		textAlign: 'center',
+	},
+	logoutButton: {
+		marginTop: 'auto',
+		backgroundColor: '#111',
+		paddingVertical: 16,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'column',
+	},
+});

app/index.tsx

@@ -1,208 +1,108 @@
+// index.tsx
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 import React, { useEffect, useState } from 'react';
-import { Button, Linking, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { STORAGE_KEY, useNotificationListener } from '../hooks/useNotificationListener';
-import { usePushNotifications } from '../hooks/usePushNotifications';
-import { version as appVersion } from '../package.json';
-import { styles } from '../styles/styles';
-import { categories, Category, categoryTitles } from '../types/Category';
-import { Item } from "../types/Item";
 
-const Drawer = createDrawerNavigator();
+import { useNotificationListener } from '../hooks/useNotificationListener';
-const API_KEY_STORAGE = 'API_KEY';
+import { usePushNotifications } from '../hooks/usePushNotifications';
+import { Category } from '../types/Category';
+import { Item } from '../types/Item';
+import { CustomDrawerContent } from './CustomDrawerContent';
+import HomeScreen from './HomeScreen';
+
+const STORAGE_KEY = 'notifications';
+const API_KEY_STORAGE = 'api_key';
 const API_URL = 'https://notifier.gansejunge.com';
 
-type ApiKeyScreenProps = {
+const Drawer = createDrawerNavigator();
-	onApiKeySaved: (key: string) => void;
-};
 
 
-function ApiKeyScreen({ onApiKeySaved }: ApiKeyScreenProps) {
-	const [apiKey, setApiKey] = useState('');
 
-	const saveApiKey = async () => {
-		if (apiKey.trim()) {
-			await AsyncStorage.setItem(API_KEY_STORAGE, apiKey);
-			onApiKeySaved(apiKey);
-		}
-	};
-
-	return (
-		<View style={styles.centered}>
-			<Text style={styles.label}>Enter your API Key:</Text>
-			<TextInput
-				style={[styles.input, { color: '#000', backgroundColor: '#fff' }]}
-				value={apiKey}
-				onChangeText={setApiKey}
-				secureTextEntry
-				placeholder="API Key"
-				placeholderTextColor="#030303ff"
-			/>
-			<Button title="Save" onPress={saveApiKey} />
-		</View>
-	);
-}
-
-function CategoryScreen({
-	category,
-	notifications,
-	registered,
-	registrationError,
-}: {
-	category: Category;
-	notifications: Item[];
-	registered: boolean;
-	registrationError: string | null;
-}) {
-	const [showBanner, setShowBanner] = useState(true);
-
-	// Auto-hide banner after 4 seconds whenever it changes
-	useEffect(() => {
-		if (!registered && !registrationError) return; // nothing to show
-		setShowBanner(true); // reset visibility
-		const timer = setTimeout(() => setShowBanner(false), 4000);
-		return () => clearTimeout(timer);
-	}, [registered, registrationError]);
-
-	const filtered = category === "home"
-		? notifications
-		: notifications.filter(n => n.category === category);
-
-	const sorted = filtered.sort((a, b) => b.timestamp - a.timestamp);
-
-	const openLink = (url: string) => {
-		if (url && url !== "#") Linking.openURL(url).catch(console.error);
-	};
-
-	return (
-		<ScrollView contentContainerStyle={{ padding: 16 }}>
-			{/* Banner */}
-			{showBanner && registrationError && (
-				<View style={{ padding: 8, backgroundColor: "#F44336", borderRadius: 4, marginBottom: 12 }}>
-					<Text style={{ color: "#fff", textAlign: "center", fontSize: 12 }}>
-						{registrationError}
-					</Text>
-				</View>
-			)}
-
-			<Text style={{ fontSize: 30, marginBottom: 16, color: "#000", textAlign: "center" }}>
-				{categoryTitles[category]}
-			</Text>
-
-			{sorted.length === 0 ? (
-				<View style={{ backgroundColor: "#444", padding: 16, borderRadius: 10, alignItems: "center", justifyContent: "center", marginTop: 20 }}>
-					<Text style={{ color: "#ccc", fontSize: 14 }}>No notifications yet.</Text>
-				</View>
-			) : (
-				sorted.map((item, index) => (
-					<View key={index} style={{ backgroundColor: "#444", padding: 12, borderRadius: 10, marginBottom: 12 }}>
-						<Text style={{ color: "#fff", fontWeight: "bold", marginBottom: 4 }}>{item.title}</Text>
-						<Text style={{ color: "#ccc", fontSize: 12, marginBottom: 4 }}>{new Date(item.timestamp).toLocaleString()}</Text>
-						<Text style={{ color: "#fff", marginBottom: item.link && item.link !== "#" ? 8 : 0 }}>{item.info}</Text>
-						{item.link && item.link !== "#" && (
-							<TouchableOpacity onPress={() => openLink(item.link)}>
-								<Text style={{ color: "#4da6ff", textDecorationLine: "underline" }}>Click here</Text>
-							</TouchableOpacity>
-						)}
-					</View>
-				))
-			)}
-		</ScrollView>
-	);
-}
-
-// Custom Drawer with Logout at bottom
-function CustomDrawerContent({ onLogout, ...props }: any) {
-	return (
-		<View style={{ flex: 1, backgroundColor: '#333' }}>
-			<DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 20 }}>
-				<View style={{ flex: 1, paddingVertical: 10 }}>
-					<DrawerItemList {...props} />
-				</View>
-			</DrawerContentScrollView>
-
-			{/* Logout Button */}
-			<View style={{ padding: 20,paddingBottom: 30, borderTopWidth: 1, borderTopColor: '#444' }}>
-				<TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
-					<Text style={styles.logoutText}>Logout</Text>
-				</TouchableOpacity>
-			</View>
-		</View>
-	);
-}
 
 export default function App() {
-	const [apiKeySaved, setApiKeySaved] = useState<boolean | null>(null);
+	const [data, setData] = useState<Item[]>([]);
+	const [selected, setSelected] = useState<Category>('home');
 	const [apiKey, setApiKey] = useState<string | null>(null);
-	const [notifications, setNotifications] = useState<Item[]>([]);
+	const [tempKey, setTempKey] = useState('');
 
-	useEffect(() => {
+	const pushToken = usePushNotifications({
-		const checkApiKey = async () => {
+		apiKey,
-			const key = await AsyncStorage.getItem(API_KEY_STORAGE);
-			setApiKey(key); 
-			setApiKeySaved(!!key);
-		};
-		checkApiKey();
-	}, []);
-
-	const { expoPushToken, registered, registrationError, unregisterToken } = usePushNotifications({
-		apiKey: apiKey ?? undefined,
 		backendUrl: API_URL,
-		appVersion,
+		appVersion: '1.0.0',
 		locale: 'en-uk',
 	});
 
+	useEffect(() => {
+		(async () => {
+			const storedKey = await AsyncStorage.getItem(API_KEY_STORAGE);
+			if (storedKey) setApiKey(storedKey);
+		})();
+	}, []);
+
+	useEffect(() => {
+		(async () => {
+			try {
+				const stored = await AsyncStorage.getItem(STORAGE_KEY);
+				if (stored) setData(JSON.parse(stored));
+			} catch (err) {
+				console.error('Failed to load stored notifications:', err);
+			}
+		})();
+	}, []);
+
+	useNotificationListener((items: Item[]) => {
+		setData(items);
+	});
+
 	const handleLogout = async () => {
-		if (unregisterToken) await unregisterToken();
 		await AsyncStorage.removeItem(API_KEY_STORAGE);
 		await AsyncStorage.removeItem(STORAGE_KEY);
 		setApiKey(null);
-		setApiKeySaved(false);
+		setData([]);
-		setNotifications([]);
+		setSelected('home');
 	};
 
-	useNotificationListener(setNotifications);
+	if (!apiKey) {
-
+		// Show API key entry screen before Drawer
-	if (apiKeySaved === null) return null;
-
-	if (!apiKeySaved) {
 		return (
-			<ApiKeyScreen
+			<SafeAreaProvider>
-				onApiKeySaved={(key) => {
+				<HomeScreen
-					setApiKey(key);
+					apiKey={apiKey}
-					setApiKeySaved(true);
+					setApiKey={setApiKey}
-				}}
+					tempKey={tempKey}
-			/>
+					setTempKey={setTempKey}
+				/>
+			</SafeAreaProvider>
 		);
 	}
 
 	return (
-			<Drawer.Navigator
+		<SafeAreaProvider>
-				initialRouteName="home"
+				<Drawer.Navigator
-				drawerContent={props => <CustomDrawerContent {...props} onLogout={handleLogout} />}
+					screenOptions={{
-				screenOptions={{
+						drawerType: 'slide',
-					headerStyle: { backgroundColor: '#222' },
+						drawerStyle: { width: 250 },
-					headerTintColor: '#fff',
+						headerShown: false,
-					drawerStyle: { backgroundColor: '#333', width: 240 },
+					}}
-					drawerActiveTintColor: '#fff',
+					drawerContent={() => (
-					drawerInactiveTintColor: '#ccc',
+						<CustomDrawerContent
-					drawerLabelStyle: { textAlign: 'center', fontSize: 16 },
+							selected={selected}
-					drawerItemStyle: { paddingVertical: 5, marginVertical: 2 },
+							setSelected={setSelected}
-				}}
+							handleLogout={handleLogout}
-			>
+						/>
-				{categories.map(c => (
+					)}
-					<Drawer.Screen key={c.key} name={c.key} options={{ title: c.label }}>
+				>
-				{() => (
+					<Drawer.Screen name="Home">
-			<	CategoryScreen 
+						{() => (
-					category={c.key} 
+							<HomeScreen
-					notifications={notifications} 
+								selectedCategory={selected}
-					registered={registered} 
+								onSelectCategory={setSelected}
-					registrationError={registrationError} 
+								data={data}
-		/>
+							/>
-	)}
+						)}
-</Drawer.Screen>
+					</Drawer.Screen>
-				))}
+				</Drawer.Navigator>
-			</Drawer.Navigator>
+		</SafeAreaProvider>
 	);
 }

backup_package.json

@@ -0,0 +1,49 @@
+{
+  "name": "my-drawer-app",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~6.1.2",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-firebase/app": "^23.4.0",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.10",
+    "expo-constants": "~18.0.9",
+    "expo-font": "~14.0.8",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.8",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.8",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.7",
+    "expo-web-browser": "~15.0.7",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

hooks/useNotificationListener.ts

@@ -1,159 +1,53 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Notifications from "expo-notifications";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
-import { Category, categoryKeys } from "../types/Category";
+import { Category, categoryKeys } from "types/Category";
-import { Item } from "../types/Item";
+import { Item } from "types/Item";
 
-export const STORAGE_KEY = "notifications-data";
+const STORAGE_KEY = "notifications-data";
-const MAX_STORED_NOTIFICATIONS = 100;
-const MAX_AGE_DAYS = 60;
-
-// Simple queue to prevent race conditions
-class StorageQueue {
-	private queue: Array<() => Promise<void>> = [];
-	private processing = false;
-
-	async add(task: () => Promise<void>) {
-		this.queue.push(task);
-		if (!this.processing) {
-			await this.process();
-		}
-	}
-
-	private async process() {
-		this.processing = true;
-		while (this.queue.length > 0) {
-			const task = this.queue.shift();
-			if (task) {
-				try {
-					await task();
-				} catch (e) {
-					console.error("Storage task failed:", e);
-				}
-			}
-		}
-		this.processing = false;
-	}
-}
-
-const storageQueue = new StorageQueue();
 
+// Hook: listens for incoming notifications → Item + persists them
 export function useNotificationListener(onItems: (items: Item[]) => void) {
-	const onItemsRef = useRef(onItems);
-	const mountedRef = useRef(true);
-	
-	// Keep ref updated but don't trigger effect re-runs
 	useEffect(() => {
-		onItemsRef.current = onItems;
+		// Load saved notifications on mount
-	}, [onItems]);
-
-	useEffect(() => {
-		mountedRef.current = true;
-
 		(async () => {
 			try {
 				const saved = await AsyncStorage.getItem(STORAGE_KEY);
-				let existing: Item[] = saved ? JSON.parse(saved) : [];
+				if (saved) {
-
+					const parsed: Item[] = JSON.parse(saved);
-				// Parse timestamp correctly
+					// sort newest first
-				existing = existing.map((i) => ({
+					onItems(parsed.sort((a, b) => b.timestamp - a.timestamp));
-					...i,
-					timestamp: Number(i.timestamp),
-				}));
-
-				// Load delivered notifications from the system
-				const delivered = await Notifications.getPresentedNotificationsAsync?.();
-				const deliveredItems: Item[] = delivered
-					?.map(mapNotificationToItem)
-					.filter((i): i is Item => i !== null) ?? [];
-
-				// Combine, deduplicate, and clean
-				const combined = deduplicateItems([...deliveredItems, ...existing]);
-				const cleaned = cleanOldItems(combined);
-
-				await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(cleaned));
-				
-				if (mountedRef.current) {
-					onItemsRef.current(cleaned);
 				}
 			} catch (e) {
-				console.error("Failed to load notifications:", e);
+				console.error("Failed to load notifications from storage:", e);
 			}
 		})();
 
+		// Listen for notification received while app is in foreground
 		const receivedSub = Notifications.addNotificationReceivedListener(async (notification) => {
 			const item = mapNotificationToItem(notification);
-			if (item && mountedRef.current) {
+			if (item) {
-				await addItem(item, (items) => {
+				await addItem(item, onItems);
-					if (mountedRef.current) {
-						onItemsRef.current(items);
-					}
-				});
 			}
 		});
 
+		// Listen for when user taps a notification
 		const responseSub = Notifications.addNotificationResponseReceivedListener(async (response) => {
 			const item = mapNotificationToItem(response.notification);
-			if (item && mountedRef.current) {
+			if (item) {
-				await addItem(item, (items) => {
+				await addItem(item, onItems);
-					if (mountedRef.current) {
-						onItemsRef.current(items);
-					}
-				});
 			}
 		});
 
+		// Cleanup on unmount
 		return () => {
-			mountedRef.current = false;
 			receivedSub.remove();
 			responseSub.remove();
 		};
-	}, []); // Empty deps - only run once
+	}, [onItems]);
-}
-
-function normalizeTimestamp(timestamp: any): number {
-	const num = Number(timestamp);
-
-	if (!num || isNaN(num)) {
-		return Date.now();
-	}
-
-	// If timestamp appears to be in seconds, convert to milliseconds
-	if (num < 1000000000000) {
-		return num * 1000;
-	}
-
-	return num;
-}
-
-function generateItemId(item: Item): string {
-	// Create a unique ID based on timestamp, title, and info
-	return `${item.timestamp}-${item.title}-${item.info}`.substring(0, 100);
-}
-
-function deduplicateItems(items: Item[]): Item[] {
-	const seen = new Set<string>();
-	const unique: Item[] = [];
-
-	for (const item of items) {
-		const id = generateItemId(item);
-		if (!seen.has(id)) {
-			seen.add(id);
-			unique.push(item);
-		}
-	}
-
-	return unique.sort((a, b) => b.timestamp - a.timestamp);
-}
-
-function cleanOldItems(items: Item[]): Item[] {
-	const maxAge = Date.now() - (MAX_AGE_DAYS * 24 * 60 * 60 * 1000);
-	
-	return items
-		.filter(item => item.timestamp > maxAge)
-		.slice(0, MAX_STORED_NOTIFICATIONS);
 }
 
+// Convert Expo notification → Item
 export function mapNotificationToItem(notification: Notifications.Notification): Item | null {
 	try {
 		const content = notification.request.content;
@@ -164,12 +58,8 @@ export function mapNotificationToItem(notification: Notifications.Notification):
 			? (rawCategory as Category)
 			: "utility";
 
-		const timestamp = data.timestamp
-			? normalizeTimestamp(data.timestamp)
-			: Date.now();
-
 		return {
-			timestamp,
+			timestamp: data.timestamp ? Number(data.timestamp) : Date.now(),
 			category,
 			title: content.title ?? "No title",
 			info: content.body ?? "No description",
@@ -181,27 +71,19 @@ export function mapNotificationToItem(notification: Notifications.Notification):
 	}
 }
 
+//export { mapNotificationToItem };
+
+// Save a new item into storage and update state
 async function addItem(item: Item, onItems: (items: Item[]) => void) {
-	await storageQueue.add(async () => {
+	try {
-		try {
+		const saved = await AsyncStorage.getItem(STORAGE_KEY);
-			const saved = await AsyncStorage.getItem(STORAGE_KEY);
+		const prev: Item[] = saved ? JSON.parse(saved) : [];
-			const prev: Item[] = saved ? JSON.parse(saved) : [];
 
-			const combined = [item, ...prev]
+		const updated = [item, ...prev].sort((a, b) => b.timestamp - a.timestamp);
-				.map((i) => ({ ...i, timestamp: Number(i.timestamp) }));
 
-			// Deduplicate and clean
+		await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
-			const deduplicated = deduplicateItems(combined);
+		onItems(updated);
-			const cleaned = cleanOldItems(deduplicated);
+	} catch (e) {
-
+		console.error("Failed to persist notification:", e);
-			await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(cleaned));
+	}
-			onItems(cleaned);
-		} catch (e) {
-			console.error("Failed to persist notification:", e);
-			// Still call onItems with the new item so UI updates even if persistence fails
-			onItems([item]);
-		}
-	});
 }
-
-export default null;

hooks/usePushNotifications.ts

@@ -2,7 +2,6 @@ import * as Device from "expo-device";
 import * as Notifications from "expo-notifications";
 import { useEffect, useState } from "react";
 import { Platform } from "react-native";
-import { version as packageVersion } from '../package.json';
 
 type RegisterTokenParams = {
 	apiKey?: string | null;
@@ -15,104 +14,46 @@ type RegisterTokenParams = {
 export function usePushNotifications({
 	apiKey,
 	backendUrl,
-	appVersion = packageVersion,
+	appVersion = "1.0.0",
 	locale,
 	topics
 }: RegisterTokenParams & { apiKey?: string | null }) {
 	const [expoPushToken, setExpoPushToken] = useState<string | null>(null);
-	const [registered, setRegistered] = useState(false);
-	const [registrationError, setRegistrationError] = useState<string | null>(null);
 
 	useEffect(() => {
-		if (!apiKey) {
+		if (!apiKey) return;
-			console.log("No API key available, skipping registration");
-			return;
-		}
-
-		const registerTokenWithBackend = async (token: string) => {
-			console.log("Attempting to register token with backend...");
-			const res = await fetch(`${backendUrl}/register-token`, {
-				method: "POST",
-				headers: { 
-					"Content-Type": "application/json", 
-					"X-API-Key": apiKey 
-				},
-				body: JSON.stringify({ 
-					token, 
-					platform: Platform.OS, 
-					app_ver: appVersion, 
-					locale,
-					topics 
-				})
-			});
-
-			if (!res.ok) {
-				const errorText = await res.text();
-				console.error("Backend registration failed:", res.status, errorText);
-				throw new Error(`Failed to register token: ${res.status}`);
-			}
-			
-			console.log("Push token registered with backend ✅");
-		};
-
 		(async () => {
-			try {
+			const token = await registerForPushNotificationsAsync();
-				const token = await registerForPushNotificationsAsync();
+			if (token) {
-				if (token) {
+				setExpoPushToken(token);
-					console.log("Got push token:", token);
+				await registerTokenWithBackend(token);
-					setExpoPushToken(token);
-					
-					await registerTokenWithBackend(token);
-					setRegistered(true);
-					setRegistrationError(null);
-				} else {
-					console.log("No push token received");
-					setRegistrationError("Could not get push token");
-				}
-			} catch (err) {
-				console.error("Registration error:", err);
-				setRegistered(false);
-				setRegistrationError(err instanceof Error ? err.message : "Failed to register push token");
 			}
 		})();
-	}, [apiKey, backendUrl, appVersion, locale, topics]);
+	}, [apiKey]);
-
-	const unregisterToken = async () => {
-		if (!expoPushToken || !apiKey) {
-			console.log("Cannot unregister: missing token or API key");
-			return;
-		}
 
+	const registerTokenWithBackend = async (token: string) => {
 		try {
-			console.log("Unregistering token from backend...");
+			await fetch(`${backendUrl}/register_token`, {
-			const res = await fetch(`${backendUrl}/unregister-token`, {
 				method: "POST",
 				headers: {
 					"Content-Type": "application/json",
-					"X-API-Key": apiKey,
+					"X-API-Key": apiKey ?? "",
 				},
 				body: JSON.stringify({
-					token: expoPushToken,
+					token,
 					platform: Platform.OS,
 					app_ver: appVersion,
 					locale,
 					topics
 				})
 			});
-
+			console.log("Push token registered with backend ✅");
-			if (!res.ok) {
-				throw new Error(`Unregister failed: ${res.status}`);
-			}
-			
-			console.log("Push token unregistered from backend ✅");
-			setExpoPushToken(null);
-			setRegistered(false);
 		} catch (error) {
-			console.error("Failed to unregister token:", error);
+			console.error("Failed to register token with backend:", error);
 		}
 	};
 
-	return { expoPushToken, registered, registrationError, unregisterToken };
+	return expoPushToken;
 }
 
 async function registerForPushNotificationsAsync() {
@@ -149,4 +90,4 @@ async function registerForPushNotificationsAsync() {
 	}
 
 	return token;
-}
+}

package.json

@@ -1,45 +1,34 @@
 {
-  "name": "notifier",
+  "name": "my-drawer-app",
   "main": "expo-router/entry",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android",
+    "reset-project": "node ./scripts/reset-project.js",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web",
     "lint": "expo lint"
   },
   "dependencies": {
-    "@expo/vector-icons": "^15.0.2",
+    "@expo/metro-runtime": "~6.1.2",
-    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.15",
-    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-navigation/drawer": "^7.5.10",
+    "@react-navigation/drawer": "^7.5.0",
-    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
-    "@react-navigation/native": "^7.1.18",
+    "expo": "~54.0.11",
-    "eas-cli": "^16.23.0",
-    "expo": "~54.0.13",
     "expo-constants": "~18.0.9",
-    "expo-device": "^8.0.9",
+    "expo-device": "~8.0.9",
-    "expo-font": "~14.0.9",
-    "expo-haptics": "~15.0.7",
-    "expo-image": "~3.0.9",
     "expo-linking": "~8.0.8",
-    "expo-notifications": "^0.32.12",
+    "expo-notifications": "~0.32.12",
-    "expo-router": "~6.0.11",
+    "expo-router": "~6.0.9",
     "expo-splash-screen": "~31.0.10",
-    "expo-status-bar": "~3.0.8",
-    "expo-symbols": "~1.0.7",
     "expo-system-ui": "~6.0.7",
-    "expo-web-browser": "~15.0.8",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
+    "react-native-screens": "~4.16.0"
-    "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",

setup.sh

@@ -0,0 +1 @@
+npx expo install expo-constants expo-linking react-native-safe-area-context react-native-screens expo-system-ui

styles/HomeScreen.styles.ts

@@ -0,0 +1,88 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		flexDirection: "row",
+		backgroundColor: "#f2f2f2",
+	},
+	sideMenu: {
+		width: 0,
+		backgroundColor: "#333",
+		paddingTop: 40,
+		paddingHorizontal: 0,
+		overflow: "hidden",
+	},
+	sideMenuOpen: {
+		width: 180,
+		paddingHorizontal: 16,
+	},
+	//sideMenuOverlay: {
+	//position: "absolute",
+	//top: 0,
+	//left: 0,
+	//bottom: 0,
+	//width: "70%",
+	//zIndex: 10,
+	//backgroundColor: "#222",
+	//},
+	menuItem: {
+		paddingVertical: 16,
+		paddingHorizontal: 8,
+		borderRadius: 4,
+		marginBottom: 8,
+	},
+	menuItemSelected: {
+		backgroundColor: "#555",
+	},
+	menuText: {
+		color: "#fff",
+		fontSize: 18,
+	},
+	mainContent: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		position: "relative",
+	},
+	menuButton: {
+		position: "absolute",
+		top: 40,
+		left: 16,
+		zIndex: 1,
+		backgroundColor: "#333",
+		borderRadius: 20,
+		padding: 8,
+	},
+	menuButtonText: {
+		color: "#fff",
+		fontSize: 24,
+	},
+	title: {
+		fontSize: 24,
+		fontWeight: "bold",
+		marginTop: 60,
+		color: "#333",
+	},
+	dataContainer: {
+		marginTop: 24,
+		width: "90%",
+	},
+	dataItem: {
+		backgroundColor: '#fff',
+		borderRadius: 8,
+		padding: 16,
+		marginBottom: 12,
+		boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+	},
+	dataTitle: {
+		fontSize: 18,
+		fontWeight: "bold",
+		color: "#222",
+		marginBottom: 4,
+	},
+	dataDescription: {
+		fontSize: 15,
+		color: "#555",
+	},
+});

styles/styles.ts

@@ -1,35 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-	centered: {
-		flex: 1,
-		justifyContent: 'center',
-		alignItems: 'center',
-		padding: 16,
-		backgroundColor: '#fff', // dark background for screens
-	},
-	input: {
-		borderWidth: 1,
-		borderColor: '#555',
-		width: '80%',
-		padding: 8,
-		marginVertical: 16,
-		borderRadius: 8,
-		color: '#fff',
-	},
-	label: {
-		color: '#fff',
-		fontSize: 16,
-	},
-		logoutButton: {
-		backgroundColor: '#444',
-		paddingVertical: 12,
-		borderRadius: 8,
-		alignItems: 'center',
-	},
-	logoutText: {
-		color: '#fff',
-		fontSize: 16,
-		fontWeight: '600',
-	},
-});

tsconfig.json

@@ -5,6 +5,9 @@
     "paths": {
       "@/*": [
         "./*"
+      ],
+      "types/*": [
+        "./types/*"
       ]
     }
   },

types/Category.ts

@@ -1,5 +1,6 @@
 export type Category = "home" | "royal-road" | "podcasts" | "mixtapes" | "utility";
 
+
 const baseCategories = [
 	{ key: "home", label: "Home", title: "Welcome to Home!" },
 	{ key: "royal-road", label: "Royal Road", title: "Royal Road Chapters" },
@@ -8,8 +9,7 @@ const baseCategories = [
 	{ key: "utility", label: "Utility", title: "Utility" },
 ] as const;
 
+
 export const categoryKeys: Category[] = baseCategories.map(c => c.key) as Category[];
 export const categories: { label: string; key: Category }[] = baseCategories.map(c => ({ label: c.label, key: c.key }));
 export const categoryTitles: Record<Category, string> = Object.fromEntries(baseCategories.map(c => [c.key, c.title])) as Record<Category, string>;
-
-export default Category;