Extension settings now holds both extension and site settings

src/csui/src/PlayerUIWindow.vue

@@ -150,9 +150,9 @@ export default {
       tabs: [
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
-        {id: 'extensionSettings', label: 'Extension options', icon: 'cogs' },
+        {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
         {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
-        {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
+        // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
         {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
       ],
       selectedTab: 'videoSettings',

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -1,12 +1,43 @@
 <template>
   <div class="flex flex-column w-100">
 
-    <SiteExtensionSettings
+    <!-- TAB ROW -->
-      v-if="settings"
+    <div class="flex flex-row">
-      :settings="settings"
+      <div
-      :siteSettings="globalSettings"
+        class="tab"
-      :isDefaultConfiguration="true"
+        :class="{'active': tab === 'siteSettings'}"
-    ></SiteExtensionSettings>
+        @click="setTab('siteSettings')"
+      >
+        Settings for current site<br/>
+        <small>{{ site }}</small>
+      </div>
+      <div
+        class="tab"
+        :class="{'active': tab === 'extensionSettings'}"
+        @click="setTab(tab = 'extensionSettings')"
+      >
+        Default settings for extension
+      </div>
+    </div>
+
+    <template v-if="tab === 'siteSettings' && siteSettings">
+      <SiteExtensionSettings
+        v-if="settings"
+        :settings="settings"
+        :siteSettings="siteSettings"
+        :isDefaultConfiguration="false"
+      ></SiteExtensionSettings>
+    </template>
+
+    <template v-if="tab === 'extensionSettings' && globalSettings">
+      not site settings
+      <SiteExtensionSettings
+        v-if="settings"
+        :settings="settings"
+        :siteSettings="globalSettings"
+        :isDefaultConfiguration="true"
+      ></SiteExtensionSettings>
+    </template>
 
     <!-- <SiteSettingsBasicTable
       :settings="settings"
@@ -22,6 +53,7 @@ import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExten
 export default {
   data() {
     return {
+      tab: 'siteSettings'
     }
   },
   mixins: [
@@ -38,6 +70,17 @@ export default {
   computed: {
     globalSettings() {
       return this.settings?.getSiteSettings('@global') ?? null;
+    },
+    siteSettings() {
+      if (this.site) {
+        return  this.settings?.getSiteSettings(this.site) ?? null;
+      }
+      return null;
+    }
+  },
+  methods: {
+    setTab(tab) {
+      this.tab = tab;
     }
   }
 

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -214,7 +214,7 @@
             v-if="!isDefaultConfiguration"
             :value="CropModePersistence.Default"
           >
-            Use default ({{defaultPersistanceLabel()}})
+            Use default ({{defaultPersistanceLabel}})
           </option>
           <option :value="CropModePersistence.Disabled">Disabled</option>
           <option :value="CropModePersistence.UntilPageReload">Until page reload</option>