Fix file explorer

Author: tim-we

src/main/SessionProxy.ts

@@ -43,8 +43,17 @@ export default class SessionProxy {
     return this.#remoteExtension.getPermissions();
   }
 
+  getDirectoryContents(path: string) {
+    return this.#remoteSession.getDirectoryContents(path);
+  }
+
+  changeFileSystemCursor(selectedPath: string, key: KeyboardEvent["key"]) {
+    return this.#remoteSession.changeFileSystemCursor(selectedPath, key);
+  }
+
   async dispose() {
     this.#remoteSession.free();
     this.#remoteSession[releaseProxy]();
+    this.#remoteExtension[releaseProxy]();
   }
 }

src/main/ui/file-explorer/FileExplorer.tsx

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "preact";
 import type { FSNodeDTO } from "../../../extension/FileSystem";
+import type SessionProxy from "../../SessionProxy";
 
 import { useState } from "preact/hooks";
 
@@ -11,10 +12,10 @@ import "./file-explorer.css";
 import SelectedFSNodeContext from "../contexts/SelectedFSNodeContext";
 
 type ExplorerProps = {
-  extensionId: string;
+  session: SessionProxy;
 };
 
-const FileExplorer: FunctionComponent<ExplorerProps> = ({ extensionId }) => {
+const FileExplorer: FunctionComponent<ExplorerProps> = ({ session }) => {
   const [previewFile, setPreviewFile] = useState<FileNodeDTO | undefined>(undefined);
   const [selectedFSNode, setSelectedFSNode] = useState<string | undefined>(undefined);
 
@@ -24,7 +25,7 @@ const FileExplorer: FunctionComponent<ExplorerProps> = ({ extensionId }) => {
   };
 
   return (
-    <SessionContext.Provider value={extensionId}>
+    <SessionContext.Provider value={session}>
       <SelectedFSNodeContext.Provider value={selectedFSNode}>
         <div class="file-explorer">
           <FolderContentView

src/main/ui/file-explorer/FolderContentView.tsx

@@ -21,16 +21,16 @@ const FolderContentView: FunctionComponent<FCVProps> = ({
   showFilePreview,
   selectFSNode
 }) => {
-  const extId = useContext(SessionContext)!;
+  const session = useContext(SessionContext)!;
   const selectedPath = useContext(SelectedFSNodeContext);
   const [contents, setContents] = useState<FSNodeDTO[] | undefined>(undefined);
   const ulRef = useRef<HTMLUListElement>(null);
 
   const isRoot = path === "/" || path === "";
 
   useEffect(() => {
-    wrappedWorker.getDirectoryContents(extId, path).then(setContents, (e) => console.error(e));
-  }, [extId, path]);
+    session.getDirectoryContents(path).then(setContents, (e) => console.error(e));
+  }, [session, path]);
 
   if (contents === undefined) {
     return <span class="folder-content">...</span>;
@@ -47,7 +47,7 @@ const FolderContentView: FunctionComponent<FCVProps> = ({
       return;
     }
     e.preventDefault();
-    const next = await wrappedWorker.changeFileSystemCursor(extId, selectedPath, e.key);
+    const next = await session.changeFileSystemCursor(selectedPath, e.key);
     selectFSNode(next);
   };
 
@@ -103,7 +103,7 @@ const FileView: FunctionComponent<{ node: FileDTO }> = ({ node }) => {
       document.getElementById(labelId)!.focus();
       scrollIntoViewIfNeeded(liRef.current!);
     }
-  }, [selected, liRef.current, labelId]);
+  }, [selected, labelId]);
 
   return (
     <li
@@ -141,7 +141,7 @@ const FolderView: FunctionComponent<{ node: FolderDTO; selectFSNode?: FSNodeSele
       liRef.current!.querySelector("summary")!.focus();
       scrollIntoViewIfNeeded(liRef.current!);
     }
-  }, [selected, liRef.current]);
+  }, [selected]);
 
   useEffect(() => {
     if (expanded || !selectedPath || !selectFSNode) {

src/main/ui/tiles/FilesTile.tsx

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "preact";
-import type { ExtensionData } from "../../../extension/types/ExtensionData";
+import type { ExtensionSummary } from "../../../extension/types/ExtensionSummary";
+import type SessionProxy from "../../SessionProxy";
 
 import DonutChart from "../common/DonutChart";
 import FileExplorer from "../file-explorer/FileExplorer";
@@ -16,7 +17,7 @@ const mappings: Record<FileType, { label: string; color: string }> = {
   // WASM: rgb(101, 78, 240)
 };
 
-const FilesTile: FunctionComponent<ExtensionData["files"]> = (data) => {
+const FilesTile: FunctionComponent<ExtensionSummary["files"]> = (data) => {
   const chartData = Object.entries(mappings).map(([key, props]) => ({
     amount: data[key as FileType],
     color: props.color
@@ -46,11 +47,11 @@ const FilesTile: FunctionComponent<ExtensionData["files"]> = (data) => {
 
 export default FilesTile;
 
-function createFileExplorerPopupOptions(extensionId: string) {
+function createFileExplorerPopupOptions(session: SessionProxy) {
   return {
     title: "File Explorer",
     icon: "file-explorer",
-    content: <FileExplorer extensionId={extensionId} />,
+    content: <FileExplorer session={session} />,
     initialWidth: 700,
     initialHeight: 500
   };
@@ -60,4 +61,4 @@ const ChartColorIndicator: FunctionComponent<{ color: string }> = ({ color }) =>
   <span class="chart-color-indicator" style={`background-color: ${color}`} />
 );
 
-type FileType = keyof ExtensionData["files"];
+type FileType = keyof ExtensionSummary["files"];