add initial test client

client/src/pages/[entity]/[id].vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = $defineProps<{entity: string, id: string}>();
+const { entity, id } = $(props);
+
+const pageTypes: { [key: string]: any } = {
+  "rules": { title: "Rules" },
+  "addresses": { title: "Addresses"},
+};
+</script>
+<template>
+  <div>
+    <PageHeader :title="pageTypes[entity].title"/>
+    {{ entity }} {{ id }}
+  </div>
+</template>

client/src/pages/[entity]/index.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+const props = $defineProps<{entity: string}>();
+const { entity } = $(props);
+
+const pageTypes: { [key: string]: any } = {
+  "rules": { title: "Rules" },
+  "addresses": { title: "Addresses"},
+};
+
+let searchTerm = $ref("");
+</script>
+<template>
+  <div>
+    <PageHeader :title="pageTypes[entity].title">
+      <input class="search-bar" placeholder="Search..." v-model="searchTerm"/>
+      <button>
+        <i-material-symbols-add/>
+      </button>
+    </PageHeader>
+    <NiceTable :columns="{fname: 'First Name', lname: 'Last Name'}" :sort-self="true" :data="[
+      {
+        fname: 'Haynes',
+        lname: 'Chavez'
+      }, {
+        fname: 'Brennan',
+        lname: 'Bradley'
+      }, {
+        fname: 'Blanchard',
+        lname: 'Thornton'
+      }, {
+        fname: 'Benjamin',
+        lname: 'Nash'
+      }, {
+        fname: 'Jan',
+        lname: 'Bradford'
+      }, {
+        fname: 'Zelma',
+        lname: 'Spears'
+      }, {
+        fname: 'Freeman',
+        lname: 'Page'
+      }, {
+        fname: 'Wilson',
+        lname: 'Carlson'
+      }, {
+        fname: 'Lewis',
+        lname: 'Fuentes'
+      }, {
+        fname: 'Vega',
+        lname: 'Villarreal'
+      }, {
+        fname: 'Carolyn',
+        lname: 'Cardenas'
+      }, {
+        fname: 'Angie',
+        lname: 'Adams'
+      }, {
+        fname: 'Richards',
+        lname: 'Leon'
+      }, {
+        fname: 'Velma',
+        lname: 'Fields'
+      }, {
+        fname: 'Witt',
+        lname: 'Lowe'
+      }, {
+        fname: 'Waters',
+        lname: 'Leblanc'
+      }, {
+        fname: 'Henry',
+        lname: 'Lloyd'
+      }, {
+        fname: 'Boone',
+        lname: 'Greer'
+      }, {
+        fname: 'Willis',
+        lname: 'Stark'
+      }, {
+        fname: 'Dickson',
+        lname: 'Spencer'
+      }
+    ].filter(x => (`${x.fname} ${x.lname}`).toLowerCase().includes(searchTerm.toLowerCase()))"/>
+  </div>
+</template>
+
+<style scoped>
+.page-content {
+  overflow-y: auto;
+}
+</style>

client/src/pages/help/index.md

@@ -0,0 +1,4 @@
+<PageHeader title="Help"/>
+
+## About
+nfSense is a web-based configuration tool for nfTables. It works by storing its configuration in a .json file, and applies it by transforming it into a proper nfTables config.

client/src/pages/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { apiCall } from "../api";
+
+async function doShit(){
+  apiCall("Firewall.GetForwardRules", {});
+}
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="Dashboard">
+      <button @click="doShit">Example Buttons</button>
+    </PageHeader>
+
+    This is the main page, currently written in markdown because that's *pog*.
+  </div>
+</template>