New design for songbook feature (#1228)

Co-authored-by: Google Antigravity CLI <noreply@google.com>

Author: danieladugyan

src/lib/components/MemberSelector.svelte

@@ -12,6 +12,7 @@
   import { Button } from "$lib/components/ui/button";
   import { onMount } from "svelte";
   import { cn } from "$lib/utils";
+  import { debounce } from "$lib/utils/debounce";
 
   let {
     selectedMembers = $bindable([]),
@@ -72,7 +73,6 @@
   });
 
   let input = $state("");
-  let timeout: ReturnType<typeof setTimeout> | null = null;
   let results: SearchDataWithType[] = $state([]);
   let filteredResults: MemberSearchReturnAttributes[] = $derived<
     MemberSearchReturnAttributes[]
@@ -86,37 +86,33 @@
     }),
   );
 
-  async function handleSearch() {
-    if (timeout) clearTimeout(timeout);
+  const debouncedSearch = debounce(async (searchQuery: string) => {
+    const url = new URL("/api/search", window.location.origin);
+    url.searchParams.set("query", searchQuery);
+    url.searchParams.set("indexes", JSON.stringify(["members"]));
+    url.searchParams.set("limit", "10");
+    url.searchParams.set("offset", "0");
+    const response = await fetch(url, {
+      method: "GET",
+    });
 
+    if (response.ok) {
+      results = [...(await response.json())];
+    } else {
+      results = [];
+    }
+    isSearching = false;
+  }, 200);
+
+  function handleSearch() {
     if (!input) {
+      debouncedSearch.cancel();
       isSearching = false;
       results = [];
       return;
-    } else {
-      timeout = setTimeout(async () => {
-        if (!input) {
-          results = [];
-          return;
-        }
-        const url = new URL("/api/search", window.location.origin);
-        url.searchParams.set("query", input);
-        url.searchParams.set("indexes", JSON.stringify(["members"]));
-        url.searchParams.set("limit", "10");
-        url.searchParams.set("offset", "0");
-        const response = await fetch(url, {
-          method: "GET",
-        });
-
-        if (response.ok) {
-          results = [...(await response.json())];
-        } else {
-          results = [];
-        }
-        isSearching = false;
-      }, 200);
-      isSearching = true;
     }
+    isSearching = true;
+    debouncedSearch(input);
   }
 
   function captureAddedItems() {

src/lib/components/Pagination.svelte

@@ -2,10 +2,13 @@
   import { page } from "$app/state";
   import * as Pagination from "$lib/components/ui/pagination";
   import { cn } from "$lib/utils";
+  import type { ClassValue } from "svelte/elements";
   import { SvelteURLSearchParams } from "svelte/reactivity";
 
-  let { pageCount = 10, class: klass }: { pageCount?: number; class?: string } =
-    $props();
+  let {
+    pageCount = 10,
+    class: klass,
+  }: { pageCount?: number; class?: ClassValue } = $props();
 
   let thisPage = $derived(
     Number.parseInt(page.url.searchParams?.get("page") ?? "1"),

src/lib/components/search/CommandDialog.svelte

@@ -26,6 +26,7 @@
   import SongSearchResult from "./SongSearchResult.svelte";
   import DocumentSearchResult from "./DocumentSearchResult.svelte";
   import { resolve } from "$app/paths";
+  import { debounce } from "$lib/utils/debounce";
 
   let { open = $bindable(false) } = $props();
 
@@ -37,7 +38,6 @@
   let input = $state("");
   let currentIndex = $state(-1);
   let isSearching = $state(false);
-  let timeout: ReturnType<typeof setTimeout> | null = null;
   let results: SearchDataWithType[] = $state([]);
 
   let groupedResults = $derived<{
@@ -72,25 +72,20 @@
     songs: results.filter((r) => r.type === "songs"),
   });
 
-  function handleSearch() {
-    // Cancel the previous timeout
-    if (timeout) clearTimeout(timeout);
+  const debouncedSearch = debounce(() => {
+    formElement?.requestSubmit();
+    currentIndex = -1;
+  }, 300);
 
-    // When user requests a search with empty string
-    // Happens when the user deletes the last key of the input
-    // We shouldn't search then
+  function handleSearch() {
     if (!input) {
+      debouncedSearch.cancel();
       isSearching = false;
       results = [];
       return;
-    } else {
-      // Do the search after 300ms
-      timeout = setTimeout(() => {
-        formElement?.requestSubmit();
-        currentIndex = -1;
-      }, 300);
-      isSearching = true;
     }
+    isSearching = true;
+    debouncedSearch();
   }
 
   function captureListItems() {
@@ -186,6 +181,7 @@
   // Reset input when dialog closes
   $effect(() => {
     if (!open) {
+      debouncedSearch.cancel();
       input = "";
       results = [];
       currentIndex = -1;

src/lib/utils/debounce.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { debounce } from "./debounce";
+
+describe("debounce", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should debounce function calls", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced("a");
+    debounced("b");
+    debounced("c");
+
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("c");
+  });
+
+  it("should support cancel", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced("a");
+    vi.advanceTimersByTime(50);
+    debounced.cancel();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("should support flush", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced("a");
+    debounced.flush();
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("a");
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1); // Not called again
+  });
+});

src/lib/utils/debounce.ts

@@ -0,0 +1,56 @@
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after `delay` milliseconds have elapsed since the last time the debounced
+ * function was invoked.
+ *
+ * The debounced function comes with `.cancel()` and `.flush()` methods.
+ * - `.cancel()` cancels any pending invocation.
+ * - `.flush()` immediately invokes any pending execution.
+ *
+ * @template Args - The types of the arguments of the function to debounce.
+ * @param fn - The function to debounce.
+ * @param delay - The number of milliseconds to delay.
+ * @returns The debounced function with cancel and flush capabilities.
+ */
+export function debounce<Args extends unknown[]>(
+  fn: (...args: Args) => void | Promise<void>,
+  delay: number,
+): ((...args: Args) => void) & { cancel: () => void; flush: () => void } {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  let lastArgs: Args | null = null;
+
+  const debounced = (...args: Args) => {
+    lastArgs = args;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      if (lastArgs) {
+        fn(...lastArgs);
+        lastArgs = null;
+      }
+      timeout = null;
+    }, delay);
+  };
+
+  debounced.cancel = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    lastArgs = null;
+  };
+
+  debounced.flush = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    if (lastArgs) {
+      fn(...lastArgs);
+      lastArgs = null;
+    }
+  };
+
+  return debounced;
+}

src/routes/(app)/news/NewsSearch.svelte

@@ -10,6 +10,7 @@
   import ArticleSearchResult from "./ArticleSearchResult.svelte";
   import Input from "$lib/components/ui/input/input.svelte";
   import { ScrollArea } from "$lib/components/ui/scroll-area";
+  import { debounce } from "$lib/utils/debounce";
 
   import Search from "@lucide/svelte/icons/search";
 
@@ -19,7 +20,6 @@
   let inputElement: HTMLInputElement | null = $state(null);
 
   let input = $state("");
-  let timeout: ReturnType<typeof setTimeout> | null = null;
   let results: SearchDataWithType[] = $state([]);
 
   let groupedResults = $derived<{
@@ -28,22 +28,17 @@
     articles: results.filter((r) => r.type === "articles"),
   });
 
-  function handleSearch() {
-    // Cancel the previous timeout
-    if (timeout) clearTimeout(timeout);
+  const debouncedSearch = debounce(() => {
+    formElement?.requestSubmit();
+  }, 300);
 
-    // When user requests a search with empty string
-    // Happens when the user deletes the last key of the input
-    // We shouldn't search then
+  function handleSearch() {
     if (!input) {
+      debouncedSearch.cancel();
       results = [];
       return;
-    } else {
-      // Do the search after 300ms
-      timeout = setTimeout(() => {
-        formElement?.requestSubmit();
-      }, 300);
     }
+    debouncedSearch();
   }
 </script>
 

src/routes/(app)/songbook/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="layout-container py-8">
+  {@render children()}
+</div>