refactor(ags): separate tablet toggle from bar.js

config/ags/js/bar/bar.js

@@ -1,10 +1,11 @@
 const { Window, CenterBox, Box } = ags.Widget;
 
-import { Separator, EventBox }  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 { Heart }                from './heart.js'
+import { Heart }          from './heart.js';
+import { TabletToggle }    from './tablet-toggle.js';
 
 export const Bar = Window({
   name: 'left-bar',
@@ -29,18 +30,7 @@ export const Bar = Window({
   
           Separator(12),
 
-          EventBox({
+          TabletToggle,
-            className: 'toggle-off',
-            onPrimaryClickRelease: '',
-            child: ags.Widget.Box({
-              className: 'tablet-toggle',
-              vertical: false,
-
-              child: ags.Widget.Label({
-                label: " 󰦧 ",
-              }),
-            }),
-          }),
       
           Separator(12),
 
@@ -59,6 +49,7 @@ export const Bar = Window({
       // Right
       Box({
         halign: 'end',
+        children: [],
       }),
     ],
   }),

config/ags/js/bar/tablet-toggle.js

@@ -0,0 +1,13 @@
+import { EventBox } from '../common.js';
+
+export const TabletToggle = EventBox({
+  className: 'toggle-off',
+  onPrimaryClickRelease: '',
+  child: ags.Widget.Box({
+    className: 'tablet-toggle',
+    vertical: false,
+    child: ags.Widget.Label({
+      label: " 󰦧 ",
+    }),
+  }),
+});