From b0425b37c063b6349770c2a89506cae54bf7f38a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 30 Jan 2025 02:40:04 +0100
Subject: [PATCH] minor style tweaks

---
 src/common/interfaces/SettingsInterface.ts    |  4 +--
 src/csui/Popup.vue                            | 25 +++++++++++++++++--
 .../src/PlayerUiPanels/ChangelogPanel.vue     | 10 ++++----
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
index 2bec5f7..33472a6 100644
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/src/common/interfaces/SettingsInterface.ts
@@ -171,8 +171,8 @@ interface SettingsInterface {
 
   ui: {
     inPlayer: {
-      enabled: boolean,
-      enabledFullscreenOnly: boolean,
+      enabled: boolean,                        // Deprecated — moved to site settings
+      enabledFullscreenOnly: boolean,          // Deprecated — moved to site settings
       popupAlignment: 'left' | 'right',
       minEnabledWidth: number,                 // don't show UI if player is narrower than % of screen width
       minEnabledHeight: number,                // don't show UI if player is narrower than % of screen height
diff --git a/src/csui/Popup.vue b/src/csui/Popup.vue
index 4fef7ec..c0f2b56 100644
--- a/src/csui/Popup.vue
+++ b/src/csui/Popup.vue
@@ -48,7 +48,10 @@
             v-for="tab of tabs"
             :key="tab.id"
             class="tab flex flex-row"
-            :class="{'active': tab.id === selectedTab}"
+            :class="{
+              'active': tab.id === selectedTab,
+              'highlight-tab': tab.highlight,
+            }"
             @click="selectTab(tab.id)"
           >
             <div class="icon-container">
@@ -92,7 +95,10 @@
               :site="site.host"
             >
             </BaseExtensionSettings>
-
+            <ChangelogPanel
+              v-if="selectedTab === 'changelog'"
+              :settings="settings"
+            ></ChangelogPanel>
             <AboutPanel
               v-if="selectedTab === 'about'"
             >
@@ -109,6 +115,7 @@
 <script>
 import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vue'
 import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.vue'
+import ChangelogPanel from './src/PlayerUiPanels/ChangelogPanel.vue'
 import PopupVideoSettings from './src/popup/panels/PopupVideoSettings.vue'
 import InPlayerUIAdvertisement from './src/PlayerUiPanels/InPlayerUiAdvertisement.vue';
 import AboutPanel from '@csui/src/popup/panels/AboutPanel.vue'
@@ -131,6 +138,7 @@ export default {
     BaseExtensionSettings,
     InPlayerUIAdvertisement,
     SupportLevelIndicator,
+    ChangelogPanel,
     AboutPanel
   },
   data () {
@@ -151,6 +159,7 @@ export default {
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+        {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
         {id: 'about', label: 'About', icon: 'information-outline'},
       ],
     }
@@ -160,6 +169,9 @@ export default {
       return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
     }
   },
+  mounted() {
+    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active.whatsNewChecked;
+  },
   async created() {
     this.logger = new Logger();
     await this.logger.init({
@@ -544,6 +556,15 @@ export default {
         flex-shrink: 1;
         padding: 0 !important;
       }
+
+      &.highlight-tab {
+        opacity: 0.9;
+        color: #eee;
+
+        // .label {
+        //   color: rgb(239, 192, 152);
+        // }
+      }
     }
   }
 
diff --git a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
index 4cad52b..5e3bf7b 100644
--- a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
+++ b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="flex flex-col w-full h-full gap-2">
-    <div class="flex flex-row gap-2 bg-black">
-      <div class="w-[1/2]" style="width: 50%">
+    <div class="flex flex-row gap-8 bg-black flex-wrap">
+      <div class="min-w-[400px] max-w-[520px] grow-1 shrink-1">
         <h1>What's new</h1>
         <!-- <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md" target="_blank">is available here</a>.</p> -->
 
         <h2>6.2.4</h2>
         <ul>
-          <li>[<a href="https://github.com/tamius-han/ultrawidify/issues/264" target="_blank">#264</a>] Fixed issue with white screen that affected <i>some</i> youtube users.<br/><br/>Special thanks to <a href="https://github.com/SnowyOwlNugget">SnowyOwlNugget</a>, who instead of whining provided the necessary information.</li>
+          <li>[<a href="https://github.com/tamius-han/ultrawidify/issues/264" target="_blank">#264</a>] Fixed issue with white screen that affected <i>some</i> youtube users.<br/>Special thanks to <a href="https://github.com/SnowyOwlNugget">SnowyOwlNugget</a>, who instead of whining provided the necessary information.</li>
           <li>Minor updates to the settings</li>
           <li>Switching between full screen, theater, and normal player now correctly enables and disables the extension according to the settings.</li>
           <li>Does anyone even read these?</li>
           <li>By default, extension is now only enabled for sites with 'official' and 'community' support for new installs. Extension will need to be manually enabled for other sites.</li>
-          <li>Gussief1, you owe me 5 bucks. Time to put your money where your mouth is. Paypal is <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">here.</a></li>
+          <li>Gussief1, you owe me 5 bucks. Time to put your money where your mouth is. Paypal is <a href="https://www.paypal.com/paypalme/tamius" target="_blank">here.</a></li>
           <li>Added background to in-player UI due to chrome bug affecting <code>backdrop-filter</code> inside transparent iframes.</li>
         </ul>
 
@@ -25,7 +25,7 @@
         </ul>
 
       </div>
-      <div class="w-[1/2]" style="width: 50%; padding-left: 1rem; padding-top: 5rem;">
+      <div class="min-w-[400px] max-w-[520px] grow-1 shrink-1">
         <h2>Thank you monies</h2>
         <p>
           If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.