zeu.dev
Read-it-later social network
implement hide empty publications checkbox on explore
+21
-9
+6
-2
src/lib/components/PublicationCard.svelte
+6
-2
src/lib/components/PublicationCard.svelte
···
7
7
const user = getContext("user") as MiniDoc;
8
8
const atclient = getContext("atclient") as QuicksliceClient;
9
9
10
-
let { publication, showEmpty = false }: {
11
-
publication: PublicationNode & { viewerSiteStandardGraphSubscriptionViaPublication?: SubscriptionNode | null }, showEmpty?: boolean
10
+
let { publication, hideEmptyPublications = false }: {
11
+
publication: PublicationNode & { viewerSiteStandardGraphSubscriptionViaPublication?: SubscriptionNode | null }, hideEmptyPublications?: boolean
12
12
} = $props();
13
13
14
14
const { rkey: pubRkey } = parseAtUri(publication.uri);
···
114
114
}
115
115
</script>
116
116
117
+
{#if (hideEmptyPublications && documents > 0) || !hideEmptyPublications}
118
+
117
119
<div
118
120
class="flex flex-col lg:flex-row overflow-hidden rounded border shadow-sm"
119
121
style={`
···
198
200
</button>
199
201
</div>
200
202
</div>
203
+
204
+
{/if}
+15
-7
src/routes/explore/+page.svelte
+15
-7
src/routes/explore/+page.svelte
···
1
1
<script lang="ts">
2
2
import { Debounced } from "runed";
3
-
import type { PublicationNode, SubscriptionNode } from '$lib/utils';
4
3
import { createInfiniteQuery } from '@tanstack/svelte-query';
4
+
import type { PublicationNode, SubscriptionNode } from '$lib/utils';
5
5
import PublicationCard from '$lib/components/PublicationCard.svelte';
6
6
7
7
let { data } = $props();
···
9
9
10
10
let page = $state(0);
11
11
let searchTerm = $state("");
12
+
let hideEmptyPublications = $state(false);
12
13
const debouncedSearchTerm = new Debounced(() => searchTerm, 500);
13
14
14
15
const publicationsQuery = createInfiniteQuery(() => ({
···
86
87
</header>
87
88
88
89
<menu class="flex flex-col lg:flex-row gap-4 w-full justify-between items-center">
89
-
<label>
90
-
Search:
91
-
<input bind:value={searchTerm} class="border px-3 py-2" />
92
-
</label>
90
+
<div class="flex gap-4 items-center">
91
+
<label>
92
+
Search:
93
+
<input bind:value={searchTerm} class="border px-3 py-2" />
94
+
</label>
95
+
96
+
<label>
97
+
Hide Empty Publications
98
+
<input type="checkbox" bind:checked={hideEmptyPublications} />
99
+
</label>
100
+
</div>
93
101
94
-
<div class="">
102
+
<div>
95
103
{#if page > 0}
96
104
<button
97
105
onclick={() => {
···
130
138
There are no publications based onb the current filters
131
139
{/if}
132
140
{#each currentPage as publication, i (i)}
133
-
<PublicationCard {publication} />
141
+
<PublicationCard {publication} {hideEmptyPublications} />
134
142
{/each}
135
143
{/if}
136
144