feat: eww new era

hypr-configs/hyprland/eww/_definitions.yuck

@@ -62,7 +62,7 @@
 
 ; Workspaces
 (defvar showNoOfWindows false)
-(defpoll workspacesJson :initial "[]" :interval "60s" "./scripts/workspace/get-workspaces")
+(deflisten workspacesJson :initial "[]" "./scripts/workspace/get-workspaces")
 (deflisten currentWorkspace :initial "1" "./scripts/workspace/get-active")
 
 ; Playerctl

hypr-configs/hyprland/eww/assets/scss/_global.scss

@@ -3,9 +3,9 @@
 }
 
 .widget {
-  padding: get-token(padding, small);
+  margin: get-token(margin);
-  margin: get-token(margin, small);
+  padding: get-token(padding);
-  border-radius: get-token(border-radius, small);
+  border-radius: get-token(border-radius);
   background-color: $surface0;
 }
 
@@ -18,8 +18,8 @@
 }
 
 .icon {
-  font-size: get-token(font-sizes);
   font-family: "Symbols Nerd Font";
+  font-size: get-token(font-sizes, small);
 }
 
 .popup {

hypr-configs/hyprland/eww/assets/scss/_modules.scss

@@ -2,7 +2,7 @@
   @extend .widget;
 
   label {
-    font-size: 20px;
+    font-size: get-token(font-sizes, large);
     font-weight: bold;
   }
 }
@@ -41,7 +41,7 @@
     border-radius: get-token(border-radius);
     transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms;
 
-    &.current {
+    &.active {
       min-height: 42px;
 
       background-color: $accent;
@@ -49,8 +49,39 @@
   }
 }
 
+.dots-workspaces {
+  @extend .widget;
+
+  .workspace {
+    label {
+      @extend .icon;
+    }
+
+    &.empty {
+      color: transparentize($white, 0.8);
+    }
+
+    &.occupied {
+      // color: $surface2;
+      color: transparentize($white, 0.4);
+    }
+
+    &.active {
+      color: $white;
+    }
+  }
+}
+
 .bar-media-player {
   @extend .widget;
+
+  .player-controls {
+    label {
+      @extend .icon;
+
+      font-size: get-token(font-sizes, large);
+    }
+  }
 }
 
 .media-player {
@@ -69,11 +100,8 @@
   }
 
   .player-controls {
-    * {
-      font-size: 64px;
-    }
-
     label {
+      font-size: 64px;
       padding: 16px 0px;
     }
   }

hypr-configs/hyprland/eww/assets/scss/_native.scss

@@ -71,10 +71,6 @@ menu {
     padding: 2px 6px;
     border-radius: get-token(border-radius, small);
 
-    &:disabled label {
-      color: gray;
-    }
-
     &:hover {
       background-color: $accent;
     }

hypr-configs/hyprland/eww/assets/scss/_tokens.scss

@@ -6,8 +6,8 @@ $design-tokens: (
     extra: 30px,
   ),
   padding: (
-    small: 8px,
+    small: 6px,
-    default: 10px,
+    default: 8px,
     large: 12px,
   ),
   margin: (
@@ -16,9 +16,10 @@ $design-tokens: (
     large: 6px,
   ),
   border-radius: (
-    small: 8px,
+    small: 6px,
     default: 10px,
-    large: 16px,
+    large: 12px,
+    extra: 16px,
   ),
 );
 

hypr-configs/hyprland/eww/assets/scss/themes/camellia.scss

@@ -1,27 +1,28 @@
 // By Vixima
 
-$BG        : #17181C;
+$BG: #17181c;
-$MidBG    : #1E1F24;
+$MidBG: #1e1f24;
-$LightBG  : #26272B;
+$LightBG: #26272b;
 $DarkGrey: #333438;
-$LightGrey: #8F9093;
+$LightGrey: #8f9093;
-$DarkFG   : #B0B1B4;
+$DarkFG: #b0b1b4;
-$MidFG    : #CBCCCE;
+$MidFG: #cbccce;
-$FG       : #E4E5E7;
+$FG: #e4e5e7;
-$Pink     : #FA3867;
+$Pink: #fa3867;
-$Orange   : #F57F3D;
+$Orange: #f57f3d;
-$Gold     : #F5CA32;
+$Gold: #f5ca32;
-$Lime     : #65DB3D;
+$Lime: #65db3d;
-$Turquoise: #53DFCA;
+$Turquoise: #53dfca;
-$Blue     : #4CB2E5;
+$Blue: #4cb2e5;
-$Violet   : #9A57F5;
+$Violet: #9a57f5;
-$Red      : #FA4242;
+$Red: #fa4242;
+$white: #fff;
 
-$base: #17181C;
+$base: #17181c;
-$surface0: #1E1F24;
+$surface0: #1e1f24;
-$surface1: #26272B;
+$surface1: #26272b;
 $surface2: #333438;
-$white0: #E4E5E7;
+$white0: #e4e5e7;
 $white1: $FG;
 $white2: $FG;
 $red: $Red;

hypr-configs/hyprland/eww/assets/scss/themes/everblush.scss

@@ -11,7 +11,7 @@ $gray40: #8f9293;
 $gray30: #a8a9aa;
 $gray20: #c1c2c3;
 $gray10: #dadada;
-$white: #dadada;
+$white: #fff;
 
 $red: #e57474;
 $red_dark: #b35d5d;

hypr-configs/hyprland/eww/assets/scss/themes/feverblush.scss

@@ -11,9 +11,9 @@ $gray40: #8f9293;
 $gray30: #a8a9aa;
 $gray20: #c1c2c3;
 $gray10: #dadada;
-$white: #dadada;
+$white: #fff;
 
-$red: #FA4242;
+$red: #fa4242;
 
 $green: #8ccf7e;
 $green_dark: #70a665;

hypr-configs/hyprland/eww/assets/scss/themes/fullerene.scss

@@ -11,7 +11,7 @@ $gray40: #8d8d8d;
 $gray30: #a8a8a8;
 $gray20: #c6c6c6;
 $gray10: #e0e0e0;
-$white: #f4f4f4;
+$white: #fff;
 
 $red: #c1374b;
 $red_dark: #902c3b;

hypr-configs/hyprland/eww/scripts/workspace/get-workspaces

@@ -1,9 +1,15 @@
 #!/usr/bin/env bash
 
-spaces() {
+NUMBER_OF_WORKSPACES=6
+
+workspaces() {
     WORKSPACE_WINDOWS=$(hyprctl workspaces -j | jq 'map({key: .id | tostring, value: .windows}) | from_entries')
 
-    seq 1 5 | jq --argjson windows "${WORKSPACE_WINDOWS}" --slurp -Mc 'map(tostring) | map({id: ., windows: ($windows[.]//0)})'
+    seq 1 $NUMBER_OF_WORKSPACES | jq --argjson windows "${WORKSPACE_WINDOWS}" --slurp -Mc 'map(tostring) | map({id: ., windows: ($windows[.]//0)})'
 }
 
-spaces
+workspaces
+
+socat -u UNIX-CONNECT:$XDG_RUNTIME_DIR/hypr/$HYPRLAND_INSTANCE_SIGNATURE/.socket2.sock - | while read -r line; do
+    workspaces
+done

hypr-configs/hyprland/eww/src/-components/_helpers.yuck

@@ -18,7 +18,8 @@
     (box
       :space-evenly false
       :orientation "v"
-      (label :class "icon" :text icon)
+      
+      (box (label :class "icon" :text icon))
       
       (revealer
         :reveal var

hypr-configs/hyprland/eww/src/-modules/_media.yuck

@@ -8,19 +8,25 @@
       :space-evenly false
       :spacing spacing-default
       
-      
       (eventbox
         :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
         :visible cover
         
         (image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
       
+      (box
+        :class "player-controls"
+        :orientation "v"
+        :space-evenly false
+        :spacing spacing-default
+        
+        
         (button :onclick "playerctl previous"
-        (label :class "icon" :text "󰒮"))
+          (label :text "󰒮"))
         (button :onclick "playerctl play-pause"
-        (label :class "icon" :text  { pstatus == "Playing" ? "" : ""}))
+          (label :text  { pstatus == "Playing" ? "" : ""}))
         (button :onclick "playerctl next"
-        (label :class "icon" :text "󰒭")))))
+          (label :text "󰒭"))))))
 
 (defwidget MediaPlayer [height]
   (box

hypr-configs/hyprland/eww/src/-modules/_workspaces.yuck

@@ -17,4 +17,24 @@
           :onclick "hyprctl dispatch workspace ${workspace.id}"
           
           (box
-            :class `workspace ${workspace.id == currentWorkspace ? "current" : ""}`))))))
+          :class `workspace ${workspace.id == currentWorkspace ? "active" : ""}`))))))
+
+(defwidget DotsWorkspaces []
+  (eventbox
+    :cursor "pointer"
+    :onscroll "./scripts/workspace/set-active {} ${currentWorkspace}"
+    
+    (box
+      :class "dots-workspaces"
+      :space-evenly false
+      :orientation "v"
+      :spacing spacing-small
+      
+      (for workspace in {workspacesJson}
+        (button
+          :onclick "hyprctl dispatch workspace ${workspace.id}"
+          :class "workspace ${workspace.id == currentWorkspace ? "active" : ""} ${workspace.windows > 0 ? "occupied" : "empty"}"
+          
+          (label :class "icon" :text {workspace.windows > 0 ? "${workspace.id == currentWorkspace ? "" : ""}" : ""})
+        )
+      ))))

hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck

@@ -27,7 +27,7 @@
     :vexpand false
     
     (Logo)
-    (Workspaces)
+    (DotsWorkspaces)
     ; (Shortcuts)
     (RevealOnClick
       :var revealSystray