fix: Lint app

.vscode/settings.json

@@ -2,5 +2,11 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  }
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
 }

packages/app/src/App.tsx

@@ -1,22 +1,22 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Suspense } from "react";
 import {
   createBrowserRouter,
   Navigate,
   RouterProvider,
 } from "react-router-dom";
-import { Auth, Guest, AuthProvider } from "./AuthContext";
-import { JobsPage } from "@/pages/JobsPage";
-import { JobPage } from "@/pages/JobPage";
-import { ApiPage } from "@/pages/ApiPage";
-import { RootLayout } from "@/pages/RootLayout";
-import { Suspense } from "react";
-import { Toaster } from "@/components/ui/toaster";
-import { PlayerPage } from "./pages/PlayerPage";
-import { StoragePage } from "./pages/StoragePage";
+import { Auth, AuthProvider, Guest } from "./AuthContext";
+import { AssetsPage } from "./pages/AssetsPage";
 import { LoginPage } from "./pages/LoginPage";
+import { PlayerPage } from "./pages/PlayerPage";
 import { SettingsPage } from "./pages/SettingsPage";
-import { AssetsPage } from "./pages/AssetsPage";
+import { StoragePage } from "./pages/StoragePage";
 import { Loader } from "@/components/Loader";
+import { Toaster } from "@/components/ui/toaster";
+import { ApiPage } from "@/pages/ApiPage";
+import { JobPage } from "@/pages/JobPage";
+import { JobsPage } from "@/pages/JobsPage";
+import { RootLayout } from "@/pages/RootLayout";
 
 const queryClient = new QueryClient({
   defaultOptions: {

packages/app/src/AuthContext.tsx

@@ -1,24 +1,25 @@
-import { useState, createContext, useContext, useMemo, useEffect } from "react";
-import { Navigate } from "react-router-dom";
-import { useSuspenseQuery } from "@tanstack/react-query";
 import { createApiClient } from "@superstreamer/api/client";
-import type { ReactNode } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Navigate } from "react-router-dom";
 import type { ApiClient, User } from "@superstreamer/api/client";
+import type { ReactNode } from "react";
 
-type AuthContextValue = {
+interface AuthContextValue {
   token: string | null;
   setToken(value: string | null): void;
   user: User | null;
   api: ApiClient;
-};
+}
 
 export const AuthContext = createContext<AuthContextValue>(
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   {} as AuthContextValue,
 );
 
-type AuthProviderProps = {
+interface AuthProviderProps {
   children: ReactNode;
-};
+}
 
 const LOCAL_STORAGE_KEY = "sprsToken";
 

packages/app/src/components/AssetsTable.tsx

@@ -1,4 +1,12 @@
-import { Asset, Group } from "@superstreamer/api/client";
+import CircleSlash from "lucide-react/icons/circle-slash";
+import Ellipsis from "lucide-react/icons/ellipsis";
+import FileVideo from "lucide-react/icons/file-video";
+import GroupIcon from "lucide-react/icons/group";
+import { TableHeadSorter } from "./TableHeadSorter";
+import { Button } from "./ui/button";
+import type { TableFilterValue } from "@/hooks/useTableFilter";
+import type { Asset, Group } from "@superstreamer/api/client";
+import { ColorTag } from "@/components/ColorTag";
 import {
   Table,
   TableBody,
@@ -7,22 +15,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { ColorTag } from "@/components/ColorTag";
-import { Button } from "./ui/button";
-import Ellipsis from "lucide-react/icons/ellipsis";
-import CircleSlash from "lucide-react/icons/circle-slash";
-import FileVideo from "lucide-react/icons/file-video";
-import GroupIcon from "lucide-react/icons/group";
 import { getTimeAgo } from "@/lib/helpers";
-import { TableHeadSorter } from "./TableHeadSorter";
-import { TableFilterValue } from "@/hooks/useTableFilter";
 
-type AssetsTableProps = {
+interface AssetsTableProps {
   assets: Asset[];
   groups: Group[];
   filter: TableFilterValue;
   onSort(orderBy: string, direction: string): void;
-};
+}
 
 export function AssetsTable({
   assets,

packages/app/src/components/ColorTag.tsx

@@ -1,8 +1,8 @@
 import uniqolor from "uniqolor";
 
-type JobTagProps = {
+interface JobTagProps {
   value: string;
-};
+}
 
 export function ColorTag({ value }: JobTagProps) {
   let { color } = uniqolor(value, {});

packages/app/src/components/Editor.tsx

@@ -1,13 +1,13 @@
 import MonacoEditor from "@monaco-editor/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import type { BeforeMount, OnChange, OnMount } from "@monaco-editor/react";
 
-type EditorProps = {
+interface EditorProps {
   schema: object;
   title: React.ReactNode;
   onSave(value: string): void;
   localStorageKey?: string;
-};
+}
 
 export function Editor({
   schema,
@@ -24,8 +24,6 @@ export function Editor({
       : ["{", '  "uri": ""', "}"].join("\n");
   });
 
-  useEffect(() => {}, [localStorageKey]);
-
   const beforeMount: BeforeMount = (monaco) => {
     monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
       validate: true,

packages/app/src/components/JobLog.tsx

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 
-type JobLogProps = {
+interface JobLogProps {
   value: string;
   index: number;
-};
+}
 
 export function JobLog({ value, index }: JobLogProps) {
   const ref = useRef<HTMLDivElement>(null);

packages/app/src/components/JobLogs.tsx

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { JobLog } from "./JobLog";
-import { useAutoRefreshFunction } from "@/components/auto-refresh/AutoRefreshContext";
 import { useAuth } from "@/AuthContext";
+import { useAutoRefreshFunction } from "@/components/auto-refresh/AutoRefreshContext";
 
-type JobLogsProps = {
+interface JobLogsProps {
   id: string;
-};
+}
 
 export function JobLogs({ id }: JobLogsProps) {
   const { api } = useAuth();

packages/app/src/components/JobOverview.tsx

@@ -1,7 +1,7 @@
 import { JobTree } from "@/components/JobTree";
 import { JobView } from "@/components/JobView";
-import { getShortId } from "@/lib/helpers";
-import { useJob } from "@/hooks/useJob";
+import { TransitionNavLink } from "@/components/TransitionNavLink";
+import { AutoRefreshStatus } from "@/components/auto-refresh/AutoRefreshStatus";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -10,12 +10,12 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { AutoRefreshStatus } from "@/components/auto-refresh/AutoRefreshStatus";
-import { TransitionNavLink } from "@/components/TransitionNavLink";
+import { useJob } from "@/hooks/useJob";
+import { getShortId } from "@/lib/helpers";
 
-type JobOverviewProps = {
+interface JobOverviewProps {
   id: string;
-};
+}
 
 export function JobOverview({ id }: JobOverviewProps) {
   const result = useJob(id);

packages/app/src/components/JobProgress.tsx

@@ -1,9 +1,9 @@
-import { Progress } from "@/components/ui/progress";
 import type { Job } from "@superstreamer/api/client";
+import { Progress } from "@/components/ui/progress";
 
-type JobProgressProps = {
+interface JobProgressProps {
   progress: Job["progress"];
-};
+}
 
 export function JobProgress({ progress }: JobProgressProps) {
   if (!progress) {

packages/app/src/components/JobState.tsx

@@ -1,9 +1,9 @@
-import Loader from "lucide-react/icons/loader";
-import CircleDotDashed from "lucide-react/icons/circle-dot-dashed";
 import Check from "lucide-react/icons/check";
+import CircleDotDashed from "lucide-react/icons/circle-dot-dashed";
+import Loader from "lucide-react/icons/loader";
 import X from "lucide-react/icons/x";
-import { cn } from "@/lib/utils";
 import type { Job } from "@superstreamer/api/client";
+import { cn } from "@/lib/utils";
 
 export function JobState({ state }: { state: Job["state"] }) {
   if (state === "completed") {

packages/app/src/components/JobStatsTile.tsx

@@ -1,17 +1,17 @@
-import { cn } from "@/lib/utils";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 
-type JobStatsTileProps = {
+interface JobStatsTileProps {
   value: number;
   className: string;
   onClick: () => void;
   active: boolean;
   tooltip: string;
-};
+}
 
 export function JobStatsTile({
   value,

packages/app/src/components/JobTree.tsx

@@ -1,12 +1,12 @@
-import { cn } from "@/lib/utils";
 import { JobTreeItem } from "./JobTreeItem";
 import type { Job } from "@superstreamer/api/client";
+import { cn } from "@/lib/utils";
 
-type JobTreeProps = {
+interface JobTreeProps {
   job: Job;
   activeId: string;
   depth?: number;
-};
+}
 
 export function JobTree({ job, activeId, depth = 0 }: JobTreeProps) {
   return (

packages/app/src/components/JobTreeItem.tsx

@@ -1,13 +1,13 @@
-import { TransitionNavLink } from "./TransitionNavLink";
-import { cn } from "@/lib/utils";
 import { JobState } from "./JobState";
-import { getDurationStr } from "@/lib/helpers";
+import { TransitionNavLink } from "./TransitionNavLink";
 import type { Job } from "@superstreamer/api/client";
+import { getDurationStr } from "@/lib/helpers";
+import { cn } from "@/lib/utils";
 
-type JobTreeItemProps = {
+interface JobTreeItemProps {
   job: Job;
   activeId: string;
-};
+}
 
 export function JobTreeItem({ job, activeId }: JobTreeItemProps) {
   const durationStr = getDurationStr(job.duration);

packages/app/src/components/JobView.tsx

@@ -1,15 +1,15 @@
-import { getTimeAgo } from "@/lib/helpers";
-import { JobLogs } from "./JobLogs";
 import AlertCircle from "lucide-react/icons/alert-circle";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { getDurationStr } from "@/lib/helpers";
-import { JsonHighlight } from "./JsonHighlight";
+import { JobLogs } from "./JobLogs";
 import { JobProgress } from "./JobProgress";
+import { JsonHighlight } from "./JsonHighlight";
 import type { Job } from "@superstreamer/api/client";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { getDurationStr } from "@/lib/helpers";
+import { getTimeAgo } from "@/lib/helpers";
 
-type JobViewProps = {
+interface JobViewProps {
   job: Job;
-};
+}
 
 export function JobView({ job }: JobViewProps) {
   return (

packages/app/src/components/JobsFilter.tsx

@@ -1,13 +1,13 @@
 import { SelectObject } from "./SelectObject";
-import type { Job } from "@superstreamer/api/client";
-import type { JobsFilterData } from "./types";
 import type { SelectObjectItem } from "./SelectObject";
+import type { JobsFilterData } from "./types";
+import type { Job } from "@superstreamer/api/client";
 
-type JobsFilterProps = {
+interface JobsFilterProps {
   allJobs: Job[];
   filter: JobsFilterData;
   onChange(value: Partial<JobsFilterData>): void;
-};
+}
 
 export function JobsFilter({ allJobs, filter, onChange }: JobsFilterProps) {
   const names = getNames(allJobs).map<SelectObjectItem>((name) => ({

packages/app/src/components/JobsList.tsx

@@ -1,11 +1,11 @@
-import { TransitionNavLink } from "./TransitionNavLink";
 import { JobState } from "./JobState";
-import { getDurationStr, getShortId, getTimeAgo } from "@/lib/helpers";
+import { TransitionNavLink } from "./TransitionNavLink";
 import type { Job } from "@superstreamer/api/client";
+import { getDurationStr, getShortId, getTimeAgo } from "@/lib/helpers";
 
-type JobsListProps = {
+interface JobsListProps {
   jobs: Job[];
-};
+}
 
 export function JobsList({ jobs }: JobsListProps) {
   return (

packages/app/src/components/JobsOverview.tsx

@@ -1,12 +1,12 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { JobsList } from "@/components/JobsList";
+import { AutoRefreshStatus } from "./auto-refresh/AutoRefreshStatus";
+import { useAuth } from "@/AuthContext";
 import { JobsFilter } from "@/components/JobsFilter";
-import { useJobsFilter } from "@/hooks/useJobsFilter";
+import { JobsList } from "@/components/JobsList";
 import { JobsStats } from "@/components/JobsStats";
-import { filterJobs } from "@/lib/jobs-filter";
 import { useAutoRefreshFunction } from "@/components/auto-refresh/AutoRefreshContext";
-import { AutoRefreshStatus } from "./auto-refresh/AutoRefreshStatus";
-import { useAuth } from "@/AuthContext";
+import { useJobsFilter } from "@/hooks/useJobsFilter";
+import { filterJobs } from "@/lib/jobs-filter";
 
 export function JobsOverview() {
   const [filter, setFilter] = useJobsFilter();

packages/app/src/components/JobsStats.tsx

@@ -1,13 +1,13 @@
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { JobStatsTile } from "./JobStatsTile";
-import type { Job } from "@superstreamer/api/client";
 import type { JobsFilterData } from "./types";
+import type { Job } from "@superstreamer/api/client";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
-type JobsStatsProps = {
+interface JobsStatsProps {
   jobs: Job[];
   filter: JobsFilterData;
   onChange(value: Partial<JobsFilterData>): void;
-};
+}
 
 export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
   let completed = 0;

packages/app/src/components/JsonHighlight.tsx

@@ -8,9 +8,9 @@ delete style["hljs"].background;
 
 SyntaxHighlighter.registerLanguage("json", json);
 
-type SyntaxHighlightProps = {
+interface SyntaxHighlightProps {
   json: string;
-};
+}
 
 export function JsonHighlight({ json }: SyntaxHighlightProps) {
   const data = useMemo(() => {