Began adding explorer functionality

src/common.ts

@@ -0,0 +1,7 @@
+import { cd as _cd, cwd } from '@zenfs/core/emulation/path.js';
+import $ from 'jquery';
+
+export function cd(dir: string) {
+	_cd(dir);
+	$('#location').val(cwd);
+}

src/config.ts

@@ -5,8 +5,8 @@ import { WebAccess, WebStorage, IndexedDB } from '@zenfs/dom';
 import { Iso } from '@zenfs/iso';
 import { Zip } from '@zenfs/zip';
 import $ from 'jquery';
-import { instantiateTemplate } from './templates.js';
 import { randomHex, type Entries } from 'utilium';
+import { cloneTemplate } from 'utilium/dom.js';
 import { download, upload } from 'utilium/dom.js';
 
 export type HTMLAttributeName = 'id' | 'class' | 'style' | 'href' | 'src' | 'alt' | 'title' | 'placeholder';
@@ -151,7 +151,7 @@ export const backends = [
 ] satisfies BackendOption<Backend>[];
 
 function createNewMountConfig() {
-	const li = instantiateTemplate('#mount').find('li');
+	const li = $(cloneTemplate('#mount')).find('li');
 	const id = randomHex(16);
 	li.find('input[name=id]').val(id);
 	const select = li.find('select');

src/explorer.ts

@@ -1 +1,24 @@
+import { fs } from '@zenfs/core';
+import { cwd, join } from '@zenfs/core/emulation/path.js';
 import $ from 'jquery';
+import { cloneTemplate } from 'utilium/dom.js';
+
+function createEntry(name: string) {
+	const stats = fs.statSync(join(cwd, name));
+
+	const li = $(cloneTemplate('#entry')).find('li');
+
+	li.find('.name').text(name);
+	li.find('.size').text(stats.size);
+	li.find('.mtime').text(stats.mtime.toLocaleString());
+
+	li.appendTo('#explorer');
+}
+
+export function update() {
+	$('#explorer li.entry').remove();
+
+	for (const file of fs.readdirSync(cwd)) {
+		createEntry(file);
+	}
+}

src/index.html

@@ -38,8 +38,18 @@
 		<ul id="explorer" class="tab" style="display: none">
 			<strong class="title">Explorer</strong>
 
+			<li class="header">
+				<p class="name">Name</p>
+				<p class="size">Size</p>
+				<p class="mtime">Modified</p>
+			</li>
+
 			<template id="entry">
-				<li class="entry"></li>
+				<li class="entry">
+					<p class="name"></p>
+					<p class="size"></p>
+					<p class="mtime"></p>
+				</li>
 			</template>
 		</ul>
 

src/index.ts

@@ -3,13 +3,37 @@ import './styles.css';
 
 import $ from 'jquery';
 import './config.js';
-import './explorer.js';
+import { update } from './explorer.js';
 import './shell.js';
+import { cwd, isAbsolute } from '@zenfs/core/emulation/path.js';
+import { fs } from '@zenfs/core';
+import { cd } from './common.js';
 
 // Switching tabs
 $<HTMLButtonElement>('#nav button').on('click', e => {
 	$('.tab').hide();
 	$('#' + e.target.name)
 		.filter('.tab')
 		.show();
+
+	if (e.target.name == 'explorer') {
+		update();
+	}
+});
+
+const location = $<HTMLInputElement>('#location');
+
+location.on('change', () => {
+	const value = location.val() ?? '';
+	if (!isAbsolute(value)) {
+		location.val(cwd);
+		return;
+	}
+
+	if (!fs.existsSync(value)) {
+		location.val(cwd);
+		return;
+	}
+
+	cd(value);
 });

src/shell.ts

@@ -7,6 +7,7 @@ import * as path from '@zenfs/core/emulation/path.js';
 import chalk from 'chalk';
 import $ from 'jquery';
 import { createShell } from 'utilium/shell.js';
+import { cd } from './common.js';
 
 const terminal = new Terminal({
 	convertEol: true,
@@ -26,7 +27,7 @@ if (!fs.existsSync('/bin')) {
 for (const [name, script] of [
 	['help', `terminal.writeln('Some unix commands available, ls /bin to see them.');`],
 	['ls', `terminal.writeln(fs.readdirSync(args[0] || '.').map(name => (fs.statSync(path.join(args[0] || '.', name)).isDirectory() ? chalk.blue(name) : name)).join(' '))`],
-	['cd', `path.cd(args[0] || path.resolve('.'));`],
+	['cd', `cd(args[0] || path.resolve('.'));`],
 	['cp', `fs.cpSync(args[0], args[1]);`],
 	['mv', `fs.renameSync(args[0], args[1]);`],
 	['rm', `fs.unlinkSync(args[0]);`],
@@ -40,11 +41,11 @@ for (const [name, script] of [
 	fs.chmodSync('/bin/' + name, 0o555);
 }
 
-const exec_locals = { fs, path };
+const exec_locals = { fs, path, cd };
 
 function exec(line: string): void {
 	/* eslint-disable @typescript-eslint/no-unused-vars */
-	const { fs, path } = exec_locals;
+	const { fs, path, cd } = exec_locals;
 	const [command, ...args] = line.trim().split(' ');
 	/* eslint-enable @typescript-eslint/no-unused-vars */
 

src/styles.css

@@ -104,12 +104,46 @@ select {
 	}
 }
 
+#explorer {
+	padding: 1em;
+
+	li {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+
+		p {
+			white-space: nowrap;
+			margin: 0;
+			padding: 0.25em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		p.name {
+			flex-grow: 1;
+		}
+
+		p.size {
+			flex: 0 0 5em;
+		}
+
+		p.mtime {
+			flex: 0 0 12em;
+		}
+	}
+
+	.header {
+		font-weight: bold;
+	}
+
+	.entry {
+		border: 1px solid #555;
+		border-radius: 0.5em;
+	}
+}
+
 #terminal-container {
 	position: absolute;
 	inset: 1em;
 }
-
-li.entry {
-	border-radius: 0.25em;
-	padding: 0.25em;
-}