Add properties panel entries for artboards (#572)

* Artboards can have properties

* fix crash when renaming artboards

* moved target document to utility types

* moved import and added test for file version information

* fixed missing import

* fix error from merging

* - typed properties message handler data
- removed name from WidgetRow

* clippy warnings

* artboards have seperate properties section

* - color input can be forced to have selection
- crop tool shows on switch
- select tool shows on switch

* variable renamed

* change to use PropType<boolean> instead of PropType<Boolean>

* Add an artboard icon

* Add the "Delete Artboard" hint

* fix unselect glitch

* even better

* Remove the Transform properties group

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

frontend/src/components/widgets/inputs/ColorInput.vue

@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="color-input">
-		<OptionalInput :icon="'CloseX'" :checked="!!value" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
+		<OptionalInput v-if="canSetTransparent" :icon="'CloseX'" :checked="!!value" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
 		<TextInput :value="displayValue" :label="label" :disabled="disabled || !value" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
 		<Separator :type="'Related'" />
 		<LayoutRow class="swatch">
@@ -84,6 +84,7 @@ export default defineComponent({
 	props: {
 		value: { type: String as PropType<string | undefined>, required: true },
 		label: { type: String as PropType<string>, required: false },
+		canSetTransparent: { type: Boolean as PropType<boolean>, required: false, default: true },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	computed: {

frontend/src/dispatcher/js-messages.ts

@@ -417,7 +417,7 @@ export function defaultWidgetLayout(): WidgetLayout {
 
 export type LayoutRow = WidgetRow | WidgetSection;
 
-export type WidgetRow = { name: string; widgets: Widget[] };
+export type WidgetRow = { widgets: Widget[] };
 export function isWidgetRow(layoutRow: WidgetRow | WidgetSection): layoutRow is WidgetRow {
 	return Boolean((layoutRow as WidgetRow).widgets);
 }

frontend/src/utilities/icons.ts

@@ -48,7 +48,7 @@ import File from "@/../assets/16px-solid/file.svg";
 import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
 import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
 import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
-import NewLayer from "@/../assets/16px-solid/new-layer.svg";
+import NodeArtboard from "@/../assets/16px-solid/node-artboard.svg";
 import NodeFolder from "@/../assets/16px-solid/node-folder.svg";
 import NodeImage from "@/../assets/16px-solid/node-image.svg";
 import NodeShape from "@/../assets/16px-solid/node-shape.svg";
@@ -156,12 +156,12 @@ export const ICON_LIST = {
 	FlipHorizontal: { component: FlipHorizontal, size: size16 },
 	FlipVertical: { component: FlipVertical, size: size16 },
 	GraphiteLogo: { component: GraphiteLogo, size: size16 },
-	NewLayer: { component: NewLayer, size: size16 },
-	Paste: { component: Paste, size: size16 },
+	NodeArtboard: { component: NodeArtboard, size: size16 },
 	NodeFolder: { component: NodeFolder, size: size16 },
 	NodeImage: { component: NodeImage, size: size16 },
 	NodeShape: { component: NodeShape, size: size16 },
 	NodeText: { component: NodeText, size: size16 },
+	Paste: { component: Paste, size: size16 },
 	Trash: { component: Trash, size: size16 },
 	ViewModeNormal: { component: ViewModeNormal, size: size16 },
 	ViewModeOutline: { component: ViewModeOutline, size: size16 },