v1.0.0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joshua Higgins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -17,24 +17,23 @@ A React Native Expo app that connects to an UpSnap server and provides mobile ac
 
 - Node.js installed
 - Expo CLI installed (`npm install -g expo-cli`)
-- An UpSnap server instance running (e.g., https://wol.f6knight.duckdns.org/)
+- An UpSnap server instance running
 
 ### Installation
 
 1. Install dependencies:
 ```bash
-npm install
+npm i
 ```
 
 2. Start the development server:
 ```bash
-npm start
+npx expo run
 ```
 
 3. Run on your preferred platform:
-   - iOS: Press `i` in the terminal or run `npm run ios`
+   - iOS: Press `i` in the terminal or run `npx expo run:ios`
-   - Android: Press `a` in the terminal or run `npm run android`
+   - Android: Press `a` in the terminal or run `npx expo run:android`
-   - Web: Press `w` in the terminal or run `npm run web`
 
 ## Usage
 
@@ -42,25 +41,15 @@ npm start
 
 1. Open the app
 2. Enter your UpSnap server credentials:
+   - Server Address
    - Username or Email
    - Password
-   - Check "Login as Admin" if you're an admin user
 3. Tap "Login"
 
 ### Device Management
 
 #### Adding a Device
 
-1. Tap the "+ Add" button in the Devices screen
-2. Fill in the required fields:
-   - Device Name (e.g., "My PC")
-   - MAC Address (format: XX:XX:XX:XX:XX:XX)
-   - IP Address
-   - Optional: Netmask, Broadcast Address, SecureOn Password, Port
-3. Tap "Add Device"
-
-#### Scanning for Devices
-
 1. Tap the "Scan" button in the Devices screen
 2. Wait for the network scan to complete
 3. Tap on a discovered device to add it to your list
@@ -68,7 +57,6 @@ npm start
 #### Managing Devices
 
 - **View Devices**: Scroll through the list on the main screen
-- **Device Details**: Tap on a device card to view and edit details
 - **Wake Device**: Tap the green "Wake" button on a device card
 - **Sleep Device**: Tap the orange "Sleep" button
 - **Reboot Device**: Tap the blue "Reboot" button
@@ -80,93 +68,8 @@ npm start
 - 🔴 Red dot: Device is offline
 - 🟠 Orange dot: Status unknown
 
-## Screens
-
-### Login Screen
-- Username/email and password fields
-- Admin login option
-- Persistent authentication using AsyncStorage
-
-### Devices Screen
-- List of all devices with status indicators
-- Quick action buttons for each device
-- Pull-to-refresh for updating status
-- Add device and scan network buttons
-
-### Device Details Screen
-- View all device information
-- Edit device details
-- Delete device option
-
-### Add Device Screen
-- Manual device entry form
-- All required and optional fields
-- Input validation
-
-### Scan Devices Screen
-- Network scanning functionality
-- List of discovered devices
-- Quick add to device list
-
-### Settings Screen
-- User information display
-- Server configuration
-- Logout option
-- Clear data option
-
-## API Integration
-
-The app connects to an UpSnap server via its REST API:
-
-- **Authentication**: `/api/collections/users/auth-with-password` or `/api/collections/_superusers/auth-with-password`
-- **Devices**: `/api/collections/devices/records`
-- **Wake**: `/api/upsnap/wake/:id`
-- **Sleep**: `/api/collections/upsnap/sleep/:id`
-- **Reboot**: `/api/upsnap/reboot/:id`
-- **Shutdown**: `/api/upsnap/shutdown/:id`
-- **Scan**: `/api/upsnap/scan`
-
-## Project Structure
-
-```
-src/
-├── components/       # Reusable components
-├── context/          # React context providers (AuthContext)
-├── navigation/       # Navigation setup
-├── screens/          # All app screens
-│   ├── LoginScreen.tsx
-│   ├── DeviceListScreen.tsx
-│   ├── DeviceDetailsScreen.tsx
-│   ├── AddDeviceScreen.tsx
-│   ├── ScanDevicesScreen.tsx
-│   └── SettingsScreen.tsx
-├── services/         # API service
-│   └── api.ts
-└── types/            # TypeScript type definitions
-    └── index.ts
-```
-
-## Tech Stack
-
-- **React Native**: Cross-platform mobile framework
-- **Expo**: Development platform
-- **TypeScript**: Type safety
-- **React Navigation**: Navigation library
-- **AsyncStorage**: Local data persistence
-
-## Server Configuration
-
-The app is pre-configured to connect to:
-- Server URL: `https://wol.f6knight.duckdns.org`
-- API Base: `/api`
-
-To change the server URL, modify the `API_BASE_URL` constant in `src/services/api.ts`.
-
 ## Security Notes
 
-- Authentication tokens are stored securely in AsyncStorage
-- All API calls require authentication
-- Destructive actions (sleep, reboot, shutdown) require confirmation
 - Never expose your UpSnap server to the open web without proper security measures
 
 ## Troubleshooting
@@ -174,7 +77,6 @@ To change the server URL, modify the `API_BASE_URL` constant in `src/services/ap
 ### Login Issues
 
 - Verify your username/email and password are correct
-- Check if you need to log in as admin
 - Ensure your UpSnap server is accessible
 
 ### Network Scan Issues
@@ -192,7 +94,7 @@ To change the server URL, modify the `API_BASE_URL` constant in `src/services/ap
 
 ## License
 
-This project is a mobile companion to UpSnap, which is licensed under the MIT License.
+This project is licensed under the MIT License.
 
 ## Credits
 

app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "remote-wol",
+    "name": "Remote WoL",
     "slug": "remote-wol",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -10,7 +10,8 @@
     "newArchEnabled": true,
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.remote-wol"
+      "icon": "./assets/remotewol-ios.icon",
+      "bundleIdentifier": "com.abunchofknowitalls.remotewol-upsnap"
     },
     "android": {
       "adaptiveIcon": {

app/(tabs)/_layout.tsx

@@ -1,11 +1,14 @@
-import React from "react";
 import { Ionicons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
-import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { useColorScheme } from "../../hooks/use-color-scheme";
 
 export function DevicesHeader() {
 	const router = useRouter();
+	const isDark = useColorScheme() === "dark";
+	const activityColor = isDark ? "#0A84FF" : "#007AFF";
 
 	return (
 		<View style={styles.headerRight}>
@@ -13,7 +16,7 @@ export function DevicesHeader() {
 				onPress={() => router.push("/scan-devices")}
 				style={styles.headerButton}
 			>
-				<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
+				<Ionicons name="add-circle-outline" size={24} color={activityColor} />
 			</TouchableOpacity>
 		</View>
 	);
@@ -23,11 +26,11 @@ export default function TabsLayout() {
 	return (
 		<NativeTabs>
 			<NativeTabs.Trigger name="index">
-				<Icon sf="desktopcomputer"/>
+				<Icon sf="desktopcomputer" />
 				<Label>Devices</Label>
 			</NativeTabs.Trigger>
 			<NativeTabs.Trigger name="settings">
-				<Icon sf="gear"/>
+				<Icon sf="gear" />
 				<Label>Settings</Label>
 			</NativeTabs.Trigger>
 		</NativeTabs>

app/(tabs)/index.tsx

@@ -1,66 +1,111 @@
-import React, { useState, useEffect } from "react";
+import { ContextMenu, Host, Button as SwiftUIButton } from "@expo/ui/swift-ui";
-import {
-	View,
-	Text,
-	FlatList,
-	TouchableOpacity,
-	StyleSheet,
-	RefreshControl,
-	Alert,
-	ActivityIndicator,
-} from "react-native";
-import { ContextMenu, Button as SwiftUIButton, Host } from "@expo/ui/swift-ui";
-import { useRouter, useLocalSearchParams, Stack } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
+import { SymbolView } from "expo-symbols";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+	ActivityIndicator,
+	Alert,
+	AppState,
+	FlatList,
+	RefreshControl,
+	StyleSheet,
+	Text,
+	TouchableOpacity,
+	View,
+} from "react-native";
+import { useColorScheme } from "../../hooks/use-color-scheme";
 import api from "../../src/services/api";
 import { Device } from "../../src/types";
-
+import * as Burnt from "burnt";
-function DevicesHeader() {
-	const router = useRouter();
-
-	return (
-		<View>
-			<TouchableOpacity onPress={() => router.push("/scan-devices")}>
-				<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
-			</TouchableOpacity>
-		</View>
-	);
-}
 
 export default function DeviceListScreen() {
-	const router = useRouter();
+	const colorScheme = useColorScheme() ?? "light";
+	const isDark = colorScheme === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
+	const cardBg = isDark ? "#1c1c1e" : "#fff";
+	const textColor = isDark ? "#ffffff" : "#333333";
+	const subTextColor = isDark ? "#c6c6c8" : "#666666";
+	const activityColor = isDark ? "#0A84FF" : "#007AFF";
+
 	const [devices, setDevices] = useState<Device[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [refreshing, setRefreshing] = useState(false);
 
-	useEffect(() => {
+	const fetchDevices = useCallback(async (showLoading = false) => {
-		loadDevices();
-	}, []);
-
-	const loadDevices = async () => {
 		try {
-			setIsLoading(true);
+			if (showLoading) setIsLoading(true);
 			const data = await api.getDevices();
 			setDevices(data);
 		} catch (error: any) {
+			// For background/periodic refreshes, avoid interruptive alerts
+			if (showLoading) {
 				Alert.alert("Error", error.message || "Failed to load devices");
+			}
 		} finally {
-			setIsLoading(false);
+			if (showLoading) setIsLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchDevices(true);
+	}, [fetchDevices]);
+
+	useEffect(() => {
+		let intervalId: number | null = null;
+
+		const startPolling = () => {
+			if (intervalId !== null) return;
+			intervalId = setInterval(() => {
+				fetchDevices(false);
+			}, 10000) as unknown as number;
+		};
+
+		const stopPolling = () => {
+			if (intervalId !== null) {
+				clearInterval(intervalId);
+				intervalId = null;
 			}
 		};
 
+		// Start polling while app is active; pause when backgrounded
+		startPolling();
+
+		const onAppStateChange = (nextAppState: string) => {
+			if (nextAppState === "active") {
+				startPolling();
+			} else {
+				stopPolling();
+			}
+		};
+
+		const subscription = AppState.addEventListener("change", onAppStateChange);
+
+		return () => {
+			stopPolling();
+			subscription.remove();
+		};
+	}, [fetchDevices]);
+
 	const onRefresh = async () => {
 		setRefreshing(true);
-		await loadDevices();
+		await fetchDevices(false);
 		setRefreshing(false);
 	};
 
 	const handleWake = async (device: Device) => {
 		try {
 			await api.wakeDevice(device.id);
-			Alert.alert("Success", `Wake signal sent to ${device.name}`);
+      Burnt.toast({
+        title: "Success",
+        preset: "done",
+        message: `Waking ${device.name} up.`,
+      });
 		} catch (error: any) {
-			Alert.alert("Error", error.message || "Failed to wake device");
+      Burnt.toast({
+        title: "Error",
+        preset: "error",
+        message: error.message || `Failed to wake up ${device.name}.`,
+      });
 		}
 	};
 
@@ -73,9 +118,17 @@ export default function DeviceListScreen() {
 				onPress: async () => {
 					try {
 						await api.sleepDevice(device.id);
-						Alert.alert("Success", `Sleep signal sent to ${device.name}`);
+						Burnt.toast({
+              title: "Success",
+              preset: "done",
+              message: `Sending ${device.name} to sleep.`,
+            });
 					} catch (error: any) {
-						Alert.alert("Error", error.message || "Failed to sleep device");
+						Burnt.toast({
+              title: "Error",
+              preset: "error",
+              message: error.message || `Failed to send ${device.name} to sleep.`,
+            });
 					}
 				},
 			},
@@ -91,9 +144,17 @@ export default function DeviceListScreen() {
 				onPress: async () => {
 					try {
 						await api.rebootDevice(device.id);
-						Alert.alert("Success", `Reboot signal sent to ${device.name}`);
+						Burnt.toast({
+              title: "Success",
+              preset: "done",
+              message: `Rebooting ${device.name}.`,
+            });
 					} catch (error: any) {
-						Alert.alert("Error", error.message || "Failed to reboot device");
+						Burnt.toast({
+              title: "Error",
+              preset: "error",
+              message: error.message || `Failed to reboot ${device.name}`,
+            });
 					}
 				},
 			},
@@ -112,12 +173,17 @@ export default function DeviceListScreen() {
 					onPress: async () => {
 						try {
 							await api.shutdownDevice(device.id);
-							Alert.alert("Success", `Shutdown signal sent to ${device.name}`);
+              Burnt.toast({
+                title: "Success",
+                preset: "done",
+                message: `Shutting down ${device.name}.`,
+              });
 						} catch (error: any) {
-							Alert.alert(
+              Burnt.toast({
-								"Error",
+                title: "Error",
-								error.message || "Failed to shutdown device"
+                preset: "error",
-							);
+                message: error.message || `Failed to shut down ${device.name}.`,
+              });
 						}
 					},
 				},
@@ -127,16 +193,31 @@ export default function DeviceListScreen() {
 
 	const handleDelete = (device: Device) => {
 		Alert.alert("Delete Device", `Delete "${device.name}"?`, [
+			{
+				text: "Cancel",
+				style: "cancel",
+				onPress: () => {
+					// Close alert
+				},
+			},
 			{
 				text: "Delete",
 				style: "destructive",
 				onPress: async () => {
 					try {
 						await api.deleteDevice(device.id);
-						Alert.alert("Success", "Device deleted successfully");
+            Burnt.toast({
-						loadDevices();
+              title: "Success",
+              preset: "done",
+              message: `Deleted ${device.name} successfully.`,
+            });
+						fetchDevices(false);
 					} catch (error: any) {
-						Alert.alert("Error", error.message || "Failed to delete device");
+            Burnt.toast({
+              title: "Error",
+              preset: "error",
+              message: error.message || `Failed to delete ${device.name}.`,
+            });
 					}
 				},
 			},
@@ -154,6 +235,42 @@ export default function DeviceListScreen() {
 		}
 	};
 
+	const ActionIcon = ({
+		name,
+		symbolName,
+		color,
+		onPress,
+		fallbackName,
+	}: {
+		name: string;
+		symbolName: string;
+		color: string;
+		onPress: () => void;
+		fallbackName?: string;
+	}) => (
+		<TouchableOpacity
+			style={styles.actionIconContainer}
+			onPress={onPress}
+			accessibilityLabel={name}
+			activeOpacity={0.75}
+		>
+			<SymbolView
+				name={symbolName as any}
+				size={20}
+				tintColor={color}
+				type="monochrome"
+				fallback={
+					<Ionicons
+						name={(fallbackName || "ellipse") as any}
+						size={20}
+						color={color}
+					/>
+				}
+				style={styles.actionIcon}
+			/>
+		</TouchableOpacity>
+	);
+
 	const renderDevice = ({ item }: { item: Device }) => (
 		<Host>
 			<ContextMenu activationMethod="longPress">
@@ -167,51 +284,83 @@ export default function DeviceListScreen() {
 					</SwiftUIButton>
 				</ContextMenu.Items>
 				<ContextMenu.Trigger>
-					<View style={styles.deviceCard}>
+					<View
-						<TouchableOpacity
+						style={[
-							onPress={() => router.push(`/devices/${item.id}`)}
+							styles.deviceCard,
-							activeOpacity={1}
+							{
+								backgroundColor: cardBg,
+								shadowColor: isDark ? "rgba(0,0,0,0.6)" : "#000",
+							},
+						]}
 					>
+						<View>
 							<View style={styles.deviceHeader}>
 								<View style={styles.deviceInfo}>
-									<Text style={styles.deviceName}>{item.name}</Text>
+									<Text style={[styles.deviceName, { color: textColor }]}>
-									<Text style={styles.deviceIP}>{item.ip}</Text>
+										{item.name}
+									</Text>
+									<Text style={[styles.deviceIP, { color: subTextColor }]}>
+										{item.mac}
+									</Text>
 								</View>
+								<SymbolView
+									name="circle.fill"
+									size={18}
+									tintColor={getStatusColor(item.status)}
+									animationSpec={{
+										effect: { type: "pulse" },
+										repeating: true,
+										speed: 1,
+									}}
+									fallback={
 										<View
 											style={[
 												styles.statusDot,
 												{ backgroundColor: getStatusColor(item.status) },
 											]}
 										/>
+									}
+									style={[
+										styles.statusSymbol,
+										{
+											shadowColor: getStatusColor(item.status),
+											shadowOpacity: isDark ? 0.9 : 0.6,
+										},
+									]}
+								/>
 							</View>
 
 							<View style={styles.deviceActions}>
-								<TouchableOpacity
+								<ActionIcon
-									style={[styles.actionButton, styles.wakeButton]}
+									name="Wake"
+									symbolName="bolt.fill"
+									fallbackName="flash"
+									color="#4CAF50"
 									onPress={() => handleWake(item)}
-								>
+								/>
-									<Text style={styles.actionButtonText}>Wake</Text>
+								<ActionIcon
-								</TouchableOpacity>
+									name="Sleep"
-								<TouchableOpacity
+									symbolName="moon.fill"
-									style={[styles.actionButton, styles.sleepButton]}
+									fallbackName="moon"
+									color="#FF9800"
 									onPress={() => handleSleep(item)}
-								>
+								/>
-									<Text style={styles.actionButtonText}>Sleep</Text>
+								<ActionIcon
-								</TouchableOpacity>
+									name="Reboot"
-								<TouchableOpacity
+									symbolName="arrow.clockwise.circle.fill"
-									style={[styles.actionButton, styles.rebootButton]}
+									fallbackName="refresh"
+									color="#2196F3"
 									onPress={() => handleReboot(item)}
-								>
+								/>
-									<Text style={styles.actionButtonText}>Reboot</Text>
+								<ActionIcon
-								</TouchableOpacity>
+									name="Shutdown"
-								<TouchableOpacity
+									symbolName="power.circle.fill"
-									style={[styles.actionButton, styles.shutdownButton]}
+									fallbackName="power"
+									color="#f44336"
 									onPress={() => handleShutdown(item)}
-								>
+								/>
-									<Text style={styles.actionButtonText}>Shutdown</Text>
+							</View>
-								</TouchableOpacity>
 						</View>
-						</TouchableOpacity>
 					</View>
 				</ContextMenu.Trigger>
 			</ContextMenu>
@@ -221,19 +370,13 @@ export default function DeviceListScreen() {
 	if (isLoading) {
 		return (
 			<View style={styles.loadingContainer}>
-				<ActivityIndicator size="large" color="#007AFF" />
+				<ActivityIndicator size="large" color={activityColor} />
 			</View>
 		);
 	}
 
 	return (
-		<View style={styles.container}>
+		<View style={[styles.container, { backgroundColor: bgColor }]}>
-			<Stack.Screen
-				options={{
-					title: "Devices",
-					headerRight: () => <DevicesHeader />,
-				}}
-			/>
 			<FlatList
 				data={devices}
 				renderItem={renderDevice}
@@ -244,7 +387,9 @@ export default function DeviceListScreen() {
 				}
 				ListEmptyComponent={
 					<View style={styles.emptyContainer}>
-						<Text style={styles.emptyText}>No devices found</Text>
+						<Text style={[styles.emptyText, { color: subTextColor }]}>
+							No devices found
+						</Text>
 					</View>
 				}
 			/>
@@ -271,12 +416,13 @@ const styles = StyleSheet.create({
 	},
 	list: {
 		padding: 15,
+		gap: 15,
 	},
 	deviceCard: {
 		backgroundColor: "#fff",
 		borderRadius: 12,
 		padding: 15,
-		marginBottom: 15,
+		paddingRight: 25,
 		shadowColor: "#000",
 		shadowOffset: { width: 0, height: 2 },
 		shadowOpacity: 0.1,
@@ -309,14 +455,27 @@ const styles = StyleSheet.create({
 	},
 	deviceActions: {
 		flexDirection: "row",
-		justifyContent: "space-between",
-		gap: 8,
-	},
-	actionButton: {
-		flex: 1,
-		paddingVertical: 10,
-		borderRadius: 8,
 		alignItems: "center",
+		justifyContent: "flex-start",
+		marginTop: 8,
+		paddingBottom: 6,
+	},
+	actionIconContainer: {
+		padding: 6,
+		marginRight: 12,
+		justifyContent: "center",
+		alignItems: "center",
+		minWidth: 36,
+		minHeight: 36,
+	},
+	actionIcon: {
+		width: 22,
+		height: 22,
+	},
+	actionButtonText: {
+		color: "#fff",
+		fontWeight: "600",
+		fontSize: 12,
 	},
 	wakeButton: {
 		backgroundColor: "#4CAF50",
@@ -330,10 +489,14 @@ const styles = StyleSheet.create({
 	shutdownButton: {
 		backgroundColor: "#f44336",
 	},
-	actionButtonText: {
+	statusSymbol: {
-		color: "#fff",
+		width: 18,
-		fontWeight: "600",
+		height: 18,
-		fontSize: 12,
+		borderRadius: 9,
+		shadowOffset: { width: 0, height: 0 },
+		shadowOpacity: 0.6,
+		shadowRadius: 8,
+		elevation: 6,
 	},
 	emptyContainer: {
 		alignItems: "center",

app/(tabs)/settings.tsx

@@ -1,76 +1,69 @@
-import React from 'react';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import React from "react";
 import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
 	Alert,
-} from 'react-native';
+	ScrollView,
-import { useAuth } from '../../src/context/AuthContext';
+	StyleSheet,
-import AsyncStorage from '@react-native-async-storage/async-storage';
+	Text,
+	TouchableOpacity,
+	View,
+} from "react-native";
+import { useColorScheme } from "../../hooks/use-color-scheme";
+import { useAuth } from "../../src/context/AuthContext";
+import { useRouter } from "expo-router";
 
 export default function SettingsScreen() {
-  const { user, logout } = useAuth();
+	const { user, serverAddress, logout } = useAuth();
+	const router = useRouter();
+	const colorScheme = useColorScheme() ?? "light";
+	const isDark = colorScheme === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
+	const sectionBg = isDark ? "#1c1c1e" : "#fff";
+	const sectionTitleBg = isDark ? "#111111" : "#f9f9f9";
+	const textColor = isDark ? "#fff" : "#333";
+	const subTextColor = isDark ? "#c6c6c8" : "#666";
+	const primary = isDark ? "#0A84FF" : "#007AFF";
+	const destructiveColor = "#f44336";
 
 	const handleLogout = () => {
-    Alert.alert(
+		Alert.alert("Logout", "Are you sure you want to logout?", [
-      'Logout',
+			{ text: "Cancel", style: "cancel" },
-      'Are you sure you want to logout?',
-      [
-        { text: 'Cancel', style: 'cancel' },
 			{
-          text: 'Logout',
+				text: "Logout",
-          style: 'destructive',
+				style: "destructive",
 				onPress: async () => {
+					router.replace("/login");
 					await logout();
 				},
 			},
-      ]
+		]);
-    );
-  };
-
-  const handleClearData = () => {
-    Alert.alert(
-      'Clear Data',
-      'This will clear all stored data. Are you sure?',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Clear',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              await AsyncStorage.clear();
-              Alert.alert('Success', 'All data cleared');
-            } catch (error) {
-              Alert.alert('Error', 'Failed to clear data');
-            }
-          },
-        },
-      ]
-    );
 	};
 
 	const SettingItem = ({
 		label,
 		value,
-    onPress 
+		onPress,
 	}: {
 		label: string;
 		value?: string;
 		onPress?: () => void;
 	}) => (
 		<TouchableOpacity
-      style={styles.settingItem}
+			style={[
+				styles.settingItem,
+				{ borderBottomColor: isDark ? "rgba(255,255,255,0.03)" : "#f0f0f0" },
+			]}
 			onPress={onPress}
 			disabled={!onPress}
 			activeOpacity={onPress ? 0.7 : 1}
 		>
-      <Text style={styles.settingLabel}>{label}</Text>
+			<Text style={[styles.settingLabel, { color: textColor }]}>{label}</Text>
 			<View style={styles.settingValueContainer}>
-        <Text style={styles.settingValue} numberOfLines={1}>
+				<Text
-          {value || 'N/A'}
+					style={[styles.settingValue, { color: subTextColor }]}
+					numberOfLines={1}
+				>
+					{value}
 				</Text>
 			</View>
 		</TouchableOpacity>
@@ -86,62 +79,87 @@ export default function SettingsScreen() {
 		destructive?: boolean;
 	}) => (
 		<TouchableOpacity
-      style={[styles.actionButton, destructive && styles.actionButtonDestructive]}
+			style={[
+				styles.actionButton,
+				{ backgroundColor: destructive ? destructiveColor : primary },
+			]}
 			onPress={onPress}
 		>
-      <Text
+			<Text style={styles.actionButtonText}>{title}</Text>
-        style={[
-          styles.actionButtonText,
-          destructive && styles.actionButtonTextDestructive,
-        ]}
-      >
-        {title}
-      </Text>
 		</TouchableOpacity>
 	);
 
 	return (
-    <ScrollView style={styles.container}>
+		<ScrollView style={[styles.container, { backgroundColor: bgColor }]}>
 			<View style={styles.content}>
-        <View style={styles.section}>
+				<View
-          <Text style={styles.sectionTitle}>User Information</Text>
+					style={[
-          <SettingItem label="Username" value={user?.username || 'N/A'} />
+						styles.section,
-          <SettingItem label="Email" value={user?.email || 'N/A'} />
+						{
-          <SettingItem 
+							backgroundColor: sectionBg,
-            label="User ID" 
+							shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
-            value={user?.id || 'N/A'} 
+						},
-          />
+					]}
+				>
+					<Text
+						style={[
+							styles.sectionTitle,
+							{ color: subTextColor, backgroundColor: sectionTitleBg },
+						]}
+					>
+						User Information
+					</Text>
+					<SettingItem label="Username" value={user?.username || "Admin"} />
+					<SettingItem label="Email" value={user?.email || "N/A"} />
+					<SettingItem label="Server URL" value={serverAddress || "N/A"} />
 				</View>
 
-        <View style={styles.section}>
+				<View
-          <Text style={styles.sectionTitle}>Server</Text>
+					style={[
-          <SettingItem 
+						styles.section,
-            label="Server URL" 
+						{
-            value="https://wol.f6knight.duckdns.org" 
+							backgroundColor: sectionBg,
-          />
+							shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
-          <SettingItem 
+						},
-            label="API Base" 
+					]}
-            value="/api" 
+				>
-          />
+					<Text
-        </View>
+						style={[
-
+							styles.sectionTitle,
-        <View style={styles.section}>
+							{ color: subTextColor, backgroundColor: sectionTitleBg },
-          <Text style={styles.sectionTitle}>App Info</Text>
+						]}
+					>
+						App Info
+					</Text>
 					<SettingItem label="Version" value="1.0.0" />
 					<SettingItem label="Build" value="Expo" />
 				</View>
 
-        <View style={styles.section}>
+				<View
-          <Text style={styles.sectionTitle}>Actions</Text>
+					style={[
+						styles.section,
+						{
+							backgroundColor: sectionBg,
+							shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
+						},
+					]}
+				>
+					<Text
+						style={[
+							styles.sectionTitle,
+							{ color: subTextColor, backgroundColor: sectionTitleBg },
+						]}
+					>
+						Actions
+					</Text>
 					<ActionButton title="Logout" onPress={handleLogout} destructive />
-          <ActionButton title="Clear All Data" onPress={handleClearData} destructive />
 				</View>
 
 				<View style={styles.footer}>
-          <Text style={styles.footerText}>
+					<Text style={[styles.footerText, { color: subTextColor }]}>
 						UpSnap Mobile App
 					</Text>
-          <Text style={styles.footerText}>
+					<Text style={[styles.footerText, { color: subTextColor }]}>
 						Connect to your UpSnap server
 					</Text>
 				</View>
@@ -153,17 +171,17 @@ export default function SettingsScreen() {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-    backgroundColor: '#f5f5f5',
+		backgroundColor: "#f5f5f5",
 	},
 	content: {
 		padding: 20,
 	},
 	section: {
-    backgroundColor: '#fff',
+		backgroundColor: "#fff",
 		borderRadius: 12,
 		marginBottom: 20,
-    overflow: 'hidden',
+		overflow: "hidden",
-    shadowColor: '#000',
+		shadowColor: "#000",
 		shadowOffset: { width: 0, height: 2 },
 		shadowOpacity: 0.1,
 		shadowRadius: 4,
@@ -171,61 +189,63 @@ const styles = StyleSheet.create({
 	},
 	sectionTitle: {
 		fontSize: 14,
-    fontWeight: 'bold',
+		fontWeight: "bold",
-    color: '#666',
+		color: "#666",
 		paddingHorizontal: 15,
 		paddingTop: 15,
 		paddingBottom: 10,
-    backgroundColor: '#f9f9f9',
+		backgroundColor: "#f9f9f9",
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
 	},
 	settingItem: {
-    flexDirection: 'row',
+		flexDirection: "row",
-    justifyContent: 'space-between',
+		justifyContent: "space-between",
-    alignItems: 'center',
+		alignItems: "center",
 		paddingHorizontal: 15,
 		paddingVertical: 15,
 		borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
+		borderBottomColor: "#f0f0f0",
 	},
 	settingLabel: {
 		fontSize: 16,
-    color: '#333',
+		color: "#333",
 		flex: 1,
 	},
 	settingValueContainer: {
 		flex: 1,
-    alignItems: 'flex-end',
+		alignItems: "flex-end",
 	},
 	settingValue: {
 		fontSize: 14,
-    color: '#666',
+		color: "#666",
 		maxWidth: 200,
 	},
 	actionButton: {
-    backgroundColor: '#007AFF',
+		backgroundColor: "#007AFF",
 		margin: 15,
 		padding: 15,
 		borderRadius: 8,
-    alignItems: 'center',
+		alignItems: "center",
 	},
 	actionButtonDestructive: {
-    backgroundColor: '#f44336',
+		backgroundColor: "#f44336",
 	},
 	actionButtonText: {
-    color: '#fff',
+		color: "#fff",
 		fontSize: 16,
-    fontWeight: 'bold',
+		fontWeight: "bold",
 	},
 	actionButtonTextDestructive: {
-    color: '#fff',
+		color: "#fff",
 	},
 	footer: {
-    alignItems: 'center',
+		alignItems: "center",
 		paddingVertical: 30,
 	},
 	footerText: {
 		fontSize: 14,
-    color: '#999',
+		color: "#999",
 		marginBottom: 5,
 	},
 });

app/_layout.tsx

@@ -1,41 +1,77 @@
-import { StatusBar } from "expo-status-bar";
+import { Ionicons } from "@expo/vector-icons";
-import { AuthProvider, useAuth } from "../src/context/AuthContext";
+import { Stack, useRouter, useSegments } from "expo-router";
-import { useEffect } from "react";
+import { TouchableOpacity, Text } from "react-native";
-import { Stack, useRouter } from "expo-router";
+import { useColorScheme } from "../hooks/use-color-scheme";
+import { AuthProvider } from "../src/context/AuthContext";
 
-function RootStack() {
+function DevicesHeader() {
 	const router = useRouter();
-	const { isAuthenticated, isLoading } = useAuth();
+	const isDark = useColorScheme() === "dark";
-
+	const activityColor = isDark ? "#0A84FF" : "#007AFF";
-	useEffect(() => {
-		if (!isLoading) {
-			if (isAuthenticated) {
-				router.replace('/(tabs)');
-			} else {
-				router.replace('/login');
-			}
-		}
-	}, [isAuthenticated, isLoading, router]);
 
 	return (
-		<Stack>
+		<TouchableOpacity
-			{isAuthenticated ? (
+			onPress={() => router.push("/scan-devices")}
-				<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+			style={{ paddingHorizontal: 8 }}
-			) : (
+		>
-				<Stack.Screen name="login" options={{ headerShown: false }} />
+			<Ionicons name="add-circle-outline" size={24} color={activityColor} />
-			)}
+		</TouchableOpacity>
-			<Stack.Screen name="add-device" options={{ headerShown: false }} />
+	);
-			<Stack.Screen name="scan-devices" options={{ headerShown: false }} />
+}
-			<Stack.Screen name="devices/[id]" />
+
-		</Stack>
+function TabsTitle(props: { title: string }) {
+	const segments = useSegments();
+	const last = segments[segments.length - 1];
+	const isDark = useColorScheme() === "dark";
+	const titleColor = isDark ? "#fff" : "#000";
+	const title = last === "settings" ? "Settings" : props.title;
+	return (
+		<Text style={{ color: titleColor, fontSize: 17, fontWeight: "600" }}>
+			{title}
+		</Text>
 	);
 }
 
 export default function RootLayout() {
+	const isDark = useColorScheme() === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#fff";
+	const titleColor = isDark ? "#fff" : "#000";
+
+	const segments = useSegments();
+	const last = segments[segments.length - 1];
+	const isIndex = last === "(tabs)" || last === undefined;
+
 	return (
 		<AuthProvider>
-			<RootStack />
+			<Stack>
-			<StatusBar style="auto" />
+				{/* Root index that performs auth redirect (app/index.tsx) */}
+				<Stack.Screen name="index" options={{ headerShown: false }} />
+				{/* Tabs parent - render tabs with dynamic header */}
+				<Stack.Screen
+					name="(tabs)"
+					options={
+						{
+							headerTitle: () => <TabsTitle title="Devices" />,
+							headerRight: isIndex ? () => <DevicesHeader /> : undefined,
+							headerRightContainerStyle: isIndex
+								? undefined
+								: { width: 0, paddingRight: 0 },
+							headerStyle: { backgroundColor: bgColor },
+							headerTintColor: titleColor,
+						} as any
+					}
+				/>{" "}
+				<Stack.Screen name="login" options={{ headerShown: false }} />
+				<Stack.Screen
+					name="scan-devices"
+					options={{
+						headerShown: true,
+						headerTitle: () => <TabsTitle title="Scan Devices" />,
+						headerStyle: { backgroundColor: bgColor },
+						headerBackButtonDisplayMode: "minimal",
+					}}
+				/>
+			</Stack>
 		</AuthProvider>
 	);
 }

app/add-device.tsx

@@ -1,236 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  Alert,
-  ActivityIndicator,
-} from 'react-native';
-import { useRouter } from 'expo-router';
-import api from '../src/services/api';
-
-export default function AddDeviceScreen() {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  
-  const [formData, setFormData] = useState({
-    name: '',
-    mac: '',
-    ip: '',
-    netmask: '255.255.255.0',
-    broadcast: '',
-    secureOnPassword: '',
-    port: '9',
-  });
-
-   const handleSave = async () => {
-     if (!formData.name || !formData.mac || !formData.ip) {
-       Alert.alert('Error', 'Please fill in all required fields');
-       return;
-     }
-
-     setIsLoading(true);
-     try {
-       await api.createDevice({
-         name: formData.name,
-         mac: formData.mac,
-         ip: formData.ip,
-         netmask: formData.netmask,
-         broadcast: formData.broadcast,
-         secureOnPassword: formData.secureOnPassword,
-         port: parseInt(formData.port) || 9,
-         groups: [],
-         status: 'offline',
-       });
-       Alert.alert('Success', 'Device added successfully');
-       router.back();
-    } catch (error: any) {
-      Alert.alert('Error', error.message || 'Failed to add device');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <ScrollView style={styles.container}>
-      <View style={styles.content}>
-        <Text style={styles.header}>Add New Device</Text>
-        
-        <View style={styles.form}>
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Device Name *</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.name}
-              onChangeText={(text) => setFormData({ ...formData, name: text })}
-              placeholder="My PC"
-              autoCapitalize="words"
-            />
-          </View>
-
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>MAC Address *</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.mac}
-              onChangeText={(text) => setFormData({ ...formData, mac: text })}
-              placeholder="00:11:22:33:44:55"
-              autoCapitalize="characters"
-            />
-            <Text style={styles.hint}>
-              Format: XX:XX:XX:XX:XX:XX
-            </Text>
-          </View>
-
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>IP Address *</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.ip}
-              onChangeText={(text) => setFormData({ ...formData, ip: text })}
-              placeholder="192.168.1.100"
-              keyboardType="numeric"
-            />
-          </View>
-
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Netmask</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.netmask}
-              onChangeText={(text) => setFormData({ ...formData, netmask: text })}
-              placeholder="255.255.255.0"
-              keyboardType="numeric"
-            />
-          </View>
-
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Broadcast Address</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.broadcast}
-              onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
-              placeholder="192.168.1.255"
-              keyboardType="numeric"
-            />
-            <Text style={styles.hint}>
-              Optional: Auto-calculated if left blank
-            </Text>
-          </View>
-
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>SecureOn Password</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.secureOnPassword}
-              onChangeText={(text) => setFormData({ ...formData, secureOnPassword: text })}
-              placeholder="Optional password"
-              secureTextEntry
-            />
-            <Text style={styles.hint}>
-              Optional: For SecureOn enabled NICs
-            </Text>
-          </View>
-
-          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Port</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.port}
-              onChangeText={(text) => setFormData({ ...formData, port: text })}
-              placeholder="9"
-              keyboardType="numeric"
-            />
-            <Text style={styles.hint}>
-              Default: 9 (Standard Wake-on-LAN port)
-            </Text>
-          </View>
-
-          <View style={styles.buttonGroup}>
-            <TouchableOpacity
-              style={[styles.button, styles.cancelButton]}
-              onPress={() => router.back()}
-              disabled={isLoading}
-            >
-              <Text style={styles.buttonText}>Cancel</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.button, styles.saveButton]}
-              onPress={handleSave}
-              disabled={isLoading}
-            >
-              <Text style={styles.buttonText}>
-                {isLoading ? 'Adding...' : 'Add Device'}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    padding: 20,
-  },
-  header: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  form: {
-    gap: 20,
-  },
-  inputGroup: {
-    gap: 8,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#333',
-  },
-  input: {
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16,
-  },
-  hint: {
-    fontSize: 12,
-    color: '#666',
-  },
-  buttonGroup: {
-    flexDirection: 'row',
-    gap: 10,
-    marginTop: 10,
-  },
-  button: {
-    flex: 1,
-    paddingVertical: 15,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  cancelButton: {
-    backgroundColor: '#999',
-  },
-  saveButton: {
-    backgroundColor: '#4CAF50',
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});

app/devices/[id].tsx

@@ -1,350 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  Alert,
-  ActivityIndicator,
-} from 'react-native';
-import { useLocalSearchParams, useRouter } from 'expo-router';
-import api from '../../src/services/api';
-import { Device } from '../../src/types';
-
-export default function DeviceDetailsScreen() {
-  const router = useRouter();
-  const { id: deviceId } = useLocalSearchParams<{ id: string }>();
-  
-  const [device, setDevice] = useState<Device | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  
-  const [formData, setFormData] = useState({
-    name: '',
-    mac: '',
-    ip: '',
-    netmask: '',
-    broadcast: '',
-    secureOnPassword: '',
-    port: '',
-  });
-
-  useEffect(() => {
-    loadDevice();
-  }, [deviceId]);
-
-  const loadDevice = async () => {
-    try {
-      setIsLoading(true);
-      const data = await api.getDevice(deviceId);
-      setDevice(data);
-      setFormData({
-        name: data.name,
-        mac: data.mac,
-        ip: data.ip,
-        netmask: data.netmask || '',
-        broadcast: data.broadcast || '',
-        secureOnPassword: data.secureOnPassword || '',
-        port: String(data.port),
-      });
-    } catch (error: any) {
-      Alert.alert('Error', error.message || 'Failed to load device');
-      router.back();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSave = async () => {
-    if (!formData.name || !formData.mac || !formData.ip) {
-      Alert.alert('Error', 'Please fill in all required fields');
-      return;
-    }
-
-    setIsSaving(true);
-    try {
-      await api.updateDevice(deviceId, {
-        name: formData.name,
-        mac: formData.mac,
-        ip: formData.ip,
-        netmask: formData.netmask,
-        broadcast: formData.broadcast,
-        secureOnPassword: formData.secureOnPassword,
-        port: parseInt(formData.port) || 9,
-      });
-      setIsEditing(false);
-      await loadDevice();
-      Alert.alert('Success', 'Device updated successfully');
-    } catch (error: any) {
-      Alert.alert('Error', error.message || 'Failed to update device');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleDelete = () => {
-    Alert.alert(
-      'Delete Device',
-      'Are you sure you want to delete this device?',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Delete',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              await api.deleteDevice(deviceId);
-              Alert.alert('Success', 'Device deleted successfully');
-              router.back();
-            } catch (error: any) {
-              Alert.alert('Error', error.message || 'Failed to delete device');
-            }
-          },
-        },
-      ]
-    );
-  };
-
-  if (isLoading) {
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color="#007AFF" />
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView style={styles.container}>
-      <View style={styles.content}>
-        {isEditing ? (
-          <View style={styles.form}>
-            <Text style={styles.label}>Device Name *</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.name}
-              onChangeText={(text) => setFormData({ ...formData, name: text })}
-              placeholder="Device name"
-            />
-
-            <Text style={styles.label}>MAC Address *</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.mac}
-              onChangeText={(text) => setFormData({ ...formData, mac: text })}
-              placeholder="00:11:22:33:44:55"
-              autoCapitalize="characters"
-            />
-
-            <Text style={styles.label}>IP Address *</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.ip}
-              onChangeText={(text) => setFormData({ ...formData, ip: text })}
-              placeholder="192.168.1.100"
-              keyboardType="numeric"
-            />
-
-            <Text style={styles.label}>Netmask</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.netmask}
-              onChangeText={(text) => setFormData({ ...formData, netmask: text })}
-              placeholder="255.255.255.0"
-              keyboardType="numeric"
-            />
-
-            <Text style={styles.label}>Broadcast Address</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.broadcast}
-              onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
-              placeholder="192.168.1.255"
-              keyboardType="numeric"
-            />
-
-            <Text style={styles.label}>SecureOn Password</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.secureOnPassword}
-              onChangeText={(text) => setFormData({ ...formData, secureOnPassword: text })}
-              placeholder="Optional password"
-            />
-
-            <Text style={styles.label}>Port</Text>
-            <TextInput
-              style={styles.input}
-              value={formData.port}
-              onChangeText={(text) => setFormData({ ...formData, port: text })}
-              placeholder="9"
-              keyboardType="numeric"
-            />
-
-            <View style={styles.buttonGroup}>
-              <TouchableOpacity
-                style={[styles.button, styles.saveButton]}
-                onPress={handleSave}
-                disabled={isSaving}
-              >
-                <Text style={styles.buttonText}>
-                  {isSaving ? 'Saving...' : 'Save'}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.button, styles.cancelButton]}
-                onPress={() => {
-                  setIsEditing(false);
-                  setFormData({
-                    name: device!.name,
-                    mac: device!.mac,
-                    ip: device!.ip,
-                    netmask: device!.netmask || '',
-                    broadcast: device!.broadcast || '',
-                    secureOnPassword: device!.secureOnPassword || '',
-                    port: String(device!.port),
-                  });
-                }}
-              >
-                <Text style={styles.buttonText}>Cancel</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        ) : (
-          <View style={styles.details}>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>Name</Text>
-              <Text style={styles.detailValue}>{device?.name}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>MAC Address</Text>
-              <Text style={styles.detailValue}>{device?.mac}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>IP Address</Text>
-              <Text style={styles.detailValue}>{device?.ip}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>Netmask</Text>
-              <Text style={styles.detailValue}>{device?.netmask || 'N/A'}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>Broadcast</Text>
-              <Text style={styles.detailValue}>{device?.broadcast || 'N/A'}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>Port</Text>
-              <Text style={styles.detailValue}>{device?.port}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>Status</Text>
-              <Text style={styles.detailValue}>{device?.status}</Text>
-            </View>
-            <View style={styles.detailRow}>
-              <Text style={styles.detailLabel}>Groups</Text>
-              <Text style={styles.detailValue}>
-                {device?.groups?.join(', ') || 'None'}
-              </Text>
-            </View>
-
-            <View style={styles.buttonGroup}>
-              <TouchableOpacity
-                style={[styles.button, styles.editButton]}
-                onPress={() => setIsEditing(true)}
-              >
-                <Text style={styles.buttonText}>Edit</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.button, styles.deleteButton]}
-                onPress={handleDelete}
-              >
-                <Text style={styles.buttonText}>Delete</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        )}
-      </View>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    padding: 20,
-  },
-  form: {
-    gap: 15,
-  },
-  details: {
-    gap: 20,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 5,
-  },
-  input: {
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16,
-  },
-  detailRow: {
-    backgroundColor: '#fff',
-    borderRadius: 8,
-    padding: 15,
-    borderWidth: 1,
-    borderColor: '#e0e0e0',
-  },
-  detailLabel: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 4,
-  },
-  detailValue: {
-    fontSize: 16,
-    color: '#333',
-    fontWeight: '500',
-  },
-  buttonGroup: {
-    flexDirection: 'row',
-    gap: 10,
-    marginTop: 20,
-  },
-  button: {
-    flex: 1,
-    paddingVertical: 15,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  saveButton: {
-    backgroundColor: '#4CAF50',
-  },
-  cancelButton: {
-    backgroundColor: '#999',
-  },
-  editButton: {
-    backgroundColor: '#007AFF',
-  },
-  deleteButton: {
-    backgroundColor: '#f44336',
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});

app/index.tsx

@@ -0,0 +1,21 @@
+import { useRouter } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React, { useEffect } from "react";
+import { useAuth } from "../src/context/AuthContext";
+
+export default function IndexRedirect() {
+	const router = useRouter();
+	const { isAuthenticated, isLoading } = useAuth();
+
+	useEffect(() => {
+		if (!isLoading) {
+			if (isAuthenticated) {
+				router.replace("/(tabs)");
+			} else {
+				router.replace("/login");
+			}
+		}
+	}, [isAuthenticated, isLoading, router]);
+
+	return <StatusBar style="auto" />;
+}

app/login.tsx

@@ -1,38 +1,48 @@
-import React, { useState } from 'react';
+import { useRouter } from "expo-router";
+import React, { useState } from "react";
 import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
 	Alert,
 	KeyboardAvoidingView,
 	Platform,
 	ScrollView,
-} from 'react-native';
+	StyleSheet,
-import { useAuth } from '../src/context/AuthContext';
+	Text,
-import { useRouter } from 'expo-router';
+	TextInput,
+	TouchableOpacity,
+	View,
+} from "react-native";
+import { useColorScheme } from "../hooks/use-color-scheme";
+import { useAuth } from "../src/context/AuthContext";
 
 export default function LoginScreen() {
 	const router = useRouter();
-  const [identity, setIdentity] = useState('');
+	const colorScheme = useColorScheme() ?? "light";
-  const [password, setPassword] = useState('');
+	const isDark = colorScheme === "dark";
-  const [isSuperuser, setIsSuperuser] = useState(false);
+	const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
+	const textColor = isDark ? "#fff" : "#333";
+	const subText = isDark ? "#c6c6c8" : "#666";
+	const inputBg = isDark ? "rgba(255,255,255,0.04)" : "#fff";
+	const borderColor = isDark ? "rgba(255,255,255,0.06)" : "#ddd";
+	const primary = isDark ? "#0A84FF" : "#007AFF";
+
+	const { serverAddress: storedServerAddress, login } = useAuth();
+  const [serverAddress, setServerAddress] = useState(storedServerAddress || "");
+	const [identity, setIdentity] = useState("");
+	const [password, setPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
-  const { login } = useAuth();
 
 	const handleLogin = async () => {
-    if (!identity || !password) {
+		if (!serverAddress || !identity || !password) {
-      Alert.alert('Error', 'Please enter both identity and password');
+			Alert.alert("Error", "Please enter server address, identity, and password");
 			return;
 		}
 
 		setIsLoading(true);
 		try {
-      await login(identity, password, isSuperuser);
+			await login(serverAddress, identity, password);
-      router.replace('/');
+			router.replace("/");
 		} catch (error: any) {
-      Alert.alert('Login Failed', error.message || 'An error occurred');
+			Alert.alert("Login Failed", error.message || "An error occurred");
 		} finally {
 			setIsLoading(false);
 		}
@@ -40,52 +50,80 @@ export default function LoginScreen() {
 
 	return (
 		<KeyboardAvoidingView
-      style={styles.container}
+			style={[styles.container, { backgroundColor: bgColor }]}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+			behavior={Platform.OS === "ios" ? "padding" : "height"}
 		>
 			<ScrollView contentContainerStyle={styles.scrollContent}>
 				<View style={styles.header}>
-          <Text style={styles.title}>UpSnap</Text>
+					<Text style={[styles.title, { color: textColor }]}>Remote WoL</Text>
-          <Text style={styles.subtitle}>Wake on LAN Mobile</Text>
+					<Text style={[styles.subtitle, { color: subText }]}>
+						Mobile Frontend for UpSnap
+					</Text>
 				</View>
 
 				<View style={styles.form}>
 					<TextInput
-            style={styles.input}
+						style={[
+							styles.input,
+							{ backgroundColor: inputBg, borderColor, color: textColor },
+						]}
+						placeholder="Server Address"
+						placeholderTextColor={subText}
+						value={serverAddress}
+						onChangeText={setServerAddress}
+						autoCapitalize="none"
+						autoCorrect={false}
+						selectionColor={primary}
+						keyboardAppearance={isDark ? "dark" : "light"}
+					/>
+
+					<TextInput
+						style={[
+							styles.input,
+							{ backgroundColor: inputBg, borderColor, color: textColor },
+						]}
 						placeholder="Username or Email"
+						placeholderTextColor={subText}
 						value={identity}
 						onChangeText={setIdentity}
 						autoCapitalize="none"
 						autoCorrect={false}
+						selectionColor={primary}
+						keyboardAppearance={isDark ? "dark" : "light"}
 					/>
 
 					<TextInput
-            style={styles.input}
+						style={[
+							styles.input,
+							{ backgroundColor: inputBg, borderColor, color: textColor },
+						]}
 						placeholder="Password"
+						placeholderTextColor={subText}
 						value={password}
 						onChangeText={setPassword}
 						secureTextEntry
 						autoCapitalize="none"
+						selectionColor={primary}
+						keyboardAppearance={isDark ? "dark" : "light"}
 					/>
 
 					<TouchableOpacity
-            style={styles.checkboxContainer}
+						style={[
-            onPress={() => setIsSuperuser(!isSuperuser)}
+							styles.button,
-            activeOpacity={0.7}
+							isLoading && styles.buttonDisabled,
-          >
+							{
-            <View style={[styles.checkbox, isSuperuser && styles.checkboxChecked]}>
+								backgroundColor: isLoading
-              {isSuperuser && <Text style={styles.checkmark}>✓</Text>}
+									? isDark
-            </View>
+										? "#333"
-            <Text style={styles.checkboxLabel}>Login as Admin</Text>
+										: "#ccc"
-          </TouchableOpacity>
+									: primary,
-
+							},
-          <TouchableOpacity
+						]}
-            style={[styles.button, isLoading && styles.buttonDisabled]}
 						onPress={handleLogin}
 						disabled={isLoading}
 					>
-            <Text style={styles.buttonText}>
+						<Text style={[styles.buttonText, { color: "#fff" }]}>
-              {isLoading ? 'Logging in...' : 'Login'}
+							{isLoading ? "Logging in..." : "Login"}
 						</Text>
 					</TouchableOpacity>
 				</View>
@@ -97,78 +135,78 @@ export default function LoginScreen() {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-    backgroundColor: '#f5f5f5',
+		backgroundColor: "#f5f5f5",
 	},
 	scrollContent: {
 		flexGrow: 1,
-    justifyContent: 'center',
+		justifyContent: "center",
 		padding: 20,
 	},
 	header: {
-    alignItems: 'center',
+		alignItems: "center",
 		marginBottom: 40,
 	},
 	title: {
 		fontSize: 32,
-    fontWeight: 'bold',
+		fontWeight: "bold",
-    color: '#333',
+		color: "#333",
 		marginBottom: 8,
 	},
 	subtitle: {
 		fontSize: 16,
-    color: '#666',
+		color: "#666",
 	},
 	form: {
-    width: '100%',
+		width: "100%",
 	},
 	input: {
-    backgroundColor: '#fff',
+		backgroundColor: "#fff",
 		borderWidth: 1,
-    borderColor: '#ddd',
+		borderColor: "#ddd",
 		borderRadius: 8,
 		padding: 15,
 		fontSize: 16,
 		marginBottom: 15,
 	},
 	checkboxContainer: {
-    flexDirection: 'row',
+		flexDirection: "row",
-    alignItems: 'center',
+		alignItems: "center",
 		marginBottom: 20,
 	},
 	checkbox: {
 		width: 24,
 		height: 24,
 		borderWidth: 2,
-    borderColor: '#007AFF',
+		borderColor: "#007AFF",
 		borderRadius: 4,
 		marginRight: 10,
-    justifyContent: 'center',
+		justifyContent: "center",
-    alignItems: 'center',
+		alignItems: "center",
 	},
 	checkboxChecked: {
-    backgroundColor: '#007AFF',
+		backgroundColor: "#007AFF",
 	},
 	checkmark: {
-    color: '#fff',
+		color: "#fff",
 		fontSize: 16,
-    fontWeight: 'bold',
+		fontWeight: "bold",
 	},
 	checkboxLabel: {
 		fontSize: 16,
-    color: '#333',
+		color: "#333",
 	},
 	button: {
-    backgroundColor: '#007AFF',
+		backgroundColor: "#007AFF",
 		borderRadius: 8,
 		padding: 15,
-    alignItems: 'center',
+		alignItems: "center",
 	},
 	buttonDisabled: {
-    backgroundColor: '#ccc',
+		backgroundColor: "#ccc",
 	},
 	buttonText: {
-    color: '#fff',
+		color: "#fff",
 		fontSize: 16,
-    fontWeight: 'bold',
+		fontWeight: "bold",
 	},
 });

app/scan-devices.tsx

@@ -1,36 +1,33 @@
-import React, { useState } from 'react';
+import { useRouter } from "expo-router";
+import React, { useState } from "react";
 import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
 	ActivityIndicator,
-  Modal,
+	Alert,
-  TextInput,
+	FlatList,
-  ScrollView,
+	StyleSheet,
-} from 'react-native';
+	Text,
-import { useRouter } from 'expo-router';
+	TouchableOpacity,
-import api from '../src/services/api';
+	View,
-import { NetworkScanResult } from '../src/types';
+} from "react-native";
+import { useColorScheme } from "../hooks/use-color-scheme";
+import api from "../src/services/api";
+import { NetworkScanResult } from "../src/types";
+import { SymbolView } from "expo-symbols";
+import * as Burnt from "burnt";
 
 export default function ScanDevicesScreen() {
 	const router = useRouter();
+	const colorScheme = useColorScheme() ?? "light";
+	const isDark = colorScheme === "dark";
+	const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
+	const cardBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(255, 255, 255, 0.8)";
+	const primary = isDark ? "#0A84FF" : "#007AFF";
+	const primaryPressed = isDark ? "#004BB5" : "#0051CC";
+	const textColor = isDark ? "#fff" : "#333";
+	const subText = isDark ? "#c6c6c8" : "#666";
+
 	const [scanning, setScanning] = useState(false);
 	const [devices, setDevices] = useState<NetworkScanResult[]>([]);
-  const [selectedDevice, setSelectedDevice] = useState<NetworkScanResult | null>(null);
-  const [showAddModal, setShowAddModal] = useState(false);
-  
-  const [formData, setFormData] = useState({
-    name: '',
-    mac: '',
-    ip: '',
-    netmask: '255.255.255.0',
-    broadcast: '',
-    secureOnPassword: '',
-    port: '9',
-  });
 
 	const handleScan = async () => {
 		setScanning(true);
@@ -38,115 +35,140 @@ export default function ScanDevicesScreen() {
 			const results = await api.scanNetwork();
 			setDevices(results);
 		} catch (error: any) {
-      Alert.alert('Error', error.message || 'Failed to scan network');
+			Alert.alert("Error", error.message || "Failed to scan network");
 		} finally {
 			setScanning(false);
 		}
 	};
 
-  const handleAddFromScan = (device: NetworkScanResult) => {
+	const handleAddFromScan = async (device: NetworkScanResult) => {
-    const deviceName = device.name || device.hostname || `Device ${device.ip || device.ip_address}`;
+		const deviceName =
-    const deviceIP = device.ip || device.ip_address || '';
+			device.name ||
-    const deviceMAC = device.mac || device.mac_address || '';
+			device.hostname ||
-    const deviceVendor = device.mac_vendor || '';
+			`Device ${device.ip || device.ip_address}`;
-    
+		const deviceIP = device.ip || device.ip_address || "";
-    setFormData({
+		const deviceMAC = device.mac || device.mac_address || "";
-      name: deviceName,
-      mac: deviceMAC,
-      ip: deviceIP,
-      netmask: '255.255.255.0',
-      broadcast: '',
-      secureOnPassword: '',
-      port: '9',
-    });
-    setSelectedDevice(device);
-    setShowAddModal(true);
-  };
-
-  const handleSaveDevice = async () => {
-    if (!formData.name || !formData.mac || !formData.ip) {
-      Alert.alert('Error', 'Please fill in all required fields');
-      return;
-    }
 
 		try {
 			await api.createDevice({
-        name: formData.name,
+				name: deviceName,
-        mac: formData.mac,
+				mac: deviceMAC,
-        ip: formData.ip,
+				ip: deviceIP,
-        netmask: formData.netmask,
+				netmask: "255.255.255.0",
-        broadcast: formData.broadcast,
+				broadcast: "",
-        secureOnPassword: formData.secureOnPassword,
+				secureOnPassword: "",
-        port: parseInt(formData.port) || 9,
+				port: 9,
 				groups: [],
-        status: 'offline',
+				status: "offline",
+			});
+			Burnt.toast({
+				title: "Success",
+				preset: "done",
+				message: `Added ${deviceName} successfully`,
 			});
-      Alert.alert('Success', 'Device added successfully');
-      setShowAddModal(false);
 			router.back();
 		} catch (error: any) {
-      Alert.alert('Error', error.message || 'Failed to add device');
+			Burnt.toast({
+				title: "Error",
+				preset: "error",
+				message: error.message || "Failed to add device",
+			});
 		}
 	};
 
 	const renderDevice = ({ item }: { item: NetworkScanResult }) => {
-    const displayName = item.name || item.hostname || 'Unknown Device';
+		const displayName = item.name || item.hostname || "Unknown Device";
-    const displayIP = item.ip || item.ip_address || '';
+		const displayIP = item.ip || item.ip_address || "";
-    const displayMAC = item.mac || item.mac_address || '';
+		const displayMAC = item.mac || item.mac_address || "";
-    const displayVendor = item.mac_vendor || '';
+		const displayVendor = item.mac_vendor || "";
 
 		return (
-      <TouchableOpacity
+			<View
-        style={styles.deviceCard}
+				style={[
-        onPress={() => handleAddFromScan(item)}
+					styles.deviceCard,
+					{
+						backgroundColor: cardBg,
+						shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
+					},
+				]}
 			>
 				<View style={styles.deviceInfo}>
-          <Text style={styles.deviceName} numberOfLines={1}>{displayName}</Text>
+					<Text
-          <Text style={styles.deviceDetail}>{displayIP}</Text>
+						style={[styles.deviceName, { color: textColor }]}
-          <Text style={styles.deviceDetail}>{displayMAC}</Text>
+						numberOfLines={1}
-          {displayVendor && displayVendor !== 'Unknown' && (
+					>
-            <Text style={styles.vendorText}>{displayVendor}</Text>
+						{displayName}
+					</Text>
+					<Text style={[styles.deviceDetail, { color: subText }]}>
+						{displayIP}
+					</Text>
+					<Text style={[styles.deviceDetail, { color: subText }]}>
+						{displayMAC}
+					</Text>
+					{displayVendor && displayVendor !== "Unknown" && (
+						<Text style={[styles.vendorText, { color: subText }]}>
+							{displayVendor}
+						</Text>
 					)}
 				</View>
-        <View style={styles.addButton}>
+				<TouchableOpacity onPress={() => handleAddFromScan(item)}>
-          <Text style={styles.addButtonText}>+</Text>
+					<SymbolView
-        </View>
+						name="plus.circle.fill"
+						size={20}
+						type="hierarchical"
+						style={styles.addButton}
+					/>
 				</TouchableOpacity>
+			</View>
 		);
 	};
 
 	return (
-    <View style={styles.container}>
+		<View style={[styles.container, { backgroundColor: bgColor }]}>
 			<View style={styles.header}>
-        <Text style={styles.headerText}>Network Scan</Text>
+				<Text style={[styles.headerText, { color: textColor }]}>
-        <Text style={styles.headerSubtext}>
+					Add Devices
+				</Text>
+				<Text style={[styles.headerSubtext, { color: subText }]}>
 					Discover devices on your local network
 				</Text>
 			</View>
 
 			<TouchableOpacity
-        style={[styles.scanButton, scanning && styles.scanButtonDisabled]}
+				style={[
+					styles.scanButton,
+					{
+						backgroundColor: scanning ? primaryPressed : primary,
+					},
+				]}
 				onPress={handleScan}
 				disabled={scanning}
 			>
 				{scanning ? (
 					<ActivityIndicator color="#fff" />
 				) : (
-          <Text style={styles.scanButtonText}>Scan Network</Text>
+					<Text style={[styles.scanButtonText, { color: "#fff" }]}>
+						Scan Network
+					</Text>
 				)}
 			</TouchableOpacity>
 
-      <Text style={styles.infoText}>
+			<Text style={[styles.infoText, { color: subText }]}>
-        Note: This requires the server to have nmap installed and may take several minutes.
+				Note: This requires the server to have nmap installed and may take
+				several minutes.
 			</Text>
 
 			{devices.length > 0 && (
 				<View style={styles.resultsContainer}>
-          <Text style={styles.resultsHeader}>Discovered Devices ({devices.length})</Text>
+					<Text style={[styles.resultsHeader, { color: textColor }]}>
+						Discovered Devices ({devices.length})
+					</Text>
 					<FlatList
 						data={devices}
 						renderItem={renderDevice}
-            keyExtractor={(item, index) => `${item.ip || item.ip_address || index}-${index}`}
+						keyExtractor={(item, index) =>
+							`${item.ip || item.ip_address || index}-${index}`
+						}
 						contentContainerStyle={styles.list}
 					/>
 				</View>
@@ -154,114 +176,19 @@ export default function ScanDevicesScreen() {
 
 			{devices.length === 0 && !scanning && (
 				<View style={styles.emptyContainer}>
-          <Text style={styles.emptyText}>Tap "Scan Network" to discover devices</Text>
+					<Text style={styles.emptyText}>
-        </View>
+						Tap "Scan Network" to discover devices
-      )}
-
-      <Modal
-        visible={showAddModal}
-        animationType="slide"
-        transparent
-        onRequestClose={() => setShowAddModal(false)}
-      >
-        <View>
-          <View style={styles.modalContent}>
-            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>Add Device</Text>
-              <TouchableOpacity onPress={() => setShowAddModal(false)}>
-                <Text style={styles.closeButton}>✕</Text>
-              </TouchableOpacity>
-            </View>
-
-            <ScrollView style={styles.modalBody}>
-              <View style={styles.formGroup}>
-                <Text style={styles.label}>Device Name *</Text>
-                <TextInput
-                  style={styles.input}
-                  value={formData.name}
-                  onChangeText={(text) => setFormData({ ...formData, name: text })}
-                  placeholder="Device name"
-                />
-                {selectedDevice?.mac_vendor && (
-                  <Text style={styles.hint}>
-                    Vendor: {selectedDevice.mac_vendor}
 					</Text>
+				</View>
 			)}
 		</View>
-
-              <View style={styles.formGroup}>
-                <Text style={styles.label}>MAC Address *</Text>
-                <TextInput
-                  style={styles.input}
-                  value={formData.mac}
-                  onChangeText={(text) => setFormData({ ...formData, mac: text })}
-                  placeholder="00:11:22:33:44:55"
-                  autoCapitalize="characters"
-                />
-              </View>
-
-              <View style={styles.formGroup}>
-                <Text style={styles.label}>IP Address *</Text>
-                <TextInput
-                  style={styles.input}
-                  value={formData.ip}
-                  onChangeText={(text) => setFormData({ ...formData, ip: text })}
-                  placeholder="192.168.1.100"
-                  keyboardType="numeric"
-                />
-              </View>
-
-              <View style={styles.formGroup}>
-                <Text style={styles.label}>Netmask</Text>
-                <TextInput
-                  style={styles.input}
-                  value={formData.netmask}
-                  onChangeText={(text) => setFormData({ ...formData, netmask: text })}
-                  placeholder="255.255.255.0"
-                  keyboardType="numeric"
-                />
-              </View>
-
-              <View style={styles.formGroup}>
-                <Text style={styles.label}>Broadcast Address</Text>
-                <TextInput
-                  style={styles.input}
-                  value={formData.broadcast}
-                  onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
-                  placeholder="192.168.1.255"
-                  keyboardType="numeric"
-                />
-              </View>
-
-              <View style={styles.formGroup}>
-                <Text style={styles.label}>Port</Text>
-                <TextInput
-                  style={styles.input}
-                  value={formData.port}
-                  onChangeText={(text) => setFormData({ ...formData, port: text })}
-                  placeholder="9"
-                  keyboardType="numeric"
-                />
-              </View>
-
-              <TouchableOpacity
-                style={styles.saveButton}
-                onPress={handleSaveDevice}
-              >
-                <Text style={styles.saveButtonText}>Add Device</Text>
-              </TouchableOpacity>
-            </ScrollView>
-          </View>
-        </View>
-      </Modal>
-    </View>
 	);
 }
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-    backgroundColor: '#f5f5f5',
+		backgroundColor: "#f5f5f5",
 		padding: 20,
 	},
 	header: {
@@ -269,33 +196,30 @@ const styles = StyleSheet.create({
 	},
 	headerText: {
 		fontSize: 24,
-    fontWeight: 'bold',
+		fontWeight: "bold",
-    color: '#333',
+		color: "#333",
 		marginBottom: 5,
 	},
 	headerSubtext: {
 		fontSize: 14,
-    color: '#666',
+		color: "#666",
 	},
 	scanButton: {
-    backgroundColor: '#007AFF',
+		backgroundColor: "#007AFF",
 		borderRadius: 12,
 		padding: 16,
-    alignItems: 'center',
+		alignItems: "center",
 		marginBottom: 15,
 	},
-  scanButtonDisabled: {
-    backgroundColor: '#ccc',
-  },
 	scanButtonText: {
-    color: '#fff',
+		color: "#fff",
 		fontSize: 16,
-    fontWeight: 'bold',
+		fontWeight: "bold",
 	},
 	infoText: {
 		fontSize: 12,
-    color: '#999',
+		color: "#999",
-    textAlign: 'center',
+		textAlign: "center",
 		marginBottom: 20,
 	},
 	resultsContainer: {
@@ -303,21 +227,21 @@ const styles = StyleSheet.create({
 	},
 	resultsHeader: {
 		fontSize: 18,
-    fontWeight: 'bold',
+		fontWeight: "bold",
-    color: '#333',
+		color: "#333",
 		marginBottom: 15,
 	},
 	list: {
 		gap: 10,
 	},
 	deviceCard: {
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+		backgroundColor: "rgba(255, 255, 255, 0.8)",
 		borderRadius: 16,
 		padding: 15,
-    flexDirection: 'row',
+		flexDirection: "row",
-    justifyContent: 'space-between',
+		justifyContent: "space-between",
-    alignItems: 'center',
+		alignItems: "center",
-    shadowColor: '#000',
+		shadowColor: "#000",
 		shadowOffset: { width: 0, height: 2 },
 		shadowOpacity: 0.1,
 		shadowRadius: 8,
@@ -328,69 +252,68 @@ const styles = StyleSheet.create({
 	},
 	deviceName: {
 		fontSize: 16,
-    fontWeight: 'bold',
+		fontWeight: "bold",
-    color: '#333',
+		color: "#333",
 		marginBottom: 4,
 	},
 	deviceDetail: {
 		fontSize: 14,
-    color: '#666',
+		color: "#666",
 		marginBottom: 2,
 	},
 	vendorText: {
 		fontSize: 12,
-    color: '#999',
+		color: "#999",
-    fontStyle: 'italic',
+		fontStyle: "italic",
 	},
 	addButton: {
 		width: 44,
 		height: 44,
-    backgroundColor: 'rgba(76, 175, 80, 0.9)',
 		borderRadius: 22,
-    justifyContent: 'center',
+		justifyContent: "center",
-    alignItems: 'center',
+		alignItems: "center",
 	},
 	addButtonText: {
-    color: '#fff',
+		color: "#fff",
 		fontSize: 24,
-    fontWeight: 'bold',
+		fontWeight: "bold",
 	},
 	emptyContainer: {
 		flex: 1,
-    justifyContent: 'center',
+		justifyContent: "center",
-    alignItems: 'center',
+		alignItems: "center",
 	},
 	emptyText: {
 		fontSize: 16,
-    color: '#999',
+		color: "#999",
-    textAlign: 'center',
+		textAlign: "center",
 	},
 	modalBlur: {
 		flex: 1,
-    justifyContent: 'flex-end',
+		justifyContent: "flex-end",
 	},
 	modalContent: {
-    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+		backgroundColor: "rgba(255, 255, 255, 0.95)",
 		borderTopLeftRadius: 24,
 		borderTopRightRadius: 24,
-    maxHeight: '90%',
+		maxHeight: "90%",
 	},
 	modalHeader: {
-    flexDirection: 'row',
+		flexDirection: "row",
-    justifyContent: 'space-between',
+		justifyContent: "space-between",
-    alignItems: 'center',
+		alignItems: "center",
 		padding: 20,
 		borderBottomWidth: 1,
-    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+		borderBottomColor: "rgba(0, 0, 0, 0.1)",
 	},
 	modalTitle: {
 		fontSize: 20,
-    fontWeight: 'bold',
+		fontWeight: "bold",
-    color: '#333',
+		color: "#333",
 	},
 	closeButton: {
 		fontSize: 24,
-    color: '#999',
+		color: "#999",
 		padding: 8,
 	},
 	modalBody: {
@@ -401,33 +324,33 @@ const styles = StyleSheet.create({
 	},
 	label: {
 		fontSize: 14,
-    fontWeight: '600',
+		fontWeight: "600",
-    color: '#333',
+		color: "#333",
 		marginBottom: 8,
 	},
 	input: {
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+		backgroundColor: "rgba(255, 255, 255, 0.8)",
 		borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
+		borderColor: "rgba(0, 0, 0, 0.1)",
 		borderRadius: 12,
 		padding: 14,
 		fontSize: 16,
 	},
 	hint: {
 		fontSize: 12,
-    color: '#666',
+		color: "#666",
 		marginTop: 4,
 	},
 	saveButton: {
-    backgroundColor: '#4CAF50',
+		backgroundColor: "#4CAF50",
 		borderRadius: 12,
 		padding: 16,
-    alignItems: 'center',
+		alignItems: "center",
 		marginTop: 10,
 	},
 	saveButtonText: {
-    color: '#fff',
+		color: "#fff",
 		fontSize: 16,
-    fontWeight: 'bold',
+		fontWeight: "bold",
 	},
 });

assets/remotewol-ios.icon/Assets/gopher.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2048 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g id="UpSnap-Gopher" serif:id="UpSnap Gopher">
+        <g id="Ear-Right" serif:id="Ear Right">
+            <path d="M1401.45,274.81C1396.87,241.748 1447.37,172.549 1515.54,179.65C1583.72,186.752 1610.7,239.302 1606.92,279.07C1603.13,318.839 1572.36,369.496 1538.27,378.491C1504.18,387.486 1406.02,307.871 1401.45,274.81Z" style="fill:rgb(91,218,253);stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path id="inside" d="M1549.85,279.523C1551.46,279.523 1554.5,297.363 1548.49,302.793C1541.47,309.136 1521.15,328.002 1506.6,329.36C1492.06,330.717 1473.64,326.063 1477.52,304.926C1481.39,283.789 1487.21,285.728 1492.45,298.333C1497.68,310.938 1500.4,318.888 1521.34,307.447C1542.28,296.006 1545.26,279.523 1549.85,279.523Z" style="fill:rgb(52,27,6);"/>
+            <path id="light" d="M1495.59,190.598C1495.59,190.598 1534.02,197.484 1563.45,230.189C1580.12,248.718 1592.34,285.455 1581.29,323.269C1601.8,296.396 1605.58,245.932 1572.58,215.166C1537.87,182.811 1495.59,190.598 1495.59,190.598Z" style="fill:white;"/>
+        </g>
+        <g id="Body">
+            <path id="Body1" serif:id="Body" d="M1000.98,128.31C918.778,132.613 645.437,137.61 454.617,384.651C316.543,563.407 321.646,829.874 328.72,1080.57C336.146,1343.74 383.851,1611.36 448.756,1721.23C516.139,1835.3 639.891,1874.93 715.405,1882.88C898.132,1902.11 1090.28,1905.64 1256.89,1882.29C1421.27,1859.25 1569.62,1809.08 1655.93,1697.16C1730.14,1600.94 1744.39,1534.44 1737.72,1337.36C1733.95,1226.01 1709.25,1146.97 1708.3,1042.03C1707.13,913.89 1695.42,771.346 1671.44,686.981C1622.91,516.253 1582.03,417.067 1455.53,292.053C1327.63,165.657 1143.77,120.836 1000.98,128.31Z" style="fill:rgb(91,218,253);stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path id="Shadow-Left" serif:id="Shadow Left" d="M470.379,382.311C440.443,532.77 430.068,778.992 446.232,1043.27C462.617,1311.16 514.221,1539.3 594.602,1681.22C667.782,1810.42 755.386,1862.61 810.82,1880.58C746.208,1876.03 676.157,1871.13 619.224,1849.23C522.911,1812.19 454.761,1749.61 411.819,1602.84C379.466,1492.27 349.155,1316.68 337.954,1031.37C329.971,828.04 338.349,663.897 389.151,529.67C414.904,461.624 445.775,410.081 470.379,382.311Z" style="fill:rgb(85,188,217);"/>
+            <path id="light1" serif:id="light" d="M1239.35,173.548C1254.03,178.065 1352.25,210.659 1427.26,279.039C1502.28,347.418 1572.39,438.014 1603.26,514.76C1634.13,591.507 1687.98,722.386 1695.08,934.9C1700.49,1073.03 1703.89,1126.86 1711.22,1183.21C1727.67,1302.88 1754.48,1533.55 1686.77,1631.58C1722.74,1504.67 1719.43,1385.45 1713.06,1315.87C1706.45,1243.59 1682.52,1101.85 1679.48,992.303C1676.62,889.553 1674.01,780.123 1631.69,636.498C1586.72,483.89 1545.36,411.986 1443.48,314.948C1355.72,231.363 1281.26,189.134 1239.35,173.548Z" style="fill:white;"/>
+        </g>
+        <g id="Ear-Left" serif:id="Ear Left">
+            <path d="M394.48,301.825C360.449,304.828 311.118,331.53 302.673,381.209C293.239,436.703 308.951,476.012 364.181,509.982C402.196,533.364 470.534,500.074 497.499,456.958C527.62,408.794 502.347,356.364 483.258,336.063C463.996,315.579 435.688,298.189 394.48,301.825Z" style="fill:rgb(91,218,253);stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <g id="light2" serif:id="light" transform="matrix(0.989123,0,0,0.989123,4.25244,5.1511)">
+                <path d="M485.485,351.842C453.671,309.423 415.204,308.511 392.421,311.555C415.61,316.388 453.405,335.856 471.318,363.452C488.248,389.534 493.54,446.21 475.9,468.289C513.292,430.211 505.48,378.503 485.485,351.842Z" style="fill:white;"/>
+            </g>
+            <path d="M389.778,413.156C389.778,413.156 393.246,438.93 410.876,438.225C430.607,437.436 434.462,413.371 439.669,413.9C446.085,414.553 439.669,435.867 432.967,442.321C426.265,448.774 406.16,456.097 392.136,444.058C378.112,432.02 377.987,424.325 380.842,420.23C383.696,416.134 389.778,413.156 389.778,413.156Z" style="fill:rgb(52,27,6);"/>
+        </g>
+        <g id="Foot-Right" serif:id="Foot Right">
+            <path d="M1522.29,1808.16C1522.29,1808.16 1613.92,1816.64 1639.91,1836.4C1662.45,1853.53 1654.79,1890.5 1597.09,1899.97C1539.89,1909.35 1420.01,1868.32 1402.88,1852.99C1438.6,1844.14 1522.29,1808.16 1522.29,1808.16Z" style="fill:rgb(251,248,215);stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path d="M1646.83,1874.14C1646.83,1874.14 1619.17,1869.53 1609.7,1864.12" style="fill:none;stroke:rgb(52,27,6);stroke-width:16px;"/>
+        </g>
+        <g id="Foot-Left" serif:id="Foot Left" transform="matrix(-1,0,0,1,2185.49,67.7977)">
+            <path d="M1525.89,1806.36C1525.89,1806.36 1613.92,1816.64 1639.91,1836.4C1662.45,1853.53 1654.79,1890.5 1597.09,1899.97C1539.89,1909.35 1413.88,1838.75 1396.75,1823.42C1439.68,1820.69 1525.89,1806.36 1525.89,1806.36Z" style="fill:rgb(251,248,215);stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path d="M1638.12,1876.12C1638.12,1876.12 1615.65,1863.29 1603.88,1861.34" style="fill:none;stroke:rgb(52,27,6);stroke-width:16px;"/>
+        </g>
+        <g id="Eye-Left" serif:id="Eye Left">
+            <path id="Eye" d="M975.958,548.171C977.127,451.763 887.298,403.297 828.627,405.764C758.576,408.71 686.528,460.307 687.356,551.959C688.014,624.725 744.546,690.958 832.036,691.336C921.418,691.723 975.184,612.059 975.958,548.171Z" style="fill:white;stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <g id="Eyeball" transform="matrix(1.51613,0,0,1.61404,-594.349,-371.989)">
+                <ellipse cx="905.812" cy="551.323" rx="18.786" ry="17.271" style="fill:rgb(52,27,6);"/>
+            </g>
+        </g>
+        <g id="Eye-Right" serif:id="Eye Right">
+            <path d="M1394.02,365.59C1314.1,365.59 1247.44,418.993 1247.44,498.908C1247.44,578.823 1303.88,642.452 1392.5,642.452C1481.13,642.452 1534.91,567.082 1534.91,498.908C1534.91,430.734 1468.63,365.59 1394.02,365.59Z" style="fill:white;stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <g transform="matrix(0.730769,0,0,0.764706,368.924,106.009)">
+                <ellipse cx="1463.71" cy="510.27" rx="39.389" ry="38.632" style="fill:rgb(52,27,6);"/>
+            </g>
+        </g>
+        <g id="Mouth">
+            <path d="M1066.78,756.748C1066.78,756.748 1064.45,880.743 1080.08,884.531C1095.7,888.318 1204.59,882.164 1205.06,867.014C1205.54,851.864 1193.23,760.966 1188.97,751.024C1184.7,741.082 1066.78,756.748 1066.78,756.748Z" style="fill:white;stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path d="M1129.58,764.596C1129.58,764.596 1134.18,814.236 1135.33,824.783C1137.15,841.447 1140.56,872.268 1141.47,881.661" style="fill:none;stroke:rgb(52,27,6);stroke-width:16.4px;"/>
+            <path d="M1117.48,606.628C1070.06,607.385 1004.88,630.054 986.812,675.275C972.327,711.528 1002.91,762.86 1114.16,764.753C1225.42,766.647 1255.44,719.155 1251.93,684.744C1248.26,648.702 1206.48,605.208 1117.48,606.628Z" style="fill:rgb(251,248,215);stroke:rgb(52,27,6);stroke-width:22px;"/>
+        </g>
+        <g id="Blush">
+            <path d="M750.79,712.097C719.164,712.683 693.22,735.605 693.828,754.517C694.443,773.656 723.255,795.723 757.335,795.481C791.513,795.239 824.963,777.786 821.57,750.638C818.176,723.49 790.295,711.366 750.79,712.097Z" style="fill:rgb(255,186,171);"/>
+            <path d="M1481.81,643.115C1462.85,645.528 1432.36,658.629 1432.17,675.693C1431.95,694.894 1450.43,712.245 1481.42,715.834C1518.27,720.1 1546.69,707.985 1552.01,689.073C1557.26,670.426 1545.41,651.26 1533,646.8C1519.21,641.841 1500.26,640.768 1481.81,643.115Z" style="fill:rgb(255,186,171);"/>
+        </g>
+        <g id="Package">
+            <path id="Fill-brown-darker" serif:id="Fill brown darker" d="M1096.95,810.415L1327.42,890.997L1322.55,1311.24L1092.89,1215.7L1096.95,810.415Z" style="fill:rgb(149,114,64);"/>
+            <path id="Fill-brown" serif:id="Fill brown" d="M1103.93,805.568L1450.38,776.604L1662.72,861.807L1655.5,1279.26L1324.21,1311.55L1328.44,894.04L1103.93,805.568Z" style="fill:rgb(212,163,92);"/>
+            <path id="Package-outline" serif:id="Package outline" d="M1450.77,777.426C1461.09,778.186 1656.68,854.102 1659.98,861.249C1664.64,871.367 1661.41,1272.6 1654.34,1278.25C1649.24,1282.33 1337.46,1313.84 1323.98,1312.77C1312.07,1311.82 1096.57,1220.86 1094.35,1218.38C1091.03,1214.66 1094.37,804.918 1097.87,800.671C1100.83,797.082 1440.32,776.656 1450.77,777.426Z" style="fill:none;stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path id="Line-left" serif:id="Line left" d="M1098.32,811.49L1326.52,891.561L1324.15,1309.24" style="fill:none;stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path id="Line-Top" serif:id="Line Top" d="M1325.51,892.35L1654.6,865.414" style="fill:none;stroke:rgb(52,27,6);stroke-width:22px;"/>
+        </g>
+        <g id="QR">
+            <path d="M1361.64,1072.11L1362.79,1256.53L1535.44,1242.45L1535.9,1053.42L1361.64,1072.11Z" style="fill:white;"/>
+            <g id="QR1" serif:id="QR" transform="matrix(0.172421,-0.0174752,-0.000604188,0.174254,1448.49,1167.64)">
+                <g transform="matrix(1,0,0,1,-531.875,-620.52)">
+                    <clipPath id="_clip1">
+                        <rect x="0" y="0" width="1063.75" height="1241.04"/>
+                    </clipPath>
+                    <g clip-path="url(#_clip1)">
+                        <g id="Ebene-1" serif:id="Ebene 1">
+                            <g transform="matrix(1,0,0,1,1019.43,265.936)">
+                                <path d="M0,709.167C0,735.761 -22.161,753.49 -44.323,753.49L-930.781,753.49C-957.375,753.49 -975.104,731.328 -975.104,709.167L-975.104,-177.291C-975.104,-203.885 -952.943,-221.614 -930.781,-221.614L-44.323,-221.614C-17.729,-221.614 0,-199.453 0,-177.291L0,709.167ZM-13.297,-265.937L-961.807,-265.937C-992.833,-265.937 -1019.43,-239.343 -1019.43,-208.317L-1019.43,913.052C-1019.43,948.511 -992.833,975.104 -961.807,975.104L-17.729,975.104C13.297,975.104 39.891,948.511 39.891,917.485L39.891,-208.317C44.323,-239.343 17.729,-265.937 -13.297,-265.937" style="fill:rgb(85,188,217);fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(5.80179,0.581837,0.0201165,5.74078,-7895.47,-6925.41)">
+                                <use xlink:href="#_Image2" x="1356.41" y="1050.21" width="185px" height="235px"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,244.375,212.173)">
+                                <path d="M0,-50.6L0,0C0,17.25 -14.95,32.2 -32.2,32.2L-82.8,32.2C-101.2,32.2 -115,18.4 -115,0L-115,-50.6C-115,-67.85 -100.05,-82.8 -82.8,-82.8L-32.2,-82.8C-13.8,-82.8 0,-69 0,-50.6M-86.25,55.2L-27.6,55.2C0,55.2 23,32.2 23,4.6L23,-54.05C23,-82.8 0,-105.8 -28.75,-105.8L-87.4,-105.8C-115,-105.8 -138,-82.8 -138,-55.2L-138,3.45C-138,32.2 -115,55.2 -86.25,55.2" style="fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,221.375,201.823)">
+                                <path d="M0,-29.9L0,1.15C0,10.35 -9.2,19.55 -19.55,19.55L-49.45,19.55C-60.95,19.55 -69,11.5 -69,0L-69,-29.9C-69,-40.25 -59.8,-49.45 -49.45,-49.45L-18.4,-49.45C-8.05,-49.45 0,-41.4 0,-29.9" style="fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,934.375,212.173)">
+                                <path d="M0,-50.6L0,0C0,17.25 -14.95,32.2 -32.2,32.2L-82.8,32.2C-101.2,32.2 -115,18.4 -115,0L-115,-50.6C-115,-67.85 -100.05,-82.8 -82.8,-82.8L-32.2,-82.8C-13.8,-82.8 0,-69 0,-50.6M-86.25,55.2L-27.6,55.2C0,55.2 23,32.2 23,4.6L23,-54.05C23,-82.8 0,-105.8 -28.75,-105.8L-87.4,-105.8C-115,-105.8 -138,-82.8 -138,-55.2L-138,3.45C-138,32.2 -115,55.2 -86.25,55.2" style="fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,911.375,201.823)">
+                                <path d="M0,-29.9L0,1.15C0,10.35 -9.2,19.55 -19.55,19.55L-49.45,19.55C-60.95,19.55 -69,11.5 -69,0L-69,-29.9C-69,-40.25 -59.8,-49.45 -49.45,-49.45L-18.4,-49.45C-8.05,-49.45 0,-41.4 0,-29.9" style="fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,244.375,902.173)">
+                                <path d="M0,-50.6L0,0C0,17.25 -14.95,32.2 -32.2,32.2L-82.8,32.2C-101.2,32.2 -115,18.4 -115,0L-115,-50.6C-115,-67.85 -100.05,-82.8 -82.8,-82.8L-32.2,-82.8C-13.8,-82.8 0,-69 0,-50.6M-86.25,55.2L-27.6,55.2C0,55.2 23,32.2 23,4.6L23,-54.05C23,-82.8 0,-105.8 -28.75,-105.8L-87.4,-105.8C-115,-105.8 -138,-82.8 -138,-55.2L-138,3.45C-138,32.2 -115,55.2 -86.25,55.2" style="fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,221.375,891.823)">
+                                <path d="M0,-29.9L0,1.15C0,10.35 -9.2,19.55 -19.55,19.55L-49.45,19.55C-60.95,19.55 -69,11.5 -69,0L-69,-29.9C-69,-40.25 -59.8,-49.45 -49.45,-49.45L-18.4,-49.45C-8.05,-49.45 0,-41.4 0,-29.9" style="fill-rule:nonzero;"/>
+                            </g>
+                            <g transform="matrix(1,0,0,1,195.438,-16.4159)">
+                                <g transform="matrix(170,0,0,170,661.911,1196.17)">
+                                </g>
+                                <text x="6.813px" y="1196.17px" style="font-family:'Calibri-Bold', 'Calibri', sans-serif;font-weight:700;font-size:170px;fill:white;">P<tspan x="85.754px 186.774px 276.755px 369.724px 470.661px 578.986px " y="1196.17px 1196.17px 1196.17px 1196.17px 1196.17px 1196.17px ">ACKAGE</tspan></text>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+        <g id="Arm-Left" serif:id="Arm Left">
+            <path id="Fill" d="M761.018,1038.17C761.018,1038.17 936.004,1096.34 990.604,1106.97C1022.02,1113.09 1062.15,1097.27 1082.65,1105.36C1100.63,1112.45 1114.4,1137.39 1113.65,1155.52C1112.89,1173.64 1098.82,1203.78 1080.96,1216.38C1059.92,1231.21 987.419,1244.55 987.419,1244.55L862.882,1235.54L695.517,1180.31L588.138,1112.37C644.756,1100.34 703.631,1080.21 761.018,1038.17Z" style="fill:rgb(251,248,215);"/>
+            <path id="Outline" d="M758.999,1040.48C758.999,1040.48 914.886,1107.05 990.604,1106.97C1042.1,1106.92 1091.93,1087.28 1104.54,1127.18C1123.74,1187.94 1081.34,1225.27 1040.76,1233.2C965.809,1247.85 873.392,1243.9 783.793,1212.91C694.194,1181.92 643.14,1158.25 591.634,1117.68" style="fill:none;stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path d="M1108.95,1148.56C1108.95,1148.56 1092.52,1162.04 1059.83,1161.48" style="fill:none;stroke:rgb(52,27,6);stroke-width:16px;"/>
+        </g>
+        <g id="Arm-Right" serif:id="Arm Right">
+            <path id="Fill1" serif:id="Fill" d="M1661.76,908.135C1661.76,908.135 1773.2,941.675 1774.64,1028.23C1772.11,1098.92 1728.84,1139.31 1659.95,1160.23C1579.58,1158.11 1599.28,1069.76 1661.49,1039.48C1661.75,1011.85 1661.76,908.135 1661.76,908.135Z" style="fill:rgb(251,248,215);stroke:rgb(52,27,6);stroke-width:22px;"/>
+            <path d="M1615.11,1120.33C1615.11,1120.33 1637.83,1116.73 1654.41,1108.44" style="fill:none;stroke:rgb(52,27,6);stroke-width:16px;"/>
+        </g>
+    </g>
+    <defs>
+        <image id="_Image2" width="185px" height="235px" xlink:href="data:image/png;base64,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 truncated
+    </defs>
+</svg>

assets/remotewol-ios.icon/icon.json

@@ -0,0 +1,37 @@
+{
+  "fill" : {
+    "automatic-gradient" : "extended-srgb:0.00000,0.53333,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "glass" : true,
+          "image-name" : "gopher.svg",
+          "name" : "gopher",
+          "position" : {
+            "scale" : 0.45,
+            "translation-in-points" : [
+              -6.017952794793246,
+              -0.4600234584925147
+            ]
+          }
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

package-lock.json

@@ -14,6 +14,7 @@
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
+        "burnt": "^0.13.0",
         "expo": "~54.0.30",
         "expo-constants": "~18.0.12",
         "expo-font": "~14.0.10",
@@ -4677,6 +4678,40 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "license": "MIT"
     },
+    "node_modules/burnt": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/burnt/-/burnt-0.13.0.tgz",
+      "integrity": "sha512-LjlQa7CLkGWUdz08YUIaGCJ8BLXib31/ztKqowgwqd7UH283A/kmdCj+1PYAQwDQEMPNmvSUfFHrjXbcwZibFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sf-symbols-typescript": "^1.0.0",
+        "sonner": "^2.0.1"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/burnt/node_modules/sf-symbols-typescript": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sf-symbols-typescript/-/sf-symbols-typescript-1.0.0.tgz",
+      "integrity": "sha512-DkS7q3nN68dEMb4E18HFPDAvyrjDZK9YAQQF2QxeFu9gp2xRDXFMF8qLJ1EmQ/qeEGQmop4lmMM1WtYJTIcCMw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/burnt/node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "burnt": "^0.13.0",
     "expo": "~54.0.30",
     "expo-constants": "~18.0.12",
     "expo-font": "~14.0.10",

src/context/AuthContext.tsx

@@ -5,10 +5,11 @@ import { AuthResponse, User } from '../types';
 
 interface AuthContextType {
   user: User | null;
+  serverAddress: string | null;
   token: string | null;
   isAuthenticated: boolean;
   isLoading: boolean;
-  login: (identity: string, password: string, isSuperuser?: boolean) => Promise<void>;
+  login: (serverAddress: string, identity: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
 }
 
@@ -16,6 +17,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
+  const [serverAddress, setServerAddress] = useState<string | null>(null);
   const [token, setToken] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -27,12 +29,18 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     try {
       const storedToken = await AsyncStorage.getItem('auth_token');
       const storedUser = await AsyncStorage.getItem('auth_user');
+      const storedServerAddress = await AsyncStorage.getItem('auth_server_address');
       
       if (storedToken && storedUser) {
         setToken(storedToken);
         api.setToken(storedToken);
         setUser(JSON.parse(storedUser));
       }
+
+      if (storedServerAddress) {
+        setServerAddress(storedServerAddress);
+        api.setAddress(storedServerAddress + '/api');
+      }
     } catch (error) {
       console.error('Failed to load auth', error);
     } finally {
@@ -40,15 +48,17 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-  const login = async (identity: string, password: string, isSuperuser = false) => {
+  const login = async (serverAddress: string, identity: string, password: string) => {
     try {
-      const response: AuthResponse = await api.authenticate(identity, password, isSuperuser);
+      const response: AuthResponse = await api.authenticate(serverAddress, identity, password);
       
       await AsyncStorage.setItem('auth_token', response.token);
       await AsyncStorage.setItem('auth_user', JSON.stringify(response.record));
+      await AsyncStorage.setItem('auth_server_address', serverAddress);
       
       setToken(response.token);
       setUser(response.record);
+      setServerAddress(serverAddress);
     } catch (error) {
       throw error;
     }
@@ -60,8 +70,10 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       await AsyncStorage.removeItem('auth_user');
       
       api.clearToken();
+      api.clearAddress();
       setToken(null);
       setUser(null);
+      setServerAddress(null);
     } catch (error) {
       console.error('Failed to logout', error);
     }
@@ -70,6 +82,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   return (
     <AuthContext.Provider
       value={{
+        serverAddress,
         user,
         token,
         isAuthenticated: !!token && !!user,

src/services/api.ts

@@ -1,9 +1,8 @@
-import { Device, AuthResponse, NetworkScanResult } from '../types';
+import { Device, AuthResponse, NetworkScanResult } from "../types";
-
-const API_BASE_URL = 'https://wol.f6knight.duckdns.org/api';
 
 class UpSnapAPI {
 	private token: string | null = null;
+	private address: string | null = null;
 
 	setToken(token: string) {
 		this.token = token;
@@ -17,32 +16,59 @@ class UpSnapAPI {
 		this.token = null;
 	}
 
+	setAddress(address: string) {
+		this.address = address;
+	}
+
+	getAddress(): string | null {
+		return this.address;
+	}
+
+	clearAddress() {
+		this.address = null;
+	}
+
 	private getHeaders(): HeadersInit {
 		const headers: HeadersInit = {
-      'Content-Type': 'application/json',
+			"Content-Type": "application/json",
 		};
 
 		if (this.token) {
-      headers['Authorization'] = `Bearer ${this.token}`;
+			headers["Authorization"] = `Bearer ${this.token}`;
 		}
 
 		return headers;
 	}
 
-  async authenticate(identity: string, password: string, isSuperuser = false): Promise<AuthResponse> {
+	async authenticate(
-    const endpoint = isSuperuser 
+		serverAddress: string,
-      ? `${API_BASE_URL}/collections/_superusers/auth-with-password`
+		identity: string,
-      : `${API_BASE_URL}/collections/users/auth-with-password`;
+		password: string
+	): Promise<AuthResponse> {
+		this.address = serverAddress + "/api";
 
-    const response = await fetch(endpoint, {
+		const response = await fetch(
-      method: 'POST',
+			`${this.address}/collections/users/auth-with-password`,
+			{
+				method: "POST",
 				headers: this.getHeaders(),
 				body: JSON.stringify({ identity, password }),
-    });
+			}
+		);
+
+		if (!response.ok) {
+			const response = await fetch(
+				`${this.address}/collections/_superusers/auth-with-password`,
+				{
+					method: "POST",
+					headers: this.getHeaders(),
+					body: JSON.stringify({ identity, password }),
+				}
+			);
 
 			if (!response.ok) {
 				const error = await response.json();
-      throw new Error(error.message || 'Authentication failed');
+				throw new Error(error.message || "Authentication failed");
 			}
 
 			const data: AuthResponse = await response.json();
@@ -50,16 +76,21 @@ class UpSnapAPI {
 			return data;
 		}
 
-  async getDevices(page = 1, perPage = 30): Promise<Device[]> {
+		const data: AuthResponse = await response.json();
+		this.token = data.token;
+		return data;
+	}
+
+	async getDevices(page = 1, perPage = 100): Promise<Device[]> {
 		const response = await fetch(
-      `${API_BASE_URL}/collections/devices/records?page=${page}&perPage=${perPage}`,
+			`${this.address}/collections/devices/records?page=${page}&perPage=${perPage}`,
 			{
 				headers: this.getHeaders(),
 			}
 		);
 
 		if (!response.ok) {
-      throw new Error('Failed to fetch devices');
+			throw new Error("Failed to fetch devices");
 		}
 
 		const data = await response.json();
@@ -68,14 +99,14 @@ class UpSnapAPI {
 
 	async getDevice(id: string): Promise<Device> {
 		const response = await fetch(
-      `${API_BASE_URL}/collections/devices/records/${id}`,
+			`${this.address}/collections/devices/records/${id}`,
 			{
 				headers: this.getHeaders(),
 			}
 		);
 
 		if (!response.ok) {
-      throw new Error('Failed to fetch device');
+			throw new Error("Failed to fetch device");
 		}
 
 		return response.json();
@@ -83,9 +114,9 @@ class UpSnapAPI {
 
 	async createDevice(device: Partial<Device>): Promise<Device> {
 		const response = await fetch(
-      `${API_BASE_URL}/collections/devices/records`,
+			`${this.address}/collections/devices/records`,
 			{
-        method: 'POST',
+				method: "POST",
 				headers: this.getHeaders(),
 				body: JSON.stringify(device),
 			}
@@ -93,7 +124,7 @@ class UpSnapAPI {
 
 		if (!response.ok) {
 			const error = await response.json();
-      throw new Error(error.message || 'Failed to create device');
+			throw new Error(error.message || "Failed to create device");
 		}
 
 		return response.json();
@@ -101,9 +132,9 @@ class UpSnapAPI {
 
 	async updateDevice(id: string, device: Partial<Device>): Promise<Device> {
 		const response = await fetch(
-      `${API_BASE_URL}/collections/devices/records/${id}`,
+			`${this.address}/collections/devices/records/${id}`,
 			{
-        method: 'PATCH',
+				method: "PATCH",
 				headers: this.getHeaders(),
 				body: JSON.stringify(device),
 			}
@@ -111,7 +142,7 @@ class UpSnapAPI {
 
 		if (!response.ok) {
 			const error = await response.json();
-      throw new Error(error.message || 'Failed to update device');
+			throw new Error(error.message || "Failed to update device");
 		}
 
 		return response.json();
@@ -119,122 +150,102 @@ class UpSnapAPI {
 
 	async deleteDevice(id: string): Promise<void> {
 		const response = await fetch(
-      `${API_BASE_URL}/collections/devices/records/${id}`,
+			`${this.address}/collections/devices/records/${id}`,
 			{
-        method: 'DELETE',
+				method: "DELETE",
 				headers: this.getHeaders(),
 			}
 		);
 
 		if (!response.ok) {
-      throw new Error('Failed to delete device');
+			throw new Error("Failed to delete device");
 		}
 	}
 
 	async wakeDevice(id: string): Promise<void> {
-    const response = await fetch(
+		const response = await fetch(`${this.address}/upsnap/wake/${id}`, {
-      `${API_BASE_URL}/upsnap/wake/${id}`,
-      {
 			headers: this.getHeaders(),
-      }
+		});
-    );
 
 		if (!response.ok) {
-      throw new Error('Failed to wake device');
+			throw new Error("Failed to wake device");
 		}
 	}
 
 	async wakeGroup(id: string): Promise<void> {
-    const response = await fetch(
+		const response = await fetch(`${this.address}/upsnap/wakegroup/${id}`, {
-      `${API_BASE_URL}/upsnap/wakegroup/${id}`,
-      {
 			headers: this.getHeaders(),
-      }
+		});
-    );
 
 		if (!response.ok) {
-      throw new Error('Failed to wake group');
+			throw new Error("Failed to wake group");
 		}
 	}
 
 	async sleepDevice(id: string): Promise<void> {
-    const response = await fetch(
+		const response = await fetch(`${this.address}/upsnap/sleep/${id}`, {
-      `${API_BASE_URL}/upsnap/sleep/${id}`,
-      {
 			headers: this.getHeaders(),
-      }
+		});
-    );
 
 		if (!response.ok) {
-      throw new Error('Failed to sleep device');
+			throw new Error("Failed to sleep device");
 		}
 	}
 
 	async rebootDevice(id: string): Promise<void> {
-    const response = await fetch(
+		const response = await fetch(`${this.address}/upsnap/reboot/${id}`, {
-      `${API_BASE_URL}/upsnap/reboot/${id}`,
-      {
 			headers: this.getHeaders(),
-      }
+		});
-    );
 
 		if (!response.ok) {
-      throw new Error('Failed to reboot device');
+			throw new Error("Failed to reboot device");
 		}
 	}
 
 	async shutdownDevice(id: string): Promise<void> {
-    const response = await fetch(
+		const response = await fetch(`${this.address}/upsnap/shutdown/${id}`, {
-      `${API_BASE_URL}/upsnap/shutdown/${id}`,
-      {
 			headers: this.getHeaders(),
-      }
+		});
-    );
 
 		if (!response.ok) {
-      throw new Error('Failed to shutdown device');
+			throw new Error("Failed to shutdown device");
 		}
 	}
 
 	async scanNetwork(): Promise<NetworkScanResult[]> {
-    const response = await fetch(
+		const response = await fetch(`${this.address}/upsnap/scan`, {
-      `${API_BASE_URL}/upsnap/scan`,
-      {
 			headers: this.getHeaders(),
-      }
+		});
-    );
 
 		if (!response.ok) {
-      throw new Error('Failed to scan network');
+			throw new Error("Failed to scan network");
 		}
 
 		const data = await response.json();
-    console.log('Raw scan data:', data);
-    
 		if (data.devices && Array.isArray(data.devices)) {
 			return data.devices.map((item: any) => ({
-        name: item.name || item.hostname || 'Unknown',
+				name: item.name || item.hostname || "Unknown",
-        ip: item.ip || item.ip_address || '',
+				ip: item.ip || item.ip_address || "",
-        mac: item.mac || item.mac_address || '',
+				mac: item.mac || item.mac_address || "",
-        mac_vendor: item.mac_vendor || 'Unknown',
+				mac_vendor: item.mac_vendor || "Unknown",
 			}));
 		}
 
 		if (Array.isArray(data)) {
 			return data.map((item: any) => ({
-        name: item.name || item.hostname || 'Unknown',
+				name: item.name || item.hostname || "Unknown",
-        ip: item.ip || item.ip_address || '',
+				ip: item.ip || item.ip_address || "",
-        mac: item.mac || item.mac_address || '',
+				mac: item.mac || item.mac_address || "",
-        mac_vendor: item.mac_vendor || 'Unknown',
+				mac_vendor: item.mac_vendor || "Unknown",
 			}));
 		}
 
 		if (data.items && Array.isArray(data.items)) {
 			return data.items.map((item: any) => ({
-        name: item.name || item.hostname || 'Unknown',
+				name: item.name || item.hostname || "Unknown",
-        ip: item.ip || item.ip_address || '',
+				ip: item.ip || item.ip_address || "",
-        mac: item.mac || item.mac_address || '',
+				mac: item.mac || item.mac_address || "",
-        mac_vendor: item.mac_vendor || 'Unknown',
+				mac_vendor: item.mac_vendor || "Unknown",
 			}));
 		}