Multi-document management (create new document; tab switching) (#210)

* Multi-docs WIP

* Change to number

* Add new document and switch documents

* Remove keybind for previous document. Change keybind for next document.

* Switch documents by clicking tabs

* Remove keybind for previous document. Change keybind for next document.

* multi-docs

* Update package-lock.json

* Hook up File>New to add new document

* Remove console logs and empty lines. Start new documents from 2 instead of 1.

* Fix formatting

client/web/src/components/workspace/Panel.vue

@@ -2,7 +2,7 @@
 	<div class="panel">
 		<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
 			<div class="tab-group">
-				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
+				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel" @click="handleTabClick(tabIndex)">
 					<span>{{ tabLabel }}</span>
 					<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</div>
@@ -144,6 +144,8 @@ import IconButton from "../widgets/buttons/IconButton.vue";
 import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
 import { MenuDirection } from "../widgets/floating-menus/FloatingMenu.vue";
 
+const wasm = import("../../../wasm/pkg");
+
 export default defineComponent({
 	components: {
 		Document,
@@ -153,6 +155,12 @@ export default defineComponent({
 		IconButton,
 		PopoverButton,
 	},
+	methods: {
+		async handleTabClick(tabIndex: number) {
+			const { select_document } = await wasm;
+			select_document(tabIndex);
+		},
+	},
 	props: {
 		tabMinWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },