# AGS Bar Configuration for Niri

This AGS configuration provides a comprehensive status bar for the Niri Wayland compositor with the following features:

## Features

### 🕒 Clock Widget
- Displays current time and date
- Updates every second
- Format: `HH:MM Mon DD`

### 🔊 Volume Control
- Shows current volume level and mute status
- **Left click**: Toggle mute
- Visual feedback with icons:
  - 🔇 Muted
  - 🔈 Low volume (0-33%)
  - 🔉 Medium volume (34-66%)
  - 🔊 High volume (67-100%)

### 🔋 Battery Indicator
- Shows battery percentage
- Charging status indicator
- Icons:
  - 🔌 Charging
  - 🔋 Battery levels
  - 🪫 Low battery

### 🔵 Bluetooth Widget
- Shows Bluetooth power status
- **Left click**: Toggle Bluetooth on/off
- **Right click**: Auto-connect to paired devices
- Shows number of connected devices
- Icons:
  - 🔵 Bluetooth enabled
  - ⚫ Bluetooth disabled
  - 📱 Connected devices counter

### 🌐 Network Widget
- Shows network connection status
- **Left click**: Toggle WiFi / show connection info
- Auto-connects to known networks
- Icons:
  - 🌐 Wired connection
  - 📶 WiFi strength indicator
  - ❌ No connection
- Displays current WiFi SSID when connected

## Multi-Monitor Support

The bar automatically appears on all connected monitors using AGS's reactive monitor binding system. When monitors are added or removed, the bar will automatically adjust.

## Styling

The bar uses a modern dark theme with:
- Semi-transparent background
- Catppuccin-inspired color scheme
- Hover effects and smooth transitions
- Color-coded widget borders:
  - 🟢 Volume (Green)
  - 🟡 Battery (Yellow)
  - 🔵 Bluetooth (Blue)
  - 🔴 Network (Pink)

## Files

- `app.tsx` - Main application entry point
- `Bar.tsx` - Bar component with all widgets
- `style.css` - Styling and theme
- `package.json` - Project configuration
- `tsconfig.json` - TypeScript configuration

## Usage

The bar starts automatically with Niri via the `spawn-at-startup` configuration in the main Niri config. To manually restart:

```bash
pkill ags && ags run
```

## Customization

To customize the bar:

1. **Add new widgets**: Create functions in `Bar.tsx` and add them to the left/center/right sections
2. **Modify styling**: Edit `style.css` to change colors, spacing, and animations
3. **Change layout**: Modify the `centerbox` structure in the main Bar component
4. **Add keybindings**: Use Niri's keybinding system to interact with AGS widgets

## Dependencies

All required Astal libraries are automatically provided via the Nix configuration:
- `astal.battery` - Battery information
- `astal.bluetooth` - Bluetooth control
- `astal.network` - Network management
- `astal.wireplumber` - Audio control

## Notes

- The configuration uses modern AGS v2 syntax with JSX
- TypeScript errors in the editor are expected (AGS handles compilation)
- Network auto-connection relies on NetworkManager's saved connections
- Bluetooth auto-connection attempts to connect to paired devices