refactor(settings): move bundled widget settings of place (#486)

src/apps/seelen_rofi/modules/shared/store/app.ts

@@ -9,7 +9,7 @@ const initialState: LauncherState = {
   colors: UIColors.default().inner,
   apps: [],
   history: {},
-  settings: (await Settings.default()).inner.launcher,
+  settings: (await Settings.default()).launcher,
 };
 
 export const RootSlice = createSlice({

src/apps/seelen_rofi/modules/shared/store/infra.ts

@@ -26,9 +26,9 @@ async function initUIColors() {
 
 export async function initStore() {
   const dispatch = store.dispatch;
-  const settings = (await Settings.getAsync()).inner;
+  const settings = await Settings.getAsync();
 
-  i18n.changeLanguage(settings.language || undefined);
+  i18n.changeLanguage(settings.inner.language || undefined);
 
   dispatch(Actions.setSettings(settings.launcher));
   dispatch(Actions.setApps(await invoke(SeelenCommand.LauncherGetApps)));
@@ -37,7 +37,7 @@ export async function initStore() {
   LauncherHistory.onChange((history) => dispatch(Actions.setHistory(history.inner)));
   Settings.onChange((settings) => {
     i18n.changeLanguage(settings.inner.language || undefined);
-    dispatch(Actions.setSettings(settings.inner.launcher));
+    dispatch(Actions.setSettings(settings.launcher));
   });
 
   await initUIColors();

src/apps/seelen_wall/modules/shared/store/app.ts

@@ -7,7 +7,7 @@ import { StateBuilder } from '../../../../shared/StateBuilder';
 
 const initialState: RootState = {
   version: 0,
-  settings: (await Settings.default()).inner.wall,
+  settings: (await Settings.default()).wall,
   colors: UIColors.default().inner,
   stop: false,
 };

src/apps/seelen_wall/modules/shared/store/infra.ts

@@ -18,9 +18,9 @@ export async function initStore() {
   const webview = getCurrentWebview();
   const settings = await Settings.getAsync();
 
-  store.dispatch(Actions.setSettings(settings.inner.wall));
+  store.dispatch(Actions.setSettings(settings.wall));
   Settings.onChange((settings) => {
-    store.dispatch(Actions.setSettings(settings.inner.wall));
+    store.dispatch(Actions.setSettings(settings.wall));
   });
 
   webview.listen<boolean>(SeelenEvent.WallStop, ({ payload }) => {

src/apps/seelen_wm_v2/modules/shared/store/app.ts

@@ -8,7 +8,7 @@ import { StateBuilder } from '../../../../shared/StateBuilder';
 const initialState: RootState = {
   _version: 0,
   layout: null,
-  settings: (await Settings.default()).inner.windowManager,
+  settings: (await Settings.default()).windowManager,
   colors: UIColors.default().inner,
   activeWindow: 0,
   reservation: null,

src/apps/seelen_wm_v2/modules/shared/store/infra.ts

@@ -18,7 +18,7 @@ export const store = configureStore({
 });
 
 function setSettings(_settings: Settings) {
-  let settings = _settings.inner.windowManager;
+  let settings = _settings.windowManager;
   store.dispatch(Actions.setSettings(settings));
 
   const styles = document.documentElement.style;

src/apps/seelenweg/modules/shared/store/app.ts

@@ -14,7 +14,7 @@ const initialState: RootState = {
   itemsOnRight: [],
   focusedApp: null,
   isOverlaped: false,
-  settings: (await Settings.default()).inner.seelenweg,
+  settings: (await Settings.default()).seelenweg,
   mediaSessions: [],
   colors: UIColors.default().inner,
 };

src/apps/seelenweg/modules/shared/store/infra.ts

@@ -99,11 +99,10 @@ function loadSettingsCSS(settings: SeelenWegSettings) {
   }
 }
 
-function loadSettingsToStore(_settings: Settings) {
-  const settings = _settings.inner;
-  i18n.changeLanguage(settings.language || undefined);
+function loadSettingsToStore(settings: Settings) {
+  i18n.changeLanguage(settings.inner.language || undefined);
   store.dispatch(RootActions.setSettings(settings.seelenweg));
-  store.dispatch(RootActions.setDevTools(settings.devTools));
+  store.dispatch(RootActions.setDevTools(settings.inner.devTools));
   loadSettingsCSS(settings.seelenweg);
 }
 

src/apps/settings/modules/ByMonitor/infra/WidgetSettingsModal.tsx

@@ -1,6 +1,5 @@
 // This file is for testing, not final implementation yet.
 
-import { MonitorConfiguration } from '@seelen-ui/lib/types';
 import { Button, Modal, Select, Switch } from 'antd';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,9 +26,7 @@ export function WidgetSettingsModal({ widgetId, monitorId, settings: declaration
 
   const settingsByMonitor = useSelector(newSelectors.monitorsV2);
   const monitorConfig = settingsByMonitor[monitorId];
-  const widgetConfig = monitorConfig?.[widgetId as keyof MonitorConfiguration] as
-    | Record<string, any>
-    | undefined;
+  const widgetConfig = monitorConfig?.byWidget[widgetId];
 
   const dispatch = useDispatch();
 
@@ -39,9 +36,11 @@ export function WidgetSettingsModal({ widgetId, monitorId, settings: declaration
         ...settingsByMonitor,
         [monitorId]: {
           ...monitorConfig!,
-          [widgetId]: {
-            ...widgetConfig!,
-            [key]: value,
+          byWidget: {
+            [widgetId]: {
+              ...widgetConfig!,
+              [key]: value,
+            },
           },
         },
       }),

src/apps/settings/modules/ByMonitor/infra/index.tsx

@@ -1,12 +1,9 @@
-import { ConnectedMonitor, Rect } from '@seelen-ui/lib';
-import { MonitorConfiguration as IMonitorConfiguration } from '@seelen-ui/lib/types';
-import { Button, Modal, Switch } from 'antd';
-import { useState } from 'react';
+import { ConnectedMonitor, SeelenToolbarWidgetId, SeelenWallWidgetId, SeelenWegWidgetId, SeelenWindowManagerWidgetId } from '@seelen-ui/lib';
+import { MonitorConfiguration as IMonitorConfiguration, WidgetId } from '@seelen-ui/lib/types';
+import { Switch } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { WindowManagerSpacingSettings } from '../../WindowManager/main/infra/GlobalPaddings';
-
 import { newSelectors, RootActions } from '../../shared/store/app/reducer';
 import { WegSettingsDeclaration } from '../application';
 import { Monitor } from 'src/apps/settings/components/monitor';
@@ -21,90 +18,17 @@ interface MonitorConfigProps {
   onChange: (monitor: IMonitorConfiguration) => void;
 }
 
-export function MoreMonitorConfig({ device, config, onChange }: MonitorConfigProps) {
-  const [open, setOpen] = useState(false);
-  const { t } = useTranslation();
-
-  function onChangeGap(v: number | null) {
-    onChange({
-      ...config,
-      wm: {
-        ...config.wm,
-        gap: v ? Math.round(v) : null,
-      },
-    });
-  }
-
-  function onChangePadding(v: number | null) {
-    onChange({
-      ...config,
-      wm: {
-        ...config.wm,
-        padding: v ? Math.round(v) : null,
-      },
-    });
-  }
-
-  function onChangeMargins(side: keyof Rect, v: number | null) {
-    onChange({
-      ...config,
-      wm: {
-        ...config.wm,
-        margin: {
-          ...(config.wm.margin || new Rect()),
-          [side]: Math.round(v || 0),
-        },
-      },
-    });
-  }
-
-  function onClear() {
-    onChange({
-      ...config,
-      wm: {
-        ...config.wm,
-        gap: null,
-        padding: null,
-        margin: null,
-      },
-    });
-  }
-
-  // todo(eythan) more settings will be disabled until we have a finished implementation
-  return (
-    <>
-      <Button type="default" onClick={() => setOpen(true)} disabled>
-        {t('more')}
-      </Button>
-      <Modal
-        title={t('monitors_configurations.label').replace('{{index}}', device.name)}
-        open={open}
-        onCancel={() => setOpen(false)}
-        centered
-        footer={null}
-      >
-        <WindowManagerSpacingSettings
-          gap={config.wm.gap}
-          padding={config.wm.padding}
-          margins={config.wm.margin}
-          onChangeGap={onChangeGap}
-          onChangePadding={onChangePadding}
-          onChangeMargins={onChangeMargins}
-          onClear={onClear}
-        />
-      </Modal>
-    </>
-  );
-}
-
 export function MonitorConfig({ device, config, onChange }: MonitorConfigProps) {
   const { t } = useTranslation();
 
-  function onToggle(key: string, value: boolean) {
+  function onToggle(key: WidgetId, value: boolean) {
     onChange({
       ...config,
-      [key]: {
-        enabled: value,
+      byWidget: {
+        ...config.byWidget,
+        [key]: {
+          enabled: value,
+        },
       },
     });
   }
@@ -127,19 +51,23 @@ export function MonitorConfig({ device, config, onChange }: MonitorConfigProps)
           <SettingsGroup>
             <SettingsOption>
               <b>{t('toolbar.enable')}</b>
-              <Switch value={config.tb.enabled} onChange={(v) => onToggle('tb', v)} />
+              <Switch value={!!config.byWidget[SeelenToolbarWidgetId]?.enabled} onChange={(v) => onToggle(SeelenToolbarWidgetId, v)} />
             </SettingsOption>
             <SettingsOption>
               <b>{t('wm.enable')}</b>
-              <Switch value={config.wm.enabled} onChange={(v) => onToggle('wm', v)} disabled />
+              <Switch value={!!config.byWidget[SeelenWindowManagerWidgetId]?.enabled} onChange={(v) => onToggle(SeelenWindowManagerWidgetId, v)} disabled />
             </SettingsOption>
             <SettingsOption>
               <b>{t('header.labels.seelen_weg')}</b>
-              <WidgetSettingsModal widgetId="weg" monitorId={device.id} settings={WegSettingsDeclaration} />
+              <WidgetSettingsModal
+                widgetId={SeelenWegWidgetId}
+                monitorId={device.id}
+                settings={WegSettingsDeclaration}
+              />
             </SettingsOption>
             <SettingsOption>
               <b>{t('wall.enable')}</b>
-              <Switch value={config.wall.enabled} onChange={(v) => onToggle('wall', v)} disabled />
+              <Switch value={!!config.byWidget[SeelenWallWidgetId]?.enabled} onChange={(v) => onToggle(SeelenWallWidgetId, v)} disabled />
             </SettingsOption>
           </SettingsGroup>
         </div>

src/apps/settings/modules/WindowManager/main/app.ts

@@ -1,10 +1,11 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { WindowManagerSettings } from '@seelen-ui/lib/types';
 
 import { defaultSettings } from '../../shared/store/app/default';
 import { matcher, reducersFor, selectorsFor } from '../../shared/utils/app';
 import { BorderSlice } from '../border/app';
 
-let initialState = defaultSettings.inner.windowManager;
+let initialState: WindowManagerSettings = defaultSettings.windowManager;
 
 export const SeelenManagerSlice = createSlice({
   name: 'windowManager',

src/apps/settings/modules/fancyToolbar/app.ts

@@ -1,9 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { FancyToolbarSettings } from '@seelen-ui/lib/types';
 
 import { defaultSettings } from '../shared/store/app/default';
 import { reducersFor } from '../shared/utils/app';
 
-const initialState = defaultSettings.inner.fancyToolbar;
+const initialState: FancyToolbarSettings = defaultSettings.fancyToolbar;
 
 export const FancyToolbarSlice = createSlice({
   name: 'fancyToolbar',

src/apps/settings/modules/seelenweg/app.ts

@@ -4,7 +4,7 @@ import { SeelenWegSettings } from '@seelen-ui/lib/types';
 import { defaultSettings } from '../shared/store/app/default';
 import { reducersFor, selectorsFor } from '../shared/utils/app';
 
-const initialState: SeelenWegSettings = defaultSettings.inner.seelenweg;
+const initialState: SeelenWegSettings = defaultSettings.seelenweg;
 
 export const SeelenWegSlice = createSlice({
   name: 'seelenweg',

src/apps/settings/modules/shared/store/app/StateBridge.ts

@@ -1,27 +1,17 @@
+import {
+  SeelenLauncherWidgetId,
+  SeelenToolbarWidgetId,
+  SeelenWallWidgetId,
+  SeelenWegWidgetId,
+  SeelenWindowManagerWidgetId,
+} from '@seelen-ui/lib';
 import { Settings } from '@seelen-ui/lib/types';
-import { pick } from 'lodash';
+import { cloneDeep, pick } from 'lodash';
 
 import { RootState } from '../domain';
 
-import { UserSettings } from '../../../../../../shared.interfaces';
-
-export const StaticSettingsToState = (userSettings: UserSettings, state: RootState): RootState => {
-  const { jsonSettings, yamlSettings, themes, layouts, placeholders } = userSettings;
-  return {
-    ...state,
-    ...jsonSettings,
-    availableThemes: themes,
-    availableLayouts: layouts,
-    availablePlaceholders: placeholders,
-    appsConfigurations: yamlSettings,
-  };
-};
-
 export const StateToJsonSettings = (state: RootState): Settings => {
-  return pick(state, [
-    'fancyToolbar',
-    'windowManager',
-    'seelenweg',
+  let settings = pick(cloneDeep(state), [
     'iconPacks',
     'selectedThemes',
     'monitorsV2',
@@ -32,8 +22,15 @@ export const StateToJsonSettings = (state: RootState): Settings => {
     'dateFormat',
     'virtualDesktopStrategy',
     'updater',
-    'wall',
-    'launcher',
-    'custom',
+    'byWidget',
   ]);
+
+  // migration since v2.1.0
+  settings.byWidget[SeelenToolbarWidgetId] = state.fancyToolbar;
+  settings.byWidget[SeelenLauncherWidgetId] = state.launcher;
+  settings.byWidget[SeelenWallWidgetId] = state.wall;
+  settings.byWidget[SeelenWegWidgetId] = state.seelenweg;
+  settings.byWidget[SeelenWindowManagerWidgetId] = state.windowManager;
+
+  return settings;
 };

src/apps/settings/modules/shared/store/app/reducer.ts

@@ -25,9 +25,9 @@ const initialState: RootState = {
   autostart: null,
   route: Route.HOME,
   fancyToolbar: FancyToolbarSlice.getInitialState(),
-  seelenweg: defaultSettings.inner.seelenweg,
-  wall: defaultSettings.inner.wall,
-  launcher: defaultSettings.inner.launcher,
+  seelenweg: defaultSettings.seelenweg,
+  wall: defaultSettings.wall,
+  launcher: defaultSettings.launcher,
   windowManager: SeelenManagerSlice.getInitialState(),
   toBeSaved: false,
   toBeRestarted: false,
@@ -53,7 +53,7 @@ const initialState: RootState = {
   plugins: [],
   widgets: [],
   profiles: [],
-  custom: {},
+  byWidget: defaultSettings.inner.byWidget,
 };
 
 function toBeSaved<S, A, R>(fn: (state: S, action: A) => R) {

src/apps/settings/modules/shared/store/domain.ts

@@ -1,5 +1,5 @@
 import { ConnectedMonitor, IUIColors } from '@seelen-ui/lib';
-import { AppConfig, IconPack, Placeholder, Plugin, Profile, Settings, Theme, Widget, WindowManagerLayout } from '@seelen-ui/lib/types';
+import { AppConfig, FancyToolbarSettings, IconPack, Placeholder, Plugin, Profile, SeelenLauncherSettings, SeelenWallSettings, SeelenWegSettings, Settings, Theme, Widget, WindowManagerLayout, WindowManagerSettings } from '@seelen-ui/lib/types';
 
 import { Route } from '../../../components/navigation/routes';
 
@@ -19,4 +19,10 @@ export interface RootState extends Settings {
   widgets: Widget[];
   profiles: Profile[];
   connectedMonitors: ConnectedMonitor[];
+  // migrated since v2.1.0
+  fancyToolbar: FancyToolbarSettings;
+  seelenweg: SeelenWegSettings;
+  wall: SeelenWallSettings;
+  launcher: SeelenLauncherSettings;
+  windowManager: WindowManagerSettings;
 }