Re-think header

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@electron/remote": "^2.0.10",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
     "@tanstack/react-virtual": "3.0.0-beta.54",

src/renderer/components/Cover/Cover.module.css

@@ -1,21 +1,22 @@
 .cover {
-  width: 48px;
-  height: 48px;
-  margin-right: 10px;
-  background-position: center;
-  background-size: cover;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
   text-align: center;
-  border-style: solid;
-  border-color: var(--border-color);
-  border-width: 0 1px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: content-box;
 }
 
+.empty {
+  border: solid 1px var(--border-color);
+  border-width: 0 1px;
+  box-sizing: border-box;
+}
+
 .cover__note {
   font-family: monospace; /* the sexy one */
-  font-size: 30px;
+  font-size: 28px;
   line-height: 28px;
 }

src/renderer/components/Cover/Cover.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import * as AspectRatio from '@radix-ui/react-aspect-ratio';
 
 import { Track } from '../../../shared/types/museeks';
 
@@ -26,14 +27,24 @@ export default function Cover(props: Props) {
     const encodedCoverPath = encodeURI(coverPath)
       .replace(/'/g, "\\'")
       .replace(/"/g, '\\"');
-    const inlineStyles = { backgroundImage: `url('${encodedCoverPath}')` };
 
-    return <div className={styles.cover} style={inlineStyles} />;
+    return (
+      <AspectRatio.Root ratio={1}>
+        <img
+          src={encodedCoverPath}
+          alt="Album cover"
+          className={styles.cover}
+        />
+      </AspectRatio.Root>
+    );
   }
 
   return (
-    <div className={`${styles.cover} isEmpty`}>
-      <div className={styles.cover__note}>♪</div>
-    </div>
+    <AspectRatio.Root ratio={1}>
+      <div className={`${styles.cover} ${styles.empty}`}>
+        {/** billion dollar problem: convert emoji to text, good luck 🎵 */}
+        <div className={styles.cover__note}>♪</div>
+      </div>
+    </AspectRatio.Root>
   );
 }

src/renderer/components/DropzoneImport/DropzoneImport.module.css

@@ -2,7 +2,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  background: var(--faded);
+  background: var(--faded-bg);
   z-index: 1000;
   display: flex;
   flex-direction: column;

src/renderer/components/Header/Header.module.css

@@ -17,7 +17,7 @@
   color: var(--header-color);
   padding: 0 10px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
   height: 50px;
   flex: 0 0 auto;
@@ -27,7 +27,6 @@
 }
 
 .header__mainControls {
-  width: 220px;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -36,7 +35,7 @@
 
 .header__search {
   -webkit-app-region: no-drag;
-  width: 220px;
+  margin-left: 12px;
   flex: 0 0 auto;
   display: flex;
   justify-content: flex-end;

src/renderer/components/PlayerControls/PlayerControls.module.css

@@ -30,3 +30,8 @@
     }
   }
 }
+
+.playerOptions {
+  display: flex;
+  flex-direction: column;
+}

src/renderer/components/PlayerOptionsButtons/common.module.css

@@ -2,16 +2,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 16px;
-  width: 16px;
+  height: 20px;
+  width: 20px;
 }
 
 .button {
   -webkit-app-region: no-drag;
   border: 0;
   color: inherit;
   background: transparent;
-  font-size: 18px;
+  font-size: 20px;
 
   &.active {
     .icon > svg {
@@ -21,7 +21,7 @@
 
   .icon > svg {
     fill: currentcolor;
-    width: 16px;
+    width: 18px;
     height: auto;
   }
 }

src/renderer/components/PlayingBar/PlayingBar.module.css

@@ -1,23 +1,19 @@
 .playingBar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   text-align: center;
+  height: 100%;
 }
 
 .playingBar__cover {
-  width: 60px;
-  flex: 0 0 auto;
-}
-
-.playingBar__queue {
-  -webkit-app-region: no-drag;
-  width: 60px;
-  flex: 0 0 auto;
-  position: relative;
+  flex-shrink: 0;
+  width: 49px;
+  overflow: hidden;
 }
 
 .queueToggle {
+  line-height: 22px;
+  margin-left: 12px;
   color: inherit;
   border: 0;
   background: transparent;
@@ -37,3 +33,10 @@
     display: block;
   }
 }
+
+.playerOptions {
+  -webkit-app-region: no-drag;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}

src/renderer/components/PlayingBar/PlayingBar.tsx

@@ -5,6 +5,8 @@ import Queue from '../Queue/Queue';
 import PlayingBarInfos from '../PlayingBarInfo/PlayingBarInfo';
 import Cover from '../Cover/Cover';
 import usePlayerStore from '../../stores/usePlayerStore';
+import ButtonRepeat from '../PlayerOptionsButtons/ButtonRepeat';
+import ButtonShuffle from '../PlayerOptionsButtons/ButtonShuffle';
 
 import styles from './PlayingBar.module.css';
 
@@ -28,7 +30,9 @@ export default function PlayingBar() {
         shuffle={shuffle}
         repeat={repeat}
       />
-      <div className={styles.playingBar__queue}>
+      <div className={styles.playerOptions}>
+        <ButtonRepeat />
+        <ButtonShuffle />
         <Popover.Root>
           <Popover.Trigger asChild>
             <button className={styles.queueToggle}>
@@ -38,7 +42,7 @@ export default function PlayingBar() {
           <Popover.Portal>
             <Popover.Content
               side="bottom"
-              sideOffset={8}
+              sideOffset={6}
               align="end"
               alignOffset={-10}
               avoidCollisions={false}

src/renderer/components/PlayingBarInfo/PlayingBarInfo.module.css

@@ -1,13 +1,17 @@
 .playingBar__info {
   flex: 1 1 auto;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 0 6px;
 }
 
 .playingBar__info__metas {
+  gap: 4px;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
-  margin-bottom: 4px;
 }
 
 .metas {
@@ -19,24 +23,23 @@
   text-align: center;
 }
 
+.metadataTitle {
+  margin-bottom: 2px;
+}
+
+.metadata {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .duration {
   flex: 0 0 auto;
-  font-size: 10px;
-  padding-right: 6px;
-  padding-left: 10px;
-  text-align: right;
+  font-size: 0.875rem;
+  padding: 0 2px;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 
-.playerOptions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-right: 10px;
-}
-
 .playingBar__info__progress {
   position: relative;
 }

src/renderer/components/PlayingBarInfo/PlayingBarInfo.tsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import ButtonShuffle from '../PlayerOptionsButtons/ButtonShuffle';
-import ButtonRepeat from '../PlayerOptionsButtons/ButtonRepeat';
 import * as utils from '../../lib/utils';
 import { TrackModel, Repeat } from '../../../shared/types/museeks';
 import { usePlayerAPI } from '../../stores/usePlayerStore';
@@ -115,20 +113,19 @@ export default function PlayingBarInfo(props: Props) {
   return (
     <div className={styles.playingBar__info}>
       <div className={styles.playingBar__info__metas}>
-        <div className={styles.playerOptions}>
-          <ButtonRepeat />
-          <ButtonShuffle />
-        </div>
+        <div className={styles.duration}>{utils.parseDuration(elapsed)}</div>
         <div className={styles.metas}>
-          <strong>{trackPlaying.title}</strong>
-          &nbsp;by&nbsp;
-          <strong>{trackPlaying.artist.join(', ')}</strong>
-          &nbsp;on&nbsp;
-          <strong>{trackPlaying.album}</strong>
+          <div className={`${styles.metadata} ${styles.metadataTitle}`}>
+            <strong>{trackPlaying.title}</strong>
+          </div>
+          <div className={styles.metadata}>
+            {trackPlaying.artist.join(', ')}
+            &nbsp;—&nbsp;
+            {trackPlaying.album}
+          </div>
         </div>
 
         <div className={styles.duration}>
-          {utils.parseDuration(elapsed)} /{' '}
           {utils.parseDuration(trackPlaying.duration)}
         </div>
       </div>

src/renderer/components/Search/Search.module.css

@@ -1,6 +1,8 @@
 .search__container {
   position: relative;
   width: 180px;
+  display: flex;
+  align-items: center;
 }
 
 .search__input {

src/renderer/components/TracksListHeaderCell/TracksListHeaderCell.module.css

@@ -1,5 +1,5 @@
 .trackCellHeader {
-  font-weight: 700;
+  font-weight: var(--bold);
   appearance: none;
   border: 0;
   background: transparent;

src/renderer/styles/general.module.css

@@ -3,6 +3,7 @@
   --main-color: #459ce7;
   --link-color: #459ce7;
   --link-color-hover: #52afff;
+  --bold: 600;
 }
 
 *,
@@ -22,7 +23,8 @@ html {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   color: var(--text);
   font-size: 12px;
   user-select: none;
@@ -53,6 +55,10 @@ p {
   line-height: 1.3;
 }
 
+strong {
+  font-weight: var(--bold);
+}
+
 /* App wrapper */
 :global #wrap {
   height: 100vh;

src/shared/themes/dark-legacy.json

@@ -6,7 +6,7 @@
     "--color-scheme": "dark",
     "--text": "#EEEEEE",
     "--background": "#23292B",
-    "--faded": "rgba(0, 0, 0, 0.8)",
+    "--faded-bg": "rgba(0, 0, 0, 0.8)",
 
     "--border-color": "#1F1F1F",
     "--border-radius": "2px",

src/shared/themes/dark.json

@@ -6,7 +6,7 @@
     "--color-scheme": "dark",
     "--text": "#efefef",
     "--background": "hsl(216, 0%, 9.5%)",
-    "--faded": "rgba(0, 0, 0, 0.8)",
+    "--faded-bg": "rgba(0, 0, 0, 0.8)",
 
     "--border-color": "hsl(216deg 0% 20%)",
     "--border-radius": "2px",

src/shared/themes/light.json

@@ -6,7 +6,7 @@
     "--color-scheme": "light",
     "--text": "#333333",
     "--background": "white",
-    "--faded": "rgba(255, 255, 255, 0.9)",
+    "--faded-bg": "rgba(255, 255, 255, 0.9)",
 
     "--border-color": "#D2D2D2",
     "--border-radius": "2px",

yarn.lock

@@ -996,6 +996,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-aspect-ratio@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz#d1a15d6953203e6fd7f5b569fae77c88c1880125"
+  integrity sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"