Welcome screen, refactor to allow zero documents, and add TS typing to widgets (#702)

* unfinished implementation

* Add frontend for the empty panel screen

* Add an icon for Folder based on NodeFolder

* fixed messages causing peicees of ui not to render on new document

* Standardize nextTick syntax

* WIP generisization of component subscriptions (not compiling yet)

* Fix crash when loading font and there is no active document

* Only advertise tool actions with a document

* Fix failure to create new document

* Initalise the properties panel

* Fix highlight tab, canvas jump, warns and layer tree

* Fix tests

* Possibly fix some things?

* Move WorkingColors layout definition to backend

* Standardize action macro formatting

* Provide typing for widgets in TS/Vue and associated cleanup

* Fix viewport positioning initialization

* Fix menu bar init at startup not document creation

* Fix no viewport bounds bug

* Change !=0 to >0

* Simplify the init system

Closes #656

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/src/components/widgets/buttons/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)">
+	<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)" :title="tooltip">
 		<IconLabel :icon="icon" />
 	</button>
 </template>
@@ -69,11 +69,13 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
 		icon: { type: String as PropType<IconName>, required: true },
 		size: { type: Number as PropType<IconSize>, required: true },
 		active: { type: Boolean as PropType<boolean>, default: false },
-		gapAfter: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
 	},
 	components: { IconLabel },
 });

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -62,8 +62,10 @@ export default defineComponent({
 		LayoutRow,
 	},
 	props: {
-		action: { type: Function as PropType<() => void>, required: false },
 		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
+
+		// Callbacks
+		action: { type: Function as PropType<() => void>, required: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/buttons/TextButton.ts

@@ -1,16 +1,17 @@
 // TODO: Try and get rid of the need for this file
 
 export interface TextButtonWidget {
-	kind: "TextButton";
 	tooltip?: string;
 	message?: string | object;
 	callback?: () => void;
 	props: {
-		// `action` is used via `IconButtonWidget.callback`
+		kind: "TextButton";
 		label: string;
 		emphasized?: boolean;
-		disabled?: boolean;
 		minWidth?: number;
-		gapAfter?: boolean;
+		disabled?: boolean;
+
+		// Callbacks
+		// `action` is used via `IconButtonWidget.callback`
 	};
 }

frontend/src/components/widgets/buttons/TextButton.vue

@@ -62,12 +62,13 @@ import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 		label: { type: String as PropType<string>, required: true },
 		emphasized: { type: Boolean as PropType<boolean>, default: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
-		gapAfter: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 	},
 	components: { TextLabel },
 });