Store state in database; Handle tabs

xcmd-io · Dec 16, 2023 · 6f3c797 · 6f3c797
1 parent 4fdad97
commit 6f3c797
Show file tree

Hide file tree

Showing 7 changed files with 478 additions and 28 deletions.
diff --git a/xcmd-tauri/dist/index.html b/xcmd-tauri/dist/index.html
@@ -12,7 +12,7 @@
 		<div id="vsplit" class="vsplit">
 			<div class="vsplit-pane">
 				<ul class="tabs">
-					<li tabindex="0"><img class="icon" src="folder.svg"/> <span data-text="name">name</span></li>
+					<li tabindex="0"><img class="icon" src="folder.svg"/> <span data-text="name">name</span> <span class="close">⨯</span></li>
 				</ul>
 				<input class="address" value="" autocomplete="off" spellcheck="false" aria-autocomplete="list"/>
 				<table class="vtable">

diff --git a/xcmd-tauri/dist/index.mjs b/xcmd-tauri/dist/index.mjs
@@ -1,6 +1,4 @@
 import { Store } from './modules/tauri-plugin-store-api.mjs';
-import Database from './modules/tauri-plugin-store-sql.mjs';
-
 import stylesheet from './index.css' assert { type: 'css' };
 import defaultThemeStylesheet from './themes/light.css' assert { type: 'css' };
 import { Code, Mod, getKey } from './keyboard.mjs';
@@ -24,8 +22,7 @@ if (theme) {
 }
 
 document.adoptedStyleSheets.push(stylesheet);
-
-document.body.className = '';
+document.body.classList.remove('loading');
 
 const vsplit = /** @type {HTMLElement} */ (document.getElementById('vsplit'));
 const leftPaneElement = /** @type {HTMLElement} */ (vsplit.firstElementChild);
@@ -84,7 +81,7 @@ document.body.addEventListener('keydown', async e => {
 			}
 			return false;
 		}
-		case Mod.Shift | Code.F4: {
+		case Mod.Shift | Code.F3: {
 			e.preventDefault();
 			const [leftPane, rightPane] = [Pane.leftPane, Pane.rightPane];
 			const [leftTable, rightTable] = [leftPane.table, rightPane.table];

diff --git a/xcmd-tauri/dist/pane.mjs b/xcmd-tauri/dist/pane.mjs
@@ -1,6 +1,9 @@
 import { Code, Mod, getKey } from './keyboard.mjs';
 import { Tabs } from './tabs/tabs.mjs';
 import { RemoteDataSource, VTable } from './vtable/vtable.mjs';
+import { Tab, deleteTab, getSession, insertTab, updateTab } from './session.mjs';
+
+const session = await getSession();
 
 export class Pane {
 	/** @type {Pane} */
@@ -15,7 +18,10 @@ export class Pane {
 	/** @type {Pane} */
 	static rightPane;
 
-	/** @type {Tabs} */
+	/** @type {number} */
+	id;
+
+	/** @type {Tabs<Tab>} */
 	tabs;
 
 	/** @type {HTMLInputElement | undefined} */
@@ -34,17 +40,20 @@ export class Pane {
 	 * @param {boolean} primary Indicates whether the pane is a primary (left) pane.
 	 */
 	constructor(element, primary) {
-		this.tabs = new Tabs(element.querySelector('.tabs'));
-		this.table = new VTable(element.querySelector('.vtable'));
-
 		if (primary) {
+			this.id = 1;
 			Pane.leftPane = this;
 			Pane.activePane = this;
 		} else {
+			this.id = 2;
 			Pane.rightPane = this;
 			Pane.otherPane = this;
 		}
 
+		const tabs = session.tabs.filter(x => x.paneId === this.id);
+		this.tabs = new Tabs(element.querySelector('.tabs'), tabs);
+		this.table = new VTable(element.querySelector('.vtable'));
+
 		element.addEventListener('focusin', (evt) => {
 			if (Pane.activePane !== this) {
 				const activePane = Pane.activePane;
@@ -53,14 +62,23 @@ export class Pane {
 			}
 		});
 
+		this.tabs.onClose = tab => deleteTab(tab.id);
+
+		this.tabs.onSelect = async tab => {
+			const newDataSource = new RemoteDataSource(this.config, {
+				path: tab.address,
+			});
+			await this.setDataSource(newDataSource);
+		};
+
 		const address = element.querySelector('.address');
 		if (address instanceof HTMLInputElement) {
 			this.address = address;
-			address.onblur = () => {
+			address.onblur = async () => {
 				const newDataSource = new RemoteDataSource(this.config, {
 					path: address.value,
 				});
-				this.setDataSource(newDataSource);
+				await this.setDataSource(newDataSource);
 			};
 		}
 
@@ -72,7 +90,10 @@ export class Pane {
 					return;
 				case Mod.Ctrl | Code.KeyT:
 					evt.preventDefault();
-					this.tabs.addTab({name: 'xcmd'});
+					const activeTab = this.tabs.getActiveTabItem();
+					const tab = await insertTab(session.sessionId, Pane.activePane.id,
+						activeTab?.name, activeTab?.address, activeTab?.system);
+					this.tabs.addTab(tab);
 					return;
 				case Mod.Ctrl | Code.PageUp:
 					evt.preventDefault();
@@ -102,15 +123,24 @@ export class Pane {
 	 */
 	async setConfig(config) {
 		this.config = config;
-		this.setDataSource(new RemoteDataSource(this.config, {}));
+		const tab = this.tabs.getActiveTabItem();
+		await this.setDataSource(new RemoteDataSource(this.config, {
+			path: tab?.address,
+		}));
 	}
 
 	/**
 	 * @param {RemoteDataSource} dataSource
 	 */
 	async setDataSource(dataSource) {
 		await this.table.setDataSource(dataSource);
-		this.tabs.updateActiveTab({ name: await dataSource.getName() });
+		const tab = this.tabs.getActiveTabItem();
+		if (tab !== undefined) {
+			tab.name = await dataSource.getName();
+			tab.address = await dataSource.getPath();
+			await updateTab(tab.id, tab.name, tab.address, tab.system);
+			this.tabs.updateActiveTab(tab);
+		}
 		if (this.address !== undefined) {
 			this.address.value = await dataSource.getPath();
 		}