From ceaa664d78c49578b7ffb49cf7d87d3a96763755 Mon Sep 17 00:00:00 2001 From: MrMelon54 Date: Mon, 20 Nov 2023 22:06:16 +0000 Subject: [PATCH] Email folder sidebar --- package.json | 3 + src/App.svelte | 69 +++++++++++++----- src/app.scss | 2 + src/components/TreePath.svelte | 128 +++++++++++++++++++++++++++++++++ src/types/internal.ts | 6 ++ tsconfig.node.json | 1 + vite.config.ts | 14 ++++ yarn.lock | 5 ++ 8 files changed, 211 insertions(+), 17 deletions(-) create mode 100644 src/components/TreePath.svelte diff --git a/package.json b/package.json index ae5f9a3..823f523 100644 --- a/package.json +++ b/package.json @@ -21,5 +21,8 @@ "tslib": "^2.6.0", "typescript": "^5.0.2", "vite": "^4.4.5" + }, + "dependencies": { + "lucide-svelte": "^0.292.0" } } diff --git a/src/App.svelte b/src/App.svelte index 8b6dce6..b193877 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,12 +3,22 @@ import {getBearer, loginStore} from "./stores/login"; import {openLoginPopup} from "./utils/login-popup"; import type {ImapFolder} from "./types/imap"; - import type {TreeFolder, RootFolder} from "./types/internal"; + import type {TreeFolder, RootFolder, FolderSelection} from "./types/internal"; + import TreePath from "./components/TreePath.svelte"; let mainWS: WebSocket; $: window.mainWS = mainWS; let folders: RootFolder[] = []; + let selectedFolder: FolderSelection = {name: "Inbox", path: "INBOX"}; + let inboxOption: string = "*"; + let inboxOptions: string[] = []; + + function changeSelectedFolder(p: FolderSelection) { + selectedFolder = p; + } + + $: console.log("Selected", selectedFolder); function countChar(s: string, c: string) { let result = 0; @@ -53,12 +63,12 @@ imapFolders = imapFolders.sort((a, b) => countChar(a.Name, a.Delimiter) - countChar(b.Name, b.Delimiter)); // Setup root folders - let INBOX: RootFolder = {role: "Inbox", name: "Inbox", attr: new Set(), children: []}; - let DRAFTS: RootFolder = {role: "Drafts", name: "Drafts", attr: new Set(["\\\\Drafts"]), children: []}; - let SENT: RootFolder = {role: "Sent", name: "Sent", attr: new Set(["\\\\Sent"]), children: []}; - let ARCHIVE: RootFolder = {role: "Archive", name: "Archive", attr: new Set(["\\\\Archive"]), children: []}; - let JUNK: RootFolder = {role: "Junk", name: "Junk", attr: new Set(["\\\\Junk"]), children: []}; - let TRASH: RootFolder = {role: "Trash", name: "Trash", attr: new Set(["\\\\Trash"]), children: []}; + let INBOX: RootFolder = {role: "Inbox", name: "Inbox", path: "", attr: new Set(), children: []}; + let DRAFTS: RootFolder = {role: "Drafts", name: "Drafts", path: "", attr: new Set(["\\Drafts"]), children: []}; + let SENT: RootFolder = {role: "Sent", name: "Sent", path: "", attr: new Set(["\\Sent"]), children: []}; + let ARCHIVE: RootFolder = {role: "Archive", name: "Archive", path: "", attr: new Set(["\\Archive"]), children: []}; + let JUNK: RootFolder = {role: "Junk", name: "Junk", path: "", attr: new Set(["\\Junk"]), children: []}; + let TRASH: RootFolder = {role: "Trash", name: "Trash", path: "", attr: new Set(["\\Trash"]), children: []}; // Setup map to find special folders let ROOT: Map = new Map(); @@ -132,6 +142,7 @@ // add child to current parent pObj.children.push({ name: x.Name.slice(pIdx), + path: x.Name, attr: new Set(x.Attributes), children: [], }); @@ -179,21 +190,35 @@ {:else}
Warning: This is currently still under development
-
- - 
{JSON.stringify(folders, null, 2)}
- -
{/if} +
+
+ Version: {import.meta.env.VITE_APP_VERSION} + , {import.meta.env.VITE_APP_LASTMOD} +
+
+ Source +
+
+ +
+
diff --git a/src/app.scss b/src/app.scss index 3bad92b..678e29a 100644 --- a/src/app.scss +++ b/src/app.scss @@ -45,6 +45,7 @@ $theme-bg: #242424; display: flex; flex-direction: column; align-content: stretch; + overflow: hidden; } a { @@ -59,6 +60,7 @@ a:hover { body { margin: 0; + overflow: hidden; } code, diff --git a/src/components/TreePath.svelte b/src/components/TreePath.svelte new file mode 100644 index 0000000..815e474 --- /dev/null +++ b/src/components/TreePath.svelte @@ -0,0 +1,128 @@ + + +
+
+ +
+ + +
+{#if expanded} +
+ {#each data.children as child (child.name)} + triggerSelected({name: data.name + "/" + n.detail.name, path: n.detail.path})} + /> + {/each} +
+{/if} + + diff --git a/src/types/internal.ts b/src/types/internal.ts index 3395d76..fefdc51 100644 --- a/src/types/internal.ts +++ b/src/types/internal.ts @@ -1,5 +1,6 @@ export interface TreeFolder { name: string; + path: string; attr: Set; children: TreeFolder[]; } @@ -7,3 +8,8 @@ export interface TreeFolder { export interface RootFolder extends TreeFolder { role: string; } + +export interface FolderSelection { + name: string; + path: string; +} diff --git a/tsconfig.node.json b/tsconfig.node.json index 494bfe0..5258f45 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "target": "ESNext", "composite": true, "skipLibCheck": true, "module": "ESNext", diff --git a/vite.config.ts b/vite.config.ts index 4157534..d1f9d7b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,19 @@ import {defineConfig} from "vite"; import {svelte} from "@sveltejs/vite-plugin-svelte"; +import {exec} from "child_process"; +import {promisify} from "util"; + +// Get current tag/commit and last commit date from git +const pexec = promisify(exec); +let [version, lastmod] = ( + await Promise.allSettled([ + pexec("git describe --tags || git rev-parse --short HEAD"), + pexec('git log -1 --format=%cd --date=format:"%Y-%m-%d %H:%M"'), + ]) +).map(v => (v as {value?: {stdout: string}}).value?.stdout.trim()); + +process.env.VITE_APP_VERSION = version; +process.env.VITE_APP_LASTMOD = lastmod; // https://vitejs.dev/config/ export default defineConfig({ diff --git a/yarn.lock b/yarn.lock index 5bad0d5..8a5740b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -504,6 +504,11 @@ locate-character@^3.0.0: resolved "https://registry.yarnpkg.com/locate-character/-/locate-character-3.0.0.tgz#0305c5b8744f61028ef5d01f444009e00779f974" integrity sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA== +lucide-svelte@^0.292.0: + version "0.292.0" + resolved "https://registry.yarnpkg.com/lucide-svelte/-/lucide-svelte-0.292.0.tgz#75a6f07ca37b50f870bc04e8218bd91412b19755" + integrity sha512-bnTpg9pbm6pQDc+YiLK2yxtRFk2Cc+hbzwjAPaV85k56x10CJ9LsXjon6wRrlNTSdxJR7GOsRjz0A5ZNu3Z7dg== + magic-string@^0.27.0: version "0.27.0" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"