Use the new grid track table in place of existing playlists

Author: nukeop

packages/app/app/components/ArtistView/PopularTracks/index.tsx

@@ -71,7 +71,7 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: (track: ArtistTopTrack) => track.playcount,
+    accessor: 'playcount',
     Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
   }], []);
 

packages/app/app/components/ListeningHistoryView/styles.scss

@@ -14,6 +14,10 @@
     .listening_history_header_actions {
         display: flex;
         align-items: center;
+
+        button.nuclear.ui.button:not(:last-child) {
+            margin-right: 1em;
+        }
     }
 
     .listening_history_pagination {

packages/app/app/components/PlaylistView/styles.scss

@@ -3,12 +3,11 @@
 .playlist_view_container {
   width: 100%;
   height: 100%;
-  margin: 1em 0em;
 
   .playlist {
     display: flex;
     flex-flow: column;
-    margin-right: 1em;
+    height: 100%;
   }
 
   .playlist_view_info {

packages/app/app/containers/TrackTableContainer/index.tsx

@@ -5,7 +5,7 @@ import { Icon } from 'semantic-ui-react';
 import _ from 'lodash';
 
 import { Playlist } from '@nuclear/core';
-import { TrackTable, areTracksEqualByName } from '@nuclear/ui';
+import { GridTrackTable, areTracksEqualByName } from '@nuclear/ui';
 import { TrackTableProps } from '@nuclear/ui/lib/components/TrackTable';
 import { TrackTableSettings } from '@nuclear/ui/lib/components/TrackTable/types';
 import { Track } from '@nuclear/ui/lib/types';
@@ -33,7 +33,7 @@ function TrackTableContainer<T extends Track> ({
   tracks,
   onDelete,
   onReorder,
-  TrackTableComponent = TrackTable,
+  TrackTableComponent = GridTrackTable,
   customColumns,
   displayAddToDownloads = true,
   displayAddToFavorites = true,

packages/ui/lib/components/ContextPopup/styles.scss

@@ -1,4 +1,4 @@
-@import '../../common';
+@import "../../common";
 
 .context_popup {
   @include shadow;
@@ -80,7 +80,7 @@
     display: flex;
     flex-flow: column;
     flex: 0 0 auto;
-    padding: 0.5rem 0;
+    padding-top: 0.5rem;
     height: auto !important;
   }
 }

packages/ui/lib/components/GridTrackTable/index.tsx

@@ -32,7 +32,7 @@ export type GridTrackTableProps<T extends Track> = {
   isTrackFavorite: (track: T) => boolean;
   onDragEnd?: DragDropContextProps['onDragEnd'];
   strings: TrackTableStrings;
-  customColumns?: (Column<T> & { columnWidth: string; })[];
+  customColumns?: (Column<T & { columnWidth: string; }>)[];
 } & TrackTableHeaders 
   & TrackTableSettings 
   & TrackTableExtraProps<T>;
@@ -137,7 +137,8 @@ export const GridTrackTable = <T extends Track>({
           return null;
         }
       },
-      Cell: TextCell
+      Cell: TextCell,
+      columnWidth: '6em'
     },
     ...customColumns,
     selectable && {
@@ -146,12 +147,12 @@ export const GridTrackTable = <T extends Track>({
       Cell: SelectionCell,
       columnWidth: '6em'
     }
-  ], [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
+  ].filter(Boolean), [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
 
   const data = useMemo(() => tracks, [tracks]);
 
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
-    sortBy: [{ id: TrackTableColumn.Title, desc: false }]
+    sortBy: [{ id: TrackTableColumn.Position, desc: false }]
   };
   const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T> & UseGlobalFiltersInstanceProps<T>);
   const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
@@ -225,7 +226,7 @@ export const GridTrackTable = <T extends Track>({
           </div>
         ))}
       </div>
-      <DragDropContext onDragEnd={() => {}}>
+      <DragDropContext onDragEnd={onDragEnd}>
         <Droppable 
           droppableId='track_table'
           mode='virtual'

packages/ui/lib/components/GridTrackTable/styles.scss

@@ -6,6 +6,7 @@
     flex-flow: column;
     overflow: hidden;
     height: 100%;
+    flex: 1 1 auto;
 }
 
 .track_table_wrapper .track_table_filter_row {
@@ -75,13 +76,12 @@
     }
 
     .track_table_header_spacer {
-        width: 10px;
+        width: 0.5rem;
     }
 
     .track_table_body {
         display: block;
         gap: 0.25em;
-        overflow-y: auto;
         flex: 1 1 auto;
 
         &.body_dragged_over {
@@ -106,6 +106,10 @@
     user-select: none;
     outline: none;
 
+    &:not(:last-child) {
+        border-bottom: 1px solid $bgdefault;
+    }
+
     &:hover {
         background: rgba($bgdefault, 0.25);
 
@@ -146,6 +150,11 @@
 }
 
 .text_header {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+
     &.centered {
         display: flex;
         justify-content: center;

packages/ui/lib/components/TrackTable/HistoryTable.tsx

@@ -5,22 +5,28 @@ import TrackTable, { TrackTableProps } from '.';
 import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
 import { TrackTableColumn } from './types';
+import { GridTrackTable } from '../GridTrackTable';
+import { Column } from 'react-table';
+import { TextHeader } from '../GridTrackTable/Headers/TextHeader';
 
 export type HistoryTableTrack = Track & {
     createdAt: Date;
 }
 
-type HistoryTableProps = TrackTableProps<HistoryTableTrack>;
+type HistoryTableProps = TrackTableProps<HistoryTableTrack> & {
+  dateHeader?: string;
+};
 
-const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, ...props }) => {
+const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, dateHeader, ...props }) => {
   const customColumns = useMemo(() => [{
     id: TrackTableColumn.Date,
-    Header: 'Date',
+    Header: ({ column }) => <TextHeader  column={column} header={dateHeader} />,
     accessor: (track: HistoryTableTrack) => track.createdAt.toLocaleString(),
-    Cell: DateCell
-  }], []);
+    Cell: DateCell,
+    columnnWidth: '3em'
+  } as Column<HistoryTableTrack>], []);
 
-  return <TrackTable
+  return <GridTrackTable
     className={styles.history_table}
     tracks={tracks}
     customColumns={customColumns}