feat: ux improvements for reader, reply, compose, and folder sidebar

Author: shaunwarman

src/main.ts

@@ -460,6 +460,16 @@ if (composeRoot) {
         props: {
           toasts,
           mailboxView: composeMailboxView,
+          onSent: (result?: { archive?: boolean; queued?: boolean }) => {
+            if (result?.archive) {
+              const msg = get(selectedMessage);
+              if (msg) {
+                mailboxActions.archiveMessage(msg).catch((err) => {
+                  console.error('[Compose] Failed to archive after send:', err);
+                });
+              }
+            }
+          },
           registerApi: (api: typeof composeApi) => {
             if (api) {
               composeApi = api;

src/stores/settingsRegistry.ts

@@ -126,6 +126,16 @@ export const SETTINGS_REGISTRY: Record<string, SettingDefinition> = {
     localParse: (raw) => parseBoolean(raw, true),
     localSerialize: (value) => serializeBoolean(Boolean(value)),
   },
+  default_reply_all: {
+    id: 'default_reply_all',
+    label: 'Default Reply All',
+    scope: SETTING_SCOPES.DEVICE,
+    localKey: 'default_reply_all',
+    valueType: 'boolean',
+    defaultValue: false,
+    localParse: (raw) => parseBoolean(raw, false),
+    localSerialize: (value) => serializeBoolean(Boolean(value)),
+  },
   messages_per_page: {
     id: 'messages_per_page',
     label: 'Messages Per Page',

src/svelte/Compose.svelte

@@ -124,6 +124,7 @@
   import AlignRight from '@lucide/svelte/icons/align-right';
   import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
   import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import Archive from '@lucide/svelte/icons/archive';
   import RemoveFormatting from '@lucide/svelte/icons/remove-formatting';
 
   interface ToastApi {
@@ -388,6 +389,7 @@
   let draftStatus = $state<'idle' | 'saving' | 'saved' | 'error'>('idle');
   let draftStatusDetail = $state('');
   let replyBodyLoading = $state(false);
+  let archiveAfterSend = $state(false);
   let replyBodyError = $state<string | null>(null);
   let pendingReplyBody = $state('');
   let replyPrefillData = $state<unknown>(null);
@@ -1094,6 +1096,7 @@
     linkUrl = '';
     showAttachmentReminderModal = false;
     attachmentReminderKeyword = '';
+    archiveAfterSend = false;
     showMobileMenu = false;
     showScheduleModal = false;
     showScheduleConfirm = false;
@@ -1971,8 +1974,9 @@
         }
         toasts?.show?.('Message queued - will send when online', 'info');
         setVisible(false);
+        const shouldArchive = archiveAfterSend;
         reset();
-        onSent?.({ queued: true });
+        onSent?.({ queued: true, archive: shouldArchive });
       } catch (err) {
         error = 'Failed to queue message';
         toasts?.show?.(error, 'error');
@@ -2009,8 +2013,9 @@
         ...bccList.map((e) => ({ email: e })),
       ]).catch(() => {});
       setVisible(false);
+      const shouldArchive = archiveAfterSend;
       reset();
-      onSent?.();
+      onSent?.({ archive: shouldArchive });
     } catch (err) {
       const e = err as { message?: string; status?: number };
       if (e.message?.includes('network') || e.message?.includes('fetch') || e.status === 0) {
@@ -2034,8 +2039,9 @@
           }
           toasts?.show?.('Network error - message queued for retry', 'warning');
           setVisible(false);
+          const shouldArchive = archiveAfterSend;
           reset();
-          onSent?.({ queued: true });
+          onSent?.({ queued: true, archive: shouldArchive });
         } catch (queueErr) {
           error = e?.message || 'Send failed';
           toasts?.show?.(error, 'error');
@@ -2837,6 +2843,17 @@
                 </button>
                 {#if showSendDropdown}
                   <div class="absolute bottom-full left-0 mb-1 min-w-[160px] border border-border bg-popover p-1 shadow-lg z-[100]">
+                    {#if inReplyTo}
+                      <button
+                        type="button"
+                        class="w-full flex items-center gap-2 px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+                        disabled={sending}
+                        onclick={() => { showSendDropdown = false; archiveAfterSend = true; send(); }}
+                      >
+                        <Archive class="h-4 w-4" />
+                        Send &amp; Archive
+                      </button>
+                    {/if}
                     <button
                       type="button"
                       class="w-full flex items-center gap-2 px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"

src/svelte/Mailbox.svelte

@@ -173,6 +173,9 @@
   const isBodyPrefetchEnabled = () =>
     getEffectiveSettingValue('cache_prefetch_enabled') !== false;
 
+  const isDefaultReplyAll = () =>
+    Boolean(getEffectiveSettingValue('default_reply_all'));
+
   interface MailboxApi {
     open?: () => void;
     refresh?: () => void;
@@ -3253,7 +3256,11 @@ const stopVerticalResize = () => {
 
   const contextReply = () => {
     if (!contextMenuMessage) return;
-    mailboxView?.replyTo?.(contextMenuMessage);
+    if (isDefaultReplyAll()) {
+      mailboxView?.replyAll?.(contextMenuMessage);
+    } else {
+      mailboxView?.replyTo?.(contextMenuMessage);
+    }
     closeContextMenu();
   };
 
@@ -3412,7 +3419,7 @@ const stopVerticalResize = () => {
     !readerIsDraftFolder &&
     !readerIsTrashFolder &&
     !readerIsSpamOrJunk);
-  const canReply = $derived(!readerIsSentFolder && !readerIsDraftFolder);
+  const canReply = $derived(!readerIsDraftFolder);
   const canForward = $derived(!readerIsDraftFolder);
   const canDownloadOriginal = $derived(!readerIsDraftFolder);
   const canViewOriginal = $derived(!readerIsDraftFolder);
@@ -4565,19 +4572,17 @@ const stopVerticalResize = () => {
               onclick={() => handleSelectFolder(folder.path)}
               onkeydown={(e) => activateOnKeys(e, () => handleSelectFolder(folder.path))}
             >
-              <span class="flex items-center gap-2 min-w-0 flex-1" style={`padding-left: ${(folder.level || 0) * 12}px`}>
+              <span class={`flex items-center gap-1.5 min-w-0 flex-1 ${(folder.level || 0) > 0 ? 'border-l border-border pl-1.5' : ''}`} style={`${(folder.level || 0) > 0 ? `margin-left: ${(folder.level) * 6}px` : ''}`}>
                 <!-- Chevron for expand/collapse -->
                 {#if hasChildren(folder)}
                   <button
                     type="button"
-                    class="p-0.5 hover:bg-accent transition-colors shrink-0"
+                    class="hover:bg-accent transition-colors shrink-0"
                     onclick={(e) => { e.stopPropagation(); toggleFolderExpansion(folder.path); }}
                     aria-label={$expandedFolders.has(folder.path) ? 'Collapse' : 'Expand'}
                   >
-                    <ChevronRight class={`h-4 w-4 transition-transform ${$expandedFolders.has(folder.path) ? 'rotate-90' : ''}`} />
+                    <ChevronRight class={`h-3.5 w-3.5 transition-transform ${$expandedFolders.has(folder.path) ? 'rotate-90' : ''}`} />
                   </button>
-                {:else if (folder.level || 0) > 0}
-                  <span class="w-4 shrink-0" aria-hidden="true"></span>
                 {/if}
 
                 <svelte:component this={getFolderIcon(folder)} class="h-5 w-5 text-primary shrink-0" />
@@ -5645,7 +5650,7 @@ const stopVerticalResize = () => {
         {/if}
       {:else if $selectedMessage}
         {#if isProductivityLayout || $mobileReader}
-          <div class="flex items-center gap-2 p-2 border-b border-border">
+          <div class="sticky top-0 z-10 bg-background flex items-center gap-2 p-2 border-b border-border">
             <button
               class="inline-flex items-center justify-center h-11 w-11 hover:bg-accent hover:text-accent-foreground"
               type="button"
@@ -5732,7 +5737,7 @@ const stopVerticalResize = () => {
             </div>
           </div>
         {/if}
-        <div class="p-4 border-b border-border">
+        <div class="sticky top-0 z-10 bg-background p-4 border-b border-border">
           <div class="flex items-start justify-between gap-4 mb-2">
             <div class="flex-1 min-w-0">
               <strong class="text-lg font-semibold">{threadSubject || $selectedMessage.subject}</strong>
@@ -5768,10 +5773,10 @@ const stopVerticalResize = () => {
                 <button
                   class="inline-flex items-center justify-center h-9 w-9 hover:bg-accent hover:text-accent-foreground"
                   type="button"
-                  aria-label="Reply"
-                  data-tooltip="Reply (R)"
+                  aria-label={isDefaultReplyAll() ? 'Reply All' : 'Reply'}
+                  data-tooltip={isDefaultReplyAll() ? 'Reply All (R)' : 'Reply (R)'}
                   data-tooltip-position="bottom"
-                  onclick={() => mailboxView?.replyTo?.($selectedMessage)}
+                  onclick={() => isDefaultReplyAll() ? mailboxView?.replyAll?.($selectedMessage) : mailboxView?.replyTo?.($selectedMessage)}
                 >
                   <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"></polyline><path d="M20 18v-2a4 4 0 0 0-4-4H4"></path></svg>
                 </button>

src/svelte/Settings.svelte

@@ -136,6 +136,7 @@
   let section = $state('general');
   let composePlainDefault = $state(false);
   let attachmentReminderEnabled = $state(false);
+  let defaultReplyAll = $state(false);
   let messagesPerPage = $state(20);
   let archiveFolder = $state('');
   let sentFolder = $state('');
@@ -453,6 +454,9 @@
     composePlainDefault = Boolean(
       getEffectiveSettingValue('compose_plain_default', { account: currentAcct }),
     );
+    defaultReplyAll = Boolean(
+      getEffectiveSettingValue('default_reply_all', { account: currentAcct }),
+    );
     messagesPerPage = Number.parseInt(
       getEffectiveSettingValue('messages_per_page', { account: currentAcct }) || '20',
       10,
@@ -782,6 +786,20 @@
     }
   };
 
+  const saveDefaultReplyAll = async () => {
+    try {
+      await setSettingValue('default_reply_all', defaultReplyAll, {
+        account: getAccountId(),
+      });
+      toasts?.show?.(
+        defaultReplyAll ? 'Reply All set as default' : 'Reply set as default',
+        'success',
+      );
+    } catch (err) {
+      toasts?.show?.((err as Error)?.message || 'Failed to save reply default', 'error');
+    }
+  };
+
   const toggleBlockRemoteImages = () => {
     try {
       setSettingValue('block_remote_images', blockRemoteImages, { account: getAccountId() });
@@ -1297,6 +1315,13 @@
             <p class="text-sm text-muted-foreground">
               Get a reminder if you mention attachments but forget to add them.
             </p>
+            <label class="flex items-center gap-3">
+              <Checkbox bind:checked={defaultReplyAll} onCheckedChange={saveDefaultReplyAll} />
+              <span>Reply All by default</span>
+            </label>
+            <p class="text-sm text-muted-foreground">
+              Use Reply All as the default reply action instead of Reply.
+            </p>
           </Card.Content>
         </Card.Root>
 

src/utils/address.ts

@@ -52,9 +52,46 @@ export interface MessageWithHeaders {
 
 type AddressInput = string | AddressObject | AddressObject[] | null | undefined;
 
+/**
+ * Split a comma-separated address string into individual addresses,
+ * respecting quoted strings and angle brackets.
+ * e.g. "jake@x.com, Vicky <vicky@x.com>" → ["jake@x.com", "Vicky <vicky@x.com>"]
+ */
+const splitAddressString = (str: string): string[] => {
+  const parts: string[] = [];
+  let current = '';
+  let inQuotes = false;
+  let inAngle = 0;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i];
+    if (ch === '"' && str[i - 1] !== '\\') {
+      inQuotes = !inQuotes;
+      current += ch;
+    } else if (!inQuotes && ch === '<') {
+      inAngle++;
+      current += ch;
+    } else if (!inQuotes && ch === '>' && inAngle > 0) {
+      inAngle--;
+      current += ch;
+    } else if (!inQuotes && inAngle === 0 && ch === ',') {
+      const trimmed = current.trim();
+      if (trimmed) parts.push(trimmed);
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  const trimmed = current.trim();
+  if (trimmed) parts.push(trimmed);
+  return parts;
+};
+
 export const recipientsToList = (value: AddressInput): (string | AddressObject)[] => {
   if (!value) return [];
   if (Array.isArray(value)) return value.filter(Boolean);
+  if (typeof value === 'string' && value.includes(',')) {
+    return splitAddressString(value).filter(Boolean);
+  }
   return [value].filter(Boolean);
 };