✨ a lot of changes and new stuff! started using mako

.gitignore

@@ -2,3 +2,5 @@
 # Ignore personal configurations (e.g.: hyprpaper.conf, input.conf)
 hypr/hyprpaper.conf
 hypr/input.conf
+
+*.log

apply.sh

@@ -10,7 +10,7 @@ echo "######################################"
 printf "\n"
 
 CONFIG_DIR="$HOME/.config"
-DOTFILES_DIRS=("hypr" "eww" "kitty" "anyrun" "wal" "fastfetch")
+DOTFILES_DIRS=("hypr" "eww" "kitty" "anyrun" "wal" "fastfetch" "mako")
 DOTFILES_BACKUP_DIR="$HOME/hyprland-dotfiles-bkp"
 TRASH_DIR="$HOME/.local/share/Trash/files"
 

eww/eww.scss

@@ -5,4 +5,5 @@
 @import "./styles/calendar.scss";
 @import "./styles/control-center.scss";
 @import "./styles/powermenu.scss";
-@import "./styles/audio-popup.scss";
+@import "./styles/volume-control.scss";
+@import "./styles/floating-notifications.scss";

eww/eww.yuck

@@ -2,9 +2,10 @@
 (include "variables.yuck")
 
 ; Windows
-(include "windows/calendar.yuck")
+(include "windows/calendar-window.yuck")
 (include "windows/control-center.yuck")
 (include "windows/bar.yuck")
 (include "windows/powermenu.yuck")
-(include "windows/audio-popup.yuck")
+(include "windows/volume-control.yuck")
-(include "windows/notification-popup.yuck")
+(include "windows/volume-popup.yuck")
+(include "windows/floating-media.yuck")

eww/scripts/active-window.sh

@@ -1,11 +1,11 @@
 #!/usr/bin/env bash
 
 # output current window before event trigger to prevent issues
-hyprctl -j activewindow | jq -c
+hyprctl -j activewindow | jq -c | sed 's/\\[n]//g'
 
 handle() {
   case $1 in
-    activewindow*) hyprctl -j activewindow | jq -c ;;
+      activewindow*) hyprctl -j activewindow | jq -c | sed 's/\\[n]//g' ;;
   esac
 }
 

eww/scripts/eww-window.sh

@@ -0,0 +1,78 @@
+#!/usr/bin/env bash
+
+# arg1,$1 should be one of the options listed in help command;
+# arg2,$2 should be the literal window name as defined in eww configuration.
+
+check_if_empty() {
+    if [[ -z $1 ]]; then
+        echo "[error] argument $2 is empty!"
+        exit 1
+    fi
+}
+
+case "$1" in
+    --help | -h | help | h)
+        printf \
+"This is a helper script that helps opening/closing eww windows on 
+retrozinndev's Hyprland Dots, by checking if the window is already 
+open/closed before doing anything, also changes eww state variables.
+This needs a variable like window_state_WINDOWNAME to work, where 
+WINDOWNAME is the literal name of the declared window inside the 
+eww configuration you are using. 
+
+Usage:
+                          arg1           arg2
+    ./eww-window.sh [SINGLE OPTION] [WINDOW_NAME]
+
+Options:
+  -h, --help, help: Shows this help message;
+  --open, open: Opens a window and changes its state variable to
+                \"open\" if not open, or else does nothing;
+  --toggle, toggle: Toggles a window. If open, the specified
+                    window is closed, if closed, the 
+                    specified window is open. Same thing goes to
+                    the eww window state variable;
+  --close, close: Closes a window and also changes its state 
+                  variable to \"closed\" if open, or else does
+                  nothing.
+
+
+Developer: retrozinndev (João Dias), https://github.com/retrozinndev
+Issue tracker: https://github.com/retrozinndev/Hyprland-Dots/issues
+Licensed under the MIT License, as in retrozinndev's Hyprland-Dots repo."
+        ;;
+
+    --open | open)
+        check_if_empty $2 "WINDOW_NAME"
+        if [[ $(eww get "window_state_$2") == "closed" ]]; then
+            eww open "$2"
+            eww update "window_state_$2=open"
+        else
+            echo "[info] Window '$2' is already open, ignored."
+        fi
+        ;;
+
+    --close | close)
+        check_if_empty $2 "WINDOW_NAME"
+        if [[ $(eww get "window_state_$2") == "open" ]]; then
+            eww close "$2"
+            eww update "window_state_$2=closed"
+        else
+            echo "[info] Window '$2' is already closed, ignored."
+        fi
+        ;;
+
+    --toggle | toggle)
+        check_if_empty $2 "WINDOW_NAME"
+        if [[ $(eww get "window_state_$2") == "closed" ]]; then
+            eww open "$2"
+            eww update "window_state_$2=open" 
+        else 
+            eww close "$2"
+            eww update "window_state_$2=closed"
+        fi
+        ;;
+    *)
+        echo "[error] Action not specified or incorrect command order. Good example: \`./eww-window.sh open bar\`"
+        ;;
+esac

eww/scripts/get-volume-watch.sh

@@ -16,6 +16,7 @@ source_vol=$(get_vol $source_)
 
 print_json
 
+# Loop
 pactl subscribe | grep --line-buffered -e "on sink" -e "on source" | while read -r; do
 
     output_vol=$(get_vol $sink_)

eww/scripts/mediaplayer.py

@@ -134,7 +134,8 @@ class PlayerManager:
             "title": player.get_title(),
             "artist": player.get_artist(),
             "player": player.props.player_name.lower(),
-            "artUrl": player.print_metadata_prop("mpris:artUrl")
+            "artUrl": player.print_metadata_prop("mpris:artUrl"),
+            "length": player.print_metadata_prop("mpris:length")
         }
 
         sys.stdout.write(json.dumps(output) + "\n")

eww/scripts/network.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-
-is_connected() {
-    
-}

eww/scripts/notification-handler.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+# initial notification history
+json_initial_history=$(makoctl history | jq -c '.data[]' | sed 's/\\[n]/\\n/g')
+echo $json_initial_history
+
+while true; do
+    # watch history every 200ms
+    sleep .2
+
+    # frequently updated history variable
+    json_history=$(makoctl history | jq -c '.data[]' | sed 's/\\[n]/\\n/g')
+
+    if ! [[ "$json_initial_history" == "$json_history" ]]; then
+        json_initial_history="$json_history"
+        echo "$json_initial_history"
+    fi
+done

eww/scripts/unused/notification-daemon.py

@@ -8,20 +8,22 @@ import threading
 import time
 import dbus
 import dbus.service
+import subprocess
+import os
+import sys
 from dbus.mainloop.glib import DBusGMainLoop
 from gi.repository import GLib
 
 class Notification:
-    def __init__(self, app_name, summary, body, icon, replaces_id, timeout):
+    def __init__(self, app_name, summary, body, icon, replaces_id):
         self.app_name = app_name
         self.summary = summary
         self.body = body
         self.icon = icon
         self.replaces_id = replaces_id
 
-notifications_on_popup = []
 notifications = []
-notification_timeout = 10 # In seconds
+notification_timeout = 8 # In seconds
 
 def remove_popup_notification(notification):
     time.sleep(notification_timeout)
@@ -31,19 +33,27 @@ def remove_popup_notification(notification):
 def add_popup_notification(notification):
     notifications.insert(0, notification)
     reload_output()
-    timer_thread = threading.Thread(target=remove_popup_notification, args=(notification,)) # Only used for notification popup, not history
+    timer_thread = threading.Thread(target=remove_popup_notification, args=(notification,))
     timer_thread.start()
 
 def reload_output():
     lastItem_notifications = len(notifications) - 1
     output = ""
 
+    os.popen(". /etc/profile; eww open floating-notifications >> /dev/null")
+
     for item in notifications:
         if item is not notifications[lastItem_notifications]:
-            output = output + f"{{ \"applicationName\": \"{item.app_name}\", \"image\": \"{item.icon}\", \"summary\": \"{item.summary}\", \"body\": \"{item.body}\", \"id\": {item.replaces_id}, \"timeout\": {item.timeout} }}, "
+            output = output + f"{{ \"applicationName\": \"{item.app_name}\", \"image\": \"{item.icon}\", \"summary\": \"{item.summary}\", \"body\": \"{item.body}\", \"id\": {item.replaces_id} }}, "
 
         else:
-            output = "["+ output + f"{{ \"applicationName\": \"{item.app_name}\", \"image\": \"{item.icon}\", \"summary\": \"{item.summary}\", \"body\": \"{item.body}\", \"id\": {item.replaces_id}, \"timeout\": {item.timeout} }} ]"
+            output = "["+ output + f"{{ \"applicationName\": \"{item.app_name}\", \"image\": \"{item.icon}\", \"summary\": \"{item.summary}\", \"body\": \"{item.body}\", \"id\": {item.replaces_id} }} ]"
+
+
+    # Check if notifications(var) is empty
+    if not notifications:
+        output = "[]"
+        os.popen(". /etc/profile; eww close floating-notifications >> /dev/null")
     
     print(f"{output}", flush=True)
 
@@ -55,7 +65,7 @@ class NotificationServer(dbus.service.Object):
 
     @dbus.service.method("org.freedesktop.Notifications", in_signature="susssasa{ss}i", out_signature="u")
     def Notify(self, app_name, replaces_id, icon, summary, body, actions, hints, timeout):
-        add_popup_notification(Notification(app_name, summary, body, icon, replaces_id, timeout))
+        add_popup_notification(Notification(app_name, summary, body, icon, replaces_id))
         return 0
 
     @dbus.service.method("org.freedesktop.Notifications", out_signature="ssss")

eww/scripts/unused/recent-notifications.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+
+# initial history
+json_notification_history=$(dunstctl history | jq -c '.data[]' | sed 's/\\[n]/\\n/g')
+json_recent_notifications="[]"
+notification_timeout='8s'
+
+while true; do
+    # check history every 200ms
+    sleep .2
+
+    if ! [[ "$json_notification_history" == "$(dunstctl history | jq -c '.data[]' | sed 's/\\[n]/\\n/g')" ]]; then
+        json_notification_history="$(dunstctl history | jq -c '.data[]' | sed 's/\\[n]/\\n/g')"
+        json_last_notification=$(echo $json_notification_history | jq -c ".[0]")
+
+        json_recent_notifications=$(echo $json_recent_notifications | jq -c ". |= [$json_last_notification] + .")
+        echo $json_recent_notifications
+        for (( i=0; i<$($(echo $json_recent_notifications | jq 'length')); i++ )); do
+            sleep $notification_timeout
+            json_recent_notifications=$(echo $json_recent_notifications | jq -c "del(.[$i])")
+            echo $json_recent_notifications
+        done
+    fi
+done

eww/scripts/volume-popup-trigger.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+while true; do
+    is_holding=$(eww get hold_volume_popup)
+    if [[ $is_holding == true ]]; then
+        sleep 4
+        sh ./eww-window.sh close volume-popup
+        eww update "hold_volume_popup=false"
+    else
+        break
+    fi
+done
+
+exit 0

eww/scripts/workspaces.sh

@@ -1,7 +1,5 @@
 #!/usr/bin/env bash
 
-#!/usr/bin/env bash
-
 print_workspaces_literal() {
     active_workspace_id=$(hyprctl -j activeworkspace | jq .id | xargs)
     existing_workspaces=$(hyprctl -j workspaces | jq .[].id | xargs)
@@ -13,9 +11,10 @@ print_workspaces_literal() {
 
     for i in {1..10}; do
         output=$output"
-    (button :onclick \"hyprctl dispatch workspace $i\" 
+            (button :onclick \"hyprctl dispatch workspace $i >> /dev/null \" 
                     :class { $active_workspace_id == $i ? \"active\" : \"\" } 
                     :visible { \"$existing_workspaces\" =~ $i ? true : false }
+                    :tooltip \"Workspace ${i}\"
             \"\")"
 
         if [ $i == 10 ]; then

eww/styles/bar.scss

@@ -36,16 +36,18 @@
 // Styles the literal script for workspace indicators
 .workspaces {
     padding: 2px 0px;
-    border-radius: 10px;
+    border-radius: 50%;
 
     & > button {
+        $padding-block: 5px;
+
         border-radius: 16px;
         margin: 0 2px;
-        padding: 5px 12px;
+        padding: $padding-block 12px;
-        background: $color1;
+        background: lighten($color: $color1, $amount: 10);
 
         &.active {
-            padding: 5px 22px;
+            padding: $padding-block 22px;
             background: $foreground;
         }
     }
@@ -66,7 +68,7 @@
     margin: 0 6px;
     
     & > * > * {
-        margin: 0 4px
+        margin: 0 6px;
     }
 }
 
@@ -76,7 +78,7 @@
 
     & > .media {
         border-radius: inherit;
-        background: darken($color: $color3, $amount: 15);
+        background: darken($color: $color3, $amount: 5);
         
         & > label {
             color: $foreground;
@@ -129,7 +131,7 @@
     padding: 0 4px;
 
     & > .icon {
-        margin: 0 4px;
+        margin-right: 6px;
     }
 
     & > box.info {
@@ -147,7 +149,12 @@
     }
 }
 
-.network {
+.network button {
+    padding-left: 10px;
+    padding-right: 7px;
+}
+
+.bluetooth button {
     padding-left: 10px;
     padding-right: 7px;
 }
@@ -157,10 +164,14 @@
         background: darken($color: $color2, $amount: 5);
     }
 
-    & > box.audio {
+    & > .audio {
         padding: 0 8px;
         border-radius: 12px;
 
+        &.open {
+            background: darken($color: $color3, $amount: 10);
+        }
+
         label {
             font-weight: 600;
 
@@ -175,11 +186,19 @@
     }
 }
 
-.control-center-toggle button {
+.clock button.cal-open {
+    background: darken($color: $color3, $amount: 10);
+}
+
+.control-center-toggle {
     padding-left: 12px;
-    padding-right: 10px;
+    padding-right: 14px;
+
+    label {
+        font-size: 12px;
+    }
 
     &.open {
-        background: darken($color: $color3, $amount: 15);
+        background: darken($color: $color3, $amount: 10);
     }
 }

eww/styles/control-center.scss

@@ -1,14 +1,16 @@
-
 box.cc {
-    margin: 16px;
+    margin-top: 8px;
+    margin-bottom: 14px;
+    margin-left: 14px;
     background: rgba($background, .85);
-    border-radius: 16px;
+    border-top-left-radius: 24px;
-    border: 2px solid darken($color: $color3, $amount: 20);
+    border-bottom-left-radius: 24px;
     padding: 18px;
+    box-shadow: 0 5 8px 1px black;
 }
 
-.quickactions {
+.top-bar {
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 
     & label {
         &.hostname {
@@ -37,7 +39,7 @@ box.cc {
     }
 }
 
-.control-center .mediaplayer {
+.big-media {
     padding: 16px;
     margin: 6px 0;
     border-radius: 18px;
@@ -70,7 +72,7 @@ box.cc {
             }
         }
 
-        & > .media-controls {
+        & > .controls {
             padding: 0px;
 
             & > button {
@@ -87,7 +89,7 @@ box.cc {
         }
     }
 
-    &.mediaplayer-album-bg {
+    &.album-bg {
         box-shadow: inset 0 0 0 100px rgba($background, .6);
         background-size: cover;
     }
@@ -104,9 +106,9 @@ box.cc {
                 & > .top {
                     border-top-left-radius: inherit;
                     border-top-right-radius: inherit;
-                    background: darken($color: $color1, $amount: 5);
+                    background: darken($color: $color1, $amount: 7);
                     border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
-                    padding: 2px 6px;
+                    padding: 5px 6px;
 
                     & > .app-info {
                         & .app-icon {
@@ -117,12 +119,13 @@ box.cc {
                 }
 
                 & .content {
-                    padding: 6px;
+                    padding: 8px;
-                    padding-top: 0;
+                    padding-top: 0px;
 
                     & > .image {
                         border-radius: 16px;
                         margin-right: 6px;
+                        margin-top: 6px;
                         background-size: cover;
                         background-repeat: no-repeat;
                         background-position: center 0;
@@ -160,46 +163,52 @@ box.cc {
     }
 }
 
-.toggle-grid {
+.toggles {
-    .grid-toggle .toggle {
-        margin: 0 6px;
     
-        &:first-child {
+    margin-bottom: 10px;
+    
+    & > .toggle-checkbox:first-child {
         margin-left: 0;
     }
 
-        &:last-child {
+    & > .toggle-checkbox:last-child {
         margin-right: 0;
     }
+
+    & .toggle-checkbox {
+        margin: 2px;
+
+        &:hover {
+            & > box {
+                background: darken($color: $color2, $amount: 15);
             }
         }
 
-.grid-toggle {
+        &:checked {
+            & > box {
+                background: darken($color: $color1, $amount: 12);
+            }
+        }
 
-    &.active {
+        & > *:not(box) {
-        background: darken($color: $color1, $amount: 2);
+            color: transparent;
         }
 
         & > .toggle {
-        padding: 8px;
+            background: darken($color: $foreground, $amount: 65);
-        border-radius: 18px;
+            border-radius: 16px;
-
+            padding: 16px;
-        label {
+            margin-left: -16px; // This covers the checkbox space, hiding the check thing
-            font-family: "Cantarell", "0xProto Nerd Font";
-        }
 
             .icon {
-            margin-right: 6px;
+                font-size: 14px;
-            font-size: 16px;
+                padding-right: 5px;
             }
 
-        label.header {
+            .label {
-            font-weight: 700;
                 font-size: 12px;
+                font-weight: 600;
             }
-
-        label.body {
-            font-size: 11px;
         }
     }
 }

eww/styles/floating-notifications.scss

@@ -0,0 +1,48 @@
+.floating-notifications {
+    & > .floating-notification {
+        $background-color: darken($color: $color1, $amount: 40);
+        background: $background-color;
+        border-radius: 16px;
+        margin: 14px;
+        box-shadow: 0 0 8px 2px rgba($background, .9);
+
+        & > .top {
+            border-top-left-radius: 15.4px;
+            border-top-right-radius: 15.4px;
+            padding: 6px 12px;
+            background: lighten($color: $background-color, $amount: 5);
+            border-bottom: .5px solid rgba($foreground, .2);
+            
+            label {
+                font-family: "Noto Sans Mono", monospace;
+                font-size: 11px;
+            }
+        }
+        
+        .content {
+            padding: 10px;
+
+            .image {
+                background-position: center;
+                background-size: cover;
+                margin-right: 6px;
+                border-radius: 12px;
+            }
+
+            .text-content {
+                
+                label.summary {
+                    font-size: 16px;
+                    font-weight: 700;
+                }
+
+                label.body {
+                    font-size: 13.3px;
+                }
+
+                padding-bottom: 2px;
+            }
+        }
+
+    }
+}

eww/styles/general.scss

@@ -1,3 +1,6 @@
+
+$foreground: lighten($color: $foreground, $amount: 5);
+
 * {
     all: unset;
     transition: 120ms linear;
@@ -33,14 +36,14 @@ box.button-row {
     }
 }
 
-box.vertical-button-row {
+box.vertical.button-row {
     padding: 2px;
     $bg-color: darken($color: $foreground, $amount: 25);
 
     & > button {
         background: rgba($bg-color, .7);
         border-radius: 2px;
-        margin: 0 1px;
+        margin: 1px 0;
 
         &:first-child {
             border-top-left-radius: 8px;
@@ -130,3 +133,15 @@ trough highlight {
 scale {
     padding: 10px;
 }
+
+tooltip {
+    & box {
+        margin: 16px;
+        margin-top: 0;
+        border-radius: 12px;
+        border: 1px solid darken($color: $color1, $amount: 1);
+        background: $background;
+        padding: 6px 8px;
+        box-shadow: 0 3px 5px 1px rgba($color: #000000, $alpha: .8);
+    }
+}

eww/styles/powermenu.scss

@@ -7,13 +7,26 @@
     }
     & > button {
         padding: 96px;
+        margin: 0 6px;
+        border-radius: 6px;
+        background: darken($color: $foreground, $amount: 35);
+
+        &:first-child {
+            border-top-left-radius: 24px;
+            border-bottom-left-radius: 24px;
+        }
+
+        &:last-child {
+            border-top-right-radius: 24px;
+            border-bottom-right-radius: 24px;
+        }
+
         & label {
             font-size: 98px;
         }
     }
 
-    & button:hover,
+    & button:hover {
-    & button:focus {
+        background: $color1;
-        background: darken($color: $color2, $amount: 20);
     }
 }

eww/styles/volume-control.scss

@@ -1,13 +1,27 @@
 
-box.audio-popup {
+.volume-control {
-    background: rgba($background, .7);
+    background: rgba($background, .8);
     padding: 8px;
-    margin-right: 6px;
     border-radius: 16px;
     border: .5px solid rgba($foreground, .3);
+
+    trough {
+        background: rgba(lighten($color: $background, $amount: 8), .4);
+        border-radius: 6px;
     }
 
-.audio-popup .separator {
+    trough highlight {
+        background: lighten($color: $color2, $amount: 40);
+        padding: 10px;
+        border-radius: inherit;
+    }
+
+    scale {
+        padding: 10px;
+    }
+}
+
+.volume-control .separator {
     border-top: .5px solid rgba(darken($color: $foreground, $amount: 25), .7);
     margin-bottom: 8px;
     margin-left: 6px;
@@ -15,40 +29,9 @@ box.audio-popup {
     border-radius: 1px;
 }
 
-.audio-popup .output-slider {
+.volume-control .slider {
     label {
         margin-left: 18px;
         color: $background;
     }
 }
-
-.audio-popup .source-slider {
-    label {
-        margin-left: 18px;
-        color: $background;
-    }
-}
-
-
-.audio-popup {
-
-    trough {
-        background: darken($color: $foreground, $amount: 25);
-        border-radius: 6px;
-    }
-
-    trough highlight {
-        background: $foreground;
-        padding: 10px;
-        border-radius: inherit;
-    }
-
-    slider:active highlight {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    scale {
-        padding: 10px;
-    }
-}

eww/variables.yuck

@@ -1,9 +1,20 @@
-; All globally used variables are stored here
+; All globally used variables should be stored here
+
+
+; State
+(defvar window_state_powermenu "closed")
+(defvar window_state_control-center "closed")
+(defvar window_state_floating-notifications "closed")
+(defvar window_state_bar "closed")
+(defvar window_state_volume-control "closed")
+(defvar window_state_calendar-window "closed")
+(defvar window_state_volume-popup "closed")
+(defvar window_state_floating-media "closed")
 
 
 ; Listeners
-(deflisten json_notification_history :initial `[]`
+(deflisten json_notifications :initial "[]"
-`python scripts/notification-daemon.py`)
+`sh scripts/notification-handler.sh`)
 
 (deflisten json_volume :initial `{ "output": 60, "source": 80 }`
 `sh scripts/get-volume-watch.sh`)
@@ -11,21 +22,43 @@
 (deflisten literal_workspaces :initial ""
 `sh scripts/workspaces.sh`)
 
-; Date and time
+(deflisten json_media :initial "{}"
+`python3 scripts/mediaplayer.py`)
+
+(deflisten active_window :initial `{ "title": "null", "class": "null" }`
+`sh scripts/active-window.sh`)
+
+
+; Polls
 (defpoll day-name :interval "5s"
 `date +"%A"`)
-
 (defpoll day :interval "5s"
 `date +"%d"`)
-
 (defpoll month :interval "5s"
 `date +"%m"`)
-
 (defpoll month-name :interval "5s"
 `date +"%B"`)
-
 (defpoll year :interval "5s"
 `date +"%Y"`)
-
 (defpoll time :interval "5s"
 `date +"%H:%M"`)
+
+(defpoll hostname :initial "GNU/Linux"
+                  :interval "24h"
+`cat /etc/hostname`)
+
+(defpoll uptime_info :interval "50s"
+`uptime -p | sed -e 's/^up //'`)
+
+(defpoll network_status :interval "2s"
+`nmcli n c`)
+
+(defpoll bluetooth_powered :interval "2s"
+`bluetoothctl show | grep Powered | awk '{ print $2 }'`)
+
+(defpoll notification_modes :interval "1s"
+`makoctl mode | xargs`)
+
+
+; Variables
+(defvar hold_volume_popup false)

eww/widgets/bar/audio.yuck

@@ -1,8 +1,8 @@
 
 (defwidget audio []
-    (eventbox :onclick "eww open --toggle audio-popup"
+    (eventbox :onclick "sh scripts/eww-window.sh toggle volume-control"
               :class "audio-eventbox"
-        (box :class "audio"
+        (box :class "audio ${window_state_volume-control}"
             (eventbox :onscroll `[ {} == "up" ] && wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%+ || wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-`
                 (label :text "${ json_volume.output != 0 ? '󰕾' : '󰝟' }  ${json_volume.output}%"))
             (eventbox :onscroll `[ {} == "up" ] && wpctl set-volume @DEFAULT_AUDIO_SOURCE@ 5%+ || wpctl set-volume @DEFAULT_AUDIO_SOURCE@ 5%-`

eww/widgets/bar/cc-toggle.yuck

@@ -1,7 +1,6 @@
 
 (defwidget cc-toggle []
-    (box :class "control-center-toggle"
+  (button :onclick "sh scripts/eww-window.sh toggle control-center" 
-      (button :onclick "eww open --toggle control-center" 
+          :class "control-center-toggle ${ window_state_control-center == "open" ? "open" : "closed" }"
-      " ")
+  { notification_modes =~ "dnd" ? "󰂠" : "󰂚"})
-    )
 )

eww/widgets/bar/clock.yuck

@@ -1,6 +1,8 @@
 (defwidget clock []
     (box :class "clock"
-      (button :onclick "eww open calendar-window --toggle"
+         :tooltip "${day-name}, ${month-name} ${day}"
+      (button :onclick "sh scripts/eww-window.sh toggle calendar-window"
+              :class "${window_state_calendar-window == 'open' ? 'cal-open' : ''}"
       "${day-name} ${day}, ${time}")
     )
 )

eww/widgets/bar/media.yuck

@@ -1,43 +1,50 @@
 
 (defvar media_reveal_controls false)
 
-(deflisten json_media :initial "{}"
-`python3 ./scripts/mediaplayer.py`)
-
 (defwidget media [] 
-    (eventbox :onhover "eww update media_reveal_controls=true"
+  (eventbox :onhover "${EWW_CMD} update media_reveal_controls=true"
-              :onhoverlost "eww update media_reveal_controls=false"
+            :onhoverlost "${EWW_CMD} update media_reveal_controls=false"
             :visible { json_media.title == "null" && json_media.artist == "null" ?
                   false 
               : 
                   "${ active_window.class =~ json_media.player || active_window.title =~ json_media.title ? false : true }" 
               }
-        (box :class "mediaplayer ${ media_reveal_controls ? 'revealed' : '' }"
+            :onclick "sh scripts/eww-window.sh toggle floating-media"
+
+    (box :class "mediaplayer ${ media_reveal_controls && window_state_floating-media == "closed" ? 'revealed' : '' }"
          :space-evenly false
 
       (box :class "media"
            :space-evenly false
+           :tooltip "${json_media.title} - ${json_media.artist}"
+
         (label :class "player"
                :text { json_media.player == "spotify" ? " " : "󰎇 " })
+
         (label :class "media-title" 
                :text "${json_media.title}"
                :limit-width 40)
+
         (box :class "separator")
+
         (label :class "media-artist"
                :text "${json_media.artist}"
                :limit-width 25)
       )
       (revealer :class "media-controls-revealer"
-                      :reveal { media_reveal_controls ? true : false }
+                :reveal { media_reveal_controls ? "${ window_state_floating-media == 'closed' ? true : false }" : false }
                 :transition "slideright"
                 :duration "180ms"
+
         (box :class "media-controls"
           (button :class "previous"
                   :onclick "playerctl previous --player=${json_media.player}"
           "󰒮")
+
           (button :class "toggle play-pause"
                   :onclick "playerctl play-pause --player=${json_media.player}"
           { json_media.status == "playing" ? "󰏤" : "󰐊" })
+
           (button :class "next"
                   :onclick "playerctl next --player=${json_media.player}"
           "󰒭")

eww/widgets/bar/network.yuck

@@ -1,9 +1,5 @@
-(defpoll connection_status :interval "5s"
-`nmcli n c`)
-
 (defwidget network []
-    (box
+    (box :class "network"
-        (button :class "network"
+        (button "${ network_status == 'full' ? ' ' : '󰤭 ' }")
-        { connection_status == "full" || connection_status == "partial" ? " " : "󰤭 " })
     )
 )

eww/widgets/bar/window.yuck

@@ -1,27 +1,27 @@
 
-(deflisten active_window :initial `{ "title": "null", "class": "null" }`
-`sh ./scripts/active-window.sh`)
-
 (defwidget window []
     (box :class "window"
-            :visible { active_window.class == "null" ? false : true }
+            :visible { active_window.class == "" || active_window.class == "null" ? false : true }
             :vexpand false
             :space-evenly false
             :orientation "horizontal"
 
         (image :class "icon"
-               :icon "${active_window.initialClass}"
+               :icon "${ active_window.initialClass =~ 'zen-(.*)$' ? 'zen-browser' : active_window.initialClass }"
                :icon-size "toolbar")
 
         (box :class "info"
              :orientation { active_window.title == "" ? "horizontal" : "vertical" }
              :space-evenly false
             (label :class "window-class"
-                   :text "${active_window.class}")
+                   :text "${active_window.class}"
+                   :xalign 0)
             (label :class "window-title"
                    :text "${active_window.title}"
                    :visible { active_window.title != "" ? true : false }
-                   :limit-width 45)
+                   :limit-width 45
+                   :tooltip "${active_window.title}"
+                   :xalign 0)
         )
     )
 )

eww/widgets/control-center/big-media.yuck

@@ -1,24 +1,20 @@
-
+(defwidget big-media [ album_background ]
-(deflisten json_media_data :initial "{}"
-`python ./scripts/mediaplayer.py`)
-
-(defwidget mediaplayer [ album_background ]
     (box :orientation "horizontal"
          :space-evenly false 
-         :class "mediaplayer ${ album_background == true ? 'mediaplayer-album-bg' : '' }"
+         :class "big-media ${ album_background == true ? 'album-bg' : '' }"
-         :style { album_background == true ? "background-image: image(url('${json_media_data.artUrl}'))" : "" }
+         :style { album_background == true ? "background-image: image(url('${json_media.artUrl}'))" : "" }
-         :visible { json_media_data.title != "null" && json_media_data.artist != "null" ? true : false }
+         :visible { json_media.title != "null" && json_media.artist != "null" ? true : false }
 
         (box :class "album-image"
              :width 98
              :height 87
-             :style "background-image: image(url('${json_media_data.artUrl}'));"
+             :style "background-image: image(url('${json_media.artUrl}'));"
              :valign "center")
 
         (box :orientation "vertical"
              :space-evenly false
              :class "right"
-             :halign "fill"
+             :hexpand true
 
             (box :class "media-info"
                  :space-evenly false
@@ -26,39 +22,36 @@
                  :orientation "vertical"
 
                 (label :class "title"
-                       :text "${json_media_data.title}"
+                       :text "${json_media.title}"
                        :xalign 0
                        :wrap false
                        :hexpand true
                        :show-truncated true)
                 (label :class "artist"
-                       :text "${json_media_data.artist}"
+                       :text "${json_media.artist}"
                        :xalign 0
                        :wrap false
                        :hexpand true
                        :show-truncated true)
             )
 
-            (box :class "media-controls button-row"
+            (box :class "controls button-row"
                  :orientation "horizontal"
                  :space-evenly false
                  :halign "start"
 
                 (button :class "shuffle"
-                        :onclick "playerctl --player=${json_media_data.player} shuffle Toggle"
+                        :onclick "playerctl --player=${json_media.player} shuffle Toggle"
                 "󰒝")
                 (button :class "previous"
-                        :onclick "playerctl --player=${json_media_data.player} previous"
+                        :onclick "playerctl --player=${json_media.player} previous"
                 "󰒮")
                 (button :class "play-pause"
-                        :onclick "playerctl --player=${json_media_data.player} play-pause"
+                        :onclick "playerctl --player=${json_media.player} play-pause"
-                { json_media_data.status == "playing" ? "󰏤" : "󰐊" })
+                { json_media.status == "playing" ? "󰏤" : "󰐊" })
                 (button :class "next"
-                        :onclick "playerctl --player=${json_media_data.player} next"
+                        :onclick "playerctl --player=${json_media.player} next"
                 "󰒭")
-                (button :class "repeat"
-                        :onclick "" ; todo
-                "󰑖")
             )
         )
     )

eww/widgets/control-center/notification.yuck

@@ -1,4 +1,4 @@
-(defwidget notification [ ?application_name ?icon_path summary body ?image ?onclick ]
+(defwidget notification [ ?application_name ?icon summary body ?image ?onclickclose ?onclick ]
     (eventbox :onclick "${onclick}"
         (box :class "notification"
              :orientation "vertical"
@@ -16,26 +16,25 @@
                      :vexpand false
                     
                     (image :class "app-icon"
-                           :path "${icon_path}"
+                           :visible { icon != "" ? true : false }
-                           :visible { icon_path != "" ? true : false }
+                           :icon "${icon}"
-                           :image-width 32
+                           :icon-size "menu")
-                           :image-height 32)
                     (label :class "app-name"
                            :text "${application_name}")
                 )
-                (box :space-evenly false
                 (button :class "close"
-                            :onclick "${onclick}"
+                        :style "border-radius: 10px; padding: 6px; padding-left: 10px; padding-right: 10px;"
+                        :onclick "${onclickclose}"
+                        :visible false ; Temporary, will try doing something to remove history items
                 "󰅖")
             )
-            )
 
             (box :class "content"
                  :space-evenly false
                 (box :class "image"
                      :width 96
                      :height 96
-                     :visible { image != "" ? true : false }
+                     :visible { image != "" && image != "\{\}" ? true : false }
                      :style { image != "" ? "background-image: image(url('${image}'));" : "" }
                 ) 
 

eww/widgets/control-center/notifications.yuck

@@ -1,30 +1,35 @@
-(include "widgets/control-center/notification.yuck")
-
 (defwidget notifications []
   (box :class "cc-notifications"
-         :space-evenly false
        :orientation "vertical"
+       :space-evenly false
       
     (scroll :class "vertical-scroll"
             :hscroll false
             :vscroll true
-                :height 400 ; Adjust according to control center size
+            :hexpand true
             :vexpand true
+            :height 500
+            :style "border-radius: 16px;"
 
       (box :class "notifications"
            :orientation "vertical"
            :space-evenly false
            
-                (for notification in json_notification_history
+
-                    (notification :application_name "${notification.applicationName}"
+        (for notification in json_notifications
-                                  :image "${notification.image}"
+          (notification :application_name "${notification.app-name.data}"
-                                  :summary "${notification.summary}"
+                        :image "${notification.app-icon.data}"
-                                  :body "${notification.body}")
+                        :summary "${notification.summary.data}"
+                        :body "${notification.body.data}"
+                        ;:onclickclose "dunstctl history-rm ${notification.id.data}" ; needs fix
+                        :onclick "makoctl invoke -n ${notification.id.data}"
+                        :icon "${notification.app-name.data}"
+          )
         )
 
         (box :class "empty-notifications"
-                     :visible { json_notification_history[0] == "null" ? true : false }
+             :visible { arraylength(json_notifications) == 0 ? true : false }
-                     :style "margin-top: 150px;"
+             :style "margin-top: 50px;"
              :space-evenly false
              :orientation "vertical"
              :halign "center"
@@ -42,11 +47,9 @@
     (box :class "bottom button-row"
          :halign "end"
          :space-evenly false
-            (button :class "do-not-disturb"
-            "󰒲")
       (button :class "clear-all"
-                    :onclick "dunstctl history-clear"
+              :onclick { arraylength(json_notifications) > 0 ? "pkill mako; hyprctl dispatch exec mako" : "" }
-            "Clear all")
+      "󰎟  Clear")
     )
   )
 )

eww/widgets/control-center/toggle-grid.yuck

@@ -1,73 +0,0 @@
-
-(defwidget toggle-grid []
-    (box :class "toggle-grid"
-         :orientation "vertical"
-        (box :orientation "horizontal"
-             :class "row"
-          (grid-toggle :class "network"
-                       :icon "󰈀"
-                       :header "Network"
-                       :active true ; This sets if toggle is enabled or not, put condition check here
-                       :body "Connected" ; Put state here (e.g.: enabled, disabled)
-                       :visible true
-                       :onclick "notify-send 'Network' 'toggle network with nmcli!'"
-          )
-          (grid-toggle :class "bluetooth"
-                       :icon "󰂯"
-                       :header "Bluetooth"
-                       :active false 
-                       :body "Connected" 
-                       :visible true
-                       :onclick "notify-send 'Network' 'toggle network with nmcli!'"
-          )
-          (grid-toggle :class "dnd"
-                       :icon "󰍶"
-                       :header "Do Not Disturb"
-                       :active false 
-                       :body "Disabled" 
-                       :visible true
-                       :onclick "notify-send 'Network' 'toggle network with nmcli!'"
-          )
-        )
-        (box :orientation "horizontal"
-             :class "row"
-             :space-evenly false
-          (grid-toggle :class "airplane"
-                       :icon "󰀝"
-                       :header "Airplane Mode"
-                       :active false
-                       :body "Disabled"
-                       :visible true
-                       :onclick "notify-send 'Network' 'toggle network with nmcli!'"
-          )
-        )
-    )
-)
-
-(defwidget grid-toggle [ class onclick active ?icon header body visible ]
-    (eventbox :visible "${visible}"
-              :onclick "${onclick}"
-              :class "grid-toggle ${class} ${ active == true ? 'active' : '' } button"
-        (box :class "toggle"
-             :space-evenly false
-             :orientation "horizontal"
-             :width 142
-             :height 52
-
-            (label :class "icon"
-                   :visible { icon != "" ? true : false } 
-                   :valign "center"
-                   :text "${icon}")
-
-            (box :orientation "vertical"
-                 :space-evenly false
-                (label :class "header"
-                       :text "${header}"
-                       :xalign 0)
-                (label :class "body"
-                       :text "${body}"
-                       :xalign 0)
-            )
-        )
-    )
-)

eww/widgets/control-center/toggles.yuck

@@ -0,0 +1,60 @@
+(defwidget toggles []
+  (box :class "toggles-grid"
+       :orientation "vertical"
+    (box :class "toggles toggles1"
+      (_toggle :icon '󰤨'
+               :label "Network"
+               :enabled { network_status == "full" ? true : false }
+               :onenable "nmcli n on"
+               :ondisable "nmcli n off"
+               :visible true
+               :class "network")
+      (_toggle :icon '󰂯'
+               :label "Bluetooth"
+               :enabled { bluetooth_powered == "yes" ? true : false }
+               :onenable "bluetoothctl power on"
+               :ondisable "bluetoothctl power off"
+               :visible true)
+      (_toggle :icon '󰍶'
+               :label "Do Not Disturb"
+               :show-arrow false
+               :enabled { notification_modes =~ "dnd" ? true : false }
+               :onenable "makoctl mode -a dnd"
+               :ondisable "makoctl mode -r dnd"
+               :visible true)
+    )
+    (box :class "toggles toggles2"
+         :visible false
+      (_toggle :icon '󰀝'
+               :label "Airplane Mode"
+               :show-arrow false
+               :onenable "notify-send -a 'Airplane Mode' 'Toggle AP mode!'"
+               :ondisable ""
+               :visible true)
+    )
+  )
+)
+
+(defwidget _toggle [ ?class icon label ?onclickarrow ?enabled onenable ondisable visible ?min-width ]
+  (checkbox :onchecked "${onenable}"
+            :onunchecked "${ondisable}"
+            :checked { enabled == true ? true : false }
+            :class "toggle-checkbox"
+
+    (box :class "toggle"
+         :space-evenly false
+         :valign "center"
+
+      (label :text "${icon}"
+             :class "icon"
+             :unindent true
+             :limit-width 1
+             :show-truncated false
+             :xalign 0)
+
+      (label :text "${label}"
+             :class "label"
+             :xalign 0)
+    )
+  )
+)

eww/widgets/control-center/top-bar.yuck

@@ -1,17 +1,11 @@
-(defpoll hostname :initial "GNU/Linux"
+(defwidget top-bar []
-                  :interval "24h"
+    (box :class "top-bar"
-`cat /etc/hostname`)
-
-(defpoll uptime_info :interval "50s"
-`uptime -p | sed -e 's/^up //'`)
-
-(defwidget quickactions []
-    (box :class "quickactions"
          :orientation "horizontal"
 
         (box :class "left"
              :orientation "vertical"
              :halign "start"
+             :space-evenly false
 
             (label :xalign 0
                    :text "   ${hostname}"
@@ -31,10 +25,10 @@
                      :onclick "hyprctl dispatch exec hyprlock"
              "󰌾")
              (button :class "color-picker"
-                     :onclick "sh $HOME/.config/eww/scripts/color-picker.sh"
+                     :onclick "hyprctl dispatch exec 'sh $HOME/.config/eww/scripts/color-picker.sh'"
              "󰴱")
              (button :class "powermenu"
-                     :onclick "eww close-all; eww open powermenu"
+                     :onclick "sh scripts/eww-window.sh close bar && sh scripts/eww-window.sh open powermenu"
              "󰗽")
         )
     )

eww/widgets/volume-control/output-slider.yuck

@@ -1,10 +1,10 @@
 (defwidget output-slider []
-    (box :class "output-slider"
+    (box :class "slider output-slider"
          :space-evenly true
 
         (overlay
             (scale :min 0
-                   :max 100
+                   :max 101 ; dirty fix max 99% volume
                    :value "${json_volume.output}"
                    :orientation "horizontal"
                    :draw-value false

eww/widgets/volume-control/source-slider.yuck

@@ -1,10 +1,10 @@
 (defwidget source-slider []
-    (box :class "source-slider"
+    (box :class "slider source-slider"
          :space-evenly true
 
         (overlay
             (scale :min 0
-                   :max 100
+                   :max 101 ; dirty fix 99% max volume
                    :value "${json_volume.source}"
                    :orientation "horizontal"
                    :draw-value false

eww/windows/audio-popup.yuck

@@ -1,30 +0,0 @@
-(include "./widgets/audio-popup/output-slider.yuck")
-(include "./widgets/audio-popup/source-slider.yuck")
-
-(defwindow audio-popup []
-      :monitor 0
-      :namespace "eww-audio"
-      :geometry (geometry :anchor "top right"
-                          :width "300px"
-                          :height "120px")
-      :exclusive false
-      :stacking "fg"
-      :focusable false
-
-    (box :class "audio-popup"
-         :space-evenly false
-         :orientation "vertical"
-
-        (output-slider)
-        (source-slider)
-
-        (box :class "separator")
-
-        (box :class "vertical-button-row"
-            (button :class "more-settings"
-                    :onclick "eww close audio-popup; hyprctl dispatch exec pavucontrol"
-            (label :text "More devices"
-                   :xalign 0))
-        )
-    )
-)

eww/windows/bar.yuck

@@ -1,12 +1,12 @@
-(include "./widgets/bar/workspaces.yuck")
+(include "widgets/bar/workspaces.yuck")
-(include "./widgets/bar/clock.yuck")
+(include "widgets/bar/clock.yuck")
-(include "./widgets/bar/cc-toggle.yuck")
+(include "widgets/bar/cc-toggle.yuck")
-(include "./widgets/bar/audio.yuck")
+(include "widgets/bar/audio.yuck")
-(include "./widgets/bar/media.yuck")
+(include "widgets/bar/media.yuck")
-(include "./widgets/bar/logo.yuck")
+(include "widgets/bar/logo.yuck")
-(include "./widgets/bar/window.yuck")
+(include "widgets/bar/window.yuck")
-(include "./widgets/bar/network.yuck")
+(include "widgets/bar/network.yuck")
-(include "./widgets/bar/battery.yuck")
+(include "widgets/bar/battery.yuck")
 
 (defwindow bar 
     :monitor 0
@@ -22,22 +22,22 @@
            :space-evenly false
         (logo)
         (workspaces)
+        (window)
       )
       (box :class "widgets-center"
            :halign "center"
            :space-evenly false
         (clock)
-        (window)
         (media)
       )
       (box :class "widgets-right"
            :halign "end"
            :space-evenly false
-        (systray :spacing 5
+        (systray :spacing 0
                  :orientation "horizontal"
                  :space-evenly false
                  :icon-size 14
-                 :prepend-new true
+                 :prepend-new false
                  :class "systray"
         )
         (audio)

eww/windows/control-center.yuck

@@ -1,13 +1,13 @@
-(include "./widgets/control-center/quickactions.yuck")
+(include "widgets/control-center/top-bar.yuck")
-(include "./widgets/control-center/notifications.yuck")
+(include "widgets/control-center/notifications.yuck")
-(include "./widgets/control-center/toggle-grid.yuck")
+(include "widgets/control-center/big-media.yuck")
-(include "./widgets/control-center/mediaplayer.yuck")
+(include "widgets/control-center/notification.yuck")
+(include "widgets/control-center/toggles.yuck")
 
 (defwindow control-center []
     :monitor 0
     :geometry (geometry :width "500px"
-                        :height "95%"
+                        :anchor "top right")
-                        :anchor "center right")
     :stacking "overlay"
     :exclusive false
     :namespace "eww-cc"
@@ -15,9 +15,9 @@
     (box :class "cc"
          :orientation "vertical"
          :space-evenly false
-        (quickactions)
+        (top-bar)
-        (toggle-grid)
+        (toggles)
-        (mediaplayer :album_background true)
+        (big-media :album_background true)
-        (notifications :notification-history json_notification_history)
+        (notifications)
     )
 )

eww/windows/floating-media.yuck

@@ -0,0 +1,10 @@
+(defwindow floating-media []
+    :monitor 0
+    :geometry (geometry :anchor "top center")
+    :exclusive false
+    :stacking "overlay"
+    :focusable false
+  (box :class "floating-media"
+    (big-media :album_background true)
+  )
+)

eww/windows/notification-popup.yuck

@@ -1,47 +0,0 @@
-(defwindow floating-notification []
-    :monitor 0
-    :exclusive false
-    :focusable false
-    :namespace "eww-notification-popup"
-    :geometry (geometry :anchor "top right"
-                        :width "128px"
-                        :height "64px")
-    :stacking "overlay"
-
-    (box :class "floating-notifications"
-        (for item in json_notification_history
-            (floating-notification :summary "${item.summary}"
-                                   :body "${item.body}"
-                                   :image "${item.image}"
-                                   :app-name "${item.applicationName}")
-        )
-    )
-)
-
-(defwidget floating-notification [ summary body image app-name ]
-    (box :class "popup-notification"
-         :space-evenly false
-         :orientation "vertical"
-
-        (box :orientation "horizontal"
-             :class "top"
-
-            (label :text "${app-name}")
-        )
-
-        (box :orientation "horizontal"
-            (box :class "image"
-                 :style "background-image: ${image};")
-
-            (box :class "content"
-                 :orientation "vertical"
-
-                (label :class "summary"
-                       :text "${summary}")
-
-                (label :class "body"
-                       :text "${body}")
-            )
-        )
-    )
-)

eww/windows/powermenu.yuck

@@ -9,7 +9,7 @@
       :exclusive true
 
     (eventbox :class "outside"
-              :onclick "eww open bar; eww close powermenu"
+              :onclick "sh scripts/eww-window.sh close powermenu; sh scripts/eww-window.sh open bar"
         (box :space-evenly true
              :halign "center"
              :class "powermenu-container"
@@ -23,7 +23,7 @@
                     :onclick "loginctl kill-user $(sh -c 'echo $USER')"
             "󰗽")
             (button :class "close"
-                    :onclick "eww open bar; eww close powermenu"
+                    :onclick "sh scripts/eww-window.sh close powermenu; sh scripts/eww-window.sh open bar"
             "󰅖")
         )
     )

eww/windows/unused/floating-notifications.yuck

@@ -0,0 +1,63 @@
+(defwindow floating-notifications []
+    :monitor 0
+    :exclusive false
+    :focusable false
+    :namespace "eww-notification-popup"
+    :geometry (geometry :anchor "top right"
+                        :width "512px"
+                        :height "1px"
+                        :x "5px")
+    :stacking "overlay"
+
+  (box :class "floating-notifications"
+       :orientation "vertical"
+    (for item in json_recent_notifications
+      (floating-notification :summary "${item.summary.data}"
+                             :body "${item.body.data}"
+                             :image "${item.icon_path.data}"
+                             :app-name "${item.appname.data}")
+    )
+  )
+)
+
+(defwidget floating-notification [ summary body image app-name ]
+    (box :class "floating-notification"
+         :space-evenly false
+         :orientation "vertical"
+
+        (box :orientation "horizontal"
+             :class "top"
+             :space-evenly false
+
+            (image :class "app-icon"
+                   :icon "${ app-name =~ 'zen-alpha' ? 'zen-browser' : app-name }"
+                   :icon-size "menu")
+
+            (label :text "${app-name}"
+                   :xalign 0)
+        )
+
+        (box :orientation "horizontal"
+             :space-evenly false
+             :class "content"
+            (box :class "image"
+                 :style "background-image: image(url('${image}'));"
+                 :width 86
+                 :height 85
+                 :visible { image != "" ? true : false })
+
+            (box :class "text-content"
+                 :orientation "vertical"
+                 :space-evenly false
+
+                (label :class "summary"
+                       :text "${summary}"
+                       :xalign 0)
+
+                (label :class "body"
+                       :text "${body}"
+                       :xalign 0)
+            )
+        )
+    )
+)

eww/windows/volume-control.yuck

@@ -0,0 +1,37 @@
+(include "./widgets/volume-control/output-slider.yuck")
+(include "./widgets/volume-control/source-slider.yuck")
+
+(defwindow volume-control []
+    :monitor 0
+    :namespace "eww-volume"
+    :geometry (geometry :anchor "top right"
+                        :width "280px"
+                        :x "6px")
+    :exclusive false
+    :stacking "overlay"
+    :focusable false
+
+  (box :class "volume-control"
+       :space-evenly false
+       :orientation "vertical"
+
+    (output-slider)
+    (source-slider)
+
+    (box :class "separator")
+
+    (box :class "vertical button-row"
+         :orientation "vertical"
+      
+      (button :class "bluetooth-devices"
+              :onclick "sh scripts/eww-window.sh close volume-control; hyprctl dispatch exec overskride"
+        (label :text "Bluetooth devices"
+               :xalign 0))
+      
+      (button :class "more-devices"
+              :onclick "sh scripts/eww-window.sh close volume-control; hyprctl dispatch exec pavucontrol"
+        (label :text "More settings"
+               :xalign 0))
+    )
+  )
+)

eww/windows/volume-popup.yuck

@@ -0,0 +1,15 @@
+(defwindow volume-popup []
+  :monitor 0
+  :stacking "overlay"
+  :namespace "volume-popup"
+  :focusable false
+  :exclusive false
+  :geometry (geometry :width 180
+                      :anchor "top center"
+                      :y "10px")
+
+  (box :class "volume-popup"
+    (output-slider)
+    (source-slider)
+  )
+)

hypr/autostart.conf

@@ -4,9 +4,10 @@
 ###############
 
 exec-once = systemctl enable --user --now hyprpolkitagent.service # Hyprland Policy Kit
-exec-once = eww daemon && eww open bar # Daemon + Status Bar
-exec-once = dunst # Notification Daemon
 exec-once = hyprpaper # Wallpaper
+exec-once = systemctl --user start mako # Notification Daemon
+exec-once = eww daemon --no-daemonize # Eww service
+exec-once = sh $HOME/.config/eww/scripts/eww-window.sh open bar
 exec-once = hypridle # Idle daemon
 
 # Load pywal from cache || generate pywal colorscheme

hypr/bindings.conf

@@ -24,9 +24,9 @@ bind = $mainMod, F, togglefloating
 bind = $mainMod, SPACE, exec, $menu
 bind = $mainMod, P, pseudo, 
 bind = $mainMod, J, togglesplit
-bind = $mainMod, F11, fullscreen
+bind = $mainMod, N, exec, sh $HOME/.config/eww/scripts/eww-window.sh toggle control-center
-bind = $mainMod, N, exec, eww open --toggle control-center
 bind = $mainMod, L, exec, $lockscreen
+bind = $mainMod, F11, fullscreen
 
 # Media keys
 bind = , XF86AudioMedia, exec, $media

hypr/decorations.conf

@@ -37,8 +37,8 @@ decoration {
 
     shadow {
         enabled = true
-        range = 3
+        range = 1
-        render_power = 5
+        render_power = 2
         color = $background
     }
 
@@ -54,17 +54,32 @@ decoration {
 animations {
     enabled = true
 
+    # Beziers
     bezier = myBezier, 0.05, 0.9, 0.1, 1.05
     bezier = amazingBezier, 0.25, 0.59, 0.1, 1.05
-    bezier = layerBezier, 0.36, 0.58, 0.1, 1
+    bezier = popinBezier, 0.5, .1, .05, 1.0
+    bezier = layerBezier, 0.5, .1, .05, 1.0
+    bezier = workspaceBezier, 0.16, 0.20, 0, 1
 
-    animation = windows, 1, 5, amazingBezier, slide
+
+    # Windows
+    animation = windowsIn, 1, 6, myBezier, slide
     animation = windowsOut, 1, 5, amazingBezier, slide
-    animation = layers, 1, 6, layerBezier, slide
+    animation = windowsMove, 1, 4.5, amazingBezier
+
+    # Layers
+    animation = layersIn, 1, 6, layerBezier, slide
     animation = layersOut, 1, 6, layerBezier, slide
-    animation = border, 1, 10, default
+
+    # Workspaces
+    animation = workspaces, 1, 3.5, workspaceBezier, slidefade 20% 
+
+    # Fade
+    animation = fade, 1, 4, myBezier
+    animation = fadeLayersIn, 1, 3, layerBezier
+    animation = fadeLayersOut, 1, 4, layerBezier
+
+    # Others
+    animation = border, 1, 5.5, amazingBezier
     animation = borderangle, 1, 8, default
-    animation = fade, 1, 3.5, default
-    animation = fadeLayers, 1, 7, amazingBezier
-    animation = workspaces, 1, 4, amazingBezier, slidefade 20% 
 }

hypr/hyprlock.conf

@@ -19,7 +19,7 @@ general {
 background {
     monitor =
     path = $wallpaper
-    blur_passes = 2
+    blur_passes = 3
     color = $background
 }
 

hypr/rules.conf

@@ -16,20 +16,24 @@ windowrulev2 = float, class:mcpelauncher-webview
 windowrulev2 = float, class:org.gnome.Calculator
 windowrulev2 = float, class:io.mrarm.mcpelauncher-ui-qt
 windowrulev2 = float, class:Resources
+windowrulev2 = float, class:io.github.kaii_lb.Overskride
 
 # Resize
 windowrulev2 = size 50% 50%, class:org.pulseaudio.pavucontrol
 windowrulev2 = size 50% 50%, class:blueberry.py
+windowrulev2 = size 50% 50%, class:io.github.kaii_lb.Overskride
 windowrulev2 = size 70% 70%, class:io.mrarm.mcpelauncher-ui-qt
 
 # Moving
 windowrulev2 = move 49.27% 7.28%, class:org.pulseaudio.pavucontrol
 windowrulev2 = move 49.27% 7.28%, class:blueberry.py
+windowrulev2 = move 49.27% 7.28%, class:io.github.kaii_lb.Overskride
 windowrulev2 = movetoworkspace e, class:org.pulseaudio.pavucontrol
 
 # Animations
 windowrulev2 = animation slide right, class:org.pulseaudio.pavucontrol
 windowrulev2 = animation slide right, class:blueberry.py
+windowrulev2 = animation slide right, class:io.github.kaii_lb.Overskride
 layerrule = animation slide right, swaync-control-center
 layerrule = animation fade, selection
 layerrule = animation fade, waybar
@@ -37,7 +41,7 @@ layerrule = animation fade, hyprpaper
 layerrule = animation slide right, swaync-notification-window
 layerrule = animation fade, hyprpicker
 layerrule = animation fade, eww-calendar
-layerrule = animation fade, eww-audio
+layerrule = animation fade, eww-volume
 layerrule = animation fade, eww-powermenu
 
 # Opacity
@@ -46,10 +50,8 @@ windowrulev2 = opacity .88 .88, class:spotify
 windowrulev2 = opacity .88 .88, class:hyprpolkitagent
 
 # No blur
-windowrulev2 = noblur, class:steam.*
-
-# Blur
 windowrulev2 = noblur, class:^()$, title:^()$
+windowrulev2 = noblur, class:steam(.*)$
 
 # Window Blur list
 blurls = logout_dialog
@@ -61,11 +63,15 @@ layerrule = blur, waybar
 layerrule = blur, eww-bar
 layerrule = blur, eww-calendar
 layerrule = blur, eww-cc
-layerrule = blur, eww-audio
+layerrule = blur, eww-volume
-layerrule = ignorealpha .5, eww-audio
+layerrule = ignorealpha .6, eww-volume
-layerrule = ignorealpha .5, eww-bar
+layerrule = ignorealpha .55, eww-bar
 layerrule = ignorealpha .5, eww-calendar
 layerrule = ignorealpha .7, eww-cc
 
+# Workspace Rules
+workspace = 1, persistent:true
+workspace = 2, persistent:true
+
 # Suppress maximize event from windows
 windowrulev2 = suppressevent maximize, class:.*

mako/config

@@ -0,0 +1,41 @@
+# general
+max-history=14
+sort=-time
+actions=1
+history=1
+icons=1
+
+# display
+layer=overlay
+anchor=top-right
+
+# binding
+on-touch=invoke-default-action
+
+# style
+font=Cantarell 12
+background-color=#1b2024
+padding=12
+width=420
+border-size=1
+border-color=#7e7e7ef0
+border-radius=14
+text-alignment=left
+margin=16
+max-icon-size=72
+
+[urgency="low"]
+default-timeout=4000
+
+[urgency="normal"]
+default-timeout=8000
+
+[urgency="critical"]
+default-timeout=0
+
+# modes
+[mode="dnd"]
+invisible=1
+
+# vim: ft=cfg
+# nvim: ft=cfg

update-repo.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/bash
 
-HYPRLAND_DOTS_DIRS=("hypr" "eww" "anyrun" "kitty" "wal" "fastfetch")
+HYPRLAND_DOTS_DIRS=("hypr" "eww" "anyrun" "kitty" "wal" "fastfetch" "mako")
 WALLPAPERS_DIR="$HOME/wallpapers"
 
 printf "\n"

wal/templates/colors-swaync.css

@@ -1,20 +0,0 @@
-
-@define-color background {background};
-@define-color foreground {foreground};
-@define-color cursor {cursor};
-
-@define-color color1 {color1};
-@define-color color2 {color2};
-@define-color color3 {color3};
-@define-color color4 {color4};
-@define-color color5 {color5};
-@define-color color6 {color6};
-@define-color color7 {color7};
-@define-color color8 {color8};
-@define-color color9 {color9};
-@define-color color10 {color10};
-@define-color color11 {color11};
-@define-color color12 {color12};
-@define-color color13 {color13};
-@define-color color14 {color14};
-@define-color color15 {color15};

wal/templates/colors-waybar.css

@@ -1,20 +0,0 @@
-
-@define-color background {background};
-@define-color foreground {foreground};
-@define-color cursor {cursor};
-
-@define-color color1 {color1};
-@define-color color2 {color2};
-@define-color color3 {color3};
-@define-color color4 {color4};
-@define-color color5 {color5};
-@define-color color6 {color6};
-@define-color color7 {color7};
-@define-color color8 {color8};
-@define-color color9 {color9};
-@define-color color10 {color10};
-@define-color color11 {color11};
-@define-color color12 {color12};
-@define-color color13 {color13};
-@define-color color14 {color14};
-@define-color color15 {color15};

wal/templates/colors-wlogout.css

@@ -1,20 +0,0 @@
-
-@define-color background {background};
-@define-color foreground {foreground};
-@define-color cursor {cursor};
-
-@define-color color1 {color1};
-@define-color color2 {color2};
-@define-color color3 {color3};
-@define-color color4 {color4};
-@define-color color5 {color5};
-@define-color color6 {color6};
-@define-color color7 {color7};
-@define-color color8 {color8};
-@define-color color9 {color9};
-@define-color color10 {color10};
-@define-color color11 {color11};
-@define-color color12 {color12};
-@define-color color13 {color13};
-@define-color color14 {color14};
-@define-color color15 {color15};