allow sidebar pinning

.config/ags/scss/_overview.scss

@@ -1,3 +1,7 @@
+.overview-window {
+    margin-top: 2.727rem;
+}
+
 .overview-search-box {
     @include menu_decel;
     @include large-rounding;

.config/ags/scss/_sidebars.scss

@@ -332,7 +332,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-selector-tab {
     @include small-rounding;
-    transition: 0ms;
+    @include menu_decel;
     min-height: 2.5rem;
     color: $onSurface;
 }
@@ -687,4 +687,37 @@ $onChatgpt: $onPrimary;
 .sidebar-chat-chip-action-active {
     color: $sidebar_chat_textboxareaColor;
     border: 0.068rem solid $sidebar_chat_textboxareaColor;
+}
+
+.sidebar-pin {
+    @include small-rounding;
+    @include menu_decel;
+    min-height: 2.386rem;
+    min-width: 2.386rem;
+    color: $onSurface;
+}
+
+.sidebar-pin:hover,
+.sidebar-pin:focus {
+    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
+}
+
+.sidebar-pin:active {
+    background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
+}
+
+.sidebar-pin-enabled {
+    background-color: $primary;
+    label {
+        color: $onPrimary;
+    }
+}
+
+.sidebar-pin-enabled:hover,
+.sidebar-pin-enabled:focus {
+    background-color: mix($primary, $onPrimary, 90%);
+}
+
+.sidebar-pin-enabled:active {
+    background-color: mix($primary, $onPrimary, 80%);
 }

.config/ags/scss/main.scss

@@ -32,3 +32,8 @@
 .fadingRadial {
     transition: 50ms cubic-bezier(0.2, 0.0, 0, 1.0);
 }
+.sidebar-pinned {
+    margin: 0rem;
+    border-radius: 0rem;
+    border: 0rem solid transparent;
+}

.config/ags/widgets/dock/dock.js

@@ -106,7 +106,7 @@ const Taskbar = () => Widget.Box({
             box.children = Array.from(box._map.values());
         }],
         ['add', (box, address) => {
-            if (!address) { // Since the first active emit is undefined
+            if (!address) { // First active emit is undefined
                 box._update(box);
                 return;
             }
@@ -174,7 +174,7 @@ const PinnedApps = () => Widget.Box({
                     const running = Hyprland.clients
                         .find(client => client.class.toLowerCase().includes(term)) || false;
 
-                    button.toggleClassName('nonrunning', !running);
+                    button.toggleClassName('notrunning', !running);
                     button.toggleClassName('focused', Hyprland.active.client.address == running.address);
                     button.set_tooltip_text(running ? running.title : app.name);
                 }, 'notify::clients']],

.config/ags/widgets/overview/main.js

@@ -3,7 +3,7 @@ import { SearchAndWindows } from "./overview.js";
 
 export default () => Widget.Window({
     name: 'overview',
-    exclusivity: 'normal',
+    exclusivity: 'ignore',
     focusable: true,
     popup: true,
     visible: false,

.config/ags/widgets/overview/overview.js

@@ -506,6 +506,7 @@ export const SearchAndWindows = () => {
 
     return Widget.Box({
         vertical: true,
+        className: 'overview-window',
         children: [
             clickOutsideToClose,
             Widget.Box({

.config/ags/widgets/sideleft/main.js

@@ -5,6 +5,7 @@ export default () => PopupWindow({
     focusable: true,
     anchor: ['left', 'top', 'bottom'],
     name: 'sideleft',
+    // exclusivity: 'exclusive',
     showClassName: 'sideleft-show',
     hideClassName: 'sideleft-hide',
     child: SidebarLeft(),

.config/ags/widgets/sideleft/sideleft.js

@@ -62,6 +62,7 @@ const navIndicator = NavigationIndicator(2, false, { // The line thing
 
 const navBar = Box({
     vertical: true,
+    hexpand: true,
     children: [
         Box({
             homogeneous: true,
@@ -74,10 +75,38 @@ const navBar = Box({
     ]
 })
 
+const pinButton = Button({
+    properties: [
+        ['enabled', false],
+    ],
+    vpack: 'start',
+    className: 'sidebar-pin',
+    child: MaterialIcon('push_pin', 'larger'),
+    tooltipText: 'Pin sidebar',
+    onClicked: (self) => {
+        self._enabled = !self._enabled;
+        self.toggleClassName('sidebar-pin-enabled', self._enabled);
+
+        const sideleftWindow = App.getWindow('sideleft');
+        const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
+        // console.log(sideleftWindow.exclusivity);
+        sideleftWindow.exclusivity = (self._enabled ? 'exclusive' : 'normal');
+        sideleftWindow.layer = (self._enabled ? 'bottom' : 'top');
+        sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
+    },
+    // QoL: Focus Pin button on open. Hit keybind -> space/enter = toggle pin state
+    connections: [[App, (self, currentName, visible) => {
+        if (currentName === 'sideleft' && visible) {
+            self.grab_focus();
+        }
+    }]]
+})
+
 export default () => Box({
     // vertical: true,
     vexpand: true,
     hexpand: true,
+    css: 'min-width: 2px;',
     children: [
         EventBox({
             onPrimaryClick: () => App.closeWindow('sideleft'),
@@ -89,9 +118,20 @@ export default () => Box({
             vexpand: true,
             className: 'sidebar-left',
             children: [
-                navBar,
+                Box({
+                    className: 'spacing-h-10',
+                    children: [
+                        navBar,
+                        pinButton,
+                    ]
+                }),
                 contentStack,
-            ]
+            ],
+            connections: [[App, (self, currentName, visible) => {
+                if (currentName === 'sideleft') {
+                    self.toggleClassName('sidebar-pinned', pinButton._enabled && visible);
+                }
+            }]]
         }),
     ],
     connections: [

.config/ags/widgets/sideright/calendar.js

@@ -71,11 +71,8 @@ const CalendarWidget = () => {
             child.destroy();
         }
         box.children = calendarJson.map((row, i) => Widget.Box({
-            // homogeneous: true,
             className: 'spacing-h-5',
-            children: row.map((day, i) =>
-                CalendarDay(day.day, day.today)
-            )
+            children: row.map((day, i) => CalendarDay(day.day, day.today)),
         }))
     }
     function shiftCalendarXMonths(x) {

.config/ags/widgets/sideright/quicktoggles.js

@@ -29,14 +29,12 @@ export const ToggleIconWifi = (props = {}) => Widget.Button({
 export const ToggleIconBluetooth = (props = {}) => Widget.Button({
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Bluetooth | Right-click to configure',
-    onClicked: () => { // Provided service doesn't work hmmm
+    onClicked: () => {
         const status = Bluetooth?.enabled;
-        if (status) {
+        if (status) 
             exec('rfkill block bluetooth');
-        }
-        else {
+        else 
             exec('rfkill unblock bluetooth');
-        }
     },
     onSecondaryClickRelease: () => {
         execAsync(['bash', '-c', 'blueberry &']);

.config/ags/widgets/sideright/sideright.js

@@ -81,6 +81,7 @@ const togglesBox = Widget.Box({
 export default () => Box({
     vexpand: true,
     hexpand: true,
+    css: 'min-width: 2px;',
     children: [
         EventBox({
             onPrimaryClick: () => App.closeWindow('sideright'),