From 5a2653a18921990baff883429f1000eb09bf3f52 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 13 Jan 2023 10:57:13 +0900
Subject: [PATCH 1/4] Fix widget delete modal

---
 public/locales/en/common.json                             | 1 +
 public/locales/en/modules/dashdot.json                    | 4 ----
 src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx    | 2 +-
 .../Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx        | 8 ++++++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 9b3388f6f..5c14a9ca6 100644
--- a/public/locales/en/common.json
+++ b/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"
diff --git a/public/locales/en/modules/dashdot.json b/public/locales/en/modules/dashdot.json
index 3b628ebb3..8a373c334 100644
--- a/public/locales/en/modules/dashdot.json
+++ b/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": {
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
index 7a380794c..01b8411b2 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/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,
       },
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
index 59c20f394..f92e34380 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
+++ b/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')}

From e8554890e0fdc690bba1b91b3d9e235b655c4262 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 13 Jan 2023 10:57:57 +0900
Subject: [PATCH 2/4] Make column size dependant on number of sidebars

---
 src/components/Dashboard/Wrappers/gridstack/store.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx
index 6df8c2f75..81c32514f 100644
--- a/src/components/Dashboard/Wrappers/gridstack/store.tsx
+++ b/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:

From 90ee7f2cc7be4ad6a2e1cb5ccc51f5bab1decb55 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 13 Jan 2023 14:12:09 +0900
Subject: [PATCH 3/4] Fix sidebar styling

---
 .../Dashboard/Wrappers/Sidebar/Sidebar.tsx    | 55 +++++++++++--------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx b/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
index a8bd89ebe..183ae4368 100644
--- a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
+++ b/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>
   );
 };
 

From 454d5e53c3b8248fb0f40862c4122988281db3fc Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 13 Jan 2023 18:46:59 +0900
Subject: [PATCH 4/4] fix defaultValue on widget options

---
 .../Dashboard/Tiles/Widgets/WidgetsEditModal.tsx   | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index 15826acb1..73a8110d3 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/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}