Added Structural Documentation

- Also renamed some directories for consistency
- Moved all components into corresponding subdirectories
- Minor Text Changes

client/src/components/display/README.md

@@ -0,0 +1,2 @@
+# Display Components
+This folder contains components whose primary purpose it is to visually represent data that's passed in.

client/src/components/input/README.md

@@ -0,0 +1,3 @@
+# Input Components
+This folder contains components whose primary purpose it is to accept user input, and usually provide the selection to their parent as data through their v-model.
+Convention has it that any component that can be described as an input for a specific data type should be named via the format "TypeInput", where "Type" is replaced with the types name.

client/src/components/layout/README.md

@@ -0,0 +1,3 @@
+# Layout Components
+This folder contains components whose primary purpose it is to aid in laying out the GUI. The content presented by these components is generally speaking rather static.
+Unlike most other components in this project, layout components may render fragments instead of root nodes. When they do their name should be pluralized.

client/src/components/meta/README.md

@@ -0,0 +1,11 @@
+# Metacomponents
+This folder contains components which don't represent specific visual elements, but rather annotate other components to add specific functionality.
+Due to their more confusing nature, their function and implementation is described here.
+
+## Portal
+This component wraps Vues standard `Teleport` component, providing semantic meaning to a `Teleport` target and not just the source.
+
+It also fixes an issue where one could not update the `Teleport` source by tracking tracking active targets and not rendering the source when there is no active target for that key.
+
+## PageHeader
+This component uses the above `Portal` imlpementation to allow updating the Page Header elsewhere in the layout, whilst also setting the title and providing a basic consistent layout.

client/src/definitions.ts

@@ -1,6 +1,6 @@
 import { toFormValidator } from '@vee-validate/zod';
 import * as zod from 'zod';
-import { SearchProvider, Options } from '~/components/inputs/DropdownInput.vue';
+import { SearchProvider, Options } from '~/components/input/DropdownInput.vue';
 import { apiCall } from './api';
 
 const GetHardwareInterfaces: SearchProvider = async (o) => {

client/src/global-styles/README.md

@@ -0,0 +1,17 @@
+# Global Styles
+This folder contains stylesheets which contain rules that apply to everything in the project.
+
+## atomic.css: Atomic Styles
+Utility classes which set only one or a few generic attributes.
+
+## colors.css: Color System
+Contains the definition of Base Colors, Color Palettes and Color Contexts.
+
+## components.css: Pure Style Components
+These components are meant to style DOM elements regardless of which Vue component renders them, promoting reuse.
+
+## mlfe.css: CSS Reset
+MLFE is a minimal but aggressive CSS reset that helps us with designing predictable layout.
+
+## transitions.css: Generi Transitions
+Contains transition classes for use with Vues `Transition` components.

client/src/global-styles/mlfe.css

@@ -1,4 +1,4 @@
-/* MLFE: Marginless FlexEverything (A CSS Reset for creating Layouts) */
+/* MLFE: Marginless FlexEverything (A CSS Reset for Layout) */
 :root {
   font-family: sans-serif;
   line-height: 1;

client/src/global-styles/transitions.css

@@ -1,3 +1,4 @@
+/* Classes for Vue Transitions */
 .fade-enter-active, .fade-leave-active { 
   transition: all 0.2s ease-out !important;
 }

client/src/main.ts

@@ -5,15 +5,15 @@ import './global-styles/mlfe.css';
 import './global-styles/transitions.css';
 import 'vue-toast-notification/dist/theme-default.css';
 
-import NicerForm from './components/inputs/NicerForm.vue';
-import PillBar from './components/inputs/PillBar.vue';
-import TextBox from './components/inputs/TextBox.vue';
-import EnumInput from './components/inputs/EnumInput.vue';
-import NumberBox from './components/inputs/NumberBox.vue';
-import MultilineTextBox from './components/inputs/MultilineTextBox.vue';
-import CheckBox from './components/inputs/CheckBox.vue';
-import SingleSelect from './components/inputs/SingleSelect.vue';
-import MultiSelect from './components/inputs/MultiSelect.vue';
+import NicerForm from './components/input/NicerForm.vue';
+import PillBar from './components/input/PillBar.vue';
+import TextBox from './components/input/TextBox.vue';
+import EnumInput from './components/input/EnumInput.vue';
+import NumberBox from './components/input/NumberBox.vue';
+import MultilineTextBox from './components/input/MultilineTextBox.vue';
+import CheckBox from './components/input/CheckBox.vue';
+import SingleSelect from './components/input/SingleSelect.vue';
+import MultiSelect from './components/input/MultiSelect.vue';
 import Heading from './components/display/Heading.vue';
 
 import { Form, Field, ErrorMessage  } from 'vee-validate';

client/src/pages/test.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SearchProvider, Options } from '../components/inputs/DropdownInput.vue';
+import { SearchProvider, Options } from '../components/input/DropdownInput.vue';
 
 const testValues: Options = {
   1: { display: 'Option 1' },