fix(dashboard): list freeze when editing sorted-by field

also fixes the wrong cards remaining open after resorting the list

dashboard/src/lib/CardsHeader.svelte

@@ -49,7 +49,7 @@
             </div>
             <span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
         </div>
-        <div>
+        <div style="margin-left: auto;">
         {#if item && (item.avatar_url || item.icon)}
         <img tabindex={0} on:keydown|stopPropagation={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click|stopPropagation={toggleAvatarModal} class="rounded-circle avatar" src={icon_url_resized} alt={altText} />
         {:else}

dashboard/src/lib/list/CardsList.svelte

@@ -64,13 +64,14 @@
         }
     }
 
-    let isOpenArray = [];
+    let isOpen = {};
 
-    function toggleCard(index: number) {
-        if (isOpenArray[index] === true) {
-            isOpenArray[index] = false;
+    function toggleCard(index: string) {
+        isOpen[index] = isOpen[index] || {};
+        if (isOpen[index] === true) {
+            isOpen[index] = false;
         } else {
-            isOpenArray[index] = true;
+            isOpen[index] = true;
         }
     }
 
@@ -109,10 +110,10 @@
 
 {#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)}
     <div class="mb-3">    
-    {#each list as item, index (item.id + index)}
+    {#each list as item, index (item.uuid)}
         <Card>
             <h2 class="accordion-header">
-                <button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(indexStart + index)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
+                <button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(item.uuid)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
                     <CardsHeader {item} {sortBy} {searchBy}>
                         <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                             {#if isPublic || item.privacy.visibility === "public"}
@@ -129,7 +130,7 @@
                     <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
                 </button>
             </h2>
-            <Collapse isOpen={isOpenArray[indexStart + index]}>
+            <Collapse isOpen={isOpen[item.uuid]}>
                 <CardBody>
                     {#if itemType === "member"}
                     <MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} />

dashboard/src/lib/list/List.svelte

@@ -86,14 +86,6 @@
         }
     }
 
-    /* function updateList(event: any) {
-        list = list.map(member => member.id !== event.detail.id ? member : event.detail);
-    } */
-
-    /* function updateGroups(event: any) {
-        groups = event.detail;
-    } */
-
     function updateDelete(event: any) {
         if (itemType === "member") {
             members = members.filter(m => m.id !== event.detail);
@@ -105,7 +97,6 @@
     }
 
     function update(event: any) {
-        console.log(event.detail);
         if (itemType === "member") {
             members = members.map(m => m.id === event.detail.id ? m = event.detail : m);
             list = members;