diff --git a/web/src/components/channel_config/NoChannelsCreated.tsx b/web/src/components/channel_config/NoChannelsCreated.tsx
new file mode 100644
index 000000000..2fd8223b3
--- /dev/null
+++ b/web/src/components/channel_config/NoChannelsCreated.tsx
@@ -0,0 +1,43 @@
+import SettingsRemoteIcon from '@mui/icons-material/SettingsRemote';
+import { Box, Button, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { useChannels } from '../../hooks/useChannels';
+import PaddedPaper from '../base/PaddedPaper';
+
+export default function NoChannelsCreated() {
+ const { isFetching: channelsFetching, data: channels } = useChannels();
+
+ return (
+ channels &&
+ channels.length === 0 &&
+ !channelsFetching && (
+
+
+
+
+ You haven't created any channels yet.
+
+
+
+
+ )
+ );
+}
diff --git a/web/src/pages/channels/ChannelsPage.tsx b/web/src/pages/channels/ChannelsPage.tsx
index d5f041d40..eb03caf01 100644
--- a/web/src/pages/channels/ChannelsPage.tsx
+++ b/web/src/pages/channels/ChannelsPage.tsx
@@ -1,7 +1,6 @@
import { Delete, PlayArrow as WatchIcon } from '@mui/icons-material';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import EditIcon from '@mui/icons-material/Edit';
-import SettingsRemoteIcon from '@mui/icons-material/SettingsRemote';
import TextSnippetIcon from '@mui/icons-material/TextSnippet';
import {
Box,
@@ -32,7 +31,7 @@ import { isEmpty } from 'lodash-es';
import { useState } from 'react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import TunarrLogo from '../../components/TunarrLogo.tsx';
-import PaddedPaper from '../../components/base/PaddedPaper.tsx';
+import NoChannelsCreated from '../../components/channel_config/NoChannelsCreated.tsx';
import { useChannels } from '../../hooks/useChannels.ts';
import { useTunarrApi } from '../../hooks/useTunarrApi.ts';
@@ -238,35 +237,7 @@ export default function ChannelsPage() {
- {channels && channels.length === 0 && !channelsFetching && (
-
-
-
-
- You haven't created any channels yet.
-
-
-
-
- )}
+
);
}
diff --git a/web/src/pages/guide/GuidePage.tsx b/web/src/pages/guide/GuidePage.tsx
index 5ac01ad99..8543aba6e 100644
--- a/web/src/pages/guide/GuidePage.tsx
+++ b/web/src/pages/guide/GuidePage.tsx
@@ -17,11 +17,12 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs, { Dayjs, duration } from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';
import { useCallback, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import NoChannelsCreated from '../../components/channel_config/NoChannelsCreated.tsx';
import { TvGuide } from '../../components/guide/TvGuide.tsx';
import { roundCurrentTime } from '../../helpers/util.ts';
import useStore from '../../store/index.ts';
import { setGuideDurationState } from '../../store/themeEditor/actions.ts';
-import { useInterval } from 'usehooks-ts';
dayjs.extend(duration);
dayjs.extend(isBetween);
@@ -153,6 +154,7 @@ export default function GuidePage({ channelId }: Props = { channelId: 'all' }) {
+
>
);
}