New: Add button to close side bar

Closes #7757

frontend/src/Activity/History/Details/HistoryDetailsModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React from 'react';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import Modal from 'Components/Modal/Modal';
@@ -9,7 +9,6 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
 import { HistoryData, HistoryEventType } from 'typings/History';
 import translate from 'Utilities/String/translate';
-import { useMarkAsFailed } from '../useHistory';
 import HistoryDetails from './HistoryDetails';
 import styles from './HistoryDetailsModal.css';
 
@@ -34,32 +33,26 @@ function getHeaderTitle(eventType: HistoryEventType) {
 
 interface HistoryDetailsModalProps {
   isOpen: boolean;
-  id: number;
   eventType: HistoryEventType;
   sourceTitle: string;
   data: HistoryData;
   downloadId?: string;
+  isMarkingAsFailed: boolean;
+  onMarkAsFailedPress: () => void;
   onModalClose: () => void;
 }
 
 function HistoryDetailsModal(props: HistoryDetailsModalProps) {
-  const { isOpen, id, eventType, sourceTitle, data, downloadId, onModalClose } =
-    props;
-
-  const { markAsFailed, isMarkingAsFailed, markAsFailedError } =
-    useMarkAsFailed(id);
-
-  const wasMarkingAsFailed = useRef(isMarkingAsFailed);
-
-  const handleMarkAsFailedPress = useCallback(() => {
-    markAsFailed();
-  }, [markAsFailed]);
-
-  useEffect(() => {
-    if (wasMarkingAsFailed && !isMarkingAsFailed && !markAsFailedError) {
-      onModalClose();
-    }
-  }, [wasMarkingAsFailed, isMarkingAsFailed, markAsFailedError, onModalClose]);
+  const {
+    isOpen,
+    eventType,
+    sourceTitle,
+    data,
+    downloadId,
+    isMarkingAsFailed = false,
+    onMarkAsFailedPress,
+    onModalClose,
+  } = props;
 
   return (
     <Modal isOpen={isOpen} onModalClose={onModalClose}>
@@ -81,7 +74,7 @@ function HistoryDetailsModal(props: HistoryDetailsModalProps) {
               className={styles.markAsFailedButton}
               kind={kinds.DANGER}
               isSpinning={isMarkingAsFailed}
-              onPress={handleMarkAsFailedPress}
+              onPress={onMarkAsFailedPress}
             >
               {translate('MarkAsFailed')}
             </SpinnerButton>

frontend/src/Activity/History/History.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  setQueueOption,
-  setQueueOptions,
-} from 'Activity/Queue/queueOptionsStore';
+import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -16,11 +13,20 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
+import usePaging from 'Components/Table/usePaging';
 import createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
 import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
 import { align, icons, kinds } from 'Helpers/Props';
 import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
 import { clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
+import {
+  clearHistory,
+  fetchHistory,
+  gotoHistoryPage,
+  setHistoryFilter,
+  setHistorySort,
+  setHistoryTableOption,
+} from 'Store/Actions/historyActions';
 import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import HistoryItem from 'typings/History';
 import { TableOptionsChangePayload } from 'typings/Table';
@@ -31,90 +37,100 @@ import {
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
 import HistoryFilterModal from './HistoryFilterModal';
-import { useHistoryOptions } from './historyOptionsStore';
 import HistoryRow from './HistoryRow';
-import useHistory, { useFilters } from './useHistory';
 
 function History() {
+  const requestCurrentPage = useCurrentPage();
+
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    error,
-    isFetching,
-    isFetched,
-    isLoading,
-    page,
-    goToPage,
-    refetch,
-  } = useHistory();
-
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useHistoryOptions();
-
-  const filters = useFilters();
-
-  const requestCurrentPage = useCurrentPage();
+  } = useSelector((state: AppState) => state.history);
 
   const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
     useSelector(createEpisodesFetchingSelector());
   const customFilters = useSelector(createCustomFiltersSelector('history'));
   const dispatch = useDispatch();
 
-  const isFetchingAny = isLoading || isEpisodesFetching;
-  const isAllPopulated = isFetched && (isEpisodesPopulated || !records.length);
+  const isFetchingAny = isFetching || isEpisodesFetching;
+  const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
   const hasError = error || episodesError;
 
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoHistoryPage,
+  });
+
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
+      dispatch(setHistoryFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setQueueOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string) => {
+      dispatch(setHistorySort({ sortKey }));
+    },
+    [dispatch]
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      dispatch(setHistoryTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoHistoryPage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
-  const handleRefreshPress = useCallback(() => {
-    goToPage(1);
-    refetch();
-  }, [goToPage, refetch]);
-
   useEffect(() => {
+    if (requestCurrentPage) {
+      dispatch(fetchHistory());
+    } else {
+      dispatch(gotoHistoryPage({ page: 1 }));
+    }
+
     return () => {
+      dispatch(clearHistory());
       dispatch(clearEpisodes());
       dispatch(clearEpisodeFiles());
     };
   }, [requestCurrentPage, dispatch]);
 
   useEffect(() => {
-    const episodeIds = selectUniqueIds<HistoryItem, number>(
-      records,
-      'episodeId'
-    );
+    const episodeIds = selectUniqueIds<HistoryItem, number>(items, 'episodeId');
 
     if (episodeIds.length) {
       dispatch(fetchEpisodes({ episodeIds }));
     } else {
       dispatch(clearEpisodes());
     }
-  }, [records, dispatch]);
+  }, [items, dispatch]);
 
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchHistory());
     };
 
     registerPagePopulator(repopulate);
@@ -122,7 +138,7 @@ function History() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
 
   return (
     <PageContent title={translate('History')}>
@@ -132,7 +148,7 @@ function History() {
             label={translate('Refresh')}
             iconName={icons.REFRESH}
             isSpinning={isFetching}
-            onPress={handleRefreshPress}
+            onPress={handleFirstPagePress}
           />
         </PageToolbarSection>
 
@@ -170,12 +186,12 @@ function History() {
           // If history isPopulated and it's empty show no history found and don't
           // wait for the episodes to populate because they are never coming.
 
-          isFetched && !hasError && !records.length ? (
+          isPopulated && !hasError && !items.length ? (
             <Alert kind={kinds.INFO}>{translate('NoHistoryFound')}</Alert>
           ) : null
         }
 
-        {isAllPopulated && !hasError && records.length ? (
+        {isAllPopulated && !hasError && items.length ? (
           <div>
             <Table
               columns={columns}
@@ -186,7 +202,7 @@ function History() {
               onSortPress={handleSortPress}
             >
               <TableBody>
-                {records.map((item) => {
+                {items.map((item) => {
                   return (
                     <HistoryRow key={item.id} columns={columns} {...item} />
                   );
@@ -199,7 +215,11 @@ function History() {
               totalPages={totalPages}
               totalRecords={totalRecords}
               isFetching={isFetching}
-              onPageSelect={goToPage}
+              onFirstPagePress={handleFirstPagePress}
+              onPreviousPagePress={handlePreviousPagePress}
+              onNextPagePress={handleNextPagePress}
+              onLastPagePress={handleLastPagePress}
+              onPageSelect={handlePageSelect}
             />
           </div>
         ) : null}

frontend/src/Activity/History/HistoryFilterModal.tsx

@@ -1,25 +1,48 @@
 import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setHistoryOption } from './historyOptionsStore';
-import useHistory, { FILTER_BUILDER } from './useHistory';
+import { setHistoryFilter } from 'Store/Actions/historyActions';
+
+function createHistorySelector() {
+  return createSelector(
+    (state: AppState) => state.history.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.history.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
 
 type HistoryFilterModalProps = FilterModalProps<History>;
 
 export default function HistoryFilterModal(props: HistoryFilterModalProps) {
-  const { records } = useHistory();
+  const sectionItems = useSelector(createHistorySelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setHistoryOption('selectedFilterKey', selectedFilterKey);
+    (payload: { selectedFilterKey: string | number }) => {
+      dispatch(setHistoryFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
       customFilterType="history"
       dispatchSetFilter={dispatchSetFilter}
     />

frontend/src/Activity/History/HistoryRow.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -12,11 +13,13 @@ import EpisodeQuality from 'Episode/EpisodeQuality';
 import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
 import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
 import useEpisode from 'Episode/useEpisode';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import { icons, tooltipPositions } from 'Helpers/Props';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
 import CustomFormat from 'typings/CustomFormat';
 import { HistoryData, HistoryEventType } from 'typings/History';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
@@ -58,9 +61,13 @@ function HistoryRow(props: HistoryRowProps) {
     date,
     data,
     downloadId,
+    isMarkingAsFailed = false,
+    markAsFailedError,
     columns,
   } = props;
 
+  const wasMarkingAsFailed = usePrevious(isMarkingAsFailed);
+  const dispatch = useDispatch();
   const series = useSeries(seriesId);
   const episode = useEpisode(episodeId, 'episodes');
 
@@ -74,6 +81,23 @@ function HistoryRow(props: HistoryRowProps) {
     setIsDetailsModalOpen(false);
   }, [setIsDetailsModalOpen]);
 
+  const handleMarkAsFailedPress = useCallback(() => {
+    dispatch(markAsFailed({ id }));
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    if (wasMarkingAsFailed && !isMarkingAsFailed && !markAsFailedError) {
+      setIsDetailsModalOpen(false);
+      dispatch(fetchHistory());
+    }
+  }, [
+    wasMarkingAsFailed,
+    isMarkingAsFailed,
+    markAsFailedError,
+    setIsDetailsModalOpen,
+    dispatch,
+  ]);
+
   if (!series || !episode) {
     return null;
   }
@@ -230,12 +254,13 @@ function HistoryRow(props: HistoryRowProps) {
       })}
 
       <HistoryDetailsModal
-        id={id}
         isOpen={isDetailsModalOpen}
         eventType={eventType}
         sourceTitle={sourceTitle}
         data={data}
         downloadId={downloadId}
+        isMarkingAsFailed={isMarkingAsFailed}
+        onMarkAsFailedPress={handleMarkAsFailedPress}
         onModalClose={handleDetailsModalClose}
       />
     </TableRow>

frontend/src/Activity/History/historyOptionsStore.ts

@@ -1,109 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-export type HistoryOptions = PageableOptions;
-
-const { useOptions, useOption, setOptions, setOption } =
-  createOptionsStore<HistoryOptions>('history_options', () => {
-    return {
-      includeUnknownSeriesItems: true,
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'eventType',
-          label: '',
-          columnLabel: () => translate('EventType'),
-          isVisible: true,
-          isModifiable: false,
-        },
-        {
-          name: 'series.sortTitle',
-          label: () => translate('Series'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episode',
-          label: () => translate('Episode'),
-          isVisible: true,
-        },
-        {
-          name: 'episodes.title',
-          label: () => translate('EpisodeTitle'),
-          isVisible: true,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'date',
-          label: () => translate('Date'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'downloadClient',
-          label: () => translate('DownloadClient'),
-          isVisible: false,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isVisible: false,
-        },
-        {
-          name: 'releaseGroup',
-          label: () => translate('ReleaseGroup'),
-          isVisible: false,
-        },
-        {
-          name: 'sourceTitle',
-          label: () => translate('SourceTitle'),
-          isVisible: false,
-        },
-        {
-          name: 'customFormatScore',
-          columnLabel: () => translate('CustomFormatScore'),
-          label: React.createElement(Icon, {
-            name: icons.SCORE,
-            title: () => translate('CustomFormatScore'),
-          }),
-          isVisible: false,
-        },
-        {
-          name: 'details',
-          label: '',
-          columnLabel: () => translate('Details'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-    };
-  });
-
-export const useHistoryOptions = useOptions;
-export const setHistoryOptions = setOptions;
-export const useHistoryOption = useOption;
-export const setHistoryOption = setOption;

frontend/src/Activity/History/useHistory.ts

@@ -1,186 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import History from 'typings/History';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useHistoryOptions } from './historyOptionsStore';
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-  {
-    key: 'grabbed',
-    label: () => translate('Grabbed'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '1',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'imported',
-    label: () => translate('Imported'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '3',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'failed',
-    label: () => translate('Failed'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '4',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'deleted',
-    label: () => translate('Deleted'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '5',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'renamed',
-    label: () => translate('Renamed'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '6',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'ignored',
-    label: () => translate('Ignored'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '7',
-        type: 'equal',
-      },
-    ],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<History>[] = [
-  {
-    name: 'eventType',
-    label: () => translate('EventType'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.HISTORY_EVENT_TYPE,
-  },
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'quality',
-    label: () => translate('Quality'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.QUALITY,
-  },
-  {
-    name: 'languages',
-    label: () => translate('Languages'),
-    type: 'contains',
-    valueType: filterBuilderValueTypes.LANGUAGE,
-  },
-];
-
-const useHistory = () => {
-  const { page, goToPage } = usePage('history');
-  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
-    useHistoryOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('history')
-  ) as CustomFilter[];
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<History>({
-    path: '/history',
-    page,
-    pageSize,
-    filters,
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  const handleGoToPage = useCallback(
-    (page: number) => {
-      goToPage(page);
-    },
-    [goToPage]
-  );
-
-  return {
-    ...query,
-    goToPage: handleGoToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useHistory;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-export const useMarkAsFailed = (id: number) => {
-  const queryClient = useQueryClient();
-  const [error, setError] = useState<string | null>(null);
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/history/failed/${id}`,
-    method: 'POST',
-    mutationOptions: {
-      onMutate: () => {
-        setError(null);
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/history'] });
-      },
-      onError: () => {
-        setError('Error marking history item as failed');
-      },
-    },
-  });
-
-  return {
-    markAsFailed: mutate,
-    isMarkingAsFailed: isPending,
-    markAsFailedError: error,
-  };
-};

frontend/src/App/State/AppState.ts

@@ -90,6 +90,7 @@ interface AppState {
   episodeHistory: HistoryAppState;
   episodes: EpisodesAppState;
   episodesSelection: EpisodesAppState;
+  history: HistoryAppState;
   importSeries: ImportSeriesAppState;
   interactiveImport: InteractiveImportAppState;
   oAuth: OAuthAppState;

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/Helpers/Hooks/usePage.ts

@@ -5,14 +5,12 @@ import { create } from 'zustand';
 interface PageStore {
   blocklist: number;
   events: number;
-  history: number;
   queue: number;
 }
 
 const pageStore = create<PageStore>(() => ({
   blocklist: 1,
   events: 1,
-  history: 1,
   queue: 1,
 }));
 

frontend/src/Store/Actions/historyActions.js

@@ -0,0 +1,327 @@
+import React from 'react';
+import { createAction } from 'redux-actions';
+import Icon from 'Components/Icon';
+import { filterBuilderTypes, filterBuilderValueTypes, filterTypes, icons, sortDirections } from 'Helpers/Props';
+import { createThunk, handleThunks } from 'Store/thunks';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
+import serverSideCollectionHandlers from 'Utilities/State/serverSideCollectionHandlers';
+import translate from 'Utilities/String/translate';
+import { updateItem } from './baseActions';
+import createHandleActions from './Creators/createHandleActions';
+import createServerSideCollectionHandlers from './Creators/createServerSideCollectionHandlers';
+import createClearReducer from './Creators/Reducers/createClearReducer';
+import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptionReducer';
+
+//
+// Variables
+
+export const section = 'history';
+
+//
+// State
+
+export const defaultState = {
+  isFetching: false,
+  isPopulated: false,
+  error: null,
+  pageSize: 20,
+  sortKey: 'date',
+  sortDirection: sortDirections.DESCENDING,
+  items: [],
+
+  columns: [
+    {
+      name: 'eventType',
+      columnLabel: () => translate('EventType'),
+      isVisible: true,
+      isModifiable: false
+    },
+    {
+      name: 'series.sortTitle',
+      label: () => translate('Series'),
+      isSortable: true,
+      isVisible: true
+    },
+    {
+      name: 'episode',
+      label: () => translate('Episode'),
+      isVisible: true
+    },
+    {
+      name: 'episodes.title',
+      label: () => translate('EpisodeTitle'),
+      isVisible: true
+    },
+    {
+      name: 'languages',
+      label: () => translate('Languages'),
+      isVisible: false
+    },
+    {
+      name: 'quality',
+      label: () => translate('Quality'),
+      isVisible: true
+    },
+    {
+      name: 'customFormats',
+      label: () => translate('Formats'),
+      isSortable: false,
+      isVisible: true
+    },
+    {
+      name: 'date',
+      label: () => translate('Date'),
+      isSortable: true,
+      isVisible: true
+    },
+    {
+      name: 'downloadClient',
+      label: () => translate('DownloadClient'),
+      isVisible: false
+    },
+    {
+      name: 'indexer',
+      label: () => translate('Indexer'),
+      isVisible: false
+    },
+    {
+      name: 'releaseGroup',
+      label: () => translate('ReleaseGroup'),
+      isVisible: false
+    },
+    {
+      name: 'sourceTitle',
+      label: () => translate('SourceTitle'),
+      isVisible: false
+    },
+    {
+      name: 'customFormatScore',
+      columnLabel: () => translate('CustomFormatScore'),
+      label: React.createElement(Icon, {
+        name: icons.SCORE,
+        title: () => translate('CustomFormatScore')
+      }),
+      isVisible: false
+    },
+    {
+      name: 'details',
+      columnLabel: () => translate('Details'),
+      isVisible: true,
+      isModifiable: false
+    }
+  ],
+
+  selectedFilterKey: 'all',
+
+  filters: [
+    {
+      key: 'all',
+      label: () => translate('All'),
+      filters: []
+    },
+    {
+      key: 'grabbed',
+      label: () => translate('Grabbed'),
+      filters: [
+        {
+          key: 'eventType',
+          value: '1',
+          type: filterTypes.EQUAL
+        }
+      ]
+    },
+    {
+      key: 'imported',
+      label: () => translate('Imported'),
+      filters: [
+        {
+          key: 'eventType',
+          value: '3',
+          type: filterTypes.EQUAL
+        }
+      ]
+    },
+    {
+      key: 'failed',
+      label: () => translate('Failed'),
+      filters: [
+        {
+          key: 'eventType',
+          value: '4',
+          type: filterTypes.EQUAL
+        }
+      ]
+    },
+    {
+      key: 'deleted',
+      label: () => translate('Deleted'),
+      filters: [
+        {
+          key: 'eventType',
+          value: '5',
+          type: filterTypes.EQUAL
+        }
+      ]
+    },
+    {
+      key: 'renamed',
+      label: () => translate('Renamed'),
+      filters: [
+        {
+          key: 'eventType',
+          value: '6',
+          type: filterTypes.EQUAL
+        }
+      ]
+    },
+    {
+      key: 'ignored',
+      label: () => translate('Ignored'),
+      filters: [
+        {
+          key: 'eventType',
+          value: '7',
+          type: filterTypes.EQUAL
+        }
+      ]
+    }
+  ],
+
+  filterBuilderProps: [
+    {
+      name: 'eventType',
+      label: () => translate('EventType'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.HISTORY_EVENT_TYPE
+    },
+    {
+      name: 'seriesIds',
+      label: () => translate('Series'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.SERIES
+    },
+    {
+      name: 'quality',
+      label: () => translate('Quality'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.QUALITY
+    },
+    {
+      name: 'languages',
+      label: () => translate('Languages'),
+      type: filterBuilderTypes.CONTAINS,
+      valueType: filterBuilderValueTypes.LANGUAGE
+    }
+  ]
+
+};
+
+export const persistState = [
+  'history.pageSize',
+  'history.sortKey',
+  'history.sortDirection',
+  'history.selectedFilterKey',
+  'history.columns'
+];
+
+//
+// Actions Types
+
+export const FETCH_HISTORY = 'history/fetchHistory';
+export const GOTO_FIRST_HISTORY_PAGE = 'history/gotoHistoryFirstPage';
+export const GOTO_PREVIOUS_HISTORY_PAGE = 'history/gotoHistoryPreviousPage';
+export const GOTO_NEXT_HISTORY_PAGE = 'history/gotoHistoryNextPage';
+export const GOTO_LAST_HISTORY_PAGE = 'history/gotoHistoryLastPage';
+export const GOTO_HISTORY_PAGE = 'history/gotoHistoryPage';
+export const SET_HISTORY_SORT = 'history/setHistorySort';
+export const SET_HISTORY_FILTER = 'history/setHistoryFilter';
+export const SET_HISTORY_TABLE_OPTION = 'history/setHistoryTableOption';
+export const CLEAR_HISTORY = 'history/clearHistory';
+export const MARK_AS_FAILED = 'history/markAsFailed';
+
+//
+// Action Creators
+
+export const fetchHistory = createThunk(FETCH_HISTORY);
+export const gotoHistoryFirstPage = createThunk(GOTO_FIRST_HISTORY_PAGE);
+export const gotoHistoryPreviousPage = createThunk(GOTO_PREVIOUS_HISTORY_PAGE);
+export const gotoHistoryNextPage = createThunk(GOTO_NEXT_HISTORY_PAGE);
+export const gotoHistoryLastPage = createThunk(GOTO_LAST_HISTORY_PAGE);
+export const gotoHistoryPage = createThunk(GOTO_HISTORY_PAGE);
+export const setHistorySort = createThunk(SET_HISTORY_SORT);
+export const setHistoryFilter = createThunk(SET_HISTORY_FILTER);
+export const setHistoryTableOption = createAction(SET_HISTORY_TABLE_OPTION);
+export const clearHistory = createAction(CLEAR_HISTORY);
+export const markAsFailed = createThunk(MARK_AS_FAILED);
+
+//
+// Action Handlers
+
+export const actionHandlers = handleThunks({
+  ...createServerSideCollectionHandlers(
+    section,
+    '/history',
+    fetchHistory,
+    {
+      [serverSideCollectionHandlers.FETCH]: FETCH_HISTORY,
+      [serverSideCollectionHandlers.FIRST_PAGE]: GOTO_FIRST_HISTORY_PAGE,
+      [serverSideCollectionHandlers.PREVIOUS_PAGE]: GOTO_PREVIOUS_HISTORY_PAGE,
+      [serverSideCollectionHandlers.NEXT_PAGE]: GOTO_NEXT_HISTORY_PAGE,
+      [serverSideCollectionHandlers.LAST_PAGE]: GOTO_LAST_HISTORY_PAGE,
+      [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_HISTORY_PAGE,
+      [serverSideCollectionHandlers.SORT]: SET_HISTORY_SORT,
+      [serverSideCollectionHandlers.FILTER]: SET_HISTORY_FILTER
+    }),
+
+  [MARK_AS_FAILED]: function(getState, payload, dispatch) {
+    const id = payload.id;
+
+    dispatch(updateItem({
+      section,
+      id,
+      isMarkingAsFailed: true
+    }));
+
+    const promise = createAjaxRequest({
+      url: `/history/failed/${id}`,
+      method: 'POST',
+      dataType: 'json'
+    }).request;
+
+    promise.done(() => {
+      dispatch(updateItem({
+        section,
+        id,
+        isMarkingAsFailed: false,
+        markAsFailedError: null
+      }));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(updateItem({
+        section,
+        id,
+        isMarkingAsFailed: false,
+        markAsFailedError: xhr
+      }));
+    });
+  }
+});
+
+//
+// Reducers
+
+export const reducers = createHandleActions({
+
+  [SET_HISTORY_TABLE_OPTION]: createSetTableOptionReducer(section),
+
+  [CLEAR_HISTORY]: createClearReducer(section, {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    items: [],
+    totalPages: 0,
+    totalRecords: 0
+  })
+
+}, defaultState, section);

frontend/src/Store/Actions/index.js

@@ -7,6 +7,7 @@ import * as episodes from './episodeActions';
 import * as episodeFiles from './episodeFileActions';
 import * as episodeHistory from './episodeHistoryActions';
 import * as episodeSelection from './episodeSelectionActions';
+import * as history from './historyActions';
 import * as importSeries from './importSeriesActions';
 import * as interactiveImportActions from './interactiveImportActions';
 import * as oAuth from './oAuthActions';
@@ -34,6 +35,7 @@ export default [
   episodeFiles,
   episodeHistory,
   episodeSelection,
+  history,
   importSeries,
   interactiveImportActions,
   oAuth,

src/Sonarr.Api.V5/History/HistoryController.cs

@@ -1,134 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-using NzbDrone.Common.Extensions;
-using NzbDrone.Core.CustomFormats;
-using NzbDrone.Core.Datastore;
-using NzbDrone.Core.DecisionEngine.Specifications;
-using NzbDrone.Core.Download;
-using NzbDrone.Core.History;
-using NzbDrone.Core.Tv;
-using Sonarr.Api.V5.Episodes;
-using Sonarr.Api.V5.Series;
-using Sonarr.Http;
-using Sonarr.Http.Extensions;
-
-namespace Sonarr.Api.V5.History;
-
-[V5ApiController]
-public class HistoryController : Controller
-{
-    private readonly IHistoryService _historyService;
-    private readonly ICustomFormatCalculationService _formatCalculator;
-    private readonly IUpgradableSpecification _upgradableSpecification;
-    private readonly IFailedDownloadService _failedDownloadService;
-    private readonly ISeriesService _seriesService;
-
-    public HistoryController(IHistoryService historyService,
-                         ICustomFormatCalculationService formatCalculator,
-                         IUpgradableSpecification upgradableSpecification,
-                         IFailedDownloadService failedDownloadService,
-                         ISeriesService seriesService)
-    {
-        _historyService = historyService;
-        _formatCalculator = formatCalculator;
-        _upgradableSpecification = upgradableSpecification;
-        _failedDownloadService = failedDownloadService;
-        _seriesService = seriesService;
-    }
-
-    protected HistoryResource MapToResource(EpisodeHistory model, bool includeSeries, bool includeEpisode)
-    {
-        var resource = model.ToResource(_formatCalculator);
-
-        if (includeSeries)
-        {
-            resource.Series = model.Series.ToResource();
-        }
-
-        if (includeEpisode)
-        {
-            resource.Episode = model.Episode.ToResource();
-        }
-
-        if (model.Series != null)
-        {
-            resource.QualityCutoffNotMet = _upgradableSpecification.QualityCutoffNotMet(model.Series.QualityProfile.Value, model.Quality);
-        }
-
-        return resource;
-    }
-
-    [HttpGet]
-    [Produces("application/json")]
-    public PagingResource<HistoryResource> GetHistory([FromQuery] PagingRequestResource paging, bool includeSeries, bool includeEpisode, [FromQuery(Name = "eventType")] int[]? eventTypes, int? episodeId, string? downloadId, [FromQuery] int[]? seriesIds = null, [FromQuery] int[]? languages = null, [FromQuery] int[]? quality = null)
-    {
-        var pagingResource = new PagingResource<HistoryResource>(paging);
-        var pagingSpec = pagingResource.MapToPagingSpec<HistoryResource, EpisodeHistory>(
-            new HashSet<string>(StringComparer.OrdinalIgnoreCase)
-            {
-                "date",
-                "series.sortTitle"
-            },
-            "date",
-            SortDirection.Descending);
-
-        if (eventTypes != null && eventTypes.Any())
-        {
-            pagingSpec.FilterExpressions.Add(v => eventTypes.Contains((int)v.EventType));
-        }
-
-        if (episodeId.HasValue)
-        {
-            pagingSpec.FilterExpressions.Add(h => h.EpisodeId == episodeId);
-        }
-
-        if (downloadId.IsNotNullOrWhiteSpace())
-        {
-            pagingSpec.FilterExpressions.Add(h => h.DownloadId == downloadId);
-        }
-
-        if (seriesIds != null && seriesIds.Any())
-        {
-            pagingSpec.FilterExpressions.Add(h => seriesIds.Contains(h.SeriesId));
-        }
-
-        return pagingSpec.ApplyToPage(h => _historyService.Paged(pagingSpec, languages, quality), h => MapToResource(h, includeSeries, includeEpisode));
-    }
-
-    [HttpGet("since")]
-    [Produces("application/json")]
-    public List<HistoryResource> GetHistorySince(DateTime date, EpisodeHistoryEventType? eventType = null, bool includeSeries = false, bool includeEpisode = false)
-    {
-        return _historyService.Since(date, eventType).Select(h => MapToResource(h, includeSeries, includeEpisode)).ToList();
-    }
-
-    [HttpGet("series")]
-    [Produces("application/json")]
-    public List<HistoryResource> GetSeriesHistory(int seriesId, int? seasonNumber, EpisodeHistoryEventType? eventType = null, bool includeSeries = false, bool includeEpisode = false)
-    {
-        var series = _seriesService.GetSeries(seriesId);
-
-        if (seasonNumber.HasValue)
-        {
-            return _historyService.GetBySeason(seriesId, seasonNumber.Value, eventType).Select(h =>
-            {
-                h.Series = series;
-
-                return MapToResource(h, includeSeries, includeEpisode);
-            }).ToList();
-        }
-
-        return _historyService.GetBySeries(seriesId, eventType).Select(h =>
-        {
-            h.Series = series;
-
-            return MapToResource(h, includeSeries, includeEpisode);
-        }).ToList();
-    }
-
-    [HttpPost("failed/{id}")]
-    public ActionResult MarkAsFailed([FromRoute] int id)
-    {
-        _failedDownloadService.MarkAsFailed(id);
-        return NoContent();
-    }
-}

src/Sonarr.Api.V5/History/HistoryResource.cs

@@ -1,53 +0,0 @@
-using NzbDrone.Core.CustomFormats;
-using NzbDrone.Core.History;
-using NzbDrone.Core.Languages;
-using NzbDrone.Core.Qualities;
-using Sonarr.Api.V5.CustomFormats;
-using Sonarr.Api.V5.Episodes;
-using Sonarr.Api.V5.Series;
-using Sonarr.Http.REST;
-
-namespace Sonarr.Api.V5.History;
-
-public class HistoryResource : RestResource
-{
-    public int EpisodeId { get; set; }
-    public int SeriesId { get; set; }
-    public required string SourceTitle { get; set; }
-    public required List<Language> Languages { get; set; }
-    public required QualityModel Quality { get; set; }
-    public required List<CustomFormatResource> CustomFormats { get; set; }
-    public int CustomFormatScore { get; set; }
-    public bool QualityCutoffNotMet { get; set; }
-    public DateTime Date { get; set; }
-    public string? DownloadId { get; set; }
-    public EpisodeHistoryEventType EventType { get; set; }
-    public required Dictionary<string, string> Data { get; set; }
-    public EpisodeResource? Episode { get; set; }
-    public SeriesResource? Series { get; set; }
-}
-
-public static class HistoryResourceMapper
-{
-    public static HistoryResource ToResource(this EpisodeHistory model, ICustomFormatCalculationService formatCalculator)
-    {
-        var customFormats = formatCalculator.ParseCustomFormat(model, model.Series);
-        var customFormatScore = model.Series.QualityProfile.Value.CalculateCustomFormatScore(customFormats);
-
-        return new HistoryResource
-        {
-            Id = model.Id,
-            EpisodeId = model.EpisodeId,
-            SeriesId = model.SeriesId,
-            SourceTitle = model.SourceTitle,
-            Languages = model.Languages,
-            Quality = model.Quality,
-            CustomFormats = customFormats.ToResource(false),
-            CustomFormatScore = customFormatScore,
-            Date = model.Date,
-            DownloadId = model.DownloadId,
-            EventType = model.EventType,
-            Data = model.Data
-        };
-    }
-}