New: Add button to close side bar

Closes #7757

frontend/src/App/AppUpdatedModalContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
@@ -9,6 +9,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds } from 'Helpers/Props';
+import { fetchUpdates } from 'Store/Actions/systemActions';
 import UpdateChanges from 'System/Updates/UpdateChanges';
 import useUpdates from 'System/Updates/useUpdates';
 import Update from 'typings/Update';
@@ -63,8 +64,9 @@ interface AppUpdatedModalContentProps {
 }
 
 function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
+  const dispatch = useDispatch();
   const { version, prevVersion } = useSelector((state: AppState) => state.app);
-  const { isFetched, error, data, refetch } = useUpdates();
+  const { isFetched, error, data } = useUpdates();
   const previousVersion = usePrevious(version);
 
   const { onModalClose } = props;
@@ -75,11 +77,15 @@ function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
     window.location.href = `${window.Sonarr.urlBase}/system/updates`;
   }, []);
 
+  useEffect(() => {
+    dispatch(fetchUpdates());
+  }, [dispatch]);
+
   useEffect(() => {
     if (version !== previousVersion) {
-      refetch();
+      dispatch(fetchUpdates());
     }
-  }, [version, previousVersion, refetch]);
+  }, [version, previousVersion, dispatch]);
 
   return (
     <ModalContent onModalClose={onModalClose}>

frontend/src/Components/Page/Header/PageHeader.css

@@ -1,5 +1,4 @@
 .header {
-  z-index: 3;
   display: flex;
   align-items: center;
   flex: 0 0 auto;

frontend/src/Components/Page/Sidebar/PageSidebar.css

@@ -7,6 +7,40 @@
   transform: translateX(0);
 }
 
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $headerHeight;
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+}
+
+.logoLink {
+  line-height: 0;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+}
+
+.sidebarCloseButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  margin-right: 15px;
+  color: #e1e2e3;
+  text-align: center;
+
+  &:hover {
+    color: var(--sonarrBlue);
+  }
+}
+
 .sidebar {
   display: flex;
   flex-direction: column;

frontend/src/Components/Page/Sidebar/PageSidebar.css.d.ts

@@ -1,8 +1,13 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'logo': string;
+  'logoContainer': string;
+  'logoLink': string;
   'sidebar': string;
+  'sidebarCloseButton': string;
   'sidebarContainer': string;
+  'sidebarHeader': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Page/Sidebar/PageSidebar.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React, {
   useCallback,
   useEffect,
@@ -11,6 +10,8 @@ import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router';
 import QueueStatus from 'Activity/Queue/Status/QueueStatus';
 import { IconName } from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
 import OverlayScroller from 'Components/Scroller/OverlayScroller';
 import Scroller from 'Components/Scroller/Scroller';
 import usePrevious from 'Helpers/Hooks/usePrevious';
@@ -230,10 +231,6 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
     transition: 'none',
     transform: isSidebarVisible ? 0 : SIDEBAR_WIDTH * -1,
   });
-  const [sidebarStyle, setSidebarStyle] = useState({
-    top: dimensions.headerHeight,
-    height: `${window.innerHeight - HEADER_HEIGHT}px`,
-  });
 
   const urlBase = window.Sonarr.urlBase;
   const pathname = urlBase
@@ -299,22 +296,6 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
     dispatch(setIsSidebarVisible({ isSidebarVisible: false }));
   }, [dispatch]);
 
-  const handleWindowScroll = useCallback(() => {
-    const windowScroll =
-      window.scrollY == null
-        ? document.documentElement.scrollTop
-        : window.scrollY;
-    const sidebarTop = Math.max(HEADER_HEIGHT - windowScroll, 0);
-    const sidebarHeight = window.innerHeight - sidebarTop;
-
-    if (isSmallScreen) {
-      setSidebarStyle({
-        top: `${sidebarTop}px`,
-        height: `${sidebarHeight}px`,
-      });
-    }
-  }, [isSmallScreen]);
-
   const handleTouchStart = useCallback(
     (event: TouchEvent) => {
       const touches = event.touches;
@@ -396,10 +377,13 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
     touchStartY.current = null;
   }, []);
 
+  const handleSidebarClosePress = useCallback(() => {
+    dispatch(setIsSidebarVisible({ isSidebarVisible: false }));
+  }, [dispatch]);
+
   useEffect(() => {
     if (isSmallScreen) {
       window.addEventListener('click', handleWindowClick, { capture: true });
-      window.addEventListener('scroll', handleWindowScroll);
       window.addEventListener('touchstart', handleTouchStart);
       window.addEventListener('touchmove', handleTouchMove);
       window.addEventListener('touchend', handleTouchEnd);
@@ -408,7 +392,6 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
 
     return () => {
       window.removeEventListener('click', handleWindowClick, { capture: true });
-      window.removeEventListener('scroll', handleWindowScroll);
       window.removeEventListener('touchstart', handleTouchStart);
       window.removeEventListener('touchmove', handleTouchMove);
       window.removeEventListener('touchend', handleTouchEnd);
@@ -417,7 +400,6 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
   }, [
     isSmallScreen,
     handleWindowClick,
-    handleWindowScroll,
     handleTouchStart,
     handleTouchMove,
     handleTouchEnd,
@@ -456,13 +438,37 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
   return (
     <div
       ref={sidebarRef}
-      className={classNames(styles.sidebarContainer)}
+      className={styles.sidebarContainer}
       style={containerStyle}
     >
+      {isSmallScreen ? (
+        <div className={styles.sidebarHeader}>
+          <div className={styles.logoContainer}>
+            <Link className={styles.logoLink} to="/">
+              <img
+                className={styles.logo}
+                src={`${window.Sonarr.urlBase}/Content/Images/logo.svg`}
+                alt="Sonarr Logo"
+              />
+            </Link>
+          </div>
+
+          <IconButton
+            className={styles.sidebarCloseButton}
+            name={icons.CLOSE}
+            aria-label={translate('Close')}
+            size={20}
+            onPress={handleSidebarClosePress}
+          />
+        </div>
+      ) : null}
+
       <ScrollerComponent
         className={styles.sidebar}
         scrollDirection="vertical"
-        style={sidebarStyle}
+        style={{
+          height: `${window.innerHeight - HEADER_HEIGHT}px`,
+        }}
       >
         <div>
           {LINKS.map((link) => {

frontend/src/Store/Actions/systemActions.js

@@ -62,6 +62,20 @@ export const defaultState = {
     isPopulated: false,
     error: null,
     items: []
+  },
+
+  logFiles: {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    items: []
+  },
+
+  updateLogFiles: {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    items: []
   }
 };
 
@@ -80,6 +94,11 @@ export const RESTORE_BACKUP = 'system/backups/restoreBackup';
 export const CLEAR_RESTORE_BACKUP = 'system/backups/clearRestoreBackup';
 export const DELETE_BACKUP = 'system/backups/deleteBackup';
 
+export const FETCH_UPDATES = 'system/updates/fetchUpdates';
+
+export const FETCH_LOG_FILES = 'system/logFiles/fetchLogFiles';
+export const FETCH_UPDATE_LOG_FILES = 'system/updateLogFiles/fetchUpdateLogFiles';
+
 export const RESTART = 'system/restart';
 export const SHUTDOWN = 'system/shutdown';
 
@@ -98,6 +117,11 @@ export const restoreBackup = createThunk(RESTORE_BACKUP);
 export const clearRestoreBackup = createAction(CLEAR_RESTORE_BACKUP);
 export const deleteBackup = createThunk(DELETE_BACKUP);
 
+export const fetchUpdates = createThunk(FETCH_UPDATES);
+
+export const fetchLogFiles = createThunk(FETCH_LOG_FILES);
+export const fetchUpdateLogFiles = createThunk(FETCH_UPDATE_LOG_FILES);
+
 export const restart = createThunk(RESTART);
 export const shutdown = createThunk(SHUTDOWN);
 
@@ -176,6 +200,10 @@ export const actionHandlers = handleThunks({
 
   [DELETE_BACKUP]: createRemoveItemHandler(backupsSection, '/system/backup'),
 
+  [FETCH_UPDATES]: createFetchHandler('system.updates', '/update'),
+  [FETCH_LOG_FILES]: createFetchHandler('system.logFiles', '/log/file'),
+  [FETCH_UPDATE_LOG_FILES]: createFetchHandler('system.updateLogFiles', '/log/file/update'),
+
   [RESTART]: function(getState, payload, dispatch) {
     const promise = createAjaxRequest({
       url: '/system/restart',

frontend/src/System/Logs/App/AppLogFiles.tsx

@@ -1,39 +1,46 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchLogFiles } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import LogFiles from '../LogFiles';
-import useLogFiles from '../useLogFiles';
 
 function AppLogFiles() {
   const dispatch = useDispatch();
-  const { data = [], isFetching, refetch } = useLogFiles();
+  const { isFetching, items } = useSelector(
+    (state: AppState) => state.system.logFiles
+  );
 
   const isDeleteFilesExecuting = useSelector(
     createCommandExecutingSelector(commandNames.DELETE_LOG_FILES)
   );
 
   const handleRefreshPress = useCallback(() => {
-    refetch();
-  }, [refetch]);
+    dispatch(fetchLogFiles());
+  }, [dispatch]);
 
   const handleDeleteFilesPress = useCallback(() => {
     dispatch(
       executeCommand({
         name: commandNames.DELETE_LOG_FILES,
         commandFinished: () => {
-          refetch();
+          dispatch(fetchLogFiles());
         },
       })
     );
-  }, [dispatch, refetch]);
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchLogFiles());
+  }, [dispatch]);
 
   return (
     <LogFiles
       isDeleteFilesExecuting={isDeleteFilesExecuting}
       isFetching={isFetching}
-      items={data}
+      items={items}
       type="app"
       onRefreshPress={handleRefreshPress}
       onDeleteFilesPress={handleDeleteFilesPress}

frontend/src/System/Logs/Update/UpdateLogFiles.tsx

@@ -1,39 +1,46 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchUpdateLogFiles } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import LogFiles from '../LogFiles';
-import { useUpdateLogFiles } from '../useLogFiles';
 
 function UpdateLogFiles() {
   const dispatch = useDispatch();
-  const { data = [], isFetching, refetch } = useUpdateLogFiles();
+  const { isFetching, items } = useSelector(
+    (state: AppState) => state.system.updateLogFiles
+  );
 
   const isDeleteFilesExecuting = useSelector(
     createCommandExecutingSelector(commandNames.DELETE_UPDATE_LOG_FILES)
   );
 
   const handleRefreshPress = useCallback(() => {
-    refetch();
-  }, [refetch]);
+    dispatch(fetchUpdateLogFiles());
+  }, [dispatch]);
 
   const handleDeleteFilesPress = useCallback(() => {
     dispatch(
       executeCommand({
         name: commandNames.DELETE_UPDATE_LOG_FILES,
         commandFinished: () => {
-          refetch();
+          dispatch(fetchUpdateLogFiles());
         },
       })
     );
-  }, [dispatch, refetch]);
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchUpdateLogFiles());
+  }, [dispatch]);
 
   return (
     <LogFiles
       isDeleteFilesExecuting={isDeleteFilesExecuting}
       isFetching={isFetching}
-      items={data}
+      items={items}
       type="update"
       onRefreshPress={handleRefreshPress}
       onDeleteFilesPress={handleDeleteFilesPress}

frontend/src/System/Logs/useLogFiles.ts

@@ -1,14 +0,0 @@
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import LogFile from 'typings/LogFile';
-
-export default function useLogFiles() {
-  return useApiQuery<LogFile[]>({
-    path: '/log/file',
-  });
-}
-
-export function useUpdateLogFiles() {
-  return useApiQuery<LogFile[]>({
-    path: '/log/file/update',
-  });
-}

frontend/src/System/Updates/Updates.tsx

@@ -15,6 +15,7 @@ import { icons, kinds } from 'Helpers/Props';
 import useUpdateSettings from 'Settings/General/useUpdateSettings';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
+import { fetchUpdates } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -113,6 +114,7 @@ function Updates() {
   }, [setIsMajorUpdateModalOpen]);
 
   useEffect(() => {
+    dispatch(fetchUpdates());
     dispatch(fetchGeneralSettings());
   }, [dispatch]);
 

src/Sonarr.Api.V5/Logs/LogFileController.cs

@@ -1,41 +0,0 @@
-using NzbDrone.Common.Disk;
-using NzbDrone.Common.EnvironmentInfo;
-using NzbDrone.Common.Extensions;
-using NzbDrone.Core.Configuration;
-using Sonarr.Http;
-
-namespace Sonarr.Api.V5.Logs;
-
-[V5ApiController("log/file")]
-public class LogFileController : LogFileControllerBase
-{
-    private readonly IAppFolderInfo _appFolderInfo;
-    private readonly IDiskProvider _diskProvider;
-
-    public LogFileController(IAppFolderInfo appFolderInfo,
-                         IDiskProvider diskProvider,
-                         IConfigFileProvider configFileProvider)
-        : base(diskProvider, configFileProvider, "")
-    {
-        _appFolderInfo = appFolderInfo;
-        _diskProvider = diskProvider;
-    }
-
-    protected override IEnumerable<string> GetLogFiles()
-    {
-        return _diskProvider.GetFiles(_appFolderInfo.GetLogFolder(), false);
-    }
-
-    protected override string GetLogFilePath(string filename)
-    {
-        return Path.Combine(_appFolderInfo.GetLogFolder(), filename);
-    }
-
-    protected override string DownloadUrlRoot
-    {
-        get
-        {
-            return "logfile";
-        }
-    }
-}

src/Sonarr.Api.V5/Logs/LogFileControllerBase.cs

@@ -1,71 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-using NLog;
-using NzbDrone.Common.Disk;
-using NzbDrone.Core.Configuration;
-
-namespace Sonarr.Api.V5.Logs;
-
-public abstract class LogFileControllerBase : Controller
-{
-    protected const string LOGFILE_ROUTE = @"/(?<filename>[-.a-zA-Z0-9]+?\.txt)";
-    protected string _resource;
-
-    private readonly IDiskProvider _diskProvider;
-    private readonly IConfigFileProvider _configFileProvider;
-
-    public LogFileControllerBase(IDiskProvider diskProvider,
-                             IConfigFileProvider configFileProvider,
-                             string resource)
-    {
-        _diskProvider = diskProvider;
-        _configFileProvider = configFileProvider;
-        _resource = resource;
-    }
-
-    [HttpGet]
-    [Produces("application/json")]
-    public List<LogFileResource> GetLogFilesResponse()
-    {
-        var result = new List<LogFileResource>();
-
-        var files = GetLogFiles().ToList();
-
-        for (var i = 0; i < files.Count; i++)
-        {
-            var file = files[i];
-            var filename = Path.GetFileName(file);
-
-            result.Add(new LogFileResource
-            {
-                Id = i + 1,
-                Filename = filename,
-                LastWriteTime = _diskProvider.FileGetLastWrite(file),
-                ContentsUrl = string.Format("{0}/api/v1/{1}/{2}", _configFileProvider.UrlBase, _resource, filename),
-                DownloadUrl = string.Format("{0}/{1}/{2}", _configFileProvider.UrlBase, DownloadUrlRoot, filename)
-            });
-        }
-
-        return result.OrderByDescending(l => l.LastWriteTime).ToList();
-    }
-
-    [HttpGet(@"{filename:regex([[-.a-zA-Z0-9]]+?\.txt)}")]
-    [Produces("text/plain")]
-    public IActionResult GetLogFileResponse(string filename)
-    {
-        LogManager.Flush();
-
-        var filePath = GetLogFilePath(filename);
-
-        if (!_diskProvider.FileExists(filePath))
-        {
-            return NotFound();
-        }
-
-        return PhysicalFile(filePath, "text/plain");
-    }
-
-    protected abstract IEnumerable<string> GetLogFiles();
-    protected abstract string GetLogFilePath(string filename);
-
-    protected abstract string DownloadUrlRoot { get; }
-}

src/Sonarr.Api.V5/Logs/LogFileResource.cs

@@ -1,11 +0,0 @@
-using Sonarr.Http.REST;
-
-namespace Sonarr.Api.V5.Logs;
-
-public class LogFileResource : RestResource
-{
-    public required string Filename { get; set; }
-    public required DateTime LastWriteTime { get; set; }
-    public required string ContentsUrl { get; set; }
-    public required string DownloadUrl { get; set; }
-}

src/Sonarr.Api.V5/Logs/UpdateLogFileController.cs

@@ -1,49 +0,0 @@
-using System.Text.RegularExpressions;
-using NzbDrone.Common.Disk;
-using NzbDrone.Common.EnvironmentInfo;
-using NzbDrone.Common.Extensions;
-using NzbDrone.Core.Configuration;
-using Sonarr.Http;
-
-namespace Sonarr.Api.V5.Logs;
-
-[V5ApiController("log/file/update")]
-public class UpdateLogFileController : LogFileControllerBase
-{
-    private readonly IAppFolderInfo _appFolderInfo;
-    private readonly IDiskProvider _diskProvider;
-
-    public UpdateLogFileController(IAppFolderInfo appFolderInfo,
-                               IDiskProvider diskProvider,
-                               IConfigFileProvider configFileProvider)
-        : base(diskProvider, configFileProvider, "update")
-    {
-        _appFolderInfo = appFolderInfo;
-        _diskProvider = diskProvider;
-    }
-
-    protected override IEnumerable<string> GetLogFiles()
-    {
-        if (!_diskProvider.FolderExists(_appFolderInfo.GetUpdateLogFolder()))
-        {
-            return Enumerable.Empty<string>();
-        }
-
-        return _diskProvider.GetFiles(_appFolderInfo.GetUpdateLogFolder(), false)
-                                 .Where(f => Regex.IsMatch(Path.GetFileName(f), LOGFILE_ROUTE.TrimStart('/'), RegexOptions.IgnoreCase))
-                                 .ToList();
-    }
-
-    protected override string GetLogFilePath(string filename)
-    {
-        return Path.Combine(_appFolderInfo.GetUpdateLogFolder(), filename);
-    }
-
-    protected override string DownloadUrlRoot
-    {
-        get
-        {
-            return "updatelogfile";
-        }
-    }
-}