feat(explorer): save searched namespace (#3470)

Author: karooolis

.changeset/eighty-cooks-smile.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+The context for the searched namespace and selected table is now preserved when reopening the table search and selection menu.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TableSelector.tsx

@@ -2,8 +2,7 @@ import { CheckIcon, ChevronsUpDownIcon, Link2Icon, Link2OffIcon } from "lucide-r
 import { useParams } from "next/navigation";
 import { useQueryState } from "nuqs";
 import { Hex } from "viem";
-import { useState } from "react";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { Table } from "@latticexyz/config";
 import { Button } from "../../../../../../components/ui/Button";
 import {
@@ -36,6 +35,7 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
   const { id: chainId } = useChain();
   const [selectedTableId, setTableId] = useQueryState("tableId");
   const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
   const selectedTableConfig = tables?.find(({ tableId }) => tableId === selectedTableId);
 
   useEffect(() => {
@@ -44,6 +44,16 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
     }
   }, [selectedTableId, setTableId, tables]);
 
+  useLayoutEffect(() => {
+    if (open && selectedTableId && selectedTableConfig) {
+      setTimeout(() => {
+        const selectedTableId = constructTableName(selectedTableConfig, worldAddress as Hex, chainId);
+        const selectedElement = document.querySelector(`[data-value="${selectedTableId}"]`);
+        selectedElement?.scrollIntoView({ behavior: "instant", block: "center" });
+      }, 0);
+    }
+  }, [chainId, open, selectedTableConfig, selectedTableId, worldAddress]);
+
   return (
     <div className="w-full">
       <Popover open={open} onOpenChange={setOpen}>
@@ -68,9 +78,16 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
 
         <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
           <Command>
-            <CommandInput placeholder="Search tables..." className="font-mono" />
+            <CommandInput
+              placeholder="Search tables..."
+              className="font-mono"
+              value={searchValue}
+              onValueChange={setSearchValue}
+            />
             <CommandList>
-              <CommandEmpty className="py-4 text-center font-mono text-sm">No table found.</CommandEmpty>
+              <CommandEmpty className="py-4 text-center font-mono text-sm text-muted-foreground">
+                No table found.
+              </CommandEmpty>
               <CommandGroup>
                 {tables?.map((table) => {
                   return (