+ {t('customCSS.label')}
+
+ {t('customCSS.description')}
+
+
+
+ ) =>
+ setNonDebouncedCustomCSS(event.target.value.trim())
+ }
+ language="css"
+ data-color-mode={colorScheme}
+ minHeight={codeEditorHeight}
+ />
+
+ {codeIsDirty && (
+
+
+
+ {t('customCSS.applying')}
+
+
+ )}
+
+
);
};
+
+const useStyles = createStyles(({ colors, colorScheme, radius }) => ({
+ codeEditorFooter: {
+ borderBottomLeftRadius: radius.sm,
+ borderBottomRightRadius: radius.sm,
+ backgroundColor: colorScheme === 'dark' ? colors.dark[7] : undefined,
+ },
+ codeEditorRoot: {
+ borderColor: colorScheme === 'dark' ? colors.dark[4] : colors.gray[4],
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderRadius: radius.sm,
+ },
+ codeEditor: {
+ backgroundColor: colorScheme === 'dark' ? colors.dark[6] : 'white',
+ fontSize: 12,
+
+ '& ::placeholder': {
+ color: colorScheme === 'dark' ? colors.dark[3] : colors.gray[5],
+ },
+ },
+}));
diff --git a/src/components/Settings/Customization/Theme/OpacitySelector.tsx b/src/components/Settings/Customization/Theme/OpacitySelector.tsx
index f0eaf3bd1..35821aca4 100644
--- a/src/components/Settings/Customization/Theme/OpacitySelector.tsx
+++ b/src/components/Settings/Customization/Theme/OpacitySelector.tsx
@@ -4,15 +4,11 @@ import { useState } from 'react';
import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
-interface OpacitySelectorProps {
- defaultValue: number | undefined;
-}
-
-export function OpacitySelector({ defaultValue }: OpacitySelectorProps) {
- const [opacity, setOpacity] = useState(defaultValue || 100);
+export function DashboardTilesOpacitySelector() {
+ const { config, name: configName } = useConfigContext();
+ const [opacity, setOpacity] = useState(config?.settings.customization.appOpacity || 100);
const { t } = useTranslation('settings/customization/opacity-selector');
- const { name: configName } = useConfigContext();
const updateConfig = useConfigStore((x) => x.updateConfig);
if (!configName) return null;
diff --git a/src/components/Settings/Customization/Theme/ShadeSelector.tsx b/src/components/Settings/Customization/Theme/ShadeSelector.tsx
index 5611581ae..c00e81021 100644
--- a/src/components/Settings/Customization/Theme/ShadeSelector.tsx
+++ b/src/components/Settings/Customization/Theme/ShadeSelector.tsx
@@ -15,17 +15,13 @@ import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import { useColorTheme } from '../../../../tools/color';
-interface ShadeSelectorProps {
- defaultValue: MantineTheme['primaryShade'] | undefined;
-}
-
-export function ShadeSelector({ defaultValue }: ShadeSelectorProps) {
+export function ShadeSelector() {
const { t } = useTranslation('settings/customization/shade-selector');
- const [shade, setShade] = useState(defaultValue);
+ const { config, name: configName } = useConfigContext();
+ const [shade, setShade] = useState(config?.settings.customization.colors.shade);
const [popoverOpened, popover] = useDisclosure(false);
const { primaryColor, setPrimaryShade } = useColorTheme();
- const { name: configName } = useConfigContext();
const updateConfig = useConfigStore((x) => x.updateConfig);
const theme = useMantineTheme();
diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
index bee5be707..794d992be 100644
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
@@ -17,8 +17,11 @@ import { useCardStyles } from '../../../useCardStyles';
export const ToggleEditModeAction = () => {
const { enabled, toggleEditMode } = useEditModeStore();
const namedWrapperColumnCount = useNamedWrapperColumnCount();
- const { t } = useTranslation('layout/header/actions/toggle-edit-mode');
- const translatedSize = t(`screenSizes.${namedWrapperColumnCount}`);
+ const { t } = useTranslation(['layout/header/actions/toggle-edit-mode', 'common']);
+ const translatedSize =
+ namedWrapperColumnCount !== null
+ ? t(`common:breakPoints.${namedWrapperColumnCount}`)
+ : t('common:loading');
const smallerThanSm = useScreenSmallerThan('sm');
const { config } = useConfigContext();
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 187674d80..8955edf78 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,6 +1,5 @@
import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
import { REPO_URL } from '../../../../data/constants';
import DockerMenuButton from '../../../modules/Docker/DockerModule';
import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
diff --git a/src/constants/gridstack-breakpoints.ts b/src/constants/gridstack-breakpoints.ts
new file mode 100644
index 000000000..966670d9f
--- /dev/null
+++ b/src/constants/gridstack-breakpoints.ts
@@ -0,0 +1,4 @@
+export const GridstackBreakpoints = {
+ large: 1400,
+ medium: 768,
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 204db7734..b20595f4f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -18,7 +18,6 @@ import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsE
import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal';
import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal';
import { ConfigProvider } from '../config/provider';
-import '../styles/global.scss';
import { ColorTheme } from '../tools/color';
import { queryClient } from '../tools/queryClient';
import { theme } from '../tools/theme';
@@ -28,6 +27,9 @@ import {
} from '../tools/server/getPackageVersion';
import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
+import '../styles/global.scss';
+import '@uiw/react-textarea-code-editor/dist.css';
+
function App(
this: any,
props: AppProps & { colorScheme: ColorScheme; packageAttributes: ServerSidePackageAttributesType }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d99f2f6b6..ce1377510 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -18,7 +18,7 @@
}
// Styling for grid-stack main area
-@for $i from 1 to 13 {
+@for $i from 1 to 21 {
.grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
.grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
.grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
@@ -30,7 +30,7 @@
.grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: calc(#{$i}px * #{var(--gridstack-widget-width)}) }
}
-@for $i from 1 to 13 {
+@for $i from 1 to 21 {
.grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
}
@@ -56,7 +56,7 @@
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-max-h="#{$i}"] { max-height: 128px * $i }
}
-@for $i from 1 to 13 {
+@for $i from 1 to 3 {
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-x="#{$i}"] { left: 128px * $i }
}
@@ -91,4 +91,4 @@
.gridstack-empty-wrapper {
height: 0px;
min-height: 0px !important;
-}
\ No newline at end of file
+}
diff --git a/src/tools/client/arrays.ts b/src/tools/client/arrays.ts
new file mode 100644
index 000000000..8db957fee
--- /dev/null
+++ b/src/tools/client/arrays.ts
@@ -0,0 +1 @@
+export const createDummyArray = (countItems: number) => Array.from(Array(countItems).keys());
diff --git a/src/tools/client/time.ts b/src/tools/client/time.ts
new file mode 100644
index 000000000..b42c428ae
--- /dev/null
+++ b/src/tools/client/time.ts
@@ -0,0 +1,4 @@
+export const sleep = (ms: number) =>
+ new Promise((r) => {
+ setTimeout(r, ms);
+ });
diff --git a/src/tools/server/translation-namespaces.ts b/src/tools/server/translation-namespaces.ts
index 6748c77dc..dab3acea9 100644
--- a/src/tools/server/translation-namespaces.ts
+++ b/src/tools/server/translation-namespaces.ts
@@ -13,11 +13,13 @@ export const dashboardNamespaces = [
'settings/general/internationalization',
'settings/general/search-engine',
'settings/general/widget-positions',
+ 'settings/customization/general',
'settings/customization/color-selector',
'settings/customization/page-appearance',
'settings/customization/shade-selector',
'settings/customization/app-width',
'settings/customization/opacity-selector',
+ 'settings/customization/gridstack',
'modules/common',
'modules/date',
'modules/calendar',
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 3cf2642aa..4afa31f8b 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -44,6 +44,13 @@ export interface CustomizationSettingsType {
customCss?: string;
colors: ColorsCustomizationSettingsType;
appOpacity?: number;
+ gridstack?: GridstackSettingsType;
+}
+
+export interface GridstackSettingsType {
+ columnCountSmall: number; // default: 3
+ columnCountMedium: number; // default: 6
+ columnCountLarge: number; // default: 12
}
interface LayoutCustomizationSettingsType {
diff --git a/src/widgets/download-speed/TorrentNetworkTrafficTile.tsx b/src/widgets/download-speed/TorrentNetworkTrafficTile.tsx
index 5aaadb8b4..4a0feff0a 100644
--- a/src/widgets/download-speed/TorrentNetworkTrafficTile.tsx
+++ b/src/widgets/download-speed/TorrentNetworkTrafficTile.tsx
@@ -3,7 +3,6 @@ import {
Box,
Card,
Group,
- Indicator,
Stack,
Text,
Title,
@@ -41,7 +40,7 @@ const definition = defineWidget({
component: TorrentNetworkTrafficTile,
});
-export type ITorrentNetworkTraffic = IWidget