Merge branch 'support/use-jotai-migration' into support/use-jotai

.serena/memories/apps-app-jotai-migration-progress.md

@@ -38,6 +38,8 @@ states/
 │   ├── editor/                     # エディター状態 ✅
 │   ├── device.ts                   # デバイス状態 ✅
 │   ├── page.ts                     # ページUI状態 ✅
+│   ├── toc.ts                      # TOC状態 ✅
+│   ├── untitled-page.ts            # 無題ページ状態 ✅ NEW!
 │   └── modal/                      # 個別モーダルファイル ✅
 │       ├── page-create.ts          # ページ作成モーダル ✅
 │       ├── page-delete.ts          # ページ削除モーダル ✅
@@ -104,23 +106,124 @@ export const use[Modal]Actions = (): [Modal]Actions => {
 };
 ```
 
+#### デバイス状態パターン（Jotaiベース）
+```typescript
+// 例: useDeviceLargerThanMd
+export const isDeviceLargerThanMdAtom = atom(false);
+
+export const useDeviceLargerThanMd = () => {
+  const [isLargerThanMd, setIsLargerThanMd] = useAtom(isDeviceLargerThanMdAtom);
+
+  useEffect(() => {
+    if (isClient()) {
+      const mdOrAboveHandler = function (this: MediaQueryList): void {
+        setIsLargerThanMd(this.matches);
+      };
+      const mql = addBreakpointListener(Breakpoint.MD, mdOrAboveHandler);
+      setIsLargerThanMd(mql.matches); // initialize
+      return () => {
+        cleanupBreakpointListener(mql, mdOrAboveHandler);
+      };
+    }
+    return undefined;
+  }, [setIsLargerThanMd]);
+
+  return [isLargerThanMd, setIsLargerThanMd] as const;
+};
+```
+
+#### RefObjectパターン（DOM要素管理）
+```typescript
+// Internal atom for RefObject storage
+const tocNodeRefAtom = atom<RefObject<HtmlElementNode> | null>(null);
+
+// Public derived atom for direct access
+export const tocNodeAtom = atom((get) => {
+  const tocNodeRef = get(tocNodeRefAtom);
+  return tocNodeRef?.current ?? null;
+});
+
+// Hook for setting with RefObject wrapping
+export const useSetTocNode = () => {
+  const setTocNodeRef = useSetAtom(tocNodeRefAtom);
+
+  const setTocNode = useCallback((newNode: HtmlElementNode) => {
+    const nodeRef: RefObject<HtmlElementNode> = { current: newNode };
+    setTocNodeRef(nodeRef);
+  }, [setTocNodeRef]);
+
+  return setTocNode;
+};
+```
+
+#### パフォーマンス最適化Dynamic Import パターン
+```typescript
+// Cache for dynamic import
+let generateTocOptionsCache: typeof generateTocOptions | null = null;
+
+export const useTocOptions = () => {
+  // ... dependencies ...
+  
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!generateTocOptionsCache) {
+          const { generateTocOptions } = await import('~/client/services/renderer/renderer');
+          generateTocOptionsCache = generateTocOptions;
+        }
+        
+        const data = generateTocOptionsCache(config, tocNode);
+        setState({ data, isLoading: false, error: undefined });
+      } catch (err) {
+        setState({ data: undefined, isLoading: false, error: err instanceof Error ? err : new Error('Failed') });
+      }
+    })();
+  }, [dependencies]);
+};
+```
+
+#### シンプルなBoolean状態パターン（NEW! 2025-09-11追加）
+```typescript
+// Atom定義
+const isUntitledPageAtom = atom<boolean>(false);
+
+// 読み取り専用フック
+export const useIsUntitledPage = (): boolean => {
+  return useAtomValue(isUntitledPageAtom);
+};
+
+// セッター専用フック（シンプル）
+export const useSetIsUntitledPage = () => {
+  return useSetAtom(isUntitledPageAtom);
+};
+```
+
 #### 使用パターン
 - **ステータスのみ必要**: `use[Modal]Status()`
 - **アクションのみ必要**: `use[Modal]Actions()`
 - **両方必要**: 2つのフックを併用
+- **デバイス状態**: `const [isLargerThanMd] = useDeviceLargerThanMd()`
+- **TOC状態**: `const tocNode = useTocNode()`, `const setTocNode = useSetTocNode()`
+- **TOCオプション**: `const { data, isLoading, error } = useTocOptions()`
+- **無題ページ状態**: `const isUntitled = useIsUntitledPage()`, `const setIsUntitled = useSetIsUntitledPage()`
 
 #### 重要事項
 - **後方互換フックは不要**: 移行完了後は即座に削除
 - **型の正しいインポート**: 元ファイルのimport文を参考にする
 - **フック分離のメリット**: 不要なリレンダリング防止、参照安定化
+- **RefObjectパターン**: mutableなDOM要素の管理に使用
+- **Dynamic Import**: 重いライブラリの遅延ロードでパフォーマンス最適化
+- **シンプルパターン**: SWR後方互換性が不要な場合のシンプルな実装
 
 ## ✅ 移行完了済み状態
 
 ### UI関連状態（完了）
 - ✅ **サイドバー状態**: `useDrawerOpened`, `useSetPreferCollapsedMode`, `useSidebarMode`, `useCurrentSidebarContents`, `useCollapsedContentsOpened`, `useCurrentProductNavWidth`
-- ✅ **デバイス状態**: `useDeviceLargerThanXl`
+- ✅ **デバイス状態**: `useDeviceLargerThanXl`, `useDeviceLargerThanLg`, `useDeviceLargerThanMd`, `useIsMobile` （2025-09-11完了）
 - ✅ **エディター状態**: `useEditorMode`, `useSelectedGrant`
 - ✅ **ページUI状態**: `usePageControlsX`
+- ✅ **TOC状態**: `useTocNode`, `useSetTocNode`, `useTocOptions`, `useTocOptionsReady` （2025-09-11完了）
+- ✅ **無題ページ状態**: `useIsUntitledPage`, `useSetIsUntitledPage` （2025-09-11完了）
 
 ### データ関連状態（完了）
 - ✅ **ページ状態**: `useCurrentPageId`, `useCurrentPageData`, `useCurrentPagePath`, `usePageNotFound`, `usePageNotCreatable`, `useLatestRevision`
@@ -185,6 +288,134 @@ export const use[Modal]Actions = (): [Modal]Actions => {
 - **品質確認**: 型チェック成功、全使用箇所移行済み
 - **統一された実装**: 全17個のモーダルで一貫したパターン
 
+### 🆕 デバイス状態移行完了（2025-09-11完了）
+
+#### ✅ Phase 1: デバイス幅関連フック4個一括移行完了
+- ✅ **`useIsDeviceLargerThanMd`**: MD以上のデバイス幅判定
+  - 使用箇所：8個のコンポーネント完全移行
+- ✅ **`useIsDeviceLargerThanLg`**: LG以上のデバイス幅判定
+  - 使用箇所：3個のコンポーネント完全移行
+- ✅ **`useIsMobile`**: モバイルデバイス判定
+  - 使用箇所：1個のコンポーネント完全移行
+
+#### 🚀 移行の成果
+- **統一パターン**: 既存の `useDeviceLargerThanXl` パターンに合わせて実装
+- **MediaQuery対応**: ブレークポイント監視による動的な状態更新
+- **モバイル検出**: タッチスクリーン・UserAgent による高精度判定
+- **テスト修正**: モックファイルの更新完了
+- **旧コード削除**: `stores/ui.tsx` から3つのフック削除完了
+
+#### 📊 移行詳細
+**移行されたファイル数**: 11個
+- PageControls.tsx, AccessTokenScopeList.tsx, PageEditorModeManager.tsx
+- GrowiContextualSubNavigation.tsx, SavePageControls.tsx, OptionsSelector.tsx
+- Sidebar.tsx, PageListItemL.tsx, DescendantsPageListModal.tsx
+- PageAccessoriesModal.tsx, PrimaryItem.tsx
+
+**テストファイル修正**: 1個
+- DescendantsPageListModal.spec.tsx: モック戻り値を `{ data: boolean }` → `[boolean]` に変更
+
+### 🆕 TOC状態移行完了（2025-09-11完了）
+
+#### ✅ TOC関連フック完全移行完了
+- ✅ **`useTocNode`**: TOCノード取得（新API）
+- ✅ **`useSetTocNode`**: TOCノード設定（新API）  
+- ✅ **`useTocOptions`**: TOCオプション生成（SWRからJotai + Dynamic Import）
+- ✅ **`useTocOptionsReady`**: TOCオプション準備完了判定
+
+#### 🚀 移行の成果と技術的特徴
+
+**1. API整理とクリーンアップ**
+- **統合**: TOC関連処理を `states/ui/toc.ts` に集約
+- **削除**: deprecated API（`useCurrentPageTocNode`, `useSetCurrentPageTocNode`）完全削除
+- **リファクタ**: `states/ui/page.ts` からTOC関連re-export削除
+- **責務分離**: PageControls関連とTOC関連の完全分離
+
+**2. RefObjectパターンによる型安全なDOM管理**
+```typescript
+// Internal RefObject storage (hidden from external API)
+const tocNodeRefAtom = atom<RefObject<HtmlElementNode> | null>(null);
+
+// Public derived atom for direct access
+export const tocNodeAtom = atom((get) => {
+  const tocNodeRef = get(tocNodeRefAtom);
+  return tocNodeRef?.current ?? null;
+});
+```
+
+**3. Dynamic Import + Cachingによるパフォーマンス最適化**
+```typescript
+// Heavy renderer dependencies are lazy-loaded
+let generateTocOptionsCache: typeof generateTocOptions | null = null;
+
+if (!generateTocOptionsCache) {
+  const { generateTocOptions } = await import('~/client/services/renderer/renderer');
+  generateTocOptionsCache = generateTocOptions;
+}
+```
+
+**4. SWRからJotai完全移行**
+- **Before**: SWR-based `useTocOptions` with server-side dependency
+- **After**: Pure Jotai state management with optimized caching
+- **Code Size**: 50%削減（54行 → 27行）
+
+#### 🎯 パフォーマンス向上効果
+1. **Bundle Splitting**: renderer.tsx（20+ dependencies）の遅延ロード
+2. **Code Splitting**: KaTeX, Mermaid, PlantUML等の重いライブラリ分離
+3. **Caching**: 一度ロード後の同期実行
+4. **First Contentful Paint**: 初期バンドルサイズ削減
+
+#### 📊 移行影響範囲
+- **更新ファイル**: `states/ui/toc.ts`, `states/ui/page.ts`, `stores/renderer.tsx`
+- **使用箇所**: `TableOfContents.tsx`（既に新API対応済み）
+- **削除コード**: deprecated hooks, re-exports, 冗長なコメント
+
+### 🆕 無題ページ状態移行完了（2025-09-11完了）
+
+#### ✅ 無題ページ関連フック完全移行完了
+- ✅ **`useIsUntitledPage`**: 無題ページ状態取得（シンプルなboolean）
+- ✅ **`useSetIsUntitledPage`**: 無題ページ状態設定（直接的なsetter）
+
+#### 🚀 移行の成果と技術的特徴
+
+**1. シンプルなBoolean状態パターン確立**
+```typescript
+// Atom定義（シンプル）
+const isUntitledPageAtom = atom<boolean>(false);
+
+// 読み取り専用フック
+export const useIsUntitledPage = (): boolean => {
+  return useAtomValue(isUntitledPageAtom);
+};
+
+// セッター専用フック（useSetAtom直接使用）
+export const useSetIsUntitledPage = () => {
+  return useSetAtom(isUntitledPageAtom);
+};
+```
+
+**2. SWR後方互換性の完全排除**
+- **Before**: SWR response形式（`{ data: boolean, mutate: function }`）
+- **After**: 直接的なboolean値とsetter関数
+- **メリット**: シンプルで理解しやすい、不要な複雑性の排除
+
+**3. 使用箇所の完全移行**
+- **読み取り**: `const { data: isUntitled } = useIsUntitledPage()` → `const isUntitled = useIsUntitledPage()`
+- **変更**: `const { mutate } = useIsUntitledPage()` → `const setIsUntitled = useSetIsUntitledPage()`
+- **直接呼び出し**: `mutate(value)` → `setIsUntitled(value)`
+
+#### 📊 移行影響範囲
+- **新ファイル**: `states/ui/untitled-page.ts`（シンプルな実装）
+- **移行箇所**: 5個のファイル（PageTitleHeader.tsx, PageEditor.tsx, page-path-rename-utils.ts, use-create-page.tsx, use-update-page.tsx）
+- **テスト修正**: PageTitleHeader.spec.tsx（モック戻り値を `{ data: boolean }` → `boolean` に変更）
+- **旧コード削除**: `stores/ui.tsx` からの `useIsUntitledPage` 削除完了
+
+#### 🎯 設計原則の明確化
+- **SWR後方互換性不要時**: 直接的なgetter/setterパターンを採用
+- **パフォーマンス優先**: `useAtomValue` + `useSetAtom` の分離により最適化
+- **複雑性排除**: 不要なwrapper関数やcallback不要
+- **型安全性**: TypeScriptによる完全な型チェック
+
 ## ✅ プロジェクト完了ステータス
 
 ### 🎯 モーダル移行プロジェクト: **100% 完了** ✅
@@ -195,32 +426,86 @@ export const use[Modal]Actions = (): [Modal]Actions => {
 - 🏆 **保守性**: 統一されたディレクトリ構造と実装パターン
 - 🏆 **互換性**: 全使用箇所の移行完了、旧実装の完全削除
 
+### 🎯 デバイス状態移行: **Phase 1 完了** ✅
+
+**主要デバイス判定フック4個**がJotaiベースに移行完了：
+- 🏆 **統一パターン**: `useAtom` + `useEffect` でのBreakpoint監視
+- 🏆 **動的更新**: MediaQuery変更時の自動状態更新
+- 🏆 **高精度判定**: モバイル検出の複数手法組み合わせ
+- 🏆 **完全移行**: 全使用箇所（11ファイル）の移行完了
+
+### 🎯 TOC状態移行: **完全完了** ✅
+
+**TOC関連フック4個**がJotaiベースに移行完了：
+- 🏆 **API整理**: deprecated API削除、責務分離
+- 🏆 **RefObjectパターン**: 型安全なDOM要素管理
+- 🏆 **Dynamic Import**: パフォーマンス最適化（50%コード削減）
+- 🏆 **SWR完全代替**: 純粋なJotai状態管理への移行
+
+### 🎯 無題ページ状態移行: **完全完了** ✅
+
+**無題ページ関連フック2個**がJotaiベースに移行完了：
+- 🏆 **シンプルパターン確立**: SWR後方互換性を排除したシンプル実装
+- 🏆 **直接的API**: boolean値の直接取得とsetter関数
+- 🏆 **完全移行**: 5個のファイル + テストファイル修正完了
+- 🏆 **旧コード削除**: `stores/ui.tsx` からの完全削除
+
 ### 🚀 成果とメリット
-1. **パフォーマンス向上**: 不要なリレンダリングの削減
-2. **開発体験向上**: 統一されたAPIパターン
-3. **保守性向上**: 個別ファイル化による責務明確化
+1. **パフォーマンス向上**: 不要なリレンダリングの削減、Bundle Splitting
+2. **開発体験向上**: 統一されたAPIパターン、型安全性
+3. **保守性向上**: 個別ファイル化による責務明確化、API整理
 4. **型安全性**: Jotaiによる強固な型システム
+5. **レスポンシブ対応**: 正確なデバイス幅・モバイル判定
+6. **DOM管理**: RefObjectパターンによる安全なDOM要素管理
+7. **シンプル性**: 不要な複雑性の排除、直接的なAPI設計
 
 ### 📊 最終進捗サマリー
-- **完了**: 主要なUI状態 + ページ関連状態 + SSRハイドレーション + **全17個のモーダル**
+- **完了**: 主要なUI状態 + ページ関連状態 + SSRハイドレーション + **全17個のモーダル** + **デバイス状態4個** + **TOC状態4個** + **無題ページ状態2個**
 - **モーダル移行**: **100% 完了** （17/17個）
+- **デバイス状態移行**: **Phase 1完了** （4/4個）
+- **TOC状態移行**: **完全完了** （4/4個）
+- **無題ページ状態移行**: **完全完了** （2/2個）
 - **品質保証**: 全型チェック成功、パフォーマンス最適化済み
 - **ドキュメント**: 完全な実装パターンガイド確立
 
 ## 🔮 今後の発展可能性
 
-### 次のフェーズ候補
-1. **AI機能のモーダル**: OpenAI関連のモーダル状態の統合検討
-2. **エディタパッケージ統合**: `@growi/editor`内のモーダル状態の統合
-3. **UI関連フックの最適化**: 残存するSWRベースフックの選択的移行
+### 次のフェーズ候補（Phase 2）
+1. **残存SWRフック**: `stores/ui.tsx` 内の残り5個のフック
+   - `usePageTreeDescCountMap` - ページツリーの子孫数管理（4ファイル使用、Map操作）
+   - `useCommentEditorDirtyMap` - コメントエディタのダーティ状態管理（1ファイル使用、Map操作）
+   - `useIsAbleToShowTrashPageManagementButtons` - ゴミ箱管理ボタン表示判定（1ファイル使用、boolean計算）
+   - `useIsAbleToShowTagLabel` - タグラベル表示判定（1ファイル使用、boolean計算）
+   - その他のable系フック - 各種UI表示判定
+2. **追加SWRフック検討**: その他のSWR使用箇所の調査
+3. **AI機能のモーダル**: OpenAI関連のモーダル状態の統合検討
+4. **エディタパッケージ統合**: `@growi/editor`内のモーダル状態の統合
 
 ### クリーンアップ候補
 - `stores/modal.tsx` 完全削除（既に空ファイル化済み）
-- `stores/ui.tsx` の段階的縮小検討
+- `stores/ui.tsx` の段階的縮小検討（5個のフック残存）
 - 未使用SWRフックの調査・クリーンアップ
 
 ## 🔄 更新履歴
 
+- **2025-09-11**: 🎉 **無題ページ状態移行完全完了！**
+  - useIsUntitledPage, useSetIsUntitledPage 移行完了
+  - シンプルBoolean状態パターン確立（SWR後方互換性排除）
+  - 5個のファイル + テストファイル完全移行
+  - 旧コード削除：stores/ui.tsx から useIsUntitledPage 削除完了
+  - 設計原則明確化：直接的なgetter/setterパターン確立
+- **2025-09-11**: 🎉 **TOC状態移行完全完了！**
+  - useTocNode, useSetTocNode, useTocOptions, useTocOptionsReady 移行完了
+  - API整理：deprecated hooks削除、責務分離完了
+  - RefObjectパターン：型安全なDOM要素管理確立
+  - Dynamic Import：パフォーマンス最適化（50%コード削減）
+  - SWR完全代替：Jotai純粋状態管理への移行
+  - 旧コード削除：re-exports, deprecated APIs完全削除
+- **2025-09-11**: 🎉 **Phase 1完了 - デバイス状態移行100%完了！**
+  - useIsDeviceLargerThanMd, useIsDeviceLargerThanLg, useIsMobile移行完了
+  - 11個のコンポーネント全使用箇所移行、テストファイル修正
+  - `states/ui/device.ts`に4個のデバイス関連フック統一
+  - 旧コード削除、不要インポート削除完了
 - **2025-09-05**: 🎉 **第5バッチ完了 - モーダル移行プロジェクト100%完了！**
   - PageBulkExportSelect, DrawioForEditor, LinkEdit, Template移行完了
   - 全17個のモーダルがJotaiベースに統一

apps/app/src/client/components/DescendantsPageListModal.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { DescendantsPageListModal } from './DescendantsPageListModal';
 
 const mockClose = vi.hoisted(() => vi.fn());
-const useIsDeviceLargerThanLg = vi.hoisted(() => vi.fn().mockReturnValue({ data: true }));
+const useDeviceLargerThanLg = vi.hoisted(() => vi.fn().mockReturnValue([true]));
 
 vi.mock('next/router', () => ({
   useRouter: () => ({
@@ -21,8 +21,8 @@ vi.mock('~/stores/modal', () => ({
   }),
 }));
 
-vi.mock('~/stores/ui', () => ({
-  useIsDeviceLargerThanLg,
+vi.mock('~/states/ui/device', () => ({
+  useDeviceLargerThanLg,
 }));
 
 describe('DescendantsPageListModal.tsx', () => {
@@ -54,7 +54,7 @@ describe('DescendantsPageListModal.tsx', () => {
 
   describe('when device is smaller than lg', () => {
     beforeEach(() => {
-      useIsDeviceLargerThanLg.mockReturnValue({ data: false });
+      useDeviceLargerThanLg.mockReturnValue([false]);
     });
 
     it('should render CustomNavDropdown on devices smaller than lg', () => {

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

@@ -11,8 +11,8 @@ import {
 } from 'reactstrap';
 
 import { useIsSharedUser } from '~/states/context';
+import { useDeviceLargerThanLg } from '~/states/ui/device';
 import { useDescendantsPageListModalActions, useDescendantsPageListModalStatus } from '~/states/ui/modal/descendants-page-list';
-import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
 import { CustomNavDropdown, CustomNavTab } from './CustomNavigation/CustomNav';
 import CustomTabContent from './CustomNavigation/CustomTabContent';
@@ -38,7 +38,7 @@ export const DescendantsPageListModal = (): JSX.Element => {
 
   const { events } = useRouter();
 
-  const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
+  const [isDeviceLargerThanLg] = useDeviceLargerThanLg();
 
   useEffect(() => {
     events.on('routeChangeStart', close);

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

@@ -4,7 +4,7 @@ import type { Scope } from '@growi/core/dist/interfaces';
 import { useTranslation } from 'next-i18next';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 
-import { useIsDeviceLargerThanMd } from '~/stores/ui';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
 
 
 import styles from './AccessTokenScopeList.module.scss';
@@ -32,7 +32,7 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
   level = 1,
 }) => {
 
-  const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+  const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
 
   // Convert object into an array to determine "first vs. non-first" elements
   const entries = Object.entries(scopeObject);

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

@@ -35,6 +35,7 @@ import {
   isLocalAccountRegistrationEnabledAtom,
   isUploadEnabledAtom,
 } from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
 import { useEditorMode } from '~/states/ui/editor';
 import { PageAccessoriesModalContents, usePageAccessoriesModalActions } from '~/states/ui/modal/page-accessories';
 import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
@@ -48,7 +49,6 @@ import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
 import {
   useIsAbleToShowPageManagement,
   useIsAbleToChangeEditorMode,
-  useIsDeviceLargerThanMd,
 } from '~/stores/ui';
 
 import { NotAvailable } from '../NotAvailable';
@@ -97,7 +97,7 @@ const PageOperationMenuItems = (props: PageOperationMenuItemsProps): JSX.Element
 
   const [isBulkExportTooltipOpen, setIsBulkExportTooltipOpen] = useState(false);
 
-  const syncLatestRevisionBodyHandler = useCallback(async() => {
+  const syncLatestRevisionBodyHandler = useCallback(async () => {
     // eslint-disable-next-line no-alert
     const answer = window.confirm(t('sync-latest-revision-body.confirm'));
     if (answer) {
@@ -281,7 +281,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
   const { data: isAbleToShowPageManagement } = useIsAbleToShowPageManagement();
   const { data: isAbleToChangeEditorMode } = useIsAbleToChangeEditorMode();
-  const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+  const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
 
   const { open: openDuplicateModal } = usePageDuplicateModalActions();
   const { open: openRenameModal } = usePageRenameModalActions();
@@ -297,14 +297,14 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
   const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
 
-  const duplicateItemClickedHandler = useCallback(async(page: IPageForPageDuplicateModal) => {
+  const duplicateItemClickedHandler = useCallback(async (page: IPageForPageDuplicateModal) => {
     const duplicatedHandler: OnDuplicatedFunction = (fromPath, toPath) => {
       router.push(toPath);
     };
     openDuplicateModal(page, { onDuplicated: duplicatedHandler });
   }, [openDuplicateModal, router]);
 
-  const renameItemClickedHandler = useCallback(async(page: IPageToRenameWithMeta<IPageInfoForEntity>) => {
+  const renameItemClickedHandler = useCallback(async (page: IPageToRenameWithMeta<IPageInfoForEntity>) => {
     const renamedHandler: OnRenamedFunction = () => {
       fetchCurrentPage();
       mutatePageInfo();
@@ -338,7 +338,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
     openDeleteModal([pageWithMeta], { onDeleted: deletedHandler });
   }, [currentPathname, fetchCurrentPage, openDeleteModal, router, mutatePageInfo]);
 
-  const switchContentWidthHandler = useCallback(async(pageId: string, value: boolean) => {
+  const switchContentWidthHandler = useCallback(async (pageId: string, value: boolean) => {
     if (!isSharedPage) {
       await updateContentWidth(pageId, value);
       fetchCurrentPage();
@@ -426,12 +426,12 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
                 editorMode={editorMode}
                 isBtnDisabled={!!isGuestUser || !!isReadOnlyUser}
                 path={path}
-                // grant={grant}
-                // grantUserGroupId={grantUserGroupId}
+              // grant={grant}
+              // grantUserGroupId={grantUserGroupId}
               />
             )}
 
-            { isGuestUser && (
+            {isGuestUser && (
               <div className="mt-2">
                 <span>
                   <span className="d-inline-block" id="sign-up-link">
@@ -454,7 +454,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
                   <span className="material-symbols-outlined me-1">login</span>{t('Sign in')}
                 </Link>
               </div>
-            ) }
+            )}
           </nav>
 
         </GroundGlassBar>

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

@@ -9,8 +9,8 @@ import { useTranslation } from 'next-i18next';
 import { useCreatePage } from '~/client/services/create-page';
 import { toastError } from '~/client/util/toastr';
 import { usePageNotFound } from '~/states/page';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
 import { useEditorMode, EditorMode } from '~/states/ui/editor';
-import { useIsDeviceLargerThanMd } from '~/stores/ui';
 import { useCurrentPageYjsData } from '~/stores/yjs';
 
 import { shouldCreateWipPage } from '../../../utils/should-create-wip-page';
@@ -68,12 +68,12 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
 
   const isNotFound = usePageNotFound();
   const { setEditorMode } = useEditorMode();
-  const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+  const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
   const { data: currentPageYjsData } = useCurrentPageYjsData();
 
   const { isCreating, create } = useCreatePage();
 
-  const editButtonClickedHandler = useCallback(async() => {
+  const editButtonClickedHandler = useCallback(async () => {
     if (isNotFound == null || isNotFound === false) {
       setEditorMode(EditorMode.Editor);
       return;
@@ -131,7 +131,7 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
             onClick={editButtonClickedHandler}
           >
             <span className="material-symbols-outlined me-1 fs-5">edit_square</span>{t('Edit')}
-            { circleColor != null && <span className={`position-absolute top-0 start-100 translate-middle p-1 rounded-circle ${circleColor}`} />}
+            {circleColor != null && <span className={`position-absolute top-0 start-100 translate-middle p-1 rounded-circle ${circleColor}`} />}
           </PageEditorModeButton>
         )}
       </div>

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

@@ -11,8 +11,8 @@ import {
 
 import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
 import { disableLinkSharingAtom } from '~/states/server-configurations';
+import { useDeviceLargerThanLg } from '~/states/ui/device';
 import { usePageAccessoriesModalStatus, usePageAccessoriesModalActions, PageAccessoriesModalContents } from '~/states/ui/modal/page-accessories';
-import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
 import { CustomNavDropdown, CustomNavTab } from '../CustomNavigation/CustomNav';
 import CustomTabContent from '../CustomNavigation/CustomTabContent';
@@ -37,7 +37,7 @@ const PageAccessoriesModalSubstance = (): JSX.Element => {
   const isGuestUser = useIsGuestUser();
   const isReadOnlyUser = useIsReadOnlyUser();
   const isLinkSharingDisabled = useAtomValue(disableLinkSharingAtom);
-  const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
+  const [isDeviceLargerThanLg] = useDeviceLargerThanLg();
 
   const status = usePageAccessoriesModalStatus();
   const { close, selectContents } = usePageAccessoriesModalActions();

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

@@ -22,13 +22,13 @@ import OpenDefaultAiAssistantButton from '~/features/openai/client/components/Ai
 import { useIsGuestUser, useIsReadOnlyUser, useIsSearchPage } from '~/states/context';
 import { useCurrentPagePath } from '~/states/page';
 import { isUsersHomepageDeletionEnabledAtom } from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
 import {
   EditorMode, useEditorMode,
 } from '~/states/ui/editor';
 import { type IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
 import { useTagEditModalActions } from '~/states/ui/modal/tag-edit';
 import { useSetPageControlsX } from '~/states/ui/page';
-import { useIsDeviceLargerThanMd } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 import { useSWRxPageInfo, useSWRxTagsInfo } from '../../../stores/page';
@@ -92,10 +92,10 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
           className="form-check-input pe-none"
           type="checkbox"
           checked={expandContentWidth}
-          onChange={() => {}}
+          onChange={() => { }}
         />
         <label className="form-check-label pe-none">
-          { t('wide_view') }
+          {t('wide_view')}
         </label>
       </div>
     </DropdownItem>
@@ -136,7 +136,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
   const isGuestUser = useIsGuestUser();
   const isReadOnlyUser = useIsReadOnlyUser();
   const { editorMode } = useEditorMode();
-  const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+  const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
   const isSearchPage = useIsSearchPage();
   const isUsersHomepageDeletionEnabled = useAtomValue(isUsersHomepageDeletionEnabledAtom);
   const currentPagePath = useCurrentPagePath();
@@ -166,7 +166,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
   const likers = usersList != null ? usersList.filter(({ _id }) => likerIds.includes(_id)).slice(0, 15) : [];
   const seenUsers = usersList != null ? usersList.filter(({ _id }) => seenUserIds.includes(_id)).slice(0, 15) : [];
 
-  const subscribeClickhandler = useCallback(async() => {
+  const subscribeClickhandler = useCallback(async () => {
     if (isGuestUser ?? true) {
       return;
     }
@@ -178,7 +178,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     mutatePageInfo();
   }, [isGuestUser, mutatePageInfo, pageId, pageInfo]);
 
-  const likeClickhandler = useCallback(async() => {
+  const likeClickhandler = useCallback(async () => {
     if (isGuestUser ?? true) {
       return;
     }
@@ -190,7 +190,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     mutatePageInfo();
   }, [isGuestUser, mutatePageInfo, pageId, pageInfo]);
 
-  const duplicateMenuItemClickHandler = useCallback(async(): Promise<void> => {
+  const duplicateMenuItemClickHandler = useCallback(async (): Promise<void> => {
     if (onClickDuplicateMenuItem == null || path == null) {
       return;
     }
@@ -199,7 +199,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     onClickDuplicateMenuItem(page);
   }, [onClickDuplicateMenuItem, pageId, path]);
 
-  const renameMenuItemClickHandler = useCallback(async(): Promise<void> => {
+  const renameMenuItemClickHandler = useCallback(async (): Promise<void> => {
     if (onClickRenameMenuItem == null || path == null) {
       return;
     }
@@ -216,7 +216,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     onClickRenameMenuItem(page);
   }, [onClickRenameMenuItem, pageId, pageInfo, path, revisionId]);
 
-  const deleteMenuItemClickHandler = useCallback(async(): Promise<void> => {
+  const deleteMenuItemClickHandler = useCallback(async (): Promise<void> => {
     if (onClickDeleteMenuItem == null || path == null) {
       return;
     }
@@ -306,7 +306,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
 
   return (
     <div className={`${styles['grw-page-controls']} hstack gap-2`} ref={pageControlsRef}>
-      { isViewMode && isDeviceLargerThanMd && !isSearchPage && !isSearchPage && (
+      {isViewMode && isDeviceLargerThanMd && !isSearchPage && !isSearchPage && (
         <>
           <SearchButton />
           <OpenDefaultAiAssistantButton />
@@ -319,7 +319,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
         />
       )}
 
-      { !hideSubControls && (
+      {!hideSubControls && (
         <div className={`hstack gap-1 ${!isViewMode && 'd-none d-lg-flex'}`}>
           {revisionId != null && _isIPageInfoForOperation && (
             <SubscribeButton
@@ -348,11 +348,11 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
               sumOfSeenUsers={sumOfSeenUsers}
               disabled={disableSeenUserInfoPopover}
             />
-          ) }
+          )}
         </div>
-      ) }
+      )}
 
-      { showPageControlDropdown && _isIPageInfoForOperation && (
+      {showPageControlDropdown && _isIPageInfoForOperation && (
         <PageItemControl
           pageId={pageId}
           pageInfo={pageInfo}

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

@@ -13,9 +13,9 @@ import {
 } from 'reactstrap';
 
 import { isIndentSizeForcedAtom } from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
 import { useEditorSettings, useCurrentIndentSize } from '~/stores/editor';
 import {
-  useIsDeviceLargerThanMd,
 } from '~/stores/ui';
 
 type RadioListItemProps = {
@@ -63,7 +63,7 @@ const Selector = (props: SelectorProps): JSX.Element => {
       </button>
       <hr className="my-1" />
       <ul className="list-group d-flex ms-2">
-        { items }
+        {items}
       </ul>
     </div>
   );
@@ -88,7 +88,7 @@ const EDITORTHEME_LABEL_MAP: EditorThemeToLabel = {
   kimbie: 'Kimbie',
 };
 
-const ThemeSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const ThemeSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
 
   const { t } = useTranslation();
   const { data: editorSettings, update } = useEditorSettings();
@@ -96,12 +96,12 @@ const ThemeSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX
 
   const listItems = useMemo(() => (
     <>
-      { (Object.keys(EDITORTHEME_LABEL_MAP) as EditorTheme[]).map((theme) => {
+      {(Object.keys(EDITORTHEME_LABEL_MAP) as EditorTheme[]).map((theme) => {
         const themeLabel = EDITORTHEME_LABEL_MAP[theme];
         return (
           <RadioListItem onClick={() => update({ theme })} text={themeLabel} checked={theme === selectedTheme} />
         );
-      }) }
+      })}
     </>
   ), [update, selectedTheme]);
 
@@ -123,7 +123,7 @@ const KEYMAP_LABEL_MAP: KeyMapModeToLabel = {
   vscode: 'Visual Studio Code',
 };
 
-const KeymapSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const KeymapSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
 
   const { t } = useTranslation();
   const { data: editorSettings, update } = useEditorSettings();
@@ -131,7 +131,7 @@ const KeymapSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JS
 
   const listItems = useMemo(() => (
     <>
-      { (Object.keys(KEYMAP_LABEL_MAP) as KeyMapMode[]).map((keymapMode) => {
+      {(Object.keys(KEYMAP_LABEL_MAP) as KeyMapMode[]).map((keymapMode) => {
         const keymapLabel = KEYMAP_LABEL_MAP[keymapMode];
         const icon = (keymapMode !== 'default')
           ? <Image src={`/images/icons/${keymapMode}.png`} width={16} height={16} className="me-2" alt={keymapMode} />
@@ -139,7 +139,7 @@ const KeymapSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JS
         return (
           <RadioListItem onClick={() => update({ keymapMode })} icon={icon} text={keymapLabel} checked={keymapMode === selectedKeymapMode} />
         );
-      }) }
+      })}
     </>
   ), [update, selectedKeymapMode]);
 
@@ -153,18 +153,18 @@ KeymapSelector.displayName = 'KeymapSelector';
 
 const TYPICAL_INDENT_SIZE = [2, 4];
 
-const IndentSizeSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const IndentSizeSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
 
   const { t } = useTranslation();
   const { data: currentIndentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
 
   const listItems = useMemo(() => (
     <>
-      { TYPICAL_INDENT_SIZE.map((indent) => {
+      {TYPICAL_INDENT_SIZE.map((indent) => {
         return (
           <RadioListItem onClick={() => mutateCurrentIndentSize(indent)} text={indent.toString()} checked={indent === currentIndentSize} />
         );
-      }) }
+      })}
     </>
   ), [currentIndentSize, mutateCurrentIndentSize]);
 
@@ -175,7 +175,7 @@ const IndentSizeSelector = memo(({ onClickBefore }: {onClickBefore: () => void})
 IndentSizeSelector.displayName = 'IndentSizeSelector';
 
 
-const PasteSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const PasteSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
 
   const { t } = useTranslation();
   const { data: editorSettings, update } = useEditorSettings();
@@ -183,11 +183,11 @@ const PasteSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX
 
   const listItems = useMemo(() => (
     <>
-      { (AllPasteMode).map((pasteMode) => {
+      {(AllPasteMode).map((pasteMode) => {
         return (
           <RadioListItem onClick={() => update({ pasteMode })} text={t(`page_edit.paste.${pasteMode}`) ?? ''} checked={pasteMode === selectedPasteMode} />
         );
-      }) }
+      })}
     </>
   ), [update, t, selectedPasteMode]);
 
@@ -307,7 +307,7 @@ export const OptionsSelector = (): JSX.Element => {
   const { data: editorSettings } = useEditorSettings();
   const { data: currentIndentSize } = useCurrentIndentSize();
   const isIndentSizeForced = useAtomValue(isIndentSizeForcedAtom);
-  const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+  const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
 
   if (editorSettings == null || currentIndentSize == null || isIndentSizeForced == null) {
     return <></>;
@@ -365,19 +365,19 @@ export const OptionsSelector = (): JSX.Element => {
             </div>
           )
         }
-        { status === OptionsStatus.Theme && (
+        {status === OptionsStatus.Theme && (
           <ThemeSelector onClickBefore={() => setStatus(OptionsStatus.Home)} />
         )
         }
-        { status === OptionsStatus.Keymap && (
+        {status === OptionsStatus.Keymap && (
           <KeymapSelector onClickBefore={() => setStatus(OptionsStatus.Home)} />
         )
         }
-        { status === OptionsStatus.Indent && (
+        {status === OptionsStatus.Indent && (
           <IndentSizeSelector onClickBefore={() => setStatus(OptionsStatus.Home)} />
         )
         }
-        { status === OptionsStatus.Paste && (
+        {status === OptionsStatus.Paste && (
           <PasteSelector onClickBefore={() => setStatus(OptionsStatus.Home)} />
         )}
       </DropdownMenu>

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

@@ -19,9 +19,9 @@ import {
   isAclEnabledAtom,
   isSlackConfiguredAtom,
 } from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
 import { useEditorMode, useSelectedGrant } from '~/states/ui/editor';
 import { useWaitingSaveProcessing, useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
-import { useIsDeviceLargerThanMd } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 import { NotAvailable } from '../../NotAvailable';
@@ -39,7 +39,7 @@ declare global {
 const logger = loggerFactory('growi:SavePageControls');
 
 
-const SavePageButton = (props: {slackChannels: string, isSlackEnabled?: boolean, isDeviceLargerThanMd?: boolean}) => {
+const SavePageButton = (props: { slackChannels: string, isSlackEnabled?: boolean, isDeviceLargerThanMd?: boolean }) => {
 
   const { t } = useTranslation();
   const { data: _isWaitingSaveProcessing } = useWaitingSaveProcessing();
@@ -50,7 +50,7 @@ const SavePageButton = (props: {slackChannels: string, isSlackEnabled?: boolean,
 
   const isWaitingSaveProcessing = _isWaitingSaveProcessing === true; // ignore undefined
 
-  const save = useCallback(async(): Promise<void> => {
+  const save = useCallback(async (): Promise<void> => {
     // save
     globalEmitter.emit('saveAndReturnToView', { wip: false, slackChannels, isSlackEnabled });
   }, [isSlackEnabled, slackChannels]);
@@ -155,7 +155,7 @@ export const SavePageControls = (): JSX.Element | null => {
   const isSlackConfigured = useAtomValue(isSlackConfiguredAtom);
   const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
-  const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+  const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
 
   const [slackChannels, setSlackChannels] = useState<string>('');
   const [isSavePageControlsModalShown, setIsSavePageControlsModalShown] = useState<boolean>(false);

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

@@ -31,6 +31,7 @@ import {
   useCurrentPageData,
   useCurrentPageId,
   usePageNotFound,
+  useIsUntitledPage,
 } from '~/states/page';
 import { useTemplateBody } from '~/states/page/hooks';
 import {
@@ -56,7 +57,6 @@ import {
 } from '~/stores/page';
 import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
 import { usePreviewOptions } from '~/stores/renderer';
-import { useIsUntitledPage } from '~/stores/ui';
 import { useEditingClients } from '~/stores/use-editing-clients';
 import loggerFactory from '~/utils/logger';
 
@@ -112,7 +112,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const isEditable = useIsEditable();
   const { mutate: mutateWaitingSaveProcessing } = useWaitingSaveProcessing();
   const { editorMode, setEditorMode } = useEditorMode();
-  const { data: isUntitledPage } = useIsUntitledPage();
+  const isUntitledPage = useIsUntitledPage();
   const isIndentSizeForced = useAtomValue(isIndentSizeForcedAtom);
   const { data: currentIndentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
   const defaultIndentSize = useAtomValue(defaultIndentSizeAtom);
@@ -179,7 +179,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const scrollEditorHandlerThrottle = useMemo(() => throttle(25, scrollEditorHandler), [scrollEditorHandler]);
   const scrollPreviewHandlerThrottle = useMemo(() => throttle(25, scrollPreviewHandler), [scrollPreviewHandler]);
 
-  const save: Save = useCallback(async(revisionId, markdown, opts, onConflict) => {
+  const save: Save = useCallback(async (revisionId, markdown, opts, onConflict) => {
     if (pageId == null || selectedGrant == null) {
       logger.error('Some materials to save are invalid', {
         pageId, selectedGrant,
@@ -228,7 +228,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
     }
   }, [pageId, selectedGrant, mutateWaitingSaveProcessing, updatePage, mutateIsGrantNormalized, t]);
 
-  const saveAndReturnToViewHandler = useCallback(async(opts: SaveOptions) => {
+  const saveAndReturnToViewHandler = useCallback(async (opts: SaveOptions) => {
     const markdown = codeMirrorEditor?.getDocString();
     const revisionId = isRevisionIdRequiredForPageUpdate ? currentRevisionId : undefined;
     const page = await save(revisionId, markdown, opts, onConflict);
@@ -240,7 +240,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
     updateStateAfterSave?.();
   }, [codeMirrorEditor, currentRevisionId, isRevisionIdRequiredForPageUpdate, setEditorMode, onConflict, save, updateStateAfterSave]);
 
-  const saveWithShortcut = useCallback(async() => {
+  const saveWithShortcut = useCallback(async () => {
     const markdown = codeMirrorEditor?.getDocString();
     const revisionId = isRevisionIdRequiredForPageUpdate ? currentRevisionId : undefined;
     const page = await save(revisionId, markdown, undefined, onConflict);

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

@@ -14,7 +14,7 @@ import type { RemoteRevisionData } from '~/states/page';
 import { useCurrentPageData, useCurrentPageId, useSetRemoteLatestPageData } from '~/states/page';
 import { EditorMode, useEditorMode } from '~/states/ui/editor';
 import { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
-import { usePageStatusAlert } from '~/stores/alert';
+import { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
 
 
 export type ConflictHandler = (
@@ -35,13 +35,13 @@ const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () =>
   const { t } = useTranslation();
 
   const pageId = useCurrentPageId();
-  const { close: closePageStatusAlert } = usePageStatusAlert();
+  const { close: closePageStatusAlert } = usePageStatusAlertActions();
   const { close: closeConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
   const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
 
   return useCallback((revisionId, save, saveOptions, onConflict) => {
-    return async(newMarkdown) => {
+    return async (newMarkdown) => {
       const page = await save(revisionId, newMarkdown, saveOptions, onConflict);
       if (page == null) {
         return;
@@ -63,7 +63,7 @@ const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () =>
 type ConflictResolver = () => ConflictHandler;
 
 export const useConflictResolver: ConflictResolver = () => {
-  const { open: openPageStatusAlert } = usePageStatusAlert();
+  const { open: openPageStatusAlert } = usePageStatusAlertActions();
   const { open: openConflictDiffModal } = useConflictDiffModalActions();
   const setRemoteLatestPageData = useSetRemoteLatestPageData();
   const generateResolveConflictHandler = useGenerateResolveConflictHandler();
@@ -81,10 +81,9 @@ export const useConflictResolver: ConflictResolver = () => {
 
 export const useConflictEffect = (): void => {
   const currentPage = useCurrentPageData();
-  const { close: closePageStatusAlert } = usePageStatusAlert();
+  const { close: closePageStatusAlert, open: openPageStatusAlert } = usePageStatusAlertActions();
   const { close: closeConflictDiffModal, open: openConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-  const { open: openPageStatusAlert } = usePageStatusAlert();
   const { data: socket } = useGlobalSocket();
   const { editorMode } = useEditorMode();
 

apps/app/src/client/components/PageEditor/page-path-rename-utils.ts

@@ -5,9 +5,8 @@ import { useTranslation } from 'next-i18next';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useFetchCurrentPage } from '~/states/page';
+import { useFetchCurrentPage, useSetIsUntitledPage } from '~/states/page';
 import { mutatePageTree, mutatePageList, mutateRecentlyUpdated } from '~/stores/page-listing';
-import { useIsUntitledPage } from '~/stores/ui';
 
 
 type PagePathRenameHandler = (newPagePath: string, onRenameFinish?: () => void, onRenameFailure?: () => void, onRenamedSkipped?: () => void) => Promise<void>
@@ -18,7 +17,7 @@ export const usePagePathRenameHandler = (
 
   const { t } = useTranslation();
   const { fetchCurrentPage } = useFetchCurrentPage();
-  const { mutate: mutateIsUntitledPage } = useIsUntitledPage();
+  const setIsUntitledPage = useSetIsUntitledPage();
 
   const pagePathRenameHandler = useCallback(async(newPagePath, onRenameFinish, onRenameFailure) => {
 
@@ -35,7 +34,7 @@ export const usePagePathRenameHandler = (
       mutatePageTree();
       mutateRecentlyUpdated();
       mutatePageList();
-      mutateIsUntitledPage(false);
+      setIsUntitledPage(false);
 
       if (currentPage.path === fromPath || currentPage.path === toPath) {
         fetchCurrentPage();
@@ -58,7 +57,7 @@ export const usePagePathRenameHandler = (
       onRenameFailure?.();
       toastError(err);
     }
-  }, [currentPage, fetchCurrentPage, mutateIsUntitledPage, t]);
+  }, [currentPage, fetchCurrentPage, setIsUntitledPage, t]);
 
   return pagePathRenameHandler;
 };

apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx

@@ -14,12 +14,15 @@ import { PageTitleHeader } from './PageTitleHeader';
 
 const mocks = vi.hoisted(() => ({
   useIsUntitledPageMock: vi.fn(),
-  useEditorModeMock: vi.fn(() => ({ data: EditorMode.Editor })),
+  useEditorModeMock: vi.fn(() => ({ editorMode: EditorMode.Editor })),
 }));
 
-vi.mock('~/stores/ui', () => ({
-  useIsUntitledPage: mocks.useIsUntitledPageMock,
-}));
+vi.mock('~/states/page', async (importOriginal) => {
+  return {
+    ...(await importOriginal()),
+    useIsUntitledPage: mocks.useIsUntitledPageMock,
+  };
+});
 vi.mock('~/states/ui/editor', async importOriginal => ({
   ...await importOriginal(),
   useEditorMode: mocks.useEditorModeMock,
@@ -28,10 +31,10 @@ vi.mock('~/states/ui/editor', async importOriginal => ({
 describe('PageTitleHeader Component with untitled page', () => {
 
   beforeAll(() => {
-    mocks.useIsUntitledPageMock.mockImplementation(() => ({ data: true }));
+    mocks.useIsUntitledPageMock.mockImplementation(() => true);
   });
 
-  it('should render the textbox correctly', async() => {
+  it('should render the textbox correctly', async () => {
     // arrange
     const currentPage = mock<IPagePopulatedToShowRevision>({
       _id: faker.database.mongodbObjectId(),
@@ -60,10 +63,10 @@ describe('PageTitleHeader Component with untitled page', () => {
 describe('PageTitleHeader Component', () => {
 
   beforeAll(() => {
-    mocks.useIsUntitledPageMock.mockImplementation(() => ({ data: false }));
+    mocks.useIsUntitledPageMock.mockImplementation(() => false);
   });
 
-  it('should render the title correctly', async() => {
+  it('should render the title correctly', async () => {
     // arrange
     const pageTitle = faker.lorem.slug();
     const currentPage = mock<IPagePopulatedToShowRevision>({
@@ -86,7 +89,7 @@ describe('PageTitleHeader Component', () => {
     expect(inputElement).not.toBeInTheDocument();
   });
 
-  it('should render text input after clicking', async() => {
+  it('should render text input after clicking', async () => {
     // arrange
     const pageTitle = faker.lorem.slug();
     const currentPage = mock<IPagePopulatedToShowRevision>({

apps/app/src/client/components/PageHeader/PageTitleHeader.tsx

@@ -13,8 +13,8 @@ import { useTranslation } from 'next-i18next';
 
 import type { InputValidationResult } from '~/client/util/use-input-validator';
 import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
+import { useIsUntitledPage } from '~/states/page';
 import { EditorMode, useEditorMode } from '~/states/ui/editor';
-import { useIsUntitledPage } from '~/stores/ui';
 
 import { CopyDropdown } from '../Common/CopyDropdown';
 import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
@@ -53,9 +53,9 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
   const editedPageTitle = nodePath.basename(editedPagePath);
 
   const { editorMode } = useEditorMode();
-  const { data: isUntitledPage } = useIsUntitledPage();
+  const isUntitledPage = useIsUntitledPage();
 
-  const changeHandler = useCallback(async(e: ChangeEvent<HTMLInputElement>) => {
+  const changeHandler = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {
     const newPageTitle = pathUtils.removeHeadingSlash(e.target.value);
     const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path));
     const newPagePath = nodePath.resolve(parentPagePath, newPageTitle);
@@ -128,7 +128,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
   return (
     <div className={`d-flex ${moduleClass} ${props.className ?? ''} position-relative`}>
       <div className="page-title-header-input me-1 d-inline-block">
-        { isRenameInputShown && (
+        {isRenameInputShown && (
           <div className="position-relative">
             <div className="position-absolute w-100">
               <AutosizeSubmittableInput
@@ -143,7 +143,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
               />
             </div>
           </div>
-        ) }
+        )}
         <h1
           className={`mb-0 mb-sm-1 px-2 fs-4
             ${isRenameInputShown ? 'invisible' : ''} text-truncate
@@ -157,7 +157,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
       </div>
 
       <div className={`${isRenameInputShown ? 'invisible' : ''} d-flex align-items-center gap-2`}>
-        { currentPage.wip && (
+        {currentPage.wip && (
           <span className="badge rounded-pill text-bg-secondary">WIP</span>
         )}
 

apps/app/src/client/components/PageList/PageListItemL.tsx

@@ -25,12 +25,12 @@ import type {
   OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction,
 } from '~/interfaces/ui';
 import LinkedPagePath from '~/models/linked-page-path';
+import { useDeviceLargerThanLg } from '~/states/ui/device';
 import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
 import { usePageDuplicateModalActions } from '~/states/ui/modal/page-duplicate';
 import { usePageRenameModalActions } from '~/states/ui/modal/page-rename';
 import { usePutBackPageModalActions } from '~/states/ui/modal/put-back-page';
 import { useSWRMUTxCurrentUserBookmarks } from '~/stores/bookmark';
-import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
 import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
 import { useSWRMUTxPageInfo, useSWRxPageInfo } from '../../../stores/page';
@@ -85,7 +85,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
     },
   }));
 
-  const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
+  const [isDeviceLargerThanLg] = useDeviceLargerThanLg();
   const { open: openDuplicateModal } = usePageDuplicateModalActions();
   const { open: openRenameModal } = usePageRenameModalActions();
   const { open: openDeleteModal } = usePageDeleteModalActions();
@@ -128,7 +128,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
     }
   }, [isDeviceLargerThanLg, onClickItem, pageData._id]);
 
-  const bookmarkMenuItemClickHandler = async(_pageId: string, _newValue: boolean): Promise<void> => {
+  const bookmarkMenuItemClickHandler = async (_pageId: string, _newValue: boolean): Promise<void> => {
     const bookmarkOperation = _newValue ? bookmark : unbookmark;
     await bookmarkOperation(_pageId);
     mutateCurrentUserBookmarks();
@@ -156,10 +156,10 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
     openDeleteModal([pageToDelete], { onDeleted: onPageDeleted });
   }, [pageData, openDeleteModal, onPageDeleted]);
 
-  const revertMenuItemClickHandler = useCallback(async() => {
+  const revertMenuItemClickHandler = useCallback(async () => {
     const { _id: pageId, path } = pageData;
 
-    const putBackedHandler = async(path) => {
+    const putBackedHandler = async (path) => {
       try {
         // pageData path should be `/trash/fuga` (`/trash` should be included to the prefix)
         await unlink(pageData.path);

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageData, useRemoteRevisionId, useRemoteRevisionLastUpdateUser } from '~/states/page';
 import { useEditorMode } from '~/states/ui/editor';
-import { usePageStatusAlert } from '~/stores/alert';
+import { usePageStatusAlertStatus } from '~/states/ui/modal/page-status-alert';
 
 import { Username } from '../../components/User/Username';
 
@@ -17,7 +17,7 @@ export const PageStatusAlert = (): JSX.Element => {
   const { editorMode } = useEditorMode();
   const isGuestUser = useIsGuestUser();
   const isReadOnlyUser = useIsReadOnlyUser();
-  const { data: pageStatusAlertData } = usePageStatusAlert();
+  const pageStatusAlertData = usePageStatusAlertStatus();
   const remoteRevisionId = useRemoteRevisionId();
   const remoteRevisionLastUpdateUser = useRemoteRevisionLastUpdateUser();
   const pageData = useCurrentPageData();
@@ -48,7 +48,7 @@ export const PageStatusAlert = (): JSX.Element => {
     <div className={`${styles['grw-page-status-alert']} card fixed-bottom animated fadeInUp faster text-bg-warning`}>
       <div className="card-body">
         <p className="card-text grw-card-label-container">
-          { hasResolveConflictHandler
+          {hasResolveConflictHandler
             ? <>{t('modal_resolve_conflict.file_conflicting_with_newer_remote')}</>
             : <><Username user={remoteRevisionLastUpdateUser} /> {t('edited this page')}</>
           }

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

@@ -7,10 +7,10 @@ import { debounce } from 'throttle-debounce';
 
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageId, useCurrentPagePath } from '~/states/page';
+import { useSidebarScrollerElem } from '~/states/ui/sidebar';
 import {
   mutatePageTree, mutateRecentlyUpdated, useSWRxRootPage, useSWRxV5MigrationStatus,
 } from '~/stores/page-listing';
-import { useSidebarScrollerRef } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 import { ItemsTree } from '../../ItemsTree/ItemsTree';
@@ -61,7 +61,7 @@ export const PageTreeHeader = memo(({ isWipPageShown, onWipPageShownChange }: He
                 className="form-check-input pe-none"
                 type="checkbox"
                 checked={isWipPageShown}
-                onChange={() => {}}
+                onChange={() => { }}
               />
               <label className="form-check-label pe-none">
                 {t('sidebar_header.show_wip_page')}
@@ -106,7 +106,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
   const path = currentPath || '/';
 
   const { data: rootPageResult } = useSWRxRootPage({ suspense: true });
-  const { data: sidebarScrollerRef } = useSidebarScrollerRef();
+  const sidebarScrollerElem = useSidebarScrollerElem();
   const [isInitialScrollCompleted, setIsInitialScrollCompleted] = useState(false);
 
   const rootElemRef = useRef<HTMLDivElement>(null);
@@ -114,7 +114,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
   // ***************************  Scroll on init ***************************
   const scrollOnInit = useCallback(() => {
     const rootElement = rootElemRef.current;
-    const scrollElement = sidebarScrollerRef?.current;
+    const scrollElement = sidebarScrollerElem;
 
     if (rootElement == null || scrollElement == null) {
       return;
@@ -137,7 +137,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
     scrollElement.scrollTo({ top: scrollTop });
 
     setIsInitialScrollCompleted(true);
-  }, [sidebarScrollerRef]);
+  }, [sidebarScrollerElem]);
 
   const scrollOnInitDebounced = useMemo(() => debounce(500, scrollOnInit), [scrollOnInit]);
 

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

@@ -9,7 +9,7 @@ import { useIsomorphicLayoutEffect } from 'usehooks-ts';
 
 import { SidebarMode } from '~/interfaces/ui';
 import { useIsSearchPage } from '~/states/context';
-import { useDeviceLargerThanXl } from '~/states/ui/device';
+import { useDeviceLargerThanXl, useDeviceLargerThanMd } from '~/states/ui/device';
 import { EditorMode, useEditorMode } from '~/states/ui/editor';
 import {
   useDrawerOpened,
@@ -17,10 +17,9 @@ import {
   useSidebarMode,
   useCollapsedContentsOpened,
   useCurrentProductNavWidth,
+  useSetSidebarScrollerRef,
 } from '~/states/ui/sidebar';
 import {
-  useSidebarScrollerRef,
-  useIsDeviceLargerThanMd,
 } from '~/stores/ui';
 
 import { DrawerToggler } from '../Common/DrawerToggler';
@@ -78,7 +77,7 @@ const ResizableContainer = memo((props: ResizableContainerProps): JSX.Element =>
   const [, setCollapsedContentsOpened] = useCollapsedContentsOpened();
 
   const [isClient, setClient] = useState(false);
-  const [resizableAreaWidth, setResizableAreaWidth] = useState<number|undefined>(
+  const [resizableAreaWidth, setResizableAreaWidth] = useState<number | undefined>(
     getWidthByMode(isDrawerMode(), isCollapsedMode(), currentProductNavWidth),
   );
 
@@ -146,8 +145,12 @@ const CollapsibleContainer = memo((props: CollapsibleContainerProps): JSX.Elemen
   const [isCollapsedContentsOpened, setCollapsedContentsOpened] = useCollapsedContentsOpened();
 
   const sidebarScrollerRef = useRef<HTMLDivElement>(null);
-  const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
-  mutateSidebarScroller(sidebarScrollerRef);
+  const setSidebarScrollerRef = useSetSidebarScrollerRef();
+
+  // Set the ref once on mount
+  useEffect(() => {
+    setSidebarScrollerRef(sidebarScrollerRef);
+  }, [setSidebarScrollerRef]);
 
 
   // open menu when collapsed mode
@@ -217,9 +220,9 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
       <div {...divProps} className={`${className} ${openClass}`}>
         {children}
       </div>
-      { isDrawerOpened && (
+      {isDrawerOpened && (
         <div className="modal-backdrop fade show" onClick={() => setIsDrawerOpened(false)} />
-      ) }
+      )}
     </>
   );
 });
@@ -234,7 +237,7 @@ export const Sidebar = (): JSX.Element => {
 
   const isSearchPage = useIsSearchPage();
   const { editorMode } = useEditorMode();
-  const { data: isMdSize } = useIsDeviceLargerThanMd();
+  const [isMdSize] = useDeviceLargerThanMd();
   const [isXlSize] = useDeviceLargerThanXl();
 
   const isEditorMode = editorMode === EditorMode.Editor;
@@ -260,17 +263,17 @@ export const Sidebar = (): JSX.Element => {
 
   return (
     <>
-      { sidebarMode != null && isDrawerMode() && (
+      {sidebarMode != null && isDrawerMode() && (
         <DrawerToggler className="position-fixed d-none d-md-block">
           <span className="material-symbols-outlined">reorder</span>
         </DrawerToggler>
       )}
-      { sidebarMode != null && !isDockMode() && !isSearchPage && !shouldHideSubnavAppTitle && (
+      {sidebarMode != null && !isDockMode() && !isSearchPage && !shouldHideSubnavAppTitle && (
         <AppTitleOnSubnavigation />
       )}
       <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end flex-expand-vh-100`} divProps={{ 'data-testid': 'grw-sidebar' }}>
         <ResizableContainer>
-          { sidebarMode != null && !isCollapsedMode() && (
+          {sidebarMode != null && !isCollapsedMode() && (
             <AppTitleOnSidebarHead hideAppTitle={shouldHideSiteName} />
           )}
           {shouldShowEditorSidebarHead ? <AppTitleOnEditorSidebarHead /> : <SidebarHead />}

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

@@ -5,8 +5,8 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 import type { SidebarContentsType } from '~/interfaces/ui';
 import { SidebarMode } from '~/interfaces/ui';
+import { useIsMobile } from '~/states/ui/device';
 import { useCollapsedContentsOpened, useCurrentSidebarContents } from '~/states/ui/sidebar';
-import { useIsMobile } from '~/stores/ui';
 
 const useIndicator = (sidebarMode: SidebarMode, isSelected: boolean): string => {
   const [isCollapsedContentsOpened] = useCollapsedContentsOpened();
@@ -38,7 +38,7 @@ export const PrimaryItem = (props: PrimaryItemProps): JSX.Element => {
   const [currentContents, setCurrentContents] = useCurrentSidebarContents();
 
   const indicatorClass = useIndicator(sidebarMode, contents === currentContents);
-  const { data: isMobile } = useIsMobile();
+  const [isMobile] = useIsMobile();
   const { t } = useTranslation();
 
   const selectThisItem = useCallback(() => {
@@ -79,10 +79,10 @@ export const PrimaryItem = (props: PrimaryItemProps): JSX.Element => {
         id={labelForTestId}
       >
         <div className="position-relative">
-          { badgeContents != null && (
+          {badgeContents != null && (
             <span className="position-absolute badge rounded-pill bg-primary">{badgeContents}</span>
           )}
-          { isCustomIcon
+          {isCustomIcon
             ? (<span className="growi-custom-icons fs-4 align-middle">{iconName}</span>)
             : (<span className="material-symbols-outlined">{iconName}</span>)
           }

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

@@ -4,7 +4,7 @@ import { pagePathUtils } from '@growi/core/dist/utils';
 import ReactMarkdown from 'react-markdown';
 
 import { useCurrentPagePath } from '~/states/page';
-import { useTocOptions } from '~/stores/renderer';
+import { useTocOptions } from '~/states/ui/toc';
 import loggerFactory from '~/utils/logger';
 
 import { StickyStretchableScroller } from './StickyStretchableScroller';

apps/app/src/client/services/create-page/use-create-page.tsx

@@ -6,10 +6,9 @@ import { useTranslation } from 'react-i18next';
 import { exist, getIsNonUserRelatedGroupsGranted } from '~/client/services/page-operation';
 import { toastWarning } from '~/client/util/toastr';
 import type { IApiv3PageCreateParams } from '~/interfaces/apiv3';
-import { useCurrentPagePath } from '~/states/page';
+import { useCurrentPagePath, useSetIsUntitledPage } from '~/states/page';
 import { useEditorMode, EditorMode } from '~/states/ui/editor';
 import { useGrantedGroupsInheritanceSelectModalActions } from '~/states/ui/modal/granted-groups-inheritance-select';
-import { useIsUntitledPage } from '~/stores/ui';
 
 import { createPage } from './create-page';
 
@@ -52,12 +51,12 @@ export const useCreatePage: UseCreatePage = () => {
 
   const currentPagePath = useCurrentPagePath();
   const { setEditorMode } = useEditorMode();
-  const { mutate: mutateIsUntitledPage } = useIsUntitledPage();
+  const setIsUntitledPage = useSetIsUntitledPage();
   const { open: openGrantedGroupsInheritanceSelectModal, close: closeGrantedGroupsInheritanceSelectModal } = useGrantedGroupsInheritanceSelectModalActions();
 
   const [isCreating, setCreating] = useState(false);
 
-  const create: CreatePage = useCallback(async(params, opts = {}) => {
+  const create: CreatePage = useCallback(async (params, opts = {}) => {
     const {
       onCreationStart, onCreated, onAborted, onTerminated,
     } = opts;
@@ -94,7 +93,7 @@ export const useCreatePage: UseCreatePage = () => {
       }
     }
 
-    const _create = async(onlyInheritUserRelatedGrantedGroups?: boolean) => {
+    const _create = async (onlyInheritUserRelatedGrantedGroups?: boolean) => {
       try {
         setCreating(true);
         onCreationStart?.();
@@ -110,7 +109,7 @@ export const useCreatePage: UseCreatePage = () => {
         }
 
         if (params.path == null) {
-          mutateIsUntitledPage(true);
+          setIsUntitledPage(true);
         }
 
         onCreated?.();
@@ -135,7 +134,7 @@ export const useCreatePage: UseCreatePage = () => {
     }
 
     await _create();
-  }, [currentPagePath, setEditorMode, router, t, closeGrantedGroupsInheritanceSelectModal, mutateIsUntitledPage, openGrantedGroupsInheritanceSelectModal]);
+  }, [currentPagePath, setEditorMode, router, t, closeGrantedGroupsInheritanceSelectModal, setIsUntitledPage, openGrantedGroupsInheritanceSelectModal]);
 
   return {
     isCreating,

apps/app/src/client/services/side-effects/page-updated.ts

@@ -6,7 +6,7 @@ import { SocketEventName } from '~/interfaces/websocket';
 import { useCurrentPageData, useFetchCurrentPage, useSetRemoteLatestPageData } from '~/states/page';
 import type { RemoteRevisionData } from '~/states/page';
 import { useEditorMode, EditorMode } from '~/states/ui/editor';
-import { usePageStatusAlert } from '~/stores/alert';
+import { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
 
 
 export const usePageUpdatedEffect = (): void => {
@@ -17,7 +17,7 @@ export const usePageUpdatedEffect = (): void => {
   const { editorMode } = useEditorMode();
   const currentPage = useCurrentPageData();
   const { fetchCurrentPage } = useFetchCurrentPage();
-  const { open: openPageStatusAlert, close: closePageStatusAlert } = usePageStatusAlert();
+  const { open: openPageStatusAlert, close: closePageStatusAlert } = usePageStatusAlertActions();
 
   const remotePageDataUpdateHandler = useCallback((data) => {
     // Set remote page data

apps/app/src/client/services/update-page/use-update-page.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import type { IApiv3PageUpdateParams, IApiv3PageUpdateResponse } from '~/interfaces/apiv3';
-import { useIsUntitledPage } from '~/stores/ui';
+import { useSetIsUntitledPage } from '~/states/page';
 
 import { updatePage } from './update-page';
 
@@ -10,16 +10,16 @@ type UseUpdatePage = (params: IApiv3PageUpdateParams) => Promise<IApiv3PageUpdat
 
 
 export const useUpdatePage = (): UseUpdatePage => {
-  const { mutate: mutateUntitledPage } = useIsUntitledPage();
+  const setIsUntitledPage = useSetIsUntitledPage();
 
-  const updatePageExt: UseUpdatePage = useCallback(async(params) => {
+  const updatePageExt: UseUpdatePage = useCallback(async (params) => {
     const result = await updatePage(params);
 
     // set false to isUntitledPage
-    mutateUntitledPage(false);
+    setIsUntitledPage(false);
 
     return result;
-  }, [mutateUntitledPage]);
+  }, [setIsUntitledPage]);
 
   return updatePageExt;
 };

apps/app/src/states/page/hooks.ts

@@ -2,7 +2,7 @@ import {
   isCreatablePage,
   isPermalink,
 } from '@growi/core/dist/utils/page-path-utils';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useAtomCallback } from 'jotai/utils';
 import { useCallback, useMemo } from 'react';
 import { useIsGuestUser, useIsReadOnlyUser } from '../context';
@@ -15,6 +15,7 @@ import {
   isIdenticalPathAtom,
   isRevisionOutdatedAtom,
   isTrashPageAtom,
+  isUntitledPageAtom,
   latestRevisionAtom,
   pageNotFoundAtom,
   redirectFromAtom,
@@ -130,3 +131,16 @@ export const useIsEditable = () => {
     );
   }, [getCombinedConditions, isGuestUser, isReadOnlyUser, isNotCreatable]);
 };
+
+/**
+ * Hook to get untitled page status
+ * Returns true if current page is in untitled state, false otherwise
+ * Returns false if no page is currently loaded (currentPageId is null)
+ */
+export const useIsUntitledPage = () => useAtomValue(isUntitledPageAtom);
+
+/**
+ * Hook to set untitled page status
+ * Only updates state when a page is currently loaded (currentPageId exists)
+ */
+export const useSetIsUntitledPage = () => useSetAtom(isUntitledPageAtom);

apps/app/src/states/page/internal-atoms.ts

@@ -38,6 +38,29 @@ export const currentRevisionIdAtom = atom((get) => {
   return currentPage?.revision?._id;
 });
 
+// Base atom for untitled page state management
+const untitledPageStateAtom = atom<boolean>(false);
+
+// Derived atom for untitled page state with currentPageId dependency
+export const isUntitledPageAtom = atom(
+  (get) => {
+    const currentPageId = get(currentPageIdAtom);
+    // If no current page ID exists, return false (no page loaded)
+    if (currentPageId == null) {
+      return false;
+    }
+    // Return the current untitled state when page ID exists
+    return get(untitledPageStateAtom);
+  },
+  (get, set, newValue: boolean) => {
+    const currentPageId = get(currentPageIdAtom);
+    // Only update state if current page ID exists
+    if (currentPageId != null) {
+      set(untitledPageStateAtom, newValue);
+    }
+  }
+);
+
 // Remote revision data atoms (migrated from useSWRStatic)
 export const remoteRevisionIdAtom = atom<string>();
 export const remoteRevisionBodyAtom = atom<string>();

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

@@ -1,4 +1,3 @@
-import { isClient } from '@growi/core/dist/utils';
 import { Breakpoint } from '@growi/ui/dist/interfaces';
 import {
   addBreakpointListener,
@@ -9,28 +8,100 @@ import { useEffect } from 'react';
 
 // Device state atoms
 export const isDeviceLargerThanXlAtom = atom(false);
+export const isDeviceLargerThanLgAtom = atom(false);
+export const isDeviceLargerThanMdAtom = atom(false);
+export const isMobileAtom = 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;
+    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);
+    };
   }, [setIsLargerThanXl]);
 
   return [isLargerThanXl, setIsLargerThanXl] as const;
 };
+
+export const useDeviceLargerThanLg = () => {
+  const [isLargerThanLg, setIsLargerThanLg] = useAtom(isDeviceLargerThanLgAtom);
+
+  useEffect(() => {
+    const lgOrAboveHandler = function (this: MediaQueryList): void {
+      // md -> lg: matches will be true
+      // lg -> md: matches will be false
+      setIsLargerThanLg(this.matches);
+    };
+    const mql = addBreakpointListener(Breakpoint.LG, lgOrAboveHandler);
+
+    // initialize
+    setIsLargerThanLg(mql.matches);
+
+    return () => {
+      cleanupBreakpointListener(mql, lgOrAboveHandler);
+    };
+  }, [setIsLargerThanLg]);
+
+  return [isLargerThanLg, setIsLargerThanLg] as const;
+};
+
+export const useDeviceLargerThanMd = () => {
+  const [isLargerThanMd, setIsLargerThanMd] = useAtom(isDeviceLargerThanMdAtom);
+
+  useEffect(() => {
+    const mdOrAboveHandler = function (this: MediaQueryList): void {
+      // sm -> md: matches will be true
+      // md -> sm: matches will be false
+      setIsLargerThanMd(this.matches);
+    };
+    const mql = addBreakpointListener(Breakpoint.MD, mdOrAboveHandler);
+
+    // initialize
+    setIsLargerThanMd(mql.matches);
+
+    return () => {
+      cleanupBreakpointListener(mql, mdOrAboveHandler);
+    };
+  }, [setIsLargerThanMd]);
+
+  return [isLargerThanMd, setIsLargerThanMd] as const;
+};
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useAtom(isMobileAtom);
+
+  useEffect(() => {
+    // Ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_device_detection
+    let hasTouchScreen = false;
+    hasTouchScreen = ('maxTouchPoints' in navigator) ? navigator?.maxTouchPoints > 0 : false;
+
+    if (!hasTouchScreen) {
+      const mQ = matchMedia?.('(pointer:coarse)');
+      if (mQ?.media === '(pointer:coarse)') {
+        hasTouchScreen = !!mQ.matches;
+      }
+      else {
+        // Only as a last resort, fall back to user agent sniffing
+        const UA = navigator.userAgent;
+        hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA)
+          || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
+      }
+    }
+
+    // Initialize with detected value
+    setIsMobile(hasTouchScreen);
+  }, [setIsMobile]);
+
+  return [isMobile, setIsMobile] as const;
+};

apps/app/src/states/ui/modal/page-status-alert.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+import type { EditorMode } from '../editor';
+
+/*
+* PageStatusAlert
+*/
+type OpenPageStatusAlertOptions = {
+  hideEditorMode?: EditorMode;
+  onRefleshPage?: () => void;
+  onResolveConflict?: () => void;
+};
+
+export type PageStatusAlertStatus = {
+  isOpen: boolean;
+  hideEditorMode?: EditorMode;
+  onRefleshPage?: () => void;
+  onResolveConflict?: () => void;
+};
+
+export type PageStatusAlertActions = {
+  open: (options: OpenPageStatusAlertOptions) => void;
+  close: () => void;
+};
+
+// Atom definition
+const pageStatusAlertAtom = atom<PageStatusAlertStatus>({
+  isOpen: false,
+});
+
+// Status hook (read-only, optimized for performance)
+export const usePageStatusAlertStatus = (): PageStatusAlertStatus => {
+  return useAtomValue(pageStatusAlertAtom);
+};
+
+// Actions hook (write-only, optimized for performance)
+export const usePageStatusAlertActions = (): PageStatusAlertActions => {
+  const setStatus = useSetAtom(pageStatusAlertAtom);
+
+  const open = useCallback((options: OpenPageStatusAlertOptions) => {
+    setStatus({ isOpen: true, ...options });
+  }, [setStatus]);
+
+  const close = useCallback(() => {
+    setStatus({ isOpen: false });
+  }, [setStatus]);
+
+  return { open, close };
+};

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

@@ -1,5 +1,5 @@
-import { atom, useAtom, useSetAtom } from 'jotai';
-import { useCallback, useMemo } from 'react';
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useMemo, type RefObject } from 'react';
 
 import { scheduleToPut } from '~/client/services/user-ui-settings';
 import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
@@ -120,3 +120,29 @@ export const useSidebarMode = (): {
     [sidebarMode, isDrawerMode, isCollapsedMode, isDockMode],
   );
 };
+
+// Sidebar scroller ref atom and hooks
+const sidebarScrollerRefAtom = atom<RefObject<HTMLDivElement | null> | null>(null);
+
+/**
+ * Hook to get the sidebar scroller ref
+ * Returns the HTMLDivElement if available, or null
+ */
+export const useSidebarScrollerElem = (): HTMLDivElement | null => {
+  const refObject = useAtomValue(sidebarScrollerRefAtom);
+  return refObject?.current ?? null;
+};
+
+/**
+ * Hook to set the sidebar scroller ref
+ * Accepts a RefObject and stores it in the atom
+ */
+export const useSetSidebarScrollerRef = () => {
+  const setSidebarScrollerRef = useSetAtom(sidebarScrollerRefAtom);
+
+  const mutate = useCallback((newRef: RefObject<HTMLDivElement | null>) => {
+    setSidebarScrollerRef(newRef);
+  }, [setSidebarScrollerRef]);
+
+  return mutate;
+};

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

@@ -0,0 +1,136 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect, useState, type RefObject } from 'react';
+import type { HtmlElementNode } from 'rehype-toc';
+
+import type { RendererOptions } from '~/interfaces/renderer-options';
+import type { RendererConfigExt } from '~/interfaces/services/renderer';
+import { useCurrentPagePath } from '~/states/page';
+import { useRendererConfig } from '~/states/server-configurations';
+import { useNextThemes } from '~/stores-universal/use-next-themes';
+
+import type { generateTocOptions } from '~/client/services/renderer/renderer';
+
+// ============================================================================
+// INTERNAL ATOMS (Implementation details, not exported)
+// ============================================================================
+
+/**
+ * Internal atom: TOC node RefObject storage
+ * Uses RefObject pattern for mutable DOM element references
+ * This is an implementation detail and should not be used directly
+ */
+const tocNodeRefAtom = atom<RefObject<HtmlElementNode> | null>(null);
+
+// ============================================================================
+// PUBLIC ATOMS (Main API for TOC state management)
+// ============================================================================
+
+/**
+ * Main TOC node atom: Extracts actual HtmlElementNode from RefObject
+ * This is the primary atom for accessing the current TOC node
+ */
+export const tocNodeAtom = atom((get) => {
+  const tocNodeRef = get(tocNodeRefAtom);
+  return tocNodeRef?.current ?? null;
+});
+
+/**
+ * Derived atom: TOC readiness check
+ * Returns true when TOC node is available
+ */
+export const tocNodeReadyAtom = atom((get) => {
+  const tocNode = get(tocNodeAtom);
+  return tocNode != null;
+});
+
+// ============================================================================
+// PERFORMANCE OPTIMIZATION
+// ============================================================================
+
+// Cache for dynamic import to avoid repeated loading
+let generateTocOptionsCache: typeof generateTocOptions | null = null;
+
+// ============================================================================
+// PUBLIC HOOKS (API for components)
+// ============================================================================
+
+/**
+ * Hook to get the current TOC node
+ * Returns the HtmlElementNode if available, or null
+ */
+export const useTocNode = (): HtmlElementNode | null => {
+  return useAtomValue(tocNodeAtom);
+};
+
+/**
+ * Hook to set the current TOC node
+ * Accepts HtmlElementNode and handles RefObject wrapping internally
+ */
+export const useSetTocNode = () => {
+  const setTocNodeRef = useSetAtom(tocNodeRefAtom);
+
+  const setTocNode = useCallback((newNode: HtmlElementNode) => {
+    // Create a RefObject wrapper for the HtmlElementNode
+    const nodeRef: RefObject<HtmlElementNode> = { current: newNode };
+    setTocNodeRef(nodeRef);
+  }, [setTocNodeRef]);
+
+  return setTocNode;
+};
+
+/**
+ * Core hook: TOC options with external dependencies
+ * Uses dynamic import for better performance
+ */
+export const useTocOptions = () => {
+  const currentPagePath = useCurrentPagePath();
+  const rendererConfig = useRendererConfig();
+  const { isDarkMode } = useNextThemes();
+  const tocNode = useAtomValue(tocNodeAtom);
+
+  const [state, setState] = useState<{ data?: RendererOptions; isLoading: boolean; error?: Error }>({
+    data: undefined, isLoading: false, error: undefined
+  });
+
+  useEffect(() => {
+    if (!currentPagePath || !rendererConfig) {
+      setState({ data: undefined, isLoading: false, error: undefined });
+      return;
+    }
+
+    if (!tocNode) {
+      setState({ data: undefined, isLoading: true, error: undefined });
+      return;
+    }
+
+    setState(prev => ({ ...prev, isLoading: true, error: undefined }));
+
+    (async () => {
+      try {
+        if (!generateTocOptionsCache) {
+          const { generateTocOptions } = await import('~/client/services/renderer/renderer');
+          generateTocOptionsCache = generateTocOptions;
+        }
+
+        const data = generateTocOptionsCache({ ...rendererConfig, isDarkMode }, tocNode);
+        setState({ data, isLoading: false, error: undefined });
+      } catch (err) {
+        setState({ data: undefined, isLoading: false, error: err instanceof Error ? err : new Error('TOC options generation failed') });
+      }
+    })();
+  }, [currentPagePath, rendererConfig, isDarkMode, tocNode]);
+
+  return state;
+};
+
+/**
+ * Hook for readiness check (combines atom + external deps)
+ * Only use this if you need the full readiness check including external deps
+ */
+export const useTocOptionsReady = (): boolean => {
+  const currentPagePath = useCurrentPagePath();
+  const rendererConfig = useRendererConfig();
+  const tocNode = useAtomValue(tocNodeAtom);
+
+  return !!(currentPagePath && rendererConfig && tocNode);
+};

apps/app/src/stores/alert.tsx

@@ -1,46 +0,0 @@
-import { useCallback } from 'react';
-
-import { useSWRStatic } from '@growi/core/dist/swr';
-import type { SWRResponse } from 'swr';
-
-import type { EditorMode } from '../states/ui/editor';
-
-/*
-* PageStatusAlert
-*/
-type OpenPageStatusAlertOptions = {
-  hideEditorMode?: EditorMode
-  onRefleshPage?: () => void
-  onResolveConflict?: () => void
-}
-
-type PageStatusAlertStatus = {
-  isOpen: boolean
-  hideEditorMode?: EditorMode,
-  onRefleshPage?: () => void
-  onResolveConflict?: () => void
-}
-
-type PageStatusAlertUtils = {
-  open: (openPageStatusAlert: OpenPageStatusAlertOptions) => void,
-  close: () => void,
-}
-export const usePageStatusAlert = (): SWRResponse<PageStatusAlertStatus, Error> & PageStatusAlertUtils => {
-  const initialData: PageStatusAlertStatus = { isOpen: false };
-  const swrResponse = useSWRStatic<PageStatusAlertStatus, Error>('pageStatusAlert', undefined, { fallbackData: initialData });
-  const { mutate } = swrResponse;
-
-  const open = useCallback(({ ...options }) => {
-    mutate({ isOpen: true, ...options });
-  }, [mutate]);
-
-  const close = useCallback(() => {
-    mutate({ isOpen: false });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};

apps/app/src/stores/renderer.tsx

@@ -8,11 +8,10 @@ import type { RendererOptions } from '~/interfaces/renderer-options';
 import type { RendererConfigExt } from '~/interfaces/services/renderer';
 import { useCurrentPagePath } from '~/states/page';
 import { useRendererConfig } from '~/states/server-configurations';
+import { useSetTocNode } from '~/states/ui/toc';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
 import loggerFactory from '~/utils/logger';
 
-import { useCurrentPageTocNode } from './ui';
-
 const logger = loggerFactory('growi:cli:services:renderer');
 
 const useRendererConfigExt = (): RendererConfigExt | null => {
@@ -29,11 +28,11 @@ const useRendererConfigExt = (): RendererConfigExt | null => {
 export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
   const currentPagePath = useCurrentPagePath();
   const rendererConfig = useRendererConfigExt();
-  const { mutate: mutateCurrentPageTocNode } = useCurrentPageTocNode();
+  const setTocNode = useSetTocNode();
 
   const storeTocNodeHandler = useCallback((toc: HtmlElementNode) => {
-    mutateCurrentPageTocNode(toc, { revalidate: false });
-  }, [mutateCurrentPageTocNode]);
+    setTocNode(toc);
+  }, [setTocNode]);
 
   const isAllDataValid = currentPagePath != null && rendererConfig != null;
   const customGenerater = getGrowiFacade().markdownRenderer?.optionsGenerators?.customGenerateViewOptions;
@@ -42,7 +41,7 @@ export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
     isAllDataValid
       ? ['viewOptions', currentPagePath, rendererConfig, customGenerater]
       : null,
-    async([, currentPagePath, rendererConfig]) => {
+    async ([, currentPagePath, rendererConfig]) => {
       if (customGenerater != null) {
         return customGenerater(currentPagePath, rendererConfig, storeTocNodeHandler);
       }
@@ -58,29 +57,6 @@ export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
   );
 };
 
-export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
-  const currentPagePath = useCurrentPagePath();
-  const rendererConfig = useRendererConfigExt();
-  const { data: tocNode } = useCurrentPageTocNode();
-
-  const isAllDataValid = currentPagePath != null && rendererConfig != null && tocNode != null;
-
-  return useSWR(
-    isAllDataValid
-      ? ['tocOptions', currentPagePath, tocNode, rendererConfig]
-      : null,
-    async([, , tocNode, rendererConfig]) => {
-      const { generateTocOptions } = await import('~/client/services/renderer/renderer');
-      return generateTocOptions(rendererConfig, tocNode);
-    },
-    {
-      keepPreviousData: true,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    },
-  );
-};
-
 export const usePreviewOptions = (): SWRResponse<RendererOptions, Error> => {
   const currentPagePath = useCurrentPagePath();
   const rendererConfig = useRendererConfigExt();
@@ -92,7 +68,7 @@ export const usePreviewOptions = (): SWRResponse<RendererOptions, Error> => {
     isAllDataValid
       ? ['previewOptions', rendererConfig, currentPagePath, customGenerater]
       : null,
-    async([, rendererConfig, pagePath]) => {
+    async ([, rendererConfig, pagePath]) => {
       if (customGenerater != null) {
         return customGenerater(rendererConfig, pagePath);
       }
@@ -118,7 +94,7 @@ export const useCommentForCurrentPageOptions = (): SWRResponse<RendererOptions,
     isAllDataValid
       ? ['commentPreviewOptions', rendererConfig, currentPagePath]
       : null,
-    async([, rendererConfig, currentPagePath]) => {
+    async ([, rendererConfig, currentPagePath]) => {
       const { generateSimpleViewOptions } = await import('~/client/services/renderer/renderer');
       return generateSimpleViewOptions(
         rendererConfig,
@@ -145,7 +121,7 @@ export const useSelectedPagePreviewOptions = (pagePath: string, highlightKeyword
     isAllDataValid
       ? ['selectedPagePreviewOptions', rendererConfig, pagePath, highlightKeywords]
       : null,
-    async([, rendererConfig, pagePath, highlightKeywords]) => {
+    async ([, rendererConfig, pagePath, highlightKeywords]) => {
       const { generateSimpleViewOptions } = await import('~/client/services/renderer/renderer');
       return generateSimpleViewOptions(rendererConfig, pagePath, highlightKeywords);
     },
@@ -168,7 +144,7 @@ export const useCustomSidebarOptions = (config?: SWRConfiguration): SWRResponse<
     isAllDataValid
       ? ['customSidebarOptions', rendererConfig]
       : null,
-    async([, rendererConfig]) => {
+    async ([, rendererConfig]) => {
       const { generateSimpleViewOptions } = await import('~/client/services/renderer/renderer');
       return generateSimpleViewOptions(rendererConfig, '/');
     },
@@ -197,7 +173,7 @@ export const usePresentationViewOptions = (): SWRResponse<RendererOptions, Error
     isAllDataValid
       ? ['presentationViewOptions', currentPagePath, rendererConfig]
       : null,
-    async([, currentPagePath, rendererConfig]) => {
+    async ([, currentPagePath, rendererConfig]) => {
       const { generatePresentationViewOptions } = await import('~/client/services/renderer/renderer');
       return generatePresentationViewOptions(rendererConfig, currentPagePath);
     },

apps/app/src/stores/ui.tsx

@@ -1,16 +1,13 @@
 import {
-  type RefObject, useCallback, useEffect,
+  useCallback,
   useLayoutEffect,
 } from 'react';
 
 import { useSWRStatic } from '@growi/core/dist/swr';
-import { pagePathUtils, isClient } from '@growi/core/dist/utils';
-import { Breakpoint } from '@growi/ui/dist/interfaces';
-import { addBreakpointListener, cleanupBreakpointListener } from '@growi/ui/dist/utils';
+import { pagePathUtils } from '@growi/core/dist/utils';
 import { useRouter } from 'next/router';
-import type { HtmlElementNode } from 'rehype-toc';
 import {
-  useSWRConfig, type SWRResponse, type Key,
+  type SWRResponse,
 } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
@@ -33,116 +30,11 @@ const { isTrashTopPage, isUsersTopPage } = pagePathUtils;
 const logger = loggerFactory('growi:stores:ui');
 
 
-/** **********************************************************
- *                     Storing objects to ref
- *********************************************************** */
-
-export const useCurrentPageTocNode = (): SWRResponse<HtmlElementNode, any> => {
-  const currentPagePath = useCurrentPagePath();
-
-  return useStaticSWR(['currentPageTocNode', currentPagePath]);
-};
-
 /** **********************************************************
  *                          SWR Hooks
  *                      for switching UI
  *********************************************************** */
 
-export const useSidebarScrollerRef = (initialData?: RefObject<HTMLDivElement | null>): SWRResponse<RefObject<HTMLDivElement | null>, Error> => {
-  return useSWRStatic<RefObject<HTMLDivElement | null>, Error>('sidebarScrollerRef', initialData);
-};
-
-//
-export const useIsMobile = (): SWRResponse<boolean, Error> => {
-  const key = isClient() ? 'isMobile' : null;
-
-  let configuration = {
-    fallbackData: false,
-  };
-
-  if (isClient()) {
-
-    // Ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_device_detection
-    let hasTouchScreen = false;
-    hasTouchScreen = ('maxTouchPoints' in navigator) ? navigator?.maxTouchPoints > 0 : false;
-
-    if (!hasTouchScreen) {
-      const mQ = matchMedia?.('(pointer:coarse)');
-      if (mQ?.media === '(pointer:coarse)') {
-        hasTouchScreen = !!mQ.matches;
-      }
-      else {
-      // Only as a last resort, fall back to user agent sniffing
-        const UA = navigator.userAgent;
-        hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA)
-      || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
-      }
-    }
-
-    configuration = {
-      fallbackData: hasTouchScreen,
-    };
-  }
-
-  return useSWRStatic<boolean, Error>(key, undefined, configuration);
-};
-
-export const useIsDeviceLargerThanMd = (): SWRResponse<boolean, Error> => {
-  const key: Key = isClient() ? 'isDeviceLargerThanMd' : null;
-
-  const { cache, mutate } = useSWRConfig();
-
-  useEffect(() => {
-    if (key != null) {
-      const mdOrAvobeHandler = function(this: MediaQueryList): void {
-        // sm -> md: matches will be true
-        // md -> sm: matches will be false
-        mutate(key, this.matches);
-      };
-      const mql = addBreakpointListener(Breakpoint.MD, mdOrAvobeHandler);
-
-      // initialize
-      if (cache.get(key)?.data == null) {
-        cache.set(key, { ...cache.get(key), data: mql.matches });
-      }
-
-      return () => {
-        cleanupBreakpointListener(mql, mdOrAvobeHandler);
-      };
-    }
-  }, [cache, key, mutate]);
-
-  return useSWRStatic(key);
-};
-
-export const useIsDeviceLargerThanLg = (): SWRResponse<boolean, Error> => {
-  const key: Key = isClient() ? 'isDeviceLargerThanLg' : null;
-
-  const { cache, mutate } = useSWRConfig();
-
-  useEffect(() => {
-    if (key != null) {
-      const lgOrAvobeHandler = function(this: MediaQueryList): void {
-        // md -> lg: matches will be true
-        // lg -> md: matches will be false
-        mutate(key, this.matches);
-      };
-      const mql = addBreakpointListener(Breakpoint.LG, lgOrAvobeHandler);
-
-      // initialize
-      if (cache.get(key)?.data == null) {
-        cache.set(key, { ...cache.get(key), data: mql.matches });
-      }
-
-      return () => {
-        cleanupBreakpointListener(mql, lgOrAvobeHandler);
-      };
-    }
-  }, [cache, key, mutate]);
-
-  return useSWRStatic(key);
-};
-
 type PageTreeDescCountMapUtils = {
   update(newData?: UpdateDescCountData): Promise<UpdateDescCountData | undefined>
   getDescCount(pageId?: string): number | null | undefined
@@ -173,7 +65,7 @@ export const useCommentEditorDirtyMap = (): SWRResponse<Map<string, boolean>, Er
 
   const { mutate } = swrResponse;
 
-  const evaluate = useCallback(async(key: string, commentBody: string) => {
+  const evaluate = useCallback(async (key: string, commentBody: string) => {
     const newMap = await mutate((map) => {
       if (map == null) return new Map();
 
@@ -188,7 +80,7 @@ export const useCommentEditorDirtyMap = (): SWRResponse<Map<string, boolean>, Er
     });
     return newMap?.size ?? 0;
   }, [mutate]);
-  const clean = useCallback(async(key: string) => {
+  const clean = useCallback(async (key: string) => {
     const newMap = await mutate((map) => {
       if (map == null) return new Map();
       map.delete(key);
@@ -311,16 +203,3 @@ export const useIsAbleToShowPageAuthors = (): SWRResponse<boolean, Error> => {
     () => isPageExist && !isUsersTopPagePath,
   );
 };
-
-export const useIsUntitledPage = (): SWRResponse<boolean> => {
-  const key = 'isUntitledPage';
-
-  const pageId = useCurrentPageId();
-
-  return useSWRStatic(
-    pageId == null ? null : [key, pageId],
-    undefined,
-    { fallbackData: false },
-  );
-
-};