fix: various sorting and filtering issues

Author: Draconizations

src/components/dash/filters/AddSort.svelte

@@ -7,14 +7,10 @@
 
   let {
     type,
-    list,
     sorts = $bindable(),
-    groupList,
   }: {
     type: "members" | "groups"
-    list: DashList<Member | Group>
     sorts: Sort[]
-    groupList: DashList<Group>
   } = $props()
 
   let sortMode: SortMode | null = $state(null)
@@ -34,7 +30,7 @@
       sortOrder
     )
 
-    sorts = [...sorts, sort]
+    sorts.push(sort)
 
     sortField = ""
     sortMode = null

src/components/dash/filters/FilterGroupHeader.svelte

@@ -5,9 +5,8 @@
   import { IconTrash } from "@tabler/icons-svelte"
 
   let {
-    group,
-    list,
-    groupList,
+    group = $bindable(),
+    list = $bindable(),
   }: {
     group: FilterGroup
     list: DashList<Member | Group>
@@ -37,7 +36,7 @@
   <button
     class="text-muted hover:text-error hover:scale-110 transition-all focus:text-error focus:scale-110 btn-circle btn-xs"
     onclick={() => {
-      list.filters = list.filters.filter((g) => g.id !== group.id)
+      list.filters.splice(list.filters.indexOf(group), 1)
     }}
     aria-label="Delete filter group"><IconTrash /></button
   >

src/components/dash/filters/FilterGroups.svelte

@@ -10,7 +10,7 @@
   import { flip } from "svelte/animate"
 
   let {
-    list,
+    list = $bindable(),
     memberList,
     groupList,
   }: {
@@ -84,7 +84,7 @@
           {/if}
         </div>
         <ul class="flex flex-col p-2 rounded-r-lg gap-2 flex-1">
-          <FilterGroupHeader {list} {group} {groupList} />
+          <FilterGroupHeader bind:list bind:group={list.filters[index]} {groupList} />
           {#if group.filters.length === 0}
             <div class="text-sm text-muted">
               <span>No filters in this group.</span>
@@ -120,8 +120,8 @@
                 {/if}
               </div>
               <div class="flex flex-col p-2 gap-2 flex-1">
-                <StaticFilterHeader {list} {filter} {group} {groupList} />
-                <FilterInfo {filter} {list} {memberList} {groupList} />
+                <StaticFilterHeader {list} bind:filter={list.filters[index].filters[i]} bind:group={list.filters[index]} {groupList} />
+                <FilterInfo bind:filter={list.filters[index].filters[i]} {list} {memberList} {groupList} />
               </div>
             </li>
           {/each}

src/components/dash/filters/FilterHeader.svelte

@@ -12,10 +12,8 @@
   import { IconTrash } from "@tabler/icons-svelte"
 
   let {
-    filter,
-    group,
-    list,
-    groupList,
+    filter = $bindable(),
+    group = $bindable(),
   }: {
     filter: Filter
     group: FilterGroup
@@ -108,7 +106,7 @@
   <button
     class="text-muted hover:text-error hover:scale-110 transition-all focus:text-error focus:scale-110 btn-circle btn-xs"
     onclick={() => {
-      group.filters = group.filters.filter((f) => f.id !== filter.id)
+      group.filters.splice(group.filters.indexOf(filter), 1)
     }}
     aria-label="Delete filter"
   >

src/components/dash/filters/FilterInfo.svelte

@@ -11,7 +11,7 @@
   import Svelecte from "svelecte"
 
   let {
-    filter,
+    filter = $bindable(),
     list,
     groupList,
     memberList,

src/components/dash/filters/Sorts.svelte

@@ -7,11 +7,9 @@
   import { flip } from "svelte/animate"
 
   let {
-    list,
-    groupList,
+    list = $bindable(),
   }: {
     list: DashList<Member | Group>
-    groupList: DashList<Group>
   } = $props()
 
   const moveSort = (sort: Sort, shift: 1 | -1) => {
@@ -79,7 +77,7 @@
             <button
               class="text-muted hover:text-error hover:scale-110 transition-all focus:text-error focus:scale-110 btn-circle btn-xs"
               onclick={() => {
-                list.sorts = list.sorts.filter((s) => s.id !== sort.id)
+                list.sorts.splice(list.sorts.indexOf(sort), 1)
               }}
               aria-label="Delete sort"
             >

src/components/dash/groups/GroupControls.svelte

@@ -11,7 +11,7 @@
   import { ViewType } from "$lib/dash/settings.svelte"
 
   let {
-    list,
+    list = $bindable(),
     memberList,
     privacyMode,
     simpleOnly = false,
@@ -33,6 +33,9 @@
   if (dash.settings.display?.keepOpen && list.settings.view.type === ViewType.COLLAPSE) {
     list.settings.viewType = ViewType.OPEN
   }
+
+  let filterGroups = $state(list.filters)
+  let sorts = $state(list.sorts)
 </script>
 
 <div class="flex flex-col-reverse sm:flex-row sm:justify-between">
@@ -105,16 +108,16 @@
         {privacyMode}
         groupList={list}
         {memberList}
-        bind:filterGroups={list.filters}
+        bind:filterGroups
         {list}
         type="groups"
       />
       <FilterGroups groupList={list} {list} {memberList} />
     </div>
     <div class="flex flex-col gap-2">
       <h3 class="text-xl">Sort list</h3>
-      <AddSort groupList={list} bind:sorts={list.sorts} {list} type="groups" />
-      <Sorts groupList={list} {list} />
+      <AddSort bind:sorts type="groups" />
+      <Sorts bind:list />
     </div>
   </div>
 {/if}

src/components/dash/groups/GroupHome.svelte

@@ -18,7 +18,7 @@
 >
   <div class={dash.settings.display?.forceControlsAtTop === true ? "" : "xl:w-1/3"}>
     <div class="box bg-base-100 h-min">
-      <GroupControls privacyMode={dash.privacyMode} list={dash.groups} memberList={dash.members} wide={dash.settings.display?.forceControlsAtTop === true} />
+      <GroupControls privacyMode={dash.privacyMode} bind:list={dash.groups} memberList={dash.members} wide={dash.settings.display?.forceControlsAtTop === true} />
     </div>
     {#if dash.groups.settings.filterMode === "advanced"}
       <CopyPermaLink tab="groups" />

src/components/dash/members/MemberControls.svelte

@@ -118,12 +118,12 @@
         {list}
         type="members"
       />
-      <FilterGroups {groupList} {list} memberList={list} />
+      <FilterGroups {groupList} bind:list memberList={list} />
     </div>
     <div class="flex flex-col gap-2">
       <h3 class="text-xl">Sort list</h3>
-      <AddSort {groupList} bind:sorts {list} type="members" />
-      <Sorts {groupList} {list} />
+      <AddSort bind:sorts type="members" />
+      <Sorts bind:list />
     </div>
   </div>
 {/if}