feat: extend apiKey rate limit

apps/web/src/components/Dashboard.tsx

@@ -1,5 +1,4 @@
-import { useTheme } from "next-themes";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import {
   TbLayoutSidebarLeftCollapse,
   TbLayoutSidebarLeftExpand,
@@ -11,7 +10,10 @@ import { authClient } from "@kan/auth/client";
 
 import { useClickOutside } from "~/hooks/useClickOutside";
 import { useModal } from "~/providers/modal";
-import { useWorkspace, WorkspaceProvider } from "~/providers/workspace";
+import { useTheme } from "next-themes";
+import { WorkspaceProvider } from "~/providers/workspace";
+import FeedbackModal from "./FeedbackModal";
+import Modal from "./modal";
 import SideNavigation from "./SideNavigation";
 
 interface DashboardProps {
@@ -40,8 +42,7 @@ export default function Dashboard({
   hasRightPanel = false,
 }: DashboardProps) {
   const { theme } = useTheme();
-  const { openModal } = useModal();
-  const { availableWorkspaces, hasLoaded } = useWorkspace();
+  const { modalContentType } = useModal();
 
   const { data: session, isPending: sessionLoading } = authClient.useSession();
 
@@ -89,12 +90,6 @@ export default function Dashboard({
     }
   });
 
-  useEffect(() => {
-    if (hasLoaded && availableWorkspaces.length === 0) {
-      openModal("NEW_WORKSPACE", undefined, undefined, false);
-    }
-  }, [hasLoaded, availableWorkspaces.length, openModal]);
-
   const isDarkMode = theme === "dark";
 
   return (

apps/web/src/components/modal.tsx

@@ -8,7 +8,6 @@ interface Props {
   modalSize?: "sm" | "md" | "lg";
   positionFromTop?: "sm" | "md" | "lg";
   isVisible?: boolean;
-  closeOnClickOutside?: boolean;
 }
 
 const Modal: React.FC<Props> = ({
@@ -16,17 +15,10 @@ const Modal: React.FC<Props> = ({
   modalSize = "sm",
   positionFromTop = "md",
   isVisible,
-  closeOnClickOutside,
 }) => {
-  const {
-    isOpen,
-    closeModal,
-    closeOnClickOutside: modalCloseOnClickOutside,
-  } = useModal();
+  const { isOpen, closeModal } = useModal();
 
-  const shouldShow = isVisible ?? isOpen;
-  const shouldCloseOnClickOutside =
-    closeOnClickOutside ?? modalCloseOnClickOutside;
+  const shouldShow = isVisible !== undefined ? isVisible : isOpen;
 
   const modalSizeMap = {
     sm: "max-w-[400px]",
@@ -42,11 +34,7 @@ const Modal: React.FC<Props> = ({
 
   return (
     <Transition.Root show={shouldShow} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-50"
-        onClose={shouldCloseOnClickOutside ? closeModal : () => null}
-      >
+      <Dialog as="div" className="relative z-50" onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"

apps/web/src/providers/modal.tsx

@@ -4,7 +4,6 @@ interface ModalState {
   contentType: string;
   entityId?: string;
   entityLabel?: string;
-  closeOnClickOutside?: boolean;
 }
 
 interface Props {
@@ -17,7 +16,6 @@ interface ModalContextType {
     contentType: string,
     entityId?: string,
     entityLabel?: string,
-    closeOnClickOutside?: boolean,
   ) => void;
   closeModal: () => void;
   closeModals: (count: number) => void;
@@ -25,7 +23,6 @@ interface ModalContextType {
   modalContentType: string;
   entityId: string;
   entityLabel: string;
-  closeOnClickOutside: boolean;
   modalStates: Record<string, any>;
   setModalState: (modalType: string, state: any) => void;
   getModalState: (modalType: string) => any;
@@ -44,21 +41,10 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
   const modalContentType = currentModal?.contentType || "";
   const entityId = currentModal?.entityId || "";
   const entityLabel = currentModal?.entityLabel || "";
-  const closeOnClickOutside = currentModal?.closeOnClickOutside ?? true;
 
   const openModal = useCallback(
-    (
-      contentType: string,
-      entityId?: string,
-      entityLabel?: string,
-      closeOnClickOutside?: boolean,
-    ) => {
-      const newModal: ModalState = {
-        contentType,
-        entityId,
-        entityLabel,
-        closeOnClickOutside,
-      };
+    (contentType: string, entityId?: string, entityLabel?: string) => {
+      const newModal: ModalState = { contentType, entityId, entityLabel };
       setModalStack((prev) => [...prev, newModal]);
     },
     [],
@@ -121,7 +107,6 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
         modalContentType,
         entityId,
         entityLabel,
-        closeOnClickOutside,
         modalStates,
         setModalState,
         getModalState,

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

@@ -1,4 +1,5 @@
 import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
 import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
 
 import Button from "~/components/Button";
@@ -14,12 +15,18 @@ import { NewBoardForm } from "./components/NewBoardForm";
 
 export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
   const { openModal, modalContentType, isOpen } = useModal();
-  const { workspace } = useWorkspace();
+  const { availableWorkspaces, workspace, hasLoaded } = useWorkspace();
+
+  useEffect(() => {
+    if (hasLoaded && availableWorkspaces.length === 0) {
+      openModal("NEW_WORKSPACE");
+    }
+  }, [hasLoaded, availableWorkspaces.length, openModal]);
 
   return (
     <>
       <PageHead
-        title={t`${isTemplate ? "Templates" : "Boards"} | ${workspace.name || "Workspace"}`}
+        title={t`${isTemplate ? "Templates" : "Boards"} | ${workspace.name ?? "Workspace"}`}
       />
       <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
         <div className="relative z-10 mb-8 flex w-full items-center justify-between">