lib/freedive_web/components/layouts/app.html.heex

@@ -4,9 +4,7 @@
     <.navbar_brand class="ml-1">
       <.navbar_item>
         <.title is-4>
-          <.link patch={~p"/"} class="has-text-dark">
+          Freedive
-            Freedive
-          </.link>
         </.title>
       </.navbar_item>
 
@@ -14,7 +12,7 @@
     </.navbar_brand>
 
     <.navbar_menu id="navbar_top" class="mr-1">
-      <%!-- <%= if @current_user do %>
+      <%= if @current_user do %>
         <.navbar_start>
           <.navbar_item has-dropdown is-hoverable>
             <.navbar_link>
@@ -80,7 +78,7 @@
             </.navbar_dropdown>
           </.navbar_item>
         </.navbar_start>
-      <% end %> --%>
+      <% end %>
 
       <.navbar_end>
         <%= if @current_user do %>
@@ -96,14 +94,14 @@
             </.navbar_link>
 
             <.navbar_dropdown>
-              <%!-- <.link href={~p"/updates"} class="navbar-item">
+              <.link href={~p"/updates"} class="navbar-item">
                 Software updates
               </.link>
               <.navbar_divider />
               <.link href={~p"/packages"} class="navbar-item">
                 Packages
-              </.link> --%>
+              </.link>
-              <.link patch={~p"/services"} class="navbar-item">
+              <.link href={~p"/services"} class="navbar-item">
                 Services
               </.link>
             </.navbar_dropdown>
@@ -118,7 +116,7 @@
 
           <.navbar_dropdown>
             <%= if @current_user do %>
-              <.link patch={~p"/users/settings"} class="navbar-item">
+              <.link href={~p"/users/settings"} class="navbar-item">
                 Settings
               </.link>
               <.link href={~p"/users/log_out"} method="delete" class="navbar-item">

lib/freedive_web/live/home_live.ex

@@ -1,102 +1,98 @@
 defmodule FreediveWeb.HomeLive do
-  use FreediveWeb.LiliformLive
+  use FreediveWeb, :live_view
 
   def render(assigns) do
     ~H"""
-    <.page name="Home" filters={@filters} details={@details}>
+    <.block class="px-2 py-4">
-      <FreediveWeb.HomeLive.Components.items_block
+      <.panel is-info>
-        items={@items}
+        <.panel_heading>
-        selected_item={@selected_item}
+          Home
-        details={@details}
+        </.panel_heading>
-      />
+
-    </.page>
+        <.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>
     """
   end
 
-  def items() do
+  def mount(_params, _session, socket) do
-    %{
+    socket = assign(socket, query: "all")
-      "services" => %{
+    {:ok, socket}
-        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 filters() do
+  def handle_event("color", %{"enable" => "true"}, socket) do
-    [
+    Freedive.Features.enable(:colorhash)
-      %{
+    {:noreply, assign(socket, query: "color")}
-        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 search(items, query) do
+  def handle_event("color", %{"enable" => "false"}, socket) do
-    Enum.filter(items, fn {_, item} ->
+    Freedive.Features.disable(:colorhash)
-      String.contains?(String.downcase(item.name), String.downcase(query))
+    {:noreply, assign(socket, query: "grayscale")}
-    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

lib/freedive_web/live/liliform_live.ex

@@ -48,6 +48,7 @@ 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
@@ -102,11 +103,6 @@ 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
 

lib/freedive_web/live/service_live.ex

@@ -18,7 +18,7 @@ defmodule FreediveWeb.ServiceLive do
       "sshd" => %{
         name: "sshd",
         path: "/services/ssh",
-        icon: "lock",
+        icon: "blocks",
         description: "Secure Shell Daemon",
         enabled: true,
         running: true
@@ -102,28 +102,27 @@ defmodule FreediveWeb.ServiceLive.Components do
       <div class="mt-2 ml-2">Back</div>
     </.link>
 
-    <.panel_media>
+    <.panel_block_div>
-      <:icon>
+      <div class="column is-narrow">
-        <.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
+        <.icon for={@selected_item.name} color="auto" aria-hidden="true" />
-        <%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
+      </div>
-      </:icon>
+      <div class="columns is-vcentered is-fullwidth">
-
+        <div class="column is-narrow">
-      <.title is-4>
+          <.title is-4>
-        <%= @selected_item.name %>
+            <%= @selected_item.name %>
-      </.title>
+          </.title>
-      <.subtitle>
-        <%= @selected_item.description %>
-      </.subtitle>
-
-      <:actions>
-        <div class="columns">
-          <div class="column is-narrow">
-            <.icon for="running" color="auto" aria-hidden="true" />
-            <.icon for="enabled" color="auto" aria-hidden="true" />
-          </div>
         </div>
-      </:actions>
+        <div class="column">
-    </.panel_media>
+          <.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>
     """
   end
 

lib/liliform/icon.ex

@@ -83,24 +83,6 @@ defmodule Liliform.Icon do
     """
   end
 
-  @doc """
-  Renders an icon without the icon-text wrapper.
-  """
-  attr :for, :string, required: true, doc: "icon name"
-  attr :size, :string, default: nil, doc: "size of icon"
-  attr :color, :string, default: nil, doc: "color of icon"
-  attr :rest, :global
-
-  def icon_raw(assigns) do
-    assigns =
-      assigns
-      |> set_bulma_classes()
-
-    ~H"""
-    <.icon_svg for={@for} height={@size} width={@size} {icon_color(assigns)} {@rest} />
-    """
-  end
-
   defp icon_svg(assigns) do
     base_assigns =
       assigns
@@ -119,31 +101,19 @@ defmodule Liliform.Icon do
           color -> color
         end
 
-      auto_color =
+      case assigns.for do
-        case assigns.for do
+        "alert" -> [class: "has-text-danger"]
-          "alert" -> [class: "has-text-danger"]
+        "info" -> [class: "has-text-info"]
-          "info" -> [class: "has-text-info"]
+        "success" -> [class: "has-text-success"]
-          "success" -> [class: "has-text-success"]
+        "warning" -> [class: "has-text-warning"]
-          "warning" -> [class: "has-text-warning"]
+        "error" -> [class: "has-text-danger"]
-          "error" -> [class: "has-text-danger"]
+        "all" -> [color: "magenta"]
-          "all" -> [color: "magenta"]
+        "compute" -> [color: "blue"]
-          "compute" -> [color: "blue"]
+        "storage" -> [color: "green"]
-          "storage" -> [color: "green"]
+        "network" -> [color: "orange"]
-          "network" -> [color: "orange"]
+        "system" -> [color: "purple"]
-          "system" -> [color: "purple"]
+        "account" -> [color: "darkblue"]
-          "account" -> [color: "darkblue"]
+        _ -> [color: color]
-          _ -> [color: color]
-        end
-
-      case color do
-        "auto" ->
-          auto_color
-
-        "" ->
-          []
-
-        _ ->
-          [color: color]
       end
     else
       [class: "has-text-dark"]

lib/liliform/media.ex

@@ -24,7 +24,6 @@ defmodule Liliform.Media do
   @doc """
   Renders a media-left.
   """
-  attr :class, :string, default: "", doc: "additional classes"
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -35,7 +34,7 @@ defmodule Liliform.Media do
       |> set_bulma_classes()
 
     ~H"""
-    <figure class={["media-left", @class]} {@rest}>
+    <figure class="media-left" {@rest}>
       <%= render_slot(@inner_block) %>
     </figure>
     """
@@ -44,7 +43,6 @@ defmodule Liliform.Media do
   @doc """
   Renders a media-content.
   """
-  attr :class, :string, default: "", doc: "additional classes"
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -55,7 +53,7 @@ defmodule Liliform.Media do
       |> set_bulma_classes()
 
     ~H"""
-    <div class={["media-content", @class]} {@rest}>
+    <div class="media-content" {@rest}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -64,7 +62,6 @@ defmodule Liliform.Media do
   @doc """
   Renders a media-right.
   """
-  attr :class, :string, default: "", doc: "additional classes"
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -75,7 +72,7 @@ defmodule Liliform.Media do
       |> set_bulma_classes()
 
     ~H"""
-    <div class={["media-right", @class]} {@rest}>
+    <div class="media-right" {@rest}>
       <%= render_slot(@inner_block) %>
     </div>
     """

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={if filter.active, do: "gray", else: "auto"} />
+                <.icon for={filter.icon} color="auto" />
               </a>
             <% end %>
           </.panel_tabs>

lib/liliform/panel.ex

@@ -1,6 +1,5 @@
 defmodule Liliform.Panel do
   use Liliform.Component
-  import Liliform.Media
 
   @doc """
   Renders a panel.
@@ -82,37 +81,6 @@ defmodule Liliform.Panel do
     """
   end
 
-  @doc """
-  Renders panel-media.
-  """
-  attr :class, :string, default: "", doc: "additional classes"
-  attr :rest, :global
-
-  slot :icon, required: true
-  slot :actions, required: true
-  slot :inner_block, required: true
-
-  def panel_media(assigns) do
-    assigns =
-      assigns
-      |> set_bulma_classes()
-
-    ~H"""
-    <div class={["panel-block", @class]} {@rest}>
-      <.media class="is-fullwidth">
-        <.media_left>
-          <%= render_slot(@icon) %>
-        </.media_left>
-        <.media_content class="is-fullwidth">
-          <%= render_slot(@inner_block) %>
-        </.media_content>
-        <.media_right>
-          <%= render_slot(@actions) %>
-        </.media_right>
-      </.media>
-    </div>
-    """
-  end
 
   @doc """
   Renders a panel-tabs.