From 30e02f1c38019885ebe2cded45cca3bc6d12c3a2 Mon Sep 17 00:00:00 2001
From: Harshad Sharma <harshad@sharma.io>
Date: Thu, 16 May 2024 18:50:54 +0530
Subject: [PATCH] Highlight active icon

---
 lib/liliform/icon.ex | 38 +++++++++++++++++++++++++-------------
 lib/liliform/page.ex |  2 +-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/lib/liliform/icon.ex b/lib/liliform/icon.ex
index ca0fa3d..770025b 100644
--- a/lib/liliform/icon.ex
+++ b/lib/liliform/icon.ex
@@ -119,19 +119,31 @@ defmodule Liliform.Icon do
           color -> color
         end
 
-      case assigns.for do
-        "alert" -> [class: "has-text-danger"]
-        "info" -> [class: "has-text-info"]
-        "success" -> [class: "has-text-success"]
-        "warning" -> [class: "has-text-warning"]
-        "error" -> [class: "has-text-danger"]
-        "all" -> [color: "magenta"]
-        "compute" -> [color: "blue"]
-        "storage" -> [color: "green"]
-        "network" -> [color: "orange"]
-        "system" -> [color: "purple"]
-        "account" -> [color: "darkblue"]
-        _ -> [color: color]
+      auto_color =
+        case assigns.for do
+          "alert" -> [class: "has-text-danger"]
+          "info" -> [class: "has-text-info"]
+          "success" -> [class: "has-text-success"]
+          "warning" -> [class: "has-text-warning"]
+          "error" -> [class: "has-text-danger"]
+          "all" -> [color: "magenta"]
+          "compute" -> [color: "blue"]
+          "storage" -> [color: "green"]
+          "network" -> [color: "orange"]
+          "system" -> [color: "purple"]
+          "account" -> [color: "darkblue"]
+          _ -> [color: color]
+        end
+
+      case color do
+        "auto" ->
+          auto_color
+
+        "" ->
+          []
+
+        _ ->
+          [color: color]
       end
     else
       [class: "has-text-dark"]
diff --git a/lib/liliform/page.ex b/lib/liliform/page.ex
index 83dda23..fd99b2c 100644
--- a/lib/liliform/page.ex
+++ b/lib/liliform/page.ex
@@ -50,7 +50,7 @@ defmodule Liliform.Page do
                 phx-click="filter"
                 phx-value-key={filter.key}
               >
-                <.icon for={filter.icon} color="auto" />
+                <.icon for={filter.icon} color={if filter.active, do: "gray", else: "auto"} />
               </a>
             <% end %>
           </.panel_tabs>