drp-48/src/routes/+page.svelte

<script lang="ts">
    import SpaceCard from "$lib/components/SpaceCard.svelte";
    import defaultImg from "$lib/assets/study_space.png";
    import crossUrl from "$lib/assets/cross.svg";
    import Navbar from "$lib/components/Navbar.svelte";
    import { allTags } from "$lib";

    const { data } = $props();
    const { studySpaces, supabase } = $derived(data);

    let selectedTags = $state<string[]>([]);
    let tagFilter = $state("");
    let tagFilterElem = $state<HTMLInputElement>();
    let filteredTags = $derived(
        allTags
            .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
            .filter((tag) => allTags.includes(tag))
    );

    let filteredStudySpaces = $derived(() =>
        selectedTags.length === 0
            ? studySpaces
            : studySpaces.filter((space) => {
                  const allTags = [
                      ...(space.tags || []),
                      space.volume,
                      space.wifi,
                      space.power
                  ].filter(Boolean);

                  return selectedTags.every((tag) => allTags.includes(tag));
              })
    );

    let dropdownVisible = $state(false);

    function deleteTag(tagName: string) {
        return () => {
            selectedTags = selectedTags.filter((tag) => tag !== tagName);
        };
    }

    function addTag(tagName: string) {
        return () => {
            if (!selectedTags.includes(tagName)) {
                selectedTags.push(tagName);
            }
            tagFilter = "";
        };
    }
</script>

<Navbar>
    <a href="/space">
        <img src={crossUrl} alt="new" class="new-space" />
    </a>
</Navbar>

<main>
    <div class="tag-filter-container">
        <form>
            <div class="tagDisplay">
                {#each selectedTags as tagName (tagName)}
                    <button class="tag" onclick={deleteTag(tagName)} type="button">
                        {tagName}
                        <img src={crossUrl} alt="delete" /></button
                    >
                {/each}
                <input
                    type="text"
                    name="tagInput"
                    class="tagInput"
                    bind:value={tagFilter}
                    bind:this={tagFilterElem}
                    onfocus={() => {
                        dropdownVisible = true;
                    }}
                    onblur={() => {
                        dropdownVisible = false;
                    }}
                    onkeypress={(event) => {
                        if (event.key === "Enter") {
                            const tag = filteredTags[0];
                            if (tag) addTag(tag)();
                        }
                    }}
                    placeholder="Search by tags..."
                />
                {#if dropdownVisible}
                    <div class="tagDropdown">
                        {#each filteredTags as avaliableTag (avaliableTag)}
                            <button
                                class="avaliableTag"
                                onclick={addTag(avaliableTag)}
                                onmousedown={(e) => {
                                    // Keep input focused
                                    e.preventDefault();
                                    e.stopPropagation();
                                }}
                                type="button"
                            >
                                {avaliableTag}
                            </button>
                        {/each}
                    </div>
                {/if}
            </div>
        </form>
    </div>

    {#each filteredStudySpaces() as studySpace (studySpace.id)}
        {@const imgUrl =
            studySpace.study_space_images.length > 0
                ? supabase.storage
                      .from("files_bucket")
                      .getPublicUrl(studySpace.study_space_images[0].image_path).data.publicUrl
                : defaultImg}
        <SpaceCard
            alt="Photo of {studySpace.description}"
            href="/space/{studySpace.id}"
            imgSrc={imgUrl}
            space={studySpace}
        />
    {/each}
</main>

<style>
    main {
        display: grid;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .new-space {
        transform: rotate(45deg);
    }

    .tag-filter-container {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }

    form {
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
        gap: 0.5rem;
        max-width: 32rem;
        margin: 0 auto;
    }

    .tagDisplay {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
        align-items: left;
        justify-content: left;
        position: relative;
        width: 100%;
        height: auto;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 2px solid #eaffeb;
        background: none;
        color: #eaffeb;
        font-size: 1rem;
    }
    .tagInput {
        width: 100%;
        height: 100%;
        background: none;
        color: #eaffeb;
        font-size: 1rem;
        border: none;
        outline: none;
    }
    ::placeholder {
        color: #859a90;
        opacity: 1;
    }
    .tag {
        display: flex;
        align-items: center;
        border-radius: 0.25rem;
        background-color: #2e4653;
        color: #eaffeb;
        font-size: 0.9rem;
        cursor: pointer;
        border-width: 0rem;
    }
    .tag img {
        width: 1rem;
        height: 1rem;
        margin-left: 0.2rem;
    }

    .tagDropdown {
        width: 100%;
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
        position: absolute;
        background-color: #2e4653;
        box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
        border-radius: 0.5rem;
        overflow-y: auto;
        max-height: 10rem;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    .avaliableTag {
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: #eaffeb;
        font-size: 0.9rem;
        margin: 0%;
        padding: 0 0.8rem 0.4rem;
    }
    .avaliableTag:first-child {
        padding-top: 0.6rem;
        background-color: hsl(201, 26%, 60%);
    }
    .avaliableTag:last-child {
        padding-bottom: 0.6rem;
    }

    @media (max-width: 20rem) {
        main {
            grid-template-columns: 1fr;
        }
    }
</style>