feat(user): add search in new tab preference (#2125)

packages/api/src/router/user.ts

@@ -22,6 +22,7 @@ import {
 import { throwIfActionForbiddenAsync } from "./board/board-access";
 import { throwIfCredentialsDisabled } from "./invite/checks";
 import { nextOnboardingStepAsync } from "./onboard/onboard-queries";
+import { changeSearchPreferencesAsync, changeSearchPreferencesInputSchema } from "./user/change-search-preferences";
 
 export const userRouter = createTRPCRouter({
   initUser: onboardingProcedure
@@ -215,6 +216,7 @@ export const userRouter = createTRPCRouter({
         firstDayOfWeek: true,
         pingIconsEnabled: true,
         defaultSearchEngineId: true,
+        openSearchInNewTab: true,
       }),
     )
     .meta({ openapi: { method: "GET", path: "/api/users/{userId}", tags: ["users"], protect: true } })
@@ -239,6 +241,7 @@ export const userRouter = createTRPCRouter({
           firstDayOfWeek: true,
           pingIconsEnabled: true,
           defaultSearchEngineId: true,
+          openSearchInNewTab: true,
         },
         where: eq(users.id, input.userId),
       });
@@ -423,40 +426,32 @@ export const userRouter = createTRPCRouter({
     }),
   changeDefaultSearchEngine: protectedProcedure
     .input(
-      convertIntersectionToZodObject(validation.user.changeDefaultSearchEngine.and(z.object({ userId: z.string() }))),
+      convertIntersectionToZodObject(
+        validation.user.changeSearchPreferences.omit({ openInNewTab: true }).and(z.object({ userId: z.string() })),
+      ),
     )
     .output(z.void())
-    .meta({ openapi: { method: "PATCH", path: "/api/users/changeSearchEngine", tags: ["users"], protect: true } })
+    .meta({
+      openapi: {
+        method: "PATCH",
+        path: "/api/users/changeSearchEngine",
+        tags: ["users"],
+        protect: true,
+        deprecated: true,
+      },
+    })
     .mutation(async ({ input, ctx }) => {
-      const user = ctx.session.user;
-      // Only admins can change other users passwords
-      if (!user.permissions.includes("admin") && user.id !== input.userId) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
-        });
-      }
-
-      const dbUser = await ctx.db.query.users.findFirst({
-        columns: {
-          id: true,
-        },
-        where: eq(users.id, input.userId),
+      await changeSearchPreferencesAsync(ctx.db, ctx.session, {
+        ...input,
+        openInNewTab: undefined,
       });
-
-      if (!dbUser) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
-        });
-      }
-
-      await ctx.db
-        .update(users)
-        .set({
-          defaultSearchEngineId: input.defaultSearchEngineId,
-        })
-        .where(eq(users.id, input.userId));
+    }),
+  changeSearchPreferences: protectedProcedure
+    .input(convertIntersectionToZodObject(changeSearchPreferencesInputSchema))
+    .output(z.void())
+    .meta({ openapi: { method: "PATCH", path: "/api/users/search-preferences", tags: ["users"], protect: true } })
+    .mutation(async ({ input, ctx }) => {
+      await changeSearchPreferencesAsync(ctx.db, ctx.session, input);
     }),
   changeColorScheme: protectedProcedure
     .input(validation.user.changeColorScheme)
@@ -470,21 +465,6 @@ export const userRouter = createTRPCRouter({
         })
         .where(eq(users.id, ctx.session.user.id));
     }),
-  getPingIconsEnabledOrDefault: publicProcedure.query(async ({ ctx }) => {
-    if (!ctx.session?.user) {
-      return false;
-    }
-
-    const user = await ctx.db.query.users.findFirst({
-      columns: {
-        id: true,
-        pingIconsEnabled: true,
-      },
-      where: eq(users.id, ctx.session.user.id),
-    });
-
-    return user?.pingIconsEnabled ?? false;
-  }),
   changePingIconsEnabled: protectedProcedure
     .input(validation.user.pingIconsEnabled.and(validation.common.byId))
     .mutation(async ({ input, ctx }) => {
@@ -503,21 +483,6 @@ export const userRouter = createTRPCRouter({
         })
         .where(eq(users.id, ctx.session.user.id));
     }),
-  getFirstDayOfWeekForUserOrDefault: publicProcedure.input(z.undefined()).query(async ({ ctx }) => {
-    if (!ctx.session?.user) {
-      return 1 as const;
-    }
-
-    const user = await ctx.db.query.users.findFirst({
-      columns: {
-        id: true,
-        firstDayOfWeek: true,
-      },
-      where: eq(users.id, ctx.session.user.id),
-    });
-
-    return user?.firstDayOfWeek ?? (1 as const);
-  }),
   changeFirstDayOfWeek: protectedProcedure
     .input(convertIntersectionToZodObject(validation.user.firstDayOfWeek.and(validation.common.byId)))
     .output(z.void())

packages/api/src/router/user/change-search-preferences.ts

@@ -0,0 +1,50 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+import type { Session } from "@homarr/auth";
+import type { Modify } from "@homarr/common/types";
+import { eq } from "@homarr/db";
+import type { Database } from "@homarr/db";
+import { users } from "@homarr/db/schema";
+import { validation } from "@homarr/validation";
+
+export const changeSearchPreferencesInputSchema = validation.user.changeSearchPreferences.and(
+  z.object({ userId: z.string() }),
+);
+
+export const changeSearchPreferencesAsync = async (
+  db: Database,
+  session: Session,
+  input: Modify<z.infer<typeof changeSearchPreferencesInputSchema>, { openInNewTab: boolean | undefined }>,
+) => {
+  const user = session.user;
+  // Only admins can change other users passwords
+  if (!user.permissions.includes("admin") && user.id !== input.userId) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+      message: "User not found",
+    });
+  }
+
+  const dbUser = await db.query.users.findFirst({
+    columns: {
+      id: true,
+    },
+    where: eq(users.id, input.userId),
+  });
+
+  if (!dbUser) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+      message: "User not found",
+    });
+  }
+
+  await db
+    .update(users)
+    .set({
+      defaultSearchEngineId: input.defaultSearchEngineId,
+      openSearchInNewTab: input.openInNewTab,
+    })
+    .where(eq(users.id, input.userId));
+};

packages/db/migrations/mysql/0021_fluffy_jocasta.sql

@@ -0,0 +1 @@
+ALTER TABLE `user` ADD `open_search_in_new_tab` boolean DEFAULT false NOT NULL;

packages/db/migrations/mysql/meta/_journal.json

@@ -148,6 +148,13 @@
       "when": 1736514409126,
       "tag": "0020_salty_doorman",
       "breakpoints": true
+    },
+    {
+      "idx": 21,
+      "version": "5",
+      "when": 1737883744729,
+      "tag": "0021_fluffy_jocasta",
+      "breakpoints": true
     }
   ]
 }

packages/db/migrations/sqlite/0021_famous_bruce_banner.sql

@@ -0,0 +1 @@
+ALTER TABLE `user` ADD `open_search_in_new_tab` integer DEFAULT true NOT NULL;

packages/db/migrations/sqlite/meta/_journal.json

@@ -148,6 +148,13 @@
       "when": 1736510755691,
       "tag": "0020_empty_hellfire_club",
       "breakpoints": true
+    },
+    {
+      "idx": 21,
+      "version": "6",
+      "when": 1737883733050,
+      "tag": "0021_famous_bruce_banner",
+      "breakpoints": true
     }
   ]
 }

packages/db/schema/mysql.ts

@@ -68,6 +68,7 @@ export const users = mysqlTable("user", {
   defaultSearchEngineId: varchar({ length: 64 }).references(() => searchEngines.id, {
     onDelete: "set null",
   }),
+  openSearchInNewTab: boolean().default(false).notNull(),
   colorScheme: varchar({ length: 5 }).$type<ColorScheme>().default("dark").notNull(),
   firstDayOfWeek: tinyint().$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday
   pingIconsEnabled: boolean().default(false).notNull(),

packages/db/schema/sqlite.ts

@@ -51,6 +51,7 @@ export const users = sqliteTable("user", {
   defaultSearchEngineId: text().references(() => searchEngines.id, {
     onDelete: "set null",
   }),
+  openSearchInNewTab: int({ mode: "boolean" }).default(true).notNull(),
   colorScheme: text().$type<ColorScheme>().default("dark").notNull(),
   firstDayOfWeek: int().$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday
   pingIconsEnabled: int({ mode: "boolean" }).default(false).notNull(),

packages/settings/eslint.config.js

@@ -0,0 +1,9 @@
+import baseConfig from "@homarr/eslint-config/base";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: [],
+  },
+  ...baseConfig,
+];

packages/settings/index.ts

@@ -0,0 +1 @@
+export * from "./src/context";

packages/settings/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@homarr/settings",
+  "version": "0.1.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@homarr/prettier-config",
+  "dependencies": {
+    "@homarr/api": "workspace:^0.1.0",
+    "@homarr/db": "workspace:^0.1.0",
+    "@homarr/server-settings": "workspace:^0.1.0",
+    "@mantine/dates": "^7.16.2",
+    "next": "15.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "devDependencies": {
+    "@homarr/eslint-config": "workspace:^0.2.0",
+    "@homarr/prettier-config": "workspace:^0.1.0",
+    "@homarr/tsconfig": "workspace:^0.1.0",
+    "eslint": "^9.19.0",
+    "typescript": "^5.7.3"
+  }
+}

packages/settings/src/context.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext } from "react";
+import type { DayOfWeek } from "@mantine/dates";
+
+import type { RouterOutputs } from "@homarr/api";
+import type { User } from "@homarr/db/schema";
+import type { ServerSettings } from "@homarr/server-settings";
+
+type SettingsContextProps = Pick<
+  User,
+  | "firstDayOfWeek"
+  | "defaultSearchEngineId"
+  | "homeBoardId"
+  | "mobileHomeBoardId"
+  | "openSearchInNewTab"
+  | "pingIconsEnabled"
+>;
+
+interface PublicServerSettings {
+  search: Pick<ServerSettings["search"], "defaultSearchEngineId">;
+  board: Pick<ServerSettings["board"], "homeBoardId" | "mobileHomeBoardId">;
+}
+
+const SettingsContext = createContext<SettingsContextProps | null>(null);
+
+export const SettingsProvider = ({
+  user,
+  serverSettings,
+  children,
+}: PropsWithChildren<{ user: RouterOutputs["user"]["getById"] | null; serverSettings: PublicServerSettings }>) => {
+  return (
+    <SettingsContext.Provider
+      value={{
+        defaultSearchEngineId: user?.defaultSearchEngineId ?? serverSettings.search.defaultSearchEngineId,
+        openSearchInNewTab: user?.openSearchInNewTab ?? true,
+        firstDayOfWeek: (user?.firstDayOfWeek as DayOfWeek | undefined) ?? (1 as const),
+        homeBoardId: user?.homeBoardId ?? serverSettings.board.homeBoardId,
+        mobileHomeBoardId: user?.mobileHomeBoardId ?? serverSettings.board.mobileHomeBoardId,
+        pingIconsEnabled: user?.pingIconsEnabled ?? false,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export const useSettings = () => {
+  const context = useContext(SettingsContext);
+
+  if (!context) throw new Error("useSettingsContext must be used within a SettingsProvider");
+
+  return context;
+};

packages/settings/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@homarr/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}

packages/spotlight/package.json

@@ -30,6 +30,7 @@
     "@homarr/integrations": "workspace:^0.1.0",
     "@homarr/modals": "workspace:^0.1.0",
     "@homarr/modals-collection": "workspace:^0.1.0",
+    "@homarr/settings": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@mantine/core": "^7.16.2",

packages/spotlight/src/modes/external/search-engines-search-group.tsx

@@ -7,6 +7,7 @@ import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationKindsByCategory, getIntegrationName } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { RequestMediaModal } from "@homarr/modals-collection";
+import { useSettings } from "@homarr/settings";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { createChildrenOptions } from "../../lib/children";
@@ -39,6 +40,8 @@ export const useFromIntegrationSearchInteraction = (
   searchEngine: SearchEngine,
   searchResult: FromIntegrationSearchResult,
 ): inferSearchInteractionDefinition<"link" | "javaScript" | "children"> => {
+  const { openSearchInNewTab } = useSettings();
+
   if (searchEngine.type !== "fromIntegration") {
     throw new Error("Invalid search engine type");
   }
@@ -58,7 +61,7 @@ export const useFromIntegrationSearchInteraction = (
       return {
         type: "link",
         href: searchResult.link,
-        newTab: true,
+        newTab: openSearchInNewTab,
       };
     }
 
@@ -127,10 +130,11 @@ const mediaRequestsChildrenOptions = createChildrenOptions<MediaRequestChildrenP
           );
         },
         useInteraction({ result }) {
+          const { openSearchInNewTab } = useSettings();
           return {
             type: "link",
             href: result.link,
-            newTab: true,
+            newTab: openSearchInNewTab,
           };
         },
       },
@@ -166,6 +170,7 @@ export const searchEnginesChildrenOptions = createChildrenOptions<SearchEngine>(
         enabled: searchEngine.type === "fromIntegration" && searchEngine.integrationId !== null && query.length > 0,
       },
     );
+    const { openSearchInNewTab } = useSettings();
 
     if (searchEngine.type === "generic") {
       return [
@@ -184,6 +189,7 @@ export const searchEnginesChildrenOptions = createChildrenOptions<SearchEngine>(
           useInteraction: interaction.link(({ urlTemplate }, query) => ({
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             href: urlTemplate!.replace("%s", query),
+            newTab: openSearchInNewTab,
           })),
         },
       ];
@@ -258,11 +264,12 @@ export const searchEnginesSearchGroups = createGroup<SearchEngine>({
     setChildrenOptions(searchEnginesChildrenOptions(engine));
   },
   useInteraction: (searchEngine, query) => {
+    const { openSearchInNewTab } = useSettings();
     if (searchEngine.type === "generic" && searchEngine.urlTemplate) {
       return {
         type: "link" as const,
         href: searchEngine.urlTemplate.replace("%s", query),
-        newTab: true,
+        newTab: openSearchInNewTab,
       };
     }
 

packages/spotlight/src/modes/home/home-search-engine-group.tsx

@@ -6,6 +6,7 @@ import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import type { Session } from "@homarr/auth";
 import { useSession } from "@homarr/auth/client";
+import { useSettings } from "@homarr/settings";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
@@ -135,10 +136,12 @@ const createDefaultSearchEntries = (
         }),
         icon: defaultSearchEngine.iconUrl,
         useInteraction(query) {
+          const { openSearchInNewTab } = useSettings();
           return {
             type: "link",
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             href: defaultSearchEngine.urlTemplate!.replace("%s", query),
+            newTab: openSearchInNewTab,
           };
         },
       },

packages/translation/src/lang/en.json

@@ -151,6 +151,12 @@
       },
       "pingIconsEnabled": {
         "label": "Use icons for pings"
+      },
+      "defaultSearchEngine": {
+        "label": "Default search engine"
+      },
+      "openSearchInNewTab": {
+        "label": "Open search results in new tab"
       }
     },
     "error": {
@@ -210,13 +216,13 @@
           }
         }
       },
-      "changeDefaultSearchEngine": {
+      "changeSearchPreferences": {
         "notification": {
           "success": {
-            "message": "Default search engine changed successfully"
+            "message": "Search preferences changed successfully"
           },
           "error": {
-            "message": "Unable to change default search engine"
+            "message": "Unable to change search preferences"
           }
         }
       },
@@ -2281,7 +2287,7 @@
                   "mobile": "Mobile"
                 }
               },
-              "defaultSearchEngine": "Default search engine",
+              "search": "Search",
               "firstDayOfWeek": "First day of the week",
               "accessibility": "Accessibility"
             }

packages/validation/src/user.ts

@@ -110,8 +110,9 @@ const changeHomeBoardSchema = z.object({
   mobileHomeBoardId: z.string().nullable(),
 });
 
-const changeDefaultSearchEngineSchema = z.object({
-  defaultSearchEngineId: z.string().min(1),
+const changeSearchPreferencesSchema = z.object({
+  defaultSearchEngineId: z.string().min(1).nullable(),
+  openInNewTab: z.boolean(),
 });
 
 const changeColorSchemeSchema = z.object({
@@ -137,7 +138,7 @@ export const userSchemas = {
   editProfile: editProfileSchema,
   changePassword: changePasswordSchema,
   changeHomeBoards: changeHomeBoardSchema,
-  changeDefaultSearchEngine: changeDefaultSearchEngineSchema,
+  changeSearchPreferences: changeSearchPreferencesSchema,
   changePasswordApi: changePasswordApiSchema,
   changeColorScheme: changeColorSchemeSchema,
   firstDayOfWeek: firstDayOfWeekSchema,

packages/widgets/package.json

@@ -36,6 +36,7 @@
     "@homarr/modals": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
     "@homarr/redis": "workspace:^0.1.0",
+    "@homarr/settings": "workspace:^0.1.0",
     "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",

packages/widgets/src/app/ping/ping-dot.tsx

@@ -1,7 +1,7 @@
 import type { MantineColor } from "@mantine/core";
 import { Box, Tooltip } from "@mantine/core";
 
-import { clientApi } from "@homarr/api/client";
+import { useSettings } from "@homarr/settings";
 import type { TablerIcon } from "@homarr/ui";
 
 interface PingDotProps {
@@ -11,7 +11,7 @@ interface PingDotProps {
 }
 
 export const PingDot = ({ color, tooltip, ...props }: PingDotProps) => {
-  const [pingIconsEnabled] = clientApi.user.getPingIconsEnabledOrDefault.useSuspenseQuery();
+  const { pingIconsEnabled } = useSettings();
 
   return (
     <Box bottom="2.5cqmin" right="2.5cqmin" pos="absolute">

packages/widgets/src/calendar/component.tsx

@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import type { CalendarEvent } from "@homarr/integrations/types";
+import { useSettings } from "@homarr/settings";
 
 import type { WidgetComponentProps } from "../definition";
 import { CalendarDay } from "./calender-day";
@@ -58,7 +59,7 @@ interface CalendarBaseProps {
 const CalendarBase = ({ isEditMode, events, month, setMonth, options }: CalendarBaseProps) => {
   const params = useParams();
   const locale = params.locale as string;
-  const [firstDayOfWeek] = clientApi.user.getFirstDayOfWeekForUserOrDefault.useSuspenseQuery();
+  const { firstDayOfWeek } = useSettings();
 
   return (
     <Calendar