Restructure project directories (#333)

`/client/web` -> `/frontend`
`/client/cli` -> *delete for now*
`/client/native` -> *delete for now*
`/core/editor` -> `/editor`
`/core/document` -> `/graphene`
`/core/renderer` -> `/charcoal`
`/core/proc-macro` -> `/proc-macros` *(now plural)*

frontend/src/components/widgets/separators/Separator.vue

@@ -0,0 +1,88 @@
+<template>
+	<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
+		<div v-if="[SeparatorType.Section, SeparatorType.List].includes(type)"></div>
+	</div>
+</template>
+
+<style lang="scss">
+.separator {
+	&.vertical {
+		&.related {
+			margin-top: 4px;
+		}
+
+		&.unrelated {
+			margin-top: 8px;
+		}
+
+		&.section,
+		&.list {
+			width: 100%;
+
+			div {
+				height: 1px;
+				width: calc(100% - 8px);
+				margin: 0 4px;
+				background: var(--color-7-middlegray);
+			}
+		}
+
+		&.section {
+			margin: 8px 0;
+		}
+
+		&.list {
+			margin: 4px 0;
+		}
+	}
+
+	&.horizontal {
+		&.related {
+			margin-left: 4px;
+		}
+
+		&.unrelated {
+			margin-left: 8px;
+		}
+
+		&.section,
+		&.list {
+			height: 100%;
+
+			div {
+				height: calc(100% - 8px);
+				width: 1px;
+				margin: 4px 0;
+				background: var(--color-7-middlegray);
+			}
+		}
+
+		&.section {
+			margin: 0 8px;
+		}
+
+		&.list {
+			margin: 0 4px;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
+
+export default defineComponent({
+	components: {},
+	props: {
+		direction: { type: String, default: SeparatorDirection.Horizontal },
+		type: { type: String, default: SeparatorType.Unrelated },
+	},
+	data() {
+		return {
+			SeparatorDirection,
+			SeparatorType,
+		};
+	},
+});
+</script>