npub.email/src/routes/+page.svelte

<script lang="ts">
	import { FolderLabel } from '$lib/folderLabel';
	import { ndk, pageIcon, pageTitle } from '$lib/stores.svelte';
	import Icon from '@iconify/svelte';
	import { onMount } from 'svelte';
	import FoldersListSidebar from '../components/FoldersListSidebar.svelte';
	import IconButton from '../components/IconButton.svelte';
	import { type PartialLetter, sortedLetters } from '$lib/letterHandler.svelte';
	import Dialog from '../components/Dialog.svelte';
	import MoveFolderDialog from '../components/MoveFolderDialog.svelte';
	import MailboxFolderItems from '../components/MailboxFolderItems.svelte';

	let activeFolderId = $state('inbox');
	let folders = $state<FolderLabel[]>([
		FolderLabel.fromJSON({
			id: 'inbox',
			name: 'Inbox',
			icon: 'solar:inbox-bold-duotone'
		}),
		FolderLabel.fromJSON({ id: 'sent', name: 'Sent', icon: 'fa:send' }),
		FolderLabel.fromJSON({ id: 'trash', name: 'Trash', icon: 'eos-icons:trash' })
	]);
	let activeFolder = $derived(folders.find((f) => f.id == activeFolderId)!);
	let sidebarOpen = $state(false);
	let moveFolderDialogOpen = $state(false);
	let initialLoading = $state(false);

	async function loadFolders() {
		let newFolders = await FolderLabel.getAll($ndk);
		for (let folder of newFolders)
			if (!folders.find((f) => f.id === folder.id)) folders = [...folders, folder];
			else if (folder.id == 'trash')
				folders.find((f) => f.id === folder.id)!.letters = folder.letters;
	}

	function changeFolder(newFolder: string) {
		activeFolderId = newFolder;
		$pageTitle = folders.find((f) => f.id === newFolder)!.name;
		$pageIcon = folders.find((f) => f.id === newFolder)!.icon;
		reloadLetters();
	}

	let letters = $state<PartialLetter[]>([]);

	async function reloadLetters() {
		letters = [];
		const ignoredIDs =
			activeFolderId == 'inbox' || activeFolderId == 'sent'
				? folders.flatMap((f) => f.letters)
				: [];
		for await (const newLetters of sortedLetters(activeFolder, ignoredIDs)) letters = newLetters;
	}

	onMount(async () => {
		$pageTitle = 'Inbox';
		$pageIcon = 'solar:inbox-bold-duotone';
		await loadFolders();
		changeFolder('inbox');
		initialLoading = true;
	});
</script>

<div class="actions">
	<IconButton
		icon="mynaui:sidebar-solid"
		onclick={() => (sidebarOpen = !sidebarOpen)}
		text="Sidebar"
	/>
	<IconButton
		icon="mdi:folder-move-outline"
		onclick={() => (moveFolderDialogOpen = true)}
		text="Move Letters"
	/>
</div>

<Dialog bind:open={moveFolderDialogOpen}>
	{#if moveFolderDialogOpen}
		<MoveFolderDialog {activeFolder} bind:moveFolderDialogOpen {folders} />
	{/if}
</Dialog>

<div class="content" class:sidebar-open={sidebarOpen}>
	<FoldersListSidebar bind:folders bind:sidebarOpen {changeFolder} />

	{#key activeFolderId}
		<div class="folder-view">
			{#if !initialLoading}
				<Icon icon="eos-icons:loading" width="5em" />
				<br />
				<p>If you have letters, they will appear here, please wait...</p>
			{:else}
				<MailboxFolderItems {folders} {activeFolder} />
			{/if}
		</div>
	{/key}
</div>

<style>
  .content {
    display: flex;
    gap: 0;
    transition: gap 0.3s ease;

    &.sidebar-open {
      gap: var(--spacing-sm);
    }
  }

  .folder-view {
    flex-grow: 1;
  }

  .actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
</style>