feat: add trpc websocket (#205)

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -1,6 +1,8 @@
 import { getScopedI18n } from "@homarr/translation/server";
 import { Title } from "@homarr/ui";
 
+import { Test } from "./test";
+
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
   const metaTitle = `${t("metaTitle")} • Homarr`;
@@ -24,6 +26,7 @@ export default async function ManagementPage() {
   return (
     <>
       <Title>{t(timeOfDay, { username: "admin" })}</Title>
+      <Test />
     </>
   );
 }

apps/nextjs/src/app/[locale]/manage/test.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { Stack, Text } from "@homarr/ui";
+
+export const Test = () => {
+  const [value, setValue] = useState<number>(0);
+  clientApi.user.test.useSubscription(undefined, {
+    onData(data) {
+      setValue(data);
+    },
+    onError(err) {
+      alert(err);
+    },
+  });
+  return (
+    <Stack>
+      <Text>This will change after one second: {value}</Text>
+    </Stack>
+  );
+};