Wire up some more

ui/tracer/src/AddTargetsDialog.tsx

@@ -0,0 +1,80 @@
+import {
+    Button,
+    ButtonGroup,
+    Card,
+    CardList,
+    Dialog,
+    DialogBody,
+    DialogFooter,
+    FormGroup,
+    InputGroup,
+    Menu,
+    MenuItem,
+    Popover
+} from "@blueprintjs/core";
+
+export interface AddTargetsProps {
+    isOpen: boolean;
+    onClose: CloseEventHandler;
+}
+
+export type CloseEventHandler = () => void;
+
+export default function AddTargetsDialog({ isOpen, onClose }: AddTargetsProps) {
+    const kindMenu = (
+        <Popover
+            content={
+                <Menu>
+                    <MenuItem text="Native Exports" />
+                    <MenuItem text="Native Imports" />
+                    <MenuItem text="Objective-C" />
+                    <MenuItem text="Swift" />
+                    <MenuItem text="Java" />
+                </Menu>
+            }
+            placement="bottom-end"
+        >
+            <Button minimal={true} rightIcon="caret-down">
+                Native Exports
+            </Button>
+        </Popover>
+    );
+
+    const actions = (
+        <ButtonGroup>
+            <Button onClick={onClose}>Close</Button>
+            <Button intent="primary">Add All</Button>
+        </ButtonGroup>
+    );
+
+    const candidates = false ? (
+        <FormGroup>
+            <CardList compact={true}>
+                <Card interactive={false} style={{"justify-content": "space-between"}}>
+                    <span>libc.so!open</span>
+                    <Button minimal={true} intent="primary" small={true} text="Add" />
+                </Card>
+                <Card interactive={false} style={{"justify-content": "space-between"}}>
+                    <span>libc.so!close</span>
+                    <Button minimal={true} intent="primary" small={true} text="Add" />
+                </Card>
+                <Card interactive={false} style={{"justify-content": "space-between"}}>
+                    <span>libc.so!sleep</span>
+                    <Button minimal={true} intent="primary" small={true} text="Add" />
+                </Card>
+            </CardList>
+        </FormGroup>
+    ) : null;
+
+    return (
+        <Dialog title="Add targets" isOpen={isOpen} onClose={onClose}>
+            <DialogBody>
+                <FormGroup>
+                    <InputGroup rightElement={kindMenu} />
+                </FormGroup>
+                {candidates}
+            </DialogBody>
+            <DialogFooter actions={actions} />
+        </Dialog>
+    );
+}

ui/tracer/src/App.css

@@ -1,3 +1,17 @@
+.navigation-area {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px #ccc solid;
+}
+
+.handler-list {
+    flex: 1;
+}
+
+.target-actions {
+    padding: 5px;
+}
+
 .work-area {
     display: flex;
     flex: 1;

ui/tracer/src/App.tsx

@@ -1,12 +1,13 @@
 import "./App.css";
+import AddTargetsDialog from "./AddTargetsDialog.tsx";
 import HandlerEditor from "./HandlerEditor.tsx";
 import HandlerList from "./HandlerList.tsx";
 import { Handler, HandlerId, ScopeId } from "./model.js";
 import {
+    BlueprintProvider,
     Callout,
     Button,
     ButtonGroup,
-    Divider,
 } from "@blueprintjs/core";
 import { useEffect, useState } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
@@ -17,6 +18,7 @@ export default function App() {
     const [selectedHandler, setSelectedHandler] = useState<HandlerId>(-1);
     const [handlerCode, setHandlerCode] = useState("");
     const [draftedCode, setDraftedCode] = useState("");
+    const [addingTargets, setAddingTargets] = useState(false);
     const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<TracerMessage>("ws://localhost:1337" /* window.location.origin */);
 
     function handleHandlerSelection(id: HandlerId) {
@@ -60,15 +62,19 @@ export default function App() {
 
     return (
         <>
-            <HandlerList
-                handlers={handlers}
-                selectedScope={selectedScope}
-                onScopeSelect={scope => setSelectedScope(scope)}
-                selectedHandler={selectedHandler}
-                onHandlerSelect={handleHandlerSelection}
-                />
-            <Divider />
-            <div className="work-area">
+            <section className="navigation-area">
+                <HandlerList
+                    handlers={handlers}
+                    selectedScope={selectedScope}
+                    onScopeSelect={scope => setSelectedScope(scope)}
+                    selectedHandler={selectedHandler}
+                    onHandlerSelect={handleHandlerSelection}
+                    />
+                <ButtonGroup className="target-actions" vertical={true}>
+                    <Button intent="success" icon="add" fill={true} onClick={() => setAddingTargets(true)}>Add</Button>
+                </ButtonGroup>
+            </section>
+            <section className="work-area">
                 {connectionError}
                 <ButtonGroup minimal={true}>
                     <Button
@@ -82,7 +88,11 @@ export default function App() {
                     onChange={setDraftedCode}
                     onSave={deploy}
                     />
-            </div>
+            </section>
+            <AddTargetsDialog isOpen={addingTargets} onClose={() => setAddingTargets(false)} />
+            <BlueprintProvider>
+                <div />
+            </BlueprintProvider>
         </>
     );
 }

ui/tracer/src/HandlerList.css

@@ -1,3 +1,3 @@
-.handlers {
-    min-width: 140px;
+.handler-list {
+    min-width: 200px;
 }

ui/tracer/src/HandlerList.tsx

@@ -53,7 +53,7 @@ export default function HandlerList({ handlers, selectedScope, onScopeSelect, se
 
     return (
         <Tree
-            className="handlers"
+            className="handler-list"
             contents={handlerNodes}
             onNodeClick={handleNodeClick}
             onNodeExpand={handleNodeExpand}