all repos — emessage @ master

The EMessage email client

frontend/src/routes/+page.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
 56
 57
 58
 59
 60
 61
 62
 
<script lang="ts">
	import ControlButton    from '$lib/components/ControlButton.svelte';
	import EnvelopeControl  from '$lib/components/EnvelopeControl.svelte';
	import ConversationView from '$lib/components/ConversationView.svelte';
	import MessageBar       from '$lib/components/MessageBar.svelte';
	import searchIcon   from '$lib/assets/icons/search.svg?raw';
	import contactIcon  from '$lib/assets/icons/contact.svg?raw';
	import attachIcon   from '$lib/assets/icons/attach.svg?raw';
	import sendmailIcon from '$lib/assets/icons/sendmail.svg?raw';
	import { goto } from "$app/navigation";
	import { GetUserContact, SendMail } from "$lib/wailsjs/go/main/App";
	import { global } from "$lib/global.svelte.js";
	
	const userContact = await GetUserContact();

	let message = $state("");
	let highlight = $derived(message.trim() !== "");

	async function handleSubmit(event) {
		if (event) event.preventDefault();
		const recipients = global.conversation?.Recipients;
		if (!recipients || recipients.length === 0) return;
		if (!message.trim()) return;
		global.conversation = await SendMail(
			global.fromAddress,
			global.conversation,
			message,
		);
		message = "";
	}

	async function edit_user_contact() {
		global.contact = await GetUserContact();
		goto("/contact");
	}
	function manage_contacts() {
		goto("/contacts");
	}
</script>

<section class="flex flex-col w-full h-full">
	{#if global.conversations.length > 0}
		<section class="bg-header w-full p-2 flex justify-between">
			<EnvelopeControl conversation={global.conversation} />
			<div class="flex gap-2">
				<ControlButton icon={searchIcon} />
				<ControlButton icon={contactIcon} onclick={manage_contacts} />
			</div>
		</section>
		<ConversationView conversation={global.conversation} />
		<form onsubmit={handleSubmit} class="flex p-2 gap-2 items-end">
			<ControlButton icon={attachIcon} />
			<MessageBar bind:value={message} onsubmit={handleSubmit} />
			<ControlButton type="submit" icon={sendmailIcon} {highlight} />
		</form>
	{:else}
		<section class="bg-header w-full p-2 flex justify-end">
				<ControlButton icon={contactIcon} onclick={edit_user_contact} />
		</section>
		<h1 class="text-center my-auto font-bold text-7xl">Welcome to<br/>EMessage</h1>
	{/if}
</section>