From b9ef2940eedaaa8759665dffec82f1b0e0b376f8 Mon Sep 17 00:00:00 2001
From: Ben Bucksch <ben.bucksch@beonex.com>
Date: Thu, 19 Dec 2024 09:14:14 +0100
Subject: [PATCH] Mail: Msg list: Folder header and footer, to show login
 button, msg count, and star/unread filters

---
 app/frontend/Mail/3pane/3Pane.svelte          |   3 +
 .../Mail/LeftPane/FolderFooter.svelte         | 130 ++++++++++++++++++
 .../Mail/LeftPane/FolderHeader.svelte         |  53 +++++++
 .../Mail/Vertical/VerticalLayout.svelte       |   4 +
 4 files changed, 190 insertions(+)
 create mode 100644 app/frontend/Mail/LeftPane/FolderFooter.svelte
 create mode 100644 app/frontend/Mail/LeftPane/FolderHeader.svelte

diff --git a/app/frontend/Mail/3pane/3Pane.svelte b/app/frontend/Mail/3pane/3Pane.svelte
index 669551042..c41dc7ab3 100644
--- a/app/frontend/Mail/3pane/3Pane.svelte
+++ b/app/frontend/Mail/3pane/3Pane.svelte
@@ -4,6 +4,7 @@
     slot="left" />
   <SplitterHorizontal slot="right" name="mail.3pane.msgs" initialBottomRatio={2}>
     <vbox flex class="message-list-pane" slot="top">
+      <FolderHeader folder={selectedFolder} {searchMessages} />
       <TableMessageList {messages} bind:selectedMessage bind:selectedMessages />
     </vbox>
     <vbox flex class="message-display-pane" slot="bottom">
@@ -23,6 +24,8 @@
 
   import TableMessageList from "./TableMessageList.svelte";
   import LeftPane from "../LeftPane/LeftPane.svelte";
+  import FolderFooter from "../LeftPane/FolderFooter.svelte";
+  import FolderHeader from "../LeftPane/FolderHeader.svelte";
   import MessageDisplay from "../Message/MessageDisplay.svelte";
   import StartPage from "../StartPage.svelte";
   import Splitter from "../../Shared/Splitter.svelte";
diff --git a/app/frontend/Mail/LeftPane/FolderFooter.svelte b/app/frontend/Mail/LeftPane/FolderFooter.svelte
new file mode 100644
index 000000000..adb4be495
--- /dev/null
+++ b/app/frontend/Mail/LeftPane/FolderFooter.svelte
@@ -0,0 +1,130 @@
+<!-- Appears below the msg list -->
+ {#if folder}
+  <hbox class="folder-header">
+    <hbox class="buttons">
+      {#if $account?.isLoggedIn}
+        <GetMailButton {folder} />
+      {/if}
+      <hbox class="star button" class:starred={isShowStarred}>
+        <Button
+          icon={StarIcon}
+          iconSize="16px"
+          iconOnly
+          label={$t`Show only starred messages`}
+          onClick={toggleStarred}
+          plain
+          />
+      </hbox>
+      <hbox class="unread-dot button" class:unread={isShowUnread}>
+        <Button
+          icon={CircleIcon}
+          iconSize="7px"
+          iconOnly
+          label={$t`Show only unread messages`}
+          onClick={toggleUnread}
+          plain
+          />
+      </hbox>
+    </hbox>
+    <hbox flex />
+    <hbox class="msg-count">
+      {#if searchMessages}
+        {#if $searchMessages.hasItems}
+          {$t`${$searchMessages.length} search results`}
+        {:else}
+          {$t`No search results`}
+        {/if}
+      {:else}
+        {#if $folder.countTotal > 0}
+          {$t`${$folder.countNewArrived} new,
+              ${$folder.countUnread} unread,
+              ${$folder.countTotal} total`}
+        {/if}
+        {#if $folder.countTotal > 0 && $folder.countTotal != $messages.length}
+          {#if $messages.length == 0}
+            {$t`Loading...`}
+          {:else}
+            {$t`${$messages.length} displayed.`}
+          {/if}
+        {/if}
+      {/if}
+    </hbox>
+    <hbox flex />
+  </hbox>
+{/if}
+
+<script lang="ts">
+  import type { Folder } from '../../../logic/Mail/Folder';
+  import type { EMail } from '../../../logic/Mail/EMail';
+  import { newSearchEMail } from '../../../logic/Mail/Store/setStorage';
+  import GetMailButton from './GetMailButton.svelte';
+  import Button from '../../Shared/Button.svelte';
+  import StarIcon from "lucide-svelte/icons/star";
+  import CircleIcon from "lucide-svelte/icons/circle";
+  import type { ArrayColl } from 'svelte-collections';
+  import { t } from '../../../l10n/l10n';
+
+  export let folder: Folder;
+  export let searchMessages: ArrayColl<EMail> | null; /** out */
+
+  $: account = folder?.account;
+  $: messages = folder?.messages;
+
+  let isShowStarred = false;
+  async function toggleStarred() {
+    isShowStarred = !isShowStarred;
+    await startSearch();
+  }
+
+  let isShowUnread = false;
+  async function toggleUnread() {
+    isShowUnread = !isShowUnread;
+    await startSearch();
+  }
+
+  async function startSearch() {
+    if (!isShowStarred && !isShowUnread) {
+      searchMessages = null;
+      return;
+    }
+    let search = newSearchEMail();
+    if (isShowStarred) { // undefined != false
+      search.isStarred = true;
+    }
+    if (isShowUnread) {
+      search.isRead = false;
+    }
+    search.folder = folder;
+    searchMessages = await search.startSearch();
+  }
+</script>
+
+<style>
+  .folder-header {
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    font-size: 12px;
+    padding-block-start: 2px;
+    padding-block-end: 2px;
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
+    color: var(--leftbar-fg);
+    background-color: var(--leftbar-bg);
+  }
+  .folder-header :global(.get-mail button) {
+    height: 20px;
+    width: 20px;
+    border: none;
+  }
+  .msg-count {
+    padding-inline-start: 4px;
+    padding-inline-end: 8px;
+  }
+  .star.starred :global(svg) {
+    fill: orange;
+  }
+  .unread-dot.unread :global(svg) {
+    fill: green;
+  }
+</style>
diff --git a/app/frontend/Mail/LeftPane/FolderHeader.svelte b/app/frontend/Mail/LeftPane/FolderHeader.svelte
new file mode 100644
index 000000000..676489f44
--- /dev/null
+++ b/app/frontend/Mail/LeftPane/FolderHeader.svelte
@@ -0,0 +1,53 @@
+<!-- Appears above the msg list -->
+{#if account && !$account?.isLoggedIn || searchMessages}
+  <hbox class="folder-header">
+    <hbox flex />
+    {#if account && !$account?.isLoggedIn}
+      <Button plain
+        label={$t`Login`}
+        icon={DisconnectedIcon}
+        onClick={login}
+        iconSize="16px" />
+    {/if}
+    {#if searchMessages}
+      {$t(`Search results`)}
+    {/if}
+    <hbox flex />
+  </hbox>
+{/if}
+
+<script lang="ts">
+  import type { Folder } from '../../../logic/Mail/Folder';
+  import type { EMail } from '../../../logic/Mail/EMail';
+  import Button from '../../Shared/Button.svelte';
+  import DisconnectedIcon from "lucide-svelte/icons/unplug";
+  import { t } from '../../../l10n/l10n';
+  import type { ArrayColl } from 'svelte-collections';
+
+  export let folder: Folder;
+  export let searchMessages: ArrayColl<EMail> | null; /** in */
+
+  $: account = folder?.account;
+
+  async function login() {
+    await account.login(true);
+  }
+</script>
+
+<style>
+  .folder-header {
+    align-items: center;
+    justify-content: center;
+    padding-block-start: 2px;
+    padding-block-end: 2px;
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
+    font-size: 12px;
+    color: var(--leftbar-fg);
+    background-color: var(--leftbar-bg);
+    box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 10%);
+  }
+  .folder-header :global(button) {
+    margin-inline-end: 12px;
+  }
+</style>
diff --git a/app/frontend/Mail/Vertical/VerticalLayout.svelte b/app/frontend/Mail/Vertical/VerticalLayout.svelte
index 57edfdd7f..d2f6fee97 100644
--- a/app/frontend/Mail/Vertical/VerticalLayout.svelte
+++ b/app/frontend/Mail/Vertical/VerticalLayout.svelte
@@ -4,7 +4,9 @@
     slot="left" />
   <Splitter slot="right" name="mail.vertical.msgs" initialRightRatio={2}>
     <vbox flex class="message-list-pane" slot="left">
+      <FolderHeader folder={selectedFolder} {searchMessages} />
       <VerticalMessageList {messages} bind:selectedMessage bind:selectedMessages />
+      <FolderFooter folder={selectedFolder} bind:searchMessages />
     </vbox>
     <vbox flex class="message-display-pane" slot="right">
       {#if selectedMessage}
@@ -25,6 +27,8 @@
   import LeftPane from "../LeftPane/LeftPane.svelte";
   import MessageDisplay from "../Message/MessageDisplay.svelte";
   import StartPage from "../StartPage.svelte";
+  import FolderHeader from "../LeftPane/FolderHeader.svelte";
+  import FolderFooter from "../LeftPane/FolderFooter.svelte";
   import Splitter from "../../Shared/Splitter.svelte";
   import type { ArrayColl, Collection } from 'svelte-collections';