Window manager

1 - glaze.yaml

# GlazeWM v3.3.0

general:
  # Commands to run when the WM has started (e.g. to run a script or launch
  # another application). Here we are running a batch script to start Zebar.
  startup_commands: ['shell-exec zebar']

  # Whether to automatically focus windows underneath the cursor.
  focus_follows_cursor: false

  # Whether to switch back and forth between the previously focused
  # workspace when focusing the current workspace.
  toggle_workspace_on_refocus: false

  cursor_jump:
    # Whether to automatically move the cursor on the specified trigger.
    enabled: false

    # Trigger for cursor jump:
    # - 'monitor_focus': Jump when focus changes between monitors.
    # - 'window_focus': Jump when focus changes between windows.
    trigger: 'monitor_focus'

gaps:
  # Gap between adjacent windows.
  inner_gap: '9px'

  # Gap between windows and the screen edge.
  outer_gap:
    top: '9px'
    right: '9px'
    bottom: '41px'
    left: '9px'

window_effects:
  # Visual effects to apply to the focused window.
  # Corner - Allowed values: 'square', 'rounded', 'small_rounded'
  focused_window:
    border:
      enabled: true
      color: '#1e1e1e'
    corner_style:
      enabled: true
      style: 'square'
    hide_title_bar:
      enabled: false

  # Visual effects to apply to non-focused windows.
  other_windows:
    border:
      enabled: true
      color: '#1e1e1e'
    corner_style:
      enabled: true
      style: 'square'
    hide_title_bar:
      enabled: false

window_behavior:
  # New windows are created in this state whenever possible.
  # Allowed values: 'tiling', 'floating'.
  initial_state: 'tiling'

  # Sets the default options for when a new window is created. This also
  # changes the defaults for when the state change commands, like
  # `set-floating`, are used without any flags.
  state_defaults:
    floating:
      # Whether to center floating windows by default.
      centered: true

      # Whether to show floating windows as always on top.
      shown_on_top: false

    fullscreen:
      # Maximize the window if possible. If the window doesn't have a
      # maximize button, then it'll be fullscreen'ed normally instead.
      maximized: false

      # Whether to show fullscreen windows as always on top.
      shown_on_top: false

workspaces:
  - name: '1'
  - name: '2'
  - name: '3'
  - name: '4'
  - name: '5'
  - name: '6'
  - name: '7'
  - name: '8'
  - name: '9'

window_rules:
  - commands: ['ignore']
    match:
      # Ignores any Zebar windows.
      - window_process: { equals: 'zebar' }

      # Ignores picture-in-picture windows for browsers.
      - window_title: { regex: '[Pp]icture.in.[Pp]icture' }
        window_class: { regex: 'Chrome_WidgetWin_1|MozillaDialogClass' }

      # Ignore rules for various 3rd-party apps.
      - window_process: { equals: 'PowerToys.PowerAccent' }
      - window_process: { equals: 'Lively' }
        window_class: { regex: 'HwndWrapper*' }

  - commands: ['set-fullscreen']
    match:
      - window_process: { equals: 'Code' } 
      - window_process: { equals: 'wezterm-gui' } 

binding_modes:
  # When enabled, the focused window can be resized via arrow keys or HJKL.
  #- name: 'resize'
  #  keybindings:
  #    - commands: ['resize --width -2%']
  #      bindings: ['h', 'left']
  #    - commands: ['resize --width +2%']
  #      bindings: ['l', 'right']
  #    - commands: ['resize --height +2%']
  #      bindings: ['k', 'up'
  #    - commands: ['resize --height -2%']
  #      bindings: ['j', 'down']
  #    # Press enter/escape to return to default keybindings.
  #    - commands: ['wm-disable-binding-mode --name resize']
  #      bindings: ['escape', 'enter']

  # When enabled, all keybindings are disabled except for alt+shift+p which
  # returns to default keybindings.
  - name: 'pause'
    keybindings:
      - commands: ['wm-disable-binding-mode --name pause']
        bindings: ['alt+shift+p']

keybindings:
  # Shift focus in a given direction.
  - commands: ['focus --direction left']
    bindings: ['alt+ctrl+j']
  - commands: ['focus --direction right']
    bindings: ['alt+ctrl+k']
  #- commands: ['focus --direction up']
  #  bindings: ['alt+k', 'alt+up']
  #- commands: ['focus --direction down']
  #  bindings: ['alt+j', 'alt+down']

  # Move focused window in a given direction.
  - commands: ['move --direction left']
    bindings: ['alt+ctrl+u']
  - commands: ['move --direction right']
    bindings: ['alt+ctrl+p']
  #- commands: ['move --direction up']
  #  bindings: ['alt+shift+k', 'alt+shift+up']
  #- commands: ['move --direction down']
  #  bindings: ['alt+shift+j', 'alt+shift+down']

  # Resize focused window by a percentage or pixel amount.
  - commands: ['resize --width -2%']
    bindings: ['alt+ctrl+i']
  - commands: ['resize --width +2%']
    bindings: ['alt+ctrl+o']
  #- commands: ['resize --height +2%']
  #  bindings: ['alt+o']
  #- commands: ['resize --height -2%']
  #  bindings: ['alt+i']

  # As an alternative to the resize keybindings above, resize mode enables
  # resizing via arrow keys or HJKL. The binding mode is defined above with
  # the name 'resize'.
  #- commands: ['wm-enable-binding-mode --name resize']
  #  bindings: ['alt+r']

  # Disables all keybindings until alt+shift+p is pressed again.
  - commands: ['wm-enable-binding-mode --name pause']
    bindings: ['alt+shift+p']

  # Change tiling direction. This determines where new tiling windows will
  # be inserted.
  - commands: ['toggle-tiling-direction']
    bindings: ['alt+v']

  # Change focus from tiling windows -> floating -> fullscreen.
  - commands: ['wm-cycle-focus']
    bindings: ['alt+c']

  # Change the focused window to be floating.
  - commands: ['toggle-floating --centered']
    bindings: ['alt+ctrl+c']

  # Change the focused window to be tiling.
  - commands: ['toggle-tiling']
    bindings: ['alt+shift+c']

  # Change the focused window to be fullscreen.
  - commands: ['toggle-fullscreen']
    bindings: ['alt+x']

  # Minimize focused window.
  - commands: ['toggle-minimized']
    bindings: ['alt+m']

  # Close focused window.
  - commands: ['close']
    bindings: ['alt+a']

  # Kill GlazeWM process safely.
  - commands: ['wm-exit']
    bindings: ['alt+shift+a']

  # Re-evaluate configuration file.
  #- commands: ['wm-reload-config'] #This will be fixed later https://github.com/glzr-io/glazewm/issues/646
  - commands: ["wm-reload-config"]
    bindings: ['alt+shift+r']

  # Redraw all windows.
  - commands: ['wm-redraw']
    bindings: ['alt+ctrl+r']

  # Launch CMD terminal. Alternatively, use `shell-exec wt` or
  # `shell-exec %ProgramFiles%/Git/git-bash.exe` to start Windows
  # Terminal and Git Bash respectively.
  #- commands: ['shell-exec cmd']
  #  bindings: ['alt+enter']

  # Focus the next/previous workspace defined in `workspaces` config.
  #- commands: ['focus --next-workspace']
  #  bindings: ['alt+s']
  #- commands: ['focus --prev-workspace']
  #  bindings: ['alt+a']

  # Focus the workspace that last had focus.
  - commands: ['focus --recent-workspace']
    bindings: ['alt+n']

  # Change focus to a workspace defined in `workspaces` config.
  - commands: ['focus --workspace 1']
    bindings: ['alt+1']
  - commands: ['focus --workspace 2']
    bindings: ['alt+2']
  - commands: ['focus --workspace 3']
    bindings: ['alt+3']
  - commands: ['focus --workspace 4']
    bindings: ['alt+4']
  - commands: ['focus --workspace 5']
    bindings: ['alt+5']
  - commands: ['focus --workspace 6']
    bindings: ['alt+6']
  - commands: ['focus --workspace 7']
    bindings: ['alt+7']
  #- commands: ['focus --workspace 8']
  #  bindings: ['alt+8']
  #- commands: ['focus --workspace 9']
  #  bindings: ['alt+9']

  # Move the focused window's parent workspace to a monitor in a given
  # direction.
  #- commands: ['move-workspace --direction left']
  #  bindings: ['alt+shift+a']
  #- commands: ['move-workspace --direction right']
  #  bindings: ['alt+shift+f']
  #- commands: ['move-workspace --direction up']
  #  bindings: ['alt+shift+d']
  #- commands: ['move-workspace --direction down']
  #  bindings: ['alt+shift+s']

  # Move focused window to a workspace defined in `workspaces` config.
  - commands: ['move --workspace 1', 'focus --workspace 1']
    bindings: ['alt+ctrl+1']
  - commands: ['move --workspace 2', 'focus --workspace 2']
    bindings: ['alt+ctrl+2']
  - commands: ['move --workspace 3', 'focus --workspace 3']
    bindings: ['alt+ctrl+3']
  - commands: ['move --workspace 4', 'focus --workspace 4']
    bindings: ['alt+ctrl+4']
  - commands: ['move --workspace 5', 'focus --workspace 5']
    bindings: ['alt+ctrl+5']
  - commands: ['move --workspace 6', 'focus --workspace 6']
    bindings: ['alt+ctrl+6']
  - commands: ['move --workspace 7', 'focus --workspace 7']
    bindings: ['alt+ctrl+7']
  #- commands: ['move --workspace 8', 'focus --workspace 8']
  #  bindings: ['alt+ctrl+8']
  #- commands: ['move --workspace 9', 'focus --workspace 9']
  #  bindings: ['alt+ctrl+9']

2 - zebar.html

<!-- Zebar 2.2.2 -->
<!-- On PC: Battery position = volume -->

<!doctype html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

   <link rel="stylesheet" type="text/css" href="../normalize.css" />
   <link rel="stylesheet" type="text/css" href="./styles.css" />

   <!-- Allows React to be run buildless via "text/babel" script below. -->
   <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"
      integrity="sha256-aS0B0wnsaDByLfE16h4MDCP1fQFccysd1YWOcV+gbBo=" crossorigin="anonymous"></script>
</head>

<body>
   <div id="root"></div>

   <script type="text/babel" data-type="module">
      import React, {
         useState,
         useEffect,
      } from 'https://esm.sh/react@18?dev';
      import { createRoot } from 'https://esm.sh/react-dom@18/client?dev';
      import * as zebar from 'https://esm.sh/zebar@2';

      const providers = zebar.createProviderGroup({
         network: { type: 'network' },
         glazewm: { type: 'glazewm' },
         cpu: { type: 'cpu' },
         date: { type: 'date', formatting: 'MM-dd-yy ‎ ‎ hh:mm a' },
         battery: { type: 'battery' },
         memory: { type: 'memory' },
      });

      createRoot(document.getElementById('root')).render(<App />);

      function App() {
         const [output, setOutput] = useState(providers.outputMap);

         useEffect(() => {
            providers.onOutput(() => setOutput(providers.outputMap));
         }, []);

         function getNetworkIcon(networkOutput) {
            switch (networkOutput.defaultInterface?.type) {
               case 'ethernet':
                  return <span>☰</span>;
               case 'wifi':
                  if (networkOutput.defaultGateway?.signalStrength >= 80) {
                     return <span>☰</span>;
                  } else if (
                     networkOutput.defaultGateway?.signalStrength >= 75
                  ) {
                     return <span>☰</span>;
                  } else if (
                     networkOutput.defaultGateway?.signalStrength >= 50
                  ) {
                     return <span>☳</span>;
                  } else if (
                     networkOutput.defaultGateway?.signalStrength >= 25
                  ) {
                     return <span>☷</span>;
                  } else {
                     return <span>NC</span>;
                  }
               default:
                  return (
                     <span>NC</span>
                  );
            }
         }

         return (
            <div className="app">
               <div className="left">
                  {output.glazewm && (
                     <div className="workspaces">
                        {output.glazewm.currentWorkspaces.map(workspace => (
                           <button
                              className={`workspace ${workspace.hasFocus && 'focused'} ${workspace.isDisplayed && 'displayed'}`}
                              onClick={() =>
                                 output.glazewm.runCommand(
                                    `focus --workspace ${workspace.name}`,
                                 )
                              }
                              key={workspace.name}
                           >
                              {workspace.displayName ?? workspace.name}
                           </button>
                        ))}
                     </div>
                  )}

                  {output.cpu && (
                     <div className="cpu">
                        <span>× ‎ ‎ CPU: </span>
                        <span> {Math.round(output.cpu.usage)}% </span>
                     </div>
                  )}

                  {output.memory && (
                     <div className="memory">
                        <span>RAM: </span>
                        {Math.round(output.memory.usage)}%
                     </div>
                  )}
               </div>

               <div className="center"></div>

               <div className="right">
                  {output.glazewm && (
                     <>
                        {output.glazewm.bindingModes.map(bindingMode => (
                           <button
                              className="binding-mode"
                              key={bindingMode.name}
                           >
                              {bindingMode.displayName ?? bindingMode.name}
                           </button>
                        ))}

                        <button className="tiling-direction" onClick={() => output.glazewm.runCommand('toggle-tiling-direction')} >
                           {output.glazewm.tilingDirection === 'horizontal' ? '⮂' : '⮅'}
                        </button>
                     </>
                  )}

                  {output.date?.formatted && (
                     <div className="date">
                        <span>{output.date.formatted}</span>
                     </div>
                  )}

                  {output.network && (
                     <div className="network">
                        <span>× ‎ ‎ </span>
                        {getNetworkIcon(output.network)}
                     </div>
                  )}

                  {output.battery && (
                     <button className="battery">
                        {Math.round(output.battery.chargePercent)}
                        {output.battery.isCharging ? ' ˊ˗' : '%'}
                     </button>
                  )}
               </div>
            </div>
         );
      }
   </script>
</body>

</html>

3. zebar.json

{
   "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
   "htmlPath": "./with-glazewm.html",
   "zOrder": "normal",
   "shownInTaskbar": false,
   "focused": false,
   "resizable": false,
   "transparent": false,
   "defaultPlacements": [
      {
         "anchor": "bottom_left",
         "offsetX": "0px",
         "offsetY": "-32px",
         "width": "100%",
         "height": "32px",
         "monitorSelection": {
            "type": "all"
         }
      }
   ]
}

4. styles.css

@import 'https://www.nerdfonts.com/assets/css/webfont.css';

i {
   color: rgb(115 130 175 / 95%);
}

body {
   color: rgb(255 255 255 / 90%);
   font-family: Segoe UI;
   font-size: 13px;
}

html,
body,
#root {
   height: 100%;
}

#root {
   background: #1b1b1b;
}

.app {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   align-items: center;
   height: 100%;
   padding: 4px 4px;
}

.left,
.center,
.right {
   display: flex;
   align-items: center;
}

.center {
   justify-self: center;
}

.right {
   justify-self: end;
}

.date,
.network,
.memory,
.cpu {
   margin-right: 12px;
}

.workspaces {
   display: flex;
   align-items: center;
   margin-right: 7px;
}

.workspace {
   background: transparent;
   padding: 4px 8px;
   color: rgb(255 255 255 / 90%);
   border: none;
   cursor: pointer;

   &.displayed {
      background: #00000033;
   }

   &.focused,
   &:hover {
      background: #ffffff15;
   }
}

.battery {
   background: #ffffff15;
   padding: 4px 8px;
   color: rgb(255 255 255 / 90%);
   border: none;
}

.tiling-direction {
   margin-right: 5px;
}

.binding-mode,
.tiling-direction {
   background: transparent;
   color: rgb(255 255 255 / 90%);
   padding: 4px 8px;
   border: 0;
   cursor: pointer;
}