zebar-glazewm

My Config by Aria

• 🎯 Dotfiles Windows by me

---

✨ Features

• Active app highlight
• Taskbar preview

Preview

Settings

---

Installation 📂

Navigate to your ~/.glzr/zebar/ directory and clone this repository:

• git clone https://github.com/ariafatah0711/zebar-glazewm

Navigate to the repository and install the dependencies:

• cd ./zebar-glazewm/

• npm install

• Create a config.js file in the ./src/ folder. You can configure it later using the configuration section.

Build the project using the following command:

• npm run build

After completing these steps, you need to reload Zebar’s configuration.

You should see zebar-glazewm/main in the Widget configurations!

Configuration ⚙️

You need to create a config.js file in the zebar-glazewm/src/ directory. Enter the following key/value pairs in the file. These keys are not required for the build, so you can leave them as shown in the example.

Instructions for obtaining the Spotify tokens are provided in the Spotify section.

export default {
    spotifyClientId: '<YOUR-SPOTIFY-CLIENT-ID>',
    spotifyClientSecret: '<YOUR-SPOTIFY-CLIENT-SECRET>',
    spotifyRefreshToken: '<YOUR-SPOTIFY-REFRESH-TOKEN>',
    explorerPath: '<YOUR-EXPLORER-PATH>',
    powershellPath: '<YOUR-POWERSHELL-PATH>'
}

Customization 💅

You can customize the style by modifying the following values in the styles.css file:

• Main color: --main-color
• Font color: --font-color
• Background color: --background-color

If you use GlazeWM, you can rename your workspaces in the ~/.glzr/glazewm/config.yaml file:

workspaces:
  - name: "1"
    display_name: "[discord-logo] Other"
    ...
  - name: '2'
    display_name: "[code-logo] Work"
    ...
  - name: '3'
    display_name: "[search-logo] Search"
    ...
...

Visit the Nerd Fonts Cheat Sheet, search for the desired icon, hover over it, and click the Icon text to copy it to your clipboard. Then, replace [xxx-logo] with the copied icon.

Widgets 📦

Currently, Quiet Velvet includes four widgets.

• Spotify
• Google Search
• Shortcut
• Settings

Spotify

This widget displays your currently playing Spotify song.

On hover, you will have access to previous, play/pause, and skip song controls.

On click, it will open the Spotify app.

Note: You need a Spotify Premium account to be able to skip, pause, and play songs using this widget.

To use this widget, follow these steps:

1. Go to your Spotify developer dashboard.
2. Create an app with any name and description, and add this URI in the Redirect URIs section: https://alecchen.dev/spotify-refresh-token. Choose the Web API option.
3. Open your new app settings and fill in the spotifyClientId and spotifyClientSecret values in the src/config.js file.
4. Go to https://alecchen.dev/spotify-refresh-token/, enter your client ID and client secret, and select the following options: user-read-currently-playing, user-modify-playback-state, and streaming.
5. Click submit and fill in the spotifyRefreshToken value in the src/config.js file.

The widget will automatically generate a Spotify access token, store it in local storage, and generate a new one if the previous one expires.

Google Search

This widget allows you to quickly search for any information on Google.

When the Enter key is pressed, it will focus on the GlazeWM workspace 3 and open your explorer.

To use this widget, you only need to set the explorerPath value in src/config.js.

You can modify or remove the workspace focus in the onSubmit function of the src/components/GoogleSearch.jsx file.

Shortcut

This widget allows you to execute shortcuts, such as opening an application or a website.

On click, it will execute the specified shortcut.

To create a shorcut follow this example :

<Shortcut commandRunner={output.glazewm.runCommand}
          commands={[
              'focus --workspace 2',
              `shell-exec ${config.powershellPath}`
          ]}
          iconClass="nf-cod-terminal_powershell" name="Powershell"
/>

You can add a key/value pair in the src/config.js file and use it here, as shown with the powershellPath.

To change the icon, choose one from Nerd Fonts Cheat Sheet and paste the class in the iconClass property.

Settings

This widget allows you to toggle the visibility of all your widgets and saves your preferences in local storage.

To add another widget, follow this example:

function App() {
    const [showXWidget, setShowXWidget] = useState(true);
    const [showYWidget, setShowYWidget] = useState(true);
    ...
    return (
        <>
            ...
            {showXWidget ? <XWidget/> : null}
            ...
            {showYWidget ? <YWidget/> : null}
            ...
            {<Settings widgetObj={[
                { name: 'XWidget', changeState: setShowXWidget },
                { name: 'YWidget', changeState: setShowYWidget }
            ]}/>}
            ...
        </>
    )
}

Click on the gear icon to change the state of the widget.

Tips 🎁

• Open the task manager by clicking on the memory or CPU icon.
• Change the date format by hovering over it.