Apply liliform components to home

lib/freedive_web/live/home_live.ex

@@ -3,9 +3,12 @@ defmodule FreediveWeb.HomeLive do
 
   def render(assigns) do
     ~H"""
-    <.section>
+    <.block class="px-2 py-4">
       <.panel is-info>
-        <.panel_heading>Home</.panel_heading>
+        <.panel_heading>
+          Home
+        </.panel_heading>
+
         <.panel_tabs is-hidden-mobile>
           <a class="is-active">All</a>
           <a>Compute</a>
@@ -13,21 +16,22 @@ defmodule FreediveWeb.HomeLive do
           <a>Network</a>
           <a>System</a>
         </.panel_tabs>
+
         <.panel_tabs is-hidden-tablet>
-          <a class="is-active" title="All">
-            <.icon for="infinity" color="auto" />
+          <a title="All" is-active>
+            <.icon for="all" color="auto" />
           </a>
           <a title="Compute">
-            <.icon for="binary" color="auto" />
+            <.icon for="compute" color="auto" />
           </a>
           <a title="Storage">
-            <.icon for="hard-drive" color="auto" />
+            <.icon for="storage" color="auto" />
           </a>
           <a title="Network">
-            <.icon for="earth" color="auto" />
+            <.icon for="network" color="auto" />
           </a>
           <a title="System">
-            <.icon for="bot" color="auto" />
+            <.icon for="system" color="auto" />
           </a>
         </.panel_tabs>
 
@@ -40,11 +44,10 @@ defmodule FreediveWeb.HomeLive do
               name="search"
               value={@query}
             />
-            <span class="icon is-left">
-              <Lucideicons.search aria-hidden="true" />
-            </span>
+            <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
           </.control>
         </.panel_block>
+
         <.link patch={~p"/services"} class="panel-block pt-1">
           <span class="panel-icon">
             <.icon for="puzzle" color="auto" aria-hidden="true" />
@@ -64,12 +67,32 @@ defmodule FreediveWeb.HomeLive do
           <span class="mt-2 ml-2">Software updates</span>
         </.link>
       </.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: "")
+    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