Merge branch 'dev' of https://github.com/ajnart/homarr into dev

public/locales/en/common.json

@@ -9,6 +9,7 @@
   "version": "Version",
   "changePosition": "Change position",
   "remove": "Remove",
+  "removeConfirm": "Are you sure that you want to remove {{item}} ?",
   "sections": {
     "settings": "Settings",
     "dangerZone": "Danger zone"

public/locales/en/modules/dashdot.json

@@ -19,10 +19,6 @@
       "url": {
         "label": "Dash. URL"
       }
-    },
-    "remove": {
-      "title": "Remove Dash. widget",
-      "confirm": "Are you sure, that you want to remove the Dash. widget?"
     }
   },
   "card": {

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -58,14 +58,6 @@ export const WidgetsEditModal = ({
     });
   };
 
-  const getMutliselectData = (option: string) => {
-    const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
-    if (!Widgets) return [];
-
-    const options = currentWidgetDefinition.options as any;
-    return options[option]?.data ?? [];
-  };
-
   const handleSave = () => {
     updateConfig(
       configName,
@@ -85,9 +77,9 @@ export const WidgetsEditModal = ({
 
   return (
     <Stack>
-      {items.map(([key, defaultValue], index) => {
+      {items.map(([key, _], index) => {
         const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue;
-        const value = moduleProperties[key] ?? defaultValue;
+        const value = moduleProperties[key] ?? option.defaultValue;
 
         if (!option) {
           return (
@@ -183,10 +175,10 @@ function WidgetOptionTypeSwitch(
     case 'slider':
       return (
         <Stack spacing="xs">
-          <Text>{t(`descriptor.settings.${key}.label`)}</Text>
           <Slider
             color={primaryColor}
             key={`${option.type}-${index}`}
+            label={value}
             value={value as number}
             min={option.min}
             max={option.max}

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -36,7 +36,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   const handleDeleteClick = () => {
     openContextModalGeneric<WidgetsRemoveModalInnerProps>({
       modal: 'integrationRemove',
-      title: <Title order={4}>{t('descriptor.remove.title')}</Title>,
+      title: <Title order={4}>{t('common:remove')}</Title>,
       innerProps: {
         widgetId: integration,
       },

src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
@@ -32,7 +32,11 @@ export const WidgetsRemoveModal = ({
 
   return (
     <Stack>
-      <Text>{t('descriptor.remove.confirm')}</Text>
+      <Trans
+        i18nKey="common:removeConfirm"
+        components={[<Text weight={500} />]}
+        values={{ item: innerProps.widgetId }}
+      />
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">
           {t('common:cancel')}

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@mantine/core';
+import { Card, Group, Stack } from '@mantine/core';
 import { RefObject } from 'react';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useGridstack } from '../gridstack/use-gridstack';
@@ -9,18 +9,24 @@ interface DashboardSidebarProps extends DashboardSidebarInnerProps {
   isGridstackReady: boolean;
 }
 
-export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => (
-  <Card
-    withBorder
-    w={300}
-    style={{
-      background: 'none',
-      borderStyle: 'dashed',
-    }}
-  >
-    {isGridstackReady && <SidebarInner location={location} />}
-  </Card>
-);
+export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => {
+  const {
+    cx,
+    classes: { card: cardClass },
+  } = useCardStyles(false);
+
+  return (
+    <Card
+      p={0}
+      m={0}
+      radius="lg"
+      className={cardClass}
+      w={300}
+    >
+      {isGridstackReady && <SidebarInner location={location} />}
+    </Card>
+  );
+};
 
 interface DashboardSidebarInnerProps {
   location: 'right' | 'left';
@@ -37,17 +43,18 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
   } = useCardStyles(false);
 
   return (
-    <Card withBorder mih="100%" p={0} radius="lg" className={cardClass} ref={refs.wrapper}>
-      <div
-        className="grid-stack grid-stack-sidebar"
-        style={{ transitionDuration: '0s', height: '100%' }}
-        data-sidebar={location}
-        // eslint-disable-next-line react/no-unknown-property
-        gs-min-row={minRow}
-      >
-        <WrapperContent apps={apps} refs={refs} widgets={widgets} />
-      </div>
-    </Card>
+    <div
+      ref={refs.wrapper}
+      className="grid-stack grid-stack-sidebar"
+      style={{
+        transitionDuration: '0s',
+      }}
+      data-sidebar={location}
+      // eslint-disable-next-line react/no-unknown-property
+      gs-min-row={minRow}
+    >
+      <WrapperContent apps={apps} refs={refs} widgets={widgets} />
+    </div>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import { useMantineTheme } from '@mantine/core';
 import create from 'zustand';
+import { useConfigContext } from '../../../../config/provider';
 
 export const useGridstackStore = create<GridstackStoreType>((set, get) => ({
   mainAreaWidth: null,
@@ -27,11 +28,16 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
 };
 
 export const useWrapperColumnCount = () => {
+  const { config } = useConfigContext();
+  const numberOfSidebars =
+    (config?.settings.customization.layout.enabledLeftSidebar ? 1 : 0) +
+    (config?.settings.customization.layout.enabledRightSidebar ? 1 : 0);
+
   switch (useNamedWrapperColumnCount()) {
     case 'large':
-      return 12;
+      return 15 - numberOfSidebars * 2;
     case 'medium':
-      return 6;
+      return 9 - numberOfSidebars * 2;
     case 'small':
       return 3;
     default: