Fix search

assets/css/app.css

@@ -6,4 +6,8 @@
 .size-256 {
   height: 256px;
   width: 256px;
+}
+
+.is-fullwidth {
+  width: 100%;
 }

lib/freedive_web/live/liliform_live.ex

@@ -36,7 +36,13 @@ defmodule FreediveWeb.LiliformLive do
       end
 
       def(handle_event("search", %{"value" => query}, socket)) do
-        items = search(query)
+        filtered_items =
+          FreediveWeb.LiliformLive.filter(
+            socket.assigns.items_all,
+            FreediveWeb.LiliformLive.get_active_filter(socket.assigns.filters)
+          )
+
+        items = search(filtered_items, query)
         socket = assign(socket, :items, items)
         {:noreply, socket}
       end
@@ -50,9 +56,7 @@ defmodule FreediveWeb.LiliformLive do
           assign(
             socket,
             :filters,
-            Enum.map(socket.assigns.filters, fn filter ->
-              Map.put(filter, :active, filter.key == key)
-            end)
+            FreediveWeb.LiliformLive.update_active_filter(socket.assigns.filters, key)
           )
 
         {:noreply, socket}
@@ -82,6 +86,7 @@ defmodule FreediveWeb.LiliformLive do
                   assign(socket, %{selected_item: item, details: nil})
               end
           end
+
         {:noreply, socket}
       end
     end
@@ -89,7 +94,7 @@ defmodule FreediveWeb.LiliformLive do
 
   @callback items() :: [map]
   @callback filters() :: [map]
-  @callback search(query :: String.t()) :: [map]
+  @callback search(items :: [map], query :: String.t()) :: [map]
 
   def filter(items, key) do
     case key do
@@ -97,11 +102,20 @@ defmodule FreediveWeb.LiliformLive do
         items
 
       _ ->
-        items |> Enum.filter(fn {_name, item} -> item[key] == true end)
+        items
+        |> Enum.filter(fn {_name, item} -> item[key] == true end)
+        |> Enum.into(%{}, fn {name, item} -> {name, item} end)
     end
   end
 
   def get_active_filter(filters) do
     filters |> Enum.find(& &1.active) |> Map.get(:key)
   end
+
+  def update_active_filter(filters, key) do
+    filters
+    |> Enum.map(fn filter ->
+      Map.put(filter, :active, filter.key == key)
+    end)
+  end
 end

lib/freedive_web/live/service_live.ex

@@ -43,8 +43,7 @@ defmodule FreediveWeb.ServiceLive do
         name: "httpd",
         path: "/services/httpd",
         icon: "globe",
-        description:
-          "Hypertext Transfer Protocol Daemon",
+        description: "Hypertext Transfer Protocol Daemon",
         enabled: false,
         running: false
       }
@@ -68,11 +67,12 @@ defmodule FreediveWeb.ServiceLive do
     ]
   end
 
-  def search(query) do
-    items()
-    |> Enum.filter(fn item ->
-      String.contains?(String.downcase(item.name), String.downcase(query))
+  def search(items, query) do
+    items
+    |> Enum.filter(fn {name, _item} ->
+      String.contains?(String.downcase(name), String.downcase(query))
     end)
+    |> Enum.into(%{}, fn {name, item} -> {name, item} end)
   end
 end
 
@@ -103,13 +103,24 @@ defmodule FreediveWeb.ServiceLive.Components do
     </.link>
 
     <.panel_block_div>
-      <div class="columns">
-        <.title class="column">
-          <%= @selected_item.name %>
-        </.title>
-        <.subtitle class="column">
-          <%= @selected_item.description %>
-        </.subtitle>
+      <div class="column is-narrow">
+        <.icon for={@selected_item.name} color="auto" aria-hidden="true" />
+      </div>
+      <div class="columns is-vcentered is-fullwidth">
+        <div class="column is-narrow">
+          <.title>
+            <%= @selected_item.name %>
+          </.title>
+        </div>
+        <div class="column">
+          <.subtitle>
+            <%= @selected_item.description %>
+          </.subtitle>
+        </div>
+        <div class="column is-narrow">
+          <.icon for="running" color="auto" aria-hidden="true" />
+          <.icon for="enabled" color="auto" aria-hidden="true" />
+        </div>
       </div>
     </.panel_block_div>
     """

lib/liliform/icon.ex

@@ -135,6 +135,12 @@ defmodule Liliform.Icon do
       "system" -> :bot
       "account" -> :user
       "all" -> :infinity
+      "pf" -> :shield
+      "sshd" -> :lock
+      "ntpdate" -> :clock
+      "httpd" -> :globe
+      "running" -> :circle_play
+      "enabled" -> :circle_check
       lucide_name -> String.to_atom(lucide_name)
     end
   end