nix-config/home/panotaka/common/optional/desktops/niri/ags/README.md

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:

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