From da68c1b63110198955cca3dac5a34ec6a4e5b3b5 Mon Sep 17 00:00:00 2001
From: Harshad Sharma <harshad@sharma.io>
Date: Thu, 16 May 2024 19:29:56 +0530
Subject: [PATCH] Apply liliform to home live

---
 .../components/layouts/app.html.heex          |   6 +-
 lib/freedive_web/live/home_live.ex            | 174 +++++++++---------
 lib/freedive_web/live/liliform_live.ex        |   6 +-
 3 files changed, 97 insertions(+), 89 deletions(-)

diff --git a/lib/freedive_web/components/layouts/app.html.heex b/lib/freedive_web/components/layouts/app.html.heex
index 7ed365a..842d180 100644
--- a/lib/freedive_web/components/layouts/app.html.heex
+++ b/lib/freedive_web/components/layouts/app.html.heex
@@ -4,7 +4,7 @@
     <.navbar_brand class="ml-1">
       <.navbar_item>
         <.title is-4>
-          <.link href={~p"/"} class="has-text-dark">
+          <.link patch={~p"/"} class="has-text-dark">
             Freedive
           </.link>
         </.title>
@@ -103,7 +103,7 @@
               <.link href={~p"/packages"} class="navbar-item">
                 Packages
               </.link> --%>
-              <.link href={~p"/services"} class="navbar-item">
+              <.link patch={~p"/services"} class="navbar-item">
                 Services
               </.link>
             </.navbar_dropdown>
@@ -118,7 +118,7 @@
 
           <.navbar_dropdown>
             <%= if @current_user do %>
-              <.link href={~p"/users/settings"} class="navbar-item">
+              <.link patch={~p"/users/settings"} class="navbar-item">
                 Settings
               </.link>
               <.link href={~p"/users/log_out"} method="delete" class="navbar-item">
diff --git a/lib/freedive_web/live/home_live.ex b/lib/freedive_web/live/home_live.ex
index 28bb187..994811c 100644
--- a/lib/freedive_web/live/home_live.ex
+++ b/lib/freedive_web/live/home_live.ex
@@ -1,98 +1,102 @@
 defmodule FreediveWeb.HomeLive do
-  use FreediveWeb, :live_view
+  use FreediveWeb.LiliformLive
 
   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>
-
-        <.link patch={~p"/services"} class="panel-block pt-1">
-          <span class="panel-icon">
-            <.icon for="puzzle" color="auto" aria-hidden="true" />
-          </span>
-          <div class="mt-2 ml-2">Services</div>
-        </.link>
-        <.link patch={~p"/packages"} class="panel-block pt-1">
-          <span class="panel-icon">
-            <.icon for="package" color="auto" aria-hidden="true" />
-          </span>
-          <span class="mt-2 ml-2">Packages</span>
-        </.link>
-        <.link patch={~p"/updates"} class="panel-block pt-1">
-          <span class="panel-icon">
-            <.icon for="hard-drive-download" color="auto" aria-hidden="true" />
-          </span>
-          <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>
+    <.page name="Home" filters={@filters} details={@details}>
+      <FreediveWeb.HomeLive.Components.items_block
+        items={@items}
+        selected_item={@selected_item}
+        details={@details}
+      />
+    </.page>
     """
   end
 
-  def mount(_params, _session, socket) do
-    socket = assign(socket, query: "all")
-    {:ok, socket}
+  def items() do
+    %{
+      "services" => %{
+        name: "Services",
+        path: "/services",
+        icon: "blocks",
+        description: "Manage system services",
+        system: true,
+        account: false,
+        compute: false,
+        storage: false,
+        network: false
+      },
+      "accounts" => %{
+        name: "Account settings",
+        path: "/users/settings",
+        icon: "user-cog",
+        description: "Manage user accounts",
+        system: false,
+        account: true,
+        compute: false,
+        storage: false,
+        network: false
+      }
+    }
   end
 
-  def handle_event("color", %{"enable" => "true"}, socket) do
-    Freedive.Features.enable(:colorhash)
-    {:noreply, assign(socket, query: "color")}
+  def filters() do
+    [
+      %{
+        title: "System",
+        key: :system,
+        icon: "system",
+        active: true
+      },
+      %{
+        title: "Account",
+        key: :account,
+        icon: "account",
+        active: false
+      }
+      # %{
+      #   title: "Compute",
+      #   key: :compute,
+      #   icon: "compute",
+      #   active: false
+      # },
+      # %{
+      #   title: "Storage",
+      #   key: :storage,
+      #   icon: "storage",
+      #   active: false
+      # },
+      # %{
+      #   title: "Network",
+      #   key: :network,
+      #   icon: "network",
+      #   active: false
+      # }
+    ]
   end
 
-  def handle_event("color", %{"enable" => "false"}, socket) do
-    Freedive.Features.disable(:colorhash)
-    {:noreply, assign(socket, query: "grayscale")}
+  def search(items, query) do
+    Enum.filter(items, fn {_, item} ->
+      String.contains?(String.downcase(item.name), String.downcase(query))
+    end)
+    |> Enum.into(%{}, fn {name, item} -> {name, item} end)
+  end
+end
+
+defmodule FreediveWeb.HomeLive.Components do
+  use Liliform.Component
+  import Liliform.Icon
+
+  def items_block(assigns) do
+    ~H"""
+    <%= for {_name, item} <- @items do %>
+      <.link class="panel-block pt-1" patch={item.path}>
+        <span class="panel-icon">
+          <.icon for={item.icon} color="auto" aria-hidden="true" />
+        </span>
+        <div class="mt-2 ml-2"><%= item.name %></div>
+      </.link>
+    <% end %>
+    """
   end
 end
diff --git a/lib/freedive_web/live/liliform_live.ex b/lib/freedive_web/live/liliform_live.ex
index 98392f6..ef8a40c 100644
--- a/lib/freedive_web/live/liliform_live.ex
+++ b/lib/freedive_web/live/liliform_live.ex
@@ -48,7 +48,6 @@ defmodule FreediveWeb.LiliformLive do
         socket =
           case Kernel.length(Map.keys(searched_items)) == 1 do
             true ->
-              IO.inspect(Map.keys(searched_items) |> List.first())
               assign(socket, %{
                 selected_item: Map.get(searched_items, Map.keys(searched_items) |> List.first()),
                 details: true
@@ -103,6 +102,11 @@ defmodule FreediveWeb.LiliformLive do
 
         {:noreply, socket}
       end
+
+      def(handle_params(params, _url, socket)) do
+        socket = assign(socket, :query, Map.get(params, "search", ""))
+        {:noreply, socket}
+      end
     end
   end