added support to reference collections in the UI with both their name and id

ui/src/App.svelte

@@ -139,7 +139,7 @@
                     </div>
                     <hr />
                     <a
-                        href="/collections?collectionId=_pbc_3323866339"
+                        href="/collections?collection=_superusers"
                         class="dropdown-item closable"
                         role="menuitem"
                         use:link

ui/src/components/collections/CollectionSidebarItem.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <a
-    href="/collections?collectionId={collection.id}"
+    href="/collections?collection={collection.id}"
     class="sidebar-list-item"
     title={collection.name}
     class:active={$activeCollection?.id === collection.id}

ui/src/components/collections/CollectionUpdateConfirm.svelte

@@ -106,7 +106,7 @@
     }
 
     function getExternalAuthsFilterLink(provider) {
-        return `#/collections?collectionId=_pbc_2951383030&filter=collectionRef%3D%22${newCollection?.id}%22+%26%26+provider%3D%22${provider}%22`;
+        return `#/collections?collection=_externalAuths&filter=collectionRef%3D%22${newCollection?.id}%22+%26%26+provider%3D%22${provider}%22`;
     }
 </script>
 

ui/src/components/records/PageRecords.svelte

@@ -13,7 +13,7 @@
     import { hideControls, pageTitle } from "@/stores/app";
     import {
         activeCollection,
-        changeActiveCollectionById,
+        changeActiveCollectionByIdOrName,
         collections,
         isCollectionsLoading,
         loadCollections,
@@ -32,23 +32,31 @@
     let recordsCount;
     let filter = initialQueryParams.get("filter") || "";
     let sort = initialQueryParams.get("sort") || "-@rowid";
-    let selectedCollectionId = initialQueryParams.get("collectionId") || $activeCollection?.id;
+    let selectedCollectionIdOrName = initialQueryParams.get("collection") || $activeCollection?.id;
     let totalCount = 0; // used to manully change the count without the need of reloading the recordsCount component
 
-    loadCollections(selectedCollectionId);
+    loadCollections(selectedCollectionIdOrName);
 
     $: reactiveParams = new URLSearchParams($querystring);
 
+    $: collectionQueryParam = reactiveParams.get("collection");
+
     $: if (
         !$isCollectionsLoading &&
-        reactiveParams.get("collectionId") &&
-        reactiveParams.get("collectionId") != selectedCollectionId
+        collectionQueryParam &&
+        collectionQueryParam != selectedCollectionIdOrName &&
+        collectionQueryParam != $activeCollection?.id &&
+        collectionQueryParam != $activeCollection?.name
     ) {
-        changeActiveCollectionById(reactiveParams.get("collectionId"));
+        changeActiveCollectionByIdOrName(collectionQueryParam);
     }
 
     // reset filter and sort on collection change
-    $: if ($activeCollection?.id && selectedCollectionId != $activeCollection.id) {
+    $: if (
+        $activeCollection?.id &&
+        selectedCollectionIdOrName != $activeCollection.id &&
+        selectedCollectionIdOrName != $activeCollection.name
+    ) {
         reset();
     }
 
@@ -76,7 +84,7 @@
     }
 
     function reset() {
-        selectedCollectionId = $activeCollection?.id;
+        selectedCollectionIdOrName = $activeCollection?.id;
         filter = "";
         sort = "-@rowid";
 
@@ -120,7 +128,7 @@
     function updateQueryParams(extra = {}) {
         const queryParams = Object.assign(
             {
-                collectionId: $activeCollection?.id || "",
+                collection: $activeCollection?.id || "",
                 filter: filter,
                 sort: sort,
             },

ui/src/components/records/RecordInfo.svelte

@@ -18,7 +18,7 @@
     <RecordInfoContent {record} />
 
     <a
-        href="#/collections?collectionId={record.collectionId}&recordId={record.id}"
+        href="#/collections?collection={record.collectionId}&recordId={record.id}"
         target="_blank"
         class="inline-flex link-hint"
         rel="noopener noreferrer"

ui/src/stores/collections.js

@@ -22,10 +22,9 @@ function notifyOtherTabs() {
     notifyChannel?.postMessage("reload");
 }
 
-export function changeActiveCollectionById(collectionId) {
+export function changeActiveCollectionByIdOrName(collectionIdOrName) {
     collections.update((list) => {
-        const found = CommonHelper.findByKey(list, "id", collectionId);
-
+        const found = list.find((c) => c.id == collectionIdOrName || c.name == collectionIdOrName);
         if (found) {
             activeCollection.set(found);
         } else if (list.length) {
@@ -73,7 +72,7 @@ export function removeCollection(collection) {
 }
 
 // load all collections
-export async function loadCollections(activeId = null) {
+export async function loadCollections(activeIdOrName = null) {
     isCollectionsLoading.set(true);
 
     try {
@@ -85,11 +84,11 @@ export async function loadCollections(activeId = null) {
 
         collections.set(items);
 
-        const item = activeId && CommonHelper.findByKey(items, "id", activeId);
+        const item = activeIdOrName && items.find((c) => c.id == activeIdOrName || c.name == activeIdOrName);
         if (item) {
             activeCollection.set(item);
         } else if (items.length) {
-            activeCollection.set(items.find((f) => !f.system) || items[0]);
+            activeCollection.set(items.find((c) => !c.system) || items[0]);
         }
 
         refreshProtectedFilesCollectionsCache();