feat: Cmd+Enter to submit comments, Esc to close card

apps/web/src/components/Editor.tsx

@@ -440,6 +440,7 @@ export default function Editor({
   content,
   onChange,
   onBlur,
+  onModEnter,
   readOnly = false,
   workspaceMembers,
   enableYouTubeEmbed = true,
@@ -449,6 +450,7 @@ export default function Editor({
   content: string | null;
   onChange?: (value: string) => void;
   onBlur?: () => void;
+  onModEnter?: () => void;
   readOnly?: boolean;
   workspaceMembers: WorkspaceMember[];
   enableYouTubeEmbed?: boolean;
@@ -569,6 +571,18 @@ export default function Editor({
         attributes: {
           class: "outline-none focus:outline-none focus-visible:ring-0",
         },
+        handleKeyDown: (_view, event) => {
+          if (
+            onModEnter &&
+            event.key === "Enter" &&
+            (event.metaKey || event.ctrlKey)
+          ) {
+            event.preventDefault();
+            onModEnter();
+            return true;
+          }
+          return false;
+        },
       },
       editable: !readOnly,
       injectCSS: false,

apps/web/src/components/SettingsLayout.tsx

@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
 import {
   HiChevronDown,
   HiOutlineBanknotes,
+  HiOutlineBolt,
   HiOutlineCodeBracketSquare,
   HiOutlineRectangleGroup,
   HiOutlineShieldCheck,
@@ -64,6 +65,12 @@ export function SettingsLayout({ children, currentTab }: SettingsLayoutProps) {
       label: t`API`,
       condition: true,
     },
+    {
+      key: "webhooks",
+      icon: <HiOutlineBolt />,
+      label: t`Webhooks`,
+      condition: true,
+    },
     {
       key: "integrations",
       icon: <HiOutlineCodeBracketSquare />,

apps/web/src/env.ts

@@ -79,6 +79,9 @@ export const env = createEnv({
     S3_FORCE_PATH_STYLE: z.string().optional(),
     EMAIL_FROM: z.string().optional(),
     REDIS_URL: z.string().url().optional().or(z.literal("")),
+    // Webhook configuration
+    WEBHOOK_URL: z.string().url().optional(),
+    WEBHOOK_SECRET: z.string().optional(),
   },
 
   /**

apps/web/src/pages/settings/webhooks.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import WebhookSettings from "~/views/settings/WebhookSettings";
+
+const WebhookSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="webhooks">
+      <WebhookSettings />
+    </SettingsLayout>
+  );
+};
+
+WebhookSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default WebhookSettingsPage;

apps/web/src/views/card/components/NewCommentForm.tsx

@@ -63,6 +63,7 @@ const NewCommentForm = ({
       <Editor
         content={watch("comment")}
         onChange={(value) => setValue("comment", value)}
+        onModEnter={handleSubmit(onSubmit)}
         workspaceMembers={workspaceMembers}
         enableYouTubeEmbed={false}
         placeholder={t`Add comment... (type '/' to open commands or '@' to mention)`}

apps/web/src/views/card/index.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { IoChevronForwardSharp } from "react-icons/io5";
 import { HiXMark } from "react-icons/hi2";
@@ -18,6 +18,10 @@ import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
 import { EditYouTubeModal } from "~/components/YouTubeEmbed/EditYouTubeModal";
 import { usePermissions } from "~/hooks/usePermissions";
+import {
+  useKeyboardShortcut,
+  type KeyboardShortcut,
+} from "~/providers/keyboard-shortcuts";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
@@ -201,6 +205,25 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
   const workspaceMembers = board?.workspace.members;
   const boardId = board?.publicId;
 
+  const navigateToBoard = useCallback(() => {
+    if (!isOpen && boardId) {
+      const boardPath = isTemplate ? "templates" : "boards";
+      void router.push(`/${boardPath}/${boardId}`);
+    }
+  }, [isOpen, isTemplate, boardId, router]);
+
+  const escShortcut = useMemo(
+    (): KeyboardShortcut => ({
+      type: "PRESS",
+      stroke: { key: "Escape" },
+      action: navigateToBoard,
+      description: t`Close card`,
+      group: "NAVIGATION",
+    }),
+    [navigateToBoard],
+  );
+  useKeyboardShortcut(escShortcut);
+
   const editorWorkspaceMembers =
     workspaceMembers
       ?.filter((member) => member.email)

apps/web/src/views/settings/WebhookSettings.tsx

@@ -0,0 +1,78 @@
+import { t } from "@lingui/core/macro";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { useWorkspace } from "~/providers/workspace";
+import { DeleteWebhookConfirmation } from "./components/DeleteWebhookConfirmation";
+import { NewWebhookModal } from "./components/NewWebhookModal";
+import WebhookList from "./components/WebhookList";
+
+export default function WebhookSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const { workspace } = useWorkspace();
+
+  if (!workspace) {
+    return null;
+  }
+
+  return (
+    <>
+      <PageHead title={t`Settings | Webhooks`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Webhooks`}
+        </h2>
+        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+          {t`Configure webhooks to receive notifications when cards are created, updated, moved, or deleted.`}
+        </p>
+
+        <div className="mb-4 flex items-center justify-between">
+          <Button variant="primary" onClick={() => openModal("NEW_WEBHOOK")}>
+            {t`Add webhook`}
+          </Button>
+        </div>
+
+        <WebhookList workspacePublicId={workspace.publicId} />
+      </div>
+
+      {/* Webhook-specific modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_WEBHOOK"}
+      >
+        <NewWebhookModal workspacePublicId={workspace.publicId} />
+      </Modal>
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "EDIT_WEBHOOK"}
+      >
+        <NewWebhookModal workspacePublicId={workspace.publicId} isEdit />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "DELETE_WEBHOOK"}
+      >
+        <DeleteWebhookConfirmation workspacePublicId={workspace.publicId} />
+      </Modal>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

apps/web/src/views/settings/components/DeleteWebhookConfirmation.tsx

@@ -0,0 +1,78 @@
+import { t } from "@lingui/core/macro";
+import { HiXMark } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface DeleteWebhookConfirmationProps {
+  workspacePublicId: string;
+}
+
+export function DeleteWebhookConfirmation({
+  workspacePublicId,
+}: DeleteWebhookConfirmationProps) {
+  const { closeModal, entityId: webhookPublicId, entityLabel: webhookName } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const deleteWebhookMutation = api.webhook.delete.useMutation({
+    onSuccess: () => {
+      void utils.webhook.list.invalidate({ workspacePublicId });
+      showPopup({ message: t`Webhook deleted successfully`, type: "success" });
+      closeModal();
+    },
+    onError: (error) => {
+      showPopup({
+        message: error.message || t`Failed to delete webhook`,
+        type: "error",
+      });
+    },
+  });
+
+  const handleDelete = () => {
+    if (!webhookPublicId) return;
+    deleteWebhookMutation.mutate({
+      workspacePublicId,
+      webhookPublicId: webhookPublicId as string,
+    });
+  };
+
+  return (
+    <div>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+          <h2 className="text-sm font-bold">{t`Delete webhook`}</h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+
+        <p className="text-sm text-neutral-500 dark:text-dark-900">
+          {t`Are you sure you want to delete the webhook "${webhookName}"? This action cannot be undone.`}
+        </p>
+      </div>
+
+      <div className="mt-8 flex items-center justify-end gap-3 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <Button variant="secondary" onClick={() => closeModal()}>
+          {t`Cancel`}
+        </Button>
+        <Button
+          variant="danger"
+          onClick={handleDelete}
+          isLoading={deleteWebhookMutation.isPending}
+        >
+          {t`Delete`}
+        </Button>
+      </div>
+    </div>
+  );
+}