fix tests and properly intgrate sqlx

ui/app/components/AppFooter.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-sky-900 text-white p-4 mt-auto">
+    <div class="text-center text-sm opacity-75">
+      © 2025 NuChat. All rights reserved.
+    </div>
+  </div>
+</template>

ui/app/components/AppHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-2xl bold bg-sky-900 text-white p-2">
+    <NuxtLink to="/">NuChat</NuxtLink>
+  </div>
+</template>

ui/app/components/ServerLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <RouterLink 
+    :to="`/servers/${id}`"
+    class="block p-3 hover:bg-sky-100 rounded-lg transition-colors duration-200 border border-transparent hover:border-sky-300"
+  >
+    <slot />
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  id: string | number
+}>()
+</script>

ui/app/components/ServerSidebar.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="h-full border-2 border-sky-300 flex flex-col p-4 bg-gray-50">
+    <h2 class="text-lg font-semibold text-gray-800 mb-4">Servers</h2>
+    <div class="space-y-2">
+      <ServerLink
+        v-for="server in serversWithFallback"
+        :id="server.id"
+        :key="server.id"
+        class="text-gray-700 hover:text-sky-800"
+      >
+        {{ server.name }}
+      </ServerLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Server {
+  id: string;
+  name: string;
+}
+
+const { data: servers, error } = await useFetch<Server[]>("/api/servers");
+
+if (error.value) {
+  console.error("Failed to fetch servers:", error.value);
+}
+
+const serversWithFallback = computed(() => {
+  return servers.value || [
+    { id: "1", name: "General" },
+    { id: "2", name: "Gaming" },
+    { id: "3", name: "Tech Talk" },
+  ];
+});
+</script>