Clean up app.vue

packages/client/hmi-client/src/App.vue

@@ -1,38 +1,25 @@
 <template>
-	<!-- Sets the Toast notification groups and their respective levels-->
-	<Toast position="top-center" group="error" />
-	<Toast position="top-center" group="warn" />
-	<Toast position="top-center" group="info" />
-	<Toast position="top-center" group="success" />
-	<header>
-		<tera-navbar :active="displayNavBar" />
-	</header>
-	<main>
-		<router-view v-slot="{ Component }">
-			<component class="page" :is="Component" />
-		</router-view>
-		<ConfirmDialog class="w-4" />
-	</main>
-	<footer>
-		<tera-footer />
-	</footer>
+	<Toast position="top-center" />
+	<tera-navbar :active="displayNavBar" />
+	<router-view v-slot="{ Component }">
+		<component class="page" :is="Component" />
+	</router-view>
+	<tera-footer />
 	<tera-common-modal-dialogs />
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue';
-import Toast from 'primevue/toast';
-
-import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
 import { useRoute, useRouter } from 'vue-router';
+import Toast from 'primevue/toast';
 import API from '@/api/api';
 import TeraNavbar from '@/components/navbar/tera-navbar.vue';
 import TeraFooter from '@/components/navbar/tera-footer.vue';
+import TeraCommonModalDialogs from '@/components/widgets/tera-common-modal-dialogs.vue';
 import { useProjects } from '@/composables/project';
+import { useCurrentRoute } from '@/router';
+import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
 import { Project } from '@/types/Types';
-import ConfirmDialog from 'primevue/confirmdialog';
-import TeraCommonModalDialogs from './components/widgets/tera-common-modal-dialogs.vue';
-import { useCurrentRoute } from './router/index';
 
 const toast = useToastService();
 
@@ -59,37 +46,23 @@ onMounted(() => useProjects().getAll());
 // Update the project when the projectId changes
 watch(
 	() => route.params.projectId,
-	(projectId) => {
-		useProjects().get(projectId as Project['id']);
+	(projectId, oldProjectId) => {
+		if (projectId !== oldProjectId) {
+			useProjects().get(projectId as Project['id']);
+		}
 	},
 	{ immediate: true }
 );
 </script>
 
 <style scoped>
-main {
-	grid-area: main;
+.page {
 	display: flex;
-	flex-grow: 1;
+	flex: 1;
+	grid-area: main;
 	isolation: isolate;
-	z-index: 1;
 	overflow: hidden;
 	position: relative;
-}
-
-header {
-	grid-area: header;
-}
-
-footer {
-	grid-area: footer;
-}
-
-.page {
 	z-index: 1;
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	flex-grow: 1;
 }
 </style>

packages/client/hmi-client/src/components/navbar/tera-footer.vue

@@ -1,6 +1,6 @@
 <template>
-	<section>
-		<img src="@assets/svg/uncharted-logo-dark.svg" alt="logo" class="ml-2" />
+	<footer>
+		<img src="@assets/svg/uncharted-logo-dark.svg" alt="logo" />
 		<nav>
 			<a target="_blank" rel="noopener noreferrer" href="https://terarium.canny.io/report-an-issue">
 				Report an issue
@@ -9,27 +9,32 @@
 				Request a feature
 			</a>
 		</nav>
-	</section>
+	</footer>
 </template>
 
 <style scoped>
-section {
+footer {
 	align-items: center;
 	background-color: var(--surface-section);
 	border-top: 1px solid var(--surface-border-light);
 	display: flex;
-	gap: 2rem;
+	gap: var(--gap-8);
+	grid-area: footer;
 	height: 3rem;
 	justify-content: space-between;
 }
 
+img {
+	margin-left: var(--gap-2);
+}
+
 nav {
-	font-size: var(--font-caption);
-	margin: 0 2rem;
-	display: flex;
 	align-items: center;
+	display: flex;
+	font-size: var(--font-caption);
+	gap: var(--gap-8);
 	justify-content: space-around;
-	gap: 2rem;
+	margin: 0 var(--gap-8);
 }
 
 a {
@@ -39,8 +44,4 @@ a {
 p {
 	max-width: 40rem;
 }
-
-article > img {
-	margin: 1rem 0;
-}
 </style>

packages/client/hmi-client/src/components/navbar/tera-navbar.vue

@@ -450,9 +450,10 @@ nav {
 	align-items: center;
 	background-color: var(--surface-section);
 	border-bottom: 1px solid var(--surface-border-light);
-	padding: 0.5rem 1rem;
+	padding: var(--gap-2) var(--gap-4);
 	display: flex;
 	gap: var(--gap-large);
+	grid-area: header;
 
 	a,
 	a:hover {
@@ -461,21 +462,21 @@ nav {
 }
 
 .terarium-logo {
-	margin-top: 5px;
+	margin-top: var(--gap-1-5);
 }
 .layout-project-selection {
 	margin-right: auto;
 }
 
 .avatar {
-	color: var(--text-color-subdued);
 	background-color: var(--primary-color-lighter);
+	color: var(--text-color-subdued);
 	cursor: pointer;
 }
 
 .avatar:hover {
-	color: var(--text-color);
 	background-color: var(--primary-color-light);
+	color: var(--text-color);
 }
 
 /* Split button
@@ -597,12 +598,12 @@ nav {
 }
 .status-chip {
 	background-color: var(--surface-highlight);
+	border-radius: var(--border-radius);
 	padding: var(--gap-small);
-	border-radius: 3rem;
 }
 .field-checkbox {
-	font-size: var(--font-small);
+	font-size: var(--font-body-small);
 	color: var(--text-color-primary);
-	margin-bottom: 0rem;
+	margin-bottom: 0;
 }
 </style>

packages/client/hmi-client/src/services/toast.ts

@@ -33,7 +33,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.warn,
 			summary: summary || ToastSummaries.WARNING,
-			group: ToastSeverity.warn,
 			detail,
 			life
 		});
@@ -43,7 +42,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.error,
 			summary: summary || ToastSummaries.ERROR,
-			group: ToastSeverity.error,
 			detail,
 			life
 		});
@@ -53,7 +51,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.success,
 			summary: summary || ToastSummaries.SUCCESS,
-			group: ToastSeverity.success,
 			detail,
 			life
 		});
@@ -63,7 +60,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.info,
 			summary: summary || ToastSummaries.INFO,
-			group: ToastSeverity.info,
 			detail,
 			life
 		});