feat: add joyride

apps/nextjs/package.json

@@ -80,6 +80,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-error-boundary": "^6.0.0",
+    "react-joyride": "^2.9.3",
     "react-simple-code-editor": "^0.14.1",
     "sass": "^1.89.1",
     "superjson": "2.2.2",

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

@@ -0,0 +1,38 @@
+import { auth } from "@homarr/auth/next";
+import { getScopedI18n } from "@homarr/translation/server";
+import { createMetaTitle } from "~/metadata";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { Title, SimpleGrid, Card } from "@mantine/core";
+
+export async function generateMetadata() {
+  const session = await auth();
+  if (!session?.user || !session.user.permissions.includes("admin")) {
+    return {};
+  }
+
+  const t = await getScopedI18n("management");
+
+  return {
+    title: createMetaTitle(t("metaTitle")),
+  };
+}
+
+export default async function ToursPage() {
+  const t = await getScopedI18n("tours");
+  return (
+    <ManageContainer>
+      <DynamicBreadcrumb/>
+      <Title>{t("page.title")}</Title>
+
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 5 }}>
+        <Card></Card>
+        <Card></Card>
+        <Card></Card>
+        <Card></Card>
+        <Card></Card>
+        <Card></Card>
+      </SimpleGrid>
+    </ManageContainer>
+  )
+}

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

@@ -23,6 +23,7 @@ import {
   IconUserFilled,
   IconUsers,
   IconUsersGroup,
+  IconMotorbikeFilled
 } from "@tabler/icons-react";
 
 import { auth } from "@homarr/auth/next";
@@ -158,6 +159,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       label: t("items.help.label"),
       icon: IconHelpSquareRoundedFilled,
       items: [
+        {
+          label: t("items.help.items.tours"),
+          icon: IconMotorbikeFilled,
+          href: "/manage/help/tours"
+        },
         {
           label: t("items.help.items.documentation"),
           icon: IconBook2,

packages/translation/src/lang/en.json

@@ -2761,7 +2761,8 @@
             "documentation": "Documentation",
             "submitIssue": "Submit an issue",
             "discord": "Community Discord",
-            "sourceCode": "Source Code"
+            "sourceCode": "Source Code",
+            "tours": "Interactive tours"
           }
         },
         "about": "About"
@@ -3615,6 +3616,12 @@
           "label": "Edit"
         }
       },
+      "help": {
+        "label": "Help",
+        "tours": {
+          "label": "Interactive tours"
+        }
+      },
       "users": {
         "label": "Users",
         "create": {
@@ -4156,5 +4163,10 @@
         }
       }
     }
+  },
+  "tours": {
+    "page": {
+      "title": "Interactive tours"
+    }
   }
 }