FreeTAKTeam · brothercorvo · Sep 25, 2025 · Sep 25, 2025
diff --git a/TASK.md b/TASK.md
@@ -80,4 +80,5 @@
 - [x] Add HTTP integration tests for the EmergencyManagement web UI message and event flows.
 - [x] Surface active Reticulum interfaces in the EmergencyManagement gateway startup logs and dashboard.
 - [x] Upgrade esbuild dependency to version 0.25.0 or later to address the development server request vulnerability.
+- [x] Simplify EmergencyManagement web UI tables with a drawer form triggered by a New button. (2025-09-25)
 
diff --git a/examples/EmergencyManagement/webui/src/index.css b/examples/EmergencyManagement/webui/src/index.css
@@ -461,6 +461,13 @@ a {
   overflow-x: auto;
 }
 
+.table-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: 0.5rem;
+}
+
 .table-card table {
   width: 100%;
   border-collapse: collapse;
@@ -507,6 +514,42 @@ a {
   color: var(--text-muted);
 }
 
+.form-drawer {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: stretch;
+  z-index: 30;
+}
+
+.form-drawer__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.6);
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.form-drawer__panel {
+  position: relative;
+  width: min(480px, 100%);
+  background: linear-gradient(165deg, rgba(12, 24, 45, 0.98) 0%, rgba(11, 22, 39, 0.92) 100%);
+  border-left: 1px solid rgba(148, 163, 184, 0.18);
+  box-shadow: -24px 0 60px rgba(8, 15, 35, 0.65);
+  padding: 2rem 1.75rem;
+  overflow-y: auto;
+  z-index: 1;
+}
+
+.form-drawer__panel .form-card {
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+}
+
 .button {
   border: none;
   border-radius: 0.75rem;

diff --git a/...ergencyManagement/webui/src/pages/EmergencyActionMessages/EmergencyActionMessagesPage.tsx b/...ergencyManagement/webui/src/pages/EmergencyActionMessages/EmergencyActionMessagesPage.tsx
@@ -25,6 +25,12 @@ export function EmergencyActionMessagesPage(): JSX.Element {
   const queryClient = useQueryClient();
   const { pushToast } = useToast();
   const [editingMessage, setEditingMessage] = useState<EmergencyActionMessage | null>(null);
+  const [isFormVisible, setFormVisible] = useState(false);
+
+  const handleCloseForm = useCallback(() => {
+    setEditingMessage(null);
+    setFormVisible(false);
+  }, []);
 
   const messagesQuery = useQuery({
     queryKey: QUERY_KEY,
@@ -48,7 +54,7 @@ export function EmergencyActionMessagesPage(): JSX.Element {
         return sortMessages([...filtered, created]);
       });
       pushToast({ type: 'success', message: `Created ${created.callsign}.` });
-      setEditingMessage(null);
+      handleCloseForm();
     },
     onError: (error, variables) => {
       pushToast({
@@ -76,7 +82,7 @@ export function EmergencyActionMessagesPage(): JSX.Element {
         );
       });
       pushToast({ type: 'success', message: `Updated ${updated.callsign}.` });
-      setEditingMessage(null);
+      handleCloseForm();
     },
     onError: (error, variables) => {
       pushToast({
@@ -94,7 +100,7 @@ export function EmergencyActionMessagesPage(): JSX.Element {
       );
       pushToast({ type: 'success', message: `Deleted ${callsign}.` });
       if (editingMessage?.callsign === callsign) {
-        setEditingMessage(null);
+        handleCloseForm();
       }
     },
     onError: (error, callsign) => {
@@ -118,6 +124,7 @@ export function EmergencyActionMessagesPage(): JSX.Element {
 
   const handleEdit = useCallback((message: EmergencyActionMessage) => {
     setEditingMessage(message);
+    setFormVisible(true);
   }, []);
 
   const handleDelete = useCallback(
@@ -132,6 +139,11 @@ export function EmergencyActionMessagesPage(): JSX.Element {
     [deleteMutation],
   );
 
+  const handleCreateNew = useCallback(() => {
+    setEditingMessage(null);
+    setFormVisible(true);
+  }, []);
+
   return (
     <section className="page-section">
       <header className="page-header">
@@ -145,14 +157,27 @@ export function EmergencyActionMessagesPage(): JSX.Element {
           isLoading={messagesQuery.isFetching && !messagesQuery.isFetched}
           onEdit={handleEdit}
           onDelete={handleDelete}
-        />
-        <MessageForm
-          initialValue={editingMessage}
-          onSubmit={handleSubmit}
-          onCancelEdit={() => setEditingMessage(null)}
-          isSubmitting={createMutation.isPending || updateMutation.isPending}
+          onCreateNew={handleCreateNew}
         />
       </div>
+      {isFormVisible && (
+        <div className="form-drawer" role="dialog" aria-modal="true" aria-label="Emergency action message form">
+          <button
+            type="button"
+            className="form-drawer__backdrop"
+            aria-label="Close"
+            onClick={handleCloseForm}
+          />
+          <div className="form-drawer__panel">
+            <MessageForm
+              initialValue={editingMessage}
+              onSubmit={handleSubmit}
+              onCancelEdit={handleCloseForm}
+              isSubmitting={createMutation.isPending || updateMutation.isPending}
+            />
+          </div>
+        </div>
+      )}
     </section>
   );
 }
diff --git a/examples/EmergencyManagement/webui/src/pages/EmergencyActionMessages/MessageForm.tsx b/examples/EmergencyManagement/webui/src/pages/EmergencyActionMessages/MessageForm.tsx
@@ -71,6 +71,7 @@ export function MessageForm({
   }, [initialValue]);
 
   const isEditing = useMemo(() => Boolean(initialValue?.callsign), [initialValue]);
+  const dismissLabel = isEditing ? 'Cancel edit' : 'Close';
 
   const statusFields: Array<keyof EmergencyActionMessage> = useMemo(
     () => [
@@ -130,14 +131,14 @@ export function MessageForm({
           <h3>{isEditing ? `Update ${state.values.callsign}` : 'Create new message'}</h3>
           <p>Capture an updated readiness snapshot for each callsign.</p>
         </div>
-        {isEditing && (
+        {onCancelEdit && (
           <button
             type="button"
             className="button button--secondary"
             onClick={onCancelEdit}
             disabled={isSubmitting}
           >
-            Cancel edit
+            {dismissLabel}
           </button>
         )}
       </header>

diff --git a/examples/EmergencyManagement/webui/src/pages/EmergencyActionMessages/MessagesTable.tsx b/examples/EmergencyManagement/webui/src/pages/EmergencyActionMessages/MessagesTable.tsx
@@ -7,13 +7,15 @@ export interface MessagesTableProps {
   isLoading: boolean;
   onEdit: (message: EmergencyActionMessage) => void;
   onDelete: (message: EmergencyActionMessage) => void;
+  onCreateNew: () => void;
 }
 
 export function MessagesTable({
   messages,
   isLoading,
   onEdit,
   onDelete,
+  onCreateNew,
 }: MessagesTableProps): JSX.Element {
   return (
     <div className="table-card">
@@ -99,6 +101,11 @@ export function MessagesTable({
           </table>
         )}
       </div>
+      <footer className="table-card__footer">
+        <button type="button" className="button" onClick={onCreateNew}>
+          New
+        </button>
+      </footer>
     </div>
   );
 }
diff --git a/...nt/webui/src/pages/EmergencyActionMessages/__tests__/EmergencyActionMessagesPage.test.tsx b/...nt/webui/src/pages/EmergencyActionMessages/__tests__/EmergencyActionMessagesPage.test.tsx
@@ -89,6 +89,7 @@ describe('EmergencyActionMessagesPage', () => {
     });
 
     const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'New' }));
 
     await user.type(screen.getByLabelText('Callsign'), 'Charlie-3');
     await user.type(screen.getByLabelText('Group name'), 'Charlie');
@@ -124,6 +125,7 @@ describe('EmergencyActionMessagesPage', () => {
     renderPage();
 
     const user = userEvent.setup();
+    await user.click(await screen.findByRole('button', { name: 'New' }));
     await user.click(await screen.findByRole('button', { name: 'Create message' }));
 
     expect(await screen.findByText('Callsign is required.')).toBeInTheDocument();

diff --git a/examples/EmergencyManagement/webui/src/pages/Events/EventForm.tsx b/examples/EmergencyManagement/webui/src/pages/Events/EventForm.tsx
@@ -166,6 +166,7 @@ export function EventForm({
   }, [initialValue]);
 
   const isEditing = useMemo(() => Boolean(initialValue), [initialValue]);
+  const dismissLabel = isEditing ? 'Cancel edit' : 'Close';
   const accessOptions = useMemo(() => {
     const unique = new Set<string>(DEFAULT_ACCESS_OPTIONS);
     if (initialValue?.access) {
@@ -283,14 +284,14 @@ export function EventForm({
           <h3>{isEditing ? `Update event ${state.uid}` : 'Log new event'}</h3>
           <p>Track incident reports, dispatches, and situational notes.</p>
         </div>
-        {isEditing && (
+        {onCancelEdit && (
           <button
             type="button"
             className="button button--secondary"
             onClick={onCancelEdit}
             disabled={isSubmitting}
           >
-            Cancel edit
+            {dismissLabel}
           </button>
         )}
       </header>

diff --git a/examples/EmergencyManagement/webui/src/pages/Events/EventsPage.tsx b/examples/EmergencyManagement/webui/src/pages/Events/EventsPage.tsx
@@ -21,6 +21,12 @@ export function EventsPage(): JSX.Element {
   const queryClient = useQueryClient();
   const { pushToast } = useToast();
   const [editingEvent, setEditingEvent] = useState<EventRecord | null>(null);
+  const [isFormVisible, setFormVisible] = useState(false);
+
+  const handleCloseForm = useCallback(() => {
+    setEditingEvent(null);
+    setFormVisible(false);
+  }, []);
 
   const eventsQuery = useQuery({
     queryKey: QUERY_KEY,
@@ -46,7 +52,7 @@ export function EventsPage(): JSX.Element {
         return [...filtered, created].sort((a, b) => a.uid - b.uid);
       });
       pushToast({ type: 'success', message: `Created event ${created.uid}.` });
-      setEditingEvent(null);
+      handleCloseForm();
     },
     onError: (error, variables) => {
       pushToast({
@@ -74,7 +80,7 @@ export function EventsPage(): JSX.Element {
           .sort((a, b) => a.uid - b.uid);
       });
       pushToast({ type: 'success', message: `Updated event ${updated.uid}.` });
-      setEditingEvent(null);
+      handleCloseForm();
     },
     onError: (error, variables) => {
       pushToast({
@@ -92,7 +98,7 @@ export function EventsPage(): JSX.Element {
       );
       pushToast({ type: 'success', message: `Deleted event ${uid}.` });
       if (editingEvent?.uid === Number(uid)) {
-        setEditingEvent(null);
+        handleCloseForm();
       }
     },
     onError: (error, uid) => {
@@ -116,6 +122,7 @@ export function EventsPage(): JSX.Element {
 
   const handleEdit = useCallback((event: EventRecord) => {
     setEditingEvent(event);
+    setFormVisible(true);
   }, []);
 
   const handleDelete = useCallback(
@@ -128,6 +135,11 @@ export function EventsPage(): JSX.Element {
     [deleteMutation],
   );
 
+  const handleCreateNew = useCallback(() => {
+    setEditingEvent(null);
+    setFormVisible(true);
+  }, []);
+
   return (
     <section className="page-section">
       <header className="page-header">
@@ -141,14 +153,27 @@ export function EventsPage(): JSX.Element {
           isLoading={eventsQuery.isFetching && !eventsQuery.isFetched}
           onEdit={handleEdit}
           onDelete={handleDelete}
-        />
-        <EventForm
-          initialValue={editingEvent}
-          onSubmit={handleSubmit}
-          onCancelEdit={() => setEditingEvent(null)}
-          isSubmitting={createMutation.isPending || updateMutation.isPending}
+          onCreateNew={handleCreateNew}
         />
       </div>
+      {isFormVisible && (
+        <div className="form-drawer" role="dialog" aria-modal="true" aria-label="Event form">
+          <button
+            type="button"
+            className="form-drawer__backdrop"
+            aria-label="Close"
+            onClick={handleCloseForm}
+          />
+          <div className="form-drawer__panel">
+            <EventForm
+              initialValue={editingEvent}
+              onSubmit={handleSubmit}
+              onCancelEdit={handleCloseForm}
+              isSubmitting={createMutation.isPending || updateMutation.isPending}
+            />
+          </div>
+        </div>
+      )}
     </section>
   );
 }
diff --git a/examples/EmergencyManagement/webui/src/pages/Events/EventsTable.tsx b/examples/EmergencyManagement/webui/src/pages/Events/EventsTable.tsx
@@ -5,6 +5,7 @@ export interface EventsTableProps {
   isLoading: boolean;
   onEdit: (event: EventRecord) => void;
   onDelete: (event: EventRecord) => void;
+  onCreateNew: () => void;
 }
 
 interface StatusEntry {
@@ -55,7 +56,13 @@ function renderDetail(detail: EventRecord['detail']): JSX.Element {
   );
 }
 
-export function EventsTable({ events, isLoading, onEdit, onDelete }: EventsTableProps): JSX.Element {
+export function EventsTable({
+  events,
+  isLoading,
+  onEdit,
+  onDelete,
+  onCreateNew,
+}: EventsTableProps): JSX.Element {
   return (
     <div className="table-card">
       <header className="table-card__header">
@@ -112,6 +119,11 @@ export function EventsTable({ events, isLoading, onEdit, onDelete }: EventsTable
           </table>
         )}
       </div>
+      <footer className="table-card__footer">
+        <button type="button" className="button" onClick={onCreateNew}>
+          New
+        </button>
+      </footer>
     </div>
   );
 }
diff --git a/examples/EmergencyManagement/webui/src/pages/Events/__tests__/EventsPage.test.tsx b/examples/EmergencyManagement/webui/src/pages/Events/__tests__/EventsPage.test.tsx
@@ -109,6 +109,7 @@ describe('EventsPage', () => {
     });
 
     const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'New' }));
     await user.type(screen.getByLabelText('UID'), '2');
     await user.type(screen.getByLabelText('Type'), 'New');
     await user.type(screen.getByLabelText('Start'), '2025-09-19T10:30');
@@ -182,6 +183,7 @@ describe('EventsPage', () => {
     renderPage();
 
     const user = userEvent.setup();
+    await user.click(await screen.findByRole('button', { name: 'New' }));
     await user.click(await screen.findByRole('button', { name: 'Create event' }));
 
     expect(await screen.findByText('UID must be a valid number.')).toBeInTheDocument();