fix tests and properly intgrate sqlx

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>