feat: add board (#15)

* wip: Add gridstack board
* wip: Centralize board pages, Add board settings page
* fix: remove cyclic dependency and rename widget-sort to kind
* improve: Add header actions as parallel route
* feat: add item select modal, add category edit modal,
* feat: add edit item modal
* feat: add remove item modal
* wip: add category actions
* feat: add saving of board, wip: add app widget
* Merge branch 'main' into add-board
* chore: update turbo dependencies
* chore: update mantine dependencies
* chore: fix typescript errors, lint and format
* feat: add confirm modal to category removal, move items of removed category to above wrapper
* feat: remove app widget to continue in another branch
* feat: add loading spinner until board is initialized
* fix: issue with cellheight of gridstack items
* feat: add translations for board
* fix: issue with translation for settings page
* chore: address pull request feedback

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-buttons.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 
+import { clientApi } from "@homarr/api/client";
 import {
   showErrorNotification,
   showSuccessNotification,
@@ -9,7 +10,6 @@ import {
 import { useScopedI18n } from "@homarr/translation/client";
 import { ActionIcon, IconTrash } from "@homarr/ui";
 
-import { api } from "~/trpc/react";
 import { revalidatePathAction } from "../../../revalidatePathAction";
 import { modalEvents } from "../../modals";
 
@@ -24,7 +24,7 @@ export const DeleteIntegrationActionButton = ({
 }: DeleteIntegrationActionButtonProps) => {
   const t = useScopedI18n("integration.page.delete");
   const router = useRouter();
-  const { mutateAsync, isPending } = api.integration.delete.useMutation();
+  const { mutateAsync, isPending } = clientApi.integration.delete.useMutation();
 
   return (
     <ActionIcon

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-test-connection.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState } from "react";
 
 import type { RouterInputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
 import {
   showErrorNotification,
   showSuccessNotification,
@@ -18,8 +19,6 @@ import {
   Loader,
 } from "@homarr/ui";
 
-import { api } from "~/trpc/react";
-
 interface UseTestConnectionDirtyProps {
   defaultDirty: boolean;
   initialFormValue: {
@@ -77,7 +76,7 @@ export const TestConnection = ({
 }: TestConnectionProps) => {
   const t = useScopedI18n("integration.testConnection");
   const { mutateAsync, ...mutation } =
-    api.integration.testConnection.useMutation();
+    clientApi.integration.testConnection.useMutation();
 
   return (
     <Group>

apps/nextjs/src/app/[locale]/(main)/integrations/edit/[id]/_integration-edit-form.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
 import { getSecretKinds } from "@homarr/definitions";
 import { useForm, zodResolver } from "@homarr/form";
 import {
@@ -16,7 +17,6 @@ import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { modalEvents } from "~/app/[locale]/modals";
-import { api } from "~/trpc/react";
 import { SecretCard } from "../../_integration-secret-card";
 import { IntegrationSecretInput } from "../../_integration-secret-inputs";
 import {
@@ -55,7 +55,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
     ),
     onValuesChange,
   });
-  const { mutateAsync, isPending } = api.integration.update.useMutation();
+  const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
 
   const secretsMap = new Map(
     integration.secrets.map((secret) => [secret.kind, secret]),

apps/nextjs/src/app/[locale]/(main)/integrations/new/_integration-new-form.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
+import { clientApi } from "@homarr/api/client";
 import type { IntegrationKind } from "@homarr/definitions";
 import { getSecretKinds } from "@homarr/definitions";
 import { useForm, zodResolver } from "@homarr/form";
@@ -15,7 +16,6 @@ import { Button, Fieldset, Group, Stack, TextInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
-import { api } from "~/trpc/react";
 import { IntegrationSecretInput } from "../_integration-secret-inputs";
 import {
   TestConnection,
@@ -53,7 +53,7 @@ export const NewIntegrationForm = ({
     validate: zodResolver(validation.integration.create.omit({ kind: true })),
     onValuesChange,
   });
-  const { mutateAsync, isPending } = api.integration.create.useMutation();
+  const { mutateAsync, isPending } = clientApi.integration.create.useMutation();
 
   const handleSubmit = async (values: FormType) => {
     if (isDirty) return;