folder management + cleanup

src/lib/utils.svelte.ts

@@ -73,16 +73,23 @@ export async function moveMessageToFolder(id: NDKEventId, folder: NDKEventId | s
 export async function createFolder(name: string, icon: string) {
   await waitForNDK();
   const allFolders = await FolderLabel.getAll(ndk);
-	const newFolder = {
+  const newFolder = FolderLabel.fromJSON({
     id: crypto.randomUUID(),
     name: name,
     icon: icon
-	};
+  });
   allFolders.push(newFolder);
   await FolderLabel.save(ndk, allFolders);
   return newFolder;
 }
 
+export async function deleteFolder(id: string) {
+  await waitForNDK();
+  const allFolders = await FolderLabel.getAll(ndk);
+  allFolders.splice(allFolders.findIndex(f => f.id === id), 1);
+  await FolderLabel.save(ndk, allFolders);
+}
+
 export async function createSealedLetter(
   from: NDKUser,
   to: NDKUser,

src/routes/settings/+page.svelte

@@ -15,6 +15,7 @@
 	import Select from '../../components/Select.svelte';
 	import SettingsLine from './SettingsLine.svelte';
 	import SubscriptionSettings from './SubscriptionSettings.svelte';
+	import FolderManagement from './FolderManagement.svelte';
 
 	onMount(async () => {
 		$pageTitle = 'Settings';
@@ -30,6 +31,10 @@
 	<SubscriptionSettings />
 </SettingsLine>
 
+<SettingsLine title="Folder Management">
+	<FolderManagement />
+</SettingsLine>
+
 <SettingsLine title="Sorting and Grouping">
 	<Checkbox bind:checked={$groupByStamps} label="Group by stamps" />
 	<Select

src/routes/settings/FolderManagement.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { FolderLabel } from '$lib/folderLabel';
+	import { ndk } from '$lib/stores.svelte';
+	import { createFolder, deleteFolder } from '$lib/utils.svelte';
+	import { onMount } from 'svelte';
+	import Icon from '@iconify/svelte';
+	import IconButton from '../../components/IconButton.svelte';
+
+	let loading = $state(true);
+	let folders = $state<FolderLabel[]>([]);
+	let newFolderName = $state('');
+
+	async function loadFolders() {
+		loading = true;
+		folders = await FolderLabel.getAll($ndk);
+		loading = false;
+	}
+
+	async function handleDelete(folderId: string) {
+		loading = true;
+		await deleteFolder(folderId);
+		await loadFolders();
+	}
+
+	async function handleAdd() {
+		if (!newFolderName.trim()) return;
+		loading = true;
+		await createFolder(newFolderName, '');
+		newFolderName = '';
+		await loadFolders();
+	}
+
+	onMount(loadFolders);
+</script>
+
+{#if loading}
+	<div class="loading">
+		<Icon icon="eos-icons:loading" width="5em" />
+	</div>
+{:else}
+	<table>
+		<tbody>
+			{#each folders as folder}
+				<tr>
+					<td class="icon-cell">
+						<Icon icon={folder.icon} width="1.5em" />
+					</td>
+					<td class="name-cell">{folder.name}</td>
+					<td class="action-cell">
+						<button onclick={() => handleDelete(folder.id)}>
+							<Icon icon="icon-park-twotone:delete" width="1.5em" />
+						</button>
+					</td>
+				</tr>
+			{/each}
+			<tr class="add-folder">
+				<td class="input-container">
+					<input type="text" bind:value={newFolderName} placeholder="New folder name" />
+				</td>
+				<td class="button-cell">
+					<IconButton icon="material-symbols:add" text="Add" on:click={handleAdd} />
+				</td>
+			</tr>
+		</tbody>
+	</table>
+{/if}
+
+<style>
+	.loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	table {
+		width: 100%;
+	}
+
+	tr {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		width: 100%;
+	}
+
+	.icon-cell {
+		display: flex;
+		width: 1.5em;
+		height: 1.5em;
+	}
+
+	.name-cell {
+		flex: 1;
+	}
+
+	.action-cell {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.add-folder {
+		margin-top: 1rem;
+	}
+
+	.input-container {
+		flex: 1;
+	}
+
+	.button-cell {
+		display: flex;
+		justify-content: flex-end;
+		padding-left: 1rem;
+	}
+</style>