WIP: migrate hooks for modal

apps/app/src/client/components/Navbar/GrowiNavbarBottom.tsx

@@ -4,8 +4,8 @@ import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
 import { useSearchModal } from '~/features/search/client/stores/search';
 import { useIsSearchPage } from '~/states/context';
 import { useCurrentPagePath } from '~/states/page';
+import { usePageCreateModal } from '~/states/ui/modal/page-create';
 import { useDrawerOpened } from '~/states/ui/sidebar';
-import { usePageCreateModal } from '~/stores/modal';
 
 import styles from './GrowiNavbarBottom.module.scss';
 

apps/app/src/client/components/PageCreateModal.tsx

@@ -21,7 +21,7 @@ import { useCreatePage } from '~/client/services/create-page/use-create-page';
 import { useToastrOnError } from '~/client/services/use-toastr-on-error';
 import { useCurrentUser } from '~/states/global';
 import { isSearchServiceReachableAtom } from '~/states/server-configurations';
-import { usePageCreateModal } from '~/stores/modal';
+import { usePageCreateModal } from '~/states/ui/modal/page-create';
 
 import PagePathAutoComplete from './PagePathAutoComplete';
 

apps/app/src/client/components/PageDeleteModal.tsx

@@ -16,7 +16,7 @@ import {
 import { apiPost } from '~/client/util/apiv1-client';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import type { IDeleteSinglePageApiv1Result, IDeleteManyPageApiv3Result } from '~/interfaces/page';
-import { usePageDeleteModal } from '~/stores/modal';
+import { usePageDeleteModal } from '~/states/ui/modal/page-delete';
 import { useSWRxPageInfoForList } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 

apps/app/src/client/components/Sidebar/PageCreateButton/PageCreateButton.tsx

@@ -5,7 +5,7 @@ import { Dropdown } from 'reactstrap';
 import { useCreateTemplatePage } from '~/client/services/create-page';
 import { useToastrOnError } from '~/client/services/use-toastr-on-error';
 import { useCurrentPagePath } from '~/states/page';
-import { usePageCreateModal } from '~/stores/modal';
+import { usePageCreateModal } from '~/states/ui/modal/page-create';
 
 import { CreateButton } from './CreateButton';
 import { DropendMenu } from './DropendMenu';

apps/app/src/states/ui/modal/page-create.ts

@@ -0,0 +1,38 @@
+import { atom, useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+// Type definitions
+export type CreateModalStatus = {
+  isOpened: boolean;
+  path?: string;
+};
+
+export type CreateModalUtils = {
+  open: (path?: string) => void;
+  close: () => void;
+};
+
+// Atom for page create modal
+const pageCreateModalAtom = atom<CreateModalStatus>({ isOpened: false });
+
+/**
+ * Hook for managing page create modal state
+ * Used for creating new pages with optional path specification
+ */
+export const usePageCreateModal = (): { data: CreateModalStatus } & CreateModalUtils => {
+  const [status, setStatus] = useAtom(pageCreateModalAtom);
+  
+  const open = useCallback((path?: string) => {
+    setStatus({ isOpened: true, path });
+  }, [setStatus]);
+  
+  const close = useCallback(() => {
+    setStatus({ isOpened: false });
+  }, [setStatus]);
+  
+  return {
+    data: status,
+    open,
+    close,
+  };
+};

apps/app/src/states/ui/modal/page-delete.ts

@@ -0,0 +1,50 @@
+import { atom, useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import type { IPageToDeleteWithMeta } from '@growi/core';
+
+import type { OnDeletedFunction } from '../../../interfaces/ui';
+
+// Type definitions
+export type IDeleteModalOption = {
+  onDeleted?: OnDeletedFunction;
+};
+
+export type DeleteModalStatus = {
+  isOpened: boolean;
+  pages?: IPageToDeleteWithMeta[];
+  opts?: IDeleteModalOption;
+};
+
+export type DeleteModalUtils = {
+  open: (pages?: IPageToDeleteWithMeta[], opts?: IDeleteModalOption) => void;
+  close: () => void;
+};
+
+// Atom for page delete modal
+const pageDeleteModalAtom = atom<DeleteModalStatus>({ 
+  isOpened: false,
+  pages: [],
+});
+
+/**
+ * Hook for managing page delete modal state
+ * Used for deleting single or multiple pages
+ */
+export const usePageDeleteModal = (): { data: DeleteModalStatus } & DeleteModalUtils => {
+  const [status, setStatus] = useAtom(pageDeleteModalAtom);
+  
+  const open = useCallback((pages?: IPageToDeleteWithMeta[], opts?: IDeleteModalOption) => {
+    setStatus({ isOpened: true, pages, opts });
+  }, [setStatus]);
+  
+  const close = useCallback(() => {
+    setStatus({ isOpened: false, pages: [] });
+  }, [setStatus]);
+  
+  return {
+    data: status,
+    open,
+    close,
+  };
+};