From 331d8bc3fde90b264a995522dc774ba312fb9afa Mon Sep 17 00:00:00 2001
From: James Prevett <jp@jamespre.dev>
Date: Sun, 13 Oct 2024 16:50:11 -0500
Subject: [PATCH] Began adding editor

---
 src/common.ts   | 30 ++++++++++++++++++++++++++++++
 src/explorer.ts | 15 ++-------------
 src/index.html  |  7 +++++++
 src/index.ts    | 14 +++-----------
 src/shell.ts    |  2 +-
 src/styles.css  | 12 ++++++++++++
 6 files changed, 55 insertions(+), 25 deletions(-)
 create mode 100644 src/common.ts

diff --git a/src/common.ts b/src/common.ts
new file mode 100644
index 0000000..a08e0cd
--- /dev/null
+++ b/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'));
+}
diff --git a/src/explorer.ts b/src/explorer.ts
index 3e1d424..348e63a 100644
--- a/src/explorer.ts
+++ b/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) {
diff --git a/src/index.html b/src/index.html
index f1b1da6..94c7091 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/index.ts b/src/index.ts
index 55e741f..add7eed 100644
--- a/src/index.ts
+++ b/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() ?? '';
diff --git a/src/shell.ts b/src/shell.ts
index ba76e11..5232b79 100644
--- a/src/shell.ts
+++ b/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,
diff --git a/src/styles.css b/src/styles.css
index aafe763..cf19d24 100644
--- a/src/styles.css
+++ b/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;