refactor: move integration pages to management pages (#419)

apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx

@@ -37,7 +37,7 @@ export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
                 title: t("notification.success.title"),
                 message: t("notification.success.message"),
               });
-              void revalidatePathAction("/apps");
+              void revalidatePathAction("/manage/apps");
             },
             onError: () => {
               showErrorNotification({

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

@@ -47,7 +47,7 @@ export const AppForm = (props: AppFormProps) => {
         <TextInput {...form.getInputProps("href")} label="URL" />
 
         <Group justify="end">
-          <Button variant="default" component={Link} href="/apps">
+          <Button variant="default" component={Link} href="/manage/apps">
             {t("common.action.backToOverview")}
           </Button>
           <Button type="submit" loading={isPending}>

apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx

@@ -30,8 +30,8 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
         title: t("success.title"),
         message: t("success.message"),
       });
-      void revalidatePathAction("/apps").then(() => {
+      void revalidatePathAction("/manage/apps").then(() => {
-        router.push("/apps");
+        router.push("/manage/apps");
       });
     },
     onError: () => {

apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx

@@ -25,8 +25,8 @@ export const AppNewForm = () => {
         title: t("success.title"),
         message: t("success.message"),
       });
-      void revalidatePathAction("/apps").then(() => {
+      void revalidatePathAction("/manage/apps").then(() => {
-        router.push("/apps");
+        router.push("/manage/apps");
       });
     },
     onError: () => {

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

@@ -28,7 +28,7 @@ export default async function AppsPage() {
       <Stack>
         <Group justify="space-between" align="center">
           <Title>Apps</Title>
-          <Button component={Link} href="/apps/new">
+          <Button component={Link} href="/manage/apps/new">
             New app
           </Button>
         </Group>
@@ -82,7 +82,7 @@ const AppCard = ({ app }: AppCardProps) => {
           <ActionIconGroup>
             <ActionIcon
               component={Link}
-              href={`/apps/edit/${app.id}`}
+              href={`/manage/apps/edit/${app.id}`}
               variant="subtle"
               color="gray"
               aria-label="Edit app"
@@ -107,7 +107,7 @@ const AppNoResults = async () => {
         <Text fw={500} size="lg">
           {t("app.page.list.noResults.title")}
         </Text>
-        <Anchor href="/apps/new">
+        <Anchor href="/manage/apps/new">
           {t("app.page.list.noResults.description")}
         </Anchor>
       </Stack>

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

@@ -20,6 +20,7 @@ import { useI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
+import { revalidatePathAction } from "~/app/revalidatePathAction";
 import { SecretCard } from "../../_integration-secret-card";
 import { IntegrationSecretInput } from "../../_integration-secret-inputs";
 import {
@@ -27,7 +28,6 @@ import {
   TestConnectionNoticeAlert,
   useTestConnectionDirty,
 } from "../../_integration-test-connection";
-import { revalidatePathAction } from "../../../../../revalidatePathAction";
 
 interface EditIntegrationForm {
   integration: RouterOutputs["integration"]["byId"];

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import React, { ChangeEvent, useMemo, useState } from "react";
 import Link from "next/link";
 import { Group, Menu, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
@@ -20,13 +20,18 @@ export const IntegrationCreateDropdownContent = () => {
     );
   }, [search]);
 
+  const handleSearch = React.useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => setSearch(event.target.value),
+    [setSearch],
+  );
+
   return (
     <Stack>
       <TextInput
         leftSection={<IconSearch stroke={1.5} size={20} />}
         placeholder={t("integration.page.list.search")}
         value={search}
-        onChange={(event) => setSearch(event.target.value)}
+        onChange={handleSearch}
       />
 
       {filteredKinds.length > 0 ? (

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

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
 import { AppShellMain } from "@mantine/core";
 import {
   IconBook2,
+  IconBox,
   IconBrandDiscord,
   IconBrandDocker,
   IconBrandGithub,
@@ -11,6 +12,7 @@ import {
   IconLayoutDashboard,
   IconLogs,
   IconMailForward,
+  IconPlug,
   IconQuestionMark,
   IconTool,
   IconUser,
@@ -38,6 +40,16 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       href: "/manage/boards",
       label: t("items.boards"),
     },
+    {
+      icon: IconBox,
+      href: "/manage/apps",
+      label: t("items.apps"),
+    },
+    {
+      icon: IconPlug,
+      href: "/manage/integrations",
+      label: t("items.integrations"),
+    },
     {
       icon: IconUser,
       label: t("items.users.label"),

packages/translation/src/lang/en.ts

@@ -961,6 +961,8 @@ export default {
       items: {
         home: "Home",
         boards: "Boards",
+        apps: "Apps",
+        integrations: "Integrations",
         users: {
           label: "Users",
           items: {