Move all not found messages into list components

frontend/src/components/ChannelList.tsx

@@ -19,7 +19,7 @@ const ChannelList = ({ channelList, refreshChannelList }: ChannelListProps) => {
   const viewStyle = userConfig.view_style_channel;
 
   if (!channelList || channelList.length === 0) {
-    return <p>No channels found.</p>;
+    return <p>No channels found...</p>;
   }
 
   return (

frontend/src/components/PlaylistList.tsx

@@ -17,7 +17,7 @@ const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
   const viewStyle = userConfig.view_style_playlist;
 
   if (!playlistList || playlistList.length === 0) {
-    return <p>No playlists found.</p>;
+    return <p>No playlists found...</p>;
   }
 
   return (

frontend/src/components/VideoList.tsx

@@ -19,7 +19,7 @@ const VideoList = ({
   refreshVideoList,
 }: VideoListProps) => {
   if (!videoList || videoList.length === 0) {
-    return <p>No videos found.</p>;
+    return <p>No videos found...</p>;
   }
 
   if (viewStyle === ViewStylesEnum.Table) {

frontend/src/pages/ChannelVideo.tsx

@@ -168,17 +168,13 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
 
         <div className={`boxed-content ${gridView}`}>
           <div className={`video-list ${viewStyle} ${gridViewGrid}`}>
-            {!hasVideos && (
-              <>
-                <h2>No videos found...</h2>
-                <p>
-                  Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the
-                  scan and download tasks.
-                </p>
-              </>
-            )}
-
             <VideoList videoList={videoList} viewStyle={viewStyle} refreshVideoList={setRefresh} />
+            {!hasVideos && (
+              <p>
+                Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the
+                scan and download tasks.
+              </p>
+            )}
           </div>
         </div>
         {pagination && (

frontend/src/pages/Channels.tsx

@@ -59,7 +59,6 @@ const Channels = () => {
 
   const channels = channelListResponseData?.data;
   const pagination = channelListResponseData?.paginate;
-  const hasChannels = channels?.length !== 0;
 
   const handleUserConfigUpdate = async (config: Partial<UserConfigType>) => {
     const updatedUserConfig = await updateUserConfig(config);
@@ -195,9 +194,7 @@ const Channels = () => {
         </div>
 
         <div className={`channel-list ${userConfig.view_style_channel}`}>
-          {!hasChannels && <h2>No channels found...</h2>}
-
-          {hasChannels && <ChannelList channelList={channels} refreshChannelList={setRefresh} />}
+          <ChannelList channelList={channels} refreshChannelList={setRefresh} />
         </div>
 
         {pagination && (

frontend/src/pages/Home.tsx

@@ -197,23 +197,17 @@ const Home = () => {
 
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${userConfig.view_style_home} ${gridViewGrid}`}>
-          {!hasVideos && (
-            <>
-              <h2>No videos found...</h2>
-              <p>
-                If you've already added a channel or playlist, try going to the{' '}
-                <Link to={Routes.Downloads}>downloads page</Link> to start the scan and download
-                tasks.
-              </p>
-            </>
-          )}
-
-          {hasVideos && (
-            <VideoList
+          <VideoList
               videoList={videoList}
               viewStyle={userConfig.view_style_home}
               refreshVideoList={setRefreshVideoList}
             />
+          {!hasVideos && (
+            <p>
+              If you've already added a channel or playlist, try going to the{' '}
+              <Link to={Routes.Downloads}>downloads page</Link> to start the scan and download
+              tasks.
+            </p>
           )}
         </div>
       </div>

frontend/src/pages/Playlist.tsx

@@ -349,16 +349,21 @@ const Playlist = () => {
 
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${viewStyle} ${gridViewGrid}`}>
+          <VideoList
+              videoList={videos}
+              viewStyle={viewStyle}
+              playlistId={playlistId}
+              showReorderButton={isCustomPlaylist}
+              refreshVideoList={setRefresh}
+            />
           {videoInPlaylistCount === 0 && (
             <>
-              <h2>No videos found...</h2>
               {isCustomPlaylist && (
                 <p>
                   Try going to the <a href="{% url 'home' %}">home page</a> to add videos to this
                   playlist.
                 </p>
               )}
-
               {!isCustomPlaylist && (
                 <p>
                   Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the
@@ -367,15 +372,6 @@ const Playlist = () => {
               )}
             </>
           )}
-          {videoInPlaylistCount !== 0 && (
-            <VideoList
-              videoList={videos}
-              viewStyle={viewStyle}
-              playlistId={playlistId}
-              showReorderButton={isCustomPlaylist}
-              refreshVideoList={setRefresh}
-            />
-          )}
         </div>
       </div>
 

frontend/src/pages/Playlists.tsx

@@ -38,8 +38,6 @@ const Playlists = () => {
   const playlistList = playlistResponseData?.data;
   const pagination = playlistResponseData?.paginate;
 
-  const hasPlaylists = playlistResponseData?.data?.length !== 0;
-
   const viewStyle = userConfig.view_style_playlist;
   const showSubedOnly = userConfig.show_subed_only;
 
@@ -197,9 +195,7 @@ const Playlists = () => {
         </div>
 
         <div className={`playlist-list ${viewStyle}`}>
-          {!hasPlaylists && <h2>No playlists found...</h2>}
-
-          {hasPlaylists && <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />}
+          <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />
         </div>
       </div>