I'm dynamically loading and displaying a list of courses from a database and displaying them in a list component in routes/(main)/courses/ page.svelte - the server loads the data and user's progress for the active course which is also stored in the database

If a user clicks on a course, it should go to the learn page right away if they clicked on the active course...the correct data is already loaded...however, if they click on another course, different from the active course, I want to create a click handler function to pass the clicked course id back to the server to load the selected course's data and the user's progress for that course. I'm not sure how to do this, please help.

Chat-GPT suggested appending a url parameter then accessing it from the url object on the server side, but I'm also reading about creating an API endpoint and using the POST method. I'm not sure which is the established best practice and the hows so a high level over would be appreciated - snippets would be even more greatly appreciated - any insights at all will probably help so don't hesitate to share your thoughts.

Notes:
-My main database queries are in routes/(main)/ layout.server.ts
-I'm not sure if I need a server.ts or a page.server.ts file to receive the POSTed data and trigger the server action
-I've gotten as far as I have because I'm following a step by step tutorial - but the tutorial is for React and I've gotten pretty far following along in Svelte but I'm stuck here for 3 days

Here's the list component on my courses page:

<script lang="ts">
  import Card from "./card.svelte";
  import type { ActiveCourseId, Courses } from "./types";
  import { goto } from "$app/navigation";

  export let courses: Courses[];
  export let activeCourseId: ActiveCourseId;

  function handleClick(courseId: number) {
    if (courseId === activeCourseId) {
      goto(`/learn`);
    } *******If courseId !== activeCourseId, then I need to pass the courseId to the server to change the active course and thus load the correct user progress and course data******

</script>

<div class="pt-6 grid grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(210px,1fr))] gap-4">
  {#each courses as course}
    <Card 
    id={course.id} 
    title={course.title} 
    imageSrc={course.imageSrc}
    onClick={() => handleClick(course.id)}
    disabled={false}
    active={course.id === activeCourseId}
    />
  {/each}
</div>

My layout.server.ts file 2 levels up with my db queries:

import { db } from '$lib/db/index.js';
import { eq } from 'drizzle-orm';

import { userProgress } from '$lib/db/schema.js';

export const load = async ( locals ) => {
    //COURSES
    // Get's all the courses
    const courses = await db.query.courses.findMany();

    //USER PROGRESS
    //@ts-ignore | Gets the user's id if user is authenticated; ? makes it optional
    const userId = locals.session?.userId;
    //@ts-ignore | Gets the user's id if user is authenticated; ? makes it optional
    const user = locals.session?.user;

    if (!userId) {
      return {
            courses,
            userProgressData: null,
            user,
            userId,
        };
    }

    // Gets the user's progress data for the active course
    const userProgressData = await db.query.userProgress.findFirst({
        where: eq(userProgress.userId, userId),
        with: {
            activeCourse: true,
        },
    });

    return {
        courses,
        userProgressData,
        user,
        userId,
    };
};