Pin and close buttons

src/csui/src/PlayerUIWindow.vue

@@ -3,6 +3,7 @@
     class="popup-panel flex flex-column uw-clickable h-full"
   >
     <div class="popup-window-header">
+      <div class="header-title">
         <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
         <div class="site-support-info">
           <div class="site-support-site">{{site}}</div>
@@ -40,8 +41,24 @@
             <mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
           </template>
         </div>
-
-      <div><a @click="setPreventClose(!preventClose)">{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
+      </div>
+      <div class="header-buttons">
+        <div
+          class="header-button"
+          :class="{'button-active': preventClose}"
+          @click="setPreventClose(!preventClose)"
+        >
+          <mdicon v-if="!preventClose" name="pin-outline" :size="32" />
+          <mdicon v-else name="pin" :size="32" />
+        </div>
+        <dv
+          class="header-button close-button"
+          @click="$emit('close')"
+        >
+          <mdicon name="close" :size="36"></mdicon>
+        </dv>
+        <!-- <a >{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a> -->
+      </div>
     </div>
 
     <div class="tab-main flex flex-row">
@@ -353,6 +370,45 @@ export default {
   .popup-window-header {
     padding: 1rem;
     background-color: rgba(5,5,5, 0.75);
+
+    display: flex;
+    flex-direction: row;
+
+    .header-title {
+      flex: 1 1;
+    }
+    .header-buttons {
+      flex: 0 0;
+      display: flex;
+      flex-direction: row;
+
+      .header-button {
+        cursor: pointer;
+        border-radius: 50%;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.button-active {
+          background-color: #fa6;
+          color: #000;
+
+          &:hover {
+            color: #ccc;
+          }
+        }
+
+        &.close-button {
+          color: #f00;
+        }
+
+        &:hover {
+          color: #fa6;
+        }
+      }
+    }
   }
   .tab-row {
     background-color: rgba(11,11,11, 0.75);