Fixed an issue that would cause the scroll direction to be inverted o…

…n secondary monitors. (#683)

* Fixed an issue that would cause the scroll direction to be inverted on secondary monitors.

* Update import paths and tsconfig.

src/components/bar/index.tsx

@@ -28,7 +28,7 @@ import {
 
 import { WidgetContainer } from './shared/WidgetContainer';
 import options from 'src/options';
-import { App, Gtk } from 'astal/gtk3/index';
+import { App, Gtk } from 'astal/gtk3';
 
 import Astal from 'gi://Astal?version=3.0';
 import { bind, Variable } from 'astal';

src/components/bar/modules/battery/index.tsx

@@ -5,7 +5,7 @@ import options from 'src/options';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import Variable from 'astal/variable';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import AstalBattery from 'gi://AstalBattery?version=0.1';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { getBatteryIcon } from './helpers';

src/components/bar/modules/bluetooth/index.tsx

@@ -3,8 +3,7 @@ import options from 'src/options.js';
 import { openMenu } from '../../utils/menu.js';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
-import { bind } from 'astal/binding.js';
-import Variable from 'astal/variable.js';
+import { Variable, bind } from 'astal';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
 import { Astal } from 'astal/gtk3';

src/components/bar/modules/media/index.tsx

@@ -3,9 +3,8 @@ import options from 'src/options.js';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { generateMediaLabel } from './helpers/index.js';
 import { mprisService } from 'src/lib/constants/services.js';
-import Variable from 'astal/variable.js';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
-import { bind } from 'astal/binding.js';
+import { bind, Variable } from 'astal';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { Astal } from 'astal/gtk3';
 import { activePlayer, mediaAlbum, mediaArtist, mediaTitle } from 'src/globals/media.js';

src/components/bar/modules/menu/index.tsx

@@ -2,8 +2,7 @@ import { runAsyncCommand, throttledScrollHandler } from '../../utils/helpers.js'
 import options from '../../../../options.js';
 import { openMenu } from '../../utils/menu.js';
 import { getDistroIcon } from '../../../../lib/utils.js';
-import { bind } from 'astal/binding.js';
-import Variable from 'astal/variable.js';
+import { Variable, bind } from 'astal';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { Astal } from 'astal/gtk3';

src/components/bar/modules/systray/index.tsx

@@ -4,7 +4,6 @@ import AstalTray from 'gi://AstalTray?version=0.1';
 import { bind, Gio, Variable } from 'astal';
 import { BarBoxChild } from 'src/lib/types/bar';
 import { Gdk, Gtk } from 'astal/gtk3';
-import { BindableChild } from 'astal/gtk3/astalify';
 
 const systemtray = AstalTray.get_default();
 const { ignore, customIcons } = options.bar.systray;
@@ -137,7 +136,7 @@ interface MenuCustomIconProps {
 
 interface MenuEntryProps {
     item: AstalTray.TrayItem;
-    child?: BindableChild;
+    child?: JSX.Element;
 }
 
 export { SysTray };

src/components/bar/modules/volume/index.tsx

@@ -2,8 +2,7 @@ import { audioService } from 'src/lib/constants/services.js';
 import { openMenu } from '../../utils/menu.js';
 import options from 'src/options';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
-import Variable from 'astal/variable.js';
-import { bind } from 'astal/binding.js';
+import { bind, Variable } from 'astal';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import { getIcon } from './helpers/index.js';
 import { BarBoxChild } from 'src/lib/types/bar.js';

src/components/bar/modules/workspaces/helpers/index.ts

@@ -169,21 +169,14 @@ function isWorkspaceIgnored(ignoredWorkspacesVariable: Variable<string>, workspa
  * @param onlyActiveWorkspaces - Whether to only include active (occupied) workspaces when navigating.
  * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
  */
-function navigateWorkspace(
-    direction: 'next' | 'prev',
-    currentMonitorWorkspacesVariable: Variable<number[]>,
-    onlyActiveWorkspaces: boolean,
-    ignoredWorkspacesVariable: Variable<string>,
-): void {
+function navigateWorkspace(direction: 'next' | 'prev', ignoredWorkspacesVariable: Variable<string>): void {
     const allHyprlandWorkspaces = hyprlandService.get_workspaces() || [];
 
     const activeWorkspaceIds = allHyprlandWorkspaces
         .filter((workspaceInstance) => hyprlandService.focusedMonitor.id === workspaceInstance.monitor?.id)
         .map((workspaceInstance) => workspaceInstance.id);
 
-    const assignedOrOccupiedWorkspaces = onlyActiveWorkspaces
-        ? activeWorkspaceIds
-        : currentMonitorWorkspacesVariable.get() || Array.from({ length: workspaces.get() }, (_, index) => index + 1);
+    const assignedOrOccupiedWorkspaces = activeWorkspaceIds.sort((a, b) => a - b);
 
     if (assignedOrOccupiedWorkspaces.length === 0) {
         return;
@@ -213,12 +206,8 @@ function navigateWorkspace(
  * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
  * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
  */
-export function goToNextWorkspace(
-    currentMonitorWorkspacesVariable: Variable<number[]>,
-    onlyActiveWorkspaces: boolean,
-    ignoredWorkspacesVariable: Variable<string>,
-): void {
-    navigateWorkspace('next', currentMonitorWorkspacesVariable, onlyActiveWorkspaces, ignoredWorkspacesVariable);
+export function goToNextWorkspace(ignoredWorkspacesVariable: Variable<string>): void {
+    navigateWorkspace('next', ignoredWorkspacesVariable);
 }
 
 /**
@@ -228,12 +217,8 @@ export function goToNextWorkspace(
  * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
  * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
  */
-export function goToPreviousWorkspace(
-    currentMonitorWorkspacesVariable: Variable<number[]>,
-    onlyActiveWorkspaces: boolean,
-    ignoredWorkspacesVariable: Variable<string>,
-): void {
-    navigateWorkspace('prev', currentMonitorWorkspacesVariable, onlyActiveWorkspaces, ignoredWorkspacesVariable);
+export function goToPreviousWorkspace(ignoredWorkspacesVariable: Variable<string>): void {
+    navigateWorkspace('prev', ignoredWorkspacesVariable);
 }
 
 /**
@@ -263,29 +248,24 @@ export function throttle<T extends (...args: unknown[]) => void>(func: T, limit:
  * Creates throttled scroll handlers that navigate workspaces upon scrolling, respecting the configured scroll speed.
  *
  * @param scrollSpeed - The factor by which the scroll navigation is throttled.
- * @param currentMonitorWorkspacesVariable - A Variable containing the current monitor's workspace numbers.
  * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
  *
  * @returns An object containing two functions (`throttledScrollUp` and `throttledScrollDown`), both throttled.
  */
-export function initThrottledScrollHandlers(
-    scrollSpeed: number,
-    currentMonitorWorkspacesVariable: Variable<number[]>,
-    onlyActiveWorkspaces: boolean = true,
-): ThrottledScrollHandlers {
+export function initThrottledScrollHandlers(scrollSpeed: number): ThrottledScrollHandlers {
     const throttledScrollUp = throttle(() => {
         if (reverse_scroll.get()) {
-            goToPreviousWorkspace(currentMonitorWorkspacesVariable, onlyActiveWorkspaces, ignored);
+            goToPreviousWorkspace(ignored);
         } else {
-            goToNextWorkspace(currentMonitorWorkspacesVariable, onlyActiveWorkspaces, ignored);
+            goToNextWorkspace(ignored);
         }
     }, 200 / scrollSpeed);
 
     const throttledScrollDown = throttle(() => {
         if (reverse_scroll.get()) {
-            goToNextWorkspace(currentMonitorWorkspacesVariable, onlyActiveWorkspaces, ignored);
+            goToNextWorkspace(ignored);
         } else {
-            goToPreviousWorkspace(currentMonitorWorkspacesVariable, onlyActiveWorkspaces, ignored);
+            goToPreviousWorkspace(ignored);
         }
     }, 200 / scrollSpeed);
 

src/components/bar/modules/workspaces/index.tsx

@@ -1,21 +1,15 @@
 import options from 'src/options';
-import { initThrottledScrollHandlers, getWorkspacesForMonitor } from './helpers';
+import { initThrottledScrollHandlers } from './helpers';
 import { BarBoxChild } from 'src/lib/types/bar';
 import { WorkspaceModule } from './workspaces';
 import { bind, Variable } from 'astal';
 import { GtkWidget } from 'src/lib/types/widget';
 import { Astal, Gdk } from 'astal/gtk3';
 import { isScrollDown, isScrollUp } from 'src/lib/utils';
 
-const { workspaces, scroll_speed } = options.bar.workspaces;
+const { scroll_speed } = options.bar.workspaces;
 
 const Workspaces = (monitor = -1): BarBoxChild => {
-    const currentMonitorWorkspaces = Variable(getWorkspacesForMonitor(monitor));
-
-    workspaces.subscribe(() => {
-        currentMonitorWorkspaces.set(getWorkspacesForMonitor(monitor));
-    });
-
     const component = (
         <box className={'workspaces-box-container'}>
             <WorkspaceModule monitor={monitor} />
@@ -35,18 +29,15 @@ const Workspaces = (monitor = -1): BarBoxChild => {
                         self.disconnect(scrollHandlers);
                     }
 
-                    const { throttledScrollUp, throttledScrollDown } = initThrottledScrollHandlers(
-                        scroll_speed,
-                        currentMonitorWorkspaces,
-                    );
+                    const { throttledScrollUp, throttledScrollDown } = initThrottledScrollHandlers(scroll_speed);
 
                     scrollHandlers = self.connect('scroll-event', (_: GtkWidget, event: Gdk.Event) => {
                         if (isScrollUp(event)) {
-                            throttledScrollDown();
+                            throttledScrollUp();
                         }
 
                         if (isScrollDown(event)) {
-                            throttledScrollUp();
+                            throttledScrollDown();
                         }
                     });
                 });

src/components/menus/audio/active/devices/index.tsx

@@ -1,4 +1,3 @@
-import { BindableChild } from 'astal/gtk3/astalify';
 import { audioService } from 'src/lib/constants/services';
 import { SliderItem } from '../sliderItem/SliderItem';
 import { ActiveDeviceMenu } from '..';
@@ -21,5 +20,5 @@ export const ActiveDevices = (): JSX.Element => {
 };
 
 interface ActiveDeviceContainerProps {
-    children?: BindableChild | BindableChild[];
+    children?: JSX.Element[];
 }

src/components/menus/audio/active/index.tsx

@@ -1,8 +1,7 @@
 import { Gtk } from 'astal/gtk3';
 import { ActiveDevices } from './devices/index.js';
-import Variable from 'astal/variable.js';
 import { ActivePlaybacks } from './playbacks/index.js';
-import { bind } from 'astal/binding.js';
+import { bind, Variable } from 'astal';
 import { isPrimaryClick } from 'src/lib/utils.js';
 
 export enum ActiveDeviceMenu {

src/components/menus/audio/available/InputDevices.tsx

@@ -1,5 +1,5 @@
 import { audioService } from 'src/lib/constants/services.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { AudioDevice } from './Device';
 import { NotFoundButton } from './NotFoundButton';
 

src/components/menus/audio/available/PlaybackDevices.tsx

@@ -1,5 +1,5 @@
 import { audioService } from 'src/lib/constants/services.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { AudioDevice } from './Device';
 import { NotFoundButton } from './NotFoundButton';
 

src/components/menus/audio/index.tsx

@@ -1,7 +1,7 @@
 import DropdownMenu from '../shared/dropdown/index.js';
 import { VolumeSliders } from './active/index.js';
 import options from 'src/options.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import { AvailableDevices } from './available/index.js';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';

src/components/menus/bluetooth/devices/index.tsx

@@ -1,5 +1,4 @@
-import Variable from 'astal/variable.js';
-import { bind } from 'astal/binding.js';
+import { bind, Variable } from 'astal';
 import { bluetoothService } from 'src/lib/constants/services.js';
 import { getAvailableBluetoothDevices, getConnectedBluetoothDevices } from './helpers.js';
 import { NoBluetoothDevices } from './NoBluetoothDevices.js';

src/components/menus/bluetooth/index.tsx

@@ -2,7 +2,7 @@ import DropdownMenu from '../shared/dropdown/index.js';
 import { BluetoothDevices } from './devices/index.js';
 import { Header } from './header/index.js';
 import options from 'src/options.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';
 

src/components/menus/dashboard/directories/Sections.tsx

@@ -1,5 +1,3 @@
-import { BindableChild } from 'astal/gtk3/astalify';
-
 export const LeftSection = ({ children }: SectionProps): JSX.Element => {
     return (
         <box className={'section left'} vertical expand>
@@ -17,5 +15,5 @@ export const RightSection = ({ children }: SectionProps): JSX.Element => {
 };
 
 interface SectionProps {
-    children?: BindableChild | BindableChild[];
+    children?: JSX.Element | JSX.Element[];
 }

src/components/menus/dashboard/index.tsx

@@ -5,8 +5,7 @@ import { Controls } from './controls/index.js';
 import { Stats } from './stats/index.js';
 import { Directories } from './directories/index.js';
 import options from 'src/options.js';
-import { bind } from 'astal/binding.js';
-import Variable from 'astal/variable.js';
+import { bind, Variable } from 'astal';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';
 
 const { controls, shortcuts, stats, directories } = options.menus.dashboard;

src/components/menus/dashboard/profile/helpers.ts

@@ -1,7 +1,7 @@
 import { App } from 'astal/gtk3';
 import powermenu from '../../power/helpers/actions.js';
 import { PowerOptions } from 'src/lib/types/options.js';
-import { execAsync } from 'astal/process.js';
+import { execAsync } from 'astal';
 const { confirmation, shutdown, logout, sleep, reboot } = options.menus.dashboard.powermenu;
 
 /**

src/components/menus/dashboard/shortcuts/sections/Column.tsx

@@ -1,5 +1,3 @@
-import { BindableChild } from 'astal/gtk3/astalify';
-
 export const LeftColumn = ({ isVisible, children }: LeftColumnProps): JSX.Element => {
     return (
         <box className={`card-button-section-container ${isVisible ? 'visible' : ''}`}>
@@ -26,9 +24,9 @@ export const RightColumn = ({ children }: RightColumnProps): JSX.Element => {
 
 interface LeftColumnProps {
     isVisible?: boolean;
-    children?: BindableChild | BindableChild[];
+    children?: JSX.Element | JSX.Element[];
 }
 
 interface RightColumnProps {
-    children?: BindableChild | BindableChild[];
+    children?: JSX.Element | JSX.Element[];
 }

src/components/menus/energy/index.tsx

@@ -2,7 +2,7 @@ import DropdownMenu from '../shared/dropdown/index.js';
 import { EnergyProfiles } from './profiles/index.js';
 import { Brightness } from './brightness/index.js';
 import options from 'src/options.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';
 

src/components/menus/media/components/MediaContainer.tsx

@@ -1,6 +1,5 @@
 import { getBackground } from './helpers.js';
 import { Gtk } from 'astal/gtk3';
-import { BindableChild } from 'astal/gtk3/astalify.js';
 
 export const MediaContainer = ({ children }: MediaContainerProps): JSX.Element => {
     return (
@@ -19,5 +18,5 @@ export const MediaContainer = ({ children }: MediaContainerProps): JSX.Element =
 };
 
 interface MediaContainerProps {
-    children?: BindableChild | BindableChild[];
+    children?: JSX.Element | JSX.Element[];
 }

src/components/menus/media/index.tsx

@@ -1,4 +1,4 @@
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import DropdownMenu from '../shared/dropdown/index.js';
 import options from 'src/options.js';
 import { MediaContainer } from './components/MediaContainer.js';

src/components/menus/network/index.tsx

@@ -2,7 +2,7 @@ import DropdownMenu from '../shared/dropdown/index.js';
 import { Ethernet } from './ethernet/index.js';
 import { Wifi } from './wifi/index.js';
 import options from 'src/options.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { networkService } from 'src/lib/constants/services.js';
 import { NoWifi } from './wifi/WirelessAPs/NoWifi.js';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';

src/components/menus/notifications/index.tsx

@@ -3,9 +3,8 @@ import { Controls } from './controls/index.js';
 import { NotificationsContainer } from './notification/index.js';
 import { NotificationPager } from './pager/index.js';
 import options from 'src/options.js';
-import Variable from 'astal/variable.js';
 import { handlePageBoundaries } from './helpers.js';
-import { bind } from 'astal/binding.js';
+import { bind, Variable } from 'astal';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';
 
 const { transition } = options.menus;

src/components/menus/notifications/notification/index.tsx

@@ -1,9 +1,8 @@
 import options from 'src/options.js';
 import { filterNotifications } from 'src/lib/shared/notifications.js';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import Variable from 'astal/variable.js';
 import { Gtk } from 'astal/gtk3';
-import { bind } from 'astal/binding.js';
+import { bind, Variable } from 'astal';
 import { notifdService } from 'src/lib/constants/services.js';
 import { NotificationCard } from 'src/components/notifications/Notification.js';
 import { Placeholder } from './Placeholder';

src/components/menus/power/index.tsx

@@ -4,7 +4,7 @@ import powermenu from './helpers/actions.js';
 import options from 'src/options.js';
 import { isPrimaryClick } from 'src/lib/utils.js';
 import icons from 'src/lib/icons/icons.js';
-import { bind } from 'astal/binding.js';
+import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import { RevealerTransitionMap } from 'src/lib/constants/options.js';