frontend/src/routes/+layout.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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<script lang="ts">
import './layout.css';
import ControlButton from '$lib/components/ControlButton.svelte';
import SearchBar from '$lib/components/SearchBar.svelte';
import ConversationPreview from '$lib/components/ConversationPreview.svelte';
import NoConversation from '$lib/components/NoConversation.svelte';
import settingsIcon from '$lib/assets/icons/settings.svg?raw';
import newIcon from '$lib/assets/icons/new.svg?raw';
import { goto } from "$app/navigation";
import {
GetVersion,
GetUserContact,
NewConversation,
GetAllContactsSorted,
GetAllConversations,
EstablishMailConnections,
} from "$lib/wailsjs/go/main/App";
import { EventsOn } from "$lib/wailsjs/runtime/runtime";
import { global } from "$lib/global.svelte.js";
let { children } = $props();
const version = await GetVersion();
global.contact = await GetUserContact();
global.contacts = await GetAllContactsSorted();
global.conversations = await GetAllConversations();
const statusLineQueue = $state([]);
setTimeout(() =>
setInterval(() =>
statusLineQueue.shift(),
1000),
5000);
EventsOn("status", message => {
console.log(message);
statusLineQueue.push(message);
})
EventsOn("reload", async () => {
global.contact = await GetUserContact();
global.contacts = await GetAllContactsSorted();
global.conversations = await GetAllConversations();
});
async function add_new_conversation() {
const conversation = await NewConversation();
global.conversation = conversation;
global.conversations = [conversation, ...global.conversations.filter(conv => conv.ID !== 0)];
goto("/")
}
</script>
<main class="flex flex-col w-[100vw] h-[100vh] text-primary">
<div class="flex w-full h-full">
<nav class="bg-sidebar w-1/4 h-full">
<section class="flex flex-col gap-2 p-2">
<div class="flex justify-between">
<button class="text-xs" onclick={EstablishMailConnections}>{version}</button>
<div class="flex gap-4">
<ControlButton icon={settingsIcon}
onclick={() => goto("/settings")} />
<ControlButton icon={newIcon}
onclick={add_new_conversation}/>
</div>
</div>
<SearchBar />
</section>
<ol class="p-2">
{#each global.conversations as conversation (conversation.ID)}
<li>
<ConversationPreview {conversation} />
</li>
{:else}
<NoConversation />
{/each}
</ol>
</nav>
<section class="w-full h-full">
{@render children()}
</section>
</div>
<div class="w-full h-4 border-2 border-sidebar text-xs px-1">{statusLineQueue[0]}</div>
</main>
|