Began adding editor

src/common.ts

@@ -0,0 +1,30 @@
+import $ from 'jquery';
+import { update } from './explorer.js';
+import { cd, cwd, resolve } from '@zenfs/core/emulation/path.js';
+import { fs } from '@zenfs/core';
+
+export function switchTab(name: string): void {
+	$('.tab').hide();
+	$('#' + name)
+		.filter('.tab')
+		.show();
+
+	if (name == 'explorer') {
+		update();
+	}
+}
+
+export function openPath(dir: string, fromShell: boolean = false): void {
+	if (fs.statSync(dir).isDirectory()) {
+		cd(dir);
+		$('#location').val(cwd);
+		return;
+	}
+
+	if (fromShell) {
+		throw new Error(`Error: ENOTDIR: File is not a directory, '${resolve(dir)}'`);
+	}
+
+	switchTab('editor');
+	$('#editor .content').text(fs.readFileSync(dir, 'utf-8'));
+}

src/explorer.ts

@@ -1,23 +1,12 @@
 import { fs } from '@zenfs/core';
-import { cwd, join, cd, resolve } from '@zenfs/core/emulation/path.js';
+import { cwd, join } from '@zenfs/core/emulation/path.js';
 import $ from 'jquery';
 import { formatCompact } from 'utilium';
 import { cloneTemplate } from 'utilium/dom.js';
+import { openPath } from './common.js';
 
 export const location = $<HTMLInputElement>('#location');
 
-export function openPath(dir: string, fromShell: boolean = false): void {
-	if (fs.statSync(dir).isDirectory()) {
-		cd(dir);
-		$('#location').val(cwd);
-		return;
-	}
-
-	if (fromShell) {
-		throw new Error(`Error: ENOTDIR: File is not a directory, '${resolve(dir)}'`);
-	}
-}
-
 const endsWithLetter = /[^\d]$/;
 
 function createEntry(name: string) {

src/index.html

@@ -10,6 +10,7 @@
 		<div id="nav">
 			<button name="config">Config</button>
 			<button name="explorer">Explorer</button>
+			<button name="editor">Editor</button>
 			<button name="terminal">Terminal</button>
 			<input id="location" value="/" placeholder="Path" />
 		</div>
@@ -53,6 +54,12 @@
 			</template>
 		</ul>
 
+		<div id="editor" class="tab" style="display: none">
+			<strong class="title">Editor</strong>
+
+			<textarea class="content"></textarea>
+		</div>
+
 		<div id="terminal" class="tab" style="display: none">
 			<div id="terminal-container"></div>
 		</div>

src/index.ts

@@ -3,22 +3,14 @@ import './styles.css';
 
 import $ from 'jquery';
 import './config.js';
-import { update, openPath, location } from './explorer.js';
+import { update, location } from './explorer.js';
 import './shell.js';
 import { cwd, isAbsolute } from '@zenfs/core/emulation/path.js';
 import { fs } from '@zenfs/core';
+import { openPath, switchTab } 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();
-	}
-});
+$<HTMLButtonElement>('#nav button').on('click', e => switchTab(e.target.name));
 
 location.on('change', () => {
 	const value = location.val() ?? '';

src/shell.ts

@@ -7,7 +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 { openPath } from './explorer.js';
+import { openPath } from './common.js';
 
 const terminal = new Terminal({
 	convertEol: true,

src/styles.css

@@ -28,6 +28,11 @@ select {
 	padding: 0.25em;
 }
 
+textarea:focus,
+input:focus {
+	outline: none;
+}
+
 #location {
 	padding: 0.25em 1em;
 	border-radius: 0.5em;
@@ -146,6 +151,13 @@ select {
 	}
 }
 
+#editor textarea.content {
+	position: absolute;
+	inset: 3em 1em 1em 1em;
+	border-radius: 0.5em;
+	border: none;
+}
+
 #terminal-container {
 	position: absolute;
 	inset: 1em;