Tidy up feed controls

This commit is contained in:
Jon Staab 2023-11-21 16:18:17 -08:00
parent 947cf7ab8d
commit 19d0041215
3 changed files with 48 additions and 55 deletions

View File

@ -176,11 +176,11 @@
})
const open = () => {
modal = "maxi"
isOpen = true
}
const onEscape = () => {
modal = null
isOpen = false
}
const submit = () => {
@ -188,7 +188,7 @@
applyFilter()
}
let modal = null
let isOpen = false
let scopeOptions = []
let _filter: {
kinds?: Kind[]
@ -211,17 +211,12 @@
</script>
<div>
<div class="float-right flex justify-end gap-1">
<div class="flex items-center gap-1">
<div class="float-right flex justify-end">
<div class="flex items-center gap-1 pr-2">
<Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} />
<small class="text-gray-3">Show replies</small>
</div>
<i
class="fa fa-search cursor-pointer p-2"
on:click={() => {
modal = modal ? null : "mini"
}} />
<i class="fa fa-sliders cursor-pointer p-2" on:click={open} />
<i class="fa fa-search cursor-pointer p-2" on:click={open} />
<slot name="controls" />
</div>
{#if parts.length > 0 || relays.length > 0}
@ -239,8 +234,8 @@
{/if}
</div>
{#if modal}
<Modal {onEscape} mini={modal === "mini"}>
{#if isOpen}
<Modal {onEscape}>
<form on:submit|preventDefault={submit}>
<Content size="lg">
<div class="flex flex-col gap-1">
@ -250,48 +245,46 @@
<i slot="after" class="fa fa-times cursor-pointer" on:click={clearSearch} />
</Input>
</div>
{#if modal === "maxi"}
<div class="grid grid-cols-2 gap-2">
<div class="flex flex-col gap-1">
<strong>Since</strong>
<DateInput bind:value={_filter.since} />
</div>
<div class="flex flex-col gap-1">
<strong>Until</strong>
<DateInput bind:value={_filter.until} />
</div>
<div class="grid grid-cols-2 gap-2">
<div class="flex flex-col gap-1">
<strong>Since</strong>
<DateInput bind:value={_filter.since} />
</div>
<div class="flex flex-col gap-1">
<strong>Kinds</strong>
<MultiSelect search={searchKinds} bind:value={_filter.kinds} getKey={prop("kind")}>
<div slot="item" let:item>{item.label} (kind {item.kind})</div>
</MultiSelect>
<strong>Until</strong>
<DateInput bind:value={_filter.until} />
</div>
<div class="flex flex-col gap-1">
<strong>Authors</strong>
<SelectButton
onChange={onScopeChange}
value={typeof _filter.authors === "string" ? _filter.authors : "custom"}
options={scopeOptions} />
{#if Array.isArray(_filter.authors)}
<PersonMultiSelect bind:value={_filter.authors} />
{/if}
</div>
<div class="flex flex-col gap-1">
<strong>Topics</strong>
<MultiSelect search={$searchTopics} bind:value={_filter["#t"]}>
<div slot="item" let:item>
<div class="-my-1">
#{item.name}
</div>
</div>
<div class="flex flex-col gap-1">
<strong>Kinds</strong>
<MultiSelect search={searchKinds} bind:value={_filter.kinds} getKey={prop("kind")}>
<div slot="item" let:item>{item.label} (kind {item.kind})</div>
</MultiSelect>
</div>
<div class="flex flex-col gap-1">
<strong>Authors</strong>
<SelectButton
onChange={onScopeChange}
value={typeof _filter.authors === "string" ? _filter.authors : "custom"}
options={scopeOptions} />
{#if Array.isArray(_filter.authors)}
<PersonMultiSelect bind:value={_filter.authors} />
{/if}
</div>
<div class="flex flex-col gap-1">
<strong>Topics</strong>
<MultiSelect search={$searchTopics} bind:value={_filter["#t"]}>
<div slot="item" let:item>
<div class="-my-1">
#{item.name}
</div>
</MultiSelect>
</div>
<div class="flex flex-col gap-1">
<strong>Mentions</strong>
<PersonMultiSelect bind:value={_filter["#p"]} />
</div>
{/if}
</div>
</MultiSelect>
</div>
<div class="flex flex-col gap-1">
<strong>Mentions</strong>
<PersonMultiSelect bind:value={_filter["#p"]} />
</div>
<div class="flex justify-end">
<Anchor theme="button-accent" on:click={submit}>Apply Filters</Anchor>
</div>

View File

@ -64,7 +64,7 @@
{#if $canSign}
{#if $userLists.length > 0}
<Popover placement="bottom" opts={{hideOnClick: true}} theme="transparent">
<i slot="trigger" class="fa fa-ellipsis-v cursor-pointer p-2" />
<i slot="trigger" class="fa fa-scroll cursor-pointer p-2" />
<div
slot="tooltip"
class="flex flex-col items-start overflow-hidden rounded border border-solid border-gray-8 bg-black">

View File

@ -20,7 +20,7 @@ export const urlIsMedia = (url: string) =>
export const parseContent = ({content, tags = []}: {content: string; tags?: string[][]}) => {
const result: any[] = []
let text = content.trim() || new Tags(tags).getValue('alt') || ""
let text = content.trim() || new Tags(tags).getValue("alt") || ""
let buffer = ""
const parseNewline = () => {
@ -59,7 +59,7 @@ export const parseContent = ({content, tags = []}: {content: string; tags?: stri
}
const parseTopic = () => {
const topic = first(text.match(/^#\w+/i))
const topic: string = first(text.match(/^#\w+/i))
// Skip numeric topics
if (topic && !topic.match(/^#\d+$/)) {
@ -100,7 +100,7 @@ export const parseContent = ({content, tags = []}: {content: string; tags?: stri
}
const parseUrl = () => {
const raw = first(
const raw: string = first(
text.match(/^([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s]/gi)
)