Deselecting holes (#130)

* minimal working version of deselecting
* stropPropagation for expected type, making it not trigger the onClick

Author: JakubSchwenkbeck

src/holesPanel/holesViewProvider.ts

@@ -101,6 +101,10 @@ export class HolesViewProvider implements vscode.WebviewViewProvider {
               vscode.TextEditorRevealType.InCenter,
             );
           }
+          this.webviewView?.webview.postMessage({
+            command: 'highlightHole',
+            holeId: hole.id,
+          });
         }
       }
     });

src/holesPanel/webview/BindingsSection.tsx

@@ -74,7 +74,7 @@ export const BindingsSection: React.FC<BindingsSectionProps> = ({
   const filteredCount = filteredBindings.length;
 
   return (
-    <div className="bindings-section">
+    <div className="bindings-section" onClick={(e) => e.stopPropagation()}>
       <div
         className={`bindings-header${isActive ? '' : ' collapsed'}`}
         data-hole-id={holeId}

src/holesPanel/webview/HoleCard.tsx

@@ -6,12 +6,14 @@ interface HoleCardProps {
   hole: EffektHoleInfo;
   highlighted: boolean;
   onJump: (id: string) => void;
+  onDeselect: () => void;
 }
 
 export const HoleCard: React.FC<HoleCardProps> = ({
   hole,
   highlighted,
   onJump,
+  onDeselect,
 }) => {
   const cardRef = useRef<HTMLDivElement>(null);
 
@@ -26,19 +28,25 @@ export const HoleCard: React.FC<HoleCardProps> = ({
       ref={cardRef}
       className={`hole-card${highlighted ? ' highlighted' : ''}`}
       id={`hole-${hole.id}`}
-      onClick={highlighted ? undefined : () => onJump(hole.id)}
+      onClick={() => {
+        if (highlighted) {
+          onDeselect();
+        } else {
+          onJump(hole.id);
+        }
+      }}
     >
       <div className="hole-header">
         <span className="hole-id">Hole: {hole.id}</span>
       </div>
       {hole.expectedType && (
-        <div className="hole-field">
+        <div className="hole-field" onClick={(e) => e.stopPropagation()}>
           <span className="field-label">Expected Type:</span>
           <span className="field-value">{hole.expectedType}</span>
         </div>
       )}
       {hole.innerType && (
-        <div className="hole-field">
+        <div className="hole-field" onClick={(e) => e.stopPropagation()}>
           <span className="field-label">Inner type:</span>
           <span className="field-value">{hole.innerType}</span>
         </div>

src/holesPanel/webview/HolesPanel.tsx

@@ -73,6 +73,10 @@ export const HolesPanel: React.FC<{ initShowHoles: boolean }> = ({
     vscode.postMessage({ command: 'jumpToHole', holeId: id });
   }, []);
 
+  const handleDeselect = useCallback(() => {
+    setHighlightedHoleId(null);
+  }, []);
+
   return (
     <div className="holes-list">
       {!showHoles && <Warning />}
@@ -85,6 +89,7 @@ export const HolesPanel: React.FC<{ initShowHoles: boolean }> = ({
             hole={h}
             highlighted={h.id === highlightedHoleId}
             onJump={handleJump}
+            onDeselect={handleDeselect}
           />
         ))
       )}