Various Base UI improvements

Author: martpie

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { Popover } from '@base-ui/react/popover';
 import { useLingui } from '@lingui/react/macro';
 import * as stylex from '@stylexjs/stylex';
+import { useRef } from 'react';
 
 import ButtonIcon from '../elements/ButtonIcon';
 import { usePlayerState } from '../hooks/usePlayer';
@@ -16,6 +17,7 @@ export default function Header() {
   const trackPlaying = usePlayingTrack();
   const { t } = useLingui();
   const platform = window.__MUSEEKS_PLATFORM;
+  const queueAnchorRef = useRef<HTMLDivElement>(null);
 
   return (
     <header
@@ -41,7 +43,7 @@ export default function Header() {
           <>
             <PlayingBar trackPlaying={trackPlaying} />
             <Popover.Root>
-              <div {...stylex.props(styles.queue)}>
+              <div ref={queueAnchorRef} {...stylex.props(styles.queue)}>
                 <Popover.Trigger
                   render={(triggerProps) => (
                     <ButtonIcon
@@ -55,7 +57,12 @@ export default function Header() {
                 />
               </div>
               <Popover.Portal>
-                <Popover.Positioner side="bottom" align="end">
+                <Popover.Positioner
+                  side="bottom"
+                  alignOffset={-16}
+                  align="end"
+                  anchor={queueAnchorRef}
+                >
                   <Popover.Popup {...stylex.props(styles.queueContainer)}>
                     <Queue queue={queue} queueCursor={queueCursor} />
                   </Popover.Popup>

src/components/Navigation.tsx

@@ -106,14 +106,12 @@ function Status() {
           {isScanning ? (
             t`scanning tracks...`
           ) : (
-            <ProgressBar progress={progress} />
+            <ProgressBar
+              progress={progress}
+              label={total > 0 ? `${current} / ${total}` : ''}
+            />
           )}
         </div>
-        {total > 0 && (
-          <div {...stylex.props(styles.statusLibraryRefreshCount)}>
-            {current} / {total}
-          </div>
-        )}
       </div>
     );
   }
@@ -199,9 +197,5 @@ const styles = stylex.create({
   },
   statusLibraryRefreshProgress: {
     flex: '1',
-    marginRight: '10px',
-  },
-  statusLibraryRefreshCount: {
-    fontVariantNumeric: 'tabular-nums',
   },
 });

src/components/ProgressBar.tsx

@@ -3,6 +3,7 @@ import * as stylex from '@stylexjs/stylex';
 
 type Props = {
   progress?: number;
+  label: string;
 };
 
 export default function ProgressBar(props: Props) {
@@ -17,16 +18,22 @@ export default function ProgressBar(props: Props) {
           style={{ width: `${props.progress ?? 0}%` }}
         />
       </Progress.Track>
+      <Progress.Label {...stylex.props(styles.progressLabel)}>
+        {props.label}
+      </Progress.Label>
     </Progress.Root>
   );
 }
 
 const styles = stylex.create({
   progress: {
     flex: '1',
-    display: 'block',
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'center',
   },
   progressTrack: {
+    flexGrow: 1,
     height: '6px',
     backgroundColor: 'var(--progress-bg)',
   },
@@ -35,4 +42,10 @@ const styles = stylex.create({
     backgroundColor: 'var(--main-color)',
     transition: 'width 0.2s ease-in-out',
   },
+  progressLabel: {
+    flexShrink: 0,
+    fontSize: '12px',
+    color: 'var(--text-color)',
+    fontVariantNumeric: 'tabular-nums',
+  },
 });

src/translations/en.po

@@ -63,11 +63,11 @@ msgstr "Try <0>reloading the app</0>,"
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "or if it happens again, please <0>report an issue</0>."
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr "Header"
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "Queue"
 

src/translations/es.po

@@ -63,11 +63,11 @@ msgstr "Intenta <0>recargar la aplicación</0>,"
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "o si vuelve a ocurrir, por favor <0>reporta un problema</0>."
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr ""
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "Cola"
 

src/translations/fr.po

@@ -63,11 +63,11 @@ msgstr "Essayez de <0>recharger l'application</0>,"
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "ou si cela se reproduit, veuillez <0>signaler un problème</0>."
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr ""
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "File d'attente"
 

src/translations/ja.po

@@ -63,11 +63,11 @@ msgstr "<0>アプリを再読み込み</0>してみてください、"
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "また同じことが起こった場合は、<0>問題を報告してください</0>。"
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr ""
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "キュー"
 

src/translations/ru.po

@@ -63,11 +63,11 @@ msgstr "Попробуйте <0>перезагрузить приложение<
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "Если это случится снова, пожалуйста, <0>заявите об ошибке</0>."
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr ""
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "Очередь"
 

src/translations/zh-CN.po

@@ -63,11 +63,11 @@ msgstr "尝试 <0>重新加载应用程序</0>，"
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "如果再次发生，请<0>报告问题</0>。"
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr ""
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "播放队列"
 

src/translations/zh-TW.po

@@ -63,11 +63,11 @@ msgstr "嘗試 <0>重新載入應用程式</0>，"
 msgid "or if it happens again, please <0>report an issue</0>."
 msgstr "如果再次發生，請<0>回報問題</0>。"
 
-#: src/components/Header.tsx:22
+#: src/components/Header.tsx:24
 msgid "Header"
 msgstr ""
 
-#: src/components/Header.tsx:51
+#: src/components/Header.tsx:53
 msgid "Queue"
 msgstr "播放佇列"