Allow creating and deleting new columns

Author: exAspArk

backend/src/entities/board-card.ts

@@ -47,7 +47,7 @@ export class BoardCard extends BaseEntity {
   assignedBoardMember?: BoardMember;
 
   @OneToOne({ mappedBy: (emailDraft: EmailDraft) => emailDraft.boardCard, nullable: true })
-  emailDraft?: EmailDraft;
+  emailDraft?: EmailDraft; // Email draft are deleted if state is not INBOX
   @OneToMany({ mappedBy: (comment: Comment) => comment.boardCard })
   comments = new Collection<Comment>(this);
   @OneToMany({ mappedBy: (readPosition: BoardCardReadPosition) => readPosition.boardCard })
@@ -130,33 +130,27 @@ export class BoardCard extends BaseEntity {
 
   update({
     externalThreadId,
-    state,
     snippet,
     participantsAsc,
     lastEventAt,
     hasAttachments,
     emailMessageCount,
-    movedToTrashAt,
     participantUserIds,
   }: {
     externalThreadId: string;
-    state: State;
     snippet: string;
     participantsAsc: Participant[];
     lastEventAt: Date;
     hasAttachments: boolean;
     emailMessageCount: number;
-    movedToTrashAt?: Date;
     participantUserIds?: string[];
   }) {
     this.externalThreadId = externalThreadId;
-    this.state = state;
     this.snippet = snippet.slice(0, MAX_SNIPPET_LENGTH);
     this.participantsAsc = participantsAsc.map((p) => ({ ...p, email: p.email.toLowerCase() }));
     this.lastEventAt = lastEventAt;
     this.hasAttachments = hasAttachments;
     this.emailMessageCount = emailMessageCount;
-    this.movedToTrashAt = movedToTrashAt;
     this.participantUserIds = participantUserIds;
     this.validate();
   }
@@ -173,7 +167,7 @@ export class BoardCard extends BaseEntity {
   setState(state: State) {
     this.state = state;
     if (state === State.TRASH) {
-      this.movedToTrashAt = new Date();
+      if (!this.movedToTrashAt) this.movedToTrashAt = new Date();
     } else if (this.movedToTrashAt) {
       this.movedToTrashAt = undefined;
     }

backend/src/services/board-card.service.ts

@@ -402,22 +402,22 @@ export class BoardCardService {
       ].filter((id): id is string => !!id),
     );
 
+    boardCard.setState(state);
+
     boardCard.update({
-      state,
       snippet: lastEmailMessage.snippet,
       externalThreadId: lastEmailMessage.externalThreadId,
       participantsAsc: BoardCardService.participantsAsc({ emailMessagesDesc }),
       lastEventAt,
       hasAttachments: emailMessagesDesc.some((msg) => msg.gmailAttachments.length > 0),
       emailMessageCount: emailMessagesDesc.length,
-      movedToTrashAt: state === State.TRASH ? boardCard.movedToTrashAt || new Date() : undefined,
       participantUserIds: participantUserIds.length > 0 ? participantUserIds : undefined,
     });
 
     return boardCard;
   }
 
-  static async delete(boardCard: Loaded<BoardCard>) {
+  static async deleteAfterDeletingEmailDrafts(boardCard: Loaded<BoardCard>) {
     await orm.em.transactional(async (em) => {
       await em.nativeDelete(Comment, { boardCard });
       await em.nativeDelete(BoardCardReadPosition, { boardCard });

backend/src/services/board-column.service.ts

@@ -1,8 +1,14 @@
 import type { Populate } from '@mikro-orm/postgresql';
 
 import type { Board } from '@/entities/board';
+import { BoardCard } from '@/entities/board-card';
+import { BoardCardReadPosition } from '@/entities/board-card-read-position';
 import { BoardColumn } from '@/entities/board-column';
+import { Comment } from '@/entities/comment';
+import { EmailMessage } from '@/entities/email-message';
+import { GmailAttachment } from '@/entities/gmail-attachment';
 import { orm } from '@/utils/orm';
+import { BoardCardState } from '@/utils/shared';
 
 export class BoardColumnService {
   static async findById<Hint extends string = never>(
@@ -12,6 +18,42 @@ export class BoardColumnService {
     return orm.em.findOneOrFail(BoardColumn, { id: boardColumnId, board: { id: board.id } }, { populate });
   }
 
+  static async create(board: Board, { name }: { name: string }) {
+    const allColumns = await orm.em.find(BoardColumn, { board: { id: board.id } });
+    const position = allColumns.length;
+
+    const boardColumn = new BoardColumn({ board, name, description: name, position });
+    orm.em.persist(boardColumn);
+    await orm.em.flush();
+
+    return boardColumn;
+  }
+
+  static async delete(board: Board, { boardColumnId }: { boardColumnId: string }) {
+    const boardColumn = await BoardColumnService.findById(boardColumnId, { board, populate: ['boardCards'] });
+    const { boardCards } = boardColumn;
+
+    const inboxBoardCards = boardCards.filter((card) => card.state === BoardCardState.INBOX);
+    if (inboxBoardCards.length > 0) {
+      throw new Error('Cannot delete column with inbox board cards');
+    }
+
+    await orm.em.transactional(async (em) => {
+      const emailMessagesCondition = {
+        externalThreadId: { $in: boardCards.map((c) => c.externalThreadId).filter((id): id is string => !!id) },
+      };
+      await em.nativeDelete(GmailAttachment, { emailMessage: emailMessagesCondition });
+      await em.nativeDelete(EmailMessage, emailMessagesCondition);
+
+      const boardCardsCondition = { id: { $in: boardCards.map((c) => c.id) } };
+      await em.nativeDelete(Comment, { boardCard: boardCardsCondition });
+      await em.nativeDelete(BoardCardReadPosition, { boardCard: boardCardsCondition });
+      await em.nativeDelete(BoardCard, boardCardsCondition);
+
+      await em.nativeDelete(BoardColumn, { id: boardColumn.id });
+    });
+  }
+
   static async setName<Hint extends string = never>(
     board: Board,
     {

backend/src/services/email-draft.service.ts

@@ -118,7 +118,7 @@ export class EmailDraftService {
     await FileAttachmentService.deleteAllForDraft(emailDraft);
 
     if (boardCard.noMessages) {
-      await BoardCardService.delete(boardCard);
+      await BoardCardService.deleteAfterDeletingEmailDrafts(boardCard);
     }
 
     await orm.em.flush();

backend/src/services/email-message.service.ts

@@ -12,14 +12,15 @@ import { BoardAccountService } from '@/services/board-account.service';
 import { BoardCardService } from '@/services/board-card.service';
 import { BoardMemberService } from '@/services/board-member.service';
 import { DomainService } from '@/services/domain.service';
+import { EmailDraftService } from '@/services/email-draft.service';
 import { GmailAccountService } from '@/services/gmail-account.service';
 import { htmlToText } from '@/utils/email';
 import { ENV } from '@/utils/env';
 import { reportError } from '@/utils/error-tracking';
 import { GmailApi, LABEL } from '@/utils/gmail-api';
 import { groupBy, mapBy, presence, unique } from '@/utils/lists';
 import { orm } from '@/utils/orm';
-import { FALLBACK_SUBJECT, type Participant } from '@/utils/shared';
+import { BoardCardState, FALLBACK_SUBJECT, type Participant } from '@/utils/shared';
 import { renderTemplate } from '@/utils/strings';
 import { sleep } from '@/utils/time';
 import { BoardService } from './board.service';
@@ -486,7 +487,13 @@ export class EmailMessageService {
         ...(await BoardCardService.findCardsByExternalThreadIds({
           gmailAccount,
           externalThreadIds: affectedExternalThreadIds,
-          populate: ['domain', 'boardCardReadPositions', 'boardColumn.board.boardMembers', 'comments', 'emailDraft'],
+          populate: [
+            'domain',
+            'boardCardReadPositions',
+            'boardColumn.board.boardMembers',
+            'comments',
+            'emailDraft.fileAttachments',
+          ],
         })),
       ],
       (boardCard) => boardCard.externalThreadId!,
@@ -624,6 +631,7 @@ export class EmailMessageService {
 
     // Handle label changes (read / unread / trash / spam): update EmailMessages, update BoardCards
     console.log(`[GMAIL] Processing label changes for ${gmailAccount.email}...`);
+    const nonInboxBoardCards = [];
     for (const labelChange of labelChanges) {
       const { externalMessageId } = labelChange;
       const emailMessage = affectedEmailMessageByExternalId[externalMessageId];
@@ -645,6 +653,10 @@ export class EmailMessageService {
 
       let boardCard = boardCardByThreadId[threadId]!;
       boardCard = BoardCardService.rebuildFromEmailMessages({ boardCard, emailMessagesDesc }) as typeof boardCard;
+      if (boardCard.state !== BoardCardState.INBOX) {
+        nonInboxBoardCards.push(boardCard);
+      }
+
       orm.em.persist(boardCard);
       boardCardByThreadId[threadId] = boardCard;
     }
@@ -655,6 +667,10 @@ export class EmailMessageService {
     }
 
     await orm.em.flush();
+
+    for (const boardCard of nonInboxBoardCards) {
+      await EmailDraftService.delete(boardCard);
+    }
   }
 
   private static boardAccountToSyncWhenNoBoardCard({

backend/src/trpc-routes/board-column.routes.ts

@@ -7,6 +7,19 @@ import { authAsBoardMember, publicProcedure } from '@/trpc-config';
 
 export const BOARD_COLUMN_ROUTES = {
   boardColumn: {
+    create: publicProcedure
+      .input(z.object({ boardId: z.uuid(), name: z.string().min(1) }))
+      .mutation(async ({ input, ctx }) => {
+        const { board } = authAsBoardMember({ ctx, input });
+        const boardColumn = await BoardColumnService.create(board, { name: input.name });
+        return { boardColumn: BoardColumn.toJson(boardColumn) };
+      }),
+    delete: publicProcedure
+      .input(z.object({ boardId: z.uuid(), boardColumnId: z.uuid() }))
+      .mutation(async ({ input, ctx }) => {
+        const { board } = authAsBoardMember({ ctx, input });
+        await BoardColumnService.delete(board, { boardColumnId: input.boardColumnId });
+      }),
     setName: publicProcedure
       .input(z.object({ boardId: z.uuid(), boardColumnId: z.uuid(), name: z.string().min(1) }))
       .mutation(async ({ input, ctx }) => {

frontend/src/components/board/board-column.tsx

@@ -2,6 +2,7 @@ import { useDroppable } from '@dnd-kit/core';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useMutation } from '@tanstack/react-query';
+import { Ellipsis } from 'lucide-react';
 import { useState } from 'react';
 import {
   BoardCard,
@@ -10,13 +11,22 @@ import {
   DRAG_TYPE as DRAG_TYPE_CARD,
 } from '@/components/board/board-card';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { useOptimisticMutation } from '@/hooks/use-optimistic-mutation';
+import { useOptimisticMutationWithUndo } from '@/hooks/use-optimistic-mutation-with-undo';
 import { useRouteContext } from '@/hooks/use-route-context';
 import {
   type Board,
   type BoardColumn as BoardColumnType,
   type BoardMember,
+  removeBoardColumnData,
   renameBoardColumnData,
 } from '@/query-helpers/board';
 import type { BoardCard as BoardCardType } from '@/query-helpers/board-cards';
@@ -27,12 +37,14 @@ export const DRAG_TYPE = 'board-column';
 export const BoardColumn = ({
   board,
   boardColumn,
+  boardCards,
   unreadBoardCardCount,
   children,
   isDraggingColumn,
 }: {
   board: Board;
   boardColumn: BoardColumnType;
+  boardCards: BoardCardType[];
   unreadBoardCardCount: number;
   children: React.ReactNode;
   isDraggingColumn: boolean;
@@ -50,15 +62,31 @@ export const BoardColumn = ({
   const [isEditing, setIsEditing] = useState(false);
   const [editedName, setEditedName] = useState(boardColumn.name);
 
+  const boardQueryKey = trpc.board.get.queryKey({ boardId: board.id });
+
   const optimisticallySetName = useOptimisticMutation({
     queryClient,
-    queryKey: trpc.board.get.queryKey({ boardId: board.id }),
+    queryKey: boardQueryKey,
     onExecute: ({ name }) =>
       renameBoardColumnData({ trpc, queryClient, params: { boardId: board.id, boardColumnId: boardColumn.id, name } }),
     errorToast: 'Failed to rename column. Please try again.',
     mutation: useMutation(trpc.boardColumn.setName.mutationOptions()),
   });
 
+  const createMutation = useMutation(trpc.boardColumn.create.mutationOptions());
+  const optimisticallyDeleteColumn = useOptimisticMutationWithUndo({
+    queryClient,
+    queryKey: boardQueryKey,
+    onExecute: (params) => removeBoardColumnData({ trpc, queryClient, params }),
+    successToast: 'Column deleted',
+    errorToast: 'Failed to delete column. Please try again.',
+    mutation: useMutation(trpc.boardColumn.delete.mutationOptions()),
+    undoMutationConfig: () => ({
+      mutation: createMutation,
+      params: { boardId: board.id, name: boardColumn.name },
+    }),
+  });
+
   const handleNameClick = () => {
     setIsEditing(true);
     setEditedName(boardColumn.name);
@@ -81,6 +109,14 @@ export const BoardColumn = ({
     }
   };
 
+  const hasBoardCards = boardCards.length > 0;
+
+  const handleDelete = () => {
+    if (!hasBoardCards) {
+      optimisticallyDeleteColumn({ boardId: board.id, boardColumnId: boardColumn.id });
+    }
+  };
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -113,14 +149,30 @@ export const BoardColumn = ({
             autoFocus
           />
         ) : (
-          <h2 className="text-sm font-semibold cursor-pointer hover:text-primary w-full" onClick={handleNameClick}>
-            {editedName}
-          </h2>
-        )}
-        {unreadBoardCardCount > 0 && (
-          <Badge variant="default" size="sm">
-            {unreadBoardCardCount}
-          </Badge>
+          <>
+            <div className="flex items-center gap-2 flex-1">
+              <h2 className="text-sm font-semibold cursor-pointer hover:text-primary" onClick={handleNameClick}>
+                {editedName}
+              </h2>
+              {unreadBoardCardCount > 0 && (
+                <Badge variant="default" size="sm">
+                  {unreadBoardCardCount}
+                </Badge>
+              )}
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                <Button variant="ghost" size="icon-sm" className="size-5 p-0 focus-visible:ring-0">
+                  <Ellipsis className="size-4 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleDelete} disabled={hasBoardCards} className="text-sm">
+                  Delete column
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
         )}
       </div>
       <div