unit-3-hyprland-nier-rice

What this skill does

# Unit-3 Hyprland NieR:Automata Rice

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

Unit-3 is a fully themed Arch Linux desktop rice combining Hyprland (Wayland compositor), Quickshell (QML-based widget system), and Waybar into a cohesive NieR:Automata aesthetic. It includes custom QML widgets for an app menu, lockscreen, wallpaper picker, notifications, and media player.

---

## Installation

### Quick Install (Recommended)

```bash
bash <(curl -fsSL https://raw.githubusercontent.com/samyns/Unit-3/main/install.sh)
```

### Manual Clone

```bash
git clone https://github.com/samyns/Unit-3.git
cd Unit-3
bash install.sh
```

The installer sets up:
- Hyprland config in `~/.config/hypr/`
- Quickshell widgets in `~/.config/quickshell/`
- Waybar config in `~/.config/waybar/`
- Kitty terminal config

---

## Directory Structure

```
Unit-3/
├── install.sh
├── .config/
│   ├── hypr/
│   │   ├── hyprland.conf       # Main Hyprland config
│   │   └── user.conf           # User overrides (never overwritten)
│   ├── quickshell/
│   │   └── *.qml               # Quickshell QML widget files
│   └── waybar/
│       ├── config              # Waybar modules config
│       └── style.css           # Waybar NieR-themed styles
```

---

## User Configuration (Never Overwritten)

All personal overrides go in `~/.config/hypr/user.conf`. This file is safe from updates.

```conf
# ~/.config/hypr/user.conf

# Monitor setup
monitor = DP-1, 2560x1440@144, 0x0, 1
monitor = HDMI-A-1, 1920x1080@60, 2560x0, 1

# Input layout
input {
    kb_layout = us
    kb_variant = 
    follow_mouse = 1
    sensitivity = 0
}

# Custom keybinds
bind = SUPER, B, exec, firefox
bind = SUPER, E, exec, nautilus
bind = SUPER, M, exec, spotify

# Environment variables
env = XCURSOR_SIZE, 24
env = GTK_THEME, NieR
```

---

## Keybinds Reference

| Key | Action |
|-----|--------|
| `SUPER` (tap) | Open app menu |
| `SUPER + L` | Lockscreen |
| `SUPER + T` | Terminal (kitty) |
| `SUPER + Return` | Toggle Quickshell player |
| `SUPER + P` | Wallpaper picker |
| `SUPER + Q` | Close window |
| `SUPER + F` | Fullscreen toggle |
| `ALT + Tab` | Cycle windows |
| `ALT + 1/2/3...` | Switch workspace |
| `Print` | Screenshot |
| `ALT + SHIFT + S` | Region screenshot |

---

## QML Widget Development

Quickshell widgets are written in QML. Unit-3 widgets follow a NieR aesthetic with dark backgrounds and angular UI elements.

### Basic Quickshell Widget Structure

```qml
// ~/.config/quickshell/MyWidget.qml
import Quickshell
import Quickshell.Io
import QtQuick
import QtQuick.Controls

ShellRoot {
    // Panels are screen-anchored overlays
    PanelWindow {
        id: myPanel
        anchors {
            top: true
            left: true
            right: true
        }
        height: 40
        color: "transparent"

        Rectangle {
            anchors.fill: parent
            color: "#1a1a1a"
            border.color: "#c8a951"  // NieR gold accent
            border.width: 1

            Text {
                anchors.centerIn: parent
                text: "Unit-3"
                color: "#e8d5a3"
                font.family: "monospace"
                font.pixelSize: 14
            }
        }
    }
}
```

### Notification Widget Pattern

```qml
// Notification popup following NieR style
import Quickshell
import Quickshell.Services.Notifications
import QtQuick

ShellRoot {
    NotificationServer {
        id: notifServer
    }

    Variants {
        model: notifServer.trackedNotifications

        PanelWindow {
            required property var modelData
            property var notification: modelData

            anchors {
                top: true
                right: true
            }
            margins.top: 10
            margins.right: 10

            width: 320
            height: 80
            color: "transparent"

            Rectangle {
                anchors.fill: parent
                color: "#101418"
                border.color: "#c8a951"
                border.width: 1
                radius: 2

                Column {
                    anchors {
                        left: parent.left
                        verticalCenter: parent.verticalCenter
                        leftMargin: 16
                    }
                    spacing: 4

                    Text {
                        text: notification.summary
                        color: "#c8a951"
                        font.pixelSize: 13
                        font.bold: true
                    }
                    Text {
                        text: notification.body
                        color: "#9a9a8a"
                        font.pixelSize: 11
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: notification.dismiss()
                }
            }

            // Auto-dismiss timer
            Timer {
                interval: 5000
                running: true
                onTriggered: notification.dismiss()
            }
        }
    }
}
```

### Media Player Widget Pattern

```qml
// ~/.config/quickshell/Player.qml
import Quickshell
import Quickshell.Services.Mpris
import QtQuick
import QtQuick.Controls

ShellRoot {
    FloatingWindow {
        id: playerWindow
        visible: false  // toggled by SUPER + Return

        width: 340
        height: 100
        color: "transparent"

        Rectangle {
            anchors.fill: parent
            color: "#0d1117"
            border.color: "#c8a951"
            border.width: 1

            Row {
                anchors {
                    left: parent.left
                    verticalCenter: parent.verticalCenter
                    leftMargin: 12
                }
                spacing: 12

                // Album art
                Rectangle {
                    width: 64
                    height: 64
                    color: "#1a1a1a"
                    border.color: "#c8a951"
                    border.width: 1

                    Image {
                        anchors.fill: parent
                        source: MprisController.currentPlayer?.trackArtUrl ?? ""
                        fillMode: Image.PreserveAspectCrop
                    }
                }

                Column {
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 4

                    Text {
                        text: MprisController.currentPlayer?.trackTitle ?? "No media"
                        color: "#e8d5a3"
                        font.pixelSize: 13
                        font.bold: true
                        elide: Text.ElideRight
                        width: 220
                    }
                    Text {
                        text: MprisController.currentPlayer?.trackArtist ?? ""
                        color: "#9a9a8a"
                        font.pixelSize: 11
                    }

                    // Playback controls
                    Row {
                        spacing: 8
                        Repeater {
                            model: ["⏮", "⏯", "⏭"]
                            Text {
                                text: modelData
                                color: "#c8a951"
                                font.pixelSize: 16
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        if (index === 0) MprisController.currentPlayer?.previous()
                                        else if (index === 1) MprisController.currentPlayer?.playPause()
                                        else MprisController.currentPlayer?.next()
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
```

### Wal