updated jsvm types and removed unused helper

ui/src/components/base/PageSidebar.svelte

@@ -0,0 +1,34 @@
+<script>
+    import CommonHelper from "@/utils/CommonHelper";
+    import Dragline from "@/components/base/Dragline.svelte";
+
+    const widthStorageKey = "@adminSidebarWidth";
+
+    let classes = "";
+    export { classes as class }; // export reserved keyword
+
+    let sidebarElem;
+    let initialSidebarWidth;
+    let sidebarWidth = localStorage.getItem(widthStorageKey) || null;
+
+    $: if (sidebarWidth && sidebarElem) {
+        sidebarElem.style.width = sidebarWidth;
+        localStorage.setItem(widthStorageKey, sidebarWidth);
+    }
+</script>
+
+<aside bind:this={sidebarElem} class="page-sidebar {classes}">
+    <slot />
+</aside>
+
+<Dragline
+    on:dragstart={() => {
+        initialSidebarWidth = sidebarElem.offsetWidth;
+    }}
+    on:dragging={(e) => {
+        sidebarWidth = initialSidebarWidth + e.detail.diffX + "px";
+    }}
+    on:dragstop={() => {
+        CommonHelper.triggerResize();
+    }}
+/>

ui/src/components/collections/CollectionSidebarItem.svelte

@@ -57,7 +57,7 @@
         }
     }
     a:hover .pin-collection {
-        opacity: 0.5;
+        opacity: 0.4;
         &:hover {
             opacity: 1;
         }

ui/src/components/collections/CollectionsSidebar.svelte

@@ -1,8 +1,7 @@
 <script>
     import { hideControls } from "@/stores/app";
     import { collections, activeCollection, isCollectionsLoading } from "@/stores/collections";
-    import CommonHelper from "@/utils/CommonHelper";
-    import Dragline from "@/components/base/Dragline.svelte";
+    import PageSidebar from "@/components/base/PageSidebar.svelte";
     import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
     import CollectionSidebarItem from "@/components/collections/CollectionSidebarItem.svelte";
 
@@ -11,17 +10,9 @@
     let collectionPanel;
     let searchTerm = "";
     let pinnedIds = [];
-    let sidebarElem;
-    let initialSidebarWidth;
-    let sidebarWidth = localStorage.getItem("adminSidebarWidth") || null;
 
     loadPinned();
 
-    $: if (sidebarWidth && sidebarElem) {
-        sidebarElem.style.width = sidebarWidth;
-        localStorage.setItem("adminSidebarWidth", sidebarWidth);
-    }
-
     $: if ($collections) {
         syncPinned();
         scrollIntoView();
@@ -72,7 +63,7 @@
     }
 </script>
 
-<aside bind:this={sidebarElem} class="page-sidebar collection-sidebar">
+<PageSidebar class="collection-sidebar">
     <header class="sidebar-header">
         <div class="form-field search" class:active={hasSearch}>
             <div class="form-field-addon">
@@ -130,19 +121,7 @@
             </button>
         </footer>
     {/if}
-</aside>
-
-<Dragline
-    on:dragstart={() => {
-        initialSidebarWidth = sidebarElem.offsetWidth;
-    }}
-    on:dragging={(e) => {
-        sidebarWidth = initialSidebarWidth + e.detail.diffX + "px";
-    }}
-    on:dragstop={() => {
-        CommonHelper.triggerResize();
-    }}
-/>
+</PageSidebar>
 
 <CollectionUpsertPanel
     bind:this={collectionPanel}

ui/src/components/records/PageRecords.svelte

@@ -111,7 +111,7 @@
     }
 
     function updateQueryParams(extra = {}) {
-        const query = Object.assign(
+        const queryParams = Object.assign(
             {
                 collectionId: $activeCollection?.id || "",
                 filter: filter,
@@ -120,7 +120,7 @@
             extra
         );
 
-        CommonHelper.replaceQueryParams(query);
+        CommonHelper.replaceHashQueryParams(queryParams);
     }
 </script>
 

ui/src/components/settings/SettingsSidebar.svelte

@@ -1,9 +1,10 @@
 <script>
     import { link } from "svelte-spa-router";
     import active from "svelte-spa-router/active";
+    import PageSidebar from "@/components/base/PageSidebar.svelte";
 </script>
 
-<aside class="page-sidebar settings-sidebar">
+<PageSidebar class="settings-sidebar">
     <div class="sidebar-content">
         <div class="sidebar-title">System</div>
         <a href="/settings" class="sidebar-list-item" use:active={{ path: "/settings" }} use:link>
@@ -89,4 +90,4 @@
             <span class="txt">Admins</span>
         </a>
     </div>
-</aside>
+</PageSidebar>