From 21053885daae1d3ed03386ba61ec6e3ad1cde13a Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sun, 11 Dec 2022 22:02:46 -0600
Subject: [PATCH] New: Show number of files as tooltip over size on disk

Closes #1966

Co-Authored-By: Robin Dadswell <19610103+RobinDadswell@users.noreply.github.com>
---
 frontend/src/Album/Details/AlbumDetails.js   | 52 ++++++++++++++------
 frontend/src/Artist/Details/ArtistDetails.js | 40 +++++++++------
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/frontend/src/Album/Details/AlbumDetails.js b/frontend/src/Album/Details/AlbumDetails.js
index 5c95e565b..c0c3b57ec 100644
--- a/frontend/src/Album/Details/AlbumDetails.js
+++ b/frontend/src/Album/Details/AlbumDetails.js
@@ -218,6 +218,11 @@ class AlbumDetails extends Component {
       onSearchPress
     } = this.props;
 
+    const {
+      trackFileCount,
+      sizeOnDisk
+    } = statistics;
+
     const {
       isOrganizeModalOpen,
       isRetagModalOpen,
@@ -233,6 +238,14 @@ class AlbumDetails extends Component {
 
     let expandIcon = icons.EXPAND_INDETERMINATE;
 
+    let trackFilesCountMessage = translate('TrackFilesCountMessage');
+
+    if (trackFileCount === 1) {
+      trackFilesCountMessage = '1 track file';
+    } else if (trackFileCount > 1) {
+      trackFilesCountMessage = `${trackFileCount} track files`;
+    }
+
     if (allExpanded) {
       expandIcon = icons.COLLAPSE;
     } else if (allCollapsed) {
@@ -410,21 +423,32 @@ class AlbumDetails extends Component {
                     </span>
                   </Label>
 
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.DRIVE}
-                      size={17}
-                    />
+                  <Tooltip
+                    anchor={
+                      <Label
+                        className={styles.detailsLabel}
+                        size={sizes.LARGE}
+                      >
+                        <Icon
+                          name={icons.DRIVE}
+                          size={17}
+                        />
 
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(statistics.sizeOnDisk || 0)
-                      }
-                    </span>
-                  </Label>
+                        <span className={styles.sizeOnDisk}>
+                          {
+                            formatBytes(sizeOnDisk || 0)
+                          }
+                        </span>
+                      </Label>
+                    }
+                    tooltip={
+                      <span>
+                        {trackFilesCountMessage}
+                      </span>
+                    }
+                    kind={kinds.INVERSE}
+                    position={tooltipPositions.BOTTOM}
+                  />
 
                   <Label
                     className={styles.detailsLabel}
diff --git a/frontend/src/Artist/Details/ArtistDetails.js b/frontend/src/Artist/Details/ArtistDetails.js
index ecc901330..baaf344b0 100644
--- a/frontend/src/Artist/Details/ArtistDetails.js
+++ b/frontend/src/Artist/Details/ArtistDetails.js
@@ -453,22 +453,32 @@ class ArtistDetails extends Component {
                     </span>
                   </Label>
 
-                  <Label
-                    className={styles.detailsLabel}
-                    title={trackFilesCountMessage}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.DRIVE}
-                      size={17}
-                    />
+                  <Tooltip
+                    anchor={
+                      <Label
+                        className={styles.detailsLabel}
+                        size={sizes.LARGE}
+                      >
+                        <Icon
+                          name={icons.DRIVE}
+                          size={17}
+                        />
 
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(sizeOnDisk || 0)
-                      }
-                    </span>
-                  </Label>
+                        <span className={styles.sizeOnDisk}>
+                          {
+                            formatBytes(sizeOnDisk || 0)
+                          }
+                        </span>
+                      </Label>
+                    }
+                    tooltip={
+                      <span>
+                        {trackFilesCountMessage}
+                      </span>
+                    }
+                    kind={kinds.INVERSE}
+                    position={tooltipPositions.BOTTOM}
+                  />
 
                   <Label
                     className={styles.detailsLabel}