Revert "ElectricSQL run page and react-window-splitter (#1277)"

This reverts commit 5231381.

# Conflicts:
#	pnpm-lock.yaml

Author: matt-aitken

.env.example

@@ -10,7 +10,6 @@ DIRECT_URL=${DATABASE_URL}
 REMIX_APP_PORT=3030
 APP_ENV=development
 APP_ORIGIN=http://localhost:3030
-ELECTRIC_ORIGIN=http://localhost:3060
 NODE_ENV=development
 V3_ENABLED=true
 

apps/webapp/app/components/code/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import type { Language, PrismTheme } from "prism-react-renderer";
 import { Highlight, Prism } from "prism-react-renderer";
-import { forwardRef, ReactNode, useCallback, useState } from "react";
+import { forwardRef, useCallback, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Paragraph } from "../primitives/Paragraph";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
@@ -385,7 +385,7 @@ function Chrome({ title }: { title?: string }) {
   );
 }
 
-export function TitleRow({ title }: { title: ReactNode }) {
+export function TitleRow({ title }: { title: string }) {
   return (
     <div className="flex items-center justify-between px-3">
       <Paragraph variant="small/bright" className="w-full border-b border-grid-dimmed py-2">

apps/webapp/app/components/code/InlineCode.tsx

@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono text-wrap";
+  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono";
 
 const variants = {
   "extra-extra-small": "text-xxs",

apps/webapp/app/components/primitives/Resizable.tsx

@@ -1,35 +1,32 @@
 "use client";
 
-import React from "react";
-import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
+import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "~/utils/cn";
 
-const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
-  <PanelGroup
-    className={cn(
-      "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    autosaveStrategy={props.autosaveId ? "cookie" : undefined}
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn("flex w-full data-[panel-group-direction=vertical]:flex-col", className)}
     {...props}
   />
 );
 
-const ResizablePanel = Panel;
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
-  withHandle = true,
+  withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof PanelResizer> & {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean;
 }) => (
-  <PanelResizer
+  <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary/50 focus-visible:ring-offset-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
-    size="3px"
     {...props}
   >
     <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500" />
@@ -40,9 +37,7 @@ const ResizableHandle = ({
         ))}
       </div>
     )}
-  </PanelResizer>
+  </ResizablePrimitive.PanelResizeHandle>
 );
 
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
-
-export type ResizableSnapshot = React.ComponentProps<typeof PanelGroup>["snapshot"];

apps/webapp/app/components/primitives/TreeView/TreeView.tsx

@@ -241,7 +241,7 @@ export function useTree<TData, TFilterValue>({
         index,
       });
     },
-    overscan: 50,
+    overscan: 20,
   });
 
   const scrollToNodeFn = useCallback(