Clean up component files by removing 'name' property

.vscode/settings.json

@@ -22,13 +22,13 @@
 		"editor.formatOnSave": true,
 	},
 	"rust-analyzer.rustfmt.extraArgs": [
-		"--config", //                           Remove when rustfmt
+		"--config",
-		"match_block_trailing_comma=true", //        2.0 is released
+		"match_block_trailing_comma=true", // Remove when rustfmt2.0 is released https://github.com/rust-lang/rustfmt/issues/3380
-		"--config", //                           Remove when `control_brace_style` becomes stable
+		"--config",
-		"control_brace_style=ClosingNextLine" //     https://github.com/rust-lang/rustfmt/issues/3377
+		"control_brace_style=ClosingNextLine" // Remove when `control_brace_style` becomes stable https://github.com/rust-lang/rustfmt/issues/3377
 	],
 	"rust-analyzer.diagnostics.disabled": [
-		"missing-unsafe" //                      Remove when rust-analyzer bug fixes unsafe code on WASM JavaScript https://github.com/rust-analyzer/rust-analyzer/issues/5412
+		"missing-unsafe" // Remove when rust-analyzer bug fixes unsafe code on WASM JavaScript https://github.com/rust-analyzer/rust-analyzer/issues/5412
 	],
 	"vetur.format.options.useTabs": true,
 	"eslint.format.enable": true,

.vscode/vuecomp.code-snippets

@@ -0,0 +1,35 @@
+{
+	// Place your Graphite workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	"Vue Component Template": {
+		"prefix": "vuecomp",
+		"body": [
+			"<template>",
+			"\t<${1:div}>",
+			"\t\t$0",
+			"\t</${1:div}>",
+			"</template>",
+			"",
+			"<style lang=\"scss\">",
+			"",
+			"</style>",
+			"",
+			"<script lang=\"ts\">",
+			"import { defineComponent } from \"vue\";",
+			"",
+			"export default defineComponent({",
+			"\tcomponents: {",
+			"\t},",
+			"\tprops: {",
+			"\t},",
+			"});",
+			"</script>",
+			"",
+		],
+		"description": "Template for a new Vue component file"
+	}
+}

web-frontend/src/App.vue

@@ -2,18 +2,6 @@
 	<MainWindow />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import MainWindow from "./components/window/MainWindow.vue";
-
-export default defineComponent({
-	name: "App",
-	components: {
-		MainWindow,
-	},
-});
-</script>
-
 <style lang="scss">
 html, body, #app {
 	margin: 0;
@@ -26,3 +14,12 @@ html, body, #app {
 	user-select: none;
 }
 </style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import MainWindow from "./components/window/MainWindow.vue";
+
+export default defineComponent({
+	components: { MainWindow },
+});
+</script>

web-frontend/src/components/footer/FooterBar.vue

@@ -48,7 +48,6 @@ import { defineComponent } from "vue";
 import InputHint from "./InputHint.vue";
 
 export default defineComponent({
-	name: "FooterBar",
 	components: {
 		InputHint,
 	},

web-frontend/src/components/footer/InputHint.vue

@@ -70,7 +70,6 @@ export enum MouseInputInteraction {
 }
 
 export default defineComponent({
-	name: "InputHint",
 	props: {
 		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },

web-frontend/src/components/header/FileMenu.vue

@@ -50,7 +50,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
+export default defineComponent({});
-	name: "FileMenu",
-});
 </script>

web-frontend/src/components/header/HeaderBar.vue

@@ -36,7 +36,6 @@ import WindowTitle from "./WindowTitle.vue";
 import WindowButtons from "./WindowButtons.vue";
 
 export default defineComponent({
-	name: "HeaderBar",
 	components: {
 		FileMenu,
 		WindowTitle,

web-frontend/src/components/header/WindowButtons.vue

@@ -49,7 +49,6 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	name: "WindowButtons",
 	props: {
 		maximized: { type: Boolean, default: false },
 	},

web-frontend/src/components/header/WindowTitle.vue

@@ -16,7 +16,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
+export default defineComponent({});
-	name: "WindowTitle",
-});
 </script>

web-frontend/src/components/layout/LayoutCol.vue

@@ -15,7 +15,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
+export default defineComponent({});
-	name: "LayoutCol",
-});
 </script>

web-frontend/src/components/layout/LayoutRow.vue

@@ -15,7 +15,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
+export default defineComponent({});
-	name: "LayoutRow",
-});
 </script>

web-frontend/src/components/panel-system/DockablePanel.vue

@@ -134,7 +134,6 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	name: "DockablePanel",
 	props: {
 		tabConstantWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },

web-frontend/src/components/panel-system/PanelArea.vue

@@ -45,7 +45,6 @@ import LayoutCol from "../layout/LayoutCol.vue";
 import DockablePanel from "./DockablePanel.vue";
 
 export default defineComponent({
-	name: "PanelArea",
 	components: {
 		LayoutRow,
 		LayoutCol,

web-frontend/src/components/window/MainWindow.vue

@@ -42,7 +42,6 @@ import PanelArea from "../panel-system/PanelArea.vue";
 import FooterBar from "../footer/FooterBar.vue";
 
 export default defineComponent({
-	name: "MainWindow",
 	components: {
 		LayoutRow,
 		LayoutCol,