feat: use auto save Ids for persisting panels position ✨

apps/core/src/routes/dashboard/_layout.tsx

@@ -16,8 +16,9 @@ import { unwrapResult } from "@/lib/utils"
 import { cn } from "@tablex/lib/utils"
 import { createFileRoute, Link, Outlet, redirect } from "@tanstack/react-router"
 import { ArrowLeft, PanelLeftClose, Table } from "lucide-react"
-import { useEffect, useRef, useState, type KeyboardEvent } from "react"
+import { useEffect, useRef, useState } from "react"
 import type { ImperativePanelHandle } from "react-resizable-panels"
+import { useDebounceCallback } from "usehooks-ts"
 import { z } from "zod"
 
 const dashboardConnectionSchema = z.object({
@@ -51,8 +52,8 @@ function DashboardLayout() {
   const data = Route.useLoaderData()
   const searchParams = Route.useSearch()
   const keybindingsManager = useKeybindings()
-  const [, setSideBarCollapsed] = useState(false) // NOTE: I don't know why this is needed, but collapsing doesn't work without it.
-  const [tables, setTables] = useState<string[]>(data!.tables)
+  const [tables, setTables] = useState<string[]>(data.tables)
+  const [, setSideBarCollapsed] = useState(false)
   const sidebarPanelRef = useRef<ImperativePanelHandle>(null)
 
   useEffect(() => {
@@ -64,30 +65,31 @@ function DashboardLayout() {
     ])
   }, [keybindingsManager])
 
-  let timeout: NodeJS.Timeout
-  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
-    const searchPattern = e.currentTarget.value
+  const handleTableSearch = (searchPattern: string) => {
     if (searchPattern === "") return setTables(data!.tables)
 
-    clearTimeout(timeout)
-
-    timeout = setTimeout(() => {
-      const filteredTables = tables.filter((table) =>
-        table.includes(searchPattern)
-      )
-      setTables(filteredTables)
-    }, 100)
+    const filteredTables = tables.filter((table) =>
+      table.includes(searchPattern)
+    )
+    setTables(filteredTables)
   }
 
+  const debounced = useDebounceCallback(handleTableSearch)
+
   return (
-    <ResizablePanelGroup className="flex h-full w-full" direction="horizontal">
+    <ResizablePanelGroup
+      className="flex h-full w-full"
+      direction="horizontal"
+      autoSaveId={"@tablex/layout"}
+    >
       <ResizablePanel
         ref={sidebarPanelRef}
         defaultSize={14}
-        onCollapse={() => setSideBarCollapsed(true)}
         onExpand={() => setSideBarCollapsed(false)}
+        onCollapse={() => setSideBarCollapsed(true)}
         collapsible
-        minSize={0}
+        minSize={12}
+        collapsedSize={0}
         className={cn(
           "flex flex-col items-start justify-between bg-zinc-800 p-4 pt-2 transition-all lg:p-6",
           sidebarPanelRef.current?.isCollapsed() && "w-0 p-0 lg:w-0 lg:p-0"
@@ -126,7 +128,7 @@ function DashboardLayout() {
           <div className="flex w-full items-center justify-center rounded-sm px-1">
             <Input
               id="search_input"
-              onKeyUp={handleKeyUp}
+              onChange={(e) => debounced(e.currentTarget.value)}
               placeholder="Search..."
               className="h-6 border-none text-sm transition-all placeholder:text-xs focus-visible:ring-0 focus-visible:ring-offset-0 lg:h-8 lg:w-[170px] lg:placeholder:text-base lg:focus:w-full"
             />
@@ -147,7 +149,7 @@ function DashboardLayout() {
                     preload={false}
                     key={index}
                     className={cn(
-                      "hover:bg-muted-foreground/30 flex w-full items-center gap-x-1 rounded-md p-1 text-sm text-white lg:text-base",
+                      "hover:bg-muted-foreground/30 flex w-full items-center gap-x-1 overflow-x-hidden rounded-md p-1 text-sm text-white lg:text-base",
                       searchParams.tableName === table &&
                         "bg-muted-foreground/30"
                     )}

apps/core/src/routes/dashboard/_layout/$tableName/-components/data-table.tsx

@@ -83,7 +83,7 @@ const DataTable = ({ columns }: DataTableProps) => {
   const virtualizer = useVirtualizer({
     count: table.getRowCount(),
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 50, // I reached to this number by trial and error
+    estimateSize: () => 34, // I reached to this number by trial and error
     overscan: 10,
     debug: import.meta.env.DEV
   })

apps/core/src/routes/dashboard/_layout/$tableName/-components/table-actions.tsx

@@ -21,6 +21,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
 import { useTableState } from "@/state/tableState"
+import { useDebounceCallback } from "usehooks-ts"
 
 type TableActionsProps = {
   table: Table<any>
@@ -29,6 +30,10 @@ type TableActionsProps = {
 const TableActions = ({ table }: TableActionsProps) => {
   const { toggleDialog: toggleSqlEditor } = useSqlEditorState()
   const { tableName, setGlobalFilter } = useTableState()
+  const debounced = useDebounceCallback(
+    (filter: string) => setGlobalFilter(filter),
+    200
+  )
   return (
     <>
       <div className="flex items-end justify-between p-4">
@@ -39,9 +44,7 @@ const TableActions = ({ table }: TableActionsProps) => {
           <Input
             className="hidden min-w-[500px] placeholder:text-white/50 lg:block"
             placeholder="Type something to filter..."
-            onChange={(value) =>
-              setGlobalFilter(String(value.currentTarget.value))
-            }
+            onChange={(value) => debounced(String(value.currentTarget.value))}
           />
         </div>
         <div className="flex flex-col items-end gap-y-1 lg:gap-y-3">

apps/core/src/routes/dashboard/_layout/$tableName/route.tsx

@@ -43,7 +43,7 @@ function TableData() {
   if (isError) return toast.error(error.message, { id: "get_table_columns" })
 
   return (
-    <section className="flex w-full flex-col overflow-auto will-change-scroll">
+    <section className="flex h-full w-full flex-col overflow-auto will-change-scroll">
       <DataTable columns={columns!} />
     </section>
   )