add: store search grid/list btns

skin.json

@@ -403,7 +403,6 @@
 
 
 
-
         "Library - Steam-Custom-Artworks Support": {
             "description": "The best support for https://spacetheme.net/#steam-custom-artworks ",
             "default": "no",
@@ -612,6 +611,10 @@
             "TargetCss": "src/css/libraryroot.custom.css",
             "TargetJs": "src/js/libraryroot.custom.js"
         },
+        {
+            "MatchRegexString": "https://.*\\.steampowered\\.com(/.*)?",
+            "TargetJs": "src/js/webkit.js"
+        },
         {
             "MatchRegexString": "https://steamcommunity\\.com(/.*)?",
             "TargetCss": "src/css/custom/custom.css",

src/css/webkit/store/search.css

@@ -66,15 +66,19 @@
 ! Top Controls
 */
 .search_page .searchbar {
+    display: flex;
     margin: 0;
     padding: 12px;
     border-radius: 8px 8px 0 0;
     background-color: rgb(var(--st-color-2));
 }
 
 .search_page .searchbar .searchbar_left {
+    order: 1;
     display: flex;
+    justify-content: flex-end;
     height: 30px;
+    margin-left: auto;
     padding: 0;
 }
 
@@ -232,6 +236,51 @@
 }
 
 
+/*** View */
+.search_page .st-search-view-toggle {
+    box-sizing: border-box;
+    display: flex;
+    gap: 4px;
+    width: fit-content;
+    height: 30px;
+    margin-left: 12px;
+}
+
+/*^ Button */
+.search_page .st-search-view-toggle .st-btn {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px;
+    border-radius: 8px;
+}
+.search_page .st-search-view-toggle .st-btn.active {
+    background-color: rgb(var(--st-color-1));
+}
+
+/* SVG */
+.search_page .st-search-view-toggle .st-btn svg {
+    display: none;
+}
+
+/* Custom icon */
+.search_page .st-search-view-toggle .st-btn.active::before {
+    color: rgb(var(--st-accent-1)) !important;
+}
+
+.search_page .st-search-view-toggle .st-btn.list::before {
+    content: "\f07e2" !important;
+    font-size: 16px;
+    color: #dcdedf;
+}
+.search_page .st-search-view-toggle .st-btn.grid::before {
+    content: "\f467" !important;
+    font-size: 16px;
+    color: #dcdedf;
+}
+
+
 /*
 ! Warning
 */
@@ -263,6 +312,11 @@
 .search_page #search_result_container #search_resultsRows {
     gap: 6px;
 }
+.search_page.st-grid-view #search_result_container #search_resultsRows {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
 
 
 
@@ -278,6 +332,9 @@
     border-radius: 8px;
     background-color: rgb(var(--st-color-2));
 }
+.search_page.st-grid-view #search_result_container .search_result_row {
+    flex-direction: column;
+}
 
 
 /** Image */
@@ -298,6 +355,13 @@
         "reviews release price price";
     justify-content: unset;
 }
+.search_page.st-grid-view #search_result_container .search_result_row .responsive_search_name_combined {
+    gap: 6px;
+    grid-template-areas:
+        "title title title platforms"
+        "reviews reviews price price"
+        "release release price price" !important;
+}
 
 /*^ Title */
 .search_page #search_result_container .search_result_row .search_name {
@@ -330,6 +394,9 @@
     line-height: 16px;
     color: #a9a9a9;
 }
+.search_page.st-grid-view #search_result_container .search_result_row .search_released {
+    margin: 0 !important;
+}
 
 /*^ Price */
 .search_page #search_result_container .search_result_row .search_price_discount_combined {

src/js/webkit.js

@@ -0,0 +1,89 @@
+(async function() {
+    // should work only on search page
+    if (!window.location.pathname.startsWith('/search')) return;
+
+    const waitForElement = (selector, parent = document) => new Promise((resolve) => {
+        const el = parent.querySelector(selector);
+        if (el) resolve(el);
+
+        const observer = new MutationObserver(() => {
+            const el = parent.querySelector(selector);
+            if (!el) return;
+            resolve(el);
+            observer.disconnect();
+        });
+
+        observer.observe(document.body, {
+            subtree: true,
+            childList: true,
+        });
+    });
+
+    const containerParent = await waitForElement('.searchbar');
+    const searchResultsRows = await waitForElement('#search_resultsRows');
+    if (!containerParent) return;
+
+    const btnContainer = document.createElement('div');
+    btnContainer.className = 'st-search-view-toggle';
+
+    const listBtn = document.createElement('div');
+    listBtn.className = 'st-btn list';
+    listBtn.innerHTML = `
+        <svg></svg>
+    `;
+
+    const gridBtn = document.createElement('div');
+    gridBtn.className = 'st-btn grid';
+    gridBtn.innerHTML = `
+        <svg></svg>
+    `;
+
+    btnContainer.appendChild(listBtn);
+    btnContainer.appendChild(gridBtn);
+    if (searchResultsRows && searchResultsRows.parentElement === containerParent) {
+        containerParent.insertBefore(btnContainer, searchResultsRows);
+    } else {
+        containerParent.appendChild(btnContainer);
+    }
+
+
+    gridBtn.addEventListener('click', () => {
+        document.body.classList.add('st-grid-view');
+        localStorage.setItem('st-search-view', 'grid');
+        gridBtn.classList.add('active');
+        listBtn.classList.remove('active');
+    });
+
+    listBtn.addEventListener('click', () => {
+        document.body.classList.remove('st-grid-view');
+        localStorage.setItem('st-search-view', 'list');
+        listBtn.classList.add('active');
+        gridBtn.classList.remove('active');
+    });
+
+    if (localStorage.getItem('st-search-view') === 'list') {
+        document.body.classList.remove('st-grid-view');
+        listBtn.classList.add('active');
+    } else {
+        document.body.classList.add('st-grid-view');
+        gridBtn.classList.add('active');
+    }
+
+    const parentObserver = new MutationObserver(() => {
+        if (!document.body.contains(btnContainer)) {
+            const rows = searchResultsRows;
+            if (rows && rows.parentElement) {
+                rows.parentElement.insertBefore(btnContainer, rows);
+                return;
+            }
+            if (containerParent) {
+                containerParent.appendChild(btnContainer);
+            }
+        }
+    });
+
+    parentObserver.observe(containerParent, {
+        childList: true,
+        subtree: true
+    });
+})();