refactor: update import paths to use '@/' and improve component struc…

…ture

feat: enhance TwitchCallbackPage navigation and update ThumbnailField to accept a label prop
chore: remove unused useTasksStatusSubscription component

src/App.tsx

@@ -1,121 +1,143 @@
 import { Admin, Authenticated, CustomRoutes, Resource } from 'react-admin';
+import { nanoDarkTheme, nanoLightTheme } from 'react-admin';
 import { Route, RouterProvider, createBrowserRouter } from 'react-router-dom';
 
+import episodes from '@/resources/episodes';
 import streamPlans, { StreamPlansCalendar } from '@/resources/stream_plans';
+import streams from '@/resources/streams';
+import twitch_streams from '@/resources/twitch_streams';
+import video_clips from '@/resources/video_clips';
 
 import GlobalStyles from '@mui/material/GlobalStyles';
-import { createTheme } from '@mui/material/styles';
 
 import authProvider from '@/authProvider';
 import ProfilePage from '@/components/pages/ProfilePage';
 import StreamManagerPage from '@/components/pages/StreamManagerPage';
 import StreamWidget from '@/components/pages/StreamWidget';
 import TwitchCallbackPage from '@/components/pages/TwitchCallbackPage';
-import dataProvider from '@/dataProvider';
+import restDataProvider from '@/dataProvider';
+import { WebsocketProvider } from '@/hooks/useWebsocket';
 import i18nProvider from '@/i18nProvider';
 import Layout from '@/ra/Layout';
 import { TimerManagerProvider } from '@/timers';
+import { deepmerge } from '@mui/utils';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 
-const theme = createTheme({
+const { VITE_WEBSOCKET_URL: WEBSOCKET_URL } = import.meta.env;
+
+const themeOverrides = {
+  // Disable injecting global styles for MuiInputBase
   components: {
     MuiInputBase: {
       defaultProps: {
         disableInjectingGlobalStyles: true,
       },
     },
   },
-});
+};
+const lightTheme = deepmerge(nanoLightTheme, themeOverrides);
+const darkTheme = deepmerge(nanoDarkTheme, themeOverrides);
 
 function App() {
   const router = createBrowserRouter([
     {
       path: '*',
       element: (
-        <TimerManagerProvider>
-          <Admin
-            loginPage={false}
-            dataProvider={dataProvider}
-            i18nProvider={i18nProvider}
-            authProvider={authProvider}
-            layout={Layout}
-            theme={theme}
-          >
-            <GlobalStyles
-              styles={{
-                '@keyframes mui-auto-fill': { from: { display: 'block' } },
-                '@keyframes mui-auto-fill-cancel': {
-                  from: { display: 'block' },
-                },
-              }}
-            />
-            <Resource name="stream_plans" {...streamPlans}>
-              <Route path="calendar" element={<StreamPlansCalendar />} />
-              <Route
-                path="calendar/:targetDate"
-                element={<StreamPlansCalendar />}
-              />
-              <Route
-                path="calendar/:targetDate/:view"
-                element={<StreamPlansCalendar />}
-              />
-            </Resource>
-            <Resource name="profile" />
+        <LocalizationProvider dateAdapter={AdapterLuxon}>
+          <WebsocketProvider url={WEBSOCKET_URL}>
+            <TimerManagerProvider>
+              <Admin
+                loginPage={false}
+                dataProvider={restDataProvider}
+                i18nProvider={i18nProvider}
+                authProvider={authProvider}
+                layout={Layout}
+                theme={lightTheme}
+                darkTheme={darkTheme}
+              >
+                <GlobalStyles
+                  styles={{
+                    '@keyframes mui-auto-fill': { from: { display: 'block' } },
+                    '@keyframes mui-auto-fill-cancel': {
+                      from: { display: 'block' },
+                    },
+                  }}
+                />
+                <Resource name="stream_plans" {...streamPlans}>
+                  <Route path="calendar" element={<StreamPlansCalendar />} />
+                  <Route
+                    path="calendar/:targetDate"
+                    element={<StreamPlansCalendar />}
+                  />
+                  <Route
+                    path="calendar/:targetDate/:view"
+                    element={<StreamPlansCalendar />}
+                  />
+                </Resource>
+                <Resource name="streams" {...streams} />
+                <Resource name="episodes" {...episodes} />
+                <Resource name="video_clips" {...video_clips} />
+                <Resource name="twitch_streams" {...twitch_streams} />
+                <Resource name="profile" />
 
-            <CustomRoutes>
-              <Route
-                path="/profile"
-                element={
-                  <Authenticated>
-                    <ProfilePage />
-                  </Authenticated>
-                }
-              />
-            </CustomRoutes>
+                <CustomRoutes>
+                  <Route
+                    path="/profile"
+                    element={
+                      <Authenticated>
+                        <ProfilePage />
+                      </Authenticated>
+                    }
+                  />
+                </CustomRoutes>
 
-            <CustomRoutes noLayout>
-              <Route
-                path="/twitch-callback"
-                element={
-                  <Authenticated>
-                    <TwitchCallbackPage />
-                  </Authenticated>
-                }
-              />
+                <CustomRoutes noLayout>
+                  <Route
+                    path="/twitch-callback"
+                    element={
+                      <Authenticated>
+                        <TwitchCallbackPage />
+                      </Authenticated>
+                    }
+                  />
 
-              <Route
-                path="/stream-manager"
-                element={
-                  <Authenticated>
-                    <StreamManagerPage />
-                  </Authenticated>
-                }
-              />
+                  <Route
+                    path="/stream-manager"
+                    element={
+                      <Authenticated>
+                        <StreamManagerPage />
+                      </Authenticated>
+                    }
+                  />
 
-              {/*
-               * Stream Widget
-               *
-               * This route is used to render widgets on the stream overlay.
-               * It takes a `widget` and `params` parameter.
-               *
-               * The `widget` parameter determines which widget to render.
-               * The `params` parameter is a base64 encoded JSON string of the widget's props.
-               *
-               * Example:
-               * /widgets/countdown/eyJ0aW1lcklkIjoiMSIsInRleHQiOiJUaW1lciIsInRpdGxlIjoiVGltZXIgZGF0YSJ9
-               * would render a CountdownTimerWidget with the following props:
-               * {
-               *  "timerId": "1",
-               * "text": "Timer",
-               * "title": "Timer data"
-               * }
-               */}
-              <Route
-                path="/widgets/:widget/:params"
-                element={<StreamWidget />}
-              />
-            </CustomRoutes>
-          </Admin>
-        </TimerManagerProvider>
+                  {/*
+                   * Stream Widget
+                   *
+                   * This route is used to render widgets on the stream overlay.
+                   * It takes a `widget` and `params` parameter.
+                   *
+                   * The `widget` parameter determines which widget to render.
+                   * The `params` parameter is a base64 encoded JSON string of the widget's props.
+                   *
+                   * Example:
+                   * /widgets/countdown/eyJ0aW1lcklkIjoiMSIsInRleHQiOiJUaW1lciIsInRpdGxlIjoiVGltZXIgZGF0YSJ9
+                   * would render a CountdownTimerWidget with the following props:
+                   * {
+                   *  "timerId": "1",
+                   * "text": "Timer",
+                   * "title": "Timer data"
+                   * }
+                   */}
+                  <Route
+                    path="/widgets/:widget/:params"
+                    element={<StreamWidget />}
+                  />
+                </CustomRoutes>
+              </Admin>
+            </TimerManagerProvider>
+          </WebsocketProvider>
+        </LocalizationProvider>
       ),
     },
   ]);

src/authProvider.ts

@@ -31,7 +31,7 @@ const authProvider: AuthProvider = {
     const user = await userManager.getUser();
 
     if (!user) {
-      return userManager.signinRedirect();
+      await userManager.signinRedirect();
     }
   },
   async getIdentity() {
@@ -52,7 +52,7 @@ const authProvider: AuthProvider = {
   },
   async handleCallback() {
     console.log('handleCallback');
-    await userManager.signinRedirectCallback();
+    await userManager.signinCallback();
   },
 };
 

src/components/atoms/ThumbnailField.tsx

@@ -4,12 +4,14 @@ const ThumbnailField = ({
   width,
   height,
   source,
-}: { width?: number; height?: number; source: string }) => {
+  label,
+}: { width?: number; height?: number; source: string; label?: string }) => {
   const widthValue = width || 100;
   const heightValue = height || 100;
 
   return (
     <FunctionField
+      label={label}
       sortable={false}
       render={(record) => {
         if (!record[source]) {

src/components/atoms/TimeDurationInput/TimeDurationInputBase.tsx

@@ -1,3 +1,8 @@
+import {
+  type Duration,
+  parseISO8601Duration,
+  toISO8601Duration,
+} from '@/isoDuration';
 import {
   Box,
   FormControl,
@@ -7,11 +12,6 @@ import {
 } from '@mui/material';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type React from 'react';
-import {
-  type Duration,
-  parseISO8601Duration,
-  toISO8601Duration,
-} from '.@/isoDuration';
 
 export type TimeDurationInputBaseProps = TextFieldProps;
 

src/components/atoms/TwitchCCLSelect.tsx

@@ -1,9 +1,9 @@
+import type { Profile } from '@/hooks/useProfile';
 import {
   type ContentClassificationLabel,
   type ContentClassificationLabelDefinition,
   getContentClassificationLabels,
 } from '@/twitch';
-import type { Profile } from '@/useProfile';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import FormControl from '@mui/material/FormControl';

src/components/atoms/TwitchCategoryAutocomplete.tsx

@@ -1,5 +1,5 @@
+import type { Profile } from '@/hooks/useProfile';
 import { type TwitchCategory, searchCategories } from '@/twitch';
-import type { Profile } from '@/useProfile';
 import Alert from '@mui/material/Alert';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';

src/components/atoms/TwitchCategoryAutocompleteInput.tsx

@@ -1,5 +1,5 @@
 import TwitchCategoryAutocomplete from '@/components/atoms/TwitchCategoryAutocomplete';
-import type { Profile } from '@/useProfile';
+import type { Profile } from '@/hooks/useProfile';
 import { type InputProps, useInput } from 'react-admin';
 
 interface TwitchCategoryAutocompleteInputProps extends InputProps {

src/components/atoms/TwitchTokenLivenessChecker.tsx

@@ -1,5 +1,5 @@
+import useProfile from '@/hooks/useProfile';
 import { validateAccessToken } from '@/twitch';
-import useProfile from '@/useProfile';
 import { useEffect } from 'react';
 import { useUpdate } from 'react-admin';
 

src/components/molecules/AdManager.tsx

@@ -1,10 +1,10 @@
+import type { Profile } from '@/hooks/useProfile';
 import {
   type GetAdScheduleResponse,
   getAdSchedule,
   snoozeNextAd,
   startCommercial,
 } from '@/twitch';
-import type { Profile } from '@/useProfile';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';

src/components/molecules/StreamInfoEditor.tsx

@@ -2,13 +2,13 @@ import LanguageSelect from '@/components/atoms/LanguageSelect';
 import TagEditor from '@/components/atoms/TagEditor';
 import TwitchCCTAutocomplete from '@/components/atoms/TwitchCCLSelect';
 import TwitchCategoryAutocomplete from '@/components/atoms/TwitchCategoryAutocomplete';
+import type { Profile } from '@/hooks/useProfile';
 import type { StreamEvent } from '@/scheduling/types';
 import {
   type GetChannelInformationResponse,
   getChannelInformation,
   modifyChannelInformation,
 } from '@/twitch';
-import type { Profile } from '@/useProfile';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';

src/components/molecules/UpcomingStream.tsx

@@ -1,5 +1,5 @@
+import type { Profile } from '@/hooks/useProfile';
 import type { StreamEvent } from '@/scheduling/types';
-import type { Profile } from '@/useProfile';
 import Alert from '@mui/material/Alert';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
@@ -98,18 +98,16 @@ function UpcomingStream({ nextScheduledStream, profile }: UpcomingStreamProps) {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <Typography>
-            {nextScheduledStream.prep_notes ? (
-              <div
-                // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-                dangerouslySetInnerHTML={{
-                  __html: nextScheduledStream.prep_notes,
-                }}
-              />
-            ) : (
-              'No notes available'
-            )}
-          </Typography>
+          {nextScheduledStream.prep_notes ? (
+            <Typography
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+              dangerouslySetInnerHTML={{
+                __html: nextScheduledStream.prep_notes,
+              }}
+            />
+          ) : (
+            <Typography>No notes available</Typography>
+          )}
         </Grid>
       </Grid>
     </Paper>