feat: add annotations, user profiles, watchers, stories, search and more
This commit is contained in:
hh committed
1 parent
ed469ba8dd
commit
2465bcd184
47 files changed
+5009
-242
No files matched your search
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from "svelte";
|
||||
import Button from "../ui/Button.svelte";
|
||||
|
||||
interface Props {
|
||||
initial?: string;
|
||||
oncancel?: () => void;
|
||||
onsubmit: (text: string) => void;
|
||||
saving?: boolean;
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
initial = "",
|
||||
saving = false,
|
||||
submitLabel = "Добавить заметку",
|
||||
oncancel,
|
||||
onsubmit,
|
||||
}: Props = $props();
|
||||
|
||||
let text = $state(untrack(() => initial));
|
||||
|
||||
const valid = $derived(text.trim() !== "");
|
||||
|
||||
function submit() {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
onsubmit(text.trim());
|
||||
if (oncancel === undefined) {
|
||||
text = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form
|
||||
class="annotation-editor"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
bind:value={text}
|
||||
rows={oncancel ? 2 : 3}
|
||||
placeholder="Заметка к сообщению…"
|
||||
></textarea>
|
||||
<div class="actions">
|
||||
{#if oncancel}
|
||||
<Button variant="translucent" onclick={oncancel}>Отмена</Button>
|
||||
{/if}
|
||||
<Button type="submit" disabled={saving || !valid}>{submitLabel}</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
.annotation-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--color-borders);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
color: var(--color-text);
|
||||
font: inherit;
|
||||
|
||||
background: var(--color-background);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script lang="ts">
|
||||
import type { Annotation } from "$lib/api/types";
|
||||
import { formatFull } from "$lib/format/datetime";
|
||||
import Icon from "../ui/Icon.svelte";
|
||||
import AnnotationEditor from "./AnnotationEditor.svelte";
|
||||
|
||||
interface Props {
|
||||
annotations: Annotation[];
|
||||
ondelete: (annotation: Annotation) => void;
|
||||
onupdate: (annotation: Annotation, text: string) => void;
|
||||
}
|
||||
|
||||
const { annotations, ondelete, onupdate }: Props = $props();
|
||||
|
||||
let editingId = $state<number | null>(null);
|
||||
</script>
|
||||
|
||||
<ul class="annotation-list">
|
||||
{#each annotations as annotation (annotation.id)}
|
||||
<li>
|
||||
{#if editingId === annotation.id}
|
||||
<AnnotationEditor
|
||||
initial={annotation.text}
|
||||
submitLabel="Сохранить"
|
||||
oncancel={() => {
|
||||
editingId = null;
|
||||
}}
|
||||
onsubmit={(text) => {
|
||||
onupdate(annotation, text);
|
||||
editingId = null;
|
||||
}}
|
||||
/>
|
||||
{:else}
|
||||
<p class="text">{annotation.text}</p>
|
||||
<div class="meta">
|
||||
<span class="time">{formatFull(annotation.updated_at)}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="action"
|
||||
aria-label="Изменить"
|
||||
onclick={() => {
|
||||
editingId = annotation.id;
|
||||
}}
|
||||
>
|
||||
<Icon name="edit" size="1rem" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="action"
|
||||
aria-label="Удалить"
|
||||
onclick={() => ondelete(annotation)}
|
||||
>
|
||||
<Icon name="delete" size="1rem" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<style lang="scss">
|
||||
.annotation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid var(--color-borders);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex: 1;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
border: 0;
|
||||
border-radius: 0.375rem;
|
||||
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
background: transparent;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from "svelte";
|
||||
import { page } from "$app/state";
|
||||
import {
|
||||
createAnnotation,
|
||||
deleteAnnotation,
|
||||
listAnnotations,
|
||||
updateAnnotation,
|
||||
} from "$lib/api/endpoints";
|
||||
import type { Annotation } from "$lib/api/types";
|
||||
import EmptyState from "$lib/components/ui/EmptyState.svelte";
|
||||
import Spinner from "$lib/components/ui/Spinner.svelte";
|
||||
import { accounts } from "$lib/stores/accounts.svelte";
|
||||
import { ui } from "$lib/stores/ui.svelte";
|
||||
import AnnotationEditor from "./AnnotationEditor.svelte";
|
||||
import AnnotationList from "./AnnotationList.svelte";
|
||||
|
||||
const chatId = $derived(
|
||||
page.params.chatId ? Number(page.params.chatId) : null
|
||||
);
|
||||
const messageId = $derived(ui.panelMessageId);
|
||||
|
||||
let items = $state<Annotation[]>([]);
|
||||
let loading = $state(false);
|
||||
let saving = $state(false);
|
||||
let token = 0;
|
||||
|
||||
$effect(() => {
|
||||
const cid = chatId;
|
||||
const mid = messageId;
|
||||
if (cid === null || mid === null || accounts.selectedId === null) {
|
||||
return;
|
||||
}
|
||||
untrack(() => {
|
||||
token++;
|
||||
const current = token;
|
||||
loading = true;
|
||||
items = [];
|
||||
listAnnotations({ chatId: cid, messageId: mid })
|
||||
.then((rows) => {
|
||||
if (current === token) {
|
||||
items = rows;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (current === token) {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function add(text: string) {
|
||||
if (chatId === null || messageId === null) {
|
||||
return;
|
||||
}
|
||||
saving = true;
|
||||
try {
|
||||
const created = await createAnnotation(chatId, messageId, text);
|
||||
items = [created, ...items];
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function edit(annotation: Annotation, text: string) {
|
||||
const updated = await updateAnnotation(annotation.id, text);
|
||||
items = items.map((item) => (item.id === updated.id ? updated : item));
|
||||
}
|
||||
|
||||
async function remove(annotation: Annotation) {
|
||||
await deleteAnnotation(annotation.id);
|
||||
items = items.filter((item) => item.id !== annotation.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if chatId === null || messageId === null}
|
||||
<EmptyState title="Заметки" description="Сообщение не выбрано" />
|
||||
{:else}
|
||||
<div class="panel-content">
|
||||
<AnnotationEditor {saving} onsubmit={add} />
|
||||
|
||||
{#if loading && items.length === 0}
|
||||
<div class="center"><Spinner /></div>
|
||||
{:else if items.length > 0}
|
||||
<AnnotationList annotations={items} ondelete={remove} onupdate={edit} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.panel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user