adds activity timeline

web/src/routes/api/v1/activity/+server.ts

@@ -0,0 +1,18 @@
+import type { Activity } from "$lib/models/activity";
+import { pb } from "$lib/pocketbase";
+import { error, json, type RequestEvent } from "@sveltejs/kit";
+
+export async function GET(event: RequestEvent) {
+    const page = event.url.searchParams.get("page") ?? "0";
+    const perPage = event.url.searchParams.get("per-page") ?? "10";
+    const filter = event.url.searchParams.get("filter") ?? "";
+
+    try {
+        const r = await pb.collection('activities')
+            .getList<Activity>(parseInt(page), parseInt(perPage), { filter: filter ?? "" })
+        return json(r)
+    } catch (e: any) {
+        throw error(e.status, e);
+    }
+}
+

web/src/routes/lists/+page.svelte

@@ -143,7 +143,7 @@
         mapWithElevation.unHighlightTrail(trail.id!);
     }
 
-    async function onListScroll(e: any) {
+    async function onListScroll(e: Event) {
         const container = e.target as HTMLDivElement;
         const scrollTop = container.scrollTop;
         const scrollHeight = container.scrollHeight;

web/src/routes/profile/[id]/+layout.server.ts

@@ -1,15 +1,26 @@
 import { users_show } from "$lib/stores/user_store";
 import { error, type ServerLoad } from "@sveltejs/kit";
+import { ClientResponseError } from "pocketbase";
 
 export const load: ServerLoad = async ({ params, locals, fetch }) => {
 
-    if(!params.id) {
+    if (!params.id) {
         error(404, "Not found")
     }
 
-    const user = await users_show(params.id, fetch);
+    try {
+        const user = await users_show(params.id, fetch);
 
-    const isOwnProfile = params.id === locals.user?.id;
+        const isOwnProfile = params.id === locals.user?.id;
+
+        return { user, isOwnProfile }
+    } catch (e) {
+        if (e instanceof ClientResponseError && e.status == 404) {
+            error(404, {
+                message: 'Not found'
+            });
+        }
+        throw e
+    }
 
-    return { user, isOwnProfile }
 };

web/src/routes/profile/[id]/+page.svelte

@@ -1,9 +1,43 @@
 <script lang="ts">
+    import ActivityCard from "$lib/components/profile/activity_card.svelte";
+    import { activities_index } from "$lib/stores/activity_store.js";
     import { getFileURL } from "$lib/util/file_util.js";
     import { _ } from "svelte-i18n";
+
     export let data;
+
+    let loading: boolean = false;
+
+    $: pagination = {
+        page: data.activities.page,
+        totalPages: data.activities.totalPages,
+    };
+
+    async function onListScroll(e: Event) {
+        if (
+            window.innerHeight + window.scrollY >=
+                0.8 * document.body.offsetHeight &&
+            pagination.page !== pagination.totalPages &&
+            !loading
+        ) {
+            loading = true;
+            await loadNextPage();
+            loading = false;
+        }
+    }
+
+    async function loadNextPage() {
+        pagination.page += 1;
+        data.activities = await activities_index(data.user.id, pagination.page);
+    }
 </script>
 
+<svelte:window on:scroll={onListScroll} />
+
+<svelte:head>
+    <title>{$_("profile")} | wanderer</title>
+</svelte:head>
+
 <div class="mx-8 space-y-6">
     <div class="space-y-4">
         <h4 class="text-xl font-semibold">
@@ -58,7 +92,18 @@
             {/each}
         </div>
     </div>
-    <div>
+    <div class="space-y-4">
         <h4 class="text-xl font-semibold">Timeline</h4>
+
+        {#each data.activities.items as activity}
+            <a
+                class="block"
+                href={activity.type == "trail"
+                    ? `/trail/view/${activity.id}`
+                    : `/trail/view/${activity.trail_id}?t=3`}
+            >
+                <ActivityCard {activity} user={data.user}></ActivityCard>
+            </a>
+        {/each}
     </div>
 </div>

web/src/routes/profile/[id]/+page.ts

@@ -1,8 +1,10 @@
+import { activities_index } from "$lib/stores/activity_store";
 import { lists_index } from "$lib/stores/list_store";
 import { type Load } from "@sveltejs/kit";
 
 export const load: Load = async ({ params, fetch }) => {
 
     const lists = await lists_index({ q: "", author: params.id, sort: "created", sortOrder: "-" }, 1, -1, fetch)
-    return { lists: lists.items }
+    const activities = await activities_index(params.id!, 1, 10, fetch);
+    return { lists: lists.items, activities: activities }
 };

web/src/routes/profile/[id]/trails/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import TrailList from "$lib/components/trail/trail_list.svelte";
     import { trails_search_filter } from "$lib/stores/trail_store";
+    import { _ } from "svelte-i18n";
 
     export let data;
 
@@ -23,7 +24,9 @@
         data.trails = await trails_search_filter(data.filter, page);
     }
 </script>
-
+<svelte:head>
+    <title>{$_("profile")} | wanderer</title>
+</svelte:head>
 <TrailList
     {pagination}
     {loading}

web/src/routes/settings/account/+page.svelte

@@ -7,8 +7,8 @@
         type SelectItem,
     } from "$lib/components/base/select.svelte";
     import ConfirmModal from "$lib/components/confirm_modal.svelte";
-    import EmailModal from "$lib/components/profile/email_modal.svelte";
-    import PasswordModal from "$lib/components/profile/password_modal.svelte";
+    import EmailModal from "$lib/components/settings/email_modal.svelte";
+    import PasswordModal from "$lib/components/settings/password_modal.svelte";
     import { show_toast } from "$lib/stores/toast_store";
     import {
         currentUser,

web/src/routes/trail/view/[id]/+page.svelte

@@ -2,11 +2,16 @@
     import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
     import { trail } from "$lib/stores/trail_store";
     import { _ } from "svelte-i18n";
+    import { page } from "$app/stores";
 
     export let data;
 </script>
 
-<TrailInfoPanel trail={data.trail} mode="overview"></TrailInfoPanel>
+<TrailInfoPanel
+    activeTab={parseInt($page.url.searchParams.get("t") ?? 0)}
+    trail={data.trail}
+    mode="overview"
+></TrailInfoPanel>
 
 <svelte:head>
     <title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title