feat(visualizer): improve searching experience

- dark mode support
- navigate between result options using up and down
- handle enter press for selection
- add shortcut command for search

Author: BOCOVO

.vscode/launch.json

@@ -15,7 +15,7 @@
       "outFiles": [
         "${workspaceFolder}/packages/dbml-vs-code-extension/dist/extension/*.js"
       ],
-      "preLaunchTask": "npm: dev"
+      "preLaunchTask": "yarn: dev"
     },
     {
       "name": "Preview DBML Extension",
@@ -27,7 +27,7 @@
       "outFiles": [
         "${workspaceFolder}/packages/dbml-vs-code-extension/dist/extension/*.js"
       ],
-      "preLaunchTask": "npm: build"
+      "preLaunchTask": "yarn: build"
     },
     {
       "name": "Preview Prisma Extension",
@@ -39,7 +39,7 @@
       "outFiles": [
         "${workspaceFolder}/packages/prisma-vs-code-extension/dist/extension/*.js"
       ],
-      "preLaunchTask": "npm: build:prisma"
+      "preLaunchTask": "yarn: build:prisma"
     }
   ]
 }

packages/dbml-vs-code-extension/package.json

@@ -87,9 +87,9 @@
     "pretest": "yarn run compile-tests && yarn run build && yarn run lint",
     "lint": "eslint src --ext ts",
     "test": "vscode-test",
-    "build": "vite build && yarn run generate:css",
+    "build": "npx vite build && yarn run generate:css",
     "package": "yarn run build",
-    "preview": "vite preview",
+    "preview": "npx vite preview",
     "create:package": "vsce package",
     "publish": "vsce publish",
     "generate:css": "cd ../json-table-schema-visualizer && npx tailwindcss -i ./src/styles/index.css >  ../dbml-vs-code-extension/dist/webview/assets/index.css --minify"

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramViewer.tsx

@@ -14,14 +14,17 @@ import Tables from "./Tables";
 import TablesPositionsProvider from "@/providers/TablesPositionsProvider";
 import MainProviders from "@/providers/MainProviders";
 import TableLevelDetailProvider from "@/providers/TableDetailLevelProvider";
-
+import { useThemeContext } from "@/hooks/theme";
+import { Theme } from "@/types/theme";
 interface DiagramViewerProps {
   tables: JSONTableTable[];
   refs: JSONTableRef[];
   enums: JSONTableEnum[];
 }
 
 const DiagramViewer = ({ refs, tables, enums }: DiagramViewerProps) => {
+  const { theme } = useThemeContext();
+
   if (tables.length === 0) {
     return <EmptyTableMessage />;
   }
@@ -30,13 +33,16 @@ const DiagramViewer = ({ refs, tables, enums }: DiagramViewerProps) => {
     <TableLevelDetailProvider>
       <TablesPositionsProvider tables={tables} refs={refs}>
         <MainProviders tables={tables} enums={enums}>
-          <>
+          <main
+            className={`relative flex flex-col items-center ${theme === Theme.dark ? "dark" : ""}`}
+          >
             <Search tables={tables} />
+
             <DiagramWrapper>
               <RelationsConnections refs={refs} />
               <Tables tables={tables} />
             </DiagramWrapper>
-          </>
+          </main>
         </MainProviders>
       </TablesPositionsProvider>
     </TableLevelDetailProvider>

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramWrapper.tsx

@@ -9,8 +9,7 @@ import type { Stage as CoreStage } from "konva/lib/Stage";
 import { useWindowSize } from "@/hooks/window";
 import { useCursorChanger } from "@/hooks/cursor";
 import { DIAGRAM_PADDING } from "@/constants/sizing";
-import { useThemeColors, useThemeContext } from "@/hooks/theme";
-import { Theme } from "@/types/theme";
+import { useThemeColors } from "@/hooks/theme";
 import { useStageStartingState } from "@/hooks/stage";
 import { stageStateStore } from "@/stores/stagesState";
 import { useScrollDirectionContext } from "@/hooks/scrollDirection";
@@ -26,7 +25,6 @@ interface DiagramWrapperProps {
 const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   const scaleBy = 1.02;
   const { height: windowHeight, width: windowWidth } = useWindowSize();
-  const { theme } = useThemeContext();
   const { scrollDirection } = useScrollDirectionContext();
   const { onChange: onGrabbing, onRestore: onGrabRelease } =
     useCursorChanger("grabbing");
@@ -211,9 +209,7 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   }, []);
 
   return (
-    <main
-      className={`relative flex flex-col items-center ${theme === Theme.dark ? "dark" : ""}`}
-    >
+    <>
       <Stage
         draggable
         ref={stageRef}
@@ -234,7 +230,7 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
       </Stage>
 
       <Toolbar onFitToView={fitToView} />
-    </main>
+    </>
   );
 };
 

packages/json-table-schema-visualizer/src/components/Search/Search.tsx

@@ -1,4 +1,10 @@
-import { useState, useMemo, useRef, useEffect } from "react";
+import {
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+  type KeyboardEvent,
+} from "react";
 import { type JSONTableTable } from "shared/types/tableSchema";
 
 import eventEmitter from "@/events-emitter";
@@ -23,6 +29,7 @@ const Search = ({ tables }: SearchProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const { setHoveredTableName, setHighlightedColumns } = useTablesInfo();
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const searchResults = useMemo(() => {
     if (search.length < 2) return [];
@@ -87,35 +94,85 @@ const Search = ({ tables }: SearchProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleShortcut = (e: globalThis.KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "f") {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", handleShortcut);
+    return () => {
+      window.removeEventListener("keydown", handleShortcut);
+    };
+  }, []);
+
+  const handleOnEnterClick = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      if (searchResults.length > 0) {
+        handleSelect(searchResults[0]);
+        setIsOpen(false);
+      }
+    }
+    if (e.key === "ArrowDown") {
+      const firstButton = dropdownRef.current?.querySelector("button");
+      firstButton?.focus();
+    }
+  };
+
+  const handleOptionClick = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      (e.currentTarget.nextElementSibling as HTMLElement | null)?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      (e.currentTarget.previousElementSibling as HTMLElement | null)?.focus();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      e.currentTarget.click();
+    }
+  };
+
   return (
     <div className="fixed top-4 right-4 z-50" ref={dropdownRef}>
       <div className="relative">
-        <input
-          type="text"
-          value={search}
-          onChange={(e) => {
-            setSearch(e.target.value);
-            setIsOpen(true);
-          }}
-          placeholder="Search tables and columns..."
-          className="w-64 px-4 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        />
+        <div
+          title="Use ⌘+F or control+F command to search"
+          className="relative flex items-center"
+        >
+          <input
+            type="text"
+            value={search}
+            onKeyDown={handleOnEnterClick}
+            ref={inputRef}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setIsOpen(true);
+            }}
+            placeholder="Search tables and columns..."
+            className="w-72 px-4 py-3 focus:outline-none text-sm rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+
+          <span className="absolute right-2 px-2 py-1 rounded-lg bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+            ⌘F
+          </span>
+        </div>
 
         {isOpen && searchResults.length > 0 && (
-          <div className="absolute top-full mt-1 w-full bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 max-h-60 overflow-y-auto">
+          <div className="absolute top-full mt-1 w-full bg-white dark:bg-gray-700 rounded-xl shadow-lg border border-gray-200 dark:border-gray-600 max-h-60 overflow-y-auto">
             {searchResults.map((result, index) => (
               <button
+                tabIndex={-index}
                 key={`${result.type}-${result.tableName}-${result.name}-${index}`}
                 onClick={() => {
                   handleSelect(result);
                 }}
-                className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-600 flex flex-col items-start"
+                onKeyDown={handleOptionClick}
+                className="w-full px-4 py-2 text-left text-sm focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-600 focus:bg-gray-100 dark:focus:bg-gray-600 flex flex-col items-start"
               >
                 <div className="flex space-x-2 w-full items-start">
-                  <span className="text-xs mt-[2px]">
-                    {result.type === "table" ? "📋" : "🔤"}
-                  </span>
-                  <span className="font-medium break-all text-gray-700">
+                  <span className="font-medium break-all text-gray-700 dark:text-gray-200">
                     {result.name}
                   </span>
                 </div>

packages/json-table-schema-visualizer/src/components/Table.tsx

@@ -62,20 +62,31 @@ const Table = ({ fields, name }: TableProps) => {
   // Subscribe to highlight events for this table and animate the border
   useEffect(() => {
     const eventName = `highlight:table:${name}`;
+
     const handler = () => {
-      // Animate using Konva to make transition smooth
       const rect = highlightRef.current;
-      if (rect != null) {
-        // Set stroke color according to theme
-        const color = theme === Theme.dark ? "#FBBF24" : "#3B82F6";
-        rect.stroke(color);
-        rect.to({ strokeWidth: 3, opacity: 1, duration: 0.18 });
-
-        // After 2s, animate out
-        setTimeout(() => {
-          rect.to({ strokeWidth: 0, opacity: 0, duration: 0.28 });
-        }, 2000);
-      }
+      if (rect === null || rect === undefined) return;
+
+      const color = theme === Theme.dark ? "#FBBF24" : "#3B82F6";
+
+      // Nombre de clignotements et intervalle
+      const flashes = 3;
+      const interval = 200; // ms
+
+      let count = 0;
+      rect.stroke(color);
+      rect.opacity(1);
+      rect.strokeWidth(5);
+
+      const blinkInterval = setInterval(() => {
+        rect.opacity(rect.opacity() === 1 ? 0 : 1);
+        count++;
+        if (count >= flashes * 2) {
+          clearInterval(blinkInterval);
+          // Reset strokeWidth and opacity
+          rect.to({ strokeWidth: 0, opacity: 0, duration: 0.5 });
+        }
+      }, interval);
     };
 
     eventEmitter.on(eventName, handler);

packages/prisma-vs-code-extension/package.json

@@ -70,9 +70,9 @@
     "pretest": "yarn run compile-tests && yarn run build && yarn run lint",
     "lint": "eslint src --ext ts",
     "test": "vscode-test",
-    "build:prisma": "vite build && yarn run generate:css",
+    "build:prisma": "npx vite build && yarn run generate:css",
     "package": "yarn run build:prisma",
-    "preview": "vite preview",
+    "preview": "npx vite preview",
     "create:package": "vsce package",
     "publish": "vsce publish",
     "generate:css": "cd ../json-table-schema-visualizer && npx tailwindcss -i ./src/styles/index.css >  ../prisma-vs-code-extension/dist/webview/assets/index.css --minify"