feat: support hide size

src/components/config-panel.tsx

@@ -1,18 +1,18 @@
-import { useToast } from "./ui/use-toast";
 import { Config, useConfig, useYDoc } from "../state";
+import { fileToYDoc } from "../utils";
 import { ExportButton } from "./export-button";
+import { FullScreenDropZone } from "./full-screen-drop-zone";
+import { LoadButton } from "./load-button";
+import { Label } from "./ui/label";
 import {
   Select,
-  SelectTrigger,
-  SelectValue,
   SelectContent,
   SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "./ui/select";
 import { Switch } from "./ui/switch";
-import { Label } from "./ui/label";
-import { FullScreenDropZone } from "./full-screen-drop-zone";
-import { LoadButton } from "./load-button";
-import { fileToYDoc } from "../utils";
+import { useToast } from "./ui/use-toast";
 
 export function ConfigPanel() {
   const [yDoc, setYDoc] = useYDoc();
@@ -58,6 +58,20 @@ export function ConfigPanel() {
         <Label htmlFor="show-delta">Show delta format for YText</Label>
       </div>
 
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="show-size"
+          checked={config.showSize}
+          onCheckedChange={(checked) =>
+            setConfig({
+              ...config,
+              showSize: checked,
+            })
+          }
+        />
+        <Label htmlFor="show-size">Show item size</Label>
+      </div>
+
       <ExportButton />
 
       <FullScreenDropZone

src/components/preview-panel.tsx

@@ -1,13 +1,14 @@
 import { JsonViewer } from "@textea/json-viewer";
 import { Bug } from "lucide-react";
 import { yDataType } from "../data-types";
-import { useYDoc } from "../state";
+import { useConfig, useYDoc } from "../state";
 import { useTheme } from "./theme-provider";
 import { Button } from "./ui/button";
 
 export function PreviewPanel() {
   const { theme, systemPreferenceTheme } = useTheme();
   const [yDoc] = useYDoc();
+  const [config] = useConfig();
 
   return (
     <div className="flex flex-1 flex-col">
@@ -34,6 +35,7 @@ export function PreviewPanel() {
           // editable={true}
           // enableAdd={true}
           // enableDelete={true}
+          displaySize={config.showSize}
           theme={theme === "system" ? systemPreferenceTheme : theme}
           defaultInspectDepth={2}
           valueTypes={[yDataType]}

src/state.ts

@@ -10,11 +10,13 @@ export const useYDoc = () => {
 export type Config = {
   view: "ydoc" | "shared-types";
   showDelta: boolean;
+  showSize: boolean;
 };
 
 const defaultConfig = {
   view: "shared-types",
   showDelta: true,
+  showSize: true,
 } satisfies Config;
 
 const configAtom = atom<Config>(defaultConfig);