From 0acb04bdef77e2be60d0a7d4db521c03448f81d9 Mon Sep 17 00:00:00 2001
From: wadackel <wadackel@gmail.com>
Date: Sun, 28 Apr 2024 11:49:06 +0900
Subject: [PATCH] refactor: migrate to jotai from unstated-next

---
 package.json                                  |   3 +-
 src/App/App.tsx                               |  90 +++-----
 src/App/index.tsx                             |  38 +---
 src/components/ChoiceGroup/ChoiceGroup.tsx    |  52 ++---
 src/components/Dialog/Dialog.css.ts           |   1 +
 src/components/Dialog/Dialog.tsx              |  23 +-
 src/components/Header/Header.tsx              |  11 +-
 src/components/Main/Main.tsx                  |  23 +-
 src/components/Notification/index.tsx         |   6 +-
 src/components/Sidebar/Sidebar.tsx            |  25 ++-
 .../Sidebar/internal/Desktop/Desktop.tsx      |   8 +-
 .../Sidebar/internal/Mobile/Mobile.tsx        |  37 ++--
 .../internal/SidebarInner/SidebarInner.tsx    |  55 +++--
 src/components/Viewer/Viewer.tsx              | 209 ++++++++----------
 src/components/Viewer/index.tsx               | 141 ++++++++++--
 src/containers/entity/EntityContainer.ts      | 103 ---------
 .../notification/NotificationContainer.ts     |  30 ---
 src/containers/sidebar/SidebarContainer.ts    |  69 ------
 src/containers/viewer/ViewerContainer.ts      | 146 ------------
 src/hooks/useKey.ts                           |  27 +++
 src/hooks/useMousetrap.ts                     |  35 ---
 src/hooks/usePrevious.ts                      |  11 +
 src/index.tsx                                 |  22 +-
 src/states/entity.ts                          | 110 +++++++++
 src/states/notification.ts                    |  50 +++++
 src/states/sidebar.ts                         |  75 +++++++
 src/states/worker.ts                          |  17 ++
 src/types/store.ts                            |   3 +
 yarn.lock                                     |  15 +-
 29 files changed, 704 insertions(+), 731 deletions(-)
 delete mode 100644 src/containers/entity/EntityContainer.ts
 delete mode 100644 src/containers/notification/NotificationContainer.ts
 delete mode 100644 src/containers/sidebar/SidebarContainer.ts
 delete mode 100644 src/containers/viewer/ViewerContainer.ts
 create mode 100644 src/hooks/useKey.ts
 delete mode 100644 src/hooks/useMousetrap.ts
 create mode 100644 src/hooks/usePrevious.ts
 create mode 100644 src/states/entity.ts
 create mode 100644 src/states/notification.ts
 create mode 100644 src/states/sidebar.ts
 create mode 100644 src/states/worker.ts
 create mode 100644 src/types/store.ts

diff --git a/package.json b/package.json
index 8739f81..efe277d 100644
--- a/package.json
+++ b/package.json
@@ -55,9 +55,9 @@
     "focus-trap": "^7.5.4",
     "fuse.js": "^7.0.0",
     "history": "^5.3.0",
+    "jotai": "^2.8.0",
     "keycode": "^2.2.0",
     "mitt": "^3.0.1",
-    "mousetrap": "^1.6.5",
     "query-string": "^7.0.1",
     "rc-slider": "^10.5.0",
     "re-resizable": "^6.9.11",
@@ -65,6 +65,7 @@
     "react-dom": "18.2.0",
     "react-md-spinner": "^1.0.0",
     "react-transition-group": "^4.4.5",
+    "tinykeys": "^2.1.0",
     "unstated-next": "^1.1.0",
     "use-intersection": "^0.2.1",
     "x-img-diff-js": "^0.3.5"
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 8312020..86f3509 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -8,20 +8,19 @@ import { Notification } from '../components/Notification';
 import { Sidebar } from '../components/Sidebar';
 import { Viewer } from '../components/Viewer';
 import { HelpIcon } from '../components/icons/HelpIcon';
-import { EntityContainer } from '../containers/entity/EntityContainer';
-import { SidebarContainer } from '../containers/sidebar/SidebarContainer';
-import { useMousetrap } from '../hooks/useMousetrap';
-import { findFirstFocusable } from '../utils/selector';
+import { useKey } from '../hooks/useKey';
+import { useEntities } from '../states/entity';
+import { useSidebarMutators } from '../states/sidebar';
 import { Color } from '../styles/variables.css';
+import { findFirstFocusable } from '../utils/selector';
 import * as styles from './App.css';
 
 export type Props = {};
 
 export const App = () => {
-  const sidebar = SidebarContainer.useContainer();
+  const { toggle: toggleSidebar } = useSidebarMutators();
 
-  const { newItems, failedItems, deletedItems, passedItems } =
-    EntityContainer.useContainer();
+  const { newItems, failedItems, deletedItems, passedItems } = useEntities();
 
   const [helpDialogOpen, setHelpDialogOpen] = useState(false);
 
@@ -37,7 +36,7 @@ export const App = () => {
     setHelpDialogOpen(false);
   }, []);
 
-  useMousetrap(['/', 's'], null, (e) => {
+  useKey(null, ['/', 's'], (e) => {
     e.preventDefault();
 
     if (filterRef.current != null) {
@@ -45,7 +44,7 @@ export const App = () => {
     }
   });
 
-  useMousetrap('g s', null, () => {
+  useKey(null, ['g s'], () => {
     const { current: list } = listRef;
     if (list == null) {
       return;
@@ -59,60 +58,35 @@ export const App = () => {
     first.focus();
   });
 
-  useMousetrap(
-    'g c',
-    null,
-    () => {
-      if (failedItems.length > 0) {
-        window.location.hash = 'changed';
-      }
-    },
-    [failedItems],
-  );
+  useKey(null, ['g c'], () => {
+    if (failedItems.length > 0) {
+      window.location.hash = 'changed';
+    }
+  });
 
-  useMousetrap(
-    'g n',
-    null,
-    () => {
-      if (newItems.length > 0) {
-        window.location.hash = 'new';
-      }
-    },
-    [newItems],
-  );
+  useKey(null, ['g n'], () => {
+    if (newItems.length > 0) {
+      window.location.hash = 'new';
+    }
+  });
 
-  useMousetrap(
-    'g d',
-    null,
-    () => {
-      if (deletedItems.length > 0) {
-        window.location.hash = 'deleted';
-      }
-    },
-    [deletedItems],
-  );
+  useKey(null, ['g d'], () => {
+    if (deletedItems.length > 0) {
+      window.location.hash = 'deleted';
+    }
+  });
 
-  useMousetrap(
-    'g p',
-    null,
-    () => {
-      if (passedItems.length > 0) {
-        window.location.hash = 'passed';
-      }
-    },
-    [passedItems],
-  );
+  useKey(null, ['g p'], () => {
+    if (passedItems.length > 0) {
+      window.location.hash = 'passed';
+    }
+  });
 
-  useMousetrap(
-    'f',
-    null,
-    () => {
-      sidebar.toggle();
-    },
-    [sidebar],
-  );
+  useKey(null, ['f'], () => {
+    toggleSidebar();
+  });
 
-  useMousetrap('?', null, () => {
+  useKey(null, ['Shift+?'], () => {
     setHelpDialogOpen(true);
   });
 
diff --git a/src/App/index.tsx b/src/App/index.tsx
index d24559f..d3b012d 100644
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@@ -1,34 +1,20 @@
+import { Provider } from 'jotai';
 import React from 'react';
-import type { RegData } from '../types/reg';
-import { EntityContainer } from '../containers/entity/EntityContainer';
-import { ViewerContainer } from '../containers/viewer/ViewerContainer';
-import { NotificationContainer } from '../containers/notification/NotificationContainer';
-import { HistoryContextProvider } from '../context/HistoryContext';
 import { AnchorScrollProvider } from '../context/AnchorScrollContext';
-import type { WorkerClient } from '../worker-client';
-import { WorkerContext } from '../context/WorkerContext';
-import { SidebarContainer } from '../containers/sidebar/SidebarContainer';
+import { HistoryContextProvider } from '../context/HistoryContext';
+import type { Store } from '../types/store';
 import { App as Component } from './App';
 
 export type Props = {
-  data: RegData;
-  worker: WorkerClient;
+  store: Store;
 };
 
-export const App = ({ data, worker }: Props) => (
-  <HistoryContextProvider>
-    <AnchorScrollProvider>
-      <WorkerContext.Provider value={worker}>
-        <NotificationContainer.Provider>
-          <EntityContainer.Provider initialState={data}>
-            <SidebarContainer.Provider initialState={data.links}>
-              <ViewerContainer.Provider>
-                <Component />
-              </ViewerContainer.Provider>
-            </SidebarContainer.Provider>
-          </EntityContainer.Provider>
-        </NotificationContainer.Provider>
-      </WorkerContext.Provider>
-    </AnchorScrollProvider>
-  </HistoryContextProvider>
+export const App = ({ store }: Props) => (
+  <Provider store={store}>
+    <HistoryContextProvider>
+      <AnchorScrollProvider>
+        <Component />
+      </AnchorScrollProvider>
+    </HistoryContextProvider>
+  </Provider>
 );
diff --git a/src/components/ChoiceGroup/ChoiceGroup.tsx b/src/components/ChoiceGroup/ChoiceGroup.tsx
index cb12eec..3060737 100644
--- a/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { useMousetrap } from '../../hooks/useMousetrap';
+import { useKey } from '../../hooks/useKey';
 import type { Modify } from '../../utils/types';
 import * as styles from './ChoiceGroup.css';
 import { ChoiceButton } from './internal/ChoiceButton';
@@ -64,41 +64,31 @@ export const ChoiceGroup = ({ value, options, onChange, ...rest }: Props) => {
     changedByKey.current = false;
   }, [buttonRefList, options, value]);
 
-  useMousetrap(
-    ['right', 'l'],
-    rootRef.current,
-    (e) => {
-      e.stopPropagation();
+  useKey(rootRef, ['right', 'l'], (e) => {
+    e.stopPropagation();
 
-      const current = getValueIndex(options, value);
-      const next = current + 1;
-      if (next >= options.length) {
-        return;
-      }
+    const current = getValueIndex(options, value);
+    const next = current + 1;
+    if (next >= options.length) {
+      return;
+    }
 
-      changedByKey.current = true;
-      onChange(options[next].value, next);
-    },
-    [options, value, onChange],
-  );
+    changedByKey.current = true;
+    onChange(options[next].value, next);
+  });
 
-  useMousetrap(
-    ['left', 'h'],
-    rootRef.current,
-    (e) => {
-      e.stopPropagation();
+  useKey(rootRef, ['left', 'h'], (e) => {
+    e.stopPropagation();
 
-      const current = getValueIndex(options, value);
-      const previous = current - 1;
-      if (previous < 0) {
-        return;
-      }
+    const current = getValueIndex(options, value);
+    const previous = current - 1;
+    if (previous < 0) {
+      return;
+    }
 
-      changedByKey.current = true;
-      onChange(options[previous].value, previous);
-    },
-    [options, value, onChange],
-  );
+    changedByKey.current = true;
+    onChange(options[previous].value, previous);
+  });
 
   return (
     <ul {...rest} ref={rootRef} className={styles.wrapper}>
diff --git a/src/components/Dialog/Dialog.css.ts b/src/components/Dialog/Dialog.css.ts
index 77163a9..eae017e 100644
--- a/src/components/Dialog/Dialog.css.ts
+++ b/src/components/Dialog/Dialog.css.ts
@@ -71,6 +71,7 @@ export const content = style({
   padding: Space * 5,
   borderRadius: 4,
   boxShadow: tokens.shadow.lv2,
+  background: tokens.color.white,
   transitionProperty: 'opacity, transform',
   WebkitTapHighlightColor: 'transparent',
   ':focus': {
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 8e87469..5ad4448 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,14 +1,14 @@
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import type { FocusTrap } from 'focus-trap';
 import { createFocusTrap } from 'focus-trap';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { useMousetrap } from '../../hooks/useMousetrap';
+import { useKey } from '../../hooks/useKey';
+import { Color, Duration } from '../../styles/variables.css';
 import type { Modify } from '../../utils/types';
 import { IconButton } from '../IconButton';
 import { CloseIcon } from '../icons/CloseIcon';
 import { Portal } from '../internal/Portal';
-import { Color, Duration } from '../../styles/variables.css';
 import * as styles from './Dialog.css';
 
 const allowOutsideClick = () => true;
@@ -31,8 +31,6 @@ export const Dialog = ({
   onRequestClose,
   ...rest
 }: Props) => {
-  const [mounted, setMounted] = useState(false);
-
   const bodyRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
   const focusRef = useRef<FocusTrap | null>(null);
@@ -49,8 +47,6 @@ export const Dialog = ({
     focusRef.current.activate();
 
     disableBodyScroll(body);
-
-    setMounted(true);
   }, []);
 
   const handleExit = useCallback(() => {
@@ -63,8 +59,6 @@ export const Dialog = ({
 
     focus.deactivate();
     enableBodyScroll(body);
-
-    setMounted(false);
   }, []);
 
   const handleCloseClick = useCallback(
@@ -90,14 +84,9 @@ export const Dialog = ({
     [],
   );
 
-  useMousetrap(
-    'esc',
-    bodyRef.current,
-    () => {
-      onRequestClose();
-    },
-    [mounted, onRequestClose],
-  );
+  useKey(bodyRef, ['Escape'], () => {
+    onRequestClose();
+  });
 
   return (
     <Portal>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5915752..43a075d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -16,7 +16,7 @@ export type Props = {
   max: number;
   markersEnabled: boolean;
   onRequestClose: () => void;
-  onMarkersToggle: (enabled: boolean) => void;
+  onMarkersToggle: () => void;
 };
 
 export const Header = ({
@@ -38,12 +38,9 @@ export const Header = ({
     [onRequestClose],
   );
 
-  const handleToggle = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onMarkersToggle(e.currentTarget.checked);
-    },
-    [onMarkersToggle],
-  );
+  const handleToggle = useCallback(() => {
+    onMarkersToggle();
+  }, [onMarkersToggle]);
 
   return (
     <header className={styles.wrapper}>
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 1930567..adf825f 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { EntityContainer } from '../../containers/entity/EntityContainer';
-import { NotificationContainer } from '../../containers/notification/NotificationContainer';
+import { useEntities, useEntityFilter } from '../../states/entity';
+import { useNotify } from '../../states/notification';
 import { BreakPoint, Size, Space } from '../../styles/variables.css';
 import type { RegEntity, RegVariant } from '../../types/reg';
 import { Card } from '../Card';
@@ -47,12 +47,12 @@ const Content = ({
   variant: RegVariant;
   entities: RegEntity[];
 }) => {
-  const notification = NotificationContainer.useContainer();
+  const notify = useNotify();
   const title = titles[variant];
 
   const handleCopy = useCallback(() => {
-    notification.notify('Copied URL to clipboard');
-  }, [notification]);
+    notify('Copied URL to clipboard');
+  }, [notify]);
 
   if (entities.length < 1) {
     return null;
@@ -83,13 +83,14 @@ const Content = ({
 };
 
 export const Main = () => {
-  const entities = EntityContainer.useContainer();
+  const entity = useEntities();
+  const [isFiltering] = useEntityFilter();
 
   return (
     <Container>
       <h1 className={styles.title}>REPORT DETAIL</h1>
 
-      {entities.filtering && entities.allItems.length === 0 ? (
+      {isFiltering && entity.allItems.length === 0 ? (
         <>
           <h2 className={styles.sectionTitle}>Not found</h2>
           <p>
@@ -100,10 +101,10 @@ export const Main = () => {
         </>
       ) : (
         <>
-          <Content variant="changed" entities={entities.failedItems} />
-          <Content variant="new" entities={entities.newItems} />
-          <Content variant="deleted" entities={entities.deletedItems} />
-          <Content variant="passed" entities={entities.passedItems} />
+          <Content variant="changed" entities={entity.failedItems} />
+          <Content variant="new" entities={entity.newItems} />
+          <Content variant="deleted" entities={entity.deletedItems} />
+          <Content variant="passed" entities={entity.passedItems} />
         </>
       )}
     </Container>
diff --git a/src/components/Notification/index.tsx b/src/components/Notification/index.tsx
index c2e8678..b076582 100644
--- a/src/components/Notification/index.tsx
+++ b/src/components/Notification/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { NotificationContainer } from '../../containers/notification/NotificationContainer';
+import { useNotificationMessage } from '../../states/notification';
 import { Notification as Component } from './Notification';
 
 export type Props = {};
 
 export const Notification = () => {
-  const notification = NotificationContainer.useContainer();
+  const message = useNotificationMessage();
 
-  return <Component show={notification.show} message={notification.message} />;
+  return <Component show={message != null} message={message ?? ''} />;
 };
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index fd41ba7..bc81c84 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,13 +1,28 @@
-import React from 'react';
-import { SidebarContainer } from '../../containers/sidebar/SidebarContainer';
+import React, { useEffect } from 'react';
+import { useMedia } from '../../hooks/useMedia';
+import { BreakPoint } from '../../styles/variables.css';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useSidebarMutators } from '../../states/sidebar';
 import { Desktop } from './internal/Desktop';
-import type { Props } from './types';
 import { Mobile } from './internal/Mobile';
+import type { Props } from './types';
 
 export type { Props };
 
 export const Sidebar = (props: Props) => {
-  const sidebar = SidebarContainer.useContainer();
+  const { open, close } = useSidebarMutators();
+  const isDesktop = useMedia(`(min-width: ${BreakPoint.MEDIUM}px)`);
+  const prevIsDesktop = usePrevious(isDesktop);
+
+  useEffect(() => {
+    if (isDesktop !== prevIsDesktop) {
+      if (isDesktop) {
+        open();
+      } else {
+        close();
+      }
+    }
+  }, [open, close, isDesktop, prevIsDesktop]);
 
-  return sidebar.isDesktop ? <Desktop {...props} /> : <Mobile {...props} />;
+  return isDesktop ? <Desktop {...props} /> : <Mobile {...props} />;
 };
diff --git a/src/components/Sidebar/internal/Desktop/Desktop.tsx b/src/components/Sidebar/internal/Desktop/Desktop.tsx
index 0bac212..430c00a 100644
--- a/src/components/Sidebar/internal/Desktop/Desktop.tsx
+++ b/src/components/Sidebar/internal/Desktop/Desktop.tsx
@@ -1,7 +1,7 @@
 import { Resizable } from 're-resizable';
 import React from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import { SidebarContainer } from '../../../../containers/sidebar/SidebarContainer';
+import { useSidebarState } from '../../../../states/sidebar';
 import { Duration } from '../../../../styles/variables.css';
 import type { Props } from '../../types';
 import { SidebarInner } from '../SidebarInner';
@@ -12,13 +12,13 @@ const DEFAULT_WIDTH = 300;
 export type { Props };
 
 export const Desktop = (props: Props) => {
-  const sidebar = SidebarContainer.useContainer();
+  const { isOpen } = useSidebarState();
 
   return (
     <CSSTransition
       appear
       classNames="sidebar"
-      in={sidebar.isOpen}
+      in={isOpen}
       timeout={{
         enter: Duration.SLIDE_IN,
         exit: Duration.SLIDE_OUT,
@@ -43,7 +43,7 @@ export const Desktop = (props: Props) => {
           top: false,
           topRight: false,
           topLeft: false,
-          right: sidebar.isOpen,
+          right: isOpen,
           bottom: false,
           bottomRight: false,
           bottomLeft: false,
diff --git a/src/components/Sidebar/internal/Mobile/Mobile.tsx b/src/components/Sidebar/internal/Mobile/Mobile.tsx
index 6f94e1f..20ee972 100644
--- a/src/components/Sidebar/internal/Mobile/Mobile.tsx
+++ b/src/components/Sidebar/internal/Mobile/Mobile.tsx
@@ -7,17 +7,21 @@ import type { FocusTrap } from 'focus-trap';
 import { createFocusTrap } from 'focus-trap';
 import React, { useCallback, useEffect, useRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import { SidebarContainer } from '../../../../containers/sidebar/SidebarContainer';
-import { useMousetrap } from '../../../../hooks/useMousetrap';
+import { useKey } from '../../../../hooks/useKey';
+import {
+  useSidebarMutators,
+  useSidebarState,
+} from '../../../../states/sidebar';
+import { Duration } from '../../../../styles/variables.css';
 import type { Props } from '../../types';
 import { SidebarInner } from '../SidebarInner';
-import { Duration } from '../../../../styles/variables.css';
 import * as styles from './Mobile.css';
 
 export type { Props };
 
 export const Mobile = (props: Props) => {
-  const sidebar = SidebarContainer.useContainer();
+  const { isOpen } = useSidebarState();
+  const { close } = useSidebarMutators();
 
   const focusRef = useRef<FocusTrap | null>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -26,9 +30,9 @@ export const Mobile = (props: Props) => {
   const handleBackdropClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
-      sidebar.close();
+      close();
     },
-    [sidebar],
+    [close],
   );
 
   useEffect(() => {
@@ -55,31 +59,26 @@ export const Mobile = (props: Props) => {
       return;
     }
 
-    if (sidebar.isOpen) {
+    if (isOpen) {
       focus.activate();
       disableBodyScroll(scroller);
     } else {
       focus.deactivate();
       enableBodyScroll(scroller);
     }
-  }, [sidebar.isOpen]);
+  }, [isOpen]);
 
-  useMousetrap(
-    'esc',
-    wrapperRef.current,
-    () => {
-      if (sidebar.isOpen) {
-        sidebar.close();
-      }
-    },
-    [sidebar.isOpen],
-  );
+  useKey(wrapperRef, ['Escape'], () => {
+    if (isOpen) {
+      close();
+    }
+  });
 
   return (
     <CSSTransition
       appear
       classNames="sidebar"
-      in={sidebar.isOpen}
+      in={isOpen}
       timeout={{
         enter: Duration.SLIDE_IN,
         exit: Duration.SLIDE_OUT,
diff --git a/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx b/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx
index 2dfc6d2..dbb29ac 100644
--- a/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx
+++ b/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx
@@ -1,7 +1,11 @@
 import React, { createRef, useCallback } from 'react';
-import { EntityContainer } from '../../../../containers/entity/EntityContainer';
-import { SidebarContainer } from '../../../../containers/sidebar/SidebarContainer';
-import { useMousetrap } from '../../../../hooks/useMousetrap';
+import { useKey } from '../../../../hooks/useKey';
+import { useEntities, useEntityFilter } from '../../../../states/entity';
+import {
+  useSidebarEntities,
+  useSidebarMutators,
+  useSidebarState,
+} from '../../../../states/sidebar';
 import { Color } from '../../../../styles/variables.css';
 import { tryNextFocus, tryPreviousFocus } from '../../../../utils/focus';
 import { List } from '../../../List';
@@ -23,24 +27,27 @@ export type Props = {
 };
 
 export const SidebarInner = ({ scrollerRef, inputRef, listRef }: Props) => {
-  const entities = EntityContainer.useContainer();
-  const sidebar = SidebarContainer.useContainer();
+  const [isFiltered, filter] = useEntityFilter();
+  const { isOpen, links } = useSidebarState();
+  const { toggle } = useSidebarMutators();
+  const sidebarEntity = useSidebarEntities();
+  const entity = useEntities();
   const innerRef = scrollerRef || createRef();
 
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      entities.filter(e.target.value);
+      filter(e.target.value);
     },
-    [entities],
+    [filter],
   );
 
-  useMousetrap(['up', 'k'], innerRef.current, (e) => {
+  useKey(innerRef, ['ArrowUp', 'k'], (e) => {
     e.preventDefault();
     e.stopPropagation();
     tryPreviousFocus(innerRef.current);
   });
 
-  useMousetrap(['down', 'j'], innerRef.current, (e) => {
+  useKey(innerRef, ['ArrowDown', 'j'], (e) => {
     e.preventDefault();
     e.stopPropagation();
     tryNextFocus(innerRef.current);
@@ -60,41 +67,41 @@ export const SidebarInner = ({ scrollerRef, inputRef, listRef }: Props) => {
         <div ref={listRef}>
           <List header="SUMMARY">
             <Summary
-              forceOpen={entities.filtering}
+              forceOpen={isFiltered}
               label="CHANGED"
               icon={<SignChangedIcon fill={Color.SIGN_CHANGED} />}
-              items={sidebar.failedItems}
-              size={entities.failedItems.length}
+              items={sidebarEntity.failedItems}
+              size={entity.failedItems.length}
             />
             <Summary
-              forceOpen={entities.filtering}
+              forceOpen={isFiltered}
               label="NEW"
               icon={<SignNewIcon fill={Color.SIGN_NEW} />}
-              items={sidebar.newItems}
-              size={entities.newItems.length}
+              items={sidebarEntity.newItems}
+              size={entity.newItems.length}
             />
             <Summary
-              forceOpen={entities.filtering}
+              forceOpen={isFiltered}
               label="DELETED"
               icon={<SignDeletedIcon fill={Color.SIGN_DELETED} />}
-              items={sidebar.deletedItems}
-              size={entities.deletedItems.length}
+              items={sidebarEntity.deletedItems}
+              size={entity.deletedItems.length}
             />
             <Summary
-              forceOpen={entities.filtering}
+              forceOpen={isFiltered}
               label="PASSED"
               icon={<SignPassedIcon fill={Color.SIGN_PASSED} />}
-              items={sidebar.passedItems}
-              size={entities.passedItems.length}
+              items={sidebarEntity.passedItems}
+              size={entity.passedItems.length}
             />
           </List>
         </div>
 
         <Spacer variant="margin" x={3} />
 
-        {sidebar.links.length > 0 && (
+        {links.length > 0 && (
           <List header="LINKS">
-            {sidebar.links.map(({ label, href }) => (
+            {links.map(({ label, href }) => (
               <List.Item key={label} href={href}>
                 {label}
               </List.Item>
@@ -108,7 +115,7 @@ export const SidebarInner = ({ scrollerRef, inputRef, listRef }: Props) => {
       </div>
 
       <div className={styles.toggleWrapper}>
-        <Toggle open={sidebar.isOpen} onClick={sidebar.toggle} />
+        <Toggle open={isOpen} onClick={toggle} />
       </div>
     </>
   );
diff --git a/src/components/Viewer/Viewer.tsx b/src/components/Viewer/Viewer.tsx
index 17dbb93..bff50f1 100644
--- a/src/components/Viewer/Viewer.tsx
+++ b/src/components/Viewer/Viewer.tsx
@@ -3,8 +3,7 @@ import type { FocusTrap } from 'focus-trap';
 import { createFocusTrap } from 'focus-trap';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import TransitionGroup from 'react-transition-group/TransitionGroup';
-import { useMousetrap } from '../../hooks/useMousetrap';
+import { useKey } from '../../hooks/useKey';
 import { Color, Duration } from '../../styles/variables.css';
 import type { Matching, RegEntity } from '../../types/reg';
 import { Header } from '../Header';
@@ -13,6 +12,7 @@ import { ArrowLeftIcon } from '../icons/ArrowLeftIcon';
 import { ArrowRightIcon } from '../icons/ArrowRightIcon';
 import { Portal } from '../internal/Portal';
 import { Transparent } from '../internal/Transparent';
+import { usePrevious } from '../../hooks/usePrevious';
 import * as styles from './Viewer.css';
 import { OPEN_DELAY } from './constants';
 import { ComparisonView } from './internal/ComparisonView';
@@ -26,7 +26,7 @@ export type Props = {
   onNext: () => void;
   onPrevious: () => void;
   onRequestClose: () => void;
-  onMarkersToggle: (enabled: boolean) => void;
+  onMarkersToggle: () => void;
 };
 
 export const Viewer = ({
@@ -45,6 +45,7 @@ export const Viewer = ({
   const rootRef = useRef<HTMLDivElement>(null);
   const scrollerRef = useRef<HTMLDivElement>(null);
   const focusRef = useRef<FocusTrap | null>(null);
+  const previousEntity = usePrevious(entity);
 
   const handleEnter = useCallback(() => {
     const { current: root } = rootRef;
@@ -57,12 +58,12 @@ export const Viewer = ({
 
   const handleExit = useCallback(() => {
     const { current: root } = rootRef;
-    if (entity == null || root == null) {
+    if (root == null) {
       return;
     }
 
     setMounted(false);
-  }, [entity]);
+  }, []);
 
   const handlePreviousClick = useCallback(
     (e: React.MouseEvent) => {
@@ -80,29 +81,19 @@ export const Viewer = ({
     [onNext],
   );
 
-  useEffect(
-    () => () => {
-      const { current: trap } = focusRef;
-      if (trap != null) {
-        trap.deactivate();
-      }
-
-      clearAllBodyScrollLocks();
-    },
-    [],
-  );
-
   useEffect(() => {
     const { current: root } = rootRef;
     const { current: scroller } = scrollerRef;
-    if (root == null || scroller == null) {
+    if (root == null) {
       return;
     }
 
     if (mounted) {
       focusRef.current = createFocusTrap(root, {});
       focusRef.current.activate();
-      disableBodyScroll(scroller);
+      if (scroller != null) {
+        disableBodyScroll(scroller);
+      }
     } else {
       if (focusRef.current != null) {
         focusRef.current.deactivate();
@@ -111,109 +102,99 @@ export const Viewer = ({
     }
   }, [mounted]);
 
-  useMousetrap(
-    'esc',
-    rootRef.current,
-    () => {
-      if (mounted) {
-        onRequestClose();
-      }
-    },
-    [mounted, onRequestClose],
-  );
+  useKey(rootRef, ['Escape'], () => {
+    if (mounted) {
+      onRequestClose();
+    }
+  });
 
-  useMousetrap(
-    ['right', 'l'],
-    rootRef.current,
-    () => {
-      if (mounted) {
-        onNext();
-      }
-    },
-    [mounted, onNext],
-  );
+  useKey(rootRef, ['m'], () => {
+    if (mounted) {
+      onMarkersToggle();
+    }
+  });
 
-  useMousetrap(
-    ['left', 'h'],
-    rootRef.current,
-    () => {
-      if (mounted) {
-        onPrevious();
-      }
-    },
-    [mounted, onPrevious],
-  );
+  useKey(rootRef, ['ArrowRight', 'l'], () => {
+    if (mounted) {
+      onNext();
+    }
+  });
+
+  useKey(rootRef, ['ArrowLeft', 'h'], () => {
+    if (mounted) {
+      onPrevious();
+    }
+  });
+
+  const displayEntity = entity ?? previousEntity;
 
   return (
     <Portal>
-      <TransitionGroup>
-        <CSSTransition
-          key={entity != null ? 'open' : 'close'}
-          classNames="viewer"
-          mountOnEnter
-          unmountOnExit
-          timeout={{
-            enter: Duration.LARGE_IN + OPEN_DELAY,
-            exit: Duration.LARGE_OUT,
-          }}
-          onEnter={handleEnter}
-          onExit={handleExit}
+      <CSSTransition
+        in={entity != null}
+        classNames="viewer"
+        mountOnEnter
+        unmountOnExit
+        timeout={{
+          enter: Duration.LARGE_IN + OPEN_DELAY,
+          exit: Duration.LARGE_OUT,
+        }}
+        onEnter={handleEnter}
+        onExit={handleExit}
+      >
+        <div
+          ref={rootRef}
+          tabIndex={entity == null ? -1 : 0}
+          role="dialog"
+          aria-modal="true"
+          aria-hidden={entity != null ? 'false' : 'true'}
         >
-          <div
-            ref={rootRef}
-            tabIndex={entity == null ? -1 : 0}
-            role="dialog"
-            aria-modal="true"
-            aria-hidden={entity != null ? 'false' : 'true'}
-          >
-            {entity == null ? null : (
-              <div className={styles.wrapper}>
-                <div className={styles.headerWrapper}>
-                  <Header
-                    variant={entity.variant}
-                    title={entity.name}
-                    current={current}
-                    max={total}
-                    markersEnabled={markersEnabled}
-                    onRequestClose={onRequestClose}
-                    onMarkersToggle={onMarkersToggle}
-                  />
-                </div>
-
-                <div className={styles.body}>
-                  <ComparisonView
-                    scrollerRef={scrollerRef}
-                    entity={entity}
-                    matching={matching}
-                  />
-
-                  <div className={styles.previous}>
-                    <IconButton
-                      aria-label="Previous Item"
-                      onClick={handlePreviousClick}
-                    >
-                      <ArrowLeftIcon fill={Color.TEXT_BASE} />
-                    </IconButton>
-                  </div>
-
-                  <div className={styles.next}>
-                    <IconButton
-                      aria-label="Next Item"
-                      onClick={handleNextClick}
-                    >
-                      <ArrowRightIcon fill={Color.TEXT_BASE} />
-                    </IconButton>
-                  </div>
-                </div>
-
-                <div className={styles.background}>
-                  <Transparent />
-                </div>
+          <div className={styles.wrapper}>
+            <div className={styles.headerWrapper}>
+              {displayEntity != null && (
+                <Header
+                  variant={displayEntity.variant}
+                  title={displayEntity.name}
+                  current={current}
+                  max={total}
+                  markersEnabled={markersEnabled}
+                  onRequestClose={onRequestClose}
+                  onMarkersToggle={onMarkersToggle}
+                />
+              )}
+            </div>
+
+            <div className={styles.body}>
+              {displayEntity != null && (
+                <ComparisonView
+                  scrollerRef={scrollerRef}
+                  entity={displayEntity}
+                  matching={matching}
+                />
+              )}
+
+              <div className={styles.previous}>
+                <IconButton
+                  aria-label="Previous Item"
+                  onClick={handlePreviousClick}
+                >
+                  <ArrowLeftIcon fill={Color.TEXT_BASE} />
+                </IconButton>
+              </div>
+
+              <div className={styles.next}>
+                <IconButton aria-label="Next Item" onClick={handleNextClick}>
+                  <ArrowRightIcon fill={Color.TEXT_BASE} />
+                </IconButton>
               </div>
-            )}
+            </div>
+
+            <div className={styles.background}>
+              <Transparent />
+            </div>
           </div>
-        </CSSTransition>
-      </TransitionGroup>
+        </div>
+      </CSSTransition>
     </Portal>
   );
 };
diff --git a/src/components/Viewer/index.tsx b/src/components/Viewer/index.tsx
index e50f1ac..638944e 100644
--- a/src/components/Viewer/index.tsx
+++ b/src/components/Viewer/index.tsx
@@ -1,37 +1,142 @@
-import React, { useCallback } from 'react';
-import { ViewerContainer } from '../../containers/viewer/ViewerContainer';
-import { EntityContainer } from '../../containers/entity/EntityContainer';
+import type { Location } from 'history';
+import qs from 'query-string';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useHistory } from '../../hooks/useHistory';
+import { useEntities } from '../../states/entity';
+import { useWorkerClient } from '../../states/worker';
+import type { WorkerEventDataPayload } from '../../types/event';
+import { WorkerEventType } from '../../types/event';
+import type { Matching, RegEntity } from '../../types/reg';
 import { Viewer as Component } from './Viewer';
 
+type Current = {
+  entity: RegEntity | null;
+  matching: Matching | null;
+  index: number;
+};
+
+const defaultCurrent: Current = {
+  entity: null,
+  matching: null,
+  index: -1,
+};
+
 export type Props = {};
 
-const Renderer: React.FC = () => {
-  const { allItems } = EntityContainer.useContainer();
-  const viewer = ViewerContainer.useContainer();
+const Renderer = () => {
+  const history = useHistory();
+  const { allItems } = useEntities();
+  const worker = useWorkerClient();
+
+  const seqRef = useRef(0);
+  const [current, setCurrent] = useState<Current>(defaultCurrent);
+  const [markersEnabled, setMarkersEnabled] = useState(true);
+
+  useEffect(() => {
+    const { entity } = current;
+
+    if (entity == null || markersEnabled === false) {
+      return;
+    }
+
+    const listener = (
+      payload: WorkerEventDataPayload<WorkerEventType.RESULT_CALC>,
+    ) => {
+      if (seqRef.current === payload.seq) {
+        setCurrent({
+          ...current,
+          matching: payload.result,
+        });
+      }
+    };
+
+    worker.subscribe(WorkerEventType.RESULT_CALC, listener);
+
+    if (current.matching == null && entity.variant === 'changed') {
+      seqRef.current = worker.requestCalc({
+        raw: entity.name,
+        actualSrc: entity.after,
+        expectedSrc: entity.before,
+      });
+    }
+
+    return () => worker.unsubscribe(WorkerEventType.RESULT_CALC, listener);
+  }, [worker, current, markersEnabled]);
+
+  useEffect(() => {
+    const sync = (location: Location) => {
+      const query = qs.parse(location.search, { decode: false }); // get raw `id` parameter.
+      const id = query.id;
+
+      if (typeof id === 'string' && id !== '') {
+        const index = allItems.findIndex((entity) => entity.id === id);
+        if (index > -1) {
+          setCurrent({
+            entity: allItems[index],
+            index,
+            matching: null,
+          });
+        }
+      } else {
+        setCurrent(defaultCurrent);
+      }
+    };
+
+    sync(history.location);
+
+    return history.listen(({ location }) => {
+      sync(location);
+    });
+  }, [history]); /* eslint-disable-line react-hooks/exhaustive-deps */
+
+  const open = useCallback(
+    (id: string) => {
+      history.push({ search: `?id=${id}` });
+    },
+    [history],
+  );
 
   const handleNext = useCallback(() => {
-    viewer.next();
-  }, [viewer]);
+    const index = current.index + 1;
+    if (index < allItems.length) {
+      open(allItems[index].id);
+    } else {
+      open(allItems[0].id);
+    }
+  }, [open, allItems, current]);
 
   const handlePrevious = useCallback(() => {
-    viewer.previous();
-  }, [viewer]);
+    const index = current.index - 1;
+    if (index >= 0) {
+      open(allItems[index].id);
+    } else {
+      open(allItems[allItems.length - 1].id);
+    }
+  }, [open, allItems, current]);
 
   const handleClose = useCallback(() => {
-    viewer.close();
-  }, [viewer]);
+    history.push({ search: '' });
+  }, [history]);
 
   const handleMarkersToggle = useCallback(() => {
-    viewer.toggleMarkers();
-  }, [viewer]);
+    const value = !markersEnabled;
+    setMarkersEnabled(value);
+
+    if (!value && current.matching != null) {
+      setCurrent((cur) => ({
+        ...cur,
+        matching: null,
+      }));
+    }
+  }, [markersEnabled, current]);
 
   return (
     <Component
       total={allItems.length}
-      current={viewer.current.index + 1}
-      entity={viewer.current.entity}
-      matching={viewer.current.matching}
-      markersEnabled={viewer.markersEnabled}
+      current={current.index + 1}
+      entity={current.entity}
+      matching={current.matching}
+      markersEnabled={markersEnabled}
       onNext={handleNext}
       onPrevious={handlePrevious}
       onRequestClose={handleClose}
diff --git a/src/containers/entity/EntityContainer.ts b/src/containers/entity/EntityContainer.ts
deleted file mode 100644
index 0e6f900..0000000
--- a/src/containers/entity/EntityContainer.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { createContainer } from 'unstated-next';
-import { useMemo, useContext, useState, useEffect } from 'react';
-import { toEntities } from '../../utils/transformer';
-import type { RegData, RegEntity } from '../../types/reg';
-import { WorkerContext } from '../../context/WorkerContext';
-import { WorkerEventType } from '../../types/event';
-
-export type EntityValue = {
-  filtering: boolean;
-  newItems: RegEntity[];
-  passedItems: RegEntity[];
-  failedItems: RegEntity[];
-  deletedItems: RegEntity[];
-  allItems: RegEntity[];
-  filter: (input: string) => void;
-};
-
-export const EntityContainer = createContainer<EntityValue, RegData>(
-  (initialState) => {
-    if (initialState == null) {
-      throw new Error('Unexpected error occurred');
-    }
-
-    const worker = useContext(WorkerContext);
-    const [filtering, setFiltering] = useState(false);
-
-    const dirs = {
-      diff: initialState.diffDir,
-      expected: initialState.expectedDir,
-      actual: initialState.actualDir,
-    };
-
-    /* eslint-disable react-hooks/exhaustive-deps */
-    const defaultNewItems = useMemo(
-      () => toEntities('new', dirs, initialState.newItems),
-      [initialState.newItems],
-    );
-    const defaultPassedItems = useMemo(
-      () => toEntities('passed', dirs, initialState.passedItems),
-      [initialState.passedItems],
-    );
-    const defaultFailedItems = useMemo(
-      () => toEntities('changed', dirs, initialState.failedItems),
-      [initialState.failedItems],
-    );
-    const defaultDeletedItems = useMemo(
-      () => toEntities('deleted', dirs, initialState.deletedItems),
-      [initialState.deletedItems],
-    );
-    /* eslint-enable */
-
-    const [newItems, setNewItems] = useState(defaultNewItems);
-    const [passedItems, setPassedItems] = useState(defaultPassedItems);
-    const [failedItems, setFailedItems] = useState(defaultFailedItems);
-    const [deletedItems, setDeletedItems] = useState(defaultDeletedItems);
-
-    const allItems = useMemo(
-      () => [...failedItems, ...newItems, ...deletedItems, ...passedItems],
-      [newItems, passedItems, failedItems, deletedItems],
-    );
-
-    const filter = (input: string) => {
-      if (worker == null) {
-        return;
-      }
-
-      const value = input.trim();
-
-      setFiltering(value !== '');
-
-      worker.requestFilter({
-        input: value,
-        newItems: defaultNewItems,
-        passedItems: defaultPassedItems,
-        failedItems: defaultFailedItems,
-        deletedItems: defaultDeletedItems,
-      });
-    };
-
-    useEffect(() => {
-      if (worker == null) {
-        return;
-      }
-
-      worker.subscribe(WorkerEventType.RESULT_FILTER, (payload) => {
-        setNewItems(payload.newItems);
-        setPassedItems(payload.passedItems);
-        setFailedItems(payload.failedItems);
-        setDeletedItems(payload.deletedItems);
-      });
-    }, [worker]);
-
-    return {
-      newItems,
-      passedItems,
-      failedItems,
-      deletedItems,
-      allItems,
-      filtering,
-      filter,
-    };
-  },
-);
diff --git a/src/containers/notification/NotificationContainer.ts b/src/containers/notification/NotificationContainer.ts
deleted file mode 100644
index 15d17b6..0000000
--- a/src/containers/notification/NotificationContainer.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createContainer } from 'unstated-next';
-import { useState, useEffect } from 'react';
-
-const TIMEOUT = 5000;
-
-export type NotificationValue = {
-  show: boolean;
-  message: string;
-  notify: (msg: string) => void;
-};
-
-export const NotificationContainer = createContainer<NotificationValue>(() => {
-  const [message, setMessage] = useState('');
-
-  const notify = (msg: string) => setMessage(msg);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setMessage('');
-    }, TIMEOUT);
-
-    return () => clearTimeout(timer);
-  }, [message]);
-
-  return {
-    show: message !== '',
-    message,
-    notify,
-  };
-});
diff --git a/src/containers/sidebar/SidebarContainer.ts b/src/containers/sidebar/SidebarContainer.ts
deleted file mode 100644
index f7ee0e9..0000000
--- a/src/containers/sidebar/SidebarContainer.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { createContainer } from 'unstated-next';
-import { useState, useMemo, useEffect } from 'react';
-import { toStructualItems } from '../../utils/transformer';
-import type { RegStructualItem, RegLink } from '../../types/reg';
-import { EntityContainer } from '../entity/EntityContainer';
-import { useMedia } from '../../hooks/useMedia';
-import { BreakPoint } from '../../styles/variables.css';
-
-export type SidebarValue = {
-  isDesktop: boolean;
-  isOpen: boolean;
-  open: () => void;
-  close: () => void;
-  toggle: () => void;
-  newItems: RegStructualItem[];
-  passedItems: RegStructualItem[];
-  failedItems: RegStructualItem[];
-  deletedItems: RegStructualItem[];
-  links: RegLink[];
-};
-
-export const SidebarContainer = createContainer<SidebarValue, RegLink[]>(
-  (initialState) => {
-    const entities = EntityContainer.useContainer();
-
-    const newItems = useMemo(
-      () => toStructualItems(entities.newItems),
-      [entities.newItems],
-    );
-
-    const passedItems = useMemo(
-      () => toStructualItems(entities.passedItems),
-      [entities.passedItems],
-    );
-
-    const failedItems = useMemo(
-      () => toStructualItems(entities.failedItems),
-      [entities.failedItems],
-    );
-
-    const deletedItems = useMemo(
-      () => toStructualItems(entities.deletedItems),
-      [entities.deletedItems],
-    );
-
-    const isDesktop = useMedia(`(min-width: ${BreakPoint.MEDIUM}px)`);
-    const [isOpen, setOpen] = useState(() => isDesktop);
-    const open = () => setOpen(true);
-    const close = () => setOpen(false);
-    const toggle = () => setOpen(!isOpen);
-
-    useEffect(() => {
-      setOpen(isDesktop);
-    }, [isDesktop]);
-
-    return {
-      isDesktop,
-      isOpen,
-      open,
-      close,
-      toggle,
-      newItems,
-      passedItems,
-      failedItems,
-      deletedItems,
-      links: initialState != null ? initialState : [],
-    };
-  },
-);
diff --git a/src/containers/viewer/ViewerContainer.ts b/src/containers/viewer/ViewerContainer.ts
deleted file mode 100644
index 4c4dbed..0000000
--- a/src/containers/viewer/ViewerContainer.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { createContainer } from 'unstated-next';
-import type { Location } from 'history';
-import { useState, useEffect, useContext, useRef } from 'react';
-import qs from 'query-string';
-import { EntityContainer } from '../entity/EntityContainer';
-import type { RegEntity, Matching } from '../../types/reg';
-import { WorkerContext } from '../../context/WorkerContext';
-import type { WorkerEventDataPayload } from '../../types/event';
-import { WorkerEventType } from '../../types/event';
-import { useHistory } from '../../hooks/useHistory';
-
-type Current = {
-  entity: RegEntity | null;
-  matching: Matching | null;
-  index: number;
-};
-
-const defaultCurrent: Current = {
-  entity: null,
-  matching: null,
-  index: -1,
-};
-
-export type ViewerValue = {
-  current: Current;
-  markersEnabled: boolean;
-  open: (id: string) => void;
-  close: () => void;
-  next: () => void;
-  previous: () => void;
-  toggleMarkers: () => void;
-};
-
-export const ViewerContainer = createContainer<ViewerValue>(() => {
-  const history = useHistory();
-  const worker = useContext(WorkerContext);
-
-  const { allItems } = EntityContainer.useContainer();
-
-  const seqRef = useRef(0);
-  const [current, setCurrent] = useState<Current>(defaultCurrent);
-  const [markersEnabled, setMarkersEnabled] = useState(true);
-
-  const open = (id: string) => {
-    history.push({ search: `?id=${id}` });
-  };
-
-  const close = () => {
-    history.push({ search: '' });
-  };
-
-  const next = () => {
-    if (current.index + 1 < allItems.length) {
-      open(allItems[current.index + 1].id);
-    } else {
-      open(allItems[0].id);
-    }
-  };
-
-  const previous = () => {
-    if (current.index - 1 >= 0) {
-      open(allItems[current.index - 1].id);
-    } else {
-      open(allItems[allItems.length - 1].id);
-    }
-  };
-
-  const toggleMarkers = () => {
-    const value = !markersEnabled;
-    setMarkersEnabled(value);
-
-    if (!value && current.matching != null) {
-      setCurrent((cur) => ({
-        ...cur,
-        matching: null,
-      }));
-    }
-  };
-
-  useEffect(() => {
-    const { entity } = current;
-
-    if (worker == null || entity == null || markersEnabled === false) {
-      return;
-    }
-
-    const listener = (
-      payload: WorkerEventDataPayload<WorkerEventType.RESULT_CALC>,
-    ) => {
-      if (seqRef.current === payload.seq) {
-        setCurrent({
-          ...current,
-          matching: payload.result,
-        });
-      }
-    };
-
-    worker.subscribe(WorkerEventType.RESULT_CALC, listener);
-
-    if (current.matching == null && entity.variant === 'changed') {
-      seqRef.current = worker.requestCalc({
-        raw: entity.name,
-        actualSrc: entity.after,
-        expectedSrc: entity.before,
-      });
-    }
-
-    return () => worker.unsubscribe(WorkerEventType.RESULT_CALC, listener);
-  }, [markersEnabled, worker, current]);
-
-  useEffect(() => {
-    const sync = (location: Location) => {
-      const query = qs.parse(location.search, { decode: false }); // get raw `id` parameter.
-      const id = query.id;
-
-      if (typeof id === 'string' && id !== '') {
-        const index = allItems.findIndex((entity) => entity.id === id);
-        if (index > -1) {
-          setCurrent({
-            entity: allItems[index],
-            index,
-            matching: null,
-          });
-        }
-      } else {
-        setCurrent(defaultCurrent);
-      }
-    };
-
-    sync(history.location);
-
-    return history.listen(({ location }) => {
-      sync(location);
-    });
-  }, [history]); /* eslint-disable-line react-hooks/exhaustive-deps */
-
-  return {
-    current,
-    markersEnabled,
-    open,
-    close,
-    next,
-    previous,
-    toggleMarkers,
-  };
-});
diff --git a/src/hooks/useKey.ts b/src/hooks/useKey.ts
new file mode 100644
index 0000000..c5dcbcb
--- /dev/null
+++ b/src/hooks/useKey.ts
@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { tinykeys } from 'tinykeys';
+
+export type UseKeyCallback = (e: KeyboardEvent) => void;
+
+export const useKey = (
+  target: React.RefObject<HTMLElement> | null,
+  keys: string[],
+  callback: UseKeyCallback,
+) => {
+  const callbackFn = useCallback(callback, []); // eslint-disable-line react-hooks/exhaustive-deps
+  const callbackRef = useRef(callbackFn);
+  callbackRef.current = callback;
+
+  useEffect(() => {
+    if (target != null && target.current == null) {
+      return;
+    }
+
+    return tinykeys(
+      target?.current ?? window,
+      Object.fromEntries(
+        keys.map((key) => [key, (e) => callbackRef.current(e)]),
+      ),
+    );
+  }, [target, keys]);
+};
diff --git a/src/hooks/useMousetrap.ts b/src/hooks/useMousetrap.ts
deleted file mode 100644
index 79a236c..0000000
--- a/src/hooks/useMousetrap.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Mousetrap from 'mousetrap';
-import { useEffect, useCallback } from 'react';
-
-Mousetrap.prototype.stopCallback = (_: KeyboardEvent, element: HTMLElement) => {
-  if (element.dataset.mousetrap === 'ignore') {
-    return false;
-  }
-
-  const tagName = element.tagName.toLowerCase();
-
-  return tagName === 'input' || tagName === 'select' || tagName === 'textarea';
-};
-
-type MousetrapHandler = (e: KeyboardEvent, combo: string) => any;
-
-export const useMousetrap = (
-  keys: string | string[],
-  target: HTMLElement | null,
-  handler: MousetrapHandler,
-  deps: any[] = [],
-) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const memorizedHandler = useCallback(handler, [target, ...deps]);
-
-  useEffect(() => {
-    const instance =
-      target != null
-        ? Mousetrap(target).bind(keys, memorizedHandler)
-        : Mousetrap.bind(keys, memorizedHandler);
-
-    return () => {
-      instance.unbind(keys);
-    };
-  }, [memorizedHandler]); // eslint-disable-line react-hooks/exhaustive-deps
-};
diff --git a/src/hooks/usePrevious.ts b/src/hooks/usePrevious.ts
new file mode 100644
index 0000000..6a88126
--- /dev/null
+++ b/src/hooks/usePrevious.ts
@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrevious = <T>(value: T): T | null => {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 9df329d..b39b199 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,13 @@
-import './global.css';
-import React from 'react';
+import { createStore } from 'jotai';
+import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import type { RegData } from './types/reg';
 import { App } from './App';
-import { WorkerClient } from './worker-client';
 import { MainAppId } from './constants';
+import './global.css';
+import type { RegData } from './types/reg';
+import { WorkerClient } from './worker-client';
+import { initializeEntityState } from './states/entity';
+import { initializeWorkerState } from './states/worker';
 
 const regData = (window as any)['__reg__'] as RegData;
 
@@ -14,7 +17,16 @@ const ximgdiffConfig = regData.ximgdiffConfig || { enabled: false };
 
 workerClient.start(ximgdiffConfig);
 
+// Store
+const store = createStore();
+initializeWorkerState(store, workerClient);
+initializeEntityState(store, regData, workerClient);
+
 // Report App
 const app = document.getElementById(MainAppId);
 const root = createRoot(app!);
-root.render(<App data={regData} worker={workerClient} />);
+root.render(
+  <StrictMode>
+    <App store={store} />
+  </StrictMode>,
+);
diff --git a/src/states/entity.ts b/src/states/entity.ts
new file mode 100644
index 0000000..4e09f33
--- /dev/null
+++ b/src/states/entity.ts
@@ -0,0 +1,110 @@
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { useCallback } from 'react';
+import { WorkerEventType } from '../types/event';
+import type { RegData, RegEntity } from '../types/reg';
+import type { Store } from '../types/store';
+import { toEntities } from '../utils/transformer';
+import type { WorkerClient } from '../worker-client';
+import { useWorkerClient } from './worker';
+
+type EntityState = {
+  new: RegEntity[];
+  passed: RegEntity[];
+  failed: RegEntity[];
+  deleted: RegEntity[];
+};
+
+const defaultEntityAtom = atom<EntityState>({
+  new: [],
+  passed: [],
+  failed: [],
+  deleted: [],
+});
+
+const entityAtom = atom<EntityState>({
+  new: [],
+  passed: [],
+  failed: [],
+  deleted: [],
+});
+
+const allEntitiesAtom = atom((get) => {
+  const entity = get(entityAtom);
+  return entity.failed.concat(entity.new, entity.deleted, entity.passed);
+});
+
+const filteredAtom = atom(false);
+
+export const initializeEntityState = (
+  store: Store,
+  data: RegData,
+  worker: WorkerClient,
+) => {
+  const dirs = {
+    diff: data.diffDir,
+    expected: data.expectedDir,
+    actual: data.actualDir,
+  };
+
+  store.set(defaultEntityAtom, {
+    new: toEntities('new', dirs, data.newItems),
+    passed: toEntities('passed', dirs, data.passedItems),
+    failed: toEntities('changed', dirs, data.failedItems),
+    deleted: toEntities('deleted', dirs, data.deletedItems),
+  });
+
+  store.set(entityAtom, {
+    ...store.get(defaultEntityAtom),
+  });
+
+  worker.subscribe(WorkerEventType.RESULT_FILTER, (payload) => {
+    store.set(entityAtom, {
+      new: payload.newItems,
+      passed: payload.passedItems,
+      failed: payload.failedItems,
+      deleted: payload.deletedItems,
+    });
+  });
+};
+
+export const useEntities = () => {
+  const entity = useAtomValue(entityAtom);
+  const allItems = useAtomValue(allEntitiesAtom);
+
+  return {
+    newItems: entity.new,
+    passedItems: entity.passed,
+    failedItems: entity.failed,
+    deletedItems: entity.deleted,
+    allItems,
+  };
+};
+
+export const useEntityFilter = () => {
+  const worker = useWorkerClient();
+  const [isFiltered, setIsFiltered] = useAtom(filteredAtom);
+  const defaults = useAtomValue(defaultEntityAtom);
+
+  const filter = useCallback(
+    (input: string) => {
+      if (worker == null) {
+        return;
+      }
+
+      const value = input.trim();
+
+      setIsFiltered(value !== '');
+
+      worker.requestFilter({
+        input: value,
+        newItems: defaults.new,
+        passedItems: defaults.passed,
+        failedItems: defaults.failed,
+        deletedItems: defaults.deleted,
+      });
+    },
+    [worker, setIsFiltered, defaults],
+  );
+
+  return [isFiltered, filter] as const;
+};
diff --git a/src/states/notification.ts b/src/states/notification.ts
new file mode 100644
index 0000000..56b8942
--- /dev/null
+++ b/src/states/notification.ts
@@ -0,0 +1,50 @@
+import { atom, useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+const TIMEOUT = 5000;
+
+const notificationAtom = atom<
+  | {
+      id: null;
+      message: null;
+    }
+  | {
+      id: number;
+      message: string;
+    }
+>({
+  id: null,
+  message: null,
+});
+
+const derivedNotificationAtom = atom<string | null, [string], void>(
+  (get) => get(notificationAtom).message,
+  (get, set, message) => {
+    const previous = get(notificationAtom);
+    if (previous.id != null) {
+      window.clearInterval(previous.id);
+    }
+    set(notificationAtom, {
+      id: window.setTimeout(() => {
+        set(notificationAtom, { id: null, message: null });
+      }, TIMEOUT),
+      message,
+    });
+  },
+);
+
+export const useNotify = () => {
+  const [, setNotification] = useAtom(derivedNotificationAtom);
+
+  return useCallback(
+    (msg: string) => {
+      setNotification(msg);
+    },
+    [setNotification],
+  );
+};
+
+export const useNotificationMessage = () => {
+  const [message] = useAtom(derivedNotificationAtom);
+  return message;
+};
diff --git a/src/states/sidebar.ts b/src/states/sidebar.ts
new file mode 100644
index 0000000..c7b90e5
--- /dev/null
+++ b/src/states/sidebar.ts
@@ -0,0 +1,75 @@
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { useCallback, useMemo } from 'react';
+import type { RegLink } from '../types/reg';
+import { toStructualItems } from '../utils/transformer';
+import { BreakPoint } from '../styles/variables.css';
+import { useEntities } from './entity';
+
+const openAtom = atom(
+  window.matchMedia(`(min-width: ${BreakPoint.MEDIUM}px)`).matches,
+);
+
+const linksAtom = atom<RegLink[]>([]);
+
+export const useSidebarState = () => {
+  const isOpen = useAtomValue(openAtom);
+  const links = useAtomValue(linksAtom);
+
+  return {
+    isOpen,
+    links,
+  };
+};
+
+export const useSidebarMutators = () => {
+  const [, setIsOpen] = useAtom(openAtom);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, [setIsOpen]);
+
+  return {
+    open,
+    close,
+    toggle,
+  };
+};
+
+export const useSidebarEntities = () => {
+  const entity = useEntities();
+
+  const newItems = useMemo(
+    () => toStructualItems(entity.newItems),
+    [entity.newItems],
+  );
+
+  const passedItems = useMemo(
+    () => toStructualItems(entity.passedItems),
+    [entity.passedItems],
+  );
+
+  const failedItems = useMemo(
+    () => toStructualItems(entity.failedItems),
+    [entity.failedItems],
+  );
+
+  const deletedItems = useMemo(
+    () => toStructualItems(entity.deletedItems),
+    [entity.deletedItems],
+  );
+
+  return {
+    newItems,
+    passedItems,
+    failedItems,
+    deletedItems,
+  };
+};
diff --git a/src/states/worker.ts b/src/states/worker.ts
new file mode 100644
index 0000000..a58f9cd
--- /dev/null
+++ b/src/states/worker.ts
@@ -0,0 +1,17 @@
+import { atom, useAtomValue } from 'jotai';
+import type { Store } from '../types/store';
+import type { WorkerClient } from '../worker-client';
+
+const workerAtom = atom<WorkerClient | null>(null);
+
+export const initializeWorkerState = (store: Store, worker: WorkerClient) => {
+  store.set(workerAtom, worker);
+};
+
+export const useWorkerClient = () => {
+  const worker = useAtomValue(workerAtom);
+  if (worker == null) {
+    throw new Error('WorkerClient is not initialized');
+  }
+  return worker;
+};
diff --git a/src/types/store.ts b/src/types/store.ts
new file mode 100644
index 0000000..e0c29d0
--- /dev/null
+++ b/src/types/store.ts
@@ -0,0 +1,3 @@
+import type { createStore } from 'jotai';
+
+export type Store = ReturnType<typeof createStore>;
diff --git a/yarn.lock b/yarn.lock
index 276f666..5bc45ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5913,6 +5913,11 @@ jiti@^1.14.0:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+jotai@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.8.0.tgz#5a6585cd5576c400c2c5f8e157b83ad2ba70b2ab"
+  integrity sha512-yZNMC36FdLOksOr8qga0yLf14miCJlEThlp5DeFJNnqzm2+ZG7wLcJzoOyij5K6U6Xlc5ljQqPDlJRgqW0Y18g==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -6683,11 +6688,6 @@ modern-ahocorasick@^1.0.0:
   resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
   integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==
 
-mousetrap@^1.6.5:
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
-  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
-
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -8562,6 +8562,11 @@ tinybench@^2.5.1:
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.6.0.tgz#1423284ee22de07c91b3752c048d2764714b341b"
   integrity sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==
 
+tinykeys@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-2.1.0.tgz#1341563e92a7fac9ca90053fddaf2b7553500298"
+  integrity sha512-/MESnqBD1xItZJn5oGQ4OsNORQgJfPP96XSGoyu4eLpwpL0ifO0SYR5OD76u0YMhMXsqkb0UqvI9+yXTh4xv8Q==
+
 tinypool@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.8.3.tgz#e17d0a5315a7d425f875b05f7af653c225492d39"