Apply and Upgrade Eslint (#288)

* Upgrade ESLINT and fix issues

* feat: add frontend linting job to GitHub Actions workflow

* Move UI linting to separate file

* More linting fixes

* Remove pull_request trigger from UI linting workflow

* Update UI linting workflow

* Rename frontend-lint workflow to ui-lint for clarity

ui/src/hooks/useAppNavigation.ts

@@ -1,7 +1,8 @@
 import { useNavigate, useParams, NavigateOptions } from "react-router-dom";
-import { isOnDevice } from "../main";
 import { useCallback, useMemo } from "react";
 
+import { isOnDevice } from "../main";
+
 /**
  * Generates the correct path based on whether the app is running on device or in cloud mode
  *

ui/src/hooks/useFeatureFlag.ts

@@ -1,5 +1,6 @@
 import { useContext } from "react";
-import { FeatureFlagContext } from "../providers/FeatureFlagProvider";
+
+import { FeatureFlagContext } from "@/providers/FeatureFlagContext";
 
 export const useFeatureFlag = (minAppVersion: string) => {
   const context = useContext(FeatureFlagContext);

ui/src/hooks/useJsonRpc.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+
 import { useRTCStore } from "@/hooks/stores";
 
 export interface JsonRpcRequest {
@@ -56,7 +57,7 @@ export function useJsonRpc(onRequest?: (payload: JsonRpcRequest) => void) {
       // The "API" can also "request" data from the client
       // If the payload has a method, it's a request
       if ("method" in payload) {
-        onRequest && onRequest(payload);
+        if (onRequest) onRequest(payload);
         return;
       }
 

ui/src/hooks/useKeyboard.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+
 import { useHidStore, useRTCStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 

ui/src/hooks/useResizeObserver.ts

@@ -1,19 +1,18 @@
 import { useEffect, useRef, useState } from "react";
-
 import type { RefObject } from "react";
 
 import { useIsMounted } from "./useIsMounted";
 
 /** The size of the observed element. */
-type Size = {
+interface Size {
   /** The width of the observed element. */
   width: number | undefined;
   /** The height of the observed element. */
   height: number | undefined;
-};
+}
 
 /** The options for the ResizeObserver. */
-type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+interface UseResizeObserverOptions<T extends HTMLElement = HTMLElement> {
   /** The ref of the element to observe. */
   ref: RefObject<T>;
   /**
@@ -26,7 +25,7 @@ type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
    * @default 'content-box'
    */
   box?: "border-box" | "content-box" | "device-pixel-content-box";
-};
+}
 
 const initialSize: Size = {
   width: undefined,
@@ -102,7 +101,7 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
     return () => {
       observer.disconnect();
     };
-  }, [box, ref.current, isMounted]);
+  }, [box, isMounted, ref]);
 
   return { width, height };
 }
@@ -127,6 +126,6 @@ function extractSize(
 
   return Array.isArray(entry[box])
     ? entry[box][0][sizeType]
-    : // @ts-ignore Support Firefox's non-standard behavior
+    : // @ts-expect-error Support Firefox's non-standard behavior
       (entry[box][sizeType] as number);
 }