feat(desktop): add NetworkContext powered by plugins/network events (#2079)

* feat(desktop): add NetworkContext powered by plugins/network events

- Add JS bindings for network plugin (events.networkStatusEvent)
- Create NetworkProvider and useNetwork hook in apps/desktop
- Add package.json and tsconfig.json for @hypr/plugin-network

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>

* fix: add @hypr/plugin-network to desktop dependencies

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: yujonglee

apps/desktop/package.json

@@ -41,6 +41,7 @@
     "@hypr/plugin-listener2": "workspace:*",
     "@hypr/plugin-local-stt": "workspace:*",
     "@hypr/plugin-misc": "workspace:*",
+    "@hypr/plugin-network": "workspace:*",
     "@hypr/plugin-notification": "workspace:*",
     "@hypr/plugin-permissions": "workspace:*",
     "@hypr/plugin-template": "workspace:*",

apps/desktop/src/contexts/network.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+import { events } from "@hypr/plugin-network";
+
+interface NetworkContextValue {
+  isOnline: boolean;
+}
+
+const NetworkContext = createContext<NetworkContextValue | null>(null);
+
+export function NetworkProvider({ children }: { children: React.ReactNode }) {
+  const [isOnline, setIsOnline] = useState(true);
+
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    let cancelled = false;
+
+    events.networkStatusEvent
+      .listen(({ payload }) => {
+        setIsOnline(payload.is_online);
+      })
+      .then((fn) => {
+        if (cancelled) {
+          fn();
+        } else {
+          unlisten = fn;
+        }
+      })
+      .catch((err) => {
+        console.error("Failed to setup network status event listener:", err);
+      });
+
+    return () => {
+      cancelled = true;
+      unlisten?.();
+    };
+  }, []);
+
+  return (
+    <NetworkContext.Provider value={{ isOnline }}>
+      {children}
+    </NetworkContext.Provider>
+  );
+}
+
+export function useNetwork(): NetworkContextValue {
+  const context = useContext(NetworkContext);
+  if (!context) {
+    throw new Error("useNetwork must be used within a NetworkProvider");
+  }
+  return context;
+}

plugins/network/js/bindings.gen.ts

@@ -0,0 +1,88 @@
+// @ts-nocheck
+
+
+// This file was generated by [tauri-specta](https://github.com/oscartbeaumont/tauri-specta). Do not edit this file manually.
+
+/** user-defined commands **/
+
+
+export const commands = {
+
+}
+
+/** user-defined events **/
+
+
+export const events = __makeEvents__<{
+networkStatusEvent: NetworkStatusEvent
+}>({
+networkStatusEvent: "plugin:network:network-status-event"
+})
+
+/** user-defined constants **/
+
+
+
+/** user-defined types **/
+
+export type NetworkStatusEvent = { is_online: boolean }
+
+/** tauri-specta globals **/
+
+import {
+	invoke as TAURI_INVOKE,
+	Channel as TAURI_CHANNEL,
+} from "@tauri-apps/api/core";
+import * as TAURI_API_EVENT from "@tauri-apps/api/event";
+import { type WebviewWindow as __WebviewWindow__ } from "@tauri-apps/api/webviewWindow";
+
+type __EventObj__<T> = {
+	listen: (
+		cb: TAURI_API_EVENT.EventCallback<T>,
+	) => ReturnType<typeof TAURI_API_EVENT.listen<T>>;
+	once: (
+		cb: TAURI_API_EVENT.EventCallback<T>,
+	) => ReturnType<typeof TAURI_API_EVENT.once<T>>;
+	emit: null extends T
+		? (payload?: T) => ReturnType<typeof TAURI_API_EVENT.emit>
+		: (payload: T) => ReturnType<typeof TAURI_API_EVENT.emit>;
+};
+
+export type Result<T, E> =
+	| { status: "ok"; data: T }
+	| { status: "error"; error: E };
+
+function __makeEvents__<T extends Record<string, any>>(
+	mappings: Record<keyof T, string>,
+) {
+	return new Proxy(
+		{} as unknown as {
+			[K in keyof T]: __EventObj__<T[K]> & {
+				(handle: __WebviewWindow__): __EventObj__<T[K]>;
+			};
+		},
+		{
+			get: (_, event) => {
+				const name = mappings[event as keyof T];
+
+				return new Proxy((() => {}) as any, {
+					apply: (_, __, [window]: [__WebviewWindow__]) => ({
+						listen: (arg: any) => window.listen(name, arg),
+						once: (arg: any) => window.once(name, arg),
+						emit: (arg: any) => window.emit(name, arg),
+					}),
+					get: (_, command: keyof __EventObj__<any>) => {
+						switch (command) {
+							case "listen":
+								return (arg: any) => TAURI_API_EVENT.listen(name, arg);
+							case "once":
+								return (arg: any) => TAURI_API_EVENT.once(name, arg);
+							case "emit":
+								return (arg: any) => TAURI_API_EVENT.emit(name, arg);
+						}
+					},
+				});
+			},
+		},
+	);
+}

plugins/network/js/index.ts

@@ -0,0 +1 @@
+export * from "./bindings.gen";

plugins/network/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@hypr/plugin-network",
+  "private": true,
+  "main": "./js/index.ts",
+  "scripts": {
+    "codegen": "cargo test -p tauri-plugin-network"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.9.0"
+  }
+}

plugins/network/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["./js/*.ts"],
+  "exclude": ["node_modules"]
+}