refactor(ags): make single use widgets code simpler

config/ags/js/bar/audio.js

@@ -10,8 +10,8 @@ const items = {
   0: 'audio-volume-muted-symbolic',
 };
 
-const SpeakerIndicator = props => Icon({
+const SpeakerIndicator = params => Icon({
-  ...props,
+  ...params,
   icon: '',
   connections: [[Audio, icon => {
     if (!Audio.speaker)
@@ -28,8 +28,8 @@ const SpeakerIndicator = props => Icon({
   }, 'speaker-changed']],
 });
 
-const SpeakerPercentLabel = props => Label({
+const SpeakerPercentLabel = params => Label({
-  ...props,
+  ...params,
   connections: [[Audio, label => {
     if (!Audio.speaker)
       return;
@@ -45,7 +45,7 @@ const SpeakerPercentLabel = props => Label({
   }, 'speaker-changed']],
 });
 
-const AudioModule = () => EventBox({
+export const AudioIndicator = EventBox({
   onPrimaryClickRelease: 'pavucontrol',
   className: 'toggle-off',
   child: Box({
@@ -57,5 +57,3 @@ const AudioModule = () => EventBox({
     ],
   }),
 });
-
-export const AudioIndicator = AudioModule();

config/ags/js/bar/bar.js

@@ -1,17 +1,17 @@
 const { Window, CenterBox, Box } = ags.Widget;
 
-import { Separator }      from '../common.js';
+import { Separator }        from '../common.js';
-import { CurrentWindow }  from './current-window.js';
+import { CurrentWindow }    from './current-window.js';
-import { Workspaces }     from './workspaces.js';
+import { Workspaces }       from './workspaces.js';
-import { OskToggle }      from './osk-toggle.js';
+import { OskToggle }        from './osk-toggle.js';
-import { TabletToggle }   from './tablet-toggle.js';
+import { TabletToggle }     from './tablet-toggle.js';
-import { QsToggle }       from './quick-settings.js';
+import { QsToggle }         from './quick-settings.js';
-import { NotifButton }    from './notif-button.js';
+import { NotifButton }      from './notif-button.js';
-import { Clock }          from './clock.js';
+import { Clock }            from './clock.js';
-import { SysTray }        from './systray.js';
+import { SysTray }          from './systray.js';
-import { Batt }           from './battery.js';
+import { BatteryIndicator } from './battery.js';
-import { Brightness }     from './brightness.js';
+import { Brightness }       from './brightness.js';
-import { AudioIndicator } from './audio.js';
+import { AudioIndicator }   from './audio.js';
 
 export const Bar = Window({
   name: 'bar',
@@ -59,7 +59,7 @@ export const Bar = Window({
     endWidget: Box({
       halign: 'end',
       children: [
-        Batt,
+        BatteryIndicator,
         
         Separator(12),
       

config/ags/js/bar/battery.js

@@ -25,9 +25,9 @@ const Indicators = charging => Stack({
 const Indicator = ({
   charging = Indicators(true),
   discharging = Indicators(false),
-  ...props
+  ...params
 } = {}) => Stack({
-  ...props,
+  ...params,
   className: 'battery-indicator',
   items: [
     ['true', charging],
@@ -43,13 +43,13 @@ const Indicator = ({
   }]],
 });
 
-const LevelLabel = props => Label({
+const LevelLabel = params => Label({
-  ...props,
+  ...params,
   className: 'label',
   connections: [[1000, label => label.label = `${exec('cat /sys/class/power_supply/BAT0/capacity')}%`]],
 });
 
-const BatteryLabel = () => Box({
+export const BatteryIndicator = Box({
   className: 'toggle-off battery',
   children: [
     Indicator(),
@@ -57,5 +57,3 @@ const BatteryLabel = () => Box({
     LevelLabel(),
   ],
 });
-
-export const Batt = BatteryLabel();

config/ags/js/bar/clock.js

@@ -4,9 +4,9 @@ const { DateTime } = imports.gi.GLib;
 
 const ClockModule = ({
     interval = 1000,
-    ...props
+    ...params
 }) => Label({
-    ...props,
+    ...params,
     className: 'clock',
     connections: [
       [interval, label => {

config/ags/js/bar/current-window.js

@@ -2,7 +2,7 @@ const { Hyprland } = ags.Service;
 const { Label } = ags.Widget;
 const { Gtk } = imports.gi;
 
-const currentWindow = () => Label({
+export const CurrentWindow = Label({
   style: 'color: #CBA6F7; font-size: 18px',
   truncate: 'end',
   connections: [
@@ -11,5 +11,3 @@ const currentWindow = () => Label({
     }, 'changed'],
   ],
 });
-
-export const CurrentWindow = currentWindow();

config/ags/js/bar/notif-button.js

@@ -1,8 +1,9 @@
 const { Box, Label } = ags.Widget;
 const { subprocess } = ags.Utils;
-import { EventBox } from '../common.js';
 const deflisten = subprocess;
 
+import { EventBox } from '../common.js';
+
 deflisten(
   ['bash', '-c', '$AGS_PATH/notif.sh icon'],
   (output) => {

config/ags/js/bar/systray.js

@@ -15,7 +15,7 @@ const SysTrayItem = item => MenuItem({
   }]]
 });
 
-const SysTrayModule = () => ags.Widget({
+export const SysTray = ags.Widget({
   type: Gtk.MenuBar,
   className: 'sys-tray',
   properties: [
@@ -43,5 +43,3 @@ const SysTrayModule = () => ags.Widget({
     [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
   ],
 });
-
-export const SysTray = SysTrayModule();

config/ags/js/test/drag.js

@@ -2,7 +2,7 @@ const { Window, Box, EventBox, Button } = ags.Widget;
 const { Gtk, Gdk } = imports.gi;
 const display = Gdk.Display.get_default();
 
-const Draggable = ({ maxOffset = 150, startMargin = 0, style, connections = [], ...props }) => {
+const Draggable = ({ maxOffset = 150, startMargin = 0, style, connections = [], ...params }) => {
   let w = EventBox({
     onHover: box => {
       box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
@@ -15,7 +15,7 @@ const Draggable = ({ maxOffset = 150, startMargin = 0, style, connections = [],
   let gesture = Gtk.GestureDrag.new(w);
 
   w.child = Box({
-    ...props,
+    ...params,
     connections: [
 
       [gesture, box => {