refactor: split state

src/components/config-panel.tsx

@@ -1,5 +1,5 @@
 import { Redo, Undo } from "lucide-react";
-import { useConfig, useUndoManager, useYDoc } from "../state";
+import { useConfig, useUndoManager, useYDoc } from "../state/index";
 import { fileToYDoc } from "../utils";
 import { ConnectButton } from "./connect-button";
 import { ExportButton } from "./export-button";

src/components/connect-button.tsx

@@ -1,7 +1,7 @@
 import { Cable, RotateCw } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { ConnectProvider } from "../providers/types";
-import { useYDoc } from "../state";
+import { useYDoc } from "../state/index";
 import { ConnectDialog } from "./connect-dialog";
 import { StatusIndicator } from "./status-indicator";
 import { Button } from "./ui/button";

src/components/connect-dialog.tsx

@@ -4,7 +4,7 @@ import { RocketIcon, TriangleAlert } from "lucide-react";
 import { useState } from "react";
 import * as Y from "yjs";
 import { ConnectProvider } from "../providers/types";
-import { useYDoc } from "../state";
+import { useYDoc } from "../state/index";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
 import {

src/components/delete-dialog.tsx

@@ -1,5 +1,5 @@
 import { Path } from "@textea/json-viewer";
-import { useYDoc } from "../state";
+import { useYDoc } from "../state/index";
 import { getHumanReadablePath } from "../utils";
 import {
   getYTypeFromPath,

src/components/export-button.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Download } from "lucide-react";
 import * as Y from "yjs";
-import { useYDoc } from "../state";
+import { useYDoc } from "../state/index";
 import { yShapeToJSON } from "../y-shape";
 
 function downloadFile(blob: Blob, filename: string) {

src/components/filter-button.tsx

@@ -11,7 +11,7 @@ import {
   useIsFilterEnabled,
   useSetHasValidFilterRule,
   useUpdateFilterPredicate,
-} from "../state";
+} from "../state/index";
 import {
   createFlattenFilterGroup,
   filterFnList,

src/components/load-button.tsx

@@ -25,7 +25,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import * as Y from "yjs";
-import { useYDoc } from "../state";
+import { useYDoc } from "../state/index";
 import { fileToYDoc } from "../utils";
 import { toast } from "./ui/use-toast";
 

src/components/preview-panel.tsx

@@ -2,7 +2,12 @@ import { JsonViewer, Path } from "@textea/json-viewer";
 import { Bug } from "lucide-react";
 import { useEffect, useState } from "react";
 import { yDataType } from "../data-types";
-import { useConfig, useFilterMap, useIsFilterEnabled, useYDoc } from "../state";
+import {
+  useConfig,
+  useFilterMap,
+  useIsFilterEnabled,
+  useYDoc,
+} from "../state/index";
 import { getYTypeFromPath, isYArray, isYDoc, isYMap } from "../y-shape";
 import { AddDataDialog } from "./add-data-dialog";
 import { DeleteDialog } from "./delete-dialog";

src/components/status-indicator.tsx

@@ -1,6 +1,6 @@
 import { CloudDownload, CloudUpload, Unplug } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useDownloadListener, useUploadListener } from "../state";
+import { useDownloadListener, useUploadListener } from "../state/index";
 
 export function StatusIndicator({ className }: { className?: string }) {
   const [status, setStatus] = useState<"download" | "upload" | "none">("none");

src/data-types.tsx

@@ -8,7 +8,7 @@ import { ComponentType } from "react";
 import * as Y from "yjs";
 import { Badge } from "./components/ui/badge";
 import { toast } from "./components/ui/use-toast";
-import { useConfig } from "./state";
+import { useConfig } from "./state/index";
 import { getYTypeName, isYShape, parseYShape } from "./y-shape";
 
 const TypeLabel = ({ value }: { value: unknown }) => {

src/state/config.ts

@@ -0,0 +1,24 @@
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+export type Config = {
+  parseYDoc: boolean;
+  showDelta: boolean;
+  showSize: boolean;
+  editable: boolean;
+};
+const defaultConfig = {
+  parseYDoc: true,
+  showDelta: true,
+  showSize: true,
+  editable: false,
+} satisfies Config;
+
+export const configAtom = atomWithStorage<Config>(
+  "yjs-playground-config",
+  defaultConfig,
+);
+
+export const useConfig = () => {
+  return useAtom(configAtom);
+};

src/state/filter.ts

@@ -0,0 +1,49 @@
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { YShapeItem } from "../components/filter-sphere";
+import { filterYDoc } from "../filter-map";
+import { configAtom } from "./config";
+import { yDocAtom } from "./ydoc";
+
+const falseFn = () => false;
+
+const filterPredicateAtom = atom<{ fn: (data: YShapeItem) => boolean }>({
+  fn: falseFn,
+});
+
+export const useUpdateFilterPredicate = () => {
+  const set = useSetAtom(filterPredicateAtom);
+  return set;
+};
+const hasValidFilterRuleAtom = atom(false);
+const filteredYDocAtom = atom((get) => {
+  const hasValidFilterRule = get(hasValidFilterRuleAtom);
+  if (!hasValidFilterRule) {
+    return {};
+  }
+  const yDoc = get(yDocAtom);
+  const predicate = get(filterPredicateAtom).fn;
+  const filterMap = filterYDoc(yDoc, predicate);
+  return filterMap;
+});
+const filterCountAtom = atom((get) => {
+  const data = get(filteredYDocAtom);
+  return Object.keys(data).length;
+});
+
+export const useSetHasValidFilterRule = () => {
+  return useSetAtom(hasValidFilterRuleAtom);
+};
+
+export const useFilterMap = () => {
+  return useAtomValue(filteredYDocAtom);
+};
+
+export const useFilterDataCount = () => {
+  return useAtomValue(filterCountAtom);
+};
+
+export const useIsFilterEnabled = () => {
+  const hasValidFilterRule = useAtomValue(hasValidFilterRuleAtom);
+  const config = useAtomValue(configAtom);
+  return config.parseYDoc && hasValidFilterRule;
+};

src/state/index.ts

@@ -0,0 +1,4 @@
+export * from "./config";
+export * from "./filter";
+export * from "./undo";
+export * from "./ydoc";