feat(dashboard): change cardsheader to display name when sorting/searching by it

dashboard/src/lib/list/CardsList.svelte

@@ -25,6 +25,9 @@
 
     export let openByDefault = false;
 
+    export let searchBy = "name";
+    export let sortBy = "name";
+
     $: indexStart = itemsPerPage * (currentPage - 1);
 
     function getItemLink(item: Member | Group): string {
@@ -110,7 +113,7 @@
         <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)}>
-                    <CardsHeader {item}>
+                    <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"}
                             {#if itemType === "member"}
@@ -143,7 +146,7 @@
     <Card class="mb-3">
         <div class="accordion-button collapsed p-0" id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}>
             <CardHeader class="w-100">
-                <CardsHeader {item}>
+                <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|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                         {#if isPublic || item.privacy.visibility === "public"}
                         {#if itemType === "member"}