all repos — emessage @ 4938b2e7cc9504d8085b021945ec49563a3eaa67

The EMessage email client

frontend/src/lib/components/ConversationPreview.svelte (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 
<script lang="ts">
	import DisplayImage from '$lib/components/DisplayImage.svelte';
	import { goto } from "$app/navigation";
	import { EventsOn } from "$lib/wailsjs/runtime/runtime";
	import {
		GetConversationPreviewSubject,
		GetConversationPreviewText,
		GetConversationPreviewTime,
		GetContactsFromEmails,
	} from "$lib/wailsjs/go/main/App";
	import { global } from "$lib/global.svelte.js";

	let { conversation } = $props();
	
	const bgColor = $derived(conversation.ID === global.conversation.ID ?
							 "selected" : "sidebar");
	const color = $derived(conversation.ID === global.conversation.ID ?
						   "inverted" : "primary");
	const readColor = $derived(conversation.IsUnread ?
							   "control" : bgColor);

	let subject = $state("");
	let text    = $state("");
	let time    = $state("");
	subject = await GetConversationPreviewSubject(conversation);
	text    = await GetConversationPreviewText(conversation);
	time    = await GetConversationPreviewTime(conversation);

	EventsOn("reload", async () => {
		subject = await GetConversationPreviewSubject(conversation);
		text    = await GetConversationPreviewText(conversation);
		time    = await GetConversationPreviewTime(conversation);
	});
	
	async function click_handler() {
		global.conversation = conversation;
		global.activeContacts = await GetContactsFromEmails(conversation.Recipients);
		goto("/")
	}
</script>

<div hidden class="bg-selected text-inverted" />

<div class="h-16 flex items-center text-{color} bg-{bgColor} gap-1 p-2 rounded-md"
	 onclick={click_handler}>
	<div class="w-2 aspect-square rounded-full bg-{readColor}"></div>
	<DisplayImage target={conversation} />
	<div class="flex w-full place-self-start flex-col">
		<div class="flex justify-between text-[10px]">
			<h4 class="font-bold text-ellipsis">{subject}</h4>
			<span class="text-nowrap">{time}</span>
		</div>
		<p class="text-[8px]">{text}</p>
	</div>
</div>