adds search api

web/src/lib/components/base/pagination.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    import { range } from "$lib/util/array_util";
+    import { createEventDispatcher } from "svelte";
+
+    export let page: number;
+    export let totalPages: number;
+
+    const maxPagesToRender = 6;
+    const dispatch = createEventDispatcher();
+
+    function update(clickedPage: number) {
+        if (page !== clickedPage) {
+            dispatch("pagination", clickedPage);
+        }
+    }
+
+    $: numberGenerator = () => {
+        if (totalPages < 4) {
+            return [];
+        }
+        if (totalPages <= maxPagesToRender) {
+            return range(totalPages - 2, 2);
+        }
+        if (page < maxPagesToRender - 2) {
+            return range(maxPagesToRender - 1, 2);
+        }
+        if (page > totalPages - 3) {
+            return range(totalPages - 2, totalPages - 5);
+        }
+        if (page > 2 && page <= totalPages - 3) {
+            return range(page + Math.max(1, maxPagesToRender - 5), page - 2);
+        }
+        return [];
+    };
+</script>
+
+<div class="flex gap-x-4 justify-center">
+    {#if totalPages > 1}
+        <button
+            class:text-gray-500={page == 1}
+            disabled={page == 1}
+            on:click={() => update(page - 1)}
+            ><i class="fa fa-caret-left"></i></button
+        >
+        <button
+            class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
+            class:border={page == 1}
+            on:click={() => update(1)}>1</button
+        >
+        {#if totalPages > maxPagesToRender && page >= maxPagesToRender - 2 && page > 2}
+            <span>...</span>
+        {:else if totalPages > 2}
+            <button
+                class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
+                class:border={page == 2}
+                on:click={() => update(2)}>2</button
+            >
+        {/if}
+        {#each numberGenerator() as i}
+            <button
+                class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
+                class:border={page == i + 1}
+                on:click={() => update(i + 1)}>{i + 1}</button
+            >
+        {/each}
+        {#if totalPages > maxPagesToRender && page < totalPages - 3}
+            <span>...</span>
+        {:else if totalPages > 3}
+            <button
+                class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
+                class:border={page == totalPages - 1}
+                on:click={() => update(totalPages - 1)}>{totalPages - 1}</button
+            >
+        {/if}
+        <button
+            class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
+            class:border={page == totalPages}
+            on:click={() => update(totalPages)}>{totalPages}</button
+        >
+        <button
+            class:text-gray-500={page == totalPages}
+            disabled={page == totalPages}
+            on:click={() => update(page + 1)}
+            ><i class="fa fa-caret-right"></i></button
+        >
+    {/if}
+</div>

web/src/lib/components/trail/trail_dropdown.svelte

@@ -90,14 +90,14 @@
                 show_toast({
                     type: "success",
                     icon: "check",
-                    text: `Removed trail from "${list.name}"`,
+                    text: `${$_("removed-trail-from")} "${list.name}"`,
                 });
             } else {
                 await lists_add_trail(list, trail);
                 show_toast({
                     type: "success",
                     icon: "check",
-                    text: `Added trail to "${list.name}"`,
+                    text: `${$_("added-trail-to")} "${list.name}"`,
                 });
             }
             await lists_index();

web/src/lib/components/trail/trail_list.svelte

@@ -6,13 +6,19 @@
     import TrailCard from "./trail_card.svelte";
     import TrailListItem from "./trail_list_item.svelte";
     import { _ } from "svelte-i18n";
+    import Pagination from "../base/pagination.svelte";
+    import TextField from "../base/text_field.svelte";
 
     export let filter: TrailFilter;
     export let trails: Trail[];
+    export let pagination: { page: number; totalPages: number } = {
+        page: 1,
+        totalPages: 1,
+    };
 
     const displayOptions: SelectItem[] = [
-        { text: $_('card', {values: {n: 2}}), value: "cards" },
-        { text: $_('list', {values: {n: 1}}), value: "list" },
+        { text: $_("card", { values: { n: 2 } }), value: "cards" },
+        { text: $_("list", { values: { n: 1 } }), value: "list" },
     ];
 
     let selectedDisplayOption = displayOptions[0].value;
@@ -20,10 +26,10 @@
     let dispatch = createEventDispatcher();
 
     const sortOptions: SelectItem[] = [
-        { text: $_('alphabetical'), value: "name" },
-        { text: $_('creation-date'), value: "created" },
-        { text: $_('distance'), value: "distance" },
-        { text: $_('elevation-gain'), value: "elevation_gain" },
+        { text: $_("alphabetical"), value: "name" },
+        { text: $_("creation-date"), value: "created" },
+        { text: $_("distance"), value: "distance" },
+        { text: $_("elevation-gain"), value: "elevation_gain" },
     ];
 
     onMount(() => {
@@ -37,11 +43,11 @@
         localStorage.setItem("displayOption", selectedDisplayOption);
     }
 
-    async function setSort() {
+    function setSort() {
         dispatch("update", filter);
     }
 
-    async function setSortOrder() {
+    function setSortOrder() {
         if (filter.sortOrder === "+") {
             filter.sortOrder = "-";
         } else {
@@ -52,9 +58,16 @@
 </script>
 
 <div class="min-w-0">
-    <div class="flex items-start gap-8 justify-end mx-4">
-        <div>
-            <p class="text-sm text-gray-500 pb-2">{$_('sort')}</p>
+    <div class="flex items-end flex-wrap md:flex-nowrap gap-x-6 gap-y-2 mx-4">
+        <div class="basis-full order-1 md:order-none mt-6 md:mt-0">
+            <Pagination
+                page={pagination.page}
+                totalPages={pagination.totalPages}
+                on:pagination
+            ></Pagination>
+        </div>
+        <div class="lg:shrink-0">
+            <p class="text-sm text-gray-500 pb-2">{$_("sort")}</p>
             <div class="flex items-center gap-2">
                 <Select
                     bind:value={filter.sort}
@@ -70,8 +83,8 @@
                 >
             </div>
         </div>
-        <div>
-            <p class="text-sm text-gray-500 pb-2">{$_('display-as')}</p>
+        <div class="lg:shrink-0">
+            <p class="text-sm text-gray-500 pb-2">{$_("display-as")}</p>
 
             <Select
                 bind:value={selectedDisplayOption}