Misc TrackList improvements

- simpler CSS, splitted by component
- larger spacing for the artist view
- fixed dash displayed when no genres

Author: martpie

src/components/TrackList.module.css

@@ -6,52 +6,3 @@
   height: 100%;
   user-select: none;
 }
-
-.trackListScroller {
-  overflow-y: scroll;
-  flex: 1 1 auto;
-  position: relative;
-}
-
-.trackListRows {
-  width: 100%;
-  position: relative;
-}
-
-.tracksGroup {
-  display: flex;
-  gap: 16px;
-  padding: 16px 16px;
-  align-items: flex-start;
-  position: relative;
-}
-
-.tracksGroupLabel {
-  font-size: 1.4rem;
-  font-weight: bold;
-  margin: 0;
-}
-
-.tracksGroupMetadata {
-  color: var(--text-muted);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tracksGroupSide {
-  width: 160px;
-  position: sticky;
-  top: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  @media (min-width: 1024px) {
-    width: 240px;
-  }
-}
-
-.tracksGroupContent {
-  flex-grow: 1;
-}

src/components/TrackListDefault.module.css

@@ -0,0 +1,4 @@
+.rows {
+  width: 100%;
+  position: relative;
+}

src/components/TrackListDefault.tsx

@@ -8,11 +8,12 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type React from 'react';
 import { useCallback, useId, useImperativeHandle, useRef } from 'react';
 
+import Scrollable from '../elements/Scrollable';
 import type { Track } from '../generated/typings';
 import useDndSensors from '../hooks/useDnDSensors';
 import usePlayingTrackID from '../hooks/usePlayingTrackID';
 import type { TrackListVirtualizer } from '../types/museeks';
-import styles from './TrackList.module.css';
+import styles from './TrackListDefault.module.css';
 import TrackListHeader from './TrackListHeader';
 import TrackRow, { type TrackRowEvents } from './TrackRow';
 
@@ -111,16 +112,14 @@ export default function TrackListDefault(props: Props) {
       modifiers={DND_MODIFIERS}
       sensors={sensors}
     >
-      <div ref={innerScrollableRef} className={styles.trackListScroller}>
+      <Scrollable ref={innerScrollableRef}>
         <TrackListHeader enableSort={isSortEnabled} />
 
         {/* The large inner element to hold all of the items */}
         <div
-          className={styles.trackListRows}
+          className={styles.rows}
           style={{
             height: `${virtualizer.getTotalSize()}px`,
-            width: '100%',
-            position: 'relative',
           }}
         >
           <SortableContext
@@ -158,7 +157,7 @@ export default function TrackListDefault(props: Props) {
             })}
           </SortableContext>
         </div>
-      </div>
+      </Scrollable>
     </DndContext>
   );
 }

src/components/TrackListGrouped.module.css

@@ -0,0 +1,41 @@
+:root {
+  --spacing: 24px;
+}
+
+.group {
+  display: flex;
+  gap: var(--spacing);
+  padding: var(--spacing);
+  align-items: flex-start;
+  position: relative;
+}
+
+.aside {
+  width: 160px;
+  position: sticky;
+  top: var(--spacing);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  @media (min-width: 1024px) {
+    width: 240px;
+  }
+}
+
+.label {
+  font-size: 1.4rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+.metadata {
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rows {
+  flex-grow: 1;
+}

src/components/TrackListGrouped.tsx

@@ -1,13 +1,14 @@
 import { Plural } from '@lingui/react/macro';
 import { useImperativeHandle, useRef } from 'react';
 
+import Scrollable from '../elements/Scrollable';
 import type { TrackGroup } from '../generated/typings';
 import useAllTracks from '../hooks/useAllTracks';
 import { parseDuration } from '../hooks/useFormattedDuration';
 import usePlayingTrackID from '../hooks/usePlayingTrackID';
 import type { TrackListVirtualizer } from '../types/museeks';
 import Cover from './Cover';
-import styles from './TrackList.module.css';
+import styles from './TrackListGrouped.module.css';
 import TrackRow, { type TrackRowEvents } from './TrackRow';
 
 /** ----------------------------------------------------------------------------
@@ -48,7 +49,7 @@ export default function TrackListGroupedLayout(props: Props) {
   }, [tracks]);
 
   return (
-    <div ref={innerScrollableRef} className={styles.trackListScroller}>
+    <Scrollable ref={innerScrollableRef}>
       {trackGroups.map((tracksGroup) => {
         return (
           <TrackListGroup
@@ -60,7 +61,7 @@ export default function TrackListGroupedLayout(props: Props) {
           />
         );
       })}
-    </div>
+    </Scrollable>
   );
 }
 
@@ -87,23 +88,23 @@ function TrackListGroup(props: TrackListGroupProps) {
   }
 
   return (
-    <div className={styles.tracksGroup}>
-      <div className={styles.tracksGroupSide}>
+    <div className={styles.group}>
+      <aside className={styles.aside}>
         {/** Instead of the first one, maybe get the first track within the album to hold a cover? */}
         <Cover track={tracks[0]} iconSize={36} noBorder />
-        <h3 className={styles.tracksGroupLabel}>{label}</h3>
-        <div className={styles.tracksGroupMetadata}>
+        <h3 className={styles.label}>{label}</h3>
+        <div className={styles.metadata}>
           <div>
-            {year ? <span>{year} - </span> : null}
-            {genres.join(', ')}
+            {year}
+            {genres.length > 0 && <span> - {genres.join(', ')}</span>}
           </div>
           <div>
             <Plural value={tracks.length} one="# track" other="# tracks" />,{' '}
             {parseDuration(duration)}
           </div>
         </div>
-      </div>
-      <div className={styles.tracksGroupContent}>
+      </aside>
+      <div className={styles.rows}>
         {tracks.map((track, index) => {
           return (
             <TrackRow

src/elements/Scrollable.module.css

@@ -0,0 +1,3 @@
+.scrollable {
+  overflow-y: auto;
+}

src/elements/Scrollable.tsx

@@ -0,0 +1,14 @@
+import styles from './Scrollable.module.css';
+
+type Props = {
+  children: React.ReactNode;
+  ref: React.Ref<HTMLDivElement>;
+};
+
+export default function Scrollable(props: Props) {
+  return (
+    <div className={styles.scrollable} ref={props.ref}>
+      {props.children}
+    </div>
+  );
+}