add initial test client

client/src/components/meta/PageHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { title, noSpacer } = $(withDefaults(defineProps<{
+  title?: string,
+  noSpacer?: boolean,
+}>(), {
+  title: "",
+  noSpacer: false,
+}));
+watchEffect(() => useTitle(`${title} - nfSense`));
+</script>
+<template>
+  <Portal to="page-header">
+    <h1 v-if="title !== ''" v-text="title" :class="{'flex-grow': !noSpacer}"/>
+    <slot/>
+  </Portal>
+</template>

client/src/components/meta/Portal.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+let activeTargets = $ref<string[]>([]);
+</script>
+
+<script setup lang="ts">
+const props = $defineProps<{
+  from?: string,
+  to?: string,
+}>();
+const { from, to } = $(props);
+
+if (from) {
+  onMounted(() => activeTargets.push(from));
+  onBeforeUnmount(() => activeTargets.splice(activeTargets.indexOf(from), 1));
+}
+</script>
+
+<template>
+  <div v-if="from" :id="'portal-' + from">
+    <slot/>
+  </div>
+  <Teleport v-else-if="to && activeTargets.includes(to)" :to="'#portal-' + to">
+    <slot/>
+  </Teleport>
+</template>