Show picture events

web/src/lib/components/content/Imeta.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Img from './Img.svelte';
+
+	export let tag: string[];
+
+	$: url = tag.at(1)?.split(' ').at(1) ?? '';
+</script>
+
+{#if URL.canParse(url)}
+	<Img url={new URL(url)} />
+{/if}

web/src/lib/components/items/EventComponent.svelte

@@ -15,6 +15,7 @@
 	import BadgeDefinition from './BadgeDefinition.svelte';
 	import List from './List.svelte';
 	import LegacyDirectMessage from './LegacyDirectMessage.svelte';
+	import Picture from './Picture.svelte';
 
 	export let item: Item;
 	export let readonly: boolean;
@@ -32,6 +33,8 @@
 	<Reaction {item} {readonly} {createdAtFormat} />
 {:else if item.event.kind === Kind.BadgeAward}
 	<BadgeAward {item} {readonly} {createdAtFormat} />
+{:else if Number(item.event.kind) === 20}
+	<Picture {item} {readonly} {createdAtFormat} />
 {:else if item.event.kind === Kind.ChannelCreation || item.event.kind === Kind.ChannelMetadata}
 	<Channel {item} />
 {:else if item.event.kind === Kind.Article}

web/src/lib/components/items/Picture.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getTitle } from '$lib/EventHelper';
+	import type { EventItem, Item } from '$lib/Items';
+	import ActionMenu from '../actions/ActionMenu.svelte';
+	import Content from '../Content.svelte';
+	import Imeta from '../content/Imeta.svelte';
+	import EventMetadata from '../EventMetadata.svelte';
+
+	export let item: Item;
+	export let readonly: boolean;
+	export let createdAtFormat: 'auto' | 'time' = 'auto';
+
+	$: eventItem = item as EventItem;
+	$: title = getTitle(item.event.tags);
+	$: pictures = item.event.tags.filter(([tagName]) => tagName === 'imeta');
+</script>
+
+<EventMetadata {item} {createdAtFormat}>
+	<section slot="content">
+		{#if title}
+			<h3>{title}</h3>
+		{/if}
+		<Content content={item.event.content} tags={item.event.tags} />
+		{#each pictures as picture}
+			<Imeta tag={picture} />
+		{/each}
+		{#if !readonly}
+			<ActionMenu item={eventItem} />
+		{/if}
+	</section>
+</EventMetadata>