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>

ui/src/scss/_layout.scss

@@ -103,7 +103,7 @@
     display: flex;
     flex-direction: column;
     width: var(--pageSidebarWidth);
-    min-width: 220px;
+    min-width: var(--pageSidebarWidth);
     max-width: 400px;
     flex-shrink: 0;
     flex-grow: 0;
@@ -222,7 +222,7 @@
         --sidebarListItemMargin: 5px;
     }
     @media screen and (max-width: 1100px) {
-        min-width: 195px;
+        min-width: 200px;
         & > * {
             padding-left: 10px;
             padding-right: 10px;

ui/src/scss/_table.scss

@@ -163,17 +163,11 @@ table {
 
     // field name specific columns
     td.col-field-id,
-    td.col-field-username {
-        width: 0;
-        white-space: nowrap;
-    }
+    td.col-field-username,
     .col-field-created,
     .col-field-updated {
         @extend %minColWidth;
     }
-    .col-field-id {
-        min-width: 175px;
-    }
 
     tr {
         outline: 0;

ui/src/scss/_vars.scss

@@ -58,7 +58,7 @@
     --lgWrapperWidth: 1200px;
 
     --appSidebarWidth: 75px;
-    --pageSidebarWidth: 235px;
+    --pageSidebarWidth: 230px;
 
     --baseAnimationSpeed: 150ms;
     --activeAnimationSpeed: 70ms;

ui/src/utils/CommonHelper.js

@@ -1962,43 +1962,39 @@ export default class CommonHelper {
     }
 
     /**
-     * Extracts the query parameters from the current url.
+     * Extracts the hash query parameters from the current url and
+     * returns them as plain object.
      *
      * @return {Object}
      */
-    static getQueryParams() {
+    static getHashQueryParams() {
         let query = "";
 
-        let url = window.location.href
-
-        // pick the last index to ensure that the correct ? is used even for hash-based routes
-        const queryStart = url.lastIndexOf("?");
+        const queryStart = window.location.hash.indexOf("?");
         if (queryStart > -1) {
-            query = url.substring(queryStart + 1);
-            url = url.substring(0, queryStart);
+            query = window.location.hash.substring(queryStart + 1);
         }
 
         return Object.fromEntries(new URLSearchParams(query))
     }
 
     /**
-     * Replaces the current query parameters without triggering
-     * the router navigation.
+     * Replaces the current hash query parameters with the provided `params`
+     * without adding new state to the browser history.
      *
-     * @param  {Object} params
+     * @param {Object} params
      */
-    static replaceQueryParams(params) {
+    static replaceHashQueryParams(params) {
         params = params || {};
 
         let query = "";
 
-        let url = window.location.href
+        let hash = window.location.hash
 
-        // pick the last index to ensure that the correct ? is used even for hash-based routes
-        const queryStart = url.lastIndexOf("?");
+        const queryStart = hash.indexOf("?");
         if (queryStart > -1) {
-            query = url.substring(queryStart + 1);
-            url = url.substring(0, queryStart);
+            query = hash.substring(queryStart + 1);
+            hash = hash.substring(0, queryStart);
         }
 
         const parsed = new URLSearchParams(query)
@@ -2014,11 +2010,16 @@ export default class CommonHelper {
         }
 
         query = parsed.toString();
-
         if (query != "") {
-            url += ("?" + query);
+            hash += ("?" + query);
         }
 
-        window.location.replace(url);
+        // replace the hash/fragment part with the updated one
+        let href = window.location.href;
+        const hashIndex = href.indexOf("#");
+        if (hashIndex > -1) {
+            href = href.substring(0, hashIndex);
+        }
+        window.location.replace(href + hash);
     }
 }