sup

Author: Sup2point0

src/parts/ui/clicky.select.svelte

@@ -6,25 +6,19 @@ A button that selects a single option from a list of available options when clic
 <script lang="ts">
 
 interface Props {
-  source?: string | null;
-  key: string | null;
+  text: string;
+  active: boolean;
   disabled?: boolean;
+  onclick: () => void;
 }
 
-let { source = $bindable(), key, disabled = false }: Props = $props();
-
-
-let active = $derived(source === key);
+let { text, active, disabled = false, onclick }: Props = $props();
 
 </script>
 
 
-<button class:active {disabled}
-  onclick={() => {
-    source = key;
-  }}
->
-  {key?.toUpperCase() ?? "DEFAULT"}
+<button class:active {disabled} {onclick}>
+  {text}
 </button>
 
 

src/parts/ui/search-filters.svelte

@@ -55,9 +55,23 @@ let open = $state(false);
           <td> <div class="toggles">
             {#each filters.groups as group}
               <ClickySelect
-                bind:source={filters.group_by}
-                key={group}
+                text={group.toUpperCase()}
+                active={filters.group_by === group}
                 disabled={filters.sort_by !== "default" && filters.sort_by === group}
+                onclick={() => {
+                  if (group === "default") {
+                    if (filters.group_by !== "default") {
+                      filters.group_by = "default";
+                      filters.dirtiness--;
+                    }
+                  }
+                  else {
+                    if (filters.group_by === "default") {
+                      filters.dirtiness++;
+                    }
+                    filters.group_by = group;
+                  }
+                }}
               />
             {/each}
           </div> </td>
@@ -75,9 +89,23 @@ let open = $state(false);
           <td> <div class="toggles">
             {#each filters.sorts as sort}
               <ClickySelect
-                bind:source={filters.sort_by}
-                key={sort}
+                text={sort.toUpperCase()}
+                active={filters.sort_by === sort}
                 disabled={filters.group_by !== "default" && filters.group_by === sort}
+                onclick={() => {
+                  if (sort === "default") {
+                    if (filters.sort_by !== "default") {
+                      filters.sort_by = "default";
+                      filters.dirtiness--;
+                    }
+                  }
+                  else {
+                    if (filters.sort_by === "default") {
+                      filters.dirtiness++;
+                    }
+                    filters.sort_by = sort;
+                  }
+                }}
               />
             {/each}
           </div> </td>

src/routes/(sup)/sup/projects/filter.svelte.ts

@@ -1,6 +1,6 @@
 import { partial_ratio } from "fuzzball";
 
-import { SearchFilter } from "#scripts/search-filter.svelte";
+import { SearchFilter, type FilterResults } from "#scripts/search-filter.svelte";
 import { any, all, get_enabled } from "#scripts/utils";
 
 import { Lang, Tool, Flavour, Kind, State } from "./projects";
@@ -72,8 +72,22 @@ export class ProjectSearchFilter extends SearchFilter<ProjectData>
   }
 
 
-  apply(projects: ProjectData[]): ProjectData[]
+  apply(projects: ProjectData[]): FilterResults<ProjectData>
   {    
+    let out: FilterResults<ProjectData> = this.#filter(projects);
+    
+    if (this.group_by !== "default") {
+      out = this.#group_and_sort(out);
+    }
+    else if (this.query) {
+      out = this.#sort(out);
+    }
+
+    return out;
+  }
+
+  #filter(projects: ProjectData[]): ProjectData[]
+  {
     let out = projects.filter(
       proj => {
         proj._score_ = 0;
@@ -115,18 +129,28 @@ export class ProjectSearchFilter extends SearchFilter<ProjectData>
       out = projects;
     }
 
-    if (this.query) {
-      out = super.sort(out,
-        proj => Math.max(
-          partial_ratio(this.query, proj.name),
-          partial_ratio(this.query, proj.tech.join(" ")),
-          proj.desc ? partial_ratio(this.query, proj.desc) : 0,
-          proj.tech ? partial_ratio(this.query, proj.tech.join(" ")) : 0,
-          proj.tags ? partial_ratio(this.query, proj.tags.join(" ")) : 0,
-        )
-      );
-    }
-
     return out;
   }
+
+  #group_and_sort(projects: ProjectData[]): [string, ProjectData[]][]
+  {
+    return super.group(
+      projects,
+      proj => proj[this.group_by],
+      group => 1,
+    );
+  }
+
+  #sort(projects: ProjectData[]): ProjectData[]
+  {
+    return super.sort(projects,
+      proj => Math.max(
+        partial_ratio(this.query, proj.name),
+        partial_ratio(this.query, proj.tech.join(" ")),
+        proj.desc ? partial_ratio(this.query, proj.desc) : 0,
+        proj.tech ? partial_ratio(this.query, proj.tech.join(" ")) : 0,
+        proj.tags ? partial_ratio(this.query, proj.tags.join(" ")) : 0,
+      )
+    );
+  }
 }

src/scripts/search-filter.svelte.ts

@@ -94,7 +94,7 @@ export class SearchFilter<Entity extends Searchable>
     let out = Object.entries(groups);
 
     if (sorter) {
-      out.sort(([group, entities]) => sorter(group));
+      out.sort(([group1, _], [group2, __]) => sorter(group1) - sorter(group2));
     }
 
     if (this.reverse_group) {