Resolution, tablet, orientation change propagation

src/apps/seelenweg/modules/bar/index.tsx

@@ -57,6 +57,7 @@ export function SeelenWeg() {
 
   const settings = useSelector(Selectors.settings);
   const isOverlaped = useSelector(Selectors.isOverlaped);
+  const monitorInfo = useSelector(Selectors.monitorInfo);
 
   const pinnedOnLeft = useSelector(Selectors.itemsOnLeft);
   const pinnedOnCenter = useSelector(Selectors.itemsOnCenter);
@@ -147,11 +148,12 @@ export function SeelenWeg() {
         values={[...pinnedOnLeft, Separator1, ...pinnedOnCenter, Separator2, ...pinnedOnRight]}
         onReorder={onReorderPinned}
         axis={isHorizontal ? 'x' : 'y'}
-        className={cx('taskbar', settings.position.toLowerCase(), {
+        className={cx('taskbar', settings.position.toLowerCase(), monitorInfo.orientation.toLowerCase(), {
           horizontal: isHorizontal,
           vertical: !isHorizontal,
           'full-width': settings.mode === SeelenWegMode.FullWidth,
           hidden: shouldBeHidden(settings.hideMode, isActive, isOverlaped),
+          tabletMode: monitorInfo.isTabletMode,
           delayed,
         })}
       >

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

@@ -1,5 +1,5 @@
 import { createSlice, current, PayloadAction } from '@reduxjs/toolkit';
-import { PinnedWegItem, SeelenWegSettings, SwItemType, UIColors } from 'seelen-core';
+import { MonitorOrientation, PinnedWegItem, SeelenWegSettings, SwItemType, UIColors } from 'seelen-core';
 
 import { SwTemporalAppUtils } from '../../item/app/TemporalApp';
 
@@ -23,6 +23,12 @@ const initialState: RootState = {
   openApps: {},
   focusedApp: null,
   isOverlaped: false,
+  monitorInfo: {
+    id: '',
+    index: 0,
+    orientation: MonitorOrientation.HorizontalNormal,
+    is_tablet_mode: false,
+  },
   settings: new SeelenWegSettings(),
   mediaSessions: [],
   colors: UIColors.default(),
@@ -119,6 +125,12 @@ export const RootSlice = createSlice({
       }
       savePinnedItems(current(state));
     },
+    updateTabletMode(state, current) {
+      state.monitorInfo.isTabletMode = current.payload;
+    },
+    updateOrientation(state, current) {
+      state.monitorInfo.orientation = current.payload;
+    },
     removeMediaModule(state) {
       const filter = (current: SwItem) => current.type !== SwItemType.Media;
       state.itemsOnLeft = state.itemsOnLeft.filter(filter);

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

@@ -1,6 +1,7 @@
 import { modify } from 'readable-types';
 import {
   MediaWegItem,
+  MonitorInfo,
   PinnedWegItem,
   SeelenWegSettings,
   SeparatorWegItem,
@@ -74,5 +75,6 @@ export interface RootState extends IRootState<SeelenWegSettings> {
   // ----------------------
   focusedApp: FocusedApp | null;
   isOverlaped: boolean;
+  monitorInfo: MonitorInfo;
   mediaSessions: MediaSession[];
 }

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

@@ -3,6 +3,7 @@ import { listen as listenGlobal } from '@tauri-apps/api/event';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { debounce } from 'lodash';
 import {
+  MonitorOrientation,
   SeelenEvent,
   SeelenWegSettings,
   SeelenWegSide,
@@ -21,7 +22,7 @@ import { UserSettingsLoader } from '../../../../settings/modules/shared/store/st
 import { FocusedApp } from '../../../../shared/interfaces/common';
 import { StartThemingTool } from '../../../../shared/styles';
 import i18n from '../../../i18n';
-import { IsSavingPinnedItems, loadPinnedItems } from './storeApi';
+import { IsSavingPinnedItems, loadMonitorInfo, loadPinnedItems } from './storeApi';
 
 export const store = configureStore({
   reducer: RootSlice.reducer,
@@ -71,6 +72,14 @@ export async function registerStoreEvents() {
     store.dispatch(RootActions.setIsOverlaped(event.payload));
   });
 
+  await view.listen<boolean>('tablet-mode-changed', (event) => {
+    store.dispatch(RootActions.updateTabletMode(event.payload));
+  });
+
+  await view.listen<MonitorOrientation>('orientation-changed', (event) => {
+    store.dispatch(RootActions.updateOrientation(event.payload));
+  });
+
   await listenGlobal<AppFromBackground[]>('add-multiple-open-apps', async (event) => {
     const items = await cleanItems(event.payload);
     for (const item of items) {
@@ -197,4 +206,5 @@ export async function loadStore() {
   store.dispatch(RootActions.setItemsOnLeft(await cleanSavedItems(apps.left)));
   store.dispatch(RootActions.setItemsOnCenter(await cleanSavedItems(apps.center)));
   store.dispatch(RootActions.setItemsOnRight(await cleanSavedItems(apps.right)));
+  store.dispatch(RootActions.setMonitorInfo(await loadMonitorInfo()));
 }

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

@@ -3,7 +3,7 @@ import { invoke } from '@tauri-apps/api/core';
 import { writeTextFile } from '@tauri-apps/plugin-fs';
 import yaml from 'js-yaml';
 import { debounce } from 'lodash';
-import { SwItemType, WegItem, WegItems } from 'seelen-core';
+import { MonitorInfo, SeelenCommand, SwItemType, WegItem, WegItems } from 'seelen-core';
 
 import { store } from './infra';
 
@@ -50,3 +50,7 @@ export const savePinnedItems = debounce(
 export const loadPinnedItems = async (): Promise<WegItems> => {
   return invoke<WegItems>('state_get_weg_items');
 };
+
+export const loadMonitorInfo = async (): Promise<MonitorInfo> => {
+  return invoke<MonitorInfo>(SeelenCommand.RequestMonitorInfo);
+};

src/apps/toolbar/modules/main/infra.tsx

@@ -79,6 +79,7 @@ export function ToolBar({ structure }: Props) {
   const plugins = useSelector(Selectors.plugins);
   const isOverlaped = useSelector(Selectors.isOverlaped);
   const hideMode = useSelector(Selectors.settings.hideMode);
+  const monitorInfo = useSelector(Selectors.monitorInfo);
 
   const dispatch = useDispatch();
   const [forceUpdate] = useForceUpdate();
@@ -153,7 +154,8 @@ export function ToolBar({ structure }: Props) {
           ...structure.right,
         ]}
         onReorder={onReorderPinned}
-        className={cx('ft-bar', {
+        className={cx('ft-bar', monitorInfo.orientation.toLowerCase(), {
+          tabletMode: monitorInfo.isTabletMode,
           'ft-bar-hidden': shouldBeHidden,
           'ft-bar-delayed': delayed,
         })}

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

@@ -1,5 +1,5 @@
 import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { FancyToolbarSettings, UIColors } from 'seelen-core';
+import { FancyToolbarSettings, MonitorOrientation, UIColors } from 'seelen-core';
 import { Placeholder, ToolbarModule } from 'seelen-core';
 
 import { RootState } from './domain';
@@ -12,6 +12,12 @@ const initialState: RootState = {
   plugins: [],
   dateFormat: '',
   isOverlaped: false,
+  monitorInfo: {
+    id: '',
+    index: 0,
+    orientation: MonitorOrientation.horizontalNormal,
+    isTabletMode: false,
+  },
   focused: null,
   settings: new FancyToolbarSettings(),
   env: {},
@@ -48,6 +54,12 @@ export const RootSlice = createSlice({
       state.placeholder = action.payload;
       state.version++;
     },
+    updateTabletMode(state, current) {
+      state.monitorInfo.isTabletMode = current.payload;
+    },
+    updateOrientation(state, current) {
+      state.monitorInfo.orientation = current.payload;
+    },
     setItemsOnLeft(state, action: PayloadAction<ToolbarModule[]>) {
       if (state.placeholder) {
         state.placeholder.left = action.payload;

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

@@ -1,5 +1,5 @@
 import { SoftOpaque } from 'readable-types';
-import { FancyToolbarSettings, Settings } from 'seelen-core';
+import { FancyToolbarSettings, MonitorInfo, Settings } from 'seelen-core';
 import { Placeholder, Plugin } from 'seelen-core';
 
 import { WlanBssEntry } from '../../network/domain';
@@ -116,6 +116,7 @@ export interface RootState extends IRootState<FancyToolbarSettings>, Pick<Settin
   plugins: Plugin[];
 
   isOverlaped: boolean;
+  monitorInfo: MonitorInfo;
   focused: FocusedApp | null;
   env: Record<string, string>;
   powerStatus: PowerStatus;

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

@@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import { listen as listenGlobal } from '@tauri-apps/api/event';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { debounce, throttle } from 'lodash';
-import { PluginList, SeelenEvent, UIColors } from 'seelen-core';
+import { MonitorOrientation, PluginList, SeelenEvent, UIColors } from 'seelen-core';
 import { FancyToolbarSettings } from 'seelen-core';
 
 import { IsSavingCustom } from '../../main/application';
@@ -26,6 +26,7 @@ import { UserSettingsLoader } from '../../../../settings/modules/shared/store/st
 import { FocusedApp } from '../../../../shared/interfaces/common';
 import { StartThemingTool } from '../../../../shared/styles';
 import i18n from '../../../i18n';
+import { loadMonitorInfo } from './storeApi';
 
 export const store = configureStore({
   reducer: RootSlice.reducer,
@@ -51,6 +52,14 @@ export async function registerStoreEvents() {
     store.dispatch(RootActions.setIsOverlaped(event.payload));
   });
 
+  await view.listen<boolean>('tablet-mode-changed', (event) => {
+    store.dispatch(RootActions.updateTabletMode(event.payload));
+  });
+
+  await view.listen<MonitorOrientation>('orientation-changed', (event) => {
+    store.dispatch(RootActions.updateOrientation(event.payload));
+  });
+
   const onFocusChanged = debounce((app: FocusedApp) => {
     store.dispatch(RootActions.setFocused(app));
   }, 200);
@@ -161,6 +170,7 @@ export async function loadStore() {
   setPlaceholder(userSettings);
 
   store.dispatch(RootActions.setEnv(userSettings.env));
+  store.dispatch(RootActions.setMonitorInfo(await loadMonitorInfo()));
 }
 
 export function loadSettingsCSS(settings: FancyToolbarSettings) {

src/apps/toolbar/modules/shared/store/storeApi.ts

@@ -0,0 +1,6 @@
+import { invoke } from '@tauri-apps/api/core';
+import { MonitorInfo } from 'seelen-core';
+
+export const loadMonitorInfo = async (): Promise<MonitorInfo> => {
+  return invoke<MonitorInfo>('get_monitor_info');
+};

src/background/exposed.rs

@@ -1,6 +1,7 @@
 use std::collections::HashMap;
 use std::path::PathBuf;
 
+use seelen_core::state::MonitorInfo;
 use tauri::{Builder, WebviewWindow, Wry};
 use tauri_plugin_shell::ShellExt;
 
@@ -18,6 +19,7 @@ use crate::seelen_wm_v2::handler::*;
 use crate::state::infrastructure::*;
 use crate::system::brightness::*;
 use crate::utils::is_virtual_desktop_supported as virtual_desktop_supported;
+use crate::windows_api::window::Window;
 use crate::windows_api::WindowsApi;
 use crate::winevent::{SyntheticFullscreenData, WinEvent};
 use crate::{log_error, utils};
@@ -29,6 +31,20 @@ use crate::modules::power::infrastructure::*;
 use crate::modules::system_settings::infrastructure::*;
 use crate::modules::tray::infrastructure::*;
 
+#[tauri::command(async)]
+pub fn get_monitor_info(window: tauri::Window) -> Result<MonitorInfo> {
+    let monitor = Window::from(window.hwnd()?).monitor();
+
+    let result = MonitorInfo {
+        id: monitor.id()?,
+        index: monitor.index()?,
+        orientation: *monitor.display_orientation(),
+        is_tablet_mode: *monitor.tablet_mode(),
+    };
+
+    Ok(result)
+}
+
 #[tauri::command(async)]
 fn select_file_on_explorer(path: String) -> Result<()> {
     get_app_handle()
@@ -177,6 +193,7 @@ pub fn register_invoke_handler(app_builder: Builder<Wry>) -> Builder<Wry> {
         simulate_fullscreen,
         check_for_updates,
         install_last_available_update,
+        get_monitor_info,
         // Seelen Settings
         set_auto_start,
         get_auto_start_status,

src/background/instance.rs

@@ -1,4 +1,5 @@
 use getset::{Getters, MutGetters};
+use seelen_core::handlers::SeelenEvent;
 
 use crate::{
     error_handler::Result,
@@ -44,9 +45,50 @@ impl SeelenInstanceContainer {
     }
 
     pub fn update_handle(&mut self, id: HMONITOR) {
-        self.handle = id;
-        self.monitor = Monitor::from(id);
-        log_error!(self.ensure_positions());
+        if self.handle != id {
+            self.handle = id;
+            self.monitor = Monitor::from(id);
+        } else {
+            #[allow(clippy::clone_on_copy)]
+            let before_update = self.monitor.clone();
+            self.monitor.update().ok();
+
+            if *self.monitor.display_orientation() != *before_update.display_orientation() {
+                self.propagate_orientation();
+            }
+
+            if *self.monitor.tablet_mode() != *before_update.tablet_mode() {
+                self.propagate_tablet_mode();
+            }
+        }
+    }
+
+    fn propagate_orientation(&mut self) {
+        let orientation = self.monitor.display_orientation();
+        if let Some(bar) = &self.toolbar {
+            log_error!(
+                bar.propagate_associated_event(SeelenEvent::ToolbarOrientationChanged, orientation)
+            );
+        }
+        if let Some(weg) = &self.weg {
+            log_error!(
+                weg.propagate_associated_event(SeelenEvent::WegOrientationChanged, orientation)
+            );
+        }
+    }
+    fn propagate_tablet_mode(&mut self) {
+        if let Some(bar) = &self.toolbar {
+            log_error!(bar.propagate_associated_event(
+                SeelenEvent::ToolbarTabletModeChanged,
+                *self.monitor.tablet_mode()
+            ));
+        }
+        if let Some(weg) = &self.weg {
+            log_error!(weg.propagate_associated_event(
+                SeelenEvent::WegTabletModeChanged,
+                *self.monitor.tablet_mode()
+            ));
+        }
     }
 
     pub fn ensure_positions(&mut self) -> Result<()> {