From ba3ad612dcdcea6967bd7f4779983b8607fd1b4c Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Fri, 4 Sep 2026 11:33:08 +0530
Subject: [PATCH] Divide panel into sections

---
 .gitignore                         |  2 ++
 ewwii.css                          | 15 +++++++++++++++
 nbcl/components/datetime_widg.nbcl | 14 +++++++++++++-
 nbcl/panel/panel_component.nbcl    | 21 +++++++++++++--------
 nbcl/panel/panel_section.nbcl      | 19 +++++++++++++++++++
 scss/colors/_glass.scss            |  5 +++++
 scss/panel/_panel.scss             |  2 ++
 scss/panel/_panelsection.scss      | 20 ++++++++++++++++++++
 8 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 nbcl/panel/panel_section.nbcl
 create mode 100644 scss/panel/_panelsection.scss

diff --git a/.gitignore b/.gitignore
index d75b394..8482489 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,5 @@ nbcl/config/config.nbcl
 scss/local/
 dprint.json
 ewwii.core
+nbcl/test/
+scss/test/
diff --git a/ewwii.css b/ewwii.css
index 8e8f999..2931b38 100644
--- a/ewwii.css
+++ b/ewwii.css
@@ -7,6 +7,21 @@
 .ewwii_panel {
 	background-color: rgba(95, 95, 95, 0.404);
 }
+.ewwii_panel .panel_section {
+	background-color: rgba(110, 150, 72, 0.733);
+	padding: 0;
+	font-size: 14px;
+	font-family: "Fragment Mono";
+}
+.ewwii_panel .panel_section.panel_section_left {
+	background-color: rgba(72, 134, 150, 0.733);
+}
+.ewwii_panel .panel_section.panel_section_center {
+	background-color: rgba(150, 114, 72, 0.733);
+}
+.ewwii_panel .panel_section.panel_section_right {
+	background-color: rgba(57, 148, 95, 0.733);
+}
 .ewwii_panel .textwidg {
 	background-color: rgba(72, 150, 98, 0.733);
 	padding: 0 0.2em;
diff --git a/nbcl/components/datetime_widg.nbcl b/nbcl/components/datetime_widg.nbcl
index 0eddec9..f72eaa4 100644
--- a/nbcl/components/datetime_widg.nbcl
+++ b/nbcl/components/datetime_widg.nbcl
@@ -9,4 +9,16 @@ component DateTimeWidg (widgname, widgtextvar) {
 		halign = "end"
 		height = config.panel_height
     }
-}
\ No newline at end of file
+}
+
+#-
+# Example usage
+		DateTimeWidg "paneldatewidg" {
+			widgname = "paneldatewidg"
+			widgtextvar = "date_ddM"
+		}
+		DateTimeWidg "paneltimewidg" {
+			widgname = "paneltimewidg"
+			widgtextvar = "time_hhmm"
+		}
+-#
\ No newline at end of file
diff --git a/nbcl/panel/panel_component.nbcl b/nbcl/panel/panel_component.nbcl
index 87877d7..7b6f54b 100644
--- a/nbcl/panel/panel_component.nbcl
+++ b/nbcl/panel/panel_component.nbcl
@@ -1,4 +1,5 @@
 import "nbcl/components/datetime_widg.nbcl" as datetime_widg { * }
+import "nbcl/panel/panel_section.nbcl" as datetime_widg { * }
 
 component EwwiiPanel () {
   Box {
@@ -7,15 +8,19 @@ component EwwiiPanel () {
 	class = "ewwii_panel"
 	height = config.panel_height
 	width = config.panel_width
-	space_evenly = false
-
-	DateTimeWidg "paneldatewidg" {
-		widgname = "paneldatewidg"
-		widgtextvar = "date_ddM"
+	space_evenly = true
+	
+	PanelSection "section_left" {
+		section_side = "left"
+		widg_align = "start"
 	}
-	DateTimeWidg "paneltimewidg" {
-		widgname = "paneltimewidg"
-		widgtextvar = "time_hhmm"
+	PanelSection "section_left" {
+		section_side = "center"
+		widg_align = "center"
+	}
+	PanelSection "section_left" {
+		section_side = "right"
+		widg_align = "end"
 	}
   }
 }
\ No newline at end of file
diff --git a/nbcl/panel/panel_section.nbcl b/nbcl/panel/panel_section.nbcl
new file mode 100644
index 0000000..19f9386
--- /dev/null
+++ b/nbcl/panel/panel_section.nbcl
@@ -0,0 +1,19 @@
+# 3 Sections of the panel
+component PanelSection (section_side, widg_align) {
+  Box {
+    orinetation = "horizontal"
+    halign = "center"
+	class = "panel_section panel_section_" + section_side
+	height = config.panel_height
+	width = config.panel_width/3
+	space_evenly = true
+
+	Label {
+		class = "panel_section_widg"
+		text = "panel_section_" + section_side
+		halign = widg_align
+		height = config.panel_height
+        width = "100%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/scss/colors/_glass.scss b/scss/colors/_glass.scss
index dfddee4..111e312 100644
--- a/scss/colors/_glass.scss
+++ b/scss/colors/_glass.scss
@@ -5,3 +5,8 @@
 // Common
 $primary_bg: rgba(95, 95, 95, 0.404);
 $primary_text_col: #ffffff;
+
+$panel_sections_bg: rgba(110, 150, 72, 0.733);
+$panel_section_left_bg: rgba(72, 134, 150, 0.733);
+$panel_section_center_bg: rgba(150, 114, 72, 0.733);
+$panel_section_right_bg: rgba(57, 148, 95, 0.733);
diff --git a/scss/panel/_panel.scss b/scss/panel/_panel.scss
index 71bc614..26a1762 100644
--- a/scss/panel/_panel.scss
+++ b/scss/panel/_panel.scss
@@ -1,9 +1,11 @@
 @use "../colors/glass" as *;
 @use "./panelwidgs" as *;
+@use "./panelsection" as *;
 
 /* Top bar */
 .ewwii_panel {
 	background-color: $primary_bg;
 
+	@include panelsection;
 	@include textwidgets;
 }
diff --git a/scss/panel/_panelsection.scss b/scss/panel/_panelsection.scss
new file mode 100644
index 0000000..a03f5a9
--- /dev/null
+++ b/scss/panel/_panelsection.scss
@@ -0,0 +1,20 @@
+@use "../colors/glass" as *;
+
+@mixin panelsection() {
+	.panel_section {
+		background-color: $panel_sections_bg;
+		padding: 0;
+		font-size: 14px;
+		font-family: "Fragment Mono";
+
+		&.panel_section_left {
+			background-color: $panel_section_left_bg;
+		}
+		&.panel_section_center {
+			background-color: $panel_section_center_bg;
+		}
+		&.panel_section_right {
+			background-color: $panel_section_right_bg;
+		}
+	}
+}