Improve icon colors, test colorhash feature flag (needs page refresh)

.gitignore

@@ -46,3 +46,6 @@ npm-debug.log
 
 # FreeBSD package
 *.pkg 
+
+# Local temp
+_attic/

lib/freedive_web/live/liliform_live.ex

@@ -0,0 +1,79 @@
+defmodule FreediveWeb.LiliformLive do
+  use FreediveWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.block class="px-2 py-4">
+      <.panel is-info>
+        <.panel_heading>
+          Home
+        </.panel_heading>
+
+        <.panel_tabs is-hidden-mobile>
+          <a class="is-active">All</a>
+          <a>Compute</a>
+          <a>Storage</a>
+          <a>Network</a>
+          <a>System</a>
+        </.panel_tabs>
+
+        <.panel_tabs is-hidden-tablet>
+          <a title="All" is-active>
+            <.icon for="all" color="auto" />
+          </a>
+          <a title="Compute">
+            <.icon for="compute" color="auto" />
+          </a>
+          <a title="Storage">
+            <.icon for="storage" color="auto" />
+          </a>
+          <a title="Network">
+            <.icon for="network" color="auto" />
+          </a>
+          <a title="System">
+            <.icon for="system" color="auto" />
+          </a>
+        </.panel_tabs>
+
+        <.panel_block>
+          <.control has-icons-left>
+            <input
+              class="input is-info"
+              type="text"
+              placeholder="Search"
+              name="search"
+              value={@query}
+            />
+            <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
+          </.control>
+        </.panel_block>
+      </.panel>
+    </.block>
+    <.section>
+      <.box>
+        <.button phx-click="color" phx-value-enable="true">
+          Color
+        </.button>
+        <.button phx-click="color" phx-value-enable="false">
+          Grayscale
+        </.button>
+      </.box>
+    </.section>
+    """
+  end
+
+  def mount(_params, _session, socket) do
+    socket = assign(socket, query: "all")
+    {:ok, socket}
+  end
+
+  def handle_event("color", %{"enable" => "true"}, socket) do
+    Freedive.Features.enable(:colorhash)
+    {:noreply, assign(socket, query: "color")}
+  end
+
+  def handle_event("color", %{"enable" => "false"}, socket) do
+    Freedive.Features.disable(:colorhash)
+    {:noreply, assign(socket, query: "grayscale")}
+  end
+end

lib/liliform/colorhash.ex

@@ -3,6 +3,7 @@ defmodule Liliform.Colorhash do
   Given a string returns HSL color.
   """
   alias Freedive.Features
+  require Logger
 
   @seed "zeni"
   @default_color {0, 0, 0}
@@ -20,6 +21,7 @@ defmodule Liliform.Colorhash do
   """
   def hsl(input, raw: true) do
     if Features.enabled?(:colorhash) do
+      Logger.debug("Colorhash enabled")
       input = String.downcase(input) <> @seed
       hash = :erlang.phash2(input, 2_147_483_647)
 
@@ -29,6 +31,7 @@ defmodule Liliform.Colorhash do
 
       {hue, saturation, lightness}
     else
+      Logger.debug("Colorhash disabled")
       @default_color
     end
   end

lib/liliform/icon.ex

@@ -17,6 +17,7 @@ defmodule Liliform.Icon do
   """
   use Liliform.Component
   alias Liliform.Colorhash
+  alias Freedive.Features
 
   @doc """
   Renders an icon.
@@ -71,7 +72,7 @@ defmodule Liliform.Icon do
     ~H"""
     <span class="icon-text">
       <span class={["icon", @class]} {@rest}>
-        <.icon_svg for={@for} height={@size} width={@size} color={icon_color(assigns)} />
+        <.icon_svg for={@for} height={@size} width={@size} {icon_color(assigns)} />
       </span>
       <%= if @inner_block != [] do %>
         <span>
@@ -92,10 +93,30 @@ defmodule Liliform.Icon do
   end
 
   defp icon_color(assigns) do
-    case assigns.color do
+    if Features.enabled?(:colorhash) do
-      nil -> ""
+      color =
-      "auto" -> Colorhash.hsl(assigns.for)
+        case assigns.color do
-      color -> color
+          nil -> ""
+          "auto" -> Colorhash.hsl(assigns.for)
+          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]
+      end
+    else
+      [class: "has-text-dark"]
     end
   end
 
@@ -113,6 +134,7 @@ defmodule Liliform.Icon do
       "network" -> :earth
       "system" -> :bot
       "account" -> :user
+      "all" -> :infinity
       lucide_name -> String.to_atom(lucide_name)
     end
   end