refactor

apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode, type JSX } from 'react';
 
-import { useDrawerOpened } from '~/states/ui';
+import { useDrawerOpened } from '~/states/ui/sidebar';
 
 import styles from './DrawerToggler.module.scss';
 

apps/app/src/client/components/Me/UISettings.tsx

@@ -5,7 +5,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 import { updateUserUISettings } from '~/client/services/user-ui-settings';
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { usePreferCollapsedMode, useSidebarMode } from '~/states/ui';
+import { usePreferCollapsedMode, useSidebarMode } from '~/states/ui/sidebar';
 import { useCollapsedContentsOpened } from '~/stores/ui';
 
 import styles from './UISettings.module.scss';

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

@@ -2,7 +2,7 @@ import React, { useCallback, type JSX } from 'react';
 
 import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
 import { useSearchModal } from '~/features/search/client/stores/search';
-import { useDrawerOpened } from '~/states/ui';
+import { useDrawerOpened } from '~/states/ui/sidebar';
 import { useIsSearchPage } from '~/stores-universal/context';
 import { usePageCreateModal } from '~/stores/modal';
 import { useCurrentPagePath } from '~/stores/page';

apps/app/src/client/components/PageEditor/EditorNavbarBottom.tsx

@@ -2,7 +2,7 @@ import type { JSX } from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { useDrawerOpened } from '~/states/ui';
+import { useDrawerOpened } from '~/states/ui/sidebar';
 
 import styles from './EditorNavbarBottom.module.scss';
 

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

@@ -7,7 +7,7 @@ import { pagePathUtils } from '@growi/core/dist/utils';
 import Sticky from 'react-stickynode';
 
 import LinkedPagePath from '~/models/linked-page-path';
-import { useSidebarMode } from '~/states/ui';
+import { useSidebarMode } from '~/states/ui/sidebar';
 import {
   usePageControlsX, useCurrentProductNavWidth,
 } from '~/stores/ui';

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

@@ -16,12 +16,12 @@ import {
   useSidebarScrollerRef,
   useIsDeviceLargerThanMd,
 } from '~/stores/ui';
+import { useDeviceLargerThanXl } from '~/states/ui/device';
 import {
   useDrawerOpened,
   usePreferCollapsedMode,
   useSidebarMode,
-  useDeviceLargerThanXl,
-} from '~/states/ui';
+} from '~/states/ui/sidebar';
 
 import { DrawerToggler } from '../Common/DrawerToggler';
 

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

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react';
 
 import { AiAssistant } from '~/features/openai/client/components/AiAssistant/Sidebar/AiAssistant';
 import { SidebarContentsType } from '~/interfaces/ui';
-import { useSidebarMode } from '~/states/ui';
+import { useSidebarMode } from '~/states/ui/sidebar';
 import { useCollapsedContentsOpened, useCurrentSidebarContents } from '~/stores/ui';
 
 

apps/app/src/client/components/Sidebar/SidebarHead/ToggleCollapseButton.tsx

@@ -4,7 +4,7 @@ import {
 
 import {
   useDrawerOpened, usePreferCollapsedMode, useSidebarMode,
-} from '~/states/ui';
+} from '~/states/ui/sidebar';
 import {
   useCollapsedContentsOpened,
 } from '~/stores/ui';

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.tsx

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useIsAiEnabled } from '~/stores-universal/context';
-import { useSidebarMode } from '~/states/ui';
+import { useSidebarMode } from '~/states/ui/sidebar';
 
 import { PrimaryItem } from './PrimaryItem';
 

apps/app/src/pages/utils/commons.ts

@@ -14,7 +14,7 @@ import type { IUserUISettings } from '~/interfaces/user-ui-settings';
 import type { PageDocument } from '~/server/models/page';
 import type { UserUISettingsDocument } from '~/server/models/user-ui-settings';
 import { detectLocaleFromBrowserAcceptLanguage } from '~/server/util/locale-utils';
-import { usePreferCollapsedModeInitializer } from '~/states/ui';
+import { usePreferCollapsedModeInitializer } from '~/states/ui/sidebar';
 import { useCurrentProductNavWidth, useCurrentSidebarContents } from '~/stores/ui';
 import { getGrowiVersion } from '~/utils/growi-version';
 

apps/app/src/states/ui/device.ts

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+import { isClient } from '@growi/core/dist/utils';
+import { Breakpoint } from '@growi/ui/dist/interfaces';
+import { addBreakpointListener, cleanupBreakpointListener } from '@growi/ui/dist/utils';
+import { atom, useAtom } from 'jotai';
+
+
+// Device state atoms
+export const isDeviceLargerThanXlAtom = atom(false);
+
+export const useDeviceLargerThanXl = () => {
+  const [isLargerThanXl, setIsLargerThanXl] = useAtom(isDeviceLargerThanXlAtom);
+
+  useEffect(() => {
+    if (isClient()) {
+      const xlOrAboveHandler = function(this: MediaQueryList): void {
+        // lg -> xl: matches will be true
+        // xl -> lg: matches will be false
+        setIsLargerThanXl(this.matches);
+      };
+      const mql = addBreakpointListener(Breakpoint.XL, xlOrAboveHandler);
+
+      // initialize
+      setIsLargerThanXl(mql.matches);
+
+      return () => {
+        cleanupBreakpointListener(mql, xlOrAboveHandler);
+      };
+    }
+    return undefined;
+  }, [setIsLargerThanXl]);
+
+  return [isLargerThanXl, setIsLargerThanXl] as const;
+};

apps/app/src/states/ui/editor.ts

@@ -0,0 +1,9 @@
+import { atom, useAtom } from 'jotai';
+
+import { EditorMode } from '~/stores-universal/ui';
+
+export const editorModeAtom = atom<EditorMode>(EditorMode.View);
+
+export const useEditorModeState = () => {
+  return useAtom(editorModeAtom);
+};

apps/app/src/states/ui/index.ts → apps/app/src/states/ui/sidebar.ts

@@ -1,24 +1,23 @@
 import { useCallback, useEffect } from 'react';
 
-
-import { isClient } from '@growi/core/dist/utils';
-import { Breakpoint } from '@growi/ui/dist/interfaces';
-import { addBreakpointListener, cleanupBreakpointListener } from '@growi/ui/dist/utils';
 import { atom, useAtom } from 'jotai';
 
 import { scheduleToPut } from '~/client/services/user-ui-settings';
 import { SidebarMode } from '~/interfaces/ui';
 import { EditorMode } from '~/stores-universal/ui';
 
+import { isDeviceLargerThanXlAtom } from './device';
+import { editorModeAtom } from './editor';
+
 
-const isDrawerOpenedAtom = atom<boolean>(false);
+const isDrawerOpenedAtom = atom(false);
 
 export const useDrawerOpened = () => {
   return useAtom(isDrawerOpenedAtom);
 };
 
 // Avoid local storage to prevent conflicts with DB settings
-const preferCollapsedModeAtom = atom<boolean>(false);
+const preferCollapsedModeAtom = atom(false);
 
 // Custom hook for managing sidebar state
 export const usePreferCollapsedMode = () => {
@@ -34,7 +33,7 @@ export const usePreferCollapsedMode = () => {
 };
 
 // Initialize state from server-side props only once per session
-const preferCollapsedModeInitializedAtom = atom<boolean>(false);
+const preferCollapsedModeInitializedAtom = atom(false);
 
 export const usePreferCollapsedModeInitializer = (initialData: boolean): void => {
   const [isInitialized, setIsInitialized] = useAtom(preferCollapsedModeInitializedAtom);
@@ -49,42 +48,6 @@ export const usePreferCollapsedModeInitializer = (initialData: boolean): void =>
 };
 
 
-// Device state atoms
-const isDeviceLargerThanXlAtom = atom<boolean>(false);
-
-export const useDeviceLargerThanXl = () => {
-  const [isLargerThanXl, setIsLargerThanXl] = useAtom(isDeviceLargerThanXlAtom);
-
-  useEffect(() => {
-    if (isClient()) {
-      const xlOrAboveHandler = function(this: MediaQueryList): void {
-        // lg -> xl: matches will be true
-        // xl -> lg: matches will be false
-        setIsLargerThanXl(this.matches);
-      };
-      const mql = addBreakpointListener(Breakpoint.XL, xlOrAboveHandler);
-
-      // initialize
-      setIsLargerThanXl(mql.matches);
-
-      return () => {
-        cleanupBreakpointListener(mql, xlOrAboveHandler);
-      };
-    }
-    return undefined;
-  }, [setIsLargerThanXl]);
-
-  return [isLargerThanXl, setIsLargerThanXl] as const;
-};
-
-
-const editorModeAtom = atom<EditorMode>(EditorMode.View);
-
-export const useEditorModeState = () => {
-  return useAtom(editorModeAtom);
-};
-
-
 // Sidebar mode atom
 const sidebarModeAtom = atom(
   (get) => {