fix(settings): move board access control out of the nested form

The unified board settings form wrapped BoardAccessSettings (which renders
its own <form> via the user/group access forms) inside the outer board
settings <form>. Nested <form> elements are invalid HTML and cause React
hydration to fail (error #418), so the access save button's onSubmit never
runs and clicking 'Save group permission' only reloads the page without
persisting.

Fix: keep the six settings sections in the outer <form>, and render the
Access control and Danger zone sections outside it as siblings. This restores
the independent mutation/forms for access permissions, matching the original
intent of the unified settings form.

Closes #6653

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -33,7 +33,6 @@ body:
       options:
         # The below comment is used to insert a new version with on-release.yml
         #NEXT_VERSION#
-        - 1.76.1
         - 1.76.0
         - 1.75.0
         - 1.74.0

CHANGELOG.md

@@ -1,5 +1,3 @@
-## [1.76.1](https://github.com/homarr-labs/homarr/compare/v1.76.0...v1.76.1) (2026-08-26)
-
 ## [1.76.0](https://github.com/homarr-labs/homarr/compare/v1.75.0...v1.76.0) (2026-08-21)
 
 ## [1.75.0](https://github.com/homarr-labs/homarr/compare/v1.74.0...v1.75.0) (2026-08-14)

apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx

@@ -178,35 +178,37 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
   const isPending = savePartialSettings.isPending || saveLayouts.isPending;
 
   return (
-    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
-      <Stack gap="xl">
-        <GeneralSettingsContent board={board} form={form} />
-        <LayoutSettingsContent form={form} />
-        <BackgroundSettingsContent form={form} />
-        <ColorSettingsContent form={form} />
-        <CustomCssSettingsContent form={form} />
-        <BehaviorSettingsContent form={form} />
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
+        <Stack gap="xl">
+          <GeneralSettingsContent board={board} form={form} />
+          <LayoutSettingsContent form={form} />
+          <BackgroundSettingsContent form={form} />
+          <ColorSettingsContent form={form} />
+          <CustomCssSettingsContent form={form} />
+          <BehaviorSettingsContent form={form} />
 
-        {hasFullAccess && (
-          <SectionCard title={tSection("access.title")}>
-            <BoardAccessSettings board={board} initialPermissions={permissions} />
-          </SectionCard>
-        )}
+          {form.isDirty() && (
+            <UnsavedChangesBar>
+              <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
+                {t("common.action.discard")}
+              </Button>
+              <Button loading={isPending} type="submit" disabled={!form.isValid()}>
+                {t("common.action.saveChanges")}
+              </Button>
+            </UnsavedChangesBar>
+          )}
+        </Stack>
+      </form>
 
-        {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
+      {hasFullAccess && (
+        <SectionCard title={tSection("access.title")}>
+          <BoardAccessSettings board={board} initialPermissions={permissions} />
+        </SectionCard>
+      )}
 
-        {form.isDirty() && (
-          <UnsavedChangesBar>
-            <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
-              {t("common.action.discard")}
-            </Button>
-            <Button loading={isPending} type="submit" disabled={!form.isValid()}>
-              {t("common.action.saveChanges")}
-            </Button>
-          </UnsavedChangesBar>
-        )}
-      </Stack>
-    </form>
+      {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
+    </Stack>
   );
 };
 

apps/nextjs/src/app/api/mcp/[transport]/route.ts

@@ -14,7 +14,6 @@ import { db } from "@homarr/db";
 
 import { getPackageVersion } from "~/versions/package-reader";
 import { extractMcpTools } from "../_extract-tools";
-import { serializeMcpToolResult } from "../_serialize-result";
 
 const logger = createLogger({ module: "mcpRoute" });
 
@@ -204,7 +203,7 @@ const mcpHandler = createMcpHandler(
         const input = args && Object.keys(args).length > 0 ? args : undefined;
         const result = await procedure(input);
         return {
-          content: [{ type: "text" as const, text: serializeMcpToolResult(result) }],
+          content: [{ type: "text" as const, text: JSON.stringify(result) }],
         };
       } catch (error) {
         const message = sanitizeErrorMessage(error);

apps/nextjs/src/app/api/mcp/_serialize-result.spec.ts

@@ -1,23 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { serializeMcpToolResult } from "./_serialize-result";
-
-describe("serializeMcpToolResult", () => {
-  it("serializes objects as JSON strings", () => {
-    expect(serializeMcpToolResult({ boardId: "1" })).toBe('{"boardId":"1"}');
-  });
-
-  it("serializes primitive values", () => {
-    expect(serializeMcpToolResult("hello")).toBe('"hello"');
-    expect(serializeMcpToolResult(42)).toBe("42");
-    expect(serializeMcpToolResult(true)).toBe("true");
-  });
-
-  it("serializes null as the string null", () => {
-    expect(serializeMcpToolResult(null)).toBe("null");
-  });
-
-  it("serializes void results as the string null so MCP content text is always a string", () => {
-    expect(serializeMcpToolResult(undefined)).toBe("null");
-  });
-});

apps/nextjs/src/app/api/mcp/_serialize-result.ts

@@ -1,3 +0,0 @@
-export function serializeMcpToolResult(result: unknown): string {
-  return JSON.stringify(result) ?? "null";
-}

nginx.conf

@@ -9,7 +9,7 @@ http {
 
         # Route websockets traffic to port 3001
         location /websockets {
-            proxy_pass http://127.0.0.1:3001;
+            proxy_pass http://${HOSTNAME}:3001;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "Upgrade";
@@ -18,7 +18,7 @@ http {
 
         # Route all other traffic to port 3000
         location / {
-            proxy_pass http://127.0.0.1:3000;
+            proxy_pass http://${HOSTNAME}:3000;
             proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "1.76.1",
+  "version": "1.76.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",

packages/api/src/shared.ts

@@ -43,7 +43,7 @@ async function importCookiesAsync() {
 
 function getBaseUrl() {
   if (typeof window !== "undefined") return window.location.origin;
-  return "http://127.0.0.1:3000";
+  return `http://${process.env.HOSTNAME ?? "localhost"}:3000`;
 }
 
 export const trpcPath = "/api/trpc";

packages/core/src/infrastructure/http/index.ts

@@ -5,5 +5,4 @@ export {
   createCustomCheckServerIdentity,
   createHttpsAgentAsync,
   fetchWithTrustedCertificatesAsync,
-  mergeHeadersWithUserAgent,
 } from "./request";

packages/core/src/infrastructure/http/request.ts

@@ -18,14 +18,6 @@ import packageJson from "../../../../../package.json";
 
 export const getDefaultUserAgent = () => `Homarr/${packageJson.version} (+https://homarr.dev)`;
 
-export const mergeHeadersWithUserAgent = (headers: unknown): Headers => {
-  const mergedHeaders = new Headers(headers as HeadersInit);
-  if (!mergedHeaders.has("user-agent")) {
-    mergedHeaders.set("user-agent", getDefaultUserAgent());
-  }
-  return mergedHeaders;
-};
-
 export const createCustomCheckServerIdentity = (
   trustedHostnames: TrustedCertificateHostname[],
 ): typeof checkServerIdentity => {
@@ -85,18 +77,30 @@ export const fetchWithTrustedCertificatesAsync = async (
       undefined,
       options?.bodyTimeout !== undefined ? { bodyTimeout: options.bodyTimeout } : undefined,
     ));
-  const buildFetchOptions = (fetchOptions: Omit<RequestInit, "dispatcher" | "bodyTimeout" | "timeout">) => ({
-    ...fetchOptions,
-    headers: mergeHeadersWithUserAgent(fetchOptions.headers) as unknown as RequestInit["headers"],
-  });
   if (options?.timeout) {
     const { bodyTimeout: _bodyTimeout, dispatcher: _dispatcher, ...fetchOptions } = options;
     return await withTimeoutAsync(
-      async (signal) => fetch(url, { ...buildFetchOptions(fetchOptions), signal, dispatcher: agent }),
+      async (signal) =>
+        fetch(url, {
+          ...fetchOptions,
+          headers: {
+            "User-Agent": getDefaultUserAgent(),
+            ...fetchOptions.headers,
+          },
+          signal,
+          dispatcher: agent,
+        }),
       options.timeout,
     );
   }
 
   const { bodyTimeout: _bodyTimeout, dispatcher: _dispatcher, ...fetchOptions } = options ?? {};
-  return fetch(url, { ...buildFetchOptions(fetchOptions), dispatcher: agent });
+  return fetch(url, {
+    ...fetchOptions,
+    headers: {
+      "User-Agent": getDefaultUserAgent(),
+      ...fetchOptions.headers,
+    },
+    dispatcher: agent,
+  });
 };

packages/core/src/test/infrastructure/http/request.spec.ts

@@ -1,120 +0,0 @@
-// @vitest-environment node
-
-import { createServer } from "node:http";
-import type { Server } from "node:http";
-import type { AddressInfo } from "node:net";
-import type { RequestInit } from "undici";
-
-import { describe, expect, test, vi } from "vitest";
-
-import { fetchWithTrustedCertificatesAsync, mergeHeadersWithUserAgent } from "@homarr/core/infrastructure/http";
-
-vi.mock("@homarr/core/infrastructure/certificates", () => ({
-  getAllTrustedCertificatesAsync: vi.fn(async () => []),
-  getTrustedCertificateHostnamesAsync: vi.fn(async () => []),
-}));
-
-describe("mergeHeadersWithUserAgent", () => {
-  test("should keep existing headers when given a Headers instance", () => {
-    // Arrange
-    const headers = new Headers({ "x-api-key": "some-api-key", Accept: "application/json" });
-
-    // Act
-    const merged = mergeHeadersWithUserAgent(headers);
-
-    // Assert
-    expect(merged.get("x-api-key")).toBe("some-api-key");
-    expect(merged.get("accept")).toBe("application/json");
-    expect(merged.get("user-agent")).toContain("Homarr/");
-  });
-
-  test("should keep existing headers when given a record", () => {
-    // Arrange
-    const headers = { "x-api-key": "some-api-key", Accept: "application/json" };
-
-    // Act
-    const merged = mergeHeadersWithUserAgent(headers);
-
-    // Assert
-    expect(merged.get("x-api-key")).toBe("some-api-key");
-    expect(merged.get("accept")).toBe("application/json");
-    expect(merged.get("user-agent")).toContain("Homarr/");
-  });
-
-  test("should keep existing headers when given a tuple array", () => {
-    // Arrange
-    const headers: [string, string][] = [
-      ["x-api-key", "some-api-key"],
-      ["Accept", "application/json"],
-    ];
-
-    // Act
-    const merged = mergeHeadersWithUserAgent(headers);
-
-    // Assert
-    expect(merged.get("x-api-key")).toBe("some-api-key");
-    expect(merged.get("accept")).toBe("application/json");
-    expect(merged.get("user-agent")).toContain("Homarr/");
-  });
-
-  test("should not override an existing user-agent in any casing", () => {
-    // Arrange
-    const headers = new Headers({ "USER-AGENT": "custom-agent" });
-
-    // Act
-    const merged = mergeHeadersWithUserAgent(headers);
-
-    // Assert
-    expect(merged.get("user-agent")).toBe("custom-agent");
-  });
-
-  test("should fall back to the default user agent when no headers are provided", () => {
-    // Act
-    const merged = mergeHeadersWithUserAgent(undefined);
-
-    // Assert
-    expect(merged.get("user-agent")).toContain("Homarr/");
-  });
-});
-
-const startCaptureServerAsync = async (): Promise<{
-  server: Server;
-  getReceivedHeaders: () => Record<string, string | string[] | undefined>;
-  port: number;
-}> => {
-  let receivedHeaders: Record<string, string | string[] | undefined> = {};
-  const server = createServer((req, res) => {
-    receivedHeaders = req.headers;
-    res.writeHead(200, { "Content-Type": "application/json" });
-    res.end("{}");
-  });
-  await new Promise<void>((resolve) => server.listen(0, resolve));
-  const port = (server.address() as AddressInfo).port;
-  return {
-    server,
-    port,
-    getReceivedHeaders: () => receivedHeaders,
-  };
-};
-
-describe("fetchWithTrustedCertificatesAsync", () => {
-  test("should deliver a Headers instance with all headers to the remote server", async () => {
-    // Arrange - the @immich/sdk hands over a Headers instance after merging its defaults
-    const { server, port, getReceivedHeaders } = await startCaptureServerAsync();
-    const headers = new Headers({ "x-api-key": "immich-api-key", Accept: "application/json" });
-
-    // Act
-    try {
-      const response = await fetchWithTrustedCertificatesAsync(`http://127.0.0.1:${port}/api/server/statistics`, {
-        headers: headers as unknown as RequestInit["headers"],
-      });
-
-      // Assert
-      expect(response.status).toBe(200);
-      expect(getReceivedHeaders()["x-api-key"]).toBe("immich-api-key");
-      expect(getReceivedHeaders()["user-agent"]).toContain("Homarr/");
-    } finally {
-      server.close();
-    }
-  });
-});

packages/integrations/test/immich-sdk-e2e.spec.ts

@@ -1,39 +0,0 @@
-// @vitest-environment node
-
-import { createServer } from "node:http";
-import type { AddressInfo } from "node:net";
-
-import { getServerStatistics, init } from "@immich/sdk";
-import { describe, expect, test, vi } from "vitest";
-
-import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
-
-vi.mock("@homarr/core/infrastructure/certificates", () => ({
-  getAllTrustedCertificatesAsync: vi.fn(async () => []),
-  getTrustedCertificateHostnamesAsync: vi.fn(async () => []),
-}));
-
-describe("real @immich/sdk end-to-end through fetchWithTrustedCertificatesAsync", () => {
-  test("x-api-key set via init() reaches the server", async () => {
-    let receivedXApiKey: string | string[] | undefined;
-    const server = createServer((req, res) => {
-      receivedXApiKey = req.headers["x-api-key"];
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ usage: 1000, photos: 5, videos: 2 }));
-    });
-    await new Promise<void>((resolve) => server.listen(0, resolve));
-    const port = (server.address() as AddressInfo).port;
-
-    init({ baseUrl: `http://127.0.0.1:${port}/api`, apiKey: "sdk-configured-key" });
-    try {
-      const stats = await getServerStatistics({
-        fetch: fetchWithTrustedCertificatesAsync as unknown as typeof fetch,
-      });
-
-      expect(receivedXApiKey).toBe("sdk-configured-key");
-      expect(stats).toMatchObject({ usage: 1000, photos: 5, videos: 2 });
-    } finally {
-      server.close();
-    }
-  });
-});

scripts/run.sh

@@ -21,18 +21,20 @@ fi
 export AUTH_SECRET=$(openssl rand -base64 32)
 
 # Start nginx proxy
-# 1. Create the nginx configuration file from the template
-# 2. Start the nginx server
+# 1. Replace the HOSTNAME in the nginx template file
+# 2. Create the nginx configuration file from the template
+# 3. Start the nginx server
 # Only listen on IPv6 when the host actually has IPv6 configured (#4596).
 # Otherwise nginx aborts with "socket() [::]:7575 failed (97: Address family
 # not supported by protocol)". Check HOMARR_DISABLE_IPV6 first so users can
 # force IPv4-only even when the host supports IPv6, then probe for IPv6
 # addresses via grep (not -s: proc files always report size 0).
+export HOSTNAME
 export NGINX_LISTEN_IPV6=''
 if [ "${HOMARR_DISABLE_IPV6:-false}" != "true" ] && grep -q . /proc/net/if_inet6 2>/dev/null; then
     NGINX_LISTEN_IPV6='listen [::]:7575;'
 fi
-envsubst '${NGINX_LISTEN_IPV6}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
+envsubst '${HOSTNAME} ${NGINX_LISTEN_IPV6}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
 # Start services in the background and store their PIDs
 nginx -g 'daemon off;' &
 NGINX_PID=$!
@@ -65,9 +67,6 @@ terminate() {
 
 trap terminate TERM INT
 
-# Next.js standalone uses HOSTNAME as its bind address. Docker's generated
-# hostname can be unresolvable, so bind explicitly while nginx uses loopback.
-export HOSTNAME=0.0.0.0
 node apps/nextjs/server.js &
 NEXTJS_PID=$!