feat: implement text diff tool

components/buttons/index.ts

@@ -2,3 +2,4 @@ export * from "./clear";
 export * from "./copy";
 export * from "./file";
 export * from "./paste";
+export * from "./toggle-full-size";

components/buttons/toggle-full-size.tsx

@@ -0,0 +1,22 @@
+import { memo } from "react";
+import equal from "react-fast-compare";
+
+import * as Icon from "@/components/icons";
+
+import { Base, BaseProps } from "./base";
+
+export type ToggleFullSizeProps = Omit<BaseProps, "icon" | "labelText"> & {
+  expanded: boolean;
+};
+
+function RawToggleFullSize({ expanded, ...props }: ToggleFullSizeProps) {
+  return (
+    <Base
+      {...props}
+      icon={expanded ? <Icon.Minimize size={16} /> : <Icon.Maximize size={16} />}
+      labelText={expanded ? "Collapse" : "Expand"}
+    />
+  );
+}
+
+export const ToggleFullSize = memo(RawToggleFullSize, equal);

components/icons.tsx

@@ -14,15 +14,21 @@ export const ChevronDown = memo(icons.ChevronDown, equal);
 export const Clipboard = memo(icons.Clipboard, equal);
 export const Code = memo(icons.Code2, equal);
 export const Copy = memo(icons.Copy, equal);
+export const Diff = memo(icons.Diff, equal);
 export const Equal = memo(icons.Equal, equal);
 export const File = memo(icons.FileIcon, equal);
 export const Fingerprint = memo(icons.Fingerprint, equal);
+export const GripHorizontal = memo(icons.GripHorizontal, equal);
+export const GripVertical = memo(icons.GripVertical, equal);
 export const Hash = memo(icons.Hash, equal);
 export const Home = memo(icons.Home, equal);
 export const Key = memo(icons.Key, equal);
 export const Link = memo(icons.Link2, equal);
+export const Maximize = memo(icons.Maximize2, equal);
+export const Minimize = memo(icons.Minimize2, equal);
 export const PackagePlus = memo(icons.PackagePlus, equal);
 export const Paintbrush = memo(icons.Paintbrush2, equal);
+export const Rows = memo(icons.Rows, equal);
 export const Search = memo(icons.Search, equal);
 export const Settings = memo(icons.Settings, equal);
 export const Settings2 = memo(icons.Settings2, equal);

components/panel-resize-handler.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, useMemo } from "react";
+import { PanelResizeHandle as PanelResizeHandlePrimitive } from "react-resizable-panels";
+
+import { cn } from "@/lib/style";
+import * as Icon from "@/components/icons";
+
+type Props = {
+  direction?: "vertical" | "horizontal";
+} & ComponentPropsWithoutRef<typeof PanelResizeHandlePrimitive>;
+
+export const PanelResizeHandle = ({ direction = "vertical", className, ...props }: Props) => {
+  const isVertical = direction === "vertical";
+  const isHorizontal = direction === "horizontal";
+
+  const classNames = useMemo(
+    () =>
+      cn(
+        isVertical && "w-4",
+        isHorizontal && "h-4",
+        "flex items-center justify-center",
+        "data-[resize-handle-state=drag]:bg-neutral-200",
+        "dark:data-[resize-handle-state=drag]:bg-neutral-600",
+        "data-[resize-handle-state=hover]:bg-neutral-300",
+        "dark:data-[resize-handle-state=hover]:bg-neutral-700",
+        className
+      ),
+    [isVertical, isHorizontal, className]
+  );
+
+  return (
+    <PanelResizeHandlePrimitive className={classNames} {...props}>
+      {isVertical && <Icon.GripVertical size={12} />}
+      {isHorizontal && <Icon.GripHorizontal size={12} />}
+    </PanelResizeHandlePrimitive>
+  );
+};