im so tired rn

client/src/pages/UserForm.vue

@@ -0,0 +1,54 @@
+<!-- pages/views in vue are basically root-level full-page components -->
+
+<script setup lang="ts">
+
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useUsersStore } from "../stores/UsersStore.ts";
+import type { User } from "../models/User.ts";
+
+const store = useUsersStore();
+const route = useRoute();
+const router = useRouter();
+
+const user = ref<User>({
+    name: "",
+    id: 0,
+    email: "",
+});
+
+const id: string | undefined = route.params.id as string | undefined
+
+onMounted(() => {
+    if(id) {
+        const existing = store.users.find(i => i.id == Number(id));
+        if (existing) user.value = { ...existing };
+    }
+});
+
+async function save(): Promise<void> {
+    if(id) {
+        await store.updateUser(Number(id), user.value);
+    } else {
+        await store.addUser(user.value);
+    }
+
+    router.push("/users"); // redirect
+}
+
+</script>
+
+<template>
+
+    <div>
+        <h2>{{ id ? "Edit User" : "Create User" }}</h2> <!-- omg I love ternary operator :D -->
+
+        <form @submit.prevent="save">
+            <input v-model="user.name" placeholder="Name" />
+            
+            <button type="submit">Save</button>
+        </form>
+    </div>
+
+</template>

client/src/pages/UsersList.vue

@@ -0,0 +1,31 @@
+
+<script setup lang="ts">
+
+import { onMounted } from "vue"
+import { useUsersStore } from "../stores/UsersStore.ts"
+
+const store = useUsersStore()
+
+onMounted(() => {
+  store.fetchUsers()
+})
+
+</script>
+
+<template>
+    <div>
+        <h1>Users</h1>
+
+        <router-link to="/users/new">Create User</router-link>
+
+        <table>
+            <tr v-for="user in store.users" :key="user.id">
+                <td>{{ user.name }}</td>
+                <td>
+                    <router-link :to="`/users/${user.id}`">Edit</router-link>
+                    <button @click="store.removeUser(user.id)">Delete</button>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>

client/src/pages/index.vue

@@ -1,2 +1,12 @@
 
-<!-- pages are the base instance for routes. an endpoint serves a page, and the page loads components -->
+<!-- pages are the base instance for routes. an endpoint serves a page, and the page loads components -->
+
+ <script setup lang="ts">
+
+</script>
+
+<template>
+    <h1>straight up gargoyling it !</h1>
+    <h3>yeah im so cool rn</h3>
+    <h1>imagining what I could do with themes :o</h1>
+</template>