From 62a02e9eb19dc3a0a84f8bfcda646fa56736e447 Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Fri, 19 Jan 2024 09:58:54 +0800
Subject: [PATCH] fix: control bar layout

---
 src/renderer/components/App.vue | 79 +++++++++++++++++----------------
 1 file changed, 40 insertions(+), 39 deletions(-)

diff --git a/src/renderer/components/App.vue b/src/renderer/components/App.vue
index c1f8c05..dd0e01e 100644
--- a/src/renderer/components/App.vue
+++ b/src/renderer/components/App.vue
@@ -353,37 +353,41 @@ watchEffect(onInvalidate => {
       ></div>
     </div>
     <div :class="['control-bar', { 'is-resident': !isPlaying }]">
-      <div class="control-item move">
-        <LucideMove />
-      </div>
-      <div class="control-item" @click="close">
-        <LucideX />
-      </div>
-      <div class="control-item" @click="toggleFullscreen">
-        <LucideMinimize v-if="isFullscreen" />
-        <LucideMaximize v-else />
-      </div>
-      <div class="control-item" @click="toggleAlwaysOnTop">
-        <LucidePinOff v-if="isAlwaysOnTop" />
-        <LucidePin v-else />
-      </div>
-      <div class="control-item style" @click="toggleDarkMode">
-        <LucideSun v-if="darkMode" />
-        <LucideMoon v-else />
-      </div>
-      <div v-if="supportsVibrancy" class="control-item style" @click="toggleVibrancy">
-        <LucideCloud v-if="vibrancy" />
-        <LucideCloudOff v-else />
+      <div class="control-area">
+        <div class="control-item move">
+          <LucideMove />
+        </div>
+        <div class="control-item" @click="close">
+          <LucideX />
+        </div>
+        <div class="control-item" @click="toggleFullscreen">
+          <LucideMinimize v-if="isFullscreen" />
+          <LucideMaximize v-else />
+        </div>
+        <div class="control-item" @click="toggleAlwaysOnTop">
+          <LucidePinOff v-if="isAlwaysOnTop" />
+          <LucidePin v-else />
+        </div>
+        <div class="control-item" @click="play">
+          <template v-if="isConnected">
+            <LucideMonitorPause v-if="isPlaying" />
+            <LucideMonitorPlay v-else />
+          </template>
+          <template v-else>
+            <LucidePause v-if="isPlaying" />
+            <LucidePlay v-else />
+          </template>
+        </div>
       </div>
-      <div class="control-item" @click="play">
-        <template v-if="isConnected">
-          <LucideMonitorPause v-if="isPlaying" />
-          <LucideMonitorPlay v-else />
-        </template>
-        <template v-else>
-          <LucidePause v-if="isPlaying" />
-          <LucidePlay v-else />
-        </template>
+      <div class="control-area">
+        <div class="control-item style" @click="toggleDarkMode">
+          <LucideSun v-if="darkMode" />
+          <LucideMoon v-else />
+        </div>
+        <div v-if="supportsVibrancy" class="control-item style" @click="toggleVibrancy">
+          <LucideCloud v-if="vibrancy" />
+          <LucideCloudOff v-else />
+        </div>
       </div>
     </div>
     <div v-if="!isPlaying" class="searcher">
@@ -558,11 +562,11 @@ watchEffect(onInvalidate => {
   right: 0.5em;
   left: 0.5em;
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
   max-width: calc(100vw - 1em);
   color: var(--foreground);
   font-size: 48px;
-  border-radius: 1em;
   opacity: 0;
   transition: color 0.5s, opacity 0.4s;
   &:hover,
@@ -570,6 +574,10 @@ watchEffect(onInvalidate => {
     opacity: 1;
   }
 }
+.control-area {
+  display: flex;
+  flex-wrap: wrap;
+}
 .control-item {
   display: flex;
   justify-content: center;
@@ -585,12 +593,5 @@ watchEffect(onInvalidate => {
   &.move {
     -webkit-app-region: drag;
   }
-  &.style {
-    order: 1;
-    margin-left: auto;
-    & ~ & {
-      margin-left: unset;
-    }
-  }
 }
 </style>