Add proper CSS ordering support for home screen sections, also improve HSS plugin support

homeScreen.css

@@ -1,28 +1,61 @@
-/* This will put the Continue Watching and Next Up sections at the top of the home screen
-   You can order your custom sections between those and the rest of the sections by using 3-99 for the section order
-   Discovery sections are 101-110 if they are enabled
-   If you want your custom section to appear after all other sections, use 111+ for the section order */
+/* Please use the CSS commented below to customize the order of KefinTweaks custom home sections */
+
+/*
+[data-custom-section-id="watchlist"] {
+    order: 60 !important;
+}
+
+[data-custom-section-id="popular-tv-networks"] {
+    order: 61 !important;
+}
+
+[data-custom-section-id="new-movies"] {
+    order: 30 !important;
+}
+
+[data-custom-section-id="new-episodes"] {
+    order: 31 !important;
+}
+*/
+
 .sections.homeSectionsContainer {
     display: flex;
     flex-direction: column;
 }
 
-.sections.homeSectionsContainer>div {
-    order: 100;
-}
-
-.sections.homeSectionsContainer>div:has(a.homeLibraryButton), 
-.sections.homeSectionsContainer>div:has([data-type="CollectionFolder"]) {
+.homeSectionsContainer > .section0 {
     order: 1;
 }
-
-.sections.homeSectionsContainer>div:has(>.emby-scroller div[data-positionticks]) {
+.homeSectionsContainer > .section1 {
     order: 2;
 }
-
-.sections.homeSectionsContainer>div:has(a[href*="type=nextup"]) {
+.homeSectionsContainer > .section2 {
     order: 3;
 }
+.homeSectionsContainer > .section3 {
+    order: 4;
+}
+.homeSectionsContainer > .section4 {
+    order: 5;
+}
+.homeSectionsContainer > .section5 {
+    order: 6;
+}
+.homeSectionsContainer > .section6 {
+    order: 7;
+}
+.homeSectionsContainer > .section7 {
+    order: 8;
+}
+.homeSectionsContainer > .section8 {
+    order: 9;
+}
+.homeSectionsContainer > .section9 {
+    order: 10;
+}
+.homeSectionsContainer > .section10 {
+    order: 11;
+}
 
 /* Halloween theme */
 .home-screen.halloween-theme #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {

homeScreen.js

@@ -37,7 +37,7 @@
                 font-size: 14px;
                 color: #666;
                 transition: opacity 0.3s ease;
-                order: 9999 !important;
+                order: 99999 !important;
                 position: relative;
             }
             
@@ -211,6 +211,12 @@
     
     // Seasonal configuration
     const SEASONAL_ITEM_LIMIT = window.KefinTweaksConfig?.homeScreen?.seasonalItemLimit || 16;
+    const SEASONAL_ORDER = window.KefinTweaksConfig?.homeScreen?.seasonalOrder || 50;
+    const DISCOVERY_ORDER = window.KefinTweaksConfig?.homeScreen?.discoveryOrder || 1000;
+    const WATCHLIST_ORDER = window.KefinTweaksConfig?.homeScreen?.watchlistOrder || 60;
+    const POPULAR_TV_NETWORKS_ORDER = window.KefinTweaksConfig?.homeScreen?.popularTVNetworksOrder || 61;
+    const NEW_MOVIES_ORDER = window.KefinTweaksConfig?.homeScreen?.newMoviesOrder || 30;
+    const NEW_EPISODES_ORDER = window.KefinTweaksConfig?.homeScreen?.newEpisodesOrder || 31;
 
     // Processing flag to prevent parallel execution
     let isProcessing = false;
@@ -1832,7 +1838,7 @@
             // Add data attributes to track rendered sections
             scrollableContainer.setAttribute('data-custom-section-id', 'new-movies');
             scrollableContainer.setAttribute('data-custom-section-name', 'New Movies');
-            scrollableContainer.style.order = 30;
+            scrollableContainer.style.order = NEW_MOVIES_ORDER;
             
             // Append to container
             container.appendChild(scrollableContainer);
@@ -1875,7 +1881,7 @@
             // Add data attributes to track rendered sections
             scrollableContainer.setAttribute('data-custom-section-id', 'new-episodes');
             scrollableContainer.setAttribute('data-custom-section-name', 'New Episodes');
-            scrollableContainer.style.order = 31;
+            scrollableContainer.style.order = NEW_EPISODES_ORDER;
             
             // Append to container
             container.appendChild(scrollableContainer);
@@ -1934,7 +1940,7 @@
             // Add data attribute to track rendered sections
             scrollableContainer.setAttribute('data-custom-section-id', 'watchlist');
             scrollableContainer.setAttribute('data-custom-section-name', 'Your Watchlist');
-            scrollableContainer.style.order = 32;
+            scrollableContainer.style.order = WATCHLIST_ORDER;
             
             // Append to container
             container.appendChild(scrollableContainer);
@@ -1987,7 +1993,7 @@
             // Render the scrollable container with the network/studio items
             const scrollableContainer = window.cardBuilder.renderCards(
                 limitedNetworks,
-                'Popular TV Studios',
+                'Popular TV Networks',
                 null,
                 true,
                 'backdrop'
@@ -1996,7 +2002,7 @@
             // Add data attribute to track rendered sections
             scrollableContainer.setAttribute('data-custom-section-id', 'popular-tv-networks');
             scrollableContainer.setAttribute('data-custom-section-name', 'Popular TV Networks');
-            scrollableContainer.style.order = 101;
+            scrollableContainer.style.order = POPULAR_TV_NETWORKS_ORDER;
             
             // Append to container
             container.appendChild(scrollableContainer);
@@ -2908,7 +2914,7 @@
             let items = [];
             let viewMoreUrl = null;
             let sectionId = '';
-            let order = 200 + renderedSections.size;
+            let order = DISCOVERY_ORDER + renderedSections.size;
             
             // Handle preloaded section data
             if (typeof sectionData === 'object' && sectionData.type) {