From 09d441afa9bc5d6d35be3fa456081875ea85681a Mon Sep 17 00:00:00 2001
From: Natalie Rose <natalie@omg.lol>
Date: Mon, 28 Sep 2026 10:23:57 +1000
Subject: [PATCH] Improve composing emails

---
 app/components/inbox/createTab.tsx | 168 +++++++++++++++++++++++++++--
 1 file changed, 160 insertions(+), 8 deletions(-)

diff --git a/app/components/inbox/createTab.tsx b/app/components/inbox/createTab.tsx
index 94a71c36..9315e9ed 100644
--- a/app/components/inbox/createTab.tsx
+++ b/app/components/inbox/createTab.tsx
@@ -1,26 +1,54 @@
 import React, { useState } from 'react';
 import { ComposeDraft } from 'app/interfaces';
 import { useSendMessageMutation } from 'app/queries/inbox';
+import { useFindEmpireQuery } from 'app/queries/empire';
+import MessageBody from 'app/components/inbox/messageBody';
+import EmpireRPCStore from 'app/stores/rpc/empire';
 
 type Props = {
   draft?: ComposeDraft;
 };
 
+type Recipient = { name: string };
+
+const parseRecipients = (value?: string): Recipient[] =>
+  (value ?? '')
+    .split(',')
+    .map((name) => name.trim())
+    .filter(Boolean)
+    .map((name) => ({ name }));
+
 //
 // Mounted fresh (via a key on the draft) whenever Reply/Reply All/Forward prefill a new draft, so
 // local state can just be initialized from props rather than synced with an effect.
 //
 const CreateTab: React.FunctionComponent<Props> = ({ draft }) => {
-  const [recipients, setRecipients] = useState(draft?.recipients ?? '');
+  const [recipients, setRecipients] = useState<Recipient[]>(() =>
+    parseRecipients(draft?.recipients)
+  );
+  const [search, setSearch] = useState('');
   const [subject, setSubject] = useState(draft?.subject ?? '');
   const [body, setBody] = useState(draft?.body ?? '');
+  const [showPreview, setShowPreview] = useState(false);
 
   const send = useSendMessageMutation();
 
+  const { data: empires = [], isFetching } = useFindEmpireQuery(search);
+  const candidates = empires.filter((empire) => !recipients.some((r) => r.name === empire.name));
+
+  const addRecipient = (empire: { id: number; name: string }) => {
+    setRecipients((current) => [...current, empire]);
+    setSearch('');
+  };
+
+  const removeRecipient = (index: number) => {
+    setRecipients((current) => current.filter((_, i) => i !== index));
+  };
+
   const onSend = () => {
     send.mutate(
       {
-        recipients,
+        recipients: recipients.map((r) => r.name).join(','),
         subject,
         body,
         options: {
@@ -30,9 +58,11 @@ const CreateTab: React.FunctionComponent<Props> = ({ draft }) => {
       },
       {
         onSuccess: () => {
-          setRecipients('');
+          setRecipients([]);
+          setSearch('');
           setSubject('');
           setBody('');
+          setShowPreview(false);
         },
       }
     );
@@ -42,15 +72,55 @@ const CreateTab: React.FunctionComponent<Props> = ({ draft }) => {
     <div className='bulma'>
       <div className='field'>
         <label className='label'>To</label>
+
+        {recipients.length > 0 && (
+          <div className='mb-4'>
+            <div className='tags are-medium'>
+              {recipients.map((recipient, index) => (
+                <span className='tag is-info is-rounded' key={`${recipient.name}-${index}`}>
+                  {recipient.name}
+                  <button
+                    type='button'
+                    className='delete is-small'
+                    onClick={() => removeRecipient(index)}
+                    title={`Remove ${recipient.name}`}
+                    aria-label={`Remove ${recipient.name}`}
+                  />
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
         <div className='control'>
           <input
             className='input'
             type='text'
-            placeholder='Recipient names, comma separated'
-            value={recipients}
-            onChange={(e) => setRecipients(e.target.value)}
+            placeholder='At least three characters'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
           />
         </div>
+
+        {search.length >= 3 && (
+          <div className='mt-2'>
+            {isFetching && <p>Searching...</p>}
+            {!isFetching && candidates.length === 0 && <p>No empires found.</p>}
+
+            <div className='tags'>
+              {candidates.map((empire) => (
+                <button
+                  type='button'
+                  className='tag is-primary'
+                  key={empire.id}
+                  onClick={() => addRecipient(empire)}
+                >
+                  {empire.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
 
       <div className='field'>
@@ -77,19 +147,101 @@ const CreateTab: React.FunctionComponent<Props> = ({ draft }) => {
         </div>
       </div>
 
+      <details className='mb-4'>
+        <summary style={{ cursor: 'pointer', userSelect: 'none' }}>Formatting Tips</summary>
+        <table className='table is-fullwidth is-narrow mt-2 mb-0'>
+          <tbody>
+            <tr>
+              <td>
+                <code>*text*</code>
+              </td>
+              <td>Bold text</td>
+            </tr>
+            <tr>
+              <td>
+                <code>{'{food}'}</code>, <code>{'{water}'}</code>, <code>{'{ore}'}</code>,{' '}
+                <code>{'{energy}'}</code>, <code>{'{waste}'}</code>, <code>{'{happiness}'}</code>,{' '}
+                <code>{'{time}'}</code>, <code>{'{essentia}'}</code>, <code>{'{plots}'}</code>,{' '}
+                <code>{'{build}'}</code>
+              </td>
+              <td>Resource icon</td>
+            </tr>
+            <tr>
+              <td>
+                <code>[http://...]</code>
+              </td>
+              <td>Clickable link to a URL</td>
+            </tr>
+            <tr>
+              <td>
+                <code>{'{Starmap x y label}'}</code>
+              </td>
+              <td>Link that jumps the reader's starmap to a location</td>
+            </tr>
+            <tr>
+              <td>
+                <code>{'{Empire id label}'}</code>
+              </td>
+              <td>Link to an empire's profile</td>
+            </tr>
+            <tr>
+              <td>
+                <code>{'{Alliance id label}'}</code>
+              </td>
+              <td>Link to an alliance's profile</td>
+            </tr>
+          </tbody>
+        </table>
+      </details>
+
+      {showPreview && (
+        <div className='box'>
+          <table className='table is-fullwidth is-narrow is-borderless mb-2'>
+            <tbody>
+              <tr>
+                <td>
+                  <span className='has-text-weight-bold'>From</span>
+                </td>
+                <td>{EmpireRPCStore.name}</td>
+              </tr>
+              <tr>
+                <td>
+                  <span className='has-text-weight-bold'>To</span>
+                </td>
+                <td>{recipients.map((r) => r.name).join(', ')}</td>
+              </tr>
+              <tr>
+                <td>
+                  <span className='has-text-weight-bold'>Subject</span>
+                </td>
+                <td>{subject}</td>
+              </tr>
+            </tbody>
+          </table>
+          <div className='content'>
+            <MessageBody text={body} />
+          </div>
+        </div>
+      )}
+
       {send.isSuccess && <div className='notification is-success is-light'>Message sent.</div>}
 
-      <div className='field'>
+      <div className='field is-grouped'>
         <div className='control'>
           <button
             type='button'
             className='button is-primary'
-            disabled={send.isPending || !recipients || !subject}
+            disabled={send.isPending || recipients.length === 0 || !subject}
             onClick={onSend}
           >
             Send
           </button>
         </div>
+        <div className='control'>
+          <button type='button' className='button' onClick={() => setShowPreview(!showPreview)}>
+            {showPreview ? 'Hide Preview' : 'Preview'}
+          </button>
+        </div>
       </div>
     </div>
   );
-- 
2.51.2