chore(release): automatic release v0.1.0

.github/renovate.json5

@@ -1,31 +1,19 @@
 {
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ],
-  "packageRules": [
+  $schema: "https://docs.renovatebot.com/renovate-schema.json",
+  extends: ["config:recommended"],
+  packageRules: [
     {
-      "matchPackagePatterns": [
-        "^@homarr/",
-        "tsx" // Disabled for now as version 0.14.4 did not work with the current version of homarr. It resulted in a ERR_MODULE_NOT_FOUND error
-      ],
-      "enabled": false
+      matchPackagePatterns: ["^@homarr/"],
+      enabled: false,
     },
     {
-      "matchUpdateTypes": [
-        "minor",
-        "patch",
-        "pin",
-        "digest"
-      ],
-      "automerge": true
-    }
-  ],
-  "updateInternalDeps": true,
-  "rangeStrategy": "bump",
-  "automerge": false,
-  "baseBranches": [
-    "dev"
+      matchUpdateTypes: ["minor", "patch", "pin", "digest"],
+      automerge: true,
+    },
   ],
-  "dependencyDashboard": false
-}
+  updateInternalDeps: true,
+  rangeStrategy: "bump",
+  automerge: false,
+  baseBranches: ["dev"],
+  dependencyDashboard: false,
+}

Dockerfile

@@ -30,6 +30,9 @@ COPY --from=builder /app/cli-out/json/ .
 COPY --from=builder /app/next-out/json/ .
 COPY --from=builder /app/pnpm-lock.yaml ./pnpm-lock.yaml
 
+# Is used for postinstall of docs definitions
+COPY --from=builder /app/packages/definitions/src/docs ./packages/definitions/src/docs
+
 # Uses the lockfile to install the dependencies
 RUN corepack enable pnpm && pnpm install --recursive --frozen-lockfile
 

apps/nextjs/package.json

@@ -37,17 +37,17 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.13.3",
-    "@mantine/core": "^7.13.3",
-    "@mantine/hooks": "^7.13.3",
-    "@mantine/modals": "^7.13.3",
-    "@mantine/tiptap": "^7.13.3",
+    "@mantine/colors-generator": "^7.13.4",
+    "@mantine/core": "^7.13.4",
+    "@mantine/hooks": "^7.13.4",
+    "@mantine/modals": "^7.13.4",
+    "@mantine/tiptap": "^7.13.4",
     "@million/lint": "1.0.11",
     "@t3-oss/env-nextjs": "^0.11.1",
-    "@tabler/icons-react": "^3.19.0",
-    "@tanstack/react-query": "^5.59.15",
-    "@tanstack/react-query-devtools": "^5.59.15",
-    "@tanstack/react-query-next-experimental": "5.59.15",
+    "@tabler/icons-react": "^3.20.0",
+    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query-devtools": "^5.59.16",
+    "@tanstack/react-query-next-experimental": "5.59.16",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
@@ -63,14 +63,14 @@
     "glob": "^11.0.0",
     "jotai": "^2.10.1",
     "mantine-react-table": "2.0.0-beta.7",
-    "next": "^14.2.15",
+    "next": "^14.2.16",
     "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.1.1",
+    "react-error-boundary": "^4.1.2",
     "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.80.2",
+    "sass": "^1.80.4",
     "superjson": "2.2.1",
     "swagger-ui-react": "^5.17.14",
     "use-deep-compare-effect": "^1.8.1"
@@ -80,13 +80,13 @@
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/chroma-js": "2.4.4",
-    "@types/node": "^20.16.12",
-    "@types/prismjs": "^1.26.4",
-    "@types/react": "^18.3.11",
+    "@types/node": "^20.17.1",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/swagger-ui-react": "^4.18.3",
     "concurrently": "^9.0.1",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "node-loader": "^2.0.0",
     "prettier": "^3.3.3",
     "typescript": "^5.6.3"

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useState } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { createTheme, DirectionProvider, isMantineColorScheme, MantineProvider } from "@mantine/core";
+import { createTheme, DirectionProvider, MantineProvider } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -32,27 +31,23 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
 function useColorSchemeManager(): MantineColorSchemeManager {
   const key = "homarr-color-scheme";
   const { data: session } = useSession();
-  const [sessionColorScheme, setSessionColorScheme] = useState<MantineColorScheme | undefined>(
-    session?.user.colorScheme,
-  );
+
+  const updateCookieValue = (value: Exclude<MantineColorScheme, "auto">) => {
+    setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
+  };
+
   const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({
     onSuccess: (_, variables) => {
-      setSessionColorScheme(variables.colorScheme);
+      updateCookieValue(variables.colorScheme);
     },
   });
 
-  let handleStorageEvent: (event: StorageEvent) => void;
-
   return {
     get: (defaultValue) => {
       if (typeof window === "undefined") {
         return defaultValue;
       }
 
-      if (sessionColorScheme) {
-        return sessionColorScheme;
-      }
-
       try {
         const cookies = parseCookies(document.cookie);
         return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue;
@@ -67,30 +62,13 @@ function useColorSchemeManager(): MantineColorSchemeManager {
         if (session) {
           mutateColorScheme({ colorScheme: value });
         }
-        setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate() });
-        window.localStorage.setItem(key, value);
+        updateCookieValue(value);
       } catch (error) {
-        console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.", error);
+        console.warn("[@mantine/core] Color scheme manager was unable to save color scheme.", error);
       }
     },
-
-    subscribe: (onUpdate) => {
-      handleStorageEvent = (event) => {
-        if (session) return; // Ignore updates when session is available as we are using session color scheme
-        if (event.storageArea === window.localStorage && event.key === key && isMantineColorScheme(event.newValue)) {
-          onUpdate(event.newValue);
-        }
-      };
-
-      window.addEventListener("storage", handleStorageEvent);
-    },
-
-    unsubscribe: () => {
-      window.removeEventListener("storage", handleStorageEvent);
-    },
-
-    clear: () => {
-      window.localStorage.removeItem(key);
-    },
+    subscribe: () => undefined,
+    unsubscribe: () => undefined,
+    clear: () => undefined,
   };
 }

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -19,11 +19,23 @@ import superjson from "superjson";
 import type { AppRouter } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
+import { env } from "~/env.mjs";
+
+const constructWebsocketUrl = () => {
+  const fallback = "ws://localhost:3001/websockets";
+  if (typeof window === "undefined") {
+    return fallback;
+  }
+
+  if (env.NODE_ENV === "development") {
+    return fallback;
+  }
+
+  return `ws://${window.location.hostname}:${window.location.port}/websockets`;
+};
+
 const wsClient = createWSClient({
-  url:
-    typeof window === "undefined"
-      ? "ws://localhost:3001/websockets"
-      : `ws://${window.location.hostname}:${window.location.port}/websockets`,
+  url: constructWebsocketUrl(),
 });
 
 export function TRPCReactProvider(props: PropsWithChildren) {

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

@@ -25,6 +25,7 @@ import {
 
 import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
+import { createDocumentationLink } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 
 import { MainHeader } from "~/components/layout/header";
@@ -124,7 +125,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         {
           label: t("items.help.items.documentation"),
           icon: IconBook2,
-          href: "https://homarr.dev/docs/getting-started/",
+          href: createDocumentationLink("/docs/getting-started"),
           external: true,
         },
         {

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx

@@ -15,9 +15,10 @@ interface RenameGroupFormProps {
     id: string;
     name: string;
   };
+  disabled?: boolean;
 }
 
-export const RenameGroupForm = ({ group }: RenameGroupFormProps) => {
+export const RenameGroupForm = ({ group, disabled }: RenameGroupFormProps) => {
   const t = useI18n();
   const { mutate, isPending } = clientApi.group.updateGroup.useMutation();
   const form = useZodForm(validation.group.update.pick({ name: true }), {
@@ -28,6 +29,9 @@ export const RenameGroupForm = ({ group }: RenameGroupFormProps) => {
 
   const handleSubmit = useCallback(
     (values: FormType) => {
+      if (disabled) {
+        return;
+      }
       mutate(
         {
           ...values,
@@ -60,13 +64,15 @@ export const RenameGroupForm = ({ group }: RenameGroupFormProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <TextInput label={t("group.field.name")} {...form.getInputProps("name")} />
+        <TextInput label={t("group.field.name")} {...form.getInputProps("name")} disabled={disabled} />
 
-        <Group justify="end">
-          <Button type="submit" color="teal" loading={isPending}>
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
+        {!disabled && (
+          <Group justify="end">
+            <Button type="submit" color="teal" loading={isPending}>
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        )}
       </Stack>
     </form>
   );

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_reserved-group-alert.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { Alert, Anchor } from "@mantine/core";
+import { IconExclamationCircle } from "@tabler/icons-react";
+
+import { createDocumentationLink } from "@homarr/definitions";
+import { getI18n } from "@homarr/translation/server";
+
+export const ReservedGroupAlert = async () => {
+  const t = await getI18n();
+
+  return (
+    <Alert variant="light" color="yellow" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
+      {t("group.reservedNotice.message", {
+        checkoutDocs: (
+          <Anchor
+            size="sm"
+            component={Link}
+            href={createDocumentationLink("/docs/management/users", "#special-groups")}
+            target="_blank"
+          >
+            {t("common.action.checkoutDocs")}
+          </Anchor>
+        ),
+      })}
+    </Alert>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx

@@ -6,9 +6,11 @@ import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { env } from "@homarr/auth/env.mjs";
 import { isProviderEnabled } from "@homarr/auth/server";
+import { everyoneGroup } from "@homarr/definitions";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { SearchInput, UserAvatar } from "@homarr/ui";
 
+import { ReservedGroupAlert } from "../_reserved-group-alert";
 import { AddGroupMember } from "./_add-group-member";
 import { RemoveGroupMember } from "./_remove-group-member";
 
@@ -25,6 +27,7 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
   const t = await getI18n();
   const tMembers = await getScopedI18n("management.page.group.setting.members");
   const group = await api.group.getById({ id: params.id });
+  const isReserved = group.name === everyoneGroup;
 
   const filteredMembers = searchParams.search
     ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -41,15 +44,19 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
     <Stack>
       <Title>{tMembers("title")}</Title>
 
-      {providerTypes !== "credentials" && (
-        <Alert variant="light" color="yellow" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
-          {t(`group.memberNotice.${providerTypes}`)}
-        </Alert>
+      {isReserved ? (
+        <ReservedGroupAlert />
+      ) : (
+        providerTypes !== "credentials" && (
+          <Alert variant="light" color="yellow" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
+            {t(`group.memberNotice.${providerTypes}`)}
+          </Alert>
+        )
       )}
 
       <Group justify="space-between">
         <SearchInput placeholder={`${tMembers("search")}...`} defaultValue={searchParams.search} />
-        {isProviderEnabled("credentials") && (
+        {isProviderEnabled("credentials") && !isReserved && (
           <AddGroupMember groupId={group.id} presentUserIds={group.members.map((member) => member.id)} />
         )}
       </Group>
@@ -63,7 +70,7 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
       <Table striped highlightOnHover>
         <TableTbody>
           {filteredMembers.map((member) => (
-            <Row key={group.id} member={member} groupId={group.id} />
+            <Row key={group.id} member={member} groupId={group.id} disabled={isReserved} />
           ))}
         </TableTbody>
       </Table>
@@ -74,9 +81,10 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
 interface RowProps {
   member: RouterOutputs["group"]["getById"]["members"][number];
   groupId: string;
+  disabled?: boolean;
 }
 
-const Row = ({ member, groupId }: RowProps) => {
+const Row = ({ member, groupId, disabled }: RowProps) => {
   return (
     <TableTr>
       <TableTd>
@@ -88,7 +96,7 @@ const Row = ({ member, groupId }: RowProps) => {
         </Group>
       </TableTd>
       <TableTd w={100}>
-        {member.provider === "credentials" && <RemoveGroupMember user={member} groupId={groupId} />}
+        {member.provider === "credentials" && !disabled && <RemoveGroupMember user={member} groupId={groupId} />}
       </TableTd>
     </TableTr>
   );