brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrates to svelte 5

Browse Source
This commit is contained in:
Christian Beutel
2025-01-24 17:46:13 +01:00
parent 7571f6e9b9
commit 3721b7f537
106 changed files with 5524 additions and 4232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/lib/components/comment/comment_card.svelte
View File

@@ -1,34 +1,43 @@
<script lang="ts">
import type { Comment } from "$lib/models/comment";
import { getFileURL } from "$lib/util/file_util";
import { createEventDispatcher } from "svelte";
import TextField from "../base/text_field.svelte";
import { fade } from "svelte/transition";
import { formatTimeSince } from "$lib/util/format_util";
import { _ } from "svelte-i18n";
export let comment: Comment;
export let mode: "show" | "edit" = "show";
interface Props {
comment: Comment;
mode?: "show" | "edit";
ondelete?: (comment: Comment) => void
onedit?: (data: {comment: Comment, text: string}) => void
}
const dispatch = createEventDispatcher();
let { comment, mode = "show", ondelete, onedit }: Props = $props();
let editing: boolean = false;
let editing: boolean = $state(false);
let editedComment = comment.text;
let editedComment = $state(comment.text);
$: avatarSrc = comment.expand?.author.avatar
? getFileURL(comment.expand.author, comment.expand.author.avatar)
: `https://api.dicebear.com/7.x/initials/svg?seed=${comment.expand?.author.username ?? ""}&backgroundType=gradientLinear`;
$effect(() => {
editedComment = comment.text;
});
$: timeSince = formatTimeSince(new Date(comment.created ?? ""));
let avatarSrc = $derived(
comment.expand?.author.avatar
? getFileURL(comment.expand.author, comment.expand.author.avatar)
: `https://api.dicebear.com/7.x/initials/svg?seed=${comment.expand?.author.username ?? ""}&backgroundType=gradientLinear`,
);
let timeSince = $derived(formatTimeSince(new Date(comment.created ?? "")));
function deleteComment() {
dispatch("delete", comment);
ondelete?.(comment)
}
function toggleEdit() {
if (editing) {
dispatch("edit", { comment: comment, text: editedComment });
onedit?.({ comment: comment, text: editedComment });
}
editing = !editing;
}
@@ -74,22 +83,27 @@
<span class="text-xs text-gray-500 ml-2"
>{$_(`n-${timeSince.unit}-ago`, {
values: { n: timeSince.value },
})} {comment.updated != comment.created ? `(${$_("edited")})` : ""}</span
})}
{comment.updated != comment.created
? `(${$_("edited")})`
: ""}</span
>
</p>
{#if mode == "edit"}
<button
aria-label="Edit comment"
type="button"
class="btn-icon ml-2"
style="font-size: 0.75rem;"
on:click={toggleEdit}
onclick={toggleEdit}
><i class="fa fa-{editing ? 'check' : 'pen'}"></i></button
>
<button
aria-label="Delete comment"
type="button"
class="btn-icon text-xs"
style="font-size: 0.75rem;"
on:click={deleteComment}><i class="fa fa-trash"></i></button
onclick={deleteComment}><i class="fa fa-trash"></i></button
>
{/if}
</div>