✨ Custom column counts for gridstack ajnart#613 ajnart#660

next.config.js

@@ -1,14 +1,19 @@
 const { i18n } = require('./next-i18next.config');
 
+const removeImports = require('next-remove-imports')();
+
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
-module.exports = withBundleAnalyzer({
-  images: {
-    domains: ['cdn.jsdelivr.net'],
-  },
-  reactStrictMode: true,
-  output: 'standalone',
-  i18n,
-});
+module.exports = withBundleAnalyzer(
+  removeImports({
+    experimental: { esmExternals: true },
+    images: {
+      domains: ['cdn.jsdelivr.net'],
+    },
+    reactStrictMode: true,
+    output: 'standalone',
+    i18n,
+  })
+);

package.json

@@ -45,6 +45,7 @@
     "@tabler/icons": "^1.106.0",
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-query-devtools": "^4.24.4",
+    "@uiw/react-textarea-code-editor": "v1.4.4",
     "axios": "^0.27.2",
     "consola": "^2.15.3",
     "cookies-next": "^2.1.1",
@@ -59,6 +60,7 @@
     "js-file-download": "^0.4.12",
     "next": "^13.1.6",
     "next-i18next": "^11.3.0",
+    "next-remove-imports": "^1.0.8",
     "nzbget-api": "^0.0.3",
     "ping": "^0.4.2",
     "prism-react-renderer": "^1.3.5",
@@ -81,6 +83,8 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-transform-remove-imports": "^1.7.0",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

public/locales/en/common.json

@@ -24,5 +24,11 @@
     "seconds": "seconds",
     "minutes": "minutes",
     "hours": "hours"
+  },
+  "loading": "Loading...",
+  "breakPoints": {
+    "small": "small",
+    "medium": "medium",
+    "large": "large"
   }
 }

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -7,10 +7,5 @@
     "popover": {
         "title": "Edit mode is enabled for  <1>{{size}}</1> size",
         "text": "You can adjust and configure your apps now. Changes are <strong>not saved</strong> until you exit edit mode"
-    },
-    "screenSizes": {
-        "small": "small",
-        "medium": "medium",
-        "large": "large"
     }
 }

public/locales/en/layout/modals/about.json

@@ -1,7 +1,13 @@
 {
 	"description": "Homarr is a <strong>sleek</strong>, <strong>modern</strong> dashboard that puts all of your apps and services at your fingertips. With Homarr, you can access and control everything in one convenient location. Homarr seamlessly integrates with the apps you've added, providing you with valuable information and giving you complete control. Installation is a breeze, and Homarr supports a wide range of deployment methods.",
-	"i18n": "Loaded I18n translation namespaces",
-	"locales": "Configured I18n locales",
 	"contact": "Having trouble or questions? Connect with us!",
-	"addToDashboard": "Add to Dashboard"
-}
+	"addToDashboard": "Add to Dashboard",
+	"metrics": {
+		"configurationSchemaVersion": "Configuration schema version",
+		"configurationsCount": "Available configurations",
+		"version": "Version",
+		"nodeEnvironment": "Node environment",
+		"i18n": "Loaded I18n translation namespaces",
+		"locales": "Configured I18n locales"
+	}
+}

public/locales/en/settings/common.json

@@ -18,7 +18,11 @@
   },
   "grow": "Grow grid (take all space)",
   "layout": {
-    "title": "Dashboard layout",
+    "preview": {
+      "title": "Preview",
+      "subtitle": "Changes will be saved automatically"
+    },
+    "divider": "Layout options",
     "main": "Main",
     "sidebar": "Sidebar",
     "cannotturnoff": "Cannot be turned off",

public/locales/en/settings/customization/color-selector.json

@@ -1,3 +1,4 @@
 {
+  "colors": "Colors",
   "suffix": "{{color}} color"
 }

public/locales/en/settings/customization/general.json

@@ -0,0 +1,21 @@
+{
+  "text": "Customizations allow you to configure and adjust your experience with Homarr to your preferences.",
+  "accordeon": {
+    "layout": {
+      "name": "Layout",
+      "description": "Enable and disable elements on your header and dashboard tiles"
+    },
+    "gridstack": {
+      "name": "Gridstack",
+      "description": "Customize the behaviour and columns of your dashboard area"
+    },
+    "pageMetadata": {
+      "name": "Page Metadata",
+      "description": "Adjust titles, logo and PWA"
+    },
+    "appereance": {
+      "name": "Appereance",
+      "description": "Customize the background, colors and apps appereance"
+    }
+  }
+}

public/locales/en/settings/customization/gridstack.json

@@ -0,0 +1,10 @@
+{
+  "columnsCount": {
+    "labelPreset": "Columns in {{size}} size",
+    "descriptionPreset": "Number of columns when the screen is less than {{pixels}} pixels wide",
+    "descriptionExceedsPreset": "Number of columns when the screen size exceeds {{pixels}} pixels"
+  },
+  "unsavedChanges": "You have unsaved changes. Click the Apply changes button below to apply and save.",
+  "applyChanges": "Apply changes",
+  "defaultValues": "Default values"
+}

public/locales/en/settings/customization/page-appearance.json

@@ -1,22 +1,28 @@
 {
   "pageTitle": {
-    "label": "Page Title"
+    "label": "Page Title",
+    "description": "The dashboard title at the top left"
   },
   "metaTitle": {
-    "label": "Meta Title"
+    "label": "Meta Title",
+    "description": "The title, that is being displayed as your tab name"
   },
   "logo": {
-    "label": "Logo"
+    "label": "Logo",
+    "description": "The dashboard logo at the top left"
   },
   "favicon": {
-    "label": "Favicon"
+    "label": "Favicon",
+    "description": "The icon, that is being used in front of your tab name"
   },
   "background": {
     "label": "Background"
   },
   "customCSS": {
     "label": "Custom CSS",
-    "placeholder": "Custom CSS will be applied last"
+    "description": "Customize all elements on your dashboard, only recommended for experienced users",
+    "placeholder": "Custom CSS will be applied last",
+    "applying": "Applying CSS..."
   },
   "buttons": {
     "submit": "Submit"

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -82,7 +82,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
                   <ActionIcon className={classes.informationIcon} variant="default">
                     {item.icon}
                   </ActionIcon>
-                  {t(item.label)}
+                  {t(`layout/modals/about:metrics.${item.label}`)}
                 </Group>
               </td>
               <td className={classes.informationTableColumn}>{item.content}</td>
@@ -151,7 +151,6 @@ interface ExtendedInitOptions extends InitOptions {
 }
 
 const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
-  // TODO: Fix this to not request. Pass it as a prop.
   const colorGradiant = usePrimaryGradient();
   const { attributes } = usePackageAttributesStore();
 
@@ -168,7 +167,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       ...items,
       {
         icon: <IconLanguage size={20} />,
-        label: 'layout/modals/about:i18n',
+        label: 'i18n',
         content: (
           <Badge variant="gradient" gradient={colorGradiant}>
             {usedI18nNamespaces.length}
@@ -177,7 +176,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       },
       {
         icon: <IconVocabulary size={20} />,
-        label: 'layout/modals/about:locales',
+        label: 'locales',
         content: (
           <Badge variant="gradient" gradient={colorGradiant}>
             {initOptions.locales.length}
@@ -190,7 +189,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
   items = [
     {
       icon: <IconSchema size={20} />,
-      label: 'Configuration schema version',
+      label: 'configurationSchemaVersion',
       content: (
         <Badge variant="gradient" gradient={colorGradiant}>
           {configVersion}
@@ -199,7 +198,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
     },
     {
       icon: <IconFile size={20} />,
-      label: 'Available configurations',
+      label: 'configurationsCount',
       content: (
         <Badge variant="gradient" gradient={colorGradiant}>
           {configs.length}
@@ -249,7 +248,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
     },
     {
       icon: <IconAnchor size={20} />,
-      label: 'Node environment',
+      label: 'nodeEnvironment',
       content: (
         <Badge variant="gradient" gradient={colorGradiant}>
           {attributes.environment}

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -1,5 +1,7 @@
 import { useMantineTheme } from '@mantine/core';
 import create from 'zustand';
+import { useConfigContext } from '../../../../config/provider';
+import { GridstackBreakpoints } from '../../../../constants/gridstack-breakpoints';
 
 export const useGridstackStore = create<GridstackStoreType>((set, get) => ({
   mainAreaWidth: null,
@@ -27,18 +29,28 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
 };
 
 export const useWrapperColumnCount = () => {
+  const { config } = useConfigContext();
+
+  if (!config) {
+    return null;
+  }
+
   switch (useNamedWrapperColumnCount()) {
     case 'large':
-      return 12;
+      return config.settings.customization.gridstack?.columnCountLarge ?? 12;
     case 'medium':
-      return 6;
+      return config.settings.customization.gridstack?.columnCountMedium ?? 6;
     case 'small':
-      return 3;
+      return config.settings.customization.gridstack?.columnCountSmall ?? 3;
     default:
       return null;
   }
 };
 
 function getCurrentShapeSize(size: number) {
-  return size >= 1400 ? 'lg' : size >= 768 ? 'md' : 'sm';
+  return size >= GridstackBreakpoints.large
+    ? 'lg'
+    : size >= GridstackBreakpoints.medium
+    ? 'md'
+    : 'sm';
 }