From 79054a0fd4b6f9d41fef7a4138541b63113e3f8c Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Mon, 7 Apr 2025 10:37:01 +1000
Subject: [PATCH] fix: devices page (reactivity and relative timestamps)

---
 server/pages/account/devices.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/server/pages/account/devices.vue b/server/pages/account/devices.vue
index 5c80a62f..ec0ee3ed 100644
--- a/server/pages/account/devices.vue
+++ b/server/pages/account/devices.vue
@@ -68,9 +68,7 @@
                   </ul>
                 </td>
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{
-                    DateTime.fromISO(client.lastConnected).diffNow().toHuman()
-                  }}
+                  {{ DateTime.fromISO(client.lastConnected).toRelative() }}
                 </td>
                 <td
                   class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3"
@@ -95,7 +93,7 @@
 import { CheckIcon } from "@heroicons/vue/24/outline";
 import { DateTime } from "luxon";
 
-const clients = await $dropFetch("/api/v1/user/client");
+const clients = ref(await $dropFetch("/api/v1/user/client"));
 
 async function revokeClient(id: string) {
   await $dropFetch(`/api/v1/user/client/${id}`, { method: "DELETE" });
@@ -104,8 +102,8 @@ async function revokeClient(id: string) {
 function revokeClientWrapper(id: string) {
   revokeClient(id)
     .then(() => {
-      const index = clients.findIndex((e) => e.id == id);
-      clients.splice(index, 1);
+      const index = clients.value.findIndex((e) => e.id == id);
+      clients.value.splice(index, 1);
     })
     .catch((e) => {
       createModal(