feat(boards): add quick app add menu item (#2681)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -25,9 +25,11 @@ import { useEditMode } from "@homarr/boards/edit-mode";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { AppSelectModal } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
+import { useItemActions } from "~/components/board/items/item-actions";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { useCategoryActions } from "~/components/board/sections/category/category-actions";
@@ -62,8 +64,10 @@ export const BoardContentHeaderActions = () => {
 const AddMenu = () => {
   const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
+  const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
   const { addCategoryToEnd } = useCategoryActions();
   const { addDynamicSection } = useDynamicSectionActions();
+  const { createItem } = useItemActions();
   const t = useI18n();
 
   const handleAddCategory = useCallback(
@@ -90,6 +94,17 @@ const AddMenu = () => {
     openItemSelectModal();
   }, [openItemSelectModal]);
 
+  const handleSelectApp = useCallback(() => {
+    openAppSelectModal({
+      onSelect: (appId) => {
+        createItem({
+          kind: "app",
+          options: { appId },
+        });
+      },
+    });
+  }, [openAppSelectModal, createItem]);
+
   return (
     <Menu position="bottom-end" withArrow>
       <Menu.Target>
@@ -101,10 +116,14 @@ const AddMenu = () => {
         </HeaderButton>
       </Menu.Target>
       <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
-        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectItem}>
+        <Menu.Item leftSection={<IconResize size={20} />} onClick={handleSelectItem}>
           {t("item.action.create")}
         </Menu.Item>
 
+        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectApp}>
+          {t("app.action.add")}
+        </Menu.Item>
+
         <Menu.Divider />
 
         <Menu.Item leftSection={<IconBoxAlignTop size={20} />} onClick={handleAddCategory}>

apps/nextjs/src/components/board/items/actions/create-item.ts

@@ -9,10 +9,11 @@ import { getSectionElements } from "./section-elements";
 
 export interface CreateItemInput {
   kind: WidgetKind;
+  options?: Record<string, unknown>;
 }
 
 export const createItemCallback =
-  ({ kind }: CreateItemInput) =>
+  ({ kind, options = {} }: CreateItemInput) =>
   (previous: Board): Board => {
     const firstSection = previous.sections
       .filter((section): section is EmptySection => section.kind === "empty")
@@ -24,7 +25,7 @@ export const createItemCallback =
     const widget = {
       id: createId(),
       kind,
-      options: {},
+      options,
       layouts: createItemLayouts(previous, firstSection),
       integrationIds: [],
       advancedOptions: {