docs: add trello import guide

apps/docs/imports/trello.mdx

@@ -0,0 +1,42 @@
+---
+title: Trello
+description: "Import your Trello boards to Kan."
+---
+
+## Getting your Trello API key and token
+
+Before you can import your Trello boards, you need to get your Trello API key and token. Follow these steps (only takes a couple of minutes):
+
+1. **Sign in to your Trello account**  
+   Go to [https://trello.com](https://trello.com) and log in with your Trello account.
+
+2. **Create a new integration**  
+   Visit [https://trello.com/power-ups/admin](https://trello.com/power-ups/admin). Click **Create new** and fill in the following details:
+
+   - **Name**: Choose a name for your integration (e.g. "Kan Import")
+   - **Workspace**: Select the workspace containing the boards you want to import
+   - **Email**: Enter your email address
+   - **Support email**: Enter your email address
+   - **Author**: Add your name
+
+3. **Get a Trello API Key**  
+   Now click **Generate a new API key** to create an API key.
+
+4. **Generate a Trello Token**  
+   On the same page (to the right of the API key), click the link to **generate a Token**. Approve the permissions and copy your token (make sure to save it somewhere secure like a password manager).
+
+## Importing your Trello boards
+
+Once you have your API key and token, importing your Trello boards is easy. Follow these steps:
+
+1. **Create a new import in Kan**  
+   Navigate to **[https://kan.bn/boards](https://kan.dev/boards)** and click **Import**.
+
+2. **Select Trello as the Import Source**  
+   Choose **Trello** from the list of import options and click **Select source**.
+
+3. **Enter Your Trello API Key and Token**  
+   Paste your API key and token into the provided fields and click **Fetch boards** (don't worry, we don't store your key or token).
+
+4. **Start the Import**  
+   Select the board you want to import and click **Import boards**. Once the import is complete, you'll see your boards in Kan.

apps/docs/mint.json

@@ -44,6 +44,10 @@
       "group": "Get Started",
       "pages": ["introduction"]
     },
+    {
+      "group": "Import",
+      "pages": ["imports/trello"]
+    },
     {
       "group": "API Documentation",
       "pages": ["api-reference/introduction"]

apps/web/src/views/boards/components/ImportBoardsForm.tsx

@@ -1,16 +1,20 @@
-import { Fragment, useState } from "react";
-import { api } from "~/utils/api";
+import Link from "next/link";
 import { Listbox, Transition } from "@headlessui/react";
-import { useForm, Controller } from "react-hook-form";
-
+import { Fragment, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { FaTrello } from "react-icons/fa";
-import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
-
-import { useModal } from "~/providers/modal";
-import { useWorkspace } from "~/providers/workspace";
+import {
+  HiChevronUpDown,
+  HiOutlineQuestionMarkCircle,
+  HiXMark,
+} from "react-icons/hi2";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
 
 interface TrelloFormValues {
   apiKey: string;
@@ -103,6 +107,7 @@ const ImportTrello: React.FC = () => {
   const [token, setToken] = useState("");
   const { closeModal } = useModal();
   const { workspace } = useWorkspace();
+  const { showPopup } = usePopup();
 
   const refetchBoards = () => utils.board.all.refetch();
 
@@ -120,6 +125,11 @@ const ImportTrello: React.FC = () => {
 
   const importBoards = api.import.trello.importBoards.useMutation({
     onSuccess: async () => {
+      showPopup({
+        header: "Import complete",
+        message: "Your boards have been imported.",
+        icon: "success",
+      });
       try {
         await refetchBoards();
         closeModal();
@@ -127,6 +137,13 @@ const ImportTrello: React.FC = () => {
         console.log(e);
       }
     },
+    onError: () => {
+      showPopup({
+        header: "Import failed",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
   });
 
   const { register, handleSubmit } = useForm<TrelloFormValues>({
@@ -143,7 +160,7 @@ const ImportTrello: React.FC = () => {
   const { register: registerBoards, handleSubmit: handleSubmitBoards } =
     useForm({
       defaultValues: Object.fromEntries(
-        boards?.data?.map((board) => [board.id, true]) ?? [],
+        boards.data?.map((board) => [board.id, true]) ?? [],
       ),
     });
 
@@ -154,11 +171,11 @@ const ImportTrello: React.FC = () => {
       boardIds,
       apiKey,
       token,
-      workspacePublicId: workspace?.publicId,
+      workspacePublicId: workspace.publicId,
     });
   };
 
-  if (boards?.data?.length)
+  if (boards.data?.length)
     return (
       <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
         <div className="h-[105px] overflow-scroll px-5">
@@ -220,9 +237,19 @@ export function ImportBoardsForm() {
   return (
     <div>
       <div className="flex w-full items-center justify-between px-5 pb-4 pt-5">
-        <h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
-          New import
-        </h2>
+        <div className="flex items-center">
+          <h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
+            New import
+          </h2>
+          <Link
+            href="https://docs.kan.bn/imports/trello"
+            target="_blank"
+            className="ml-2 text-neutral-500 hover:text-neutral-700 dark:text-dark-900 dark:hover:text-dark-700"
+          >
+            <HiOutlineQuestionMarkCircle className="h-4.5 w-4.5" />
+          </Link>
+        </div>
+
         <button
           className="rounded p-1 hover:bg-light-200 dark:hover:bg-dark-300"
           onClick={() => closeModal()}