From 4566df697ccf1786f89317a153671713387bfea6 Mon Sep 17 00:00:00 2001
From: Boof2015 <75185879+Boof2015@users.noreply.github.com>
Date: Fri, 15 May 2026 16:03:15 -0400
Subject: [PATCH] improve now playing module

---
 src/renderer/components/AstraScopeModule.tsx | 246 ++++++++++---------
 src/renderer/styles/globals.css              | 106 ++++++--
 2 files changed, 214 insertions(+), 138 deletions(-)

diff --git a/src/renderer/components/AstraScopeModule.tsx b/src/renderer/components/AstraScopeModule.tsx
index 95cfb96..c3457f8 100644
--- a/src/renderer/components/AstraScopeModule.tsx
+++ b/src/renderer/components/AstraScopeModule.tsx
@@ -298,9 +298,19 @@ export default function AstraScopeModule({
 
   const toggleCommand = snapshot?.playbackState === 'playing' ? 'pause' : 'play'
   const toggleLabel = snapshot?.playbackState === 'playing' ? 'Pause' : 'Play'
-  const cardClassName = settings.showCoverArt
-    ? 'astra-scope__card'
-    : 'astra-scope__card astra-scope__card--no-cover'
+  const toggleIcon = snapshot?.playbackState === 'playing' ? '\u23F8' : '\u25B6'
+  const shouldShowMeta = settings.showTitle || (settings.showArtist && Boolean(detailMessage))
+  const shouldShowTransport = settings.showProgress || settings.showTime
+  const shouldShowBody = shouldShowMeta
+    || shouldShowTransport
+    || settings.showControls
+    || Boolean(errorMessage)
+  const isCoverArtOnly = settings.showCoverArt && !shouldShowBody
+  const cardClassName = [
+    'astra-scope__card',
+    !settings.showCoverArt ? 'astra-scope__card--no-cover' : '',
+    isCoverArtOnly ? 'astra-scope__card--cover-only' : '',
+  ].filter(Boolean).join(' ')
 
   return (
     <div className="astra-scope" style={style}>
@@ -321,123 +331,131 @@ export default function AstraScopeModule({
           </div>
         )}
 
-        <div className="astra-scope__body">
-          {(settings.showTitle || settings.showArtist) && (
-            <div className="astra-scope__meta">
-              {settings.showTitle && (
-                <div className="astra-scope__title" title={currentTrack?.title ?? getFallbackTitle(displayProviderId, providerState?.connectionState ?? null, platform)}>
-                  {currentTrack?.title ?? getFallbackTitle(displayProviderId, providerState?.connectionState ?? null, platform)}
-                </div>
-              )}
-              {settings.showArtist && detailMessage && (
-                <div className="astra-scope__artist" title={detailMessage}>
-                  {detailMessage}
-                </div>
-              )}
-            </div>
-          )}
-
-          {(settings.showProgress || settings.showTime) && (
-            <div className="astra-scope__transport">
-              {settings.showProgress && (
-                <div className="astra-scope__progress" aria-hidden="true">
-                  <div
-                    className="astra-scope__progress-fill"
-                    style={{ width: `${Math.max(0, Math.min(100, liveProgress.progress * 100))}%` }}
-                  />
-                </div>
-              )}
-              {settings.showTime && (
-                <div className="astra-scope__time">
-                  <span>{formatAstraTime(liveProgress.currentTime)}</span>
-                  <span>/</span>
-                  <span>{liveProgress.duration > 0 ? formatAstraTime(liveProgress.duration) : '--:--'}</span>
-                </div>
-              )}
-            </div>
-          )}
-
-          {settings.showControls && (
-            <div className="astra-scope__controls">
-              <button
-                type="button"
-                className="astra-scope__control"
-                disabled={!currentTrack || isSendingControl || !providerDefinition?.supportsTransportControls}
-                onClick={() => {
-                  void sendControl('previous')
-                }}
-                aria-label="Previous track"
-                title="Previous track"
-              >
-                &#9198;
-              </button>
-              <button
-                type="button"
-                className="astra-scope__control astra-scope__control--primary"
-                disabled={!currentTrack || isSendingControl || !providerDefinition?.supportsTransportControls}
-                onClick={() => {
-                  void sendControl(toggleCommand)
-                }}
-                aria-label={toggleLabel}
-                title={toggleLabel}
-              >
-                {toggleLabel}
-              </button>
-              <button
-                type="button"
-                className="astra-scope__control"
-                disabled={!currentTrack || isSendingControl || !providerDefinition?.supportsTransportControls}
-                onClick={() => {
-                  void sendControl('next')
-                }}
-                aria-label="Next track"
-                title="Next track"
-              >
-                &#9197;
-              </button>
-            </div>
-          )}
-
-          {errorMessage && (
-            <>
-              <div
-                className="astra-scope__status is-error"
-              >
-                {errorMessage}
+        {shouldShowBody && (
+          <div className="astra-scope__body">
+            {shouldShowMeta && (
+              <div className="astra-scope__meta">
+                {settings.showTitle && (
+                  <div className="astra-scope__title" title={currentTrack?.title ?? getFallbackTitle(displayProviderId, providerState?.connectionState ?? null, platform)}>
+                    {currentTrack?.title ?? getFallbackTitle(displayProviderId, providerState?.connectionState ?? null, platform)}
+                  </div>
+                )}
+                {settings.showArtist && detailMessage && (
+                  <div className="astra-scope__artist" title={detailMessage}>
+                    {detailMessage}
+                  </div>
+                )}
               </div>
-              <div className="astra-scope__status-actions">
+            )}
+
+            {shouldShowTransport && (
+              <div className="astra-scope__transport">
+                {settings.showProgress && (
+                  <div className="astra-scope__progress" aria-hidden="true">
+                    <div
+                      className="astra-scope__progress-fill"
+                      style={{ width: `${Math.max(0, Math.min(100, liveProgress.progress * 100))}%` }}
+                    />
+                  </div>
+                )}
+                {settings.showTime && (
+                  <div className="astra-scope__time">
+                    <span>{formatAstraTime(liveProgress.currentTime)}</span>
+                    <span>/</span>
+                    <span>{liveProgress.duration > 0 ? formatAstraTime(liveProgress.duration) : '--:--'}</span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {settings.showControls && (
+              <div className="astra-scope__controls">
                 <button
                   type="button"
-                  className="astra-scope__control"
+                  className="astra-scope__control astra-scope__control--transport"
+                  disabled={!currentTrack || isSendingControl || !providerDefinition?.supportsTransportControls}
                   onClick={() => {
-                    if (!displayProviderId) {
-                      return
-                    }
+                    void sendControl('previous')
+                  }}
+                  aria-label="Previous track"
+                  title="Previous track"
+                >
+                  <span className="astra-scope__control-icon" aria-hidden="true">
+                    &#9198;
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="astra-scope__control astra-scope__control--transport astra-scope__control--transport-primary"
+                  disabled={!currentTrack || isSendingControl || !providerDefinition?.supportsTransportControls}
+                  onClick={() => {
+                    void sendControl(toggleCommand)
+                  }}
+                  aria-label={toggleLabel}
+                  title={toggleLabel}
+                >
+                  <span className="astra-scope__control-icon" aria-hidden="true">
+                    {toggleIcon}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="astra-scope__control astra-scope__control--transport"
+                  disabled={!currentTrack || isSendingControl || !providerDefinition?.supportsTransportControls}
+                  onClick={() => {
+                    void sendControl('next')
+                  }}
+                  aria-label="Next track"
+                  title="Next track"
+                >
+                  <span className="astra-scope__control-icon" aria-hidden="true">
+                    &#9197;
+                  </span>
+                </button>
+              </div>
+            )}
 
-                    void retryProvider(displayProviderId).catch((error) => {
-                      showBanner({
-                        tone: 'error',
-                        message: getErrorMessage(error, 'Could not reconnect to the provider.'),
-                        actions: [],
+            {errorMessage && (
+              <>
+                <div
+                  className="astra-scope__status is-error"
+                >
+                  {errorMessage}
+                </div>
+                <div className="astra-scope__status-actions">
+                  <button
+                    type="button"
+                    className="astra-scope__control"
+                    onClick={() => {
+                      if (!displayProviderId) {
+                        return
+                      }
+
+                      void retryProvider(displayProviderId).catch((error) => {
+                        showBanner({
+                          tone: 'error',
+                          message: getErrorMessage(error, 'Could not reconnect to the provider.'),
+                          actions: [],
+                        })
                       })
-                    })
-                  }}
-                >
-                  Retry
-                </button>
-                <button
-                  type="button"
-                  className="astra-scope__control"
-                  onClick={() => {
-                    void openConfigWindow()
-                  }}
-                >
-                  Configure
-                </button>
-              </div>
-            </>
-          )}
-        </div>
+                    }}
+                  >
+                    Retry
+                  </button>
+                  <button
+                    type="button"
+                    className="astra-scope__control"
+                    onClick={() => {
+                      void openConfigWindow()
+                    }}
+                  >
+                    Configure
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/renderer/styles/globals.css b/src/renderer/styles/globals.css
index b8af184..7fa696e 100644
--- a/src/renderer/styles/globals.css
+++ b/src/renderer/styles/globals.css
@@ -896,13 +896,14 @@ button.toolbar__version:hover {
 }
 
 .astra-scope {
-  --astra-cover-size: clamp(56px, min(34cqi, 72cqb), 220px);
-  --astra-card-gap: clamp(8px, min(3cqi, 3cqb), 14px);
+  --astra-cover-size: clamp(52px, min(30cqi, 68cqb), 180px);
+  --astra-card-gap: clamp(7px, min(2.4cqi, 2.4cqb), 12px);
+  --astra-card-padding: clamp(8px, min(2.6cqi, 2.8cqb), 12px);
   display: flex;
   width: 100%;
   height: 100%;
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
   background: var(--astra-bg);
   color: var(--astra-text);
   container-type: size;
@@ -916,7 +917,7 @@ button.toolbar__version:hover {
 .astra-scope--empty {
   align-items: center;
   justify-content: center;
-  padding: 12px;
+  padding: var(--astra-card-padding);
 }
 
 .astra-scope__card {
@@ -927,13 +928,18 @@ button.toolbar__version:hover {
   gap: var(--astra-card-gap);
   width: 100%;
   height: 100%;
-  padding: clamp(10px, 3cqi, 12px);
+  padding: var(--astra-card-padding);
 }
 
 .astra-scope__card--no-cover {
   grid-template-columns: minmax(0, 1fr);
 }
 
+.astra-scope__card--cover-only {
+  grid-template-columns: minmax(0, 1fr);
+  place-items: center;
+}
+
 .astra-scope__cover-shell {
   display: flex;
   align-items: center;
@@ -944,10 +950,19 @@ button.toolbar__version:hover {
   min-width: 0;
 }
 
+.astra-scope__card--cover-only .astra-scope__cover-shell {
+  justify-self: center;
+  width: min(
+    calc(100cqi - (var(--astra-card-padding) + var(--astra-card-padding))),
+    calc(100cqb - (var(--astra-card-padding) + var(--astra-card-padding)))
+  );
+  max-width: 420px;
+}
+
 .astra-scope__cover {
   width: 100%;
   aspect-ratio: 1;
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid var(--astra-border);
   object-fit: cover;
   background: var(--astra-surface);
@@ -959,8 +974,8 @@ button.toolbar__version:hover {
   justify-content: center;
   color: var(--astra-accent);
   font-family: 'JetBrains Mono', monospace;
-  font-size: clamp(20px, 4vw, 38px);
-  letter-spacing: 0.14em;
+  font-size: 24px;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   background: var(--astra-surface);
 }
@@ -972,20 +987,20 @@ button.toolbar__version:hover {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: clamp(8px, min(2.4cqi, 2.4cqb), 10px);
+  gap: clamp(6px, min(2cqi, 2cqb), 9px);
 }
 
 .astra-scope__meta {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 3px;
 }
 
 .astra-scope__title {
   min-width: 0;
   color: var(--astra-text);
-  font-size: clamp(14px, 2vw, 20px);
+  font-size: 15px;
   font-weight: 600;
   line-height: 1.2;
   white-space: nowrap;
@@ -996,7 +1011,7 @@ button.toolbar__version:hover {
 .astra-scope__artist {
   min-width: 0;
   color: var(--astra-subtext);
-  font-size: 12px;
+  font-size: 11px;
   line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
@@ -1007,12 +1022,12 @@ button.toolbar__version:hover {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .astra-scope__progress {
   width: 100%;
-  height: 7px;
+  height: 5px;
   overflow: hidden;
   border-radius: 999px;
   background: var(--astra-progress-track);
@@ -1030,14 +1045,15 @@ button.toolbar__version:hover {
   gap: 6px;
   color: var(--astra-subtext);
   font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  letter-spacing: 0.08em;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  line-height: 1;
 }
 
 .astra-scope__controls {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   min-width: 0;
   flex-wrap: nowrap;
 }
@@ -1045,9 +1061,9 @@ button.toolbar__version:hover {
 .astra-scope__control {
   flex: 0 0 auto;
   min-width: 36px;
-  height: 32px;
+  height: 30px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: 8px;
   border: 1px solid var(--astra-button-border);
   background: var(--astra-button-bg);
   color: var(--astra-button-text);
@@ -1063,6 +1079,33 @@ button.toolbar__version:hover {
   min-width: 72px;
 }
 
+.astra-scope__control--transport {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 32px;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 13px;
+  letter-spacing: 0;
+}
+
+.astra-scope__control--transport-primary {
+  flex-basis: 38px;
+  width: 38px;
+  min-width: 38px;
+  color: var(--astra-accent);
+}
+
+.astra-scope__control-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
 .astra-scope__control:hover:not(:disabled),
 .astra-scope__control:focus-visible {
   background: var(--astra-button-bg-hover);
@@ -1153,9 +1196,23 @@ button.toolbar__version:hover {
     font-size: 11px;
   }
 
-  .astra-scope__control {
+  .astra-scope__control:not(.astra-scope__control--transport) {
     padding: 0 10px;
   }
+
+  .astra-scope__control--transport {
+    flex-basis: 30px;
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    padding: 0;
+  }
+
+  .astra-scope__control--transport-primary {
+    flex-basis: 36px;
+    width: 36px;
+    min-width: 36px;
+  }
 }
 
 @container (max-width: 260px) {
@@ -1173,15 +1230,16 @@ button.toolbar__version:hover {
   .astra-scope {
     --astra-cover-size: clamp(40px, min(22cqi, 46cqb), 88px);
     --astra-card-gap: 8px;
-  }
-
-  .astra-scope__card {
-    padding: 8px;
+    --astra-card-padding: 8px;
   }
 
   .astra-scope__control {
     height: 30px;
   }
+
+  .astra-scope__control--transport {
+    height: 28px;
+  }
 }
 
 .settings-panel {