organized the dev tools dahsboard componetns and connected them tothe backend slightly. Still working on how to display combos as a tree, then the inspector should follow.

src/components/dev-tools/LeftMenu.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import styles from "@/styles/dev-tools.module.css"
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { Container, Select, Stack, MenuItem, InputLabel, Typography } from "@mui/material"
+import { buildingTypes, unitTypes } from "@/types/dev-tools-extra";
+import { useEditor } from "@/hooks/useEditor";
+
+const debugCard = [
+  {
+    id: "terrain_forest",
+    label: "Forest",
+    children: [
+      {
+        id: "terrain_haunted_forest",
+        label: "Haunted Forest",
+        children: [
+          {
+            id: 'terrain_undead_candy_forest',
+            label: "Undead Candy Forest"
+          }
+        ]
+      }
+    ]
+  },
+]
+
+export default function LeftMenu(){
+
+  //const [themes, setThemes] = React.useState<ThemeSelection[]>([]); // get from the database
+  const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card");
+  const { changeCurrentDataId } = useEditor();
+
+  const handleSelectAsset = (_e: React.MouseEvent<Element, MouseEvent>, id: string) => {
+    changeCurrentDataId!(id);
+  }
+  return (
+    <Container className={styles.leftmenu}>
+      <Stack >
+        <Typography id="assetTypeFilter">Asset Type</Typography>       
+        <Select className="assetTypeFilter">
+          <MenuItem value="">All</MenuItem>
+          {menuMode === "card" ? 
+            buildingTypes.map((opt, i) => (<MenuItem value={opt} key={i}>{opt[0].toUpperCase() + opt.slice(1)}</MenuItem>)) : 
+            unitTypes.map((opt, i) => (<MenuItem value={opt} key={i}>{opt[0].toUpperCase() + opt.slice(1)}</MenuItem>))
+          }
+        </Select>
+
+        <InputLabel id="themeFilter">Theme</InputLabel>       
+        <Select className="themeFilter" label="Theme" >
+          <MenuItem value="">All</MenuItem>
+        </Select>
+        
+      </Stack>
+      <Typography >
+        Current {menuMode}s created
+      </Typography>
+      <RichTreeView items={debugCard} onItemClick={handleSelectAsset}>
+      </RichTreeView>
+    </Container>
+  )
+}
+