Finish file explorer

page/src/FilesystemExplorer.tsx

@@ -35,6 +35,7 @@ export interface FilesystemExplorerProps {
 export interface FilesystemExplorerState {
   path: string[];
   createFolder: boolean;
+  resetFilesys: boolean;
   errorText: string;
   removeFile: string;
   renameFile: string;
@@ -191,6 +192,7 @@ export class FilesystemExplorer extends React.Component<
     this.state = {
       path: this.props.path,
       createFolder: false,
+      resetFilesys: false,
       errorText: "",
       removeFile: "",
       renameFile: "",
@@ -440,14 +442,56 @@ export class FilesystemExplorer extends React.Component<
     );
   }
 
+  _renderResetDialog() {
+    return (
+      <Dialog
+        open={this.state.resetFilesys}
+        onOpenChange={(open) => this.setState({ resetFilesys: open })}
+      >
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Reset filesystem</DialogTitle>
+            <DialogDescription className="hidden">
+              Reset filesystem
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            Are you sure you want to reset the filesystem?
+          </div>
+          <DialogFooter>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                this.setState({ resetFilesys: false });
+                this.props.resetFilesys();
+              }}
+            >
+              Ok
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                this.setState({ resetFilesys: false });
+              }}
+            >
+              Cancel
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   _renderBreadcrumbElements() {
     const elements = generateBreadcrumbElements(this.state.path);
 
     return elements.map((e, index) => {
       if (index == this.state.path.length) {
         return (
-          <BreadcrumbItem key={`breadcrumb-page-${index}`}>
-            <BreadcrumbPage>{e.node}</BreadcrumbPage>
+          <BreadcrumbItem key={`breadcrumb-item-${index}`}>
+            <BreadcrumbPage key={`breadcrumb-page-${index}`}>
+              {e.node}
+            </BreadcrumbPage>
           </BreadcrumbItem>
         );
       }
@@ -455,8 +499,10 @@ export class FilesystemExplorer extends React.Component<
       const navigate = () => this.setState({ path: e.targetPath });
       return (
         <>
-          <BreadcrumbItem key={`breadcrumb-${index}`}>
-            <BreadcrumbLink onClick={navigate}>{e.node}</BreadcrumbLink>
+          <BreadcrumbItem key={`breadcrumb-item-${index}`}>
+            <BreadcrumbLink key={`breadcrumb-link-${index}`} onClick={navigate}>
+              {e.node}
+            </BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbSeparator key={`breadcrumb-separator-${index}`} />
         </>
@@ -481,8 +527,19 @@ export class FilesystemExplorer extends React.Component<
         {this._renderRenameDialog()}
         {this._renderErrorDialog()}
         {this._renderRemoveDialog()}
+        {this._renderResetDialog()}
 
-        {this._renderBreadCrumb()}
+        <div className="flex flex-row w-full items-center gap-3">
+          <div className="whitespace-nowrap">{this._renderBreadCrumb()}</div>
+          <div className="flex-1 text-right">
+            <Button
+              onClick={() => this.setState({ resetFilesys: true })}
+              variant="destructive"
+            >
+              Reset
+            </Button>
+          </div>
+        </div>
 
         <Dropzone onDrop={this._uploadFiles} noClick={true}>
           {({ getRootProps, getInputProps }) => (

page/src/Playground.tsx

@@ -46,9 +46,11 @@ export function Playground() {
     const fs = await initFilesys();
     await fs.delete();
 
-    setFilesystem(null);
     setFilesystemPromise(null);
+    setFilesystem(null);
     setDrawerOpen(false);
+
+    output.current?.clear();
   }
 
   function initFilesys() {
@@ -122,7 +124,7 @@ export function Playground() {
       <div className="h-[100dvh] flex flex-col">
         <header className="flex shrink-0 items-center gap-2 border-b p-2 overflow-y-auto">
           <Button size="sm" className="fancy" onClick={start}>
-            <PlayFill /> Start
+            <PlayFill /> <span>Start</span>
           </Button>
 
           <Button
@@ -132,7 +134,7 @@ export function Playground() {
             className="fancy"
             onClick={() => emulator?.stop()}
           >
-            <StopFill /> Stop
+            <StopFill /> <span className="hidden sm:inline">Stop</span>
           </Button>
           <Button
             size="sm"
@@ -143,11 +145,11 @@ export function Playground() {
           >
             {isEmulatorPaused() ? (
               <>
-                <PlayFill /> Resume
+                <PlayFill /> <span className="hidden sm:inline">Resume</span>
               </>
             ) : (
               <>
-                <PauseFill /> Pause
+                <PauseFill /> <span className="hidden sm:inline">Pause</span>
               </>
             )}
           </Button>
@@ -155,7 +157,7 @@ export function Playground() {
           <Popover>
             <PopoverTrigger asChild>
               <Button size="sm" variant="secondary" className="fancy">
-                <GearFill /> Settings
+                <GearFill /> <span className="hidden sm:inline">Settings</span>
               </Button>
             </PopoverTrigger>
             <PopoverContent>

page/src/filesystem.ts

@@ -61,6 +61,10 @@ function deleteDatabase(dbName: string) {
   });
 }
 
+function filterPseudoDir(e: string) {
+  return e != "." && e != "..";
+}
+
 export class Filesystem {
   private idbfs: MainModule;
 
@@ -93,7 +97,7 @@ export class Filesystem {
     }
 
     this.readDir(element) //
-      .filter((e) => e != "." && e != "..")
+      .filter(filterPseudoDir)
       .forEach((e) => {
         this._unlinkRecursive(`${element}/${e}`);
       });
@@ -136,8 +140,20 @@ export class Filesystem {
     return (this.stat(file).mode & 0x4000) != 0;
   }
 
-  delete() {
-    return deleteDatabase("/root");
+  async delete() {
+    this.readDir("/root") //
+      .filter(filterPseudoDir) //
+      .forEach((e) => {
+        try {
+          this._unlinkRecursive(e);
+        } catch (_) {}
+      });
+
+    await this.sync();
+
+    try {
+      await deleteDatabase("/root");
+    } catch (e) {}
   }
 }