Implement pseudoactive style and apply it to our KotoButton on hover / leave (removal).

Apply our pseudoactive styling to very specific KotoButtons in our KotoNav.

src/koto-button.c

@@ -191,6 +191,11 @@ static void koto_button_init(KotoButton * self) {
 
 	gtk_widget_add_controller(GTK_WIDGET(self), GTK_EVENT_CONTROLLER(self->left_click_gesture)); // Add our left click gesture
 	gtk_widget_add_controller(GTK_WIDGET(self), GTK_EVENT_CONTROLLER(self->right_click_gesture)); // Add our right click gesture
+
+	GtkEventController * motion = gtk_event_controller_motion_new(); // Create a new motion controller
+	g_signal_connect(motion, "enter", G_CALLBACK(koto_button_handle_mouse_enter), self); // Handle mouse enter on motion
+	g_signal_connect(motion, "leave", G_CALLBACK(koto_button_handle_mouse_leave), self); // Handle mouse leave on motion
+	gtk_widget_add_controller(GTK_WIDGET(self), motion);
 }
 
 static void koto_button_constructed(GObject * obj) {
@@ -308,6 +313,40 @@ void koto_button_flip(KotoButton * self) {
 	koto_button_show_image(self, !self->currently_showing_alt);
 }
 
+void koto_button_handle_mouse_enter(
+	GtkEventControllerMotion * controller,
+	double x,
+	double y,
+	gpointer user_data
+) {
+	(void) controller;
+	(void) x;
+	(void) y;
+
+	KotoButton * self = user_data;
+
+	if (!KOTO_IS_BUTTON(self)) { // Not a button
+		return;
+	}
+
+	koto_button_set_pseudoactive_styling(self); // Set to be pseudoactive in styling
+}
+
+void koto_button_handle_mouse_leave(
+	GtkEventControllerMotion * controller,
+	gpointer user_data
+) {
+	(void) controller;
+
+	KotoButton * self = user_data;
+
+	if (!KOTO_IS_BUTTON(self)) { // Not a button
+		return;
+	}
+
+	koto_button_unset_pseudoactive_styling(self); // Unset the pseudoactive styling
+}
+
 void koto_button_hide_image(KotoButton * self) {
 	if (!KOTO_IS_BUTTON(self)) { // Not a button
 		return;
@@ -318,6 +357,18 @@ void koto_button_hide_image(KotoButton * self) {
 	}
 }
 
+void koto_button_set_pseudoactive_styling(KotoButton * self) {
+	if (!KOTO_IS_BUTTON(self)) { // Not a button
+		return;
+	}
+
+	if (gtk_widget_has_css_class(GTK_WIDGET(self), "pseudoactive")) { // Already is pseudoactive
+		return;
+	}
+
+	gtk_widget_add_css_class(GTK_WIDGET(self), "pseudoactive"); // Set to pseudoactive
+}
+
 void koto_button_set_badge_text(
 	KotoButton * self,
 	gchar * text
@@ -550,6 +601,18 @@ void koto_button_unflatten(KotoButton * self) {
 	gtk_widget_remove_css_class(GTK_WIDGET(self), "flat");
 }
 
+void koto_button_unset_pseudoactive_styling(KotoButton * self) {
+	if (!KOTO_IS_BUTTON(self)) {
+		return;
+	}
+
+	if (!gtk_widget_has_css_class(GTK_WIDGET(self), "pseudoactive")) { // Don't have the CSS class
+		return;
+	}
+
+	gtk_widget_remove_css_class(GTK_WIDGET(self), "pseudoactive"); // Remove pseudoactive class
+}
+
 KotoButton * koto_button_new_plain(gchar * label) {
 	return g_object_new(
 		KOTO_TYPE_BUTTON,

src/koto-button.h

@@ -75,8 +75,22 @@ void koto_button_add_click_handler(
 
 void koto_button_flip(KotoButton * self);
 
+void koto_button_handle_mouse_enter(
+	GtkEventControllerMotion * controller,
+	double x,
+	double y,
+	gpointer user_data
+);
+
+void koto_button_handle_mouse_leave(
+	GtkEventControllerMotion * controller,
+	gpointer user_data
+);
+
 void koto_button_hide_image(KotoButton * self);
 
+void koto_button_set_pseudoactive_styling(KotoButton * self);
+
 void koto_button_set_badge_text(
 	KotoButton * self,
 	gchar * text
@@ -119,5 +133,6 @@ void koto_button_show_image(
 );
 
 void koto_button_unflatten(KotoButton * self);
+void koto_button_unset_pseudoactive_styling(KotoButton * self);
 
 G_END_DECLS

theme/_button.scss

@@ -12,6 +12,6 @@
 	}
 
 	&.active > image {
-		color: $green;
+		color: $koto-primary-color;
 	}
 }

theme/_primary-nav.scss

@@ -1,11 +1,29 @@
 .primary-nav {
-	padding: 20px;
+	padding: 10px 0;
 
 	& > viewport > box {
 		& > .koto-button, // Direct buttons like Home
 		& > .expander > .expander-header { // Expander Headers
 			font-size: large;
-			padding: 10px 0;
+			padding-top: 10px;
+			padding-bottom: 10px;
+		}
+
+		& > .koto-button, // Direct buttons like Home
+		& > .expander > .expander-header, // Expander Headers
+		& > .expander revealer .koto-button { // Expander revealer Buttons
+			margin-left: 10px;
+			margin-right: 10px;
+			padding-left: 10px;
+			padding-right: 10px;
+		}
+
+		& > .koto-button, // Direct buttons like Home
+		& > .expander revealer .koto-button { // Expander revealer Buttons
+			&.pseudoactive { // When hovering or explicit request to show as active
+				background-color: $primary-nav-button-active-color;
+				border-radius: 10px;
+			}
 		}
 
 		& > .expander {

theme/variants/dark/_vars.scss

@@ -18,6 +18,8 @@ $button-normal-color-border: black;
 
 $input-background: $bg-primary;
 
+$primary-nav-button-active-color: $bg-secondary;
+
 $artist-list-bg: $bg-secondary;
 $player-bar-icon-color: $darkgrey;
 

theme/variants/gruvbox/_vars.scss

@@ -18,6 +18,8 @@ $button-normal-color-border: black;
 
 $input-background: $bg-primary;
 
+$primary-nav-button-active-color: $bg-secondary;
+
 $artist-list-bg: $bg-secondary;
 $player-bar-icon-color: #423C3A;
 

theme/variants/light/_vars.scss

@@ -18,6 +18,8 @@ $button-normal-color-border: $darkgrey;
 
 $input-background: $bg-primary;
 
+$primary-nav-button-active-color: $bg-secondary;
+
 $artist-list-bg: $bg-secondary;
 $player-bar-icon-color: $darkgrey;