feat(frontend): watches, webhooks and alerts panels read humanly, with chat picker, url filter, test send and delivery log
This commit is contained in:
hh committed
1 parent
6a4fd6ad47
commit
ea3a7c0a61
19 files changed
+3699
-458
No files matched your search
@@ -0,0 +1,305 @@
|
||||
<script lang="ts">
|
||||
import type { Chat } from "#lib/api/types.js";
|
||||
import Avatar from "#lib/components/ui/Avatar.svelte";
|
||||
import Icon from "#lib/components/ui/Icon.svelte";
|
||||
import type { Picked } from "#lib/format/watches.js";
|
||||
import { t } from "#lib/i18n/locale.svelte.js";
|
||||
import { createChatPicker } from "#lib/stores/chat-picker.svelte.js";
|
||||
|
||||
interface Props {
|
||||
empty: string;
|
||||
icon: string;
|
||||
label: string;
|
||||
onpick: (value: Picked | null) => void;
|
||||
people?: boolean;
|
||||
required?: boolean;
|
||||
value: Picked | null;
|
||||
}
|
||||
|
||||
const {
|
||||
empty,
|
||||
icon,
|
||||
label,
|
||||
onpick,
|
||||
people = false,
|
||||
required = false,
|
||||
value,
|
||||
}: Props = $props();
|
||||
|
||||
const SHOWN = 8;
|
||||
|
||||
let open = $state(false);
|
||||
let query = $state("");
|
||||
|
||||
const picker = createChatPicker();
|
||||
const results = $derived(
|
||||
picker.results
|
||||
.filter((chat) => !people || (chat.chat_id > 0 && !chat.is_bot))
|
||||
.slice(0, SHOWN)
|
||||
);
|
||||
|
||||
function toggle() {
|
||||
open = !open;
|
||||
if (open) {
|
||||
picker.search(query);
|
||||
}
|
||||
}
|
||||
|
||||
function choose(chat: Chat) {
|
||||
onpick({
|
||||
hasAvatar: chat.has_avatar,
|
||||
id: chat.chat_id,
|
||||
title: chat.title ?? t("watches.unknownChat", { id: chat.chat_id }),
|
||||
});
|
||||
open = false;
|
||||
query = "";
|
||||
}
|
||||
|
||||
function focus(node: HTMLInputElement) {
|
||||
node.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="field" class:open>
|
||||
<div class="line">
|
||||
<button aria-expanded={open} class="main" onclick={toggle} type="button">
|
||||
{#if value}
|
||||
<Avatar
|
||||
avatar={{ id: value.id, kind: value.id > 0 ? "peer" : "chat" }}
|
||||
colorKey={value.id}
|
||||
hasAvatar={value.hasAvatar}
|
||||
name={value.title}
|
||||
size={2.25}
|
||||
/>
|
||||
{:else}
|
||||
<span class="glyph"><Icon name={icon} size="1.5rem" /></span>
|
||||
{/if}
|
||||
<span class="text">
|
||||
<span class="label">{label}</span>
|
||||
<span class="value" class:placeholder={!value}>
|
||||
{value?.title ?? (required ? t("watches.choose") : empty)}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
{#if value && !required}
|
||||
<button
|
||||
aria-label={t("watches.clear")}
|
||||
class="clear"
|
||||
onclick={() => onpick(null)}
|
||||
title={t("watches.clear")}
|
||||
type="button"
|
||||
>
|
||||
<Icon name="close" size="1.125rem" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if open}
|
||||
<div class="picker">
|
||||
<input
|
||||
aria-label={people ? t("watches.searchPeople") : t("watches.search")}
|
||||
class="filter"
|
||||
oninput={() => picker.search(query)}
|
||||
placeholder={people ? t("watches.searchPeople") : t("watches.search")}
|
||||
type="text"
|
||||
bind:value={query}
|
||||
{@attach focus}
|
||||
>
|
||||
{#each results as chat (chat.chat_id)}
|
||||
<button class="pick" onclick={() => choose(chat)} type="button">
|
||||
<Avatar
|
||||
avatar={{
|
||||
id: chat.chat_id,
|
||||
kind: chat.chat_id > 0 ? "peer" : "chat",
|
||||
}}
|
||||
colorKey={chat.chat_id}
|
||||
hasAvatar={chat.has_avatar}
|
||||
name={chat.title ?? ""}
|
||||
size={2}
|
||||
/>
|
||||
<span class="pick-title">
|
||||
{chat.title ?? t("watches.unknownChat", { id: chat.chat_id })}
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<p class="nothing">{t("watches.nothing")}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.open .line {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
|
||||
.main {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 0.875rem;
|
||||
align-items: center;
|
||||
|
||||
min-width: 0;
|
||||
min-height: 3.25rem;
|
||||
padding: 0.375rem 0.5rem 0.375rem 1rem;
|
||||
border: 0;
|
||||
|
||||
font: inherit;
|
||||
color: var(--color-text);
|
||||
text-align: start;
|
||||
|
||||
background: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.glyph {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
color: var(--color-icon-secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.0625rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.value {
|
||||
overflow: hidden;
|
||||
font-size: 0.9375rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.placeholder {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.clear {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
background: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-interactive-element-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.25rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.filter {
|
||||
margin: 0.25rem 0.5rem 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-borders-input);
|
||||
border-radius: var(--border-radius-default);
|
||||
|
||||
font: inherit;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text);
|
||||
|
||||
background-color: var(--color-background);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pick {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 0;
|
||||
border-radius: var(--border-radius-default-small, 0.625rem);
|
||||
|
||||
font: inherit;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text);
|
||||
text-align: start;
|
||||
|
||||
background: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pick-title {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nothing {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user