Get communication working between extension and webview; add shared data types

webview-ui/src/App.tsx

@@ -1,42 +1,28 @@
-import React, { useState } from "react"
-import logo from "./logo.svg"
+import React, { useEffect, useState } from "react"
 import "./App.css"
 
-import { vscode } from "./utilities/vscode"
-import {
-	VSCodeBadge,
-	VSCodeButton,
-	VSCodeCheckbox,
-	VSCodeDataGrid,
-	VSCodeDataGridCell,
-	VSCodeDataGridRow,
-	VSCodeDivider,
-	VSCodeDropdown,
-	VSCodeLink,
-	VSCodeOption,
-	VSCodePanels,
-	VSCodePanelTab,
-	VSCodePanelView,
-	VSCodeProgressRing,
-	VSCodeRadio,
-	VSCodeRadioGroup,
-	VSCodeTag,
-	VSCodeTextArea,
-	VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react"
 import ChatSidebar from "./components/ChatSidebar"
-import Demo from "./components/Demo"
 import SettingsView from "./components/SettingsView"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
 
 const App: React.FC = () => {
-	const [showSettings, setShowSettings] = useState(true)
+	const [showSettings, setShowSettings] = useState(false)
 
-	const handleHowdyClick = () => {
-		vscode.postMessage({
-			command: "hello",
-			text: "Hey there partner! 🤠",
+	useEffect(() => {
+		window.addEventListener("message", (e: MessageEvent) => {
+			const message: ExtensionMessage = e.data
+			if (message.type === "action") {
+				switch (message.action!) {
+					case "settingsButtonTapped":
+						setShowSettings(true)
+						break
+					case "plusButtonTapped":
+						setShowSettings(false)
+						break
+				}
+			}
 		})
-	}
+	}, [])
 
 	return <>{showSettings ? <SettingsView /> : <ChatSidebar />}</>
 }