Compare commits
13
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6143e25686 | ||
|
|
384d83ef76 | ||
|
|
998161b1d9 | ||
|
|
a6e060265a | ||
|
|
d8b278d716 | ||
|
|
813a91cb01 | ||
|
|
990452a877 | ||
|
|
0165e2e415 | ||
|
|
514c6edc8f | ||
|
|
fdcfb775fa | ||
|
|
0843ccda99 | ||
|
|
2b6eb88a53 | ||
|
|
e65c3cd801 |
No files matched your search
@@ -33,7 +33,6 @@ body:
|
||||
options:
|
||||
# The below comment is used to insert a new version with on-release.yml
|
||||
#NEXT_VERSION#
|
||||
- 1.45.0
|
||||
- 1.44.0
|
||||
- 1.43.1
|
||||
- 1.43.0
|
||||
|
||||
@@ -1,22 +1,3 @@
|
||||
## [1.45.1](https://github.com/homarr-labs/homarr/compare/v1.45.0...v1.45.1) (2025-12-03)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **deps:** update dependency chroma-js to ^3.1.4 ([#4570](https://github.com/homarr-labs/homarr/issues/4570)) ([d6fc46d](https://github.com/homarr-labs/homarr/commit/d6fc46df3b5e2dd79ff6f9a3dd3a3e2050a0eeef))
|
||||
* **deps:** update dependency chroma-js to ^3.2.0 ([#4585](https://github.com/homarr-labs/homarr/issues/4585)) ([b2c46d3](https://github.com/homarr-labs/homarr/commit/b2c46d33d6cc769e89e208fd29d3a1d143cf74c7))
|
||||
* **deps:** update dependency isomorphic-dompurify to ^2.33.0 ([#4581](https://github.com/homarr-labs/homarr/issues/4581)) ([ca01a31](https://github.com/homarr-labs/homarr/commit/ca01a31fe5cbce53eb0e6bd1a943320c092161ef))
|
||||
* **deps:** update dependency next-intl to v4.5.6 ([#4571](https://github.com/homarr-labs/homarr/issues/4571)) ([3062dda](https://github.com/homarr-labs/homarr/commit/3062ddafbe0bc1dbac9259af4036f0fa32d85237))
|
||||
* **deps:** update dependency sass to ^1.94.2 ([#4572](https://github.com/homarr-labs/homarr/issues/4572)) ([7a8c50f](https://github.com/homarr-labs/homarr/commit/7a8c50fa4c5224dd74af3c17f56e2e5b8d6a4f43))
|
||||
* **deps:** update dependency superjson to v2.2.6 ([#4573](https://github.com/homarr-labs/homarr/issues/4573)) ([deb5e9d](https://github.com/homarr-labs/homarr/commit/deb5e9d96092069e296ba473eaad58367b516f85))
|
||||
* **deps:** update dependency swagger-ui-react to ^5.30.3 ([#4574](https://github.com/homarr-labs/homarr/issues/4574)) ([d2c1dc3](https://github.com/homarr-labs/homarr/commit/d2c1dc3cc1dd72fc9fc8ae9613467fa0b0b8d75a))
|
||||
* **deps:** update dependency zod to ^4.1.13 ([#4575](https://github.com/homarr-labs/homarr/issues/4575)) ([879a77f](https://github.com/homarr-labs/homarr/commit/879a77ff2a81b0d0a17d1487eaf6d8539a955301))
|
||||
* **deps:** update mantine monorepo to ^8.3.9 ([#4576](https://github.com/homarr-labs/homarr/issues/4576)) ([d5d59dd](https://github.com/homarr-labs/homarr/commit/d5d59dd2561f0be2f4f4c689f33c6a9a7840a21c))
|
||||
* **deps:** update nextjs monorepo to v16.0.5 ([#4577](https://github.com/homarr-labs/homarr/issues/4577)) ([16f12d9](https://github.com/homarr-labs/homarr/commit/16f12d98e6cdae50fe2989db0911cb1350fcb93b))
|
||||
* **deps:** update tanstack-query monorepo ([#4578](https://github.com/homarr-labs/homarr/issues/4578)) ([59bcbc8](https://github.com/homarr-labs/homarr/commit/59bcbc8b4de4a0a8cee8adf6336c7c10477c766a))
|
||||
* **deps:** update testcontainers-node monorepo to ^11.9.0 ([#4583](https://github.com/homarr-labs/homarr/issues/4583)) ([10bdd74](https://github.com/homarr-labs/homarr/commit/10bdd74b2b287cb08ec0926147ac0e7fcfd492bb))
|
||||
* **deps:** update trpc monorepo to ^11.7.2 ([#4579](https://github.com/homarr-labs/homarr/issues/4579)) ([3453482](https://github.com/homarr-labs/homarr/commit/3453482ed43644025c39dee8e20549e1beb86be0))
|
||||
* **security:** rce vulnerability in nextjs ([b40deba](https://github.com/homarr-labs/homarr/commit/b40deba9ff1a3d629b6027565378d9f3ad2f1980))
|
||||
|
||||
## [1.45.0](https://github.com/homarr-labs/homarr/compare/v1.44.0...v1.45.0) (2025-11-28)
|
||||
|
||||
### Features
|
||||
|
||||
+20
-20
@@ -50,46 +50,46 @@
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@homarr/widgets": "workspace:^0.1.0",
|
||||
"@mantine/colors-generator": "^8.3.9",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/dropzone": "^8.3.9",
|
||||
"@mantine/hooks": "^8.3.9",
|
||||
"@mantine/modals": "^8.3.9",
|
||||
"@mantine/tiptap": "^8.3.9",
|
||||
"@mantine/colors-generator": "^8.3.8",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@mantine/dropzone": "^8.3.8",
|
||||
"@mantine/hooks": "^8.3.8",
|
||||
"@mantine/modals": "^8.3.8",
|
||||
"@mantine/tiptap": "^8.3.8",
|
||||
"@million/lint": "1.0.14",
|
||||
"@tabler/icons-react": "^3.35.0",
|
||||
"@tanstack/react-query": "^5.90.11",
|
||||
"@tanstack/react-query-devtools": "^5.91.1",
|
||||
"@tanstack/react-query": "^5.90.10",
|
||||
"@tanstack/react-query-devtools": "^5.90.2",
|
||||
"@tanstack/react-query-next-experimental": "^5.91.0",
|
||||
"@trpc/client": "^11.7.2",
|
||||
"@trpc/next": "^11.7.2",
|
||||
"@trpc/react-query": "^11.7.2",
|
||||
"@trpc/server": "^11.7.2",
|
||||
"@trpc/client": "^11.7.1",
|
||||
"@trpc/next": "^11.7.1",
|
||||
"@trpc/react-query": "^11.7.1",
|
||||
"@trpc/server": "^11.7.1",
|
||||
"@xterm/addon-canvas": "^0.7.0",
|
||||
"@xterm/addon-fit": "0.10.0",
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"babel-plugin-react-compiler": "^1.0.0",
|
||||
"chroma-js": "^3.2.0",
|
||||
"chroma-js": "^3.1.2",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"dotenv": "^17.2.3",
|
||||
"flag-icons": "^7.5.0",
|
||||
"glob": "^12.0.0",
|
||||
"isomorphic-dompurify": "^2.33.0",
|
||||
"isomorphic-dompurify": "^2.32.0",
|
||||
"jotai": "^2.15.1",
|
||||
"mantine-react-table": "2.0.0-beta.9",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"postcss-preset-mantine": "^1.18.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-error-boundary": "^6.0.0",
|
||||
"react-simple-code-editor": "^0.14.1",
|
||||
"sass": "^1.94.2",
|
||||
"superjson": "2.2.6",
|
||||
"swagger-ui-react": "^5.30.3",
|
||||
"sass": "^1.94.1",
|
||||
"superjson": "2.2.5",
|
||||
"swagger-ui-react": "^5.30.2",
|
||||
"use-deep-compare-effect": "^1.8.1",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
@@ -98,7 +98,7 @@
|
||||
"@types/chroma-js": "3.1.2",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/prismjs": "^1.26.5",
|
||||
"@types/react": "19.2.7",
|
||||
"@types/react": "19.2.6",
|
||||
"@types/react-dom": "19.2.3",
|
||||
"@types/swagger-ui-react": "^5.18.0",
|
||||
"concurrently": "^9.2.1",
|
||||
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
IconSettings,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { applyAutoLayoutToBoard, clientApi } from "@homarr/api/client";
|
||||
import { useSession } from "@homarr/auth/client";
|
||||
import { useRequiredBoard } from "@homarr/boards/context";
|
||||
import { useEditMode } from "@homarr/boards/edit-mode";
|
||||
@@ -165,7 +165,7 @@ const EditModeMenu = () => {
|
||||
});
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
if (isEditMode) return saveBoard(board);
|
||||
if (isEditMode) return saveBoard(applyAutoLayoutToBoard(board));
|
||||
open();
|
||||
}, [board, isEditMode, saveBoard, open]);
|
||||
|
||||
|
||||
@@ -1,11 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { Button, Fieldset, Grid, Group, Input, NumberInput, Slider, Stack, Text, TextInput } from "@mantine/core";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
ChipGroup,
|
||||
Fieldset,
|
||||
Grid,
|
||||
Group,
|
||||
Input,
|
||||
InputWrapper,
|
||||
NumberInput,
|
||||
RadioGroup,
|
||||
SimpleGrid,
|
||||
Slider,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { createId } from "@homarr/common";
|
||||
import { boardLayoutModes } from "@homarr/definitions";
|
||||
import { useZodForm } from "@homarr/form";
|
||||
import { useI18n } from "@homarr/translation/client";
|
||||
import { CustomRadioCard } from "@homarr/ui";
|
||||
import { boardSaveLayoutsSchema } from "@homarr/validation/board";
|
||||
|
||||
import type { Board } from "../../_types";
|
||||
@@ -25,6 +45,8 @@ export const LayoutSettingsContent = ({ board }: Props) => {
|
||||
const form = useZodForm(boardSaveLayoutsSchema.omit({ id: true }).required(), {
|
||||
initialValues: {
|
||||
layouts: board.layouts,
|
||||
layoutMode: board.layoutMode,
|
||||
baseLayoutId: board.baseLayoutId,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -38,6 +60,53 @@ export const LayoutSettingsContent = ({ board }: Props) => {
|
||||
})}
|
||||
>
|
||||
<Stack>
|
||||
<RadioGroup {...form.getInputProps("layoutMode")} label={t("board.field.layoutMode.label")}>
|
||||
<SimpleGrid cols={{ sm: 2, xs: 1 }} spacing="md">
|
||||
{boardLayoutModes.values.map((layoutMode) => (
|
||||
<Box w="100%" key={layoutMode} pos="relative">
|
||||
<CustomRadioCard
|
||||
value={layoutMode}
|
||||
label={t(`board.field.layoutMode.option.${layoutMode}.label`)}
|
||||
description={t(`board.field.layoutMode.option.${layoutMode}.description`)}
|
||||
/>
|
||||
{layoutMode === boardLayoutModes.defaultValue && (
|
||||
<Badge pos="absolute" top="8px" right="8px" variant="light" size="sm">
|
||||
{t("common.select.badge.recommended")}
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</RadioGroup>
|
||||
|
||||
{form.values.layoutMode === "auto" && (
|
||||
<InputWrapper label={t("board.field.baseLayout.label")} description={t("board.field.baseLayout.description")}>
|
||||
<ChipGroup {...form.getInputProps("baseLayoutId")} multiple={false}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
lg: Math.min(6, form.values.layouts.length),
|
||||
sm: Math.min(4, form.values.layouts.length),
|
||||
xs: Math.min(2, form.values.layouts.length),
|
||||
}}
|
||||
spacing="md"
|
||||
mt="sm"
|
||||
>
|
||||
{form.values.layouts.map((layout) => (
|
||||
<Chip
|
||||
key={layout.id}
|
||||
value={layout.id}
|
||||
w="100%"
|
||||
size="sm"
|
||||
styles={{ label: { width: "100%", justifyContent: "center" } }}
|
||||
>
|
||||
{layout.name}
|
||||
</Chip>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</ChipGroup>
|
||||
</InputWrapper>
|
||||
)}
|
||||
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" align="center">
|
||||
<Text fw={500}>{t("board.setting.section.layout.responsive.title")}</Text>
|
||||
@@ -82,18 +151,21 @@ export const LayoutSettingsContent = ({ board }: Props) => {
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{form.values.layouts.length >= 2 && (
|
||||
{form.values.layouts.length >= 2 && form.values.baseLayoutId !== layout.id && (
|
||||
<Group justify="end">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => {
|
||||
form.setValues((previous) =>
|
||||
previous.layouts !== undefined && previous.layouts.length >= 2
|
||||
? {
|
||||
layouts: form.values.layouts.filter((filteredLayout) => filteredLayout.id !== layout.id),
|
||||
}
|
||||
: previous,
|
||||
);
|
||||
form.setValues((previous) => {
|
||||
if (!previous.layouts) return previous;
|
||||
if (previous.layouts.length < 2) return previous;
|
||||
if (previous.baseLayoutId === layout.id) return previous;
|
||||
|
||||
return {
|
||||
...previous,
|
||||
layouts: previous.layouts.filter((filteredLayout) => filteredLayout.id !== layout.id),
|
||||
};
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("common.action.remove")}
|
||||
|
||||
@@ -10,6 +10,7 @@ export class BoardMockBuilder {
|
||||
private readonly board: Board;
|
||||
|
||||
constructor(board?: Partial<Omit<Board, "groupPermissions" | "userPermissions" | "sections" | "items" | "layouts">>) {
|
||||
const baseLayoutId = createId();
|
||||
this.board = {
|
||||
id: createId(),
|
||||
backgroundImageRepeat: "no-repeat",
|
||||
@@ -41,12 +42,14 @@ export class BoardMockBuilder {
|
||||
items: [],
|
||||
layouts: [
|
||||
{
|
||||
id: createId(),
|
||||
id: baseLayoutId,
|
||||
name: "Base",
|
||||
columnCount: 12,
|
||||
breakpoint: 0,
|
||||
},
|
||||
],
|
||||
baseLayoutId,
|
||||
layoutMode: "auto",
|
||||
...board,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
"dayjs": "^1.11.19",
|
||||
"dotenv": "^17.2.3",
|
||||
"fastify": "^5.6.2",
|
||||
"superjson": "2.2.6",
|
||||
"superjson": "2.2.5",
|
||||
"undici": "7.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
+10
-10
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "homarr",
|
||||
"version": "1.45.1",
|
||||
"version": "1.45.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env CI=true turbo build",
|
||||
@@ -42,27 +42,27 @@
|
||||
"@semantic-release/github": "^12.0.2",
|
||||
"@semantic-release/npm": "^13.1.2",
|
||||
"@semantic-release/release-notes-generator": "^14.1.0",
|
||||
"@testcontainers/redis": "^11.9.0",
|
||||
"@testcontainers/redis": "^11.8.1",
|
||||
"@turbo/gen": "^2.6.1",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"@vitest/coverage-v8": "^4.0.14",
|
||||
"@vitest/ui": "^4.0.14",
|
||||
"@vitest/coverage-v8": "^4.0.10",
|
||||
"@vitest/ui": "^4.0.10",
|
||||
"conventional-changelog-conventionalcommits": "^9.1.0",
|
||||
"cross-env": "^10.1.0",
|
||||
"jsdom": "^27.2.0",
|
||||
"json5": "^2.2.3",
|
||||
"prettier": "^3.6.2",
|
||||
"semantic-release": "^25.0.2",
|
||||
"testcontainers": "^11.9.0",
|
||||
"testcontainers": "^11.8.1",
|
||||
"turbo": "^2.6.1",
|
||||
"typescript": "^5.9.3",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^4.0.14"
|
||||
"vitest": "^4.0.10"
|
||||
},
|
||||
"packageManager": "pnpm@10.24.0",
|
||||
"packageManager": "pnpm@10.22.0",
|
||||
"engines": {
|
||||
"node": ">=24.11.1",
|
||||
"pnpm": ">=10.24.0"
|
||||
"pnpm": ">=10.22.0"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
@@ -84,7 +84,7 @@
|
||||
"brace-expansion@>=1.0.0 <=1.1.11": ">=4.0.1",
|
||||
"esbuild@<=0.24.2": ">=0.27.0",
|
||||
"form-data@>=4.0.0 <4.0.4": ">=4.0.5",
|
||||
"hono@<4.6.5": ">=4.10.7",
|
||||
"hono@<4.6.5": ">=4.10.6",
|
||||
"linkifyjs@<4.3.2": ">=4.3.2",
|
||||
"nanoid@>=4.0.0 <5.0.9": ">=5.1.6",
|
||||
"prismjs@<1.30.0": ">=1.30.0",
|
||||
@@ -95,7 +95,7 @@
|
||||
"tar-fs@>=3.0.0 <3.0.9": ">=3.1.1",
|
||||
"tar-fs@>=2.0.0 <2.1.3": ">=3.1.1",
|
||||
"tmp@<=0.2.3": ">=0.2.5",
|
||||
"vite@>=5.0.0 <=5.4.18": ">=7.2.4"
|
||||
"vite@>=5.0.0 <=5.4.18": ">=7.2.2"
|
||||
},
|
||||
"patchedDependencies": {
|
||||
"@types/node-unifi": "patches/@types__node-unifi.patch",
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
"@homarr/log": "workspace:^0.1.0",
|
||||
"@homarr/server-settings": "workspace:^0.1.0",
|
||||
"@umami/node": "^0.4.0",
|
||||
"superjson": "2.2.6"
|
||||
"superjson": "2.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -43,18 +43,18 @@
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@kubernetes/client-node": "^1.4.0",
|
||||
"@tanstack/react-query": "^5.90.11",
|
||||
"@trpc/client": "^11.7.2",
|
||||
"@trpc/react-query": "^11.7.2",
|
||||
"@trpc/server": "^11.7.2",
|
||||
"@trpc/tanstack-react-query": "^11.7.2",
|
||||
"@tanstack/react-query": "^5.90.10",
|
||||
"@trpc/client": "^11.7.1",
|
||||
"@trpc/react-query": "^11.7.1",
|
||||
"@trpc/server": "^11.7.1",
|
||||
"@trpc/tanstack-react-query": "^11.7.1",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"superjson": "2.2.6",
|
||||
"superjson": "2.2.5",
|
||||
"trpc-to-openapi": "^3.1.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -17,3 +17,5 @@ export const fetchApi = createTRPCClient<AppRouter>({
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
export { applyAutoLayoutToBoard } from "./router/board/board-layout";
|
||||
@@ -5,7 +5,7 @@ import { z } from "zod/v4";
|
||||
import { constructBoardPermissions } from "@homarr/auth/shared";
|
||||
import { createId } from "@homarr/common";
|
||||
import type { DeviceType } from "@homarr/common/server";
|
||||
import type { Database, InferInsertModel, InferSelectModel, SQL } from "@homarr/db";
|
||||
import type { Database, InferInsertModel, InferSelectModel } from "@homarr/db";
|
||||
import { and, asc, eq, handleTransactionsAsync, inArray, isNull, like, not, or, sql } from "@homarr/db";
|
||||
import { createDbInsertCollectionWithoutTransaction } from "@homarr/db/collection";
|
||||
import { getServerSettingByKeyAsync } from "@homarr/db/queries";
|
||||
@@ -27,13 +27,11 @@ import {
|
||||
sections,
|
||||
users,
|
||||
} from "@homarr/db/schema";
|
||||
import type { WidgetKind } from "@homarr/definitions";
|
||||
import {
|
||||
emptySuperJSON,
|
||||
everyoneGroup,
|
||||
getPermissionsWithChildren,
|
||||
getPermissionsWithParents,
|
||||
widgetKinds,
|
||||
} from "@homarr/definitions";
|
||||
import { importOldmarrAsync } from "@homarr/old-import";
|
||||
import { importJsonFileSchema } from "@homarr/old-import/shared";
|
||||
@@ -50,13 +48,11 @@ import {
|
||||
boardSaveSchema,
|
||||
} from "@homarr/validation/board";
|
||||
import { byIdSchema } from "@homarr/validation/common";
|
||||
import { zodUnionFromArray } from "@homarr/validation/enums";
|
||||
import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
|
||||
import { sectionSchema, sharedItemSchema } from "@homarr/validation/shared";
|
||||
|
||||
import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../trpc";
|
||||
import { throwIfActionForbiddenAsync } from "./board/board-access";
|
||||
import { generateResponsiveGridFor } from "./board/grid-algorithm";
|
||||
import { applyAutoLayoutToBoard, getUpdatedBoardLayout } from "./board/board-layout";
|
||||
import { getFullBoardWithWhereAsync } from "./board/full-board-query";
|
||||
|
||||
export const boardRouter = createTRPCRouter({
|
||||
exists: permissionRequiredProcedure
|
||||
@@ -279,6 +275,7 @@ export const boardRouter = createTRPCRouter({
|
||||
name: input.name,
|
||||
isPublic: input.isPublic,
|
||||
creatorId: ctx.session.user.id,
|
||||
layoutMode: input.layoutMode,
|
||||
});
|
||||
createBoardCollection.sections.push({
|
||||
id: createId(),
|
||||
@@ -287,8 +284,9 @@ export const boardRouter = createTRPCRouter({
|
||||
yOffset: 0,
|
||||
boardId,
|
||||
});
|
||||
const baseLayoutId = createId();
|
||||
createBoardCollection.layouts.push({
|
||||
id: createId(),
|
||||
id: baseLayoutId,
|
||||
name: "Base",
|
||||
columnCount: input.columnCount,
|
||||
breakpoint: 0,
|
||||
@@ -296,6 +294,10 @@ export const boardRouter = createTRPCRouter({
|
||||
});
|
||||
|
||||
await createBoardCollection.insertAllAsync(ctx.db);
|
||||
// Define the base layout (only for automatic layout mode)
|
||||
if (input.layoutMode === "auto") {
|
||||
await ctx.db.update(boards).set({ baseLayoutId }).where(eq(boards.id, boardId));
|
||||
}
|
||||
|
||||
if (!user?.homeBoardId) {
|
||||
await ctx.db.update(users).set({ homeBoardId: boardId }).where(eq(users.id, ctx.session.user.id));
|
||||
@@ -582,13 +584,15 @@ export const boardRouter = createTRPCRouter({
|
||||
|
||||
await throwIfActionForbiddenAsync(ctx, boardWhere, "view");
|
||||
|
||||
return await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
|
||||
const board = await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
|
||||
return applyAutoLayoutToBoard(board);
|
||||
}),
|
||||
getBoardByName: publicProcedure.input(boardByNameSchema).query(async ({ input, ctx }) => {
|
||||
const boardWhere = eq(sql`UPPER(${boards.name})`, input.name.toUpperCase());
|
||||
await throwIfActionForbiddenAsync(ctx, boardWhere, "view");
|
||||
|
||||
return await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
|
||||
const board = await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
|
||||
return applyAutoLayoutToBoard(board);
|
||||
}),
|
||||
saveLayouts: protectedProcedure.input(boardSaveLayoutsSchema).mutation(async ({ ctx, input }) => {
|
||||
await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "modify");
|
||||
@@ -596,13 +600,32 @@ export const boardRouter = createTRPCRouter({
|
||||
const board = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
|
||||
|
||||
const addedLayouts = filterAddedItems(input.layouts, board.layouts);
|
||||
const removedLayouts = filterRemovedItems(input.layouts, board.layouts);
|
||||
|
||||
if (input.layoutMode === "auto" && input.baseLayoutId === null) {
|
||||
throw new TRPCError({
|
||||
code: "BAD_REQUEST",
|
||||
message: "Base layout must be set when using automatic layout mode",
|
||||
});
|
||||
}
|
||||
|
||||
if (removedLayouts.some((layout) => layout.id === input.baseLayoutId)) {
|
||||
throw new TRPCError({
|
||||
code: "BAD_REQUEST",
|
||||
message: "Cannot remove base layout",
|
||||
});
|
||||
}
|
||||
|
||||
const layoutsToInsert: InferInsertModel<typeof layouts>[] = [];
|
||||
const itemSectionLayoutsToInsert: InferInsertModel<typeof itemLayouts>[] = [];
|
||||
const sectionLayoutsToInsert: InferInsertModel<typeof sectionLayouts>[] = [];
|
||||
|
||||
let baseLayoutId = input.baseLayoutId;
|
||||
for (const addedLayout of addedLayouts) {
|
||||
const layoutId = createId();
|
||||
if (addedLayout.id === input.baseLayoutId) {
|
||||
baseLayoutId = layoutId;
|
||||
}
|
||||
|
||||
layoutsToInsert.push({
|
||||
id: layoutId,
|
||||
@@ -709,11 +732,18 @@ export const boardRouter = createTRPCRouter({
|
||||
.where(eq(layouts.id, updatedLayout.id));
|
||||
}
|
||||
|
||||
const removedLayouts = filterRemovedItems(input.layouts, board.layouts);
|
||||
const removedLayoutIds = removedLayouts.map((layout) => layout.id);
|
||||
if (removedLayoutIds.length > 0) {
|
||||
await ctx.db.delete(layouts).where(inArray(layouts.id, removedLayoutIds));
|
||||
}
|
||||
|
||||
await ctx.db
|
||||
.update(boards)
|
||||
.set({
|
||||
baseLayoutId,
|
||||
layoutMode: input.layoutMode,
|
||||
})
|
||||
.where(eq(boards.id, input.id));
|
||||
}),
|
||||
savePartialBoardSettings: protectedProcedure
|
||||
.input(boardSavePartialSettingsSchema.and(z.object({ id: z.string() })))
|
||||
@@ -1408,244 +1438,6 @@ const noBoardWithSimilarNameAsync = async (db: Database, name: string, ignoredId
|
||||
}
|
||||
};
|
||||
|
||||
const getUpdatedBoardLayout = (
|
||||
board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>,
|
||||
options: {
|
||||
previous: {
|
||||
layoutId: string;
|
||||
columnCount: number;
|
||||
};
|
||||
current: {
|
||||
layoutId: string;
|
||||
columnCount: number;
|
||||
};
|
||||
},
|
||||
) => {
|
||||
const itemSectionLayoutsCollection: InferInsertModel<typeof itemLayouts>[] = [];
|
||||
const sectionLayoutsCollection: InferInsertModel<typeof sectionLayouts>[] = [];
|
||||
|
||||
const elements = getElementsForLayout(board, options.previous.layoutId);
|
||||
const rootSections = board.sections.filter((section) => section.kind !== "dynamic");
|
||||
|
||||
for (const rootSection of rootSections) {
|
||||
const result = generateResponsiveGridFor({
|
||||
items: elements,
|
||||
previousWidth: options.previous.columnCount,
|
||||
width: options.current.columnCount,
|
||||
sectionId: rootSection.id,
|
||||
});
|
||||
|
||||
itemSectionLayoutsCollection.push(
|
||||
...board.items
|
||||
.map((item): InferInsertModel<typeof itemLayouts> | null => {
|
||||
const currentElement = result.items.find((element) => element.type === "item" && element.id === item.id);
|
||||
|
||||
if (!currentElement) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
itemId: item.id,
|
||||
layoutId: options.current.layoutId,
|
||||
sectionId: currentElement.sectionId,
|
||||
height: currentElement.height,
|
||||
width: currentElement.width,
|
||||
xOffset: currentElement.xOffset,
|
||||
yOffset: currentElement.yOffset,
|
||||
};
|
||||
})
|
||||
.filter((item) => item !== null),
|
||||
);
|
||||
|
||||
sectionLayoutsCollection.push(
|
||||
...board.sections
|
||||
.filter((section) => section.kind === "dynamic")
|
||||
.map((section): InferInsertModel<typeof sectionLayouts> | null => {
|
||||
const currentElement = result.items.find(
|
||||
(element) => element.type === "section" && element.id === section.id,
|
||||
);
|
||||
|
||||
if (!currentElement) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
layoutId: options.current.layoutId,
|
||||
sectionId: section.id,
|
||||
parentSectionId: currentElement.sectionId,
|
||||
height: currentElement.height,
|
||||
width: currentElement.width,
|
||||
xOffset: currentElement.xOffset,
|
||||
yOffset: currentElement.yOffset,
|
||||
};
|
||||
})
|
||||
.filter((section) => section !== null),
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
itemSectionLayouts: itemSectionLayoutsCollection,
|
||||
sectionLayouts: sectionLayoutsCollection,
|
||||
};
|
||||
};
|
||||
|
||||
const getElementsForLayout = (board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>, layoutId: string) => {
|
||||
const sectionElements = board.sections
|
||||
.filter((section) => section.kind === "dynamic")
|
||||
.map((section) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const clonedLayout = section.layouts.find((sectionLayout) => sectionLayout.layoutId === layoutId)!;
|
||||
|
||||
return {
|
||||
id: section.id,
|
||||
type: "section" as const,
|
||||
height: clonedLayout.height,
|
||||
width: clonedLayout.width,
|
||||
xOffset: clonedLayout.xOffset,
|
||||
yOffset: clonedLayout.yOffset,
|
||||
sectionId: clonedLayout.parentSectionId,
|
||||
};
|
||||
});
|
||||
|
||||
const itemElements = board.items.map((item) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const clonedLayout = item.layouts.find((itemLayout) => itemLayout.layoutId === layoutId)!;
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
type: "item" as const,
|
||||
height: clonedLayout.height,
|
||||
width: clonedLayout.width,
|
||||
xOffset: clonedLayout.xOffset,
|
||||
yOffset: clonedLayout.yOffset,
|
||||
sectionId: clonedLayout.sectionId,
|
||||
};
|
||||
});
|
||||
|
||||
return [...itemElements, ...sectionElements];
|
||||
};
|
||||
|
||||
const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, userId: string | null) => {
|
||||
const groupsOfCurrentUser = await db.query.groupMembers.findMany({
|
||||
where: eq(groupMembers.userId, userId ?? ""),
|
||||
});
|
||||
const board = await db.query.boards.findFirst({
|
||||
where,
|
||||
with: {
|
||||
creator: {
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
image: true,
|
||||
},
|
||||
},
|
||||
sections: {
|
||||
with: {
|
||||
collapseStates: {
|
||||
where: eq(sectionCollapseStates.userId, userId ?? ""),
|
||||
},
|
||||
layouts: true,
|
||||
},
|
||||
},
|
||||
items: {
|
||||
with: {
|
||||
integrations: {
|
||||
with: {
|
||||
integration: true,
|
||||
},
|
||||
},
|
||||
layouts: true,
|
||||
},
|
||||
},
|
||||
layouts: true,
|
||||
userPermissions: {
|
||||
where: eq(boardUserPermissions.userId, userId ?? ""),
|
||||
columns: {
|
||||
permission: true,
|
||||
},
|
||||
},
|
||||
groupPermissions: {
|
||||
where: inArray(boardGroupPermissions.groupId, groupsOfCurrentUser.map((group) => group.groupId).concat("")),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!board) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "Board not found",
|
||||
});
|
||||
}
|
||||
|
||||
const { sections, items, layouts, ...otherBoardProperties } = board;
|
||||
|
||||
return {
|
||||
...otherBoardProperties,
|
||||
layouts: layouts
|
||||
.map(({ boardId: _, ...layout }) => layout)
|
||||
.sort((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint),
|
||||
sections: sections.map(({ collapseStates, ...section }) =>
|
||||
parseSection({
|
||||
...section,
|
||||
xOffset: section.xOffset,
|
||||
yOffset: section.yOffset,
|
||||
options: superjson.parse(section.options ?? emptySuperJSON),
|
||||
layouts: section.layouts.map((layout) => ({
|
||||
xOffset: layout.xOffset,
|
||||
yOffset: layout.yOffset,
|
||||
width: layout.width,
|
||||
height: layout.height,
|
||||
parentSectionId: layout.parentSectionId,
|
||||
layoutId: layout.layoutId,
|
||||
})),
|
||||
collapsed: collapseStates.at(0)?.collapsed ?? false,
|
||||
}),
|
||||
),
|
||||
items: items.map(({ integrations: itemIntegrations, ...item }) =>
|
||||
parseItem({
|
||||
...item,
|
||||
layouts: item.layouts.map((layout) => ({
|
||||
xOffset: layout.xOffset,
|
||||
yOffset: layout.yOffset,
|
||||
width: layout.width,
|
||||
height: layout.height,
|
||||
layoutId: layout.layoutId,
|
||||
sectionId: layout.sectionId,
|
||||
})),
|
||||
integrationIds: itemIntegrations.map((item) => item.integration.id),
|
||||
advancedOptions: superjson.parse<BoardItemAdvancedOptions>(item.advancedOptions),
|
||||
options: superjson.parse<Record<string, unknown>>(item.options),
|
||||
}),
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
const forKind = <T extends WidgetKind>(kind: T) =>
|
||||
z.object({
|
||||
kind: z.literal(kind),
|
||||
options: z.record(z.string(), z.unknown()),
|
||||
});
|
||||
|
||||
const outputItemSchema = zodUnionFromArray(widgetKinds.map((kind) => forKind(kind))).and(sharedItemSchema);
|
||||
|
||||
const parseItem = (item: unknown) => {
|
||||
const result = outputItemSchema.safeParse(item);
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error.message);
|
||||
}
|
||||
return result.data;
|
||||
};
|
||||
|
||||
const parseSection = (section: unknown) => {
|
||||
const result = sectionSchema.safeParse(section);
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error.message);
|
||||
}
|
||||
return result.data;
|
||||
};
|
||||
|
||||
const filterAddedItems = <TInput extends { id: string }>(inputArray: TInput[], dbArray: TInput[]) =>
|
||||
inputArray.filter((inputItem) => !dbArray.some((dbItem) => dbItem.id === inputItem.id));
|
||||
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
import type { Modify } from "@homarr/common/types";
|
||||
import type { InferInsertModel } from "@homarr/db";
|
||||
import type { itemLayouts, sectionLayouts } from "@homarr/db/schema";
|
||||
|
||||
import type { getFullBoardWithWhereAsync } from "./full-board-query";
|
||||
import { generateResponsiveGridFor } from "./grid-algorithm";
|
||||
|
||||
type DynamicSectionLayout = Modify<InferInsertModel<typeof sectionLayouts>, { parentSectionId: string }>;
|
||||
|
||||
export const getUpdatedBoardLayout = (
|
||||
board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>,
|
||||
options: {
|
||||
previous: {
|
||||
layoutId: string;
|
||||
columnCount: number;
|
||||
};
|
||||
current: {
|
||||
layoutId: string;
|
||||
columnCount: number;
|
||||
};
|
||||
},
|
||||
) => {
|
||||
const itemSectionLayoutsCollection: InferInsertModel<typeof itemLayouts>[] = [];
|
||||
const sectionLayoutsCollection: DynamicSectionLayout[] = [];
|
||||
|
||||
const elements = getElementsForLayout(board, options.previous.layoutId);
|
||||
const rootSections = board.sections.filter((section) => section.kind !== "dynamic");
|
||||
|
||||
for (const rootSection of rootSections) {
|
||||
const result = generateResponsiveGridFor({
|
||||
items: elements,
|
||||
previousWidth: options.previous.columnCount,
|
||||
width: options.current.columnCount,
|
||||
sectionId: rootSection.id,
|
||||
});
|
||||
|
||||
itemSectionLayoutsCollection.push(
|
||||
...board.items
|
||||
.map((item): InferInsertModel<typeof itemLayouts> | null => {
|
||||
const currentElement = result.items.find((element) => element.type === "item" && element.id === item.id);
|
||||
|
||||
if (!currentElement) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
itemId: item.id,
|
||||
layoutId: options.current.layoutId,
|
||||
sectionId: currentElement.sectionId,
|
||||
height: currentElement.height,
|
||||
width: currentElement.width,
|
||||
xOffset: currentElement.xOffset,
|
||||
yOffset: currentElement.yOffset,
|
||||
};
|
||||
})
|
||||
.filter((item) => item !== null),
|
||||
);
|
||||
|
||||
sectionLayoutsCollection.push(
|
||||
...board.sections
|
||||
.filter((section) => section.kind === "dynamic")
|
||||
.map((section): DynamicSectionLayout | null => {
|
||||
const currentElement = result.items.find(
|
||||
(element) => element.type === "section" && element.id === section.id,
|
||||
);
|
||||
|
||||
if (!currentElement) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
layoutId: options.current.layoutId,
|
||||
sectionId: section.id,
|
||||
parentSectionId: currentElement.sectionId,
|
||||
height: currentElement.height,
|
||||
width: currentElement.width,
|
||||
xOffset: currentElement.xOffset,
|
||||
yOffset: currentElement.yOffset,
|
||||
};
|
||||
})
|
||||
.filter((section) => section !== null),
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
itemSectionLayouts: itemSectionLayoutsCollection,
|
||||
sectionLayouts: sectionLayoutsCollection,
|
||||
};
|
||||
};
|
||||
|
||||
const getElementsForLayout = (board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>, layoutId: string) => {
|
||||
const sectionElements = board.sections
|
||||
.filter((section) => section.kind === "dynamic")
|
||||
.map((section) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const clonedLayout = section.layouts.find((sectionLayout) => sectionLayout.layoutId === layoutId)!;
|
||||
|
||||
return {
|
||||
id: section.id,
|
||||
type: "section" as const,
|
||||
height: clonedLayout.height,
|
||||
width: clonedLayout.width,
|
||||
xOffset: clonedLayout.xOffset,
|
||||
yOffset: clonedLayout.yOffset,
|
||||
sectionId: clonedLayout.parentSectionId,
|
||||
};
|
||||
});
|
||||
|
||||
const itemElements = board.items.map((item) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const clonedLayout = item.layouts.find((itemLayout) => itemLayout.layoutId === layoutId)!;
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
type: "item" as const,
|
||||
height: clonedLayout.height,
|
||||
width: clonedLayout.width,
|
||||
xOffset: clonedLayout.xOffset,
|
||||
yOffset: clonedLayout.yOffset,
|
||||
sectionId: clonedLayout.sectionId,
|
||||
};
|
||||
});
|
||||
|
||||
return [...itemElements, ...sectionElements];
|
||||
};
|
||||
|
||||
export const applyAutoLayoutToBoard = (
|
||||
board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>,
|
||||
): Awaited<ReturnType<typeof getFullBoardWithWhereAsync>> => {
|
||||
if (board.layoutMode === "custom") return board;
|
||||
|
||||
const baseLayout = board.layouts.find((layout) => layout.id === board.baseLayoutId) ?? null;
|
||||
if (!baseLayout) return board;
|
||||
|
||||
const updatedLayoutMap = new Map<string, ReturnType<typeof getUpdatedBoardLayout>>();
|
||||
for (const layout of board.layouts) {
|
||||
if (layout.id === baseLayout.id) continue;
|
||||
|
||||
updatedLayoutMap.set(
|
||||
layout.id,
|
||||
getUpdatedBoardLayout(board, {
|
||||
previous: {
|
||||
layoutId: baseLayout.id,
|
||||
columnCount: baseLayout.columnCount,
|
||||
},
|
||||
current: {
|
||||
layoutId: layout.id,
|
||||
columnCount: layout.columnCount,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
...board,
|
||||
items: board.items.map((item) => ({
|
||||
...item,
|
||||
layouts: item.layouts.map(
|
||||
(layoutSection) =>
|
||||
updatedLayoutMap
|
||||
.get(layoutSection.layoutId)
|
||||
?.itemSectionLayouts.find(
|
||||
(updatedLayoutSection) =>
|
||||
updatedLayoutSection.itemId === item.id && updatedLayoutSection.layoutId === layoutSection.layoutId,
|
||||
) ?? layoutSection,
|
||||
),
|
||||
})),
|
||||
sections: board.sections.map((section) =>
|
||||
"layouts" in section
|
||||
? {
|
||||
...section,
|
||||
layouts: section.layouts.map(
|
||||
(sectionLayout) =>
|
||||
updatedLayoutMap
|
||||
.get(sectionLayout.layoutId)
|
||||
?.sectionLayouts.find(
|
||||
(updatedSectionLayout) =>
|
||||
updatedSectionLayout.sectionId === section.id &&
|
||||
updatedSectionLayout.layoutId === sectionLayout.layoutId,
|
||||
) ?? sectionLayout,
|
||||
),
|
||||
}
|
||||
: section,
|
||||
),
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,133 @@
|
||||
import { TRPCError } from "@trpc/server";
|
||||
import superjson from "superjson";
|
||||
import z from "zod";
|
||||
|
||||
import type { Database, SQL } from "@homarr/db";
|
||||
import { eq, inArray } from "@homarr/db";
|
||||
import { boardGroupPermissions, boardUserPermissions, groupMembers, sectionCollapseStates } from "@homarr/db/schema";
|
||||
import type { WidgetKind } from "@homarr/definitions";
|
||||
import { emptySuperJSON, widgetKinds } from "@homarr/definitions";
|
||||
import { zodUnionFromArray } from "@homarr/validation/enums";
|
||||
import { sectionSchema, sharedItemSchema } from "@homarr/validation/shared";
|
||||
import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
|
||||
|
||||
export const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, userId: string | null) => {
|
||||
const groupsOfCurrentUser = await db.query.groupMembers.findMany({
|
||||
where: eq(groupMembers.userId, userId ?? ""),
|
||||
});
|
||||
const board = await db.query.boards.findFirst({
|
||||
where,
|
||||
with: {
|
||||
creator: {
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
image: true,
|
||||
},
|
||||
},
|
||||
sections: {
|
||||
with: {
|
||||
collapseStates: {
|
||||
where: eq(sectionCollapseStates.userId, userId ?? ""),
|
||||
},
|
||||
layouts: true,
|
||||
},
|
||||
},
|
||||
items: {
|
||||
with: {
|
||||
integrations: {
|
||||
with: {
|
||||
integration: true,
|
||||
},
|
||||
},
|
||||
layouts: true,
|
||||
},
|
||||
},
|
||||
layouts: true,
|
||||
userPermissions: {
|
||||
where: eq(boardUserPermissions.userId, userId ?? ""),
|
||||
columns: {
|
||||
permission: true,
|
||||
},
|
||||
},
|
||||
groupPermissions: {
|
||||
where: inArray(boardGroupPermissions.groupId, groupsOfCurrentUser.map((group) => group.groupId).concat("")),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!board) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "Board not found",
|
||||
});
|
||||
}
|
||||
|
||||
const { sections, items, layouts, ...otherBoardProperties } = board;
|
||||
|
||||
return {
|
||||
...otherBoardProperties,
|
||||
layouts: layouts
|
||||
.map(({ boardId: _, ...layout }) => layout)
|
||||
.sort((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint),
|
||||
sections: sections.map(({ collapseStates, ...section }) =>
|
||||
parseSection({
|
||||
...section,
|
||||
xOffset: section.xOffset,
|
||||
yOffset: section.yOffset,
|
||||
options: superjson.parse(section.options ?? emptySuperJSON),
|
||||
layouts: section.layouts.map((layout) => ({
|
||||
xOffset: layout.xOffset,
|
||||
yOffset: layout.yOffset,
|
||||
width: layout.width,
|
||||
height: layout.height,
|
||||
parentSectionId: layout.parentSectionId,
|
||||
layoutId: layout.layoutId,
|
||||
})),
|
||||
collapsed: collapseStates.at(0)?.collapsed ?? false,
|
||||
}),
|
||||
),
|
||||
items: items.map(({ integrations: itemIntegrations, ...item }) =>
|
||||
parseItem({
|
||||
...item,
|
||||
layouts: item.layouts.map((layout) => ({
|
||||
xOffset: layout.xOffset,
|
||||
yOffset: layout.yOffset,
|
||||
width: layout.width,
|
||||
height: layout.height,
|
||||
layoutId: layout.layoutId,
|
||||
sectionId: layout.sectionId,
|
||||
})),
|
||||
integrationIds: itemIntegrations.map((item) => item.integration.id),
|
||||
advancedOptions: superjson.parse<BoardItemAdvancedOptions>(item.advancedOptions),
|
||||
options: superjson.parse<Record<string, unknown>>(item.options),
|
||||
}),
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
const forKind = <T extends WidgetKind>(kind: T) =>
|
||||
z.object({
|
||||
kind: z.literal(kind),
|
||||
options: z.record(z.string(), z.unknown()),
|
||||
});
|
||||
|
||||
const outputItemSchema = zodUnionFromArray(widgetKinds.map((kind) => forKind(kind))).and(sharedItemSchema);
|
||||
|
||||
const parseItem = (item: unknown) => {
|
||||
const result = outputItemSchema.safeParse(item);
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error.message);
|
||||
}
|
||||
return result.data;
|
||||
};
|
||||
|
||||
const parseSection = (section: unknown) => {
|
||||
const result = sectionSchema.safeParse(section);
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error.message);
|
||||
}
|
||||
return result.data;
|
||||
};
|
||||
@@ -56,8 +56,7 @@ export const generateResponsiveGridFor = ({
|
||||
dynamicSectionHeightMap.set(dynamicSection.id, result.height);
|
||||
}
|
||||
|
||||
// Return same positions for items in the current section
|
||||
if (width >= previousWidth) {
|
||||
if (width === previousWidth) {
|
||||
return {
|
||||
height: Math.max(...itemsOfCurrentSection.map((item) => item.yOffset + item.height)),
|
||||
items: newItems.concat(normalizedItems),
|
||||
|
||||
@@ -99,11 +99,12 @@ qlllmmmmmnnrrrst
|
||||
ulllmmmmmnnrrrvw
|
||||
xyz äö`;
|
||||
|
||||
// Just add two empty columns to the right
|
||||
const eighteenColumns = sixteenColumns
|
||||
.split("\n")
|
||||
.map((line, index) => (index === 0 ? line : `${line} `))
|
||||
.join("\n");
|
||||
const eighteenColumns = `
|
||||
abbccccddddeeefghi
|
||||
jbbccccddddeeeklll
|
||||
mmmmmnnopqseeetlll
|
||||
mmmmmnnrrruvwxylll
|
||||
mmmmmnnrrrzäö `;
|
||||
|
||||
const tenColumns = `
|
||||
abbcccceee
|
||||
|
||||
@@ -35,11 +35,11 @@
|
||||
"bcrypt": "^6.0.0",
|
||||
"cookies": "^0.9.1",
|
||||
"ldapts": "8.0.9",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"next-auth": "5.0.0-beta.30",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
|
||||
import type { RouterOutputs } from "@homarr/api";
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
|
||||
import { useEditMode } from "./edit-mode";
|
||||
import { updateBoardName } from "./updater";
|
||||
|
||||
const BoardContext = createContext<{
|
||||
@@ -83,10 +84,12 @@ export const getCurrentLayout = (board: RouterOutputs["board"]["getBoardByName"]
|
||||
export const useCurrentLayout = () => {
|
||||
const board = useRequiredBoard();
|
||||
const [currentLayout, setCurrentLayout] = useState(getCurrentLayout(board));
|
||||
const [isEditMode] = useEditMode();
|
||||
|
||||
const onResize = useCallback(() => {
|
||||
if (isEditMode && board.layoutMode === "auto") return;
|
||||
setCurrentLayout(getCurrentLayout(board));
|
||||
}, [board]);
|
||||
}, [board, isEditMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
@@ -97,6 +100,10 @@ export const useCurrentLayout = () => {
|
||||
};
|
||||
}, [onResize]);
|
||||
|
||||
if (board.layoutMode === "auto" && isEditMode && board.baseLayoutId !== null) {
|
||||
return board.baseLayoutId;
|
||||
}
|
||||
|
||||
return currentLayout;
|
||||
};
|
||||
|
||||
|
||||
@@ -32,12 +32,12 @@
|
||||
"@paralleldrive/cuid2": "^3.1.0",
|
||||
"dayjs": "^1.11.19",
|
||||
"dns-caching": "^0.2.7",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"octokit": "^5.0.5",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"undici": "7.16.0",
|
||||
"zod": "^4.1.13",
|
||||
"zod": "^4.1.12",
|
||||
"zod-validation-error": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
"dependencies": {
|
||||
"@t3-oss/env-nextjs": "^0.13.8",
|
||||
"ioredis": "5.8.2",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -29,20 +29,20 @@
|
||||
"@homarr/core": "workspace:^0.1.0",
|
||||
"@homarr/cron-jobs": "workspace:^0.1.0",
|
||||
"@homarr/log": "workspace:^0.1.0",
|
||||
"@tanstack/react-query": "^5.90.11",
|
||||
"@trpc/client": "^11.7.2",
|
||||
"@trpc/server": "^11.7.2",
|
||||
"@trpc/tanstack-react-query": "^11.7.2",
|
||||
"@tanstack/react-query": "^5.90.10",
|
||||
"@trpc/client": "^11.7.1",
|
||||
"@trpc/server": "^11.7.1",
|
||||
"@trpc/tanstack-react-query": "^11.7.1",
|
||||
"node-cron": "^4.2.1",
|
||||
"react": "19.2.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
"@homarr/prettier-config": "workspace:^0.1.0",
|
||||
"@homarr/tsconfig": "workspace:^0.1.0",
|
||||
"@types/node-cron": "^3.0.11",
|
||||
"@types/react": "19.2.7",
|
||||
"@types/react": "19.2.6",
|
||||
"eslint": "^9.39.1",
|
||||
"typescript": "^5.9.3"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
ALTER TABLE `board` ADD `layout_mode` varchar(32) DEFAULT 'custom' NOT NULL;--> statement-breakpoint
|
||||
ALTER TABLE `board` ADD `base_layout_id` varchar(64);--> statement-breakpoint
|
||||
ALTER TABLE `board` ADD CONSTRAINT `board_base_layout_id_layout_id_fk` FOREIGN KEY (`base_layout_id`) REFERENCES `layout`(`id`) ON DELETE set null ON UPDATE no action;
|
||||
File diff suppressed because it is too large.
Load diff
@@ -260,6 +260,13 @@
|
||||
"when": 1760968518445,
|
||||
"tag": "0036_add_app_reference_to_integration",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 37,
|
||||
"version": "5",
|
||||
"when": 1764190331048,
|
||||
"tag": "0037_add_auto_layout_mode",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
ALTER TABLE "board" ADD COLUMN "layout_mode" varchar(32) DEFAULT 'custom' NOT NULL;--> statement-breakpoint
|
||||
ALTER TABLE "board" ADD COLUMN "base_layout_id" varchar(64);--> statement-breakpoint
|
||||
ALTER TABLE "board" ADD CONSTRAINT "board_base_layout_id_layout_id_fk" FOREIGN KEY ("base_layout_id") REFERENCES "public"."layout"("id") ON DELETE set null ON UPDATE no action;
|
||||
File diff suppressed because it is too large.
Load diff
@@ -22,6 +22,13 @@
|
||||
"when": 1760968530084,
|
||||
"tag": "0002_add_app_reference_to_integration",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 3,
|
||||
"version": "7",
|
||||
"when": 1764190350662,
|
||||
"tag": "0003_add_auto_layout_mode",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
ALTER TABLE `board` ADD `layout_mode` text DEFAULT 'custom' NOT NULL;--> statement-breakpoint
|
||||
ALTER TABLE `board` ADD `base_layout_id` text REFERENCES layout(id);
|
||||
File diff suppressed because it is too large.
Load diff
@@ -246,6 +246,13 @@
|
||||
"when": 1760968503571,
|
||||
"tag": "0034_add_app_reference_to_integration",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 35,
|
||||
"version": "6",
|
||||
"when": 1764190313293,
|
||||
"tag": "0035_add_auto_layout_mode",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -49,10 +49,10 @@
|
||||
"@homarr/definitions": "workspace:^0.1.0",
|
||||
"@homarr/log": "workspace:^0.1.0",
|
||||
"@homarr/server-settings": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@paralleldrive/cuid2": "^3.1.0",
|
||||
"@testcontainers/mysql": "^11.9.0",
|
||||
"@testcontainers/postgresql": "^11.9.0",
|
||||
"@testcontainers/mysql": "^11.8.1",
|
||||
"@testcontainers/postgresql": "^11.8.1",
|
||||
"better-sqlite3": "^12.4.1",
|
||||
"dotenv": "^17.2.3",
|
||||
"drizzle-kit": "^0.31.7",
|
||||
@@ -60,7 +60,7 @@
|
||||
"drizzle-zod": "^0.8.3",
|
||||
"mysql2": "3.15.3",
|
||||
"pg": "^8.16.3",
|
||||
"superjson": "2.2.6"
|
||||
"superjson": "2.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -17,16 +17,11 @@ import {
|
||||
varchar,
|
||||
} from "drizzle-orm/mysql-core";
|
||||
|
||||
import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
emptySuperJSON,
|
||||
} from "@homarr/definitions";
|
||||
import type {
|
||||
BackgroundImageAttachment,
|
||||
BackgroundImageRepeat,
|
||||
BackgroundImageSize,
|
||||
BoardLayoutMode,
|
||||
BoardPermission,
|
||||
ColorScheme,
|
||||
GroupPermissionKey,
|
||||
@@ -39,6 +34,12 @@ import type {
|
||||
SupportedAuthProvider,
|
||||
WidgetKind,
|
||||
} from "@homarr/definitions";
|
||||
import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
emptySuperJSON,
|
||||
} from "@homarr/definitions";
|
||||
|
||||
const customBlob = customType<{ data: Buffer }>({
|
||||
dataType() {
|
||||
@@ -289,6 +290,11 @@ export const boards = mysqlTable("board", {
|
||||
iconColor: text(),
|
||||
itemRadius: text().$type<MantineSize>().default("lg").notNull(),
|
||||
disableStatus: boolean().default(false).notNull(),
|
||||
// This has to be custom as the previous behaviour was custom
|
||||
layoutMode: varchar({ length: 32 }).$type<BoardLayoutMode>().default("custom").notNull(),
|
||||
baseLayoutId: varchar({ length: 64 }).references((): AnyMySqlColumn => layouts.id, {
|
||||
onDelete: "set null",
|
||||
}),
|
||||
});
|
||||
|
||||
export const boardUserPermissions = mysqlTable(
|
||||
@@ -678,6 +684,10 @@ export const boardRelations = relations(boards, ({ many, one }) => ({
|
||||
userPermissions: many(boardUserPermissions),
|
||||
groupPermissions: many(boardGroupPermissions),
|
||||
layouts: many(layouts),
|
||||
baseLayout: one(layouts, {
|
||||
fields: [boards.baseLayoutId],
|
||||
references: [layouts.id],
|
||||
}),
|
||||
groupHomes: many(groups, {
|
||||
relationName: "groupRelations__board__homeBoardId",
|
||||
}),
|
||||
|
||||
@@ -16,16 +16,11 @@ import {
|
||||
varchar,
|
||||
} from "drizzle-orm/pg-core";
|
||||
|
||||
import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
emptySuperJSON,
|
||||
} from "@homarr/definitions";
|
||||
import type {
|
||||
BackgroundImageAttachment,
|
||||
BackgroundImageRepeat,
|
||||
BackgroundImageSize,
|
||||
BoardLayoutMode,
|
||||
BoardPermission,
|
||||
ColorScheme,
|
||||
GroupPermissionKey,
|
||||
@@ -38,6 +33,12 @@ import type {
|
||||
SupportedAuthProvider,
|
||||
WidgetKind,
|
||||
} from "@homarr/definitions";
|
||||
import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
emptySuperJSON,
|
||||
} from "@homarr/definitions";
|
||||
|
||||
const customBlob = customType<{ data: Buffer }>({
|
||||
dataType() {
|
||||
@@ -288,6 +289,11 @@ export const boards = pgTable("board", {
|
||||
iconColor: text(),
|
||||
itemRadius: text().$type<MantineSize>().default("lg").notNull(),
|
||||
disableStatus: boolean().default(false).notNull(),
|
||||
// This has to be custom as the previous behaviour was custom
|
||||
layoutMode: varchar({ length: 32 }).$type<BoardLayoutMode>().default("custom").notNull(),
|
||||
baseLayoutId: varchar({ length: 64 }).references((): AnyPgColumn => layouts.id, {
|
||||
onDelete: "set null",
|
||||
}),
|
||||
});
|
||||
|
||||
export const boardUserPermissions = pgTable(
|
||||
@@ -677,6 +683,10 @@ export const boardRelations = relations(boards, ({ many, one }) => ({
|
||||
userPermissions: many(boardUserPermissions),
|
||||
groupPermissions: many(boardGroupPermissions),
|
||||
layouts: many(layouts),
|
||||
baseLayout: one(layouts, {
|
||||
fields: [boards.baseLayoutId],
|
||||
references: [layouts.id],
|
||||
}),
|
||||
groupHomes: many(groups, {
|
||||
relationName: "groupRelations__board__homeBoardId",
|
||||
}),
|
||||
|
||||
@@ -5,16 +5,11 @@ import { relations, sql } from "drizzle-orm";
|
||||
import type { AnySQLiteColumn } from "drizzle-orm/sqlite-core";
|
||||
import { blob, index, int, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core";
|
||||
|
||||
import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
emptySuperJSON,
|
||||
} from "@homarr/definitions";
|
||||
import type {
|
||||
BackgroundImageAttachment,
|
||||
BackgroundImageRepeat,
|
||||
BackgroundImageSize,
|
||||
BoardLayoutMode,
|
||||
BoardPermission,
|
||||
ColorScheme,
|
||||
GroupPermissionKey,
|
||||
@@ -27,6 +22,12 @@ import type {
|
||||
SupportedAuthProvider,
|
||||
WidgetKind,
|
||||
} from "@homarr/definitions";
|
||||
import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
emptySuperJSON,
|
||||
} from "@homarr/definitions";
|
||||
|
||||
export const apiKeys = sqliteTable("apiKey", {
|
||||
id: text().notNull().primaryKey(),
|
||||
@@ -274,6 +275,11 @@ export const boards = sqliteTable("board", {
|
||||
iconColor: text(),
|
||||
itemRadius: text().$type<MantineSize>().default("lg").notNull(),
|
||||
disableStatus: int({ mode: "boolean" }).default(false).notNull(),
|
||||
// This has to be custom as the previous behaviour was custom
|
||||
layoutMode: text().$type<BoardLayoutMode>().default("custom").notNull(),
|
||||
baseLayoutId: text().references((): AnySQLiteColumn => layouts.id, {
|
||||
onDelete: "set null",
|
||||
}),
|
||||
});
|
||||
|
||||
export const boardUserPermissions = sqliteTable(
|
||||
@@ -663,6 +669,10 @@ export const boardRelations = relations(boards, ({ many, one }) => ({
|
||||
userPermissions: many(boardUserPermissions),
|
||||
groupPermissions: many(boardGroupPermissions),
|
||||
layouts: many(layouts),
|
||||
baseLayout: one(layouts, {
|
||||
fields: [boards.baseLayoutId],
|
||||
references: [layouts.id],
|
||||
}),
|
||||
groupHomes: many(groups, {
|
||||
relationName: "groupRelations__board__homeBoardId",
|
||||
}),
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
"dependencies": {
|
||||
"@homarr/common": "workspace:^0.1.0",
|
||||
"fast-xml-parser": "^5.3.2",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -8,7 +8,9 @@ export const backgroundImageRepeats = createDefinition(["repeat", "repeat-x", "r
|
||||
export const backgroundImageSizes = createDefinition(["cover", "contain"], {
|
||||
defaultValue: "cover",
|
||||
});
|
||||
export const boardLayoutModes = createDefinition(["auto", "custom"], { defaultValue: "auto" });
|
||||
|
||||
export type BackgroundImageAttachment = inferDefinitionType<typeof backgroundImageAttachments>;
|
||||
export type BackgroundImageRepeat = inferDefinitionType<typeof backgroundImageRepeats>;
|
||||
export type BackgroundImageSize = inferDefinitionType<typeof backgroundImageSizes>;
|
||||
export type BoardLayoutMode = inferDefinitionType<typeof boardLayoutModes>;
|
||||
@@ -144,7 +144,6 @@ export type HomarrDocumentationPath =
|
||||
| "/docs/getting-started/installation/proxmox"
|
||||
| "/docs/getting-started/installation/qnap"
|
||||
| "/docs/getting-started/installation/railway"
|
||||
| "/docs/getting-started/installation/runtipi"
|
||||
| "/docs/getting-started/installation/saltbox"
|
||||
| "/docs/getting-started/installation/source"
|
||||
| "/docs/getting-started/installation/synology"
|
||||
|
||||
@@ -26,9 +26,9 @@
|
||||
"@homarr/common": "workspace:^0.1.0",
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@mantine/form": "^8.3.9",
|
||||
"@mantine/form": "^8.3.8",
|
||||
"mantine-form-zod-resolver": "^1.3.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -30,9 +30,9 @@
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"react": "19.2.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
"tsdav": "^2.1.6",
|
||||
"undici": "7.16.0",
|
||||
"xml2js": "^0.6.2",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -25,9 +25,9 @@
|
||||
"prettier": "@homarr/prettier-config",
|
||||
"dependencies": {
|
||||
"@homarr/core": "workspace:^0.1.0",
|
||||
"superjson": "2.2.6",
|
||||
"superjson": "2.2.5",
|
||||
"winston": "3.18.3",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"dependencies": {
|
||||
"@homarr/api": "workspace:^0.1.0",
|
||||
"@homarr/common": "workspace:^0.1.0",
|
||||
"@homarr/definitions": "workspace:^0.1.0",
|
||||
"@homarr/form": "workspace:^0.1.0",
|
||||
"@homarr/forms-collection": "workspace:^0.1.0",
|
||||
"@homarr/modals": "workspace:^0.1.0",
|
||||
@@ -33,13 +34,13 @@
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@tabler/icons-react": "^3.35.0",
|
||||
"dayjs": "^1.11.19",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -1,13 +1,28 @@
|
||||
import { Button, Group, InputWrapper, Slider, Stack, Switch, TextInput } from "@mantine/core";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Fieldset,
|
||||
Group,
|
||||
InputWrapper,
|
||||
RadioGroup,
|
||||
SimpleGrid,
|
||||
Slider,
|
||||
Stack,
|
||||
Switch,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { IconAlertTriangle, IconCircleCheck } from "@tabler/icons-react";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { revalidatePathActionAsync } from "@homarr/common/client";
|
||||
import { boardLayoutModes } from "@homarr/definitions";
|
||||
import { useZodForm } from "@homarr/form";
|
||||
import { createModal } from "@homarr/modals";
|
||||
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
|
||||
import { useI18n } from "@homarr/translation/client";
|
||||
import { CustomRadioCard } from "@homarr/ui";
|
||||
import { boardColumnCountSchema, boardCreateSchema, boardNameSchema } from "@homarr/validation/board";
|
||||
|
||||
export const AddBoardModal = createModal(({ actions }) => {
|
||||
@@ -18,6 +33,7 @@ export const AddBoardModal = createModal(({ actions }) => {
|
||||
name: "",
|
||||
columnCount: 10,
|
||||
isPublic: false,
|
||||
layoutMode: boardLayoutModes.defaultValue,
|
||||
},
|
||||
});
|
||||
const { mutate, isPending } = clientApi.board.createBoard.useMutation({
|
||||
@@ -64,14 +80,38 @@ export const AddBoardModal = createModal(({ actions }) => {
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
<InputWrapper label={t("board.field.columnCount.label")} {...form.getInputProps("columnCount")}>
|
||||
<Slider
|
||||
min={boardColumnCountSchema.minValue ?? undefined}
|
||||
max={boardColumnCountSchema.maxValue ?? undefined}
|
||||
step={1}
|
||||
{...form.getInputProps("columnCount")}
|
||||
/>
|
||||
</InputWrapper>
|
||||
|
||||
<Fieldset legend={t("board.setting.section.layout.title")}>
|
||||
<Stack gap="sm">
|
||||
<RadioGroup {...form.getInputProps("layoutMode")}>
|
||||
<SimpleGrid cols={{ sm: 2, xs: 1 }} spacing="md">
|
||||
{boardLayoutModes.values.map((mode) => (
|
||||
<Box w="100%" key={mode} pos="relative">
|
||||
<CustomRadioCard
|
||||
value={mode}
|
||||
label={t(`board.field.layoutMode.option.${mode}.label`)}
|
||||
description={t(`board.field.layoutMode.option.${mode}.description`)}
|
||||
/>
|
||||
{mode === boardLayoutModes.defaultValue && (
|
||||
<Badge pos="absolute" top="8px" right="8px" variant="light" size="sm">
|
||||
{t("common.select.badge.recommended")}
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</RadioGroup>
|
||||
|
||||
<InputWrapper label={t("board.field.columnCount.label")} {...form.getInputProps("columnCount")}>
|
||||
<Slider
|
||||
min={boardColumnCountSchema.minValue ?? undefined}
|
||||
max={boardColumnCountSchema.maxValue ?? undefined}
|
||||
step={1}
|
||||
{...form.getInputProps("columnCount")}
|
||||
/>
|
||||
</InputWrapper>
|
||||
</Stack>
|
||||
</Fieldset>
|
||||
|
||||
<Switch
|
||||
label={t("board.field.isPublic.label")}
|
||||
@@ -92,6 +132,7 @@ export const AddBoardModal = createModal(({ actions }) => {
|
||||
);
|
||||
}).withOptions({
|
||||
defaultTitle: (t) => t("management.page.board.action.new.label"),
|
||||
size: "lg",
|
||||
});
|
||||
|
||||
export const useBoardNameStatus = (name: string) => {
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
"dependencies": {
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/hooks": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@mantine/hooks": "^8.3.8",
|
||||
"react": "19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"prettier": "@homarr/prettier-config",
|
||||
"dependencies": {
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@mantine/notifications": "^8.3.9",
|
||||
"@mantine/notifications": "^8.3.8",
|
||||
"@tabler/icons-react": "^3.35.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -37,14 +37,14 @@
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/hooks": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@mantine/hooks": "^8.3.8",
|
||||
"adm-zip": "0.5.16",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"superjson": "2.2.6",
|
||||
"zod": "^4.1.13",
|
||||
"superjson": "2.2.5",
|
||||
"zod": "^4.1.12",
|
||||
"zod-form-data": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
"prettier": "@homarr/prettier-config",
|
||||
"dependencies": {
|
||||
"@homarr/common": "workspace:^0.1.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"@homarr/definitions": "workspace:^",
|
||||
"@homarr/log": "workspace:^",
|
||||
"ioredis": "5.8.2",
|
||||
"superjson": "2.2.6"
|
||||
"superjson": "2.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -32,9 +32,9 @@
|
||||
"@homarr/redis": "workspace:^0.1.0",
|
||||
"dayjs": "^1.11.19",
|
||||
"octokit": "^5.0.5",
|
||||
"superjson": "2.2.6",
|
||||
"superjson": "2.2.5",
|
||||
"undici": "7.16.0",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
"@homarr/api": "workspace:^0.1.0",
|
||||
"@homarr/db": "workspace:^0.1.0",
|
||||
"@homarr/server-settings": "workspace:^0.1.0",
|
||||
"@mantine/dates": "^8.3.9",
|
||||
"next": "16.0.7",
|
||||
"@mantine/dates": "^8.3.8",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0"
|
||||
},
|
||||
|
||||
@@ -33,12 +33,12 @@
|
||||
"@homarr/settings": "workspace:^0.1.0",
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/hooks": "^8.3.9",
|
||||
"@mantine/spotlight": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@mantine/hooks": "^8.3.8",
|
||||
"@mantine/spotlight": "^8.3.8",
|
||||
"@tabler/icons-react": "^3.35.0",
|
||||
"jotai": "^2.15.1",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"use-deep-compare-effect": "^1.8.1"
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
"dayjs": "^1.11.19",
|
||||
"deepmerge": "4.3.1",
|
||||
"mantine-react-table": "2.0.0-beta.9",
|
||||
"next": "16.0.7",
|
||||
"next-intl": "4.5.6",
|
||||
"next": "16.0.3",
|
||||
"next-intl": "4.5.5",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0"
|
||||
},
|
||||
|
||||
@@ -2793,6 +2793,23 @@
|
||||
"label": "Disable app status",
|
||||
"description": "Disables the status check for all apps on this board"
|
||||
},
|
||||
"layoutMode": {
|
||||
"label": "Layout mode",
|
||||
"option": {
|
||||
"auto": {
|
||||
"label": "Auto",
|
||||
"description": "Position and size of all layouts are calculated from the base layout."
|
||||
},
|
||||
"custom": {
|
||||
"label": "Custom",
|
||||
"description": "Position and size must be configured for all layouts separately."
|
||||
}
|
||||
}
|
||||
},
|
||||
"baseLayout": {
|
||||
"label": "Base layout",
|
||||
"description": "The layout will be used to calculate positions and sizes for other layouts."
|
||||
},
|
||||
"columnCount": {
|
||||
"label": "Column count"
|
||||
},
|
||||
|
||||
@@ -2232,7 +2232,7 @@
|
||||
"unknown": "Desconocido",
|
||||
"pending": "Pendiente",
|
||||
"processing": "Procesando",
|
||||
"requested": "Solicitado",
|
||||
"requested": "",
|
||||
"partiallyAvailable": "Parcial",
|
||||
"available": "Disponible",
|
||||
"blacklisted": "Lista negra",
|
||||
|
||||
@@ -30,12 +30,12 @@
|
||||
"@homarr/log": "workspace:^0.1.0",
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/dates": "^8.3.9",
|
||||
"@mantine/hooks": "^8.3.9",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@mantine/dates": "^8.3.8",
|
||||
"@mantine/hooks": "^8.3.8",
|
||||
"@tabler/icons-react": "^3.35.0",
|
||||
"mantine-react-table": "2.0.0-beta.9",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"svgson": "^5.3.1"
|
||||
|
||||
@@ -16,3 +16,4 @@ export { MaskedImage } from "./masked-image";
|
||||
export { MaskedOrNormalImage } from "./masked-or-normal-image";
|
||||
export { LanguageIcon } from "./language-icon";
|
||||
export { Link } from "./link";
|
||||
export * from "./radio";
|
||||
@@ -0,0 +1,33 @@
|
||||
.root {
|
||||
position: relative;
|
||||
padding: var(--mantine-spacing-md);
|
||||
transition: border-color 150ms ease;
|
||||
|
||||
&[data-checked] {
|
||||
border-color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
@mixin light {
|
||||
background-color: var(--mantine-color-gray-0);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
background-color: var(--mantine-color-dark-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: var(--mantine-font-family-monospace);
|
||||
font-weight: bold;
|
||||
font-size: var(--mantine-font-size-md);
|
||||
line-height: 1.3;
|
||||
color: var(--mantine-color-bright);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 8px;
|
||||
color: var(--mantine-color-dimmed);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { RadioCardProps } from "@mantine/core";
|
||||
import { Group, RadioCard, RadioIndicator, Text } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import classes from "./radio.module.css";
|
||||
|
||||
interface CustomRadioCardProps extends RadioCardProps {
|
||||
label: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export const CustomRadioCard = (props: CustomRadioCardProps) => {
|
||||
return (
|
||||
<RadioCard className={clsx(classes.root, props.className)} {...props}>
|
||||
<Group wrap="nowrap" align="flex-start">
|
||||
<RadioIndicator />
|
||||
<div>
|
||||
<Text className={classes.label}>{props.label}</Text>
|
||||
<Text className={classes.description}>{props.description}</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</RadioCard>
|
||||
);
|
||||
};
|
||||
@@ -24,7 +24,7 @@
|
||||
"dependencies": {
|
||||
"@homarr/definitions": "workspace:^0.1.0",
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"zod": "^4.1.13",
|
||||
"zod": "^4.1.12",
|
||||
"zod-form-data": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
backgroundImageAttachments,
|
||||
backgroundImageRepeats,
|
||||
backgroundImageSizes,
|
||||
boardLayoutModes,
|
||||
boardPermissions,
|
||||
} from "@homarr/definitions";
|
||||
|
||||
@@ -79,6 +80,9 @@ export const boardSaveLayoutsSchema = z.object({
|
||||
breakpoint: z.number().min(0).max(32767),
|
||||
}),
|
||||
),
|
||||
// If not send it should fallback to the legacy behavior which is "custom"
|
||||
layoutMode: z.enum(boardLayoutModes.values).default("custom"),
|
||||
baseLayoutId: z.string().nullish(),
|
||||
});
|
||||
|
||||
export const boardSaveSchema = z.object({
|
||||
@@ -90,6 +94,7 @@ export const boardSaveSchema = z.object({
|
||||
export const boardCreateSchema = z.object({
|
||||
name: boardNameSchema,
|
||||
columnCount: boardColumnCountSchema,
|
||||
layoutMode: z.enum(boardLayoutModes.values).default(boardLayoutModes.defaultValue),
|
||||
isPublic: z.boolean(),
|
||||
});
|
||||
|
||||
|
||||
@@ -48,9 +48,9 @@
|
||||
"@homarr/translation": "workspace:^0.1.0",
|
||||
"@homarr/ui": "workspace:^0.1.0",
|
||||
"@homarr/validation": "workspace:^0.1.0",
|
||||
"@mantine/charts": "^8.3.9",
|
||||
"@mantine/core": "^8.3.9",
|
||||
"@mantine/hooks": "^8.3.9",
|
||||
"@mantine/charts": "^8.3.8",
|
||||
"@mantine/core": "^8.3.8",
|
||||
"@mantine/hooks": "^8.3.8",
|
||||
"@tabler/icons-react": "^3.35.0",
|
||||
"@tiptap/extension-color": "2.27.1",
|
||||
"@tiptap/extension-highlight": "2.27.1",
|
||||
@@ -72,13 +72,13 @@
|
||||
"dayjs": "^1.11.19",
|
||||
"mantine-form-zod-resolver": "^1.3.0",
|
||||
"mantine-react-table": "2.0.0-beta.9",
|
||||
"next": "16.0.7",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"recharts": "^2.15.4",
|
||||
"video.js": "^8.23.4",
|
||||
"zod": "^4.1.13"
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/eslint-config": "workspace:^0.2.0",
|
||||
|
||||
Generated
+652
-599
File diff suppressed because it is too large.
Load diff
+1
-3
@@ -2,7 +2,5 @@ packages:
|
||||
- apps/*
|
||||
- packages/*
|
||||
- tooling/*
|
||||
|
||||
minimumReleaseAge: 4320 # Only download deps if they are at least 3 days old (in minutes)
|
||||
minimumReleaseAgeExclude:
|
||||
- next
|
||||
- "@next/eslint-plugin-next"
|
||||
@@ -17,7 +17,7 @@
|
||||
},
|
||||
"prettier": "@homarr/prettier-config",
|
||||
"dependencies": {
|
||||
"@next/eslint-plugin-next": "16.0.7",
|
||||
"@next/eslint-plugin-next": "16.0.3",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-config-turbo": "^2.6.1",
|
||||
"eslint-plugin-import": "^2.32.0",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@homarr/tsconfig": "workspace:^0.1.0",
|
||||
"prettier-plugin-packagejson": "^2.5.20",
|
||||
"prettier-plugin-packagejson": "^2.5.19",
|
||||
"typescript": "^5.9.3"
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user