forked from
pds.ls/pdsls
atproto explorer
collection filter button
+20
-7
+20
-7
src/views/repo.tsx
+20
-7
src/views/repo.tsx
···
22
22
const [didDoc, setDidDoc] = createSignal<DidDocument>();
23
23
const [nsids, setNsids] = createSignal<Record<string, { hidden: boolean; nsids: string[] }>>();
24
24
const [filter, setFilter] = createSignal<string>();
25
+
const [showFilter, setShowFilter] = createSignal(false);
25
26
const [validHandles, setValidHandles] = createStore<Record<string, boolean>>({});
26
27
let rpc: Client;
27
28
let pds: string;
···
136
137
<div
137
138
class={`dark:shadow-dark-700 dark:bg-dark-300 flex justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700`}
138
139
>
139
-
<div class="flex gap-2 sm:gap-4">
140
+
<div class="flex gap-2 text-xs sm:gap-4 sm:text-sm">
140
141
<Show when={!error()}>
141
142
<RepoTab tab="collections" label="Collections" />
142
143
</Show>
···
155
156
<span class="iconify lucide--alert-triangle"></span>
156
157
<span>{error()}</span>
157
158
</div>
159
+
</Show>
160
+
<Show when={!error() && (!location.hash || location.hash === "#collections")}>
161
+
<Tooltip text="Filter collections">
162
+
<button
163
+
class="flex items-center rounded-sm p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
164
+
onClick={() => setShowFilter(!showFilter())}
165
+
>
166
+
<span class="iconify lucide--filter"></span>
167
+
</button>
168
+
</Tooltip>
158
169
</Show>
159
170
<MenuProvider>
160
171
<DropdownMenu
···
213
224
</ErrorBoundary>
214
225
</Show>
215
226
<Show when={nsids() && (!location.hash || location.hash === "#collections")}>
216
-
<TextInput
217
-
name="filter"
218
-
placeholder="Filter collections"
219
-
onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
220
-
class="grow"
221
-
/>
227
+
<Show when={showFilter()}>
228
+
<TextInput
229
+
name="filter"
230
+
placeholder="Filter collections"
231
+
onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
232
+
class="grow"
233
+
/>
234
+
</Show>
222
235
<div class="flex flex-col overflow-hidden text-sm">
223
236
<For
224
237
each={Object.keys(nsids() ?? {}).filter((authority) =>