diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css index ad99b48f1..f8415e012 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css @@ -4,7 +4,7 @@ background: color-mix(in srgb, var(--mantine-color-body) 82%, var(--mantine-primary-color-light)); padding: var(--mantine-spacing-xs); min-height: 7rem; - max-height: min(24rem, 48dvh); + max-height: min(18rem, 38dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx index a0816c831..7d54a0e51 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx @@ -45,7 +45,7 @@ export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Pr {layout.columnCount} {t("board.setting.section.layout.preview.columns")} - + {elements.length === 0 ? ( {t("board.setting.section.layout.preview.empty")} diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css index 7c8bdbebd..0a6b80363 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css @@ -6,7 +6,7 @@ display: grid; gap: 6px; width: 100%; - min-height: 112px; + min-height: 88px; padding: 8px; overflow: hidden; background: var(--mantine-color-body); diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx index 745c55b51..44c28e44e 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx @@ -168,7 +168,7 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync bg="transparent" > - + @@ -209,16 +209,9 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync } max={layout.role === "custom" ? baseBreakpoint - 1 : 32767} /> - form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)} - onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)} - /> - + {sourceLayout && ( )} + + form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)} + onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)} + /> + @@ -334,7 +336,7 @@ const GutterSettings = ({ left, right, columnCount, onLeftChange, onRightChange - + - + onChange(event.currentTarget.checked ? Math.min(2, max) : 0)} label={t(`layout.field.gutters.${side}.label`)} - description={t(`layout.field.gutters.${side}.description`)} /> {enabled && ( diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx index 609428b2f..734542221 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx @@ -53,7 +53,7 @@ export default async function BoardSettingsPage(props: Props) { } return ( - + {t("title", { boardName: capitalize(board.name) })} { - const t = useScopedI18n("management.page.settings.section.analytics"); + const t = useScopedI18n("management.page.settings.section"); return ( - - + + + + {t("analyticsDocumentation")} + + ); }; diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx index eee563069..242cd44c1 100644 --- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx @@ -1,11 +1,10 @@ import { notFound } from "next/navigation"; -import { Stack, Title } from "@mantine/core"; import { api } from "@homarr/api/server"; import { auth } from "@homarr/auth/next"; import { getScopedI18n } from "@homarr/translation/server"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; import { SettingsForm } from "./_components/settings-form"; export async function generateMetadata() { @@ -28,12 +27,8 @@ export default async function SettingsPage() { const tSettings = await getScopedI18n("management.page.settings"); return ( - <> - - - {tSettings("title")} - - - + + + ); } diff --git a/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx b/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx index d52825869..260ca8db3 100644 --- a/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx @@ -22,7 +22,6 @@ export default async function WorkshopPage() { return ( import("@homarr/spotlight/component"); -const SpotlightLoading = () => ( -
- - - -
-); -const Spotlight = dynamic(() => loadSpotlight().then(({ Spotlight: Component }) => Component), { - ssr: false, - loading: SpotlightLoading, -}); - -export const preloadSpotlight = () => void loadSpotlight().catch(() => undefined); - export const LazySpotlight = () => { const [isMounted, setIsMounted] = useState(false); - const [isPreloaded, setIsPreloaded] = useState(false); useHotkeys( isMounted @@ -49,41 +25,27 @@ export const LazySpotlight = () => { ); useEffect(() => { - let isActive = true; const mount = () => setIsMounted(true); window.addEventListener(spotlightOpenEvent, mount); if (hasPendingSpotlightOpen()) mount(); - const preload = () => { - void loadSpotlight().then( - () => { - if (isActive) setIsPreloaded(true); - }, - () => undefined, - ); - }; let idleId: number | undefined; const delayId = window.setTimeout(() => { - idleId = window.requestIdleCallback?.(preload, { timeout: 1_000 }); - if (idleId === undefined) preload(); + idleId = window.requestIdleCallback?.(mount, { timeout: 1_000 }); + if (idleId === undefined) mount(); }, 1_000); return () => { - isActive = false; window.removeEventListener(spotlightOpenEvent, mount); window.clearTimeout(delayId); if (idleId !== undefined) window.cancelIdleCallback?.(idleId); }; }, []); - return isMounted || isPreloaded ? ( + return isMounted ? ( <> - {isPreloaded &&