feat: complete widget support

app/(tabs)/index.tsx

@@ -1,5 +1,6 @@
 import { ContextMenu, Host, Button as SwiftUIButton } from '@expo/ui/swift-ui';
 import { Ionicons } from '@expo/vector-icons';
+import * as Burnt from 'burnt';
 import { SymbolView } from 'expo-symbols';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
@@ -15,8 +16,8 @@ import {
 } from 'react-native';
 import { useColorScheme } from '../../hooks/use-color-scheme';
 import api from '../../src/services/api';
+import { syncDevicesToWidget } from '../../src/services/widgetSync';
 import { Device } from '../../src/types';
-import * as Burnt from 'burnt';
 
 export default function DeviceListScreen() {
   const colorScheme = useColorScheme() ?? 'light';
@@ -36,6 +37,8 @@ export default function DeviceListScreen() {
       if (showLoading) setIsLoading(true);
       const data = await api.getDevices();
       setDevices(data);
+      // Sync devices to iOS widget
+      syncDevicesToWidget(data);
     } catch (error: any) {
       // For background/periodic refreshes, avoid interruptive alerts
       if (showLoading) {
@@ -272,29 +275,33 @@ export default function DeviceListScreen() {
     </TouchableOpacity>
   );
 
-  const renderDevice = ({ item }: { item: Device }) => (
-    <Host>
-      <ContextMenu activationMethod="longPress">
-        <ContextMenu.Items>
-          <SwiftUIButton
-            systemImage="trash"
-            role="destructive"
-            onPress={() => handleDelete(item)}
-          >
-            Delete Device
-          </SwiftUIButton>
-        </ContextMenu.Items>
-        <ContextMenu.Trigger>
-          <View
-            style={[
-              styles.deviceCard,
-              {
-                backgroundColor: cardBg,
-                shadowColor: isDark ? 'rgba(0,0,0,0.6)' : '#000',
-              },
-            ]}
-          >
-            <View>
+  const renderDevice = ({ item }: { item: Device }) => {
+    const isOnline = item.status?.toLowerCase() === 'online';
+    const isOffline = item.status?.toLowerCase() === 'offline';
+    const hasActions = isOnline || isOffline;
+
+    return (
+      <View
+        style={[
+          styles.deviceCard,
+          {
+            backgroundColor: cardBg,
+            shadowColor: isDark ? 'rgba(0,0,0,0.6)' : '#000',
+          },
+        ]}
+      >
+        <Host>
+          <ContextMenu activationMethod="longPress">
+            <ContextMenu.Items>
+              <SwiftUIButton
+                systemImage="trash"
+                role="destructive"
+                onPress={() => handleDelete(item)}
+              >
+                Delete Device
+              </SwiftUIButton>
+            </ContextMenu.Items>
+            <ContextMenu.Trigger>
               <View style={styles.deviceHeader}>
                 <View style={styles.deviceInfo}>
                   <Text style={[styles.deviceName, { color: textColor }]}>
@@ -330,49 +337,51 @@ export default function DeviceListScreen() {
                   ]}
                 />
               </View>
+            </ContextMenu.Trigger>
+          </ContextMenu>
+        </Host>
 
-              <View style={styles.deviceActions}>
-                {item.status?.toLowerCase() === 'offline' && (
-                  <ActionIcon
-                    name="Wake"
-                    symbolName="bolt.circle.fill"
-                    fallbackName="flash"
-                    color="#4CAF50"
-                    onPress={() => handleWake(item)}
-                  />
-                )}
-                {item.status?.toLowerCase() === 'online' && (
-                  <>
-                    <ActionIcon
-                      name="Sleep"
-                      symbolName="moon.circle.fill"
-                      fallbackName="moon"
-                      color="#FF9800"
-                      onPress={() => handleSleep(item)}
-                    />
-                    <ActionIcon
-                      name="Reboot"
-                      symbolName="arrow.clockwise.circle.fill"
-                      fallbackName="refresh"
-                      color="#2196F3"
-                      onPress={() => handleReboot(item)}
-                    />
-                    <ActionIcon
-                      name="Shutdown"
-                      symbolName="power.circle.fill"
-                      fallbackName="power"
-                      color="#f44336"
-                      onPress={() => handleShutdown(item)}
-                    />
-                  </>
-                )}
-              </View>
-            </View>
+        {hasActions && (
+          <View style={styles.deviceActions}>
+            {isOffline && (
+              <ActionIcon
+                name="Wake"
+                symbolName="bolt.circle.fill"
+                fallbackName="flash"
+                color="#4CAF50"
+                onPress={() => handleWake(item)}
+              />
+            )}
+            {isOnline && (
+              <>
+                <ActionIcon
+                  name="Sleep"
+                  symbolName="moon.circle.fill"
+                  fallbackName="moon"
+                  color="#FF9800"
+                  onPress={() => handleSleep(item)}
+                />
+                <ActionIcon
+                  name="Reboot"
+                  symbolName="arrow.clockwise.circle.fill"
+                  fallbackName="refresh"
+                  color="#2196F3"
+                  onPress={() => handleReboot(item)}
+                />
+                <ActionIcon
+                  name="Shutdown"
+                  symbolName="power.circle.fill"
+                  fallbackName="power"
+                  color="#f44336"
+                  onPress={() => handleShutdown(item)}
+                />
+              </>
+            )}
           </View>
-        </ContextMenu.Trigger>
-      </ContextMenu>
-    </Host>
-  );
+        )}
+      </View>
+    );
+  };
 
   if (isLoading) {
     return (
@@ -389,9 +398,11 @@ export default function DeviceListScreen() {
         renderItem={renderDevice}
         keyExtractor={item => item.id}
         contentContainerStyle={styles.list}
+        contentInsetAdjustmentBehavior="automatic"
         refreshControl={
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         }
+        ListFooterComponent={<View style={{ height: 20 }} />}
         ListEmptyComponent={
           <View style={styles.emptyContainer}>
             <Text style={[styles.emptyText, { color: subTextColor }]}>

app/_layout.tsx

@@ -1,77 +1,82 @@
-import { Ionicons } from "@expo/vector-icons";
-import { Stack, useRouter, useSegments } from "expo-router";
-import { TouchableOpacity, Text } from "react-native";
-import { useColorScheme } from "../hooks/use-color-scheme";
-import { AuthProvider } from "../src/context/AuthContext";
+import { Ionicons } from '@expo/vector-icons';
+import { Stack, useRouter, useSegments } from 'expo-router';
+import { Text, TouchableOpacity } from 'react-native';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { AuthProvider } from '../src/context/AuthContext';
 
 function DevicesHeader() {
-	const router = useRouter();
-	const isDark = useColorScheme() === "dark";
-	const activityColor = isDark ? "#0A84FF" : "#007AFF";
+  const router = useRouter();
+  const isDark = useColorScheme() === 'dark';
+  const activityColor = isDark ? '#0A84FF' : '#007AFF';
 
-	return (
-		<TouchableOpacity
-			onPress={() => router.push("/scan-devices")}
-			style={{ paddingHorizontal: 8 }}
-		>
-			<Ionicons name="add-circle-outline" size={24} color={activityColor} />
-		</TouchableOpacity>
-	);
+  return (
+    <TouchableOpacity
+      onPress={() => router.push('/scan-devices')}
+      style={{ paddingHorizontal: 8 }}
+    >
+      <Ionicons name="add-circle-outline" size={24} color={activityColor} />
+    </TouchableOpacity>
+  );
 }
 
 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>
-	);
+  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 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;
+  const segments = useSegments();
+  const last = segments[segments.length - 1];
+  const isIndex = last === '(tabs)' || last === undefined;
 
-	return (
-		<AuthProvider>
-			<Stack>
-				{/* 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>
-	);
+  return (
+    <AuthProvider>
+      <Stack>
+        {/* 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',
+          }}
+        />
+        {/* Deep link action handler - no header, immediately redirects */}
+        <Stack.Screen
+          name="action/[action]/[deviceId]"
+          options={{ headerShown: false, animation: 'none' }}
+        />
+      </Stack>
+    </AuthProvider>
+  );
 }

app/action/[action]/[deviceId].tsx

@@ -0,0 +1,108 @@
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import * as Burnt from 'burnt';
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import { useEffect, useRef } from 'react';
+import api from '../../../src/services/api';
+
+type DeviceAction = 'wake' | 'sleep' | 'restart' | 'shutdown';
+
+export default function ActionHandler() {
+  const params = useLocalSearchParams<{ action: string; deviceId: string }>();
+  const navigation = useNavigation();
+  const hasExecuted = useRef(false);
+
+  const { action, deviceId } = params;
+
+  useEffect(() => {
+    // Fire action once
+    if (!hasExecuted.current && action && deviceId) {
+      hasExecuted.current = true;
+      executeAction(action as DeviceAction, deviceId);
+    }
+
+    // Reset navigation to tabs - clears entire stack so no back button
+    navigation.dispatch(
+      CommonActions.reset({
+        index: 0,
+        routes: [{ name: '(tabs)' }],
+      })
+    );
+  }, [action, deviceId, navigation]);
+
+  // Show nothing while redirecting
+  return <Redirect href={"/"} />;
+}
+
+async function executeAction(
+  action: DeviceAction,
+  deviceId: string
+): Promise<void> {
+  // Get device name for toast
+  let deviceName = 'device';
+  try {
+    const device = await api.getDevice(deviceId);
+    deviceName = device.name;
+  } catch (error) {
+    console.warn('Could not fetch device name:', error);
+  }
+
+  // Show sending toast
+  const sendingMessages: Record<DeviceAction, string> = {
+    wake: `Sending wake command to ${deviceName}...`,
+    sleep: `Sending sleep command to ${deviceName}...`,
+    restart: `Sending restart command to ${deviceName}...`,
+    shutdown: `Sending shutdown command to ${deviceName}...`,
+  };
+
+  Burnt.toast({
+    title: sendingMessages[action],
+    preset: 'none',
+  });
+
+  // Execute the action
+  try {
+    switch (action) {
+      case 'wake':
+        await api.wakeDevice(deviceId);
+        Burnt.toast({
+          title: 'Success',
+          preset: 'done',
+          message: `Waking ${deviceName} up.`,
+        });
+        break;
+
+      case 'sleep':
+        await api.sleepDevice(deviceId);
+        Burnt.toast({
+          title: 'Success',
+          preset: 'done',
+          message: `Sending ${deviceName} to sleep.`,
+        });
+        break;
+
+      case 'restart':
+        await api.rebootDevice(deviceId);
+        Burnt.toast({
+          title: 'Success',
+          preset: 'done',
+          message: `Rebooting ${deviceName}.`,
+        });
+        break;
+
+      case 'shutdown':
+        await api.shutdownDevice(deviceId);
+        Burnt.toast({
+          title: 'Success',
+          preset: 'done',
+          message: `Shutting down ${deviceName}.`,
+        });
+        break;
+    }
+  } catch (error: any) {
+    Burnt.toast({
+      title: 'Error',
+      preset: 'error',
+      message: error.message || `Failed to ${action} ${deviceName}.`,
+    });
+  }
+}