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