Merge branch 'dev' into improve-metadata

homarr-labs · Oct 16, 2024 · 33275bb · 33275bb
2 parents b0cff46 + cd77acd
commit 33275bb
Show file tree

Hide file tree

Showing 51 changed files with 330 additions and 244 deletions.
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
@@ -16,7 +16,7 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
   return (
     <DirectionProvider>
       <MantineProvider
-        defaultColorScheme="auto"
+        defaultColorScheme="dark"
         colorSchemeManager={manager}
         theme={createTheme({
           primaryColor: "red",
@@ -62,6 +62,7 @@ function useColorSchemeManager(): MantineColorSchemeManager {
     },
 
     set: (value) => {
+      if (value === "auto") return;
       try {
         if (session) {
           mutateColorScheme({ colorScheme: value });

diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
@@ -49,6 +49,7 @@ export const BoardProvider = ({
 
   useEffect(() => {
     setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.sections.length, setReadySections]);
 
   const markAsReady = useCallback((id: string) => {

diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -77,7 +77,15 @@ export default async function Layout(props: { children: React.ReactNode; params:
 
   return (
     // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
-    <html lang="en" dir={direction} data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
+    <html
+      lang="en"
+      dir={direction}
+      data-mantine-color-scheme={colorScheme}
+      style={{
+        backgroundColor: colorScheme === "dark" ? "#242424" : "#fff",
+      }}
+      suppressHydrationWarning
+    >
       <head>
         <Analytics />
         <SearchEngineOptimization />
@@ -93,5 +101,5 @@ export default async function Layout(props: { children: React.ReactNode; params:
 }
 
 const getColorScheme = () => {
-  return cookies().get("homarr-color-scheme")?.value ?? "light";
+  return cookies().get("homarr-color-scheme")?.value ?? "dark";
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
@@ -9,7 +9,7 @@ import { IconInfoCircle } from "@tabler/icons-react";
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
-import { getAllSecretKindOptions } from "@homarr/definitions";
+import { getAllSecretKindOptions, getIntegrationName } from "@homarr/definitions";
 import type { UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
@@ -32,7 +32,7 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
   const router = useRouter();
   const form = useZodForm(validation.integration.create.omit({ kind: true }), {
     initialValues: {
-      name: searchParams.name ?? "",
+      name: searchParams.name ?? getIntegrationName(searchParams.kind),
       url: searchParams.url ?? "",
       secrets: secretKinds[0].map((kind) => ({
         kind,
@@ -81,7 +81,7 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
   return (
     <form onSubmit={form.onSubmit((value) => void handleSubmitAsync(value))}>
       <Stack>
-        <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
+        <TextInput withAsterisk label={t("integration.field.name.label")} autoFocus {...form.getInputProps("name")} />
 
         <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
 

diff --git a/apps/nextjs/src/app/[locale]/manage/tools/api/components/api-keys.tsx b/apps/nextjs/src/app/[locale]/manage/tools/api/components/api-keys.tsx
@@ -47,7 +47,7 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
         ),
       },
     ],
-    [],
+    [t],
   );
 
   const table = useMantineReactTable({

diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx
@@ -61,7 +61,7 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
         id: user.id,
       });
     },
-    [user.id, mutate],
+    [isProviderCredentials, mutate, user.id],
   );
 
   return (

diff --git a/apps/nextjs/src/components/board/items/item-move-modal.tsx b/apps/nextjs/src/components/board/items/item-move-modal.tsx
@@ -8,7 +8,6 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { z } from "@homarr/validation";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useItemActions } from "./item-actions";
 
 interface InnerProps {
   gridStack: GridStack;
@@ -21,7 +20,6 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
   const t = useI18n();
   // Keep track of the maximum width based on the x offset
   const maxWidthRef = useRef(innerProps.columnCount - innerProps.item.xOffset);
-  const { moveAndResizeItem } = useItemActions();
   const form = useZodForm(
     z.object({
       xOffset: z
@@ -62,7 +60,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
       });
       actions.closeModal();
     },
-    [moveAndResizeItem],
+    [actions, innerProps.gridStack, innerProps.item.id],
   );
 
   return (

diff --git a/apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx b/apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx
@@ -39,7 +39,7 @@ export const GridStackItem = ({
     if (type !== "section") return;
     innerRef.current.gridstackNode.minW = minWidth;
     innerRef.current.gridstackNode.minH = minHeight;
-  }, [minWidth, minHeight, innerRef]);
+  }, [minWidth, minHeight, innerRef, type]);
 
   return (
     <Box

diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
@@ -215,6 +215,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     }
 
     // Only run this effect when the section items change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemIds.length, columnCount]);
 
   /**

diff --git a/apps/nextjs/src/components/user-avatar-menu.tsx b/apps/nextjs/src/components/user-avatar-menu.tsx
@@ -58,7 +58,7 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
         router.refresh();
       },
     });
-  }, [openModal, router]);
+  }, [logoutUrl, openModal, router]);
 
   return (
     <Menu width={300} withArrow withinPortal>

diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.3"
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].2",
   "engines": {
     "node": ">=20.18.0"
   },

diff --git a/packages/auth/callbacks.ts b/packages/auth/callbacks.ts
@@ -36,7 +36,7 @@ export const createSessionAsync = async (
       ...user,
       email: user.email ?? "",
       permissions: await getCurrentUserPermissionsAsync(db, user.id),
-      colorScheme: "auto",
+      colorScheme: "dark",
     },
   } as Session;
 };

diff --git a/packages/db/schema/mysql.ts b/packages/db/schema/mysql.ts
@@ -43,7 +43,7 @@ export const users = mysqlTable("user", {
   homeBoardId: varchar("homeBoardId", { length: 64 }).references((): AnyMySqlColumn => boards.id, {
     onDelete: "set null",
   }),
-  colorScheme: varchar("colorScheme", { length: 5 }).$type<ColorScheme>().default("auto").notNull(),
+  colorScheme: varchar("colorScheme", { length: 5 }).$type<ColorScheme>().default("dark").notNull(),
   firstDayOfWeek: tinyint("firstDayOfWeek").$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday
   pingIconsEnabled: boolean("pingIconsEnabled").default(false).notNull(),
 });

diff --git a/packages/db/schema/sqlite.ts b/packages/db/schema/sqlite.ts
@@ -44,7 +44,7 @@ export const users = sqliteTable("user", {
   homeBoardId: text("homeBoardId").references((): AnySQLiteColumn => boards.id, {
     onDelete: "set null",
   }),
-  colorScheme: text("colorScheme").$type<ColorScheme>().default("auto").notNull(),
+  colorScheme: text("colorScheme").$type<ColorScheme>().default("dark").notNull(),
   firstDayOfWeek: int("firstDayOfWeek").$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday
   pingIconsEnabled: int("pingIconsEnabled", { mode: "boolean" }).default(false).notNull(),
 });

diff --git a/packages/definitions/src/user.ts b/packages/definitions/src/user.ts
@@ -1,2 +1,2 @@
-export const colorSchemes = ["light", "dark", "auto"] as const;
+export const colorSchemes = ["light", "dark"] as const;
 export type ColorScheme = (typeof colorSchemes)[number];
diff --git a/packages/modals/src/confirm-modal.tsx b/packages/modals/src/confirm-modal.tsx
@@ -53,7 +53,7 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
         actions.closeModal();
       }
     },
-    [cancelProps?.onClick, onCancel, actions.closeModal],
+    [cancelProps, onCancel, closeOnCancel, actions],
   );
 
   const handleConfirm = useCallback(
@@ -73,7 +73,7 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
       }
       setLoading(false);
     },
-    [confirmProps?.onClick, onConfirm, actions.closeModal],
+    [confirmProps, onConfirm, closeOnConfirm, actions],
   );
 
   return (

diff --git a/packages/modals/src/index.tsx b/packages/modals/src/index.tsx
@@ -38,7 +38,7 @@ export const ModalProvider = ({ children }: PropsWithChildren) => {
     (id: string, canceled?: boolean) => {
       dispatch({ type: "CLOSE", modalId: id, canceled });
     },
-    [stateRef, dispatch],
+    [dispatch],
   );
 
   const openModalInner: ModalContextProps["openModalInner"] = useCallback(
@@ -63,10 +63,7 @@ export const ModalProvider = ({ children }: PropsWithChildren) => {
     [dispatch],
   );
 
-  const handleCloseModal = useCallback(
-    () => state.current && closeModal(state.current.id),
-    [closeModal, state.current?.id],
-  );
+  const handleCloseModal = useCallback(() => state.current && closeModal(state.current.id), [closeModal, state]);
 
   const activeModals = state.modals.filter((modal) => modal.id === state.current?.id || modal.props.keepMounted);
 

diff --git a/packages/spotlight/src/components/actions/items/children-action-item.tsx b/packages/spotlight/src/components/actions/items/children-action-item.tsx
@@ -24,7 +24,7 @@ export const ChildrenActionItem = ({ childrenOptions, action, query }: ChildrenA
 
   return (
     <Spotlight.Action renderRoot={renderRoot} onClick={onClick} className={classes.spotlightAction}>
-      <action.component {...childrenOptions.option} />
+      <action.Component {...childrenOptions.option} />
     </Spotlight.Action>
   );
 };
diff --git a/packages/spotlight/src/components/actions/items/group-action-item.tsx b/packages/spotlight/src/components/actions/items/group-action-item.tsx
@@ -48,7 +48,7 @@ export const SpotlightGroupActionItem = <TOption extends Record<string, unknown>
       closeSpotlightOnTrigger={interaction.type !== "mode" && interaction.type !== "children"}
       className={classes.spotlightAction}
     >
-      <group.component {...option} />
+      <group.Component {...option} />
     </Spotlight.Action>
   );
 };
diff --git a/packages/spotlight/src/components/spotlight.tsx b/packages/spotlight/src/components/spotlight.tsx
@@ -92,7 +92,7 @@ export const Spotlight = () => {
 
       {childrenOptions ? (
         <Group>
-          <childrenOptions.detailComponent options={childrenOptions.option as never} />
+          <childrenOptions.DetailComponent options={childrenOptions.option as never} />
         </Group>
       ) : null}
 

diff --git a/packages/spotlight/src/lib/children.ts b/packages/spotlight/src/lib/children.ts
@@ -3,13 +3,13 @@ import type { ReactNode } from "react";
 import type { inferSearchInteractionDefinition } from "./interaction";
 
 export interface CreateChildrenOptionsProps<TParentOptions extends Record<string, unknown>> {
-  detailComponent: ({ options }: { options: TParentOptions }) => ReactNode;
+  DetailComponent: ({ options }: { options: TParentOptions }) => ReactNode;
   useActions: (options: TParentOptions, query: string) => ChildrenAction<TParentOptions>[];
 }
 
 export interface ChildrenAction<TParentOptions extends Record<string, unknown>> {
   key: string;
-  component: (option: TParentOptions) => JSX.Element;
+  Component: (option: TParentOptions) => JSX.Element;
   useInteraction: (option: TParentOptions, query: string) => inferSearchInteractionDefinition<"link" | "javaScript">;
   hide?: boolean | ((option: TParentOptions) => boolean);
 }

diff --git a/packages/spotlight/src/lib/group.ts b/packages/spotlight/src/lib/group.ts
@@ -8,7 +8,7 @@ type CommonSearchGroup<TOption extends Record<string, unknown>, TOptionProps ext
   // key path is used to define the path to a unique key in the option object
   keyPath: keyof TOption;
   title: stringOrTranslation;
-  component: (option: TOption) => JSX.Element;
+  Component: (option: TOption) => JSX.Element;
   useInteraction: (option: TOption, query: string) => inferSearchInteractionDefinition<SearchInteraction>;
   onKeyDown?: (
     event: KeyboardEvent,

diff --git a/packages/spotlight/src/lib/interaction.ts b/packages/spotlight/src/lib/interaction.ts
@@ -16,7 +16,7 @@ const searchInteractions = [
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     useActions: CreateChildrenOptionsProps<any>["useActions"];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    detailComponent: CreateChildrenOptionsProps<any>["detailComponent"];
+    DetailComponent: CreateChildrenOptionsProps<any>["DetailComponent"];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     option: any;
   }>(),

diff --git a/packages/spotlight/src/modes/app-integration-board/apps-search-group.tsx b/packages/spotlight/src/modes/app-integration-board/apps-search-group.tsx
@@ -16,7 +16,7 @@ const appChildrenOptions = createChildrenOptions<App>({
   useActions: () => [
     {
       key: "open",
-      component: () => {
+      Component: () => {
         const t = useI18n();
 
         return (
@@ -34,7 +34,7 @@ const appChildrenOptions = createChildrenOptions<App>({
     },
     {
       key: "edit",
-      component: () => {
+      Component: () => {
         const t = useI18n();
 
         return (
@@ -47,7 +47,7 @@ const appChildrenOptions = createChildrenOptions<App>({
       useInteraction: interaction.link(({ id }) => ({ href: `/manage/apps/edit/${id}` })),
     },
   ],
-  detailComponent: ({ options }) => {
+  DetailComponent: ({ options }) => {
     const t = useI18n();
 
     return (
@@ -75,7 +75,7 @@ const appChildrenOptions = createChildrenOptions<App>({
 export const appsSearchGroup = createGroup<App>({
   keyPath: "id",
   title: (t) => t("search.mode.appIntegrationBoard.group.app.title"),
-  component: (app) => (
+  Component: (app) => (
     <Group px="md" py="sm">
       <Avatar
         size="sm"

diff --git a/packages/spotlight/src/modes/app-integration-board/boards-search-group.tsx b/packages/spotlight/src/modes/app-integration-board/boards-search-group.tsx
@@ -23,7 +23,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
     const actions: (ChildrenAction<Board> & { hidden?: boolean })[] = [
       {
         key: "open",
-        component: () => {
+        Component: () => {
           const t = useI18n();
 
           return (
@@ -37,7 +37,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
       },
       {
         key: "homeBoard",
-        component: () => {
+        Component: () => {
           const t = useI18n();
 
           return (
@@ -61,7 +61,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
       },
       {
         key: "settings",
-        component: () => {
+        Component: () => {
           const t = useI18n();
 
           return (
@@ -78,7 +78,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
 
     return actions;
   },
-  detailComponent: ({ options: board }) => {
+  DetailComponent: ({ options: board }) => {
     const t = useI18n();
 
     return (
@@ -102,7 +102,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
 export const boardsSearchGroup = createGroup<Board>({
   keyPath: "id",
   title: "Boards",
-  component: (board) => (
+  Component: (board) => (
     <Group px="md" py="sm">
       {board.logoImageUrl ? (
         <img src={board.logoImageUrl} alt={board.name} width={24} height={24} />

diff --git a/packages/spotlight/src/modes/app-integration-board/integrations-search-group.tsx b/packages/spotlight/src/modes/app-integration-board/integrations-search-group.tsx
@@ -10,7 +10,7 @@ import { interaction } from "../../lib/interaction";
 export const integrationsSearchGroup = createGroup<{ id: string; kind: IntegrationKind; name: string }>({
   keyPath: "id",
   title: (t) => t("search.mode.appIntegrationBoard.group.integration.title"),
-  component: (integration) => (
+  Component: (integration) => (
     <Group px="md" py="sm">
       <IntegrationAvatar size="sm" kind={integration.kind} />
 

diff --git a/packages/spotlight/src/modes/command/children/language.tsx b/packages/spotlight/src/modes/command/children/language.tsx
@@ -30,7 +30,7 @@ export const languageChildrenOptions = createChildrenOptions<Record<string, unkn
       )
       .map(({ localeKey, attributes }) => ({
         key: localeKey,
-        component() {
+        Component() {
           return (
             <Group mx="md" my="sm" wrap="nowrap" justify="space-between" w="100%">
               <Group wrap="nowrap">
@@ -53,7 +53,7 @@ export const languageChildrenOptions = createChildrenOptions<Record<string, unkn
         },
       }));
   },
-  detailComponent: () => {
+  DetailComponent: () => {
     const t = useI18n();
 
     return (
-Original file line number
+Diff line change
@@ Expand Up @@
             ),
           },
         ],
-        [],
+        [t],
       );
       const table = useMantineReactTable({
@@ Expand Down @@