chore: Structured app

packages/app/src/App.tsx

@@ -1,22 +1,11 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Suspense } from "react";
-import {
-  createBrowserRouter,
-  Navigate,
-  RouterProvider,
-} from "react-router-dom";
-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 { StoragePage } from "./pages/StoragePage";
-import { Loader } from "@/components/Loader";
+import { RouterProvider } from "react-router-dom";
+import { AppLoader } from "@/components/AppLoader";
 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";
+import { AuthProvider } from "@/context/AuthContext";
+import { AutoRefreshProvider } from "@/context/AutoRefreshContext";
+import { router } from "@/router";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -31,76 +20,17 @@ const queryClient = new QueryClient({
   },
 });
 
-const router = createBrowserRouter([
-  {
-    path: "/login",
-    element: (
-      <Guest>
-        <LoginPage />
-      </Guest>
-    ),
-  },
-  {
-    path: "/",
-    element: (
-      <Auth>
-        <RootLayout />
-      </Auth>
-    ),
-    children: [
-      {
-        index: true,
-        element: <Navigate to="/assets" />,
-      },
-      {
-        path: "/assets",
-        element: <AssetsPage />,
-      },
-      {
-        path: "/jobs",
-        element: <JobsPage />,
-      },
-      {
-        path: "/jobs/:id",
-        element: <JobPage />,
-      },
-      {
-        path: "/api/:service?",
-        element: <ApiPage />,
-      },
-      {
-        path: "/player",
-        element: <PlayerPage />,
-      },
-      {
-        path: "/storage",
-        element: <StoragePage />,
-      },
-      {
-        path: "/settings",
-        element: <SettingsPage />,
-      },
-    ],
-  },
-]);
-
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Suspense fallback={<AppLoader />}>
         <AuthProvider>
-          <RouterProvider router={router} />
+          <AutoRefreshProvider>
+            <RouterProvider router={router} />
+          </AutoRefreshProvider>
         </AuthProvider>
       </Suspense>
       <Toaster />
     </QueryClientProvider>
   );
 }
-
-function AppLoader() {
-  return (
-    <div className="w-screen h-screen flex items-center justify-center">
-      <Loader />
-    </div>
-  );
-}

packages/app/src/components/AppLoader.tsx

@@ -0,0 +1,9 @@
+import { Loader } from "@/components/Loader";
+
+export function AppLoader() {
+  return (
+    <div className="w-screen h-screen flex items-center justify-center">
+      <Loader />
+    </div>
+  );
+}

packages/app/src/components/AuthAsAuth.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { Navigate } from "react-router-dom";
+import type { ReactNode } from "react";
+import { AuthContext } from "@/context/AuthContext";
+
+interface AuthAsAuthProps {
+  children: ReactNode;
+}
+
+export function AuthAsAuth({ children }: AuthAsAuthProps) {
+  const { user } = useContext(AuthContext);
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+  return children;
+}

packages/app/src/components/AuthAsGuest.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { Navigate } from "react-router-dom";
+import type { ReactNode } from "react";
+import { AuthContext } from "@/context/AuthContext";
+
+interface AuthAsGuestProps {
+  children: ReactNode;
+}
+
+export function AuthAsGuest({ children }: AuthAsGuestProps) {
+  const { user } = useContext(AuthContext);
+  if (user) {
+    return <Navigate to="/" />;
+  }
+  return children;
+}

packages/app/src/components/auto-refresh/AutoRefreshStatus.tsx → packages/app/src/components/AutoRefreshStatus.tsx

@@ -1,5 +1,5 @@
-import { useAutoRefresh } from "./AutoRefreshContext";
 import { Loader } from "@/components/Loader";
+import { useAutoRefresh } from "@/hooks/useAutoRefresh";
 
 export function AutoRefreshStatus() {
   const { countdown } = useAutoRefresh();

packages/app/src/pages/RootLayoutErrorBoundary.tsx → packages/app/src/components/DashboardErrorBoundary.tsx

@@ -2,7 +2,7 @@ import AlertCircle from "lucide-react/icons/alert-circle";
 import type { FallbackProps } from "react-error-boundary";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
-export function RootLayoutErrorBoundary({ error }: FallbackProps) {
+export function DashboardErrorBoundary({ error }: FallbackProps) {
   let message = "An unknown error occured";
   let value: object | undefined;
 

packages/app/src/components/JobLogs.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { JobLog } from "./JobLog";
-import { useAuth } from "@/AuthContext";
-import { useAutoRefreshFunction } from "@/components/auto-refresh/AutoRefreshContext";
+import { JobLog } from "@/components/JobLog";
+import { useAuth } from "@/hooks/useAuth";
+import { useAutoRefreshFunction } from "@/hooks/useAutoRefreshFunction";
 
 interface JobLogsProps {
   id: string;

packages/app/src/components/JobStatsTile.tsx

@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 interface JobStatsTileProps {
   value: number;
   className: string;
-  onClick: () => void;
+  onClick(): void;
   active: boolean;
   tooltip: string;
 }

packages/app/src/components/JobTree.tsx

@@ -1,5 +1,5 @@
-import { JobTreeItem } from "./JobTreeItem";
 import type { Job } from "@superstreamer/api/client";
+import { JobTreeItem } from "@/components/JobTreeItem";
 import { cn } from "@/lib/utils";
 
 interface JobTreeProps {

packages/app/src/components/JobTreeItem.tsx

@@ -1,6 +1,6 @@
-import { JobState } from "./JobState";
-import { TransitionNavLink } from "./TransitionNavLink";
 import type { Job } from "@superstreamer/api/client";
+import { JobState } from "@/components/JobState";
+import { LoadNavLink } from "@/components/LoadNavLink";
 import { getDurationStr } from "@/lib/helpers";
 import { cn } from "@/lib/utils";
 
@@ -13,7 +13,7 @@ export function JobTreeItem({ job, activeId }: JobTreeItemProps) {
   const durationStr = getDurationStr(job.duration);
 
   return (
-    <TransitionNavLink
+    <LoadNavLink
       to={`/jobs/${job.id}`}
       className={cn(
         "px-3 py-2 flex gap-3 items-center rounded-lg text-muted-foreground transition-all hover:text-primary text-sm",
@@ -23,6 +23,6 @@ export function JobTreeItem({ job, activeId }: JobTreeItemProps) {
       <JobState state={job.state} />
       {job.name}
       {durationStr ? <span className="text-xs">{durationStr}</span> : null}
-    </TransitionNavLink>
+    </LoadNavLink>
   );
 }

packages/app/src/components/JobView.tsx

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

packages/app/src/components/JobsFilter.tsx

@@ -1,7 +1,7 @@
-import { SelectObject } from "./SelectObject";
-import type { SelectObjectItem } from "./SelectObject";
-import type { JobsFilterData } from "./types";
+import type { SelectObjectItem } from "@/components/SelectObject";
+import type { JobsFilterData } from "@/hooks/useJobsFilter";
 import type { Job } from "@superstreamer/api/client";
+import { SelectObject } from "@/components/SelectObject";
 
 interface JobsFilterProps {
   allJobs: Job[];
@@ -10,12 +10,14 @@ interface JobsFilterProps {
 }
 
 export function JobsFilter({ allJobs, filter, onChange }: JobsFilterProps) {
-  const names = getNames(allJobs).map<SelectObjectItem>((name) => ({
-    value: name,
-    label: name,
-  }));
+  const names = getNames(allJobs).map<SelectObjectItem<string | null>>(
+    (name) => ({
+      value: name,
+      label: name,
+    }),
+  );
 
-  names.unshift({ value: undefined, label: "All names" });
+  names.unshift({ value: null, label: "All names" });
 
   return (
     <div className="flex gap-2">

packages/app/src/components/JobsList.tsx

@@ -1,6 +1,6 @@
-import { JobState } from "./JobState";
-import { TransitionNavLink } from "./TransitionNavLink";
 import type { Job } from "@superstreamer/api/client";
+import { JobState } from "@/components/JobState";
+import { LoadNavLink } from "@/components/LoadNavLink";
 import { getDurationStr, getShortId, getTimeAgo } from "@/lib/helpers";
 
 interface JobsListProps {
@@ -12,7 +12,7 @@ export function JobsList({ jobs }: JobsListProps) {
     <ul>
       {jobs.map((job) => (
         <li key={job.id} className="mb-2">
-          <TransitionNavLink
+          <LoadNavLink
             to={`/jobs/${job.id}`}
             className="px-4 h-20 flex items-center border border-border rounded-md hover:shadow-sm transition-shadow hover:bg-muted/50"
           >
@@ -35,7 +35,7 @@ export function JobsList({ jobs }: JobsListProps) {
                 </div>
               </div>
             </div>
-          </TransitionNavLink>
+          </LoadNavLink>
         </li>
       ))}
     </ul>