fix(media-requests): cache statistics responses

apps/nextjs/src/app/[locale]/_client-providers/query-cache-error-cleanup.ts

@@ -1,29 +0,0 @@
-import type { QueryClient } from "@tanstack/react-query";
-
-import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
-
-export const createQueryCacheErrorCleanup = (queryClient: QueryClient): (() => void) => {
-  const wasSuccessful = new Set<string>();
-
-  return queryClient.getQueryCache().subscribe((event) => {
-    const query = event.query;
-    const key = query.queryHash;
-
-    if (event.type === "removed") {
-      wasSuccessful.delete(key);
-      return;
-    }
-
-    if (event.type !== "updated") return;
-
-    if (query.state.status === "success" && isPersistableWidgetQueryKey(query.queryKey)) {
-      wasSuccessful.add(key);
-      return;
-    }
-
-    if (query.state.status === "error" && wasSuccessful.has(key)) {
-      queryClient.resetQueries({ queryKey: query.queryKey, exact: true });
-      wasSuccessful.delete(key);
-    }
-  });
-};

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

@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import type { QueryKey } from "@tanstack/react-query";
 import { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -36,7 +36,6 @@ import { env } from "@homarr/common/env";
 import { showWarningNotification } from "@homarr/notifications";
 import { widgetImports } from "@homarr/widgets";
 
-import { createQueryCacheErrorCleanup } from "./query-cache-error-cleanup";
 import { createWidgetQueryPersister } from "./query-cache-persister";
 
 const getWebSocketProtocol = () => {
@@ -103,10 +102,6 @@ export function TRPCReactProvider(props: PropsWithChildren) {
     return client;
   });
 
-  useEffect(() => {
-    return createQueryCacheErrorCleanup(queryClient);
-  }, [queryClient]);
-
   const [trpcClient] = useState(() => {
     return clientApi.createClient({
       links: [
@@ -167,9 +162,6 @@ export function TRPCReactProvider(props: PropsWithChildren) {
               query.state.status === "success" && isPersistableWidgetQueryKey(query.queryKey),
           },
         }}
-        onSuccess={() => {
-          queryClient.invalidateQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
-        }}
       >
         <ReactQueryStreamedHydration transformer={superjson}>{props.children}</ReactQueryStreamedHydration>
         <ReactQueryDevtools initialIsOpen={false} />

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

@@ -16,7 +16,10 @@ export default async function AppEditPage(props: AppEditPageProps) {
   const params = await props.params;
   const session = await auth();
 
-  if (!session?.user.permissions.includes("app-modify-all")) {
+  if (
+    !session?.user.permissions.includes("board-modify-all") ||
+    !session?.user.permissions.includes("app-modify-all")
+  ) {
     notFound();
   }
   const app = await api.app.byId({ id: params.id });

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

@@ -10,7 +10,7 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 export default async function AppNewPage() {
   const session = await auth();
 
-  if (!session?.user.permissions.includes("app-create")) {
+  if (!session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create")) {
     notFound();
   }
 

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

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
@@ -33,6 +33,9 @@ export default async function AppsPage(props: AppsPageProps) {
   if (!session) {
     redirect("/auth/login");
   }
+  if (!session.user.permissions.includes("board-modify-all")) {
+    notFound();
+  }
 
   const searchParams = searchParamsSchema.parse(await props.searchParams);
 

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

@@ -61,7 +61,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       icon: IconBox,
       href: "/manage/apps",
       label: t("items.apps"),
-      hidden: !session,
+      hidden: !session?.user.permissions.includes("board-modify-all"),
       iconProps: {
         strokeWidth: 2.5,
       },

apps/nextjs/src/components/board/items/item-content.tsx

@@ -19,7 +19,6 @@ import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
 import { BoardItemMenu } from "./item-menu";
 import { WidgetContextMenu } from "./widget-context-menu";
-import { removePersistedWidgetQueries } from "./widget-query-recovery";
 
 interface BoardItemContentProps {
   item: SectionItem;
@@ -113,7 +112,7 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
       {({ reset }) => (
         <ErrorBoundary
           onReset={() => {
-            removePersistedWidgetQueries(queryClient);
+            void queryClient.invalidateQueries({ queryKey: [["widget"]] });
             reset();
           }}
           fallbackRender={({ resetErrorBoundary, error }) => (

apps/nextjs/src/components/board/items/widget-query-recovery.spec.ts

@@ -1,157 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-import { describe, expect, test } from "vitest";
-
-import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
-
-import { createQueryCacheErrorCleanup } from "~/app/[locale]/_client-providers/query-cache-error-cleanup";
-import { removePersistedWidgetQueries } from "./widget-query-recovery";
-
-describe("removePersistedWidgetQueries", () => {
-  test("removes stale widget queries and allows fresh data to be fetched", async () => {
-    const queryClient = new QueryClient();
-    const crashedWidgetQueryKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
-    const unrelatedQueryKey = [["user", "me"], { input: {} }];
-
-    queryClient.setQueryData(crashedWidgetQueryKey, "stale");
-    queryClient.setQueryData(unrelatedQueryKey, "unrelated");
-
-    removePersistedWidgetQueries(queryClient);
-
-    expect(queryClient.getQueryData(crashedWidgetQueryKey)).toBeUndefined();
-    expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
-    await expect(
-      queryClient.fetchQuery({ queryKey: crashedWidgetQueryKey, queryFn: () => Promise.resolve("fresh") }),
-    ).resolves.toBe("fresh");
-  });
-
-  test("removes persisted queries outside the widget router", () => {
-    const queryClient = new QueryClient();
-    const dockerQueryKey = [["docker", "getContainers"], { input: {} }];
-    const appQueryKey = [["app", "byId"], { input: {} }];
-    const unrelatedQueryKey = [["user", "me"], { input: {} }];
-
-    queryClient.setQueryData(dockerQueryKey, "stale");
-    queryClient.setQueryData(appQueryKey, "stale");
-    queryClient.setQueryData(unrelatedQueryKey, "unrelated");
-
-    removePersistedWidgetQueries(queryClient);
-
-    expect(queryClient.getQueryData(dockerQueryKey)).toBeUndefined();
-    expect(queryClient.getQueryData(appQueryKey)).toBeUndefined();
-    expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
-  });
-
-  test("removes persisted widget queries when the widget kind and query path differ", () => {
-    const queryClient = new QueryClient();
-    const crashedWidgetQueryKey = [["widget", "anchorNotes", "getNote"], { input: {} }];
-    const unrelatedQueryKey = [["user", "me"], { input: {} }];
-
-    queryClient.setQueryData(crashedWidgetQueryKey, "stale");
-    queryClient.setQueryData(unrelatedQueryKey, "unrelated");
-
-    removePersistedWidgetQueries(queryClient);
-
-    expect(queryClient.getQueryData(crashedWidgetQueryKey)).toBeUndefined();
-    expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
-  });
-});
-
-describe("query cache error cleanup", () => {
-  test("resets data when a persistable query transitions from success to error", async () => {
-    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
-
-    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
-    const userKey = [["user", "me"], { input: {} }];
-
-    queryClient.setQueryData(widgetKey, { old: true });
-    queryClient.setQueryData(userKey, { user: true });
-
-    await queryClient
-      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("API down")) })
-      .catch(() => {});
-
-    expect(queryClient.getQueryData(widgetKey)).toBeUndefined();
-    expect(queryClient.getQueryData(userKey)).toEqual({ user: true });
-
-    unsubscribe();
-  });
-
-  test("preserves stale data for non-persistable query errors", async () => {
-    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
-
-    const boardKey = [["board", "getBoardByName"], { input: {} }];
-
-    queryClient.setQueryData(boardKey, { boards: [] });
-
-    await queryClient
-      .fetchQuery({ queryKey: boardKey, queryFn: () => Promise.reject(new Error("API down")) })
-      .catch(() => {});
-
-    expect(queryClient.getQueryData(boardKey)).toEqual({ boards: [] });
-
-    unsubscribe();
-  });
-
-  test("handles success→error→success→error cycling without getting stuck", async () => {
-    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
-
-    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
-
-    queryClient.setQueryData(widgetKey, "first-success");
-    await queryClient.fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.resolve("second-success") });
-    expect(queryClient.getQueryData(widgetKey)).toBe("second-success");
-
-    await queryClient
-      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("boom")) })
-      .catch(() => {});
-    expect(queryClient.getQueryData(widgetKey)).toBeUndefined();
-
-    await queryClient.fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.resolve("third-success") });
-    expect(queryClient.getQueryData(widgetKey)).toBe("third-success");
-
-    await queryClient
-      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("boom-2")) })
-      .catch(() => {});
-    expect(queryClient.getQueryData(widgetKey)).toBeUndefined();
-
-    unsubscribe();
-  });
-
-  test("unsubscribe stops processing further events", async () => {
-    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
-
-    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
-    queryClient.setQueryData(widgetKey, "stale");
-
-    unsubscribe();
-
-    await queryClient
-      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("API down")) })
-      .catch(() => {});
-
-    expect(queryClient.getQueryData(widgetKey)).toBe("stale");
-  });
-});
-
-describe("rehydration marks persistable data as stale", () => {
-  test("rehydrated queries are invalidated so they refetch on mount", async () => {
-    const queryClient = new QueryClient({
-      defaultOptions: { queries: { retry: false, staleTime: 0 } },
-    });
-
-    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
-    const userKey = [["user", "me"], { input: {} }];
-
-    queryClient.setQueryData(widgetKey, { rehydrated: true });
-    queryClient.setQueryData(userKey, { rehydrated: true });
-
-    queryClient.invalidateQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
-
-    expect(queryClient.getQueryState(widgetKey)?.isInvalidated).toBe(true);
-    expect(queryClient.getQueryState(userKey)?.isInvalidated).toBe(false);
-  });
-});

apps/nextjs/src/components/board/items/widget-query-recovery.ts

@@ -1,7 +0,0 @@
-import type { QueryClient } from "@tanstack/react-query";
-
-import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
-
-export const removePersistedWidgetQueries = (queryClient: QueryClient) => {
-  queryClient.removeQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
-};

packages/api/src/router/app.ts

@@ -18,7 +18,8 @@ import { AppAccessControl } from "./app/app-access-control";
 const defaultIcon = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/homarr.svg";
 
 export const appRouter = createTRPCRouter({
-  getPaginated: protectedProcedure
+  getPaginated: permissionRequiredProcedure
+    .requiresPermission("board-modify-all")
     .input(paginatedSchema)
     .output(z.object({ items: z.array(selectAppSchema), totalCount: z.number() }))
     .meta({

packages/api/src/router/home.ts

@@ -101,7 +101,7 @@ export const homeRouter = createTRPCRouter({
       });
     }
 
-    if (ctx.session?.user) {
+    if (ctx.session?.user.permissions.includes("board-modify-all")) {
       statistics.push({
         titleKey: "app",
         subtitleKey: "resources",

packages/api/src/router/test/app.spec.ts

@@ -76,6 +76,33 @@ describe("all should return all apps", () => {
   });
 });
 
+describe("getPaginated should require board modification access", () => {
+  test("should throw FORBIDDEN without board-modify-all", async () => {
+    const caller = appRouter.createCaller({
+      db: createDb(),
+      deviceType: undefined,
+      session: createDefaultSession(),
+    });
+
+    await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("Permission denied");
+  });
+
+  test("should return apps with board-modify-all", async () => {
+    const db = createDb();
+    const caller = appRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: createDefaultSession(["board-modify-all"]),
+    });
+    await db.insert(apps).values({ id: "1", name: "Homarr", iconUrl: "https://homarr.dev/icon.svg" });
+
+    await expect(caller.getPaginated({ page: 1, pageSize: 10 })).resolves.toMatchObject({
+      totalCount: 1,
+      items: [{ id: "1" }],
+    });
+  });
+});
+
 describe("byId should return an app by id", () => {
   test("should return an app by id when canUserSeeAppAsync returns true", async () => {
     // Arrange

packages/request-handler/src/media-request-stats.ts

@@ -16,4 +16,6 @@ export const mediaRequestStatsRequestHandler = createIntegrationRequestHandler<
       users: await integrationInstance.getUsersAsync(),
     };
   },
+  cacheTtlMs: 60_000,
+  fallbackToStaleOnError: true,
 });

packages/spotlight/src/modes/app-integration-board/index.tsx

@@ -17,6 +17,10 @@ export const appIntegrationBoardMode = {
       return groups;
     }
 
-    return groups.concat([appsSearchGroup, integrationsSearchGroup]);
+    return groups.concat(
+      session.user.permissions.includes("board-modify-all")
+        ? [appsSearchGroup, integrationsSearchGroup]
+        : [integrationsSearchGroup],
+    );
   },
 } satisfies SearchMode;

packages/spotlight/src/modes/command/global-group.tsx

@@ -87,7 +87,8 @@ export const globalCommandGroup = createGroup<Command>({
         icon: IconBox,
         name: tOption("newApp.label"),
         useInteraction: interaction.link(() => ({ href: "/manage/apps/new" })),
-        hidden: !session?.user.permissions.includes("app-create"),
+        hidden:
+          !session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create"),
       },
       {
         commandKey: "newIntegration",

packages/spotlight/src/modes/page/pages-search-group.tsx

@@ -76,7 +76,7 @@ export const pagesSearchGroup = createGroup<{
         icon: IconBox,
         path: "/manage/apps",
         name: t("manageApp.label"),
-        hidden: !session,
+        hidden: !session?.user.permissions.includes("board-modify-all"),
       },
       {
         icon: IconPlug,