From c505ecf4cff2792298af015f4342880714bbf883 Mon Sep 17 00:00:00 2001
From: retrozinndev <joaovodias@gmail.com>
Date: Tue, 7 Jan 2025 16:26:20 -0300
Subject: [PATCH] :sparkles: eww: add new tiles to control-center, new
 notification popup, new styles for a lot of widgets

---
 eww/eww.yuck                                  |   5 +-
 eww/scripts/eww-reload.sh                     |  17 +++
 eww/scripts/eww-window.sh                     |   6 +-
 eww/scripts/night-light.sh                    |  17 +++
 eww/scripts/notification-clear.sh             |   8 ++
 eww/scripts/notification-handler.sh           |  75 ++++++++++--
 eww/scripts/notification-popup-remove.sh      |  21 ++++
 eww/scripts/notification-popup.sh             |  47 ++++++++
 eww/scripts/notification-remove.sh            |  21 ++++
 eww/scripts/notification-watch.sh             |  32 +++++
 eww/scripts/screen-recording.sh               |  28 +++++
 eww/scripts/unused/recent-notifications.sh    |  24 ----
 eww/scripts/volume-popup-trigger.sh           |   3 +-
 eww/scripts/workspaces.sh                     |   7 +-
 eww/styles/bar.scss                           |  90 +++++++++++---
 eww/styles/calendar.scss                      |  19 ++-
 eww/styles/control-center.scss                |  51 +++++---
 eww/styles/floating-notifications.scss        |  30 ++++-
 eww/styles/general.scss                       |  20 ++-
 eww/variables.yuck                            |  34 ++----
 eww/widgets/bar/audio.yuck                    |   3 +-
 eww/widgets/bar/battery.yuck                  |   2 +-
 eww/widgets/bar/clock.yuck                    |  28 ++++-
 eww/widgets/bar/hardware.yuck                 |  17 +++
 eww/widgets/bar/media.yuck                    |  14 ++-
 eww/widgets/bar/network.yuck                  |   7 +-
 eww/widgets/bar/window.yuck                   |  15 +--
 eww/widgets/bar/workspaces.yuck               |   1 +
 eww/widgets/big-media.yuck                    |   5 +-
 eww/widgets/control-center/notification.yuck  |   5 +-
 eww/widgets/control-center/notifications.yuck |  80 +++++-------
 eww/widgets/control-center/tiles.yuck         |  74 ++++++++++++
 eww/widgets/control-center/toggles.yuck       |  61 ----------
 eww/widgets/separator.yuck                    |   4 +
 eww/windows/bar.yuck                          |  13 +-
 eww/windows/calendar-window.yuck              |   7 +-
 eww/windows/control-center.yuck               |  24 +++-
 eww/windows/floating-media.yuck               |  11 +-
 eww/windows/floating-notifications.yuck       | 114 ++++++++++++++++++
 eww/windows/hardware-monitor.yuck             |  14 +++
 .../unused/floating-notifications.yuck        |  63 ----------
 eww/windows/volume-control.yuck               |   3 +-
 eww/windows/volume-popup.yuck                 |   1 +
 43 files changed, 802 insertions(+), 319 deletions(-)
 create mode 100644 eww/scripts/eww-reload.sh
 create mode 100644 eww/scripts/night-light.sh
 create mode 100644 eww/scripts/notification-clear.sh
 create mode 100644 eww/scripts/notification-popup-remove.sh
 create mode 100644 eww/scripts/notification-popup.sh
 create mode 100644 eww/scripts/notification-remove.sh
 create mode 100644 eww/scripts/notification-watch.sh
 create mode 100644 eww/scripts/screen-recording.sh
 delete mode 100644 eww/scripts/unused/recent-notifications.sh
 create mode 100644 eww/widgets/bar/hardware.yuck
 create mode 100644 eww/widgets/control-center/tiles.yuck
 delete mode 100644 eww/widgets/control-center/toggles.yuck
 create mode 100644 eww/widgets/separator.yuck
 create mode 100644 eww/windows/floating-notifications.yuck
 create mode 100644 eww/windows/hardware-monitor.yuck
 delete mode 100644 eww/windows/unused/floating-notifications.yuck

diff --git a/eww/eww.yuck b/eww/eww.yuck
index 66fb1ac..97a6190 100644
--- a/eww/eww.yuck
+++ b/eww/eww.yuck
@@ -9,6 +9,9 @@
 (include "windows/volume-control.yuck")
 (include "windows/volume-popup.yuck")
 (include "windows/floating-media.yuck")
+(include "windows/floating-notifications.yuck")
+(include "windows/hardware-monitor.yuck")
 
-; Widgets
+; Universal Widgets
 (include "widgets/big-media.yuck")
+(include "widgets/separator.yuck")
diff --git a/eww/scripts/eww-reload.sh b/eww/scripts/eww-reload.sh
new file mode 100644
index 0000000..f6bf4d3
--- /dev/null
+++ b/eww/scripts/eww-reload.sh
@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+# This script reloads eww configuration and updates
+# window status variables, used in eww-window.sh
+# script. Avoids issues with widgets that use status 
+# variables to dinamically change their content.
+# ----------
+# Licensed under the MIT License
+# Made by retrozinndev (João Dias)
+# From https://github.com/retrozinndev/Hyprland-Dots
+
+# TODO
+
+open_windows=$(eww active-windows | awk -F: '{ print $1 }' | sed -e 's/ /\\[n]/g')
+echo $open_windows
+
+#for window in $()
diff --git a/eww/scripts/eww-window.sh b/eww/scripts/eww-window.sh
index cbd12dd..eb7ebeb 100644
--- a/eww/scripts/eww-window.sh
+++ b/eww/scripts/eww-window.sh
@@ -44,7 +44,7 @@ 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
+        if ! [[ $(eww active-windows) =~ "$2" ]]; then
             eww open "$2"
             eww update "window_state_$2=open"
         else
@@ -54,7 +54,7 @@ Licensed under the MIT License, as in retrozinndev's Hyprland-Dots repo."
 
     --close | close)
         check_if_empty $2 "WINDOW_NAME"
-        if [[ $(eww get "window_state_$2") == "open" ]]; then
+        if [[ $(eww active-windows) =~ "$2" ]]; then
             eww close "$2"
             eww update "window_state_$2=closed"
         else
@@ -64,7 +64,7 @@ Licensed under the MIT License, as in retrozinndev's Hyprland-Dots repo."
 
     --toggle | toggle)
         check_if_empty $2 "WINDOW_NAME"
-        if [[ $(eww get "window_state_$2") == "closed" ]]; then
+        if ! [[ $(eww active-windows) =~ "$2" ]]; then
             eww open "$2"
             eww update "window_state_$2=open" 
         else 
diff --git a/eww/scripts/night-light.sh b/eww/scripts/night-light.sh
new file mode 100644
index 0000000..e4e546f
--- /dev/null
+++ b/eww/scripts/night-light.sh
@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+set -e
+
+pidfile="$HOME/.cache/night-light.pid"
+temperature=4500 # in K
+
+# run only if pid file does not exist
+if ! [[ -f $pidfile ]]; then
+    touch $pidfile
+    hyprsunset -t $temperature &
+    _pid=$!
+    echo -e $_pid > $pidfile
+    wait $_pid && rm -f $pidfile
+else
+    echo "There's already an instance running! Mistake? Delete \"~/.cache/night-light.pid\"."
+    exit 1
+fi
diff --git a/eww/scripts/notification-clear.sh b/eww/scripts/notification-clear.sh
new file mode 100644
index 0000000..6f604f1
--- /dev/null
+++ b/eww/scripts/notification-clear.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+lockfile=$HOME/.cache/notification-history.lock
+json_history_file=$HOME/.cache/notification-history.json
+
+if ! [[ -f $lockfile ]]; then
+    echo "{ \"history\": [] }" > $json_history_file
+fi
diff --git a/eww/scripts/notification-handler.sh b/eww/scripts/notification-handler.sh
index 1c22d0a..67e6994 100644
--- a/eww/scripts/notification-handler.sh
+++ b/eww/scripts/notification-handler.sh
@@ -1,18 +1,73 @@
 #!/usr/bin/env bash
 
-# initial notification history
-json_initial_history=$(makoctl history | jq -c '.data[]' | sed -e 's/\\[n]/\\n/g' -e 's/&/&amp;/g')
-echo $json_initial_history
+# A notification logger, saves notifications inside
+# a file instead of saving on memory! file is located
+# in `~/.cache/notification-history.json`.
+# -----------
+# Licensed under the MIT License
+# Made by retrozinndev (João Dias)
+# From https://github.com/retrozinndev/Hyprland-Dots
+
+set -e
+
+json_history_file="$HOME/.cache/notification-history.json"
+lock_file="$HOME/.cache/notification-history.lock"
+
+# get max entries from mako file
+max_entries=$(cat $HOME/.config/mako/config | grep "max-history=" | awk -F= '{ print $2 }')
+
+touch $json_history_file
+
+function Init_history_file() {
+    if [[ $(cat $json_history_file) == "" ]]; then
+        echo -e "{\"history\":[]}" > $json_history_file
+    fi
+}
+
+function Check_history_file() {
+    if ! [[ -f $json_history_file ]]; then
+        touch $json_history_file
+    fi
+}
+
+function Treat_specials() {
+    echo $@ | sed -e 's/\\[n]/\\n/g' -e 's/&/&amp;/g'
+}
+
+Check_history_file
+Init_history_file
+
+json_latest_notification="$(makoctl history | jq -c '.data[][0]')"
 
 while true; do
-    # watch history every 200ms
-    sleep .2
+    sleep .1
+    if ! [[ -f $lock_file ]]; then
+        json_actual_latest="$(makoctl history | jq -c '.data[][0]')"
+        if ! [[ $json_actual_latest == $json_latest_notification ]]; then
+            if [[ $(echo $(Treat_specials $json_actual_latest) | jq -c '.id.data') == $(echo $(Treat_specials $json_latest_notification) | jq -c '.id.data') ]]; then
+                if [[ $(echo $(Treat_specials $json_actual_latest) | jq -c '.summary.data') == $(echo $(Treat_specials $json_latest_notification) | jq -c '.summary.data') ]]; then
+                    continue
+                else
+                    sh $HOME/.config/eww/scripts/notification-remove.sh $(echo $(Treat_specials $json_latest_notification) | jq -c '.id.data') &
+                fi
+            fi
 
-    # frequently updated history variable
-    json_history=$(makoctl history | jq -c '.data[]' | sed -e 's/\\[n]/\\n/g' -e 's/&/&amp;/g')
+            Check_history_file
+            Init_history_file
+            json_latest_notification=$(makoctl history | jq -c '.data[][0]')
+            json_first_notification=$(jq -c ".history[$(jq -c '.history | length - 1' $json_history_file)]" $json_history_file)
 
-    if ! [[ "$json_initial_history" == "$json_history" ]]; then
-        json_initial_history="$json_history"
-        echo "$json_initial_history"
+            if ! [[ $(makoctl mode) =~ "dnd" ]]; then
+                sh $HOME/.config/eww/scripts/notification-popup.sh "$(Treat_specials $json_latest_notification)" & 
+            fi
+
+            if [[ $(jq -c ".history | length" $json_history_file) == $max_entries ]]; then 
+                sh $HOME/.config/eww/scripts/notification-remove.sh $(echo $json_first_notification | jq -c '.id.data')
+            fi
+
+            json_output=$(jq -c ".history |= [$(Treat_specials $json_latest_notification)] + ." $json_history_file)
+            
+            echo -e "$json_output" > $json_history_file
+        fi
     fi
 done
diff --git a/eww/scripts/notification-popup-remove.sh b/eww/scripts/notification-popup-remove.sh
new file mode 100644
index 0000000..0b5d3ba
--- /dev/null
+++ b/eww/scripts/notification-popup-remove.sh
@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+# Removes notification from popup by id provided 
+# in arg1.
+# ---------
+# Licensed under the MIT License
+# Made by retrozinndev (João Dias)
+# From https://github.com/retrozinndev/Hyprland-Dots
+
+
+if ! [[ $1 == "" ]]; then
+    json_popup_notifications=$(eww get json_popup_notifications)
+    if [[ $(eww get json_popup_notifications | jq -c '.notifications | length') == 1 ]]; then
+        sh $HOME/.config/eww/scripts/eww-window.sh close floating-notifications >> /dev/null
+    fi
+    eww update "json_popup_notifications=$(echo $json_popup_notifications | jq -c "del(.notifications[] | select(.id.data == $1))")"
+    exit 0
+fi
+
+echo "[error] Notification Id not provided!"
+exit 1
diff --git a/eww/scripts/notification-popup.sh b/eww/scripts/notification-popup.sh
new file mode 100644
index 0000000..4001335
--- /dev/null
+++ b/eww/scripts/notification-popup.sh
@@ -0,0 +1,47 @@
+#!/usr/bin/env bash
+
+# This scripts receives a notification from arg1,
+# in a json format, displays in eww, counting 
+# down depending on notification urgency and 
+# removes the notification from json.
+
+# Timeout in seconds
+# When set to 0, notification will disappear 
+# only when hovering it.
+timeout_low=3
+timeout_normal=6
+timeout_critical=0
+
+if ! [[ $@ == "" ]]; then
+    # Urgency levels:
+    # Low: 0, Normal: 1, Critical: 2
+    urgency=$(echo $@ | jq -c ".urgency.data")
+    id=$(echo $@ | jq -c ".id.data") 
+    json_popup_notifications="$(eww get json_popup_notifications)"
+    json_notification=$(echo $@ | jq -c '.')
+
+    if [[ $json_popup_notifications == "" ]]; then
+        eww update "json_popup_notifications="'{"notifications":[]}' >> /dev/null
+        json_popup_notifications='{"notifications":[]}'
+    fi
+
+    eww update "json_popup_notifications=$(echo $json_popup_notifications | jq -c ".notifications |= [$json_notification] + .")" >> /dev/null
+    sh $HOME/.config/eww/scripts/eww-window.sh open floating-notifications >> /dev/null
+
+    # Critical urgency is handled by eww, no need to count down
+    case $urgency in
+        0*)
+            sleep $timeout_low
+            ;;
+        1*)
+            sleep $timeout_normal
+            ;;
+    esac
+
+    if ! [[ $urgency == 2 ]]; then
+        sh $HOME/.config/eww/scripts/notification-popup-remove.sh "$id" &
+    fi
+fi
+
+
+exit 0
diff --git a/eww/scripts/notification-remove.sh b/eww/scripts/notification-remove.sh
new file mode 100644
index 0000000..6d4f2ea
--- /dev/null
+++ b/eww/scripts/notification-remove.sh
@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+# Removes notification from history file by 
+# id provided in arg1.
+# ---------
+# Licensed under the MIT License
+# Made by retrozinndev (João Dias)
+# From https://github.com/retrozinndev/Hyprland-Dots
+
+json_history_file="$HOME/.cache/notification-history.json"
+lock_file="$HOME/.cache/notification-history.lock"
+
+if [[ -f $HOME/.cache/notification-history.json ]] && ! [[ $1 == "" ]]; then
+    touch $lock_file
+    json_updated_history=$(jq -c "del(.history[] | select(.id.data == $1))" $json_history_file)
+    echo -e $json_updated_history > $json_history_file
+    rm -f $lock_file
+else
+    echo "[error] Notification history not reachable or id not provided"
+    exit 1
+fi
diff --git a/eww/scripts/notification-watch.sh b/eww/scripts/notification-watch.sh
new file mode 100644
index 0000000..1bf7e81
--- /dev/null
+++ b/eww/scripts/notification-watch.sh
@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+
+# This script watches notification file changes
+# and output file contents.
+# -----------
+# Licensed under the MIT License
+# Made by retrozinndev (João Dias)
+# From https://github.com/retrozinndev/Hyprland-Dots
+
+set -e
+
+json_history_file="$HOME/.cache/notification-history.json"
+
+if ! [[ -f $json_history_file ]]; then
+    echo -e "{\"history\":[]}" > $json_history_file
+fi
+
+json_history="$(cat $json_history_file)"
+
+echo $json_history
+
+while true; do
+    sleep .1
+    json_newest_history=$(cat $json_history_file)
+
+    if ! [[ "$json_history" == "$json_newest_history" ]]; then
+        json_history="$json_newest_history"
+        echo $json_history
+    fi
+done
+
+exit 0
diff --git a/eww/scripts/screen-recording.sh b/eww/scripts/screen-recording.sh
new file mode 100644
index 0000000..eadc5a8
--- /dev/null
+++ b/eww/scripts/screen-recording.sh
@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+set -e
+
+dest="$HOME/Recordings"
+if ! [[ $(xdg-user-dir VIDEOS) == "" ]]; then
+    dest="$(xdg-user-dir VIDEOS)/Recordings"
+fi
+lock="$HOME/.cache/recording.lock"
+pidfile="$HOME/.cache/recording.pid"
+ext="mp4" # mp4,mkv...
+filename=$(date +"%Y-%m-%d-%H%M%S_rec.$ext")
+
+mkdir -p $dest
+
+# run only if lockfile does not exist
+if ! [[ -f $lock ]]; then
+    touch $lock
+    wf-recorder -f "$dest/$filename" &
+    rec_pid=$!
+    echo -e $rec_pid > $pidfile
+    wait $rec_pid && (
+        notify-send -a "Screen Recorder" "Recording Done" "The screen recording has been saved as '$dest/$filename'!"
+        rm -f $lock $pidfile
+    )
+else
+    notify-send -a "Screen Recorder" "Recording Error" "There's already an instance running! Mistake? Delete $lock and $pidfile."
+    exit 1
+fi
diff --git a/eww/scripts/unused/recent-notifications.sh b/eww/scripts/unused/recent-notifications.sh
deleted file mode 100644
index 43f115c..0000000
--- a/eww/scripts/unused/recent-notifications.sh
+++ /dev/null
@@ -1,24 +0,0 @@
-#!/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
diff --git a/eww/scripts/volume-popup-trigger.sh b/eww/scripts/volume-popup-trigger.sh
index 27955d4..a75d8ec 100644
--- a/eww/scripts/volume-popup-trigger.sh
+++ b/eww/scripts/volume-popup-trigger.sh
@@ -1,8 +1,7 @@
 #!/usr/bin/env bash
 
 while true; do
-    is_holding=$(eww get hold_volume_popup)
-    if [[ $is_holding == true ]]; then
+    if [[ $(eww get hold_volume_popup) == true ]]; then
         sleep 4
         sh ./eww-window.sh close volume-popup
         eww update "hold_volume_popup=false"
diff --git a/eww/scripts/workspaces.sh b/eww/scripts/workspaces.sh
index 48c7bad..789751d 100644
--- a/eww/scripts/workspaces.sh
+++ b/eww/scripts/workspaces.sh
@@ -1,8 +1,9 @@
 #!/usr/bin/env bash
 
 print_workspaces_literal() {
-    active_workspace_id=$(hyprctl -j activeworkspace | jq .id | xargs)
-    existing_workspaces=$(hyprctl -j workspaces | jq .[].id | xargs)
+    active_workspace_id=$(hyprctl -j activeworkspace | jq -c '.id' | xargs)
+    json_workspaces=$(hyprctl -j workspaces | jq -c '.')
+    existing_workspaces=$(echo $json_workspaces | jq -c '.[].id' | xargs)
 
     output="
         (box :space-evenly false
@@ -11,7 +12,7 @@ print_workspaces_literal() {
     for i in {1..10}; do
         output=$output"
             (button :onclick \"hyprctl dispatch workspace $i >> /dev/null \" 
-                    :class { $active_workspace_id == $i ? \"active\" : \"\" } 
+            :class \"\${ $active_workspace_id == $i ? 'active' : '' } $( [[ $(echo $json_workspaces | jq -c ".[$i - 1].name") =~ "special:" ]] && echo 'special' )\"
                     :visible { \"$existing_workspaces\" =~ $i ? true : false }
                     :tooltip \"Workspace ${i}\"
             \"\")"
diff --git a/eww/styles/bar.scss b/eww/styles/bar.scss
index b693414..8ad360e 100644
--- a/eww/styles/bar.scss
+++ b/eww/styles/bar.scss
@@ -18,6 +18,13 @@
 
     & > * {
         margin: 0 3px;
+        border-radius: 12px;
+        &.button {
+            margin: 0;
+            & > box {
+                margin: 0 3px;
+            }
+        }
     }
 
     & > *:first-child {
@@ -35,21 +42,27 @@
 
 // Styles the literal script for workspace indicators
 .workspaces {
-    padding: 2px 0px;
     border-radius: 50%;
 
     & button {
-        $padding-block: 5px;
-
         border-radius: 16px;
         margin: 0 2px;
-        padding: $padding-block 12px;
+        padding: 5px 12px;
         background: lighten($color: $color1, $amount: 10);
 
+        &:not(.active):hover {
+            box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .5);
+        }
+
         &.active {
-            padding: $padding-block 22px;
+            padding-right: 22px;
+            padding-left: 22px;
             background: $foreground;
         }
+
+        &.special {
+            background: darken($color: $color3, $amount: 5);
+        }
     }
 }
 
@@ -99,17 +112,10 @@
                     margin-right: 8px;
                 }
             }
-
-            & > box.separator {
-                margin: 8px 4px;
-                padding: 0 1px;
-                background: darken($color: $foreground, $amount: 20);
-            }
         }
     }
 
     &.revealed {
-        background: darken($color: $color3, $amount: 25);
         transition: 80ms linear;
 
         .media > box {
@@ -118,12 +124,31 @@
         }
 
         .media-controls {
-            background: darken($color: $color3, $amount: 25);
+            padding: 3px;
+            background: darken($color: $color3, $amount: 10);
             border-top-right-radius: 12px;
             border-bottom-right-radius: 12px;
 
-            & button:last-child {
-                border-radius: inherit;
+            & button {
+                background: $color2;
+                margin: 0 1px;
+                border-radius: 2px;
+
+                &:hover {
+                    background: lighten($color: $color2, $amount: 5);
+                }
+
+                &:first-child {
+                    border-top-left-radius: 8px;
+                    border-bottom-left-radius: 8px;
+                    margin-left: 0;
+                }
+
+                &:last-child {
+                    border-top-right-radius: 8px;
+                    border-bottom-right-radius: 8px;
+                    margin-right: 0;
+                }
             }
         }
     }
@@ -135,7 +160,7 @@
 }
 
 .window {
-    padding: 0 4px;
+    padding: 0 6px;
 
     & > .icon {
         margin-right: 6px;
@@ -146,17 +171,18 @@
             font-size: 9.8px;
             font-family: monospace;
             color: darken($color: $foreground, $amount: 20);
+            margin-top: -1px;
         }
 
         & > label.window-title {
             font-size: 12px;
             color: $foreground;
-            margin-top: -3px;
+            margin-top: -1px;
         }
     }
 }
 
-.network button {
+.network-eventbox > box {
     padding-left: 10px;
     padding-right: 7px;
 }
@@ -193,8 +219,18 @@
     }
 }
 
-.clock button.cal-open {
-    background: darken($color: $color3, $amount: 10);
+.clock {
+    & .cal-open > box {
+        background: darken($color: $color3, $amount: 10);
+    }
+
+    & .icon {
+        margin-right: 6px;
+    }
+
+    & label:not(.icon) {
+      margin-right: 3px;
+    }
 }
 
 .control-center-toggle {
@@ -217,3 +253,17 @@
         background: darken($color: $color3, $amount: 10);
     }
 }
+
+.hardware {
+    & > box {
+        margin: 0 5px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
diff --git a/eww/styles/calendar.scss b/eww/styles/calendar.scss
index bc53d82..005f00b 100644
--- a/eww/styles/calendar.scss
+++ b/eww/styles/calendar.scss
@@ -4,31 +4,38 @@
     background: rgba($background, 0.6);
     border-radius: 16px;
 
-    & > label.calendar-header {
-        font-size: 15px;
+    & > .time {
+        font-size: 42px;
         font-weight: 700;
+    }
+
+    & > .date {
+        font-size: 12px;
+        font-weight: 600;
         margin-bottom: 8px;
     }
 
     .month-calendar {
-        & > * {
-            background: lighten($color: $background, $amount: 2);
-        }
         border-radius: 12px;
         padding: 0 5px;
         padding-top: 10px;
         font-weight: 500;
 
         & > .header {
+            background: unset;
             border-radius: 6px;
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
             border-bottom: solid .5px gray;
         }
 
+        &:hover {
+            background: $color2;
+        }
+
         // Selected day / Current day
         &:selected {
-            background: darken($color: $color1, $amount: 20);
+            border: 1px solid $color2;
         }
     }
 }
diff --git a/eww/styles/control-center.scss b/eww/styles/control-center.scss
index 8f71fe0..c01eb11 100644
--- a/eww/styles/control-center.scss
+++ b/eww/styles/control-center.scss
@@ -1,12 +1,11 @@
 box.cc {
-    margin-top: 8px;
-    margin-bottom: 14px;
-    margin-left: 14px;
+    margin: 12px;
+    margin-right: 0;
     background: rgba($background, .85);
     border-top-left-radius: 24px;
     border-bottom-left-radius: 24px;
     padding: 18px;
-    box-shadow: 0 5 8px 1px black;
+    box-shadow: 0 3px 4px 1px $background;
 }
 
 .top-bar {
@@ -50,7 +49,7 @@ box.cc {
 }
 
 .cc-notifications {
-    & > .vertical-scroll {
+    &.scroll {
         .notifications {
             box.notification {
                 background: darken($color: $color1, $amount: 10);
@@ -70,6 +69,11 @@ box.cc {
                         }
                         font-weight: 600;
                     }
+
+                    .close {
+                        padding: 4px 8px;
+                        border-radius: 9px;
+                    }
                 }
 
                 & .content {
@@ -87,7 +91,7 @@ box.cc {
 
                     & .text {
                         & label {
-                            font-family: "Cantarell", "Noto Sans CJK JP", "Noto Sans CJK KR";
+                            font-family: "Cantarell", "Noto Sans", "Noto Sans CJK JP", "Noto Sans CJK KR";
                         }
 
                         & label.summary {
@@ -117,33 +121,36 @@ box.cc {
     }
 }
 
-.toggles {
-    
+.tiles-grid {
     margin-bottom: 10px;
-    
-    & > .toggle-checkbox:first-child {
+}
+
+.tiles {
+    margin-bottom: 2px;
+
+    & > .tile-checkbox:first-child {
         margin-left: 0;
     }
 
-    & > .toggle-checkbox:last-child {
+    & > .tile-checkbox:last-child {
         margin-right: 0;
     }
 
-    & .toggle-checkbox {
+    & .tile-checkbox {
         margin: 2px;
 
         &:hover {
             & > box {
-                background: darken($color: $color2, $amount: 15);
+                background: $color3;
             }
             &:checked > box {
-                background: $color3;
+                background: $color2;
             }
         }
 
         &:checked {
             & > box {
-                background: darken($color: $color3, $amount: 5);
+                background: $color2;
             }
         }
 
@@ -151,7 +158,7 @@ box.cc {
             color: transparent;
         }
 
-        & > .toggle {
+        & > .tile {
             background: darken($color: $foreground, $amount: 65);
             border-radius: 16px;
             padding: 16px;
@@ -180,4 +187,16 @@ box.cc {
             margin-right: 4px;
         }
     }
+
+    & .screen-rec {
+        .icon {
+            margin-right: 4px;
+        }
+    }
+
+    & .night-light {
+        .icon {
+            margin-right: 4px;
+        }
+    }
 }
diff --git a/eww/styles/floating-notifications.scss b/eww/styles/floating-notifications.scss
index c67cfb5..fd60d7e 100644
--- a/eww/styles/floating-notifications.scss
+++ b/eww/styles/floating-notifications.scss
@@ -1,5 +1,5 @@
 .floating-notifications {
-    & > .floating-notification {
+    & > .notifications .floating-notification {
         $background-color: darken($color: $color1, $amount: 40);
         background: $background-color;
         border-radius: 16px;
@@ -45,4 +45,32 @@
         }
 
     }
+
+    & > .bottom {
+        padding: 8px;
+        margin: 0 8px;
+
+        & .tip {
+            background: darken($color: $color1, $amount: 40);
+            border-radius: 12px;
+            padding: 8px 12px;
+            box-shadow: 0 0 0px 1px $background;
+
+            & > .icon {
+                margin-right: 4px;
+                font-size: 16px;
+            }
+        }
+
+        & > .right {
+            background: darken($color: $color1, $amount: 40);
+            border-radius: 12px;
+            box-shadow: 0 0 0px 1px $background;
+
+            & .icon {
+                margin-right: 4px;
+                font-size: 16px;
+            }
+        }
+    }
 }
diff --git a/eww/styles/general.scss b/eww/styles/general.scss
index 4ee2fdb..aa187b1 100644
--- a/eww/styles/general.scss
+++ b/eww/styles/general.scss
@@ -12,7 +12,6 @@ label {
 }
 
 box.button-row {
-    padding: 2px;
     $bg-color: darken($color: $foreground, $amount: 25);
 
     & > button {
@@ -169,7 +168,7 @@ tooltip {
         background-repeat: no-repeat;
         background-position: center 0;
         margin-right: 12px;
-        border-radius: 11px;
+        border-radius: 12px;
     }
 
     & > box > .right {
@@ -210,8 +209,23 @@ tooltip {
     }
 
     &.album-bg {
-        box-shadow: inset 0 0 0 100px rgba($background, .55);
+        box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .5);
         background-size: cover;
     }
 
 }
+
+box.separator {
+    background: darken($color: $foreground, $amount: 20);
+
+    &.horizontal {
+        margin: 8px 4px;
+        padding: 0 1px;
+    }
+
+    &.vertical {
+        margin: 4px 10px;
+        padding: 0 1px;
+    }
+}
+
diff --git a/eww/variables.yuck b/eww/variables.yuck
index 26625bb..4d42713 100644
--- a/eww/variables.yuck
+++ b/eww/variables.yuck
@@ -1,7 +1,7 @@
-; All globally used variables should be stored here
+; All globally used variables, polls and listeners should be stored here
 
-
-; State
+; Variables
+;  State
 (defvar window_state_powermenu "closed")
 (defvar window_state_control-center "closed")
 (defvar window_state_floating-notifications "closed")
@@ -11,10 +11,12 @@
 (defvar window_state_volume-popup "closed")
 (defvar window_state_floating-media "closed")
 
+(defvar json_popup_notifications "{ \"notifications\": [] }")
+
 
 ; Listeners
-(deflisten json_notifications :initial "[]"
-`sh scripts/notification-handler.sh`)
+(deflisten json_notification_history :initial "{\"history\": []}"
+`sh scripts/notification-watch.sh`)
 
 (deflisten json_volume :initial `{ "output": 60, "source": 80 }`
 `sh scripts/get-volume-watch.sh`)
@@ -25,24 +27,11 @@
 (deflisten json_media :initial "{}"
 `python3 scripts/mediaplayer.py`)
 
-(deflisten active_window :initial `{ "title": "null", "class": "null" }`
+(deflisten json_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`)
@@ -64,5 +53,8 @@
                                 && json_media.player != "null" }
 `playerctl shuffle`)
 
-; Variables
-(defvar hold_volume_popup false)
+(defpoll is_recording :interval "1s"
+`sh -c "[[ -f $HOME/.cache/recording.lock ]] && echo true || echo false"`)
+
+(defpoll night_light :interval "1s"
+`sh -c "[[ -f $HOME/.cache/night-light.pid ]] && echo true || echo false"`)
diff --git a/eww/widgets/bar/audio.yuck b/eww/widgets/bar/audio.yuck
index 844bd92..a13d8b0 100644
--- a/eww/widgets/bar/audio.yuck
+++ b/eww/widgets/bar/audio.yuck
@@ -1,7 +1,8 @@
 
 (defwidget audio []
-    (eventbox :onclick "sh scripts/eww-window.sh toggle volume-control"
+    (eventbox :onclick "sh ${EWW_CONFIG_DIR}/scripts/eww-window.sh toggle volume-control"
               :class "audio-eventbox"
+              :cursor "pointer"
         (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}%"))
diff --git a/eww/widgets/bar/battery.yuck b/eww/widgets/bar/battery.yuck
index 8d9e1b8..442e23c 100644
--- a/eww/widgets/bar/battery.yuck
+++ b/eww/widgets/bar/battery.yuck
@@ -1,6 +1,6 @@
 (defwidget battery [ ?device ]
     (box :class "battery"
          :visible { EWW_BATTERY != "" ? true : false }
-        (label :text "󰁹  ${EWW_BATTERY}%")
+        (label :text "󰁹  ${ EWW_BATTERY != '' ? EWW_BATTERY?.status : '' }%")
     )
 )
diff --git a/eww/widgets/bar/clock.yuck b/eww/widgets/bar/clock.yuck
index 44cc081..c196bb1 100644
--- a/eww/widgets/bar/clock.yuck
+++ b/eww/widgets/bar/clock.yuck
@@ -1,8 +1,26 @@
 (defwidget clock []
-    (box :class "clock"
-         :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}")
+  (box :class "clock"
+       :tooltip { formattime(EWW_TIME, "%A, %B %d") }
+
+    (eventbox :onclick "sh scripts/eww-window.sh toggle calendar-window"
+              :class '${ window_state_calendar-window == "open" ? "cal-open" : "" } button'
+      (box :space-evenly false
+        (box :space-evenly false
+             :class "time"
+          (label :text "󰸗"
+                 :class "icon")
+
+          (label :text "${ formattime(EWW_TIME, "%A") }")
+
+          (revealer :reveal { window_state_calendar-window == "closed" }
+                    :transition "slideright"
+                    :duration "240ms"
+                    :class "unrevealer"
+
+            (label :text { formattime(EWW_TIME, "%d, %H:%M") } )
+          )
+        )
+      )
     )
+  )
 )
diff --git a/eww/widgets/bar/hardware.yuck b/eww/widgets/bar/hardware.yuck
new file mode 100644
index 0000000..85aad13
--- /dev/null
+++ b/eww/widgets/bar/hardware.yuck
@@ -0,0 +1,17 @@
+(defwidget hardware [ ?cpu ?memory ?visible ]
+  (eventbox :class "hardware-eventbox button"
+            :onclick "sh ${EWW_CONFIG_DIR}/scripts/eww-window.sh toggle hardware-monitor"
+            :visible { visible == "" || visible ? true : false }
+    (box :class "hardware"
+         :space-evenly false
+      (box :class "cpu"
+           :visible { cpu == "" || cpu ? true : false }
+        (label :text "   ${ round(EWW_CPU?.avg, 0) }%")
+      )
+      (box :class "memory"
+           :visible { memory == "" || memory ? true : false }
+        (label :text "   ${ round(EWW_RAM?.used_mem_perc, 0) }%")
+      )
+    )
+  )
+)
diff --git a/eww/widgets/bar/media.yuck b/eww/widgets/bar/media.yuck
index 35517ca..0eb08fe 100644
--- a/eww/widgets/bar/media.yuck
+++ b/eww/widgets/bar/media.yuck
@@ -6,8 +6,8 @@
             :onhoverlost "${EWW_CMD} update media_reveal_controls=false"
             :visible { json_media == "" || (json_media.title == "null" &&
                        json_media.artist == "null") ||
-                       (active_window.class =~ json_media.player ||
-                       active_window.title =~ json_media.title) ?
+                       (json_active_window.class =~ json_media.player ||
+                       json_active_window.title =~ json_media.title) ?
                            false : true
                      }
             :onclick "sh scripts/eww-window.sh toggle floating-media"
@@ -27,7 +27,9 @@
                  :text "${json_media.title}"
                  :limit-width 40)
 
-          (box :class "separator")
+          (separator :orientation "horizontal"
+                     :alpha 0.8
+                     :style "border-radius: 2x;")
 
           (label :class "media-artist"
                  :text "${json_media.artist}"
@@ -37,9 +39,13 @@
       (revealer :class "media-controls-revealer"
                 :reveal { media_reveal_controls ? "${ window_state_floating-media == 'closed' ? true : false }" : false }
                 :transition "slideright"
-                :duration "180ms"
+                :duration "220ms"
 
         (box :class "media-controls"
+          (button :class "url"
+                  :onclick "wl-copy '${json_media.url}'"
+                  :tooltip "Copy link to Clipboard"
+          "󰌷")
           (button :class "previous"
                   :onclick "playerctl previous --player=${json_media.player}"
           "󰒮")
diff --git a/eww/widgets/bar/network.yuck b/eww/widgets/bar/network.yuck
index c7afab6..0298d4f 100644
--- a/eww/widgets/bar/network.yuck
+++ b/eww/widgets/bar/network.yuck
@@ -1,5 +1,8 @@
 (defwidget network []
-    (box :class "network"
-        (button "${ network_status == 'full' ? ' ' : '󰤭 ' }")
+    (eventbox :class "button network-eventbox"
+              :onclick "hyprctl dispatch exec 'nm-connection-editor'"
+        (box :class "network" 
+          (label :text "${ network_status == 'full' ? ' ' : '󰤭 ' }")
+        )
     )
 )
diff --git a/eww/widgets/bar/window.yuck b/eww/widgets/bar/window.yuck
index 9786335..db43c8b 100644
--- a/eww/widgets/bar/window.yuck
+++ b/eww/widgets/bar/window.yuck
@@ -1,26 +1,27 @@
 
 (defwidget window []
   (box :class "window"
-       :visible { active_window.class == "" || active_window.class == "null" ? false : true }
+       :visible { json_active_window.class == "" || json_active_window.class == "null" ? false : true }
        :space-evenly false
+       :valign "center"
        :orientation "horizontal"
 
     (image :class "icon"
-           :icon "${ active_window.initialClass =~ 'zen-(.*)$' ? 'zen-browser' : active_window.initialClass }"
+           :icon "${ json_active_window.initialClass =~ 'zen-(.*)$' ? 'zen-browser' : json_active_window.initialClass }"
            :icon-size "toolbar")
 
     (box :class "info"
-         :orientation { active_window.title == "" ? "horizontal" : "vertical" }
+         :orientation { json_active_window.title == "" ? "horizontal" : "vertical" }
          :space-evenly false
         (label :class "window-class"
-               :text "${active_window.class}"
+               :text "${json_active_window.class}"
                :xalign 0
                :yalign 0)
         (label :class "window-title"
-               :text "${active_window.title}"
-               :visible { active_window.title != "" ? true : false }
+               :text "${json_active_window.title}"
+               :visible { json_active_window.title != "" ? true : false }
                :limit-width 45
-               :tooltip "${active_window.title}"
+               :tooltip "${json_active_window.title}"
                :xalign 0
                :yalign 0)
     )
diff --git a/eww/widgets/bar/workspaces.yuck b/eww/widgets/bar/workspaces.yuck
index 794c187..e92e188 100644
--- a/eww/widgets/bar/workspaces.yuck
+++ b/eww/widgets/bar/workspaces.yuck
@@ -6,6 +6,7 @@
             :onhover "${EWW_CMD} update hover_workspaces=true"
             :onhoverlost "${EWW_CMD} update hover_workspaces=false"
     (box :class "workspaces"
+         :valign "center"
       (literal :content literal_workspaces)
     )
   )
diff --git a/eww/widgets/big-media.yuck b/eww/widgets/big-media.yuck
index b737193..c48ee83 100644
--- a/eww/widgets/big-media.yuck
+++ b/eww/widgets/big-media.yuck
@@ -1,7 +1,6 @@
-(defwidget big-media [ show-album-bg show-album-image ?album-image-size ?style-background-color ?visible ]
+(defwidget big-media [ show-album-bg show-album-image ?album-image-size ?style ?visible ]
     (box :class "big-media ${ show-album-bg ? 'album-bg' : '' } ${ show-album-image ? 'album-image' : '' }"
-         :style "${ show-album-bg ? 'background-image: image(url(\"${json_media.artUrl}\"))' : '' } ${ 
-                  style-background-color != '' ? 'background-color: ${style-background-color}' : '' }"
+         :style "${ show-album-bg ? 'background-image: url(\"${json_media.artUrl}\");' : '' } ${style}" 
          :visible { visible == "" ? true : "${ visible ? true : false }" }
          :space-evenly false
          :orientation "vertical"
diff --git a/eww/widgets/control-center/notification.yuck b/eww/widgets/control-center/notification.yuck
index bcfae80..2fe5e94 100644
--- a/eww/widgets/control-center/notification.yuck
+++ b/eww/widgets/control-center/notification.yuck
@@ -23,9 +23,8 @@
                            :text "${application_name}")
                 )
                 (button :class "close"
-                        :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
+                        :visible true
                 "󰅖")
             )
 
@@ -43,7 +42,7 @@
                      :space-evenly false
 
                     (label :class "summary"
-                           :text "${summary}"
+                           :markup "${summary}"
                            :xalign 0
                            :halign "start"
                            :show-truncated true)
diff --git a/eww/widgets/control-center/notifications.yuck b/eww/widgets/control-center/notifications.yuck
index b731269..74c07cf 100644
--- a/eww/widgets/control-center/notifications.yuck
+++ b/eww/widgets/control-center/notifications.yuck
@@ -1,54 +1,38 @@
 (defwidget notifications []
-  (box :class "cc-notifications"
-       :orientation "vertical"
-       :space-evenly false
-      
-    (scroll :class "vertical-scroll"
-            :hscroll false
-            :vscroll true
-            :hexpand true
-            :vexpand true
-            :height 500
-            :style "border-radius: 16px;"
+  (scroll :class "cc-notifications scroll"
+          :hscroll false
+          :vscroll true
+          :vexpand true
+          :style "border-radius: 16px;"
 
-      (box :class "notifications"
-           :orientation "vertical"
-           :space-evenly false
-           
-
-        (for notification in json_notifications
-          (notification :application_name "${notification.app-name.data}"
-                        :image "${notification.app-icon.data}"
-                        :summary "${notification.summary.data}"
-                        :body "${notification.body.data}"
-                        :onclick "makoctl invoke -n ${notification.id.data} view"
-                        :icon "${notification.app-name.data}"
-          )
-        )
-
-        (box :class "empty-notifications"
-             :visible { arraylength(json_notifications) == 0 ? true : false }
-             :style "margin-top: 50px;"
-             :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"
+    (box :class "notifications"
+         :orientation "vertical"
          :space-evenly false
-      (button :class "clear-all"
-              :onclick { arraylength(json_notifications) > 0 ? "pkill mako; hyprctl dispatch exec mako" : "" }
-      "󰎟  Clear")
+
+      (for notification in { json_notification_history["history"] }
+        (notification :application_name "${notification.app-name.data}"
+                      :image "${notification.app-icon.data}"
+                      :summary "${notification.summary.data}"
+                      :body "${notification.body.data}"
+                      :onclickclose "sh scripts/notification-remove.sh ${notification.id.data}"
+                      :icon "${notification.app-name.data}")
+      )
+
+      (box :class "empty-notifications"
+           :visible { arraylength(json_notification_history["history"]) == 0 }
+           :style "margin-top: 50px;"
+           :space-evenly false
+           :orientation "vertical"
+           :halign "center"
+           :valign "center"
+          
+          (label :class "bell-icon"
+                 :text "󱇦"
+                 :style "font-size: 96px")
+
+          (label :text "You're done!"
+                 :style "margin-left: 12px;")
+      )
     )
   )
 )
diff --git a/eww/widgets/control-center/tiles.yuck b/eww/widgets/control-center/tiles.yuck
new file mode 100644
index 0000000..a5359e8
--- /dev/null
+++ b/eww/widgets/control-center/tiles.yuck
@@ -0,0 +1,74 @@
+(defwidget tiles []
+  (box :class "tiles-grid"
+       :orientation "vertical"
+    (box :class "tiles tiles1"
+      (tile :icon '󰤨'
+            :label "Network"
+            :enabled { network_status == "full" ? true : false }
+            :onenable "nmcli n on"
+            :ondisable "nmcli n off"
+            :visible true
+            :class "network")
+
+      (tile :icon '󰂯'
+            :label "Bluetooth"
+            :enabled { bluetooth_powered == "yes" ? true : false }
+            :onenable "bluetoothctl power on"
+            :ondisable "bluetoothctl power off"
+            :visible true)
+
+      (tile :icon '󰍶'
+            :label "Do Not Disturb"
+            :enabled { notification_modes =~ "dnd" ? true : false }
+            :onenable "makoctl mode -a dnd"
+            :ondisable "makoctl mode -r dnd"
+            :visible true
+            :class "dnd")
+    )
+    (box :class "tiles tiles2"
+         :visible true
+      (tile :icon '󰀝'
+            :label "Airplane Mode"
+            :enabled { (network_status != "full" && network_status != "partial") && bluetooth_powered != "yes" ? true : false }
+            :onenable "bluetoothctl power off; nmcli n off"
+            :ondisable "bluetoothctl power on; nmcli n on")
+      (tile :icon '󰻂'
+            :label "Screen Record"
+            :enabled "${is_recording}"
+            :onenable "hyprctl dispatch exec \"sh $HOME/.config/eww/scripts/screen-recording.sh\" >> /dev/null"
+            :ondisable "kill $(cat $HOME/.cache/recording.pid)"
+            :class "screen-rec")
+      (tile :icon '󰖔'
+            :label "Night Light"
+            :enabled "${night_light}"
+            :onenable "hyprctl dispatch exec \"sh $HOME/.config/eww/scripts/night-light.sh\""
+            :ondisable "kill $(cat $HOME/.cache/night-light.pid)"
+            :class "night-light")
+    )
+  )
+)
+
+(defwidget tile [ ?class icon label ?onclickarrow ?enabled onenable ondisable ?visible ?min-width ]
+  (checkbox :onchecked "${onenable}"
+            :onunchecked "${ondisable}"
+            :visible { visible == "" || visible ? true : false }
+            :checked { enabled == "" || !enabled ? false : true }
+            :class "tile-checkbox ${class}"
+
+    (box :class "tile"
+         :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)
+    )
+  )
+)
diff --git a/eww/widgets/control-center/toggles.yuck b/eww/widgets/control-center/toggles.yuck
deleted file mode 100644
index 998e971..0000000
--- a/eww/widgets/control-center/toggles.yuck
+++ /dev/null
@@ -1,61 +0,0 @@
-(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
-               :class "dnd")
-    )
-    (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 ${class}"
-
-    (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)
-    )
-  )
-)
diff --git a/eww/widgets/separator.yuck b/eww/widgets/separator.yuck
new file mode 100644
index 0000000..ddad3c3
--- /dev/null
+++ b/eww/widgets/separator.yuck
@@ -0,0 +1,4 @@
+(defwidget separator [ ?orientation ?alpha ?style ]
+  (box :class "separator ${ orientation == '' || orientation == 'horizontal' ? 'horizontal' : 'vertical' }"
+       :style "opacity: ${ alpha == '' ? 1 : alpha }; ${style}")
+)
diff --git a/eww/windows/bar.yuck b/eww/windows/bar.yuck
index c4ab4b7..09c082f 100644
--- a/eww/windows/bar.yuck
+++ b/eww/windows/bar.yuck
@@ -7,19 +7,25 @@
 (include "widgets/bar/window.yuck")
 (include "widgets/bar/network.yuck")
 (include "widgets/bar/battery.yuck")
+(include "widgets/bar/hardware.yuck")
 
 (defwindow bar 
     :monitor 0
     :geometry (geometry :width "100%"
-                        :height "44px"
+                        :height "50px"
                         :anchor "top center")
     :stacking "fg"
     :exclusive true
     :namespace "eww-bar"
+  (box :class "bar"
+       :vexpand true
+       :hexpand false
     (centerbox :orientation "horizontal"
       (box :class "widgets-left"
            :halign "start"
            :space-evenly false
+           :vexpand true
+
         (logo)
         (workspaces)
         (window)
@@ -27,12 +33,16 @@
       (box :class "widgets-center"
            :halign "center"
            :space-evenly false
+           :vexpand true
+
         (clock)
         (media)
       )
       (box :class "widgets-right"
            :halign "end"
            :space-evenly false
+           :vexpand true
+
         (systray :spacing 0
                  :orientation "horizontal"
                  :space-evenly false
@@ -46,4 +56,5 @@
         (cc-toggle)
       )
     )
+  )
 )
diff --git a/eww/windows/calendar-window.yuck b/eww/windows/calendar-window.yuck
index 4d8213b..fecc66b 100644
--- a/eww/windows/calendar-window.yuck
+++ b/eww/windows/calendar-window.yuck
@@ -9,8 +9,11 @@
          :space-evenly false
          :orientation "vertical"
 
-        (label :class "calendar-header"
-               :text "${month-name} ${day}, ${year}")
+        (label :class "time"
+               :text { formattime(EWW_TIME, "%H:%M") })
+
+        (label :class "date"
+               :text { formattime(EWW_TIME, "%B %d, %Y") })
         (calendar :class "month-calendar"
                   :show-details true
                   :show-heading true
diff --git a/eww/windows/control-center.yuck b/eww/windows/control-center.yuck
index 0a97cfa..4fdb2e5 100644
--- a/eww/windows/control-center.yuck
+++ b/eww/windows/control-center.yuck
@@ -1,11 +1,12 @@
 (include "widgets/control-center/top-bar.yuck")
 (include "widgets/control-center/notifications.yuck")
 (include "widgets/control-center/notification.yuck")
-(include "widgets/control-center/toggles.yuck")
+(include "widgets/control-center/tiles.yuck")
 
 (defwindow control-center []
     :monitor 0
     :geometry (geometry :width "500px"
+                        :height "90%"
                         :anchor "top right")
     :stacking "overlay"
     :exclusive false
@@ -15,10 +16,23 @@
          :orientation "vertical"
          :space-evenly false
         (top-bar)
-        (toggles)
-        (big-media :show-album-bg true
-                   :show-album-image true
-                   :visible { json_media == "" || (json_media.title == "null" && json_media.artist == "null") ? false : true })
+        (tiles)
+        (revealer :reveal { window_state_floating-media != "open" }
+                  :transition "slideup"
+                  :duration "380ms"
+          (big-media :show-album-bg true
+                     :show-album-image true
+                     :visible { json_media == "" || (json_media.title == "null" 
+                                && json_media.artist == "null") ? false : true })
+        )
         (notifications)
+        (box :class "bottom button-row"
+             :halign "end"
+             :space-evenly false
+          (button :class "clear-all"
+                  :onclick "sh scripts/notification-clear.sh" 
+                  :visible { arraylength(json_notification_history["history"]) > 0 }
+          "󰎟  Clear")
+        )
     )
 )
diff --git a/eww/windows/floating-media.yuck b/eww/windows/floating-media.yuck
index 95f9fe7..0563287 100644
--- a/eww/windows/floating-media.yuck
+++ b/eww/windows/floating-media.yuck
@@ -1,7 +1,7 @@
 (defwindow floating-media []
     :monitor 0
     :geometry (geometry :anchor "top center"
-                        :width "400px")
+                        :width "450px")
     :exclusive false
     :stacking "fg"
     :focusable false
@@ -9,8 +9,15 @@
   (box :class "floating-media"
        :orientation "vertical"
        :space-evenly false
+       :visible { json_media == "" || (json_media.title == "null" 
+                              && json_media.artist == "null") ? false : true }
+
     (big-media :show-album-bg true
                :album-image-size 124
-               :show-album-image true)
+               :show-album-image true
+               :style "margin: 16px; margin-top: 0; box-shadow: 
+                              0 5px 6px 1px rgba(0, 0, 0, .6), 
+                              inset 0 0 0 200px rgba(0, 0, 0, .52);"
+               :visible true)
   )
 )
diff --git a/eww/windows/floating-notifications.yuck b/eww/windows/floating-notifications.yuck
new file mode 100644
index 0000000..25c4fab
--- /dev/null
+++ b/eww/windows/floating-notifications.yuck
@@ -0,0 +1,114 @@
+(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"
+       :space-evenly false
+       :hexpand true
+       :vexpand false
+
+    (box :class "notifications"
+         :space-evenly false
+         :orientation "vertical"
+
+      (for item in { json_popup_notifications["notifications"] }
+        (floating-notification :summary "${item.summary.data}"
+                               :body "${item.body.data}"
+                               :image "${item.app-icon.data}"
+                               :app-name "${item.app-name.data}"
+                               :onhoverlost "sh scripts/notification-popup-remove.sh ${item.id.data}")
+      )
+    )
+
+    (box :visible { arraylength(json_popup_notifications?.["notifications"]) > 0 }
+         :orientation "horizontal"
+         :valign "end"
+         :class "bottom"
+         :space-evenly true
+         :vexpand false
+
+      (box :class "left"
+           :space-evenly false
+        (box :space-evenly false
+             :class "tip"
+             :valign "center"
+          (label :text "󱧡"
+                 :class "icon")
+          (label :halign "start"
+                 :text "Hover to dismiss"
+                 :yalign 0.5)
+        )
+      )
+
+      (box :class "right"
+           :space-evenly false
+           :halign "end"
+        (eventbox :class "button"
+                  :onclick "sh ${EWW_CONFIG_DIR}/scripts/eww-window.sh close floating-notifications; ${EWW_CMD} update 'json_popup_notifications={\"notifications\": []}'"
+          (box :class "clear-all"
+               :space-evenly false
+
+            (label :text "󰎟"
+                   :class "icon")
+            (label :text "Clear all")
+          )
+        )
+      )
+    )
+  )
+)
+
+(defwidget floating-notification [ summary body image app-name ?onhoverlost ]
+  (eventbox :onhoverlost "${onhoverlost}"
+            :class "floating-notification-eventbox"
+    (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"
+                 :markup "${summary}"
+                 :xalign 0)
+
+          (label :class "body"
+                 :markup "${body}"
+                 :xalign 0
+                 :wrap true
+                 :show-truncated false)
+        )
+      )
+    )
+  )
+)
diff --git a/eww/windows/hardware-monitor.yuck b/eww/windows/hardware-monitor.yuck
new file mode 100644
index 0000000..8ce9110
--- /dev/null
+++ b/eww/windows/hardware-monitor.yuck
@@ -0,0 +1,14 @@
+(defwindow hardware-monitor []
+  :monitor 0
+  :geometry (geometry :width "320"
+                      :anchor "top right")
+
+  :exclusive 0
+  :namespace "eww-hardware"
+  :focusable false
+  :stacking "fg"
+
+  (box :class "hardware-monitor"
+    ; TODO
+  )
+)
diff --git a/eww/windows/unused/floating-notifications.yuck b/eww/windows/unused/floating-notifications.yuck
deleted file mode 100644
index c8eb3c6..0000000
--- a/eww/windows/unused/floating-notifications.yuck
+++ /dev/null
@@ -1,63 +0,0 @@
-(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)
-            )
-        )
-    )
-)
diff --git a/eww/windows/volume-control.yuck b/eww/windows/volume-control.yuck
index a765d85..2c61f00 100644
--- a/eww/windows/volume-control.yuck
+++ b/eww/windows/volume-control.yuck
@@ -18,7 +18,8 @@
     (output-slider)
     (source-slider)
 
-    (box :class "separator")
+    (separator :orientation "vertical"
+               :alpha 0.5)
 
     (box :class "vertical button-row"
          :orientation "vertical"
diff --git a/eww/windows/volume-popup.yuck b/eww/windows/volume-popup.yuck
index b814559..d386a5f 100644
--- a/eww/windows/volume-popup.yuck
+++ b/eww/windows/volume-popup.yuck
@@ -11,5 +11,6 @@
   (box :class "volume-popup"
     (output-slider)
     (source-slider)
+    ; TODO
   )
 )