✨ eww: add new features and fix issues

eww/eww.scss

@@ -1,11 +1,8 @@
 
-* {
-    all: unset;
-    transition: 120ms linear;
-    font-size: 12px;
-}
-
 @import "../../.cache/wal/colors.scss";
-@import './styles/bar.scss';
+@import "./styles/general.scss";
-@import './styles/calendar.scss';
+@import "./styles/bar.scss";
-@import './styles/control-center.scss';
+@import "./styles/calendar.scss";
+@import "./styles/control-center.scss";
+@import "./styles/powermenu.scss";
+@import "./styles/audio-popup.scss";

eww/eww.yuck

@@ -1,54 +1,20 @@
 ; Windows
 (include "./windows/calendar.yuck")
 (include "./windows/control-center.yuck")
+(include "./windows/bar.yuck")
+(include "./windows/powermenu.yuck")
+(include "./windows/audio-popup.yuck")
 
-; Widgets
+; Bar widgets
 (include "./widgets/bar/workspaces.yuck")
 (include "./widgets/bar/clock.yuck")
-(include "./widgets/bar/notifications.yuck")
+(include "./widgets/bar/control-center.yuck")
 (include "./widgets/bar/audio.yuck")
 (include "./widgets/bar/media.yuck")
 (include "./widgets/bar/logo.yuck")
 (include "./widgets/bar/window.yuck")
 (include "./widgets/bar/network.yuck")
+(include "./widgets/bar/battery.yuck")
 
-(defwindow bar 
+; Control Center widgets
-    :monitor 0
-    :geometry (geometry :width "100%"
-                        :height "44px"
-                        :anchor "top center")
-    :stacking "fg"
-    :exclusive true
-    :namespace "eww-bar"
-    (centerbox :orientation "h"
-      (box :class "widgets-left"
-           :halign "start"
-           :space-evenly false
-        (logo)
-        (workspaces)
-      )
-      (box :class "widgets-center"
-           :halign "center"
-           :space-evenly false
-        (clock)
-        (window)
-        (media)
-      )
-      (box :class "widgets-right"
-           :halign "end"
-           :space-evenly false
-        (systray :spacing 5
-                 :orientation "h"
-                 :space-evenly false
-                 :icon-size 14
-                 :prepend-new true
-                 :class "systray"
-        )
-;        (audio)
-        (network)
-        (notifications)
-      )
-    )
-)
-
 

eww/styles/audio-popup.scss

@@ -0,0 +1,28 @@
+
+box.audio-popup {
+    background: rgba($background, .7);
+    padding: 8px;
+    margin-right: 6px;
+    border-radius: 16px;
+    border: .5px solid rgba($foreground, .3);
+}
+
+.separator {
+    box-shadow: 0 0 0 1px darken($color: $foreground, $amount: 25);
+    margin: 4px 0;
+    border-radius: 1px;
+}
+
+.output-slider {
+    label {
+        margin-left: 18px;
+        color: $background;
+    }
+}
+
+.source-slider {
+    label {
+        margin-left: 18px;
+        color: $background;
+    }
+}

eww/styles/bar.scss

@@ -1,6 +1,4 @@
 
-$foreground: lighten($color: $foreground, $amount: 10);
-
 .bar {
     background: transparent;
     padding: 4px;
@@ -29,60 +27,9 @@ $foreground: lighten($color: $foreground, $amount: 10);
     & > *:last-child {
         margin-right: 0;
     }
-}
 
-button {
+    & > *:only-child {
-    padding: 6px 10px;
+        margin: 0 0px;
-    border-radius: 12px;
-    background: none;
-}
-
-button:hover {
-    background: $color3;
-}
-
-button:active {
-    background: darken($color: $color3, $amount: 10);
-}
-
-button label {
-    color: $foreground;
-}
-
-menu {
-    background: $background;
-    border-radius: 14px;
-    padding: 2px;
-
-    & > menuitem {
-        padding: 8px 24px;
-        border-radius: 5px;
-
-        &:hover {
-            background: $color1;
-        }
-
-        &:first-child {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-        }
-
-        &:last-child {
-            border-bottom-left-radius: inherit;
-            border-bottom-right-radius: inherit;
-        }
-
-        label {
-            font-weight: 600;
-            color: $foreground;
-        }
-    }
-
-    & > separator {
-        background: lighten($color: $background, $amount: 5);
-        margin: .5px 10px;
-        padding: 1px 0;
-        border-radius: 1px;
     }
 }
 
@@ -131,29 +78,53 @@ menu {
 
 .mediaplayer {
     border-radius: 12px;
-    box-shadow: inset 0 0 0px 2px $color3;
-    padding: 0 4px;
-    padding-right: 0px;
 
-    & label.media-title,
+    & > .media {
-    & label.media-artist {
+        border-radius: inherit;
-        margin: 0 4px;
+        background: darken($color: $color3, $amount: 15);
-        padding-right: 5px;
+        
+        & > label {
             color: $foreground;
             font-size: inherit;
 
-        &.media-title {
+            &:first-child {
-            margin-top: 6px;
+                margin-left: 8px;
-            margin-bottom: 6px;
+            }
-            border-right: .5px solid darken($color: $foreground, $amount: 20);
+
+            &:last-child {
+                margin-right: 8px;
             }
         }
 
-    &.revealed label.media-artist {
+        & > box.separator {
-        border-right: 2px solid $color3;
+            margin: 8px 4px;
+            padding: 0 1px;
+            background: darken($color: $foreground, $amount: 20);
+        }
     }
 
-    & button {
+    &.revealed {
+        background: darken($color: $color3, $amount: 25);
+        transition: 80ms linear;
+
+        .media {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .media-controls {
+            background: darken($color: $color3, $amount: 25);
+            border-top-right-radius: 12px;
+            border-bottom-right-radius: 12px;
+
+            & button:last-child {
+                border-top-right-radius: 12px;
+                border-bottom-right-radius: 12px;
+            }
+        }
+    }
+
+    button {
         padding: 0 7px;
         border-radius: 0px;
     }
@@ -161,16 +132,12 @@ menu {
 
 .window {
     padding: 0 4px;
-    padding-right: 6px;
 
-    & > .window-icon {
+    & > .icon {
-        padding-right: 24px;
+        margin: 0 4px;
-        margin-right: 4px;
-        background-position: center;
-        background-size: 24px;
-        background-repeat: no-repeat;
     }
 
+    & > box.info {
         & > label.window-class {
             font-size: 10px;
             font-family: monospace;
@@ -182,6 +149,7 @@ menu {
             font-size: inherit;
             color: $foreground;
         }
+    }
 }
 
 .network {
@@ -189,6 +157,29 @@ menu {
     padding-right: 7px;
 }
 
+.audio-eventbox { 
+    &:hover box.audio {
+        background: darken($color: $color2, $amount: 5);
+    }
+
+    & > box.audio {
+        padding: 0 8px;
+        border-radius: 12px;
+
+        label {
+            font-weight: 600;
+
+            &:first-child {
+                margin-right: 2px;
+            }
+
+            &:last-child {
+                margin-left: 2px;
+            }
+        }
+    }
+}
+
 .notifications button {
     padding-left: 12px;
     padding-right: 10px;

eww/styles/control-center.scss

@@ -1,9 +1,153 @@
 
-// window.control-center {}
-
 box.cc {
     margin: 16px;
     background: rgba($background, .85);
     border-radius: 16px;
     border: 2px solid darken($color: $color3, $amount: 20);
+    padding: 18px;
+}
+
+.quickactions {
+    margin-bottom: 10px;
+
+    & label {
+        &.hostname {
+            font-size: 13.3px;
+            font-weight: 700;
+            border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .5);
+            padding-bottom: 4px;
+        }
+
+        &.uptime {
+            font-size: 11.7px;
+            font-weight: 500;
+        }
+    }
+
+    .button-row {
+        margin: 7px 0;
+    }
+}
+
+.control-center .mediaplayer {
+    padding: 16px;
+    margin: 6px 0;
+    border-radius: 18px;
+
+    & > .album-image {
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center 0;
+        margin-right: 12px;
+        border-radius: 11px;
+    }
+
+    & > .right {
+
+        & > .media-info { 
+            label {
+                font-family: "Cantarell", "Noto Sans CJK JP";
+            }
+
+            & label.title {
+                font-weight: 700;
+                font-size: 16px;
+                margin-bottom: 6px;
+            }
+
+            & label.artist {
+                font-weight: 600;
+                font-size: 12px;
+                margin-bottom: 12px;
+            }
+        }
+
+        & > .media-controls {
+            padding: 0px;
+
+            & > button {
+                padding: 4px 9px;
+
+                & > label {
+                    font-size: 13.3px;
+                }
+            }
+
+            & > button.repeat {
+                padding-right: 11px;
+            }
+        }
+    }
+
+    &.mediaplayer-album-bg {
+        box-shadow: inset 0 0 0 100px rgba($background, .6);
+        background-size: cover;
+    }
+}
+
+.cc-notifications {
+    & > .vertical-scroll {
+        .notifications {
+            box.notification {
+                background: darken($color: $color1, $amount: 10);
+                border-radius: 16px;
+                margin: 4px 0;
+
+                & > .top {
+                    border-top-left-radius: inherit;
+                    border-top-right-radius: inherit;
+                    background: darken($color: $color1, $amount: 5);
+                    border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
+                    padding: 2px 6px;
+
+                    & > .app-info {
+                        & .app-icon {
+                            margin-right: 4px;
+                        }
+                        font-weight: 600;
+                    }
+                }
+
+                & .content {
+                    padding: 6px;
+                    padding-top: 0;
+
+                    & > .image {
+                        border-radius: 16px;
+                        margin-right: 6px;
+                        background-size: cover;
+                        background-repeat: no-repeat;
+                        background-position: center 0;
+                    }
+
+                    & .text {
+                        & label {
+                            font-family: "Cantarell", "Noto Sans CJK JP", "Noto Sans CJK KR";
+                        }
+
+                        & label.summary {
+                            font-weight: 600;
+                            font-size: 18px;
+                            margin-top: 6px;
+                        }
+
+                        & label.body {
+                            font-size: 13.1px;
+                            margin-bottom: 2px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    & .bottom {
+        margin-top: 4px;
+
+        &.button-row {
+            & button.do-not-disturb {
+                padding-right: 12px;
+            }
+        }
+    }
 }

eww/styles/general.scss

@@ -0,0 +1,129 @@
+* {
+    all: unset;
+    transition: 120ms linear;
+    font-size: 12px;
+}
+
+label {
+    color: lighten($foreground, 15)
+}
+
+box.button-row {
+    padding: 2px;
+    $bg-color: darken($color: $foreground, $amount: 25);
+
+    & > button {
+        background: rgba($bg-color, .7);
+        border-radius: 1px;
+        margin: 0 1px;
+
+        &:first-child {
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+        }
+
+        &:last-child {
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+
+        &:hover {
+            background: rgba($bg-color, 1);
+        }
+    }
+}
+
+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;
+
+        &:first-child {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+
+        &:last-child {
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+
+        &:hover {
+            background: rgba($bg-color, 1);
+        }
+    }
+}
+
+button {
+    padding: 6px 10px;
+    border-radius: 12px;
+    background: none;
+}
+
+button:hover {
+    background: darken($color: $color2, $amount: 5);
+}
+
+button:active {
+    background: darken($color: $color3, $amount: 10);
+}
+
+button label {
+    color: $foreground;
+}
+
+menu {
+    background: $background;
+    border-radius: 14px;
+    padding: 3px;
+
+    & > menuitem {
+        padding: 8px 24px;
+        border-radius: 5px;
+
+        &:hover {
+            background: $color1;
+        }
+
+        &:first-child {
+            border-top-left-radius: inherit;
+            border-top-right-radius: inherit;
+        }
+
+        &:last-child {
+            border-bottom-left-radius: inherit;
+            border-bottom-right-radius: inherit;
+        }
+
+        label {
+            font-weight: 600;
+            color: $foreground;
+        }
+    }
+
+    & > separator {
+        background: lighten($color: $background, $amount: 5);
+        margin: .5px 10px;
+        padding: 1px 0;
+        border-radius: 1px;
+    }
+}
+
+trough {
+    background: darken($color: $foreground, $amount: 25);
+    border-radius: 4px;
+}
+
+trough highlight {
+    background: $foreground;
+    padding: 10px;
+    border-radius: inherit;
+}
+
+scale {
+    padding: 10px;
+}

eww/styles/powermenu.scss

@@ -0,0 +1,19 @@
+
+.powermenu-container {
+    margin: 400px 100px;
+
+    & * {
+        outline: initial;
+    }
+    & > button {
+        padding: 96px;
+        & label {
+            font-size: 98px;
+        }
+    }
+
+    & button:hover,
+    & button:focus {
+        background: darken($color: $color2, $amount: 20);
+    }
+}

eww/widgets/audio-popup/output-slider.yuck

@@ -0,0 +1,18 @@
+(defwidget output-slider []
+    (box :class "output-slider"
+         :space-evenly true
+
+        (overlay
+            (scale :min 0
+                   :max 100
+                   :value "${volume_json.output}"
+                   :orientation "horizontal"
+                   :draw-value false
+                   :flipped false
+                   :onchange "wpctl set-volume @DEFAULT_AUDIO_SINK@ $(awk -v n={} 'BEGIN { print (n / 100) }')")
+
+            (label :text "󰕾"
+                   :xalign 0)
+        )
+    )
+)

eww/widgets/audio-popup/source-slider.yuck

@@ -0,0 +1,19 @@
+(defwidget source-slider []
+    (box :class "source-slider"
+         :space-evenly true
+
+        (overlay
+            (scale :min 0
+                   :max 100
+                   :value "${volume_json.source}"
+                   :orientation "horizontal"
+                   :draw-value false
+                   :flipped false
+                   :onchange "wpctl set-volume @DEFAULT_AUDIO_SOURCE@ $(awk -v n={} 'BEGIN { print (n / 100) }')"
+                   :class "output-volume-slider")
+
+            (label :text "󰍬"
+                   :xalign 0)
+        )
+    ) 
+)

eww/widgets/bar/audio.yuck

@@ -1,10 +1,15 @@
 
-;(deflisten volume_out :initial '{ "volume": "100%" }'
+(deflisten json_audio :initial `{ "output": 35, "source": 80 }`
-;`sh -c "source './scripts/volume.sh'; get_json_loop"`)
+`sh ./scripts/get-volume-watch.sh`)
 
 (defwidget audio []
-    (eventbox
+    (eventbox :onclick "eww open --toggle audio-popup"
-        :onscroll `[[ {} == "up" ]]; sh -c "source './scripts/volume.sh'; increase_vol" || sh -c "source './scripts/volume.sh'; decrease_vol"`
+              :class "audio-eventbox"
-        (button "󰕾 ")
+        (box :class "audio"
+            (eventbox :onscroll `[ {} == "up" ] && wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%+ || wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-`
+                (label :text "${ json_audio.output != 0 ? '󰕾' : '󰝟' }  ${json_audio.output}%"))
+            (eventbox :onscroll `[ {} == "up" ] && wpctl set-volume @DEFAULT_AUDIO_SOURCE@ 5%+ || wpctl set-volume @DEFAULT_AUDIO_SOURCE@ 5%-`
+                (label :text "${ json_audio.source != 0 ? '󰍬' : '󰍭' }  ${json_audio.source}%"))
+        )
     )
 )

eww/widgets/bar/battery.yuck

@@ -0,0 +1,6 @@
+(defwidget battery [ ?device ]
+    (box :class "battery"
+         :visible { EWW_BATTERY != "" ? true : false }
+        (label :text "󰁹  ${EWW_BATTERY}%")
+    )
+)

eww/widgets/bar/control-center.yuck

@@ -0,0 +1,7 @@
+
+(defwidget control-center-toggle []
+    (box :class "control-center-toggle"
+      (button :onclick "eww open --toggle control-center" 
+      " ")
+    )
+)

eww/widgets/bar/media.yuck

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

eww/widgets/bar/network.yuck

@@ -1,4 +1,4 @@
-(defpoll connection_status :interval "2s"
+(defpoll connection_status :interval "5s"
 `nmcli n c`)
 
 (defwidget network []

eww/widgets/bar/notifications.yuck

@@ -1,10 +0,0 @@
-(deflisten json_notifications :initial "{ \"text\": 0, \"class\": [\"notification\"] }"
-`swaync-client -swb`)
-
-(defwidget notifications []
-    (box :class "notifications"
-      (button :onclick "swaync-client -t" 
-              :class { json_notifications.class =~ "cc-open" ? 'open' : '' }
-      { json_notifications.alt == "dnd-notification" ? " " : '${ json_notifications.text == 0 ? " " : " " }' })
-    )
-)

eww/widgets/bar/window.yuck

@@ -3,17 +3,25 @@
 `sh ./scripts/active-window.sh`)
 
 (defwidget window []
-    (eventbox
     (box :class "window"
             :visible { active_window.class == "null" ? false : true }
             :vexpand false
             :space-evenly false
+            :orientation "horizontal"
+
+        (image :class "icon"
+               :icon "${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}")
             (label :class "window-title"
                    :text "${active_window.title}"
-                   :visible { active_window.title != "" ? true : false })
+                   :visible { active_window.title != "" ? true : false }
+                   :limit-width 45)
         )
     )
 )

eww/widgets/bar/workspaces.yuck

@@ -6,7 +6,7 @@
 `sh ./scripts/active-workspace.sh`)
 
 (defwidget workspaces [] 
-    (eventbox :onscroll "[[ {} == up ]] && hyprctl dispatch workspace e+1 || hyprctl dispatch workspace e-1"
+    (eventbox :onscroll "[[ {} == up ]] && hyprctl dispatch workspace e+1 >> /dev/null || hyprctl dispatch workspace e-1 >> /dev/null"
       (box :class "workspaces"
            :space-evenly false
         (for workspace in json_workspaces

eww/widgets/control-center/mediaplayer.yuck

@@ -0,0 +1,65 @@
+
+(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' : '' }"
+         :style { album_background == true ? "background-image: image(url('${json_media_data.artUrl}'))" : "" }
+         :visible { json_media_data.title != "null" && json_media_data.artist != "null" ? true : false }
+
+        (box :class "album-image"
+             :width 98
+             :height 87
+             :style "background-image: image(url('${json_media_data.artUrl}'));"
+             :valign "center")
+
+        (box :orientation "vertical"
+             :space-evenly false
+             :class "right"
+             :halign "fill"
+
+            (box :class "media-info"
+                 :space-evenly false
+                 :halign "fill"
+                 :orientation "vertical"
+
+                (label :class "title"
+                       :text "${json_media_data.title}"
+                       :xalign 0
+                       :wrap false
+                       :hexpand true
+                       :show-truncated true)
+                (label :class "artist"
+                       :text "${json_media_data.artist}"
+                       :xalign 0
+                       :wrap false
+                       :hexpand true
+                       :show-truncated true)
+            )
+
+            (box :class "media-controls button-row"
+                 :orientation "horizontal"
+                 :space-evenly false
+                 :halign "start"
+
+                (button :class "shuffle"
+                        :onclick "playerctl --player=${json_media_data.player} shuffle Toggle"
+                "󰒝")
+                (button :class "previous"
+                        :onclick "playerctl --player=${json_media_data.player} previous"
+                "󰒮")
+                (button :class "play-pause"
+                        :onclick "playerctl --player=${json_media_data.player} play-pause"
+                { json_media_data.status == "playing" ? "󰏤" : "󰐊" })
+                (button :class "next"
+                        :onclick "playerctl --player=${json_media_data.player} next"
+                "󰒭")
+                (button :class "repeat"
+                        :onclick "" ; todo
+                "󰑖")
+            )
+        )
+    )
+)

eww/widgets/control-center/notification.yuck

@@ -0,0 +1,61 @@
+(defwidget notification [ ?application_name ?icon_path summary body ?image ?onclick ]
+    (eventbox :onclick "${onclick}"
+        (box :class "notification"
+             :orientation "vertical"
+             :height 96
+             :space-evenly false
+
+            (box :class "top"
+                 :orientation "horizontal"
+                 :space-evenly false
+
+                (box :class "app-info"
+                     :space-evenly false
+                     :halign "start"
+                     :hexpand true
+                     :vexpand false
+
+                    (image :class "app-icon"
+                           :path "${icon_path}"
+                           :visible { icon_path != "" ? true : false }
+                           :image-width 32
+                           :image-height 32)
+                    (label :class "app-name"
+                           :text "${application_name}")
+                )
+                (box :space-evenly false
+                    (button :class "close"
+                            :onclick "${onclick}"
+                    "󰅖")
+                )
+            )
+
+            (box :class "content"
+                 :space-evenly false
+                (box :class "image"
+                     :width 96
+                     :height 96
+                     :visible { image != "" ? true : false }
+                     :style { image != "" ? "background-image: image(url('${image}'));" : "" }
+                ) 
+
+                (box :class "text"
+                     :orientation "vertical"
+                     :space-evenly false
+
+                    (label :class "summary"
+                           :text "${summary}"
+                           :xalign 0
+                           :show-truncated true
+                           :halign "start")
+
+                    (label :class "body"
+                           :markup "${body}"
+                           :xalign 0
+                           :show-truncated false
+                           :wrap true)
+                )
+            )
+        )
+    )
+)

eww/widgets/control-center/notifications.yuck

@@ -0,0 +1,55 @@
+(include "widgets/control-center/notification.yuck")
+
+(deflisten json_notification_history :initial "{[]}"
+`python ./scripts/notification-watcher.py`)
+
+(defwidget notifications []
+    (box :class "cc-notifications"
+         :space-evenly false
+         :orientation "vertical"
+        
+        (scroll :class "vertical-scroll"
+                :hscroll false
+                :vscroll true
+                :height 400 ; Adjust according to your screen size
+                :vexpand true
+
+            (box :class "notifications"
+                 :orientation "vertical"
+                 :space-evenly false
+
+                (for notification in json_notification_history
+                    (notification :application_name "${notification.applicationName}"
+                                  :image "${notification.image}"
+                                  :summary "${notification.summary}"
+                                  :body "${notification.body}")
+                )
+
+                (box :class "empty-notifications"
+                     :visible { json_notification_history[0] == "null" ? true : false }
+                     :style "margin-top: 150px;"
+                     :space-evenly false
+                     :orientation "vertical"
+                     :halign "center"
+                    
+                    (label :class "bell-icon"
+                           :text "󱇦"
+                           :style "font-size: 96px")
+
+                    (label :text "You're done!"
+                           :style "margin-left: 12px;")
+                )
+            )
+        )
+
+        (box :class "bottom button-row"
+             :halign "end"
+             :space-evenly false
+            (button :class "do-not-disturb"
+            "󰒲")
+            (button :class "clear-all"
+                    :onclick "dunstctl history-clear"
+            "Clear all ")
+        )
+    )
+)

eww/widgets/control-center/quickactions.yuck

@@ -1,10 +1,37 @@
-(defpoll uptime_info :interval "25s"
+(deflisten hostname :initial "GNU/Linux"
-`echo "$(cat /etc/hostname), Uptime: $( uptime -p | sed -e 's/^up //')"`)
+`cat /etc/hostname`)
 
+(defpoll uptime_info :interval "50s"
+`uptime -p | sed -e 's/^up //'`)
 
 (defwidget quickactions []
-    (box :orientation "horizontal"
+    (box :class "quickactions"
+         :orientation "horizontal"
+
+        (box :class "left"
+             :orientation "vertical"
+             :halign "start"
+
             (label :xalign 0
-               :text "${uptime_info}")
+                   :text "  ${hostname}"
+                   :class "hostname")
+
+            (label :xalign 0
+                   :text "  ${uptime_info}"
+                   :class "uptime")
+        )
+
+        (box :orientation "horizontal"
+             :class "button-row"
+             :space-evenly false
+             :halign "end"
+             
+             (button :class "lock"
+                     :onclick "hyprctl dispatch exec hyprlock"
+             "󰌾")
+             (button :class "powermenu"
+                     :onclick "eww close-all; eww open powermenu"
+             "󰗽")
+        )
     )
 )

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

@@ -0,0 +1,37 @@
+(defwidget toggle-grid []
+    (box :class "toggle-grid"
+        (grid-toggle :class "network"
+                     :icon "󰈀"
+                     :header "Network"
+                     :active true ; This sets if toggle is enabled or not, put condition check here
+                     :body "Connected" ; Generally put state here
+                     :visible true
+                     :max-width 128
+                     :max-height 48
+                     :onclick "notify-send 'Network' 'toggle network with nmcli!'"
+        )
+    )
+)
+
+(defwidget grid-toggle [ class onclick active ?icon header body visible max-width max-height ]
+    (eventbox :visible "${visible}"
+              :onclick "${onclick}"
+              :class "${class} ${ active ? 'active' : '' }"
+        (box :class "toggle"
+             :space-evenly false
+             :orientation "horizontal"
+
+            (label :class "icon"
+                   :visible { icon != "" ? true : false } 
+                   :valign "center"
+            "${icon}")
+
+            (box :orientation "vertical"
+                (label :class "header"
+                "${header}")
+                (label :class "body"
+                "${body}")
+            )
+        )
+    )
+)

eww/windows/audio-popup.yuck

@@ -0,0 +1,33 @@
+(include "./widgets/audio-popup/output-slider.yuck")
+(include "./widgets/audio-popup/source-slider.yuck")
+
+(deflisten volume_json :initial `{ "output": 60, "source": 80 }`
+`sh ./scripts/get-volume-watch.sh`)
+
+(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 "Show on Volume Control"
+                   :xalign 0))
+        )
+    )
+)

eww/windows/bar.yuck

@@ -0,0 +1,39 @@
+(defwindow bar 
+    :monitor 0
+    :geometry (geometry :width "100%"
+                        :height "44px"
+                        :anchor "top center")
+    :stacking "fg"
+    :exclusive true
+    :namespace "eww-bar"
+    (centerbox :orientation "horizontal"
+      (box :class "widgets-left"
+           :halign "start"
+           :space-evenly false
+        (logo)
+        (workspaces)
+      )
+      (box :class "widgets-center"
+           :halign "center"
+           :space-evenly false
+        (clock)
+        (window)
+        (media)
+      )
+      (box :class "widgets-right"
+           :halign "end"
+           :space-evenly false
+        (systray :spacing 5
+                 :orientation "horizontal"
+                 :space-evenly false
+                 :icon-size 14
+                 :prepend-new true
+                 :class "systray"
+        )
+        (audio)
+        (battery)
+        (network)
+        (control-center-toggle)
+      )
+    )
+)

eww/windows/control-center.yuck

@@ -1,4 +1,7 @@
 (include "./widgets/control-center/quickactions.yuck")
+(include "./widgets/control-center/notifications.yuck")
+(include "./widgets/control-center/toggle-grid.yuck")
+(include "./widgets/control-center/mediaplayer.yuck")
 
 (defwindow control-center []
     :monitor 0
@@ -11,20 +14,10 @@
 
     (box :class "cc"
          :orientation "vertical"
-        (quickactions)
-        (toggle-row)
-    )
-)
-
-(defwidget toggle-row []
-    (box :class "row"
          :space-evenly false
-
+        (quickactions)
-        (button :class "network"
+        (toggle-grid)
-        "󰤨 ")
+        (mediaplayer :album_background true)
-        (button :class "bluetooth"
+        (notifications)
-        "󰂯 ")
-        (button :class "dnd"
-        "󰒲 ")
     )
 )

eww/windows/powermenu.yuck

@@ -0,0 +1,30 @@
+(defwindow powermenu []
+      :monitor 0
+      :geometry (geometry :width "100%"
+                          :height "100%")
+
+      :stacking "overlay"
+      :namespace "eww-powermenu"
+      :focusable true
+      :exclusive true
+
+    (eventbox :class "outside"
+              :onclick "eww open bar; eww close powermenu"
+        (box :space-evenly true
+             :halign "center"
+             :class "powermenu-container"
+            (button :class "poweroff"
+                    :onclick "systemctl poweroff"
+            "󰐥")
+            (button :class "reboot"
+                    :onclick "systemctl reboot"
+            "󰜉")
+            (button :class "logout"
+                    :onclick "loginctl kill-user $(sh -c 'echo $USER')"
+            "󰗽")
+            (button :class "close"
+                    :onclick "eww open bar; eww close powermenu"
+            "󰅖")
+        )
+    )
+)