jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: board settings (#137)

Browse Source 
* refactor: improve user feedback for general board settings section

* wip: add board settings for background and colors, move danger zone to own file, refactor code

* feat: add shade selector

* feat: add slider for opacity

* fix: issue with invalid hex values for color preview

* refactor: add shared mutation hook for saving partial board settings with invalidate query

* fix: add cleanup for not applied changes to logo and page title

* feat: add layout settings

* feat: add empty custom css section to board settings

* refactor: improve layout of board logo on mobile

* feat: add theme provider for board colors

* refactor: add auto contrast for better contrast of buttons with low primary shade

* feat: add background for boards

* feat: add opacity for boards

* feat: add rename board

* feat: add visibility and delete of board settings

* fix: issue that wrong data is updated with update board method

* refactor: improve danger zone button placement for mobile

* fix: board not revalidated when already in boards layout

* refactor: improve board color preview

* refactor: change save button color to teal, add placeholders for general board settings

* chore: update initial migration

* refactor: remove unnecessary div

* chore: address pull request feedback

* fix: ci issues

* fix: deepsource issues

* chore: address pull request feedback

* fix: formatting issue

* chore: address pull request feedback
This commit is contained in:
Meier Lukas
2024-03-03 16:01:32 +01:00
committed by GitHub
parent 2a83df3485
commit bb02163e25
49 changed files with 1620 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/nextjs/src/app/[locale]/(main)/integrations/_integration-accordion.tsx
View File

@@ -1,32 +0,0 @@
"use client";
import type { PropsWithChildren } from "react";
import { useRouter } from "next/navigation";
import type { IntegrationKind } from "@homarr/definitions";
import { Accordion } from "@homarr/ui";
type IntegrationGroupAccordionControlProps = PropsWithChildren<{
activeTab: IntegrationKind | undefined;
}>;
export const IntegrationGroupAccordion = ({
children,
activeTab,
}: IntegrationGroupAccordionControlProps) => {
const router = useRouter();
return (
<Accordion
variant="separated"
defaultValue={activeTab}
onChange={(tab) =>
tab
? router.replace(`?tab=${tab}`, {})
: router.replace("/integrations")
}
>
{children}
</Accordion>
);
};

8
apps/nextjs/src/app/[locale]/(main)/integrations/page.tsx
View File

@@ -2,8 +2,8 @@ import Link from "next/link";
import type { RouterOutputs } from "@homarr/api";
import { objectEntries } from "@homarr/common";
import { getIntegrationName } from "@homarr/definitions";
import type { IntegrationKind } from "@homarr/definitions";
import { getIntegrationName } from "@homarr/definitions";
import { getScopedI18n } from "@homarr/translation/server";
import {
AccordionControl,
@@ -33,7 +33,7 @@ import {
} from "@homarr/ui";
import { api } from "~/trpc/server";
import { IntegrationGroupAccordion } from "./_integration-accordion";
import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
import { IntegrationAvatar } from "./_integration-avatar";
import { DeleteIntegrationActionButton } from "./_integration-buttons";
import { IntegrationCreateDropdownContent } from "./new/_integration-new-dropdown";
@@ -112,7 +112,7 @@ const IntegrationList = async ({
);
return (
<IntegrationGroupAccordion activeTab={activeTab}>
<ActiveTabAccordion defaultValue={activeTab} variant="separated">
{objectEntries(grouppedIntegrations).map(([kind, integrations]) => (
<AccordionItem key={kind} value={kind}>
<AccordionControl icon={<IntegrationAvatar size="sm" kind={kind} />}>
@@ -170,6 +170,6 @@ const IntegrationList = async ({
</AccordionPanel>
</AccordionItem>
))}
</IntegrationGroupAccordion>
</ActiveTabAccordion>
);
};

10
apps/nextjs/src/app/[locale]/boards/[name]/@headeractions/page.tsx
View File

@@ -22,6 +22,7 @@ import {
} from "@homarr/ui";
import { modalEvents } from "~/app/[locale]/modals";
import { revalidatePathAction } from "~/app/revalidatePathAction";
import { editModeAtom } from "~/components/board/editMode";
import { useCategoryActions } from "~/components/board/sections/category/category-actions";
import { HeaderButton } from "~/components/layout/header/button";
@@ -107,6 +108,7 @@ const AddMenu = () => {
const EditModeMenu = () => {
const [isEditMode, setEditMode] = useAtom(editModeAtom);
const board = useRequiredBoard();
const utils = clientApi.useUtils();
const t = useScopedI18n("board.action.edit");
const { mutate: saveBoard, isPending } = clientApi.board.save.useMutation({
onSuccess() {
@@ -114,6 +116,8 @@ const EditModeMenu = () => {
title: t("notification.success.title"),
message: t("notification.success.message"),
});
void utils.board.byName.invalidate({ name: board.name });
void revalidatePathAction(`/boards/${board.name}`);
setEditMode(false);
},
onError() {
@@ -125,11 +129,7 @@ const EditModeMenu = () => {
});
const toggle = () => {
if (isEditMode)
return saveBoard({
boardId: board.id,
...board,
});
if (isEditMode) return saveBoard(board);
setEditMode(true);
};

140
apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx Normal file
View File

@@ -0,0 +1,140 @@
"use client";
import {
backgroundImageAttachments,
backgroundImageRepeats,
backgroundImageSizes,
} from "@homarr/definitions";
import { useForm } from "@homarr/form";
import type { TranslationObject } from "@homarr/translation";
import { useI18n } from "@homarr/translation/client";
import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
import {
Button,
Grid,
Group,
SelectWithDescriptionBadge,
Stack,
TextInput,
} from "@homarr/ui";
import type { Board } from "../../_types";
import { useSavePartialSettingsMutation } from "./_shared";
interface Props {
board: Board;
}
export const BackgroundSettingsContent = ({ board }: Props) => {
const t = useI18n();
const { mutate: savePartialSettings, isPending } =
useSavePartialSettingsMutation(board);
const form = useForm({
initialValues: {
backgroundImageUrl: board.backgroundImageUrl ?? "",
backgroundImageAttachment: board.backgroundImageAttachment,
backgroundImageRepeat: board.backgroundImageRepeat,
backgroundImageSize: board.backgroundImageSize,
},
});
const backgroundImageAttachmentData = useBackgroundOptionData(
"backgroundImageAttachment",
backgroundImageAttachments,
);
const backgroundImageSizeData = useBackgroundOptionData(
"backgroundImageSize",
backgroundImageSizes,
);
const backgroundImageRepeatData = useBackgroundOptionData(
"backgroundImageRepeat",
backgroundImageRepeats,
);
return (
<form
onSubmit={form.onSubmit((values) => {
savePartialSettings({
id: board.id,
...values,
});
})}
>
<Stack>
<Grid>
<Grid.Col span={12}>
<TextInput
label={t("board.field.backgroundImageUrl.label")}
{...form.getInputProps("backgroundImageUrl")}
/>
</Grid.Col>
<Grid.Col span={12}>
<SelectWithDescriptionBadge
label={t("board.field.backgroundImageAttachment.label")}
data={backgroundImageAttachmentData}
{...form.getInputProps("backgroundImageAttachment")}
/>
</Grid.Col>
<Grid.Col span={12}>
<SelectWithDescriptionBadge
label={t("board.field.backgroundImageSize.label")}
data={backgroundImageSizeData}
{...form.getInputProps("backgroundImageSize")}
/>
</Grid.Col>
<Grid.Col span={12}>
<SelectWithDescriptionBadge
label={t("board.field.backgroundImageRepeat.label")}
data={backgroundImageRepeatData}
{...form.getInputProps("backgroundImageRepeat")}
/>
</Grid.Col>
</Grid>
<Group justify="end">
<Button type="submit" loading={isPending} color="teal">
{t("common.action.saveChanges")}
</Button>
</Group>
</Stack>
</form>
);
};
type BackgroundImageKey =
| "backgroundImageAttachment"
| "backgroundImageSize"
| "backgroundImageRepeat";
type inferOptions<TKey extends BackgroundImageKey> =
TranslationObject["board"]["field"][TKey]["option"];
const useBackgroundOptionData = <
TKey extends BackgroundImageKey,
TOptions extends inferOptions<TKey> = inferOptions<TKey>,
>(
key: TKey,
data: {
values: (keyof TOptions)[];
defaultValue: keyof TOptions;
},
) => {
const t = useI18n();
return data.values.map(
(value) =>
({
label: t(`board.field.${key}.option.${value as string}.label` as never),
description: t(
`board.field.${key}.option.${value as string}.description` as never,
),
value: value as string,
badge:
data.defaultValue === value
? {
color: "blue",
label: t("common.select.badge.recommended"),
}
: undefined,
}) satisfies SelectItemWithDescriptionBadge,
);
};

157
apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx Normal file
View File

@@ -0,0 +1,157 @@
"use client";
import { useDisclosure } from "@mantine/hooks";
import { useForm } from "@homarr/form";
import { useI18n } from "@homarr/translation/client";
import {
Anchor,
Button,
Collapse,
ColorInput,
ColorSwatch,
Grid,
Group,
InputWrapper,
isLightColor,
Slider,
Stack,
Text,
useMantineTheme,
} from "@homarr/ui";
import { generateColors } from "../../_theme";
import type { Board } from "../../_types";
import { useSavePartialSettingsMutation } from "./_shared";
interface Props {
board: Board;
}
const hexRegex = /^#[0-9a-fA-F]{6}$/;
const progressPercentageLabel = (value: number) => `${value}%`;
export const ColorSettingsContent = ({ board }: Props) => {
const form = useForm({
initialValues: {
primaryColor: board.primaryColor,
secondaryColor: board.secondaryColor,
opacity: board.opacity,
},
});
const [showPreview, { toggle }] = useDisclosure(false);
const t = useI18n();
const theme = useMantineTheme();
const { mutate: savePartialSettings, isPending } =
useSavePartialSettingsMutation(board);
return (
<form
onSubmit={form.onSubmit((values) => {
savePartialSettings({
id: board.id,
...values,
});
})}
>
<Stack>
<Grid>
<Grid.Col span={{ sm: 12, md: 6 }}>
<Stack gap="xs">
<ColorInput
label={t("board.field.primaryColor.label")}
format="hex"
swatches={Object.values(theme.colors).map((color) => color[6])}
{...form.getInputProps("primaryColor")}
/>
</Stack>
</Grid.Col>
<Grid.Col span={{ sm: 12, md: 6 }}>
<ColorInput
label={t("board.field.secondaryColor.label")}
format="hex"
swatches={Object.values(theme.colors).map((color) => color[6])}
{...form.getInputProps("secondaryColor")}
/>
</Grid.Col>
<Grid.Col span={12}>
<Anchor onClick={toggle}>
{showPreview
? t("common.preview.hide")
: t("common.preview.show")}
</Anchor>
</Grid.Col>
<Grid.Col span={12}>
<Collapse in={showPreview}>
<Stack>
<ColorsPreview previewColor={form.values.primaryColor} />
<ColorsPreview previewColor={form.values.secondaryColor} />
</Stack>
</Collapse>
</Grid.Col>
<Grid.Col span={{ sm: 12, md: 6 }}>
<InputWrapper label={t("board.field.opacity.label")}>
<Slider
my={6}
min={0}
max={100}
step={5}
label={progressPercentageLabel}
{...form.getInputProps("opacity")}
/>
</InputWrapper>
</Grid.Col>
</Grid>
<Group justify="end">
<Button type="submit" loading={isPending} color="teal">
{t("common.action.saveChanges")}
</Button>
</Group>
</Stack>
</form>
);
};
interface ColorsPreviewProps {
previewColor: string;
}
const ColorsPreview = ({ previewColor }: ColorsPreviewProps) => {
const theme = useMantineTheme();
const colors = hexRegex.test(previewColor)
? generateColors(previewColor)
: generateColors("#000000");
return (
<Group gap={0} wrap="nowrap">
{colors.map((color, index) => (
<ColorSwatch
key={index}
color={color}
w="10%"
pb="10%"
c={isLightColor(color) ? "black" : "white"}
radius={0}
styles={{
colorOverlay: {
borderTopLeftRadius: index === 0 ? theme.radius.md : 0,
borderBottomLeftRadius: index === 0 ? theme.radius.md : 0,
borderTopRightRadius: index === 9 ? theme.radius.md : 0,
borderBottomRightRadius: index === 9 ? theme.radius.md : 0,
},
}}
>
<Stack align="center" gap={4}>
<Text visibleFrom="md" fw={500} size="lg">
{index}
</Text>
<Text visibleFrom="md" fw={500} size="xs" tt="uppercase">
{color}
</Text>
</Stack>
</ColorSwatch>
))}
</Group>
);
};

7
apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx Normal file
View File

@@ -0,0 +1,7 @@
"use client";
// TODO: add some sort of store (maybe directory on GitHub)
export const CustomCssSettingsContent = () => {
return null;
};

165
apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx Normal file
View File

@@ -0,0 +1,165 @@
"use client";
import { useCallback } from "react";
import { useRouter } from "next/navigation";
import { clientApi } from "@homarr/api/client";
import { useScopedI18n } from "@homarr/translation/client";
import { Button, Divider, Group, Stack, Text } from "@homarr/ui";
import { modalEvents } from "~/app/[locale]/modals";
import { useRequiredBoard } from "../../_context";
import classes from "./danger.module.css";
export const DangerZoneSettingsContent = () => {
const board = useRequiredBoard();
const t = useScopedI18n("board.setting");
const router = useRouter();
const { mutate: changeVisibility, isPending: isChangeVisibilityPending } =
clientApi.board.changeVisibility.useMutation();
const { mutate: deleteBoard, isPending: isDeletePending } =
clientApi.board.delete.useMutation();
const utils = clientApi.useUtils();
const visibility = board.isPublic ? "public" : "private";
const onRenameClick = useCallback(
() =>
modalEvents.openManagedModal({
modal: "boardRenameModal",
title: t("section.dangerZone.action.rename.modal.title"),
innerProps: {
id: board.id,
previousName: board.name,
onSuccess: (name) => {
router.push(`/boards/${name}/settings`);
},
},
}),
[board.id, board.name, router, t],
);
const onVisibilityClick = useCallback(() => {
modalEvents.openConfirmModal({
title: t(
`section.dangerZone.action.visibility.confirm.${visibility}.title`,
),
children: t(
`section.dangerZone.action.visibility.confirm.${visibility}.description`,
),
confirmProps: {
color: "red.9",
},
onConfirm: () => {
changeVisibility(
{
id: board.id,
visibility: visibility === "public" ? "private" : "public",
},
{
onSettled() {
void utils.board.byName.invalidate({ name: board.name });
void utils.board.default.invalidate();
},
},
);
},
});
}, [
board.id,
board.name,
changeVisibility,
t,
utils.board.byName,
utils.board.default,
visibility,
]);
const onDeleteClick = useCallback(() => {
modalEvents.openConfirmModal({
title: t("section.dangerZone.action.delete.confirm.title"),
children: t("section.dangerZone.action.delete.confirm.description"),
confirmProps: {
color: "red.9",
},
onConfirm: () => {
deleteBoard(
{ id: board.id },
{
onSettled: () => {
router.push("/");
},
},
);
},
});
}, [board.id, deleteBoard, router, t]);
return (
<Stack gap="sm">
<Divider />
<DangerZoneRow
label={t("section.dangerZone.action.rename.label")}
description={t("section.dangerZone.action.rename.description")}
buttonText={t("section.dangerZone.action.rename.button")}
onClick={onRenameClick}
/>
<Divider />
<DangerZoneRow
label={t("section.dangerZone.action.visibility.label")}
description={t(
`section.dangerZone.action.visibility.description.${visibility}`,
)}
buttonText={t(
`section.dangerZone.action.visibility.button.${visibility}`,
)}
onClick={onVisibilityClick}
isPending={isChangeVisibilityPending}
/>
<Divider />
<DangerZoneRow
label={t("section.dangerZone.action.delete.label")}
description={t("section.dangerZone.action.delete.description")}
buttonText={t("section.dangerZone.action.delete.button")}
onClick={onDeleteClick}
isPending={isDeletePending}
/>
</Stack>
);
};
interface DangerZoneRowProps {
label: string;
description: string;
buttonText: string;
isPending?: boolean;
onClick: () => void;
}
const DangerZoneRow = ({
label,
description,
buttonText,
onClick,
isPending,
}: DangerZoneRowProps) => {
return (
<Group justify="space-between" px="md" className={classes.dangerZoneGroup}>
<Stack gap={0}>
<Text fw="bold" size="sm">
{label}
</Text>
<Text size="sm">{description}</Text>
</Stack>
<Group justify="end" w={{ base: "100%", xs: "auto" }}>
<Button
variant="subtle"
color="red"
loading={isPending}
onClick={onClick}
>
{buttonText}
</Button>
</Group>
</Group>
);
};

113
apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
View File

@@ -1,19 +1,28 @@
"use client";
import { useEffect } from "react";
import { useEffect, useRef } from "react";
import {
useDebouncedValue,
useDocumentTitle,
useFavicon,
} from "@mantine/hooks";
import { clientApi } from "@homarr/api/client";
import { useForm } from "@homarr/form";
import { useI18n } from "@homarr/translation/client";
import { Button, Grid, Group, Stack, TextInput } from "@homarr/ui";
import {
Button,
Grid,
Group,
IconAlertTriangle,
Loader,
Stack,
TextInput,
Tooltip,
} from "@homarr/ui";
import { useUpdateBoard } from "../../_client";
import type { Board } from "../../_types";
import { useSavePartialSettingsMutation } from "./_shared";
interface Props {
board: Board;
@@ -21,15 +30,20 @@ interface Props {
export const GeneralSettingsContent = ({ board }: Props) => {
const t = useI18n();
const ref = useRef({
pageTitle: board.pageTitle,
logoImageUrl: board.logoImageUrl,
});
const { updateBoard } = useUpdateBoard();
const { mutate: saveGeneralSettings, isPending } =
clientApi.board.saveGeneralSettings.useMutation();
const { mutate: savePartialSettings, isPending } =
useSavePartialSettingsMutation(board);
const form = useForm({
initialValues: {
pageTitle: board.pageTitle,
logoImageUrl: board.logoImageUrl,
metaTitle: board.metaTitle,
faviconImageUrl: board.faviconImageUrl,
pageTitle: board.pageTitle ?? "",
logoImageUrl: board.logoImageUrl ?? "",
metaTitle: board.metaTitle ?? "",
faviconImageUrl: board.faviconImageUrl ?? "",
},
onValuesChange({ pageTitle }) {
updateBoard((previous) => ({
@@ -39,15 +53,31 @@ export const GeneralSettingsContent = ({ board }: Props) => {
},
});
useMetaTitlePreview(form.values.metaTitle);
useFaviconPreview(form.values.faviconImageUrl);
useLogoPreview(form.values.logoImageUrl);
const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
const faviconStatus = useFaviconPreview(form.values.faviconImageUrl);
const logoStatus = useLogoPreview(form.values.logoImageUrl);
// Cleanup for not applied changes of the page title and logo image URL
useEffect(() => {
return () => {
updateBoard((previous) => ({
...previous,
pageTitle: ref.current.pageTitle,
logoImageUrl: ref.current.logoImageUrl,
}));
};
}, [updateBoard]);
return (
<form
onSubmit={form.onSubmit((values) => {
saveGeneralSettings({
boardId: board.id,
// Save the current values to the ref so that it does not reset if the form is submitted
ref.current = {
pageTitle: values.pageTitle,
logoImageUrl: values.logoImageUrl,
};
savePartialSettings({
id: board.id,
...values,
});
})}
@@ -57,30 +87,37 @@ export const GeneralSettingsContent = ({ board }: Props) => {
<Grid.Col span={{ xs: 12, md: 6 }}>
<TextInput
label={t("board.field.pageTitle.label")}
placeholder="Homarr"
{...form.getInputProps("pageTitle")}
/>
</Grid.Col>
<Grid.Col span={{ xs: 12, md: 6 }}>
<TextInput
label={t("board.field.metaTitle.label")}
placeholder="Default Board | Homarr"
rightSection={<PendingOrInvalidIndicator {...metaTitleStatus} />}
{...form.getInputProps("metaTitle")}
/>
</Grid.Col>
<Grid.Col span={{ xs: 12, md: 6 }}>
<TextInput
label={t("board.field.logoImageUrl.label")}
placeholder="/logo/logo.png"
rightSection={<PendingOrInvalidIndicator {...logoStatus} />}
{...form.getInputProps("logoImageUrl")}
/>
</Grid.Col>
<Grid.Col span={{ xs: 12, md: 6 }}>
<TextInput
label={t("board.field.faviconImageUrl.label")}
placeholder="/logo/logo.png"
rightSection={<PendingOrInvalidIndicator {...faviconStatus} />}
{...form.getInputProps("faviconImageUrl")}
/>
</Grid.Col>
</Grid>
<Group justify="end">
<Button type="submit" loading={isPending}>
<Button type="submit" loading={isPending} color="teal">
{t("common.action.saveChanges")}
</Button>
</Group>
@@ -89,22 +126,59 @@ export const GeneralSettingsContent = ({ board }: Props) => {
);
};
const PendingOrInvalidIndicator = ({
isPending,
isInvalid,
}: {
isPending: boolean;
isInvalid?: boolean;
}) => {
const t = useI18n();
if (isInvalid) {
return (
<Tooltip
multiline
w={220}
label={t("board.setting.section.general.unrecognizedLink")}
>
<IconAlertTriangle size="1rem" color="red" />
</Tooltip>
);
}
if (isPending) {
return <Loader size="xs" />;
}
return null;
};
const useLogoPreview = (url: string | null) => {
const { updateBoard } = useUpdateBoard();
const [logoDebounced] = useDebouncedValue(url ?? "", 500);
useEffect(() => {
if (!logoDebounced.includes(".")) return;
if (!logoDebounced.includes(".") && logoDebounced.length >= 1) return;
updateBoard((previous) => ({
...previous,
logoImageUrl: logoDebounced,
logoImageUrl: logoDebounced.length >= 1 ? logoDebounced : null,
}));
}, [logoDebounced, updateBoard]);
return {
isPending: (url ?? "") !== logoDebounced,
isInvalid: logoDebounced.length >= 1 && !logoDebounced.includes("."),
};
};
const useMetaTitlePreview = (title: string | null) => {
const [metaTitleDebounced] = useDebouncedValue(title ?? "", 200);
useDocumentTitle(metaTitleDebounced);
return {
isPending: (title ?? "") !== metaTitleDebounced,
};
};
const validFaviconExtensions = ["ico", "png", "svg", "gif"];
@@ -115,4 +189,9 @@ const isValidUrl = (url: string) =>
const useFaviconPreview = (url: string | null) => {
const [faviconDebounced] = useDebouncedValue(url ?? "", 500);
useFavicon(isValidUrl(faviconDebounced) ? faviconDebounced : "");
return {
isPending: (url ?? "") !== faviconDebounced,
isInvalid: faviconDebounced.length >= 1 && !isValidUrl(faviconDebounced),
};
};

54
apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx Normal file
View File

@@ -0,0 +1,54 @@
"use client";
import { useForm } from "@homarr/form";
import { useI18n } from "@homarr/translation/client";
import { Button, Grid, Group, Input, Slider, Stack } from "@homarr/ui";
import type { Board } from "../../_types";
import { useSavePartialSettingsMutation } from "./_shared";
interface Props {
board: Board;
}
export const LayoutSettingsContent = ({ board }: Props) => {
const t = useI18n();
const { mutate: savePartialSettings, isPending } =
useSavePartialSettingsMutation(board);
const form = useForm({
initialValues: {
columnCount: board.columnCount,
},
});
return (
<form
onSubmit={form.onSubmit((values) => {
savePartialSettings({
id: board.id,
...values,
});
})}
>
<Stack>
<Grid>
<Grid.Col span={{ sm: 12, md: 6 }}>
<Input.Wrapper label={t("board.field.columnCount.label")}>
<Slider
mt="xs"
min={1}
max={24}
step={1}
{...form.getInputProps("columnCount")}
/>
</Input.Wrapper>
</Grid.Col>
</Grid>
<Group justify="end">
<Button type="submit" loading={isPending} color="teal">
{t("common.action.saveChanges")}
</Button>
</Group>
</Stack>
</form>
);
};

13
apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { clientApi } from "@homarr/api/client";
import type { Board } from "../../_types";
export const useSavePartialSettingsMutation = (board: Board) => {
const utils = clientApi.useUtils();
return clientApi.board.savePartialSettings.useMutation({
onSettled() {
void utils.board.byName.invalidate({ name: board.name });
void utils.board.default.invalidate();
},
});
};

5
apps/nextjs/src/app/[locale]/boards/[name]/settings/danger.module.css Normal file
View File

@@ -0,0 +1,5 @@
@media (min-width: 36em) {
.dangerZoneGroup {
--group-wrap: nowrap !important;
}
}

189
apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
View File

@@ -1,17 +1,19 @@
import type { PropsWithChildren } from "react";
import { capitalize } from "@homarr/common";
import type { TranslationObject } from "@homarr/translation";
import { getScopedI18n } from "@homarr/translation/server";
import type { TablerIconsProps } from "@homarr/ui";
import {
Accordion,
AccordionControl,
AccordionItem,
AccordionPanel,
Button,
Container,
Divider,
Group,
IconAlertTriangle,
IconBrush,
IconFileTypeCss,
IconLayout,
IconPhoto,
IconSettings,
Stack,
Text,
@@ -19,15 +21,27 @@ import {
} from "@homarr/ui";
import { api } from "~/trpc/server";
import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
import { BackgroundSettingsContent } from "./_background";
import { ColorSettingsContent } from "./_colors";
import { CustomCssSettingsContent } from "./_customCss";
import { DangerZoneSettingsContent } from "./_danger";
import { GeneralSettingsContent } from "./_general";
import { LayoutSettingsContent } from "./_layout";
interface Props {
params: {
name: string;
};
searchParams: {
tab?: keyof TranslationObject["board"]["setting"]["section"];
};
}
export default async function BoardSettingsPage({ params }: Props) {
export default async function BoardSettingsPage({
params,
searchParams,
}: Props) {
const board = await api.board.byName({ name: params.name });
const t = await getScopedI18n("board.setting");
@@ -35,99 +49,82 @@ export default async function BoardSettingsPage({ params }: Props) {
<Container>
<Stack>
<Title>{t("title", { boardName: capitalize(board.name) })}</Title>
<Accordion variant="separated" defaultValue="general">
<AccordionItem value="general">
<AccordionControl icon={<IconSettings />}>
<Text fw="bold" size="lg">
{t("section.general.title")}
</Text>
</AccordionControl>
<AccordionPanel>
<GeneralSettingsContent board={board} />
</AccordionPanel>
</AccordionItem>
<AccordionItem value="layout">
<AccordionControl icon={<IconLayout />}>
<Text fw="bold" size="lg">
{t("section.layout.title")}
</Text>
</AccordionControl>
<AccordionPanel></AccordionPanel>
</AccordionItem>
<AccordionItem value="appearance">
<AccordionControl icon={<IconBrush />}>
<Text fw="bold" size="lg">
{t("section.appearance.title")}
</Text>
</AccordionControl>
<AccordionPanel></AccordionPanel>
</AccordionItem>
<AccordionItem
value="danger"
styles={{
item: {
"--__item-border-color": "rgba(248,81,73,0.4)",
},
}}
<ActiveTabAccordion
variant="separated"
defaultValue={searchParams.tab ?? "general"}
>
<AccordionItemFor value="general" icon={IconSettings}>
<GeneralSettingsContent board={board} />
</AccordionItemFor>
<AccordionItemFor value="layout" icon={IconLayout}>
<LayoutSettingsContent board={board} />
</AccordionItemFor>
<AccordionItemFor value="background" icon={IconPhoto}>
<BackgroundSettingsContent board={board} />
</AccordionItemFor>
<AccordionItemFor value="color" icon={IconBrush}>
<ColorSettingsContent board={board} />
</AccordionItemFor>
<AccordionItemFor value="customCss" icon={IconFileTypeCss}>
<CustomCssSettingsContent />
</AccordionItemFor>
<AccordionItemFor
value="dangerZone"
icon={IconAlertTriangle}
danger
noPadding
>
<AccordionControl icon={<IconAlertTriangle />}>
<Text fw="bold" size="lg">
{t("section.dangerZone.title")}
</Text>
</AccordionControl>
<AccordionPanel
styles={{ content: { paddingRight: 0, paddingLeft: 0 } }}
>
<Stack gap="sm">
<Divider />
<Group justify="space-between" px="md">
<Stack gap={0}>
<Text fw="bold" size="sm">
{t("section.dangerZone.action.rename.label")}
</Text>
<Text size="sm">
{t("section.dangerZone.action.rename.description")}
</Text>
</Stack>
<Button variant="subtle" color="red">
{t("section.dangerZone.action.rename.button")}
</Button>
</Group>
<Divider />
<Group justify="space-between" px="md">
<Stack gap={0}>
<Text fw="bold" size="sm">
{t("section.dangerZone.action.visibility.label")}
</Text>
<Text size="sm">
{t(
"section.dangerZone.action.visibility.description.private",
)}
</Text>
</Stack>
<Button variant="subtle" color="red">
{t("section.dangerZone.action.visibility.button.private")}
</Button>
</Group>
<Divider />
<Group justify="space-between" px="md">
<Stack gap={0}>
<Text fw="bold" size="sm">
{t("section.dangerZone.action.delete.label")}
</Text>
<Text size="sm">
{t("section.dangerZone.action.delete.description")}
</Text>
</Stack>
<Button variant="subtle" color="red">
{t("section.dangerZone.action.delete.button")}
</Button>
</Group>
</Stack>
</AccordionPanel>
</AccordionItem>
</Accordion>
<DangerZoneSettingsContent />
</AccordionItemFor>
</ActiveTabAccordion>
</Stack>
</Container>
);
}
type AccordionItemForProps = PropsWithChildren<{
value: keyof TranslationObject["board"]["setting"]["section"];
icon: (props: TablerIconsProps) => JSX.Element;
danger?: boolean;
noPadding?: boolean;
}>;
const AccordionItemFor = async ({
value,
children,
icon: Icon,
danger,
noPadding,
}: AccordionItemForProps) => {
const t = await getScopedI18n("board.setting.section");
return (
<AccordionItem
value={value}
styles={
danger
? {
item: {
"--__item-border-color": "rgba(248,81,73,0.4)",
borderWidth: 4,
},
}
: undefined
}
>
<AccordionControl icon={<Icon />}>
<Text fw="bold" size="lg">
{t(`${value}.title`)}
</Text>
</AccordionControl>
<AccordionPanel
styles={
noPadding
? { content: { paddingRight: 0, paddingLeft: 0 } }
: undefined
}
>
{children}
</AccordionPanel>
</AccordionItem>
);
};

25
apps/nextjs/src/app/[locale]/boards/_client.tsx
View File

@@ -8,8 +8,14 @@ import { Box, LoadingOverlay, Stack } from "@homarr/ui";
import { BoardCategorySection } from "~/components/board/sections/category-section";
import { BoardEmptySection } from "~/components/board/sections/empty-section";
import { BoardBackgroundVideo } from "~/components/layout/background";
import { useIsBoardReady, useRequiredBoard } from "./_context";
import type { CategorySection, EmptySection } from "./_types";
let boardName: string | null = null;
export const updateBoardName = (name: string | null) => {
boardName = name;
};
type UpdateCallback = (
prev: RouterOutputs["board"]["default"],
@@ -20,7 +26,10 @@ export const useUpdateBoard = () => {
const updateBoard = useCallback(
(updaterWithoutUndefined: UpdateCallback) => {
utils.board.default.setData(undefined, (previous) =>
if (!boardName) {
throw new Error("Board name is not set");
}
utils.board.byName.setData({ name: boardName }, (previous) =>
previous ? updaterWithoutUndefined(previous) : previous,
);
},
@@ -36,21 +45,17 @@ export const ClientBoard = () => {
const board = useRequiredBoard();
const isReady = useIsBoardReady();
const sectionsWithoutSidebars = board.sections
.filter(
(section): section is CategorySection | EmptySection =>
section.kind !== "sidebar",
)
.sort((a, b) => a.position - b.position);
const sortedSections = board.sections.sort((a, b) => a.position - b.position);
const ref = useRef<HTMLDivElement>(null);
return (
<Box h="100%" pos="relative">
<BoardBackgroundVideo />
<LoadingOverlay
visible={!isReady}
transitionProps={{ duration: 500 }}
loaderProps={{ size: "lg", variant: "bars" }}
loaderProps={{ size: "lg" }}
h="calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-padding) - var(--app-shell-footer-offset, 0px) - var(--app-shell-padding))"
/>
<Stack
@@ -58,7 +63,7 @@ export const ClientBoard = () => {
h="100%"
style={{ visibility: isReady ? "visible" : "hidden" }}
>
{sectionsWithoutSidebars.map((section) =>
{sortedSections.map((section) =>
section.kind === "empty" ? (
<BoardEmptySection
key={section.id}

33
apps/nextjs/src/app/[locale]/boards/_context.tsx
View File

@@ -8,10 +8,13 @@ import {
useEffect,
useState,
} from "react";
import { usePathname } from "next/navigation";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { updateBoardName } from "./_client";
const BoardContext = createContext<{
board: RouterOutputs["board"]["default"];
isReady: boolean;
@@ -21,14 +24,30 @@ const BoardContext = createContext<{
export const BoardProvider = ({
children,
initialBoard,
}: PropsWithChildren<{ initialBoard: RouterOutputs["board"]["default"] }>) => {
}: PropsWithChildren<{ initialBoard: RouterOutputs["board"]["byName"] }>) => {
const pathname = usePathname();
const utils = clientApi.useUtils();
const [readySections, setReadySections] = useState<string[]>([]);
const { data } = clientApi.board.default.useQuery(undefined, {
initialData: initialBoard,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
});
const { data } = clientApi.board.byName.useQuery(
{ name: initialBoard.name },
{
initialData: initialBoard,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
);
// Update the board name so it can be used within updateBoard method
updateBoardName(initialBoard.name);
// Invalidate the board when the pathname changes
// This allows to refetch the board when it might have changed - e.g. if someone else added an item
useEffect(() => {
return () => {
setReadySections([]);
void utils.board.byName.invalidate({ name: initialBoard.name });
};
}, [pathname, utils, initialBoard.name]);
useEffect(() => {
setReadySections((previous) =>

20
apps/nextjs/src/app/[locale]/boards/_creator.tsx
View File

@@ -15,6 +15,8 @@ import "../../../styles/gridstack.scss";
import { GlobalItemServerDataRunner } from "@homarr/widgets";
import { BoardMantineProvider } from "./_theme";
type Params = Record<string, unknown>;
interface Props<TParams extends Params> {
@@ -35,14 +37,16 @@ export const createBoardPage = <TParams extends Record<string, unknown>>({
return (
<GlobalItemServerDataRunner board={initialBoard}>
<BoardProvider initialBoard={initialBoard}>
<ClientShell hasNavigation={false}>
<MainHeader
logo={<BoardLogoWithTitle size="md" />}
actions={headeractions}
hasNavigation={false}
/>
<AppShellMain>{children}</AppShellMain>
</ClientShell>
<BoardMantineProvider>
<ClientShell hasNavigation={false}>
<MainHeader
logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
actions={headeractions}
hasNavigation={false}
/>
<AppShellMain>{children}</AppShellMain>
</ClientShell>
</BoardMantineProvider>
</BoardProvider>
</GlobalItemServerDataRunner>
);

50
apps/nextjs/src/app/[locale]/boards/_theme.tsx Normal file
View File

@@ -0,0 +1,50 @@
"use client";
import type { PropsWithChildren } from "react";
import type { MantineColorsTuple } from "@homarr/ui";
import { createTheme, darken, lighten, MantineProvider } from "@homarr/ui";
import { useRequiredBoard } from "./_context";
export const BoardMantineProvider = ({ children }: PropsWithChildren) => {
const board = useRequiredBoard();
const theme = createTheme({
colors: {
primaryColor: generateColors(board.primaryColor),
secondaryColor: generateColors(board.secondaryColor),
},
primaryColor: "primaryColor",
autoContrast: true,
});
return <MantineProvider theme={theme}>{children}</MantineProvider>;
};
export const generateColors = (hex: string) => {
const lightnessForColors = [
-0.25, -0.2, -0.15, -0.1, -0.05, 0, 0.05, 0.1, 0.15, 0.2,
] as const;
const rgbaColors = lightnessForColors.map((lightness) => {
if (lightness < 0) {
return lighten(hex, -lightness);
}
return darken(hex, lightness);
});
return rgbaColors.map((color) => {
return (
"#" +
color
.split("(")[1]!
.replaceAll(" ", "")
.replace(")", "")
.split(",")
.map((color) => parseInt(color, 10))
.slice(0, 3)
.map((color) => color.toString(16).padStart(2, "0"))
.join("")
);
}) as unknown as MantineColorsTuple;
};

1
apps/nextjs/src/app/[locale]/boards/_types.ts
View File

@@ -7,7 +7,6 @@ export type Item = Section["items"][number];
export type CategorySection = Extract<Section, { kind: "category" }>;
export type EmptySection = Extract<Section, { kind: "empty" }>;
export type SidebarSection = Extract<Section, { kind: "sidebar" }>;
export type ItemOfKind<TKind extends WidgetKind> = Extract<
Item,

13
apps/nextjs/src/app/[locale]/layout.tsx
View File

@@ -6,11 +6,7 @@ import "@homarr/spotlight/styles.css";
import "@homarr/ui/styles.css";
import { Notifications } from "@homarr/notifications";
import {
ColorSchemeScript,
MantineProvider,
uiConfiguration,
} from "@homarr/ui";
import { ColorSchemeScript, createTheme, MantineProvider } from "@homarr/ui";
import { JotaiProvider } from "./_client-providers/jotai";
import { ModalsProvider } from "./_client-providers/modals";
@@ -64,8 +60,11 @@ export default function Layout(props: {
(innerProps) => (
<MantineProvider
{...innerProps}
defaultColorScheme={colorScheme}
{...uiConfiguration}
defaultColorScheme="dark"
theme={createTheme({
primaryColor: "red",
autoContrast: true,
})}
/>
),
(innerProps) => <ModalsProvider {...innerProps} />,

2
apps/nextjs/src/app/[locale]/modals.tsx
View File

@@ -5,6 +5,7 @@ import { createModalManager } from "mantine-modal-manager";
import { WidgetEditModal } from "@homarr/widgets";
import { ItemSelectModal } from "~/components/board/items/item-select-modal";
import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
import { AddBoardModal } from "~/components/manage/boards/add-board-modal";
@@ -13,4 +14,5 @@ export const [ModalsManager, modalEvents] = createModalManager({
widgetEditModal: WidgetEditModal,
itemSelectModal: ItemSelectModal,
addBoardModal: AddBoardModal,
boardRenameModal: BoardRenameModal,
});

45
apps/nextjs/src/components/active-tab-accordion.tsx Normal file
View File

@@ -0,0 +1,45 @@
"use client";
import type { PropsWithChildren } from "react";
import { useCallback } from "react";
import { usePathname } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import type { AccordionProps } from "@homarr/ui";
import { Accordion } from "@homarr/ui";
type ActiveTabAccordionProps = PropsWithChildren<
Omit<AccordionProps<false>, "onChange">
>;
// Replace state without fetchign new data
const replace = (newUrl: string) => {
window.history.replaceState(
{ ...window.history.state, as: newUrl, url: newUrl },
"",
newUrl,
);
};
export const ActiveTabAccordion = ({
children,
...props
}: ActiveTabAccordionProps) => {
const pathname = usePathname();
const onChange = useCallback(
(tab: string | null) => (tab ? replace(`?tab=${tab}`) : replace(pathname)),
[pathname],
);
useShallowEffect(() => {
if (props.defaultValue) {
replace(`?tab=${props.defaultValue}`);
}
}, [props.defaultValue]);
return (
<Accordion {...props} onChange={onChange}>
{children}
</Accordion>
);
};

71
apps/nextjs/src/components/board/modals/board-rename-modal.tsx Normal file
View File

@@ -0,0 +1,71 @@
"use client";
import type { ManagedModal } from "mantine-modal-manager";
import { clientApi } from "@homarr/api/client";
import { useForm } from "@homarr/form";
import { useI18n } from "@homarr/translation/client";
import { Button, Group, Stack, TextInput } from "@homarr/ui";
import type { validation, z } from "@homarr/validation";
interface InnerProps {
id: string;
previousName: string;
onSuccess?: (name: string) => void;
}
export const BoardRenameModal: ManagedModal<InnerProps> = ({
actions,
innerProps,
}) => {
const utils = clientApi.useUtils();
const t = useI18n();
const { mutate, isPending } = clientApi.board.rename.useMutation({
onSettled() {
void utils.board.byName.invalidate({ name: innerProps.previousName });
void utils.board.default.invalidate();
},
});
const form = useForm<FormType>({
initialValues: {
name: innerProps.previousName,
},
});
const handleSubmit = (values: FormType) => {
mutate(
{
id: innerProps.id,
name: values.name,
},
{
onSuccess: () => {
actions.closeModal();
innerProps.onSuccess?.(values.name);
},
},
);
};
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<TextInput
label={t("board.field.name.label")}
{...form.getInputProps("name")}
data-autofocus
/>
<Group justify="end">
<Button variant="subtle" color="gray" onClick={actions.closeModal}>
{t("common.action.cancel")}
</Button>
<Button type="submit" loading={isPending}>
{t("common.action.confirm")}
</Button>
</Group>
</Stack>
</form>
);
};
type FormType = Omit<z.infer<(typeof validation)["board"]["rename"]>, "id">;

10
apps/nextjs/src/components/board/sections/category/category-actions.ts
View File

@@ -39,8 +39,6 @@ export const useCategoryActions = () => {
updateBoard((previous) => ({
...previous,
sections: [
// Ignore sidebar sections
...previous.sections.filter((section) => section.kind === "sidebar"),
// Place sections before the new category
...previous.sections.filter(
(section) =>
@@ -235,12 +233,7 @@ export const useCategoryActions = () => {
...previous,
sections: [
...previous.sections.filter(
(section) => section.kind === "sidebar",
),
...previous.sections.filter(
(section) =>
(section.kind === "category" || section.kind === "empty") &&
section.position < currentCategory.position - 1,
(section) => section.position < currentCategory.position - 1,
),
{
...aboveWrapper,
@@ -253,7 +246,6 @@ export const useCategoryActions = () => {
...previous.sections
.filter(
(section): section is CategorySection | EmptySection =>
(section.kind === "category" || section.kind === "empty") &&
section.position >= currentCategory.position + 2,
)
.map((section) => ({

15
apps/nextjs/src/components/board/sections/content.tsx
View File

@@ -2,6 +2,7 @@
// Ignored because of gridstack attributes
import type { RefObject } from "react";
import cx from "clsx";
import { useAtomValue } from "jotai";
import { useScopedI18n } from "@homarr/translation/client";
@@ -20,11 +21,13 @@ import {
useServerDataFor,
} from "@homarr/widgets";
import { useRequiredBoard } from "~/app/[locale]/boards/_context";
import type { Item } from "~/app/[locale]/boards/_types";
import { modalEvents } from "~/app/[locale]/modals";
import { editModeAtom } from "../editMode";
import { useItemActions } from "../items/item-actions";
import type { UseGridstackRefs } from "./gridstack/use-gridstack";
import classes from "./item.module.css";
interface Props {
items: Item[];
@@ -32,6 +35,8 @@ interface Props {
}
export const SectionContent = ({ items, refs }: Props) => {
const board = useRequiredBoard();
return (
<>
{items.map((item) => {
@@ -50,7 +55,15 @@ export const SectionContent = ({ items, refs }: Props) => {
gs-max-h={4}
ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
>
<Card className="grid-stack-item-content" withBorder>
<Card
className={cx(classes.itemCard, "grid-stack-item-content")}
withBorder
styles={{
root: {
"--opacity": board.opacity / 100,
},
}}
>
<BoardItem item={item} />
</Card>
</div>

14
apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
View File

@@ -21,24 +21,18 @@ export const initializeGridstack = ({
sectionColumnCount,
}: InitializeGridstackProps) => {
if (!refs.wrapper.current) return false;
// calculates the currently available count of columns
const columnCount = section.kind === "sidebar" ? 2 : sectionColumnCount;
const minRow =
section.kind !== "sidebar"
? 1
: Math.floor(refs.wrapper.current.offsetHeight / 128);
// initialize gridstack
const newGrid = refs.gridstack;
newGrid.current = GridStack.init(
{
column: columnCount,
margin: section.kind === "sidebar" ? 5 : 10,
column: sectionColumnCount,
margin: 10,
cellHeight: 128,
float: true,
alwaysShowResizeHandle: true,
acceptWidgets: true,
staticGrid: true,
minRow,
minRow: 1,
animate: false,
styleInHead: true,
disableRemoveNodeOnDrop: true,
@@ -49,7 +43,7 @@ export const initializeGridstack = ({
const grid = newGrid.current;
if (!grid) return false;
// Must be used to update the column count after the initialization
grid.column(columnCount, "none");
grid.column(sectionColumnCount, "none");
grid.batchUpdate();
grid.removeAll(false);

31
apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
View File

@@ -48,7 +48,7 @@ export const useGridstack = ({
useCssVariableConfiguration({ section, mainRef, gridRef });
const sectionColumnCount = useSectionColumnCount(section.kind);
const board = useRequiredBoard();
const items = useMemo(() => section.items, [section.items]);
@@ -125,7 +125,7 @@ export const useGridstack = ({
wrapper: wrapperRef,
gridstack: gridRef,
},
sectionColumnCount,
sectionColumnCount: board.columnCount,
});
if (isReady) {
@@ -134,7 +134,7 @@ export const useGridstack = ({
// Only run this effect when the section items change
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [items.length, section.items.length]);
}, [items.length, section.items.length, board.columnCount]);
return {
refs: {
@@ -145,19 +145,6 @@ export const useGridstack = ({
};
};
/**
* Get the column count for the section
* For the sidebar it's always 2 otherwise it's the column count of the board
* @param sectionKind kind of the section
* @returns count of columns
*/
const useSectionColumnCount = (sectionKind: Section["kind"]) => {
const board = useRequiredBoard();
if (sectionKind === "sidebar") return 2;
return board.columnCount;
};
interface UseCssVariableConfiguration {
section: Section;
mainRef?: RefObject<HTMLDivElement>;
@@ -177,7 +164,7 @@ const useCssVariableConfiguration = ({
mainRef,
gridRef,
}: UseCssVariableConfiguration) => {
const sectionColumnCount = useSectionColumnCount(section.kind);
const board = useRequiredBoard();
// Get reference to the :root element
const typeofDocument = typeof document;
@@ -188,20 +175,20 @@ const useCssVariableConfiguration = ({
// Define widget-width by calculating the width of one column with mainRef width and column count
useEffect(() => {
if (section.kind === "sidebar" || !mainRef?.current) return;
const widgetWidth = mainRef.current.clientWidth / sectionColumnCount;
if (!mainRef?.current) return;
const widgetWidth = mainRef.current.clientWidth / board.columnCount;
// widget width is used to define sizes of gridstack items within global.scss
root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
gridRef.current?.cellHeight(widgetWidth);
// gridRef.current is required otherwise the cellheight is run on production as undefined
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sectionColumnCount, root, section.kind, mainRef, gridRef.current]);
}, [board.columnCount, root, section.kind, mainRef, gridRef.current]);
// Define column count by using the sectionColumnCount
useEffect(() => {
root?.style.setProperty(
"--gridstack-column-count",
sectionColumnCount.toString(),
board.columnCount.toString(),
);
}, [sectionColumnCount, root]);
}, [board.columnCount, root]);
};

10
apps/nextjs/src/components/board/sections/item.module.css Normal file
View File

@@ -0,0 +1,10 @@
.itemCard {
@mixin dark {
background-color: rgba(46, 46, 46, var(--opacity));
border-color: rgba(66, 66, 66, var(--opacity));
}
@mixin light {
background-color: rgba(255, 255, 255, var(--opacity));
border-color: rgba(222, 226, 230, var(--opacity));
}
}

62
apps/nextjs/src/components/layout/background.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { usePathname } from "next/navigation";
import type { AppShellProps } from "@homarr/ui";
import { useOptionalBoard } from "~/app/[locale]/boards/_context";
const supportedVideoFormats = ["mp4", "webm", "ogg"];
const isVideo = (url: string) =>
supportedVideoFormats.some((format) =>
url.toLowerCase().endsWith(`.${format}`),
);
export const useOptionalBackgroundProps = (): Partial<AppShellProps> => {
const board = useOptionalBoard();
const pathname = usePathname();
if (!board?.backgroundImageUrl) return {};
// Check if we are on a client board page
if (pathname.split("/").length > 3) return {};
if (isVideo(board.backgroundImageUrl)) {
return {};
}
return {
bg: `url(${board?.backgroundImageUrl})`,
bgp: "center center",
bgsz: board?.backgroundImageSize ?? "cover",
bgr: board?.backgroundImageRepeat ?? "no-repeat",
bga: board?.backgroundImageAttachment ?? "fixed",
};
};
export const BoardBackgroundVideo = () => {
const board = useOptionalBoard();
if (!board?.backgroundImageUrl) return null;
if (!isVideo(board.backgroundImageUrl)) return null;
const videoFormat = board.backgroundImageUrl.split(".").pop()?.toLowerCase();
if (!videoFormat) return null;
return (
<video
autoPlay
muted
loop
style={{
position: "fixed",
width: "100vw",
height: "100vh",
top: 0,
left: 0,
objectFit: board.backgroundImageSize ?? "cover",
}}
>
<source src={board.backgroundImageUrl} type={`video/${videoFormat}`} />
</video>
);
};

7
apps/nextjs/src/components/layout/logo/board-logo.tsx
View File

@@ -25,14 +25,19 @@ export const BoardLogo = ({ size }: LogoProps) => {
interface CommonLogoWithTitleProps {
size: LogoWithTitleProps["size"];
hideTitleOnMobile?: boolean;
}
export const BoardLogoWithTitle = ({ size }: CommonLogoWithTitleProps) => {
export const BoardLogoWithTitle = ({
size,
hideTitleOnMobile,
}: CommonLogoWithTitleProps) => {
const board = useRequiredBoard();
const imageOptions = useImageOptions();
return (
<LogoWithTitle
size={size}
hideTitleOnMobile={hideTitleOnMobile}
title={board.pageTitle ?? homarrPageTitle}
image={imageOptions}
/>

16
apps/nextjs/src/components/layout/logo/logo.tsx
View File

@@ -34,15 +34,27 @@ export interface LogoWithTitleProps {
size: keyof typeof logoWithTitleSizes;
title: string;
image: Omit<LogoProps, "size">;
hideTitleOnMobile?: boolean;
}
export const LogoWithTitle = ({ size, title, image }: LogoWithTitleProps) => {
export const LogoWithTitle = ({
size,
title,
image,
hideTitleOnMobile,
}: LogoWithTitleProps) => {
const { logoSize, titleOrder } = logoWithTitleSizes[size];
return (
<Group gap="xs" wrap="nowrap">
<Logo {...image} size={logoSize} />
<Title order={titleOrder}>{title}</Title>
<Title
order={titleOrder}
visibleFrom={hideTitleOnMobile ? "sm" : undefined}
textWrap="nowrap"
>
{title}
</Title>
</Group>
);
};

3
apps/nextjs/src/components/layout/shell.tsx
View File

@@ -5,6 +5,7 @@ import { useAtomValue } from "jotai";
import { AppShell } from "@homarr/ui";
import { useOptionalBackgroundProps } from "./background";
import { navigationCollapsedAtom } from "./header/burger";
interface ClientShellProps {
@@ -18,9 +19,11 @@ export const ClientShell = ({
children,
}: PropsWithChildren<ClientShellProps>) => {
const collapsed = useAtomValue(navigationCollapsedAtom);
const backgroundProps = useOptionalBackgroundProps();
return (
<AppShell
{...backgroundProps}
header={hasHeader ? { height: 60 } : undefined}
navbar={
hasNavigation

41
apps/nextjs/src/styles/gridstack.scss
View File

@@ -60,47 +60,6 @@
}
}
// Styling for sidebar grid-stack elements
@for $i from 1 to 96 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-w="#{$i}"] {
width: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-min-w="#{$i}"] {
min-width: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-max-w="#{$i}"] {
max-width: 128px * $i;
}
}
@for $i from 1 to 96 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-h="#{$i}"] {
height: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-min-h="#{$i}"] {
min-height: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-max-h="#{$i}"] {
max-height: 128px * $i;
}
}
@for $i from 1 to 3 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-x="#{$i}"] {
left: 128px * $i;
}
}
@for $i from 1 to 96 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-y="#{$i}"] {
top: 128px * $i;
}
}
.grid-stack.grid-stack-sidebar > .grid-stack-item {
min-width: 128px;
}
// General gridstack styling
.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-item > .placeholder-content {