# Where to Find the iLoader Source Code for Device Management and Settings

> Locate the iloader source code for device management and settings easily. Explore the nab138/iloader repository to find the device logic and settings implementation.

- Repository: [Nicholas Sharp/iloader](https://github.com/nab138/iloader)
- Tags: how-to-guide
- Published: 2026-09-12

---

**You can find the device management logic in [`src/Device.tsx`](https://github.com/nab138/iloader/blob/main/src/Device.tsx) and the settings implementation in [`src/pages/Settings.tsx`](https://github.com/nab138/iloader/blob/main/src/pages/Settings.tsx) within the nab138/iloader repository.**

iLoader is a modern desktop application built with React and TypeScript for the frontend and Tauri for the native backend. The codebase separates concerns clearly, with device-specific interactions isolated from global configuration management. Understanding where these features live helps contributors navigate the architecture efficiently.

## Device Management Source Code (src/Device.tsx)

The device discovery and pairing interface lives in [`src/Device.tsx`](https://github.com/nab138/iloader/blob/main/src/Device.tsx). This component handles iOS device enumeration, selection, and pairing workflows through Tauri command invocations.

### Device Discovery and Listing

The `loadDevices` function triggers backend enumeration by calling `invoke("list_devices")`. It processes results into success and error variants, displaying failures via `toast.error` from the ErrorContext.

```tsx
// Simplified usage of the Device component
import { Device } from "./Device";

function App() {
  const [selected, setSelected] = useState<DeviceInfo | null>(null);
  return (
    <Device
      selectedDevice={selected}
      setSelectedDevice={setSelected}
      registerRefresh={(fn) => window.addEventListener("focus", fn!)}
    />
  );
}

```

### Pairing Flow and State Management

When users select a device, the `selectDevice` function stores the request ID and opens a pairing modal. It invokes `set_selected_device` on the backend. Success activates the device; failure triggers a rollback and error toast. The component tracks state through `devices`, `selectedDevice`, `waitingToPair`, and `showPairingModal` variables.

### Refresh Mechanism

The component exposes a `registerRefresh` callback that parent components use to trigger device list updates without remounting. A manual **Refresh** button also calls `loadDevices` directly for immediate updates.

## Settings Source Code (src/pages/Settings.tsx)

Global application configuration resides in [`src/pages/Settings.tsx`](https://github.com/nab138/iloader/blob/main/src/pages/Settings.tsx). This page manages Anisette servers, language selection, log viewing, and keyring overrides through persistent state management.

### State Persistence with StoreContext

Settings persist via the `useStore` hook from [`src/StoreContext.tsx`](https://github.com/nab138/iloader/blob/main/src/StoreContext.tsx), which wraps `localStorage`. Keys like `anisetteServer` and `lang` load on mount and save automatically on changes.

### Anisette Server Configuration

The Anisette section uses a Dropdown component populated from the `anisetteServers` array. Users select predefined servers or enter custom endpoints. Changes immediately invoke the storage mechanism.

### Log Viewer Implementation

The Log Viewer utilizes `LogContext` from [`src/LogContext.tsx`](https://github.com/nab138/iloader/blob/main/src/LogContext.tsx) to stream application logs. It filters entries by `logLevelFilter` and renders them efficiently using `react-virtuoso` for virtualization. A **Copy to Clipboard** button formats logs as fenced code blocks.

### Keyring and Pairing Controls

The settings page includes toggles for `overrideKeyring`, which triggers `invoke("force_disable_keyring")` via a useEffect hook. buttons for **Reset Anisette** and **Delete Stored Pairing** invoke `reset_anisette_state` and `delete_stored_rppairing` respectively, wrapped in confirmation dialogs from [`src/components/Modal.tsx`](https://github.com/nab138/iloader/blob/main/src/components/Modal.tsx).

```tsx
// Example settings page implementation
import { Settings } from "./pages/Settings";

function SettingsPage() {
  const ensureDevice = () => true;
  const setDevice = () => {};

  return (
    <Settings
      ensureSelectedDevice={ensureDevice}
      setSelectedDevice={setDevice}
      platform={navigator.platform.includes("Mac") ? "mac" : "windows"}
      shortcutLabel={(mac, win) => (navigator.platform.includes("Mac") ? mac : win)}
      checkKeyring={() => Promise.resolve()}
    />
  );
}

```

## Supporting Components and Contexts

Several shared modules support these features:

- [`src/components/Modal.tsx`](https://github.com/nab138/iloader/blob/main/src/components/Modal.tsx) – Generic modal component for pairing and confirmation dialogs
- [`src/components/Dropdown.tsx`](https://github.com/nab138/iloader/blob/main/src/components/Dropdown.tsx) – Reusable selection dropdown used in settings
- [`src/StoreContext.tsx`](https://github.com/nab138/iloader/blob/main/src/StoreContext.tsx) – Provides persistent storage hooks
- [`src/LogContext.tsx`](https://github.com/nab138/iloader/blob/main/src/LogContext.tsx) – Supplies log streaming and filtering utilities
- [`src/ErrorContext.tsx`](https://github.com/nab138/iloader/blob/main/src/ErrorContext.tsx) – Centralizes error handling and toast notifications

## Summary

- **Device management** logic lives in [`src/Device.tsx`](https://github.com/nab138/iloader/blob/main/src/Device.tsx), handling discovery via `list_devices` and pairing through `set_selected_device`
- **Settings** implementation resides in [`src/pages/Settings.tsx`](https://github.com/nab138/iloader/blob/main/src/pages/Settings.tsx), persisting data via `useStore` and `localStorage`
- **Tauri commands** bridge the React frontend with native iOS device operations
- **Shared contexts** in [`StoreContext.tsx`](https://github.com/nab138/iloader/blob/main/StoreContext.tsx), [`LogContext.tsx`](https://github.com/nab138/iloader/blob/main/LogContext.tsx), and [`ErrorContext.tsx`](https://github.com/nab138/iloader/blob/main/ErrorContext.tsx) provide cross-cutting concerns like persistence and error handling
- **UI primitives** such as `Modal` and `Dropdown` in `src/components/` support both features

## Frequently Asked Questions

### Where is the device selection logic handled in iLoader?

Device selection logic is centralized in [`src/Device.tsx`](https://github.com/nab138/iloader/blob/main/src/Device.tsx) within the `selectDevice` function. This method manages the pairing modal state, invokes the `set_selected_device` Tauri command, and handles both success and error responses by updating the local state or displaying error toasts.

### How does iLoader persist user preferences?

iLoader uses the `useStore` hook defined in [`src/StoreContext.tsx`](https://github.com/nab138/iloader/blob/main/src/StoreContext.tsx) to persist settings to `localStorage`. Values like `anisetteServer` and language preferences load automatically when the Settings component mounts and save immediately when modified.

### What Tauri commands does iLoader use for device management?

The application invokes several backend commands: `list_devices` for enumeration, `set_selected_device` for selection, `has_stored_rppairing` to check existing pairings, `force_disable_keyring` for security overrides, `reset_anisette_state` for server resets, and `delete_stored_rppairing` to remove pairing records.

### How does the iLoader settings page handle log viewing?

The settings page uses `LogContext` to access streamed logs, filters them by severity level using `logLevelFilter`, and displays them through `react-virtuoso` for performance. Users can copy formatted logs to the clipboard using a dedicated button that wraps entries in markdown code blocks.